@charset "UTF-8";

*{box-sizing: border-box}
html, body {color: #333;font-size: .16rem;margin-left: auto !important;margin-right: auto !important;text-align: left;overflow-x: hidden;font-family: 'HarmonyOS_Sans','Microsoft Yahei',Arial,sans-serif;-webkit-font-smoothing:antialiased}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, p,b,section,nav{padding: 0;margin: 0;font-weight: normal;box-sizing: border-box}
i,em,b{font-style: normal;}
ol,ul {list-style: none;}
li{list-style-type: none;}
a{text-decoration: none;color:inherit;}
a:focus,div:focus{border: none;outline: none;}
img, input {border: 0;}
img{display:inline-block;padding:0;border:none;-ms-interpolation-mode:bicubic;max-width:100%;max-height:100%;vertical-align: middle;}
input,button{border: none;outline: none;color:inherit;background-color: transparent;}
.f0{font-size: 0;}
input[type='text']:focus-visible{outline: none;}
.clear:after{content: '';display: block;clear: both;}
.icon img{position: absolute;left: 0;right: 0;top: 0;bottom: 0;max-width: 100%;max-height: 100%;margin: auto;transition: all 0.3s ease-in;}
.aniI:hover .aniIco{animation: beat 0.5s 1;}
.zoomImg,.loadimg{width:100%;overflow:hidden;position:relative;display:block; }
.zoomImg:before{position:absolute;top:0;left:-90%;z-index:2;display:block;content:"";width:50%;height:100%;opacity:.25;pointer-events:none;background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);-webkit-transform:skewX(-25deg);-ms-transform:skewX(-25deg);transform:skewX(-25deg);z-index:3}
.zoomImg img{width:100%;transition:.5s;height:100%;object-fit:cover;position:relative;z-index:1;display: block}
a:hover .zoomImg:before{-webkit-animation:shine .75s;animation:shine .75s}
a:hover .zoomImg img{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}
.img_zd{position: relative;overflow: hidden;}
.img_zd .img_hezi{/*padding-top: 75%;*/background-position: 50%;background-size: cover;background-repeat: no-repeat;transition: all 0.3s ease-in;}
.img_zd>img{position: absolute;left: 0;top:0;width: 100%;height: 100%;object-fit: cover;transition: all 0.3s ease-in;}
.pic { /*padding-top: 75%;*/position: relative;overflow: hidden;}
.pic:before {content: '';position: absolute;top: 0;left: -86%;z-index: 2;display: block;width: 50%;height: 100%;-webkit-transform: skewX(-25deg);transform: skewX(-25deg);background: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.1));background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.1));}
.pic .a{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-position: 50%;background-repeat: no-repeat;background-size: cover;transition: all 0.3s ease-in;}
.bg-mask:hover .pic .a {-webkit-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}
.pic img:hover, .bg-mask:hover .cover_img .a{transform: scale(1.05);}
.bg-mask:hover .pic:before {-webkit-animation: shine .5s;animation: shine .5s;}
@keyframes shine { 100% {left: 115%;} }
.fl{float: left;}
.fr{float: right;}
.noflex{display: block !important;}
.flex{display:flex;justify-content:space-between;flex-wrap:wrap}
.flex-left{display:flex;flex-wrap:wrap}
.flex-center{display:flex;flex-wrap:wrap;justify-content: center;}
.flex-right{display:flex;flex-wrap:wrap;justify-content: flex-end;}
.flex-v-center{display:-webkit-flex;display:flex;flex-direction:column;justify-content:center}
.flex-v{display:-webkit-flex;display:flex;align-items:center;justify-content:space-between;}
.flex-v-bottom{display: -webkit-flex;display: flex;align-items: flex-end;flex-wrap: wrap;justify-content: left;}
.a-start{align-items: flex-start}
.a-center{align-items: center}
.a-end{align-items: flex-end}
.a-baseline{align-items: baseline}
.eclip {display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.l2{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.pore{position:relative}
.aline_r {position: relative;background-image: linear-gradient( #171D8E, #171D8E);background-position: 0 100%;background-size: 0 1px;background-repeat: no-repeat;transition: background-size .5s;}
.alin_r:hover .aline_r{background-size: 100% 1px; color: #171D8E}
.aline_w {position: relative;background-image: linear-gradient( #fff, #fff);background-position: 0 100%;background-size: 0 1px;background-repeat: no-repeat;transition: background-size .5s;}
.alin_w:hover .aline_w{background-size: 100% 1px; color: #fff}

html::-webkit-scrollbar {width:4px;height: 8px;background-color: #F5F5F5;}
html::-webkit-scrollbar-track {border-radius: 10px;background-color: #E2E2E2;}
html::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #333;}
.zi3{position: relative;z-index: 3}
@media screen and (max-width:1024px){  html{/* font-size: 90px!important; */}
      #app{/*opacity:0;*/overflow-y: auto;} 
     #app.show{opacity:1;}  
}
@media screen and (max-width:900px){  html{/* font-size: 85px!important; */}}
@media screen and (max-width:640px){  body{font-size: .18rem}  }
@media screen and (max-width:480px){  html{font-size: 80px!important;}}
@media screen and (max-width:375px){  html{font-size: 80px!important;}}
@media screen and (max-width:360px){  html{font-size: 70px!important;}}
.wp{width: 16rem;margin: 0 auto;max-width: 96%;}
.none{display: none;}

/*=============================公共 开始===================================*/
body{
    width: 100%;
    height: 100vh;
    position: relative;
    overflow-x: hidden;
}
header{padding: .23rem 0;position: fixed;top: 0;right: 0;left: 0;z-index: 1000;}
header .wp{max-width:calc(100% - .94rem);width: 100%;align-items: center;}
.logo{width: 2.26rem;}
.logo img{}

#openBtn {position:relative;cursor: pointer;display: flex;text-align: center;justify-content: center;align-items: center;z-index: 99;}
#openBtn .lcbody img{display: block;height: .25rem;margin-right: .09rem;}
#openBtn .lcbody{display: flex;align-items: center;justify-content: center;font-size: .2rem;line-height: 1;color: #FFFFFF;cursor: pointer}

/**/
.site-menu{position: fixed;z-index: 100000000000000;left: 0;top: 0;display: flex;flex-direction: column;width: 100%;clip-path: inset(0 0 100% 0);transition: clip-path .6s cubic-bezier(0.77, 0, 0.175, 1);visibility: hidden;opacity: 0;visibility: hidden;clip-path: none;transition: opacity 0s .92s, visibility 0s .92s;box-shadow: 0 .05rem .1rem rgba(0, 0, 0, .03);overflow: hidden;}
.site-menu-close img{display: block;width: .23rem;margin-right: .13rem}
.site-menu-close{font-size: .2rem;text-align: center;cursor:pointer;color: #fff;z-index: 10;line-height: 1;transition: all .5s;}
.site-menu-main{flex:1;display:flex;flex-direction:column;width:100%;align-items: center;height: 100vh;padding: .36rem 0 1rem;background-size: cover;backdrop-filter: blur(.1rem);background: url('../images/site-menu-bg.png') center no-repeat;background-size: 100% 100%;}
.site-menu-main{flex:auto;clip-path:inset(0 0 100% 0);transition: clip-path 1s .2s cubic-bezier(0.77, 0, 0.175, 1);}

.site-menu .top{position: relative;top: 0;right: 0;left: 0;z-index: 1;width: 100%;/* border-bottom: #e5e5e5 1px solid; */padding-bottom: .36rem;margin-bottom: .9rem;}
.site-menu .top .wp{align-items: center;width: 100%;max-width: calc(100% - .94rem);}

.site-menu .bottom{ width: 100%;flex: 1;}
.site-menu .bottom .images{position: relative;height: 100%;display: flex;align-items: center;justify-content: center;}
.site-menu .bottom .images .imgBox .img{display: block;width: 6.01rem;max-height: 100%}
.site-menu .bottom .images .imgBox{position: relative}

.site-menu .bottom .ul{position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
.site-menu .bottom .ul li{position: absolute;/*transition: all 1s ease;*/}
.site-menu .bottom .ul li>a{display: flex;align-items: center;font-size: .4rem;line-height: .5rem;background: linear-gradient(90deg,#fbfefe 0%,#d1f3f7 16%,#e1f8fa 48%,#fafefe,74%,#dcf5f8 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;gap: .15rem .28rem;white-space: nowrap}
.site-menu .bottom .ul li>a img{display: block;width: .26rem;}
.site-menu .bottom .ul li .s-link a{display: block;font-size: .2rem;line-height: .38rem;color: #abc9fa;transition: all .5s;white-space: nowrap;}
.site-menu .bottom .ul li .s-link a:hover{color: #FFFFFF}
.site-menu .bottom .ul li .s-link{margin-top: .19rem;position: relative;opacity: 0;visibility: hidden;transition: all .5s}
.site-menu .bottom .ul li:hover .s-link{opacity: 1;visibility: visible}
.site-menu .bottom .ul li:hover>a{background: linear-gradient(90deg,#cdb284 0%,#faeeca 26%,#ffffff 45%,#f6f1df,64%,#e1c9a9 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.site-menu.site-menu-is-open{opacity: 1;visibility: visible;clip-path: none;transition: opacity 0s, visibility 0s;}
.site-menu.site-menu-is-open .site-menu-main{transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1);clip-path: inset(0 0 0 0);}

@media (min-width: 1200px) {
    .site-menu .bottom .ul li:nth-child(2) .s-link{
        left: 50%;
        margin-left: 0.1rem;
        padding-left: 1.05rem;
        /* margin-top: .25rem; */
        /* display: flex; */
        /* gap: 0 .2rem; */
    }
    .site-menu .bottom .ul li:nth-child(2) .s-link:before{
        right:auto;
        left:-.08rem;
        top: -0.13rem;
        transform:rotateY(180deg)
    }
    .site-menu .bottom .ul li:nth-child(3) .s-link,
    .site-menu .bottom .ul li:nth-child(4) .s-link{
        padding-left: 1.05rem;
        /* left: 0; */
        /* width: auto; */
        margin-right: -0.45rem;
    }
    .site-menu .bottom .ul li:nth-child(3) .s-link:before,
    .site-menu .bottom .ul li:nth-child(4) .s-link:before{
        right:auto;
        left:-.08rem;
        transform:rotateY(180deg)
    }


     .site-menu  .bottom .ul li:nth-child(2) .s-link{left: 50%;position: absolute;}
  .site-menu  .bottom .ul li:nth-child(2) .s-link{left: 50%;top: auto;bottom: -.55rem;margin-left: .1rem;}
    .site-menu .bottom .ul li:nth-child(2) .s-link:before{
    bottom: .1rem;
    margin-top: .1rem;
    top: auto;
}

}

/*倒计时*/
.countdown{
    position: absolute;
    right: .47rem;
    bottom: .36rem;
    z-index: 99;
    display: none;
    padding: .28rem 0;
    background: url("../images/countdown.png") no-repeat right top/auto 100%;
}
.countdown .countTime{
    display: flex;
    align-items: center;
    font-size: .18rem;
    line-height: 1.25;
    background: linear-gradient(-32deg,#faeeca 0%,#ffffff 45%,#f5eed3 100%);
    -webkit-background-clip: text;
    font-weight: 900;
    -webkit-text-fill-color: transparent;
}
.countdown .countTime span:before{
    position: absolute;
    content: '';
    left: 50%;
    top: 50%;
    width: .3rem;
    height: .3rem;
    background: #ee6f08;
    border-radius: 50vw;
    transform: translate(-50%,-50%);
    z-index: -1;
    pointer-events: none;
}
.countdown .countTime span{
    font-weight: 500;
    position: relative;
    color: #fff;
    background: linear-gradient(-32deg,#faeeca 0%,#ffffff 45%,#f5eed3 100%);
    -webkit-background-clip: text;-webkit-text-fill-color: transparent;
}

.ar_wap {
    display: none
}
@media (min-width: 1025px) {  
    .site-menu .bottom .ul li:nth-child(1){top:11.16%;right: calc(100% + 0.51rem);}
    .site-menu .bottom .ul li:nth-child(2){left: 50%;bottom: calc(100% - 0.52rem);margin: 0 auto;transform: translateX(-50%) !important;}
    .site-menu .bottom .ul li:nth-child(2)>a{flex-direction: column;}
    .site-menu .bottom .ul li:nth-child(3){top:11.16%;left: calc(100% + 0.45rem);}
    .site-menu .bottom .ul li:nth-child(3)>a{flex-direction:row-reverse}
    .site-menu .bottom .ul li:nth-child(4){top:44.96%;left: 94.7%;}
    .site-menu .bottom .ul li:nth-child(4)>a{flex-direction: row-reverse;}
    .site-menu .bottom .ul li:nth-child(5){top:80.93%;left: calc(100% + 0.5rem);}
    .site-menu .bottom .ul li:nth-child(5)>a{flex-direction: row-reverse}
    .site-menu .bottom .ul li:nth-child(6){top:80.93%;right: calc(100% + 0.4rem);}
    .site-menu .bottom .ul li:nth-child(7){top:44.96%;right: 94.76%;}

    .site-menu .bottom .ul li .s-link:before{position: absolute;content: '';right:-.07rem;top:-.18rem;width:1.04rem;height:.39rem;background: url("../images/line-1.png") no-repeat top right;background-size: 1.04rem .39rem;}
    .site-menu .bottom .ul li:nth-child(5) .s-link:before{background-image: url("../images/line-2.png");background-position: left top;right: auto;left: -.07rem}
    .site-menu .bottom .ul li:nth-child(5) .s-link{text-align: right;}
} 

/*导航按钮结束*/


@media (max-width: 1199px){
    html,body{
        overflow: hidden !important;
    }
    .ar_web{/* display: none; */}
    .ar_wap{display: block}
    .wp {
        width: 100%;
        padding: 0 15px;
        max-width: 100%;
    }
    .m_header_box{
        display: block;
    }


}

@media (max-width: 1025px){
    .m_header_box header #logo img{
        height: .4rem;
    }
    header .wp,
    .site-menu .top .wp{
        width: 100%;
        max-width:none;
    }
    .logo {
        width: 1.9rem;
    }
    .site-menu .bottom .ul li>a{
        font-size: .28rem;
        line-height: .38rem;
        gap: 0 .1rem;
    }
    .site-menu .bottom .ul li>a img{
        width: .2rem;
    }
    .site-menu .bottom .ul li .s-link{
        opacity: 1;
        visibility: visible;
        margin-top: .05rem;
    }
    .site-menu .bottom .ul li .s-link a{
        font-size: .2rem;
        line-height: 1.5;
    }
    .site-menu .bottom .ul li{
        position: relative;
       width:25%;
    }
    .site-menu .bottom .ul{
        position: static;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
       /* gap: .2rem .6rem; */
        padding: 0 15px;
        overflow-y: auto;
        scrollbar-width: none;
        align-items: flex-start;
        padding: 0 1rem;
        justify-content: center;
    }
    .site-menu .bottom .images .imgBox .img{
        display: none;
    }
    .site-menu .bottom .images .imgBox{
        height: 100%;
    }
    .site-menu .bottom .images{
        display: block;
    }
    .site-menu .bottom{
        height: calc(100% - 1.5rem);
        flex: auto;
        overflow-y: auto;
        scrollbar-width: none;
    }
    .site-menu-main{
        padding: .23rem 0;
    }
    .site-menu .top{
        margin-bottom: 0;
        padding-bottom: .4rem;
    }
}

@media (max-width: 1024px){
     
 
    .shu .site-menu-main{height: 100vw;}
    .countdown{right: 20px;bottom: 10px;}
    .site-menu .top{top: 0.1rem;}
    .site-menu .top .wp{max-width: none;}
.site-menu .bottom .images .imgBox .img{width: 3rem;}
.site-menu .bottom .ul li>a{font-size: .24rem;line-height: .3rem;}



    header{
    position: static;
}
   

}


@media (max-width: 769px){
    .m_header_box header #logo img{
        height: .4rem;
    }

}

@media (max-width: 481px) {
    .m_header_box header #logo img{
        height: .4rem;
    }
    .countdown{
    scale: .8 !important;
    right: 0rem;
    bottom: .16rem;
}
}


/**/


#browser-modal {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    color: #303233;
    position: fixed;
    z-index: 99999999;
}

#browser-modal .browser-modal-cover {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #111;
;z-index: -1
}

#browser-modal .browser-content {
    width: 700px;
    margin-top: 120px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 80px;
    padding-top: 50px;
    background-color: #fff;
    border-radius: 5px
}

#browser-modal .browser-content .browser-dpc-logo img {
    height: 42px;
    margin: 45px auto 40px
}

#browser-modal .browser-content .browser-text-title {
    text-transform: uppercase;
    font-size: 24px
}

#browser-modal .browser-content .browser-text-desc {
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 14px
}

#browser-modal .browser-content .browser-list {
    width: 600px;
    margin: 20px auto;
    height: 130px
}

#browser-modal .browser-content .browser-item {
    float: left;
    width: 150px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: auto;
    margin-right: auto
}

#browser-modal .browser-content .browser-item .iconfont {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    font-size: 80px;
    line-height: 80px;
    margin-bottom: 10px;
}

#browser-modal .browser-content .browser-item .iconchrome {
    background: url() no-repeat 0 0
}

#browser-modal .browser-content .browser-item .iconfirefox {
    background: url() no-repeat 0 -100px
}

#browser-modal .browser-content .browser-item .iconopera {
    background: url() no-repeat 0 -200px
}

#browser-modal .browser-content .browser-item .iconEdge {
    background: url() no-repeat 0 -300px
}

#browser-modal .browser-content .browser-item a {
    cursor: pointer;
    display: block
}

#browser-modal .browser-content .browser-item a img {
    display: block;
    margin: 0 auto;
    max-width: 100px;
    width: 100px;
    height: 100px
}

#browser-modal .browser-content .browser-item a h4 {
    text-align: center;
    margin-top: 20px;
    font-size: 18px;
    font-weight: 700
}

