/* BASIC css start */
/* page-hd */
#productPlan .page-hd { padding: 8px 15px 5px; background-color: #c9c9c9; }
#productPlan .page-hd h2 { color: #fff; font-size: 14px; font-weight: bold; text-transform: uppercase; }
/* page-body */
#productPlan .page-body { padding-bottom: 80px; }
#productPlan .page-body .visual { margin-top: 5px; }
#productPlan .page-body .pick { margin-top: 10px; text-align: right; }
#productPlan .page-body .pick select { width: 320px; border: 1px solid #c5c5c5; }
#productPlan .page-body .clst { zoom: 1; overflow: hidden; margin-top: 10px; padding: 10px 7px 7px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
#productPlan .page-body .clst li { float: left; margin-right: 15px; padding-left: 10px; background: url(/images/d3/modern_simple/common/bull_h2_sqr_gray.gif) no-repeat 0 45%; }
#productPlan .page-body .clst li a { display: block; white-space: nowrap; }
#productPlan .page-body .p-hd { position: relative; margin-top: 70px; padding: 0 10px 5px; border-bottom: 2px solid #5c5c5c; }
#productPlan .page-body .p-hd.mt-35 { margin-top: 35px; }
#productPlan .page-body .p-hd h3 { color: #5c5c5c; font-size: 14px; font-weight: bold; letter-spacing: -1px; }
#productPlan .page-body .p-hd .top { position: absolute; top: 0; right: 5px; color: #5c5c5c; }
#productPlan .page-body .plst { zoom: 1; overflow: hidden; margin: 25px auto 0; }
#productPlan .page-body .prd-list .thumb { width: 176px; height: 176px;}:



/* -------------------------------------에코작업------------------------------------- */

@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);


@keyframes ani{
    0%{top:43%;}
    100%{top:45%;}
}
#top.page-hd{width:700px;}

.MK-product-icons{ display: block; margin: 0 auto 8px;}
.MK-product-icons img{ width: 33px; margin-right: 5px;}
.MK-product-icons img:last-child{ margin-right: 0;}
.prd-list table .info{padding:5px 0 30px;}

.promotionWrap, .promotionWrap *{ font-family: 'Spoqa Han Sans Neo', 'sans-serif'; color:#000;}
.promotionWrap{font-size:0; width: 700px; margin: 0 auto;}
.promotionWrap a{display:inline-block;}

.promotionWrap .wd50{width:50%;} 

.menuBtn{display:flex;}
.menuBtn img:first-child{width:calc(100%/3)}
.menuBtn img.active{border-bottom: 6px solid #fff;}

.promotionWrap .floatingTxt{position:relative;}
.promotionWrap .floatingTxt div{position:absolute; left:50%; width:max-content; transform:translateX(-50%); font-size:25px; background:#262626; color:white; padding:10px 15px; border-radius:9px; animation:ani .6s infinite alternate;}
.promotionWrap .floatingTxt div::after{content:""; display:block; position:absolute; width:0; left:50%; top:100%; transform:translateX(-50%); border-width:10px 7px 0; border-style:solid; border-color:#262626 transparent;}
.promotionWrap .floatingTxt div span{color:#bc9bc2}

.promotionWrap a{cursor:pointer}

.promotionWrap img, .promotionWrap a, .promotionWrap div{width:100%;}
.setPrice{position:relative; display:inline-block;}
.setPrice > span{position:absolute; font-size:29px; z-index:1; top:87%; left:6%; font-weight:600; padding-right:30px; color:#000;}
.setPrice > span::after{content:''; display:block; position:absolute; width:15px; height:15px; border-top:2px solid #000; border-right:2px solid #000; transform:translateY(-50%) rotate(135deg); position:absolute; top:40%; right:0px;}
.setPrice > span.on::after{transform:translateY(-50%) rotate(315deg); top:60%;}
.setPrice > span ul{position:absolute; top:165%; left:-6%; background:#fff; border:solid 1px #b2b2b2; padding:15px; width:max-content; display:none;}
.setPrice > span.on ul{display:block;}
.setPrice > span ul li{font-size:25px; text-align:right;}
.setPrice > span ul li.on span{color:#cf1b7c}
.setPrice > span ul li span:nth-child(1){display:inline-block; width:calc(100% - 185px); text-align:left;}
.setPrice > span ul li span:nth-child(2){display:inline-block; width:65px; font-weight:500;}
.setPrice > span ul li span:nth-child(3){display:inline-block; width:120px;}

.grade{position:relative;}
.grade span{position:absolute; font-size:30px; z-index:1; left:46.8%; font-weight:600; top:55%; transform:translateX(-50%);}

#timer{position:relative;}
#timer #HourCountdown{position:absolute; top:22%; left:50%; transform:translateX(-50%); font-size:78px; display:flex; justify-content:space-between; width:70%; color:#fff;}
#timer #HourCountdown span{display:inline-block; color:#fff;}


.accordionBox{display:none;}

.swiperBox{position:relative;}
.swiperBox .swiper{position:absolute; top:20%; width:100%; padding-bottom:40px;}
.swiperBox .swiper .swiper-wrapper{padding:0 20px}
.swiperBox .swiper .swiper-scrollbar{height:3px; left:50%; transform:translateX(-50%); width:90%;}

.swiperFade.swiper .swiper-button-prev, .swiperFade.swiper  .swiper-button-next{width:auto}
.swiperFade.swiper .swiper-button-prev::after, .swiperFade.swiper  .swiper-button-next::after{color:#000;}
.swiperFade.swiper  .swiper-button-prev{left:22px;}
.swiperFade.swiper  .swiper-button-next{right:22px;}


.promotionSwiper.swiper .swiper-button-prev, .promotionSwiper.swiper .swiper-button-next{width:auto}
.promotionSwiper.swiper .swiper-button-prev::after, .promotionSwiper.swiper .swiper-button-next::after{color:#000;}
.promotionSwiper.swiper .swiper-button-prev{left:22px;}
.promotionSwiper.swiper .swiper-button-next{right:22px;}

/* BASIC css end */