@charset "UTF-8";

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,
em,img,ins,kbd,q,samp,small,strong,sub,sup,var,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,
caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,
menu,nav,section,summary,time,mark,audio,video,input{ margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;font-style:normal; }
body{line-height:1.2;word-break:break-all}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav,ul,li{list-style:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none;color:#333}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #f2f2f2;margin:15px 0 20px;padding:0}
input,select{vertical-align:middle}
html{font-size:13px}
caption{overflow:hidden;visibility:hidden;width:0;height:0;font-size:1px}
img { vertical-align:top; }
html,body{height:100%;}
button{background: transparent;}

.text-hidden {position: absolute;text-indent: -9999em;font-size: 0;}
img {width: 100%;}

#wrap {overflow: hidden; width: 100%; background: #fff;}
.container, .foot {width: 100%;}
.inner {position: relative; width: 100%; max-width: 1200px; margin: 0 auto;}

section {position: relative;}
.main {background: #1e71f9 url('../images/main_bg.jpg') center no-repeat; background-size: 1920px 100%;}
.s1 {background: #ffffff;}
.s2 {background: #cde8ff;}
.s3 {background: #ffffff;}
.s4 {background: #cde8ff;}

.main .img-box .img {position: absolute; max-width: none; z-index: 2;}
.main .img-box .img-paper {left: 0; top: 0; width: 100%; z-index: 1;}
.main .img-box .img-tit1 {left: 0; top: 19.4%; width: 100%; transform: translateY(80px); opacity: 0;}
.main .img-box .img-tit2 {left: 0; top: 27.4%; width: 100%; transform: translateY(80px); opacity: 0;}
.main .img-box .img-tit3 {left: 0; top: 27.4%; width: 100%; opacity: 0; z-index: 1;}
.main .img-box .img-tit4 {left: 74.6%; top: 27.4%; width: 5.75%; opacity: 0; z-index: 1;}
.main .img-box .img-card {left: 0; top: 40.6%; width: 100%; transform: translateY(-2%); opacity: 0;}
.main .img-box .img-item1 {left: 4%; top: 27.8%; width: 15.167%; opacity: 0;}
.main .img-box .img-item2 {left: -10.6%; top: 43.1%; width: 14.5%; opacity: 0;}
.main .img-box .img-item3 {left: 12.4%; top: 54.3%; width: 14.5%; opacity: 0;}
.main .img-box .img-item4 {left: 87.1%; top: 21.8%; width: 14.5%; opacity: 0;}
.main .img-box .img-item5 {left: 78.4%; top: 47.7%; width: 15.167%; opacity: 0;}
.main .img-box .img-item6 {left: 90.9%; top: 56.3%; width: 14.5%; opacity: 0; z-index: 0;}
.main .img-box .img-effect1 {left: 21.4%; top: 38.6%; width: 8.334%; opacity: 0;}
.main .img-box .img-effect2 {left: 71.95%; top: 38.6%; width: 8.334%; opacity: 0;}
.ani .main .img-box .img-tit1 {animation: topMoveAni 1s .3s ease forwards;}
.ani .main .img-box .img-tit2 {animation: topMoveAni .8s .4s ease forwards;}
.ani .main .img-box .img-tit3 {animation: opacityAni .6s 1.1s ease forwards;}
.ani .main .img-box .img-tit4 {animation: topMoveAni .8s .4s ease forwards, shakeAni 3s 1.5s linear infinite alternate;}
.ani .main .img-box .img-card {animation: opacityAni .8s .8s linear forwards, updownMonveAni 2s 1.1s ease-in infinite alternate;}
.ani .main .img-box .img-item1 {animation: opacityAni .8s .7s linear forwards, updownMonveAni2 1.6s .9s ease infinite alternate;}
.ani .main .img-box .img-item2 {animation: opacityAni .8s 1s linear forwards, updownMonveAni3 1.8s 1.2s ease infinite alternate;}
.ani .main .img-box .img-item3 {animation: opacityAni .8s 1.3s linear forwards, updownMonveAni2 1.9s 1.5s ease infinite alternate;}
.ani .main .img-box .img-item4 {animation: opacityAni .8s .8s linear forwards, updownMonveAni3 1.9s 1s ease infinite alternate;}
.ani .main .img-box .img-item5 {animation: opacityAni .8s 1.1s linear forwards, updownMonveAni2 1.7s 1.3s ease infinite alternate;}
.ani .main .img-box .img-item6 {animation: opacityAni .8s 1.4s linear forwards, updownMonveAni2 1.8s 1.6s ease infinite alternate;}
.ani .main .img-box .img-effect1 {animation: opacityAni .8s .9s linear forwards;}
.ani .main .img-box .img-effect2 {animation: opacityAni .8s 1s linear forwards;}

.s1 .card-box {position: absolute; left: 50%; top: 15.7%; width: 50%; transform: translateX(-50%); perspective: 1000px;}
.s1 .card {transition: transform 0.1s ease; transform-style: preserve-3d;}

button {display: block; padding: 0; border: 0; background: transparent; font-size: 0; cursor: pointer;}
section button {position: absolute; left: 50%; width: 80%; transform: translateX(-50%);}
.s1 .btn {bottom: 8.5%; height: 8.2%;}
.s2 .btn {height: 9.7%;}
.s2 .btn1 {bottom: 22%;}
.s2 .btn2 {bottom: 9.9%;}

footer {background: #c5d0d8;}

.btn-floating {overflow: hidden; position: absolute; left: 50%; top: 826px; width: 1160px; background: transparent; border-radius: 60px;
  z-index: 99; transform: translateX(-50%); opacity: 0; animation: opacityAni .8s 1.2s ease forwards;
box-shadow: 5px 5px 15px rgba(43,43,43,.4);}
.btn-floating.on {position: fixed; top: 39px;}
.btn-floating .btn {float: left; width: 50%; height: 100%;}
.btn-floating .btn1 {text-align: right;}
.btn-floating .btn2 {text-align: left;}
.btn-floating .btn img {max-width: 580px;}


@keyframes topMoveAni {
  0% {transform: translateY(80px); opacity: 0;}
  100% {transform: translateY(0); opacity: 1;}
}

@keyframes opacityAni {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes updownMonveAni {
  0% {
    transform: translateY(-2%);
  }
  50% {
    transform: translateY(2%);
  }
  100% {
    transform: translateY(-2%);
  }
}

@keyframes updownMonveAni2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes updownMonveAni3 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes shakeAni {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(0);
  }
  75% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0);
  }
}


@media (max-width: 1200px) {
    .main {background: #f9fafb url('../images/main_bg2.jpg') center no-repeat; background-size: 100% 100%;}
  .btn-floating {top: 90%; width: 90%;}
}