@charset "gb2312";
/* ==========================================================================
   Tpl_2026 homepage visual v26
   - main red = rgb(204,0,0) = #cc0000 (iisp.com)
   - ALL border-radius: 0 (no rounded corners anywhere)
   - domain area: smaller text, search bar height 56px, right side just 域名转入 + 价格列表
   - service cards overall downsized; arrows match vhost page (42x42 / #e5e5e5 / hover red 3px radius)
   - cards hover: translateY(-6px) + bigger shadow
   - hot cards inner padding 40px
   scoped to body.home, loaded by default.html
   ========================================================================== */

.home {
    --brand:#cc0000;
    --brand-dk:#a60000;
    --brand-lt:#fce8e8;
    --ink:#222222;
    --txt:#666666;
    --mut:#888888;
    --bg:#f5f5f5;
    --fill:#f1f1f1;
    --gap:#eeeeee;
    --num:"Bahnschrift","DIN Alternate","Arial Narrow",Arial,sans-serif;
    --shadow:0 10px 26px rgba(0,0,0,.08);
    --shadow-lg:0 16px 40px rgba(0,0,0,.18);

    background-color:#fff;
    color:var(--txt);
    font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC","Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}

.home * { box-sizing:border-box; }
.home img { max-width:100%; display:block; }
.home ul, .home ol, .home li { list-style:none; }
.home p { margin:0; }
.home a { text-decoration:none; color:inherit; }
.home .sec { padding:58px 0; }

/* section title */
.home .sh {
    display:block;
    margin:0 0 32px;
    padding:0;
    text-align:center;
    border:0;
}
.home .sh-l { padding:0; }
.home .sh-l:before { display:none; }
.home .sh-en { display:none; }
.home .sh-t {
    margin:0 0 12px;
    font-size:32px;
    font-weight:400;
    letter-spacing:-.4px;
    color:var(--ink);
}
.home .sh-d {
    font-size:16px;
    line-height:1.7;
    color:var(--mut);
    text-align:center;
}

/* --------------------------------------------------------------------------
   1. banner image only
   -------------------------------------------------------------------------- */
