:root{
    --dft-margin:max(calc((100% - 1820px)/2),2.5%);
}
@media screen and (max-width:700px) {
    :root{
        --dft-margin:5%;
    }
}



/* 헤더 */
.header-wrap h1,
.header-wrap .rgt{
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  height: 70px;
  z-index: 100;
}
.header-wrap h1{
  left: var(--dft-margin);
}
.header-wrap h1 a{
    display: block;
    height: 55%;
}
.header-wrap h1 img{
  display: block;
  width: auto;
  height: 100%;
}
.header-wrap .rgt{
  right: var(--dft-margin);
}
.header-wrap .rgt .tel{
  color: #ababab;
  font-size: 22px;
  letter-spacing: -0.025em;
}

/* 푸터 */
.footer-sns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
}
.footer-sns li:not(:nth-of-type(1)) {
    margin-left: 13px;
}
.footer-sns li a {
    display: block;
    width: 25px;
}
.footer-sns li a img {
    display: block;
    width: 100%;
    height: auto;
}

/* 마우스커서 */
#cursor {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  pointer-events: none;
  will-transfrm: transform;
}
.cursor__inner {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: #a5a5a5;
  border: 1px solid #a5a5a5;
  transition: all .6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hide .cursor__inner {
  opacity: 0;
  width: 2.5vw;
  height: 2.5vw;
}
#cursor.overlay {
  z-index: 1001;
}
.overlay .cursor__inner {
  width: 3rem;
  height: 3rem;
  background-color: transparent;
}


/* 메뉴 */
.gnb ul > li{
  position: relative;
  margin-bottom: 15px;
}
.gnb ul li .snb{
  display: none;
}

.gnb ul li a{
  display: inline-block;
  position: relative;
  font-size: 18px;
}
.gnb ul li a::before{
  display: block;
  position: absolute;
  left: 0;bottom: -2px;
  width: 0%;
  height: 1px;
  background-color: #000;
  transition: width 0.4s;
  content: '';
}
.gnb ul li.act a::before{width: 100%;}




@media screen and (min-width:850.1px) {
  .gnb ul li a:hover::before{
    width: 100%;
  }
}


@media screen and (max-width:850px) {
  .gnb ul li a{font-size: 16px;}
}


@media screen and (max-width:700px) {
  .header-wrap h1,
  .header-wrap .rgt{
    height: 60px;
  }

  .header-wrap .rgt .tel{font-size: 20px;}
  
}