@charset "utf-8";

.hong { width:30%; height:510px; display: flex; flex-direction: row}
.hongH { flex:1; height:250px;  display: flex; flex-direction: row}

.height20{ height:10px; flex:1; display:block}
.kong20{ width:10px;display:block}

.he_border1{flex:1;text-align:left;    padding:0;margin:0; position:relative;box-sizing:border-box;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden}
.he_border1_img{display:block;width:100%; height:100%;padding:0;margin:0;position:relative;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;opacity:1;overflow:hidden}
.he_border1:hover .he_border1_img{position:absolute;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);}
 .he_border1_caption{color:#fff; padding:0;margin:0;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden}
  .he_border1_caption:hover{ background:rgba(0,0,0,0.4);}
 .he_border1_caption::before, .he_border1_caption::after{position:absolute;content:'';opacity:0;-webkit-transition:opacity 0.4s,-webkit-transform .4s;-moz-transition:opacity 0.4s,-moz-transform .4s;-o-transition:opacity 0.4s,-o-transform .4s;transition:opacity 0.4s,transform .4s}
 .he_border1_caption::before{top:8%;right:5%;bottom:8%;left:5%;border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);-moz-transform:scale(0,1);-o-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0}
 .he_border1_caption::after{top:8%;right:5%;bottom:8%;left:5%;border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);-moz-transform:scale(1,0);-o-transform:scale(1,0);transform:scale(1,0);-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-o-transform-origin:100% 0;transform-origin:100% 0}
.he_border1:hover .he_border1_caption::before,.he_border1:hover .he_border1_caption::after{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}
 .he_border1_caption, .he_border1_caption > a{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden; z-index:1}
 .he_border1_caption_h{ padding-right:30px; font-size:1.3em;font-weight:700;text-align:left;width:80%;position:absolute;top:20px;left:15%;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden;opacity:1}
 .he_border1_caption_p{font-size:1.1em;text-align:left;width:80%;position:absolute; top:60%; left:15%;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden;opacity:0}
.he_border1_caption_p span{ display:block; text-align:left; }
.he_border1:hover .he_border1_caption_p{top:40%; opacity:1;padding-right:10px;}
.he_border1:hover .he_border1_caption_h{top:20%; left:15%; opacity:1}


.he_border2{flex:1.5; text-align:left;   padding:0;margin:0; position:relative;box-sizing:border-box;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden}
.he_border2_img{display:block;width:100%; height:100%; padding:0;margin:0;position:relative;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;opacity:1;overflow:hidden}
.he_border2:hover .he_border2_img{position:absolute;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);}
 .he_border2_caption{color:#fff; padding:0;margin:0;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden}
  .he_border2_caption:hover{ background:rgba(0,0,0,0.4);}
 .he_border2_caption::before, .he_border2_caption::after{position:absolute;content:'';opacity:0;-webkit-transition:opacity 0.4s,-webkit-transform .4s;-moz-transition:opacity 0.4s,-moz-transform .4s;-o-transition:opacity 0.4s,-o-transform .4s;transition:opacity 0.4s,transform .4s}
 .he_border2_caption::before{top:8%;right:5%;bottom:8%;left:5%;border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);-moz-transform:scale(0,1);-o-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0}
 .he_border2_caption::after{top:8%;right:5%;bottom:8%;left:5%;border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);-moz-transform:scale(1,0);-o-transform:scale(1,0);transform:scale(1,0);-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-o-transform-origin:100% 0;transform-origin:100% 0}
.he_border2:hover .he_border2_caption::before,.he_border2:hover .he_border2_caption::after{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}
 .he_border2_caption, .he_border2_caption > a{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden; z-index:1}
 .he_border2_caption_h{font-size:1.3em; text-align:left; font-weight:700;width:80%;position:absolute;top:20px;left:40px;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden;opacity:1}
 .he_border2_caption_p{font-size:1.1em;text-align:left;width:80%;position:absolute;top:60%;left:40px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden;opacity:0}
