:root{
	--blue:#0d2abe;
}
.wrap[max="1720"]{max-width: 1720px;margin: 0 auto;width: 95%;}
.wrap[max="1440"]{max-width: 1440px;margin: 0 auto;width: 95%;}
.wrap[max="1340"]{max-width: 1340px;margin: 0 auto;width: 95%;}
.wrap[max="1280"]{max-width: 1280px;margin: 0 auto;width: 95%;}
header{
    padding:20px 0;font-family: 'Manrope'; z-index: 100;
    position: fixed;
    width: 100%;
    transition: background-color 0.5s ease;
}
header.scrolled {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
}
header .wrap{display: flex;align-items: center;justify-content: space-between;}
header .logo{display: block;flex-shrink: 0;z-index: 100;}
header .logo a{}
header .logo svg {
    height: 46px;
    display: block;
}
header .gnb{display: flex;align-items: center;justify-content: flex-end;width: 100%;}
header .navi{display: flex;gap: 60px;align-items: center; justify-content: flex-end;width: 100%;}
header .navi li{font-size: 18px;font-weight: 500;}
header .navi li a{display: flex;align-items: center;justify-content: center;padding: 0 15px;box-sizing: border-box;width: 100%;}

/* 임시 gnb */
header .gnb .navi > li {
    position: relative;
    width: auto;
}
header .gnb .navi .subMenu {
    position: absolute;
    top: 52px;
    left: 50%;
    background: #fff;
    width: 100%;
    min-width: 200px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateY(-10px) translateX(-50%);
    transition: all 0.3s ease;
    z-index: 1000;
    text-align: center;
}
header .gnb .navi > li > a:hover ~ .subMenu,
header .gnb .navi > li .subMenu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) translateX(-50%);
}
header .gnb .navi .subMenu li {
    display: block;
}

/* subMenu의 기본 상태도 명확하게 지정 */
header .gnb .navi > li .subMenu {
    visibility: hidden;
}
header .gnb .navi .subMenu a {
    display: block;
    padding: 20px 15px;
    box-sizing: border-box;
    font-size: 14px;
    text-align: center;
    color: #333;
    transition: background 0.3s ease;
}
header .gnb .navi .subMenu a:hover {
    background: #f5f5f5;
}
/* 임시 gnb 끝 */

