@charset "utf-8";
/* CSS Document */

/*cases*/
/*1300*/
/*#cases .mod{ width:1360px; height:auto; padding:0 30px;}
#cases .mod .mod-header{ width:100%; margin:20px 0;}
#cases .mod .mod-header .mod-return{ width:30px; height:30px; background:url(../../images/about_icon02.png) no-repeat center; background-size:cover; cursor:pointer;}
#cases .mod .mod-header .mod-menu{ width:1270px; height:30px; padding-left:20px;}
#cases .mod .mod-header .mod-menu li{ width:60px; height:30px; line-height:30px; text-align:center; float:left; cursor:pointer;
 border-right:1px solid #a8a8a8; border-top:1px solid #a8a8a8; border-bottom:1px solid #a8a8a8; color:#8c8c8c;}
#cases .mod .mod-header .mod-menu li a{ color:inherit; text-decoration:none;} 
#cases .mod .mod-header .mod-menu li:first-child{ border-radius:4px 0 0 4px; border-left:1px solid #a8a8a8;}
#cases .mod .mod-header .mod-menu li:last-child{ border-radius:0 4px 4px 0;}
#cases .mod .mod-header .mod-menu li.active{ background-color:#666; color:#fff; border-bottom:1px solid #666; border-top:1px solid #666;}
#cases .mod .main{ width:1300px; height:auto; padding:20px 40px 20px 60px;}
#cases .mod .main ul{ width:100%;}
#cases .mod .main ul li{ width:270px; height:258px; margin:15px; overflow:hidden; float:left; position:relative;}
#cases .mod .main ul li .pic{ width:270px; height:158px; overflow:hidden;}
#cases .mod .main ul li .pic img{ width:100%;}
#cases .mod .main ul li .text{ width:100%; height:100px; padding:15px 5%; background-color:#fff;}
#cases .mod .main ul li .text p{ line-height:16px;}
#cases .mod .main ul li .text p.t1{ color:#999; font-size:13px;}
#cases .mod .main ul li .text p.t2{ color:#222; font-size:16px;}
#cases .mod .main ul li .hovTop{ width:100%; height:158px; background-color:rgba(0,0,0,0.75); position:absolute; left:0; top:0; margin-top:-158px;}
#cases .mod .main ul li .hovTop img{ display:block; width:46px; height:46px; margin:77px auto;}
#cases .mod .main ul li .hovBot{ width:100%; height:100px; padding:15px 5%; background-color:#4db5f9; position:absolute; left:0; bottom:0; margin-bottom:-100px; cursor:default;}
#cases .mod .main ul li .hovBot p{ line-height:16px; color:#fff;}
#cases .mod .main ul li .hovBot p.t1{ font-size:13px;}
#cases .mod .main ul li .hovBot p.t2{ font-size:16px;}*/

#cases .mod{ width:80%; height:auto; padding:0 30px;}
#cases .mod .mod-header{ width:100%; margin:20px 0;}
#cases .mod .mod-header .mod-return{ width:30px; height:30px; background:url(../../images/about_icon02.png) no-repeat center; background-size:cover; cursor:pointer;}
#cases .mod .mod-header .mod-menu{ width:92%; height:30px; padding-left:20px;}
#cases .mod .mod-header .mod-menu li{ width:60px; height:30px; line-height:30px; text-align:center; float:left; cursor:pointer;
 border-right:1px solid #a8a8a8; border-top:1px solid #a8a8a8; border-bottom:1px solid #a8a8a8; color:#8c8c8c;}
#cases .mod .mod-header .mod-menu li a{ color:inherit; text-decoration:none;} 
#cases .mod .mod-header .mod-menu li:first-child{ border-radius:4px 0 0 4px; border-left:1px solid #a8a8a8;}
#cases .mod .mod-header .mod-menu li:last-child{ border-radius:0 4px 4px 0;}
#cases .mod .mod-header .mod-menu li.active{ background-color:#666; color:#fff; border-bottom:1px solid #666; border-top:1px solid #666;}
#cases .mod .main{ width:100%; height:auto; padding:20px 40px 20px 60px;}
#cases .mod .main ul{ width:100%;}
#cases .mod .main ul li{ width:23%; height:auto; margin:15px 1%; overflow:hidden; float:left; position:relative;}
#cases .mod .main ul li .pic{ width:100%; }
#cases .mod .main ul li .pic img{ width:100%;}
#cases .mod .main ul li .text{ width:100%; height:100px; padding:15px 5%; background-color:#fff;}
#cases .mod .main ul li .text p{ line-height:16px;overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis;}
#cases .mod .main ul li .text p.t1{ color:#999; font-size:13px;}
#cases .mod .main ul li .text p.t2{ color:#222; font-size:16px;}
#cases .mod .main ul li .hovTop{ width:100%; height:158px; background-color:rgba(0,0,0,0.75); position:absolute; left:0; top:0;}
#cases .mod .main ul li .hovTop img{ display:block; width:46px; height:46px; margin:20% auto;}
#cases .mod .main ul li .hovBot{ width:100%; height:100px; padding:15px 5%; background-color:#4db5f9; position:absolute; left:0; bottom:0; margin-bottom:-100px; cursor:default;}
#cases .mod .main ul li .hovBot p{ line-height:16px; color:#fff;overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis;}
#cases .mod .main ul li .hovBot p.t1{ font-size:13px;}
#cases .mod .main ul li .hovBot p.t2{ font-size:16px;}

