@charset "utf-8";
/* CSS Document */
/* *{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#fff; color:#333;font-weight:500; font-family:'Microsoft Yahei';} */


.focus{
  /* height:415px; */
  /* width:980px; */
  /* margin:40px auto 0 auto; */
}
.focus .left{
  float:left; 
  /* width:680px; */
  width: 583px;
  /* height:415px;  */
  height: 400px;
  position:relative;
  overflow:hidden;
}
.focus .left li{
  position:absolute; 
  left:0; 
  top:0; 
  width:842px;
  height:415px; 
  z-index:1; 
  opacity:0; 
  filter:alpha(opacity=0);
}
.focus .left li.active{
  z-index:2;
}
.focus .left li p{
  display:none;
}

.focus .right{
  float:right; 
  /* width:282px; */
}
.focus .right li{
  position: relative;
  border: 1px solid transparent;
  /* height:88px;  */
  /* overflow:hidden;  */
  /* padding-left:10px; */
  /* background-image:url(../images/btns.png); */
  background-position:-120px 0;
   color:#33cccc; 
   font-size:24px; 
   line-height:88px; 
   margin-bottom:25px;
   cursor: pointer;
  }
  .focus .right li:last-child{
    margin-bottom: 0px;
  }
  .focus .right li img{
    width: 100%;
  }
.focus .right li:hover,.focus .right li.active{
  color:#fff;
  background-position:-120px -120px; 
  border: 2px solid #c30d23;
}
.focus .right li:hover i,.focus .right li.active i{
  display: block;
}
.focus .right li i{
  font-size: 18px;
  position: absolute;
  color: #c30d23;
  left: -13px;
  top: 50%;
  -webkit-transform: translateY( -50%);
  -moz-transform: translateY( -50%);
  -ms-transform: translateY( -50%);
  -o-transform: translateY( -50%);
  /* background-image:url(../images/btns.png);  */
  background-repeat:no-repeat; 
  display: none;
  /* width:60px;  */
  /* height:60px; */
   /* float:left;  */
   /* margin:15px 19px 0px 0; */
  }
.focus .right li i.i1{
  background-position:0 0;
}
.focus .right li i.i2{
  background-position:0 -60px;
}
.focus .right li i.i3{
  background-position:0 -120px;
}
.focus .right li i.i4{
  background-position:0 -180px;
}
.focus .right li:hover i.i1,.focus .right li.active i.i1{
  background-position:-60px 0;
}
.focus .right li:hover i.i2,.focus .right li.active i.i2{
  background-position:-60px -60px;
}
.focus .right li:hover i.i3,.focus .right li.active i.i3{
  background-position:-60px -120px;
}
.focus .right li:hover i.i4,.focus .right li.active i.i4{
  background-position:-60px -180px;
}


@media (max-width: 765px){
  .prodetail .container .top.clearfix .focus{
    height: 500px;
  }
  .prodetail .container .top.clearfix .hotline{
    height: 300px;
  }
  .focus .left {
    float: left;
    /* width: 680px; */
    width: 100%;
    /* height: 415px; */
    height: 360px;
    position: relative;
    overflow: hidden;
  }
  .focus .left img{
    width: 100%;
  }
  .focus .left li img{
    width: 100%;
    height: 100%;
  }
  .focus .right{
    width: 100% !important;
    float: none !important;
    margin-top: 10px;
  }
  .focus .right li{
    float: left;
    width: 33%;
  }
}