@charset "utf-8";

*{margin:0;padding:0;box-sizing:border-box;font-weight:normal;font-style:normal;font-size:100%;font-family:inherit;}
body{font-family: system-ui, sans-serif;background-color:#F9F9F9;}
ul,ol,li{list-style:none;}
a{color: rgb(0, 0, 238);text-decoration:none;}
a:hover{color: rgb(0, 0, 238);text-decoration: underline;}

.container{max-width:960px;width:100%;background:#F5FAFF;margin:0 auto;}

.banner{padding-left:8px;font-size:48px;font-weight:900;background:#0F7884}
.banner a{color:#FFFFFF;text-decoration:none;}

.menu{padding:8px;background:#F1F7FC;border-bottom:1px solid #E3E3E3;}
.menu a:hover{text-decoration: underline;}

.main{padding:32px;}
.main h1{color:#363737;text-align:center;font-size:32px;font-weight:800;line-height:2;}
.main .update{text-align: center;font-size: 14px;color: #999;margin-bottom: 32px;}
.main .introduce{text-align: center;font-size: 14px;color: #999;margin-bottom: 32px;}


/************************************************/
.number-segment{width:100%;}
.number-segment-section{margin:32px 0;}
.number-segment-title{padding-bottom:12px;margin-bottom:20px;border-bottom:1px solid #e5e7eb;}
.number-segment-title h2{font-size:24px;font-weight:bold;color:#1f2937;margin:0;}
.number-segment .card-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;}
.number-segment .card-grid .card-item{cursor:pointer;background-color:rgb(241,245,249);}
.number-segment .card-grid .card-item:hover{border-color:rgb(202,213,226);}
.number-segment .card-grid .card-item a{display:block;padding:8px 6px;text-align:center;text-decoration:none;color:#333;}
.number-segment .card-grid .card-item a:hover{background-color:#f0f0f0;}
/************************************************/

.footer{color:#999;font-size:14px;padding-bottom:16px;}
.footer ul{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:16px;padding-bottom:16px;border-bottom:solid 1px #DDD;}
.footer ul li{line-height:14px;}
.footer ul li:not(:last-child)::after{content:"·";margin:0 4px;}
.footer ul li a{padding:8px 8px;color:#999;}
.footer ul li a:hover{color:#999;}
.footer p{text-align:center;font-size:14px;line-height:28px;}
.footer p a{color:#999;}
.footer p a:hover{color:#999;}
/************************************************/

/* 移动端：表格转为卡片布局，解决重叠 */
@media (max-width:768px){
    .main{padding:16px;}
    .number-segment .card-grid{grid-template-columns:repeat(3,1fr);}
}