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

html,
body{
    min-height:100%;
}

body{
    background:#f2f3f6;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Microsoft YaHei",
        Arial,
        sans-serif;
    color:#fff;
}

a{
    text-decoration:none;
}

.page{
    width:100%;
    max-width:750px;
    min-height:100vh;
    margin:0 auto;
    background:#020b20;
}

/* ==============================
   顶部横幅
   ============================== */

.banner{
    position:relative;
    width:100%;
    overflow:hidden;
    background:#121a2e;
}

.banner a{
    display:block;
    width:100%;
    height:100%;
}

.banner img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.banner.contain img{
    object-fit:contain;
}

.banner-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:180px;
    color:#60708d;
    font-size:15px;
}

/* ==============================
   公告
   ============================== */

.notice{
    padding:18px 0 55px;
    overflow:hidden;
}

.notice-scroll{
    width:100%;
    overflow:hidden;
    white-space:nowrap;
}

.notice-track{
    display:flex;
    width:max-content;
    will-change:transform;
    animation:noticeMarquee 8s linear infinite;
}

.notice-item{
    flex-shrink:0;
    padding-right:80px;
    color:#fff;
    font-size:17px;
    line-height:1.7;
    white-space:nowrap;
}

@keyframes noticeMarquee{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}


/* ==============================
   导航列表
   ============================== */

.nav-list{
    padding:0 17px 30px;
}

.nav-card{
    position:relative;

    display:flex;
    align-items:center;

    gap:19px;

    min-height:196px;

    margin-bottom:18px;

    padding:25px;

    overflow:hidden;

    border-radius:7px;

    background:#192135;
}

.nav-card::before{
    content:"";

    position:absolute;
    left:0;
    top:0;
    bottom:0;

    width:6px;
    height:auto;

    border-radius:6px 0 0 6px;

    background:#69d4c4;
}

.nav-image{
    flex:0 0 160px;

    width:160px;
    height:152px;

    overflow:hidden;

    border-radius:28px;

    background:#313a50;
}

.nav-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}

.nav-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            135deg,
            #34405b,
            #687590
        );

    font-size:54px;
}

.nav-info{
    flex:1;
    min-width:0;
}

.nav-title{
    margin-bottom:7px;

    font-size:32px;
    font-weight:400;

    line-height:1.2;
}

.nav-rating{
    margin-bottom:7px;

    font-size:19px;

    white-space:nowrap;
}

.stars{
    color:#ffd65d;

    letter-spacing:1px;
}

.score{
    margin-left:6px;

    color:#f3ff59;

    font-size:27px;
}

.review-count{
    margin-bottom:5px;

    font-size:21px;
}

.nav-description{
    color:#8290a8;

    font-size:18px;
}

.go-button{
    flex:0 0 134px;

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

    width:134px;
    height:54px;

    border-radius:5px;

    background:#72cfc2;
    color:#183b3e;

    font-size:22px;

    transition:.18s ease;
}

.go-button:hover{
    transform:
        translateY(-2px);

    background:#8bded2;
}

.empty{
    padding:60px 20px;

    text-align:center;

    color:#8c98aa;
}

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

@media(max-width:600px){

    body{
        background:#020b20;
    }

    .notice{
        padding:
            14px
            0
            35px;
    }

    .notice-item{
        font-size:14px;
        padding-right:60px;
    }

    .nav-list{
        padding:
            0
            11px
            20px;
    }

    .nav-card{
        min-height:132px;

        padding:14px;

        gap:12px;

        margin-bottom:12px;
    }

    .nav-image{
        flex-basis:92px;

        width:92px;
        height:104px;

        border-radius:18px;
    }

    .nav-placeholder{
        font-size:34px;
    }

    .nav-title{
        font-size:22px;
    }

    .nav-rating{
        font-size:13px;

        white-space:normal;
    }

    .score{
        margin-left:3px;

        font-size:17px;
    }

    .review-count{
        font-size:14px;
    }

    .nav-description{
        font-size:13px;
    }

    .go-button{
        flex-basis:80px;

        width:80px;
        height:41px;

        font-size:15px;
    }
}

@media(max-width:380px){

    .nav-card{
        padding:11px;

        gap:8px;
    }

    .nav-image{
        flex-basis:76px;

        width:76px;
        height:90px;

        border-radius:15px;
    }

    .nav-title{
        font-size:19px;
    }

    .go-button{
        flex-basis:66px;

        width:66px;
        height:37px;

        font-size:13px;
    }

    .nav-rating,
    .review-count,
    .nav-description{
        font-size:12px;
    }
}

/* ==============================
   立即前往按钮缩放动画
   ============================== */

.go-button{
    animation:goButtonScale 1.2s ease-in-out infinite;
    transform-origin:center;
}

@keyframes goButtonScale{
    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.10);
    }

    100%{
        transform:scale(1);
    }
}