@keyframes o-upfade-top {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes o-upfade-right {
    0% {
        opacity: 0;
        right: 100%;
    }

    100% {
        opacity: 1;
        right: 0;
    }
}

@keyframes o-rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes beat{from,to{-webkit-transform:scale(1,1);transform:scale(1,1)}
    25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}
    50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}
    75%{-webkit-transform:scale(.95,1.05);transform:scale(.95,1.05)}
    from,to{-webkit-transform:scale(1,1);transform:scale(1,1)}
    25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}
    50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}
    75%{-webkit-transform:scale(.95,1.05);transform:scale(.95,1.05)}
}

@keyframes zoomAndFade {
    0% {
        transform: scale3d(1,1,1);
        opacity: 0.5;
    }
    100% {
        transform: scale3d(1.4,1.4,1);
        opacity: 0;
    }
}
@keyframes zoomAndFades {
    0% {
        transform: scale3d(1,1,1);
        opacity: 0.5;
    }
    100% {
        transform: scale3d(1.5,1.5,1);
        opacity: 0;
    }
}

@keyframes bb {
    0% {
        transform: translate(-50%,0);
        opacity: 0;
    }

    20% {
        transform: translate(-50%,3px);
        opacity: 1;
    }

    80% {
        transform: translate(-50%,10px);
        opacity: 1;
    }

    90% {
        transform: translate(-50%,10px);
        opacity: 0;
    }

    100% {
        transform: translate(-50%,10px);
        opacity: 0;
    }
}

/*html{font-size: 100px !important;}*/