.he_border2_caption_p span{ display:block; text-align:left;}
.he_border2:hover .he_border2_caption_p{top:35%; opacity:1;padding-right:10px;}
.he_border2:hover .he_border2_caption_h{top:30px;left:40px;opacity:1}


.he_border3{flex:1; text-align:left;   padding:0;margin:0; position:relative;box-sizing:border-box;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden}
.he_border3_img{display:block;width:100%; height:100%; padding:0;margin:0;position:relative;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;opacity:1;overflow:hidden}
.he_border3:hover .he_border3_img{position:absolute;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);}
 .he_border3_caption{color:#fff; padding:0;margin:0;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden}
  .he_border3_caption:hover{ background:rgba(0,0,0,0.4);}
 .he_border3_caption::before, .he_border3_caption::after{position:absolute;content:'';opacity:0;-webkit-transition:opacity 0.4s,-webkit-transform .4s;-moz-transition:opacity 0.4s,-moz-transform .4s;-o-transition:opacity 0.4s,-o-transform .4s;transition:opacity 0.4s,transform .4s}
 .he_border3_caption::before{top:8%;right:5%;bottom:8%;left:5%;border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);-moz-transform:scale(0,1);-o-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0}
 .he_border3_caption::after{top:8%;right:5%;bottom:8%;left:5%;border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);-moz-transform:scale(1,0);-o-transform:scale(1,0);transform:scale(1,0);-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-o-transform-origin:100% 0;transform-origin:100% 0}
.he_border3:hover .he_border3_caption::before,.he_border3:hover .he_border3_caption::after{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}
 .he_border3_caption, .he_border3_caption > a{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden; z-index:1}
 .he_border3_caption_h{font-size:1.3em; text-align:left; font-weight:700;width:80%;position:absolute;top:20px;left:40px;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden;opacity:1}
 .he_border3_caption_p{font-size:1.1em;text-align:left;width:80%;position:absolute;top:60%;left:40px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden;opacity:0}
.he_border3_caption_p span{ display:block; text-align:left;}
.he_border3:hover .he_border3_caption_p{top:35%; opacity:1; padding-right:10px;}
.he_border3:hover .he_border3_caption_h{top:30px; left:40px;opacity:1}

@media (min-width: 520px) and (max-width: 992px){
.he_border1_img { width:100%; height:auto;}
.tab-switch-Solution{  display: flex;flex-direction: column}
.he_border1 .he_border1_caption_h{ left:40px;}
.he_border1:hover .he_border1_caption_h{top:15%; left:60px;}
.he_border2:hover .he_border2_caption_h{top:10%;}
.he_border3:hover .he_border3_caption_h{top:10%;}
.he_border3:hover .he_border3_caption_p{top:30%;}
.hong { width:100%; height:25em; display: flex; flex-direction: column}
.he_border1 .he_border1_caption_p{ left:60px;}
.he_border1:hover .he_border1_caption_p{top:33%;  left:60px;}
.hongH { flex:1; height:20em;  display: flex; }
.height20{  display:none}
.he_border2{ flex:1;}
.kong20{ display:none}
	}
	
@media (min-width: 320px) and (max-width: 520px){
.tab-switch-Solution{  display: flex;flex-direction: column}
.he_border1:hover .he_border1_caption_h{top:15%;}
.he_border2:hover .he_border2_caption_h{top:10%;}
.he_border3:hover .he_border3_caption_h{top:10%;}
.he_border3:hover .he_border3_caption_p{top:30%;}
.he_border1:hover .he_border1_caption_p{top:33%;}
.hong { width:100%; height:30em; display: flex; flex-direction: column}
.hongH { flex:1; height:35em;  display: flex; flex-direction: column}
.height20{  display:none}
.he_border2{ flex:1;}
.kong20{ display:none}
	}