/* 드래그 */
img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-user-drag: none;
  user-drag: none;
}
/* 폰트 */
body{
  font-family: Pretendard;
}
/* 링크 */
a,
a:visited {
  color: inherit;  
}
/* 스크롤바 초기화 */
*::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* gnb */
.gnb{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 3.33vw;
  background: transparent;
  z-index: 100001;
  box-sizing: border-box;
  transition: background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
  font-size: 0.83vw;
}

.gnb__inner{
  position: relative;
  height: 100%;
  margin: 0 auto;
  padding: 0 0 0 1.25vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gnb__logo a{
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.gnb__logoMark{
  width: 7.08vw;
  height: 1.04vw;
  display: block;
  background-color: #ffffff;

  -webkit-mask: url('/img/logo.svg') no-repeat center;
  mask: url('/img/logo.svg') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;

  transition: background-color 0.25s ease-in-out;
}

.gnb__center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 1.25vw;
  align-items: center;
  font-weight: 700;
  text-transform: uppercase;
}

.gnb__item{
  color: #FFF !important;
  text-decoration: none;
  display: inline-block;
  transition: color 0.25s ease-in-out, opacity 0.2s ease-in-out;
}
.gnb__item:hover{
  color: #E06E64 !important;
}

.gnb__right{
  display: flex;
  align-items: center;
}

.gnb__lang{
  color: #fff;
  background: transparent;
  border: none;
  font-weight: 700;
  font-size: 0.83vw;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color 0.25s ease-in-out;
  padding: 1.25vw;
}

.gnb__lang_dropdown{
  width: 0.83vw;
  height: 0.83vw;
  margin-left: 0.2vw;
  background-color: white;
  -webkit-mask: url('/img/icn_arrow.svg') no-repeat center;
  mask: url('/img/icn_arrow.svg') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.25s ease-in-out;
  display: inline-block;
}

.gnb__recruit{
  display: inline-flex;
  align-items: center;
  gap: 0.2vw;
  height: 3.33vw;
  padding: 0 1.25vw;
  background: #000000;
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
}

.gnb__recruit_ic{
  width: 0.83vw;
  height: 0.83vw;
  background-color: white;
  -webkit-mask: url('/img/icn_arrow_go.svg') no-repeat center;
  mask: url('/img/icn_arrow_go.svg') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.25s ease-in-out;
  display: inline-block;
}

.gnb__recruit:hover{
  color: black !important;
}

.gnb__recruit:hover .gnb__recruit_ic{
  background-color: #000000;
}

.gnb.gnb--scrolled{
  background-color: #ffffff;
}

.gnb.gnb--scrolled .gnb__logoMark{
  background-color: #000000;
}

.gnb.gnb--scrolled .gnb__item{
  color: #000000 !important;
}
.gnb.gnb--scrolled .gnb__item:hover,
.gnb.gnb--scrolled .gnb__item.active{
  color: #E06E64 !important;
}

.gnb.gnb--scrolled .gnb__lang{
  color: #000000 !important;
}
.gnb.gnb--scrolled .gnb__lang_dropdown{
  background-color: #000000;
}



.gnb__inner--desktop{ display: flex; }
.gnb__inner--mobile{ display: none; }
.mnav{ display: none; }


@media (max-width: 1201px){
  .gnb{
    height: 8.59vw;                
    font-size: 2.14vw;             
  }
  .nav-open .gnb{
    background: white;
  }
  .nav-open .gnb .gnb__logoMark{
    background: black;
  }

  .gnb__inner{
    padding: 0 2.14vw;
  }

  .gnb__inner--desktop{ display: none; }

  .gnb__inner--mobile{
      display: flex;
      height: 8.59vw;  
      align-items: center;
      justify-content: space-between;
  }

  .gnb__logoMark{
      width: 18.25vw;
      height: 3.35vw;
  }

  .gnb__toggle{
    width: 2.14vw;
    height: 2.14vw;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .gnb__burger{
    position: relative;
    width: 2.14vw;
    height: 2.14vw;
    display: block;
  }

  .gnb__burger::before,
  .gnb__burger::after{
    content:"";
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.268vw;
    background: #000;
    transition: transform 0.25s ease, top 0.25s ease, bottom 0.25s ease;
  }

  .gnb__burger::before{ top: 0; }
  .gnb__burger::after{ bottom: 0; }

  .gnb__burger{
    background: linear-gradient(#000 0 0) center / 100% 0.268vw no-repeat;
    transition: background-size 0.25s ease-in-out;
  }

  body.nav-open .gnb__burger{
    background-size: 0% 0.268vw; 
  }
  body.nav-open .gnb__burger::before{
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  body.nav-open .gnb__burger::after{
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
  }
}

@media (max-width: 744px){
  .gnb{
      height: 17.06vw;                       
      font-size: 4.26vw;             
  }

  .gnb__inner{
      padding: 0 4.26vw;
  }

  .gnb__inner--mobile{
      height: 17.06vw;   
  }

  .gnb__logoMark{
      width: 36.26vw;
      height: 5.33vw;
  }

  .gnb__toggle{
    width: 4.26vw;
    height: 4.26vw;
  }
  
  .gnb__burger{
    width: 4.26vw;
    height: 4.26vw;
  }
  
  .gnb__burger::before,
  .gnb__burger::after{
    height: 0.533vw;
  }
  
  .gnb__burger{
    background: linear-gradient(#000 0 0) center / 100% 0.533vw no-repeat;
  }
  
  body.nav-open .gnb__burger{
    background-size: 0% 0.533vw; 
  }

}



@media (max-width: 1201px){
  .mnav{
    position: fixed;
    left: 0;
    right: 0;
    top: 8.59vw;
    background: #fff;
    border-top: 1px solid #e9e9e9;

    display: flex;
    flex-direction: column;
    align-items: center;

    opacity: 0;
    /* transform: translateY(-0.8vw); */
    pointer-events: none;
    visibility: hidden;

    transition:
      opacity 0.25s ease-in-out,
      transform 0.25s ease-in-out,
      visibility 0s linear 0.25s;
  }

  body.nav-open .mnav{
    opacity: 1;
    /* transform: translateY(0); */
    pointer-events: auto;
    visibility: visible;

    transition:
      opacity 0.25s ease-in-out,
      transform 0.25s ease-in-out,
      visibility 0s;
  }

  .mnav-dim{
    position: fixed;
    left: 0;
    top: 8.59vw;      
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.45);

    opacity: 0;
    pointer-events: none;
    visibility: hidden;

    transition:
      opacity 0.25s ease-in-out,
      visibility 0s linear 0.25s;

    z-index: 99999;  
  }

  body.nav-open .mnav-dim{
    opacity: 1;
    pointer-events: auto;
    visibility: visible;

    transition:
      opacity 0.25s ease-in-out,
      visibility 0s;
  }

  .mnav{
    z-index: 100000;
  }
  body.nav-open .mnav{
    z-index: 100000;
  }

  .mnav__menu{
    display: flex;
    justify-content: center;
    gap: 3.22vw;
    padding: 4.28vw;
  }

  .mnav__item{
    color: #000;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    transition: color 0.2s ease-in-out;
  }
  .mnav__item:hover{ color: #E06E64; }
  .mnav__item.is-active{ color: #E06E64; }

  .mnav__line{
    width: calc(100% - 4.29vw);
    height: 1px;
    background: #e9e9e9;
  }

  .mnav__bottom{
    display: flex;
    padding: 2.14vw;
    width: 100%;
  }

  .mnav__lang,
  .mnav__recruit{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
    border: 0;
    background: transparent;
    cursor: pointer;
    gap: 0.536vw;
    width: 47.51vw;
    padding: 3.22vw;
    font-size: 2.14vw;
  }

  .mnav__recruit{
    background: #000;
    color: #fff !important;
    text-decoration: none;
  }

  .mnav__arrow,
  .mnav__go{
    width: 2.14vw;
    height: 2.14vw;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
  .mnav__arrow{
    -webkit-mask-image: url('/img/icn_arrow.svg');
    mask-image: url('/img/icn_arrow.svg');
  }
  .mnav__go{
    -webkit-mask-image: url('/img/icn_arrow_go.svg');
    mask-image: url('/img/icn_arrow_go.svg');
  }
}


@media (max-width: 744px){

  .mnav{
    top: 17.06vw;
  }

  .mnav-dim{
    top: 17.06vw;      
  }

  .mnav__menu{
    flex-direction: column;
    align-items: center;
    gap: 6.4vw;
    padding: 4.26vw;
  }

  .mnav__line{
    width: calc(100% - 4.26vw);
  }

  .mnav__bottom{
    padding: 4.26vw;
  }

  .mnav__lang,
  .mnav__recruit{
    padding: 6.4vw;
    font-size: 4.26vw;
    gap: 1.06vw;
    width: 45.33vw;
  }

  .mnav__arrow,
  .mnav__go{
    width: 4.26vw;
    height: 4.26vw;
  }
}



/* Footer */
.footer{ 
  background: #2D2D2D; 
  color:#FFF; 
  display: flex;
  padding: 2.5vw 4.16vw;
  font-size: 0.625vw;
  position: relative;
  width: 100%;
  gap: 4.16vw;
}
.footer .footer-img{
  width: 6.25vw;
  height:0.9375vw;
}
.footer .info{
  display: flex;
  gap: 4.16vw;
}
.footer .info .en,.ko{
  display: flex;
  flex-direction: column;
  gap: 0.416vw;
}
.footer .copyright{
  position: absolute;
  right: 4.16vw;
  bottom: 2.7vw;
  opacity: 0.4;
}
.footer .instagram{
  content: ""; 
  display: inline-block;
  width: 1.25vw;
  height: 1.25vw;
  background-color: white;       
  mask: url('/img/instagram.svg') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: opacity 0.25s ease-in-out;
  opacity: 1;
  position: absolute;
  right: 4.16vw;
  top: 2.7vw;
}
.footer .instagram:hover{
  opacity: 0.6;
}

@media (max-width: 1201px) {

    .footer{ 
      padding: 5.36vw 2.14vw 19.32vw;
      font-size: 2.14vw;
      position: relative;
      flex-direction: column;
      gap:5.36vw;
    }
    .footer .footer-img{
      width: 21.47vw;
      height: 3.22vw;
    }
    .footer .info{
      flex-direction: column;
      gap: 5.36vw;
    }
    .footer .info .en,.ko{
      display: flex;
      flex-direction: column;
      gap: 1.07vw;
    }
    .footer .copyright{
      right: 2.14vw;
      bottom: 10.73vw;
    }
    .footer .instagram{
      width: 3.22vw;
      height: 3.22vw;
      right: 2.14vw;
      top: 5.36vw;
    }
    .footer .instagram:hover{
      opacity: 0.6;
    }
}


@media (max-width: 744px){
    .footer{ 
      padding: 10.66vw 4.26vw 38.4vw;
      font-size: 4.26vw;
      gap:10.66vw;
    }
    .footer .footer-img{
      width: 42.66vw;
      height: 6.4vw;
    }
    .footer .info{
      gap: 10.66vw;
      line-height: 1.4;
    }
    .footer .info .en,.ko{
      gap: 2.13vw;
    }
    .footer .copyright{
      right: 4.26vw;
      bottom: 21.33vw;
    }
    .footer .instagram{
      width: 6.4vw;
      height: 6.4vw;
      right: 4.26vw;
      top: 10.66vw
    }
    .footer .instagram:hover{
      opacity: 0.6;
    }

}

/* 
html.js-imgfade img {
  opacity: 0;
}

html.js-imgfade img.is-img-revealed {
  opacity: 1;
  transition: opacity var(--imgfade-ms, 600ms) ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  html.js-imgfade img.is-img-revealed {
    transition: none;
  }
}

html.js-imgfade img[data-no-fade],
html.js-imgfade [data-no-fade] img {
  opacity: 1 !important;
  transition: none !important;
} */

button,
button{
  color: #000; /* 원하는 색 */
}


/* ========== LANG DROPDOWN (desktop + mobile) ========== */
.lang{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* menu base */
.lang__menu{
  position: absolute;
  right: 0;
  top: 3.33vw;
  min-width: 100%;
  background: #fff;;
  overflow: hidden;

  opacity: 0;
  transform: translateY(-0.6vw);
  pointer-events: none;
  visibility: hidden;

  transition:
    opacity 0.25s ease-in-out,
    transform 0.25s ease-in-out,
    visibility 0s linear 0.25s;

  z-index: 100005;
}

/* open state */
.lang.is-open .lang__menu{
  opacity: 1;
  pointer-events: auto;
  visibility: visible;

  transform: translateY(0px);

  transition:
    opacity 0.25s ease-in-out,
    transform 0.25s ease-in-out,
    visibility 0s;
}

/* items: size matches gnb__lang */
.lang__item{
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;

  /* ✅ gnb__lang와 동일 체감 */
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.83vw;
  padding: 1.25vw;

  color: #000;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.lang__item:hover{
  color: #E06E64;
  background: rgba(0,0,0,0.03);
}

/* ✅ active language */
.lang__item.is-active{
  color: #E06E64;
}

/* scrolled 상태에서도 드롭다운은 흰 배경/검정 텍스트 기반 */
.gnb.gnb--scrolled .lang__menu{
  border-color: #e9e9e9;
}

/* ========== mobile sizing sync ========== */
@media (max-width: 1201px){
  .lang__menu{
    top: calc(100%);
    transform: translateY(-1.2vw);
    box-shadow: 0 1.2vw 3.0vw rgba(0,0,0,0.12);
  }

  .lang__item{
    font-size: 2.14vw;   /* mnav__lang 폰트와 동일 */
    padding: 3.22vw;     /* mnav__lang 패딩과 동일 */
  }
}

@media (max-width: 744px){
  .lang__menu{
    top: calc(100%);
    transform: translateY(-2.0vw);
  }

  .lang__item{
    font-size: 4.26vw;   /* mnav__lang 폰트와 동일 */
    padding: 6.4vw;      /* mnav__lang 패딩과 동일 */
  }
}

/* 모바일에서 bottom영역이 flex라서 드롭다운이 잘리면 아래 옵션 중 하나 선택:
   1) .mnav__bottom에 overflow: visible
*/
@media (max-width: 1201px){
  .mnav__bottom{ overflow: visible; }
}