a,
abbr,
acronym,
address,
applet,
big,
blockquote,
body,
caption,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
fieldset,
font,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
iframe,
img,
ins,
kbd,
label,
legend,
li,
object,
ol,
p,
pre,
q,
s,
small,
span,
strong,
sub,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
tt,
ul,
i,
figure {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: normal;
  font-style: normal;
  vertical-align: baseline;
  font-family: 'PingFang SC','HeitiSC',"microsoft yahei","arial, helvetica, sans-serif"; 
}

body {
  min-width: 1200px; 
}

img {
  display: block; 
}

a {
  color: black;
  text-decoration: none; 
}

li {
  list-style: none; 
}

* {
  -webkit-tap-highlight-color: transparent; 
}

.h-nav {
  transition: background-color 1s,top 1s;
  border: 1px solid #707d90;
  width: 100%;
  height: 74px;
  position: fixed;
  top: 60px;
  z-index: 9999;
  font-size: 16px; 
}
.h-nav .h-wrap {
  width: 1200px;
  height: 100%;
  margin: 0 auto; 
}
.h-nav .h-wrap .h-header-logo {
  width: 174px;
  height: 100%;
  background: url("../img/LOGO.png") center center no-repeat;
  float: left;
  background-size: contain;
  margin-left: 40px; 
}
.h-nav .h-wrap .h-header-logo a {
  display: block;
  width: 100%;
  height: 100%; 
}
.h-nav .h-wrap .h-header-login {
  width: 188px;
  height: 100%;
  float: right; 
}
.h-nav .h-wrap .h-header-login .en-login,
.h-nav .h-wrap .h-header-login .en-register {
  float: left;
  width: 83px;
  height: 23px;
  line-height: 23px;
  margin-top: 27px;
  text-align: center; 
}
.h-nav .h-wrap .h-header-login .en-login a,
.h-nav .h-wrap .h-header-login .en-register a {
  display: block;
  color: white; 
}
.h-nav .h-wrap .h-header-login .en-register {
  border-right: 1px solid #707d90;
  transition: all 0.5s; 
}
.h-nav .h-wrap .h-header-intro {
  float: left;
  width: 600px;
  height: 100%;
  margin-left: 125px; 
}
.h-nav .h-wrap .h-header-intro li {
  float: left;
  padding: 0 27px;
  height: 100%;
  text-align: center;
  line-height: 74px; 
}
.h-nav .h-wrap .h-header-intro li a {
  display: block;
  transition: 0.5s;
  color: white; 
}

.main {
  overflow: hidden; 
}

.section2-wrap,
.section3-wrap,
.section4-wrap,
.section5-wrap,
.section6-wrap,
.section7-wrap,
.section8-wrap {
  width: 1200px;
  margin: 0 auto;
  height: 100%; 
}
.section2-wrap .title,
.section3-wrap .title,
.section4-wrap .title,
.section5-wrap .title,
.section6-wrap .title,
.section7-wrap .title,
.section8-wrap .title {
  font-size: 46px;
  text-align: center;
  margin-top: 85px;
  transform: translateY(40px);
  transition: 1s ease 0.2s;
  opacity: 0; 
}
.section2-wrap .sub-title,
.section3-wrap .sub-title,
.section4-wrap .sub-title,
.section5-wrap .sub-title,
.section6-wrap .sub-title,
.section7-wrap .sub-title,
.section8-wrap .sub-title {
  font-size: 22px;
  text-align: center;
  line-height: 53px;
  transform: translateY(40px);
  transition: 1s ease 0.4s;
  opacity: 0; 
}
.section2-wrap .line,
.section3-wrap .line,
.section4-wrap .line,
.section5-wrap .line,
.section6-wrap .line,
.section7-wrap .line,
.section8-wrap .line {
  width: 50px;
  height: 2px;
  margin: 0 auto;
  background: #64B5F8;
  margin-bottom: 80px;
  transform: translateY(40px);
  transition: 1s ease 0.6s;
  opacity: 0; 
}
.section2-wrap .title.move,
.section2-wrap .sub-title.move,
.section2-wrap .line.move,
.section3-wrap .title.move,
.section3-wrap .sub-title.move,
.section3-wrap .line.move,
.section4-wrap .title.move,
.section4-wrap .sub-title.move,
.section4-wrap .line.move,
.section5-wrap .title.move,
.section5-wrap .sub-title.move,
.section5-wrap .line.move,
.section6-wrap .title.move,
.section6-wrap .sub-title.move,
.section6-wrap .line.move,
.section7-wrap .title.move,
.section7-wrap .sub-title.move,
.section7-wrap .line.move,
.section8-wrap .title.move,
.section8-wrap .sub-title.move,
.section8-wrap .line.move {
  transform: translateY(0px);
  opacity: 1; 
}

