* {-webkit-tap-highlight-color: transparent;}

/* 해더 */
#header {position: absolute; left: 0; top: 0; width: 100%; z-index: 99;border-bottom: 1px solid rgba(255,255,255,0.3);}
#header .wrap {max-width: 1725px; width: 90%; margin: auto; display: flex; align-items: center; justify-content: space-between;}
#header .logo img {width: 10rem;}
#header .gnb > ul {display: flex; gap: 5rem;}
#header .gnb .depth01 {position: relative; padding: 2rem 0;}
#header .gnb .depth01:hover .lnb {opacity: 1; visibility: visible;}
#header .gnb .lnb {position: absolute; left: 50%; top: 5.7rem; transform: translateX(-50%); width: 10rem; background: rgba(255,255,255,0.8); text-align: center; padding: 1rem; border-radius: 8px; opacity: 0; visibility: hidden;} 
#header .gnb .lnb li {padding: .5rem 0;}
#header .gnb .lnb li a:hover {color: var(--subcolor); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px;}
#header .gnb a,
#header .gnb p {color: #fff; display: inline-block; cursor: pointer;}
#header .gnb p span {padding-left: .25rem; font-family: "SUIT Variable" !important;}
#header .gnb .lnb a {color: #000;}

#header .hamburger {width: 3.5rem; height: 2.8125rem; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; display: none;}
#header .hamburger span {display: block; position: absolute; height: 3px; width: 100%; background: #fff; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
#header .hamburger span:nth-child(1) {top: 0px;}
#header .hamburger span:nth-child(2),
#header .hamburger span:nth-child(3) {top: 1rem;}
#header .hamburger span:nth-child(4) {top: 2rem;}

#header .hamburger.open span:nth-child(1) {top: 1rem; width: 0%; left: 50%;}
#header .hamburger.open span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
#header .hamburger.open span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
#header .hamburger.open span:nth-child(4) {top: 1rem; width: 0%; left: 50%;}

@media(max-width:990px) {
    #header {border: none; padding: 0;}
    #header.on {position: fixed;}
    #header .wrap {width: 100%; border-bottom: 1px solid rgba(255,255,255,0.3); padding: 1.5rem 5%;}
    #header.on .wrap {border-color: rgba(0, 120, 255, 0.5);}
    #header .logo img {width: 12rem;}
    #header .gnb {position: absolute; left: 0; top: 0; width: 100%; height: 100lvh;  z-index: -1; background: #000; display: flex; opacity: 0; visibility: hidden; transition: opacity 0.5s; text-align: left;}
    #header.on .gnb {opacity: 1; visibility: visible;}
    #header .gnb:after {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #000 20%, rgba(0, 120, 255, 0.5) 100%); content: "";}
    #header .gnb > ul {position: relative; z-index: 1; flex-direction: column; width: 100%; font-size: 2.75rem; gap: 3.125rem; width: 85%; margin: 11rem auto 0;}
    #header .gnb .depth01 {padding: 0;}
    #header .gnb .depth01 p span{transform: rotate(0); display: inline-block;}
    #header .gnb .depth01.active p span {transform: rotate(180deg);}
    #header .gnb .lnb {position: initial; opacity: 1; visibility: visible; transform: none; width: 80%; margin: 1.125rem auto 0; text-align: left; background: transparent; font-size: 2.25rem; display: none;}
    #header .gnb .lnb li {padding: 1rem 0;}
    #header .gnb .lnb a {color: #fff;}
    #header .hamburger {display: block;}
}

/* 푸터 */
footer {background: #062140; padding: 60px 0; color: #fff;}
footer a {color: #fff;}
footer .wrap {max-width: 1740px; width: 90%; margin: auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 5%;}
footer .logo {width: 10rem;}
footer .infor {width: 80%;}
footer .corp {display: flex; align-items: center; gap: 1rem;}
footer .cs span {padding: 0 .5rem; display: inline-block;}
footer .cs br.mo {display: none;}
footer .copy {opacity: .5;}
footer .fq img {width: 3.125rem;}

@media(max-width:990px) {
    footer .wrap {flex-wrap: wrap;}
    footer .infor {width: 100%; order: 3; margin-top: 2.5rem;}
    footer .logo {width: 12rem;}
}

@media(max-width:768px) {
    footer .font-18 {font-size: 1.5rem;}
    footer .corp {gap: 1.5rem;}
    footer .cs span {padding: 0 .75rem;}
    footer .fq img {width: 4.5rem;}
}

@media(max-width:500px) {
    footer .font-18 {font-size: 1.375rem;}
    footer .fq img {width: 3.5rem;}
}

@media(max-width:350px) {
    footer .cs span {display: none;}
    footer .cs br.mo {display: block;}
}

/* 퀵메뉴 */
#quick {position: fixed; right: 2.5%; bottom: 2.5%; z-index: 5; text-align: center; color: #fff;}
#quick .box {width: 6.875rem; aspect-ratio: 1 / 1; border-radius: .75rem; display: flex; align-items: center; justify-content: center; flex-direction: column; letter-spacing: 0; cursor: pointer; position: relative; z-index: 1;}
#quick .box span {font-size: 1.75rem; font-weight: 100; line-height: 1; font-family: "SUIT Variable" !important;}

#quick .quickList {padding: .625rem 0 1.625rem; background: rgba(0,80,170,.5); border-radius: .75rem .75rem 0 0; transform: translateY(1rem); display: none;}
#quick .quickList a {color: #fff; display: block; width: 6.875rem; padding: .625rem 0;}
#quick .quickList a img {width: 2rem;}
#quick .quickList a p {margin-top: .25rem;}

#quick .quickBtn {background: var(--subcolor); }
#quick .quickBtn span {transition: .3s; position: relative; display: block;}
#quick .quickBtn.active span {transform: rotate(45deg);}
#quick .goTop {margin-top: 1rem; border: 1px solid var(--subcolor); background: #fff; color: var(--subcolor); box-shadow: 0px 0px 20px rgba(0,0,0,0.15);}

#quick .goTop.main {border: 1px solid #fff; backdrop-filter: blur(10px); background: rgba(255,255,255,0.1); color: #fff;}

#quick .Tel > .telPop {position: absolute; left: -9rem; top: 50%; transform: translateY(-50%); width: 10rem; height: auto; background: rgba(0,80,170,.5); border-radius: .75rem; padding: 1rem; opacity: 0; visibility: hidden; transition: .5s;}
#quick .Tel:hover > .telPop {left: -11rem; opacity: 1; visibility: visible; z-index: -1;}

@media(max-width:768px) {
    #quick {font-size: 1.5rem; right: 5%;}
    #quick .box,
    #quick .quickList a {width: 7.5rem;}
    #quick .box span {font-size: 2.25rem; font-weight: 400;}
}