*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui}
body{background:#fff;color:#333}
.container-center{
    max-width:640px;
    width:100%;
    margin:0 auto;
    padding-left:20px;
    padding-right:20px;
    box-sizing:border-box;
}
.top-bar{padding:15px 0;display:flex;align-items:center;gap:10px}
.search-wrap{flex:1;position:relative}
.search-input{width:100%;border-radius:10px;border:#eee 1px solid;padding:10px 16px;font-size:15px;background:#f7f7f7;outline:none}
.top-icon{width:40px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;color:#555;text-decoration:none}
.top-icon svg{width:24px;height:24px;margin-bottom:2px}
.banner{border-radius:14px;background:#f3e9d8;overflow:hidden;margin-bottom:30px;position:relative;height:220px;display:flex;align-items:center;padding:0 30px}
.banner-text h2{font-size:34px;font-weight:bold;color:#333}
.banner-text p{color:#666;margin-top:6px}
.banner-book{position:absolute;right:20px;top:10px;width:160px}
.func-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:0;margin-bottom:30px}
.func-item{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:#444;font-size:14px}
.func-icon{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:6px;font-size:24px;color:#fff}
.func-item:nth-child(1) .func-icon{background:#f26898}
.func-item:nth-child(2) .func-icon{background:#4096ee}
.func-item:nth-child(3) .func-icon{background:#ff7b47}
.func-item:nth-child(4) .func-icon{background:#dd4444}
.func-item:nth-child(5) .func-icon{background:#38c8a8}
.recom-title{font-size:26px;font-weight:bold;margin-bottom:16px}
.vod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:30px}
.vod-card a{text-decoration:none;color:#333}
.vod-pic{width:100%;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#eee}
.vod-pic img{width:100%;height:100%;object-fit:cover}
.vod-name{font-size:15px;margin-top:6px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.vod-author{font-size:13px;color:#777;margin-top:3px}
.search-wrap {
    position: relative;
}
.search-wrap::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height:16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    pointer-events: none;
}
.search-input {
    padding-left: 40px;
}





.hot-search-wrap{
    margin:20px 0 30px;
}
.hot-title{
    font-size:16px;
    color:#333;
    margin-bottom:12px;
    font-weight:bold;
}
.hot-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.hot-tag{
    padding:6px 12px;
    background:#f5f5f5;
    border-radius:6px;
    font-size:14px;
    color:#444;
    text-decoration:none;
}
.hot-tag:hover{
    background:#e9e9e9;
}
.hot-num{
    margin-left:6px;
    font-size:12px;
    color:#999;
}