/* BASIC css start */
/* ¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡
   #tab_01 Àü¿ë ·ê·¿ ÈÙ 100% ³ëÃâ º¸Àå¿ë ¿À¹ö¶óÀ̵å
¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡*/
/* 1) ºÎ¸ð¿¡¼­ ¼û±è ÇØÁ¦ */
#cateTab #tab_01 .evt_roulette {
  overflow: visible !important;
}

/* 2) wheel-containerµµ ¼û±è ÇØÁ¦ */
#cateTab #tab_01 .evt_roulette #wheel-container {
  overflow: visible !important;
}

/* 3) background-size¸¦ contain À¸·Î ¹Ù²ã À߸² ¹æÁö */
#cateTab #tab_01 .evt_roulette #wheel {
  background-size: contain !important;
  background-position: center !important;
}


/* 1) »ó´Ü ¸ÞÀÎ À̹ÌÁö ¹Ù·Î ¾Æ·¡ ¿©¹é Á¦°Å */
main.page > .evt_main_img {
  margin-bottom: 0 !important;
  overflow: hidden;
}
main.page > .evt_main_img img {
  display: block;
  width: 100%;
  height: auto;
}

/* 2) ÅÇ ÄÁÅ×À̳Ê(#cateTab) °£°Ý Á¦°Å */
#cateTab {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3) ·ê·¿ ÅÇÀÌ ¾Æ´Ò ¶§(.prod_tab_con#tab_01 ¾Æ´Ñ °÷) ·ê·¿ ¼½¼Ç ¼û±â±â */
#cateTab .prod_tab_con:not(#tab_01) .evt_roulette {
  display: none !important;
}

/* 4) #tab_01 ³»ºÎ Æеù Á¦°Å ¹× Áß¾Ó Á¤·Ä */
#cateTab #tab_01 .inner {
  padding: 0 !important;
  text-align: center;
}

/* 5) #tab_01 ·ê·¿ ¼½¼Ç ¹è°æ ¼³Á¤ */
#cateTab #tab_01 .evt_roulette {
  position: relative;
  
  background-size: cover;

  margin: 0 !important;
  text-align: center;
  z-index: 1;
}

/* #cateTab ³» ÈÙ À§Ä¡ ¼öÁ¤ */
#cateTab #tab_01 .evt_roulette #wheel-container {
  position: absolute !important;
  top: 24%;                    /* ±âÁ¸ 28% ¡æ 22% (¾à°£ À§·Î) */
  left: 50%;
  transform: translateX(-50%);
  width: 93% !important;      /* ±âÁ¸ 100% ¡æ 120%, ÈÙ È®´ë */
  height: auto !important;     /* ºñÀ² À¯Áö¸¦ À§ÇØ auto·Î º¯°æ */
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  overflow: visible !important;/* À߸² ¹æÁö */
  z-index: 2;
}

/* 7) ·ê·¿ ¹öÆ°: ÈÙ ¹Ù·Î ¾Æ·¡ ÀÚ¿¬½º·´°Ô ¹èÄ¡ */
#cateTab #tab_01 .evt_roulette .roulette-btn {
  position: relative;
  display: block;
  width: 90%;
  max-width: 360px;

  z-index: 3;
}
#cateTab #tab_01 .evt_roulette .roulette-btn img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   ±Û·Î¹ú ½ºÅ¸ÀÏ: ÅÇ ³×ºñ, »óÇ° ¸®½ºÆ®, ·ê·¿ ±âº» À̹ÌÁö µî
   (ÀÌ ¾Æ·¡´Â ±âÁ¸ CSS Àüü¸¦ Æ÷ÇÔÇÕ´Ï´Ù)
   ========================================================================== */

