@charset "utf-8";

/* common */
body.fixed { overflow: hidden; }
.inner { width: calc(100% - 40px); max-width: 1720px; margin: 0 auto; }
.logo a { display: block; }
.logo a img { width: 100%; }

/* button */
.button__wrap { display: flex; justify-content: center; margin-top: 120px; gap: 20px; }
.btn { display: flex; justify-content: center; align-items: center; }
.btn-box { overflow: hidden; position: relative; width: 208px; height: 60px; border: none; background-color: #fff;  transition: 0.4s ease-out;  }
.btn-box > .in-text { position: relative; padding-left: 27px; z-index: 5; transition: 0.4s ease-out; }
.btn-box > .in-text > span { position: relative; z-index: 5; font-family: var(--font-IBM); letter-spacing: 0;  font-size: 18px; font-weight: 500; color: var(--main-color); text-transform: uppercase; transition: 0.4s ease-out; }
.btn-box > .in-text::before { content: ""; position: absolute; left: 0; top: 50%; display: block; width: 12px; height: 12px; background-color: var(--main-color); transform: translateY(-50%); z-index: 0; transition: 0.4s ease-out; }
.btn-box > .in-text::after { content: ""; position: absolute; right: 0; top: 50%; display: block; width: 12px; height: 12px; background-color: #fff; transform: translateY(-50%) scale(0); z-index: 0; transition: 0.4s ease-out; }
.btn-box:hover > .in-text { padding-left: 0; padding-right: 27px; }
.btn-box:hover > .in-text::before { transform: translateY(-50%) scale(32); }
.btn-box:hover > .in-text::after { transform: translateY(-50%) scale(1); }
.btn-box:hover > .in-text > span { color: #fff; }
.btn-box.type-2 > .in-text { padding-left: 32px; }
.btn-box.type-2 > .in-text > span { font-size: 21px; }  
.btn-box.type-2:hover > .in-text { padding-left: 0; padding-right: 32px; }
.btn-box.color-black { background-color: #000; }
.btn-box.color-black > .in-text > span  { color: #fff; }
.btn-box.color-black > .in-text::before { background-color: #fff; }
.btn-box.color-black > .in-text::after { background-color: #000;  }
.btn-box.color-black:hover > .in-text > span { color: #000; }
.btn-box.color-mix { background-color: #000; }
.btn-box.color-mix > .in-text > span  { color: #fff; }
.btn-box.color-mix > .in-text::before { background-color: #fff; }
.btn-box.color-mix > .in-text::after { background-color: #fff;  }
.btn-box.color-mix:hover > .in-text > span { color: #fff; }
.btn-box.color-mix:hover > .in-text::before { background-color: var(--main-color); }
.btn-box.color-mix-2 { background-color: var(--main-color); }
.btn-box.color-mix-2 > .in-text > span  { color: #fff; }
.btn-box.color-mix-2 > .in-text::before { background-color: #fff; }
.btn-box.color-mix-2:hover > .in-text::before { background-color: var(--main-color); }

/* header */
.header { position: fixed; left: 0; top: 0; width: 100%; height: var(--header-H); z-index: 900; transition: 0.2s ease-out; }
.header::before { content: ""; position: absolute; left: 0; top: var(--header-H); display: block; width: 100%; height: 0; background-color: #fff; z-index: -1; transition: height 0.6s; }
.header__inner { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; padding: 0 100px; }
.header .logo { position: absolute; left: 50%; top: 50%; width: 110px; transform: translate(-50%, -50%); z-index: 10; }
.header .logo img { width: 100% }
.gnb .gnb__list { display: flex; gap: 60px; }
.gnb .gnb__list > li { position: relative; padding: 27px 0; }
.gnb .gnb__list > li > a { font-size: 20px; font-weight: 500; }
.gnb .lnb { position: absolute; left: 0; top: 100%; width: max-content; padding: 20px 0; z-index: 5; color: #111; visibility: hidden; opacity: 0; transition: 0.2s ease-out; }
.gnb .lnb__list { display: flex; gap: 30px; }
.gnb .lnb__list > li > a { font-size: 20px; font-weight: 300; color: #333; }
.s-lnb__list.no-menu { display: none; }
.gnb .s-lnb__list { margin-top: 10px; }
.gnb .s-lnb__list > li > a { font-size: 18px; font-weight: 300; color: #666; }
.gnb .s-lnb__list > li + li { margin-top: 10px; }
.header-btn__wrap { display: flex; align-items: center; }
.lang__list { position: relative; display: flex; gap: 23px; margin-right: 40px; z-index: 10; }
.lang__list > li { position: relative; height: fit-content; }
.lang__list > li:not(:first-child)::before { content: ""; position: absolute; left: -13px; top: 50%; display: block; width: 3px; height: 3px; background-color: #DDDDDD; transform: translateY(-50%);}
.lang__list > li > a { font-size: 18px; font-weight: 500; color: #000; letter-spacing: 0; opacity: 0.3; }
.lang__list > li > .on { opacity: 1; }
.header-btn__wrap .btn-menu { position: relative; border: none; background-color: transparent; z-index: 10; transition: 0.2s ease-out; }

@media (hover: hover) and (pointer: fine) {
    .header-btn__wrap .btn-menu:hover { transform: rotate(45deg); }
}

.header.color-w { color: #fff; background-color: transparent; }
.header.color-w .logo img { filter: brightness(0) invert(1); }
.header.color-w .btn-menu img { filter: brightness(0) invert(1); }
.header.color-w .lang__list > li > a { color: #fff; }
.header.color-w .lang__list > li > a.on { opacity: 1; }
.header.color-w .lang__list > li:not(:first-child)::before { background-color: #fff; opacity: 0.2; }
.header.color-w-2 .gnb { color: #fff; }
.header.bg-w { background-color: #fff; }

.header.on { background-color: #fff;  border-bottom: 1px solid #EEEEEE; }
.header.on .gnb__list > li > a { color: #111111; }
.header.on .gnb__list > li:hover > a { color: var(--main-color); }
.header.on .logo img { filter: none !important; }
.header.on .btn-menu img { filter: none !important; }
.header.on::before { height: var(--lnb-H);  border-bottom: 1px solid #EEEEEE; }
.header.on .lang__list > li > a { color: #000 !important; }
.header.on .lang__list > li:not(:first-child)::before { background-color: #DDDDDD !important; opacity: 1 !important; }
.gnb .lnb.on { visibility: visible; opacity: 1; }
.header.on.menu { border-bottom: none; }
.header.on.menu::before { display: none; }

#allMenu { position: fixed; right: 0; top: 0; width: 100%; height: 100%; padding-top: var(--header-H); padding-bottom: 60px; z-index: 5; background-color: #fff; transform: translateX(100%); transition: transform 0.6s; }
#allMenu .inner { overflow-y: auto; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding-top: 120px; scrollbar-width: none;  }
#allMenu .inner::-webkit-scrollbar { display: none; }
#allMenu .menu__inner { width: 100%; }
#allMenu .gnb__list { display: flex; width: 100%; }
#allMenu .gnb__list > li { flex: 1; padding: 0 60px; border-right: 1px solid #EEEEEE; }
#allMenu .gnb__list > li:last-child { border-right: none; }
#allMenu .gnb__list > li > a { font-size: 50px; font-weight: 600; color: #111; pointer-events: none; cursor: default;  }
#allMenu .lnb { margin-top: 3em; font-size: 20px; }
#allMenu .lnb__list > li + li { margin-top: 20px; }
#allMenu .lnb__list > li > a { font-weight: 300; color: #333; }
#allMenu .s-lnb__list { padding: 20px; }
#allMenu .s-lnb__list > li > a { font-weight: 300; color: #666; }
#allMenu .s-lnb__list > li + li { margin-top: 10px; }
#allMenu .f-info__wrap { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; font-size: 18px;}
#allMenu .f-info__wrap > .link { font-weight: 500; color: #333; }
#allMenu .copyright { margin-top: 0; font-weight: 300; color: #888; opacity: 1; }
#allMenu.on { transform: translateX(0); }

.btn-top__box { position: fixed; right: 20px; bottom: 20px; z-index: 100; }
.btn-top__box button { position: absolute; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border: none; }
.btn-top__box button .icon { overflow: hidden; position: relative; width: 30px; height: 30px; }
.btn-top__box button .icon::before, .btn-top__box button .icon::after { content: ""; display: block; width: 100%; height: 100%; background: url("/img/common/icon_top.svg") no-repeat center center/contain; pointer-events: none; animation: btnTopAni 1.2s infinite both; }
.btn-top__box .btn-top { background-color: #000; }
.btn-top__box .btn-down { background-color: #fff; z-index: -1; }
.btn-top__box .btn-down .icon::before, .btn-top__box .btn-down .icon::after { transform: translate(-50%, -50%) rotate(180deg); filter: invert(1); }
.btn-top__box.color-w .btn-top { background-color: #fff; }
.btn-top__box.color-w .btn-top .icon::before, .btn-top__box.color-w .btn-top .icon::after { filter: invert(1); }
.btn-top__box.down .btn-top { background-color: #000; z-index: -1; }
.btn-top__box.down .btn-down { background-color: #fff; z-index: 1; }
.btn-top__box.down .btn-down .icon { transform: rotate(180deg); }

/* footer */
.footer { padding: 100px 0; color: #fff; background-color: #000000; }
.footer__inner { padding: 0 100px; }
.footer__top, .footer__bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.footer__top { padding-bottom: 40px; border-bottom: 1px solid #fff; }
.footer__top .logo { width: 110px; }
.footer__top .logo img { width: 100%; filter: brightness(0) invert(1); }
.f-menu__wrap .gnb__list { display: flex; align-items: center; gap: 60px; }
.f-menu__wrap .gnb__list > li { font-size: 18px; font-weight: 500; }
.f-menu__wrap .none-f-menu { display: none; }
.footer__bottom { padding-top: 40px; font-size: 18px; }
.f-address__wrap { overflow: hidden;  max-width: 70%; }
.f-address__wrap .row { display: flex; flex-wrap: wrap; width: 100%; gap: 20px 63px; }
.f-address__wrap .row + .row { margin-top: 20px; }
.f-address__wrap dl { position: relative; display: flex; align-items: baseline; gap: 20px; }
.f-address__wrap dl::before { content: ""; position: absolute; left: -35px; top: 0.5em; display: block; width: 3px; height: 3px; background-color: rgba(255, 255, 255, 0.2); }
.f-address__wrap dd { font-weight: 200; }
.f-info__wrap { text-align: right; }
.f-info__wrap > .link { font-weight: 500; }
.copyright { margin-top: 1.11em; font-family: var(--font-IBM); font-weight: 200; letter-spacing: 0; opacity: 0.5; }

/* font */
.font-PTD { font-family: var(--font-Pretendard); }
.font-IBM { font-family: var(--font-IBM); letter-spacing: 0; }
.font-DM { font-family: var(--font-DM); letter-spacing: 0; }

/* swiper */
.swiper-button-next, .swiper-button-prev { position: static; width: 20px; height: 20px; margin-top: 0; background: no-repeat center center/contain; }
.swiper-button-prev { background-image: url("/img/main/swiper_prev.svg"); }
.swiper-button-next { background-image: url("/img/main/swiper_next.svg"); }
.swiper-button-next::after, .swiper-button-prev::after { display: none; } 

/* element */
#fullpage .section .inner { height: 100%;}
#fullpage .section .inner.w-100 { width: 100%; max-width: initial; }
.sec-top { position: relative; display: flex; justify-content: center;  font-size: 18px; color: #000; z-index: 5; }
.sec-top .num { position: absolute; left: 0; top: 0; font-family: var(--font-IBM); font-weight: 500; letter-spacing: 0; }
.sec-top .sec-title { font-family: var(--font-IBM); font-weight: 500; letter-spacing: 0; text-transform: uppercase; }
.sec-top.color-w { color: #fff; }
.inner-box { position: relative; height: calc(100% - 84px); padding-top: 60px; }
.m-sec-text { font-family: var(--font-Pretendard); font-size: 24px; font-weight: 500; line-height: 1.83; } 
.m-sec-text.color-w { color: #fff; } 
.m-sec-text + .btn { margin-top: 60px; }
.top-text.flex .m-sec-text + .btn { margin-top: 0; }
.section .top-text.flex { display: flex; justify-content: space-between; }
.section .top-text.pos-t { position: absolute; width: 100%; max-width: 1720px; left: 50%; top: 60px; height: fit-content; z-index: 10; transform: translateX(-50%); pointer-events: none; }
.section .top-text .btn-box { pointer-events: auto; }

.sec-global { overflow: hidden; position: relative; }
.global__wrap > .bg { position: absolute; left: 50%; top: 50%; width: 100%; max-width: initial; transform: translate(-50%, -50%); }
.global__wrap > .svg { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%); z-index: 5; }
.global__wrap > .svg .marker {  pointer-events: bounding-box; }
.global-info__list > li { position: absolute; left: 0; top: 0; visibility: hidden; opacity: 0; transition: opacity 0.3s ease-out; z-index: 10; }
.global-info__list > li .box { position: relative; padding: 30px 40px; border: 1px solid #000000; background-color: #fff; z-index: 5; }
.global-info__list .top { display: flex; gap: 10px; }
.global-info__list .top > .tag { padding: 3.5px 10px; font-size: 18px; font-weight: 500; color: #fff; background-color: #000000; text-transform: uppercase; }
.global-info__list .top > .tag.icon { display: flex; background-color: #fff; }
.global-info__list .top > .tag.icon::before { content: ""; display: block; width: 0.94em; aspect-ratio: 1.176/1; margin-right: 5px; background: url("/img/main/icon_marker.svg") no-repeat center center/contain; }
.global-info__list .top > .tag.color-main { background-color: var(--main-color); }
.global-info__list .top > .tag.icon:not(.color-main) { background-color: #888; }
.global-info__list .text-box { margin-top: 1em; font-size: 20px; }
.global-info__list .text-box > p { font-family: 'Pretendard','Noto Sans SC',sans-serif; font-weight: 300; color: #666; }
.global-info__list .text-box > p.title { margin-bottom: 0.5em; font-weight: 500; color: #333; }
.global-info__list .text-box > p.name { margin-bottom: 5px; font-weight: 500; color: #666; }
.global-info__list > li.on { visibility: visible; opacity: 1; }
.global-info__list > li .line { position: absolute; left: 0; top: 0; display: block; width: 96px; height: 2px; border-top: 1px dashed #000; border-bottom: 1px dashed #000; transform: translate(-100%,-1px); z-index: 2;}
.global-info-pc .global-info__list .text-box > p.name { display: none; }
.global-info__wrap { position: relative; display: none; margin-top: calc(80vh - 80px); z-index: 5; }
.global-info__wrap::before { content: ""; position: absolute; left: 50%; top: -108px; display: block; width: 100vw; height: 80px; background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); transform: translateX(-50%); }
.global-info__wrap .global-info__list { display: flex; flex-wrap: wrap; gap: 10px; }
.global-info__wrap .global-info__list > li { display: block !important; position: static; width: 100%; transform: none !important; visibility: visible; opacity: 1; transition: none; }
.global-info__wrap .global-info__list > li:nth-child(-n + 2) { width: 100%; }
.global-info__wrap .global-info__list > li .line { display: none; }
.global-info__wrap .global-info__list .text-box > p { word-break: normal; }
.global-info__wrap .global-info__list .text-box > p > br { display: none; }

@keyframes btnTopAni {
    0%{ transform: translateY(0); }
    50%{ transform: translateY(-100%); }
    100%{ transform: translateY(-100%); }
}

@media screen and (max-width:1760px) {
    .header__inner, .footer__inner { padding: 0 20px; }
    #allMenu .gnb__list > li {  padding: 0 40px; }
    #allMenu .gnb__list > li > a { font-size: clamp(24px,2.84vw,50px); }
    #allMenu .lnb { font-size: clamp(15px,1.136vw,20px) }
}
@media screen and (max-width:1600px) {
    .gnb .gnb__list { gap: 40px; }
    .gnb .gnb__list > li > a { font-size: 18px;}
    .gnb .lnb__list > li > a { font-size: 18px; }
}
@media screen and (max-width:1400px) {
    .gnb .gnb__list { gap: 30px; }
    .gnb .gnb__list > li > a { font-size: 16px;}
    .gnb .lnb__list > li > a { font-size: 16px; }
    .gnb .s-lnb__list > li > a { font-size: 15px; }
    #allMenu .gnb__list > li {  padding: 0 20px; }
    #allMenu .s-lnb__list { padding: 10px; }
    #allMenu .f-info__wrap { font-size: 16px; }

    .global-info__list > li .box { padding: 15px 20px;}
    .global-info__list .top > .tag { font-size: 14px; }
    .global-info__list .text-box { font-size: 16px; }
}
@media (min-width: 1201px) and (max-height: 700px){
    .header { background-color: #fff; }
    
    #fullpage .section:not(.main-visual) { height: auto !important; padding-bottom: 60px; }
    #fullpage .section.fp-auto-height { padding-bottom: 0; }
    .fp-tableCell { display: block; height: auto !important; }
    .global__wrap { position: absolute; width: 100%; height: auto; z-index: 0; top: 108px; }
    .global__wrap::before { content: ""; display: block; padding-top: 48.95%; }
    .global__wrap > .bg, .global__wrap > .svg { width: 100%; left: 50%; }
    .global-info__wrap { display: block; margin-top: 48.95%; }
    .global-info__wrap::before {  top: auto; bottom: 100%; }
    .global-info-pc { display: none; }
    .global-info__list > li .box { padding: 15px; }
    .global-info__list .top > .tag { padding: 3px 8px; font-size: 14px; }
    .global-info__list .text-box { font-size: 16px; }
}
@media screen and (max-width:1200px) {
    .header { background-color: #fff; }
    .header .logo { position: static; transform: none; }
    .header .gnb { display: none; }
    .btn-top__box.down .btn-down { background-color: #000; }
    .btn-top__box.down .btn-down .icon::before, 
    .btn-top__box.down .btn-down .icon::after { filter: invert(0); }

    .footer__bottom { font-size: 16px; }
    .f-address__wrap .row { gap: 10px 40px; }
    .f-address__wrap .row + .row { margin-top: 10px; }
    .f-address__wrap dl::before { left: -19px; }

    #fullpage .section { padding-bottom: 60px; }
    #fullpage .section.fp-auto-height { padding-bottom: 0; }
    #fullpage .section.sec-global { height: 100vh; }

    .global__wrap > .bg, .global__wrap > .svg { width: 130%; left: 60%; min-height: initial;}
}
@media (min-width: 1025px) and (max-height: 750px){
    .section .top-text.pos-t { top: 30px; }
}
@media (min-width:1025px) and (min-height: 701px) {

    .global-info__list > li.right { text-align: right; } 
    .global-info__list > li.right .top { justify-content: right; } 
    .global-info__list > li.right .line { left: auto; right: 0; transform: translate(100%,-1px); transform-origin: 0 0; }
}
@media screen and (max-width:1024px) {
    :root{
        --header-H: 60px;
    }
    .header .logo { width: 90px; }
    .lang__list { gap: 15px; margin-right: 30px; }
    .lang__list > li > a { font-size: 16px; }
    .lang__list > li:not(:first-child)::before { left: -8px; }
    #allMenu .inner { padding-top: 80px; }
    #allMenu .gnb__list > li { padding: 20px 12px; }
    #allMenu .f-info__wrap { font-size: 14px; }
    .btn-top__box button { width: 40px; height: 40px; }
    .btn-top__box button .icon { width: 20px; height: 20px; }

    .footer { padding: 50px 0; }
    .footer__top { padding-bottom: 30px; }
    .footer__top .logo { width: 90px; }
    .f-menu__wrap .gnb__list { gap: 30px; }
    .f-menu__wrap .gnb__list > li { font-size: 16px; }
    .footer__bottom { flex-direction: column; align-items: flex-start; padding-top: 30px; }
    .f-address__wrap { max-width: 80%; }
    .f-info__wrap { margin-top: 30px; text-align: left; }

    .button__wrap { margin-top: 80px; }
    .btn-box { width: 140px; height: 40px;  }
    .btn-box > .in-text { padding-left: 18px; }
    .btn-box:hover > .in-text { padding-right: 18px;}
    .btn-box > .in-text::before { width: 8px; height: 8px; left: -1px; }
    .btn-box > .in-text::after {  width: 8px; height: 8px; right: -1px; }
    .btn-box > .in-text > span { font-size: 16px; }
    .btn-box.type-2 > .in-text { padding-left: 20px; }
    .btn-box.type-2 > .in-text > span { font-size: 16px; }  
    .btn-box.type-2:hover > .in-text { padding-left: 0; padding-right: 20px; }
    .btn-box:hover > .in-text::before { transform: translateY(-50%) scale(34); }

    .sec-top { font-size: 16px; }
    .inner-box { padding-top: 40px; }
    .section .top-text.pos-t { top: 30px; }
    .section .top-text.flex { flex-direction: column; row-gap: 30px; }
    .m-sec-text { font-size: 20px; }
    .m-sec-text + .btn { margin-top: 30px; }

    #fullpage .section.sec-global { position: relative; height: auto; }
    .global__wrap { position: absolute; width: 100%; height: auto; z-index: 0; top: 108px; }
    .global__wrap::before { content: ""; display: block; padding-top: 48.95%; }
    .global__wrap > .bg, .global__wrap > .svg { width: 100%; left: 50%; }
    .global-info__wrap { display: block; margin-top: 48.95%; }
    .global-info__wrap::before {  top: auto; bottom: 100%; }
    .global-info-pc { display: none; }
    .global-info__list > li .box { padding: 15px; }
    .global-info__list .top > .tag { padding: 3px 8px; font-size: 13px; }
    .global-info__list .text-box { font-size: 15px; }
}
@media screen and (min-width:769px) {
    #allMenu .lnb { display: block !important; }
}
@media screen and (max-width:768px) {
    #allMenu { padding-bottom: 30px; }
    #allMenu .inner { padding-top: 40px; }
    #allMenu .gnb__list { flex-direction: column; }
    #allMenu .gnb__list > li { border-right: none; border-bottom: 1px solid #EEEEEE; }
    #allMenu .gnb__list > li > a { pointer-events: initial; cursor: pointer; }
    #allMenu .lnb { display: none; margin-top: 30px; font-size: 16px; }

    .footer__top { flex-direction: column; align-items: flex-start; }
    .f-address__wrap { max-width: initial; }
    .f-menu__wrap { margin-top: 30px; }
    .f-menu__wrap .gnb__list { gap: 20px; }
    .f-menu__wrap .gnb__list > li { font-size: 14px; } 
    .footer__bottom { font-size: 14px; }
    .f-address__wrap dl { gap: 15px; }

    .btn-box { width: 120px; height: 35px; }
    .btn-box > .in-text { padding-left: 12px; }
    .btn-box:hover > .in-text { padding-right: 12px;}
    .btn-box > .in-text::before { width: 7px; height: 7px; left: -3px; }
    .btn-box > .in-text::after {  width: 7px; height: 7px; right: -3px; }
    .btn-box > .in-text > span { font-size: 14px; }
    .btn-box.type-2 > .in-text { padding-left: 15px; }
    .btn-box.type-2 > .in-text > span { font-size: 14px; }  
    .btn-box.type-2:hover > .in-text { padding-left: 0; padding-right: 15px; }

    .m-sec-text { max-width: 85%; font-size: 16px; }
    .m-sec-text > br { display: none; }
    
    .global__wrap > .bg, .global__wrap > .svg { width: 140%; left: 60%; }
    .global-info__wrap::before { height: 60px; }
    .global-info__list .top > .tag { font-size: 13px; }
    .global-info__list .text-box { font-size: 14px; }
}
@media screen and (max-width:640px) {
    .f-menu__wrap .gnb__list { gap: 15px; }
    
    .global__wrap { top: 170px; }
    .global-info__wrap { margin-top: 65%; }
}