@charset "utf-8";

/* ------- COMMON ------- */
html.sr .load-hidden { visibility: hidden; }
[data-scroll-y="false"] { overflow-y: hidden; }
/* .wrap{ overflow: hidden; } */ /* 서브페이지 sticky 메뉴 충돌 */
.wrap.main { opacity: 0; }
/* .main { overflow: hidden; } */ /* 서브페이지 sticky 메뉴 충돌 */
.blind { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden; }
.inner { position: relative; margin-left: auto; margin-right: auto; max-width: 1600px; width: 90%; }
.inner--large { max-width: 1720px; }
.image-wrap { position: relative; }
.image-wrap::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.color-white { color: var(--clr-white); }
.color-gray { color: var(--clr-gray); }
.color-body { color: var(--clr-body); }
.color-black { color: var(--clr-black); }
.color-dark { color: var(--clr-dark); }
.color-primary { color: var(--clr-navy); }
.color-navy { color: var(--clr-navy) !important; }
.color-sky { color: var(--clr-sky) !important; }
.bg-gray { background-color: var(--clr-bg-gray) !important; }
.bg-navy { background-color: var(--clr-navy) !important; }
.bg-sky { background-color: var(--clr-sky) !important; }
.bg-sky-light { background-color: var(--clr-sky-light) !important; }
.bg-navy-light { background-color: var(--clr-navy-light) !important; }
.bg-table-gray { background-color: var(--clr-table-gray) !important; }
.sp, .mo { display: none; }
.align-top { vertical-align: top; }
.word-break-all { word-break: break-all; }
.flex-wrap { flex-wrap: wrap; }
.text-justify { text-align: justify; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.fw-light { font-weight: 300 !important; }
.fw-bold { font-weight: bold !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.w-auto { width: auto; }
.d-none { display: none !important; }
.mt { margin-top: 30px !important; }
.mb { margin-bottom: 30px !important; }
.mt10 { margin-top: 10px !important; }
.mt16 { margin-top: 16px !important; }
.mt20 { margin-top: 20px !important; }
.mt4 { margin-top: 40px !important; }
.mt6 { margin-top: 60px !important; }
.mb8 { margin-bottom: 80px; }
.mt8 { margin-top: 80px !important; }
.mt0 { margin-top: 0 !important; }
.mb0 { margin-bottom: 0 !important; }
.my0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my2 { margin-top: 20px !important; margin-bottom: 20px !important; }
.mr20 { margin-right: 20px !important; }
.mxy0 { margin: 0 !important; }
.pt0 { padding-top: 0 !important; }
.pb0 { padding-bottom: 0 !important; }
.pt3 { padding-top: 30px !important; }
.pxy8 { padding: 8px !important; }
.pxy20 { padding: 20px !important; }
.pxy2040 { padding: 20px 40px 0 !important; }
.pl4 { padding-left: 40px !important; }
.fs-14 { font-size: 14px !important; }
.indent-1 { text-indent: 1em; }
.indent-2 { text-indent: 2em; }
.heading, .title { color: var(--clr-black); }
.border-0 { border: none !important; }
.letter-spacing { letter-spacing: 0.05em; }
@media screen and (max-width: 1280px) {
    .mb8 { margin-bottom: 45px; }
}
@media screen and (max-width: 768px) {
    .mt30-mo { margin-top: 30px; }
}


.swiper-container-horizontal>.swiper-scrollbar { height: 5px; }
.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { left: 0; width: 100%; }
.swiper-container .swiper-scrollbar { left: 0; width: 100%; background: #eee; }
.swiper-scrollbar-drag { background: var(--clr-sky); }
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: none; }


/* Floating */
.floating-container { z-index: 10; position: fixed; bottom: 60px; right: 60px; }
.scroll-top { pointer-events: none; }
.scroll-top a { display: block; margin: auto; width: 65px; height: 65px; background: var(--clr-navy) url('../images/scroll-top-arrow.svg') no-repeat center / auto 35%; opacity: 0; visibility: hidden; transition: ease .6s; }
.floating { display: block; transition: all cubic-bezier(0.18, 0.89, 0.32, 1.28) .35s; }
.floating-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 25px; width: 110px; height: 110px; background: linear-gradient(48deg, var(--clr-navy), #ff7900); border-radius: 50%; box-shadow: 0px 4px 10px 0px rgba(108, 108, 108, 0.15), 0px 6px 16px 0px rgba(108, 108, 108, 0.25); transition: all cubic-bezier(0.18, 0.89, 0.32, 1.28) .35s; animation: .45s floating cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.5s forwards; opacity: 0; }
.floating .icon { display: block; margin: 0 auto 10px; width: 50px; height: 34px; background: url('../images/logo-symbol-light.svg') no-repeat center / auto 100%; }
.floating .text { text-align: center; font-size: 15px; color: #fff; font-weight: 700; }
[data-floating="false"] { position: absolute; }
[data-scroll-top="true"] .scroll-top a { opacity: 1; visibility: visible; transition: ease .3s; }
[data-scroll-top="true"] .scroll-top { pointer-events: auto; }
@keyframes floating {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: none; }
}


/* Form */
.check { display: inline-flex; align-items: center; position: relative; user-select: none; }
.check label { padding-left: 10px; font-size: 16px; color: #3d3d40; cursor: pointer; }
.check i { display: inline-block; vertical-align: middle; position: relative; width: 26px; height: 26px; pointer-events: none; }
.check i::before,
.check i::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 3px; box-sizing: border-box; }
.check i::after { background-repeat: no-repeat; border: 1px solid #111; background-color: #111; background-image: url('../images/icon-checked.svg'); background-size: auto 16px; background-position: center; opacity: 0; }
.check i::before { border: 1px solid #dddddd; }
.check input { z-index: 2; position: absolute; top: 0; left: 0; bottom: 0; margin: auto; width: 26px; height: 26px; color: #fff; opacity: 0; cursor: pointer; }
.check input:checked ~ i::after { opacity: 1; }
.check a { background: linear-gradient(to bottom, #666, #666); background-size: 1px 1px; background-position: left bottom 3px; background-repeat: repeat-x; }
.check a span { vertical-align: baseline; }
.check-light label { color: #fff; cursor: pointer; }
.check-light i::after { background-color: #fff; background-image: url('../images/check-dark.png'); }
.check-light i::before { border-color: #fff; }
.radio { display: inline-flex; align-items: center; position: relative; user-select: none; }
.radio label { padding-left: 10px; font-size: 16px; color: #3d3d40; cursor: pointer; }
.radio i { display: inline-block; vertical-align: middle; position: relative; width: 18px; height: 18px; pointer-events: none; }
.radio i::before,
.radio i::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; box-sizing: border-box; }
.radio i::after { padding: 4px; background-image: radial-gradient(circle at 50%, var(--clr-navy) 40%, #fff 46%); border: 1px solid var(--clr-navy); opacity: 0; }
.radio i::before { border: 1px solid #dddddd; }
.radio input { z-index: 2; position: absolute; top: 0; left: 0; bottom: 0; margin: auto; width: 26px; height: 26px; color: #fff; opacity: 0; cursor: pointer; }
.radio input:checked ~ i::after { opacity: 1; }
.radio input:checked ~ label { color: #111; }
.input-block-group { display: flex; }
.input-block-group .radio-block { flex: 0 1 180px; display: inline-block; position: relative; margin-right: -1px; text-align: center; }
.input-block-group .radio-block:first-child i { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.input-block-group .radio-block:last-child i { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.input-block-group .radio-block i { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #e5e5e5; pointer-events: none; transition: all ease .15s; }
.input-block-group .radio-block input { position: absolute; opacity: 0; }
.input-block-group .radio-block input:checked ~ i { z-index: 2; border-color: var(--clr-navy); }
.input-block-group .radio-block input:checked ~ label { color: var(--clr-navy); }
.input-block-group .radio-block label { display: block; padding: 10px; font-size: 18px; color: #999999; font-weight: 500; cursor: pointer; transition: all ease .15s; }
.mobile-scroll-container img { max-width: 100%; }
@media (hover: hover) and (pointer: fine) {
    .floating:hover { transform: scale(1.1); }
    .floating:hover .floating-wrap { box-shadow: -3px 3px 14px 0px rgba(234, 0, 44, 0.5), 3px -3px 14px 0px rgb(255, 121, 0, 0.5); }

    .check a:hover { color: #000; }
}
@media screen and (max-width:1280px){
    .inner { padding: 0; width: 90%; }
    .image-wrap.border:not(.full) { padding: 60px; }
    .pc { display: none; }
    .sp { display: block; }

    .floating-container { right: 5%; }
    .floating-wrap { margin-bottom: 15px; width: 75px; height: 75px; }
    .floating .icon { margin-bottom: 5px; width: 35px; height: 20px; }
    .floating .text { font-size: 12px; }

    .mobile-scroll-container { overflow: visible; position: relative; padding-bottom: 12px; }
    .mobile-scroll-container .swiper-slide { width: auto; }
    .mobile-scroll-container .image-wrap img { max-width: none; width: 1000px; }

    .scroll-top a { width: 55px; height: 55px; }

    .check i { width: 22px; height: 22px; }
    .check label { font-size: 15px; }
    .input-block-group .radio-block label { font-size: 16px; }
}
@media screen and (max-width:768px){
    .image-wrap.border:not(.full) { padding: 24px; }

    .mo { display: block; }

    .floating-container { bottom: 25px; }
    .scroll-top { bottom: 15px; }
    .scroll-top a { width: 45px; height: 45px; }

    .check i { width: 20px; height: 20px; }
    .check label { padding-left: 6px; font-size: 14px; }
    .input-block-group .radio-block label { font-size: 14px; }
}


/* Icons */
.icon { display: inline-block; vertical-align: middle; }
.icon::before { background-repeat: no-repeat; background-position: center; background-size: auto 100%; }
.icon-external-link::before { content: ''; display: inline-block; vertical-align: middle; width: 15px; height: 15px; background-image: url('../images/external-link.svg'); }
@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 768px) {
}


/* ------- Button ------- */
.button { display: inline-block; padding: 12px 30px; line-height: 1.4; font-size: 16px; color: #111; background: #fff; border: 1px solid transparent; transition: background ease .15s; }
.button-primary { font-weight: 700; color: #fff; background: var(--clr-navy); }
.button-arrow { overflow: hidden; display: inline-block; position: relative; padding-right: 60px; min-width: 220px; line-height: 1; color: #fff; border: 1px solid #fff; transition: all ease .35s; }
.button-arrow::after { content: ''; position: absolute; top: 0; right: 30px; bottom: 0; margin: auto; display: block; width: 7px; height: 13px; background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 7.7 12.9' enable-background='new 0 0 7.7 12.9' xml:space='preserve' stroke='%23111111'%3E%3Cg%3E%3Cpath stroke-width='1.8' stroke-miterlimit='10' d='M5.7,6.4'/%3E%3Cline stroke-width='1.8' stroke-linecap='square' stroke-linejoin='bevel' stroke-miterlimit='10' x1='1.3' y1='1.3' x2='6.4' y2='6.4'/%3E%3Cline stroke-width='1.8' stroke-linecap='square' stroke-linejoin='bevel' stroke-miterlimit='10' x1='1.3' y1='11.6' x2='6.4' y2='6.4'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; transition: background-image ease .15s; }
.button-round { border-radius: 50px; }
.button-gradient { color: #fff; background-image: linear-gradient(48deg, var(--clr-navy), #ff7900, #ff7900, var(--clr-navy)); background-size: 400% 100%; background-position: 0%; border-color: transparent; transition: background ease .3s; }
.button-dark { color: #fff; background: #333333; }
.button-border { color: #111; border-color: #ddd; }
.button-border-light { color: #fff; border-color: #fff; }
.button-border[aria-selected="true"] { color: #fff; background: var(--clr-navy); border-color: var(--clr-navy); }
.button-arrow[aria-selected="true"]::after { background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 7.7 12.9' enable-background='new 0 0 7.7 12.9' xml:space='preserve' stroke='%23ffffff'%3E%3Cg%3E%3Cpath stroke-width='1.8' stroke-miterlimit='10' d='M5.7,6.4'/%3E%3Cline stroke-width='1.8' stroke-linecap='square' stroke-linejoin='bevel' stroke-miterlimit='10' x1='1.3' y1='1.3' x2='6.4' y2='6.4'/%3E%3Cline stroke-width='1.8' stroke-linecap='square' stroke-linejoin='bevel' stroke-miterlimit='10' x1='1.3' y1='11.6' x2='6.4' y2='6.4'/%3E%3C/g%3E%3C/svg%3E"); }
@media (hover: hover) and (pointer: fine) {
    .button-primary:hover { background: #e85a4a; }
    .button-arrow:hover { color: #111; background: #fff; border-color: #fff; }
    .button-arrow:hover::after { background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 7.7 12.9' enable-background='new 0 0 7.7 12.9' xml:space='preserve' stroke='%23ffffff'%3E%3Cg%3E%3Cpath stroke-width='1.8' stroke-miterlimit='10' d='M5.7,6.4'/%3E%3Cline stroke-width='1.8' stroke-linecap='square' stroke-linejoin='bevel' stroke-miterlimit='10' x1='1.3' y1='1.3' x2='6.4' y2='6.4'/%3E%3Cline stroke-width='1.8' stroke-linecap='square' stroke-linejoin='bevel' stroke-miterlimit='10' x1='1.3' y1='11.6' x2='6.4' y2='6.4'/%3E%3C/g%3E%3C/svg%3E"); }
    .button-gradient:hover { background-position: 20%; }
    .button-border:hover,
    .button-border-light:hover { color: #fff; background: var(--clr-navy); border-color: var(--clr-navy); }
    .button-hover-sky:hover { color: #fff !important; background: var(--clr-sky) !important; }
    .button-hover-sky:hover * { color: inherit; }
}
@media screen and (max-width: 1280px) {
    .button { font-size: 15px; }
    .button-arrow { padding: 12px 40px 12px 20px; }
    .button-arrow::after { right: 20px; height: 10px; }
}
@media screen and (max-width: 768px) {
}


/* ------- Modal ------- */
.modal-container { display: none; z-index: 11; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); }
.modal-container .modal-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 5px; width: auto; height: 100%; min-height: calc(100% - 10px); max-height: calc(100% - 10px); }
.modal-container .modal { overflow: hidden; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 0 60px; max-width: 800px; width: 100%; height: auto; }
.modal-container .head-title { margin-bottom: 15px; padding-bottom: 10px; text-align: center; font-size: 1.6rem; font-weight: 600; color: #111; border-bottom: 1px solid var(--border-c); }
.modal-container .modal-body { overflow-x: hidden; overflow-y: auto; padding: 24px 5%; min-height: 200px; background: #fff; }
.modal-container .modal-body p:not(.head-title) { margin: 14px 0; }
.modal-container .modal .close { display: block; position: absolute; top: -20px; right: 0; width: 60px; height: 60px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: auto 55%; }
.modal-container .modal img { max-width: 100%; }
.modal-container--auto .modal { max-width: 100%; width: auto; }
.modal-container--flat .modal-body { padding: 0; }
@media (hover: hover) and (pointer: fine) {
}
@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 768px) {
}


/* ------- Header ------- */
.header { z-index: 10; position: absolute; top: 0; left: 0; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, .1); transition-property: color, background, border, box-shadow; transition-duration: .35s, .35s, .35s; }
.header-logo { z-index: 11; position: absolute; top: 21px; left: 5%; width: 173px; height: 38px; background: url('../images/logo.png') no-repeat center / auto 100%; transition-property: background; transition-duration: .35s, .35s; }
.header-nav { overflow: hidden; display: flex; flex-wrap: wrap; justify-content: center; height: 80px; text-align: center; }
.header-nav .lists { display: flex; justify-content: center; }
.header-nav .lists .link { display: block; position: relative; margin: 0 14px; padding: 31px 10px; line-height: 1; font-size: 18px; font-weight: 500; transition-property: margin, color; transition-timing-function: ease; transition-duration: .35s, .15s; }
.header-nav .lists .link[aria-expanded]::after { content: ''; position: absolute; top: 0; right: 5%; bottom: 0; margin: auto -4px auto 0; width: 30px; height: 30px; background: url('../images/chevron-right.svg') no-repeat center / auto 13px; transition: transform ease  .15s; }
.header-nav .lists .link[aria-expanded="true"]::after { transform: rotate(90deg); }
.header-nav .sub-lists { padding: 10px 0 30px; }
.header-nav .sub-lists .sub-link { display: block; margin: 0 14px; padding: 10px; font-size: 16px; font-weight: 500; transition-property: color; transition-duration: inherit; }
/* .header-language { z-index: 2; position: absolute; top: 33px; right: 47px; }
.header-language .current { position: relative; padding: 2px 26px 0 14px; font-size: 16px; color: inherit; font-weight: 600; background: url('../images/language-arrow.png') no-repeat top 13px right 10px; border: 1px solid #000; border-radius: 30px; }
.header-language ul { position: absolute; left: -3px; top: 100%; margin-top: 10px; width: 80px; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .1); visibility: hidden; opacity: 0; }
.header-language a { display: block; padding: 10px 0; text-align: center; font-size: 14px; color: #212227; transition: all ease .15s; }
.header-language .current[aria-pressed="true"] + ul { visibility: visible; opacity: 1; } */
.header-search { z-index: 11; position: absolute; top: 20px; right: 5%; }
.header-search form { display: block; position: relative; width: 250px; }
.header-search .input { padding: 10px 50px 10px 20px; width: 100%; height: 40px; font-size: 16px; background: #F7F7F7; border: none; border-radius: 50px; }
.header-search .search { position: absolute; top: 0; right: 5px; width: 40px; height: 40px; background: url('../images/search.svg') no-repeat center / auto 45%; }
.header-search .toggle { display: none; position: absolute; top: 10px; right: 40px; width: 50px; height: 50px; background: url('../images/search.svg') no-repeat center / auto 45%; transition: background ease .35s; }
.header-hamburger { display: none; z-index: 11; position: absolute; top: 25px; right: 5%; margin-right: -13px; width: 50px; height: 50px; }
.header-hamburger span { position: absolute; left: 0; left: 14px; width: 45%; height: 2px; background: #000; transition-property: transform, background; transition-timing-function: ease; transition-duration: .35s, .35s; }
.header-hamburger span:nth-of-type(1) { top: 17px; }
.header-hamburger span:nth-of-type(2) { top: 25px; }
.header-hamburger span:nth-of-type(3) { top: 33px; }
.header-hamburger[aria-expanded="true"] span:nth-of-type(1) { top: 18px; left: 16px; width: 40%; transform: translateY(6px) rotate(-45deg); }
.header-hamburger[aria-expanded="true"] span:nth-of-type(2) { opacity: 0; }
.header-hamburger[aria-expanded="true"] span:nth-of-type(3) { top: 30px; left: 16px; width: 40%; transform: translateY(-6px) rotate(45deg); }

/* Search 25.04.30 */
.icon-btn-search { z-index: 11; position: absolute; top: 21px; right: 5%; width: 40px; height: 40px; cursor: pointer; }
.icon-btn-search .icon-search { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 100%; background-color: var(--clr-sky); }
.icon-btn-search .icon-search svg { stroke: var(--clr-white) }

[data-header-pin] { position: fixed; }
[data-header-sticky] { position: fixed; }
/* [data-header-sticky][data-header-theme="dark"],
[data-header-sticky][data-header-theme="light"] { box-shadow: 0px 0px 20px 0px rgba(10, 10, 10, .1); } */
/* [data-header-menu="opened"] { box-shadow: 0px 0px 20px 0px rgba(10, 10, 10, .1); } */
[data-header-menu="opened"] .header-nav .lists .link { margin: 0 40px; }
[data-header-menu="opened"] .header-hamburger span { background: #000; }
[data-header-menu="opened"][data-header-theme="transparent"] { color: #111; background: #fff; }
[data-header-menu="opened"][data-header-theme="transparent"] .header-search .toggle { background-image: url('../images/search.svg'); }
[data-header-theme="dark"] { color: #fff; background: #111; }
[data-header-theme="light"] { background: #fff; }
[data-header-theme="transparent"] { color: #fff; border-bottom-color: rgba(255, 255, 255, .1); }
/* [data-header-theme="transparent"][data-header-menu="opened"] .header-logo { background-image: url('../images/logo.png'); } */
[data-header-theme="transparent"] .header-logo { background-image: url('../images/logo-light.png'); }
[data-header-theme="transparent"] .header-hamburger span { background: #fff; }
[data-header-theme="transparent"] .header-search .input { background: rgba(255, 255, 255, .1); }
[data-header-theme="transparent"] .header-search .search,
[data-header-theme="transparent"] .header-search .toggle { background-image: url('../images/search-light.svg'); }


@media (hover: hover) and (pointer: fine) {
    .header-nav .lists li:hover .link { color: var(--clr-navy); }
    .header-nav .sub-lists .sub-link:hover { color: var(--clr-navy); }
}
@media screen and (max-width: 1280px) {
    .header { height: 70px; }
    .header-logo { z-index: 11; top: 22px; width: 118px; height: 26px; }
	.header-hamburger { display: block; top: 10px; }
    .header-menu { z-index: 10; display: none; position: fixed; top: 0; left: 0; padding-top: 70px; width: 100%; height: 100%; background: #fff; }
    .header-nav { overflow: auto; padding: 70px 0; height: 100%; text-align: left; color: #000; }
    .header-nav .lists { flex-direction: column; justify-content: flex-start; width: 100%; }
    .header-nav .lists .link { margin: 0; padding: 16px 5%; font-size: 18px; }
    .header-nav .sub-lists { overflow: hidden; padding: 0 15px; height: 0; color: #fff; background: #004884; }
    .header-nav .sub-lists li:first-child { padding-top: 10px; }
    .header-nav .sub-lists li:last-child { padding-bottom: 10px; }
    .header-nav .sub-lists .sub-link { margin: 0; padding: 10px 5%; font-size: 15px; }
    .header-search { top: 0; right: 5%; }
    .header-search .toggle { display: block; }
    .header-search-wrap { display: none; }

    [data-header-sticky][data-header-theme="dark"],
    [data-header-sticky][data-header-theme="light"],
    [data-header-menu="opened"] { box-shadow: 0px 0px 10px 0px rgba(10, 10, 10, .1); }
    /* [data-header-theme="transparent"] .header-hamburger span { transition-delay: 0s, 0.35s; } */
    /* [data-header-mobile-menu="opened"] .header-logo { color: #000; transition-delay: 0.35s; } */
    [data-header-mobile-menu="opened"][data-header-theme="transparent"] .header-hamburger span { background: #000; transition-delay: 0s, 0s; }
    [data-header-mobile-menu="opened"][data-header-theme="transparent"] .header-logo { background-image: url('../images/logo.png'); }
    [data-header-mobile-menu="opened"][data-header-theme="transparent"] .header-search .toggle { background-image: url('../images/search.svg'); }
}


/* ------- Footer ------- */
.footer { padding: 32px 0; color: #646464; font-size: 14px; letter-spacing: -0.05em; background: #F5F5F5; }
.footer-primary { display: flex; align-items: center; justify-content: space-between; margin: auto; max-width: 1330px; width: 90%; }
.footer-primary .col:nth-child(2) { padding-left: 13%; }
.footer-logo { width: 170px; height: 36px; background: url('../images/logo-gray.png') no-repeat center / auto 100%; }
.footer-info ul { display: flex; flex-wrap: wrap; }
.footer-info li:last-child { width: 100%; }
.footer-links ul { display: flex; flex-wrap: wrap; margin: 0 -8px 20px; }
.footer-links li { position: relative; }
.footer-links li:not(:last-child)::before { content: ''; position: absolute; top: 11px; right: -1px; width: 3px; height: 3px; background: #333; border-radius: 50%; }
.footer-links a { padding: 0 8px; color: #333; }
.footer-copyright { margin: 0; letter-spacing: -0.01em; }
.footer-family { position: relative; width: 270px; }
.footer-family .toggle { display: block; position: relative; padding: 8px 48px 8px 16px; height: 40px; color: #333; letter-spacing: 0.04em; border: 1px solid #E0E0E0; transition: all ease .3s; }
.footer-family .toggle::after { content: ''; position: absolute; top: 0; right: 13px; bottom: 0; margin: auto; width: 22px; height: 22px; background: url('../images/family-site-arrow.svg') no-repeat center / auto 80%; transition: all ease .3s; }
.footer-family .listbox { display: none; z-index: 11; position: absolute; bottom: 100%; left: 0; margin-bottom: -1px; padding: 10px 20px; width: 100%; background: #fff; border: 1px solid #555; }
.footer-family .listbox li { display: block; padding: 2px 0; color: #333; }
.footer-family[aria-expanded="true"] .listbox { display: block; }
/* .footer-family[aria-expanded="true"] .toggle { color: #fff; border-color: #555555; } */
/* .footer-family[aria-expanded="true"] .toggle::after { background-image: url('../images/family-site-arrow-light.svg'); } */
.footer-family[aria-expanded="true"] .toggle::after { transform: scaleY(-1); }
.footer-social ul { display: flex; margin: 20px 0 0 -5px; }
.footer-social .icon { display: block; margin-right: 20px; width: 28px; height: 25px; background-repeat: no-repeat; background-position: center; background-size: auto 22px; }
.footer-social .icon-facebook { background-image: url('../images/icon-facebook.png'); }
.footer-social .icon-youtube { background-image: url('../images/icon-youtube.png'); }
.footer-social .icon-naver-blog { background-image: url('../images/icon-naver-blog.png'); }
.footer-social .icon-linkedin { background-image: url('../images/icon-linkedin.png'); }
@media (hover: hover) and (pointer: fine) {
    .footer-primary .links a:hover { opacity: .7; }
    /* .footer-family .listbox li a:hover { color: #fff; }
    .footer-family .toggle:hover { color: #fff; border-color: #555555; } */
    /* .footer-family .toggle:hover::after { background-image: url('../images/family-site-arrow-light.svg'); } */
}
@media screen and (max-width: 1280px) {
    .footer { font-size: 13px; }
    .footer-primary { flex-direction: column; align-items: flex-start; }
    .footer-primary .col:nth-child(2) { margin: 20px 0; padding-left: 0; }
    .footer-logo { width: 125px; height: 26px; }
    .footer-social .icon { width: 21px; height: 18px; background-size: auto 18px; }
}
@media screen and (max-width: 768px) {
}