﻿/* CSS Document */
.case{width:100%;height:auto;padding:80px 0px;clear:both;position:relative;}
.case .left{width:29%;float:left;height:88vh;overflow:hidden;background:#d9000b;padding:3%;}
.case .left h1{color:#ffffff;font-size:5.6rem;padding-top:15%;}
.case .left h2{color:#dc2e36;font-size:3.6rem;}
.case .left p{color:#ffffff;font-size:1.4rem;padding-top:5%;line-height:2.3;}


/* 12 */
.custom-btn {width: 110px; height: 30px; color: #fff; border-radius: 50px; border:solid #fff 1px; display:block; text-align:center; line-height:30px; color:#fff !important;margin-top:10%;}

.case .right{width:71%;float:left;height:88vh;overflow:hidden;}
.case .right img{width:100%;height:100% !important;}
.case .mid{width:94%;height:auto;position:absolute;left:3%;bottom:5%;}
.case .mid ul{width:100%;height:auto;clear:both;}
.case .mid ul li{width: 23%;margin-left: 1%;margin-right: 1%;position:relative;float:left;overflow:hidden;}
.case .mid ul li .y1-1{width:100%;height:100%;display:block;position:absolute;left:0px;top:0px;}
.case .mid ul li .y1-2{width:100%;height:100%;display:block;transition:all 0.6s;}

.case .mid ul li p{position:absolute;left:5%;top:40%;display:block;color:#0e0e10;line-height:1.6;font-size:1.3rem;z-index:9999;width: 90%;}
.case .mid ul li:hover .y1-1{display:none;transition:all 0.6s;}
.case .mid ul li:hover p{color:#fff;}
.case .mid ul li span{position:absolute;left:5%;top:25%;display:block;width:40px;height:5px;overflow:hidden;}
.case .mid ul li span img{ display:block; margin:0 auto; position:relative; filter: drop-shadow(50px 0 #fff); -webkit-filter: drop-shadow(50px 0 #fff);transition:all 1s}
.case .mid ul li:hover span img{transform: translate(-50px, 0);-webkit-transform: translate(-50px, 0);-ms-transform: translate(-50px, 0);-o-transform: translate(-50px, 0);transition:all 1s}

.case .mid ul li font{ display:block;position:absolute;right:5%;top:10%;width:50px;height:50px;margin:0 auto; overflow:hidden;}
.case .mid ul li font img{ display:block; margin:0 auto; position:relative; filter: drop-shadow(50px 0 #fff); -webkit-filter: drop-shadow(50px 0 #fff);transition:all 1s}
.case .mid ul li:hover font img{transform: translate(-50px, 0);-webkit-transform: translate(-50px, 0);-ms-transform: translate(-50px, 0);-o-transform: translate(-50px, 0);transition:all 1s}





@media (max-width:468px){
.case .left{width:100%;height:auto;padding-bottom:3rem;}
.case .left h1{font-size:4rem;}
.case .left h2{font-size:3rem;}
.case .right{width:100%;height:auto;}
.case .mid{width:100%;position:static;}
.case .mid ul li{width:46%;margin-top:2rem;}
.case{background: #f1f1f1;padding: 0px 0px 60px 0px;}
}
@media (min-width:469px) and (max-width:768px){
.case .left{width:100%;height:auto;padding-bottom:3rem;}
.case .left h1{font-size:4rem;}
.case .left h2{font-size:3rem;}
.case .right{width:100%;height:auto;}
.case .mid{width:100%;position:static;}
.case .mid ul li{width:46%;margin-top:2rem;}
.case{background: #f1f1f1;padding: 60px 0px;}

}
@media (min-width:769px) and (max-width:990px){
.case .left{width:100%;height:auto;padding-bottom:3rem;}
.case .left h1{font-size:4rem;}
.case .left h2{font-size:3rem;}
.case .right{width:100%;height:auto;}
.case .mid{width:100%;position:static;}
.case .mid ul li{width:46%;margin-top:2rem;}
.case{background: #f1f1f1;padding: 60px 0px;}


}
@media (min-width:991px) and (max-width:1080px){
.case{background: #f1f1f1;padding: 60px 0px;}
.case .left{width:50%;height:auto;padding-bottom:3rem;}
.case .left h1{font-size:4rem;}
.case .left h2{font-size:3rem;}
.case .right{width:50%;height:auto;}
.case .mid{width:100%;position:static;background:#d9000b;}
.case .mid ul li{margin-top:4rem;}

}
@media (min-width:1081px) and (max-width:1200px){
.case{background: #f1f1f1;padding: 60px 0px;}
.case .left{width:50%;height:auto;padding-bottom:3rem;}
.case .left h1{font-size:4rem;}
.case .left h2{font-size:3rem;}
.case .right{width:50%;height:auto;}
.case .mid{width:100%;position:static;background:#d9000b;}
.case .mid ul li{margin-top:4rem;}

}
@media (min-width:1201px) and (max-width:1320px){
.case{background: #f1f1f1;padding: 60px 0px;}
.case .left{width:50%;height:auto;padding-bottom:3rem;}
.case .left h1{font-size:4rem;}
.case .left h2{font-size:3rem;}
.case .right{width:50%;height:auto;}
.case .mid{width:100%;position:static;background:#d9000b;}
.case .mid ul li{margin-top:4rem;width: 23%;margin-left: 1%;margin-right: 1%;}


}

