@charset "utf-8";
html,
body {
    width: 100%;
    height: 3371px;
    overflow-x: hidden;
    min-width: 1200px;
}

html,
body {
    overflow-y: scroll;
}

/* html,body{ overflow:scroll; min-height:101%;}  */

html {
    overflow: -moz-scrollbars-vertical;
}

.bg {
    width: 100%;
    height: 3371px;
    position: absolute;
    z-index: -1;
    min-width: 1200px;
}

.bg1 {
    width: 100%;
    height: 1686px;
    background: url(./img/bg_01.jpg)no-repeat center;
}

.bg2 {
    width: 100%;
    height: 1685px;
    background: url(./img/bg_02.jpg)no-repeat center;
}

.logo {
    width: 359px;
    height: 202px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    background: url(./img/logo.png)no-repeat center;
}

/* container */

.container {
    width: 1200px;
    height: 3371px;
    margin: auto;
}

header {
    width: 100%;
    height: 1120px;
    position: relative;
    /* border-bottom: 1px solid green; */
}

.flag {
    width: 481px;
    height: 855px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -240.5px;
    background: url(./img/flag.png)no-repeat center;
}

.left-person {
    width: 851px;
    height: 1311px;
    position: absolute;
    top: 68px;
    left: -360px;
    background: url(./img/left-person.png)no-repeat center;
}

.right-person {
    width: 822px;
    height: 1108px;
    position: absolute;
    top: 44px;
    right: -357px;
    background: url(./img/right-person.png)no-repeat center;
}

.headerBox {
    width: 810px;
    height: 255px;
    position: absolute;
    z-index: 999;
    bottom: 70px;
    left: 50%;
    margin-left: -405px;
    background: url(./img/banner-bg.png)no-repeat center;
}

.headerBox>img {
    width: 152px;
    float: left;
    margin-left: 78px;
    margin-top: 46px;
    border-radius: 15px;
}

.google {
    display: inline-block;
    float: left;
    width: 221px;
    height: 74px;
    margin-top: 45px;
    margin-left: 5px;
    background: url(./img/google.png)no-repeat center;
}

.apple {
    display: inline-block;
    float: left;
    width: 221px;
    height: 74px;
    margin-top: 4px;
    margin-left: 5px;
    background: url(./img/apple.png)no-repeat center;
}

.fans {
    display: inline-block;
    float: left;
    width: 221px;
    height: 74px;
    margin-top: 45px;
    margin-left: 5px;
    background: url(./img/fans.png)no-repeat center;
}

.apk {
    display: inline-block;
    float: left;
    width: 221px;
    height: 74px;
    margin-top: 4px;
    margin-left: 5px;
    background: url(./img/apk.png)no-repeat center;
}

.video-btn {
    width: 83px;
    height: 88px;
    border-radius: 50%;
    border: none;
    background: url(./img/btnbg.png)no-repeat center;
    background-position: 3px 5px;
    position: absolute;
    right: 41px;
    top: 86px;
}

.light {
    position: absolute;
    top: 0;
    right: -361px;
}

/* section - tit1 */

.tit1Box {
    width: 100%;
    height: 1105px;
    position: relative;
}

.tit1 {
    width: 100%;
    height: 144px;
    margin: auto;
    margin-top: 80px;
    background: url(./img/tit1.png)no-repeat center;
}

.personBox {
    width: 100%;
    height: 600px;
    position: relative;
    margin-top: 45px;
}

.person {
    width: 117px;
    height: 581px;
    float: left;
    margin-left: 0;
}

.person1 {
    /* margin-left: 1.5px; */
    background: url(./img/tit1-1.png)no-repeat center;
}

.person2 {
    /* margin-left: 1.5px; */
    background: url(./img/tit1-2.png)no-repeat center;
}

.person3 {
    /* margin-left: 1.5px; */
    background: url(./img/tit1-3.png)no-repeat center;
}

.person4 {
    /* margin-left: 1.5px; */
    background: url(./img/tit1-4.png)no-repeat center;
}

.personShow {
    width: 811px;
    height: 807px;
    float: right;
    margin-top: -628px;
    margin-left: 3px;
    background: url(./img/tit1-5s.png)no-repeat center;
}

/* section-tit2 */

.tit2Box {
    width: 100%;
    height: 800px;
    position: relative;
    /* border: 1px solid blue; */
}

.tit2 {
    width: 100%;
    height: 144px;
    margin: auto;
    margin-top: 10px;
    background: url(./img/tit2.png)no-repeat center;
}

/* footer */

.bottomlogo {
    width: 406px;
    height: 124px;
    margin: auto;
    margin-top: 108px;
    background: url(./img/bottom-logo.png)no-repeat center;
}

.leftDeng {
    display: inline-block;
    width: 104px;
    height: 201px;
    bottom: -55px;
    position: absolute;
    left: 0;
    background: url(./img/leftdeng.png)no-repeat center;
}

.rightDeng {
    display: inline-block;
    width: 104px;
    height: 201px;
    position: absolute;
    right: 0;
    bottom: -55px;
    background: url(./img/rightdeng.png)no-repeat center;
}

/* video */

.videoBox {
    width: 100%;
    height: 3322px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    display: none;
}

.video {
    width: 640px;
    height: 360px;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: -999;
    margin-left: -320px;
    margin-top: -180px;
}

/* fixedbox */

