@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css');
* {
    box-sizing: border-box;
}
.pre {
    font-family: 'Pretendard', sans-serif;
}

a {
    color: #333;
    text-decoration: none;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0px;
}
li {
    list-style: none;
}
img {
    vertical-align: middle;
    max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
strong {
    margin: 0;
}
small {
    font-style: normal;
}
.center {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}




/* header */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 9.5rem;
  z-index: 104;
  background-color: #fff;
}

#header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

#header .inner .logo a {
  position: relative;
  display: block;
  width: 24rem;
  aspect-ratio: 20 / 5.6;
}

#header .inner .logo a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: auto;
  transition: 0.5s;
}

#header .inner .logo a img.off {
  opacity: 0;
}

#header .inner .gnb-wrap {
  height: 100%;
}

#header .inner .gnb-wrap ul {
  display: flex;
  align-items: center;
  gap: 4.2rem;
  height: 100%;
}

#header .inner .gnb-wrap ul li {
  
  height: 100%;
}

#header .inner .gnb-wrap ul li a {
  position: relative;
  font-size: 2rem;
  font-weight: 500;
  color: #000;
  display: flex;
  align-items: center;
  height: 100%;
}

#header .inner .gnb-wrap ul li a > span {
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 3px;
  background-color: #15264B;
  transition: 0.5s;
  z-index: 12;
}

#header .inner .gnb-wrap ul li:hover > a {
  font-weight: 700;
  color: #15264B;
}

#header .inner .gnb-wrap ul li:hover > a span {
  width: 100%;
}

#header .inner .mo-menu-btn {
  display: none;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hamRotate.active {
  transform: rotate(45deg);
}
.hamRotate180.active {
  transform: rotate(180deg);
}
.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:#000;
  stroke-width:3;
  stroke-linecap:round;
}
.ham4 .top {
  stroke-dasharray: 40 121;
}
.ham4 .bottom {
  stroke-dasharray: 40 121;
}
.ham4.active .top {
  stroke-dashoffset: -68px;
}
.ham4.active .bottom {
  stroke-dashoffset: -68px;
}

#header:hover,
#header.active {
  background-color: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  box-shadow: 0.5rem 0.5rem 0.5rem rgba(0,0,0,0.15);
}

#header:hover .inner .logo a img.on,
#header.active .inner .logo a img.on {
  opacity: 1;
}

#header:hover .inner .gnb-wrap ul li a,
#header.active .inner .gnb-wrap ul li a {
  color: #000;
}

@media all and (max-width:960px) {
  #header .inner .mo-menu-btn {
    display: block;
  }

  #header .inner .gnb-wrap {
    display: none;
  }
}





.full_nav{position:fixed;width:100%;height:100vh;top:0;right:-100%;background:rgba(255,255,255,0.8);min-height:700px;overflow:auto;backdrop-filter: blur(5px);z-index: 103;transition: 0.5s;}
.full_nav.open {right: 0;}
.full_nav ul.nav_list{padding-left:20px;margin-top:18rem}
.full_nav ul.nav_list li{margin-top:4rem}
.full_nav ul.nav_list li:first-child{margin-top:0}
.full_nav ul.nav_list li a{display:inline-block;position:relative;}
.full_nav ul.nav_list li a p{font-size:3rem;position:relative;z-index:1;font-weight:800;}
.full_nav ul.nav_list li.on a span{position:absolute;bottom:2px;left:50%;width:110%;height:10px;background:#a8d8ea;-ms-transform:translate(-50%, 0);-webkit-transform:translate(-50%, 0);-moz-transform:translate(-50%, 0);-o-transform:translate(-50%, 0);transform:translate(-50%, 0);}
.full_nav ul.sns_list{display: flex;align-items: center;padding-left: 20px;margin-top: 10rem;gap: 4rem;}

.full_nav ul.sns_list li a img {
  width: 3.2rem;
  height: auto;
  filter: brightness(0);
}

.full_nav ul.sns_list li:last-child a img {
  width: 2.8rem;
}