@charset "utf-8";

/*栏目导航*/
 #mynav{width:100%; height: 104px;position: fixed;top: 0;background:#fff;opacity:0.95; border-bottom:1px solid #F1F1F1;z-index:999;}
@media screen and ( max-width:768px ){
    #mynav{width:100%; height:60px;overflow: hidden;position:static;}
}
.header{ margin: 0 auto; width: 1200px; height: 104px; overflow: hidden;background: url(/template/img/top-tel.png) right center no-repeat;}
.head-logo{float:left; display: inline;overflow: hidden;}
.head-logo img{width: 189px; height: 58px; padding: 23px 0;float: left;display: inline;}
.head-logo span{ font-size: 13px;float: left;display: inline;line-height:18px; padding:35px 0 0 15px;}

.head-nav{ width:560px; overflow: hidden;float: right;display:inline-block ;margin-top:26px; padding-right: 260px;}
.head-nav ul{font-size: 16px;}
.head-nav ul li{float: left; height: 50px;line-height:50px; margin: 0 10px; }
.head-nav ul li a{ color: #333;margin:8px 15px ; padding:10px 0;}
.head-nav ul li a#cut{border-bottom: 2px solid #c23136; color: #c23136; }
.head-nav ul li a:hover{ border-bottom: 2px solid #c23136; color: #c23136; }

@media screen and ( max-width:768px ){
	.header{ width: 240px;height: 60px;background:#fff;}
    .head-logo{ margin:0 auto;width:250px; overflow: hidden;}
    .head-logo img{ height:40px;width: auto; padding:10px 0;float: left;display: inline;}
    .head-logo span{ font-size: 12px;float: left;display: inline;line-height:18px; padding:16px 0 0 13px;}
    .head-nav{ display: none;}
}

/* WAP快速链接 */
.wap-i-link{display: none;}
    @media screen and ( max-width:768px ){
	.wap-i-link{display: block;}
    .wap-i-link{ width: 90%;overflow: hidden; padding: 15px 0; margin: 0 auto;}
    .wap-i-link ul{width: 100%;overflow: hidden;}
    .wap-i-link ul li{float: left;display: inline;width: 21%; padding:10px 2%;overflow: hidden; text-align: center;}
    .wap-i-link ul li img{ width:80%;}
    .wap-i-link ul li i{display: block;text-align: center;font-size:0.8rem; padding-top: 10px;}
}

/* case */
.i-case{width:90%;padding-top:80px; margin:0 auto; }
.i-case ol{ width:100%;margin: 0 auto;}
.i-case ol h1{ display: block; background: url(/template/img/x.png) bottom center no-repeat; text-align: center; padding-bottom: 25px;font-size:50px;color:#333;}
.i-case ol i{ display: block; text-align: center; padding-top: 20px;font-size: 16px;}
.i-case ul{ width:100%;padding-top:10px;}
.i-case ul li{float:left;display: inline-block;overflow: hidden; width:24%;margin: 20px 0.5% 0 ;position: relative;box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.i-case ul li span{display: block; text-align: center;position: absolute; width: 100%; height:100%;left:0;bottom:20px;background:url(/template/img/play.png) no-repeat center center;background-size:15% ;}
.i-case ul li img{display: inline-block;width: 100%;-webkit-transition: all 1s linear;-moz-transition: all 1s linear;-o-transition: all 1s linear;transition: all 1s linear;}
.i-case ul li i{border-left: 1px solid #F1F1F1;border-right: 1px solid #F1F1F1;border-bottom: 1px solid #F1F1F1; display: block; text-align: center;font-size: 16px; padding: 15px 0;height:20px;}
.i-case ul li:hover{position: relative;box-shadow: 0 0 10px rgba(0,0,0,0.5);opacity:1;filter:alpha(opacity=100);visibility: visible;}
.i-case ul li:hover span{display: block; text-align: center;position: absolute;left:0;bottom:20px;background:url(/template/img/play-hover.png) no-repeat center center;background-size:15% ;}
.i-case ul li:hover img{ -webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1)}
.i-case ul li a{color: #666;}
.i-case ul li a:hover{ color: #F54766;}
.i-case ul dt{ width: 100%;overflow:hidden ; text-align: center; padding: 60px 0 50px;}
.i-case ul dt span{overflow: hidden;font-size: 14px;}
.i-case ul dt span em{overflow: hidden;font-size: 16px;}
.i-case ul dt span a{border:solid 1px #eee;padding:16px 70px;overflow: hidden;}
.i-case ul dt span a:hover{border:dotted 1px #F1F1F1;background: #F20956; color: #FFFFFF;-webkit-transition:background-color .5s;transition:background-color .5s;}
@media screen and ( max-width:768px ){
   .i-case{ width: 100%;overflow: hidden;padding-top:40px; }
   .i-case ol{overflow: hidden; width: 100%;}
   .i-case ol h1{ display: block; background: url(/template/img/x.png) bottom center no-repeat; text-align: center; padding-bottom:15px;font-size:1.8rem;}
   .i-case ol i{ display: block; text-align: center; padding-top: 12px;font-size:0.9rem;}
   .i-case ul{ width:100%;overflow:hidden;padding-top:10px; position: relative;}
   .i-case ul li{overflow: hidden; width:48%; float: left; display: inline;margin:10px 1% 0 1%;position: relative;box-shadow: 0 0 10px rgba(0,0,0,0);}
   .i-case ul li i{border-left: 1px solid #F1F1F1;border-right: 1px solid #F1F1F1;border-bottom: 1px solid #F1F1F1; text-align: center; font-size:0.9rem;padding:0;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:1;  overflow: hidden;line-height:2.5rem;  height:2.5rem;}
   .i-case ul li:hover{overflow: hidden; width:48%; float: left; display: inline;margin:10px 1% 0 1%;position: relative;}
   .i-case ul li span{display: block; text-align: center;position: absolute; width: 100%; height:100%;left:0;bottom:20px;background:url(/template/img/play.png) no-repeat center center;background-size: 18%; }
   .i-case ul li:hover span{display: block; text-align: center;position: absolute;left:0;bottom:20px;background:url(/template/img/play-hover.png) no-repeat center center;background-size: 18%;}
   .i-case ul dt{ width: 100%;overflow:hidden ; text-align: center; padding:40px 0 25px;}
   .i-case ul dt span{overflow: hidden;font-size: 1rem;}
   .i-case ul dt span em{overflow: hidden;font-size: 1rem;}
   .i-case ul dt span a{border:solid 1px #F1F1F1;background: #F22D11; color: #FFFFFF;overflow: hidden;border-radius: 100px;padding:0.8rem 3rem;}
   .i-case ul dt span a:hover{border:solid 1px #F1F1F1;background: #F22D11; color: #FFFFFF;}
}