@font-face {
    font-family: 'MinSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/MinSans-Thin.woff') format('woff');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'MinSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2508-1@1.0/MinSans-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'MinSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/MinSans-Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'MinSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/MinSans-Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MinSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/MinSans-Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'MinSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2508-1@1.0/MinSans-Bold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'MinSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/MinSans-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'MinSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2508-1@1.0/MinSans-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'MinSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/MinSans-Black.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    color: #333;
    
}

body {
  font-family: 'MinSans', sans-serif;
}



/* 전체 헤더 */
.hero-header {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* 배경 이미지 */
.hero-header .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 1;
}

/* 슬라이드위에 글자넣기 */
.slider-fade {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 이미지 겹쳐 놓기 */
.fade-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* 현재 보이는 슬라이드 */
.fade-slide.active {
  opacity: 1;
}

/* 좌우 화살표 */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #666;
  font-size: 24px;
  padding: 0;
  cursor: pointer;
  z-index: 10;
}

.arrow.left { left: 20px; }
.arrow.right { right: 20px; }

.arrow:hover {
  color: #ddd;
}



.fade-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}

.fade-slide.active {
  opacity: 1;
}

.fade-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* 슬라이드 활성화될 때 텍스트도 나타남 */
.fade-slide.active .slide-text {
  opacity: 1;
}

/* 인디케이터 넣기 */
/* 인디케이터 전체 영역 */
.indicator-wrapper {
  position: absolute;
  left: 120px;
  bottom: 50px;
  display: flex;
  gap: 5px;
  z-index: 20;
}

/* 막대 기본 */
.indicator-bar {
  width: 20px;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  transition: 0.4s ease;
}

/* 현재 슬라이드 표시 */
.indicator-bar.active {
  background: white;
}




/* 햄버거 안눌렀을때 뜨는 왼쪽 메뉴 */
.left-menu {
    position: absolute;
    top: 30px;
    left: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 2;
    position: fixed;
}


/* 햄버거 메뉴 */
.left-menu .menu-icon1{
    font-size: 20px;
    color: white;
    cursor: pointer;
    margin-bottom: 30px;
}


/* 왼쪽메뉴상단 아이콘 */
.left-menu .menu-icon {
    font-size: 20px;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    width: 2rem;
}

/* 메인 상단 로고 */
.logo img{
    position: absolute;
    top: 30px;
    left: 200px;
    transform: translateX(-50%);
    font-weight: bold;
    color: white;
    z-index: 10002;
    width: 180px;
    position: fixed;
}


/* ----------태블릿 상단 위 가로정렬---------- */
@media (max-width: 1024px) {

  /* 아이콘 묶음만 오른쪽 이동 */
  .left-menu {
    top: 21px;
    right: 10px;
    left: auto;
    flex-direction: row;
    position: fixed;
  }

  /* 햄버거 메뉴는 따로 왼쪽 고정 */
  .menu-icon1 {
    position: fixed;  
    left: 27px;
    top: 30px;
    z-index: 9999;
  }

  .indicator-wrapper {
  left: 50px;
  bottom: 50px;
}

}

/* ------------------------------- */



/* 웹,반응형 왼쪽, 상단 장바구니 숫자 */

.icon-wrap {
  position: relative;
}


.cart-count {
  position: absolute;
  top: 10px;
  left: 13px;
  background: black;
  color: white;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 100px;
}


.hero-header {
    position: relative;
}

.hero-text {
    position: absolute;
    bottom: 110px;
    left: 120px;
    max-width: 600px;
    color: #fff;
    z-index: 2;
}

.hero-text h1 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
}

.hero-text p {
    line-height: 1.4;
    font-size: 15px;
    opacity: 0.95;
    margin-bottom: 25px;
    color: #fff;
    font-weight: 800;
}

/* 상단메인아래-shop Now눌렀을때 바뀜 */
.btn {
    color: white;
    opacity: 0.7;
    padding: 0;
    font-size: 12px;
    text-decoration: none;
    transition: 0.3s;
}

.btn:hover {
    color:white;
    opacity: 1;
}

/* 메뉴 누르면 빨간배경 나오게 */
/* 메뉴 전체 */
.side-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 500px;
  height: 100vh;
  background: #e41f1b;
  color: black;
  padding: 25px 20px;
  z-index: 9999;
  overflow-y: auto;
  transition: left 0.8s ease, opacity 0.8s ease;
}



.side-menu.active {
  left: 0;
}

