/* ======== 헤더 ======== */
header {position: fixed; width: 100%; top: 0; left: 0; z-index: 99999;  transition: all .3s ease; background:#0000007e}
.pc-header {height:100px;}
header.none {top: -200px;}
.hd_wrap {height:100px;display: flex; align-items: center; justify-content: space-between; }
.hd_wrap h1 {cursor: pointer; width: 120px;}
.hd_wrap h1 img {display: block; transition: all .2s ease;} 
.hd_wrap>nav>ul {display: flex; align-items: center; transition: all .2s;}
.hd_wrap>nav>ul>li { text-align: center; position: relative; transition: all .2s;}

.depth2 {display:none;position:absolute;top:100px;left:0;width:100%;background:#0000007e}

.hd_wrap a {display:flex;padding: 0 40px;align-items: center;justify-content: center;height:100px;color: #fff; font-size: 18px; font-weight: 500;  transition: all .2s ease;}
.hd_wrap .depth2 a {height:60px;}
.hd_wrap a:hover {color: #a5b4ca;}


.header-bar {
    position:fixed;
    top:-100px;
    right:50px;
    z-index: 9999;
    transition: all .3s ease; 
}

.header-bar i {
    font-size:30px;
}


.header-bar.none {
    top:32px;
}


/* ======== 푸터 ======== */


footer {
    background:#333;
}

.ft-wrap {
    display:flex;
    flex-direction: column;
    gap:30px;
    padding:60px 0;
}

.ft-wrap h2 {
    font-size:clamp(32px, 5vw, 80px);
    color:#fff;
    opacity:0.3;
    font-weight:700;
    line-height:1;
}

.ft-wrap ul {
    display:flex;
    gap:40px;
}

.ft-wrap li {
    color:#999; 
    font-size:16px;
    font-weight:400;
    position:relative;
}

.ft-wrap p {
    color:#666;
    font-size:16px;
    font-weight:400;
}

.ft-wrap .ft-name {
    color:#fff;
}

.ft-wrap div {
    display:flex;
    flex-direction: column;
    gap:10px;
}

.ft-wrap li::before {
    display:block;
    content:"";
    width:3px;
    height:3px;
    background:#999;
    border-radius: 100px;
    position:absolute;
    top:50%;
    left:-20px;
    transform:translate(-50%,-50%);
}

.ft-wrap ul>li:first-child::before {
    display:none;
}



/*======== 탑버튼 ========*/

.top_btn {
    position:fixed;
    bottom:40px;
    right:40px;
    z-index: 1000;
    display:none;
    background:var(--primary-color2);
    border-radius: 100px;
    width:60px;
    height:60px;
    cursor: pointer;
}

.top_btn div {
    width:60px;
    height:60px;
    display:flex;
    justify-content: center;
    align-items: center;
}

.top_btn i {
    color:#fff;
    font-size:32px;
}

.index .top_btn {
    display:none;
}



/* ======== subheader ======== */

.sub-hd {
    display:none;
}

.about .sub-about {
    display:block;
}

.info .sub-info {
    display:block;
}

.recruit .sub-recruit {
    display:block;
}

.promo .sub-promo {
    display:block;
}





.sub-hd-wrap {
    position:relative;
}

.sub-hd-wrap figure {
    width:100%;
    height:100vh;
    overflow: hidden;
    position:relative;
}

.sub-hd-wrap figure img {
    width:100%;
    height:100%;
    object-fit: cover;
    background-position: center center;
}

.sub-hd-wrap figure img {
    animation: bg-scale 3s ;
}

@keyframes bg-scale {
    0% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}


.sub-hd-wrap .sub-text {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:100%;
    padding: 0 20px;
}

.sub-hd-wrap .sub-text h2 {
    color:#fff;
    font-weight:700;
    font-size:clamp(32px, 5vw, 76px);
    text-align: center;
    line-height:1.3;
}

.sub-hd-wrap .sub-text p {
    color:#dedede;
    font-size: clamp(22px, 2vw, 34px);
    text-align: center;
    padding-top:60px;
    letter-spacing: 0.05em;
    opacity:0.5;
}



.sub-hd-wrap .scrolldown {
    opacity:0.7;
    display: flex;
    gap:30px;
    flex-direction: column;
    align-items: center;
    position:absolute;
    bottom:30px;
    left:50%;
    transform: translate(-50%,-50%);
}

.sub-hd-wrap .scrolldown div {
    color:#fff;
    font-size:18px;
}

.sub-hd-wrap .scrolldown .down-img {
    animation: down-move 1.5s infinite cubic-bezier(0.4,0,0.2,1);
}


@keyframes down-move {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    70% {
        transform: translateY(20px);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


.m-menu-wrap,.m-menu-btn,.m-header {
    display:none;
}


.mobile {display:none;}
.mopen {display:none;width:52px;height:50px;z-index:10003;transform:scale(0.75);}
.mopen>span {display:block;position:absolute;top:0;left:0;width:68%;height:2px;background:#fff;transition:0.2s}
.mopen>span:nth-child(1) {top: 14px;left:8px;}
.mopen>span:nth-child(2) {top:24px;left:8px;}
.mopen>span:nth-child(3) {top:24px;left:8px;}
.mopen>span:nth-child(4) {top:34px;left:8px;}


.mopen.oo>span:nth-child(1) {display:none;}
.mopen.oo>span:nth-child(2) {transform:rotate(45deg)}
.mopen.oo>span:nth-child(3) {transform:rotate(-45deg)}
.mopen.oo>span:nth-child(4) {display:none;}
.mopen.oo>span {background:#333;}






/* 개인정보처리방침 모달 */
.privacy_modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.privacy_modal_content {
    background: white;
    padding: 30px;
    border-radius: 10px;
    width: 45%;
    max-height: 80vh;
    overflow-y: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.privacy_title {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #c8d1df;
    padding-bottom: 15px;
}

.privacy_title h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.privacy_text {
    height:50vh;
    word-break: break-all;
    overflow-y: auto;
    white-space: nowrap;
    overflow-x: hidden;
    width:100%;
    padding:15px;
    margin:0 auto 15px;
    overscroll-behavior:none;
}

.privacy_text p {
    word-wrap: break-word;
    white-space: pre-wrap;
    width:100%;
    text-align: left;
}

.privacy_text::-webkit-scrollbar {
    width:5px;
}

.privacy_close {
    width:fit-content;
    margin:0 auto;
}

.privacy_close_btn {
    display: inline-block;
    padding:8px 30px;
    border-radius:50px;
    background:var(--primary-color2);
    color:#fff;
    font-size:18px; 
    cursor: pointer;
}





/* 모달 반응형 */


@media screen and (max-width: 1440px) {
    .privacy_modal_content {
        width:60%;
    }
    

}

@media screen and (max-width: 1024px) {
    .privacy_modal_content {
        width:70%;
    }
    

}



@media (max-width: 768px) {
    .privacy_modal_content {
        padding: 20px;
        width: 85%;
        max-height: 90vh;
    } 

    .privacy_title h3 {
        font-size: 20px;
    }
}




/* -------- 1600px --------*/
@media screen and (max-width: 1600px) {
    /* 헤더 */
    

}




/* -------- 1440px --------*/
@media screen and (max-width: 1440px) {
    /* 헤더 */
    .hd_wrap nav ul li {width: 160px;}

    /* 푸터 */
    .ft_menu {gap: 80px;}

}


/* -------- 1280px --------*/
@media screen and (max-width: 1280px) {
    /* 헤더 */
    

}


/* -------- 1024px --------*/
@media screen and (max-width: 1024px) {

    /* 메뉴 */
    header,.header-bar {display:none;}
    .m-menu-wrap,.m-menu-btn,.m-header {display:block;}

    .m-logo {width:20%;}
    .mopen {display: block;}

    .m-header {
        position:fixed;
        top:0;
        left:0;
        z-index:999;
        background:#11111166;
        transition:0.2s;
        padding:10px 20px;
        display:flex;
        justify-content: space-between;
        align-items: center;
        width:100%;
    }

    .m_menu .m-header {
        position:static;
        background:#fff;
    }

    .me-menu .mopen {
        position:absolute
    }
    
    .m-header.none {
        top:-100px;
        transition:0.2s;
    }


    .mopen {display:block;}
    .mobile {display:block;}
    .pc {display:none;}

    nav {position:fixed;z-index:10002;top:0%;left:-100%;width:100%;height:100vh;background:#fff;border-top:none;border-bottom:none;transition:0.3s;}
    nav.nosee {left:0;}
    nav>ul {width:100%;margin:0 auto;padding:10px}
    nav>ul:after {content:"";display:block;clear:both;}
    nav>ul>li {float:left;width:100%;border-left:none;border-bottom:1px solid #dddddd;}
    nav>ul>li:last-child {border-right:none;}
    nav>ul>li a {display:block;text-align:left;font-size:16px;padding:0 30px;line-height:50px;}

    nav>ul>li ul li {border-top:1px solid #ddd;}

    .m_menu>ul>li>a {font-weight:500;font-size:18px;padding:10px 20px;}

    nav>ul>li .white-menu {display:none;}

    nav>ul ul {height:0;overflow:hidden;transition:0.3s;position:static;transition:0.3s;top:40px;left:0;width:100%;background:#fafafa;}
    nav>ul>li>a:hover+ul {height:0;}
    nav>ul>li>a.on+ul.m_menu01 {height:357px;}
    nav>ul>li>a.on+ul.m_menu02 {height:255px;}
    nav>ul>li>a.on+ul.m_menu03 {height:204px;}
    nav>ul>li>a.on+ul.m_menu04 {height:153px;}

    .m_menu_bg {width:100%;height:100vh;position:fixed;top:0;left:0;z-index:10001;visibility: hidden;transition:0.2s;}
    .m_menu_bg.oo {visibility: visible;background:#000000;opacity:0.6;transition:0.2s;}



    .sub-hd-wrap .sub-text p {
        padding-top:50px;
    }



}



/* -------- 768px --------*/
@media screen and (max-width: 768px) {
    /* 헤더 */
    /* .hd_wrap {padding: 20px 0; align-items: flex-end;}
    .hd_wrap h1 {min-width: 140px;}
    header .open_menu {width: 25px;} */

    /* 푸터 */
    footer {padding: 40px 0;}

    .ft-wrap li {
        font-size:14px;
    }

    .ft-wrap div {
        gap:20px;
    }

    .ft-wrap ul {
        flex-direction: column;
        gap:2px;
    }

    .ft-wrap li::before {
        display:none;
    }

    .ft-wrap p {
        font-size:12px;
    }

    .ft-name {
        font-size:16px !important;
    }




    .sub-hd-wrap .sub-text p {
        padding-top:40px;
    }


    /* 탑버튼 */
    .top_btn {width: 50px; height: 50px; right: 20px;bottom:20px;}
    .top_btn div {
        width:50px;
        height:50px; 
    }
    .top_btn i {font-size:28px;}

    .sub-hd-wrap .scrolldown div {
        font-size:16px;
    }



}


/* -------- 480px --------*/ 
@media screen and (max-width: 480px) {


}


/* -------- 350px --------*/ 
@media screen and (max-width: 350px) {
    /* 페이지타이틀 */


}