body,
html {
    font-family: 'Microsoft YaHei', 'PingFang SC', arial, ans-serif;
    height: 100%;
    overflow: hidden;
}

.hide {
    display: none;
}

/*-----------------comment-----------------*/
.swiper-slide {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.swiper-wrapper {
    width: 100%;
    height: 100%;
}

/*-----------------overlay-----------------*/


#array {
    position: absolute;
    z-index: 999;
    -webkit-animation: start 1.5s infinite ease-in-out;
    width: 106px;
    height: 71px;
    bottom: 50px;
    left: 50%;
    margin-left: -53px;
}

.p1_overlay {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    display: none;
}

.fff_box {
    position: absolute;
}


/*-----------------loading-----------------*/
#mask {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, 0.8);
}

#mask .logo {
    width: 180px;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#mask .percent {
    width: 180px;
    position: absolute;
    left: 0;
    bottom: 100px;
    background: #fff;
    height: 2px;
    border-radius: 5px;
}

#mask .percent1 {
    width: 0px;
    position: absolute;
    left: 0;
    bottom: 99px;
    background: #c69666;
    z-index: 111;
    height: 4px;
    border-top: 1px solid #4e1801;
    border-bottom: 1px solid #4e1801;
    border-radius: 5px;
}

/*------p0-------*/
.p0 {
    background: url(../images/p0/p0_bg.jpg?v=20200416.1) no-repeat;
}

.p0_logo {
    background: url(../images/p0/p0_logo.jpg?v=20200416.1) no-repeat;
	background-size: 100%;
    width: 224px;
    height: 95px;
    position: absolute;
    right: 40px;
    top: 40px;
    opacity: 0;
}

.p0_title {
    background: url(../images/p0/p0_title.png?v=1.4) no-repeat;
    width: 624px;
    height: 271px;
    position: absolute;
    left: calc(50% - 312px);
    bottom: 200px;
    opacity: 0;
}

.p0.swiper-slide-active .p0_title {
    animation: zoomIn .5s .2s linear forwards;
}

.p0.swiper-slide-active .p0_logo {
    animation: fadeIn .5s .4s linear forwards;
}

.p0_en {
    background: url(../images/p0/p0_en.png?v=20200416.2) no-repeat;
    width: 180px;
    height: 68px;
    position: absolute;
    left: 40px;
    top: 40px;
    cursor: pointer;
}

/*-----p1------*/
.p1 canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.p1_dian_1 {
    width: 398px;
    height: 398px;
    position: absolute;
    left: 50%;
    top: calc(50% - 680px);
    /*display: none;*/
    opacity: 0;
    cursor: pointer;
}

.p1_dian_2 {
    width: 398px;
    height: 398px;
    position: absolute;
    left: calc(50% - 375px);
    top: calc(50% - 500px);
    /*display: none;*/
    opacity: 0;
    cursor: pointer;
}

.p1_dian_3 {
    width: 398px;
    height: 398px;
    position: absolute;
    left: calc(50% - 75px);
    top: calc(50% + 240px);
    /*display: none;*/
    opacity: 0;
    cursor: pointer;
}

.p1_dian_1.active1, .p1_dian_2.active1, .p1_dian_3.active1 {
    animation: bounceIn .5s linear forwards;
    opacity: 1;
}

.p1_dian_1 > .p1_dian_bg, .p1_dian_2 > .p1_dian_bg, .p1_dian_3 > .p1_dian_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/p1/p1_dian.png?v=20200416.1) no-repeat;
    opacity: 0;
}

.p1_dian_1.active1 > .p1_dian_bg, .p1_dian_2.active1 > .p1_dian_bg, .p1_dian_3.active1 > .p1_dian_bg {
    animation: fadeIn 2s .5s alternate infinite;
    opacity: 1;
}

.p1_dian_1.active > .p1_hand, .p1_dian_2.active > .p1_hand, .p1_dian_3.active > .p1_hand {
    animation: p1_hand .7s ease-in forwards;
}

.p1_dian_1 > .p1_dian_son {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/p1/p1_dian_1.png?v=20200416.1) no-repeat;
}

.p1_dian_2 > .p1_dian_son {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/p1/p1_dian_2.png?v=20200416.1) no-repeat;
}

.p1_dian_3 > .p1_dian_son {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/p1/p1_dian_3.png?v=20200416.1) no-repeat;
}

.p1_hand {
    background: url(../images/p1/p1_hand.png?v=20200416.1) no-repeat;
    width: 76px;
    height: 63px;
    position: absolute;
    right: 75px;
    bottom: 79px;
    opacity: 0;
}

/*-----over------*/
.overlay {
    background: url(../images/overpage/over_bg.jpg?v=20200416.1) no-repeat bottom;
    z-index: 9999;
    display: none;
    position: absolute;
    left: 0;
    top: 0;
}

.overlay_bg {
    background: url(../images/overpage/over_bg.png?v=20200416.1) no-repeat;
    width: 685px;
    height: 969px;
    position: absolute;
    left: calc(50% - 342px);
    top: calc(50% - 490px);
}

