/* ============================================================
   index.css — 首页专属样式
   包含：
     1. 基础规范（横排图标卡）
     2. 模版下载（首页区块）
     3. 应用部分（如启用）
     4. 系统简介（如启用）
   ============================================================ */

/* ============================================================
   1. 基础规范 —— 横排图标卡（清华风格）
   ============================================================ */
.section-base {
    padding: 1rem 0 .9rem;
}

.base-nav {
    /*display: grid;*/
    /*grid-template-columns: repeat(6, 1fr);*/
    /*gap: .3rem;*/
    margin-top: .2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.base-nav-item {
    text-align: center;
}
.base-nav-item > a {
    display: block;
    transition: transform .35s;
}
.base-nav-item > a:hover {
    transform: translateY(-.06rem);
}

/* 图标容器：小尺寸、无边框、无背景 */
.base-nav-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0 auto .3rem;
}
.base-nav-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform .5s;
}
.base-nav-item > a:hover .base-nav-img img {
    transform: scale(1.08);
}

/* 中文标题 */
.base-nav-tit {
    font-size: .18rem;
    color: #303133;
    font-weight: 600;
    letter-spacing: .04rem;
    transition: color .3s;
}
.base-nav-item > a:hover .base-nav-tit {
    color: var(--primary-color);
}

/* ============================================================
   2. 模版下载（首页区块，仅补充区块特有部分）
   ============================================================ */
/* 首页用 Swiper 横滑，样式主要依赖 common.css 的 .dl-tabs / .dl-list，
   这里补充首页区块内边距与 Swiper 容器高度控制 */
#download .swiper-download {
    padding-bottom: .1rem;
}

/* ============================================================
   应用部分 —— 横排图标卡（与基础规范风格一致）
   ============================================================ */
.apply-nav {
    /*display: grid;*/
    /*grid-template-columns: repeat(4, 1fr);*/
    /*gap: .3rem;*/
    margin-top: .2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.apply-nav-item {
    text-align: center;
}
.apply-nav-item > a {
    display: block;
    transition: transform .35s;
}
.apply-nav-item > a:hover {
    transform: translateY(-.06rem);
}

/* 图标容器：与基础规范统一尺寸 */
.apply-nav-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0 auto .3rem;
}
.apply-nav-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform .5s;
}
.apply-nav-item > a:hover .apply-nav-img img {
    transform: scale(1.08);
}

.apply-nav-tit {
    font-size: .18rem;
    color: #303133;
    font-weight: 600;
    letter-spacing: .04rem;
    transition: color .3s;
}
.apply-nav-item > a:hover .apply-nav-tit {
    color: var(--primary-color);
}