@keyframes opacity{
0%{opacity:0}
99%{opacity:0}
100%{opacity:1}
}
.yind{ width:100%; height:100%; position:fixed;left:0px;top:0px; z-index:400; background:url(../images/bg-7.jpg) no-repeat center; background-size:cover; text-align:center;opacity:1 }
.yind:before{ height:100%; content:""; display:inline-block; vertical-align:middle}
.yind-cir{ width:38%; height:100%; overflow:hidden; display:inline-block; vertical-align:middle; position:relative;transform:rotateX(-180deg)}
.yind-w{ float:left; width:100%; height:100%;transform:rotate(90deg); position:relative}
.yind-w svg{ width:202%; height:202%; position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0}
.yind-w svg:nth-child(1){animation:opacity 4s linear alternate}
.yind-w svg.load{opacity:1;}
@keyframes dash{to{stroke-dashoffset:0px}}
.yindtu{stroke-dasharray:900px;stroke-dashoffset:900px}
.yindtu{animation:dash 4s linear forwards}
.yind-wz{ width:100%; height:100%; overflow:hidden;  position:absolute;left:0px;top:0px; z-index:22; text-align:center}
.yind-ver{ width:100%;position:absolute;left:0px;top:45%;transform:rotateX(180deg) }
.yind-ver img{ width:50%; height:auto; display: inline-block}
.yind-ver span{ width:100%; overflow:hidden; display:block; position:absolute;left:0px;top:220%; font-size:24px; color:#c7000b;font-family:'EuclidCircularALight'}
.yind-hide{opacity:0; visibility:hidden}

/*菜单定位导航*/
.menu-pos{ width:20px; position:fixed;right:20px;top:50%; z-index:200;}
.menu-item{ width:100%; overflow:hidden; margin-top:12px }
.menu-item a{ width:8px; height:8px; overflow:hidden; float:left; border-radius:50%; background:#ddd}
.menu-item.active a{ background:#c7000b}
@keyframes move1{
0%{transform:translateX(-50%)}
50%{transform:translateX(60px)}
100%{transform:translateX-(70%)}
}
@keyframes move2{
0%{transform:translateX(80%)}
50%{transform:translateX(0px)}
100%{transform:translateX(-60%)}
}
@keyframes move3{
0%{transform:translateX(24%)}
50%{transform:translateX(70%)}
100%{transform:translateX(-60%)}
}
.banner{ width:100%; overflow:hidden; height:100%; background:#fff}
.banner-1{ width:100%; overflow:hidden; height:100%; background:url(../images/banner-3.jpg) no-repeat center; background-size:cover; position:relative}
.banner-bg1{ width:100%; height:70%; position:absolute;left:0px;bottom:0px; z-index:12; background:url(../images/banner-bg.png) no-repeat top center; background-size:100%;animation:move1 70s linear infinite alternate}
.banner-bg2{ width:100%; height:70%;position:absolute;left:0px;bottom:0px; z-index:13; background:url(../images/banner-bg.png) no-repeat top center;background-size:100%;animation:move2 70s linear  infinite alternate}
.banner-bg3{ width:100%; height:70%;  position:absolute;left:0px;bottom:0px; z-index:14; background:url(../images/banner-bg.png) no-repeat top center;background-size:100%;animation:move3 70s linear  infinite alternate}
.banner-1cont{ width:100%; overflow:hidden; position:absolute;left:0px;top:0px; height:100%; z-index:15; text-align:center}
.banner-1cont:before{ height:100%; content:""; display:inline-block; vertical-align:middle}
.banner-1ver{ width:90%; display:inline-block; vertical-align:middle}
.banner-1ver img{ transform:translateY(-90px);opacity:0;transition:all 0.5s ease 0.5s}
.section.active .banner-1ver img{transform:translateY(0px);opacity:1;}
@keyframes move4{
0%{transform:scale(0.9)}
50%{transform:scale(1.2)}
100%{transform:scale(0.9) } 
}
.content-1{ width:100%; overflow:hidden; position:relative; height:100%}
.content-1bg1,.content-1bg1 img{ float:left; width:100%; overflow:hidden; height:100%; z-index:12}
.content-1bg1 img{animation:move4 linear 52s alternate infinite;object-fit:cover}
.content-1bg2{width:100%; overflow:hidden; height:100%; position:absolute;left:0px;top:0px; z-index:13}
.content-1bg2 img{ float:left; width:100%; height:100%;object-fit:cover}
.content-1bg2:before{ width:100%; height:100%; content:""; position:absolute;left:0px;top:0px; z-index:12; background:rgba(0,0,0,0.2)}
.content-1ct{ width:100%; overflow:hidden; height:100%; position:absolute;left:0px;top:0px; z-index:14; text-align:left; padding-top:100px}
.content-1ct:before{ height:100%; content:""; display:inline-block; vertical-align:middle}
.content-1ver{ width:90%; overflow:hidden; display:inline-block; vertical-align:middle;transform:translateY(-90px);opacity:0;transition:all 0.5s ease 0.5s}
.content-1ver h3{ float:left; width:100%; overflow:hidden; font-size:60px; color:#fff; font-weight:bold; line-height:72px; letter-spacing:3px; position:relative; padding-bottom:59px}
.content-1ver h3:before{ width:120px; height:6px; content:""; position:absolute;left:0px;bottom:0px; background:#c7000b}
.content-1ver p{ float:left; width:760px; overflow:hidden; font-size:18px; color:#fff; line-height:34px; text-indent:2em; margin-top:50px}
.section.active .content-1ver{transform:translateY(0px);opacity:1;}

.content-2{ width:100%; overflow:hidden; height:100%}
.content-2cer{ width:120vw; overflow:hidden; height:100%; margin-left:-10%; display:flex}
.content-2item{ float:left; width:40vw; overflow:hidden; height:100%;transform:skewX(-15deg); position:relative; background:#f7f8f8;transition:all 0.8s ease}
.content-2item:nth-child(2){ float:left; width:40vw; overflow:hidden; height:100%; background:#efefef }
.content-2item:nth-child(3){ float:left; width:40vw; overflow:hidden; height:100%; background:#dcdddd}

.content-2item img{width:auto; height:100%;object-fit:cover; position:absolute;left:50%;top:0px; z-index:12;opacity:1;transform:skewX(17deg) translateX(-50%);transition:all 0.8s ease;opacity:1}
.content-2item img:nth-child(2){opacity:0}
.content-2item:hover{ width:74vw}
.content-2item:hover img{opacity:0}
.content-2item:hover img:nth-child(2){opacity:1;}
@keyframes shows{
0%{opacity:0}
15%{opacity:0}
100%{opacity:1}
}
.content-3{ width:220px; overflow:hidden; position:absolute;left:50%;bottom:45%;margin-top:55px; z-index:23;margin-left:-110px;transform:skewX(17deg) translateY(50%);color:#333 }
.content-3 h3{ float:left; width:100%; overflow:hidden; font-size:36px;  letter-spacing:3px}
.content-3 span{ float:left; width:100%; overflow:hidden; font-size:24px; position:relative; padding-bottom:40px;font-family:'EuclidCircularALight'; margin-top:6px}
.content-3 span:before{ width:24px; height:6px; position:absolute;left:0px;bottom:0px; z-index:12; background:#c7000b; content:""}
.content-3 p{ float:left; width:100%; overflow:hidden; font-size:18px; line-height:36px; margin-top:20px;opacity:0; height:0px}

.content-2item:nth-child(1):hover .content-3{ bottom:24%; width:90%; color:#fff;margin-left:-24%;animation:shows 3s ease 1;animation-fill-mode: forwards;}
.content-2item:nth-child(1):hover .content-3 h3,.content-2item:nth-child(1):hover .content-3 span,.content-2item:nth-child(1):hover .content-3 p{ width:590px; height:auto}
.content-2item:nth-child(2):hover .content-3{ bottom:24%; width:80%; color:#fff; margin-left:-35%;animation:shows 3s ease 1;animation-fill-mode: forwards;}
.content-2item:nth-child(2):hover .content-3 h3,.content-2item:nth-child(2):hover .content-3 span,.content-2item:nth-child(2):hover .content-3 p{ width:590px; height:auto}
.content-2item:nth-child(3):hover .content-3{ bottom:24%; width:80%; color:#fff; margin-left:-25%;animation:shows 3s ease 1;animation-fill-mode: forwards; text-align:right}
.content-2item:nth-child(3):hover .content-3 h3,.content-2item:nth-child(3):hover .content-3 span,.content-2item:nth-child(3):hover .content-3 p{ width:590px; height:auto}
.content-2item:nth-child(3):hover .content-3 span:before{left:auto;right:0px}
.content-2item:hover .content-3 p{opacity:1}


.news{ width:100%; overflow:hidden; background:url(../images/bg-3.jpg) no-repeat; background-size:cover; height:100%; padding-top:100px}
.news:before{ height:100%; content:""; display:inline-block; vertical-align:middle}
.news-ver{  display:inline-block; vertical-align:middle; width:99.6%;transform:translateY(-90px);opacity:0;transition:all 0.5s ease 0.5s}
.news-slide{ width:100%; overflow:hidden;height:72px}
.news-slide span{width:auto; overflow:hidden; position:relative; font-size:32px; color:#333; vertical-align:bottom; display: inline; margin-right:65px; padding-bottom:19px; cursor:pointer}
.news-slide span:before{ width:0px; height:6px; overflow:hidden; position:absolute;left:0px;bottom:0px; z-index:12; background:#c7000b; content:""}
.news-slide span.active{ font-size:40px; font-weight:bold}
.news-slide span.active:before{ width:24px}
.news-content{ width:100%; overflow:hidden; position:relative}
.news-pannel{ float:left; width:100%; overflow:hidden;opacity:0; position:relative; z-index:12}
.news-pannel:last-child{ position:absolute;left:0px;top:0px;}
.news-pannel.active{opacity:1; z-index:13}
.news-item{ float:left; width:31.2%; overflow:hidden; margin:70px 3.2% 0px 0px}
.news-item:nth-child(3n){ float:right; margin-right:0px}
.news-item a{ display:block}
.news-item samp{ width:100%; overflow:hidden;height:15.26vw; display:block}
.news-item samp img{ width:100%; height:100%;object-fit:cover}
.news-item span{ width:84%; overflow:hidden; margin:30px auto 0px; display:block; font-size:16px; color:#c7000b;}
.news-item p{ width:84%; overflow:hidden; margin:6px auto 0px; display:block; font-size:24px; color:#333; line-height:36px; height:72px}
.news-item a:hover samp img{ transform:scale(1.1)}
.news-item a:hover span,.news-item a:hover p{ color:#c7000b;transform:translateY(-5px)}
.news-more{ float:left; width:100%; overflow:hidden; margin-top:82px; text-align:center}
.news-more a{width:176px; display:inline-block; height:48px; line-height:48px; text-align:center; overflow:hidden; border:1px #c7000b solid; font-size:16px; color:#c7000b}
.news-more a:hover{ background:#c7000b; color:#fff}
.section.active .news-ver{transform:translateY(0px);opacity:1;}

.news-pannel .news-item:nth-child(4){ display:none}


@media screen and (max-width:1660px){
.content-1ver h3{ font-size:56px; line-height:70px; padding-bottom:55px}
.content-1ver p{ width:740px; font-size:16px;line-height:32px; margin-top:46px}

.content-3 h3{ font-size:32px; }
.content-3 span{  font-size:22px; padding-bottom:36px;}
.content-3 p{font-size:17px; line-height:32px; margin-top:18px; }
.content-2item:nth-child(3):hover .content-3{ margin-left:-35%;}


.news-slide{height:72px}
.news-slide span{ font-size:26px;  margin-right:50px;  }
.news-slide span.active{ font-size:32px; }

.news-item{ margin:60px 3.2% 0px 0px}
.news-item span{ margin:20px auto 0px;  font-size:15px; }
.news-item p{font-size:20px; line-height:32px; height:64px}
.news-more{ margin-top:58px}
.news-more a{ width:170px; height:47px; line-height:47px; font-size:15px;}


}
@media screen and (max-width:1440px){
.banner-1ver img{ width:66%; height:auto}
.news{ padding-top:90px}	
.content-1ct{padding-top:90px}	
.content-1ver h3{ font-size:40px; line-height:60px; padding-bottom:40px}
.content-1ver h3:before{ width:100px; height:4px; }
.content-1ver p{ width:640px; font-size:14px;line-height:30px; margin-top:30px}

.content-3 h3{ font-size:26px; }
.content-3 span{  font-size:18px; padding-bottom:32px;}
.content-3 p{font-size:16px; line-height:30px; margin-top:14px; width:500px }

.content-2item:nth-child(1):hover .content-3 h3,.content-2item:nth-child(1):hover .content-3 span,.content-2item:nth-child(1):hover .content-3 p{ width:500px;}
.content-2item:nth-child(2):hover .content-3 h3,.content-2item:nth-child(2):hover .content-3 span,.content-2item:nth-child(2):hover .content-3 p{ width:520px;}
.content-2item:nth-child(3):hover .content-3{  margin-left:-42%;}
.content-2item:nth-child(3):hover .content-3 h3,.content-2item:nth-child(3):hover .content-3 span,.content-2item:nth-child(3):hover .content-3 p{ width:570px;}

.news-slide{height:60px}
.news-slide span{ font-size:22px;    margin-right:40px;  }
.news-slide span.active{ font-size:26px; }

.news-item{ margin:50px 3.2% 0px 0px}
.news-item span{ margin:18px auto 0px;  }
.news-item p{font-size:18px; line-height:30px; height:60px}
.news-more{ margin-top:40px}
.news-more a{ width:160px; height:44px; line-height:44px; font-size:14px;}
}

@media screen and (max-width:1280px){
.content-1ct{padding-top:80px}	
.news{ padding-top:80px}
.content-1ver h3{ font-size:34px; line-height:50px; padding-bottom:30px}
.content-1ver h3:before{ width:80px; height:3px; }
.content-1ver p{ width:55%;}

.content-3 h3{ font-size:22px; }
.content-3 span{  font-size:16px; padding-bottom:28px;}
.content-3 p{font-size:14px; line-height:28px; margin-top:12px; }

.content-2item:nth-child(1):hover .content-3 h3,.content-2item:nth-child(1):hover .content-3 span,.content-2item:nth-child(1):hover .content-3 p{ width:420px;}
.content-2item:nth-child(2):hover .content-3{margin-left:-40%;}
.content-2item:nth-child(2):hover .content-3 h3,.content-2item:nth-child(2):hover .content-3 span,.content-2item:nth-child(2):hover .content-3 p{ width:500px; }
.content-2item:nth-child(3):hover .content-3{margin-left:-44%;}
.content-2item:nth-child(3):hover .content-3 h3,.content-2item:nth-child(3):hover .content-3 span,.content-2item:nth-child(3):hover .content-3 p{ width:500px}

.news-slide{height:50px}
.news-slide span{ font-size:18px;   margin-right:30px;  }
.news-slide span.active{ font-size:22px; }
.news-slide span:before{height:4px; }

.news-item{ margin:30px 3.2% 0px 0px}
.news-item span{ margin:16px auto 0px;  }
.news-item p{font-size:14px; line-height:25px; height:50px}
.news-more{ margin-top:15px}
.news-more a{ width:120px; height:36px; line-height:36px; font-size:12px;}
}
@media screen and (max-width:1000px){
.content-1ct{padding-top:70px}	
.content-1ver h3{ font-size:28px; line-height:46px; padding-bottom:20px}

.content-3 h3{ font-size:20px; }
.content-3 span{  font-size:15px; padding-bottom:24px;}
.content-3 p{font-size:13px; line-height:26px; margin-top:10px; }


.content-2item:nth-child(1) .content-3{ margin-left:-16px}
.content-2item:nth-child(3) .content-3{ margin-left:-90px}
.content-3{ width:120px;margin-left:-52px; }

.content-2item:nth-child(1):hover .content-3 h3,.content-2item:nth-child(1):hover .content-3 span,.content-2item:nth-child(1):hover .content-3 p{ width:320px;}
.content-2item:nth-child(2):hover .content-3 h3,.content-2item:nth-child(2):hover .content-3 span,.content-2item:nth-child(2):hover .content-3 p{ width:400px;}
.content-2item:nth-child(3):hover .content-3{margin-left:-44%;}
.content-2item:nth-child(3):hover .content-3 h3,.content-2item:nth-child(3):hover .content-3 span,.content-2item:nth-child(3):hover .content-3 p{ width:400px;}

.news{ padding-top:70px}
.news-ver{ width:99%}
.news-slide span{ font-size:17px; margin-right:27px;  }
.news-slide span.active{ font-size:20px; }

.news-item{ margin:20px 3.2% 0px 0px}
.news-item span{ margin:12px auto 0px;  }
.news-item p{font-size:14px; line-height:24px; height:48px}
.news-more{ margin-top:10px}
.news-more a{ width:100px; height:32px; line-height:32px;}
}
@media screen and (max-width:768px){
.header-def .logo{ width:100px}	
.yind-cir{ width:80%; }
.yind-ver{top:46%; }
.yind-ver img{ width:55%;}
.yind-ver span{top:200%;}

/*菜单定位导航*/
.menu-pos{ width:10px;right:10px}

.banner-1ver img{ width:90%}
.banner-bg1{ width:130%; height:50%; }
.banner-bg2{ width:130%; height:50%;}
.banner-bg3{ width:130%; height:50%;  }

@keyframes move4{
0%{transform:scale(1)}
50%{transform:scale(1.2)}
100%{transform:scale(1) } 
}

.content-1bg2{ background:rgba(0,0,0,0.4)}
.content-1bg2 img{opacity:0}

.content-1ct{padding-top:50px}	
.content-1ver h3{ font-size:20px; line-height:30px; padding-bottom:15px}
.content-1ver p{ width:100%}

.content-2{ padding-top:50px;box-sizing:border-box}
.content-2cer{ width:100vw; margin-left:0%; display:block }
.content-2item{ width:100vw; height:33.3%;transform:skewX(0deg); }
.content-2item:nth-child(2){ width:100vw; height:33.4%;  }
.content-2item:nth-child(3){ width:100vw; height:33.3%; }

.content-2item img{left:0%;opacity:0;transform:skewX(0deg); width:100%}
.content-2item img:nth-child(2){opacity:1}
.content-2item:hover{ width:100vw}
.content-2item:hover img{opacity:0}
.content-2item:hover img:nth-child(2){opacity:1;animation:none}

.content-3{ width:100%; bottom:auto;margin-top:0px;margin-left:0px;transform:skewX(0deg) translateY(0%); height:100%;left:0px;top:0px; background:rgba(0,0,0,0.3);box-sizing:border-box; padding:20px 5% 0px }
.content-3 h3{ width:100%; font-size:16px; color:#fff}
.content-3 span{font-size:14px; padding-bottom:5px; color:#fff; margin-top:2px }
.content-3 span:before{ width:16px; height:2px;}
.content-3 p{font-size:12px; line-height:20px; margin-top:10px; display:block;opacity:1; color:#fff; height:60px; width:100%}
.content-2item:nth-child(1) .content-3{ margin:0px}

.content-2item:nth-child(1):hover{ height:45%}
.content-2item:nth-child(1):hover .content-3,.content-2item:nth-child(2):hover .content-3,.content-2item:nth-child(3):hover .content-3{ width:100%;bottom:auto;margin-left:0px;animation:none; padding:20px 5% 0px}
.content-2item:nth-child(1):hover .content-3 h3,.content-2item:nth-child(1):hover .content-3 span,.content-2item:nth-child(1):hover .content-3 p{ width:100%; }

.content-2item:nth-child(2):hover{ height:45%;}
.content-2item:nth-child(2):hover .content-3 h3,.content-2item:nth-child(2):hover .content-3 span,.content-2item:nth-child(2):hover .content-3 p{ width:100%; }
.content-2item:nth-child(3):hover{ height:45%;}
.content-2item:nth-child(3):hover .content-3 h3,.content-2item:nth-child(3):hover .content-3 span,.content-2item:nth-child(3):hover .content-3 p{ width:100%;text-align:left}
.content-2item:nth-child(3) .content-3 {margin-left: 0px; }
.content-2item:nth-child(3):hover .content-3 span:before{left:0px;right:auto}
.content-1bg2:before{ width:0%; height:0%;background:none}


.news{ padding-top:50px}
.news-ver{ width:98%}
.news-slide{ height:auto} 
.news-slide span{ font-size:18px; margin-right:20px;  }
.news-slide span.active{ font-size:18px; }
.news-pannel .news-item:nth-child(4){ display:block}
.news-item{ margin:20px 1% 0px 0px; width:49%}
.news-item:nth-child(2n){ float:right; margin-right:0px}
.news-item:nth-child(3){ float:left; margin-right:0px}
.news-item samp{ height:24.26vw}
.news-item span{ width:100%  }
.news-item p{font-size:14px; line-height:24px; width:100%; height:48px}
.news-more{ margin-top:20px}
.news-more a{ width:100px; height:32px; line-height:32px;}
	
	

}