.section1 {
  width: 100%;
  height: 1000px;
  transition: all 0.5s;
  background: url("../img/bg-1.jpg") center center no-repeat;
  background-size: auto 1000px; 
}
.section1 .section1-wrap {
  width: 1200px;
  margin: 0 auto;
  position: relative; 
}
.section1 .section1-wrap .section1-intro {
  position: absolute;
 	left: 40px;
  width: 586px;
  height: 270px;
  color: white; 
}
.section1 .section1-wrap .section1-intro .title {
  font-size: 46px;
  line-height: 50px;
  margin-bottom: 22px;
  transform: translateY(40px);
  transition: 1s ease 0.2s;
  opacity: 0; 
}
.section1 .section1-wrap .section1-intro .title.move,
.section1 .section1-wrap .section1-intro .su-title.move,
.section1 .section1-wrap .section1-intro .botton.move,
.section1 .section1-wrap .section1-intro .intro.move {
  transform: translateY(0px);
  opacity: 1; 
}
.section1 .section1-wrap .section1-intro .su-title {
  font-size: 19px;
  margin-bottom: 45px;
  transform: translateY(40px);
  transition: 1s ease 0.4s;
  opacity: 0; 
}
.section1 .section1-wrap .section1-intro .botton {
  overflow: hidden;
  transform: translateY(40px);
  transition: 1s ease 0.6s;
  opacity: 0; 
}
.section1 .section1-wrap .section1-intro .botton .join,
.section1 .section1-wrap .section1-intro .botton .login {
  transition: all 0.5s;
  cursor: pointer;
  float: left;
  width: 146px;
  height: 42px;
  text-align: center;
  border: 2px solid #1d91f3;
  border-radius: 3px;
  line-height: 42px; 
}
.section1 .section1-wrap .section1-intro .botton .join a,
.section1 .section1-wrap .section1-intro .botton .login a {
  color: #1d91f3;
  display: block; 
}
.section1 .section1-wrap .section1-intro .botton .join.select,
.section1 .section1-wrap .section1-intro .botton .login.select {
  background: #1d91f3; 
}
.section1 .section1-wrap .section1-intro .botton .join.select a,
.section1 .section1-wrap .section1-intro .botton .login.select a {
  color: white; 
}
.section1 .section1-wrap .section1-intro .botton .login {
  margin-left: 17px; 
}
.section1 .section1-wrap .section1-intro .intro {
  height: 68px;
  line-height: 68px;
  text-align: left;
  color: #1d91f3;
  font-size: 18px;
  transform: translateY(40px);
  transition: 1s ease 0.8s;
  opacity: 0;
  display: inline-block; 
}
.section1 .section1-wrap .section1-intro .intro .iconfont {
  font-size: 18px;
  margin-right: 9px;
  line-height: 68px; 
}
.section1 .section1-wrap .section1-intro .intro i,
.section1 .section1-wrap .section1-intro .intro span {
  cursor: pointer;
  transition: 0.5s; 
}
.section1 .section1-wrap .section1-intro .intro:hover i,
.section1 .section1-wrap .section1-intro .intro:hover span {
  font-size: 20px; 
}
.section1 .section1-wrap .section1-intro .introVideo .videoMask {
  background-color: #ccc;
  filter: alpha(opacity=50);
  opacity: 0.5;
  z-index: 98;
  position: fixed;
  display: none; 
}
.section1 .section1-wrap .section1-intro .introVideo .videoDiv {
	width: 800px;
  height: 600px;
  text-align: center;
  z-index: 99;
  left: 50%;
  top: 50%;
  margin-left: -400px;
  margin-top: -300px;
  position: fixed;
  display: none; 
}
.section1 .section1-wrap .section1-intro .introVideo .videoDiv video {
  background: gray; 
}

