body {
  margin: 0;
  min-width: 1440px;
}
h2{
  font-family: -webkit-pictograph;
  font-size:30px;
  font-style:italic;
  text-align:center;
}
.swiper-container {
  padding-bottom:40px;
}
.swiper-wrapper{
}
.swiper-slide {
  width:828px;
  transition-timing-function:linear;
}

/*如下可以设置对应屏幕宽度控件的比例*/
/*@media only screen and (max-width:1440px){*/
/*  .swiper-slide {*/
/*    width:770px;*/
/*  }*/
/*}*/
/*@media only screen and (max-width:980px){*/
/*  .swiper-slide {*/
/*    width:471px;*/
/*  }*/
/*}*/
/*@media only screen and (max-height:480px){*/
/*  .swiper-slide {*/
/*    width:471px;*/
/*  }*/
/*}*/
.swiper-slide img{
  width:100%;
  border-radius: 4px;}
.swiper-slide .title{
  position:absolute;
  /*transform:rotate(90deg);*/
  /*left:-3px;*/

  background-color: rgba(0,0,0,0.4);
  left: 60%;
  top: 60%;
  padding: 10px;
  border-radius: 20px;

  transform-origin:left top;
  font-size:16px;
  color: #fff;}
.swiper-button-next, .swiper-button-prev{
  width:22px;
  height:39px;
  background-size:22px 39px;
  margin-top:-56px;
  outline:none;}
.swiper-button-next{
  background-image:url(../img/icon/eo_prod_right.png);
  margin-right: calc(50% - 385px);
}
.swiper-button-prev{
  background-image:url(../img/icon/eo_prod_left.png);
  margin-left: calc(50% - 385px + 22px);
}
.swiper-pagination-bullet{
  background:none;
  opacity:1;
  margin:0 6px !important;
  width:9px;
  height:9px;
  position:relative;
  outline:none;
  vertical-align:middle;}
.swiper-pagination-bullet span{
  width:3px;
  height:3px;
  background:#CCC;
  display:block;
  border-radius:50%;
  margin-top:3px;
  margin-left:3px;
}
.swiper-pagination-bullet i{
  background:#000;
  height:1px;
  width:20px;
  position:absolute;
  top:4px;
  transform:scaleX(0);
  transform-origin:left;
  z-index:3;
  transition-timing-function:linear;
}
.swiper-pagination-bullet-active span,.swiper-pagination-bullet:hover span{
  width:9px;
  height:9px;
  margin-top:0;
  margin-left:0;
  background:#000;
  position:relative;
  z-index:1;
}
.swiper-pagination-bullet-active i{
  animation:middle 6s;
}
.swiper-pagination-bullet:first-child.swiper-pagination-bullet-active i{
  animation:first 6s;
}
.swiper-pagination-bullet:last-child.swiper-pagination-bullet-active i{
  animation:last 6s;
}
@keyframes first{
  0% {transform:scaleX(0.5);left:0px;}/*091*/
  100% {transform:scaleX(1);left:2px;} /*0915*/
}
@keyframes last{
  0% {transform:scaleX(0.7);left:-10px;}/*1090*/
  20% {transform:scaleX(0.3);left:2px;} /*090*/
  100% {transform:scaleX(0.3);left:0px;} /*090*/
}
@keyframes middle{
  0% {transform:scaleX(0.7);left:-10px;}/*1091*/
  20% {transform:scaleX(0.45);left:2px;}/*092*/
  100% {transform:scaleX(1);left:2px;} /*0913*/
}