/* 상단 */
.side-menu-top {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* x 모양 */
.close-btn {
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
  padding-left: 10px;
  margin-top: 10px;
}

.side-logo {
  font-size: 20px;
  font-weight: 800;
  color: black;
  padding-left: 45px;
}

/* 아이콘 + 메뉴 2열 정렬 */
.side-content {
  display: flex;
  gap: 25px;
  margin-top: 40px;
}

/* 왼쪽 아이콘 */
.side-icons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 5px;
  padding-left: 10px;
}

.side-icons img {
  width: 17px;
}

/* 장바구니 숫자 */
.bag-icon {
  position: relative;
}

.badge {
  position: absolute;
  top: 10px;
  left: 13px;
  background: black;
  color: white;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 100px;
}


/* 빨간사이드 브랜드스토리 부분 */
  .side-main-menu{
    position: absolute;
  }
  
  /* 오른쪽 메뉴 브랜드스토리 글자 */
  .side-main-menu li {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 10px;
    padding-left: 90px;
    color: #222;
  }


/* 빨간사이드 로그인 부분 */
  .side-sub-menu{
    position: absolute;
    bottom: 150px;
    left: 0px;
  }
  
  /* 로그인 글자 */
  .side-sub-menu li{
    line-height: 1.7;
    margin-left: 15px;
    
  }
  
  /* 빨간사이즈 마지막 한국어 글자 */
  .side-bottom {
    position: absolute;
    bottom: 30px;
    margin: 70px;
    margin-left: 90px;
    font-size: 11px;
  }




.arrow1 {
  margin-left: 5px;
  color: #222;
}

/* 하단 로그인 메뉴 */
.side-sub-menu {
  margin-top: 500px;
  font-size: 13px;
  line-height: 1.8;
  padding-left: 95px;
  
}


/* 한국어 위에 빨간줄 */
.side-bottom {
  border-top: 1px solid rgb(201, 38, 38);
  width: 430px;
  padding-top: 10px;
}







/* ----------------메인영역 시작--------------- */

/* 기본 전체배경(화장품들어가는부분) */
.container{
    width: 100%;
    height: 100%;
}

.mainimg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
}

/* 왼쪽 머리카락 고정된 이미지 */
.left-img{
    width: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    height: 100%;
}

.left-img img{
  width: 100%;
  min-height: 100vh;
  height: auto;
  object-fit: cover;
  /* 화면 가득채우기 */
}



/* 스크롤 오른쪽 향수 이미지에 관한 */
.product-section {
  text-align: center;
  padding: 80px 0;
  /* 상단에서 부터 떨어지는높이 */
}

/* 스크롤 내릴때 빨간 전체 이미지 (배경색)*/
.right-img{
  width: 100%;
  overflow-y: auto; 
  background-color: #e41f1b;
  padding: 100px 0;
}

/* 오른쪽 스크롤 향수이미지크기조절 */
.right-img img{
  width: 150px;
  margin: 30px 0;
}

/* 오른쪽 스크롤 향수 가격,이름변경 */
.product-title {
  margin-top: 40px;
  font-size: 15px;
  color: #333;
  font-weight: 500;
}

.original-price {
  color: #444;
  margin-top: 20px;
  font-size: 13px;
  text-decoration: line-through;
}

