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

img {
    vertical-align: middle;
    max-width: 100%;
}

li {
    list-style: none;
}

dt {
    float: left;
}

a {
    color: #383838;
    text-decoration: none;
}

a:hover, a:active {
    color: #ee3535;
}

.header {
    /* background: #fff; */
}

.left {
    float: left;
}

h6 {
    font-size: 16px;
}

body {
    position: relative;
    min-height: 100vh;
}

div {
    overflow: hidden;
}

input, textarea, button {
    outline: none;
}

:root {
    --red: #e60012;
    --red-deep: #c1140e;
    --red-bright: #f03b2a;
    --gold: #cda65c;
    --gold-deep: #b8934a;
    --gold-pale: #d3b378;
    --gold-badge-bg: #f4eee4;
    --gold-badge-tx: #cda862;
    --rank-gold: #d29a4b;
    --index-orange: #ff6317;
    --bar-gold: #ffb517;
    --line-pink: #f3d0c8;
    --bg: #f0f0f0;
    --text: #444444;
}

body {
    font-family: "Microsoft YaHei", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

.page-wrap {
    max-width: 32.000000rem;
    margin: 0 auto;
    padding: 0.800000rem 0.400000rem;
    overflow: visible;
}

button {
    font-family: inherit;
}

.head {
    /* display: flex; */
    /* align-items: center; */
}

.ztwLogo {
    width: 160px;
    flex-shrink: 0;
}

.ztwLogo img {
    max-width: 100%;
    display: block;
}

#navarea {
    width: 1200px;
    max-width: 100%;
    margin: auto;
    padding: 0 15px;
    box-sizing: border-box;
}

#menu {
    background: #fff;
    font-size: 13px;
    overflow: hidden;
    font-family: "微软雅黑";
    padding: 10px 0;
    border-bottom: 1px #e5e5e5 dotted;
}

#menu ul {
    width: 100%;
    overflow: hidden;
    margin: auto;
    text-align: center;
    padding: 0;
}

#menu li {
    display: inline-block;
    padding: 0 26px;
    border-right: 1px #ddd dotted;
    list-style: none;
}

#menu li:last-child {
    border-right: none;
}

#menu li a {
    color: #999;
}

#menu li a:hover {
    color: #ee3535;
}

.top-bar {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 1;
}

.site-title {
    color: var(--red);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    flex-shrink: 0;
}

.site-title .sub {
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: var(--red);
}

.search-box {
    flex: 1;
    max-width: 600px;
    display: flex;
    border: 2px solid var(--red);
    border-radius: 4px;
    overflow: hidden;
    margin-left: auto;
}

.search-box input {
    flex: 1;
    border: 0;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    background: #fff;
}

.search-box button {
    background: var(--red);
    color: #fff;
    border: 0;
    padding: 0 24px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 2px;
}

.search-box button:hover {
    background: var(--red-deep);
}

/* ============================================================
   中间主要内容 · 移动版榜单响应式重排
   设计稿：PSD 第二个画板 mweb（486 × 3065）
   换算：1rem = 48.6 设计px（486px 画板等比映射到 375px 视口，
         线上 mbase.css 的 html 根字号 37.5px 保持不变，头部/底部零影响）
   季度切换 / 六个分类按钮保持原有显示效果：尺寸按 1rem = 37.5px 换算
   ============================================================ */

.board-main {
    background: url(https://www.ceramicschina.com/Content/ztw2022_img/rankbg01.png) #fff no-repeat;
    background-size: cover;
    /* border-radius: 0.213333rem; */
    /* box-shadow: 0 0.053333rem 0.373333rem rgba(0,0,0,.06); */
    padding: 1.066667rem 1.600000rem;
    overflow: visible;
    background-position: center;
    border-top: 1px #eee solid;
}

.board-hero {
    display: flex;
    gap: 1.546667rem;
    margin-bottom: 1rem;
}

.hero-left {
    /* width: 4.800000rem; */
    flex-shrink: 0;
    /* background: #fafafa; */
    position: relative;
    text-align: center;
}

.hero-left img{
}

.hero-year-wrap { position: relative; display: inline-block; }

.hero-year {
    font-size: 1.973333rem;
    line-height: 1.05;
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 0.026667rem;
    font-family: Impact, "Arial Black", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.213333rem;
}

/* ---------- 往期榜单下拉（沿用原 2027 年度下拉框样式，效果不变） ---------- */
.hero-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.266667rem;
    z-index: 210;
    overflow: visible;
    flex-direction: column;
}
.dropdown-wrap { position: relative; display: inline-flex; align-items: center; overflow: visible; }
.past-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.213333rem;
    background: none;
    color: #707070;
    font-size: 0.320000rem;
    letter-spacing: 0.026667rem;
    font-family: inherit;
    padding: 0.186667rem 0.426667rem;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}
