*{-webkit-tap-highlight-color: rgba(0,0,0,0);}

/* 해더 */
#header {position: fixed; left: 0; top: 0; width: 100%; height: 6.25rem; z-index: 20; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 5px 5px 20px rgba(0,0,0,0.05);}
#header .wrap {width: 90%; margin: auto; display: flex; justify-content: space-between; align-items: center;}
#header .logo {width: 15%;}

#header .gnb-wrap {display: flex; width: 80%; align-items: center; justify-content: space-between;}
#header .gnb {display: flex; justify-content: space-between; align-items: center; 
width: 90%; position: relative;}
#header .gnb li.depth {position: relative; width: calc(100% / 6); height: 100%; display: flex; align-items: center; justify-content: center;}
#header .gnb li.depth span {width: fit-content; margin: auto; position: relative; cursor: pointer;}
#header .gnb li.depth span:before {position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 0; height: 2px; background: #066cd7; content: ""; transition: 0.3s;}
#header .gnb li.depth span.on,
#header .gnb li.depth > span:hover {color: #066cd7; font-weight: 700;}
#header .gnb li.depth > span:hover:before,
#header .gnb li.depth span.on:before {width: 100%;}

#header .lnb {position: absolute; left: 50%; transform: translateX(-50%); top: 7rem; width: 100%; display: none;}
#header .lnb li {padding: 0.625rem;}
#header .lnb li span:hover {color: #066cd7; font-weight: 700;}
#header .lnb li a {width: fit-content; display: block; margin: auto;}

#header .loginbox {width: 5%; display: flex; gap: 1rem;}

/* 배경 */
.bg-overlay {position: fixed; left: 0; top: 6.25rem; width: 100%; height: 24rem; z-index: 19;  backdrop-filter: blur(20px); display: none; background-color: rgba(255,255,255,0.8);}

/* 햄버거메뉴 */
#header .hamburger {z-index: 21; cursor: pointer;}
#header .hamburger .line {width: 2.5rem; height: 3px; background-color:#111111; display: block; margin: 5px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;  cursor: pointer; border-radius: 15px;}
#header .hamburger.is-active{animation: smallbig 0.6s forwards;}

@keyframes smallbig{
  0%, 100%{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50%{
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
}      

#header .hamburger.is-active .line:nth-child(2) {opacity: 0;}   
#header .hamburger.is-active .line:nth-child(1){ -webkit-transform: translateY(8px) rotate(45deg); -ms-transform: translateY(8px) rotate(45deg); -o-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg);}
#header .hamburger.is-active .line:nth-child(3){-webkit-transform: translateY(-8px) rotate(-45deg); -ms-transform: translateY(-8px) rotate(-45deg); -o-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg); }

@media(max-width:1240px) {
  #header .loginbox {width: 7%;}
}

@media(max-width:990px) {
  #header .wrap {width: 85%;}

  #header .logo {width: fit-content;}
  #header .logo img {width: 60%;}

  #header .gnb-wrap {position: absolute; left: 100%; top: 6.25rem; display: block; height: calc(100svh - 6.25rem); width: 100%; transition: 0.4s; overflow-y: scroll; padding: 2.5rem 0;}
  #header .gnb-wrap.active {left: 0;}
  #header .gnb {width: 90%; margin: auto; display: block; height: auto;}
  #header .gnb li.depth {width: 100%; display: block; height: auto; text-align: left; padding: 2.5rem 0; border-bottom: 1px solid rgba(8,162,234,0.3);}
  #header .gnb li.depth > span {font-size: 2.5rem; display: block; width: 100%; position: relative;}
  #header .gnb li.depth > span.active {color: #066cd7; font-weight: 700; text-decoration: underline; text-underline-offset : 4px; margin-bottom: 1rem; }
  #header .gnb li.depth > span:after {position: absolute; right: 0; top: 50%; transform: translateY(-50%) scale(0.8); content: url("/img/main/arrow.png"); transition: transform 0.3s ease;}
  #header .gnb li.depth > span.active:after {transform: translateY(-50%) scale(0.8) rotate(180deg);}
  #header .gnb li.depth span:before {display: none;}

  #header .lnb {position: initial; transform: none; font-size: 2.25rem; width: 85%; margin: auto;}
  #header .lnb li span:hover {color: #066cd7;}
  #header .lnb li a {width: 100%;}

  #header .loginbox {width: 90%; margin: auto; display: flex; margin-top: 2.5rem; gap: 2rem;}

  .bg-overlay {display: block; height: 100vh !important; background: #fff; left: 100%; transition: 0.4s;}
  .bg-overlay.active {left: 0;}

  #header ::-webkit-scrollbar {display: none;}

}

/* 푸터 */
footer {background-image: url("/img/main/footer_bg.jpg"); background-position: right bottom; background-repeat: no-repeat; background-color: #272c3e; padding: 80px 0;}
footer .top {display: flex; align-items: center; justify-content: space-between;}
footer .top > div {display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;}
footer a {color: #bebebe;}
footer img {width: 16rem; display: block;}
footer .line {width: 100%; height: 1px; background: #ffffff; opacity: 0.3;}
footer .bottom h4 {color: #ffffff; line-height: 1.5;}
footer .bottom h4 span {color: #a2a2a2; padding: 0 0.625rem;}
footer .bottom p {color: #a2a2a2;}

footer .visible-mo {display: none;}
footer .hidden-mo {display: inline;}

@media(max-width:1550px) {
  footer .container {width: 85%;}
}

@media(max-width:768px) {
  footer  {background-size: 200%; padding: 60px 0; background-position: 95% bottom;}
  footer img {width: 20rem;}
  footer .top {flex-direction: column; align-items: flex-start; gap: 1.5rem;}
}

@media(max-width:360px) {
  footer .visible-mo {display: block;}
  footer .hidden-mo {display: none;}
}

/* 퀵메뉴 */
#quick {position: fixed; right: 2.5%; bottom: 5%; z-index: 15;}
#quick .wrap  {background: #fff; border-radius: 8px; border: 1px solid var(--pointcolor);  width: 5rem; text-align: center; box-shadow: 5px 5px 20px rgba(0,0,0,0.1);}
#quick a {padding: 15px 0; display: block; margin:0 5px; border-bottom: 1px solid #d6d6d6;}
#quick p {font-size: 0.875rem; font-weight: 500; margin-top: 5px;}

#quick .top {margin-top: 1.5rem; width: 5rem; height: 5rem; background: var(--pointcolor); border-radius: 50%; cursor: pointer; position: relative; box-shadow: 5px 5px 20px rgba(0,0,0,0.1);}
#quick .top:after {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: url("/img/main/top.png"); width: fit-content; z-index: 1;}

@media(max-width:1024px) {
  #quick {right: 5%;}
  #quick .wrap {width: 7rem;}
  #quick p {font-size: 1.125rem;}
  #quick .top {width: 7rem; height: 7rem;}
  #quick img {width: 22px;}
}