@charset "utf-8";

/* =========================
   공통
========================= */
.w1400 {max-width:var(--mainsize);height:100vh;margin:0 auto;}
.wrap {width:var(--mainsize);margin:0 auto;}
    @media (max-width:1024px) {
        .w1400 {height:auto;padding:8rem 0;}
    }


/* =========================
   HEADER
========================= */
#sh_hd {position:fixed;z-index:20;width:100%;}
#sh_hd:has(#topmenuM.on) {background:rgba(0,0,0,.3);backdrop-filter:blur(1rem);-webkit-backdrop-filter:blur(1rem);}
#shGnb {display:flex;justify-content:space-between;align-items:center;position:relative;width:100%;height:10rem;padding:0 4rem;}
#shGnb.on {background:#fff;}
.sh_lnb_bg {display:none;position:absolute;top:10rem;left:0;width:100%;height:35rem;background-color:#fff;border-top:1px solid #ddd;}

/* 로고 */
#shGnb .sh_logo {position:relative;z-index:20;}
#shGnb .sh_logo img {content:url("../../images/fs/layout/logo_w.png");} /* 기본 상태(화이트 로고) */
#shGnb.on .sh_logo img {content:url("../../images/fs/layout/logo.png");} /* 헤더에 마우스가 올라갔을 때 (컬러 로고) */

/* 1차 메뉴 */
#shGnb .sh_nav {display:flex;width:max-content;}
#shGnb .sh_nav > li {position:relative;padding:0 5.5rem;line-height:10rem;}
#shGnb .sh_nav > li > a {display:block;font-weight:600;font-size:1.8rem;color:var(--black);text-transform:uppercase;transition:all .2s;}
#shGnb.sub .sh_nav > li > a {color:var(--black);}
#shGnb.white .sh_nav > li > a {color:#fff;}
#shGnb.white.on .sh_nav > li > a {color:var(--black);}

/* 2차 메뉴 */
#shGnb .sh_lnb_s {display:none;position:absolute;left:50%;transform:translateX(-50%);width:100%;padding:2.5rem 0;}
#shGnb .sh_lnb_s li {margin-bottom:.5rem;}
#shGnb .sh_lnb_s li a {display:block;line-height:1.75;text-align:center;color:#666;padding:.5rem;transition:all .2s;}
#shGnb .sh_lnb_s li a:hover {color:var(--primary);}

/* sh_tip */
.sh_tip {display:flex;align-items:center;gap:3.5rem;}
.langBtn {font-family:"Play",sans-serif;font-weight:700;font-size:1.5rem;line-height:1;letter-spacing:0.06em;color:#fff;background:var(--primary);border-radius:2rem;padding:1.25rem 2rem;}

/* 사이트맵 버튼 */
#navBtn {position:relative;width:54px;height:30px;cursor:pointer;transition:all .3s var(--ani);}
#navBtn.no_pointer {pointer-events:none;cursor:alias;}
#navBtn span {position:absolute;top:50%;left:0;}
#shGnb.white #navBtn:before, #shGnb.white #navBtn:after {background:#fff;}
#navBtn:before, #navBtn:after {display:block;content:'';position:absolute;left:0;top:8px;z-index:11;width:100%;height:2px;background:#111;transition:all .3s var(--ani), width .6s .6s;}
#navBtn:after {top:20px;}
#navBtn.active:before {top:1.2rem;right:0;transform:rotate(45deg);background:#fff;}
#navBtn.active:after {top:1.2rem;left:0;transform:rotate(-45deg);background:#fff;}
#shGnb.on #navBtn:before, #shGnb.on #navBtn:after {background:var(--black);}

/* 사이트맵 */
#navWrap {position:fixed;top:-100vh;left:0;z-index:10;min-width:1280px;width:100%;height:100vh;color:#fff;background:rgba(0,0,0,.3);backdrop-filter:blur(5px);}
#navWrap .nav_bg_wrap {position:absolute;top:0;right:0;z-index:0;width:50%;height:100%;}
#navWrap .nav_bg {overflow:hidden;position:absolute;right:0;width:0;height:calc(100vh / 5);transition:width .6s var(--ani);}
#navWrap .nav_bg:before {display:block;content:"";position:absolute;top:-5%;left:-5%;z-index:-1;width:110%;height:110%;background:var(--primary);}
#navWrap .bg1 {top:0;transition-delay:0s;}
#navWrap .bg2 {top:calc(100vh / 5);transition-delay:.1s;}
#navWrap .bg3 {top:calc((100vh / 5) * 2);transition-delay:.2s;}
#navWrap .bg4 {top:calc((100vh / 5) * 3);transition-delay:.3s;}
#navWrap .bg5 {top:calc((100vh / 5) * 4);transition-delay:.4s;}
#navWrap.active .nav_bg {width:100%;}
#navWrap .year {opacity:0;position:absolute;left:55%;bottom:40px;z-index:1;font-size:15px;font-weight:500;line-height:1.4;}
#navWrap .year img {vertical-align:-2px;margin-right:3px;}
#navWrap.active .year {opacity:1;transition:all .3s .6s;}
#navWrap .nav_mn {position:absolute;top:19%;left:55%;z-index:2;}
#navWrap .nav_mn li {overflow:hidden;}
#navWrap .nav_mn li a {display:inline-block;transform:translateY(100%);font-size:6.5rem;letter-spacing:-1px;line-height:1.45;color:#fff;text-transform:uppercase;transition:transform .6s var(--ani) 0s;}
#navWrap.active .nav_mn li a {transform:translateY(0);}
#navWrap.active .nav_mn li:nth-child(1) a {transition-delay:.8s;}
#navWrap.active .nav_mn li:nth-child(2) a {transition-delay:.9s;}
#navWrap.active .nav_mn li:nth-child(3) a {transition-delay:1s;}
#navWrap.active .nav_mn li:nth-child(4) a {transition-delay:1.1s;}
#navWrap.active .nav_mn li:nth-child(5) a {transition-delay:1.2s;}
#navWrap.active .nav_mn li:nth-child(6) a {transition-delay:1.4s;}
#navWrap .nav_mn li a span {transition:all .6s var(--ani);transition-delay:.3s;}
#navWrap .nav_mn li a em {display:block;content:"";position:absolute;left:0;top:calc(50% - 3px);z-index:1;width:62px;height:5px;transform-origin:right;transform:scaleX(0);background:#fff;transition:transform .3s var(--ani) .3s;}
#navWrap .nav_mn li a em:before,#navWrap .nav_mn li a em:after {content:"";position:absolute;right:-6.5px;bottom:0;background:#fff;transition:transform .6s var(--ani) 0s;z-index:2;}
#navWrap .nav_mn li a em:before {width:5px;height:38px;transform-origin:0% 100%;transform:rotate(-90deg);}
#navWrap .nav_mn li a em:after {width:38px;height:5px;transform-origin:100% 0%;transform:translateX(-1px) rotate(0deg);}
    @media (hover:hover) {
        #navWrap .nav_mn li a:hover {color:#fff;transition:opacity .2s 0s;}
        #navWrap .nav_mn li a:hover span {padding-left:90px;transition-delay:0s;}
        #navWrap .nav_mn li a:hover em {transform-origin:left;transform:scaleX(1);transition-delay:0s;}
        #navWrap .nav_mn li a:hover em:before {transform:rotate(-45deg);transition-delay:.3s;}
        #navWrap .nav_mn li a:hover em:after {transform:translateX(-6px) rotate(-45deg);transition-delay:.3s;}
    }
    @media (max-width:1399px) {
        /* 1차 메뉴 */
        #shGnb .sh_nav > li {padding:0 3.5rem;}
    }
    @media (max-width:1199px) {
        #shGnb {padding:0 2rem;}
        /* 1차 메뉴 */
        #shGnb .sh_nav > li {padding:0 3rem;}
        /* sh_tip */
        .sh_tip {gap:2rem;}
        /* 사이트맵 */
        #navWrap .nav_mn li a {font-size:5.5rem;}
    }


/* =========================
   반응형 HEADER
========================= */
#topmenuM {display:none;width:100%;height:9rem;padding:0 2rem;position:relative;}
#m_logo a {display:flex;align-items:center;}
#m_logo a img {height:4rem;}
.m_right {display:flex;align-items:center;gap:2rem;}
#m_navBtn {width:4rem;height:3rem;cursor:pointer;}
#m_navBtn span {display:block;position:relative;top:50%;width:100%;height:2px;transform:translateY(-50%);}
#m_navBtn span::before {display:block;position:absolute;top:-6px;width:100%;height:100%;background:#fff;content:"";}
#m_navBtn span::after {display:block;position:absolute;top:6px;right:0%;width:40%;height:100%;background:#fff;content:"";}
#m_navBtn.on {position:fixed;top:2.5rem;right:2rem;z-index:100;}
#m_navBtn.on span:before {top:0;right:-4px;transform:rotate(45deg);background:var(--black);}
#m_navBtn.on span:after {top:0;right:-4px;width:100%;transform:rotate(-45deg);background:var(--black);}
#m_navWrap {position:fixed;left:0;top:0;z-index:15;width:100%;height:100vh;background-color:rgba(0,0,0,.7);}
#m_navWrap .inner {overflow-y:scroll;opacity:0;position:fixed;right:-40px;top:0;z-index:999;min-width:300px;width:75%;height:100vh;padding:9rem 0;background-color:#fff;-webkit-transition:all .1s;transition:all .1s;}
#m_navWrap.on .inner {opacity:1;right:0;-webkit-transition:all .4s;transition:all .4s;}
#m_navWrap .inner:before, #navWrap .inner:after {opacity:0;display:block;position:fixed;top:0;right:-40px;z-index:1;content:"";min-width:300px;width:70%;height:9rem;background-color:#fff;-webkit-transition:all .1s;transition:all .1s;}
#m_navWrap .inner:after {top:auto;bottom:0;}
#m_navWrap.on .inner:before, #navWrap.on .inner:after {opacity:1;right:0;-webkit-transition:all .4s;transition:all .4s;}
#m_navWrap .inner .mo_hd_copy {position:absolute;right:0;bottom:15px;z-index:2;min-width:300px;width:100%;font-size:12px;text-align:center;color:#888;}
#m_navWrap .user_tip {padding:10px 20px;background-color:#f5f5f5;}
#m_navWrap .user_tip li {display:inline-block;}
#m_navWrap .user_tip li+li {margin-left:10px;}

/* 1차 메뉴 */
#topmenuM .m_lnb .m_bmenu {display:block;position:relative;width:100%;height:52px;padding:0 20px;border:none;border-bottom:1px solid #ddd;background:none;font-size:16px;line-height:52px;color:var(--black);text-align:left;font-family:'Noto Sans KR';font-weight:500;}
#topmenuM .m_lnb .m_bmenu:after {float:right;content:"\ea4d";font-family:'remixicon';}
#topmenuM .m_lnb .m_bmenu.on:after {content:"\ea77";}

/* 2차 메뉴 */
#topmenuM .m_smenu {display:none;padding:15px 20px;border-bottom:1px solid #ddd;background-color:#f2f3f5;}
#topmenuM .m_smenu li {padding:1rem;}
#topmenuM .m_smenu li a {font-size:1.7rem;color:#777;}
    @media (max-width:1024px) {
        #shGnb {display:none;}
        #topmenuM {display:flex;justify-content:space-between;align-items:center;background:rgba(0,0,0,.1);backdrop-filter:blur(1rem);-webkit-backdrop-filter:blur(1rem);}
        #topmenuM.on {background-color:rgb(0,0,0,0.1);}
        #m_navWrap {display:none;}
        #sh_container_wrapper.sub {padding-top:0;}
    }


/* =========================
   CONTAINER
========================= */
#sh_container {position:relative;z-index:10;width:100%;}
#sh_content {overflow:hidden;position:relative;z-index:10;width:100%;padding:11rem 0 12rem;}


/* =========================
   FOOTER
========================= */
#sh_ft {width:100%;color:#fff;background:#222;}
#sh_ft_wrapper {position:relative;max-width:var(--mainsize);margin:0 auto;padding:8rem 0;}
#sh_ft .left {display:flex;justify-content:space-between;}
#sh_ft .left .info li {display:flex;font-weight:600;color:#fff;}
#sh_ft .left .info li+li {margin-top:10px;}
#sh_ft .left .info li p {width:12rem;opacity:.65;}
#sh_ft .left .info li span {width:calc(100% - 12rem);}
#sh_ft .copy_wrap {background:#1d1d1d;}
#sh_ft .copy {font-weight:300;font-size:1.5rem;color:#7d7d7d;line-height:6rem;}
#sh_ft .right {display:flex;justify-content:space-between;align-items:flex-end;flex-direction:column;}
#sh_ft .right ul {display:flex;gap:4rem;color:#9d9d9d;}
    @media (max-width:1199px) {
        #sh_ft .left .info li p {width:11rem;}
        #sh_ft .left .info li span {width:calc(100% - 11rem);}
        #sh_ft .right ul {gap:3rem;}
    }
    @media (max-width:1024px) {
        #sh_ft .left {flex-direction:column-reverse;gap:4rem;}
        #sh_ft .right {align-items:flex-start;gap:3rem;}
    }
    @media (max-width:768px) {

    }