/* »ó´Ü À̹ÌÁö ¿µ¿ª ½ºÅ¸ÀÏ (¹é¾÷¿ë) */
.evt_main_img {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.evt_main_img img {
  display: block;
  width: 100%;
  height: auto;
}

/* ÅÇ ³×ºñ ½ºÅ¸ÀÏ */
.prod_tab {
  height: 50px;
}
.prod_tabs {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  background: #726e43;
  height: 50px;
}
.prod_tabs a {
  font-size: 1.4rem;
  color: #fff;
  font-weight: 400;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  padding: 0 18px;
  width: 50%;
}
.prod_tabs a:after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 22px;
  background: #fff;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}
.prod_tabs a:last-child:after {
  display: none;
}
.prod_tabs a.active {
  font-weight: 900;
}
.Fixed .prod_tabs {
  position: fixed;
  top: 50px;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* ÅÇ ÄÁÅÙÃ÷ ±âº» Inner */
.prod_tab_con .inner {
  box-sizing: border-box;
  padding: 17px 10px;
  text-align: center;
}

/* »óÇ° ¸®½ºÆ® ½ºÅ¸ÀÏ */
.prod_tab_list {
  text-align: left;
}
.prod_tab_list .prod_tt {
  font-size: 1.8rem;
  font-weight: 400;
  color: #000;
  text-align: center;
  margin: 26px 0;
}
.prod_tab_list .btn_box {
  text-align: center;
}
.prod_tab_list .btn_box a {
  display: inline-block;
  width: 160px;
  border: 1px solid #000;
  text-align: center;
  padding: 9px;
  font-size: 1.2rem;
  font-weight: 400;
  margin-top: 0;
}

#wheel-container {
  position: relative;
  width: 90vw;          /* È­¸é ³ÊºñÀÇ 90% */
  max-width: 480px;     /* ÃÖ´ë 480px·Î Á¦ÇÑ */
  aspect-ratio: 1 / 1;  /* Á¤»ç°¢Çü À¯Áö */
  margin: 36px auto 0;
  overflow: hidden;
}
#wheel {
  width: 100%;
  height: 100%;
  background: url('https://mayblue.jpg3.kr/renewImg/m/event/261015_autumnfesta/roulette_1015.png')
    center/cover no-repeat;
  border-radius: 50%;
  transition: transform 1.5s ease-out;
}
#prize {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://mayblue.jpg3.kr/renewImg/m/event/261015_autumnfesta/autumnfesta_1015_coupon.png')
    center/cover no-repeat;
  display: none;
}

/* »óÇ° ¹Ú½º ½ºÅ¸ÀÏ */
.prod_item_box {
  position: relative;
  padding-bottom: 123%;
  margin-top: 49%;
}
.prod_item_box .prod_item {
  position: absolute;
  top: 5%;
  left: 0;
  width: 100%;
}

/* Swiper ½ºÅ¸ÀÏ (prod_tab_con ³») */
.prod_tab_con .prodTabSwiper .swiper-slide .item {
  box-sizing: border-box;
  padding: 16px;
  transition: all 0.3s;
}
.prod_tab_con .prodTabSwiper .swiper-slide.swiper-slide-active .item {
  padding: 0;
}
.prod_tab_con .prodTabSwiper .swiper-slide .item .info_box {
  background: #fff;
  padding: 10px;
  text-align: left;
}
.prod_tab_con .prodTabSwiper .swiper-slide .item .info_box .brand,
.prod_tab_con .prodTabSwiper .swiper-slide .item .info_box .icons {
  display: none;
}
.prod_tab_con .prodTabSwiper .swiper-slide .item .info_box .name {
  font-size: 1.2rem;
  color: #000;
}
.prod_tab_con .prodTabSwiper .swiper-slide .item .info_box .price_box {
  align-items: flex-end;
  flex-direction: column;
  position: relative;
  margin-right: 0;
}
.prod_tab_con .prodTabSwiper .swiper-slide .item .info_box .price_box p {
  margin-right: 0;
}
.prod_tab_con .prodTabSwiper .swiper-slide .item .info_box .price_box .priceStrike {
  font-size: 1.4rem;
  margin-bottom: 5px;
}
.prod_tab_con .prodTabSwiper .swiper-slide .item .info_box .price_box .price {
  font-size: 2.0rem;
}
.prod_tab_con .prodTabSwiper .swiper-slide .item .info_box .price_box .dc_info {
  font-size: 2.0rem;
  color: #726e43;
  position: absolute;
  bottom: 0;
  left: 0;
}
.prod_tab_con .swiper-pagination {
  bottom: -6%;
}
.prod_tab_con .swiper-pagination .swiper-pagination-bullet {
  border-radius: 0;
  width: 8px;
  height: 8px;
  transition: all ease 0.5s;
}
.prod_tab_con .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 48px;
}

/* ¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡
   Tab02 (BEST 15%) ½½¶óÀÌ´õ ºÒ¸´ »ö»ó
¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡ */
#cateTab .prod_tab_con#tab_02 .swiper-pagination-bullet {
  background-color: #726e43  !important;         /* ºñÈ°¼º ºÒ¸´ */
}
#cateTab .prod_tab_con#tab_02 .swiper-pagination-bullet-active {
  background-color: #726e43  !important;         /* È°¼º ºÒ¸´ */
}

/* ¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡
   Tab03 (S/S½ÃÁð¿ÀÇÁ) ½½¶óÀÌ´õ ºÒ¸´ »ö»ó
¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡¦¡ */
#cateTab .prod_tab_con#tab_03 .swiper-pagination-bullet {
  background-color: #726e43 !important;
}
#cateTab .prod_tab_con#tab_03 .swiper-pagination-bullet-active {
  background-color: #726e43 !important;
}


/* ÅǺ° ¹è°æ Ä÷¯ */
#tab_02 {
  background: #eff8ff;
}
#tab_02 .inner .tt_box .txt {
  color: #1995f1;
}
#tab_03 {
  background: #def1ff;
}
#tab_03 .inner .tt_box .txt {
  color: #0e568c;
}
#tab_03 .inner .btn_box .btn {
  background: #0e568c;
}

/* µÎ ¹ø° ÅÇ ½Ã½ºÅÛ (#cateTab2) */
#cateTab2 {
  padding-top: 32px;
}
#cateTab2 .prod_tabs {
  align-items: center;
  background: #fff;
  height: 44px;
}
#cateTab2 .prod_tabs a {
  font-size: 1.3rem;
  color: #2e88d4;
  font-weight: 400;
  height: 30px;
  border: 1px solid #2e88d4;
  border-radius: 30px;
  /* line-height: 1; */
  width: auto;
}
#cateTab2 .prod_tabs a:after {
  display: none;
}
#cateTab2 .prod_tabs a.active {
  font-weight: 400;
  color: #fff;
  background: #2e88d4;
}
#cateTab2.Fixed .prod_tabs {
  box-shadow: rgba(0, 0, 0, 0.25) 0 3px 7px;
  top: 94px;
}
#cateTab2 .prod_tab_con .inner {
  padding-top: 57px;
}
#cateTab2 #tab2_01 .inner {
  padding-top: 52px;
}
#cateTab2 .hide_prod_list .item {
  display: none;
}
#cateTab2 .hide_prod_list .item:nth-child(-n+10) {
  display: inline-block;
}

.roulette_notice { display: none !important; }

#cateTab #tab_01 .evt_roulette .roulette-btn {
  position: absolute !important;
  bottom: 18% !important;    
  left: 50% !important;           /* °¡·Î Áß¾Ó */
  transform: translateX(-50%) !important;
  width: 90%;
  max-width: 360px;
  z-index: 3;
}


#cateTab #tab_02 .inner {
  position: relative;
  width: 100%;
  height: calc(1510 / 720 * 100vw);
  background: url('https://mayblue.jpg3.kr/renewImg/m/event/261015_autumnfesta/autumnfesta_1015_bg2.jpg')
    no-repeat center top;
  background-size: cover;
  box-sizing: border-box;
  padding:17px 0 
}


#cateTab #tab_03 .inner {
  position: relative;
  width: 100%;
  height: calc(1427 / 720 * 100vw);
  background: url('https://mayblue.jpg3.kr/renewImg/m/event/260507_16th/16th_0507_bg3.jpg')
    no-repeat center top;
  background-size: cover;
  box-sizing: border-box;
}

a.best-btn {
    transform: translateX(-50%);
    position: absolute;
    width: 80%;
    top: 89%;
}


/* BASIC css end */