锘緻charset 'utf-8';

#sideNav{margin:auto;float:none;overflow: hidden;}
  #sideNav .sideNav{width:167px;float: left;text-align: center;font-size: 2rem;line-height: 150%;}
  #sideNav .sideNav a{color:#666;}
  #sideNav .sideNav.c a{color:#BA0C2B;border-bottom:2px solid #BA0C2B;}

#listbox{width:96%;max-width:1130px;padding-top: 10px;float:none;margin:auto;}
#listbox .li{position: relative;;margin:0 0 2rem;border: 1px solid #ccc;
  overflow: hidden;cursor: pointer;}
#listbox .li .pic{width:50%;height:100%;position: absolute;top:0;
  overflow:hidden;background:#fff no-repeat center center;background-size:100% auto;}
  #listbox .li .pic .jc{width:100%;height: 100%;display: none;background: rgba(186,12,43,.5);}
#listbox .li img{width:100%;}
#listbox .li .title{width:50%;height:100%;position: absolute;top:0;
  text-align:left;font-size:1.6rem;color:#404040;overflow:hidden;}
  #listbox .li .title .bg{height:70%;margin:2em;position: relative;}
  #listbox .li .title h1{margin:0;}
  #listbox .li .title h2{margin:0.3em 0;}
#listbox .li .title font{font-size:0.8em;color:#666;line-height:1.6rem;}
#listbox .li .star{position:absolute;top:0;right:0;width:40%;max-width: 119px;overflow: hidden;
  box-sizing: border-box;line-height:1px;filter: grayscale(100%);filter: gray;}
#listbox .li .star img{width: 100%;}
#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:0;width:100%;left:0;font-family: "瀹嬩綋"}
  #listbox .li:hover{border: 1px solid #BA0C2B;}
  #listbox .li:hover .title  h1,#listbox .li:hover .detail{color:#BA0C2B;}
  #listbox .li:hover .pic .jc{display: block;}
  #listbox .li:hover .star{filter: grayscale(0%);}
#listbox .li:nth-child(2n+1) .pic,#listbox .li:nth-child(2n+0) .title{right: 0;}
#listbox .li:nth-child(2n+0) .pic,#listbox .li:nth-child(2n+1) .title{left: 0;}

#connect{width:100%;max-width: 1167px;min-height: 0;}
#connect h1{text-align: center;margin: 0;font-size: 3rem;color:#BA0C2B;letter-spacing: 0.2em;font-weight: bold;}
#connect h2{text-align: center;margin-top: 0.5rem;font-weight: normal;color:#666;font-size:1.4rem;}
#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: 740px){
  #listbox .li .title .bg{height:70%;margin:1em;position: relative;}
  #listbox .li .title h1{font-size: 2.2rem}
  #listbox .li .title h2{font-size:1.6rem;}
}

@media screen and (max-width: 640px){
  #connect h1{font-size: 2.2rem}
  #connect h2{font-size:1.6rem;}
  #listbox .li{margin-bottom: 0.8rem;}
  #listbox .li .title h1{font-size: 1.8rem}
  #listbox .li .title h2{font-size:1.2rem;}
  #listbox .li h1,#listbox .li .detail{color:#BA0C2B;}
  #listbox .li .star{filter: grayscale(0%);top:auto;bottom:0;}
  #listbox .detail{display: none;}
  #connect #detail{width:100%;padding:2rem 1rem;}
}