@charset "utf-8";
/* CSS Document */
.section1{ /*background:url(../images/base.gif) no-repeat center center; background-size:100% 100%;*/ }
.canvasMain{ position:fixed; z-index:999999; background:url(../images/basx.jpg) no-repeat center center; background-size: 100% 100%; width:100%; height:100%; left:0; top:0; z-index:0;}
.section2{ background:url(../images/bsec2.jpg) no-repeat center center; background-size:100% 100%; }
.section3{ background:url(../images/bsecc3.jpg) no-repeat center center; background-size:100% 100%; }
.section4{ background:url(../images/bsecc4.jpg) no-repeat center center; background-size:100% 100%; }
.section5{ background:url(../images/bsec111.jpg) no-repeat center center; background-size:100% 100%; }
.section6{ background:url(../images/bsec6.jpg) no-repeat center center; background-size:100% 100%; }
.section7{ background:url(../images/bsecc7.jpg) no-repeat center center; background-size:100% 100%; }
.section8{ background-color:#1f56be;}

.waper-tit{ z-index: 9; text-align:center; position:absolute; left:50%; top:90px; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%);}
.waper-tit h3{ font-size:40px; font-family:'Arial'; color:#1B499B; text-transform:uppercase; font-weight:bold;}
.waper-tit h4{ font-size:18px; color:#081123; position:relative; font-weight:bold;text-transform: uppercase;}
.waper-tit h4 i{ display: inline-block; width:38px; border-top:1px solid #081123;  margin: 0px 15px 6px; }
.waper-tit4{ z-index: 9;}
.waper-tit4 h3, 
.waper-tit4 h4{ color:#fff;}
.waper-tit4 i{ border-color: #fff !important;}
/*.waper-tit h4:before{ position:abso


/*.waper-tit h4:before{ position:absolute; left:0; top:50%; content:''; width:38px; border-top:1px solid #081123;}
.waper-tit h4:after{ position:absolute; right:0; top:50%; content:''; width:38px; border-top:1px solid #081123;}
.waper-tit2 h4:before{ left:53px;}
.waper-tit2 h4:after{ right:53px;}
.waper-tit3 h4:before{ left:100px;}
.waper-tit3 h4:after{ right:100px;}
.waper-tit4 h3, .waper-tit4 h4{ color:#fff;}
.waper-tit4 h4:before, .waper-tit4 h4:after{ border-color:#fff;}
.waper-tit5 h4:before{ left:140px;}
.waper-tit5 h4:after{ right:140px;}*/

.page{ position:absolute; left:50%; top:50%;}
.page1{ width:876px; height:368px; margin-left:-438px; margin-top:-184px; opacity:1;
/*  animation: op1 1s  linear 6.5s infinite alternate ;
  -webkit-animation: op1 1s  linear 6.5s infinite alternate ;*/
}
/*@keyframes op1 {
  from{
	 opacity:0.7;
  } to{
	 opacity:1;
	 }
}
@-webkit-keyframes op1 {
  from{
	 opacity:0.7;
  } to{
	 opacity:1;
	 }
}
@-moz-keyframes op1 {
  from{
	 opacity:0.7;
  } to{
	 opacity:1;
	 }
}
@-o-keyframes op1 {
  from{
	 opacity:0.7;
  } to{
	 opacity:1;
	 }
}

.page1 .span1:before{ position:absolute; content:''; left:0; top:0; width:0%; border-top:4px solid #fff;
   animation: xx1 2s  linear 0s 1 alternate ;
   -webkit-animation: xx1 2s  linear 0s 1 alternate ;
   animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards;
}
@keyframes xx1 {
  from{
	  width:0%;
  } to{
	  width:100%; 
  }
}
@-webkit-keyframes xx1 {
  from{
	  width:0%;
  } to{
	  width:100%; 
  }
}
@-moz-keyframes xx1 {
  from{
	  width:0%;
  } to{
	  width:100%; 
  }
}
@-o-keyframes xx1 {
  from{
	  width:0%;
  } to{
	  width:100%; 
  }
}
.page1 .span1:after{ position:absolute; content:''; right:0; top:0; width:0%; height:0%; border-right:4px solid #fff;
	animation: xx2 1s  linear 2s 1 alternate;
	-webkit-animation: xx2 1s  linear 2s 1 alternate; 
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}
@keyframes xx2 {
  from{
	  height:0%;
  } to{
	  height:100%; 
  } 
}
@-webkit-keyframes xx2 {
  from{
	  height:0%;
  } to{
	  height:100%; 
  } 
}
@-moz-keyframes xx2 {
  from{
	  height:0%;
  } to{
	  height:100%; 
  } 
}
@-o-keyframes xx2 {
  from{
	  height:0%;
  } to{
	  height:100%; 
  } 
}
.page1 .span2:before{ position:absolute; content:''; right:0; bottom:0; width:0%; border-bottom:4px solid #fff;
     animation: xx3 2s  linear 3s 1 alternate ;
	 -webkit-animation: xx3 2s  linear 3s 1 alternate ;
     animation-fill-mode: forwards;
	 -webkit-animation-fill-mode: forwards
}

@keyframes xx3 {
  from{
	  width:0%;
  } to{
	  width:100%; 
  }
}
@-webkit-keyframes xx3 {
  from{
	  width:0%;
  } to{
	  width:100%; 
  }
}
@-moz-keyframes xx3 {
  from{
	  width:0%;
  } to{
	  width:100%; 
  }
}
@-o-keyframes xx3 {
  from{
	  width:0%;
  } to{
	  width:100%; 
  }
}

.page1 .span2:after{ position:absolute; content:''; left:0; bottom:0; width:0%; height:0%; border-left:4px solid #fff;
     animation: xx4 1s  linear 5s 1 alternate ;
	 -webkit-animation: xx4 1s  linear 5s 1 alternate ;
     animation-fill-mode: forwards;
	 -webkit-animation-fill-mode: forwards;
}
@keyframes xx4 {
  from{
	  height:0%;
  } to{
	  height:100%; 
  }
}
@-webkit-keyframes xx4 {
  from{
	  height:0%;
  } to{
	  height:100%; 
  }
}
@-moz-keyframes xx4 {
  from{
	  height:0%;
  } to{
	  height:100%; 
  }
}
@-o-keyframes xx4 {
  from{
	  height:0%;
  } to{
	  height:100%; 
  }
}*/

.page1 .waper-img{ width:192px; height:192px; position:absolute; left:50%; margin-left:-96px; text-align:center; line-height:192px;}
.page1 .waper-img i{ display:block; position:absolute; background-color:rgba(255,255,255,0.03);
 animation: quan 2.5s linear 1s infinite normal;
}
.page1 .waper-img i[class$='1']{ left:0; top:0; width:192px; height:192px; border-radius:50%;}
.page1 .waper-img i[class$='1']:before{ width:155px; height:155px; position:absolute; content:''; left:0; top:18px; border-radius:50%; border:1px solid #fff;   opacity:0;
 animation: an1 2.5s linear 0s infinite alternate;
 -webkit-animation: an1 2.5s  linear 0s infinite alternate;
}
.page1 .waper-img i[class$='1']:after{ width:155px; height:155px; position:absolute; content:''; right:0; top:18px; border-radius:50%; border:1px solid #fff;  opacity:0;
 animation: an1 2.5s  linear .5s infinite alternate;
 -webkit-animation: an1 2.5s  linear .5s infinite alternate;
}
.page1 .waper-img i[class$='2']{ width:192px; height:192px; position:absolute; left:0; top:0; border-radius:50%;}
.page1 .waper-img i[class$='2']:before{ position:absolute; left:18px; top:0; content:''; width:155px; height:155px; border-radius:50%; border:1px solid #fff;  opacity:0;
 animation: an1 2.5s  linear 1s infinite alternate;
 -webkit-animation: an1 2.5s  linear 1s infinite alternate;
}
.page1 .waper-img i[class$='2']:after{ position:absolute; right:18px; bottom:0; content:''; width:155px; height:155px; border-radius:50%; border:1px solid #fff;  opacity:0;
 animation: an1 2.5s  linear 1.5s infinite alternate;
 -webkit-animation: an1 2.5s  linear 1.5s infinite alternate;
}
.page1 .waper-wen{ width:100%; text-align:center; position:absolute; left:0%; bottom:0%;
/*     opacity:0;
	 transform: scale(0.5) translate(-50%,-50%);
	 -webkit-transform: scale(0.5) translate(-50%,-50%);
	 -moz-transform: scale(0.5) translate(-50%,-50%);
	 -o-transform: scale(0.5) translate(-50%,-50%); 
	 animation: op2 0.5s  linear 6s 1 alternate ;
	 -webkit-animation: op2 0.5s  linear 6s 1 alternate ;
	 animation-fill-mode: forwards;
	 -webkit-animation-fill-mode: forwards;
*/
}
/*@keyframes op2 {
  from{
	  opacity:0;
	   transform: scale(0.5) translate(-50%,-50%);
  } to{
	  opacity:1;
	   transform: scale(1.0) translate(-50%,-50%);
  }
}

@-webkit-keyframes op2 {
  from{
	  opacity:0;
	   -webkit-transform: scale(0.5) translate(-50%,-50%);
  } to{
	  opacity:1;
	   -webkit-transform: scale(1.0) translate(-50%,-50%);
  }
}
@-moz-keyframes op2 {
  from{
	  opacity:0;
	   -moz-transform: scale(0.5)) translate(-50%,-50%);
  } to{
	  opacity:1;
	   -moz-transform: scale(1.0) translate(-50%,-50%);
  }
}

@-o-keyframes op2 {
  from{
	  opacity:0;
	   -o-transform: scale(0.5)) translate(-50%,-50%);
  } to{
	  opacity:1;
	   -o-transform: scale(1.0) translate(-50%,-50%);
  }
}*/

.page1 .waper-wen h2{ font-size:50px; margin-bottom:25px; color:#fff; font-family:'Times New Roman'; text-transform:uppercase;
  animation: mv1 15s linear 0s infinite alternate;
}
.page1 .waper-wen h3{ font-size:40px; color:#fff; position:relative; margin-top:-20px;
  animation: mv2 15s linear 0s infinite alternate;
}

.page1 .waper-wen h3:before{ position:absolute; content:''; left:20px; top:50%; border-top:1px solid #fff; width:75px;}
.page1 .waper-wen h3:after{ position:absolute; content:''; right:20px; top:50%; border-top:1px solid #fff; width:75px;}


.next{ width:38px; height:52px; position:absolute; left:50%; margin-left:-19px; bottom:4%; z-index:99999; cursor:pointer;
	animation: moves 3s linear 0s infinite alternate;
	-webkit-animation: moves 3s linear 0s infinite alternate;
}
.next span{ display:block; color:#fff; font-size:20px; text-align:center;}
.next span.mouse{ font-size:32px;}

@keyframes quan{
	0%{ transform:rotate(0deg)}
	100%{ transform:rotate(359deg)}
}
@-webkit-keyframes quan{
	0%{ -webkit-transform:rotate(0deg)}
	100%{ -webkit-transform:rotate(359deg)}
}
@-moz-keyframes quan{
	0%{ -moz-transform:rotate(0deg)}
	100%{ -moz-transform:rotate(359deg)}
}

@keyframes an1{
	0%{
		transform: scale(1.3);
		opacity:0;
		}
	25%{
		transform: scale(1.3);
		opacity:0;
		}	
	40%{
		transform: scale(1);
		opacity:1;
	}
	100%{
		transform: scale(1);
		opacity:1;
	}	
}
@-webkit-keyframes an1{
	0%{
		-webkit-transform: scale(1.3);
		opacity:0;
		}
	25%{
		-webkit-transform: scale(1.3);
		opacity:0;
		}	
	40%{
		-webkit-transform: scale(1);
		opacity:1;
	}
	100%{
		-webkit-transform: scale(1);
		opacity:1;
	}	
}
@-moz-keyframes an1{
	0%{
		-moz-transform: scale(1.3);
		opacity:0;
		}
	25%{
		-moz-transform: scale(1.3);
		opacity:0;
		}	
	40%{
		-moz-transform: scale(1);
		opacity:1;
	}
	100%{
		-moz-transform: scale(1);
		opacity:1;
	}	
}
@keyframes mv1 {
  from, 50%, to {
	  transform:translateX(-100px);
  }

  25%, 75% {
     transform:translateX(100px);
  }
}
@-webkit-keyframes mv1 {
  from, 50%, to {
	  -webkit-transform:translateX(-100px);
  }

  25%, 75% {
     -webkit-transform:translateX(100px);
  }
}
@-moz-keyframes mv1 {
  from, 50%, to {
	  -moz-transform:translateX(-100px);
  }

  25%, 75% {
     -moz-transform:translateX(100px);
  }
}
@-o-keyframes mv1 {
  from, 50%, to {
	  -moz-transform:translateX(-100px);
  }

  25%, 75% {
     -moz-transform:translateX(100px);
  }
}
@keyframes mv2 {
  from, 50%, to {
	  transform:translateX(100px);
  }

  25%, 75% {
     transform:translateX(-100px);
  }
}
@-webkit-keyframes mv2 {
  from, 50%, to {
	  -webkit-transform:translateX(100px);
  }

  25%, 75% {
     -webkit-transform:translateX(-100px);
  }
}
@-moz-keyframes mv2 {
  from, 50%, to {
	  -moz-transform:translateX(100px);
  }

  25%, 75% {
     -moz-transform:translateX(-100px);
  }
}
@-o-keyframes mv2 {
  from, 50%, to {
	  -moz-transform:translateX(100px);
  }

  25%, 75% {
     -moz-transform:translateX(-100px);
  }
}

@keyframes moves {
  from, 50%, to {
	  transform:translateY(-10px);
	  opacity:0.5;
  }

  25%, 75% {
     transform:translateY(20px);
	 opacity:1;
  }
}
@-webkit-keyframes moves {
  from, 50%, to {
	  -webkit-transform:translateY(-10px);
	  opacity:0.5;
  }

  25%, 75% {
     -webkit-transform:translateY(20px);
	 opacity:1;
  }
}
@-moz-keyframes moves {
  from, 50%, to {
	  -moz-transform:translateY(-10px);
	  opacity:0.5;
  }

  25%, 75% {
     -moz-transform:translateY(20px);
	 opacity:1;
  }
}
.page2{ width:1140px; height:340px; margin-left:-570px; margin-top:-170px;}
.page2 ul{ width:100%;}
.page2 ul li{ float:left; width:16.666666%; display:table;}
.page2 ul li dl{ width:100%; display:table; height:100%;   position:relative;}
.page2 ul li dl dt{ width:100%; opacity:0;} 
.page2 ul li dl dt img{ width:100%; display:block;}
.page2 ul li dl dd{ width:100%; height:170px; background-color:#fff; position:relative; cursor:pointer;}
.page2 ul li dd span, .page2 ul li dd font, .page2 ul li dd i{ display:inline-block; width:100%; text-align:center; color:#1B499B;}

.page2 ul li dd span{ font-size:42px; margin-top:35px;}
.page2 ul li dd font{ font-size:18px; margin-top:5px; font-weight:bold;}
.page2 ul li dd i{ font-family:'Arial'; text-transform:capitalize; margin-top:5px;}
.page2 ul li dd small{
	position:absolute; left:50%; margin-left:-4px; top:-8px; opacity:0;
	width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 8px solid #1B499B;
}

.page2 ul li dl:hover dd{ background-color:#1B499B;}
.page2 ul li dl:hover dd span, .page2 ul li dl:hover dd font, .page2 ul li dl:hover dd i{ color:#fff;}

.page2 ul li dl:hover dt{ opacity:1;}
.page2 ul li dl:hover dd small{ opacity:1;}
.page2 ul li:nth-of-type(odd) dl dd small{ position:absolute;  left:50%; margin-left:-4px;  bottom:-16px; top:inherit; border-top: 8px solid #1B499B; border-bottom: 8px solid transparent;}

.page2 ul li:nth-of-type(odd){ transform: translateY(-50px); opacity:0;}
.page2 ul li:nth-of-type(even){ transform: translateY(50px); opacity:0;}
.page2 ul li:nth-of-type(odd).active, .page2 ul li:nth-of-type(even).active{ transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); opacity:1;}

.page3{ width:1200px; height:376px; margin-left:-600px; margin-top:-188px;}
.page3 .waper-tab{ width:100%; 
   transform: translateY(-200px); -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -ms-transform: translateY(-200px); opacity:0;}
.page3 .waper-tab li{ float:left; width:33.33333%; height:50px; line-height:50px; text-align:center; background-color:#fff; color:#1B499B; font-size:15px; position:relative; cursor:pointer;}
.page3 .waper-tab li:after{ position:absolute; content:'|'; right:-2px; top:-2px; color:#E2E2E2; font-size:22px;}
.page3 .waper-tab li:last-child:after{ display:none;}
.page3 .waper-tab li:hover, .page3 .waper-tab li.on{ background-color:#1B499B; color:#fff;}
.page3 .waper-tab li:hover:after, .page3 .waper-tab li.on:after{ color:#1B499B;}

.page3 .the-sub-tab{ width:100%; display:table; position:relative;}
.page3 .the-sub-tab .sub-main-tab{ width:100%; position:absolute; left:0; top:0; opacity:0; z-index:-9;}
.page3 .the-sub-tab .sub-main-tab dl{ float:left; width:270px; margin-top:44px; margin-right:40px; cursor:pointer; opacity:0;}
.page3 .the-sub-tab .sub-main-tab dl:last-child{ margin-right:0;}
.page3 .the-sub-tab .sub-main-tab dl dt{ width:100%; height:auto; overflow:hidden;}
.page3 .the-sub-tab .sub-main-tab dl dt img{ width:100%; height:200px; display:block;}
.page3 .the-sub-tab .sub-main-tab dl dd{ width:100%; padding:27px 0; background-color:#fff; position:relative;}
.page3 .the-sub-tab .sub-main-tab dl dd p{ width:90%; margin:0 auto; font-size:15px; color:#363636; line-height:1.6;}
.page3 .the-sub-tab .sub-main-tab dl dd span{ display:block; padding:5px 10px; background-color:#FFFFFF; color:#1B499B; font-family:'Arial'; position:absolute; left:5%; top:-38%;}
.page3 .the-sub-tab .sub-main-tab dl:hover dd{ background-color:#1B499B;}
.page3 .the-sub-tab .sub-main-tab dl:hover dd p{ color:#fff;}
.page3 .the-sub-tab .sub-main-tab dl:hover dt img{ transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1);}
.page3 .the-sub-tab .sub-main-tab.active{ opacity:1; z-index:9;}

.page3 .the-sub-tab .sub-main-tab dl:nth-of-type(1){transform:translateX(-300px); -webkit-transform:translateX(-300px); -moz-transform:translateX(-300px); -ms-transform:translateX(-300px);}
.page3 .the-sub-tab .sub-main-tab dl:nth-of-type(2){transform:translateX(-150px); -webkit-transform:translateX(-150px); -moz-transform:translateX(-150px); -ms-transform:translateX(-150px);}
.page3 .the-sub-tab .sub-main-tab dl:nth-of-type(3){transform:translateX(150px); -webkit-transform:translateX(150px); -moz-transform:translateX(150px); -ms-transform:translateX(150px);}
.page3 .the-sub-tab .sub-main-tab dl:nth-of-type(4){transform:translateX(300px); -webkit-transform:translateX(300px); -moz-transform:translateX(300px); -ms-transform:translateX(300px);}
.page3 .the-sub-tab .sub-main-tab dl.active{ transform:translateX(0px); -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -ms-transform:translateX(0px); opacity:1;}
.page3 .waper-tab.active{ opacity:1; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0);}

.more{ width:180px; height:50px; border-radius:5px; background-color:#1B499B; text-align:center; line-height:50px; position:absolute; left:50%; margin-left:-90px; bottom:150px;
  transform: translateY(100px); -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); opacity:0;
}
.more a{  font-size:15px; color:#fff;}
.more.active{transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity:1;}

.page4{ width:1200px; height:440px; margin-left:-600px; margin-top:-220px; display:table;}
.page4 .lft-imgs{ float:left; width:280px;
 transform:translateX(-200px); opacity:0;
 box-shadow:0 6px 10px #999;
 margin-top:20px;
 display: none;
 
}

.page4 .lft-imgs.active{ transform:translateX(0); opacity:1;}

.page4 .lft-imgs img{ width:100%; display:block;}
.page4 .lft-imgs .paper{ padding:35px 0; background-color:#1B499B; text-align:center; transition: all .4s ease-in-out 0s; cursor:pointer;}
.page4 .lft-imgs .paper a{ display:block; width:100%; height:100%;}
.page4 .lft-imgs .paper h5{ font-size:14px; color:#fff; font-weight:bold;}
.page4 .lft-imgs .paper p{ width:90%; margin:20px auto 0; line-height:1.7;}
.page4 .lft-imgs .paper a span{ display: block; width: 90%; margin: 0 auto; text-align: left; font-size: 14px; color: #fff;}

/*.page4 .lft-imgs:hover .paper{ background-color:#1B499B;}
.page4 .lft-imgs:hover .paper h5{ color:#fff;}*/


.page4 .rit-lists{ width:100%; /*float:right;*/ display:table; margin: 0 auto;}
.page4 .rit-lists .sub-tits{ float:left; position: relative; width:60px; height:180px; padding-top:22px; background-color:#07A5E1; border-radius: 6px; color:#fff; font-size:15px; font-weight:bold; text-align:center; margin-right:20px;}
.page4 .rit-lists .sub-tits a{ color:#fff; font-size:15px;}
.page4 .rit-lists .sub-tits a span{ display: block; margin-top: 20px; font-size: 12px;}
.page4 .rit-lists ul{ float:left; margin-top:4%;}
.page4 .rit-lists ul li{ float:left; width:380px; height:218px; background-color: rgba(255, 255, 255, 0.35);text-align:center; margin-right:20px; margin-bottom:20px;  position:relative;
 transform-style: preserve-3d;
 transform: scale(0.5) translateX(200%);
 -webkit-transform: scale(0.5) translateX(200%);
 -moz-transform: scale(0.5) translateX(200%);
 -o-transform: scale(0.5) translateX(200%);
 opacity:0;
 box-shadow:0 6px 10px #999;
 border-radius:15%; overflow:hidden;
}

.page4 .rit-lists .sub-tits a.a1{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #1B499B;  border-radius: 6px; padding-top: 20px; opacity: 0;
	box-sizing: border-box; 
	-moz-box-sizing: border-box;
}
.page4 .rit-lists .sub-tits:hover{ background-color: #07A5E1;}
.page4 .rit-lists .sub-tits:hover a.a1{ opacity: 1;}
.page4 .rit-lists .sub-tits:hover a.a2 img{ opacity: 0;}

.page4 .rit-lists ul li:last-child{ margin-right:0;}
.page4 .rit-lists ul li img{ margin:0px auto 0; display:block; max-height:180px;}
.page4 .rit-lists ul li p{ width:90%; line-height:1.7; font-size:13px; color:#000000; margin:10px auto 0; text-align:center;}
.page4 .rit-lists ul li img{ transition: all .4s ease-in-out 0s;}
.page4 .rit-lists ul li:hover{ background-color:#1B499B;}
.page4 .rit-lists ul li:hover p{ color:#fff;}
.page4 .rit-lists ul li:hover img{ transform:scale(1.1);}

.page4 .rit-lists .kps{ width:100%; display:table;}
.page4 .rit-lists .kps:last-child{ margin-top:40px;}
.page4 .rit-lists ul li.active{ transform: scale(1.0) translateX(0%); opacity:1;}


/*.page5 ul{ width:100%;}
.page5 ul li{ float:left; width:20%; height:386px; position:relative; cursor:pointer;
 transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); opacity:0;
}
.page5 ul li.active{ transform: scale(1.0); -moz-transform: scale(1.0); -webkit-transform: scale(1.0); -ms-transform: scale(1.0); opacity:1;}
.page5 ul li dl{ width:100%; height:386px; text-align:center;}
.page5 ul li dl dt{ display:inline-block; width:100px; height:100px; margin-top:54px;  font-size:60px; color:#fff; text-align:center; line-height:100px; position:relative;}
.page5 ul li dl dt:after{ position:absolute; content:''; left:0; top:0; width:100%; height:100%; border:1px solid #fff; border-radius:50%;}

.page5 ul li dl dd{ width:72%; margin:0 auto;}
.page5 ul li dl dd h3{ font-size:18px; color:#fff; font-weight:bold; margin-top:25px;}
.page5 ul li dl dd span{ display:block; width:14px; height:2px; margin:25px auto; background-color:#fff;}
.page5 ul li dl dd p{ color:#fff; line-height:1.7;}

.page5 ul li:before{ position:absolute; content:''; left:0%; top:0%; width:0%; height:0%;}
.page5 ul li:after{ position:absolute; content:'';  right:0%; bottom:0; width:0%; height:0%;}
.page5 ul li:hover:before{  width:100%; height:99.7%; border-top:1px solid #fff; border-right:1px solid #fff;}
.page5 ul li:hover:after{  width:100%; height:99.7%; border-bottom:1px solid #fff; border-left:1px solid #fff;}
.page5 ul li:hover dl dd span{ width:34px;}
.page5 ul li:hover dl dt:after{ transform: rotateZ(225deg); -webkit-transform: rotateZ(225deg); -moz-transform: rotateZ(225deg); -o-transform: rotateZ(225deg); border-radius:10px;}*/

.page5{ width:1230px; height:386px; margin-left:-615px; margin-top:-193px;}
.focus_Box { position: relative; width: 1400px; height: 313px; left: 44%; margin-left: -600px; margin-top: 90px;}
.focus_Box .nexts,
.focus_Box .prevs{ display:block; position:absolute; top:116px; width:52px; height:52px; cursor:pointer;}
.focus_Box .prevs{ background:url(../images/btn.png) no-repeat left bottom; left:-70px;}
.focus_Box .prevs:hover{ background:url(../images/btn.png) no-repeat left top; left:-70px;}

.focus_Box .nexts{ background:url(../images/btn.png) no-repeat right bottom; right:-28px;}
.focus_Box .nexts:hover{ background:url(../images/btn.png) no-repeat right top; right:-28px;}

.focus_Box ul{ width:1400px; height:313px; position:relative;}
.focus_Box ul li{ z-index: 0; width: 430px; height: 313px;    cursor: pointer; border-radius: 4px; overflow: hidden; position:absolute;left:0;top:0;
background-image:url(../images/kuang.fw.png); background-size:cover;}
.focus_Box ul li:last-child{ margin-right:0;}
.focus_Box ul li>img{ width: 100%; height: 100%; vertical-align: top; display:block;
 transition: all .8s ease 0s;
 -webkit-transition: all .8s ease 0s;
 -moz-transition: all .8s ease 0s;
 -o-transition: all .8s ease 0s;
 opacity:0.8;
}
.focus_Box ul li .focus-hover{ position:absolute; left:0; bottom:-82%; width:100%; height:100%; background-color:rgba(0,0,0,0.55); overflow:hidden; z-index:9;
 transition: all .8s ease 0s;
 -webkit-transition: all .8s ease 0s;
 -moz-transition: all .8s ease 0s;
 -o-transition: all .8s ease 0s;
}

.focus_Box ul li a>img{ display: block; width:90%; padding-left:5.7%; }

.focus_Box ul li .focus-hover h3{ width:85%; margin:15px auto; font-size:20px; color:#fff;}
.focus_Box ul li .focus-hover p{ color:#fff; line-height:1.8; width:85%; margin:0 auto;}
.focus_Box ul li .focus-hover i{ display:block; margin-bottom:15px; margin-top:50px; padding-left:10px; font-size:60px; color:#fff; margin-top:-65px;
  transition: all .8s ease 0s;
  -webkit-transition: all .8s ease 0s;
  -moz-transition: all .8s ease 0s;
  -o-transition: all .8s ease 0s;
}
/*.focus_Box ul li.sg3>a>img{ opacity:1;}
.focus_Box ul li.sg3 .focus-hover{ bottom:0;}
.focus_Box ul li.sg3 .focus-hover i{ margin-top:50px;}*/

.focus_Box ul li:hover img{ opacity:1;}
.focus_Box ul li:hover .focus-hover{ bottom: 0;}
.focus_Box ul li:hover .focus-hover i{ margin-top:50px;}


.focus_Box ul li.sg1{


	transform:scale(0.9) translate(0);
	-webkit-transform:scale(0.9) translate(0);
	-moz-transform:scale(0.9) translate(0);
	-o-transform:scale(0.9) translate(0);
	z-index:0;
}
.focus_Box ul li.sg2{
	transform:scale(0.95) translate(240px,0);
	-webkit-transform:scale(0.95) translate(240px,0);
	-moz-transform:scale(0.95) translate(240px,0);
	-o-transform:scale(0.95) translate(240px,0);
	z-index:3;
}
.focus_Box ul li.sg3{
	transform:scale(1) translate(466px,0);
	-webkit-transform:scale(1) translate(466px,0);
	-moz-transform:scale(1) translate(466px,0);
	-o-transform:scale(1) translate(466px,0);
	z-index:5;
}
.focus_Box ul li.sg4{
	transform:scale(0.95) translate(742px,0);
	-webkit-transform:scale(0.95) translate(742px,0);
	-moz-transform:scale(0.95) translate(742px,0);
	-o-transform:scale(0.95) translate(742px,0);
	z-index:3;
}
.focus_Box ul li.sg5{
	transform:scale(0.9) translate(1035px,0);
	-webkit-transform:scale(0.9) translate(1035px,0);
	-moz-transform:scale(0.9) translate(1035px,0);
	-o-transform:scale(0.9) translate(1035px,0);
	z-index:0;
}

.page6{ width:1200px; height:328px; margin-left:-360px; margin-top:-164px; opacity:0;}
.page6 ul{ width:100%;}
.page6 ul li{ float:left; width:230px; height:318px; margin-right:255px;}
.page6 ul li:last-child{ margin-right:0;}
.page6 ul li dl{ width:100%;}
.page6 ul li dl dt{ width:230px; height:230px; border-radius:50%; overflow:hidden; position:relative; }
.page6 ul li dl dt font{ position:absolute; left:50%; top:50%; font-size:80px; color:#FFFFFF; font-family:'Impact';
  transform: translate3d(-50%,-50%,0); -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0);
}
.page6 ul li dl dd{ width:100%; text-align:center; margin-top:30px;}
.page6 ul li dl dd h3{ font-size:18px; font-weight:bold; color:#1B499B;}
.page6 ul li dl dd p{ font-size:12px; font-family:'Arial'; text-transform:uppercase; color:#999999; margin-top:10px;}

.page6.downs {
 animation: downs .75s linear 0s 1 normal forwards;
 -webkit-animation: downs .75s linear 0s 1 normal forwards;
}


@keyframes downs {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, -600px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@-webkit-keyframes downs {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -600px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
@-moz-keyframes downs {
  from {
    opacity: 0;
    -moz-transform: scale3d(.1, .1, .1) translate3d(0, -600px, 0);
    -moz-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  to {
    opacity: 1;
    -moz-transform: scale3d(1, 1, 1) translate3d(0, 60px, 0);
    -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.page7{ width:1200px; height:426px; margin-left:-600px; margin-top:-213px;}
.page7 dl{ float:left; width:370px; margin-right:45px;
 transform: rotateZ(45deg) translateX(200px); -webkit-transform: rotateZ(45deg) translateX(150px); -moz-transform: rotateZ(45deg) translateX(150px); -o-transform: rotateZ(45deg) translateX(150px); opacity:0;
}
.page7 dl:last-child{ margin-right:0;}
.page7 dl dt{ width:100%; height:auto; overflow:hidden; position:relative;}
.page7 dl dt img{ width:100%; display:block;}
.page7 dl dt i{ display:block; position:absolute; width:70px; height:70px; position:absolute; left:50%; margin-left:-35px; top:50%; margin-top:-35px; border-radius:50%;
 background-color:#214D9E;
 background-color:rgba(28,85,160,0.8); 
 border:1px solid #fff; font-size:30px; color:#fff; text-align:center; line-height:70px;
 transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); opacity:0;
}
.page7 dl dd{ width:100%; text-align:center; padding:43px 0; background-color:#FFFFFF;}
.page7 dl dd h3{ font-size:18px; font-weight:bold; color:#1B499B;}
.page7 dl dd p{ font-size:13px; color:#999999;}
.page7 dl dd span{ display:block; width:34px; height:2px; background-color:#E2E2E2; margin:20px auto;}

.page7 dl:hover dd{ background-color:#1B499B;}
.page7 dl:hover dd h3, .page7 dl:hover dd p{ color:#fff;}
.page7 dl:hover dd span{ background-color:#fff;}
.page7 dl:hover dt i{ transform: scale(1.0); -webkit-transform: scale(1.0); -moz-transform: scale(1.0); -ms-transform: scale(1.0); opacity:1;}

.page7 dl.active{ transform: rotateZ(0deg) translateX(0px); -webkit-transform: rotateZ(0deg) translateX(0px); -moz-transform: rotateZ(0deg) translateX(0px); -o-transform: rotateZ(0deg) translateX(0px); opacity:1; }


.page8{ width:100%; height:100%; margin-left:-50%; top:0;}
.page8 .horizontal{ width:100%; height:100%; position:absolute; left:0; top:0; overflow:hidden;}
.page8 .horizontal .list-wapers{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;}
.page8 .horizontal .list-wapers li{ float:left; width:24.77%; overflow:hidden; height:100%; position:relative; margin-right:0.3%;}
.page8 .horizontal .list-wapers li:last-child{ margin-right: 0;}
.page8 .horizontal .list-wapers li:last-child{ margin-right:0;}
.page8 .horizontal .list-wapers li img{ position:absolute; top:0; width:100%; display:block;
 transition: all .4s ease 0s;
 -webkit-transition: all .4s ease 0s;
 -moz-transition: all .4s ease 0s;
 -o-transition: all .4s ease 0s;
 opacity:1;
 min-height:645px;
}
.page8 .horizontal .list-wapers li .cont-text{ position:absolute; width:100%; height:33%; background-color:#0077C6; bottom:0;
 transition: all .4s ease 0s;
 -webkit-transition: all .4s ease 0s;
 -moz-transition: all .4s ease 0s;
 -o-transition: all .4s ease 0s;
}
.page8 .horizontal .list-wapers li .cont-text  h3{ font-size:20px; font-family:'Arial'; color:#fff; text-transform:uppercase; padding-top:50px; text-align:center;}
.page8 .horizontal .list-wapers li .cont-text .bh{ padding:120px 10% 0; width:100%;
 box-sizing:border-box; 
 -moz-box-sizing:border-box;
 transition: all .4s ease .2s;
 -webkit-transition: all .4s ease .2s;
 -moz-transition: all .4s ease .2s;
 -o-transition: all .4s ease .2s;
}
.page8 .horizontal .list-wapers li .cont-text .bh h4{ font-size:20px; color:#fff; margin-bottom:20px; text-align:center; }
.page8 .horizontal .list-wapers li .cont-text .bh p{ color:#6B98EC; font-size:13px; line-height:1.7; opacity:0; text-indent:2em;
 transition: all .4s ease .4s;
 -webkit-transition: all .4s ease .4s;
 -moz-transition: all .4s ease .4s;
 -o-transition: all .4s ease .4s;
}
.page8 .horizontal .list-wapers li .cont-text .bh strong{ display:block; color:#6B98EC; font-size:13px; line-height:1.7; margin-bottom:40px;
 transition: all .4s ease .3s;
 -webkit-transition: all .4s ease .3s;
 -moz-transition: all .4s ease .3s;
 -o-transition: all .4s ease .3s;
}
.page8 .horizontal .list-wapers li:hover img{ 
 transform: translateY(-20px);
 -webkit-transform: translateY(-20px);
 -moz-transform: translateY(-20px);
 -o-transform: translateY(-20px);
 opacity:1;
}
.page8 .horizontal .list-wapers li:hover .cont-text{ height:40%; background-color:#fff;}
.page8 .horizontal .list-wapers li:hover .cont-text h3{ color:#1F57BE;}
.page8 .horizontal .list-wapers li:hover .cont-text h4{ margin-bottom:10px; color:#1F57BE;}
.page8 .horizontal .list-wapers li:hover .cont-text .bh{ padding:60px 10% 0;}
.page8 .horizontal .list-wapers li:hover .cont-text .bh strong{ margin-bottom:5px; color:#1F57BE;}
.page8 .horizontal .list-wapers li:hover .cont-text .bh p{ opacity:1; color:#1F57BE;}

.qykj{ position:absolute;right:7%; top:50%;
 transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -moz-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 color:#fff; 
 text-align:center; 
 display: none;
}
.qykj h3{ font-size:40px; text-transform:uppercase; }
.qykj h4{ font-size:20px; color:#fff; font-weight:bold; position:relative;}
.qykj h4:before{ position:absolute; left:30px; top:50%; content:''; width:38px; border-top:1px solid #fff;}
.qykj h4:after{ position:absolute; right:30px; top:50%; content:''; width:38px; border-top:1px solid #fff;}