﻿@charset "utf-8";
*{ box-sizing:border-box; -webkit-appearance: none; }
*:focus { outline: none; }
html, body{ height: 100%;}
body { margin: 0;line-height:1.5; font-size:14px;font-family:"微软雅黑",microsoft yahei; color:#333; background:#fff; }
ul,li{list-style: none; padding: 0; margin: 0;}
.clearfix:after{ content:""; display:block; clear:both; height:0; visibility:hidden;}
.clearfix{ zoom:1;}

.main{ max-width: 1200px; margin: 0 auto; padding:40px 10px;}
.title{text-align: center; color:#333; font-size:28px; margin-bottom: 25px;}
.height50{ height: 50px;}
.bg_main{ background-image: linear-gradient(to bottom right, #c4e86b 0%, #00bcbc 100%);}

.w-simgtext ul,.w-simgtext li{ list-style:none; margin:0; padding:0;}
/* .w-simgtext li{margin-bottom: 25px;} */
.w-simgtext a{ display:block;text-decoration:none;}
.w-simgtext a:hover{ text-decoration:none;}
.w-simgtext h3{ margin: 0;line-height: 1.5; font-weight: normal;}
.w-simgtext p{margin-bottom: 0; line-height: 1.7;}

.w-simgtext1 li{ float: left; width: 25%; *width:24.99%; min-width: 240px;}
.w-simgtext1 li .item{position:relative; width: 100%;  height: 227px; margin: 0 auto; text-align: center;}
.w-simgtext1 li .sigt1{position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; }
.w-simgtext1 li .sigt1 .bg{position: absolute; left: 0; right: 0; top: 0; bottom: 0;overflow: hidden;
    /* border-radius: 50%; -webkit-border-radius: 50%; */
    border:1px solid #ddd;}
.w-simgtext1 li .sigt1 .sigt_text{position: absolute; z-index: 1; left:0; right:0; padding:1em 8%; top:50%; top:15%\9; *top:15%; transform:translateY(-50%); -webkit-transform:translateY(-50%); transition: all 0.5s; -webkit-transition: all 0.5s; }
:root .w-simgtext1 li .sigt1 .sigt_text{ top:50%;}
.w-simgtext1 li .sigt1 .s_img img{max-width: 60px; max-height: 60px; margin-bottom: 10px;}
.w-simgtext1 li .sigt1 h3{ font-size: 18px; color:#333; 
    margin-top: 8px;}
.w-simgtext1 li .sigt1 p{font-size: 90%; color: #aaa; margin-top: 5px; max-height: 1.7em;}
.w-simgtext1 li .sigt2{position: absolute; z-index: 2; left: 0; right: 0; top: 0; bottom: 0; color:#fff; }
.w-simgtext1 li .sigt2 .bg{position: absolute; left: 0; right: 0; top: 0; bottom: 0;opacity:0;
    /* border-radius: 50%; -webkit-border-radius: 50%; */
     *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); transform: scale(1.2); -webkit-transform: scale(1.2); transition: all 0.5s; -webkit-transition: all 0.5s; }
.w-simgtext1 li .sigt2 .sigt_text{position: absolute; z-index: 1; left:0; right:0; padding:1em 8%; top:50%; top:15%\9; *top:15%; transform:translateY(-50%); -webkit-transform:translateY(-50%); margin-top: 35px;opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transition: all 0.5s; -webkit-transition: all 0.5s; }
:root .w-simgtext1 li .sigt2 .sigt_text{ top:50%;}
.w-simgtext1 li .sigt2 h3{ position: relative; font-size: 24px;}
/* .w-simgtext1 li .sigt2 h3:after{ content: ''; position: absolute; left: 50%; top: 100%; height: 28px; width: 1px; background: #fff;} */
.w-simgtext1 li a:hover .sigt1 .sigt_text{margin-top: 35px;}
.w-simgtext1 li a:hover .sigt2 .bg{transform: scale(1); -webkit-transform: scale(1);opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);}
.w-simgtext1 li a:hover .sigt2 .sigt_text{ margin-top: 0;opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);}

.w-simgtext2 li{ float: left; width: 33.33%;  min-width: 200px; }
.w-simgtext2 li .item{position:relative; width: 250px;  height: 250px; margin: 0 auto; text-align: center;}
.w-simgtext2 li .s_img{max-width: 70px; max-height: 70px; margin:0 auto; overflow: hidden;}
.w-simgtext2 li .s_img img{ max-width: 100%; max-height: 100%;transition: all 0.5s; -webkit-transition: all 0.5s;}
.w-simgtext2 li .line{ height: 1px; margin: 15px auto;}
.w-simgtext2 li .sigt1{position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; }
.w-simgtext2 li .sigt1 .bg{position: absolute; left: 0; right: 0; top: 0; bottom: 0;overflow: hidden;border-radius: 50%; -webkit-border-radius: 50%;border:1px solid #999; transition: all 0.5s; -webkit-transition: all 0.5s; }
.w-simgtext2 li .sigt1 .sigt_text{position: absolute; z-index: 1; left:0; right:0; padding:1em 8%; top:50%; top:15%\9; *top:15%; transform:translateY(-50%); -webkit-transform:translateY(-50%); transition: all 0.5s; -webkit-transition: all 0.5s; }
:root .w-simgtext2 li .sigt1 .sigt_text{ top:50%;}
.w-simgtext2 li .sigt1 h3{ font-size: 16px; color:#333; }
.w-simgtext2 li .sigt2{position: absolute; z-index: 2; left: 0; right: 0; top: 0; bottom: 0; color:#fff; }
.w-simgtext2 li .sigt2 .bg{position: absolute; left: 0; right: 0; top: 0; bottom: 0;opacity:0;border-radius: 50%; -webkit-border-radius: 50%; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); transform: scale(0.7); -webkit-transform: scale(0.7); transition: all 0.5s; -webkit-transition: all 0.5s; }
.w-simgtext2 li .sigt2 .sigt_text{position: absolute; z-index: 1; left:0; right:0; padding:1em 8%; top:50%; top:15%\9; *top:15%; transform:translateY(-50%); -webkit-transform:translateY(-50%);opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transition: all 0.5s; -webkit-transition: all 0.5s; }
:root .w-simgtext2 li .sigt2 .sigt_text{ top:50%;}
.w-simgtext2 li .sigt2 .s_img img{ transform: translateX(100%); -webkit-transform: translateX(100%);transition: all 0.5s; -webkit-transition: all 0.5s;}
.w-simgtext2 li .sigt2 .line{width: 0; background: #fff;transition: all 0.5s; -webkit-transition: all 0.5s; }
.w-simgtext2 li .sigt2 h3{ font-size: 16px; color:#fff; }
.w-simgtext2 li a:hover .sigt1 .bg{transform: scale(1.3); -webkit-transform: scale(1.3);opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);}
.w-simgtext2 li a:hover .sigt1 .s_img img{ transform: translateX(-100%); -webkit-transform: translateX(-100%);}
.w-simgtext2 li a:hover .sigt2 .s_img img{ transform: translateX(0); -webkit-transform: translateX(0);}
.w-simgtext2 li a:hover .sigt2 .line{ width: 80px; }
.w-simgtext2 li a:hover .sigt2 .bg{transform: scale(1); -webkit-transform: scale(1);opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);}
.w-simgtext2 li a:hover .sigt2 .sigt_text{opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);}

.w-simgtext3 ul {
	position:relative; z-index:2;
}
.w-simgtext3 ul li {
	width: 25%;
    height: 400px;
	float:left;
	text-align:center;
}
.w-simgtext3 ul li a{
    height: 100%;
    background: rgba(0,0,0,0.6);
}
.w-simgtext3 ul li .item{margin:0 auto; padding:57px 10px;height: 400px; position:relative;background:url(../images/bg.jpg) no-repeat center -400px;overflow: hidden;background-size: 100% 100%;}
.w-simgtext3 ul li i {
	display: block;
	position: relative;
	margin: 0 auto;
    margin-top: 50px;
    height: 100px;
    width: 100px;
	background: url(../images/icon_3.png) no-repeat;
    background-size: 200px 400px;
}
.w-simgtext3 ul li.indexs1 i {background-position:0 0;}
.w-simgtext3 ul li.indexs2 i {background-position:0 -100px;}
.w-simgtext3 ul li.indexs3 i {background-position:0 -200px;}
.w-simgtext3 ul li.indexs4 i {background-position:0 -300px;}
.w-simgtext3 ul li u {
	display: block;
	position: absolute;
	width: 200px;
	height: 200px;
	left:50%; margin-left:-100px;
	background: url(../images/icon_2.png) no-repeat ;
	-webkit-transition: all .5s ease-in-out 0s;
	-moz-transition: all .5s ease-in-out 0s;
	-ms-transition: all .5s ease-in-out 0s;
	-o-transition: all .5s ease-in-out 0s;
	transition: all .5s ease-in-out 0s;
    background-size: 100% 100%;
}
.w-simgtext3 ul li u.cl {clip: rect(0px,210px,210px,105px);}
.w-simgtext3 ul li u.cr {clip: rect(0px,105px,210px,0px);}
.w-simgtext3 ul li strong {
	display: inline-block;
	margin-top: 60px;
	font-size: 20px;
	font-weight: bold;
    /* color: #fff; */
    background: linear-gradient(to bottom right, #c4e86b 0%, #00bcbc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
     line-height:1.8;
}
.w-simgtext3 ul li.active strong{
    /* color: #fff; */
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.w-simgtext3 ul li p {
	position: relative;
	top: 100px;
	color: #999;
    line-height: 20px;
    opacity: 0;
}
.w-simgtext3 ul li.active p{ color:#fff; opacity: 1;}
.w-simgtext3 ul li.active .item {
	background-position: 0px 0px;
	-webkit-transition: all .5s ease-in-out .3s;
	-moz-transition: all .5s ease-in-out .3s;
	-ms-transition: all .5s ease-in-out .3s;
	-o-transition: all .5s ease-in-out .3s;
	transition: all .5s ease-in-out .3s;
}
.w-simgtext3 ul li.active i {
	-webkit-transition: all .5s ease-in-out .4s;
	-moz-transition: all .5s ease-in-out .4s;
	-ms-transition: all .5s ease-in-out .4s;
	-o-transition: all .5s ease-in-out .4s;
	transition: all .5s ease-in-out .4s;
}
.w-simgtext3 ul li.indexs1.active i {background-position:-100px 0;}
.w-simgtext3 ul li.indexs2.active i {background-position:-100px -100px;}
.w-simgtext3 ul li.indexs3.active i {background-position:-100px -200px;}
.w-simgtext3 ul li.indexs4.active i {background-position:-100px -300px;}
.w-simgtext3 ul li.active u.cl {
	clip: rect(0px, 210px, 0, 105px);
}
.w-simgtext3 ul li.active u.cr {
	clip: rect(210px,105px,210px,0px);
}
.w-simgtext3 ul li.active strong {
	color:#fff;
	-webkit-transition:all .3s .4s;
	-moz-transition:all .3s .4s;
	-ms-transition:all .3s .4s;
	-o-transition:all .3s .4s;
	transition:all .3s .4s;
	transform:translateY(-20px);
	-webkit-transform:translateY(-20px);
}
.w-simgtext3 ul li.active p {
	top: 0;
	-webkit-transition: all .3s ease-in-out .5s;
	-moz-transition: all .3s ease-in-out .5s;
	-ms-transition: all .3s ease-in-out .5s;
	-o-transition: all .3s ease-in-out .5s;
	transition: all .3s ease-in-out .5s;
	transform:translateY(-20px);
	-webkit-transform:translateY(-20px);
}
@media (max-width:1000px){
    .w-simgtext1 li{ min-width:33.33%;}
    .w-simgtext1 li .sigt2{ display: none;}
    .w-simgtext1 li a:hover .sigt1 .sigt_text{margin-top: 0;}
    .w-simgtext2 li{ min-width:33.33%;}
    .w-simgtext2 li .sigt2{ display: none;}
    .w-simgtext2 li a:hover .sigt1 .bg{transform:none; -webkit-transform:none;opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);}
    .w-simgtext2 li a:hover .sigt1 .s_img img{ transform:none; -webkit-transform:none;}
    .w-simgtext3 ul li{ width:50%; height: 200px;}
	.w-simgtext3 ul li:nth-child(2n+1){ clear:both;}
	.w-simgtext3 ul li .item{
        height: 100%;
        position: relative;
        background: none;
        width: auto;
        padding: 0;
        padding-top: 2em;
    }
	.w-simgtext3 ul li u,.w-simgtext3box .pp_t{ display:none;}
	.w-simgtext3 ul li i{ margin-top:0;width:4em; height:4em; background-size:8em 16em;}
	.w-simgtext3 ul li.indexs1 i {background-position:0 0;}
    .w-simgtext3 ul li.indexs2 i {background-position:0 -4em;}
    .w-simgtext3 ul li.indexs3 i {background-position:0 -8em;}
    .w-simgtext3 ul li.indexs4 i {background-position:0 -12em;}
	.w-simgtext3 ul li.indexs1.active i {background-position:-4em 0;}
    .w-simgtext3 ul li.indexs2.active i {background-position:-4em -4em;}
    .w-simgtext3 ul li.indexs3.active i {background-position:-4em -8em;}
    .w-simgtext3 ul li.indexs4.active i {background-position:-4em -12em;}
	.w-simgtext3 ul li.active .item{ 
        background: linear-gradient(to bottom right, #c4e86b 0%, #00bcbc 100%);}
	.w-simgtext3 ul li strong{ margin-top:0;font-size:16px;}
	.w-simgtext3 ul li p{  top:0; line-height:1.5;font-size:12px; opacity: 1;}
    .w-simgtext3 ul li.active strong{transform:translateY(0);-webkit-transform:translateY(0);}
	.w-simgtext3 ul li.active p{ transform:translateY(0);-webkit-transform:translateY(0);}
}
@media (max-width:767px){
    .w-simgtext1 li{ min-width:50%;}
    .w-simgtext1 li:nth-child(2n+1){ clear: both;}
}
@media (max-width:640px){
    .w-simgtext2 li{ min-width:50%;}
    .w-simgtext2 li:nth-child(2n+1){ clear: both;}
}
@media (max-width:520px){
    .w-simgtext1{ margin: 0 -0.3em;}
    .w-simgtext1 li{margin-bottom: 0.6em;margin-top: 0;} 
    .w-simgtext1 li a{margin: 0 0.3em;}
    .w-simgtext1 li .item{ width: auto; height: auto; }
    .w-simgtext1 li .sigt1{ position: relative; }
    .w-simgtext1 li .sigt1 .bg{border-radius:0; -webkit-border-radius:0;}
    .w-simgtext1 li .sigt1 .sigt_text{position: relative; transform: none; -webkit-transform: none; top:0; padding:2em 5%;}
    :root .w-simgtext1 li .sigt1 .sigt_text{top:0;}
    .w-simgtext2{ margin: 0 -0.3em;}
    .w-simgtext2 li{ margin-bottom: 0.6em;} 
    .w-simgtext2 li a{margin: 0 0.3em;}
    .w-simgtext2 li .item{ width: auto; height: auto; }
    .w-simgtext2 li .line{ margin: 0.3em auto;}
    .w-simgtext2 li .sigt1{ position: relative; }
    .w-simgtext2 li .sigt1 .bg{border-radius:0; -webkit-border-radius:0;}
    .w-simgtext2 li .sigt1 .sigt_text{position: relative; transform: none; -webkit-transform: none; top:0; padding:2em 5%;}
    :root .w-simgtext2 li .sigt1 .sigt_text{top:0;}
    .w-simgtext3{ text-align:center;}
    .w-simgtext3 ul li{height: 150px; padding-bottom:0;}
	/* .w-simgtext3 ul li i{ top:50%; margin-top:-2em;} */
	.w-simgtext3 ul li p{ display:none;}
	.w-simgtext3 ul li strong{ font-size:110%;}
	.w-simgtext3 ul li .item{ margin:0;}
}
@media (max-width:480px){
    .w-simgtext1 li .s_img img{ max-width: 4.5em; max-height: 4.5em;}
    .w-simgtext1 li .sigt1 h3{ font-size: 120%;}
    .w-simgtext2 li .s_img{ max-width: 4.5em; max-height: 4.5em;}
    .w-simgtext2 li .sigt1 h3{ font-size: 105%;}

}

.indexs1 {
    background: url(../images/img1.jpg) center;
    background-size: cover;
}

.indexs2 {
    background: url(../images/img2.png) center;
    background-size: cover;
}

.indexs3{
    background: url(../images/img3.jpg) center;
    background-size: cover;
}
.indexs4 {
    background: url(../images/img44.jpg) center;
    background-size: cover;
}