.overlay_pro {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

.overlay_pro1 {
    background: url(../images/overpage/over_bg_1.png?v=20200416.1) no-repeat;
}

.x {
    background: url(../images/overpage/close.png?v=20200416.1) no-repeat;
    width: 96px;
    height: 156px;
    position: absolute;
    right: 5px;
    top: -126px;
    cursor: pointer;
}

.over_1_text_1 {
    background: url(../images/overpage/over_1_text_1.png?v=20200416.1) no-repeat;
    width: 283px;
    height: 288px;
    position: absolute;
    left: 46px;
    top: 100px;
}

.over_1_text_2 {
    background: url(../images/overpage/over_1_text_2.png?v=20200416.1) no-repeat;
    width: 233px;
    height: 258px;
    position: absolute;
    left: 398px;
    top: 104px;
}

.over_1_text_3 {
    background: url(../images/overpage/over_1_text_3.png?v=20200416.1) no-repeat;
    width: 377px;
    height: 222px;
    position: absolute;
    left: 172px;
    top: 702px;
}

.over_2_text_1 {
    background: url(../images/overpage/over_2_text_1.png?v=20200416.1) no-repeat;
    width: 685px;
    height: 394px;
    position: absolute;
    left: 0;
    top: 0px;
}

.over_2_text_2 {
    background: url(../images/overpage/over_2_text_2.png?v=20200416.1) no-repeat;
    width: 685px;
    height: 281px;
    position: absolute;
    left: 0;
    top: 394px;
}

.over_2_text_3 {
    background: url(../images/overpage/over_2_text_3.png?v=20200416.1) no-repeat;
    width: 685px;
    height: 294px;
    position: absolute;
    left: 0;
    bottom: 0;
}

.overlay_pro3 {
    background: url(../images/overpage/over_3_left.png?v=20200416.1) no-repeat;
}

.over_3_text_1 {
    background: url(../images/overpage/over_3_text_1.png?v=20200416.1) no-repeat;
    width: 685px;
    height: 267px;
    position: absolute;
    left: 0;
    top: 0;
}

.over_3_text_2 {
    background: url(../images/overpage/over_3_text_2.png?v=20200416.1) no-repeat;
    width: 685px;
    height: 242px;
    position: absolute;
    left: 0;
    top: 267px;
}

.over_3_text_3 {
    background: url(../images/overpage/over_3_text_3.png?v=20200416.1) no-repeat;
    width: 685px;
    height: 252px;
    position: absolute;
    left: 0;
    bottom: 208px;
}

.over_3_text_4 {
    background: url(../images/overpage/over_3_text_4.png?v=20200416.1) no-repeat;
    width: 685px;
    height: 208px;
    position: absolute;
    left: 0;
    bottom: 0;
}

/*-----p2-----*/
.p2_text1 {
    background: url(../images/p2/p2_text1.png?v=1.4) no-repeat;
    width: 683px;
    height: 704px;
    position: absolute;
    left: calc(50% - 344px);
    top: calc(50% - 557px);
    opacity: 0;
}

.p2_text2 {
    background: url(../images/p2/p2_text2.png?v=20200416.1) no-repeat;
    width: 683px;
    height: 383px;
    position: absolute;
    left: calc(50% - 344px);
    top: calc(50% + 164px);
    opacity: 0;
}

.p2 {
    background: url(../images/p2/p2_bg.jpg?v=20200416.1) no-repeat center;

}

.p2.swiper-slide-active .p2_text1 {
    animation: zoomIn .3s .2s linear forwards;
}

.p2.swiper-slide-active .p2_text2 {
    animation: zoomIn .3s .4s linear forwards;
}

/*------p3------*/
.p3 {
    background: url(../images/overpage/over_bg.jpg?v=20200416.1) no-repeat;

}

.p3_title {
    background: url(../images/p3/p3_title.png?v=20200416.1) no-repeat;
    width: 353px;
    height: 35px;
    position: absolute;
    left: calc(50% - 176px);
    top: 100px;
}

.p3_cent {
    width: 592px;
    height: 620px;
    position: absolute;
    top: calc(50% - 520px);
    left: calc(50% - 296px);
}

.p3_cent_b {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/p3/p3_cent_b.png?v=20200416.1) no-repeat;
    opacity: 0;
}

.p3_cent_son {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/p3/p3_cent.png?v=20200416.1) no-repeat;
    opacity: 0;
}

.p3_cent_t {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/p3/p3_cent_t.png?v=20200416.1) no-repeat;
    opacity: 0;
}

.p3_cent.active .p3_cent_b {
    animation: bounceIn .5s .2s linear forwards;
}

.p3_cent.active .p3_cent_son {
    animation: zoomIn .3s .5s linear forwards;
}

.p3_cent.active .p3_cent_t {
    animation: fadeIn .3s .7s linear forwards;
}