.discount-box {
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.discount-box .tag {
  background-color: black;
  color: white;
  padding: 1px 5px;
  font-size: 12px;
}

.discount-box .discount {
  font-size: 17px;
  font-weight: 900;
  color: black
}


/* 오른쪽 고정된 검은배경이미지 */
.right-img2{
    width: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    height: 100%; 
}

/* 두번째 메인 오른쪽 고정이미지 */
.right-img2 img{
  width: 100%;
  min-height: 100vh;
  height: auto;
  object-fit: cover;
  /* 화면 가득채우기 */
}

/* 스크롤 내릴때 빨간배경*/
.left-img2{
  width: 100%;
  overflow-y: auto; /* 오른쪽만 스크롤 */
  padding: 100px 0;
  background-color: #e41f1b;
}

/* 왼쪽 빨간배경 스크롤 향수배열 */
.product-section2 {
  text-align: center;
  padding: 80px 0; 
}


/* 빨간배경 향수이미지 사이즈 */
.left-img2 img{
  width: 150px;
  margin: 30px 0;
}

/* 빨간색배경 향수 이름,가격 배열 */
.product-title2 {
  margin-top: 40px;
  font-size: 15px;
  color: #333;
  font-weight: 500;
}

.original-price2 {
  color: #444;
  margin-top: 20px;
  font-size: 13px;
  text-decoration: line-through;
}

.discount-box2 {
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.discount-box2 .tag2 {
  background-color: black;
  color: white;
  padding: 1px 5px;
  font-size: 12px;
}

.discount-box2 .discount2 {
  font-size: 17px;
  font-weight: 900;
  color: black
}


/* ------------해더,메인1-2 반응형----------- */

/* 태블릿 스타일 */
@media (max-width: 1024px) {

    .hero-text {
        max-width: 80%;
        left: 50px;
    }

    .hero-text h1 {
        font-size: 25px;
    }

    .hero-text p {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
    }
    .hero-text .btn{
      border: none;
      margin-left: -15px;
    }

    .left-img {
      width: 70%;
    }

    .right-img2 {
      width: 70%;
    }

    .left-img img{
      width: 100%;
      height: 100vh;
      object-fit: cover;
    }

    .right-img2 img{
      width: 100%;
      height: 100vh;
      object-fit: cover;
    }

    .arrow{
      display: none;
    }

    
    .top-nav {
      position: absolute;
      top: 0;
      width: 100%;
      left: 600px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30px;
      filter: brightness(0) invert(1);
    }

  

    /* 햄버거 메뉴 */
    .left-menu{
      display: flex;
      gap: 4px;
    }

    .left-menu .menu-icon1{
      font-size: 20px;
      color: white;
      cursor: pointer;
      margin-top: -8px;
    }

    .logo img{
      width: 110px;
      left: 120px;
      top: 30px;
    }
    
 .side-menu{
    width: min(85vw, 500px);
    height: 100vh; 
  }


/* 빨간사이드 브랜드스토리 글자 */
  .side-main-menu{
    position: absolute;
  }

  .side-main-menu li{
    margin-left: -40px;
    
  }
 

/* 빨간사이드 로그인 글자 */
  .side-sub-menu{
    position: absolute;
    bottom: 130px;
    left: 0px;
  }
  
  .side-sub-menu li{
    line-height: 1.7;
    bottom: 20px;
    margin-left: -30px;
    
  }
  
  /* 빨간사이즈 마지막 한국어 글자 */
  .side-bottom {
    position: absolute;
    bottom: 10px;
    margin: 70px;
    margin-left: 45px;
    width: 100%;
  }

    .side-icons{
      display: none;
    }

    .close-btn {
      font-size: 16px;
      padding-left: 10px;
      margin-top: 0px;
    }

    .btn {
      padding-left: 15px;
    }

}



/* --고정이미지, 모바일,태블릿 이미지수정 -- */

/* PC 기본 이미지 */
.right-img2 .change-img {
  content: url("../images/rightimg.png");
}

/* 태블릿 */
@media (max-width: 1024px) {
  .right-img2 .change-img {
    content: url("../images/rightimg02.png");
  }
}

/* 모바일 */
@media (max-width: 600px) {
  .right-img2 .change-img {
    content: url("../images/rightimg02.png");
  }
}


/* 600px 맞추려면 and로 조정하기 */
/* --------모바일 반응형(헤더,메인)------- */

@media (max-width: 600px) or (orientation: portrait){

  .hero-text {
    bottom: 20vw;
    left: 10vw;
  }
  .hero-text h1 {
    font-size: 5vw;
    font-weight: 800;
  }

  .hero-text p {
    font-size: 3vw;
    line-height: 1.2;
    font-weight: 700;
  }

  .btn {
    font-size: 2.5vw;
    font-weight: 200;
  }

  .fade-slide {
  height: 100vh;
  overflow: hidden;
}

.fade-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60%;
}

  

  /* ---첫번째 오른쪽 스크롤 향수 이미지--- */

  .product-section{
    padding-top: 20vw;
  }

  :first-child.product-section img{
    margin-top: -100px;
  }

  :last-child.product-section{
    padding-bottom: 25vw;
  }

  .product-section img{
     width: 25vw;
  }

  .product-section .product-title{
    font-size: 3vw;
    font-weight: 500;
  }

  .original-price{
    font-size: 2.2vw;
  }

  .product-section .discount{
    font-size: 3vw;
  }

  .right-img{
    padding-bottom: 100px;
  }

  .product-section .tag{
    font-size: 2vw;
  }

  .left-img{
    width: 70%;
  }

  .right-img2{
    width: 70%;
  }

   :first-child.product-section2 img{
    margin-top: -100px;
  }

  .product-section2 img{
    width: 25vw;
  }

  .product-section2 .product-title2{
    font-size: 3vw;
    font-weight: 500;
  }

  .product-section2 .discount2{
    font-size: 3vw;
  }

  .product-section2 .tag2{
    font-size: 2vw;
  }

  .original-price2{
    font-size: 2.2vw;
  }

  .left-img2{
     padding-bottom: 100px;
  }

  .product-section2{
    padding-top: 20vw;
  }

  :last-child.product-section2{
    padding-bottom: 20vw;
  }
  

  .background img{
    width: 100%;
    height: 30vh;
    overflow: hidden;
    object-fit: cover; 
    padding-bottom: 30px;
  }

  /* 상단 인디케이트 모바일 */
  .indicator-wrapper {
  left: 10vw;
  bottom: 40px;
  }

  .indicator-bar{
    width: 5vw;
    margin-bottom: 3vw;
  }


/* 상단 좌측 고정 햄버거 메뉴 */
  .menu-icon1 {
    font-size: 2rem;
    margin-top: -18px;
  }


/* 상단 좌측 고정 로고 */
  .logo img {
    width: 10rem;  
    margin-left: 30px;
    margin-top: -5px;    
  }

  /* 상단우측 고정 아이콘 */

  .left-menu{
    display: flex;
    gap: 4px;
  }
  .menu-icon img{
    margin-bottom: -5px;
  }

}

/* -------------------------------- */


   
  

/* ------------메인3-포스터-------------- */

/* 기본틀 */
.notice-section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 25px;
  padding: 30px 30px;
  flex-wrap: wrap; 
  
}