.past-btn:focus-visible { outline: 0.053333rem solid var(--gold-deep); outline-offset: 0.053333rem; }
.caret {
    width: 0;
    height: 0;
    border-left: 0.186667rem solid var(--gold);
    border-top: 0.160000rem solid transparent;
    border-bottom: 0.160000rem solid transparent;
    display: inline-block;
    flex-shrink: 0;
    transition: transform .2s;
}
.dropdown-wrap.open .caret {transform: rotate(90deg);}
.year-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.160000rem;
    background: #fff;
    border: 0.026667rem solid #efcf90;
    box-shadow: 0 0.160000rem 0.533333rem rgba(0,0,0,.12);
    min-width: 3.466667rem;
    z-index: 200;
    display: none;
    overflow: hidden;
}
.dropdown-wrap.open .year-dropdown { display: block; }
.past-dropdown {
    left: 50%;
    transform: translateX(-50%);
}
.year-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.266667rem;
    padding: 0.266667rem 0.426667rem;
    margin: 0 0.266667rem;
    font-size: 0.373333rem;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    border-bottom: 0.026667rem var(--gold) dotted;
}
.year-opt:hover { color: var(--gold-deep); }
.dropdown-wrap .year-opt:last-child { border: none; }
.year-opt.active { color: #f31616; font-weight: 700; }
.year-opt.active .tag {
    font-size: 0.266667rem;
    color: #b8934a;
    border: 0.026667rem solid #e3d3ac;
}
.year-opt .tag {
    font-size: 0.266667rem;
    color: #bbb;
    border: 0.026667rem solid #d9d9d9;
    border-radius: 0.053333rem;
    padding: 0 0.106667rem;
    line-height: 0.400000rem;
}
.year-opt.soon { color: #bbb; cursor: not-allowed; }
.year-opt.soon:hover { background: #fff; color: #bbb; }

.hero-right {
    flex: 1;
    position: relative;
    padding-top: 0.106667rem;
    min-width: 0;
    overflow: visible;
}

.hero-badge {
    background: var(--gold-badge-bg);
    color: var(--gold-badge-tx);
    font-size: 0.320000rem;
    font-weight: 600;
    letter-spacing: 0.026667rem;
    padding: 0.186667rem 0.426667rem;
    border-radius: 0.080000rem;
    border: 1px solid #ece0c8;
    white-space: nowrap;
}

/* ---------- 榜单说明：白色框外、榜单按钮上方（按设计图） ---------- */
.board-intro {
    font-size: 0.320000rem;
    padding: 0 0.107rem;
    margin-bottom: 0.693333rem;
}
.board-intro .intro-title { margin-bottom: 0.320000rem; }

.intro-title {
    display: flex;
    align-items: center;
    gap: 0.240000rem;
    font-size: 0.4rem;
    font-weight: 700;
    color: #e60012;
    letter-spacing: 0.053333rem;
    margin-bottom: 0.533333rem;
}
.intro-title::before {
    content: "";
    width: 0.240000rem;
    height: 0.240000rem;
    background: var(--red);
    border-radius: 0.026667rem;
    flex-shrink: 0;
}
.intro-text {line-height: 1.75;text-align: justify;}
.intro-divider {
    border-top: 0.026667rem dashed #e6ddc9;
    margin: 0.373333rem 0 0.320000rem;
}
.intro-note {font-size: 0.320000rem;/* line-height: 1.9; */color: #ceba95;}

/* ---------- 季度切换：保持原有显示效果不变 ---------- */
.quarter-timeline {
    position: relative;
    display: flex;
    padding: 0 0.533333rem;
}
.quarter-timeline::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0.33rem;
    height: 1px;
    background: var(--line-pink);
}
.qt-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}
.qt-circle {
    width: 0.7rem;
    height: 0.7rem;
    line-height: 0.7rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.32rem;
    background: #fdf0ee;
    color: #e9777b;
    border: 1px solid #f6d5d1;
    position: relative;
    z-index: 2;
    transition: background .15s, color .15s, border-color .15s;
}
.qt-label {
    margin-top: 0.240000rem;
    font-size: 0.346667rem;
    color: #c5c5c5;
    letter-spacing: 0.013333rem;
    white-space: nowrap;
    line-height: 1.2;
}
.qt-item:hover .qt-circle { border-color: #f0a9a4; }
.qt-item:hover .qt-label { color: #777; }
.qt-item.active .qt-circle {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    box-shadow: 0 0.053333rem 0.160000rem rgba(230,0,18,.28);
    font-weight: bold;
}
.qt-item.active .qt-label { color: #e81919; font-weight: 700; }

/* ---------- 六个分类按钮超链接：保持原有显示效果不变 ---------- */
.cat-tabs {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 0.693333rem;
}
.cat-tab {
    flex: 1;
    height: 0.9rem;
    border: 0;
    border-radius: 0.693333rem;
    background: #fff;
    color: #666;
    font-size: 0.35rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s, box-shadow .15s;
    box-shadow: 0 0.026667rem 0.106667rem rgba(0,0,0,.05);
}
.cat-tab:hover { color: var(--red); }
.cat-tab.active {
    background: linear-gradient(90deg, #d81e06 0%, #f03b2a 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 0.080000rem 0.213333rem rgba(216,30,6,.28);
}

.cat-panel { display: none; }
.cat-panel.active { display: block; }

/* ---------- 榜单卡片：严格按设计图 rem 换算 ---------- */
.cat-banner {
    height: 1.687rem;
    border-radius: 0.165rem 0.165rem 0 0;
    background: radial-gradient(ellipse 62% 130% at 50% 118%, #f2563f 0%, #e02a1f 46%, #c1140e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.412rem;
    position: relative;
    overflow: hidden;
    background: url(https://www.ceramicschina.com/Content/ztw2022_img/rankbg02.png) top no-repeat;
    background-size: cover;
}
.cat-banner::before, .cat-banner::after {
    content: "";
    width: 0.473rem;
    height: 0.802rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}
.cat-banner::before { background-image: url(https://www.ceramicschina.com/Content/ztw2022_img/rank_left.png); }
.cat-banner::after  { background-image: url(https://www.ceramicschina.com/Content/ztw2022_img/rank_right.png); }
.cat-banner-title {
    font-size: 0.516rem;
    font-weight: 900;
    color: #fdd192;
    letter-spacing: 0.123rem;
    padding-left: 0.123rem;
    position: relative;
    z-index: 1;
    text-shadow: 0 0.021rem 0.041rem rgba(120,10,5,.35);
    white-space: nowrap;
}

.table-card {
    background: #fff;
    border-radius: 0 0 0.165rem 0.165rem;
    box-shadow: 0 0.041rem 0.206rem rgba(0,0,0,.05);
    overflow: hidden;
    padding: 0 0.267rem 0.535rem;
}

.table-scroll { overflow: visible; }

.rank-table {
    width: 100%;
    min-width: 0;
}

/* 原 colgroup 为 8%/25%/30%/28%（合计 91%），table-layout:fixed 会按 8:25:30:28
   归一化分配全部宽度；grid 的 fr 是同一套算法，故表头与行共用此声明保证对齐 */
.rank-head,
.brand-main {
    display: grid;
    grid-template-columns: 8fr 25fr 30fr 28fr;
    align-items: stretch;
}

.rank-body { margin-top: 0.04rem; }

.rank-head .th {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
    height: 1rem;
    border-bottom: 1px solid var(--line-pink);
    white-space: nowrap;
    font-size: 0.35rem;
}
.rank-head .th.th-score {
    padding-right: 0.5rem;
}
.th-score::before {
    content: "";
    width: 0.329rem;
    height: 0.247rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.103rem;
    background: url(assets/icon_index.png) center / contain no-repeat;
}

/* 旧版 .rank-table tbody td (0,1,2) 特异性高于 .rank-cell/.score-cell (0,1,0)，
   故那两条的 text-align 与左右 padding 实际未生效；这里用 (0,2,0) 复现同样压制 */
.is-open .brand-main>div{
    padding-bottom: 0.3rem;
}
.rank-table .brand-main > * {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.45rem 0;
    text-align: center;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.brand-row { transition: background .12s; border-bottom: 1px dashed #dcdcdc; }
.brand-row.row-hit { background: #fff3e8; }
.rank-body > .brand-row:last-child { border-bottom: 0; }

.rank-cell {
    text-align: left;
    padding-left: 0.309rem;
    align-items: center;       /* flex 列内让排名数字水平居中，等价旧版 td 的 text-align:center */
}
.rank-no {
    font-size: 0.447rem;
    font-family: sans-serif;
    color: #e0e0e0;
    line-height: 1;
}
.rank-no.rank-1 { color: #d29a4b; }
.rank-no.rank-2 { color: #a8afba; }
.rank-no.rank-3 { color: #b97f52; }

.brand-main .brand-box {text-align: left;}
.brand-logo {
    width: 20vw;
    max-width: 150px;
    height: 0.967rem;
    flex-shrink: 0;
}
.brand-logo {
    object-fit: contain;
    background: #fff;
    border: 0.062rem solid #f0f0f0;
    border-radius: 0.062rem;
    padding: 0.062rem;
}
.brand-name {
    color: #444;
    font-size: 0.35rem;
    line-height: 1.4;
    text-align: left;
    display: inline;
    padding-left: 1vw;
}

.score-cell { text-align: right; padding-right: 0.206rem; }
.score-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.309rem;
}
.score-main {
    display: block;
    /* width: 1.728rem; */
    flex-shrink: 0;
    text-align: center;
}
.score-num {
    display: block;
    font-size: 0.385rem;
    font-weight: 900;
    color: var(--index-orange);
    line-height: 1.1;
    font-family: sans-serif;
}
.score-bar {
    display: block;
    width: 16vw;
    max-width: 150px;
    height: 0.13rem;
    background: #fdeede;
    border-radius: 0.082rem;
    margin: 0.165rem auto 0;
    overflow: hidden;
}
.score-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #ffb517, #ffa210);
    border-radius: 0.082rem;
}
.score-toggle {
    width: 0.247rem;
    height: 0.247rem;
    padding: 0;
    border: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.score-toggle .arrow {
    width: 0;
    height: 0;
    display: block;
    border-left: 0.2rem solid var(--index-orange);
    border-top: 0.113rem solid transparent;
    border-bottom: 0.113rem solid transparent;
    transition: transform .2s;
}
.brand-row.is-open .score-toggle .arrow { transform: rotate(90deg); }

.dim-row { display: none; }
.dim-row.open { display: block; }
/* 旧版 .dim-row > td (0,1,1) 被 .rank-table tbody td (0,1,2) 压制，
   实际生效的 padding 是 0.45rem 0，故灰条上下各留 16.88px；此处如实复现 */
.dim-row {
    padding: 0rem 0.2rem 0.45rem;
}
.dim-strip {
    display: flex;
    align-items: stretch;
    width: 100%;
    padding: 0.185rem 0;
    background: #f2f2f2;
    border-radius: 0.165rem;
    cursor: pointer;
}
.dim-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.123rem;
    position: relative;
}
.dim-item + .dim-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 0.556rem;
    width: 1px;
    background: #d9d9d9;
    margin: auto;
}
.dim-label {
    color: #a6a3a2;
    line-height: 1.2;
    white-space: nowrap;
}
.dim-value {
    font-size: 0.270rem;
    color: var(--index-orange);
    line-height: 1.2;
    white-space: nowrap;
}

.empty-tip {
    display: none;
    text-align: center;
    padding: 2.400000rem 0.533333rem;
    color: #999;
}
.empty-tip svg { display: block; margin: 0 auto 0.426667rem; }
.empty-tip p { font-size: 0.400000rem; letter-spacing: 0.026667rem; }

.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,.78);
    color: #fff;
    padding: 0.373333rem 0.746667rem;
    border-radius: 0.160000rem;
    font-size: 0.400000rem;
    z-index: 9999;
    display: none;
    text-align: center;
}
.toast.show { display: block; }

@media (min-width: 480px) {
    html{font-size:42px;}
}

@media (min-width: 640px) {
    .brand-name{font-size: 0.4rem;padding-left: 0;}
    .rank-table tbody td{padding: 0.5rem 0;}
    .score-bar{width:150px;}
    .score-num{font-size: 0.42rem;}
    .rank-table thead th{height: 1.2rem;}
    .dim-row{padding: 0rem 0.42rem 0.45rem;}
    .dim-strip{padding: 0.25rem 0;}
    .dim-label{font-size: 0.34rem;}
    .dim-value{font-size: 0.34rem;}
}

@media (max-width: 720px) {
    .page-wrap { padding: 0.533333rem 0.320000rem 1.066667rem; }
    .top-bar { flex-direction: column; align-items: stretch; gap: 0.426667rem; }
    .hero-topbar{flex-direction: row;}
    .hero-left img{width: 8.4rem;max-width: 80vw;}
    .search-box { max-width: 100%; margin-left: 0; }
    .board-main {padding: 0.64rem 0.48rem 0.001rem;}
    .board-hero {flex-direction: column;gap: 3vw;margin-bottom: 0.7rem;overflow: visible;}
    .hero-left {width: 100%;}
    .hero-t2 { font-size: 0.906667rem; }
    .hero-badge {position: static;display: inline-block;}
    .quarter-timeline {padding: 0;margin: 0 auto 0.54rem;}
    .qt-label { font-size: 0.293333rem; white-space: normal; }
    .cat-tabs { gap: 0.213333rem; flex-wrap: wrap; }
    .cat-tab {
        font-size: 0.346667rem;
        letter-spacing: 0;
        height: 0.95rem;
        min-width: 30%;
    }
}