@charset "utf-8";
/*互联网课堂*/
.local{ width:100%; background:#fafafa; height:70px; line-height:70px; font-size:16px;}
.local i{ color:#db0001; font-size:24px; margin-right:10px; line-height:70px;}
.case{overflow:hidden;width:1570px;margin:0 auto;background:#fff;margin-top:30px;}
.case ul{ padding:10px; padding-bottom:50px;}
.case ul li{ width:32%; float:left; margin-right:2%; margin-bottom:2%;box-shadow: 2px 2px 10px 0 rgba(58,83,107,0.12); padding:20px; border-radius:10px;}
.case ul li:nth-child(3n+3){ margin-right:0;}
.case ul li img{display:block;width:100%;-webkit-transition:all ease .7s;-o-transition:all ease .7s;-moz-transition:all ease .7s;transition:all ease .7s}
.case ul li a{display:block}
.case ul li a:hover img{-webkit-transform:scale(1.03);-moz-transform:scale(1.03);-ms-transform:scale(1.03);-o-transform:scale(1.03);transform:scale(1.03)}
.case ul li a:hover .name{color:#d93f3d}
.case ul li .thumb{position:relative;overflow:hidden;margin-bottom:15px}
.case ul li .thumb .ratio{display:block;width:100%;padding-bottom:62.96296%}
.case ul li .thumb img{position:absolute;top:0;left:0;width:100%;min-height:100%}
.case ul li .name{font-size:18px;line-height:32px;font-weight:bold;color:#1a1a1a}
.case ul li .desc{margin-bottom:10px;font-size:14px;color:#999;display:-webkit-box;height:72px;line-height:24px;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}

@media screen and  (max-width:1570px){
.case{overflow:hidden;width:1300px;margin:0 auto;background:#fff;margin-top:30px;}
}
@media screen and  (max-width:1280px){
.case{overflow:hidden;width:1180px;margin:0 auto;background:#fff;margin-top:30px;}
.case ul li .name{font-size:16px;line-height:32px;font-weight:bold;color:#1a1a1a}
.case ul li .desc{margin-bottom:10px;font-size:12px;color:#999;display:-webkit-box;height:60px;line-height:20px;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}

}
@media screen and  (max-width:768px){
.local{ width:100%; background:#fafafa; height:50px; line-height:50px; font-size:12px;}
.local i{ color:#db0001; font-size:16px; margin-right:10px; line-height:50px;}
.case{overflow:hidden;width:92%;margin:0 auto;background:#fff;margin-top:10px;}
.case ul{ padding:10px; padding-bottom:20px;}
.case ul li .name{font-size:14px;line-height:26px;font-weight:bold;color:#1a1a1a}
.case ul li .desc{margin-bottom:0px;font-size:12px;color:#999;display:-webkit-box;height:auto;line-height:20px;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.case ul li{ width:100%; float:left; margin-right:0%; margin-bottom:4%;box-shadow: 2px 2px 10px 0 rgba(58,83,107,0.12); padding:20px; border-radius:10px;}

.case ul li:nth-child(3n+3){ margin-right:4%;}
.case ul li .thumb{position:relative;overflow:hidden;margin-bottom:5px}

}
/*详情页*/
.top_bg{ width:100%; height:100px; background:#333;}
.caseshow{ width:1570px; margin:0 auto;box-shadow: 2px 2px 10px 0 rgba(58,83,107,0.12); margin-top:80px; margin-bottom:80px; padding:50px; min-height:500px; border-radius:10px;}
.caseshow h1{ text-align:center; font-size:32px; color:#333; font-weight:bold;}
.caseshow dl{ text-align:center; font-size:14px; color:#999; padding-top:20px; border-bottom:1px solid #f0f0f0; padding-bottom:20px;}
.caseshow dl span{ padding-left:15px; padding-right:15px;}
.case_content{font-size: 16px;line-height: 30px;color: #333; padding-top:30px;}
.case_content img{ max-width:100%; margin:0 auto;}
.case_content a{ color:#db0001; text-decoration:underline;}
.caseshow .prev{ width:100%; padding-top:50px; font-size:16px; color:#666;}
.caseshow .prev dd{ padding-top:5px; padding-bottom:5px;}
.caseshow .prev dd a{ color:#666; text-decoration:underline;}
.caseshow .prev dd a:hover{ color:#db0001}
@media screen and  (max-width:1570px){
.caseshow{ width:1300px; margin:0 auto;box-shadow: 2px 2px 10px 0 rgba(58,83,107,0.12); margin-top:30px; margin-bottom:80px; padding:50px; min-height:500px; border-radius:10px;}
}
@media screen and  (max-width:1280px){
.caseshow{ width:1180px; margin:0 auto;box-shadow: 2px 2px 10px 0 rgba(58,83,107,0.12); margin-top:30px; margin-bottom:50px; padding:50px; min-height:500px; border-radius:10px;}
.caseshow h1{ text-align:center; font-size:28px; color:#333; font-weight:bold;}

}
@media screen and  (max-width:768px){
.top_bg{ width:100%; height:50px; background:#333;}
.caseshow{ width:92%; margin:0 auto;box-shadow: 2px 2px 10px 0 rgba(58,83,107,0.12); margin-top:20px; margin-bottom:50px; padding:20px; min-height:500px; border-radius:10px;}
.caseshow h1{ text-align:center; font-size:16px; color:#333; font-weight:bold;}
.caseshow dl{ text-align:center; font-size:12px; color:#999; padding-top:15px; border-bottom:1px solid #f0f0f0; padding-bottom:15px;}
.caseshow dl span{ padding-left:10px; padding-right:10px;}
.case_content{font-size: 14px;line-height:26px;color: #333; padding-top:15px;}
.caseshow .prev{ width:100%; padding-top:50px; font-size:12px; color:#666;}

}
.related{ width:1570px; margin:0 auto; padding-bottom:80px;}
.related .title{margin-bottom:40px;font-size: 30px;color: #34364b;font-weight: bold; text-align:center}
.related ul{ width:100%;}
.related li{float:left;width:25%}
.related a{display:block;overflow:hidden;margin:0 13px 23px;border:1px solid #d2d2d2;padding:20px 30px 19px;-webkit-transition:all ease .3s;-o-transition:all ease .3s;-moz-transition:all ease .3s;transition:all ease .3s}
.related a:hover{border-color:#db0001}
.related a:hover h2{color:#db0001}
.related a:hover p{color:#db0001}
.related h2{margin-bottom:4px;font-size:16px;display:-webkit-box;height:48px;line-height:24px;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#34364b}
.related p{font-size:14px;line-height:30px;color:#a5a5ab}

@media screen and  (max-width:1570px){
.related{ width:1300px; margin:0 auto; padding-bottom:50px;}

}
@media screen and  (max-width:1280px){
.related{ width:1180px; margin:0 auto; padding-bottom:40px;}
.related .title{margin-bottom:40px;font-size:28px;color: #34364b;font-weight: bold; text-align:center}
.related h2{margin-bottom:4px;font-size:14px;display:-webkit-box;height:48px;line-height:24px;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#34364b}
.related p{font-size:12px;line-height:30px;color:#a5a5ab}
}
@media screen and  (max-width:768px){
.caseshow{ width:92%; margin:0 auto;box-shadow: 2px 2px 10px 0 rgba(58,83,107,0.12); margin-top:20px; margin-bottom:30px; padding:20px; min-height:500px; border-radius:10px;}
.related{ width:92%; margin:0 auto; padding-bottom:40px;}
.related .title{margin-bottom:30px;font-size:18px;color: #34364b;font-weight: bold; text-align:center}
.related li{float:left;width:50%}
.related a{display:block;overflow:hidden;margin:0 5px 10px;border:1px solid #d2d2d2;padding:10px 10px 9px;-webkit-transition:all ease .3s;-o-transition:all ease .3s;-moz-transition:all ease .3s;transition:all ease .3s}
.related h2{margin-bottom:4px;font-size:12px;display:-webkit-box;height:38px;line-height:22px;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#34364b}
.related p{font-size:12px;line-height:30px;color:#a5a5ab}

}