.p3_box {
    width: 680px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: absolute;
    left: calc(50% - 340px);
    top: calc(50% + 150px);
}

.p3_box.active .p3_box_1 {
    animation: zoomIn .2s 1s linear forwards;
}

.p3_box.active .p3_box_2 {
    animation: zoomIn .2s 1.1s linear forwards;
}

.p3_box.active .p3_box_3 {
    animation: zoomIn .2s 1.2s linear forwards;
}

.p3_box.active .p3_box_4 {
    animation: zoomIn .2s 1.3s linear forwards;
}

.p3_box.active .p3_box_5 {
    animation: zoomIn .2s 1.4s linear forwards;
}

.p3_box.active .p3_box_6 {
    animation: zoomIn .2s 1.5s linear forwards;
}

.p3_box.active .p3_box_7 {
    animation: zoomIn .2s 1.6s linear forwards;
}

.p3_box.active .p3_box_8 {
    animation: zoomIn .2s 1.7s linear forwards;
}

.p3_box.active .p3_box_9 {
    animation: zoomIn .2s 1.8s linear forwards;
}


.p3_box_son {
    width: 215px;
    height: 154px;
    margin: 5px;
    opacity: 0;
}

.p3_box_1 {
    background: url(../images/p3/p3_box1.png?v=20200416.1) no-repeat;
}

.p3_box_2 {
    background: url(../images/p3/p3_box2.png?v=20200416.1) no-repeat;
}

.p3_box_3 {
    background: url(../images/p3/p3_box3.png?v=20200416.1) no-repeat;
}

.p3_box_4 {
    background: url(../images/p3/p3_box4.png?v=20200416.1) no-repeat;
}

.p3_box_5 {
    background: url(../images/p3/p3_box5.png?v=20200416.1) no-repeat;
}

.p3_box_6 {
    background: url(../images/p3/p3_box6.png?v=20200416.1) no-repeat;
}

.p3_box_7 {
    background: url(../images/p3/p3_box7.png?v=20200416.1) no-repeat;
}

.p3_box_8 {
    background: url(../images/p3/p3_box8.png?v=20200416.1) no-repeat;
}

.p3_box_9 {
    background: url(../images/p3/p3_box9.png?v=20200416.1) no-repeat;
}

/*------p4------*/
.p4 {
    background: #fff
}

.video_ti {
    font-size: 28px;
    position: absolute;
    top: 435px;
    height: 45px;
    line-height: 45px;
    width: 100%;
    text-align: center;
    color: #000;
}

#video {
    width: 640px;
    height: 360px;
    position: relative;
    z-index: 22;
    background: #000
}

.p4 .p4_b_box {
    width: 100%;
    position: relative
}

.p4 .qr_code {
    width: 750px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;

}

.p4 .btn_container {
    width: 100%;
    height: 97px;
    position: absolute;
    bottom: 0;
    background: url(../images/btn_containerbg.jpg?v=20200416.1) no-repeat;
    z-index: 11
}

.p4 .btn_container .btn_container_con {
    width: 100%;
    height: 97px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.p4 .btn_container .btn {
    position: relative;
    width: 50%
}

/*popup*/
.doc_PopupBox {
    background: url(../images/popup/popupbg.jpg?v=20200416.1) no-repeat center center;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

.docListBox {
    width: 560px;
    height: 60%;
    position: absolute;
    left: 85px;
    top: 24%;
    right: 85px;
    bottom: 15%;
}

.back_btn {
    position: absolute;
    bottom: 20px;
    width: 100px;
    height: 100px;
    right:0;
    background: url('../images/popup/back.png?v=20200416.1') no-repeat center;
}

.docList {
    opacity: 0;
}

.docList.show {
    animation: showDocList .5s linear .3s 1 alternate forwards;
}

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

.docList .bottom_item {
    display: block;
    position: relative;
    width: 550px;
    height: 110px;
    font-size: 33px;
    line-height: 112px;
    color: #fff;
    margin-bottom: 25px;
    font-weight: 700;
    background: url(../images/popup/popupBtnBg.png?v=20200416.1) no-repeat left center;
}

.po_font1 {
    background: url('../images/popup/po_font1.png?v=20200416.1') no-repeat center;
    width: 550px;
    height: 110px;
    position: absolute;
}

.po_font2 {
    background: url('../images/popup/po_font2.png?v=20200416.1') no-repeat center;
    width: 550px;
    height: 110px;
    position: absolute;
}

.docList .bottom_item .flag {
    width: 40px;
    height: 34px;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translate(0, -50%);
}

.docList .bottom_item .flag1 {
    background: url('../images/popup/flag1.png?v=20200416.1') no-repeat center;
}

.docList .bottom_item .flag2 {
    background: url('../images/popup/flag2.png?v=20200416.1') no-repeat center;
}

/*适配*/


/*适配css*/
.small1 {
    zoom: .9;
}

.small2 {
    zoom: .8;
}

.small3 {
    zoom: .75;
}

.p1{background:#091f36;}