.home .hero-banner { display:block; line-height:0; background:#0d1b33; }
.home .hero-banner img {
    display:block;
    width:100%;
    height:440px;
    object-fit:cover;
}

/* 2. domain area（原 .dom-band / .iisp-* 区块已从首页移除，相关样式一并删除，不再恢复） */

/* --------------------------------------------------------------------------
   3. product service matrix — downsized, arrow = vhost page style
   -------------------------------------------------------------------------- */
.home .sec-prod { background:var(--bg); }
.home .svc-carousel { position:relative; display:flex; align-items:center; }
.home .svc-viewport { flex:1 1 auto; overflow:hidden; margin:0 70px; }
.home .svc-track {
    display:flex;
    gap:18px;
    margin:0;
    padding:0;
    transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.home .svc-card {
    flex:0 0 calc((100% - 54px) / 4); /* 4 × gap 18px = 54px，卡片收窄给外侧箭头留位 */
    min-width:0;
    padding:0;
    margin:0;
    float:none;
    width:auto;
}
.home .svc-card > a {
    display:block;
    height:auto;
    background:#fff;
    border:0;
    border-radius:0;
    overflow:hidden;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
    transition:transform .22s ease, box-shadow .22s ease;
}
.home .svc-card > a:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }

/* image — 150px */
.home .svc-img { display:block; width:100%; height:150px; overflow:hidden; }
.home .svc-img img { display:block; width:100%; height:100%; object-fit:cover; }

/* title — 22px fw400 #222 mt 22px */
.home .svc-body { padding:0; text-align:left; }
.home .svc-name {
    display:block;
    margin:22px 0 0;
    padding:0;
    font-size:22px;
    font-weight:400;
    line-height:1.2;
    color:#222;
    text-align:center;
}

/* desc — 13px #666 margin 8/12/16, lh 20px */
.home .svc-desc {
    display:block;
    margin:8px 12px 16px;
    padding:0;
    font-size:13px;
    font-style:normal;
    line-height:20px;
    color:#666;
    text-align:center;
    min-height:40px;
}

/* button — outline-style, 12px fw400 #333, 1px solid #333, white bg, 28×82 */
.home .svc-btn {
    display:block;
    width:82px;
    height:28px;
    margin:0 auto 20px;
    line-height:28px;
    text-align:center;
    background:#fff;
    border:1px solid #333;
    border-radius:0;
    color:#333;
    font-size:12px;
    font-weight:400;
    transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.home .svc-card > a:hover .svc-btn {
    background:var(--brand);
    border-color:var(--brand);
    color:#fff;
}

/* carousel arrows — 无框大箭头，位于卡片区域外侧、垂直居中
   箭头开口视觉高度约为卡片高度的 1/3（font-size 100px ≈ 290px 卡片的 34%） */
.home .svc-arrow {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:70px;
    height:auto;
    border:0;
    border-radius:0;
    background:none;
    color:#b0b0b0;
    box-shadow:none;
    font-family:Arial,Helvetica,sans-serif;
    font-size:100px;
    font-weight:400;
    line-height:1;
    text-align:center;
    cursor:pointer;
    z-index:6;
    padding:0;
    transition:color .18s ease, opacity .18s ease;
}
.home .svc-prev { left:0; }
.home .svc-next { right:0; }
.home .svc-arrow:hover { color:var(--brand); border:0; background:none; }
.home .svc-arrow.is-disabled { opacity:.25; cursor:default; color:#ccc; }
.home .svc-arrow.is-disabled:hover { color:#ccc; border:0; background:none; }

.home .svc-dots { display:flex; justify-content:center; gap:8px; margin:24px 0 0; padding:0; }
.home .svc-dots span {
    width:10px;
    height:10px;
    border-radius:0;
    background:#d4d4d4;
    cursor:pointer;
    transition:background-color .2s ease, width .2s ease;
}
.home .svc-dots span.on { width:24px; background:var(--brand); cursor:default; }

/* --------------------------------------------------------------------------
   4. hot products — each card content has 40px inner padding
   -------------------------------------------------------------------------- */
.home .sec-hot { background:#fff; }
.home .hotList {
    display:flex;
    justify-content:center;
    margin:0 0 30px;
    padding:0;
    border:0;
}
.home .hotList li { float:none; margin:0 6px; }
.home .hotList li a {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:0 34px;
    height:50px;
    line-height:1.2;
    font-size:15px;
    font-weight:600;
    color:#5b5b5b;
    background:var(--fill);
    border:0;
    border-radius:0;
    text-decoration:none;
    transition:background-color .18s ease,color .18s ease;
}
.home .hotList li a:hover { color:var(--brand); background:#e7e3e3; }
.home .hotList li a.active { color:#fff; background:var(--brand); }
.home .hotList li a.active:after {
    content:"";
    position:absolute;
    left:50%;
    bottom:-8px;
    width:0; height:0;
    margin-left:-8px;
    border:8px solid transparent;
    border-top-color:var(--brand);
}

.home .wh-layout {
    display:flex;
    align-items:stretch;
    gap:20px;
}
.home .columnList-flag-container {
    position:relative;
    flex:0 0 240px;
    width:240px;
    min-height:500px;
    border-radius:0;
    overflow:hidden;
    background:#1a4fa0 center/cover no-repeat;
}
.home #J_columnFlag_1 { background:url(../images/west-flag-1.jpg) center/cover no-repeat; }
.home #J_columnFlag_2 { background:url(../images/west-flag-2.jpg) center/cover no-repeat; }
.home #J_columnFlag_3 { background:url(../images/west-flag-3.jpg) center/cover no-repeat; }
.home .column-flag.active-column-flag:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(10,35,80,.28),rgba(10,35,80,.55));
    pointer-events:none;
    z-index:0;
}
.home .column-flag.active-column-flag > *:not(.wh-tri) { position:relative; z-index:1; }
.home .column-flag { display:none; margin:0; }
.home .column-flag.active-column-flag {
    position:absolute;
    left:0; top:0; right:0; bottom:0;
    display:flex;
    flex-direction:column;
    height:auto;
    padding:30px 22px 20px;
}
.home .column-flag .title-en {
    margin-bottom:12px;
    font-family:var(--num);
    font-size:11px;
    font-weight:600;
    letter-spacing:3px;
    color:rgba(255,255,255,.72);
}
.home .column-flag .title-zh {
    margin:0 0 16px;
    font-size:24px;
    font-weight:800;
    line-height:1.32;
    color:#fff;
    background:none;
    border:0;
}
.home .column-flag p { font-size:13px; line-height:2; color:rgba(255,255,255,.88); }
.home .column-flag .wh-flag-link {
    display:inline-block;
    align-self:flex-start;
    margin-top:auto;
    margin-bottom:88px;
    padding:6px 14px;
    background:rgba(255,255,255,.18);
    color:#fff;
    font-size:12px;
    text-decoration:none;
    border-radius:0;
    transition:background-color .18s ease;
}
.home .column-flag .wh-flag-link:hover { background:rgba(255,255,255,.32); }
.home .wh-tri {
    position:absolute;
    left:0; bottom:0;
    z-index:2;
    width:100px;
    height:100px;
    background:linear-gradient(135deg,#ffd45a,#f6b01a);
    clip-path:polygon(0 100%,100% 100%,0 0);
    text-decoration:none;
}
.home .wh-tri span {
    position:absolute;
    left:16px; top:60px;
    transform:rotate(-43deg);
    transform-origin:left center;
    color:#5a4100;
    font-size:11px;
    font-weight:800;
    line-height:1.35;
    white-space:nowrap;
}

.home .columnList-container { flex:1 1 auto; min-width:0; }
.home .columnList { display:none; margin:0; padding:0; }
.home .westhostlist.active-columnList {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.home .westhostlist > li {
    float:none;
    display:flex;
    width:auto;
    margin:0;
    padding:0;
    border:0;
}
.home .wh-layout .webhost-li { margin:0; border:0; }
/* ====== 热销卡内容 40px 内边距 ====== */
.home .webhost-li {
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    padding:40px 24px 0;        /* 顶部和左右 40px，底部由 wh-btns 的 padding 控制 */
    margin:0;
    background:#fff;
    border:0;
    border-radius:0;
    box-shadow:var(--shadow);
    overflow:hidden;
    transition:transform .2s ease, box-shadow .22s ease;
}
.home .westhostlist li:hover .webhost-li { transform:translateY(-6px); box-shadow:var(--shadow-lg); z-index:2; }

.home .wh-ribbon {
    position:absolute;
    top:13px;
    right:-33px;
    z-index:2;
    width:116px;
    padding:5px 0;
    text-align:center;
    font-size:12px;
    font-style:normal;
    font-weight:600;
    color:#fff;
    transform:rotate(45deg);
}
.home .wh-ribbon-hot { background:var(--brand); }
.home .wh-ribbon-new { background:#2f9e44; }
.home .wh-ribbon-none { display:none; }

.home .wh-name {
    margin:0 0 14px;
    padding:0;
    text-align:center;
    font-size:18px;
    font-weight:700;
    color:var(--ink);
}
.home .wh-price {
    display:flex;
    align-items:center;        /* 原为 baseline：内容会贴方块顶部，不居中，这里修正为垂直居中 */
    justify-content:center;
    width:108px;
    height:108px;
    margin:0 auto 14px;
    background:#f2f2f2;
    border:0;
    border-radius:0;
}
.home .wh-price b {
    font-family:var(--num);
    font-size:32px;
    font-weight:700;
    line-height:1.12;
    letter-spacing:-.8px;
    color:var(--brand);
}
.home .wh-price span { margin-left:4px; font-size:12px; color:var(--mut); }

.home .wh-specs { flex:0 0 auto; margin:0; padding:0; }
.home .wh-specs li {
    display:flex;
    justify-content:space-between;
    gap:10px;
    float:none;
    width:auto;
    padding:10px 0;
    font-size:13px;
    line-height:1.6;
    color:var(--txt);
    border-bottom:1px solid var(--gap);
}
.home .wh-specs li:last-child { border-bottom:0; }
.home .wh-specs li em { flex:0 0 auto; font-style:normal; color:var(--mut); }
.home .wh-specs li span { text-align:right; }
.home .wh-more {
    display:block;
    margin:12px 0 14px;
    text-align:center;
    font-size:12px;
    color:var(--brand);
    text-decoration:none;
}
.home .wh-more:hover { color:var(--brand-dk); }
.home .wh-btns { display:flex; gap:10px; margin:auto 0 0; padding:0 0 40px; }
.home .wh-btns a {
    flex:1 1 0;
    height:40px;
    line-height:40px;
    text-align:center;
    border:0;
    border-radius:0;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:background-color .18s ease,color .18s ease;
}
.home .wh-btns .wh-buy { color:#fff; background:var(--brand); }
.home .wh-btns .wh-buy:hover { background:var(--brand-dk); }
.home .wh-btns .wh-view { color:#333; background:var(--fill); }
.home .wh-btns .wh-view:hover { background:#e7e3e3; color:var(--brand); }



/* --------------------------------------------------------------------------
   6. FAQ
   -------------------------------------------------------------------------- */
.home .sec-faq { background:#fff; }
.home .faq-wrap { margin:0; padding:0; background:transparent; border:0; box-shadow:none; }
.home .faq-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 48px;
    margin:0; padding:0;
}
.home .faq-li { margin:0; padding:0; border:0; }
.home .faq-li a {
    display:block;
    padding:14px 16px;
    font-size:13px;
    line-height:1.6;
    color:var(--ink);
    text-decoration:none;
    border-radius:0;
    transition:background-color .16s ease,color .16s ease;
}
.home .faq-li a:hover { background:#f5f5f5; color:var(--brand); }
.home .faq-catname {
    display:inline-block;
    margin-right:8px;
    padding:0 7px;
    font-style:normal;
    font-size:11px;
    line-height:18px;
    color:var(--brand);
    background:var(--brand-lt);
    border-radius:0;
    vertical-align:1px;
}
.home .faq-empty {
    padding:36px 24px;
    text-align:center;
    font-size:13px;
    color:var(--mut);
    background:var(--fill);
    border:0;
    border-radius:0;
}
.home .faq-empty a { color:var(--brand); }

/* --------------------------------------------------------------------------
   7. footer guarantees
   -------------------------------------------------------------------------- */
.home .footer-top { display:none; }
.home .footer-top-list {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    margin:0; padding:0;
}
.home .footer-top-list li { position:relative; float:none; width:auto; padding:0; border:0; }
.home .footer-top-list .section { padding:26px 20px; text-align:center; }
.home .footer-top-list .section-title { font-size:11px; font-weight:600; color:var(--ink); }
.home .footer-top-list .section-title:before { display:none; }

/* --------------------------------------------------------------------------
   8. responsive
   -------------------------------------------------------------------------- */
@media screen and (max-width:1279px) {
    .home .hero-banner img { height:360px; }
    .home .svc-img { height:140px; }
    .home .svc-viewport { margin:0 60px; }
    .home .svc-arrow { width:60px; font-size:90px; }
    .home .svc-prev { left:0; }
    .home .svc-next { right:0; }
}

@media screen and (max-width:1023px) {
    .home .sec { padding:40px 0; }
    .home .sh { margin-bottom:28px; }
    .home .sh-t { font-size:26px; }
    .home .sh-d { font-size:14px; }
    .home .hero-banner img { height:280px; }

    .home .svc-track { gap:16px; }
    .home .svc-card { flex:0 0 calc((100% - 16px) / 2); }
    .home .svc-viewport { margin:0 44px; }
    .home .svc-arrow { width:44px; font-size:72px; }
    .home .svc-prev { left:0; }
    .home .svc-next { right:0; }

    /* TAB 一行显示：三项等分，既不换行也不溢出 */
    .home .hotList { flex-wrap:nowrap; justify-content:center; gap:0; margin-bottom:22px; width:auto; }
    .home .hotList li { flex:1 1 0; min-width:0; margin:0 4px; }
    .home .hotList li:first-child { margin-left:0; }
    .home .hotList li:last-child { margin-right:0; }
    .home .hotList li a {
        padding:0 4px; height:44px; line-height:1.2; font-size:14px; font-weight:500; width:auto;
        text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
        display:flex; align-items:center; justify-content:center;
    }
    .home .hotList li a.active:after { display:none; }
    .home .wh-layout { display:block; }
    .home .columnList-flag-container { display:none; }
    .home .columnList-container { width:auto; float:none; }
    .home .column-flag.active-column-flag { position:relative; padding:24px 22px; }
    .home .column-flag .wh-flag-link { margin-top:16px; margin-bottom:0; }
    .home .wh-tri { display:none; }
    .home .westhostlist.active-columnList { grid-template-columns:repeat(2,1fr); }
    .home .webhost-li { padding:30px 20px 0; }
    .home .wh-btns { padding-bottom:30px; }


    .home .faq-list { grid-template-columns:1fr; gap:0; }
    .home .footer-top-list { grid-template-columns:repeat(2,1fr); }
}

@media screen and (max-width:639px) {
    .home .sec { padding:32px 0; }
    .home .sh { margin-bottom:22px; }
    .home .sh-t { font-size:22px; }
    .home .sh-d { font-size:13px; }
    .home .hero-banner img { height:auto; aspect-ratio:3/1; object-fit:cover; object-position:center; }

    .home .svc-card { flex:0 0 100%; }
    .home .svc-img { height:160px; }
    .home .svc-desc { min-height:0; }
    .home .svc-viewport { margin:0 34px; }
    .home .svc-arrow { width:34px; font-size:56px; }

    /* 热销产品：手机端 TAB 一行三项等分 */
    .home .hotList { margin-bottom:18px; }
    .home .hotList li { margin:0 3px; }
    .home .hotList li:first-child { margin-left:0; }
    .home .hotList li:last-child { margin-right:0; }
    .home .hotList li a { height:40px; line-height:1.2; font-size:13px; font-weight:500; padding:0 2px; width:auto; text-align:center; display:flex; align-items:center; justify-content:center; }
    .home .columnList-flag-container { margin-bottom:16px; }
    .home .column-flag.active-column-flag { padding:20px 18px; }
    .home .column-flag .title-zh { margin-bottom:12px; font-size:20px; }
    .home .column-flag p { font-size:12px; line-height:1.9; }
    .home .wh-name { margin-bottom:12px; font-size:17px; }
    .home .wh-price { width:96px; height:96px; margin-bottom:12px; }
    .home .wh-price b { font-size:28px; }
    .home .wh-specs li { padding:8px 0; font-size:12px; }
    .home .wh-btns { gap:8px; padding-bottom:26px; }
    .home .westhostlist.active-columnList { grid-template-columns:1fr; }
    .home .webhost-li { padding:28px 18px 0; }
    .home .wh-btns a { height:38px; line-height:38px; }
    .home .footer-top-list { grid-template-columns:1fr; }
}