.section2 {
  border-bottom: 1px solid #E9E9E9;
  width: 100%;
  height: 450px;
}
.section2 .section2-wrap {
  width: 1200px;
  margin: 0 auto;
  height: 100%; 
}
.section2 .section2-wrap .img {
  position: relative;
  left: 50%;
  top: -35px;
  width: 216px;
  height: 37px;
  margin-left: -108px;
  background: url("../img/section2-jiantou.png"); 
}
.section2 .section2-wrap .title {
  margin-top: 80px;
}
.section2 .section2-wrap .line {
  height: 2px;
  width: 50px;
  margin: 0 auto;
  background: #64B5F8;
  margin-top: 10px; 
}
.section2 .section2-wrap .tese.move {
  transform: translateY(0px);
  opacity: 1!important; 
}
.section2 .section2-wrap .tese {
  transition: 1s ease 0.8s;
  display: box;
  /* OLD - Android 4.4- */
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  height: 250px;
  transform: translateY(50px);
  opacity: 0; 
}
.section2 .section2-wrap .tese li {
  -webkit-box-flex: 1;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;
 	/* OLD - Firefox 19- */
  width: 25%;
  /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;
  /* Chrome */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  text-align: center;
  font-size: 20px;
  transform: scale(0.9);
  transition: 0.5s; 
}
.section2 .section2-wrap .tese li span {
    margin-top: 200px;
    display: inline-block;
    color: #64B5F8; 
}
.section2 .section2-wrap .tese li:hover {
  transform: scale(1.2); 
}
.section2 .section2-wrap .tese li:nth-of-type(1) {
  background: url("../img/qsgl.png") center center no-repeat; 
}
.section2 .section2-wrap .tese li:nth-of-type(2) {
  background: url("../img/gxgz.png") center center no-repeat; 
}
.section2 .section2-wrap .tese li:nth-of-type(3) {
  background: url("../img/ydbg.png") center center no-repeat; 
}
.section2 .section2-wrap .tese li:nth-of-type(4) {
  background: url("../img/aqzy.png") center center no-repeat; 
}

.section3 {
  width: 100%; 
}
.section3 .section3-wrap {
  width: 1200px;
  height: 100%;
  margin: 0 auto; 
}
.section3 .title {
  font-size: 46px;
  text-align: center;
  margin-top: 85px; 
}
.section3 .sub-title {
  font-size: 22px;
  text-align: center;
  line-height: 53px; 
}
.section3 .line {
  width: 50px;
  height: 2px;
  margin: 0 auto;
  background: #64B5F8;
  margin-bottom: 80px; 
}
.section3 .content {
  width: 100%;
  height: 500px; 
}
.section3 .content .sub-img1,
.section3 .content .sub-img2,
.section3 .content .sub-img3 {
  transition: all 1s;
  filter: alph(opacity=0);
  opacity: 0;
  transform: translateY(60px);
  float: left;
  margin-left: 35px;
  transition-delay: 0.4s; 
}
.section3 .content .sub-img1.move,
.section3 .content .sub-img2.move,
.section3 .content .sub-img3.move {
  opacity: 1;
  transform: translateY(0px); 
}
.section3 .content .sub-img1 {
  background: url("../img/sub-img1.png");
  background-size: 100% 100%;
  width: 566px;
  height: 292px; 
}
.section3 .content .sub-img2 {
  background: url("../img/sub-img2.png");
  background-size: 100% 100%;
  width: 577px;
  height: 311px;
}
.section3 .content .sub-img3 {
  background: url("../img/sub-img3.png");
  background-size: 100% 100%;
  width: 561px;
  height: 333px; 
}
.section3 .content .sub-article {
  width: 566px;
  height: 292px;
  float: right; 
}
.section3 .content .sub-article .slide.move,
.section3 .content .sub-article .artcle-title.move,
.section3 .content .sub-article .artcle-content.move,
.section3 .content .sub-article .artcle-img.move {
  opacity: 1;
  transform: translateY(0px); 
}
.section3 .content .sub-article .slide {
  float: left;
  width: 95px;
  height: 100%;
  font-size: 50px;
  font-weight: 200;
  transform: translateY(40px);
  transition: 1s ease 0.2s;
  opacity: 0; 
}
.section3 .content .sub-article .artcle-title,
.section3 .content .sub-article .artcle-content {
  float: left;
  display: block;
  transform: translateY(40px);
  opacity: 0; 
}
.section3 .content .sub-article .artcle-title {
  border-bottom: 1px solid #E9E9E9;
  width: 460px;
  line-height: 50px;
  margin-bottom: 15px;
  font-size: 24px;
  transition: 1s ease 0.2s; 
}
.section3 .content .sub-article .artcle-content {
  width: 460px;
  height: 90px;
  font-size: 14px;
  line-height: 23px;
  transition: 1s ease 0.4s;
  font-family: PingFangRegular; 
}
.section3 .content .sub-article .artcle-img {
  width: 460px;
  height: 120px;
  float: left;
  transform: translateY(40px);
  transition: 1s ease 0.6s;
  opacity: 0; 
}
.section3 .content .sub-article .artcle-img ul {
  display: box;
  /* OLD - Android 4.4- */
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  width: 100%;
  height: 100%; 
}
.section3 .content .sub-article .artcle-img ul li {
  -webkit-box-flex: 1;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;
  /* OLD - Firefox 19- */
  width: 33.3%;
  /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;
  /* Chrome */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1; 
}
.section3 .content .sub-article .artcle-img ul li div {
  height: 78px;
  width: 78px;
  border-radius: 50%;
	transition: all 0.3s;
  cursor: pointer; 
}
.section3 .content .sub-article .artcle-img ul li div img {
  position: relative;
  left: 25%;
  top: 25%; 
}
.section3 .content .sub-article .artcle-img ul li div:hover {
  transform: scale(1.2); 
}
.section3 .content .sub-article .artcle-img ul li span {
  margin-top: 10px;
  width: 100%;
  display: inline-block;
  font-size: 14px;
  text-align: center; 
}
.section3 .content .moreContent {
  width: 147px;
  height: 42px;
  position: absolute;
  left: 50%;
  margin-left: -73px;
 	margin-top: 400px;
  background: #0c9ef1;
  display: block;
  color: #FFFFFF;
  text-align: center;
  line-height: 42px;
  border-radius: 3px; 
}

