﻿.head_img:nth-child(2){display: none;}

/* 分类 */
.banner{position: relative;}
.banner ul{position: absolute;bottom: 25px;text-align: center;font-size: 0;width: 100%;}
.banner ul li{width: 148px;border: 1px solid #fff; color: #fff;line-height: 48px;margin: 0 3.85%;display: inline-block;font-size: 22px;border-bottom-right-radius: 20px;transition: background-color 1s ease-in-out;-webkit-transition: background-color 1s ease-in-out;}
.banner ul li.active{background-color: #08b79a;transition: background-color 1s ease-in-out;-webkit-transition: background-color 1s ease-in-out;}
.banner ul li:hover{background-color: #08b79a;transition: background-color 1s ease-in-out;-webkit-transition: background-color 1s ease-in-out;}

/* 案例 */
.case_item{width: 25%;overflow: hidden;position: relative;}
.case_item>img{transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;}
.case_item:hover>img{transform: scale(1.2);-webkit-transform: scale(1.2);-moz-transform: scale(1.2);transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;}
.case_item .mask{position: absolute;top: 0; left: 0; width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5); opacity: 0;z-index: -1;transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;}
.case_item .mask .play{position: absolute;top: 50%;left: 50%;width: 93px;height: 93px;transform: translate(-50%,-50%);}
.case_item .mask p{position: absolute;width: 100%;text-align: center;bottom: 16.875%;color: #fff; font-size: 20px;line-height: 1;}
.case_item .mask p span{display: inline-block;padding-bottom: 10px;border-bottom: 1px solid #fff;}
.case_item:hover .mask{opacity: 1;z-index: 99;transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;}


@media screen and (max-width:1440px){
    .banner ul li{width: 120px;line-height: 48px;margin: 0 2.85%;font-size: 18px;}
    .case_item .mask .play{width:60px;height: 60px;}
    .case_item .mask p{bottom: 16.875%; font-size: 18px;}

}
@media screen and (max-width:1280px){
    
}


@media screen and (max-width:960px){
    .case_item{width: 50%;overflow: hidden;position: relative;}
    .banner ul li{width: 100px;line-height: 36px;margin: 0 1.85%;font-size: 16px;}
}
@media screen and (max-width:768px){
    .banner ul li{width: 80px;line-height: 36px;margin: 0  10px;font-size: 12px;}
}
@media screen and (max-width:750px){
    .head_img:nth-child(1){display: none;}
    .head_img:nth-child(2){display: block;}
    .banner ul{position: absolute;left: 50%; bottom: 25px;text-align: center;font-size: 0;width: 80%; transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);}
    .banner ul li{width: 126px;line-height: 36px;margin: 5px 10px;font-size: 12px;}
    .case_item .mask{opacity: 1;z-index: 99;}
}
@media screen and (max-width:515px){
    
    .banner ul{position: absolute;bottom: 10px;text-align: center;font-size: 0;width: 100%;}
    .banner ul li{width:85px;  ; border-bottom-right-radius: 15px;}
}
@media screen and (max-width:480px){
    .case_item{width: 100%;overflow: hidden;position: relative;}
}