/* 포스터 이미지 4개 배열 */
.notice-item {
  width: calc(20% - 20px); 
  text-align: left;
}

/* 포스터이미지 */
.notice-item img {
  width: 100%;
  margin-top: 150px;
}

/* 포스터 글자 */
.notice-item h3 {
  font-size: 15px;
  font-weight: 500;
  margin: 15px 0 5px;
}

.notice-item p {
  font-size: 12px;
  color: #888;
}



/* ----------메인3 - 반응형 (태블릿)---------- */
@media (max-width: 1024px) {
  .notice-item {
    width: calc(50% - 20px);
  }
  .notice-item img {
  margin-top: 50px;
  }

  .notice-section {
    padding-top: 100px;
  }

}



/* ----------메인3-포스터 ,좌측 빨간색 메뉴 반응형 (모바일)--------- */
@media (max-width: 600px) or (orientation: portrait){
  .notice-item {
    width: 100%;
  }

  :first-child.notice-item{
    padding-top: 30px;
  }

  .notice-item h3{
    font-size: 3.5vw;
    font-weight: 500;
    padding-top: 3vw;
    
  }

  .notice-item p{
    font-size: 2.5vw;
    padding-top: 2vw;
  }

  /* 좌측 클릭했을때 빨간색으로 열리는 사이드메뉴 */
  .side-menu{
    width: 90%;
    height: 100%; 
  }

  .side-menu {
  position: fixed;
}

.close-btn {
  position: absolute;
  top: 20px;  
  left: 20px;
  font-size: 22px;
}

/* 빨간사이드 브랜드스토리 글자 */
  .side-main-menu{
    position: absolute;
    top: 75px;
  }


  .side-main-menu li{
    font-size: 3vw;
    padding-top: 10px;
    font-weight: 600;
    margin-left: -40px;
  }

/* 빨간사이드 로그인 글자 */
  .side-sub-menu{
    position: absolute;
    bottom: 130px;
  }
  
  .side-sub-menu li{
   line-height: 1.5;
    margin-left: -25px;
    font-size: 2.7vw;
    line-height: 1.8;
  }

  /* 빨간사이즈 마지막 한국어 글자 */
  .side-bottom {
    position: absolute;
    bottom: 10px;
    font-size: 2vw;
    margin-left: 48px;
  }

  .hero-header .slider-fade{
    width: 100vw;
    height: 100vh;
  }

}


/* 모바일용에서 세로로 보여질때 쓰는 코드(orientation: portrait) */


/* -------------메인4 이미지-------------- */
.background{
  width: 100%;
}

.background img{
  width: 100%;
  margin-top: 100px;
}





/* ---------------마지막 푸터--------------- */


.footer {
  text-align: center;
  padding: 200px 0;
  color: #333;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px;
  }

/* 푸터 로고이미지 */
.footer-logo img {
  width: 200px;
  font-weight: 700;
  margin-bottom: 40px;
}

