@charset "utf-8";
.sycont{ position:relative;}
/*syabouts*/
.border { position: absolute; transition: all .5s ease-in-out;}
.more{ width:154px; background: #006d30; height:2.7vw; display:block; overflow: hidden; position: relative; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.more>span { width:100%; height:2.7vw; line-height:2.7vw; text-align:center; z-index: 1; transition: color .5s ease; display:block; color:#FFF; position:absolute; left:0; top:0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.more .border { z-index: 0; background: #64dad1; width: 1.35vw; height: 1.35vw; transform: rotate(45deg); }
.more>.border:nth-of-type(1) { top: -1.4vw; left: -1.35vw; }
.more>.border:nth-of-type(2) { top: -1.4vw; right: -1.35vw; }
.more>.border:nth-of-type(3) { bottom: -1.4vw; left: -1.35vw; }
.more>.border:nth-of-type(4) { bottom: -1.4vw; right: -1.35vw; }
.more:hover .border { transform: scale(15.7) rotate(45deg); }
.more:hover span { color: #006d30; transition: color 2s ease;}
.more1{ width:54px; background: #FFF; height:1.7vw; display:block; overflow: hidden; position: relative; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;}
.more1>span { width:100%; height:1.7vw; line-height:1.7vw; text-align:center; z-index: 1; transition: color .5s ease; display:block; color:#006d30; position:absolute; left:0; top:0; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;}
.more1 .border { z-index: 0; background: #006d30; width: 0.85vw; height: 0.85vw; transform: rotate(45deg); }
.more1>.border:nth-of-type(1) { top: -0.9vw; left: -0.85vw; }
.more1>.border:nth-of-type(2) { top: -0.9vw; right: -0.85vw; }
.more1>.border:nth-of-type(3) { bottom: -0.9vw; left: -0.85vw; }
.more1>.border:nth-of-type(4) { bottom: -0.9vw; right: -0.85vw; }
.more1:hover .border { transform: scale(15.7) rotate(45deg); }
.more1:hover span { color: #FFF; transition: color 2s ease;}
.syabouts{ width:100%; padding:10.7vw 0 8.9vw 0;}
.syabouts .about_l{ width:38.5%;}
.syabouts .about_r{ width:58%;}
.syabouts .about_r dl{ width:31.5%; position:relative; margin-left:1.7%;}
.syabouts .about_r dl dd{ height:100%; position:absolute; left:0; top:0; z-index:1;}
.syabouts .about_r dl dd .cp_nr{ height:14vw;}
.syabouts .about_r dl:hover dd .f26 a.white{ color: #64dad1;}
.syabouts .about_r dl:hover .more1 .border { transform: scale(15.7) rotate(45deg); }
.syabouts .about_r dl:hover .more1 span { color: #FFF; transition: color 2s ease;} 

/*syjsfw*/
.syjsfw{ padding:9.6vw 0 6.2vw 0;}
.syjsfw .jsfw_l{ width:42%;}

/*youshi*/
.youshi{ width:100%; overflow:hidden; position: absolute; left:0; top:48.5%; z-index:10;}
.youshi .youshi_nr dl{ width:14.2857%; background:#eeeeee; position:relative; height:8.1vw; overflow:hidden;}
.youshi .youshi_nr dl i{ width:100%; height:100%; position:absolute; left:0; bottom:-100%; background:#006d30; z-index:0;} 
.youshi .youshi_nr dl dt{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:1; color: #fff; font-style:italic;}
.youshi .youshi_nr dl dd{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:2;}
.youshi .youshi_nr dl dd img{ width:auto; height:auto; margin:0 auto;}
.youshi .youshi_nr dl dd .img1{ display:block;}
.youshi .youshi_nr dl dd .img2{ display:none;}
.youshi .youshi_nr dl:hover i{ bottom:0;}
.youshi .youshi_nr dl:hover dt{ opacity:0.2;} 
.youshi .youshi_nr dl:hover .img1{ display:none;} 
.youshi .youshi_nr dl:hover .img2{ display:block;} 
.youshi .youshi_nr dl:hover dd{ color:#FFF;}

/*new_img*/
.new_img dl{ width:31.5%; margin-right:2.5%;}
.new_img dl:last-child{ margin-right:0;}
.new_img dl dt{ border-top-left-radius:15px; border-top-right-radius:15px;}
.new_img dl dt img{ border-top-left-radius:15px; border-top-right-radius:15px;}
.new_img dl dd{ border-bottom-left-radius:15px; border-bottom-right-radius:15px; background:#12241a;}
.new_img dl:hover img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1);}
.new_img dl:hover dd a{ color:#64dad1;}
.new_img dl:hover .more1 .border { transform: scale(15.7) rotate(45deg); }
.new_img dl:hover .more1 span { color: #FFF; transition: color 2s ease;} 















@media screen and (max-width: 1750px) and (min-width:0) {
/*syjsfw*/
.syjsfw .jsfw_l{ width:44%;}
}
@media screen and (max-width: 1600px) and (min-width:0) {
/*syabouts*/
.syabouts .about_l{ width:42%;}
.more{ width:148px;}
.more1{ width:44px;}
}
@media screen and (max-width: 1300px) and (min-width:0) {
/*syabouts*/
.more{ width:144px;}
.more1{ width:40px;}
}
@media screen and (max-width: 1100px) and (min-width:0) {
/*syabouts*/
.more{ width:138px;}
.more1{ width:36px;}
}
@media screen and (max-width: 1024px) and (min-width:0) {
/*syabouts*/
.more{ width:1.54rem; height:0.54rem;}
.more>span { height:0.54rem; line-height:0.54rem;}
.more .border { width: 0.27rem; height: 0.27rem; }
.more>.border:nth-of-type(1) { top: -0.32rem; left: 0.27rem; }
.more>.border:nth-of-type(2) { top: -0.32rem; right: 0.27rem; }
.more>.border:nth-of-type(3) { bottom: -0.32rem; left: 0.27rem; }
.more>.border:nth-of-type(4) { bottom: -0.32rem; right: 0.27rem; }
.more1{ width:0.54rem; height:0.34rem; border-radius: 0.5rem; -moz-border-radius: 0.5rem; -webkit-border-radius: 0.5rem;}
.more1>span {height:0.34rem; line-height:0.34rem; border-radius: 0.5rem; -moz-border-radius: 0.5rem; -webkit-border-radius: 0.5rem;}
.more1 .border { width: 0.17rem; height: 0.17rem; }
.more1>.border:nth-of-type(1) { top: -0.22rem; left:0.17rem; }
.more1>.border:nth-of-type(2) { top: -0.22rem; right:0.17rem; }
.more1>.border:nth-of-type(3) { bottom: -0.22rem; left:0.17rem; }
.more1>.border:nth-of-type(4) { bottom: -0.22rem; right:0.17rem; }

.syabouts{ margin-top:0.78rem; padding:0.6rem 0 0.6rem 0;}
.syabouts .about_l{ width:100%;}
.syabouts .about_r{ width:100%; margin-top:0.15rem}
.syabouts .about_r dl{ width:48%; margin-left:1%; margin-right:1%; margin-top:0.1rem;}
.syabouts .about_r dl dd .cp_nr{ height:2.8rem;}

/*syjsfw*/
.syjsfw{ padding:0.6rem 0 0.6rem 0;}
.syjsfw .jsfw_l{ width:100%;}


/*youshi*/
.youshi{ position:inherit; left:inherit; top:inherit; z-index:inherit;}
.youshi .main{ width:100%; background:#eee;}
.youshi .youshi_nr dl{ width:25%; height:1.62rem;}
.youshi .youshi_nr dl dd img{ height:0.7rem;}

/*new_img*/
.new_img dl{ width:100%; margin-right:0%; margin-bottom:0.15rem;}
.new_img dl:last-child{ margin-right:0; margin-bottom:0;}
.new_img dl dt{ border-top-left-radius:0.15rem; border-top-right-radius:0.15rem;}
.new_img dl dt img{ border-top-left-radius:0.15rem; border-top-right-radius:0.15rem;}
.new_img dl dd{ border-bottom-left-radius:0.15rem; border-bottom-right-radius:0.15rem;}










}



/*keyframes*/
@keyframes turnCirle { 0% {
transform:rotateY(0);
}
 25% {
transform:rotateY(90deg);
}
 50% {
transform:rotateY(180deg);
}
 75% {
transform:rotateY(90deg);
}
 100% {
transform:rotateY(180deg);
}
}
 @-webkit-keyframes turnCirle { 0% {
transform:rotateY(0);
}
 25% {
transform:rotateY(90deg);
}
 50% {
transform:rotateY(180deg);
}
 75% {
transform:rotateY(90deg);
}
 100% {
transform:rotateY(180deg);
}
}
 @keyframes turnDown { 0% {
transform:translateY(-100%);
}
 75% {
transform:translateY(0%);
}
 100% {
transform:translateY(100%);
}
}
@-webkit-keyframes turnDown { 0% {
transform:translateY(-100%);
}
 75% {
transform:translateY(0%);
}
 100% {
transform:translateY(100%);
}
}
 @keyframes inlinerbg { 0% {
-webkit-transform:translate(5px, -9px);
transform: translate(5px, -9px);
}
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform:translate(5px, -9px);
transform: translate(5px, -9px);
}
}
@keyframes inlinerbgo { 0% {
-webkit-transform:translate(-5px, 9px);
transform: translate(-5px, 9px);
}
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform:translate(-5px, 9px);
transform: translate(-5px, 9px);
}
}
 @-webkit-keyframes to100vh {  0% {
 width: 0
}
 100% {
 width: 100vw
}
}
 @keyframes to100vh {  0% {
 width: 0
}
 100% {
 width: 100vw
}
}

@keyframes arrow { %0, %100 {
 bottom:45px;
 opacity: 1;
}
 50% {
 bottom:45px;
 opacity: .5
}
}
 @-webkit-keyframes arrow { %0, %100 {
bottom:25px;
 opacity: 1;
}
 50% {
 bottom:45px;
 opacity: .5;
}
}