﻿@charset "UTF-8";
*{margin: 0;padding: 0;}
a{text-decoration: none;color: #333;}
img { border: 0;}
#body { overflow: hidden; background: #F6F6F6; clear: both;}
.z-box-h1 {display: flex; align-items: center; }
.z-box-h{width: 1200px;margin: 0 auto;}
.z-box { width: 100%; position: relative; }
.box-top { min-width: 1200px; height: 560px; background-repeat: no-repeat; background-size: cover; }
.box-top-bg { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.box-top-bg img { width: 100%; height: 100%; }
.top-con-covers { width: 1200px; position: absolute; left: 50%; margin-left: -500px; top: 50%; margin-top: -174px; }
.bt_main_copy, .bt-seconds-copy { color: #ffffff; text-align: left;}
.bt_main_copy { height: 98px;font-size: 65px; font-weight: bold;}
.bt-seconds-copy { height: 50px; margin-top: 15px; margin-left: 50px; font-size: 24px; background: url(../images/line.png) no-repeat bottom left;}
.appdown-ios, .appdown-android { width: 200px; height: 50px;line-height: 50px;text-align: center; margin-top: 66px; border-radius: 25px; background: #fff; position: absolute; top: -30px; opacity: 0; }
.appdown-ios { top: 0px;}
.appdown-ios img, .appdown-android img{display: inline-block;vertical-align: middle;padding-right: 10px;margin-right: 10px; border-right: 2px solid #4B4B4B;}
.appdown-btn-cover>.effect-code{margin-top: 66px;margin-left:240px; position: absolute; top: -30px; opacity: 0;}
.appdown-ios:hover img, .appdown-android:hover img{border-right: 2px solid #fff;}
.banner-right{position: absolute;right: 0;top: -50px;}
.banner-right>.first{position: absolute;top: -50px;right: 240px;opacity: 0;}
.banner-right>.second{position: relative;right: 0px;top: 70px;opacity: 0;}
.wrap-bg{width: 100%;}
.wrap-bg1{height: 898px; background: url(../images/part1_bg.jpg) no-repeat center center;}
.wrap-bg2{height: 838px; background: url(../images/part2_bg.jpg) no-repeat center center;}
.wrap-bg3{height: 903px; background: url(../images/part3_bg.jpg) no-repeat center center;}
.wrap-bg4{height: 905px; background: url(../images/part4_bg.jpg) no-repeat center center;}
.wrap-bg5{height: 836px; background: url(../images/part5_bg.jpg) no-repeat center center;}
.box-bg5{text-align: right;}
.b-s-text { color: #888888; font-size: 24px; }
.l-text-div, .r-text-div { text-align: center; position: absolute; }
.l-text-div { width: 550px; left: 60px; top: 296px; text-align: left;}
.r-text-div { width: 590px; left: 710px; top: 296px; text-align: left;}
.r-text-div3,.r-text-div6 {width: 300px; left: 910px;}
.b-f-text, .b-s-text { width: 100%; position: absolute; }
.b-f-text { height: 78px; font-size: 40px; font-weight: bold; color: #202020;}
.b-s-text { height: 33px; top: 130px; line-height: 40px; color: #7C7C7C;}
.box-1 { height: 898px; }
.box-4 { height: 838px; }
.box-2 { height: 903px; }
.box-3 { height: 905px; }
.box-6 { height: 836px; }
.box-bg2>img.bg2_pic1{position: absolute; left: 475px; top: 358px; opacity: 0;}
.box-bg2>img.bg2_pic2{position: absolute; left: 130px; top: 120px; opacity: 0;}
.box-bg2>img.bg2_pic3{position: absolute; left: -30px; top: 470px; opacity: 0;}
.box-bg4>img.bg4_pic1{position: absolute; right: 150px;top: 80px; opacity: 0;}
.box-bg4>img.bg4_pic2{position: absolute; right: 524px; top: 328px; opacity: 0;}
.box-bg4>img.bg4_pic3{position: absolute; right: 38px; top: 125px; opacity: 0;}
.box-bg5>img.bg5_pic1{position: absolute; top: 90px;right: 237px; opacity: 0;}
.box-bg5>img.bg5_pic2{position: absolute; top: 345px;right: 324px; opacity: 0;}
.box-bg5>img.bg5_pic3{position: absolute; top: 498px;right: 324px; opacity: 0;}
.box-bg5>img.bg5_pic4{position: absolute; top: 290px;right: -20px; opacity: 0;}
.b-c-text, .b-m-text, .b-small-text { width: 100%; background-repeat: no-repeat; background-position: center; position: absolute; opacity: 0; }
.b5-f-text, .b5-s-text, .xz-logo { opacity: 0; }
.rotate-img-cover { position: absolute; top: 100px; left: 100px;}
.rotate-img { position: absolute; opacity: 0;}
.rotate-img1{ left: -65px;}
.rotate-img2{top: -15px; left: -15px;}
.rotate-img3{top: 468px; left: 86px;}
.bt_main_copy, .bt-seconds-copy, .appdown-btn-cover { width: 100%; position: absolute; box-sizing: border-box; }
.bt_main_copy { top: -50px; opacity: 0; }
.bt-seconds-copy { top: 42px; opacity: 0; }
.appdown-btn-cover { top: 140px; }
.effect-ios, .effect-android, .effect-time { transition: 0.4s ease-in background; }
.effect-code { top: 50px; opacity: 0; }
.effect-code:hover .downapp-code { /* display: block; */ transform: scale(1); opacity: 1; }
.effect-ios:hover { background: #00d6a3; color:#fff; url(img/b-iphone.svg); }
.effect-android:hover { background: #00d6a3; color:#fff; url(img/b-android.svg); }
.b-text-1, .b-text-2, .b-text-3, .b-text-4,.b-text-6 { top: -30px; opacity: 0; padding-top: 60px;}
.b-s-text-1, .b-s-text-2, .b-s-text-3, .b-s-text-4, .b-s-text-6 { top: 50px; opacity: 0; }
.b-f-text {background: url(../images/part1_icon.png) no-repeat;}
.b-text-4 {background: url(../images/part2_icon.png) no-repeat;}
.b-text-2 {background: url(../images/part3_icon.png) no-repeat;}
.b-text-3 {background: url(../images/part4_icon.png) no-repeat;}
.b-text-6 {background: url(../images/part5_icon.png) no-repeat;}
.bg6_pic1{position: absolute; top: 0px;left: 190px; opacity: 0;}
.bg6_pic2{position: absolute; top: 552px;left: 40px; opacity: 0;}
.bg6_pic3{position: absolute; top: 248px;left: 530px; opacity: 0;}
.rotate-img-box { opacity: 1; transition: 0.5s cubic-bezier(0.42, 0, 0.36, 1.15); }
