.p_Product{
 width:calc((100% - 0px)/6);
}
 .p_CommonSummaryBoxA{
 text-align:center;
}
 .p_stylebox .title_icon:before{
 content:'\e6cd';
}
 .p_stylebox .link_icon:before{
 content:'\e6ae';
}
 .p_MatteIcon .iconfont:before{
 content:'\e602';
}
 >div{
 animation-fill-mode:both;
}
 .proBox{
 width:100%;
 height:auto;
 overflow:hidden;
}
 .proContainer{
 width:100%;
 height:auto;
 overflow:hidden;
 margin:0rem auto;
}
 .proLi{
 position:relative;
 overflow:hidden;
 padding:20px 10px;
}
 .porTbox{
 position:relative;
 overflow:hidden;
 width:100%;
 height:auto;
 padding-bottom:75%;
}
 .proImg{
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%, -50%);
 width:100%;
 height:100%;
 transition:all .5s ease;
 border-width:1px;
 border-style:solid;
 border-color:rgba(255,255,255,0.3);
}
 .porBbox{
 position:relative;
 overflow:hidden;
 width:100%;
 height:auto;
 background:rgba(255,255,255,0.8);
 padding:20px 20px 10px;
 border:1px solid #f2f2f2;
}
 .proTitle{
 font-size:16px;
 color:#333;
 overflow:hidden;
 text-overflow:ellipsis;
 position:relative;
 white-space:nowrap;
 width:100%;
 margin-bottom:10px;
}
 .proSummry{
 color:#777;
 white-space:nowrap;
 overflow:hidden;
 margin:10px 0;
 text-overflow:ellipsis;
 display:none;
}
 .lookDetail{
 position:relative;
 display:block;
 color:#777;
 height:38px;
 text-align:left;
 line-height:38px;
 border-top:1px solid #e5e5e5;
}
 .arrowsR{
 position:absolute;
 top:50%;
 right:0px;
 transform:translate(0, -50%);
 width:30px;
}
 .arrowsR img{
 position:absolute;
 transition:all .5s ease;
}
 .harr{
 opacity:0;
}
 .showBox{
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 opacity:0;
 background:rgba(255,153,0,.8);
 transition:all 0.5s ease;
}
 .showBoxLink{
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 display:block;
 width:60%;
 color:#fff;
 text-align:center;
 font-size:14px;
 padding:0.5rem 0;
}
.showBoxLink:hover {
color:#ffffff;
}
 .showBoxLink::before{
 content:'';
 position:absolute;
 top:0px;
 left:50%;
 transform:translateX(-50%);
 width:60%;
 height:1px;
 background:#fff;
 transition:all .5s ease;
}
 .showBoxLink::after{
 content:'';
 position:absolute;
 bottom:0px;
 left:50%;
 transform:translateX(-50%);
 width:60%;
 height:1px;
 background:#fff;
 transition:all .5s ease;
}
 .lookDetail:hover .barr{
 opacity:0;
}
 .lookDetail:hover .harr{
 opacity:1;
}
 .proLi:hover .showBox{
 opacity:1;
}
 .proLi:hover .proImg{
 transform:translate( -50% ,-50%) scale(1.1);
}
 .proLi:hover .showBoxLink::before{
 width:1rem;
}
 .proLi:hover .showBoxLink::after{
 width:1rem;
}
@media only screen and (max-width:768px){
 
 .proContainer {
 max-width:100%;
 }
 .proLi {
 width:calc(100% / 2);
 height:auto;
 float:left;
 }
}
@media only screen and (min-width: 769px){
 .proContainer{
 max-width:100%;
}
 .proLi{
 width:calc(100% / 4);
 height:auto;
 float:left;
}

}
@media only screen and (max-width: 1024px) and (min-width: 769px){
 
 .proContainer {
 max-width:100%;
 }
 .proLi {
 width:calc(100% / 2);
 height:auto;
 float:left;
 }
}
 .p_page .pre .iconfont:before{
 shadow-angle:0px;
 shadow-distance:0px;
 shadow-angle-ofInset:0px;
 shadow-distance-ofInset:0px;
}
 .p_page .next .iconfont:before{
 shadow-angle:0px;
 shadow-distance:0px;
 shadow-angle-ofInset:0px;
 shadow-distance-ofInset:0px;
}
 .p_more .iconfont:before{
 shadow-angle:0px;
 shadow-distance:0px;
 shadow-angle-ofInset:0px;
 shadow-distance-ofInset:0px;
}
 .p_loading .iconfont:before{
 shadow-angle:0px;
 shadow-distance:0px;
 shadow-angle-ofInset:0px;
 shadow-distance-ofInset:0px;
}