/* BASIC css start */
#section01 { width:100%; clear: both  ; }/* 메인큰이미지 영역 */
#section02 { width:100%; clear: both  ;} /* 메인 메뉴영역 */
#section03 { width:100%; clear: both  ;} /* 메인 배너영역 */
#section04 {width:100%; clear: both  ;}  /* 메인 롱배너1영역 */
#section05 { width:100%; clear: both  ;} /* 메인 베스트메뉴영역 */
#section06 {width:100%; clear: both  ;}  /* 메인 롱배너2영역  */
#section07 { width:100%; clear: both  ;} /* 메인 신상품영역 */
#section08 { width:100%; clear: both  ;} /* 메인 슬라이드배너영역 */
#section09 { width:100%; clear: both  ; }/* 메인 특별상품영역 */
#section10 { width:100%; clear: both  ; }/* 메인 추가상품1영역 */


/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ 메인큰이미지코드 ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */

/* 롤링배너 */
#event .MS_img-wrap { position: relative; width: 100%; overflow: hidden; }
#event .event-imgs { position: relative; }
#event .MS_img-area { float: left; }
#event .MS_img-area:not(:first-child) { display: none; }
#event .MS_img-area img { width: 100%; }
#event .pagination { position:absolute; bottom:10px; left: 0; text-align: center; width: 100%; }
#event .pagination .swiper-pagination-switch { display: inline-block; margin: 0 2px; text-indent: -9999px;  background: #999; width: 10px; height: 10px;  border-radius: 20px;}
#event .pagination .swiper-active-switch {     opacity: 1;   background: transparent;   border: 3px solid rgba(255, 255, 255, 1);   box-sizing: content-box;   position: relative;   top: 2px;  }
/* //롤링배너 */

#event .icon { position: absolute; left: 10px; bottom:45px; }
#event .icon p img { width:30px; margin-top:5px}


/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ // 메인큰이미지코드 - 끝 ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */



/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ 배너2개코드 ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */

.main h3 {font-size:1.250em; display: inline-block; margin:45px 0 18px 0; padding-top:6px; border-top:1px solid #3b3b3b;}

.main .topBanner {margin:5px auto;}
.main .topBanner .topBannerLeft {width:49%; float:left; position:relative;}
.main .topBanner .topBannerRight {width:49%; float:right; position:relative;}
.main .topBanner img {width:100%; vertical-align:top;}
.main .topBanner .topBannerTitle {width:100%; font-size:1.083em; font-weight:bold; padding:2px 0; background-color:rgba(0,0,0,0.4);; text-align:center; color:#fff; position:absolute; bottom:0; left:0;}

/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ // 배너2개코드 - 끝 ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */








/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ 메인베스트 슬라이드코드 ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */

.bestbox {width:100%; overflow:hidden; background:#fff; margin-top:10px; padding-bottom:20px;  height:auto;}
.menu-list {width: 100%; margin: 0 auto; overflow: hidden; height:60px;}
.menu-list .listcate{ }
.menu-list ul {overflow:hidden; border-top: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; vertical-align: baseline; }
.menu-list ul li{width:20%; float:left;  height:40px; line-height:40px;  text-align:center; border-left:1px solid #f4f4f4;margin-left:-1px;  border-bottom:1px solid #f4f4f4; background:#dedede; cursor:pointer; color:#fff; font-size:11px; text-decoration:none;}
.menu-list ul li.active{background:#fff; border-bottom:0px; color:#333;}

.swiper-container {width: 100%; margin: 0 auto; overflow:hidden;}
.swiper-container  .swiper-wrapper{width: 100%;height:auto !important; margin: 0 auto; margin-top:0px; margin-bottom:0px; overflow:hidden;}
.swiper-container  .swiper-wrapper .swiper-slide{float:left; height:auto !important; overflow:hidden;}
.swiper-container ul{overflow:hidden;}
.swiper-wrapper {position: relative;width: 100%;}

/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ // 메인베스트 슬라이드코드 - 끝 ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */



▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ 배너 슬라이드코드 ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */

/* 배너슬라이드코드 */

#banner-slide { margin:0px auto ;text-align:center; }
#banner-slide .slider { width: 100%; margin:40px auto 30px  }
#banner-slide .slick-slide { margin: 0px; }
#banner-slide .slick-slide img { width: 100%; }


/* Arrows */
.slick-prev  { z-index:10; position: absolute;  top: 50%;display: block;  width: 30px;  height: 50px;  padding: 0;
   -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    opacity: 0.7;
    background:url(/design/vipm133/wizmobile/main_arrow_prev.png) 0 0 no-repeat;
     -o-transition: all 0.25s 0.0s ease-in-out;
    -ms-transition: all 0.25s 0.0s ease-in-out;
    -moz-transition: all 0.25s 0.0s ease-in-out;
    -webkit-transition: all 0.25s 0.0s ease-in-out;
    transition: all 0.25s 0.0s ease-in-out;
    left: 10px;
}

.slider:hover  .slick-prev {left:10px;  opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}  /* 마우스오버시 위치 */

.slick-next {z-index:10; position: absolute;  top: 50%;  display: block;  width: 30px;  height: 50px;  padding: 0;
   -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
	opacity: 0.7;
    background:url(/design/vipm133/wizmobile/main_arrow_next.png) 0 0 no-repeat;
     -o-transition: all 0.25s 0.0s ease-in-out;
    -ms-transition: all 0.25s 0.0s ease-in-out;
    -moz-transition: all 0.25s 0.0s ease-in-out;
    -webkit-transition: all 0.25s 0.0s ease-in-out;
    transition: all 0.25s 0.0s ease-in-out;
    right: 10px; 

}

.slider:hover  .slick-next { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; right:10px  } /* 마우스오버시 위치 */


/* Dots-  */
 .slick-slider {
  margin-bottom:0; }

 .slick-dots {
  position: absolute;
  bottom:-20px;
  padding:0;
  display:block;
  list-style: none;
  display: block;
  text-align: center;
  width: 100%; }
 .slick-dots li {
    position: relative;
    display: inline-block;
    margin: 0 4px;
    padding: 0;
    cursor: pointer; }
 .slick-dots li button {
      border: 0;
      background: transparent;
      display: block;
      outline: none;
      line-height: 0;
      font-size: 0;
      color: transparent;
      padding: 0;
      cursor: pointer; }
 .slick-dots li button:hover, .slick-dots li button:focus {
        outline: none; }
 .slick-dots li button:hover:before, .slick-dots li button:focus:before {
          opacity: 1; }
 .slick-dots li button:before {
		display:block;
		width:10px;
		height:10px;
        content: "";
		background:#999;
		border-radius:30px;
        font-size: 0;
        text-align: center;
        color: white;
        opacity: 1;
	  -o-transition:0.3s !important;
	  -ms-transition:0.3s !important;
	  -moz-transition:0.3s !important;
	  -webkit-transition:0.3s !important;
	  transition:0.3s !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
 .slick-dots li.slick-active button:before {
      background:#000;
	  width:10px;
      opacity: 1; }


/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ // 배너 슬라이드코드 - 끝 ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

/* BASIC css end */