::selection {background-color: #049C0E; color: #fff;}

/* 헤더 */

.hd_wrap {position:fixed;top:0;left:0;width:100%;height:100px;background:#ffffff;z-index:99999;transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 0 10px #00000015;}
.hd_wrap>.hd_box {display:flex;justify-content: space-between;align-items:center;margin:0 auto;max-width:1660px;height:100px;background:#ffffff; padding:0 15px;}

.hd_wrap.header-hidden {
    transform: translateY(-100%);
}

.hd_wrap>.hd_box>.hd_logo {width:fit-content;}
.hd_wrap>.hd_box>.hd_logo img {width:100%; height:auto;}

.hd_wrap>.hd_box>.hd_center>nav>ul {display:flex;gap:70px;}
.hd_wrap>.hd_box>.hd_center>nav>ul>li a {font-size:clamp(14px, 2vw, 18px);transition:0.1s;color:#1a1a1a;text-decoration:none;}
.hd_wrap>.hd_box>.hd_center>nav>ul>li:hover a {color:#049C0E;transition:0.1s}

/* 모바일 메뉴 버튼 */
.hd_mobile_menu {display:none;}
.mobile_menu_btn {display:flex;flex-direction:column;justify-content:center;align-items:center;width:30px;height:30px;background:none;border:none;cursor:pointer;padding:0;}
.mobile_menu_btn span {display:block;width:20px;height:2px;background:#1a1a1a;margin:2px 0;transition:0.3s;border-radius:1px;}
.mobile_menu_btn:hover span {background:#049C0E;}

/* 모바일 메뉴 */
.mobile_menu_overlay {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:100000;opacity:0;visibility:hidden;transition:0.3s;}
.mobile_menu_overlay.on {opacity:1;visibility:visible;}

.mobile_menu {position:fixed;top:0;right:-100%;width:300px;height:100vh;background:#fff;z-index:100001;transition:0.3s;overflow-y:auto;box-shadow:-2px 0 10px rgba(0,0,0,0.1);}
.mobile_menu.on {right:0;}

.mobile_menu_header {display:flex;justify-content:space-between;align-items:center;padding:25px 20px;border-bottom:1px solid #eee;}
.mobile_menu_logo img {max-width:150px;height:auto;}

.mobile_menu_close {display:flex;flex-direction:column;justify-content:center;align-items:center;width:30px;height:30px;background:none;border:none;cursor:pointer;padding:0;position:relative;}
.mobile_menu_close span {display:block;width:20px;height:2px;background:#1a1a1a;transition:0.3s;border-radius:1px;position:absolute;}
.mobile_menu_close span:first-child {transform:rotate(45deg);}
.mobile_menu_close span:last-child {transform:rotate(-45deg);}

/* .mobile_menu_nav {padding:20px 0;} */
.mobile_menu_nav ul {list-style:none;padding:0;margin:0;}
.mobile_menu_nav ul li {border-bottom:1px solid #f0f0f0;}
.mobile_menu_nav ul li:last-child {border-bottom:none;}
.mobile_menu_nav ul li a {display:block;padding:20px;font-size:clamp(16px, 2vw, 18px);color:#1a1a1a;text-decoration:none;transition:0.3s;}
.mobile_menu_nav ul li a:hover {background:#f8f9fa;color:#049C0E;}

/* 모바일 메뉴 열릴 때 body 스크롤 방지 */
body.menu_open {overflow:hidden;}



/* .hd_wrap>.hd_box>.hd_right {width:120px;height:42px;border:1px solid #333;border-radius:100px;cursor:pointer;}
.hd_wrap>.hd_box>.hd_right {display:flex;justify-content:center;align-items:center;font-size:17px;gap:6px;}
.hd_wrap>.hd_box>.hd_right img {width:16px;} */


/* subheader */

/* subheader 공통 */

.subhd_wrap>div {
    display:none;
}

.intro .intro_tt {display:block;height:100%;}
.works .works_tt {display:block;height:100%;}
.program .program_tt {display:block;height:100%;}
.program_d .program_tt {display:block;height:100%;}
.artist .artist_tt {display:block;height:100%;}
.inquire .inquire_tt {display:block;height:100%;}





.subheader {
    margin-top:110px; 
}

.subhd_wrap {
    border-radius:20px;
    overflow:hidden;
    position:relative;
}

.subhd_wrap .subhd_text {
    position:absolute;
    z-index: 1000;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    text-align: center;
    padding:20px;
}

.subhd_wrap .subhd_text h3 {
    font-size:clamp(28px, 4vw, 55px);
    font-weight:500;
    letter-spacing: 0.08em;
    margin-bottom:10px;
    line-height:1.2;
}

.subhd_wrap .subhd_text p {
    font-size:clamp(14px, 2vw, 24px);
    font-weight:300;
    letter-spacing: 0.2em;
    opacity:0.5;
    margin:0;
}

.subhd_wrap .subhd_bg {
    width:100%;
    height:100%;
}

.subhd_wrap .subhd_bg>img {
    width:100%;
    height:100%;
    object-fit: cover;
    animation-name : subhdimg;
    animation-duration : 3s;
}

@keyframes subhdimg {
	0% {
        transform:scale(1.2);
	}
	100% {
        transform:scale(1.0);
	}
}







.top_btn {position:fixed;bottom:4%;right:2%;width:61px; aspect-ratio: 1; border-radius: 100%; overflow: hidden; background: #09B314;z-index:99999;display:none;cursor:pointer;box-shadow: 1px 1px 4px 3px #028b0b52;}
.top_btn img {width:fit-content;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}




.ft_top {position:relative;padding:80px 0 120px;margin-top:120px;background:#f5f5f5;}
.ft_top .ft_top_con {display:flex;justify-content:space-between;align-items:center;max-width:1660px;margin:0 auto;padding:0 20px;gap:60px;}
.ft_top .ft_top_con>p {font-size:clamp(26px,3vw,52px);font-weight:700;letter-spacing:-0.03em;line-height:1.3;flex:1;text-align:left;}
.ft_top .ft_top_con>div {display:flex;flex-direction:column;gap:20px;flex-shrink:0;justify-content:center;}
.ft_top .ft_top_con>div>span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 40px;
    border: 1px solid #1a1a1a;
    border-radius: 100px;
    cursor: pointer;}
.ft_top .ft_top_con>div>span>p {font-size:clamp(16px, 2vw, 24px);letter-spacing:-0.03em;white-space:nowrap;flex-shrink:0;}
.ft_top .ft_top_con>div>span>img {width:30px;height:100%;}

.ft-box {position:absolute;z-index:999;bottom:0;border-radius:60px 60px 0 0;width:100%;height:60px;content:"";background:#049c0e;margin-top:40px;}

.ft_wrap {width:100%;background:#049C0E;color:#fff;padding:30px 0;}
/* 슬로건 색상 점진 전환용 변수 --ratio (0~1) */
.ft_slogan { max-width: 1660px;
    font-family: Poppins;
    margin: 0 auto;
    font-size: clamp(40px, 5vw, 80px);
    font-weight: 900;
    color: #049c0e;
    text-shadow: -1px 0 #ffffff80, 0 1px #ffffff80, 1px 0 #ffffff80, 0 -1px #ffffff80;
    padding:0 15px;
}

/* footer 완전 진입 시 완전 흰색 유지 (보정) */
.ft_slogan.to-white {color:#ffffff !important;text-shadow:none !important;}

.ft_nav {max-width:1660px; margin:0 auto 16px;padding:0 20px;}
.ft_nav ul {display:flex;gap:20px;margin-top:35px; flex-wrap:wrap;}
.ft_nav ul li:first-child {font-weight:700;}
.ft_nav ul li {cursor:pointer;transition:0.3s;}
.ft_nav ul li:hover {opacity:0.8;}

.ft_bottom {display:flex;max-width:1660px;margin:0 auto;padding:0 20px 60px;align-items: center;justify-content:space-between;font-weight:500;opacity:0.8;gap:40px;}
.ft_bottom .ft_left {line-height:2;flex:1;}
.ft_bottom .ft_left ul {display:flex;gap:20px;flex-wrap:wrap;}
.ft_bottom .ft_left ul>li {position:relative;}
.ft_bottom .ft_left ul>li:first-child::after {display:none;}
.ft_bottom .ft_left ul>li::after {display:block;content:"";width:2px;height:2px;background:#fff;position:absolute;top:50%;left:-11px;}

.ft_bottom .ft_right {display:flex;flex-direction: column;gap:10px;flex-shrink:0;align-items: flex-end;}
.ft_bottom .ft_right ul {display:flex;gap:16px;justify-content: flex-end;}
.ft_bottom .ft_right ul>li>a>img {width:auto;transition:0.3s;}
.ft_bottom .ft_right ul>li>a:hover img {opacity:0.8;}

/* ------------------------------------------------------------- */
/* ------------------- 반응형 미디어 쿼리  ------------------- */
/* ------------------------------------------------------------- */


@media (max-width:1400px) {
    .ft_top .ft_top_con>div>span {padding:20px 36px;}
    .ft_top .ft_top_con>div>span>p {font-size:22px;}
    .ft_top .ft_top_con>div>span>img {width:26px;}

    .ft_slogan {font-size:60px;}
}


@media (max-width:1200px) {
    
    .ft_top .ft_top_con>div>span {padding:18px 30px;}
    .ft_top .ft_top_con>div>span>p {font-size:20px;}
    .ft_top .ft_top_con>div>span>img {width:24px;}
    .ft_slogan {font-size:50px;}

}


/* 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
    /* 헤더 */
    .hd_wrap>.hd_box>.hd_center {display:none;}
    .hd_mobile_menu {display:block;}
    
    .hd_wrap {height:80px;}
    .hd_wrap>.hd_box {padding:0 15px;height:80px;}
    .hd_wrap>.hd_box>.hd_logo img {max-width:200px;}
    
    /* 서브헤더 */
    .subheader {margin-top:90px;padding:0 15px;}
    .subhd_wrap {height:250px;border-radius:15px;}
    
    /* 푸터 */
    .ft_top {padding:60px 0 80px;margin-top:80px;}
    .ft_top .ft_top_con {text-align:center;gap:30px;padding:0 15px;}
    .ft_top .ft_top_con>div>span {min-width:auto;width:100%;max-width:300px;}
    
    .ft_top .ft_top_con>div {gap:8px;}
    .ft_top .ft_top_con>div>span {padding:15px 24px;}
    .ft_top .ft_top_con>div>span>p {font-size:18px;}
    .ft_top .ft_top_con>div>span>img {width:22px;}


    .ft_slogan {padding:0 15px;font-size:40px;}
    .ft_nav {padding:0 15px;}
    .ft_bottom { gap:30px;}
    /* .ft_bottom .ft_right {align-items:center;} */
    .ft_bottom .ft_right ul {justify-content:center;}
}


@media (max-width:900px) {
    
    .ft_bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .ft_bottom .ft_right {
        align-items: flex-start;
    }


}




/* 모바일 대형 (768px 이하) */
@media (max-width: 768px) {
    /* 헤더 */
    .hd_wrap {height:80px;}
    .hd_wrap>.hd_box {height:80px;padding:0 10px;}
    .hd_wrap>.hd_box>.hd_logo img {max-width:150px;}
    
    /* 서브헤더 */
    .subheader {margin-top:90px;padding:0 10px;}
    .subhd_wrap {height:200px;border-radius:10px;}
    
    /* 푸터 */
    .ft_top {padding:35px 0 65px;margin-top:35px;}
    .ft_top .ft_top_con {padding:0 10px;gap:30px;flex-direction:column;align-items:center;text-align:center;}
    .ft_top .ft_top_con>p {text-align:center;font-size:22px}
    .ft_top .ft_top_con>div {flex-direction:column;gap:15px;width:100%;max-width:400px;justify-content:center;}
    .ft_top .ft_top_con>div>span {padding:12px 20px;width:80%;white-space:normal;margin: 0 auto;}
    .ft_top .ft_top_con>div>span>p {white-space:normal;font-size:16px;}
    
    .ft_slogan {padding:0 10px;line-height: 1.3;font-size:30px;}
    .ft_nav {padding:0 10px;}
    .ft_nav ul {gap:15px;margin-top:25px;}
    
    .ft_bottom {padding:0 10px 30px;gap:25px;}
    .ft_bottom .ft_left ul {gap:15px;}

    .ft_bottom .ft_right li img {width:85% !important; display: block;}
    
    .ft-box {height:30px;border-radius: 40px 40px 0 0 }

    /* 탑 버튼 */
    .top_btn {width:50px;bottom:3%;right:3%;}

    .subhd_wrap .subhd_text h3 { font-size:24px;margin-bottom:5px;}
    .subhd_wrap .subhd_text {width:100%;}
    .ft_bottom .ft_left {word-break: keep-all;line-height:1.5}
    .ft_bottom .ft_left ul {gap:7px;flex-direction: column;margin-top:6px;}
    .ft_bottom .ft_left ul>li::after {display: none;}
    .ft_bottom .ft_right ul {gap:10px;}

    .mobile_menu_nav ul li a {padding: 16px 20px;}

}

@media (max-width:480px) {
    
    .ft_top .ft_top_con>div>span>p {font-size:14px;}
    .ft_top .ft_top_con>div>span {width:70%;}
    .ft_top .ft_top_con>div>span>img {width:18px;}
    .ft_slogan {font-size:24px;}
    .ft_bottom .ft_right li img {width:80% !important}



}





/* 모바일 소형 (480px 이하) */
/* @media (max-width: 480px) {

    .hd_wrap {height:70px;}
    .hd_wrap>.hd_box {height:70px;padding:0 10px;}
    .hd_wrap>.hd_box>.hd_logo img {max-width:100px;}
    

    .mobile_menu {width:280px;}
    .mobile_menu_nav ul li a {padding:15px;}
    .mobile_menu_header {padding:15px;}
    .mobile_menu_logo img {max-width:120px;}
    

    .subheader {margin-top:90px;padding:0 10px;}
    .subhd_wrap {height:180px;}
    .subhd_wrap .subhd_text {padding:15px;}
    

    .ft_top {padding:30px 0 60px;margin-top:50px;}
    .ft_top .ft_top_con {padding:0 10px;gap:25px;flex-direction:column;align-items:center;text-align:center;}
    .ft_top .ft_top_con>p {text-align:center;}
    .ft_top .ft_top_con>div {flex-direction:column;gap:12px;width:100%;max-width:350px;justify-content:center;}
    .ft_top .ft_top_con>div>span {padding:15px 25px;min-width:auto;max-width:none;white-space:normal;}
    .ft_top .ft_top_con>div>span>p {white-space:normal;}
    
    .ft_slogan {padding:0 10px;}
    .ft_nav {padding:0 10px;}
    .ft_nav ul {gap:10px;margin-top:20px;flex-direction:column;align-items:center;}
    
    .ft_bottom {padding:0 10px 25px;gap:20px;}
    .ft_bottom .ft_left {text-align:center;}
    .ft_bottom .ft_left ul {justify-content:center;gap:10px;}
    

    .top_btn {width:45px;bottom:2%;right:2%;}
} */

/* 초소형 디바이스 (320px 이하) */
/* @media (max-width: 320px) {
    
    .hd_wrap>.hd_box {padding:0 5px;}
    .hd_wrap>.hd_box>.hd_logo img {max-width:80px;}
    
    
    .mobile_menu {width:250px;}
    .mobile_menu_header {padding:12px;}
    .mobile_menu_logo img {max-width:100px;}
    .mobile_menu_nav ul li a {padding:12px;}
    
    
    .subheader {padding:0 5px;}
    .subhd_wrap {height:160px;}
    .subhd_wrap .subhd_text {padding:10px;}
    
    
    .ft_top {padding:20px 0 50px;}
    .ft_top .ft_top_con {padding:0 5px;gap:20px;flex-direction:column;align-items:center;text-align:center;}
    .ft_top .ft_top_con>p {text-align:center;}
    .ft_top .ft_top_con>div {flex-direction:column;gap:10px;width:100%;max-width:300px;justify-content:center;}
    .ft_top .ft_top_con>div>span {padding:12px 20px;min-width:auto;max-width:none;white-space:normal;}
    .ft_top .ft_top_con>div>span>p {white-space:normal;}
    
    .ft_slogan {padding:0 5px;}
    .ft_nav {padding:0 5px;}
    .ft_bottom {padding:0 5px 20px;}
} */


@media (orientation: landscape) and (max-height: 500px) {
    .subhd_wrap {height:150px;}
    .ft_top {padding:20px 0 40px;margin-top:40px;}
}

/* 터치 디바이스 최적화 */
@media (hover: none) and (pointer: coarse) {
    .hd_wrap>.hd_box>.hd_center>nav>ul>li:hover a {color:#1a1a1a;}
    .ft_top .ft_top_con>div>span:hover {background:transparent;color:inherit;border-color:#1a1a1a;}
    .ft_nav ul li:hover {opacity:1;}
    .ft_bottom .ft_right ul>li>a:hover img {opacity:1;}
}

/* 접근성 개선 */
@media (prefers-reduced-motion: reduce) {
    .subhd_wrap .subhd_bg>img {
        animation: none;
    }
    
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 고대비 모드 대응 */
@media (prefers-contrast: high) {
    .hd_wrap {background:#fff;border-bottom:2px solid #000;}
    .hd_wrap>.hd_box>.hd_center>nav>ul>li a {color:#000;}
    .mobile_menu {border-left:2px solid #000;}
    .ft_wrap {background:#006600;}
    .ft_top {background:#f0f0f0;}
    .ft_top .ft_top_con>div>span {border-color:#000;}
}