@charset "UTF-8";
img{-webkit-transition: all 0.5s;  transition: all 0.5s;
  border:0;display: inline-block;
}
a{color:#333;-webkit-transition: all .2s;transition: all .2s;}

body{font-size: 14px;
    background-size: cover;
    -ms-behavior: url();
    behavior: url();
}  


.in_case{width: 100%;}
.in_case .cs{float: left;width:50%;position: relative;height: 0px;padding-bottom: 20.8%;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: 25%;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 img{width: 20%!important;opacity: 0;-webkit-transform:translateX(-200px);transform:translateX(-200px);}
.in_case_hover span{display: block;width: 50px;height: 3px;background: #f60;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 img{-webkit-transform:translateX(0px);transform:translateX(0px);opacity: 1;}
.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: 41.6%;}
  .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;}
}

.in_con04{height: 0px;padding-bottom: 36%;background: url(../images/in_img03.jpg) no-repeat center;background-size: cover;}
.in_con04 .left{width: 465px;float: left;margin-left: 35px;}
.in_con04 .left a{color: #fff;}
.in_con04 .left h3{font-weight: 700;line-height: 1.2;height:2.4em;overflow: hidden;}
.in_con04 .left a h3{-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
.in_con04 .left a:hover h3{-webkit-transform:translateX(10px);transform:translateX(10px);}
.in_con04 .right{float: left;width: 700px;border-left: 2px solid #fff;padding-left: 60px;margin-left: 70px;}
.in_con04 .right a{color: #fff;}
.in_con04 .right dl{float: left;width: 300px;margin-right: 20px;}
.in_con04 .right dl dt{height: 0px;padding-bottom: 66.5%;overflow: hidden;}
.in_con04 .right dl dt img{width: 100%;}
.in_con04 .right dl:hover dt img{-webkit-transform:scale(1.05);transform:scale(1.05);}
.in_con04 .right dd{background: #000;padding:25px 20px;}
.in_con04 .right dd a{display: inline-block;line-height: 1.4;height: 2.8em;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;}
.in_con04 .right dd span{color: #bbb;padding-top: 10px;display: inline-block;}
.in_con04 .right dd i{color: #2f2f2f;padding-left: 5px;}
.in_con04 .bottom{float: left;width: 100%;}
.in_con04 .bottom div.more{margin-left: auto;margin-right: auto;}
.in_con04 .bottom div.more a:hover{border:1px solid #fff;}
.in_con04 .bottom div.more a:hover span:after{background-color: #fff;color:#f60;}
@media only screen and (max-width: 1700px){
  .in_con04{padding-bottom: 40%;}
}
@media only screen and (max-width: 1500px){
  .in_con04 .left{margin-top: 50px;}
}
@media only screen and (max-width: 1400px){
  .in_con04 .left{width: 400px;margin-top:30px;}
  .in_con04 .right{width: 500px;}
  .in_con04 .right dl{width: 48%;margin-right: 0;margin-left: 2%;}
}
@media only screen and (max-width: 1300px){
  .in_con04{padding-bottom: 39%;}
}
@media only screen and (max-width: 1200px){
  .in_con04{padding-bottom: 45%;}
  .in_con04 .left{width: 36.5%;margin-left: 0;}
  .in_con04 .right{width:63.5%;margin-left: 0;padding-left: 5%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
  .in_con04 .bottom{margin-top: 20px;}
}
@media only screen and (max-width: 910px){
  .in_con04{padding-bottom: 50%;}
  .in_con04 .right{padding-left: 2%;}
}
@media only screen and (max-width: 767px){
  .in_con04{height:auto;padding-bottom: 30px;}
  .in_con04 .left{width: 96%;margin: 0 auto;float: none;}
  .in_con04 .left h3{height: auto;}
  .in_con04 .left h3 br{display: none;}
  .in_con04 .left p{width:100%;margin-top: 5px;}
  .in_con04 .left p br{display: none;}
  .in_con04 .right{width: 100%;padding-left: 0;border-left: 0;border-top:1px solid #fff;margin-top:20px;padding-top: 20px;}
  .in_con04 .right dl{width: 49%;}
  .in_con04 .right dl:first-child{margin-left: 0;}
  .in_con04 .right dd{padding:10px;}
  .in_con04 .right dd span{padding-top: 5px;}
}

.in_con06{width: 100%;}
.in_con06>*{width: 50%;float:left;padding-bottom: 26%;height: 0px;overflow: hidden;}
.in_con06 img{width: 100%;}
.in_con06 .right{position: relative;}
.in_con06 .right p{position: absolute;top: 85px;left: 80px;width: 455px;color: #fff;line-height: 1.3;}
.in_con06 .right a p{-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
.in_con06 .right a:hover p{-webkit-transform:translateX(10px);transform:translateX(10px);}
@media only screen and (max-width: 1200px){
  .in_con06 .right p{width:80%;top:20px;left:30px;}
}
@media only screen and (max-width: 767px){
  .in_con06>*{width: 100%;float: none;padding-bottom:52%;}
  .in_con06 .right p{left: 5%;}
}