/* BASIC css start */
/* BASIC css start */

#category_header{ top: 0px!important;}

img[usemap] {max-width: 100%;height: auto;display: block;}
body { margin:0; overflow-x:hidden; }


/* ³×ºñ°ÔÀÌ¼Ç */
.navbar { position: sticky; top: 50px; width: 100%; max-width: 750px;  background: #000; z-index: 10;}
.nav-menu { display: flex; margin: 0; padding: 0; list-style: none; }
.nav-menu li { flex: 1; height: 15.87vw; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.nav-menu li a {color: #9b9b9b;text-decoration: none;font-size: 2.8vw;   /* 17px @750px ±âÁØ */width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.nav-menu li a strong {font-size: 4.47vw; font-weight: 600; margin-top: 1vw;}
.nav-menu li a.active {background: #576419; color: #fff;}
.nav-menu li a.active strong {color: #fff;}


#section01,
#section02,
#section03 {
  scroll-margin-top: 14vw; /* ³×ºñ ³ôÀÌ¸¸Å­ ¿©¹é */
}

/* ¸ÞÀÎ ºñÁÖ¾ó */
.main-visual {
  position: relative;
  width: 100%;       
  max-width: 750px;  
  margin: 0;          /* Áß¾Ó Á¤·Ä Á¦°Å */
  overflow: hidden;
}
.main-visual > img:first-child {
  width: 100%;        /* È­¸é¿¡ ²Ë Â÷µµ·Ï */
  display: block;
}


/* È¿°ú ÀÌ¹ÌÁö */
.effect {
  position: absolute;
  opacity: 0;
  visibility: hidden;   /* Ã³À½¿£ È­¸é¿¡ ¾Èº¸ÀÌ°Ô */
  will-change: transform, opacity;  /* GPU °¡¼ÓÀ¸·Î ¾Ö´Ï ÃÖÀûÈ­ */
  animation-fill-mode: forwards;
}


/* ¾Ö´Ï¸ÞÀÌ¼Ç */
.ani01 { animation:dropAni01 1s ease-out forwards; }
.ani02 { animation:dropAni01 0.7s ease-out forwards; animation-delay:.5s; }
.ani03 { animation:dropAni01 1s ease-out forwards; animation-delay:.3s; }
.ani04 { animation:dropAni01 1s ease-out forwards; animation-delay:.8s; }
.ani05 { animation:dropAni01 1s ease-out forwards; animation-delay:.7s; }
.ani06 { animation:dropRotate 1.2s ease-out forwards; }
.ani07 { animation:dropRotate720 1s ease-out forwards; animation-delay:.5s; }
.ani08 { animation:dropRotate450 1s ease-out forwards; animation-delay:.5s; }
.ani09 { animation:dropRotate 1s ease-out forwards; animation-delay:.5s; }

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

/* ÄíÆù */
.coupon-area {  position: relative;
  width: 100%;       
  max-width: 750px;  
  margin: 0;          /* Áß¾Ó Á¤·Ä Á¦°Å */
  overflow: hidden;
}
.coupon-float {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(50px);
  opacity: 0;
  transition: all 1s ease;
  z-index: 9;
}
.coupon-float.show { transform:translateX(-50%) translateY(0); opacity:1; }
.coupon-float img {
  width: auto;
  height: auto;
  max-width: none;
  display: block;
}



/* .section_08 »óÇ° °øÅë*/
.section_08 {margin-top: 30px}
.section_08 .cate_tit {padding: 0px 7px;border-bottom: 1px solid #ededed;height: 24px;scroll-margin-top: 100px;}
.section_08 .cate_tit h3 {font-size: 13px;line-height: 16px;font-weight: 600;color: #242729;text-align: left;}
.section_08 .items  {display: flex;gap: 10px;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;padding: 0 5px;}
.section_08 .items li {width: calc(50% - 5px);padding-bottom: 30px;}
/*.section_08 .items li .dc {color: #008cff;}*/
.section_08 .items li .prd-review a {color: #292b2b; font-size: 12px; line-height: 12px;}
.section_08 #tab-8 {padding-top: 12px;}
.section_08 .prd-review .review_btn:before {display:none;}







/* footer */
.footer_bigmenu {margin:0px 5% 0!important;}



/* ¸ð¹ÙÀÏ ´ëÀÀ (320px ÀÌÇÏ) */
@media (max-width: 320px) {
  .mian-timer-wrapper p {
    font-size: 1.4rem; 
  }
  .mian-timer-wrapper #main-timer {
    font-size: 1em;
  }
  
}

/* ÅÂºí¸´ ÀÌ»ó (768px ÀÌ»ó) */
@media (min-width: 768px) {
    .nav-menu li a strong  {
    margin-top: 3.8vw;
  }
} 



/* BASIC css end */


/* BASIC css end */


/* BASIC css end */


/* BASIC css end */

