@charset "utf-8";
/* CSS Document */
.banner{ width:100%; height:0; position:relative; overflow:hidden; margin-top:110px; padding-bottom:47%;}
.banner .image{ width:1920px; position:absolute; top:50%; left:50%; margin:-450px 0 0 -960px;}
.banner .slogan{ position:absolute; top:50%; left:10%; margin:-81px 0 0 0; z-index:10;}
.con{ width:100%; display:table; margin:10px 0;}
.con .oc{ width:33%; height:0; padding-bottom:23%; display:table-cell; overflow:hidden; text-align:center; vertical-align:middle; position:relative;}
.con .oc.image01{ background:url(../image/con_image01.jpg) no-repeat center; background-size:642px 442px; transition:.3s;}
.con .oc.image02{ background:url(../image/con_image02.jpg) no-repeat center; background-size:642px 442px; transition:.3s;}
.con .oc.image03{ background:url(../image/con_image03.jpg) no-repeat center; background-size:642px 442px; transition:.3s;}
.con .oc.image01:hover,.con .oc.image02:hover,.con .oc.image03:hover{ background-size:1284px 884px;    filter: brightness(1.5); transition:.3s;}
.con .oc .text_blcok{ text-align:center; position:absolute; top:50%; left:0; right:0; margin:-36px auto 0 auto;}
.con .oc .text_blcok p{ font-size:35px; font-weight:bold; color:#fff; text-shadow:0 3px 2px rgba(0,0,0,.5); padding-bottom:20px;}
.con .oc .text_blcok span{ font-size:17px; color:#fff; text-shadow:0 3px 2px rgba(0,0,0,.4); margin:0 5px;}
.one {
  
  cursor: pointer;
  font-size: 20px;
  background-color: transparent;
  position: relative;
  border: 2px solid #fff;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
}
.one .insider {
  background-color: #fff;
  width: 220%;
  height: 2rem;
  position: absolute;
  left: -180%;
  transform: rotateZ(45deg);
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
}
.one:hover {
  background-color: #00b288;
  border-color: #fff;
  color: #fff;
}
.one:hover .insider {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  left: 135px;
}

.one:hover .text_blcok span{ outline:8px solid #0da076; padding:2px 10px;background-color:rgba(0,0,0,.4)}

.hoverbtn {
  cursor: pointer;
  position: relative;
  padding: 10px 20px;
  background: #00b288;
  font-size: 28px;
  overflow: hidden;
  transition: all .5s;  
}
.hoverbtn:after, .hoverbtn:before {
  content: " ";
  width: 5px;
  height: 5px;
  position: absolute;
  border: 0px solid #00b288;
  transition: all .5s;
}
.hoverbtn:after {
  top: 0px;
  left: 0px;
  border-top: 5px solid white;
  border-left: 5px solid white;
}
.hoverbtn:before {
  bottom: 0px;
  right: 0px;
  border-bottom: 5px solid white;
  border-right: 5px solid white;
}
.hoverbtn:hover {
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.hoverbtn:hover:before, .hoverbtn:hover:after {
  width: 101%;
  height: 101%;
}
@media screen and (max-width:1023px) and ( min-width:768px){
.banner{ margin-top:55px;}
.con{ margin:5px 0;}
.con .oc .text_blcok{ margin: -29px auto 0 auto;}
.con .oc .text_blcok p{ font-size:29px; padding-bottom:13px;}
.con .oc .text_blcok span{ font-size:15px;}
}

@media screen and ( max-width:767px) {
.banner{ margin-top:55px;}
.banner .image{ width:960px; margin:-225px 0 0 -480px;}
.banner .slogan{ width:184px; margin:-41px 0 0 0;}
.con{ margin:0; display:block; padding:5px 5px 0 5px;}
.con .oc{ width:100%; display:block; margin-bottom:5px; padding-bottom:30%;}
.con .oc .text_blcok{ margin: -29px auto 0 auto;}
.con .oc .text_blcok p{ font-size:29px; padding-bottom:13px;}
.con .oc .text_blcok span{ font-size:15px;}
}