/* 优选导航 - 前台样式 */
*{box-sizing:border-box}
body{margin:0;font-size:14px;color:#555;background:#f4f8fb;overflow-x:hidden;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
a{text-decoration:none;color:#555}
a:hover{text-decoration:none;font-weight:bold}
ul{list-style:none;margin:0;padding:0}
::-webkit-scrollbar{width:8px;height:8px;border-radius:4px}
::-webkit-scrollbar-track{background:#eee}
::-webkit-scrollbar-thumb{background:#ddd;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#ccc}

/* 全屏背景图 + 底部渐隐 */
.banner-video{position:absolute;width:100%;overflow:hidden;left:0;top:0;height:100vh;z-index:0}
.banner-video img{object-fit:cover;width:100%;height:100vh;display:block}
.bottom-cover{width:100%;height:50%;position:absolute;bottom:-1px;left:0;z-index:10;
    background-image:linear-gradient(rgba(255,255,255,0) 0%,rgb(244 248 251/.6) 50%,rgb(244 248 251) 100%)}

/* 顶部:左上角指南针装饰 + 右上角实时时钟 */
.compass{position:fixed;top:38px;left:16px;width:28px;height:28px;z-index:1000}
.clock-box{position:fixed;top:8px;right:16px;z-index:10000;text-align:center}
#show_date{text-align:center;font-size:16px;color:#fff;font-weight:bold;margin:10px}
#show_time{font-family:Consolas,"Courier New",monospace;text-align:center;font-weight:bold;
    font-size:30px;color:#fff;text-shadow:1px 1px 2px #000}

/* 主容器 */
.container{max-width:1140px;margin:10vh auto 0;padding:0 15px;position:relative;z-index:100}

/* 欢迎标题区 */
.welcome-hero{text-align:center;padding:16px 20px 14px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.welcome-hero h1{margin:0;font-size:42px;font-weight:700;letter-spacing:4px}
.welcome-hero p{margin:6px 0 0;font-size:18px;letter-spacing:6px}
.welcome-hero .site-subtitle{color:#ef7f8f;letter-spacing:2px}

/* 公告轮播跑马灯 */
.announcement-bar{display:block;width:100%;height:30px;margin:0 0 24px;padding:0;overflow:hidden;
    border:1px solid rgba(255,255,255,.78);border-radius:7px;background:rgba(255,255,255,.58);
    box-shadow:0 3px 12px rgba(42,73,104,.07),inset 0 1px 0 rgba(255,255,255,.82);backdrop-filter:blur(12px)}
.announcement-window{width:100%;height:100%;overflow:hidden;white-space:nowrap;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent)}
.announcement-track{display:flex;align-items:center;width:200%;height:100%;animation:announcement-scroll 14s linear infinite}
.announcement-track span{display:flex;flex:0 0 50%;align-items:center;justify-content:center;height:100%;
    padding:0 18px;color:#536174;font-size:13px;line-height:1;letter-spacing:.3px;transform:translateY(2px)}
.announcement-bar:hover .announcement-track{animation-play-state:paused}
@keyframes announcement-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 卡片 */
.mylist{padding:10px 20px;margin:20px 0;border-radius:15px;background:#ffffffe6;
    box-shadow:0 .5rem .625rem #d4d4d44d;display:flex;flex-wrap:wrap;position:relative;z-index:100}
.mylist li.title{width:100%;height:35px;font-size:16px;line-height:33px;padding:0 20px 0 10px;margin:0 0 10px}
.mylist li.col-3{flex:0 0 25%;max-width:25%;padding:10px 12px;border-radius:10px;
    transition:.3s all linear;font-size:14px;overflow:hidden;text-align:center}
.mylist li.col-3 img{display:block;width:45px;height:45px;padding:8px;background:#fff;
    border:1px solid #eee;border-radius:10px;margin:0 auto;object-fit:contain}
.mylist li.col-3 span{display:-webkit-box;width:100%;height:26px;line-height:26px;text-align:center;
    font-size:13px;word-break:break-all;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.mylist li a{color:#555;display:block}
.mylist li.col-3:hover{background:#eee}
@media (min-width:992px){.mylist li.col-3{flex:0 0 110px;max-width:110px}}
@media (min-width:1200px){.mylist li.col-3{flex:0 0 132px;max-width:132px}}

/* 左侧分类快捷导航(悬停展开) */
.side-box{position:fixed;top:40px;left:0;z-index:1000}
.side-panel{width:0;overflow:hidden;background:#fff;border-radius:0 5px 5px 0;
    box-shadow:0 2px 12px 0 rgba(0,0,0,.5);transition:width .4s}
.side-box:hover .side-panel{width:150px}
.side-panel li{line-height:40px;height:40px;width:150px;position:relative;cursor:pointer}
.side-panel li a{display:block;height:100%;position:relative;z-index:9;padding-left:15px;
    width:calc(100% - 17px);color:#333;font-size:14px;border-left:2px solid #26778d;cursor:pointer;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-panel li span{display:block;position:absolute;width:0;height:100%;left:0;top:0;z-index:8;
    overflow:hidden;transition:width .5s}
.side-panel li:hover span{width:100%;box-shadow:0 2px 5px 0 rgba(0,0,0,.5)}
.side-panel li:hover a{color:#fff}
.side-panel li:nth-child(1):hover span{background:#2C73D2}
.side-panel li:nth-child(1):hover a{border-left-color:#2C73D2}
.side-panel li:nth-child(2):hover span{background:#D65DB1}
.side-panel li:nth-child(2):hover a{border-left-color:#D65DB1}
.side-panel li:nth-child(3):hover span{background:#00C9A7}
.side-panel li:nth-child(3):hover a{border-left-color:#00C9A7}
.side-panel li:nth-child(4):hover span{background:#009EFA}
.side-panel li:nth-child(4):hover a{border-left-color:#009EFA}
.side-panel li:nth-child(5):hover span{background:#FF8066}
.side-panel li:nth-child(5):hover a{border-left-color:#FF8066}
.side-panel li:nth-child(6):hover span{background:#64b5f6}
.side-panel li:nth-child(6):hover a{border-left-color:#64b5f6}
.side-panel li:nth-child(7):hover span{background:#388e3c}
.side-panel li:nth-child(7):hover a{border-left-color:#388e3c}
.side-panel li:nth-child(8):hover span{background:#2C73D2}
.side-panel li:nth-child(8):hover a{border-left-color:#2C73D2}
.side-panel li:nth-child(9):hover span{background:#D65DB1}
.side-panel li:nth-child(9):hover a{border-left-color:#D65DB1}

/* 返回顶部 */
.back-to{bottom:55px;overflow:hidden;position:fixed;right:10px;width:110px;z-index:999;display:none}
.back-to .back-top{display:block;float:right;height:50px;margin-left:10px;width:50px;border-radius:50%;
    background:#fff;border:1px solid #d8e2ec;box-shadow:0 8px 22px rgba(35,55,76,.16);
    color:#52647a;font-size:0;position:relative}
.back-to .back-top:before{content:"";position:absolute;left:18px;top:20px;width:14px;height:14px;
    border-left:3px solid currentColor;border-top:3px solid currentColor;transform:rotate(45deg)}
.back-to .back-top:hover{background:#f8fbfd;color:#0f5f9f}

/* 页脚 */
.footer{margin:48px 0 16px;color:#6c757d;text-align:center}
.footer p{margin:0}
.footer a{color:#6c757d;margin:0 4px}

/* 移动端适配 */
@media (max-width:992px){
    .clock-box{display:none}
    .compass{top:10px;right:10px;left:auto}
    .side-box{display:none}
}
@media (max-width:767px){
    .welcome-hero{padding-top:32px;padding-bottom:12px}
    .welcome-hero h1{font-size:30px;letter-spacing:2px}
    .welcome-hero p{font-size:15px;letter-spacing:4px}
    .announcement-bar{height:28px}
    .announcement-track span{font-size:12px;padding:0 12px}
    .mylist{border-radius:8px}
    .mylist li.col-3{margin:5px 0}
    .mylist li.col-3 img{width:30px;height:30px;padding:5px;border-radius:10px}
    .mylist li.col-3 span{font-size:12px}
}