.fixedBox {
    width: 180px;
    height: 408px;
    position: fixed;
    top: 15%;
    right: 0;
    z-index: 999;
    background: url(./img/right-banner.png)no-repeat center;
}

.fixedBox>img {
    width: 110px;
    position: absolute;
    top: 203px;
    left: 35.5px;
    border-radius: 20px;
}

button {
    background: none;
    outline: none;
    cursor: pointer;
    border: none;
}

.scroll {
    width: 100px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    border-bottom: 1px solid rgb(135, 115, 82);
    text-align: center;
    position: absolute;
    top: 69px;
    left: 50%;
    margin-left: -50px;
    color: rgb(85, 32, 62);
    font-size: 19px;
    cursor: pointer;
}

.scrollActive {
    font-size: 20px;
    font-weight: bold;
}

.close-btn {
    width: 40px;
    height: 40px;
    float: right;
    margin-right: 5px;
}

.goTop {
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: 0;
    left: 61px;
}

/* ?//////////////////////////// */

.imgBox {
    width: 1202px;
    height: 800px;
    margin: auto;
    margin-top: -66px;
    /* border: 1px solid red; */
}

.hideUser {
    width: 117px;
    height: 800px;
    float: left;
    /* margin: 0 1px; */
    margin-top: 120px;
}

.showUser {
    width: 726px;
    height: 800px;
    float: left;
}

.user1 {
    margin-top: 54px;
    background: url(./img/tit1-1s.png)no-repeat left;
}

.user2 {
    margin-top: 4px;
    background: url(./img/tit1-2s.png)no-repeat left;
}

.user3 {
    margin-top: 41px;
    background: url(./img/tit1-3s.png)no-repeat right;
}

.user4 {
    margin-top: 40px;
    background: url(./img/tit1-4s.png)no-repeat right;
}

.user5 {
    margin-top: 58.5px;
    background: url(./img/tit1-5s.png)no-repeat right;
}

.name1 {
    width: 117px;
    height: 800px;
    margin: 0 1px;
    background: url(./img/tit1-1.png)no-repeat center;
    float: left;
    margin-top: -34px;
}

.name2 {
    width: 117px;
    height: 800px;
    margin: 0 1px;
    margin-top: 16px;
    background: url(./img/tit1-2.png)no-repeat center;
}

.name3 {
    width: 117px;
    height: 800px;
    margin: 0 1px;
    margin-top: -21px;
    background: url(./img/tit1-3.png)no-repeat center;
}

.name4 {
    width: 117px;
    height: 800px;
    margin: 0 1px;
    margin-top: -20px;
    background: url(./img/tit1-4.png)no-repeat center;
}

.name5 {
    width: 117px;
    height: 800px;
    margin: 0 1px;
    margin-top: -39px;
    background: url(./img/tit1-5.png)no-repeat center;
}

.left-bg {
    width: 178px;
    height: 437px;
    position: absolute;
    top: 81px;
    left: 7px;
    z-index: 1;
    background: rgba(75, 25, 44, .6);
    transform: rotateY(5.8deg);
    transform-origin: 0 0;
    border-radius: 16px 0 0 16px;
}

.right-bg {
    width: 91px;
    height: 438px;
    position: absolute;
    top: 81px;
    right: 9px;
    z-index: 1;
    background: rgba(75, 25, 44, .6);
    transform: rotateY(350.1deg);
    transform-origin: 100%;
    border-radius: 0 16px 16px 0;
}

/* swiper */

/* CSS Document */

.swiperBox {
    width: 1200px;
    height: 550px;
    margin: auto;
    position: relative;
    /* border: 1px solid red; */
    overflow: hidden;
}

#certify {
    position: absolute;
    width: 1200px;
    top: 0;
    left: 50%;
    margin-left: -600px;
}

#certify .swiper-container {
    padding-bottom: 60px;
}

#certify .swiper-slide {
    width: 857px;
    height: 467px;
    background: none;
    /* box-shadow: 0 8px 30px rgb(0, 0, 0); */
}

#certify .swiper-slide img {
    display: block;
}

#certify .swiper-slide p {
    line-height: 98px;
    padding-top: 0;
    text-align: center;
    color: #636363;
    font-size: 1.1em;
    margin: 0;
}

#certify .swiper-pagination {
    width: 100%;
    bottom: -50px;
}

#certify .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
    /* border: 3px solid #fff; */
    /* background-color: #d5d5d5; */
    width: 10px;
    height: 10px;
    opacity: 1;
    cursor: pointer;
}

#certify .swiper-pagination-bullets .swiper-pagination-bullet-active {
    width: 24px;
    height: 24px;
    /* border: 3px solid #00aadc; */
    /* background-color: #fff; */
    background: url(./img/s01.png)
}

#certify .swiper-button-prev {
    left: 45px;
    width: 89px;
    height: 59px;
    background: url(./img/left-btn.png) no-repeat;
    background-position: 0 0;
    background-size: 100%;
}

#certify .swiper-button-next {
    right: 45px;
    width: 89px;
    height: 59px;
    background: url(./img/right-btn.png) no-repeat;
    background-position: 0 0;
    background-size: 100%;
}

#certify>.swiper-pagination>.swiper-pagination-bullet {
    width: 24px;
    height: 24px;
}

.videos {
    width: 71px;
    height: 74px;
    /* border: 1px solid red; */
    position: absolute;
    top: 93.5px;
    right: 45px;
    border-radius: 50%;
    overflow: hidden;
}

video {
    position: absolute;
    left: -32px;
}