.footer-menu {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-bottom: 40px;
}

.menu-column h4 {
  font-size: 14px;
  margin-bottom: 15px;
  color: #444;
  font-weight: 500;
}

.menu-column ul {
  list-style: none;
  padding: 0;
}

.menu-column ul li {
  margin-bottom: 8px;
}

.menu-column ul li a {
  color: #666;
  text-decoration: none;
  font-weight: 300;
}

.footer-icons {
  margin: 20px 0 40px;
}

.footer-icons img {
  width: 26px;
  margin: 0 8px;
}

.footer-info {
  line-height: 1.7;
  font-size: 12px;
  color: #666;
  margin-bottom: 20px;
}

.footer-bottom {
  font-size: 12px;
  color: #888;
  margin-bottom: 30px;
}

.footer-bottom button {
  border-style: none;
  font-size: 11px;
  border-radius: 3px;
  color: #999;
  padding: 3px 10px;
  cursor: pointer;
}

.footer-bottom img {
  width: 120px;
  vertical-align: middle;
  margin-left: 5px;
  cursor: pointer;
}

.footer-copy {
  font-size: 12px;
  color: #888;
  margin-top: 20px;
}

.footer-last p{
  font-size: 13vw;
  bottom: 0;
  font-weight: 900;
  color: #e41f1b;
}



/* -------------footer 반응형---------------- */

@media (max-width: 1024px) {
  .footer-menu {
    flex-wrap: wrap;
    gap: 40px;
  }

  .menu-column {
    width: 45%;
  }

  .footer {
    padding: 40px 20px;
    background-color: white;
  }
  
  .footer-logo img {
    width: 130px;
    margin-bottom: 30px;
  }
  
  .footer-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    border-top: 1px solid #ddd;
    border-top: none;
    margin: 15px;
    
  }
  
  .menu-column {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #ddd;    
  }
  
  .menu-column h4 {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 400;
    align-items: center;
  }
  
  /* 화살표 */
  .menu-column h4::after {
    content: "▾";
    font-size: 16px;
    transition: transform 0.3s;
  }
  
  /* 열렸을 때 화살표 회전 */
  .menu-column.active h4::after {
    transform: rotate(180deg);
  }
  
  .menu-column ul {
    display: none;
    margin-top: 15px;
  }
  
  
  .menu-column.active ul {
    display: block;
  }
  
  .menu-column ul li {
    margin: 10px 0;
  }
  
  /* 아이콘 인스타그램, 카카오톡 정렬 */
  .footer-icons {
    display: flex;
    justify-content: center;
    margin: 50px 0;
    
  }
  
  /* 사업자 정보 */
  .footer-info {
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    padding: 0 10px;
  }
  
  .footer-bottom {
    font-size: 12px;
    margin-top: 20px;
  }
  
  .footer-bottom img {
    height: 15px;
    padding-bottom: 2px;
  }
  
  .footer-copy {
    margin-top: 25px;
    font-size: 13px;
    margin-bottom: 100px;
  }

}

/* -------------푸터 모바일 ------------- */

@media (max-width: 600px)or (orientation: portrait) {
  .menu-column {
    width: 100%;
    /* border-bottom: 1px solid #999; */
  }

  /* 푸터 메뉴 화살표 */
  .menu-column h4::after{
    font-size: 3vw;
    color: #888;
  }

  /* 푸터 안에 안보이는 메뉴 */
  .menu-column ul {
    font-size: 2.5vw;
    margin: 5px 0;
    margin-bottom: 20px;
    line-height: 1;
  }

  /* 푸터 토스가입사실확인 */
  .footer .footer-bottom button{
    margin: 10px;
  }

  .footer-logo img{
    width: 30vw;
    padding-top: 20px;
  }

  /* ABOUT US 등등 보이는 메뉴 */
  .footer-menu .menu-column h4 {
    font-size: 3vw;
    color: #888;
  }

  /* 푸터 인스타그램, 카톡 아이콘 */
  .footer-icons{
    margin: 40px 0;
  }

  .footer-icons img{
    padding-top: 30px;
    padding-bottom: 30px;
    width: 5vw;
  }

  .footer-info{
    font-size: 2vw;
  }
  
  .footer-bottom{
    font-size: 2vw;
  }
  
  .footer-copy{
    margin-bottom: 100px;
    font-size: 2vw;
  }
 
}




/* 메뉴 눌렀을때 흐리게 하는 효과 */

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 90;
}


.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}