@charset "utf-8";

/* 스킵 네비게이션 */
#skip-navigation{position: absolute; z-index: 9999; left: 0; right: 0; top: 0;}
#skip-navigation *{list-style: none; margin: 0; padding: 0;}
#skip-navigation a{display: block; width: 1px; height: 1px; overflow: hidden; color: #fff; white-space: nowrap; text-align: center;}
#skip-navigation a:focus,
#skip-navigation a:active{width: 100%; height: auto; padding: 0.5rem; background: #000;}


/* wrap */
.wrap{
    position: relative; width: 1460px; margin: 0 auto;
    &.wide{width: auto; margin: 0 var(--space);}

    @media (width <= 1600px){
        width: auto; padding: 0 var(--space);
        &.wide{margin: 0; padding: 0 var(--space);}
    }
    @media (width <= 1280px){
        width: auto; padding: 0 var(--space);
        &.wide{margin: 0; padding: 0 var(--space);}
    }
}


/* header */
#header{
    position: fixed; z-index: 3; top: 0; left: 0; width: 100%; /* background: rgba(0,0,0,0.3); */

    & > .wrap{display: flex; flex-wrap: wrap; align-items: flex-start;}
    & .logo{
        & a{display: block; line-height: 86px;}
    }
    & .lnb{
        margin: 0 0 0 auto; color: var(--white);
        & .d1{
            display: flex; flex-wrap: wrap;
            & > li{
                & > a{display: block; line-height: 86px; padding: 0 38px; text-align: center;}
                & .d2{
                    overflow: hidden; visibility: hidden; height: 0; transition: height 0.15s ease-out;
                    & > li{
                        & > a{display: block; padding: 3px 10px; font-size: 16px; text-align: center; word-spacing: -0.08em;}
                    }
                }
            }
        }
    }
    & .snb{
        display: flex; flex-wrap: wrap; gap: 27px; align-items: center; padding: 30px 0 0 30px;
        & .language{
            position: relative; color: var(--white);
            & .lang-current{
                & .btn-lang{
                    text-transform: uppercase;
                    &:after{content: ""; display: inline-block; vertical-align: middle; margin: -1px 0 0 12px; width: 19px; height: auto; aspect-ratio: 14 / 6; background: url("/assets/site/img/common/language-arr.svg") no-repeat;}
                    &.on{
                        &:after{transform: rotateX(180deg); margin: -6px 0 0 12px;}
                    }
                }
            }
            & .lang-list{
                display: none; position: absolute; top: calc(100% + 10px); left: -15px; border-radius: 3px; background: #252525;
                &:before{content: "영역확보용도"; position: absolute; bottom: 100%; left: 0; right: 0; height: 10px; background: transparent; font-size: 0;}
                & > li:has(a.active){display: none;}
                & > li a{display: block; padding: 5px 15px; line-height: 1; border-radius: 3px; color: #fff;}
                & > li a:hover{background-color: #000; color: var(--theme-blue);}
            }
        }
        & .btn-nav{
            position: relative; z-index: 99; display: inline-block; width: 24px; height: 16px; font-size: 0;
            & span{position: absolute; left: 0; width: 100%; height: 2px; background: #fff; transition: top 0.3s, opacity 0.3s, transform 0.3s;}
            & span:nth-child(1){top: 0px;}
            & span:nth-child(2){top: 7px;}
            & span:nth-child(3){top: 7px;}
            & span:nth-child(4){top: 14px;}
            &.on{
                & span{background: #000;}
                & span:nth-child(1){top: 7px; opacity: 0; transform: rotate(45deg);}
                & span:nth-child(4){top: 7px; opacity: 0; transform: rotate(-45deg);}
                & span:nth-child(2){transform: rotate(-45deg);}
                & span:nth-child(3){transform: rotate(45deg);}
            }
        }
    }

    /* ▼ haeder.on 또는 haeder.black  ▼ */
    &.on,
    &.black{
        background-color: rgba(255,255,255,0.9); backdrop-filter: blur(2px);
        & .logo{
            & a img{filter: var(--filter-black);}
        }
        & .lnb{
            & .d1{
                & > li{
                    & > a{color: #000;}

                    & .d2{
                        & > li{
                            & > a{color: #000;}
                            & > a:hover,
                            & > a:focus{font-weight: var(--fwm);}
                        }
                    }
                }
                & > li.current{
                    & > a{color: #fff; background-color: var(--theme-blue);}

                    & .d2{
                        background-color: var(--theme-blue);
                        & > li{
                            & > a{color: #fff;}
                        }
                    }
                }
            }
        }
        & .snb{
            & .language{
                color: #000;
                & .lang-current{
                    & .btn-lang{
                        &:after{filter: var(--filter-black);}
                    }
                }
            }
            & .btn-nav{
                & span{background: #000;}
            }
        }
    }

    /* ▼ ONLY haeder.black  ▼ */
    &.black{
        
    }

    @media (width < 1280px){
        
        & .lnb{display: none;}
        & .snb{
            margin: 0 0 0 auto; padding: 30px 0 0 0;
            & .btn-nav{
                &.on{
                    & span{background: #fff;}
                }
            }
        }
    }
    @media (width < 640px){
        & .logo{
            & a{line-height: 62px;}
            & a img{width: 120px;}
        }
        & .snb{
            padding: 20px 0 0 0;
        }
    }
}


/* sitemapBG */
#sitemapBG {
    position: fixed; z-index: 98; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; height: 95%; border-radius: 20px; background: #fff; opacity: 0; transition: 1s; pointer-events: none; will-change: transform;

    &.open{
        display: block; opacity: 1; pointer-events: auto; width: 100%; height: 100%; border-radius: 0;
    }

    @media (width <= 1280px){
        background: rgba(0,0,0,0.8); width: 100%; height: 100%; border-radius: 0; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    }
}


/* sitemapNAV */
#sitemapNAV{
    position: fixed; z-index: 98; top: 0; left: 0; width: 100%; height: 100vh; min-width: 320px; border-radius: 20px; pointer-events: none; opacity: 0; background: #fff; transition: all 1s; overflow: hidden; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */
    &::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera*/
    }
    &:before{
        content: ""; position: absolute; z-index: -1; top: 80%; left: 50%; transform: translate(-50%, -50%); display: block; width: 430px; height: auto; aspect-ratio: 205 / 32; background: url("/assets/site/img/common/logo.svg") no-repeat; background-size: contain; background-position: center top -180px; opacity: 0.3; transition: 0.5s; filter: var(--filter-black); opacity: 0.05;
    }

    & .wrap.pc-gnb{
        margin: 0 auto; width: 1400px; height: 100%; max-width: 90%;
        & .d1{
            position: fixed; position: absolute; display: flex; justify-content: space-between; width: 100%; min-width: 320px; left: 0; top: 50%; transform: translateY(-50%);
            & > li{
                display: inline-block; width: 20%; padding-left: 3%; margin: 1.5rem 0; opacity: 0; vertical-align: top; transition: 0.4s cubic-bezier(0.365, 0.84, 0.44, 1);
                &:nth-child(1){padding-left: 0;}

                & > a{
                    display: block; box-sizing: border-box; padding: 0 0 1rem; position: relative; font-size: 2rem; font-weight: 800; color: #222; text-decoration: none; transition: 0.5s; pointer-events: none;
                    &:before{position: absolute; content: ""; left: 0; bottom: 0; z-index: -1; width: 100%; height: 2px; background-color: #ddd;}
                    &:after{content: ""; position: absolute; left: 0; bottom: 0; z-index: -1; width: 100%; height: 2px; background: var(--theme-blue); transform: scaleX(0.3); transform-origin: left; transition: transform 0.5s;}
                }

                &:hover{
                    & > a{
                        pointer-events: initial;
                        &:after{transform: scaleX(1);}
                    }
                }
            }

            & .d2{
                margin-top: 6px; padding-top: 14px;
                & > li{
                    margin: 15px 0;
                    & > a{
                        display: inline-block; vertical-align: middle; color: #333; font-size: 1.1rem; white-space: nowrap;
                        &:before{display: none;}

                        &:hover,
                        &:focus{
                            font-weight: 600; color: #222;
                        }
                        &.on{font-weight: var(--fwsb); color: #000;}
                    }
                }
            }
        }
        @media (width <= 1280px){
            display: none;
        }
    }

    & .m-gnb{
        display: none; position: relative; min-width: 320px;
        & .gnb-top {
            color: #fff; background: #222; width: 100%; max-width: 500px; max-height: 165px; min-width: 320px; z-index: 1;
            & h2 {
                padding: 27px 55px 27px 20px;
                & a{display: inline-block;}
                & img {height: 32px;}
                & p {margin-top: 15px;}
            }

            & .gnb-quick {
                padding: 15px 0; border-top: 1px solid #555; overflow: hidden; background: #222;
                & a{float: left; position: relative; display:block; width: 50%; text-align: center; color: #fff;}
                & a:after{content: ''; display: block; width: 1px; height: 15px; position: absolute; right: 0; top: 50%; background: #555; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%);}
            }
        }
        & .d1{
            display: block; overflow-y: auto;
            & > li{
                border-bottom: 1px solid #ddd;
                & > a{
                    position: relative; display: block; font-size: 17px; font-weight: var(--fwm); padding: 14px 20px;
                    &:after{content: ""; position: absolute; top: 20px; right: 25px; width: 8px; height: auto; aspect-ratio: 1; border-left: 2px solid #555; border-bottom: 2px solid #555; transform: rotate(-45deg);}
                }

                & .d2{
                    display: none; padding: 0 20px 10px;
                    & > li{
                        & > a{display: block; padding: 6px 10px 6px 10px;}
                        & > a.on{font-weight: var(--fwsb); background: #f5f5f5; border-radius: 5px;}
                    }
                }
            }
        }

        @media (width <= 1280px){
            display: block; /* overflow: hidden; */ overflow-y: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */
            &::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/}
        }
        @media (width <= 640px){
            & .gnb-top{
                & h2{
                    padding: 21px 55px 22px 20px;
                    & img {height: auto; width: 120px;}
                }
            }
        }
    }


    &.open{
        pointer-events: auto; opacity: 1; width: 100%; height: 100vh; border-radius: 0;
        &:before{ background-position: center center; transition-delay: 0.5s;}

        & .wrap.pc-gnb{
            & .d1{
                & > li{opacity: 1;}
            }
        }
    }

    @media (width <= 1280px){
        border-radius: 0; background: #fff; left: auto; right: 0; max-width: 500px; background: #fff; overflow-y: auto; 
        transform: translateX(100%); transition: all 0.3s;
        &:before{display: none;}

        &.open{
            transform: translateX(0);
        }
    }
}


/* footer */
#footer{
    padding: 80px 0 46px; font-size: 14px; font-weight: var(--fwm); background: var(--black-bg) url("/assets/site/img/common/foot-bg.png") no-repeat center; background-size: cover; color: var(--white);
    & > .wrap{

    }
    & .ft-top{
        display: flex; flex-wrap: wrap;
        & .ft-logo{
            flex: 0 0 auto;
            & img{width: 289px;}
        }
        & .ft-top-list{
            margin: 0 0 0 auto; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 0 0 13%;
            & > div{
                & dt{margin: 0 0 37px;}
                & dd{
                    & .sublist{
                        display: flex; flex-direction: column; gap: 3px;
                        & > li{}
                        & > li a{}
                    }
                }
            }
        }
    }
    & .ft-bot{
        display: flex; flex-wrap: wrap; padding: 79px 0 0; gap: 20px 10px;
        & .ft-bot-list{
            display: flex; flex-wrap: wrap;
            & > li{flex: 0 0 auto;}
            & > li + li{}
            & > li + li:before{content: ""; display: inline-block; vertical-align: middle; margin: 0 14px; width: 0; height: 10px; border-left: 1px solid rgba(255,255,255,0.5);}
            & > li a{}
        }
        & .to-top{
            margin: 0 0 0 auto; text-decoration: underline;
            & span{}
        }
    }

    &.light{
        background-image: none; background-color: var(--gray-light); color: var(--gray-mid);
        & .ft-top{
            & .ft-logo{
                & img{filter: var(--filter-gray-mid);}
            }
        }
        & .ft-bot{
            & .ft-bot-list{
                & > li + li:before{border-color: rgba(189,189,189,0.5);}
            }
        }
    }

    @media (width <= 1280px){
        & .ft-top{
            & .ft-logo{
                & img{width: 186px;}
            }
        }
    }
    @media (width <= 1200px){
        & .ft-top{
            flex-direction: column; gap: 40px;
            & .ft-top-list{margin: 0; padding: 0;}
        }
        & .ft-bot{
            padding: 50px 0 0;
        }
    }
    @media (width <= 767px){
        padding: 60px 0;
        & .ft-top{
            & .ft-top-list{
                flex-direction: column; gap: 30px;
                & > div{
                    & dt{margin: 0 0 10px; font-weight: var(--fwsb);}
                    & dd{
                        & .sublist{
                            font-weight: var(--fwr); gap: 0;
                        }
                    }
                }
            }
        }
    }
    @media (width <= 640px){
        font-size: 12px; padding: 40px 0;
        & .ft-top{
            gap: 25px;
            & .ft-logo{
                & img{width: 120px;}
            }
            & .ft-top-list{
                gap: 20px;
                & > div{
                    & dt{margin: 0 0 10px;}
                }
            }
        }
        & .ft-bot{
            padding: 20px 0 0;
            & .to-top{display: none;}
            & .ft-bot-list{
                & > li + li:before{margin: 0 10px;}
            }
        }
    }
}


/* sub-visual */
.sub-visual{
    position: relative; z-index: 2; background: #121212; 

    & > .sv-img{
        position: absolute; width: 100%; height: 100%; overflow: hidden;
        & img{width: 100%; height: 100%; object-fit: cover; animation: zoomOut 1.5s cubic-bezier(0.25,1,0.5,1) forwards;}
    }

    & > .wrap{
        height: 100%; display: flex; flex-direction: column; justify-content: center;
    }

    & .sv-txt{
        padding: 0 0 55px;

        & .page-tit{
            display: flex; flex-wrap: wrap; font-size: 120px;
            & h2{font-weight: var(--fwb); letter-spacing: -0.02em; text-transform: uppercase; color: #fff; line-height: 0.75;}
            &:after{content: ""; display: inline-block; vertical-align: middle; margin: 0.387em 0 0 0.1em; width: 1.075em; height: auto; aspect-ratio: 129 / 34; background: url("/assets/site/img/common/subpage-tit-tail.svg") no-repeat center; background-size: 100% auto;}
        }
    }

    & .submenu-select{
        position: absolute; right: 0; bottom: 80px;
        display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px;

        & > div{}

        & .home{
            & a{
                position: relative; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: auto; aspect-ratio: 1; border-radius: 50%; font-size: 0; 
                color: #fff; background-color: var(--theme-blue);
                &:before{content: ""; display: inline-block; width: 26px; height: auto; aspect-ratio: 1; background: url("/assets/site/img/common/submenu-seclect-home.svg") no-repeat center; background-size: 100% auto;}
            }
        }

        & .menu-sel{
            position: relative;
            & > button{
                position: relative; display: block; width: 250px; padding: 0 50px 0 24px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); line-height: 60px; border-radius: 60px; font-size: 16px; font-weight: var(--fwb); color: #fff; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
                &:before{content: ""; position: absolute; top: 20px; right: 28px; width: 12px; height: auto; aspect-ratio: 1; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); transition: 0.2s;}

                &:hover{box-shadow: inset 0 0 0 1px #ddd;}

                &.on{
                    backdrop-filter: blur(3px);
                    &:before{top: 25px; transform: rotate(-225deg);}
                }
            }
            & > ul{
                display: none; position: absolute; top: 100%; left: 0; width: 100%; padding: 0; background-color: #252525; border-radius: 10px; overflow: hidden;
                & > li{

                    & a{display: block; padding: 8px 24px; color: #fff; font-weight: var(--fwm);}
                    & a:hover{background-color: #000; color: var(--theme-blue);}
                }
            }

            &.depth1{}
            &.depth2{}

            &.drop-up{
                & > ul{
                    top: auto; bottom: 100%;
                }
            }
        }
    }

    &:has(~ .sub-container.noSubVisual){
        display: none;
    }

    @media (width <= 1600px){
        & .submenu-select{
            right: var(--space);
        }
    }
    @media (width <= 1280px){
        height: auto !important; width: 100%; aspect-ratio: 2 / 1.25;
        & .sv-txt{
            & .page-tit{
                font-size: 9vw;
            }
        }
        & .submenu-select{
            bottom: 30px;
        }
    }
    @media (width <= 860px){
        aspect-ratio: 2 / 1.4;
        & .submenu-select{
            left: var(--space); 
            & .home{flex: 0 0 auto;}
            & .menu-sel{
                flex: 1; min-width: 0;
                & > button{width: 100%;}
            }
        }
    }
    @media (width <= 640px){
        aspect-ratio: 2 / 1.6;
        & .sv-txt{
            padding: 0 0 4%;
        }
        & .submenu-select{
            gap: 6px; bottom: 20px;
            & .home{
                & a{
                    width: 40px;
                    &:before{width: 50%;}
                }
            }
            & .menu-sel{
                & > button{
                    line-height: 40px; font-size: 13px; padding: 0 30px 0 15px;
                    &:before{top: 14px; width: 8px; right: 16px;}
                    &.on{
                        &:before{top: 17px;}
                    }
                }
                & > ul{
                    & > li{
                        & a{padding: 5px 15px; font-size: 13px;}
                    }
                }
            }
        }
    }
    @media (width <= 620px){
        & .sv-txt{
            & .page-tit{
                font-size: 7.9vw;
            }
        }
    }
}


/* sub-container */
.sub-container{

}


/* sub-contents */
.sub-contents{
    padding: 120px 0 240px; background-color: #121212; color: #fff;
    @media (width <= 1600px){
        padding: 90px 0 130px;
    }
    @media (width <= 1280px){
        padding: 80px 0 130px;
    }
    @media (width <= 860px){
        padding: 45px 0 100px;
    }
    @media (width <= 640px){
        /* padding: 30px 0 100px; */
    }
}
.sub-contents.light{
    background-color: transparent; color: #000;
}
.sub-container.noSubVisual .sub-contents{
    /* 개인정보취급방침 페이지 등 */
    @media (width <= 1600px){
        padding-top: 120px;
    }
    @media (width <= 1280px){
        padding-top: 120px;
    }
    @media (width <= 860px){
        padding-top: 100px;
    }
    @media (width <= 640px){
        padding-top: 80px;
    }
}


/* subpage-head */
.subpage-head{
    padding: 0 0 50px;
    & .subpage-tit{
        line-height: 1.2; font-size: 56px; font-weight: var(--fwb); color: #000; text-wrap: balance;
    }

    @media (width <= 1280px){
        padding: 0 0 40px;
        & .subpage-tit{
            font-size: 45px;
        }
    }
    @media (width <= 860px){
        & .subpage-tit{
            font-size: 38px;
        }
    }
    @media (width <= 640px){
        & .subpage-tit{
            font-size: 24px;
        }
    }
}


/* 레이어(모달) 배경 */
.dim{position: fixed; z-index: 5; top: 0; bottom: 0; left: 0; right: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.8); opacity: 0; visibility: hidden; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);}
.dim.on{opacity: 1; visibility: visible; transition: all 0.25s;}