锘緻charset 'utf-8';

#main{max-width: 1000px;}
#sideNav{width:23%;max-width:200px;float:right;font-size:1.6rem;
  overflow:hidden;padding-bottom:5px;font-weight: bold;color:#606060;}
#sideNav .subTitle{width:96%;margin-left: 3%;float:left;font-size: 1.4rem;
  margin-bottom:1rem;margin-top: 3rem;}
#sideNav .subTitle .am-fl{width:100px;background: url(../../images/arrow2.png) no-repeat right center;text-align: left;}
#sideNav .subTitle .am-fr{font-weight: normal;}
#sideNav .sideNav{width:30%;margin-left: 3%;float:left;height:auto;text-align:center;
  cursor:pointer;border:1px solid #eee;border-radius:6px;
   margin-bottom:10px;overflow:hidden;position: relative;}
   #sideNav .sideNav img{width:100%;}
#sideNav .sideNav:hover{color:#BA0C2B;}
#sideNav .sideNav.c{background:#BA0C2B;color:#fff;
  border:1px solid #BA0C2B;cursor:default;}
#sideNav .sideNav.c:hover{color:#fff;}
#sideNav .sideNav div{position: absolute;height:30px;line-height:30px;
  margin-top: -15px;top:50%;width: 100%;text-align: center;}
#fiveStart{width:96%;margin-left: 3%;float:left;}

#listbox{width:75%;max-width: 885px;padding-top: 10px;float: left;}
#listbox .li{position: relative;;margin:0 0 2rem;border: 1px solid #ccc;
  border-radius: 2.7rem;overflow: hidden;cursor: pointer;box-sizing: border-box;}
#listbox .li .pic{width:100%;height:67.4%;position:absolute;top:0;left:0;
  overflow:hidden;background:#fff no-repeat center center;background-size:auto 100%;}
  #listbox .li .pic .jc{width:100%;height: 100%;display: none;
    background: url(images/liBg.png) no-repeat 0 0;background-size:100% auto;}
#listbox .li img{width:100%;}
#listbox .li .title{width:100%;height:32.6%;position:absolute;bottom:0;left:0;
  text-align:center;padding:10% 0px;font-size:1.5rem;border-top: 1px solid #ccc;
  color:#404040;line-height:1.8rem;white-space:nowrap;font-weight: bold;
  overflow:hidden;text-overflow:ellipsis;}
#listbox .li .title font{font-size:0.8em;color:#666;line-height:1.6rem;}
#listbox .li .star{position: relative;width:46%;max-width: 119px;margin:3% auto;overflow: hidden;
  box-sizing: border-box;line-height:1px;}
#listbox .li .star .mask{position:absolute;bottom:0;left:0;height:100%;width:100%;
  background: url(../../images/star_0.png) no-repeat 0 0;
  background-size:auto 100%;z-index: 999}
#listbox .detail{position:absolute;bottom:10%;width:100%;left:0;padding:0 25%;z-index: 10000;display: none;}
#listbox .detail img{max-width: 117px;margin: auto;}
  #listbox .li:hover{box-shadow: 0px 0px 10px #888888;border-color:rgba(136,136,136,0.6);}
  #listbox .li:hover .title{background:#BA0C2B;border-top: 1px solid #BA0C2B;color:#fff;}
  #listbox .li:hover .title font{color:#fff;}
  #listbox .li:hover .detail{display: block;}
  #listbox .li:hover .star{display: none;}
  #listbox .li:hover .pic .jc{display: block;}

#connect{width:100%;max-width: 1167px;}
#connect #imagesBox{}
  #imagesBig{border-radius:5%;overflow: hidden;background-size:100% auto;
    background-position: center center;background-repeat: no-repeat;
    border:1px solid #eee;box-sizing: border-box;}
  #imagesSmall .img{width:32%;margin-right: 2%;float:left;padding:0;
    border:1px solid #ccc;box-sizing: border-box;cursor: pointer;
    background-size:auto 100%;background-position: center center;}
    #imagesSmall .img.cover{border: 1px solid #BA0C2B;}
  #imagesSmall .img:last-child{margin-right: 0;}
#connect #detail{}
  #connect #detail h1{color:#BA0C2B;margin-bottom:0.5rem;font-size: 2.2rem;}
  #connect #detail h2{color:#777;margin-top: 0;font-size:1.7rem;font-weight: normal;}
  #connect #detail .star{position: relative;width:46%;max-width: 90px;float: left;clear: right;margin-top:3%;overflow: hidden;
    box-sizing: border-box;line-height:1px;}
  #connect #detail .star img{width:100%;}
  #connect #detail .star .mask{position:absolute;bottom:0;left:0;height:100%;width:100%;
    background: url(../../images/star_0.png) no-repeat 0 0;
    background-size:auto 100%;z-index: 999}
  #connect #detail hr{border-color: #bbb;}
  #connect #detail .cd{color:#666;font-size: 1.2rem;}
  #connect #detail .buy{color:#666;font-size: 1.2rem;margin: 0.8rem 0 0;overflow: hidden;}
  #connect #detail .buy span{margin-top:1rem;line-height:2.2rem;float: left;}
  #connect #detail .buy span i{padding-right: 0.5rem;color:#BA0C2B;}
  #connect #detail .buy img{float: left;clear: none;}
  #connect #detail .detail{min-height:32rem;border:1px solid #bbb;padding:1rem;
    font-size: 1.4rem;color:#666;line-height: 200%;}
  #connect #detail .detail h1{font-size: 1.6rem;margin-top: 1rem;}

  @media screen and (max-width: 906px){
  	#sideNav{display:none;}
  	#btnShowSideNavSmall{display:block;}
  	#listbox,#connect{width:96%;max-width:906px;margin:auto;
  		overflow:hidden;float:none;}
  	#connect{width:92%;}
  }