@media screen and (max-width: 1440px) {
#cases .mod{ width:74%; height:auto; padding:0 30px;}	
#cases .mod .main ul li{ width:30.333%; height:auto; margin:15px 1.5%; overflow:hidden; float:left; position:relative;}
#cases .mod .main ul li .text p.t1{ color:#999; font-size:12px;}
#cases .mod .main ul li .text p.t2{ color:#222; font-size:15px;}
#cases .mod .main ul li .hovBot p.t1{ font-size:12px;}
#cases .mod .main ul li .hovBot p.t2{ font-size:15px;}
}

@media screen and (max-width: 1199px) {
#cases .mod .mod-header .mod-menu li{ width:52px;}
}

/*casesView*/
#casesView{ background-color:#eff2f4;}
#casesView .ca-header{ width:100%; height:450px; background:url(../../images/default/casesView_img.png) no-repeat center; background-size:cover;}
#casesView .ca-header .ca-menu{ width:100%; height:30px; padding:20px 60px;}
#casesView .ca-header .ca-menu li{ width:90px; height:30px; line-height:30px; text-align:center; float:left; cursor:pointer; border:1px solid #fff; color:#fff; border-radius:4px;
 margin-right:10px; position:relative;}
#casesView .ca-header .ca-menu li.n1{ padding-left:16px;}  
#casesView .ca-header .ca-menu li.n2{ padding-right:16px;} 
#casesView .ca-header .ca-menu li a{ color:inherit; text-decoration:none;} 
#casesView .ca-header .ca-menu li a i{ display:block; color:#fff; font-size:1.5em; position:absolute;}
#casesView .ca-header .ca-menu li a i.fa-angle-left{ left:16px; top:50%; margin-top:-11px;}
#casesView .ca-header .ca-menu li a i.fa-angle-right{ right:16px; top:50%; margin-top:-11px;}
#casesView .main{ width:1200px; margin:0 auto; padding:40px 0;}
#casesView .main .col{ margin-bottom:50px; cursor:default;}
#casesView .main .tit01{ width:100%; height:30px; line-height:30px; background:url(../../images/casesView_icon01.png) no-repeat left; text-indent:20px; font-size:22px; color:#333;}
#casesView .main .tit02{ width:100%; height:30px; line-height:30px; padding-left:20px; margin:20px 0;}
#casesView .main .tit02 .intro01{ display:inline-block; color:#333; font-size:16px;}
#casesView .main .tit02 .intro02{ display:inline-block; color:#888; font-size:16px; margin-left:50px;}
#casesView .main .text{ width:100%; color:#333; font-size:14px; line-height:22px; text-align:justify; margin:10px 0; padding-left:20px;}
#casesView .main .tagBox{ width:100%; margin:20px 0; padding-left:20px;}
#casesView .main .tagBox h3{ display:block; width:80px; height:30px; line-height:30px; font-size:14px; color:#000; background:url(../../images/casesView_icon02.png) no-repeat right; 
 margin-right:15px;}
#casesView .main .tagBox .tag{ height:30px; line-height:30px; color:#fff; font-size:14px; text-align:center; background-color:#3db3fe; float:left; margin:0 5px; padding: 0px 8px 0px 8px;}
#casesView .main .tagBox .tag a{ color:inherit; text-decoration:none;}
#casesView .main .show-img{ width:980px; margin:20px auto; border:20px solid #fff;}

@media screen and (max-width: 1200px) {
#casesView .main{ width:1004px;}
#casesView .main .show-img{ width:760px; margin:20px auto; border:20px solid #fff;}
}