/* BASIC css start */
/* 메인 비쥬얼 배너 */
#mainSpot { position:relative; width:100%; min-width:1000px; height:500px; overflow:hidden }
#mainSpot .inner { margin-left:-1000px; position:absolute; top:0; left:50%; right:0; width:2000px; height:500px }
#mainSpot .bx-pager { position:absolute; bottom:15px; left:0; right:0; height:11px; text-align:center }
#mainSpot .bx-pager .bx-pager-item { display:inline-block;  margin:0 7px }
*:first-child+html #mainSpot .bx-pager .bx-pager-item { display:inline } /* IE7 Hack */
#mainSpot .bx-pager .bx-pager-item a { display:block; width:11px; height:11px; text-indent:-9999em; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/main/sp_spot_pager.png) 0 0 no-repeat }
#mainSpot .bx-pager .bx-pager-item a.active { background-position:0 -11px }

/* 이미지 배너 */
.imgBanner { margin:30px auto 0; position:relative; width:1000px; overflow:hidden }
.imgBanner ul { *zoom:1 }
.imgBanner ul:after { display:block; clear:both; content:'' }
.imgBanner ul li { padding-right:10px; float:left }

/* 상품 목록 영역 */
.product-wrap { margin:0 auto; position:relative; width:1100px }

/* 고정 이미지 배너 */
.fixedBnnr { position:relative; width:100%; min-width:1100px; height:220px; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/main/fixbn.jpg) center top no-repeat fixed }
.fixedBnnr .inner { margin:0 auto; position:relative; width:1100px; text-align:center }
.fixedBnnr .inner .tx { padding-top:100px; font-size:16px; color:#fff; letter-spacing:16px }









.banner-container{
  width:937px;
  height:370px;
  overflow:hidden;
}
.banner{
  width:calc(300vw*5);
  height:100%;
  display:flex;
  animation: animation1 30s infinite;
  /*기본 전환 animation을 위한 설정*/
  -webkit-transition: all 1s cubic-bezier(1, .01, .32, 1);
  -moz-transition: all 1s cubic-bezier(1, .01, .32, 1);
  -o-transition: all 1s cubic-bezier(1, .01, .32, 1);
  -ms-transition: all 1s cubic-bezier(1, .01, .32, 1);
  transition: all 1s cubic-bezier(1, .01, .32, 1);
}
.banner>div{
  width:937px;
  height:100%;
}
.banner>div:nth-child(1){                                               
  background-image:
}
.banner>div:nth-child(2){
  background-image:
}
.banner>div:nth-child(3){
  
}
.banner>div:nth-child(4){
}
}
.banner>div:nth-child(5){
}
.list-button{
  width:100%;
  height:10px;
  display:flex;
  justify-content:left;
  margin-top:-23px;
  position:absolute;
  z-index:2;
}
.list-button-item{
  width:30px;
  height:10px;
  border-radius:10rem;
  background-color:white;
  cursor: pointer;
  display: inline-block;
  margin:7px;
}
.list-button-item.active{
  background-color:green;
}
@keyframes animation1 {
  0% {margin-left: 0}
  20% {margin-left: 0}
  25% {margin-left: -100%}
  45% {margin-left: -100%}
  50% {margin-left: -200%}
  70% {margin-left: -200%}
  75% {margin-left: -300%}
  95% {margin-left: -300%}
  100% {margin-left: 0}
}
@keyframes animation2 {
  0% {margin-left: -100%}
  20% {margin-left: -100%}
  25% {margin-left: -200%}
  45% {margin-left: -200%}
  50% {margin-left: -300%}
  70% {margin-left: -300%}
  75% {margin-left: 0}
  95% {margin-left: 0}
  100% {margin-left: -100%}
}
@keyframes animation3 {
  0% {margin-left: -200%}
  20% {margin-left: -200%}
  25% {margin-left: -300%}
  45% {margin-left: -300%}
  50% {margin-left: 0}
  70% {margin-left: 0}
  75% {margin-left: -100%}
  95% {margin-left: -100%}
  100% {margin-left: -200%}
}
@keyframes animation4 {
  0% {margin-left: -300%}
  20% {margin-left: -300%}
  25% {margin-left: 0}
  45% {margin-left: 0}
  50% {margin-left: -100%}
  70% {margin-left: -100%}
  75% {margin-left: -200%}
  95% {margin-left: -200%}
  100% {margin-left: -300%}
}

















@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 33s slidy infinite; 
}

/* BASIC css end */