header .wrap .gnb .navi > li:last-child a {padding-right: 0}
header .hamWrap{display: none;position: relative;width: 30px;z-index: 100;}
header .hamWrap .ham {
    width: 100%;
    height: 9px;
    margin-top: -5px;
    position: relative;
}
header .hamWrap .ham span {
    width: 100%;
    height: 2px;
    background-color: black;
    position: absolute;
    left: 0;
    transition-duration: 0.4s;
    transform-origin: 50% 50%;
    display: block;
}
header .hamWrap .ham span:nth-of-type(1){top: 0;}
header .hamWrap .ham span:nth-of-type(2){top: 100%;}
header .hamWrap .ham.active span:nth-of-type(1){top: 50%;transform: translateY(-50%) rotate(-135deg);}
header .hamWrap .ham.active span:nth-of-type(2){top: 50%;transform: translateY(-50%) rotate(135deg);}
header .gnb_mob{position: fixed;width: 100%;height: 100vh;background-color: #012153;opacity: 0;pointer-events: none;left: 0;top: 0;}
header.menuOn .gnb_mob{opacity: 1;pointer-events: auto;}
header.menuOn #logo .cls-1{fill: #fff;}
header.menuOn #logo .cls-2{fill: #fff;}
header.menuOn #logo .cls-3{fill: #fff;}
header.menuOn .hamWrap .ham span{background-color: #fff;}



header .gnb_mob{color: #fff;padding: 100px 30px;width: 100%;box-sizing: border-box;}
header .gnb_mob > ul{display: flex;flex-direction: column;justify-content: center;}
header .gnb_mob > ul > li{}
header .gnb_mob .depth01{display: flex;align-items: center;justify-content: space-between;border-top: 1px solid rgba(255, 255, 255, 0.2);padding: 20px 0;}
header .gnb_mob .depth01 span{font-size: 24px;font-weight: 600;display: block;line-height: 1.3;}
header .gnb_mob .depth02{color: rgba(255, 255, 255, 0.7);font-size: 18px;font-weight: 500;line-height: 2.2;padding-bottom: 15px;}
header .gnb_mob .depth02 {
    display: none;
}
header .gnb_mob .depth01 .icon i {
    font-size: 16px;
    transition: all 1s;
}

footer{background: #1c1c1c;font-family : 'Manrope';color: #fff;}
footer .ft_logo{padding-top: 50px;display: flex;align-items: center;justify-content: center;}
footer .info{padding-top: 40px;display: flex;align-items: center;justify-content: center;flex-direction: column;font-size: 14px;letter-spacing: -0.02em;text-align: center;}
footer .info p{line-height: 1.5;}
footer .info p:last-child{padding-bottom: 40px;}
footer .copy{border-top: 1px solid rgba(255, 255, 255, 0.1);padding: 30px 0;font-size: 14px;letter-spacing: -0.02em;display: flex;justify-content: center;position: relative;}
footer .copy .priv{font-weight: 600;position: absolute;left: 0; display: flex; align-items: center; bottom: 20px;}
footer .copy .priv a{ display: block; padding: 10px; }
footer .copy p{text-align: center;}


@keyframes marquee {
    0%{transform: translateX(0);}
    100%{transform: translateX(-100%);}
}

@media screen and (max-width: 1680px) {
    header .navi li {font-size: 16px;}
}
@media screen and (max-width: 1440px) {
    header .navi{gap: 30px;}
}
@media screen and (max-width: 1280px) {
    header .logo{max-width: 180px;}
    header .navi li {font-size: 14px;}
    header .navi{gap: 10px;}
}
@media screen and (max-width: 1024px) {
    header .gnb{display: none;}
    header .hamWrap{display: flex;}
    
}
@media screen and (max-width: 820px) {
    .wrap[max="1720"]{width: 90%;}
    .wrap[max="1440"]{width: 90%;}
    .wrap[max="1340"]{width: 90%;}

	header .logo svg{height: 32px;}

    footer .copy{justify-content: flex-end;}
    
}
@media screen and (max-width: 500px) {

    header .gnb_mob .depth01 span {font-size: 20px;}
    header .gnb_mob .depth02 {font-size: 16px;}


    footer .copy{flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    footer .copy a {position: unset;}
    footer .copy .priv{ position: static; }
}
@media screen and (max-width: 360px) {
    footer .info{font-size: 13px;}
}


/* 공통 Subvisual */
.subVisual{
    height: 470px;display: flex;align-items: center;position: relative;
    /* border: 1px solid tomato; box-sizing: border-box; */
    background-image: url(/asset/img/sub/sub_visual_bottom.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
    overflow: hidden;
}
.subVisual .bg{
    position: absolute;
    left: 0;
    bottom: 2%;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* object-fit: cover; */
}
.subVisual .bg::before{
    content: '';
    display: block; padding-bottom: calc(600/1920*100%);
}
.subVisual .bg img{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right bottom;
}
.subVisual .title{
    position: relative;
    z-index: 1;
}
.subVisual .title > div{overflow: hidden;}
.subVisual .title small{
    display: block;
    font-size: 26px;
    font-weight: 600;
    color: black;
    padding-bottom: 10px;
}
.subVisual .title h1{
    font-size: 70px;
    font-weight: 800;
    color: black;
    line-height: 1.3;
}

@media screen and (max-width: 1680px) {}
@media screen and (max-width: 1440px) {
    .subVisual .title small{font-size: 22px;}
    .subVisual .title h1 {font-size: 60px;}
}
@media screen and (max-width: 1280px) {
    .subVisual .title h1 {font-size: 54px;}
}
@media screen and (max-width: 1024px) {
    .subVisual{height: 400px;}
    .subVisual .title h1 {font-size: 46px;}
}
@media screen and (max-width: 820px) {
    .subVisual{height: 300px;}
    .subVisual .bg img {object-position: 82% 100%}
    .subVisual .title small {font-size: 20px;}
    .subVisual .title h1 {font-size: 38px;}
}
@media screen and (max-width: 500px) {
    .subVisual .title small {font-size: 18px;}
    .subVisual .title h1 {font-size: 32px;}
}
@media screen and (max-width: 360px) {
    .subVisual .title small {font-size: 16px;}
    .subVisual .title h1 {font-size: 24px;}
}




/* footer 개인정보처리방침 팝업 */
.privPop{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 99999;  transition: opacity .4s, visibility .4s; opacity: 0; visibility: hidden; line-height: 1.4; }
.privPop .eleBg{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
.privPop .inn{ width: 95%; max-width: 1280px; height: 60vh; margin: 0 auto; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 15px; box-sizing: border-box; padding: 20px; }
.privPop .inn .cont{ width: 100%; height: 100%; position: relative; }
.privPop .inn .cont .close{ position: absolute; bottom: calc(100% + 40px); left: 50%; transform: translateX(-50%); z-index: 99999; cursor: pointer; color: #fff; font-size: 26px; }
.privPop .inn .cont .p{ height: 100%; line-height: 1.3; overflow: auto; }
.privPop .inn .cont .p h1{ font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.privPop .inn .cont .p strong{ font-weight: 700; }
.privPop .inn .cont .p b{ font-weight: 700; }
.privPop .inn .cont .p ul{ margin-bottom: 20px; }
.privPop .inn .cont .p ul li{ display: flex; align-items: baseline; flex-wrap: wrap; }
.privPop .inn .cont .p ul li .dep{ width: 100%; padding-left: 1.5em; }
.privPop .inn .cont .p ul li span{ display: block; margin-right: 0.8em; flex-shrink: 0; }
.privPop .inn .cont .p ul li p{ width: calc(100% - 2em); }

.privPop.on {
    opacity: 1; visibility: visible;
}



@media screen and (max-width: 450px){
    .privPop .inn .cont .p h1{ font-size: 16px; }
    .privPop{font-size: 14px;}
    .inn{ padding-right: 0; }
}