*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

}

/***********************
        背景
************************/

body{

    background:#000;
    background-image:url("https://fidjks.sjzythb.com/sstboot/images/1783431841402_Pj0RWl8LfjpP.jpg");
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}

@media(max-width:767px){
body{
    background-image:url("https://fidjks.sjzythb.com/sstboot/images/1783431835022_9iHs0C7AuOqH.jpg");
}
}

.panel{

    width:100vw;

    height:100vh;

    position:relative;

}




/***********************
        Logo 图片
************************/


.logo{
    position:absolute;
    top:7%;
    left:50%;
    transform:translateX(-50%);
    width:260px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.logo img{
    width:100%;
    height:auto;
    object-fit:contain;
}







/***********************
        线路
************************/


.list{

    position:absolute;

    top:20%;

    left:50%;

    transform:translateX(-50%);

    width:42%;


}




.row{


    width:100%;


    height:52px;


    margin:12px 0;


    display:flex;


    cursor:pointer;


}




.ping,
.domain,
.go{


    height:100%;


    display:flex;


    align-items:center;


    justify-content:center;


}




.ping{


    width:15%;


    background:#444;


    color:white;


    border-radius:6px;


}





.domain{


    flex:1;


    margin-left:8px;


    margin-right:8px;


    background:#333;


    color:white;


    border-radius:6px;


}





.go{


    width:24%;


    border:0;


    border-radius:6px;


    background:
    linear-gradient(#ffd84d,#ffb400);


    font-weight:bold;


}







/***********************
        自媒体
************************/


.social-list{


    position:absolute;


    left:50%;


    bottom:10%;


    transform:translateX(-50%);


    width:92%;


    height:90px;


    background-image:url("social-bg.png");


    background-size:cover;


    background-position:center;


    border-radius:45px;


    display:flex;


    align-items:center;


    justify-content:center;


    gap:35px;


}





.social-item{


    width:55px;


    height:55px;


    cursor:pointer;


}




.social-item img{


    width:100%;


    height:100%;


    object-fit:contain;


}








/***********************
        客服按钮
************************/


.service-btn{
    position:fixed;
    right:18px;
    top:25%;
    width:65px;
    height:65px;
    border-radius:50%;
    background:#ffd400;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    cursor:pointer;
    z-index:999;
    user-select:none;
    touch-action:none;
}


.service-btn img{
    width:75%;
    height:75%;
    object-fit:contain;

}


/***********************
        footer
************************/


.footer{


    position:absolute;


    bottom:6%;


    width:100%;


    text-align:center;


    color:white;


    text-shadow:
    0 0 5px #000;


}


/***********************
        手机
************************/


@media(max-width:767px){
.logo{
    top:20%;
    width:180px;
}
.list{
    width:100%;
    left:0;
    top:30%;
    transform:none;
    padding:0 4px;
}

.row{
    height:48px;
}

.ping{
    width:18%;
    font-size:14px;
}

.domain{
    font-size:14px;
}

.go{

    width:25%;
    font-size:14px;
}


.social-list{

    bottom:15%;
    width:96%;
    height:70px;
    border-radius:35px;
    gap:18px;
}

.social-item{
    width:42px;
    height:42px;
}

.service-btn{
    width:55px;
    height:55px;
    right:12px;
}

.footer{
    bottom:5%;
    font-size:12px;
}
}



/***********************
        下载区域
************************/


.download-area{

    width:100%;

    margin-top:24px;

    display:flex;

    justify-content:center;

    gap:40px;

}



.download-item{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.qr{

    width:120px;
    height:120px;

    background:#fff;

    padding:8px;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}


.qr canvas,
.qr img{

    width:100%!important;

    height:100%!important;

    display:block;

}

.download-btn{

    margin-top:12px;

    width:150px;

    height:40px;

    border:0;

    border-radius:20px;

    font-weight:bold;

    cursor:pointer;

}



.android{

    background:
    linear-gradient(#72e35c,#35b72a);

    color:white;

}



.ios{

    background:
    linear-gradient(#72e35c,#35b72a);

    color:white;

}



/***********************
        手机适配
************************/


@media(max-width:767px){


.download-area{

    margin-top:18px;

    gap:18px;

}

.qr{

    width:95px;

    height:95px;

    padding:7px;

}



.download-btn{

    width:120px;

    height:36px;

    font-size:12px;

}


}

/***********************
        PWA css 配置
************************/


.pwa-install{

    position:fixed;

    left:50%;

    bottom:20px;

    transform:translateX(-50%);

    width:92%;

    max-width:420px;

    background:#fff;

    border-radius:14px;

    box-shadow:0 10px 30px rgba(0,0,0,.25);

    display:none;

    align-items:center;

    gap:10px;

    padding:14px;

    z-index:99999;

    animation:slideUp .3s;

}

@keyframes slideUp{

from{

opacity:0;

transform:translate(-50%,100px);

}

to{

opacity:1;

transform:translate(-50%,0);

}

}

.pwa-install .icon{

font-size:30px;

}

.pwa-install .content{

flex:1;

}

.pwa-install .title{

font-weight:bold;

margin-bottom:4px;

}

.pwa-install .desc{

font-size:13px;

color:#666;

}

#installBtn{

background:#25a244;

color:#fff;

border:0;

padding:8px 14px;

border-radius:8px;

cursor:pointer;

}

#closeBtn{

border:0;

background:none;

font-size:22px;

color:#999;

cursor:pointer;

}




.update-box{

position:fixed;

top:20px;

left:50%;

transform:translateX(-50%);

background:#25a244;

color:#fff;

padding:12px 18px;

border-radius:10px;

display:none;

z-index:99999;

}