@charset "utf-8";
/* 城市商圈 */
body{overflow-x:hidden;}
body,html,header,section,div,ul,li,div,a,p,h1,b,dd,dt,dl{ padding:0; margin:0; font-family:"微软雅黑"}
li{ list-style:none;}
a{ text-decoration:none;}

.section{overflow:hidden;}
.section .tw{display:block;overflow:hidden;width:1400px;height:700px;margin:0 auto;position:relative;}
.main{}
/*第一页*/
.first .first_left{display:block;float:left;width:50%;position:relative;top:190px;overflow:hidden;}
.first .first_left h1{color:#fff;font-size:38px;display:block;margin-bottom:50px;opacity:0;transiton:0.8s;transition-delay:0.5s;transform:translateY(300px);-webkit-transform:translateY(300px);}
.s1.active .first .first_left h1{-webkit-animation:dn 0.8s 0.5s forwards;animation:dn 0.8s 0.5s forwards;}
.first .first_left dt{font-size:32px;display:block;color:#fff;margin-bottom:30px;transiton:0.8s;transition-delay:0.8s;transform:translateY(600px);-webkit-transform:translateY(600px);}
.s1.active .first .first_left dt{ -webkit-animation:dn 0.8s 0.8s forwards; animation:dn 0.8s 0.8s forwards;}
.first .first_left dd{font-size:20px;display:block;color:#fff;line-height:30px;transiton:0.8s;transition-delay:0.8s;transform:translateY(300px);-webkit-transform:translateY(300px)}
.s1.active .first .first_left dd{ -webkit-animation:dn 0.8s 1s forwards; animation:dn 0.8s 1s forwards;}
.first .first_left a{background:#c14752;font-size:18px;text-align:center;padding:0px 28px;width:430px;height:42px;color:#fff;line-height:42px;margin-top:30px;display:block;transiton:0.8s;transition-delay:0.8s;transform:translateY(300px);-webkit-transform:translateY(300px)}
.s1.active .first .first_left a{ -webkit-animation:dn 0.8s 1.2s forwards; animation:dn 0.8s 1.2s forwards;}
.first .first_right{display:block;float:right;width:50%;position:relative;transiton:2s;transition-delay:1.3s;opacity:1;transform:translateX(3000px);-webkit-transform:translateX(3000px)}
.s1.active .first .first_right{opacity:1;-webkit-animation:de 0.8s 1.5s forwards; animation:de 0.8s 1.5s forwards;}
.first .first_right img{position:absolute;top:150px;}

@-webkit-keyframes dn{0%{opacity:0;-webkit-transform:translateY(-50px);}
    100%{opacity:1;-webkit-transform:translateY(0);}}
@-moz-keyframes dn{0%{opacity:0;-moz-transform:translateY(-50px);}
    100%{opacity:1;-moz-transform:translateY(0);}}
@keyframes dn{0%{opacity:0;transform:translateY(-50px);}
    100%{opacity:1;transform:translateY(0);}}
	
@-webkit-keyframes de{0%{opacity:0;-webkit-transform:translateX(500px);}
    100%{opacity:1;-webkit-transform:translateX(0);}}
@-moz-keyframes de{0%{opacity:0;-moz-transform:translateX(500px);}
    100%{opacity:1;-moz-transform:translateX(0);}}
@keyframes de{0%{opacity:0;transform:translateX(1000px);}
    100%{opacity:1;transform:translateX(0);}}

/*第二页*/
.second span.left_span{width:50%;display:block;float:left;position:relative;left:20px;top:60%;margin-top:-255px;}
.second span.left_span img{width:80%;}
.second dl.right_dl{width:50%;display:block;float:right;position:relative;top:300px;}
.second dl.right_dl dt{display:block;font-size:48px;font-weight:bold;color:#574300;margin-bottom:30px;}
.second dl.right_dl dd{line-height:34px;font-size:24px;color:#574300;margin-bottom:15px;width:534px;}
.second dl.right_dl h1{display:block;float:left;font-size:28px;color:#fff;padding:8px 20px;background:#ff872f;margin-top:20px;}

.s2 .left_span:nth-child(1){-webkit-transform:translate(0px,-1000px); transform:translate(0px,-1000px)}
.s2.active .left_span:nth-child(1){ -webkit-animation:right 1s 0.5s forwards; animation:right 1s 0.5s forwards}
.s2 .right_dl:nth-child(2){-webkit-transform:translate(330px,-1000px); transform:translate(330px,-1000px)}
.s2.active .right_dl:nth-child(2){ -webkit-animation:left 1s 0.8s forwards; animation:left 1s 0.8s forwards}

@-webkit-keyframes left {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes left {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes right {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes right {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/*第三页*/
.third_left{display:block;float:left;width:50%;position:relative;top:50%;margin-top:-220px;}
.third_left span img{display:block;width:60%;}
.third_left dl dt{display:block;font-size:48px;color:#fff;font-weight:bold;margin-top:40px;margin-bottom:40px;}
.third_left dl dd{display:block;font-size:24px;color:#fff;line-height:24px;margin-top:10px;line-height:30px;}

.third_right{display:block;float:right;width:50%;position:relative;top:300px;}
.third_right ul{display:block;float:right;width:50%;overflow:hidden;}
.third_right ul li{display:block;float:left;position:absolute;}
.third_right ul li.q1{top:-100px;right:10px;-webkit-transform:translate(0px,-1000px); transform:translate(0px,-1000px);opacity:0;transiton:0.5s;transition-delay:0.5s;}

.s3.active .third_right ul li.q1{opacity:1;-webkit-animation:de 1s 0.8s forwards; animation:de 1s 0.8s forwards}
@-webkit-keyframes de{0%{opacity:0;-webkit-transform:translateX(500px);}
    100%{opacity:1;-webkit-transform:translateX(0);}}
@-moz-keyframes de{0%{opacity:0;-moz-transform:translateX(500px);}
    100%{opacity:1;-moz-transform:translateX(0);}}
@keyframes de{0%{opacity:0;transform:translateX(1000px);}
    100%{opacity:1;transform:translateX(0);}}	
@-webkit-keyframes fd{0%{opacity:0;-webkit-transform:rotate(-30deg)}
    100%{opacity:1;-webkit-transform:rotate(0deg);}}
@-moz-keyframes fd{0%{opacity:0;-moz-transform:rotate(-30deg)}
    100%{opacity:1;-moz-transform:rotate(0deg);}}
@keyframes fd{0%{opacity:0;transform:rotate(-30deg);}
    100%{opacity:1;transform:rotate(0deg);}}	
.third_right ul li.q2{top:350px;right:390px;opacity:0;transiton:1.5s;transition-delay:1.5s;}
.s3.active .third_right ul li.q2{opacity:1;-webkit-animation:fd 1s 1.6s forwards; animation:fd 1s 1.6s forwards}
.third_right ul li.q3{top:400px;right:0px;opacity:0;transiton:1.5s;transition-delay:1.5s;}
.s3.active .third_right ul li.q3{opacity:1;-webkit-animation:fd 1s 1.6s forwards; animation:fd 1s 1.6s forwards}
.third_right ul li.q4{top:250px;right:43px;opacity:0;transiton:1.5s;transition-delay:1.5s;}
.s3.active .third_right ul li.q4{opacity:1;-webkit-animation:fd 1s 1.6s forwards; animation:fd 1s 1.6s forwards}
.s3 .third .third_left{ opacity:0;transition:0.5s; transition-delay:0.8s;transform:translateX(-1000);-webkit-transform:translateX(-1000);}
.s3.active .third_left{opacity:1;transform:translateX(100px);-webkit-transform:translateX(100px);}

/*.s3 .third .third_right dd{transform:translateY(-100);-webkit-transform:translateY(-100);opacity:0;transition-duration:0.8s;}
.s3 .third_right .dd1{transition-delay:0.8s;}
.s3 .third_right .dd2{transition-delay:1s;}
.s3 .third_right .dd3{transition-delay:1.2s;}
.s3.active .third_right dd{transform:translateY(10px);-webkit-transform:translateY(10px);opacity:1;}*/


/*第四页*/
.fourth span{display:block;float:left;width:50%;position:absolute;top:60%;left:0;margin-top:-278px;transiton:0.8s;transition-delay:0.8s;opacity:0;}
.s4.active .fourth span{opacity:1;-webkit-animation:fourthRight 1s 0.8s forwards; animation:fourthRight 1s 0.8s forwards;} 
.fourth span img{display:block;width:80%;}
.fourth dl{position:absolute;right:0;top:40%;transiton:0.8s;transition-delay:0.8s;opacity:0;}
.s4.active .fourth dl{opacity:1;-webkit-animation:fourthLeft 1s 0.8s forwards; animation:fourthLeft 1s 0.8s forwards;} 
.fourth dl dt{font-size:60px;font-weight:bold;color:#f0e3c3;}
.fourth dl dd{font-size:24px;color:#f0e3c3;margin-top:30px;}
@-webkit-keyframes fourthRight {
  from {
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fourthRight {
  from {
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fourthLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fourthLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}




/*第五页*/
.fifth h1{position:absolute;left:40%;top:20%;font-size:52px;color:#fff;opacity:0;transiton:0.8s;transition-delay:0.5s;transform:translateY(300px);-webkit-transform:translateY(300px);}
.s5.active .fifth h1{-webkit-animation:dn 0.8s 0.5s forwards;animation:dn 0.8s 0.5s forwards;opacity:1;}
.fifth span{position:absolute;left:10%;top:30%;transiton:0.8s;transition-delay:0.5s;transform:translateY(3000px);-webkit-transform:translateY(3000px);opacity:0;}
.s5.active .fifth span{-webkit-animation:rotatein 0.8s 0.5s forwards;animation:rotatein 0.8s 0.5s forwards;opacity:1;}
.fifth span img{width:100%;}
@-webkit-keyframes dn{0%{opacity:0;-webkit-transform:translateY(-50px);}
    100%{opacity:1;-webkit-transform:translateY(0);}}
@-moz-keyframes dn{0%{opacity:0;-moz-transform:translateY(-50px);}
    100%{opacity:1;-moz-transform:translateY(0);}}
@keyframes dn{0%{opacity:0;transform:translateY(-50px);}
    100%{opacity:1;transform:translateY(0);}}
	
@-webkit-keyframes rotatein{
    0%{opacity:0;-webkit-transform:rotate(-200deg);}
    100%{opacity:1;-webkit-transform:rotate(0);}
}
@-moz-keyframes rotatein{
    0%{opacity:0;-moz-transform:rotate(-200deg);}
    100%{opacity:1;-moz-transform:rotate(0);}
}
@-ms-keyframes rotatein{
    0%{opacity:0;-ms-transform:rotate(-200deg);}
    100%{opacity:1;-ms-transform:rotate(0);}
}
@keyframes rotatein{
    0%{opacity:0;transform:rotate(-200deg);}
    100%{opacity:1;transform:rotate(0);}
}
/*第六页*/
.sixth h1{position:absolute;left:35%;top:20%;font-size:45px;color:#fff;opacity:0;transiton:0.8s;transition-delay:0.5s;transform:translateY(300px);-webkit-transform:translateY(300px);}
.s6.active .sixth h1{-webkit-animation:dn 0.8s 0.5s forwards;animation:dn 0.8s 0.5s forwards;opacity:1;}
.sixth p{position:absolute;left:35%;top:30%;font-size:24px;color:#fff; opacity:0;transiton:0.8s;transition-delay:0.8s;transform:translateY(300px);-webkit-transform:translateY(300px);}
.s6.active .sixth p{-webkit-animation:dn 0.8s 0.8s forwards;animation:dn 0.8s 0.8s forwards;opacity:1;}
.sixth dl{overflow:hidden;}
.sixth dd{position:absolute;}
.sixth dd.s6-dd1{left:30%;top:40%; z-index:2;opacity:0;transiton:0.8s;transition-delay:0.5s;transform:translateX(-3000px);-webkit-transform:translateX(-3000px);}
.s6.active .sixth dd.s6-dd1{-webkit-animation:sixthRight 0.8s 0.8s forwards;animation:sixthRight 0.8s 0.8s forwards;opacity:1;}
.sixth dd.s6-dd2{left:10%;top:60%; z-index:1;opacity:0;transiton:0.8s;transition-delay:0.5s;transform:translateX(3000px);-webkit-transform:translateX(3000px);}
.s6.active .sixth dd.s6-dd2{-webkit-animation:sixthLeft 0.8s 0.8s forwards;animation:sixthLeft 0.8s 0.8s forwards;opacity:1;}
@-webkit-keyframes dn{0%{opacity:0;-webkit-transform:translateY(-50px);}
    100%{opacity:1;-webkit-transform:translateY(0);}}
@-moz-keyframes dn{0%{opacity:0;-moz-transform:translateY(-50px);}
    100%{opacity:1;-moz-transform:translateY(0);}}
@keyframes dn{0%{opacity:0;transform:translateY(-50px);}
    100%{opacity:1;transform:translateY(0);}}
@-webkit-keyframes sixthRight {
  from {
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sixthRight {
  from {
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes sixthLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sixthLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/*第7页*/
.seventh ul li{position:absolute;top:30%;}
.seventh ul li.s7li1{left:15%;opacity:0;transiton:1s;transition-delay:1s;transform:translateY(-300px);-webkit-transform:translateY(-300px);}
.s7.active .seventh ul li.s7li1{opacity:1;-webkit-animation:rotateinRT 0.8s 0.8s forwards; animation:rotateinRT 0.8s 0.8s forwards;}
.seventh ul li.s7li2{left:25%;top:25%;transiton:1s;transition-delay:1s;transform:translateY(-3000px);-webkit-transform:translateY(-3000px);}
.s7.active .seventh ul li.s7li2{opacity:1;-webkit-animation:flipinX 0.8s 1.2s forwards; animation:flipinX 0.8s 1.2s forwards;}
.seventh dl{width:40%;position:absolute;right:0px;top:70%;margin-top:-200px;transition:0.8s;opacity:0; transition-delay:0.8s;}
.s7.active .seventh dl{-webkit-animation:seventh 0.8s 0.8s forwards; animation:seventh 0.8s 0.8s forwards;opacity:1;}
.seventh dl dt{display:block;color:#006b60;font-size:36px;font-weight:bold;margin-bottom:50px;}
.seventh dl dd{color:#006b60;font-size:18px;text-indent:2em;margin-top:30px;line-height:30px}
@-webkit-keyframes seventh{
    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}
    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes seventh{
    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}
    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
}
@-ms-keyframes seventh{
    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;}
    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
}
@keyframes seventh{
    0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
@-webkit-keyframes rotateinRT{
    0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}
    100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateinRT{
    0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}
    100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
}
@-ms-keyframes rotateinRT{
    0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;}
    100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
}
@keyframes rotateinRT{
    0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
@-webkit-keyframes flipinX{
    0%{-webkit-transform:rotateX(90deg);opacity:0;}
    40%{-webkit-transform:rotateX(-10deg);}
    70%{-webkit-transform:rotateX(10deg);}
    100%{-webkit-transform:rotateX(0);opacity:1;}
}
@-moz-keyframes flipinX{
    0%{-moz-transform:rotateX(90deg);opacity:0;}
    40%{-moz-transform:rotateX(-10deg);}
    70%{-moz-transform:rotateX(10deg);}
    100%{-moz-transform:rotateX(0);opacity:1;}
}
@-ms-keyframes flipinX{
    0%{-ms-transform:rotateX(90deg);opacity:0;}
    40%{-ms-transform:rotateX(-10deg);}
    70%{-ms-transform:rotateX(10deg);}
    100%{-ms-transform:rotateX(0);opacity:1;}
}
@keyframes flipinX{
    0%{transform:rotateX(90deg);opacity:0;}
    40%{transform:rotateX(-10deg);}
    70%{transform:rotateX(10deg);}
    100%{transform:rotateX(0);opacity:1;}
}
/*第八页*/
.eighth ul li{position:absolute;right:0;top:25%;opacity:0;transiton:1s;transition-delay:1s;transform:translateX(-3000px);-webkit-transform:translateX(-3000px);}
.s8.active .eighth ul li{-webkit-animation:eighthRight 0.8s 0.8s forwards; animation:eighthRight 0.8s 0.8s forwards;opacity:1;}
.eighth dl{width:50%;position:absolute;left:0px;top:80%;margin-top:-200px;opacity:0;transiton:1s;transition-delay:1s;transform:translateX(-3000px);-webkit-transform:translateX(-3000px)}
.s8.active .eighth dl{-webkit-animation:eighthLeft 0.8s 0.8s forwards; animation:eighthLeft 0.8s 0.8s forwards;opacity:1;}
.eighth dl dt{display:block;color:#fff;font-size:54px;font-weight:bold;}
.eighth dl dd{display:block;color:#fff;font-size:24px;}
@-webkit-keyframes eighthLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes eighthLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes eighthRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes eighthRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


/*第九页*/
.ninth dl dd{position:absolute;}
.ninth dl dd.s9dd1{left:20%;top:20%;opacity:0;transiton:1s;transition-delay:1s;transform:translateX(-3000px);-webkit-transform:translateX(-3000px)}
.s9.active .ninth dl dd.s9dd1{-webkit-animation:dn 1s 0.8s forwards; animation:dn 1s 0.8s forwards;}
.ninth dl dd.s9dd2{left:40%;top:30%; z-index:1;opacity:0;transiton:1s;transition-delay:1s;transform:translateX(-3000px);-webkit-transform:translateX(-3000px)}
.s9.active .ninth dl dd.s9dd2{-webkit-animation:dn 1s 1.2s forwards; animation:dn 1s 1.2s forwards;}
.ninth dl dd.s9dd3{left:60%;top:30%;opacity:0;transiton:1s;transition-delay:1s;transform:translateX(-3000px);-webkit-transform:translateX(-3000px)}
.s9.active .ninth dl dd.s9dd3{-webkit-animation:dn 1s 1.4s forwards; animation:dn 1s 1.4s forwards;}
.ninth dl dd.s9dd4{left:25%;top:60%;opacity:0;transiton:1s;transition-delay:1s;transform:translateX(-3000px);-webkit-transform:translateX(-3000px)}
.s9.active .ninth dl dd.s9dd4{-webkit-animation:dn 1s 1.6s forwards; animation:dn 1s 1.6s forwards;}
@-webkit-keyframes dn{0%{opacity:0;-webkit-transform:translateY(-50px);}
    100%{opacity:1;-webkit-transform:translateY(0);}}
@-moz-keyframes dn{0%{opacity:0;-moz-transform:translateY(-50px);}
    100%{opacity:1;-moz-transform:translateY(0);}}
@keyframes dn{0%{opacity:0;transform:translateY(-50px);}
    100%{opacity:1;transform:translateY(0);}}



/*第十页*/
.tenth span{width:50%;position:absolute;left:0px;top:50%;margin-top:-200px;}
.tenth dl{width:50%;position:absolute;left:100px;top:50%;margin-top:-160px;}
.tenth dl dt{font-size:30px;font-weight:bold;color:#ea68a2;margin-top:40px;margin-bottom:80px;}
.tenth dl dd{font-size:30px;color:#ea68a2;line-height:45px;margin-top:30px;}
.tenth dl a{float:left;width:160px;height:70px;font-size:30px;color:#ece2b9;background:#ea68a2;margin-right:40px;border-radius:5px;line-height:70px;text-align:center;border:2px #ea68a2 solid;}
.tenth dl a:hover{border:2px #ea68a2 solid;background:#ece2b9;color:#ea68a2}
.tenth ul li{position:absolute;right:0;top:20%;}
.tenth ul .s10li1{top:20%;transition:0.8s;-webkit-animation:0.8s 1s forwards; animation:0.8s 1s forwards;opacity:0;}
.s10.active .tenth ul .s10li1{-webkit-animation:wobble 2s 1s infinite; animation:wobble 2s 1s infinite;opacity:1;}
.tenth ul .s10li2{top:30%;transition:0.8s;-webkit-animation:0.8s 1s forwards; animation:0.8s 1s forwards;opacity:0;}
.s10.active .tenth ul .s10li2{-webkit-animation:flipinY 0.8s 1s forwards; animation:flipinY 0.8s 1s forwards;opacity:1;}
.tenth dl{transition:0.8s;-webkit-animation:0.8s 1s forwards; animation:0.8s 1s forwards;opacity:0;}
.s10.active .tenth dl{-webkit-animation:swing 0.8s 1s forwards; animation:swing 0.8s 1s forwards;opacity:1;}


@-webkit-keyframes swing{
    20%{-webkit-transform:rotate(15deg);}
    40%{-webkit-transform:rotate(-10deg);}
    60%{-webkit-transform:rotate(5deg);}
    80%{-webkit-transform:rotate(-5deg);}
    100%{-webkit-transform:rotate(0);}
}
@-moz-keyframes swing{
    20%{-moz-transform:rotate(15deg);}
    40%{-moz-transform:rotate(-10deg);}
    60%{-moz-transform:rotate(5deg);}
    80%{-moz-transform:rotate(-5deg);}
    100%{-moz-transform:rotate(0);}
}
@-ms-keyframes swing{
    20%{-ms-transform:rotate(15deg);}
    40%{-ms-transform:rotate(-10deg);}
    60%{-ms-transform:rotate(5deg);}
    80%{-ms-transform:rotate(-5deg);}
    100%{-ms-transform:rotate(0);}
}
@keyframes swing{
    20%{transform:rotate(15deg);}
    40%{transform:rotate(-10deg);}
    60%{transform:rotate(5deg);}
    80%{transform:rotate(-5deg);}
    100%{transform:rotate(0);}
}
@-webkit-keyframes wobble{
    0%{-webkit-transform:translateX(0);}
    15%{-webkit-transform:translateX(-100px) rotate(-5deg);}
    30%{-webkit-transform:translateX(80px) rotate(3deg);}
    45%{-webkit-transform:translateX(-65px) rotate(-3deg);}
    60%{-webkit-transform:translateX(40px) rotate(2deg);}
    75%{-webkit-transform:translateX(-20px) rotate(-1deg);}
    100%{-webkit-transform:translateX(0);}
}
@-moz-keyframes wobble{
    0%{-moz-transform:translateX(0);}
    15%{-moz-transform:translateX(-100px) rotate(-5deg);}
    30%{-moz-transform:translateX(80px) rotate(3deg);}
    45%{-moz-transform:translateX(-65px) rotate(-3deg);}
    60%{-moz-transform:translateX(40px) rotate(2deg);}
    75%{-moz-transform:translateX(-20px) rotate(-1deg);}
    100%{-moz-transform:translateX(0);}
}
@-ms-keyframes wobble{
    0%{-ms-transform:translateX(0);}
    15%{-ms-transform:translateX(-100px) rotate(-5deg);}
    30%{-ms-transform:translateX(80px) rotate(3deg);}
    45%{-ms-transform:translateX(-65px) rotate(-3deg);}
    60%{-ms-transform:translateX(40px) rotate(2deg);}
    75%{-ms-transform:translateX(-20px) rotate(-1deg);}
    100%{-ms-transform:translateX(0);}
}
@keyframes wobble{
    0%{transform:translateX(0);}
    15%{transform:translateX(-100px) rotate(-5deg);}
    30%{transform:translateX(80px) rotate(3deg);}
    45%{transform:translateX(-65px) rotate(-3deg);}
    60%{transform:translateX(40px) rotate(2deg);}
    75%{transform:translateX(-20px) rotate(-1deg);}
    100%{transform:translateX(0);}
}
@-webkit-keyframes flipinY{
    0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
    40%{-webkit-transform:perspective(400px) rotateY(-10deg);}
    70%{-webkit-transform:perspective(400px) rotateY(10deg);}
    100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}
}
@-moz-keyframes flipinY{
    0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
    40%{-moz-transform:perspective(400px) rotateY(-10deg);}
    70%{-moz-transform:perspective(400px) rotateY(10deg);}
    100%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}
}
@-ms-keyframes flipinY{
    0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
    40%{-ms-transform:perspective(400px) rotateY(-10deg);}
    70%{-ms-transform:perspective(400px) rotateY(10deg);}
    100%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}
}
@keyframes flipinY{
    0%{transform:perspective(400px) rotateY(90deg);opacity:0;}
    40%{transform:perspective(400px) rotateY(-10deg);}
    70%{transform:perspective(400px) rotateY(10deg);}
    100%{transform:perspective(400px) rotateY(0);opacity:1;}
}
.scrolldown{display:block;width:32px;height:35px;background:url(../images/jiantou.png) no-repeat;position:fixed;left:50%;bottom:10px;margin-left:-16px;cursor:pointer;animation:mymove 0.8s infinite;-webkit-animation:mymove 0.8s infinite;}

@keyframes mymove{
from {opacity:0;bottom:20px}
to {opacity:1;bottom:10px;}
}

@-webkit-keyframes mymove {
from {opacity:0;bottom:20px}
to {opacity:1;bottom:10px;}
}

/*响应式*/
@media screen and (max-width:1440px){
	.first .first_right img{width:65%;}
	.section .tw{width:1200px;margin:0 auto;}
	.first .first_left{margin-top:-50px;}
	.first .first_left h1{font-size:32px;}
	.first .first_left dt{font-size:26px;}
	.first .first_left dd{font-size:18px;}
	.second span.left_span img{width:80%;margin-top:-100px;}
	.second dl.right_dl{margin-top:-100px;}
	.second dl.right_dl dt{font-size:40px;}
	.second dl.right_dl dd{font-size:20px; }
	.third_left dl dt{font-size:40px;}
	.third_left dl dd{font-size:20px}
	.third_left{margin-top:-300px;}
	.third_right{margin-top:-110px;}
	.third_right ul li.q1{margin-top:-100px;}
	.third_right ul li.q2{top:300px;}
	.third_right ul li.q3{top:350px;left:300px;}
	.s3.active .third_right ul li.q4{right:200px;top:200px;}
	.fourth span img{width:60%;}
	.fourth dl dt{font-size:50px;}
	.fourth dl dd{font-size:30px;}
	.fourth dl{margin-top:-150px;width:50%;}
	.s5.active .fifth h1,.s6.active .sixth h1{font-size:40px;}
	.fifth span img{width:80%; }
	.s6.active .sixth p{font-size:20px;}
	.sixth dl{}
	.s6.active .sixth dd.s6-dd1 img{width:80%;margin-top:-10px; }
	.s6.active .sixth dd.s6-dd2 img{width:80%;margin-top:-150px; }
	.s7.active .seventh ul li.s7li1 img{width:80%;margin-top:-100px; }
	.s7.active .seventh ul li.s7li2 img{width:80%;margin-top:-100px;}
	.eighth dl dt{font-size:48px;}
	.eighth dl dd{font-size:20px;}
	.s8.active .eighth ul li img{width:70%;margin-top:-100px;}
	.s9.active .ninth dl dd.s9dd1 img{width:80%;}
	.s9.active .ninth dl dd.s9dd2 img{width:80%;}
	.s9.active .ninth dl dd.s9dd3 img{width:80%;}
	.s9.active .ninth dl dd.s9dd4 img{width:90%;}
	.s10.active .tenth dd{font-size:24px}
	.s10.active .tenth dt{font-size:24px;}
	.tenth dl{margin-top:-300px;}
	.s10.active .tenth ul .s10li1 img{width:80%;}
	.s10.active .tenth ul .s10li2 img{width:80%;}
	.tenth dl a{font-size:20px;}
}


@media screen and (max-width:1370px){
	.section .tw{width:1000px;margin:0 auto;}
	.s1.active .first .first_left h1{font-size:24px;}
	.s1.active .first .first_left dt{font-size:20px;}
	.s1.active .first .first_left dd{font-size:16px;}
	.first .first_left{margin-top:-100px;}
	.first .first_right{margin-top:-80px;}
	.first .first_right img{width:70%;}
	.second span.left_span img{width:70%;}
	.second dl.right_dl{margin-top:-200px;}
	.third_left dl{margin-top:-50px;}
	.second dl.right_dl dt,.third_left dl dt,.fourth dl dt,.seventh dl dt,.eighth dl dt{font-size:32px;}
	.second dl.right_dl dd,.third_left dl dd..fourth dl dd,.seventh dl dd,.eighth dl dd,.s10.active .tenth dd,.s10.active .tenth dt{font-size:16px; }
	.third_right ul li.q1{margin-top:-10px;right:-40px;}
	.third_right ul li.q1 img{width:60% ;}
	.third_right ul li.q2 img{width:50% ;margin-top:-100px;}
	.third_right ul li.q3 img{width:30% ;margin-top:-100px;}
	.third_right ul li.q4 img{width:50% ;margin-top:-100px;}
	.fourth span img{width:70%;margin-top:-100px}
	.s3.active .third_right ul li.q2{right:300px;}
	.s3.active .third_right ul li.q3{}
	.s3.active .third_right ul li.q4{right:100px;top:200px;}
	.s5.active .fifth h1,.s6.active .sixth h1{font-size:34px;}
	.fifth span img{width:80%;}
	.s6.active .sixth p{font-size:16px;margin-top:-40px;}
	.sixth dd.s6-dd1{margin-top:-100px;}
	.sixth dd.s6-dd2{margin-top:-100px;}
	.sixth dd.s6-dd1 img{width:80%;}
	.sixth dd.s6-dd2 img{width:80%;}
	.s7.active .seventh ul li.s7li1 img{width:60%;}
	.s7.active .seventh ul li.s7li2	img{width:60%; }
	.s7.active .seventh dl{margin-top:-350px;}
	.eighth ul li img{width:50%;}
	.s9.active .ninth dl dd.s9dd1 img{width:60%;}
	.s9.active .ninth dl dd.s9dd2 img{width:60%;}
	.s9.active .ninth dl dd.s9dd3 img{width:60%;}
	.s9.active .ninth dl dd.s9dd4 img{width:60%;margin-top:-100px;}
	.s10.active .tenth a{font-size:14px;}
	.s10.active .tenth ul .s10li1 img{width:60%;}
	.s10.active .tenth ul .s10li2 img{width:60%;}
}
/* Localized */