/*=========================================================== GNB Style ===========================================================*/
.gnb.container {position: fixed; z-index: 101; top: 0; left: 50%; transform: translateX(-50%); max-width: 100%;}
.header {display: flex; justify-content: space-between; margin: 0 auto; position: relative; width: 100%; height: 140px; align-items: center; max-width: var(--max-width);}
.header .logo-box {width: 180px; transition: all .3s;}
.header .logo-box a {display: grid; align-items: center;}
.header .logo-box a img {width: 100%;}
.header .logo-box.white img {filter: brightness(0) invert(1); transition: all .3s;}
.header .menu-box {position: relative; right: 80px; transition: all .3s;}
.header .menu-box.hidden {display: none;}
.header .menu {display:flex; gap: var(--gap); padding: 0; margin: 0; transition: all .3s;}
.header .menu li {position: relative; line-height: var(--line-height-tiny); margin: 0; padding: 0; font-size: unset;}
.header .menu li a {font-size: 18px; line-height: var(--line-height-tiny); position: relative; transition: color .3s; display: block;}
.header .menu li a:hover {color: var(--point-color);}

@media (max-width: 1023.98px) {
    .gnb.container {z-index: 1000;}

    .header {height: 100px;}
    .header .logo-box {width: 150px;}
    .header .menu-box {display:none;}
}
/*=========================================================== Menu Trigger Style ===========================================================*/
.menu-trigger,.menu-trigger span {display: inline-block; transition: transform .3s; box-sizing: border-box;}
.menu-trigger {position: fixed; width: 30px; height: 30px; z-index: 1010; right: var(--menu-trigger-right); top: 54px; cursor: pointer;}
.menu-trigger > .trigger-inner {width: 30px; height: 30px; position: relative; display: grid; align-items: center; justify-content: center;}
.menu-trigger > .trigger-inner > .trigger-item {width: 20px; height: 17px; position: relative;}
.menu-trigger span {position: absolute; left: 0; width: 100%; height: 3px; background-color: #000;}
.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;}

@media (max-width: 1779.98px) {.menu-trigger {right: 20px;}}
@media (max-width: 1023.98px) {.menu-trigger {top: 35px;} .menu-trigger > .trigger-inner {transform: none !important;}}

/* 메뉴 버튼 애니메이션 */
.menu-trigger.active-1 span:nth-of-type(1) {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) {transform: translateY(-7px) rotate(-45deg);}
/*=========================================================== Overlay GNB Style ===========================================================*/
.section-split-stage {width:100vw; height: 100vh; position:fixed; top:0px; left:0px; z-index: 999; visibility: hidden; opacity: 0; background: #fff;}

.section-split-cont {display: grid; grid-template-columns: repeat(2, 1fr); justify-content: space-between; gap: 80px; width: max-content; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}

.section-split-cont-nav-box {width:100%; position: relative; overflow: hidden; text-align: left; height: auto; display: flex; flex-direction: column; gap: 40px; line-height: var(--line-height-tiny);}
.section-split-cont-nav-box span {overflow: hidden;}
.section-split-cont-nav-box a {position: relative; font-size: 120px; font-weight: 900; transition: all .3s; display: inline-block;}
.section-split-cont-nav-box a::after {content: attr(data-name); position: absolute; left: 0; transform: translateY(100%);}
.section-split-cont-nav-box a:hover {transform: translateY(-100%);}

.section-split-cont-nav-box.desc {gap: var(--gap); margin-top: 20px;}
.section-split-cont-nav-box.desc .thumb {width: 280px;}
.section-split-cont-nav-box.desc p {font-size: 30px; line-height: var(--line-height);}
.section-split-cont-nav-box.desc .sns {display: grid; gap: 30px;}
.section-split-cont-nav-box.desc .sns a {font-size: 30px; line-height: var(--line-height-tiny); width: fit-content;}

@media (max-width: 1519.98px) {
    .section-split-cont-nav-box a {font-size: 100px;}
}
@media (max-width: 1319.98px) {
    .section-split-cont-nav-box a {font-size: 90px;}
}
@media (max-width: 1023.98px) {
    .section-split-cont {grid-template-columns: 1fr; width: max-content; transform: none; top: 140px; left: 20px;}
    .section-split-cont-nav-box {gap: 30px;}
    .section-split-cont-nav-box a {font-size: 30px;}
    .section-split-cont-nav-box a:hover {transform: translateY(0);}
    .section-split-cont-nav-box.desc {display: none;}
}
/*=========================================================== Footer Style ===========================================================*/
#footer {padding: 100px 0; background: #f8f8f8;}
.footer.cont-container {display: grid; align-items: center; gap: var(--gap); position: relative; padding: 0;}
.footer.cont-container .footer-logo {width: 150px;}
.footer.cont-container .footer-sns {line-height: var(--line-height-tiny); position: absolute; top: 0; right: 0; display: grid; grid-auto-flow: column; gap: 50px; width: fit-content;}
.footer.cont-container .footer-sns span a {font-size: 18px; display: block; transition: color .3s;}
.footer.cont-container .footer-sns span a:hover {color: var(--point-color);}
.footer.cont-container .footer-info {line-height: var(--line-height-tiny); display: grid; grid-template-columns: 1fr; gap: 20px;}
.footer.cont-container .footer-info li p {font-weight: 900; line-height: var(--line-height);}
.footer.cont-container .footer-info li p strong {font-size: 20px; font-weight: 900; display: block;}

@media (max-width: 1779.98px) {
    #footer {padding: 100px 20px;}
}
@media (max-width: 1023.98px) {
    #footer {padding: 50px 20px;}
    .footer.cont-container {gap: var(--gap-m);}
    .footer.cont-container .footer-logo {width: 130px;}
    .footer.cont-container .footer-sns {gap: 15px; grid-auto-flow: row; position: relative; padding: 10px 0 5px;}
    .footer.cont-container .footer-info li p {font-size: 12px;}
    .footer.cont-container .footer-info li p strong {font-size: 18px;}
}