/*=========================================================== GNB Style ===========================================================*/
.container-gnb {width: 100%; height: 100px; position: fixed; z-index: 103; transition: all .2s;}
.gnb.container {position: fixed; z-index: 103; top: 0; left: 50%; transform: translateX(-50%);}
.gnb.container::before, .gnb.container::after {content: none;}
.header {display: flex; justify-content: space-between; margin: 0; position: relative; width: 100%; height: 100px; align-items: center;}
.header .logo-box {width: 200px; transition: all .4s;}
.header .logo-box img {width: 100%;}
.header .menu-box {position: relative;}
.header .menu-box.hidden {display: none;}
.header ul {display:flex; padding: 0; margin: 0; margin-right: -30px;}
.header ul li {font-weight: 700; font-size: 18px; position: relative; line-height: 1; color: #fff; padding: 20px 30px;}
.header ul li a {cursor: pointer; user-select: none;}
.header ul li a:hover {color: #fff;}
.header ul li ul.submenu {display: none; gap: 0; position: absolute; top: 55px; left: 0; background: rgba(0,0,0,.7); width: 100%; box-shadow: 2px 2px 3px rgb(0 0 0 / 40%);}
.header ul li ul.submenu li {padding: 0; text-align: center;}
.header ul li ul.submenu li a {font-size: 14px; color: #fff; padding: 12px 12px; display: block; font-weight: 500;}
.header ul li ul.submenu li a:hover {background: rgba(0,0,0,.6);}
.header ul li:hover ul.submenu {display: grid;}

.container-gnb.active {background: #fff;}
.gnb.container.active .header .logo-box img { filter: invert(1); }
.gnb.container.active .header ul li {color: #111;}
.gnb.container.active .header ul li a:hover {color: #111;}
.gnb.container.active .header ul li ul.submenu li a:hover {color: #fff;}
@media (max-width: 1023.98px) {
    .container-gnb {height: 100px;}
    .header {height: 100px;}
    .header .logo-box {width: 150px;}
    .header .menu-box {display:none;}
}
@media (max-width: 767.98px) {}
@media (max-width: 575.98px) {}
/*=========================================================== Menu Trigger Style ===========================================================*/
.menu-trigger,.menu-trigger span {display: inline-block; transition: transform .4s; box-sizing: border-box;}
.menu-trigger {display: none;}
.menu-trigger {position: fixed; width: 19px; height: 18px; z-index: 1000; right: calc((100% - 1720px)/2); top:50px; cursor: pointer;}
.menu-trigger span {position: absolute; left: 0; width: 100%; height: 4px; background-color: #fff;}
.menu-trigger span:nth-of-type(1) {top: 0;}
.menu-trigger span:nth-of-type(2) {top: 7px;}
.menu-trigger span:nth-of-type(3) {bottom: 0;}

.menu-trigger.active span {background-color: #111;}

@media (max-width: 1719.98px) {.menu-trigger {right: 20px;}}
@media (max-width: 1023.98px) {.menu-trigger {top: 42px; display: inline-block;}}

/* 메뉴 버튼 애니메이션 */
.menu-trigger.active-1 {position: fixed;}
.menu-trigger.active-1 span {background-color: #fff;}
.menu-trigger.active-1 span:nth-of-type(1) {-webkit-transform: translateY (7px) rotate (45deg); transform: translateY(7px) rotate(45deg);}
.menu-trigger.active-1 span:nth-of-type(2) {opacity: 0;}
.menu-trigger.active-1 span:nth-of-type(3) {-webkit-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg);}
/*=========================================================== Aside Style ===========================================================*/
aside {position: fixed; bottom: 5%; right: 1.5%; z-index: 101; transform: translateY(-5%); display: grid; grid-template-columns: 1fr; gap: 15px;}
aside .thumb {display: block; width: 40px; height: 40px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); transition: all .2s ease-in-out; border-radius: 50%;}
aside .thumb:hover {transform: translateX(-5px);}
@media (max-width: 1023.98px) {
    aside {right: 3%;}
}
/*=========================================================== Footer Style ===========================================================*/
.footer-section {background: url(/web22nd/page/img/footer.jpg) no-repeat center; background-size: cover; height: 632px; overflow-x: hidden;}
.footer.cont-container {display: grid; grid-template-columns: auto 1fr; gap: 50px; position: relative; top: 50%; transform: translateY(-50%);}
.footer.cont-container * {color: #fff;}
.footer.cont-container .footer-info-first {width: 180px;}
.footer.cont-container .footer-info-second {font-size: 16px; line-height: 1;}
.footer.cont-container .footer-info-second strong {font-weight: 500; margin-bottom: 5px; display: inline-block;}
.footer.cont-container .footer-info-second p {font-weight: 200; margin-top: 10px; display: inline-block;}
.footer.cont-container .footer-info-second .etc {margin-top: 20px;}
.footer.cont-container .footer-info-second .etc img {width: 130px;}
.footer.cont-container .footer-info-second .etc img.img01,
.footer.cont-container .footer-info-second .etc img.img02 {margin-right: 20px;}
.footer.cont-container .footer-info-second .etc img.img03 {margin-right: 10px;}
.footer.cont-container .footer-info-second .etc span {vertical-align: bottom; font-size: 16px; font-weight: 300;}

@media (max-width: 1023.98px) {
    .footer-section {height: 286px; position: relative;}
    .footer-section::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.4);}
    .footer.cont-container {gap: 25px; top: 50%; transform: translateY(calc(-50% + .1px)); grid-template-columns: 1fr;}
    .footer.cont-container .footer-info-first {width: 100%; max-width: 150px;}
    .footer.cont-container .footer-info-second {font-size: 10px;}
    .footer.cont-container .footer-info-second strong {margin-bottom: 3px;}
    .footer.cont-container .footer-info-second p {margin-top: 7px;}
    .footer.cont-container .footer-info-second .etc img {width: 70px;}
    .footer.cont-container .footer-info-second .etc img.img01,
    .footer.cont-container .footer-info-second .etc img.img02,
    .footer.cont-container .footer-info-second .etc img.img03 {margin-right: 10px;}
    .footer.cont-container .footer-info-second .etc span {font-size: 10px;}
}
/*=========================================================== Overlay GNB Style ===========================================================*/
/* modal-GNB-totla-stage */
.section-split-stage {width:100vw; height: 100vh; position:fixed; top:0px; left:0px; z-index:102; display:none;}
/* modal-GNB-logo */
    .section-split-cont-logo {margin-top:-25px; margin-bottom: 100px;}  .section-split-cont-logo img {width:70px;}
/* modal-GNB-show-animation-each-section */
    .split-box {position:relative; padding:0px; overflow: hidden; height: 100vh;}
    .split-item {height:100vh; position:absolute; display: none; background: #fff;}
/* modal-GNB-text */
    .section-split-cont-stage { position: relative; top:0px; left:50%; transform: translateX(-50%); height:100%; background: #fff; }
    .section-split-cont-box {width:100%; height:100%; overflow-y: auto; position: fixed; transition: all 0.2s; background: url(/web22nd/page/img/bg-gnb.jpg) no-repeat center; background-size: cover;}
    .section-split-cont-box.open {opacity: 1;}
    .section-split-cont {display: flex; overflow: auto; overflow-x: hidden; width: 74%; position:absolute; top:20%; left:50%; transform: translate(-50%, 0%);}
    
    .section-split-cont-nav-box {width:100%; position: relative; overflow: hidden; text-align: left; height: auto; display: flex; flex-direction: column; gap: 30px; justify-content: space-between; line-height: 1; text-align: center;}
    .section-split-cont-nav-box span {overflow: hidden;}
    .section-split-cont-nav-box span a {position: relative; width: 100%; overflow: hidden; height:auto; font-weight: bold; color: #fff; font-size: 18px; font-weight: 800;}

    .section-split-cont-nav-box span ul.submenu {display: grid; gap: 15px; padding: 0 5px; max-height: 0; transition-duration: 340ms;}
    .section-split-cont-nav-box span ul.submenu.active {max-height: 300px; margin-top: 24px; margin-bottom: 15px;}
    .section-split-cont-nav-box span ul.submenu a {font-size: 13px; font-weight: 300; transition: all .3s;}


    /* modal-GNB-text width 반응형 setting */
    @media (max-width: 1719.98px) {}
    @media (max-width: 1649.98px) {}
    @media (max-width: 1499.98px) {}
    @media (max-width: 1249.98px) {}
    @media (max-width: 1023.98px) {

    }
    @media (max-width: 991.98px) {}
    @media (max-width: 767.98px) {}
    @media (max-width: 575.98px) {}
    /* modal-GNB-text height 반응형 setting */
        /* @media (max-height: 450px) {.section-split-cont-nav-box {top:20%; transform: translateY(0%);}}
        @media (min-height: 451px) {.section-split-cont-nav-box {top:50%; transform: translateY(-50%);}} */

/* 마우스 트랙킹 요소 스타일 */
/* 마우스 트랙킹 div 설정 */
/* .mouse-circle { position:fixed; top:-100px; left:-100px; width:90px; height:90px; border-radius: 50%; background-color: #111; opacity: 0.5; transform:translate(-50%,-50%) scale(0.25); z-index: 2000; pointer-events: none; will-change: top left transform; transition: scale 2s; border:5px solid #fff;} */

/* 마우스 트랙킹 hover 설정 */
/* .mouse-circle-hover {transform: translate(-50%,-50%) scale(0.5); transition:transform 0.5s;}
.mouse-circle-leave {transform: translate(-50%,-50%) scale(0.25); transition:transform 0.5s;}
.mouse-circle-click {transform: translate(-50%,-50%) scale(0.6); transition:transform 0.3s;} */
/* button {cursor: none !important;} */
/* 마우스 트랙킹 div 반응형 show, hide setting */
/* @media (max-width: 575px) {.mouse-circle {display:none;} * {cursor:auto;}}
@media (min-width: 576px) {.mouse-circle {display:none;} * {cursor:auto;}}
@media (min-width: 768px) {.mouse-circle {display:block;} * {cursor:none;}} */

/* 스크롤바 스타일 설정 */
/* scroll bar setting */
body::-webkit-scrollbar{/* 스크롤바 막대 너비 설정 */width: 6px;} 
/* 스크롤바 막대 설정*/ 
body::-webkit-scrollbar-thumb{background-color: #111;
/* 스크롤바 막대 높이 설정 */
/* height: 1%;  */    
/* 스크롤바 둥글게 설정 */ 
/* border-radius: 10px; */} 
/* 스크롤바 뒷 배경 설정*/ 
body::-webkit-scrollbar-track{background-color: #ffffff;}
body.open::-webkit-scrollbar-thumb {background-color: #111;}
body.open::-webkit-scrollbar-track{background-color: #111;}
/* modal gnb scroll bar hide */
.section-split-cont::-webkit-scrollbar {display: none;}
.section-split-cont { -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */}