/********* 컨텐츠 넓이 *********/ .inner { width:100%; max-width: 1660px; margin:0 auto; padding: 0 30px; } @media only screen and (max-width: 1780px){ .inner { max-width: 1760px; padding: 0 100px; } } @media only screen and (max-width: 1023px){ .inner { padding: 0 30px; } } /**************** (메인)공통 ****************/ .title-box1 { padding-bottom: 40px; } .title-box2 .ti { display: block; line-height: 5.0rem; font-family: var(--point-fc); font-weight: 300; font-size: 4.0rem; word-break: keep-all; } .title-box2 .ti > span { font-family: var(--point-fc); font-weight: 700; } .more-box { display: flex; justify-content: center; width: 100%; padding-right: 6px; } .more-btn { text-align: end; font-weight: 600; color: #666; position: relative; } .more-btn::after { content: ""; width: 100%; height: 1px; background-color: #666; position: absolute; left: 0; bottom: -3px; } .tab-btn2 li { margin-bottom: 20px; } .tab-btn2 li:last-child { margin-bottom: 0; } .tab-btn2 li a { display: flex; align-items: center; gap: 10px; line-height: 1.8rem; font-family: var(--point-fc); font-weight: 400; font-size: 1.8rem; color: #757575; transition: all 0.3s; } .tab-btn2 li a:before { content: ""; display: block; width: 6px; height: 6px; border-radius: 100%; background: #bebebe; } .tab-btn2 li.active a { font-weight: 700; color: var(--main-color); } .tab-btn2 li.active a:before { background: var(--main-color); } .tab-btn2 li a:hover { color: var(--main-color); transition: all .3s; } .tab-btn2 li a:hover:before { background: var(--main-color); transition: all .3s; } @media only screen and (max-width: 1023px) { } @media only screen and (max-width: 1023px) { /** section **/ .section { height: auto !important; padding: 0 30px;} /** title box **/ .title-box2 .ti { line-height: 4.0rem; font-weight: 400; font-size: 2.8rem; } .title-box2 .ti br { display: none; } /** tab-btn2 **/ .tab-btn1 li a::before { width: 11px; height: 11px; margin-top: -3px; } } @media only screen and (max-width: 460px){ .title-box1 { padding-bottom: 10px; } } /**************** fullpage ****************/ #fullpage-nav { position: fixed; left: 30px; top: 50%; z-index: 1; transform: translateY(-50%); } #fullpage-nav li { margin-bottom: 14px; } #fullpage-nav li:last-child { margin-bottom: 0; } #fullpage-nav li a { display: block; font-size: 0; } #fullpage-nav li a > span { display: block; width: 7px; height: 7px; margin: 0 auto; border-radius: 100%; background: rgba(255,255,255,0.3); } #fullpage-nav li.active a { font-weight: 700; font-size: 13px; color: #fff; } #fullpage-nav li.active a > span { margin-bottom: 7px; background-color: transparent !important; background-repeat: no-repeat; background-position: center center; border-radius: 0; } #fullpage-nav li.active:nth-child(1) a > span { width: 13px; height: 13px; background-image: url(../img/main/nav_icn1.png); } #fullpage-nav li.active:nth-child(2) a > span { width: 18px; height: 16px; background-image: url(../img/main/nav_icn3.png); } /** section1 **/ .fp-viewing-main .logo a .img { background: url(../img/layout/logo_wh.png) no-repeat center center / contain;} .fp-viewing-main .logo a .txt { color: #fff; } .fp-viewing-main .logo a .txt::before { background: #fff; } .fp-viewing-main .gnb-box .gnb > li > a.gnb-title { color: #fff; } .fp-viewing-main .top-btn { display: none; } /** section3 **/ .fp-viewing-notice .logo a .img { background: url(../img/layout/logo.png) no-repeat center center / contain;} .fp-viewing-notice .logo a .txt { color: #333; } .fp-viewing-notice .logo a .txt::before { background: #333; } .fp-viewing-notice .right .size-box strong {color: #444;} .fp-viewing-notice .right .size-box .btn-box button {color: #444;} .fp-viewing-notice .right .size-box .btn-box button.plus-btn {background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1_238)'%3E%3Cpath d='M0.5 7.82001H15.14' stroke='%23444' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M7.82001 0.5V15.14' stroke='%23444' stroke-width='2' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1_238'%3E%3Crect width='14.64' height='14.64' fill='white' transform='translate(0.5 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");} .fp-viewing-notice .right .size-box .btn-box button.min-btn {background-image: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_62_6)'%3E%3Cpath d='M0 7.82001H14.64' stroke='%23444' stroke-width='2' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_62_6'%3E%3Crect width='14.64' height='14.64' fill='white' transform='translate(0 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");} .fp-viewing-notice .gnb-box .gnb > li > a.gnb-title { color: #444; } .fp-viewing-notice .header-stm .smo-btn::after { background-color: #444; } .fp-viewing-notice .header-stm .smo-btn span::after { background-color: #444; } .fp-viewing-notice .header-stm .smo-btn span::before { background-color: #444; } .fp-viewing-notice .gnb-box, .fp-viewing-footer .gnb-box { color: #333; } .fp-viewing-notice #fullpage-nav li a > span { background-color: #c1a5a9; } .fp-viewing-notice #fullpage-nav li.active a { color: var(--main-color); } .fp-viewing-notice .thead .right-menu .login { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23444; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M15.5,17.5c0-1.96-2.32-6.2-5.48-7.06-.36-.13-.51-.59-.04-.86,1.71-.74,2.9-2.36,2.9-4.31,0-2.64-2.18-4.77-4.87-4.77S3.13,2.64,3.13,5.27c0,1.9,1.14,3.54,2.78,4.31.49.23.48.75.05.86-3.15.87-5.46,5.17-5.46,7.06'/%3E%3C/svg%3E"); } .fp-viewing-notice .thead .right-menu .logout {background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80.14 70'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23444; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M52.06,53.59v7.63c0,3.18-2.6,5.78-5.78,5.78H8.78c-3.18,0-5.78-2.6-5.78-5.78V8.78c0-3.18,2.6-5.78,5.78-5.78h37.5c3.18,0,5.78,2.6,5.78,5.78v7.32'/%3E%3Cg%3E%3Cpolyline class='cls-1' points='64.6 22.46 77.14 35 64.6 47.54'/%3E%3Cline class='cls-1' x1='77.14' y1='35' x2='29.7' y2='35'/%3E%3C/g%3E%3C/svg%3E");} /* .fp-viewing-notice .fix-quick { display: none; } */ .fp-viewing-notice .fix-quick .fix-list .fix-link { color: #333; } .fp-viewing-notice .fix-quick .fix-list .fix-link li:nth-child(1) span { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65.48 58.02'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23333; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3px; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-1' d='M60.5,27.77v16.75c0,.55-.45,1-1,1H2.5c-.55,0-1-.45-1-1V6.52c0-.55.45-1,1-1h22.5'/%3E%3Cline class='cls-1' x1='17.5' y1='56.52' x2='45.5' y2='56.52'/%3E%3Cline class='cls-1' x1='1.5' y1='38.52' x2='60.5' y2='38.52'/%3E%3Cline class='cls-1' x1='24.5' y1='45.52' x2='24.5' y2='56.52'/%3E%3Cline class='cls-1' x1='37.5' y1='45.52' x2='37.5' y2='56.52'/%3E%3C/g%3E%3Crect class='cls-1' x='25.08' y='1.5' width='38.9' height='25.94' rx='1' ry='1'/%3E%3Cline class='cls-1' x1='25.63' y1='8.11' x2='63.63' y2='8.11'/%3E%3Cpath class='cls-1' d='M58.35,16.14c1.09,1.99.35,4.48-1.64,5.57-1.99,1.09-4.48.35-5.57-1.64-1.09-1.99-.35-4.48,1.64-5.57,1.99-1.09,4.48-.35,5.57,1.64Z'/%3E%3C/svg%3E"); } .fp-viewing-notice .fix-quick .fix-list .fix-link li:nth-child(2) span { width: 32px; height: 27px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65.56 56'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23333; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-1' d='M34.4,38.69H6.88V2c0-.55.45-1,1-1h49.79c.55,0,1,.45,1,1v36.69h-5.28'/%3E%3Cpath class='cls-1' d='M58.68,38.69l5.8,12.02c.29.66-.19,1.41-.91,1.41H2c-.72,0-1.21-.75-.91-1.41l5.8-12.02'/%3E%3Cline class='cls-1' x1='15.52' y1='13.95' x2='37.1' y2='13.95'/%3E%3Cline class='cls-1' x1='15.52' y1='22.58' x2='26.31' y2='22.58'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-1' d='M52.76,38.76c0,4.93-4,8.93-8.93,8.93s-8.93-4-8.93-8.93,4-8.93,8.93-8.93,8.93,4,8.93,8.93Z'/%3E%3Cline class='cls-1' x1='49.92' y1='45.26' x2='58.74' y2='55'/%3E%3C/g%3E%3C/svg%3E"); } .fp-viewing-notice .fix-quick .fix-list .fix-link li:nth-child(3) span { width: 32px; height: 31px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68.04 66'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23333; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3px; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-1' d='M32.64,45.94l11.31,3.72c2.08.76,4.37-.32,5.13-2.39h0c.76-2.08-.32-4.37-2.39-5.13l-18.69-6.36c-2.82-.94-5.88-.8-8.6.39l-8.45,3.76'/%3E%3Cpath class='cls-1' d='M48.95,47.83l11.89-4.84c2-.93,4.38-.07,5.32,1.93h0c.93,2,.07,4.38-1.93,5.32l-18.13,8.45-.76.32c-3.4,1.46-7.29,1.26-10.53-.53l-7.19-3.97c-3.26-1.8-7.18-1.99-10.6-.5'/%3E%3Cpath class='cls-1' d='M1.5,40.93l6.29-2.89c1-.47,2.19-.05,2.66.95l6.62,15.59c.47,1,.05,2.19-.95,2.66l-14.61,7.25'/%3E%3Ccircle class='cls-1' cx='6.12' cy='46.83' r='1'/%3E%3C/g%3E%3Cpolyline class='cls-1' points='60.88 42.62 60.88 15 41.72 1.5 22.55 15 22.55 35.29'/%3E%3Cpath class='cls-1' d='M36.88,38.81v-7.87c0-1.41,1.14-2.56,2.56-2.56h5.22c1.41,0,2.56,1.14,2.56,2.56v11.44'/%3E%3C/svg%3E"); } /** footer **/ .fp-viewing-footer .thead { background: #fff; } .fp-viewing-footer .logo a .img { background: url(../img/layout/logo.png) no-repeat center center / contain;} .fp-viewing-footer .logo a .txt { color: #333; } .fp-viewing-footer .logo a .txt::before { background: #333; } .fp-viewing-footer #fullpage-nav li a > span { background-color: #c1a5a9; } .fp-viewing-footer #fullpage-nav li.active a { color: var(--main-color); } .fp-viewing-footer .right .size-box strong {color: #444;} .fp-viewing-footer .right .size-box .btn-box button {color: #444;} .fp-viewing-footer .right .size-box .btn-box button.plus-btn {background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1_238)'%3E%3Cpath d='M0.5 7.82001H15.14' stroke='%23444' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M7.82001 0.5V15.14' stroke='%23444' stroke-width='2' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1_238'%3E%3Crect width='14.64' height='14.64' fill='white' transform='translate(0.5 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");} .fp-viewing-footer .right .size-box .btn-box button.min-btn {background-image: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_62_6)'%3E%3Cpath d='M0 7.82001H14.64' stroke='%23444' stroke-width='2' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_62_6'%3E%3Crect width='14.64' height='14.64' fill='white' transform='translate(0 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");} .fp-viewing-footer .gnb-box .gnb > li > a.gnb-title { color: #444; } .fp-viewing-footer .thead .search a { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23444444; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px; %7D %3C/style%3E%3C/defs%3E%3Cellipse class='cls-1' cx='6.51' cy='6.5' rx='5.51' ry='5.5'/%3E%3Cline class='cls-1' x1='10.58' y1='10.58' x2='14' y2='14'/%3E%3C/svg%3E"); } .fp-viewing-footer .thead .right-menu .login { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23444; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M15.5,17.5c0-1.96-2.32-6.2-5.48-7.06-.36-.13-.51-.59-.04-.86,1.71-.74,2.9-2.36,2.9-4.31,0-2.64-2.18-4.77-4.87-4.77S3.13,2.64,3.13,5.27c0,1.9,1.14,3.54,2.78,4.31.49.23.48.75.05.86-3.15.87-5.46,5.17-5.46,7.06'/%3E%3C/svg%3E"); } .fp-viewing-footer .thead .right-menu .logout {background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80.14 70'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23444; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M52.06,53.59v7.63c0,3.18-2.6,5.78-5.78,5.78H8.78c-3.18,0-5.78-2.6-5.78-5.78V8.78c0-3.18,2.6-5.78,5.78-5.78h37.5c3.18,0,5.78,2.6,5.78,5.78v7.32'/%3E%3Cg%3E%3Cpolyline class='cls-1' points='64.6 22.46 77.14 35 64.6 47.54'/%3E%3Cline class='cls-1' x1='77.14' y1='35' x2='29.7' y2='35'/%3E%3C/g%3E%3C/svg%3E");} .fp-viewing-footer .header-stm .smo-btn::after { background-color: #444; } .fp-viewing-footer .header-stm .smo-btn span::after { background-color: #444; } .fp-viewing-footer .header-stm .smo-btn span::before { background-color: #444; } .fp-viewing-footer .fix-quick { display: none; } @media only screen and (max-width: 1023px){ #fullpage-nav { display: none; } .fp-viewing-main .logo a .img { background: url(../img/layout/logo.png) no-repeat center center / contain;} .fp-viewing-main .logo a .txt { color: #333; } } /**************** 메인 비주얼 ****************/ .main-visual-wrap { width: 100%; height: 100%; position: relative; } /* .main-visual-wrap .swiper-slide { display: flex; align-items: center; } */ .main-visual-wrap .swiper-slide { display: flex; align-items: center; } .main-visual-wrap .swiper-slide::before { content: ""; opacity: 0.1; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #000; } .main-visual-wrap .main-visual-text p { margin-bottom: 40px; font-family: var(--point-fc); font-weight: 400; font-size: 2.0rem; color: #fff; word-break: keep-all; } .main-visual-wrap .main-visual-text strong { display: block; margin-bottom: 100px; font-family: var(--point-fc); font-weight: 600; font-size: 4.8rem; line-height: 7rem; color: #fff; word-break: keep-all; } .main-visual-wrap .main-visual-text a { position: relative; padding-right: 57px; font-weight: 500; color: #fff; transition: margin 0.3s; } .main-visual-wrap .main-visual-text a::before { content: ""; width: 38px; height: 10px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 10'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23ffffff; stroke-linecap: round; stroke-linejoin: round; %7D %3C/style%3E%3C/defs%3E%3Cline class='cls-1' x1='.5' y1='5' x2='36.44' y2='5'/%3E%3Cpolyline class='cls-1' points='31.77 .5 36.5 5 31.77 9.5'/%3E%3C/svg%3E"); background-position: right center; background-repeat: no-repeat; transition: width 0.3s ease-in-out; } .main-visual-wrap .main-visual-text a::after { content: ""; width: 38px; height: 38px; border: 1px solid #fff; border-radius: 20px; position: absolute; right: -15px; top: -10px; transition: width 0.3s ease-in-out; } .main-visual-wrap .main-visual-text a:hover { margin-left: 20px; } .main-visual-wrap .main-visual-text a:hover::before { width: 12px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23ffffff; stroke-linecap: round; stroke-linejoin: round; %7D %3C/style%3E%3C/defs%3E%3Cline class='cls-1' x1='.5' y1='5' x2='11.44' y2='5'/%3E%3Cpolyline class='cls-1' points='6.77 .5 11.5 5 6.77 9.5'/%3E%3C/svg%3E"); background-position: right center; background-repeat: no-repeat; } .main-visual-wrap .main-visual-text a:hover::after { width: 157px; } .main-visual-wrap .swiper-button { position: absolute; left: 50%; top: 72vh; display: flex; align-items: center; gap: 10px; z-index: 1; width: 100%; transform: translateX(-50%); } .main-visual-wrap .swiper-button .swiper-pagination { position: relative; display: block; width: auto; height: 3px; } .main-visual-wrap .swiper-button .swiper-pagination .swiper-pagination-bullet { background-color: #fff; transition: all 0.3s; } .main-visual-wrap .swiper-button .swiper-pagination .swiper-pagination-bullet-active { width: 25px; border-radius: 40px; background: #fff; } .main-visual-wrap .swiper-button .swiper-next-prev { display: flex; align-items: center; gap: 8px; } .main-visual-wrap .swiper-button .swiper-next-prev a { display: block; } .main-visual-wrap .swiper-button .swiper-next-prev a.play { display: none; } .main-visual-wrap .swiper-button .swiper-next-prev a img { display: block; } @media only screen and (max-width: 1023px){ .section0 { margin: 65px 0 30px; } .main-visual-wrap .swiper-slide { height: 380px; } /** 메인 비주얼 **/ .main-visual-wrap { border-radius: 20px; overflow: hidden; } /* .main-visual-wrap .main-visual-text.inner { padding: 80px 50px 130px 50px; } */ .main-visual-wrap .main-visual-text p { line-height: 2.6rem; margin-bottom: 20px; font-size: 1.6rem; font-weight: 300; } .main-visual-wrap .main-visual-text strong { margin-bottom: 40px; font-size: 3.2rem; } .main-visual-wrap .swiper-button { top: inherit; bottom: 75px; padding: 0 50px; } .main-visual-wrap .main-visual-text strong { display: block; line-height: 5rem; } .main-visual-wrap .main-visual-text a { position: relative; padding-right: 57px; font-weight: 500; transition: margin 0.3s; } .main-visual-wrap .main-visual-text a::before { content: ""; width: 38px; height: 10px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .main-visual-wrap .main-visual-text a::after { /* display: none; */ } } @media only screen and (max-width: 767px){ .section0 { margin-top: 50px; } } @media only screen and (max-width: 460px){ .main-visual-wrap .main-visual-text.inner { padding: 60px 40px 90px 40px; } .main-visual-wrap .swiper-button { bottom: 30px; padding: 0 40px; } } /**************** 퀵메뉴 ****************/ .quick-menu { width: 100%; height: 70px; background-color: rgba(0,0,0,0.6); position: absolute; bottom: 0; left: 0; z-index: 1; } .quick-menu ul { display: flex; align-items: center; height: 100%; } .quick-menu ul li { flex: 1; height: 100%; padding-left: 20px; position: relative; transition: all 0.3s; } .quick-menu ul li::after { content: ""; width: 12px; height: 11px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23ffffff; stroke-linecap: round; stroke-linejoin: round; %7D %3C/style%3E%3C/defs%3E%3Cline class='cls-1' x1='.5' y1='5.5' x2='11.45' y2='5.5'/%3E%3Cpolyline class='cls-1' points='7.16 .5 11.5 5.5 7.16 10.5'/%3E%3C/svg%3E"); position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } .quick-menu ul li + li { border-left: 1px solid rgba(255,255,255,0.1); } .quick-menu ul li a { display: flex; align-items: center; width: 100%; height: 100%; font-size: 1.8rem; font-weight: 400; color: #fff; } .quick-menu ul li a span { display: block; margin-right: 10px; background-repeat: no-repeat; background-position: center center; } .quick-menu ul li:nth-child(1) a span { width: 25px; height: 15px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125.07 77.98'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffffff; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M124.59,42.71l-22.96-21.54c-.58-.54-1.47-.54-2.05,0l-22.96,21.54c-.45.42-.59,1.07-.37,1.65.23.57.78.95,1.39.95h45.92c.62,0,1.17-.38,1.39-.95.23-.57.08-1.22-.37-1.65ZM81.44,42.3l19.17-17.98,19.17,17.98h-38.34Z'/%3E%3Cpath class='cls-1' d='M81.35,48.07v17.26c0,1.66,1.34,3,3,3h32.52c1.66,0,3-1.34,3-3v-17.26c0-.83-.67-1.5-1.5-1.5h0c-.83,0-1.5.67-1.5,1.5v15.76c0,.83-.67,1.5-1.5,1.5h-29.52c-.83,0-1.5-.67-1.5-1.5v-15.76c0-.83-.67-1.5-1.5-1.5h0c-.83,0-1.5.67-1.5,1.5Z'/%3E%3Crect class='cls-1' x='92.47' y='50.23' width='16.28' height='6.01' rx='.96' ry='.96'/%3E%3Cpath class='cls-1' d='M118.87,71.7c-.62-1.09-1.94-1.68-3.11-1.24-1.08.41-1.68,1.44-1.63,2.48,0,.02-.02.04-.04.04H6.86s-.05-.03-.04-.06l14.65-25.85s.02-.02.04-.02h50.24c1.29,0,2.49-.9,2.64-2.18.12-.94-.29-1.78-.96-2.29,0,0-.01-.02-.01-.03V10.32s.02-.04.04-.04h24.61s.04.02.04.04v5.74c0,1.33.95,2.55,2.28,2.67,1.48.13,2.72-1.04,2.72-2.49V2.54c0-1.4-1.14-2.54-2.54-2.54H20.08c-1.4,0-2.54,1.14-2.54,2.54v41.34s0,.01,0,.02L.33,74.24c-.44.77-.43,1.72.01,2.49.45.77,1.27,1.24,2.16,1.24h115.64c.89,0,1.71-.47,2.16-1.24.45-.77.45-1.72.01-2.49l-1.44-2.55ZM22.58,10.28h17.8s.04.02.04.04v31.68s-.02.04-.04.04h-17.8s-.04-.02-.04-.04V10.32s.02-.04.04-.04ZM70.38,42.05h-26.92s-.04-.02-.04-.04V10.32s.02-.04.04-.04h26.92s.04.02.04.04v31.68s-.02.04-.04.04ZM98.11,5.04v2.2s-.02.04-.04.04H22.58s-.04-.02-.04-.04v-2.2s.02-.04.04-.04h75.49s.04.02.04.04Z'/%3E%3Crect class='cls-1' x='25.25' y='13.74' width='11.5' height='3' rx='1.5' ry='1.5'/%3E%3Crect class='cls-1' x='25.25' y='18.49' width='11.5' height='3' rx='1.5' ry='1.5'/%3E%3Crect class='cls-1' x='25.25' y='23.24' width='11.5' height='3' rx='1.5' ry='1.5'/%3E%3C/svg%3E"); } .quick-menu ul li:nth-child(2) a span { width: 25px; height: 24px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68.04 60.22'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3px; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-1' d='M22.15,29.39c-.74-2.15-1.14-4.45-1.14-6.84C21.01,10.92,30.44,1.5,42.07,1.5s21.05,9.42,21.05,21.05c0,7.23-3.64,13.61-9.19,17.4'/%3E%3Cg%3E%3Cpolyline class='cls-1' points='32.79 17.13 37.75 29.05 42.25 17.13 47.08 29.05 51.51 17.13'/%3E%3Cline class='cls-1' x1='31.39' y1='21.95' x2='53.45' y2='21.95'/%3E%3C/g%3E%3C/g%3E%3Cpath class='cls-1' d='M32.64,40.16l11.31,3.72c2.08.76,4.37-.32,5.13-2.39h0c.76-2.08-.32-4.37-2.39-5.13l-18.69-6.36c-2.82-.94-5.88-.8-8.6.39l-8.45,3.76'/%3E%3Cpath class='cls-1' d='M48.95,42.05l11.89-4.84c2-.93,4.38-.07,5.32,1.93h0c.93,2,.07,4.38-1.93,5.32l-18.13,8.45-.76.32c-3.4,1.46-7.29,1.26-10.53-.53l-7.19-3.97c-3.26-1.8-7.18-1.99-10.6-.5'/%3E%3Cpath class='cls-1' d='M1.5,35.15l6.29-2.89c1-.47,2.19-.05,2.66.95l6.62,15.59c.47,1,.05,2.19-.95,2.66l-14.61,7.25'/%3E%3Ccircle class='cls-1' cx='6.12' cy='41.05' r='1'/%3E%3C/svg%3E"); } .quick-menu ul li:nth-child(3) a span { width: 26px; height: 23px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65 63.33'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-1' d='M62.07,62.33H9.93c-1.06,0-1.93-.88-1.93-1.95V23.29c0-1.07.87-1.95,1.93-1.95h52.14c1.06,0,1.93.88,1.93,1.95v37.1c0,1.07-.87,1.95-1.93,1.95Z'/%3E%3Cline class='cls-1' x1='32' y1='54.33' x2='57' y2='54.33'/%3E%3Cline class='cls-1' x1='15' y1='54.33' x2='25' y2='54.33'/%3E%3Cline class='cls-1' x1='15' y1='49.33' x2='25' y2='49.33'/%3E%3Cpath class='cls-1' d='M50.06,32.62c1.25,2.3.41,5.18-1.89,6.43-2.3,1.25-5.18.41-6.43-1.89-1.25-2.3-.41-5.18,1.89-6.43,2.3-1.25,5.18-.41,6.43,1.89Z'/%3E%3Cpath class='cls-1' d='M50.34,30.74l1.23-.48c2.01-.44,4.15.47,5.18,2.36,1.25,2.3.41,5.18-1.89,6.43-1.08.59-2.28.71-3.39.44,0,0-.55-.11-1.22-.49'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-1' d='M7.88,42.96L1.07,16.7c-.27-1.04.34-2.11,1.36-2.38L52.69,1.06c1.02-.27,2.09.36,2.36,1.39l4.7,18'/%3E%3Cline class='cls-1' x1='27.88' y1='21.33' x2='57.91' y2='13.32'/%3E%3C/g%3E%3C/svg%3E"); } .quick-menu ul li:nth-child(4) a span { width: 25px; height: 21px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63.51 50.71'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-1' d='M40.88,42H2.94c-1.07,0-1.94-.87-1.94-1.94V2.95c0-1.07.88-1.95,1.95-1.95h52.11c1.07,0,1.94.87,1.94,1.94v22.73'/%3E%3Cline class='cls-1' x1='24' y1='35' x2='40.87' y2='35'/%3E%3Cline class='cls-1' x1='7' y1='35' x2='18' y2='35'/%3E%3Cline class='cls-1' x1='7' y1='30' x2='18' y2='30'/%3E%3Cpath class='cls-1' d='M42.34,13.06c1.25,2.29.4,5.16-1.88,6.4-2.29,1.25-5.15.4-6.4-1.88-1.25-2.29-.4-5.16,1.88-6.4,2.29-1.25,5.16-.4,6.4,1.88Z'/%3E%3Cpath class='cls-1' d='M42.61,11.19l1.23-.48c2-.44,4.13.46,5.16,2.35,1.25,2.29.4,5.16-1.88,6.4-1.07.59-2.27.71-3.37.44,0,0-.55-.11-1.22-.49'/%3E%3C/g%3E%3Cg%3E%3Cpolyline class='cls-1' points='47.73 35.91 51.41 39.59 51.41 39.59 51.41 39.59 57.04 33.97'/%3E%3Cpath class='cls-1' d='M51.75,21.86s-2.61,5.83-10.75,4.57v13.22c.21.77-.73,6.98,10.75,10.06,11.48-3.08,10.54-9.29,10.75-10.06v-13.22c-8.14,1.26-10.75-4.57-10.75-4.57Z'/%3E%3C/g%3E%3C/svg%3E"); } .quick-menu ul li:nth-child(5) a span { width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65 65'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M32.59,47.91c0,1.03-.83,1.86-1.86,1.86s-1.86-.83-1.86-1.86.83-1.86,1.86-1.86,1.86.83,1.86,1.86Z'/%3E%3Cpath class='cls-1' d='M32.5,63.5c-17.09,0-31-13.9-31-31S15.4,1.5,32.5,1.5s31,13.91,31,31-13.91,31-31,31Z'/%3E%3Cpath class='cls-1' d='M24.67,23.14s1.11-6.81,7.35-6.87c6.24-.06,9.06,5.34,7.92,10.13-1.14,4.79-9.39,4.87-10.12,12.37'/%3E%3C/svg%3E"); } .quick-menu ul li:hover a {font-weight: 500; color: #fdadad;} .quick-menu ul li:hover:after {background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23fdadad; stroke-linecap: round; stroke-linejoin: round; %7D %3C/style%3E%3C/defs%3E%3Cline class='cls-1' x1='.5' y1='5.5' x2='11.45' y2='5.5'/%3E%3Cpolyline class='cls-1' points='7.16 .5 11.5 5.5 7.16 10.5'/%3E%3C/svg%3E");} .quick-menu ul li:nth-child(1):hover a span {background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125.07 77.98'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fdadad; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M124.59,42.71l-22.96-21.54c-.58-.54-1.47-.54-2.05,0l-22.96,21.54c-.45.42-.59,1.07-.37,1.65.23.57.78.95,1.39.95h45.92c.62,0,1.17-.38,1.39-.95.23-.57.08-1.22-.37-1.65ZM81.44,42.3l19.17-17.98,19.17,17.98h-38.34Z'/%3E%3Cpath class='cls-1' d='M81.35,48.07v17.26c0,1.66,1.34,3,3,3h32.52c1.66,0,3-1.34,3-3v-17.26c0-.83-.67-1.5-1.5-1.5h0c-.83,0-1.5.67-1.5,1.5v15.76c0,.83-.67,1.5-1.5,1.5h-29.52c-.83,0-1.5-.67-1.5-1.5v-15.76c0-.83-.67-1.5-1.5-1.5h0c-.83,0-1.5.67-1.5,1.5Z'/%3E%3Crect class='cls-1' x='92.47' y='50.23' width='16.28' height='6.01' rx='.96' ry='.96'/%3E%3Cpath class='cls-1' d='M118.87,71.7c-.62-1.09-1.94-1.68-3.11-1.24-1.08.41-1.68,1.44-1.63,2.48,0,.02-.02.04-.04.04H6.86s-.05-.03-.04-.06l14.65-25.85s.02-.02.04-.02h50.24c1.29,0,2.49-.9,2.64-2.18.12-.94-.29-1.78-.96-2.29,0,0-.01-.02-.01-.03V10.32s.02-.04.04-.04h24.61s.04.02.04.04v5.74c0,1.33.95,2.55,2.28,2.67,1.48.13,2.72-1.04,2.72-2.49V2.54c0-1.4-1.14-2.54-2.54-2.54H20.08c-1.4,0-2.54,1.14-2.54,2.54v41.34s0,.01,0,.02L.33,74.24c-.44.77-.43,1.72.01,2.49.45.77,1.27,1.24,2.16,1.24h115.64c.89,0,1.71-.47,2.16-1.24.45-.77.45-1.72.01-2.49l-1.44-2.55ZM22.58,10.28h17.8s.04.02.04.04v31.68s-.02.04-.04.04h-17.8s-.04-.02-.04-.04V10.32s.02-.04.04-.04ZM70.38,42.05h-26.92s-.04-.02-.04-.04V10.32s.02-.04.04-.04h26.92s.04.02.04.04v31.68s-.02.04-.04.04ZM98.11,5.04v2.2s-.02.04-.04.04H22.58s-.04-.02-.04-.04v-2.2s.02-.04.04-.04h75.49s.04.02.04.04Z'/%3E%3Crect class='cls-1' x='25.25' y='13.74' width='11.5' height='3' rx='1.5' ry='1.5'/%3E%3Crect class='cls-1' x='25.25' y='18.49' width='11.5' height='3' rx='1.5' ry='1.5'/%3E%3Crect class='cls-1' x='25.25' y='23.24' width='11.5' height='3' rx='1.5' ry='1.5'/%3E%3C/svg%3E"); } .quick-menu ul li:nth-child(2):hover a span {background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68.04 60.22'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23fdadad; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3px; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-1' d='M22.15,29.39c-.74-2.15-1.14-4.45-1.14-6.84C21.01,10.92,30.44,1.5,42.07,1.5s21.05,9.42,21.05,21.05c0,7.23-3.64,13.61-9.19,17.4'/%3E%3Cg%3E%3Cpolyline class='cls-1' points='32.79 17.13 37.75 29.05 42.25 17.13 47.08 29.05 51.51 17.13'/%3E%3Cline class='cls-1' x1='31.39' y1='21.95' x2='53.45' y2='21.95'/%3E%3C/g%3E%3C/g%3E%3Cpath class='cls-1' d='M32.64,40.16l11.31,3.72c2.08.76,4.37-.32,5.13-2.39h0c.76-2.08-.32-4.37-2.39-5.13l-18.69-6.36c-2.82-.94-5.88-.8-8.6.39l-8.45,3.76'/%3E%3Cpath class='cls-1' d='M48.95,42.05l11.89-4.84c2-.93,4.38-.07,5.32,1.93h0c.93,2,.07,4.38-1.93,5.32l-18.13,8.45-.76.32c-3.4,1.46-7.29,1.26-10.53-.53l-7.19-3.97c-3.26-1.8-7.18-1.99-10.6-.5'/%3E%3Cpath class='cls-1' d='M1.5,35.15l6.29-2.89c1-.47,2.19-.05,2.66.95l6.62,15.59c.47,1,.05,2.19-.95,2.66l-14.61,7.25'/%3E%3Ccircle class='cls-1' cx='6.12' cy='41.05' r='1'/%3E%3C/svg%3E"); } .quick-menu ul li:nth-child(3):hover a span {background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65 63.33'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23fdadad; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-1' d='M62.07,62.33H9.93c-1.06,0-1.93-.88-1.93-1.95V23.29c0-1.07.87-1.95,1.93-1.95h52.14c1.06,0,1.93.88,1.93,1.95v37.1c0,1.07-.87,1.95-1.93,1.95Z'/%3E%3Cline class='cls-1' x1='32' y1='54.33' x2='57' y2='54.33'/%3E%3Cline class='cls-1' x1='15' y1='54.33' x2='25' y2='54.33'/%3E%3Cline class='cls-1' x1='15' y1='49.33' x2='25' y2='49.33'/%3E%3Cpath class='cls-1' d='M50.06,32.62c1.25,2.3.41,5.18-1.89,6.43-2.3,1.25-5.18.41-6.43-1.89-1.25-2.3-.41-5.18,1.89-6.43,2.3-1.25,5.18-.41,6.43,1.89Z'/%3E%3Cpath class='cls-1' d='M50.34,30.74l1.23-.48c2.01-.44,4.15.47,5.18,2.36,1.25,2.3.41,5.18-1.89,6.43-1.08.59-2.28.71-3.39.44,0,0-.55-.11-1.22-.49'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-1' d='M7.88,42.96L1.07,16.7c-.27-1.04.34-2.11,1.36-2.38L52.69,1.06c1.02-.27,2.09.36,2.36,1.39l4.7,18'/%3E%3Cline class='cls-1' x1='27.88' y1='21.33' x2='57.91' y2='13.32'/%3E%3C/g%3E%3C/svg%3E"); } .quick-menu ul li:nth-child(4):hover a span {background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63.51 50.71'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23fdadad; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-1' d='M40.88,42H2.94c-1.07,0-1.94-.87-1.94-1.94V2.95c0-1.07.88-1.95,1.95-1.95h52.11c1.07,0,1.94.87,1.94,1.94v22.73'/%3E%3Cline class='cls-1' x1='24' y1='35' x2='40.87' y2='35'/%3E%3Cline class='cls-1' x1='7' y1='35' x2='18' y2='35'/%3E%3Cline class='cls-1' x1='7' y1='30' x2='18' y2='30'/%3E%3Cpath class='cls-1' d='M42.34,13.06c1.25,2.29.4,5.16-1.88,6.4-2.29,1.25-5.15.4-6.4-1.88-1.25-2.29-.4-5.16,1.88-6.4,2.29-1.25,5.16-.4,6.4,1.88Z'/%3E%3Cpath class='cls-1' d='M42.61,11.19l1.23-.48c2-.44,4.13.46,5.16,2.35,1.25,2.29.4,5.16-1.88,6.4-1.07.59-2.27.71-3.37.44,0,0-.55-.11-1.22-.49'/%3E%3C/g%3E%3Cg%3E%3Cpolyline class='cls-1' points='47.73 35.91 51.41 39.59 51.41 39.59 51.41 39.59 57.04 33.97'/%3E%3Cpath class='cls-1' d='M51.75,21.86s-2.61,5.83-10.75,4.57v13.22c.21.77-.73,6.98,10.75,10.06,11.48-3.08,10.54-9.29,10.75-10.06v-13.22c-8.14,1.26-10.75-4.57-10.75-4.57Z'/%3E%3C/g%3E%3C/svg%3E"); } .quick-menu ul li:nth-child(5):hover a span {background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65 65'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23fdadad; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M32.59,47.91c0,1.03-.83,1.86-1.86,1.86s-1.86-.83-1.86-1.86.83-1.86,1.86-1.86,1.86.83,1.86,1.86Z'/%3E%3Cpath class='cls-1' d='M32.5,63.5c-17.09,0-31-13.9-31-31S15.4,1.5,32.5,1.5s31,13.91,31,31-13.91,31-31,31Z'/%3E%3Cpath class='cls-1' d='M24.67,23.14s1.11-6.81,7.35-6.87c6.24-.06,9.06,5.34,7.92,10.13-1.14,4.79-9.39,4.87-10.12,12.37'/%3E%3C/svg%3E"); } @media only screen and (max-width: 1023px){ .quick-menu { height: 50px; } .quick-menu ul li a { font-size: 1.6rem; } .quick-menu ul li:nth-child(1) a span { width: 20px; } .quick-menu ul li:nth-child(2) a span { width: 20px; } .quick-menu ul li:nth-child(3) a span { width: 20px; } .quick-menu ul li:nth-child(4) a span { width: 20px; } .quick-menu ul li:nth-child(5) a span { height: 20px; } .quick-menu ul li::after { display: none; } } @media only screen and (max-width: 930px){ .quick-menu { display: none; } } /**************** 바로가기 ****************/ .fix-quick { position: fixed; right: 0; top: 200px; z-index: 1; } .fix-quick .baro-box { display: flex; justify-content: center; align-items: center; width: 45px; height: 120px; background-color: rgba(0,0,0,0.6); } .fix-quick .baro-box span { font-family: var(--point-fc); line-height: 2.2rem; font-weight: 500; color: #fff; writing-mode: vertical-lr; } .fix-quick .fix-list { position: relative; } .fix-quick .fix-list > a { display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; font-size: 0; background-color: var(--main-color); position: relative; } .fix-quick .fix-list > a::before { content: ""; width: 18px; height: 2px; margin-bottom: 6px; background-color: #fff; position: absolute; transition: transform 0.3s; } .fix-quick .fix-list > a::after { content: ""; width: 18px; height: 2px; margin-top: 6px; background-color: #fff; position: absolute; transition: all 0.3s; } .fix-quick .fix-list > a.on::before { transform: translateY(50%) rotate(-45deg); } .fix-quick .fix-list > a.on::after { margin: 0; transform: translateY(-50%) rotate(45deg); } .fix-quick .fix-list .fix-link { display: none; color: #fff; position: absolute; bottom: -260px; right: -10px; transition: all 0.3s; } .fix-quick .fix-list .fix-link li { width: 100px; /* padding-right: 44px; */ font-family: var(--point-fc); text-align: center; position: relative; margin-top: 20px; } .fix-quick .fix-list .fix-link li:first-child { margin-bottom: 20px; } .fix-quick .fix-list .fix-link li a { display: flex; flex-flow: column wrap; align-items: center; justify-content: center; word-break: keep-all; } .fix-quick .fix-list .fix-link li span { display: block; width: 32px; height: 28px; margin-bottom: 10px; } .fix-quick .fix-list .fix-link li:nth-child(1) span { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65.48 58.02'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3px; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-1' d='M60.5,27.77v16.75c0,.55-.45,1-1,1H2.5c-.55,0-1-.45-1-1V6.52c0-.55.45-1,1-1h22.5'/%3E%3Cline class='cls-1' x1='17.5' y1='56.52' x2='45.5' y2='56.52'/%3E%3Cline class='cls-1' x1='1.5' y1='38.52' x2='60.5' y2='38.52'/%3E%3Cline class='cls-1' x1='24.5' y1='45.52' x2='24.5' y2='56.52'/%3E%3Cline class='cls-1' x1='37.5' y1='45.52' x2='37.5' y2='56.52'/%3E%3C/g%3E%3Crect class='cls-1' x='25.08' y='1.5' width='38.9' height='25.94' rx='1' ry='1'/%3E%3Cline class='cls-1' x1='25.63' y1='8.11' x2='63.63' y2='8.11'/%3E%3Cpath class='cls-1' d='M58.35,16.14c1.09,1.99.35,4.48-1.64,5.57-1.99,1.09-4.48.35-5.57-1.64-1.09-1.99-.35-4.48,1.64-5.57,1.99-1.09,4.48-.35,5.57,1.64Z'/%3E%3C/svg%3E"); } .fix-quick .fix-list .fix-link li:nth-child(2) span { width: 32px; height: 27px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65.56 56'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-1' d='M34.4,38.69H6.88V2c0-.55.45-1,1-1h49.79c.55,0,1,.45,1,1v36.69h-5.28'/%3E%3Cpath class='cls-1' d='M58.68,38.69l5.8,12.02c.29.66-.19,1.41-.91,1.41H2c-.72,0-1.21-.75-.91-1.41l5.8-12.02'/%3E%3Cline class='cls-1' x1='15.52' y1='13.95' x2='37.1' y2='13.95'/%3E%3Cline class='cls-1' x1='15.52' y1='22.58' x2='26.31' y2='22.58'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-1' d='M52.76,38.76c0,4.93-4,8.93-8.93,8.93s-8.93-4-8.93-8.93,4-8.93,8.93-8.93,8.93,4,8.93,8.93Z'/%3E%3Cline class='cls-1' x1='49.92' y1='45.26' x2='58.74' y2='55'/%3E%3C/g%3E%3C/svg%3E"); } .fix-quick .fix-list .fix-link li:nth-child(3) span { width: 32px; height: 31px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68.04 66'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3px; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-1' d='M32.64,45.94l11.31,3.72c2.08.76,4.37-.32,5.13-2.39h0c.76-2.08-.32-4.37-2.39-5.13l-18.69-6.36c-2.82-.94-5.88-.8-8.6.39l-8.45,3.76'/%3E%3Cpath class='cls-1' d='M48.95,47.83l11.89-4.84c2-.93,4.38-.07,5.32,1.93h0c.93,2,.07,4.38-1.93,5.32l-18.13,8.45-.76.32c-3.4,1.46-7.29,1.26-10.53-.53l-7.19-3.97c-3.26-1.8-7.18-1.99-10.6-.5'/%3E%3Cpath class='cls-1' d='M1.5,40.93l6.29-2.89c1-.47,2.19-.05,2.66.95l6.62,15.59c.47,1,.05,2.19-.95,2.66l-14.61,7.25'/%3E%3Ccircle class='cls-1' cx='6.12' cy='46.83' r='1'/%3E%3C/g%3E%3Cpolyline class='cls-1' points='60.88 42.62 60.88 15 41.72 1.5 22.55 15 22.55 35.29'/%3E%3Cpath class='cls-1' d='M36.88,38.81v-7.87c0-1.41,1.14-2.56,2.56-2.56h5.22c1.41,0,2.56,1.14,2.56,2.56v11.44'/%3E%3C/svg%3E"); } /* .fix-quick .fix-list .fix-link li::after { content: ""; width: 8px; height: 8px; border-radius: 4px; background-color: #fff; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } */ .fix-quick .fix-list > a.on ~ .fix-link { display: block; } @media only screen and (max-width: 1023px){ .fix-quick { display: none; } } /**************** 공지사항 ****************/ .section3 { position: relative; padding: 170px 0; overflow-x: hidden; } .section3 .title-box2 .ti { position: relative; } .section3 .title-box2 .ti::before { content: "CNDC"; position: absolute; top: -54px; left: 0; font-size: 2.0rem; font-family: var(--point-fc); font-weight: 800; color: var(--main-color); } .section3::before { content: ""; position: absolute; top: 80px; left: 50%; transform: translateX(-50%); width: 1290px; height: 365px; opacity: 1; opacity: 0.5; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 307.92 86.35'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23f5f5f5; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='86.12 23.25 78.52 23.25 78.52 20.27 69.53 20.27 69.53 23.25 61.92 23.25 61.92 27.93 58.27 27.93 58.27 34.14 54.25 34.14 54.25 28.07 51.43 28.07 51.43 21.89 46.52 5.51 41.62 21.89 41.62 28.07 39.03 28.07 39.03 34.14 37.14 34.14 37.14 32.52 20.07 32.52 20.07 41.17 17.5 41.17 17.5 62.96 0 71.03 0 86.35 37.04 86.35 39.72 86.35 58.27 86.35 89.78 86.35 89.78 27.93 86.12 27.93 86.12 23.25'/%3E%3Cpolygon class='cls-1' points='109.7 8.71 102.84 6.25 102.84 0 101.83 0 101.83 5.89 95.3 3.54 95.3 11.64 92.52 10.64 92.52 73.45 112.27 73.45 112.27 17.73 109.7 16.81 109.7 8.71'/%3E%3Cpolygon class='cls-1' points='136.2 22.49 133.3 22.49 133.3 18.25 131.15 18.25 131.15 14.7 129.77 14.7 129.77 10.88 126.68 10.88 126.68 2.85 125.74 2.85 125.74 10.88 122.65 10.88 122.65 14.7 121.26 14.7 121.26 18.25 119.12 18.25 119.12 22.49 116.22 22.49 116.22 27.09 113.2 27.09 113.2 86.35 139.22 86.35 139.22 27.09 136.2 27.09 136.2 22.49'/%3E%3Cpolygon class='cls-1' points='208.01 13.62 201.59 11.32 201.59 5.46 200.64 5.46 200.64 10.98 194.52 8.78 194.52 16.36 191.92 15.43 191.92 35.83 189.35 35.83 189.35 31.62 185.93 31.62 185.93 27.24 178.8 27.24 178.8 24.45 170.39 24.45 170.39 27.24 163.26 27.24 163.26 31.62 159.84 31.62 159.84 37.45 158.75 37.45 158.75 18.89 144.04 10.88 144.04 86.35 156.92 86.35 158.75 86.35 189.35 86.35 207.47 86.35 207.47 74.26 210.42 74.26 210.42 22.07 208.01 21.2 208.01 13.62'/%3E%3Cpolygon class='cls-1' points='232.84 26.53 230.12 26.53 230.12 22.56 228.11 22.56 228.11 19.23 226.82 19.23 226.82 15.66 223.92 15.66 223.92 8.13 223.03 8.13 223.03 15.66 220.14 15.66 220.14 19.23 218.84 19.23 218.84 22.56 216.84 22.56 216.84 26.53 214.12 26.53 214.12 30.84 211.29 30.84 211.29 86.35 235.67 86.35 235.67 30.84 232.84 30.84 232.84 26.53'/%3E%3Cpolygon class='cls-1' points='307.92 70.96 299.6 70.96 299.6 62.31 293.44 62.31 287.05 57.5 287.05 43.53 285.24 43.53 285.24 39.02 280.7 39.02 280.7 36.15 275.33 36.15 275.33 39.02 270.78 39.02 270.78 43.53 268.6 43.53 268.6 54.44 266.35 54.44 266.35 31.02 255.46 37.52 255.46 57.5 253.96 57.5 253.96 23.16 240.18 15.65 240.18 86.35 253.96 86.35 299.6 86.35 299.6 85.96 307.92 85.96 307.92 70.96'/%3E%3C/svg%3E"); background-repeat: no-repeat; } /* .section3.show::before { animation: leftBg 0.6s ease-in-out 0s forwards; } */ @keyframes leftBg { 0% { width: 0; opacity: 0; } 100% { width: 500px; opacity: 1; } } .section3 .title-box1 { display: flex; justify-content: space-between; width: 100%; align-items: center; } .section3 .title-box1 .more-box { display: inline-block; width: auto; align-self: flex-end; } .section3 .notice-box { position: relative; } .section3 .notice-box .notice-swiper { overflow: hidden; position: relative; } .section3 .notice-box .notice-swiper::after { content: ""; width: 100px; height: 100%; background: linear-gradient(to right, transparent, #ffffff); position: absolute; right: 0; top: 0; z-index: 2; } .section3 .notice-box .notice-swiper .swiper-slide { width: auto; background-color: #fff; border: 1px solid #e5e5e5; transition: border-color 0.3s; } .section3 .notice-box .notice-swiper .swiper-slide a .notice-cont { max-width: 325px; padding: 50px 40px; height: 100%; min-height: 345px; min-width: 280px;} .section3 .notice-box .notice-swiper .swiper-slide:hover { border: 1px solid var(--main-color); } .section3 .notice-box .notice-swiper .swiper-slide a .notice-cont .cate { font-weight: 600; font-family: var(--basic-fc); } .section3 .notice-box .notice-swiper .swiper-slide a .notice-cont .ti { padding: 30px 0 104px 0; font-size: 1.8rem; } .section3 .notice-box .notice-swiper .swiper-slide a .notice-cont .data { display: block; width: 100%; } .section3 .notice-box .notice-swiper .swiper-slide a .notice-cont .data em { font-weight: 500; color: #999; margin-right: 14px; padding-left: 25px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 75'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23999; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6px; %7D %3C/style%3E%3C/defs%3E%3Crect class='cls-1' x='3' y='12' width='66' height='60'/%3E%3Cline class='cls-1' x1='3' y1='30' x2='69' y2='30'/%3E%3Cline class='cls-1' x1='21' y1='3' x2='21' y2='18'/%3E%3Cline class='cls-1' x1='51' y1='3' x2='51' y2='18'/%3E%3Cpolyline class='cls-1' points='50.11 43.07 35.11 58.07 25.78 49.74'/%3E%3C/svg%3E"); background-position: left center; background-repeat: no-repeat; background-size: 16px; } .section3 .notice-box .notice-swiper .swiper-slide a .notice-cont .data { font-weight: 600; color: #666; white-space: nowrap;} .section3 .swiper-next-prev { display: flex; gap: 10px; } .section3 .swiper-next-prev a { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid var(--gray-e9); border-radius: 50%; background-color: #fff; } .section3 .notice-box .more-box { padding-top: 45px; } @media only screen and (max-width: 1500px) { } @media only screen and (max-width: 1200px){ .section3 .notice-box .notice-swiper .swiper-slide a .img-wrap { width: 300px; height: 400px; } } @media only screen and (max-width: 1023px){ .section3 { padding: 80px 0; } .section3 .title-box1 { padding-bottom: 30px; } .section3 .swiper-control { top: 33px; } .section3 .title-box2 .ti::before { top: -34px; font-size: 1.6rem; } } @media only screen and (max-width: 767px){ .section3 { padding: 50px 0; } .section3 .swiper-next-prev a { width: 40px; height: 40px; border-radius: 50%; } .section3 .notice-box .notice-swiper .swiper-slide a:hover .img-wrap { transform: unset; transition: transform 0.3s ease-out; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08); } } @media only screen and (max-width: 400px){ .section3 .notice-box .notice-swiper::after { display: none; } } @media only screen and (max-width: 350px) { .section3 .notice-box .notice-swiper .swiper-slide a .notice-cont { max-width: 290px; } } /**************** 푸터 배너 ****************/ /* .exit-footer .top { width: 100%; padding: 0 !important; border-bottom: 1px solid var(--gray-e9); } .exit-footer .top .banner { display: flex; align-items: center; } .exit-footer .top .banner-slide { width: calc(100% - 240px); z-index: 5; } .exit-footer .top .banner-slide::before { content: ""; width: 60px; height: 100%; background: linear-gradient(to right, var(--gray-f9), transparent); position: absolute; left: 0; top: 0; z-index: 2; } .exit-footer .top .banner-slide::after { content: ""; display: block; position: absolute; top: 0px; right: 0px; width: 60px; height: 100%; z-index: 1; background: linear-gradient(to left, var(--gray-f9), transparent); } .exit-footer .top .banner-slide .swiper-slide { width: fit-content; height: 60px; line-height: 60px; position: relative; } .exit-footer .top .banner-slide .swiper-slide::after { content: ""; width: 1px; height: 10px; background-color: #c4c4c4; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .exit-footer .top .banner-slide .swiper-slide a { display: block; width: fit-content; height: inherit; line-height: inherit; padding: 0 35px; white-space: nowrap; } .exit-footer .top .banner strong { margin-right: 8px; font-size: 1.5rem; white-space: nowrap; } .exit-footer .top .banner .swiper-control { display: flex; align-items: center; gap: 5px; } .exit-footer .top .banner .swiper-button-prev, .exit-footer .top .banner .swiper-button-next { position: relative; top: unset; right: unset; bottom: unset; left: unset; margin: 0; padding: 0; width: 15px; height: 15px; color: #222; background: none; } .exit-footer .top .banner .swiper-button-prev::after, .exit-footer .top .banner .swiper-button-next::after { font-weight: 600; font-size: 1.4rem; } .exit-footer .top .banner .swiper-button-stop { width: 15px; height: 15px; background: url(../img/common/icn-slide1-stop.png) no-repeat center center / auto auto; } .exit-footer .top .banner .swiper-button-play { width: 15px; height: 15px; background: url(../img/common/icn-slide1-play.png) no-repeat center center / auto auto; } @media only screen and (max-width: 1100px){ .exit-footer .top .banner-slide.swiper { margin-left: 10px; width: 100%; } } @media only screen and (max-width: 600px){ .exit-footer .top .banner-slide::before { display: none; } }*/