p,div,span{word-break: normal !important;}

.in_case{width: 100%;}
.in_case .cs{float: left;width:50%;position: relative;height: 0px;    padding-bottom: 24.1%;overflow: hidden;}

.in_case .cs>ul{width: 100%;height: 100%;position: absolute;z-index: 1;}
.in_case .cs>ul li{display:none;position: absolute;left: 0px;top:0px;width: 100%;height: 100%;overflow: hidden;color: #fff;}
.in_case .cs>ul li a{color: #fff;}
.in_case .cs>ul li:after{content: "";position: absolute;top: 0px;right: 0px;left: 0px;bottom: 0px;-webkit-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
.in_case .cs>ul li img{width: 100%;}
.in_case .cs>ul li.active{display: block;z-index: 3;}

.in_case .cs>ul li .p{position: absolute;bottom: 15%;left: 5%;z-index: 1;-webkit-transition:all 0.4s ease-in-out 0.3s;transition:all 0.4s ease-in-out 0.3s;}
.in_case .cs>ul li .p h3{margin-bottom: 5px;}

.in_case_hover{position: absolute;left: 0px;top: 50%;text-align: center;right: 0px;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index: 9;}
.in_case_hover *{-webkit-transition:all 0.6s ease-in-out;transition:all 0.6s ease-in-out;}
.in_case_hover h4{width: 80%!important;opacity: 0;-webkit-transform:translateX(-200px);transform:translateX(-200px);}
.in_case_hover span{display: block;width: 50px;height: 3px;background: #c70207;margin:20px auto;opacity: 0;-webkit-transform:translateX(200px);transform:translateX(200px);}
.in_case_hover p{opacity: 0;-webkit-transform:translateY(200px);transform:translateY(200px);}

.in_case .cs>ul li:hover:after{background: rgba(0,0,0,0.75);}
.in_case .cs>ul li:hover .p{opacity: 0;-webkit-transition:all 0s ease-in-out;transition:all 0s ease-in-out;}

.in_case .cs>ul li:hover .in_case_hover h4{-webkit-transform:translateX(0px);transform:translateX(0px);opacity: 1; margin:0 auto;}
.in_case .cs>ul li:hover .in_case_hover span{-webkit-transform:translateX(0px);transform:translateX(0px);opacity: 1;}
.in_case .cs>ul li:hover .in_case_hover p{-webkit-transform:translateY(0px);transform:translateY(0px);opacity: 1;}
@media only screen and (max-width: 1500px){
  .in_case_hover img{width: 25%!important;}
}
@media only screen and (max-width: 1400px){
  .in_case_hover img{width: 30%!important;}
}
@media only screen and (max-width: 1200px){
  .in_case_hover img{width: 35%!important;}
  .in_case_hover span{margin:10px auto;}
}
@media only screen and (max-width: 1000px){
  .in_case_hover img{width: 40%!important;}
}
@media only screen and (max-width: 767px){
  .in_case .cs{width: 100%;padding-bottom: 48.1%;}
  .in_case .cs>ul li .p{bottom: 15%;left:4%;}
  .in_case .cs>ul li .p h3{margin-bottom: 0px;font-size: 18px;}
  .in_case_hover span{margin:5px auto;}

  .in_case .cs>ul li .p p{display: none;}
}