@charset "utf-8"; /*** 틀 ***/ .contentInner.w-full { padding: unset; padding-bottom: 5rem; width: 100%; max-width: unset; } .contentInner.w-full .inner { margin: 0 auto; width: 90%; max-width: 1412px; } .contentInner.w-full .subTitArea { padding-top: 5rem; } @media (max-width: 1200px) { .contentInner.w-full { padding-bottom: 4rem; } .contentInner.w-full .subTitArea { padding-top: 4rem; } } @media (max-width: 600px) { .contentInner.w-full { padding-bottom: 2.5rem; } .contentInner.w-full .subTitArea { padding-top: 2.5rem; } } /*** 목록 ***/ /* 정렬 및 검색 */ .SortSearch_wrap { background-color: #FAFAFA; } .SortSearch_wrap.mt { margin-top: 1%; } .SortSearch_wrap.mb { margin-bottom: 1%; } .SortSearch { display: flex; justify-content: space-between; padding: 1% 0; } .SortSearch .group { display: flex; gap: 3vw; align-items: center; } .SortSearch .Total_number { display: flex; } .SortSearch .Total_number p { display: flex; align-items: center; font-size: calc(12px + 0.4vw); font-weight: 600; color: #111; } .SortSearch .Total_number span { margin-right: 5px; } .SortSearch .Total_number .num { font-weight: 100; } .SortSearch .Total_number .line::after { display: inline-block; margin: 0 10px; width: 1px; height: 10px; background-color: #ddd; content: ""; } .SortSearch .sort ul { display: flex; } .SortSearch .sort li { font-size: calc(12px + 0.4vw); } .SortSearch .sort li:not(:last-child)::after { display: inline-block; margin: 0 10px; width: 1px; height: 10px; background-color: #ddd; content: ""; } .SortSearch .sort li.on { font-weight: 600; color: #111; } .SortSearch .Search { display: flex; align-items: stretch; padding: 0.6% 1%; border: 1px solid #ddd; overflow: hidden; background-color: #fff; border-radius: 5px; } .SortSearch .Search .search_box { flex-grow: 1; border: 0; font-size: calc(12px + 0.2vw); line-height: 2.8rem; } @media all and (max-width: 1200px) {} @media all and (max-width: 900px) {} @media all and (max-width: 600px) { .SortSearch { flex-direction: column; padding: 5vw 0; row-gap: 2vw; } } /* section_wrap */ .section_wrap { display: flex; flex-direction: column; margin: 3% 0; row-gap: 2vw; } @media all and (max-width: 600px) { .section_wrap { margin: 5% 0; row-gap: 10vw; } } /* section4 */ .section_4 { display: flex; flex-wrap: nowrap; flex-direction: row; } .slide4_title_group { padding-right: 2%; width: 17%; } .slide4_title_group>.group { display: flex; flex-direction: column; } .slide4_title .tit { font-size: calc(12px + 1.1vw); font-weight: 400; color: #222; } .slide4_title .tit_sub { margin: 6% 0; padding: 6% 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: calc(12px + 0.1vw); color: #222; } .btn_area_slide4 { display: flex; gap: 1vw; align-items: baseline; justify-content: space-between; } .btn_area_slide4 button { flex-shrink: 0; } .btn_area_slide4 .play { display: none; } .btn_area_slide4 .pagination { display: flex; gap: 0.5vw; align-items: baseline; font-size: calc(12px + 0.2vw); font-weight: 100; color: #ddd; } .btn_area_slide4 .swiper-pagination-current { font-weight: 500; color: #111; } .btn_area_slide4 .swiper-pagination-total { font-weight: 300; color: #666; } .slide4 { width: 83%; } .contentInner.w-full .slide4 .inner { margin: unset; width: unset; max-width: unset; } .slide4 .best-swiper .swiper-slide .img-box { padding-top: 100%; overflow: hidden; position: relative; border-radius: 20px; } .slide4 .best-swiper .swiper-slide .img-box a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .slide4 .best-swiper .swiper-slide .img-box img { width: 100%; height: 100%; object-fit: cover; } .slide4 .best-swiper .txt-box { display: flex; justify-content: center; margin-top: 1vw; } .slide4 .best-swiper .keyword_tit { font-size: calc(12px + 0.2vw); font-weight: 300; } .slide4 .best-swiper .txt-box .price-box .prev-price::after { display: block; position: absolute; top: 50%; left: 50%; width: 110%; height: 1px; background-color: #888; content: ""; transform: translate3d(-50%, -50%, 0); } @media all and (max-width: 1200px) { .slide4_title_group { width: 20%; } .slide4 { width: 80%; } } @media all and (max-width: 900px) { .slide4_title_group { width: 30%; } .slide4 { width: 70%; } } @media all and (max-width: 600px) { .section_4 { flex-direction: column; } .slide4_title_group { margin-bottom: 3%; padding-right: unset; width: unset; } .slide4_title .tit_sub { display: none; } .btn_area_slide4 .pagination { gap: 2vw; } .btn_area_slide4 .play, .btn_area_slide4 .pause { margin: 0 10px; order: 2; } .btn_area_slide4 .prev, .btn_area_slide4 .next { order: 3; } .btn_area_slide4 .pagination { order: 1; } .slide4 { width: 100%; } } /* section3 */ .section_3 { display: flex; flex-wrap: nowrap; flex-direction: row; } .slide3_title_group { padding-right: 2%; width: 17%; } .slide3_title_group>.group { display: flex; flex-direction: column; } .slide3_title .tit { font-size: calc(12px + 1.1vw); font-weight: 400; color: #222; word-wrap: break-word; } .slide3_title .tit_sub { margin: 6% 0; padding: 6% 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: calc(12px + 0.1vw); color: #222; } .btn_area_slide3 { display: flex; gap: 1vw; align-items: baseline; justify-content: space-between; } .btn_area_slide3 button { flex-shrink: 0; } .btn_area_slide3 .play { display: none; } .btn_area_slide3 .pagination { display: flex; gap: 0.5vw; align-items: baseline; font-size: calc(12px + 0.2vw); font-weight: 100; color: #ddd; } .btn_area_slide3 .swiper-pagination-current { font-weight: 500; color: #111; } .btn_area_slide3 .swiper-pagination-total { font-weight: 300; color: #666; } .slide3 { width: 83%; } .contentInner.w-full .slide3 .inner { margin: unset; width: unset; max-width: unset; } .slide3 .best-swiper .swiper-slide .img-box { padding-top: 100%; overflow: hidden; position: relative; border-radius: 20px; } .slide3 .best-swiper .swiper-slide .img-box a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .slide3 .best-swiper .swiper-slide .img-box img { width: 100%; height: 100%; object-fit: cover; } .slide3 .best-swiper .txt-box { display: flex; justify-content: center; margin-top: 1vw; } .slide3 .best-swiper .keyword_tit { font-size: calc(12px + 0.2vw); font-weight: 300; color: #fff; } .slide3 .best-swiper .txt-box .price-box .prev-price::after { display: block; position: absolute; top: 50%; left: 50%; width: 110%; height: 1px; background-color: #888; content: ""; transform: translate3d(-50%, -50%, 0); } @media all and (max-width: 1200px) { .slide3_title_group { width: 20%; } .slide3 { width: 80%; } } @media all and (max-width: 900px) { .slide3_title_group { width: 30%; } .slide3 { width: 70%; } } @media all and (max-width: 600px) { .section_3 { flex-direction: column; } .slide3_title_group { margin-bottom: 3%; padding-right: unset; width: unset; } .slide3_title .tit_sub { display: none; } .btn_area_slide3 .pagination { gap: 2vw; } .btn_area_slide3 .play, .btn_area_slide3 .pause { margin: 0 10px; order: 2; } .btn_area_slide3 .prev, .btn_area_slide3 .next { order: 3; } .btn_area_slide3 .pagination { order: 1; } .slide3 { width: 100%; } } /* section2 */ .section_2 { display: flex; flex-wrap: nowrap; flex-direction: row; } .slide2_title_group { padding-right: 2%; width: 17%; } .slide2_title_group>.group { display: flex; flex-direction: column; } .slide2_title .tit { font-size: calc(12px + 1.1vw); font-weight: 400; color: #222; word-wrap: break-word; } .slide2_title .tit_sub { margin: 6% 0; padding: 6% 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: calc(12px + 0.1vw); color: #222; } .btn_area_slide2 { display: flex; gap: 1vw; align-items: baseline; justify-content: space-between; } .btn_area_slide2 button { flex-shrink: 0; } .btn_area_slide2 .play { display: none; } .btn_area_slide2 .pagination { display: flex; gap: 0.5vw; align-items: baseline; font-size: calc(12px + 0.2vw); font-weight: 100; color: #ddd; } .btn_area_slide2 .swiper-pagination-current { font-weight: 500; color: #111; } .btn_area_slide2 .swiper-pagination-total { font-weight: 300; color: #666; } .slide2 { width: 83%; } .contentInner.w-full .slide2 .inner { margin: unset; width: unset; max-width: unset; } .slide2 .best-swiper .swiper-slide .img-box { padding-top: 100%; overflow: hidden; position: relative; border-radius: 20px; } .slide2 .best-swiper .swiper-slide .img-box a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .slide2 .best-swiper .swiper-slide .img-box img { width: 100%; height: 100%; object-fit: cover; } .slide2 .best-swiper .txt-box { display: flex; justify-content: center; margin-top: 1vw; } .slide2 .best-swiper .keyword_tit { font-size: calc(12px + 0.2vw); font-weight: 300; color: #fff; } .slide2 .best-swiper .txt-box .price-box .prev-price::after { display: block; position: absolute; top: 50%; left: 50%; width: 110%; height: 1px; background-color: #888; content: ""; transform: translate3d(-50%, -50%, 0); } @media all and (max-width: 1200px) { .slide2_title_group { width: 20%; } .slide2 { width: 80%; } } @media all and (max-width: 900px) { .slide2_title_group { width: 30%; } .slide2 { width: 70%; } } @media all and (max-width: 600px) { .section_2 { flex-direction: column; } .slide2_title_group { margin-bottom: 3%; padding-right: unset; width: unset; } .slide2_title .tit_sub { display: none; } .btn_area_slide2 .pagination { gap: 2vw; } .btn_area_slide2 .play, .btn_area_slide2 .pause { margin: 0 10px; order: 2; } .btn_area_slide2 .prev, .btn_area_slide2 .next { order: 3; } .btn_area_slide2 .pagination { order: 1; } .slide2 { width: 100%; } } /* section1 */ .section_1 { display: flex; flex-wrap: nowrap; flex-direction: row; } .slide1_title_group { padding-right: 2%; width: 17%; } .slide1_title_group>.group { display: flex; flex-direction: column; } .slide1_title .tit { font-size: calc(12px + 1.1vw); font-weight: 400; color: #222; } .slide1_title .tit_sub { margin: 6% 0; padding: 6% 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: calc(12px + 0.1vw); color: #222; } .btn_area_slide1 { display: flex; gap: 1vw; align-items: baseline; justify-content: space-between; } .btn_area_slide1 button { flex-shrink: 0; } .btn_area_slide1 .play { display: none; } .btn_area_slide1 .pagination { display: flex; gap: 0.5vw; align-items: baseline; font-size: calc(12px + 0.2vw); font-weight: 100; color: #ddd; } .btn_area_slide1 .swiper-pagination-current { font-weight: 500; color: #111; } .btn_area_slide1 .swiper-pagination-total { font-weight: 300; color: #666; } .slide1 { width: 83%; } .contentInner.w-full .slide1 .inner { margin: unset; width: unset; max-width: unset; } .slide1 .best-swiper .swiper-slide .img-box { padding-top: 100%; overflow: hidden; position: relative; border-radius: 20px; } .slide1 .best-swiper .swiper-slide .img-box a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .slide1 .best-swiper .swiper-slide .img-box img { width: 100%; height: 100%; object-fit: cover; } .slide1 .best-swiper .txt-box { display: flex; justify-content: center; margin-top: 1vw; } .slide1 .best-swiper .keyword_tit { font-size: calc(12px + 0.2vw); font-weight: 300; color: #fff; } .slide1 .best-swiper .txt-box .price-box .prev-price::after { display: block; position: absolute; top: 50%; left: 50%; width: 110%; height: 1px; background-color: #888; content: ""; transform: translate3d(-50%, -50%, 0); } @media all and (max-width: 1200px) { .slide1_title_group { width: 20%; } .slide1 { width: 80%; } } @media all and (max-width: 900px) { .slide1_title_group { width: 30%; } .slide1 { width: 70%; } } @media all and (max-width: 600px) { .section_1 { flex-direction: column; } .slide1_title_group { margin-bottom: 3%; padding-right: unset; width: unset; } .slide1_title .tit_sub { display: none; } .btn_area_slide1 .pagination { gap: 2vw; } .btn_area_slide1 .play, .btn_area_slide1 .pause { margin: 0 10px; order: 2; } .btn_area_slide1 .prev, .btn_area_slide1 .next { order: 3; } .btn_area_slide1 .pagination { order: 1; } .slide1 { width: 100%; } } /* paging */ .paging.mt { margin-top: 6rem; } .pagenav { display: table; margin: 0 auto; } .control, .pages { float: left; } .pages { margin: 0 2rem; } .paging a { display: block; padding: 0 0.5rem; font-size: 1.6rem; line-height: 3.9rem; text-align: center; box-sizing: border-box; } .paging a.on { font-weight: 500; color: #E4007F; box-sizing: border-box; } .paging .p { display: block; margin-right: 5px; float: left; background-color: #fff; } .paging .p:last-child { margin-right: 0; } .control .p a { border: 1px solid #E2E2E2; width: 4rem; height: 4rem; } .paging .first { background-image: url("https://visitbusan.net/archive/images/icon/icon_paging_first.svg"); background-repeat: no-repeat; background-position: center center; background-size: 1.5rem 1.4rem; } .paging .last { background-image: url("https://visitbusan.net/archive/images/icon/icon_paging_last.svg"); background-repeat: no-repeat; background-position: center center; background-size: 1.5rem 1.4rem; } .paging .prev { background-image: url("https://visitbusan.net/archive/images/icon/icon_paging_prev.svg"); background-repeat: no-repeat; background-position: center center; background-size: 1.5rem 1.4rem; } .paging .next { background-image: url("https://visitbusan.net/archive/images/icon/icon_paging_next.svg"); background-repeat: no-repeat; background-position: center center; background-size: 1.5rem 1.4rem; } @media all and (max-width: 1200px) { .paging.mt { margin-top: 3rem; } } @media all and (max-width: 900px) {} @media all and (max-width: 600px) { .paging.mt { margin-top: 2rem; } .pages { margin: 0 1rem; } .control .p a { display: block; width: 2.5rem; height: 2.5rem; } .paging .first, .paging .last, .paging .prev, .paging .next { background-size: 1.2rem 1.1em; } .paging a { padding: 0 0.3rem; font-size: 1.3rem; line-height: 2.5rem; } } /*** 상세 ***/ /* 자료검색(상세) */ .searchViewWrap { display: flex; align-items: flex-start; justify-content: space-between; } .svLeftWrap { width: 48%; } .svRightWrap { flex-shrink: 0; padding: 2% 3%; border: 1px solid #ddd; width: 48%; background-color: #FAFAFA; border-radius: 20px; } @media all and (max-width: 1300px) { .searchViewWrap { column-gap: 5rem; } } @media all and (max-width: 900px) { .svLeftWrap { margin-top: 2%; width: 100%; } .svRightWrap { display: none; } } @media all and (max-width: 600px) {} /* 상세(왼쪽) */ .resultList>ul { display: flex; flex-direction: column; row-gap: 2vw; } .resultList>ul>li a { display: flex; align-items: center; position: relative; } .rImg { padding-top: 25%; overflow: hidden; position: relative; width: 40%; } .rImg p { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .rImg img { width: 100%; height: 100%; object-fit: cover; } .rTxt { padding-left: 5%; width: 60%; max-width: 100%; font-size: 1.5rem; font-weight: 400; color: #666; text-align: center; } .rTxt p { font-size: 1.6rem; font-weight: 300; color: #666; } .rTxt p:not(.tit) { display: -webkit-box; overflow: hidden; height: 3.8em; line-height: 1.9em; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .text-content { display: -webkit-box; overflow: hidden; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .line1 { overflow: unset; height: unset; word-wrap: unset; text-overflow: unset; -webkit-line-clamp: unset; -webkit-box-orient: unset; } .line2 { height: 2.8em; } .rTxt .tit { margin-bottom: 4%; font-size: 3.2rem; font-weight: 400; color: #222; } .rTypeLayer { position: absolute; top: 1rem; left: 1rem; } .resultList>.btns.mt { margin-top: 5%; } @media all and (max-width: 1200px) { .resultTitWrap { margin: 3.5rem 0; } .rTxt .tit { font-size: 2.0rem; } .rTxt p { font-size: 1.4rem; } .rTxt p:not(.tit) { height: 3em; line-height: 1.5em; -webkit-line-clamp: 2; } } @media all and (max-width: 900px) { .textAll { font-size: 1.6rem; } .sorting>ul>li { column-gap: 1.5rem; } .sorting>ul>li>a { font-size: 1.6rem; } .sorting>ul>li::after { margin-right: 1.5rem; } } @media all and (max-width: 600px) { .resultTitWrap { margin: 1.5rem 0; } .textAll { font-size: 1.5rem; } .sorting>ul>li>a { font-size: 1.5rem; } .sorting>ul>li { column-gap: 1rem; } .sorting>ul>li::after { margin-right: 1rem; } .resultList>ul { column-gap: 1.0rem; row-gap: 4vw; } .rTxt .tit { margin-bottom: 1%; font-size: 1.7rem; } .line2 { height: 2.8em; } .rTxt p:not(.tit) { height: unset; line-height: unset; -webkit-line-clamp: 1; } .rTypeLayer { top: 0.5rem; left: 0.5rem; } .rTypeLayer img { max-width: 3rem; } } /* 상세(오른쪽) */ .dataTypeInfo { display: flex; align-items: center; column-gap: 3rem; } .viewTit { font-size: 2rem; font-weight: 400; color: #111; } .typeCate>ul { display: flex; align-items: center; } .typeCate>ul>li { display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #333; } .typeCate>ul>li::after { display: inline-flex; align-items: center; justify-content: flex-start; flex-direction: row; margin: 0 0.5rem; width: 1.9rem; height: 1.9rem; background: url("https://visitbusan.net/archive/images/common/navi_arrow.svg") no-repeat; background-size: contain; content: ""; } .typeCate>ul>li:last-child::after { display: none; } .viewTitleBox { margin: 2rem 0; font-size: 4.8rem; font-weight: 700; color: #111; } .viewTitleImg { margin: 2rem 0; } #description { position: relative; } #description .text { display: block; position: relative; font-size: 1.6rem; font-weight: 300; line-height: 2.8rem; color: #666; } #description .showMore { margin-top: 1rem; position: relative; font-size: 1.6rem; color: #222; cursor: pointer; } #description .showMore:hover { color: #E4007F; } #description .showMoreHeight { display: -webkit-box; overflow: hidden; height: 5rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .contLineType { margin: 4rem 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .contLineType>ul>li { display: flex; align-items: center; padding: 1.8rem 0; border-bottom: 1px solid #ddd; column-gap: 3rem; } .contLineType>ul>li:last-child { border-bottom: none; } .lineAticle { min-width: 6rem; font-size: 1.6rem; font-weight: 400; color: #222; } .lineCont>ul { display: flex; flex-wrap: wrap; } .viewItemWrap { margin-bottom: 4rem; } .lineCont { font-size: 1.6rem; font-weight: 400; color: #666; } .lineCont>ul>li { display: flex; align-items: center; justify-content: center; } .lineCont>ul>li::after { display: inline-flex; align-items: center; justify-content: flex-start; flex-direction: row; margin: 0 0.5rem; width: 1.9rem; height: 1.9rem; background: url("https://visitbusan.net/archive/images/common/navi_arrow.svg") no-repeat; background-size: contain; content: ""; } .lineCont>ul>li:last-child::after { display: none; } .lineBox { margin-top: 2rem; padding: 2rem 4rem; border: 1px solid #ddd; } .contInfoList { display: flex; align-items: flex-start; flex-direction: column; } .contInfoList>li { display: flex; font-size: 1.4rem; font-weight: 400; color: #333; } .contInfoList>li .cateName { min-width: 8rem; font-weight: 700; color: #222; } .ggnrTxt { font-size: 1.4rem; font-weight: 400; color: #222; } .ggnrTxt span { font-weight: 700; } .ggurBox { display: flex; flex-wrap: wrap; column-gap: 2rem; row-gap: 2rem; } .ggnrTxt { word-break: keep-all; } .ggnrTypeImg img { width: 100%; } .btn-wrap { display: flex; gap: 1.5%; } .btnPage { padding: 1.4rem 2rem 1.4rem 4rem; border: 1px solid #ddd; background: #fff url("https://visitbusan.net/archive/images/icon/fluent-mdl2_page.svg") no-repeat; background-position: left 1.5rem center; font-size: calc(12px + 0.2vw); color: #222; border-radius: 0.5rem; } .btnGgnrDown { padding: 1.4rem 2rem 1.4rem 4rem; background: #111 url("https://visitbusan.net/archive/images/icon/icon_down.svg") no-repeat; background-position: left 1.5rem center; font-size: calc(12px + 0.2vw); color: #fff; border-radius: 0.5rem; } .btnSearchIist { display: inline-block; padding: 1.4rem 2rem 1.4rem 4rem; background: #34353A url("https://visitbusan.net/archive/images/icon/icon_list.svg") no-repeat; background-position: left 1.5rem center; font-size: calc(12px + 0.2vw); color: #fff; border-radius: 0.5rem; } @media all and (max-width: 1200px) { .viewTit { font-size: 1.8rem; } .viewTitleBox { margin: 1.5rem 0; font-size: 3.8rem; } } @media all and (max-width: 900px) { .viewTit { font-size: 1.6rem; } .viewTitleBox { margin: 1.0rem 0; font-size: 3rem; } .contLineType { margin: 2.5rem 0; } } @media all and (max-width: 600px) { .dataTypeInfo { column-gap: 1.5rem; } .dataTypeInfo { font-size: 1.5rem; } .typeCate>ul>li { font-size: 1.5rem; } .viewTitleBox { margin: 1.2rem 0; font-size: 2.8rem; } #description .text { font-size: 1.4rem; line-height: 2.3rem; } #description .showMoreHeight { height: 4.5rem; } #description .showMore { margin-top: 0.5rem; font-size: 1.3rem; } .contLineType { margin: 2rem 0; } .contLineType>ul>li { align-items: flex-start; flex-direction: column; padding: 1.0rem 0; column-gap: 0; } .lineAticle { min-width: auto; font-size: 1.5rem; } .lineCont { font-size: 1.4rem; } .lineBox { margin-top: 1rem; } .lineBox { margin-top: 1rem; padding: 1.2rem; } .contInfoList>li { font-size: 1.3rem; } .viewItemWrap { margin-bottom: 1.5rem; } .ggurBox { flex-direction: column; } .ggnrTxt { margin-bottom: 0.5rem; width: 100%; } .btnGgnrDown { padding: 1rem 1.5rem 1rem 3.5rem; background-position: left 1.0rem center; font-size: 1.3rem; } } /* Modal */ #modal { display: none; position: fixed; top: 0; left: 0; z-index: 10001; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); } .modalCon { display: none; position: fixed; top: 50%; left: 50%; z-index: 10002; width: 80rem; max-width: 80%; background: #fff; border-radius: 1.5rem; transform: translate(-50%, -50%); } .modalCon .con { padding: 4rem; overflow: hidden; font-size: 0.9375rem; line-height: 1.3; } .downTable.colTable tbody th { width: 18%; } .modalCon .modalClose { display: block; } .modalBtnWrap { display: flex; justify-content: center; margin: 3rem 0; column-gap: 1rem; } .modalBtn { padding: 1.2rem 0; width: 12.6rem; font-size: 1.6rem; font-weight: 400; border-radius: 0.6rem; } .modalBtn.modalClose { border: 1px solid #ddd; color: #666; } .modalBtn.btnDownload { border: 1px solid #54595E; background: #54595E; color: #fff; } .modalNuriInfo { display: flex; justify-content: space-between; column-gap: 3rem; } .ggnrTit { min-width: 8rem; font-size: 1.4rem; font-weight: 700; color: #222; } .modalNuriInfo .ggnrTxt { width: calc(100% - 25rem); color: #444; letter-spacing: 0; } @media all and (max-width: 1200px) { .modalCon .con { padding: 3rem; } } @media all and (max-width: 900px) { .downTable.colTable tbody th { width: 24%; } .modalBtn { padding: 1rem 0; font-size: 1.5rem; } .modalBtnWrap { margin: 2rem 0; } .modalNuriInfo { column-gap: 1.5rem; } .modalNuriInfo .ggnrTxt { width: calc(100% - 22rem); } } @media all and (max-width: 600px) { .modalCon .con { padding: 2rem; } .modalCon { overflow-y: auto; max-width: 90%; max-height: 90%; } .downTable.colTable tbody th { width: 100%; text-align: left; } .modalBtn { width: 10rem; font-size: 1.4rem; } .modalNuriInfo { flex-direction: column; } .modalNuriInfo .ggnrTit { margin-bottom: 0.5rem; } .modalNuriInfo .ggnrTxt { width: 100%; } .ggnrTypeImg { width: 100%; text-align: right; } .ggnrTypeImg img { max-width: 11rem; } }