.section4 {
  width: 100%;
  height: 1040px;
  background: -webkit-linear-gradient(#f8f9fb 90%, #FFFFFF 10%);
  background: -o-linear-gradient(#f8f9fb 90%, #FFFFFF 10%);
  background: -moz-linear-gradient(#f8f9fb 90%, #FFFFFF 10%);
  background: linear-gradient(#f8f9fb 90%, #FFFFFF 10%); 
}
.section4 .section4-wrap {
  overflow: hidden;
  width: 1200px;
  height: 100%;
  margin: 0 auto; 
}
.section4 .section4-wrap .title,
.section4 .section4-wrap .sub-title {
  text-align: center; 
}
.section4 .section4-wrap .title {
  font-size: 46px;
  margin-top: 65px;
  line-height: 65px; 
}
.section4 .section4-wrap .sub-title {
  font-size: 22px;
  line-height: 45px; 
}
.section4 .section4-wrap .line {
  height: 2px;
  width: 50px;
  margin: 0 auto;
  background: #64B5F8; 
}
.section4 .section4-wrap .content {
  width: 100%;
  height: 455px;
  margin-top: 136px;
  position: relative; 
}
.section4 .section4-wrap .content ul {
  width: 100%;
  height: 100%; 
}
.section4 .section4-wrap .content ul li {
  width: 250px;
  box-sizing: border-box;
  height: 120px;
  margin-bottom: 55px; 
  cursor: pointer;
}
.section4 .section4-wrap .content ul li h3 {
  font-size: 18px;
  line-height: 30px;
  margin-top: 35px; 
}
.section4 .section4-wrap .content ul li p {
  font-size: 14px;
}
.section4 .section4-wrap .content ul li .icon {
  transition: 0.5s;
  cursor: pointer;
  position: relative; 
}
.section4 .section4-wrap .content ul li .icon img {
  position: absolute;
  left: 25%;
  top: 25%; 
}
.section4 .section4-wrap .content ul li:nth-of-type(1) .icon {
  background: url("../img/rcjl.png") center center no-repeat; 
}
.section4 .section4-wrap .content ul li:nth-of-type(1){
	color: #333;
}
.section4 .section4-wrap .content ul li:nth-of-type(1):hover .icon{
 	background: #47b0fe url("../img/rcjlh.png") center center no-repeat; 
}
.section4 .section4-wrap .content ul li:nth-of-type(1):hover{
	color:#47b0fe;
}

.section4 .section4-wrap .content ul li:nth-of-type(2) .icon {
  background: url("../img/gjjcx.png") center center no-repeat; 
}
.section4 .section4-wrap .content ul li:nth-of-type(2){
	color: #333;
}
.section4 .section4-wrap .content ul li:nth-of-type(2):hover .icon {
  background: #47b0fe url("../img/gjjcxh.png") center center no-repeat; 
}
.section4 .section4-wrap .content ul li:nth-of-type(2):hover{
	color: #47b0fe;
}

.section4 .section4-wrap .content ul li:nth-of-type(3) .icon {
  background: url("../img/zpqz.png") center center no-repeat; 
}
.section4 .section4-wrap .content ul li:nth-of-type(3){
	color: #333;
}
.section4 .section4-wrap .content ul li:nth-of-type(3):hover .icon {
  background: #47b0fe url("../img/zpqzh.png") center center no-repeat; 
}
.section4 .section4-wrap .content ul li:nth-of-type(3):hover{
	color: #47b0fe;
}

.section4 .section4-wrap .content ul li:nth-of-type(4) .icon {
  background: url("../img/sbcx.png") center center no-repeat; 
}
.section4 .section4-wrap .content ul li:nth-of-type(4){
	color: #333;
}
.section4 .section4-wrap .content ul li:nth-of-type(4):hover .icon {
  background: #47b0fe url("../img/sbcxh.png") center center no-repeat; 
}
.section4 .section4-wrap .content ul li:nth-of-type(4):hover {
	color: #47b0fe;
}

.section4 .section4-wrap .content ul li:nth-of-type(5) .icon {
  background: url("../img/xzcx.png") center center no-repeat; 
}
.section4 .section4-wrap .content ul li:nth-of-type(5){
	color: #333;
}
.section4 .section4-wrap .content ul li:nth-of-type(5):hover .icon {
  background: #47b0fe url("../img/xzcxh.png") center center no-repeat; 
}
.section4 .section4-wrap .content ul li:nth-of-type(5):hover{
	color: #47b0fe;
}

.section4 .section4-wrap .content ul li:nth-of-type(6) .icon {
  background: url("../img/hdbm.png") center center no-repeat; 
}
.section4 .section4-wrap .content ul li:nth-of-type(6){
	color: #333;
}
.section4 .section4-wrap .content ul li:nth-of-type(6):hover .icon {
  background: #47b0fe url("../img/hdbmh.png") center center no-repeat; 
}
.section4 .section4-wrap .content ul li:nth-of-type(6):hover{
	color: #47b0fe;
}
.section4 .section4-wrap .content ul .l-animate {
  margin-right: 350px;
  float: left;
  text-align: right;
 	transform: translateX(-999px); 
}
.section4 .section4-wrap .content ul .l-animate .icon {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  box-shadow: 0 0 48px -15px #969896;
  position: relative;
  left: 265px;
  top: -70px; 
}
.section4 .section4-wrap .content ul .r-animate {
  margin-left: 350px;
  float: right;
  text-align: left;
  transform: translateX(999px); 
}
.section4 .section4-wrap .content ul .r-animate .icon {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  box-shadow: 0 0 48px -15px #969896;
  position: relative;
  left: -115px;
  top: -70px; 
}
.section4 .section4-wrap .content ul .ltr-animate4 {
  -webkit-animation: myAnimate4 1s 1s forwards;
  -moz-animation: myAnimate4 1s 1s forwards;
  -ms-animation: myAnimate4 1s 1s forwards;
  -o-animation: myAnimate4 1s 1s forwards;
  animation: myAnimate4 1s 1s forwards; 
}
.section4 .section4-wrap .content ul .rtl-animate4 {
  animation: myAnimate3 1s 1s forwards;
  -webkit-animation: myAnimate3 1s 1s forwards;
  -moz-animation: myAnimate3 1s 1s forwards;
  -ms-animation: myAnimate3 1s 1s forwards;
  -o-animation: myAnimate3 1s 1s forwards; 
}
@-moz-keyframes myAnimate4 {
  0% {
    -ms-transform: translateX(-999px);
    -moz-transform: translateX(-999px);
    -webkit-transform: translateX(-999px);
    -o-transform: translateX(-999px);
    transform: translateX(-999px);
    -webkit-opacity: 0;
    opacity: 0; 
  }
  60% {
    -ms-transform: translateX(50px);
    -moz-transform: translateX(50px);
    -webkit-transform: translateX(50px);
    -o-transform: translateX(50px);
    transform: translateX(50px);
    -webkit-opacity: 0.6;
    opacity: 0.6; 
  }
  100% {
    -ms-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-opacity: 1;
    opacity: 1; 
  } 
}
@-webkit-keyframes myAnimate4 {
  0% {
    -ms-transform: translateX(-999px);
    -moz-transform: translateX(-999px);
    -webkit-transform: translateX(-999px);
    -o-transform: translateX(-999px);
    transform: translateX(-999px);
    -webkit-opacity: 0;
    opacity: 0; 
  }
  60% {
    -ms-transform: translateX(50px);
    -moz-transform: translateX(50px);
    -webkit-transform: translateX(50px);
    -o-transform: translateX(50px);
    transform: translateX(50px);
    -webkit-opacity: 0.6;
    opacity: 0.6; 
  }
  100% {
    -ms-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-opacity: 1;
    opacity: 1; 
  } 
}
@keyframes myAnimate4 {
  0% {
    -ms-transform: translateX(-999px);
    -moz-transform: translateX(-999px);
    -webkit-transform: translateX(-999px);
    -o-transform: translateX(-999px);
    transform: translateX(-999px);
    -webkit-opacity: 0;
    opacity: 0; 
  }
  60% {
    -ms-transform: translateX(50px);
    -moz-transform: translateX(50px);
    -webkit-transform: translateX(50px);
    -o-transform: translateX(50px);
    transform: translateX(50px);
    -webkit-opacity: 0.6;
    opacity: 0.6; 
  }
  100% {
    -ms-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-opacity: 1;
    opacity: 1; 
  } 
}
@-webkit-keyframes myAnimate3 {
  0% {
    -ms-transform: translateX(999px);
    -moz-transform: translateX(999px);
    -webkit-transform: translateX(999px);
    -o-transform: translateX(999px);
    transform: translateX(999px);
    opacity: 0;
    -webkit-opacity: 0; 
  }
  60% {
    -ms-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    -webkit-transform: translateX(-50px);
    -o-transform: translateX(-50px);
    transform: translateX(-50px);
    opacity: 0.6;
    -webkit-opacity: 0.6; 
  }
  100% {
    -ms-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-opacity: 1;
    opacity: 1; 
  } 
}
@keyframes myAnimate3 {
  0% {
    -ms-transform: translateX(999px);
    -moz-transform: translateX(999px);
    -webkit-transform: translateX(999px);
    -o-transform: translateX(999px);
    transform: translateX(999px);
    opacity: 0;
    -webkit-opacity: 0; 
  }
  60% {
    -ms-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    -webkit-transform: translateX(-50px);
    -o-transform: translateX(-50px);
    transform: translateX(-50px);
    opacity: 0.6;
    -webkit-opacity: 0.6; 
  }
  100% {
    -ms-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-opacity: 1;
    opacity: 1; 
  } 
}
.section4 .section4-wrap .content .hl-iphone,
.section4 .section4-wrap .content .showImg ,
.section4 .section4-wrap .content .nextImg{
  transition: 1s ease 1s;
  position: absolute;
  left: 50%;
  margin-left: -175px;
  top: -45px;
  transform: translateY(60px);
  opacity: 0; 
  width: 350px;
  z-index: 10;
}
.section4 .section4-wrap .content .showImg{
	z-index: 1000;
  width: 312px;
  margin-left: -157px;
  top: 42px;
}
.section4 .section4-wrap .content .nextImg{
	z-index: 100;
  width: 312px;
  margin-left: -157px;
 	top: 42px;
}
.section4 .section4-wrap .content .hl-iphone.move,
.section4 .section4-wrap .content .showImg.move ,
.section4 .section4-wrap .content .nextImg.move{
  transform: translateY(0px);
  opacity: 1; 
}

.section5 {
  width: 100%;
  height: 957px; 
}
.section5 .section5-wrap {
  box-sizing: border-box; 
}
.section5 .section5-wrap .line {
  margin-top: 15px; 
}
.section5 .section5-wrap .content {
  width: 100%;
  height: 550px;
  padding: 0 10px; 
}
.section5 .section5-wrap .content .news-list {
  display: inline-block;
  float: left; 
}
.section5 .section5-wrap .content .news-list .news-title {
  box-sizing: border-box;
  padding: 0 20px;
  position: relative;
  height: 50px;
  bottom: 50px;
  line-height: 50px;
  background: rgba(255, 255, 255, 0.2);
  color: white; 
}
.section5 .section5-wrap .content .news-list .news-title span:nth-of-type(1) {
  font-size: 18px; 
}
.section5 .section5-wrap .content .news-list .news-title span:nth-of-type(2) {
  font-size: 14px;
  float: right; 
}
.section5 .section5-wrap .content .news-list .new-list {
  box-shadow: 0 0 15px 4px #E9E9E9;
  position: relative;
  top: -50px;
  padding: 10px 0;
  height: 260px;
  box-sizing: border-box;
  overflow: hidden; 
}
.section5 .section5-wrap .content .news-list .new-list li {
  cursor: pointer;
  padding: 0 20px;
  font-size: 14px;
  line-height: 27px;
  height: 27px;
  box-sizing: border-box; 
}
.section5 .section5-wrap .content .news-list .new-list li a {
  display: inline-block;
  width: 350px;
  overflow: hidden; 
}
.section5 .section5-wrap .content .news-list .new-list li .time {
  float: right; 
}
.section5 .section5-wrap .content .news-line {
  position: relative;
  display: inline-block;
  left: 48px;
  top: -15px;
  width: 2px;
  height: 580px;
  background: #f5f5f5; 
}
.section5 .section5-wrap .content .news-details {
  float: right;
  width: 50%;
  height: 580px; 
}
.section5 .section5-wrap .content .news-details .news-content {
  cursor: pointer;
  background: #f5f5f5;
  width: 540px;
  height: 260px;
  padding: 4px;
  box-sizing: border-box;
  position: relative;
  left: 45px;
  margin-bottom: 44px; 
}
.section5 .section5-wrap .content .news-details .news-content .describetion {
  background: #FFFFFF;
  width: 100%;
  height: 170px;
  padding: 20px;
  box-sizing: border-box; 
}
.section5 .section5-wrap .content .news-details .news-content .describetion h3 {
  font-size: 18px;
  line-height: 35px;
  font-weight: bold;
  padding-top: 15px; 
}
.section5 .section5-wrap .content .news-details .news-content .describetion p {
  font-size: 14px;
  line-height: 23px;
  letter-spacing: 1px;
  font-family: PingFangRegular; 
}
.section5 .section5-wrap .content .news-details .news-content .news-content-time {
  transition: all;
  width: 100%;
  height: 90px;
  padding: 15px 20px;
  box-sizing: border-box; 
}
.section5 .section5-wrap .content .news-details .news-content .news-content-time h3 {
  font-size: 35px;
  line-height: 40px; 
}
.section5 .section5-wrap .content .news-details .news-content .news-content-time p {
  font-size: 15px;
  line-height: 20px; 
}
.section5 .section5-wrap .content .news-details .news-content .news-content-time i {
  font-size: 40px;
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: black; 
}
.section5 .section5-wrap .content .news-details .news-content .trangle {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-right: 15px solid #f5f5f5;
  border-bottom: 15px solid transparent;
  position: absolute;
  left: -15px;
  top: 200px; 
}
.section5 .section5-wrap .content .news-details .news-content .circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #F5F5F5;
  overflow: hidden;
  position: absolute;
  left: -63px;
  top: 208px; 
}
.section5 .section5-wrap .content .news-details .news-content .circle .circle-small {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  margin-left: 2px;
  margin-top: 2px; 
}
.section5 .section5-wrap .content .news-details .news-content.select {
  transition: all 0.5s;
  background: #0083f0; 
}
.section5 .section5-wrap .content .news-details .news-content.select .news-content-time {
  color: #FFFFFF; 
}
.section5 .section5-wrap .content .news-details .news-content.select .trangle {
  transition: all 0.5s;
  border-right: 15px solid #0083f0; 
}
.section5 .section5-wrap .content .news-details .news-content.select .circle {
  transition: all 0.5s;
  background: #0083f0; 
}
.section5 .section5-wrap .content .news-details .news-content.select .iconfont {
  transition: 0.5s;
  color: white; 
}
.section5 .section5-wrap .content .news-details .news-content.select .new a {
  color: #0083f0; 
}
.section5 .section5-wrap .moreNews {
  width: 147px;
  height: 42px;
  left: 50%;
  margin-left: -73px;
  position: relative;
  margin-top: 110px;
  background: #0c9ef1;
  display: block;
  color: #FFFFFF;
  text-align: center;
  line-height: 42px;
  border-radius: 3px; 
}
.section6 {
  width: 100%;
  height: 945px;
  background: #f8f9fb;
  overflow: hidden;
}
.section6 .section6-wrap .content {
  width: 100%; 
}
.section6 .section6-wrap .content ul li {
  width: 20%;
  height: 235px;
  float: left;
  border: 2px solid #f8f9fb;
  box-sizing: border-box;
  transition: 0.3s;
  position: relative;
  perspective: 800px; 
}
.section6 .section6-wrap .content ul li .card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s; 
}
.section6 .section6-wrap .content ul li .card figure {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background: white;
}
.section6 .section6-wrap .content ul li .card figure.back {
  transform: rotateY(180deg); 
}
@keyframes filpped {
  0% {
    transform: rotateY(0deg); 
  }
  100% {
    transform: rotateY(-180deg);
  } 
}
.section6 .section6-wrap .content ul li .card.flipped {
  animation: filpped 0.8s forwards;
}
.section6 .section6-wrap .content ul li .front {
  background-size: 55px auto !important; 
}
.section6 .section6-wrap .content ul li .back {
  background-size: 80px auto !important;
}
.section6 .section6-wrap .content ul li:nth-of-type(1) .front {
  background: #FFFFFF url("../img/boxuan.png") center center no-repeat; 
}
.section6 .section6-wrap .content ul li:nth-of-type(1) .back {
  background: #FFFFFF url("../img/bxl.png") center center no-repeat; 
}
.section6 .section6-wrap .content ul li:nth-of-type(2) .front {
  background: #FFFFFF url("../img/guozi.png") center center no-repeat; 
}
.section6 .section6-wrap .content ul li:nth-of-type(2) .back {
  background: #FFFFFF url("../img/gzndl.png") center center no-repeat;
  background-size: 100px auto !important; 
}
.section6 .section6-wrap .content ul li:nth-of-type(3) .front {
  background: #FFFFFF url("../img/hnjll.png") center center no-repeat;
  background-size: 50px auto !important; 
}
.section6 .section6-wrap .content ul li:nth-of-type(3) .back {
  background: #FFFFFF url("../img/hnjl.png") center center no-repeat;
  background-size: 70px auto !important; 
}
.section6 .section6-wrap .content ul li:nth-of-type(4) .front {
  background: #FFFFFF url("../img/hjkx.png") center center no-repeat; 
}
.section6 .section6-wrap .content ul li:nth-of-type(4) .back {
  background: #FFFFFF url("../img/hjkxl.png") center center no-repeat; 
}
.section6 .section6-wrap .content ul li:nth-of-type(5) .front {
  background: #FFFFFF url("../img/ems.png") center center no-repeat; 
}
.section6 .section6-wrap .content ul li:nth-of-type(5) .back {
  background: #FFFFFF url("../img/emsl.png") center center no-repeat; 
}
.section6 .section6-wrap .content ul li:nth-of-type(6) .front {
  background: #FFFFFF url("../img/jsth.png") center center no-repeat; 
}
.section6 .section6-wrap .content ul li:nth-of-type(6) .back {
  background: #FFFFFF url("../img/jsthl.png") center center no-repeat;
  background-size: 70px auto !important; 
}
.section6 .section6-wrap .content ul li:nth-of-type(7) .front {
  background: #FFFFFF url("../img/nz.png") center center no-repeat; 
}
.section6 .section6-wrap .content ul li:nth-of-type(7) .back {
  background: #FFFFFF url("../img/nzl.png") center center no-repeat; 
}
.section6 .section6-wrap .content ul li:nth-of-type(8) .front {
  background: #FFFFFF url("../img/cckd.png") center center no-repeat; 
}
.section6 .section6-wrap .content ul li:nth-of-type(8) .back {
  background: #FFFFFF url("../img/cckdl.png") center center no-repeat; 
}
.section6 .section6-wrap .content ul li:nth-of-type(9) .front {
  background: #FFFFFF url("../img/zgtx.png") center center no-repeat; 
}
.section6 .section6-wrap .content ul li:nth-of-type(9) .back {
  background: #FFFFFF url("../img/zgtxl.png") center center no-repeat;
}
.section6 .section6-wrap .content ul li:nth-of-type(10) .front {
  background: #FFFFFF url("../img/dbzq.png") center center no-repeat;
}
.section6 .section6-wrap .content ul li:nth-of-type(10) .back {
  background: #FFFFFF url("../img/dbzql.png") center center no-repeat; 
}

.section7 {
  width: 100%;
  height: 370px; 
}
.section7 .intro {
  transition: all 2s;
  opacity: 0;
  display: box;
  /* OLD - Android 4.4- */
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
 	display: -moz-box;
 	/* OLD - Firefox 19- (buggy but mostly works) */
 	display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
}
.section7 .intro li {
  -webkit-box-flex: 1;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;
  /* OLD - Firefox 19- */
  width: 33.3%;
  /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;
  /* Chrome */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1;
  color: #0083f0;
 	text-align: center; 
}
.section7 .intro li h3 {
  font-size: 70px;
  margin-top: 120px;
  line-height: 100px; 
}
.section7 .intro li p {
  font-size: 20px;
  line-height: 40px; 
}

.section8 {
  width: 100%;
  height: 375px;
  background: #0083f0; 
}
.section8 .section8-wrap {
  overflow: hidden; 
}
.section8 h3.move,
.section8 .telephone.move {
  transform: translateY(0);
  opacity: 1; 
}
.section8 h3 {
  text-align: center;
  font-size: 35px;
  color: #FFFFFF;
  margin-top: 115px;
  transform: translateY(40px);
  opacity: 0;
  transition: 1s ease 0.2s;
}
.section8 .telephone {
  width: 355px;
  height: 45px;
  margin: 50px auto 0;
  border-bottom: 3px solid #FFFFFF;
  transform: translateY(40px);
  opacity: 0;
  transition: 1s ease 0.4s; 
}
.section8 .telephone input {
  background: #0083F0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  color: white;
  font-size: 14px; 
}
.section8 .telephone input::-webkit-input-placeholder {
  color: #FFFFFF; 
}
.section8 .telephone input::-moz-placeholder {
  color: #FFFFFF; 
}
.section8 .telephone input:-moz-placeholder {
  color: #FFFFFF; 
}
.section8 .telephone input:-ms-input-placeholder {
  color: #FFFFFF; 
}
.section8 .telephone .telephone-button {
  cursor: pointer;
  position: relative;
  left: 360px;
  bottom: 35px;
  transition: 0.3s;
  width: 35px;
  height: 35px;
  background: url("../img/phone-hover.png") center center no-repeat; 
}
.section8 .telephone .telephone-button:hover {
  background: url("../img/phone-normal.png") center center no-repeat; 
}

/*# sourceMappingURL=main.css.map */