/* CSS Document */
html, body {
      position: relative;
      height: 100%;
      background: #092545;
    }
body{-webkit-text-size-adjust:none;}
*{-webkit-text-size-adjust:none; font-size:12px; font-family:"微软雅黑"; margin:0; padding:0; outline:none;}
input,textarea,select{ font-size:100%;}ul{ list-style:none;}
a,span{order: medium none;outline: medium none;text-decoration: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
img{ vertical-align:top; border:none; width:100%;}
{margin:0 auto; position:relative; /*display:none;*/ }
.rel{ position:relative;}
.abs{position:absolute; }
.main{ position:relative; width:100%; height: 100%;}
.section{ position:relative; width:100%;overflow:hidden;}
img{ width:100%;}

.swiper-container {
    width: 100%;
    height: 100%;
    display: none;
}
.swiper-slide {     
		overflow: hidden;
}

.arrow{  position:absolute; bottom:30px; opacity: 0.9; left:50%; width:60px; margin-left:-30px; z-index:99;animation:2s ease 0s normal none infinite fadeInDown; -webkit-animation:2s ease 0s normal none infinite fadeInDown;}
.btn_pause{position:fixed; display: none; width:10%; top:100px; right:58px; z-index:99;}
.btn_play{ -webkit-transform-origin:center center;transform-origin:center center;animation:2s linear 0s normal none infinite runAround; -webkit-animation:2s linear 0s normal none infinite runAround;}
.code{ color: #fff; font-size: 17px; right: 10px; bottom: 10px; line-height: 18px; opacity: 0.5;}
.loading_layer{ width: 100%; height: 100%; background: #00214c;}
.load_lamp{ display: block; width: 150px; padding: 300px 0 60px 0; margin: 0 auto;}
.loadhint{ width: 100%; text-align: center; padding: 0 0 30px 0; color: #e8b22a; font-size: 30px;}
.loadtxt{ width: 100%; text-align: center; color: #e8b22a; font-size: 30px; font-weight: bold;}

.apply_box{ position: absolute;top: 365px; left: 27%;width: 57%;}
.apply_box li{ height: 135px; width: 100%;}
.apply_box li input{ width: 100%; height: 105px; color: #fff; font-size: 40px; border: none; background: none; }
.btn_submit{ position: absolute;top: 540px; left: 35%; width: 30%; line-height: 50px; background: #7ecad9; text-align: center; color: #fff; font-size: 30px; border-radius: 10px;}
.btn_back{width: 30%; line-height: 54px; background: #7ecad9; text-align: center; color: #fff; font-size: 32px; border-radius: 10px;}
.false{background: #666;}
.false img{ opacity: 0.4;}

.logo{width: 100%; left: 0; top: 41px; z-index: 10;}
.icon_hand1{ width: 38px;}
/*page1*/
.page1_img{width: 100%; left: 0; top: -10px; opacity: 0;}
.page1_txt1{width: 100%; left: 0; top: 178px;}
.page1_txt2{width: 100%; left: 0; top: 312px;}
.page1_txt3{ width: 55.6%; top: 534px; left: 20.5%;}


.swiper-slide-active .page1_txt1{animation: fadeInUpLong 0.4s 0.2s linear both; -webkit-animation: fadeInUpLong 0.4s 0.2s linear both;}
.swiper-slide-active .page1_txt2{animation: fadeInUpLong 0.4s 0.6s linear both; -webkit-animation: fadeInUpLong 0.4s 0.6s linear both;}
.swiper-slide-active .page1_txt3{animation: leftSpeedIn 0.8s 1s ease-out both; -webkit-animation: leftSpeedIn 0.8s 1s ease-out both;}
.swiper-slide-active .page1_img{animation: showInTurn 0.8s 1.8s ease both; -webkit-animation: showInTurn 0.8s 1.8s ease both;}

/*page2*/
.page2_img{ width: 100%; left: 0; top: 42px;}
.page2_txt{ width: 74.1%; left: 13.1%; top: 430px;}
.page2_txt img{ position: absolute; top: 0; left: 0;}
.page2_footer{ width: 100%; left: 0; top: 1010px;}
.swiper-slide-active .page2_txt1{animation: bounceIn1 1s 0.2s linear both; -webkit-animation: bounceIn1 1s 0.2s linear both;}
.swiper-slide-active .page2_txt img:nth-child(2){animation:1.2s ease 1s normal none infinite starShow; -webkit-animation:1.2s ease 1s normal none infinite starShow;}
.swiper-slide-active .page2_txt img:nth-child(3){animation:1.2s ease 1.3s normal none infinite starShow; -webkit-animation:1.2s ease 1.3s normal none infinite starShow;}
.swiper-slide-active .page2_txt img:nth-child(4){animation:1.2s ease 1.7s normal none infinite starShow; -webkit-animation:1.2s ease 1.7s normal none infinite starShow;}
/*page3*/
.page3_peo{width: 71.3%; left: 14.4%; top: 143px; opacity: 0;}
.page3_peo2{top: 315px;}
.page3_peo3{top: 489px;}
.page3_peo4{top: 675px;}
.page3_peo5{top: 838px;}
.btn_show_peo{ position: absolute; width: 166px; height: 166px; top: 10px;z-index: 20;}
.page3_peo .icon_hand1{ top: 130px;}
.page3_peo .icon_hand2{left: 0; right: auto;}
.page3_peo1 .btn_show_peo{left: 0;}
.page3_peo2 .btn_show_peo{  right: 0;}
.page3_peo3 .btn_show_peo{ left: 0;}
.page3_peo4 .btn_show_peo{  right: 0;}
.page3_peo5 .btn_show_peo{  left: 0;}

.swiper-slide-active .page3_peo1{animation: fadeInLeft 0.8s 0.2s ease-out both; -webkit-animation: fadeInLeft 0.8s 0.2s ease-out both;}
.swiper-slide-active .page3_peo2{animation: fadeInRight 0.8s 0.2s ease-out both; -webkit-animation: fadeInRight 0.8s 0.2s ease-out both;}
.swiper-slide-active .page3_peo3{animation: fadeInLeft 0.8s 0.2s ease-out both; -webkit-animation: fadeInLeft 0.8s 0.2s ease-out both;}
.swiper-slide-active .page3_peo4{animation: fadeInRight 0.8s 0.2s ease-out both; -webkit-animation: fadeInRight 0.8s 0.2s ease-out both;}
.swiper-slide-active .page3_peo5{animation: fadeInLeft 0.8s 0.2s ease-out both; -webkit-animation: fadeInLeft 0.8s 0.2s ease-out both;}


/*page4*/

.swiper-slide4{ display: none;}
.show4 .swiper-slide4{ display: block;}

.page4_peo{width: 100%; top: 0; left: 0;}
.page4_txt{ width:69.9%; top:460px; left:9.4%;background: rgba(255,255,255,.8); border-radius: 10px; padding: 25px 6% 40px 6%;}
.page4_txt strong{border-bottom: solid 2px #97a9c6; padding: 0 0 8px 0; margin: 0 0 8px 0; font-size: 30px; display: block; font-weight: bold; color: #00489a;}
.page4_txt i{text-align: justify; display: block; color: #011f4a; font-size: 26px; line-height: 36px; font-style: normal;}
.page4_txt em{text-align: justify; display: block; color: #011f4a; font-size: 20px; text-indent: 2em; line-height: 30px; font-style: normal;}
.page4_txt em a{ font-weight: bold; color: #011f4a; font-size: 20px; }
.page4_ques{ width: 79.7%;left:9.4%; top: 790px;}
.page4_ques strong{ font-size: 27px; line-height: 85px; color:#00489a; left: 125px; top: 0;}
.icon_hand1{ top: 67px; right: 0;animation:1.5s ease 0.3s normal none infinite upDown; -webkit-animation:1.5s ease 0.3s normal none infinite upDown;}
.page4_explain_box{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,32,75,0.6); display: none;}
.page4_explain_box .icon_hand1{right: 140px; top: 500px;}
.page4_explain{ top: 281px; width: 80.8%; left: 9.6%; color: #fff;}
.page4_explain .page4_explain_title{ font-size: 32px; overflow: hidden; font-weight: bold; line-height: 97px; display: block; text-align: center;}
.page4_explain .page4_explain_content{ display: block; padding: 50px 50px 0 50px;}
.page4_explain .page4_explain_content strong{ font-weight: bold; display: block; font-size: 28px;}
.page4_explain .page4_explain_content span{ line-height: 40px; padding: 15px 0 0 0;}
.page4_explain .page4_explain_content span i{ text-align: justify; display: block;  font-style: normal; font-size: 26px; text-indent: 2em;}
.page4_explain .page4_explain_content span i em{font-size: 28px; color: #e8b22a; font-style: normal; font-weight: bold;}
.page4_explain .page4_explain_content span i em.content_g{color: #5fa847;}
.explain_con{ width: 100%; top: 0; left: 0;}
.arrowDown img{transform: rotate(180deg); -webkit-transform: rotate(180deg);}
.arrowDown{bottom:30px;animation:2s ease 0s normal none infinite fadeInUp; -webkit-animation:2s ease 0s normal none infinite fadeInUp;}

.page4_peobox2 .page4_txt strong{ color: #deab2d; border-color: #d7c393;}
.page4_peobox2 .page4_ques strong{color: #deab2d;font-size: 26px;left: 115px; }

.page4_peobox3 .page4_txt{ padding: 15px 6% 20px 6%;}
.page4_peobox3 .page4_txt strong{ color: #5fa847; border-color: #9dbf9d;}
.page4_peobox3 .page4_ques strong{color: #5fa847; }
.page4_peobox3 .page4_ques{ top: 760px;}


.page4_peobox4 .page4_txt{ padding: 20px 6% 25px 6%;}
.page4_peobox4 .page4_txt strong{ color: #1f8fc8; border-color: #a0bed4;}
.page4_peobox4 .page4_ques strong{color: #1f8fc8;font-size: 27px;left: 130px; }
.page4_peobox4 .page4_ques{ top: 740px; }
.page4_peobox4 .page4_ques2{top: 839px;}

.page4_peobox5 .page4_txt{ padding: 20px 6% 25px 6%;}
.page4_peobox5 .page4_txt strong{ color: #d34140; border-color: #cd9397;}
.page4_peobox5 .page4_ques strong{color: #d34140;font-size: 26px;left: 123px;  }
.page4_peobox5 .page4_ques{ top: 760px; }

.page4_peobox{ display: none;}

/*page5*/
.page5_txt{ width: 80.5%; left: 8%; top: 200px; opacity: 0;}
.page5_txt2{ top: 431px;}
.page5_txt3{ top: 685px;}
.page5_txt5{ width: 108px; top:3px; left: 154px;}

.swiper-slide-active .page5_txt1{animation: rotateInDownLeft 0.6s 0.2s ease-out both; -webkit-animation: rotateInDownLeft 0.6s 0.2s ease-out both;}
.swiper-slide-active .page5_txt2{animation: rotateInDownRight 0.6s 0.6s ease-out both; -webkit-animation: rotateInDownRight 0.6s 0.6s ease-out both;}
.swiper-slide-active .page5_txt3{animation: rotateInDownLeft 0.6s 1s ease-out both; -webkit-animation: rotateInDownLeft 0.6s 1s ease-out both;}
.swiper-slide-active .page5_txt5{animation:1.2s ease 1.6s normal none infinite swingPK; -webkit-animation:1.2s ease 1.6s normal none infinite swingPK;}

.page6_txt{top:160px; left: 0;}
.swiper-slide6 .icon_hand1{ right: 200px; top: 920px;}
.page6_hint{ right: 100px; top: 980px; font-size: 22px; color: #adb9bf;}
.btn_go_back{ width: 100px; top: 940px; right: 80px;}

@keyframes swingPK {
0%,10%,40%,50%,60%,70%,80%,90%,100% {
    transform: rotate(0deg);
}
20%,32% {
    transform: rotate(-8deg);
}
22%,34%{
    transform: rotate(-4deg);
}
24%,28% {
    transform: rotate(8deg);
}
26%,30% {
    transform: rotate(4deg);
}

}
@-webkit-keyframes swingPK {
0%,10%,40%,50%,60%,70%,80%,90%,100% {
    -webkit-transform: rotate(0deg);
}
20% ,32%{
    -webkit-transform: rotate(-8deg);
}
22%,34% {
    -webkit-transform: rotate(-4deg);
}
24% ,28%{
    -webkit-transform: rotate(8deg);
}
26% ,30%{
    -webkit-transform: rotate(4deg);
}
}


@keyframes starShow {
    0% {opacity: 1;}
    50% {opacity: 0; }
    100% {opacity: 1; }
}

@-webkit-keyframes starShow {
	0%{ opacity: 1;}
  50% {opacity: 0;}
  100%{ opacity: 1;}
}


@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}


@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@-webkit-keyframes upDown{
0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
40%{-webkit-transform:translateY(-20px)}
60%{-webkit-transform:translateY(-13px)}
}
@keyframes upDown{
0%,20%,50%,80%,100%{transform:translateY(0)}
40%{transform:translateY(-20px)}
60%{transform:translateY(-13px)}
}

@-webkit-keyframes bannerShow {
  0% {opacity: 0;-webkit-transform: translate3d(0,-150px,0);transform: translate3d(0,-150px,0);}
  100% {opacity: 1;-webkit-transform: none;transform: none;}
}

@keyframes bannerShow {
    0% {opacity: 0;-webkit-transform: translate3d(0,-150px,0);transform: translate3d(0,-150px,0);}
    100% {opacity: 1;-webkit-transform: none;transform: none;  }
}

@-webkit-keyframes UpInDown {
	0%{ -webkit-transform: translate3d(0,700px,0); opacity: 1;}
  100% { -webkit-transform: translate3d(0,0,0);opacity: 1;}
}


@keyframes UpInDown { 
  0%{ transform: translate3d(0,700px,0); opacity: 1;}
  100% { -webkit-transform: translate3d(0,0,0);opacity: 1;}
}
@-webkit-keyframes runAround {
	from{-webkit-transform:rotate(0deg)}
	to{-webkit-transform:rotate(360deg)}
}

@keyframes runAround { 
    from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}
}
@-webkit-keyframes fadeInDown {
	0%,30% { opacity: 0; -webkit-transform: translate3d(0,10px,0);}
    60% { opacity: 1; -webkit-transform: translate3d(0,0,0); }
    100% { opacity: 0; -webkit-transform: translate3d(0,-10px,0);}
}


@keyframes fadeInDown { 
    0%,30% { opacity: 0; transform: translate3d(0,10px,0);}
    60% { opacity: 1; transform: translate3d(0,0,0); }
    100% { opacity: 0; transform: translate3d(0,-10px,0);}
}

@-webkit-keyframes fadeInUp {
  0% {opacity: 0;-webkit-transform: translate3d(0,-10px,0);transform: translate3d(0,-10px,0);}
  100% {opacity: 1;-webkit-transform: none;transform: none;}
}

@keyframes fadeInUp {
    0% {opacity: 0;-webkit-transform: translate3d(0,-10px,0);transform: translate3d(0,-10px,0);}
    100% {opacity: 1;-webkit-transform: none;transform: none;  }
}

@-webkit-keyframes fadeInUpLong{
  0% {opacity: 0;-webkit-transform: translate3d(0,-20px,0);transform: translate3d(0,-20px,0);}
  100% {opacity: 1;-webkit-transform: none;transform: none;}
}

@keyframes fadeInUpLong {
    0% {opacity: 0;-webkit-transform: translate3d(0,-20px,0);transform: translate3d(0,-20px,0);}
    100% {opacity: 1;-webkit-transform: none;transform: none;  }
}

@-webkit-keyframes showInTurn {
  0%{opacity: 1;-webkit-transform:scale(0,1);}
  40% {opacity: 1;-webkit-transform:scale(1);}
  70% {opacity: 1;-webkit-transform:scale(0.7,1);}
  100% {opacity: 1;-webkit-transform:scale(1);}
}

@keyframes showInTurn {
  0%{opacity: 1;transform:scale(0,1);}
  40% {opacity: 1;transform: scale(1);}
  70% {opacity: 1;transform: scale(0.7,1);}
  100% {opacity: 1;transform: scale(1);}
}

@-webkit-keyframes bounceIn1 {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-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);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
}

@keyframes bounceIn1 {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-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);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes fadeInLeft {
  0% {opacity: 0;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
  80% {-webkit-transform: translate3d(5%, 0, 0);transform: translate3d(5%, 0, 0);}
  100% {opacity: 1;-webkit-transform: none;transform: none;}
}

@keyframes fadeInLeft {
    0% {opacity: 0;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
    80% {-webkit-transform: translate3d(5%, 0, 0);transform: translate3d(10%, 0, 0);}
    100% {opacity: 1;-webkit-transform: none;transform: none;  }
}

@-webkit-keyframes fadeInRight {
  0% {opacity: 0;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}
  890% {-webkit-transform: translate3d(-5%, 0, 0);transform: translate3d(-5%, 0, 0);}
  100% {opacity: 1;-webkit-transform: none;transform: none;}
}

@keyframes fadeInRight {
  0% {opacity: 0;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}
  80% {-webkit-transform: translate3d(-15%, 0, 0);transform: translate3d(-5%, 0, 0);}
  100% {opacity: 1;-webkit-transform: none;transform: none;}
}
@-webkit-keyframes showInDown {
	0% {opacity: 0;-webkit-transform: translate3d(0,20px,0);transform: translate3d(0,20px,0);}
  100% {opacity: 1;-webkit-transform: none;transform: none;}
}


@keyframes showInDown { 
    0% {opacity: 0;-webkit-transform: translate3d(0,20px,0);transform: translate3d(0,20px,0);}
  100% {opacity: 1;-webkit-transform: none;transform: none;}
}

@-webkit-keyframes leftSpeedIn {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes leftSpeedIn {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
