.title{text-align:center; padding-bottom:18px;}
.title h2{font-size:28px;}
.title p{opacity:.68; font-size:16px; font-family:Times,serif, Microsoft Yahei;}
.title:after{width:58px; height:3px; display:block; content:''; margin:12px auto 0 auto; background:{$common.hrcolor};}
@media(max-width:767px){ 
.title{padding-bottom:12px;}
.title h2{font-size:24px;}
.title p{font-size:14px;}
.title:after{width:38px; height:2px; margin:8px auto 0 auto;}
}

{if:($product.display)}
.product{background:{$product.back_color}; overflow:hidden; }
.product .list-box{text-align:center;}
.product .list-box ul:after{display:block; content:''; clear:both;}
.product .list-box ul li{width:25%; float:left;}
.product .list-box ul li a{display:block; transition:.3s;}
.product .list-box ul li a span{display:block; overflow:hidden;}
.product .list-box ul li a span img{display:block; width:100%; transition:.3s;}
.product .list-box ul li a:hover span img{transform:scale(1.05);} 
.product .list-box ul li a h4{display:block; padding-bottom:0 !important; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:inherit;}
.product .list-box ul li a h3{display:block; text-align:center; color:red;}
@media(min-width:992px){
.product{padding-top:28px; padding-bottom:28px;}
.product .list-box ul li{width:25%;}
}
@media(max-width:991px){
.product{padding-top:18px; padding-bottom:18px;}
.product .list-box ul li{width:50%;}
}
@media(min-width:768px){ 
.product .list-box ul{margin:0 -8px;}
.product .list-box ul li{padding:8px;}
.product .list-box ul li a h4{padding:8px;}
}
@media(max-width:767px){ 
.product .list-box ul{margin:0 -4px;}
.product .list-box ul li{padding:4px;}
.product .list-box ul li a h4{padding:4px;}
}
{/if}

{if:($introduce.display)}
.introduce{overflow:hidden; background:{$introduce.back_color}; }
.introduce .content{margin-top:18px;}
.introduce .content:after{display:block; content:''; clear:both;}
@media(min-width:992px){
.introduce .content>img{float:left; width:33.333%;}
.introduce .content>img+aside{float:left; width:66.6666%; padding-left:28px;}
.introduce{padding-top:28px; padding-bottom:28px;}
}
@media(max-width:991px){
.introduce{padding-top:18px; padding-bottom:18px;}
}
@media(max-width:767px){
.introduce aside{margin-top:8px;}
}
{/if}

{if:($news.display)}
.news{overflow:hidden; background:{$news.back_color}; }
.news .list-box ul:after{display:block; content:''; clear:both;}
.news .list-box ul li{float:left;}
.news .list-box ul li a{transition:.3s;}
.news .list-box ul li>a>span{float:left; overflow:hidden; width:160px;}
.news .list-box ul li a span img{display:block; transition:.3s;}
.news .list-box ul li a:hover span img{transform:scale(1.05);} 
.news .list-box ul li>div{padding-left:178px;}
.news .list-box ul li>div h3{display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.news .list-box ul li>div i{opacity:.68; font-style:normal; display:block; padding:8px 0;}
.news .list-box ul li>div p{opacity:.88; overflow:hidden; height:{$common.ftsize|intval=ceil(###*$common.liheight*2)}px;}
@media(min-width:992px){
.news{padding-top:28px; padding-bottom:28px;} 
.news .list-box ul{margin:0 -8px;}
.news .list-box ul li{width:50%; padding:8px;}
}
@media(max-width:991px){
.news{padding-top:18px; padding-bottom:18px;} 
.news .list-box ul li{width:100%; padding:4px 0;}
}
@media(min-width:768px){ 
}
@media(max-width:767px){ 
.news .list-box ul li>a>span{width:100px;}
.news .list-box ul li>div{padding-left:108px;}
.news .list-box ul li>div i{padding:0;}
.news .list-box ul li>div p{height:auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
}
{/if}