/*=========================================================== 1. header(include)-style ===========================================================*/
/* nav */
.nav {position:fixed;width:100vw; height:90px; z-index: 30;background-color:rgba(255,255,255,0);margin: 0;padding-top:35px;transition: 0.5s; top:0px;}
.nav-container {width : 100%; max-width: var(--max-width); min-height: 30px; margin: 0 auto; padding: 0; display: flex; justify-content: space-between; align-items: center;}
/* nav-container 반응형 설정 */
@media (max-width: 1799.98px) {.nav-container {padding: var(--padding);}}
@media (max-width: 1199.98px) {}
@media (max-width: 991.98px) {}
@media (max-width: 767.98px) {}
@media (max-width: 575.98px) {}
/* nav logo 설정 */
.nav .logo-box {float:left;padding-left:0px;}
.nav .logo-box {width:200px;margin-top: -1px;}
.nav .logo-box img {width: 100%;}
/* nav logo 반응형 설정 */
@media (max-width: 575px) {.nav .logo-box {padding-left:0px;}}
@media (min-width: 576px) {.nav .logo-box {padding-left:0px;}}
@media (min-width: 992px) {.nav .logo-box {padding-left:0px;}}
@media (min-width: 1200px) {.nav .logo-box {padding-left:0px;}}
/* nav li 설정 */
.menu-row {width:100%;}
.menu-box {padding-right: 51px;}
.index-link-btn:hover {background:#fff; color:#111; transition: 0.3s;}
.nav .menu-list {display: flex; justify-content: flex-end; margin-right: 25px;}
.nav .menu-list li {font-family: 'Roboto'; font-weight: bold; transition:0.3s; padding-right:25px; padding-left:25px;}
.nav .menu-list li:last-child {padding-right:30px;}
.nav .menu-list li a {color:#111; position: relative; font-weight: 900 !important;}

.nav.white .logo-box img {filter: brightness(0) invert(1);}
.nav.white .menu-list li a {color: #fff;}

/* nav 반응형 설정 */
@media (max-width: 575px) {.nav .menu-list { display: none;}}        
@media (min-width: 576px) {.nav .menu-list { display: none;}}        
@media (min-width: 768px) {.nav .menu-list { display: none;}}        
@media (min-width: 992px) {.nav .menu-list { display: flex;}}        
/* nav 햄버거 버튼 설정 */
.menu-btn {position: fixed; top:39px; right:55px; z-index: 401;}
.menu-trigger, .menu-trigger span {display: inline-block; transition: all .4s; box-sizing: border-box;}
.menu-trigger {position: relative; width: 26px; height: 21px;}
.menu-trigger span {position: absolute; left: 0; width: 100%; height: 3px; border-radius: 0px; background-color: #111 ; transition: background-color 0.5s !important;}
.menu-trigger span:nth-of-type(1) {top: 0;}
.menu-trigger span:nth-of-type(2) {top: 9px;}
.menu-trigger span:nth-of-type(3) {bottom: 0;}
.menu-trigger.type7 span:nth-of-type(1) {-webkit-animation : menu-bar07-01 .75s forwards; animation : menu-bar07-01 .75s forwards;}
.menu-trigger.active-7 span {background-color: #fff;}

.menu-btn.white .menu-trigger span {background-color: #fff;}
/* nav 햄버거 버튼 responsive 설정 */
@media (max-width: 1400px) {.menu-btn {right:25px;}}

/* nav 햄버거 버튼 animation 설정 */
@-webkit-keyframes menu-bar07-01 {
    0% {-webkit-transform : translateY(9px) rotate(45deg);}
    50% {-webkit-transform : translateY(9px) rotate(0);}
    100% {-webkit-transform : translateY(0) rotate(0);}
}
@keyframes menu-bar07-01 {
    0% {transform : translateY(9px) rotate(45deg);}
    50% {transform : translateY(9px) rotate(0);}
    100% {transform : translateY(0) rotate(0);}
}
.menu-trigger.type7 span:nth-of-type(2) {transition : all .25s .25s; opacity : 1;}
.menu-trigger.type7 span:nth-of-type(3) {-webkit-animation : menu-bar07-02 .75s forwards; animation : menu-bar07-02 .75s forwards;}
@-webkit-keyframes menu-bar07-02 {
    0% {-webkit-transform : translateY(-9px) rotate(-45deg);}
    50% {-webkit-transform : translateY(-9px) rotate(0);}
    100% {-webkit-transform : translateY(0) rotate(0);}
}
@keyframes menu-bar07-02 {
    0% {transform : translateY(-9px) rotate(-45deg);}
    50% {transform : translateY(-9px) rotate(0);}
    100% {transform : translateY(0) rotate(0);}
}
.menu-trigger.active-7 span:nth-of-type(1) {-webkit-animation : active-menu-bar07-01 .75s forwards; animation : active-menu-bar07-01 .75s forwards;}
@-webkit-keyframes active-menu-bar07-01 {
    0% {-webkit-transform : translateY(0) rotate(0);}
    50% {-webkit-transform : translateY(9px) rotate(0);}
    100% {-webkit-transform : translateY(9px) rotate(45deg);}
}
@keyframes active-menu-bar07-01 {
    0% {transform : translateY(0) rotate(0);}
    50% {transform : translateY(9px) rotate(0);}
    100% {transform : translateY(9px) rotate(45deg);}
}
.menu-trigger.active-7 span:nth-of-type(2) {opacity : 0;}
.menu-trigger.active-7 span:nth-of-type(3) {-webkit-animation : active-menu-bar07-02 .75s forwards; animation : active-menu-bar07-02 .75s forwards;}
@-webkit-keyframes active-menu-bar07-02 {
    0% {-webkit-transform : translateY(0) rotate(0);}
    50% {-webkit-transform : translateY(-9px) rotate(0);}
    100% {-webkit-transform : translateY(-9px) rotate(-45deg);}
}
@keyframes active-menu-bar07-02 {
    0% {transform : translateY(0) rotate(0);}
    50% {transform : translateY(-9px) rotate(0);}
    100% {transform : translateY(-9px) rotate(-45deg);}
}


/*=========================================================== 2. overlay-GNB(include)-style ===========================================================*/
.overlay-logo img {width:250px;}

#overlay-menu-Content {position:fixed; top:0; left:0; right:0; bottom:0; visibility:hidden; opacity:0; z-index:-9999; display:none; overflow:hidden; background-color: rgba(255,255,255,0);}
#overlay-menu-Content .overlay-menu-bg-box{position:absolute; top:0px; left:0px; width:100%; height:100vh; display:flex;}
#overlay-menu-Content .overlay-overlay-menu-bg-box{position:absolute; top:0px; left:0px; width:100%; height:100vh; transform:translateX(-100%);background-color:#fff;}
#overlay-menu-ContentInnerCon{position:relative; width:100%; height:100vh;}
#overlay-menu-Content .container {max-width: unset;}

/* 메뉴 open */        
#overlay-menu-Content.open{opacity:1.0; visibility:visible; z-index:400;display:block;}

/* modal-GNB-text */
.section-split-cont-stage { position: fixed; top:0%; left:50%; transform: translateX(-50%); height:100%; transition: all 0.3s;}
.section-split-cont-stage.open {background-color: #111;}
.section-split-cont-box {width:100%; height:100%; transition:0.8s; overflow-y: auto; position: relative;}
.section-split-cont { height:100%; overflow: auto; overflow-x: hidden; width: 100%; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}        
.section-split-cont-nav-box {width:100%; height: auto; position: absolute; padding:0; top:50%; transform: translateY(-50%); line-height: 1; display: grid; grid-template-columns: 1fr; gap: 50px;}
.section-split-cont-nav-box li {width:100%; position: relative; overflow: hidden; text-align: center;}
.section-split-cont-nav-box li a {position: relative; color: #fff; font-weight: 900; opacity: 0; transition: all 0.4s; display: inline-block; padding: 0;}
.section-split-cont-nav-box li a:hover {color: rgba(255,255,255,.5);}
/* .section-split-cont-nav-box li a::after {content: attr(data-gnb); position: absolute; left: 0; transform: translateY(100%);}
.section-split-cont-nav-box li a:hover {transform: translateY(-100%);} */
/* .section-split-cont-nav-box li a::after {content: attr(title); position: absolute; bottom: 20px; left: 0; width: 100%; height: auto; color: #fff; border-bottom: 2px solid #fff; max-width: 0; overflow: hidden; transition: all .4s;} */
.section-split-cont-stage.open a {opacity: 1;}

/* modal-GNB-text 반응형 setting */
@media (max-width: 575px) {
    .section-split-cont {padding-left: 0px; padding-right: 0px;}
    .section-split-cont a {font-size: 52px; padding-bottom:10px;}
}
@media (min-width: 576px) {
    .section-split-cont {padding-left: 0px; padding-right: 0px;}
    .section-split-cont a {font-size: 52px; padding-bottom:10px;}
}
@media (min-width: 768px) {
    .section-split-cont a {font-size: 72px; padding-bottom:10px;}
}

/*=========================================================== 3. footer(include)-style ===========================================================*/
.footer {padding: 50px 0 !important; position: relative; z-index: 2; background: #fff;}
.footer .container .footer-gnb {padding: 0;}
.footer .container .footer-gnb {font-size: 12px; line-height: 1;}
.footer .container .footer-gnb ul {display: flex; margin: 0; justify-content: space-between; border-top: 1px solid #111; border-bottom: 1px solid #111;}
.footer .container .footer-gnb ul li {display: flex; gap: 30px;}
.footer .container .footer-gnb ul li .footer-text {margin: 0;}
.footer .container .footer-gnb ul li .footer-text br {display: none;}
.footer .container .footer-gnb .copy-right {margin: 0; font-weight: 400;}
.footer .container .footer-gnb ul,
.footer .container .footer-gnb .copy-right {padding: 14px 0;}

@media (max-width: 1199.98px) {}
@media (max-width: 991.98px) {
    .footer .container .footer-gnb ul {flex-direction: column; gap: 20px; padding: 20px 0;}
    .footer .container .footer-gnb ul li:nth-child(1) {order: 2; flex-direction: column; gap: 10px;}
    .footer .container .footer-gnb ul li:nth-child(2) {order: 1;}
}
@media (max-width: 767.98px) {}
@media (max-width: 575.98px) {}
/*=========================================================== Aside Style ===========================================================*/
aside {position: fixed; bottom: 4%; right: 1.5%; z-index: 101; display: grid; grid-template-columns: 1fr; gap: 20px;}
aside .thumb {display: block; width: 60px; height: 60px; border-radius: 50%; position: relative;}
@media (max-width:1023.98px){
    aside {bottom: 3%; right: 4%;}
    aside .thumb {width: 60px; height: 60px;}
}