@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;}
div[class^="btn"] a {display: block; width: 100%; height: 100%;}

section {position: relative; background: #fff;}
.s2 {background: #f9fafb; z-index: 1;}


.main {overflow: hidden; position: relative; width: 100vw; height: auto; background: #f2f4f6; text-align: center;}
.main h1 {position: absolute; left: 0; top: 0; width: 22.834%; z-index: 1;}
.main h2 {position: absolute; left: 0; top: 0; width: 100%; margin-top: 11.1%; transform: translateY(-80px); opacity: 0; z-index: 1;}
.main video {overflow: hidden; position: absolute; left: 0; top: 57.5%; width: 100%; height: auto; z-index: 0; object-fit: cover; transform: translateY(-50%);}
.ani .main h2 {animation: topMoveAni 1s .3s ease forwards;}

.s1 .card-box {position: absolute; right: 11%; top: 30%; width: 31.5%; perspective: 1000px;}
/* .s1 .card {transition: transform 0.1s ease; transform-style: preserve-3d;} */

.img-box img {position: absolute;}
.s1 .img-item1 {left: 38%; top: 36.4%; width: 7%;}
.s1 .img-item2 {left: 38%; top: 51%; width: 7%;}
.s2 .img-item {left: 4%; top: 21%; width: 38%;}
.s3 .img-item {right: 8%; top: 7%; width: 36%;}

button {display: block; padding: 0; border: 0; background: transparent; font-size: 0; cursor: pointer;}
.section .btn {position: absolute; text-indent: -999em;}
.s2 .btn {bottom: 12.9%; right: 22.05%; width: 25.1%; height: 8.1%;}

.footer {background: #303032;}

.btn-floating {overflow: hidden; position: absolute; left: 50%; top: 916px; width: 1100px; background: transparent; border-radius: 20px;
  z-index: 99; transform: translateX(-50%); opacity: 0; animation: opacityAni .8s .3s ease forwards; box-shadow: 8px 2px 12px rgba(156,156,156,.75);}
.btn-floating.on {position: fixed; top: 39px;}
.btn-floating .btn {position: relative; float: left; width: 50%; height: 100%;}
.btn-floating .btn1 {text-align: right;}
.btn-floating .btn2 {text-align: left;}
.btn-floating .btn>img {max-width: 550px;}
.btn-floating .img-box {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.btn-floating .img-box img {position: absolute; left: 0; top: 0; opacity: 0; animation: fadeRolling 3.8s infinite ease-in-out; transition: opacity 1s ease;}
.img-box img:nth-child(2) {animation-delay: 1.9s;}

#layer-pop {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 999;}
#layer-pop .layer-container {position: absolute; left: 50%; top: 50%; margin-top: -187px; transform: translateX(-50%);}
#layer-pop .layer-container .btn-close {display: block; position: absolute; right: 2%; bottom: 6%; width: 25%; height: 11%;}


@keyframes topMoveAni {
  0% {transform: translateY(-80px); opacity: 0;}
  100% {transform: translateY(0); opacity: 1;}
}
@keyframes opacityAni {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeRolling {
  0% { opacity: 0; }
  10% { opacity: 1; }
  40% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 0; }
}


@media (max-width: 1200px) {
  .btn-floating {top: 90%; width: 90%;}
}
@media (max-width: 1600px) {
  .btn-floating {top: 97.5%;}
}