*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:#f5f6fa;
    font-family:Arial,"Microsoft YaHei";
    color:#333;
}


/* 顶部 */

header{

    height:70px;
    background:white;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 5%;

    box-shadow:0 2px 10px #ddd;

}


.logo{

    font-size:26px;
    font-weight:bold;
    color:#2563eb;

}


/* 搜索 */

.search form{

    display:flex;
    gap:8px;

}


.search input{

    width:260px;
    height:40px;

    border:1px solid #ddd;

    border-radius:20px;

    padding:0 15px;

}


.search button{

    height:40px;

    padding:0 25px;

    border:0;

    border-radius:20px;

    background:#2563eb;

    color:white;

}



/* ======================
 Banner
 固定高度
 宽度铺满
 图片自动缩放
 不留白
 ====================== */


.banner{

    width:100%;

    height:260px;

    margin:20px 0;

    overflow:hidden;

    border-radius:20px;

}



.banner img{

    width:100%;

    height:260px;

    display:block;

    object-fit:fill;

}





section{

    width:90%;

    margin:30px auto;

}





/* 软件列表 */


.apps{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}




.card{

    background:white;

    padding:20px;

    border-radius:18px;

    text-align:center;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}



.card img{

    width:90px;

    height:90px;

    border-radius:20px;

    object-fit:cover;

}



.card h3{

    font-size:18px;

}



.card p{

    font-size:14px;

    color:#777;

    overflow:hidden;

}



.card button{

    width:100%;

    height:40px;

    border:0;

    border-radius:20px;

    background:#16a34a;

    color:white;

}





/* 分类 */


.category{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:15px;

}



.category a{

    text-decoration:none;

}



.category span{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    color:white;

    font-weight:bold;

    border-radius:18px;

}


.category a:nth-child(1) span{
background:#3b82f6;
}


.category a:nth-child(2) span{
background:#22c55e;
}


.category a:nth-child(3) span{
background:#f97316;
}


.category a:nth-child(4) span{
background:#8b5cf6;
}


.category a:nth-child(5) span{
background:#ec4899;
}


.category a:nth-child(n+6) span{
background:#64748b;
}




/* 广告 */


.ad-box{

    background:white;

    padding:20px;

    margin:20px;

    border-radius:15px;

    text-align:center;

    color:#999;

}





/* 底部说明 */

footer{

    width:100%;

    background:#f5f6fa;

    color:#666 !important;

    padding:40px 20px;

    text-align:center;

    font-size:14px;

    line-height:28px;

}





/* 客服 */


.customer-btn{

    position:fixed;

    right:25px;

    bottom:30px;

    background:#1677ff;

    color:white;

    padding:15px 25px;

    border-radius:50px;

    text-decoration:none;

    z-index:9999;

}





/* ======================
 手机端
 ====================== */


@media(max-width:768px){


header{

    height:auto;

    padding:15px;

    flex-direction:column;

    gap:15px;

}



.logo{

    font-size:22px;

}



.search{

    width:100%;

}



.search form{

    width:100%;

}



.search input{

    width:100%;

}





.banner{

    width:100%;

    height:160px;

    margin:15px 0;

    border-radius:15px;

}



.banner img{

    width:100%;

    height:160px;

    object-fit:fill;

}





section{

    width:95%;

}





.apps{

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}





.card{

    padding:12px;

}



.card img{

    width:60px;

    height:60px;

}



.card h3{

    font-size:14px;

}



.card p{

    font-size:12px;

    height:35px;

}



.card button{

    height:35px;

    font-size:12px;

}





.category{

    grid-template-columns:repeat(3,1fr);

    gap:10px;

}



.category span{

    height:65px;

    font-size:13px;

}





.customer-btn{

    right:15px;

    bottom:20px;

    padding:12px 20px;

    font-size:14px;

}


}