body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd{margin:0;padding:0}
*{outline:none;}
div,ul,h1,h2,h3,h4,h5,h6{box-sizing:border-box}
ul,ol,li{list-style:none}
a:hover{color:#3a73e0;text-decoration:none;}
a{text-decoration:none;}
html,body{background:#F8FAFF;min-height:100%;display:flex;flex-direction:column;min-height:100vh;}
p{text-align:justify;text-justify:inter-ideograph;}
em{font-style:inherit;}
header{background: #fff;padding:12px 24px;}
header .logo_box{all:unset;cursor:pointer;}
header .logo_box a {font-size:24px;color:#000;font-weight:bold;}
header .logo_box a:hover {text-decoration: underline;}
header .logo_box img{height:30px;width:auto;}
.box1{z-index: 1;column-gap: 60px;width:100%;height: 760px;display:flex;background-image: url("./backgroud.png");background-size: 100% 100%;background-repeat: no-repeat;flex-direction: row;align-items: flex-end;justify-content: center;}
.box1 .banner {max-width: 400px;height: auto;position: relative;margin-bottom: 120px;}
.box1 .banner::before{ content: '';background-image: url('./mark-img.svg');position: absolute; }
.box1 .info {display: flex;flex-direction: column;align-items: center;margin-bottom: 18%;}
.box1 .banner-name{font-weight:bold;font-size: 50px;color:#333;margin-top: 10px;}
.box1 .banner-tips{color:#999;font-size:14px;margin-top:10px;}
.box1 .download-description {
    font-size: .75rem;
    line-height: 1rem;
    margin-top: .5rem;
    color: #333;
    display: flex;
    gap: 0.625rem;
}
.box1 .banner-btn{background:#3D80F5;border-radius:50px;padding: 12px 80px;margin-top:25px;font-size:16px;color:#fff;display:flex;align-items:center;}
.box1 .banner-btn i.pc{width:0;height:0;}
.box1 .banner-device{font-size:14px;color:#333;line-height:22px;margin-top:8px;margin-bottom:0;display: flex;gap: 14px;}
.box1 .index-device-desc{font-size:14px;color:#333;line-height:22px;margin-top:5px;}
.index-btn_wrap{position: relative;cursor: pointer;}
.index-code-box{display:flex;align-items:flex-end!important;justify-content:center!important;width:179px!important;height:197px!important;background:url(./code-box.png);background-size:179px 197px;position:absolute;top: 70px;left: 8%;z-index:5;display:none!important;}
.index-code-box .index-code{margin-bottom:24px;}
.index-code-box .index-code img{width:136px!important;height:136px!important}

.box2{display:flex;background-color: #F5F5F5;padding:80px 0 80px 0;flex-direction: column;align-items: center;}
.box2 .lists {display: flex;max-width: 1200px;row-gap: 120px;margin-top: 60px;justify-content: center;flex-wrap: wrap;}
.box2 .lists .item {display: flex;column-gap: 115px;flex-direction: row-reverse;}
.box2 .lists .item:nth-child(2n) {flex-direction: row;}
.box2 .lists .item img {max-width: 300px;width: 100%;min-width: 0;}
.box2 .lists .item .info {display: flex;flex-direction: column;justify-content: center;row-gap: 16px;width: 31rem;}
.box2 .lists .item .info span {font-weight: bold;font-size: 40px;color: #333;}
.box2 .lists .item .info p {font-size: 20px;color: #666;}

footer{padding:24px 0 18px;background: #FFFFFF;box-shadow: 0px 0px 1px 1px rgb(193 193 193 / 50%);text-align:center;}
footer .friend-link{font-size:12px;color:#636363;line-height:20px;}
footer .friend-link a{font-size:12px;color:#636363;line-height:20px;margin-left:4px;display:inline-block;}
footer .friend-link a:hover{color:#226EF1;}
footer p{font-size:12px;color:#636363;line-height:20px;text-align: center;}
footer #beian{font-size:12px;color:#636363;line-height:20px;}
.ios-desc{display:none;}
#to_top {position: fixed;bottom: 150px;right: 270px;cursor: pointer;z-index: 1000;display: none;}
#to_top img {width: 50px;height: 50px;}

/* @media screen and (max-width:950px){
    .box1{flex-direction: column-reverse;background-image: url(./banner-m.png);row-gap: 35px;}
} */
@media screen and (max-width:810px){
    header{padding:.75rem 1rem;}
    header .logo_box { all: inherit;}
    header .logo_box img{height:2rem;object-fit:cover;}
    .box1{height: 37.9375rem;background-image: url(./backgroud-m.png);flex-direction: column;justify-content: flex-end;align-items: center;row-gap: 2rem;}
    .box1 .info {margin-bottom: 0;}
    .box1 .banner{max-width: 12rem;margin-bottom: 1rem;}
    .box1 .banner-name{ font-weight: bold;font-size: 2.5rem;line-height: unset;}
    .box1 .banner-btn{border-radius:1.5rem;padding:.75rem 2.5rem;margin-top:1rem;font-size:1rem;line-height:1.5rem;display:flex;color: #fff;}
    .box1 .banner-btn i{width:1.125rem;height:1.125rem;background:url("./android-ico.svg");background-size:1.125rem;margin-right:.375rem;}
    .box1 .banner-btn i.ios{width:1.125rem;height:1.125rem;background:url("./ios-ico.svg");background-size:1.125rem;margin-right:.375rem;}
    .box1 .banner-device{font-size:.8rem;line-height:1rem;margin-top:.5rem;}
    .box1 .index-device-desc{font-size:.8rem;line-height:1rem;margin-top:.5rem;}
    .box2{ padding: 2.5rem 0;background-color:#fff;}
    .box2 .lists {width:100%;max-width:unset;row-gap:2.5rem;margin-top: 0;flex-direction: column;}
    .box2 .lists .item {flex-direction: column-reverse;align-items: center;row-gap: 1.5rem;}
    .box2 .lists .item:nth-child(2n){flex-direction: column-reverse;}
    .box2 .lists .item img {max-width: 14.375rem;}
    .box2 .lists .item .info {row-gap: 0.5rem;align-items: center;width: 100%;padding: 0 1rem;}
    .box2 .lists .item .info span {font-size: 1.75rem;}
    .box2 .lists .item .info p {font-size: 1rem;}
    
    footer{padding:1rem 1.625rem 1rem;text-align:center;background-color: #F8FAFB;}
    footer .friend-link{font-size:.8rem;line-height:1.6rem;}
    footer .friend-link a{font-size:.8rem;line-height:1.6rem;margin-left:.25rem;}
    footer p,footer #beian{font-size:.75rem;line-height:1.6rem;}
    .ios-desc{color: #333;font-size: .8rem;margin-top: .5rem;}
    #to_top {position: fixed;bottom: 2rem;right: 1rem;cursor: pointer;z-index: 1000;display: none;}
    #to_top img {width: 2.5rem;height: 2.5rem;}
}