/* BASIC css start */
/* À̹ÌÁö ¸Ê */
img[usemap]{border:none;height:auto;max-width:100%;width:auto;} 
img{border:none;height:auto;width:auto;} 


/* °øÅë */ 
#contentWrap{margin:0 auto;text-align:center;max-width:750px;} 
.item-wrap{margin:0 auto;width:100%;} 
.item-wrap .dc{color:#ec3d00!important;} 



/*³×ºñ°ÔÀ̼Ç*/

.navbar {
  position: sticky;
  top: 72px;
  background-color: #000; /* ¿øÇÏ´Â ¹è°æ»ö */
  z-index: 10;
}

.nav-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu::-webkit-scrollbar{display:none;} 


.nav-menu li {
  background-color: #000000;
  width: 250px;
  height: 119px;
  text-align: center;

  display: flex;               /* flex ¹Ú½º ÁöÁ¤ */
  justify-content: center;    /* °¡·Î Áß¾Ó */
  align-items: center;        /* ¼¼·Î Áß¾Ó */
  flex-direction: column;     /* ¼¼·Î ¹æÇâ ÁÙ¹Ù²Þ À¯Áö */
}


.nav-menu li a {
  color: #9b9b9b;
  text-decoration: none;
  font-size: 17px;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.nav-menu li a strong {
  display: block;
  font-size: 26px;
  margin-top: 2px;
  font-weight: 600;
  color: #9b9b9b;
}


.nav-menu li a.active {
  background: #576419;
  color: #ffffff;
}

.nav-menu li a.active strong {
  color: #ffffff;
}


#section01,
#section02,
#section03 {
  scroll-margin-top: 150px; 
}






/*ÄíÆù ¿µ¿ª*/


.coupon-area {
  position: relative;
}

.coupon-float {
  position: absolute;
  left: 50%;                      /* °¡·Î Áß¾Ó Á¤·Ä */
  transform: translateX(-50%) translateY(50px); /* ¾Ö´Ï¸ÞÀÌ¼Ç Ãâ¹ß À§Ä¡ */
  top: 384px;                      /* ¿øÇÏ´Â Y À§Ä¡ (À§¿¡¼­ 80px) */
  opacity: 0;
  transition: all 1s ease;
  z-index: 9;
}

.coupon-float.show {
  transform: translateX(-50%) translateY(0); /* ¿ø·¡ À§Ä¡·Î ½½¶óÀÌµå ¾÷ */
  opacity: 1;
}






/* ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú*/
.main-visual {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
}

/* ¸ÞÀÎ À̹ÌÁö°¡ ÄÁÅ×ÀÌ³Ê ³Êºñ¸¦ ²Ë ä¿ìµµ·Ï (ÁÂÇ¥ ÀÏ°ü¼º¡è) */
.main-visual > img:first-child {
  display: block;
  width: 100%;
  height: auto;
}

.effect {
  position: absolute;
  width: auto;   /* ¿ø·¡ Å©±â À¯Áö */
  height: auto;  /* ¿ø·¡ Å©±â À¯Áö */
  opacity: 0;
  z-index: 5;    /* ¸ÞÀÎ À̹ÌÁö À§·Î È®½ÇÈ÷ */
  animation-fill-mode: forwards; /* ³¡³­ ÈÄ ¸ØÃã */
}

.ani01 {
  top: -120px;    
  left: -148px;   
  animation: dropAni01 1s ease-out forwards;
}

@keyframes dropAni01 {
  0% {
    transform: translateY(-200px); /* À§¿¡¼­ ½ÃÀÛ */
    opacity: 0;
  }
  100% {
    transform: translateY(0);      /* ¿ø·¡ À§Ä¡·Î µ¹¾Æ¿È */
    opacity: 1;
  }
}



.ani02 {
  top: -122px;    
  left: 455px;   
  animation: dropAni01 0.7s ease-out forwards;
  animation-delay: 0.5s;  /* È¿°ú1º¸´Ù 0.5ÃÊ ´Ê°Ô ½ÃÀÛ */
}


.ani03 {
  top: 569px;    
  left: -55px;   
  animation: dropAni01 1s ease-out forwards;
  animation-delay: 0.3s; 
}


.ani04 {
  top: 774px;    
  left: 88px;   
  animation: dropAni01 1s ease-out forwards;
  animation-delay: 0.8s; 
}


.ani05 {
  top: 629px;    
  left: 449px;   
  animation: dropAni01 1s ease-out forwards;
  animation-delay: 0.7s; 
}



.ani06 {
  top: 153px;    
  left: 250px; 
  animation: dropRotate 1.2s ease-out forwards;
  animation-delay: 0s;  /* ÇÊ¿äÇÏ¸é µô·¹À̵µ ÁÙ ¼ö ÀÖÀ½ */
}

@keyframes dropRotate {
  0% {
    transform: translateY(-200px) rotate(0deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(0) rotate(360deg); /* ÃÖÁ¾ À§Ä¡ + 2¹ÙÄû ȸÀü */
    opacity: 1;
  }
}


.ani07 {
  top: 286px;     /* ¿øÇÏ´Â ÃÖÁ¾ µµÂø À§Ä¡ (Çȼ¿·Î Á¶Á¤) */
  left: 636px;    /* ¿øÇÏ´Â Á¿ì À§Ä¡ */
  animation: dropRotate720 1s ease-out forwards;
  animation-delay: 0.5s;  /* È¿°ú6º¸´Ù »ì¦ ´Ê°Ô ½ÃÀÛ (¿¹½Ã) */
}

@keyframes dropRotate720 {
  0% {
    transform: translateY(-200px) rotate(0deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(0) rotate(720deg); 
    opacity: 1;
  }
} 
  


.ani08 {
  top: 662px;    
  left: 108px;  
  animation: dropRotate450 1s ease-out forwards;
  animation-delay: 0.5s;
}

@keyframes dropRotate450 {
  0% {
    transform: translateY(-200px) rotate(0deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(0) rotate(450deg); 
    opacity: 1;
  }
}


.ani09 {
  top: 835px;    
  left: 376px;  
  animation: dropRotate 1s ease-out forwards;
  animation-delay: 0.5s;
}




/* .section_08 - 10 °øÅë  */
.section_08 {margin-top: 30px;}
.cate_tit {padding: 16px 16px 16px 0; border-bottom: 1px solid #ededed; text-align: left;scroll-margin-top: 120px;}
.cate_tit h3 {font-size: 16px; line-height: 16px; font-weight: 600; color: #242729;}
#tab-8 {padding: 20px 0 0; margin-bottom:20px;}
.item-wrap .item-cont {display: flex;flex-direction: row;flex-wrap: wrap; gap:10px;}
.item-wrap .item-cont .item-list {width: calc(33.3333% - 10px);padding-bottom: 40px;}
.item-wrap .item-cont .item-list .thumb img {border-radius: 15px;}
.prd-info > ul .prd-price, .section_04 .prd-info > ul .prd-soldout, .section_04 .prd-info > ul .dc { font-size: 18px; font-weight: 600; display: inline-block; }
.prd-info > ul .prd-soldout { color: #c7c7c7; }
.prd-info > ul .dc {color: #09ff00;}
.prd-info > ul .prd-price del { font-size: 15px; font-weight: 600; color: #bbb; display: inline-block; }
.rating-group.tiny > a{font-size: 13px; color:#292b2b;}


/* BASIC css end */