/* =========================================================
   TOPREF鼎裁体育（中国）
   HOMEPAGE V5
   Corporate Sports Design
   ========================================================= */


/* =========================================================
   BASIC
   ========================================================= */

.home-container {
    width: min(1400px, calc(100% - 96px));
    margin: 0 auto;
}


.home-two-column {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 80px;
}


.home-section-label {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.home-section-label strong {
    color: #e21b23;
    font-size: 13px;
    font-weight: 750;
}


.home-section-label span {
    color: #777777;
    font-size: 13px;
    font-weight: 400;
}


/* =========================================================
   HERO
   ========================================================= */

.home-hero {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #0a0a0a;

    color: #ffffff;
}


.home-hero-inner {
    position: relative;

    min-height: 565px;

    display: flex;
    align-items: center;
}


.home-hero-content {
    position: relative;

    z-index: 5;

    width: 680px;

    padding: 75px 0;
}


.home-eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 30px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 650;
}


.home-eyebrow span {
    display: block;

    width: 42px;
    height: 4px;

    background: #e21b23;
}


.home-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(64px, 5.7vw, 88px);

    font-weight: 700;

    line-height: .98;

    letter-spacing: -.055em;
}


.home-hero-description {
    max-width: 600px;

    margin: 30px 0 0;

    color: #b5b5b5;

    font-size: 16px;

    line-height: 1.9;
}


.home-hero-actions {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-top: 34px;
}


/* BUTTON */

.home-btn {
    min-height: 48px;

    padding: 0 21px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 28px;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.home-btn-red {
    background: #e21b23;
    color: #ffffff;
}


.home-btn-red:hover {
    background: #111111;
    color: #ffffff;
}


.home-btn-outline {
    color: #ffffff;

    border: 1px solid #555555;
}


.home-btn-outline:hover {
    background: #ffffff;

    border-color: #ffffff;

    color: #111111;
}


/* HERO GRAPHIC */

.home-hero-red {
    position: absolute;

    z-index: 1;

    width: 460px;
    height: 850px;

    right: -105px;
    top: -160px;

    background: #e21b23;

    transform: rotate(23deg);
}


/* =========================================================
   TICKER
   ========================================================= */

.home-ticker {
    width: 100%;

    overflow: hidden;

    background: #e21b23;

    color: #ffffff;
}


.home-ticker-track {
    min-width: max-content;

    height: 44px;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 0 20px;

    white-space: nowrap;

    font-size: 13px;
    font-weight: 650;
}


.home-ticker-track i {
    color: #ffffff;

    font-size: 7px;

    font-style: normal;
}


/* =========================================================
   INTRO
   ========================================================= */

.home-intro {
    padding: 105px 0 115px;

    background: #ffffff;
}


.home-intro-content {
    max-width: 900px;
}


.home-intro-content h2 {
    margin: 0;

    color: #111111;

    font-size: clamp(40px, 3.6vw, 54px);

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -.045em;
}


.home-intro-lead {
    margin: 28px 0 0;

    color: #222222;

    font-size: 21px;

    font-weight: 600;

    line-height: 1.6;
}


.home-intro-copy {
    max-width: 820px;

    margin: 22px 0 0;

    color: #666666;

    font-size: 15px;

    line-height: 1.95;
}


.home-text-link {
    display: inline-block;

    margin-top: 28px;

    color: #111111;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    border-bottom: 1px solid #111111;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.home-section-heading {
    display: grid;

    grid-template-columns: 240px minmax(0, 1fr);

    gap: 80px;

    margin-bottom: 55px;
}


.home-section-heading h2 {
    margin: 0;

    color: #111111;

    font-size: clamp(40px, 3.7vw, 56px);

    font-weight: 700;

    line-height: 1.13;

    letter-spacing: -.045em;
}


/* =========================================================
   BUSINESS
   ========================================================= */

.home-business {
    padding: 105px 0 115px;

    background: #f4f4f2;
}


.home-business-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 1px;

    background: #d8d8d5;

    border: 1px solid #d8d8d5;
}


.home-business-card {
    min-height: 420px;

    padding: 28px;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    color: #111111;

    text-decoration: none;

    transition:
        background .22s ease,
        color .22s ease;
}


.home-business-card:hover {
    background: #111111;

    color: #ffffff;
}


.business-top {
    display: flex;

    justify-content: space-between;

    color: #e21b23;

    font-size: 12px;
    font-weight: 750;
}


.business-content {
    margin-top: auto;
}


.business-category {
    display: block;

    margin-bottom: 12px;

    color: #777777;

    font-size: 12px;
}


.home-business-card:hover .business-category {
    color: #999999;
}


.business-content h3 {
    margin: 0;

    font-size: 28px;

    font-weight: 680;

    line-height: 1.25;

    letter-spacing: -.035em;
}


.business-line {
    width: 100%;
    height: 3px;

    margin: 25px 0 20px;

    background: #e21b23;
}


.business-content p {
    margin: 0;

    color: #696969;

    font-size: 13px;

    line-height: 1.85;
}


.home-business-card:hover .business-content p {
    color: #b7b7b7;
}


/* =========================================================
   PRODUCTS
   ========================================================= */

.home-products {
    padding: 105px 0 115px;

    background: #0b0b0b;

    color: #ffffff;
}


.home-section-heading-dark h2 {
    color: #ffffff;
}


.home-section-heading-dark
.home-section-label span {
    color: #8a8a8a;
}


.home-product-list {
    border-top: 1px solid #343434;
}


.home-product-row {
    min-height: 112px;

    display: grid;

    grid-template-columns:
        70px
        1fr
        1fr
        40px;

    gap: 30px;

    align-items: center;

    color: #ffffff;

    text-decoration: none;

    border-bottom: 1px solid #343434;

    transition:
        padding .2s ease,
        background .2s ease;
}


.home-product-row:hover {
    padding-left: 18px;

    background: #151515;
}


.home-product-row > span {
    color: #e21b23;

    font-size: 12px;

    font-weight: 750;
}


.home-product-row h3 {
    margin: 0;

    color: #ffffff;

    font-size: 25px;

    font-weight: 620;

    letter-spacing: -.025em;
}


.home-product-row p {
    margin: 0;

    color: #888888;

    font-size: 13px;
}


.home-product-row strong {
    color: #e21b23;

    font-size: 20px;
}


.home-products-button {
    display: inline-block;

    margin-top: 36px;

    padding: 14px 20px;

    background: #e21b23;

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;
}


/* =========================================================
   RESOURCES
   ========================================================= */

.home-resources {
    padding: 110px 0;

    background: #ffffff;
}


.home-resources-grid {
    display: grid;

    grid-template-columns:
        160px
        minmax(0, 1fr)
        420px;

    gap: 70px;

    align-items: center;
}


.home-resources-content {
    max-width: 640px;
}


.home-resources-content h2 {
    margin: 0;

    color: #111111;

    font-size: clamp(40px, 3.8vw, 56px);

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -.045em;
}


.home-resources-content p {
    max-width: 590px;

    margin: 25px 0 32px;

    color: #666666;

    font-size: 15px;

    line-height: 1.95;
}


.home-resources-visual {
    position: relative;

    height: 400px;

    overflow: hidden;

    background: #0b0b0b;
}


.home-resources-visual div {
    position: absolute;

    width: 210px;
    height: 570px;

    right: -60px;
    top: -80px;

    background: #e21b23;

    transform: rotate(22deg);
}


.home-resources-visual span {
    position: absolute;

    z-index: 2;

    left: 28px;
    bottom: -45px;

    color: rgba(255,255,255,.08);

    font-size: 230px;
    font-weight: 800;

    line-height: 1;
}


/* =========================================================
   NEWS
   ========================================================= */

.home-news {
    padding: 105px 0 115px;

    background: #f4f4f2;
}


.home-news-content {
    display: grid;

    grid-template-columns:
        1.4fr
        .6fr;

    gap: 80px;

    padding-top: 48px;

    border-top: 1px solid #ccccca;
}


.home-news-tag {
    color: #e21b23;

    font-size: 12px;

    font-weight: 700;
}


.home-news-content h3 {
    max-width: 760px;

    margin: 18px 0 0;

    color: #111111;

    font-size: clamp(30px, 2.8vw, 42px);

    font-weight: 680;

    line-height: 1.3;

    letter-spacing: -.035em;
}


.home-news-description p {
    margin: 0 0 25px;

    color: #666666;

    font-size: 14px;

    line-height: 1.9;
}


.home-news-description a {
    color: #111111;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    border-bottom: 1px solid #111111;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.home-final {
    background: #e21b23;

    color: #ffffff;
}


.home-final-content {
    min-height: 370px;

    padding: 70px 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}


.home-final-content > span {
    color: #ffffff;

    font-size: 12px;

    font-weight: 700;
}


.home-final h2 {
    margin: 20px 0 12px;

    color: #ffffff;

    font-size: clamp(56px, 5vw, 76px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: -.055em;
}


.home-final p {
    margin: 0 0 30px;

    color: rgba(255,255,255,.82);

    font-size: 15px;
}


.home-final-button {
    display: inline-flex;

    min-height: 48px;

    padding: 0 20px;

    align-items: center;

    background: #111111;

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .home-business-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .home-resources-grid {
        grid-template-columns:
            120px
            minmax(0, 1fr);
    }


    .home-resources-visual {
        display: none;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .home-container {
        width: calc(100% - 40px);
    }


    .home-hero-inner {
        min-height: 520px;
    }


    .home-hero-content {
        width: 82%;

        padding: 65px 0;
    }


    .home-hero h1 {
        font-size: 62px;
    }


    .home-hero-red {
        right: -330px;

        opacity: .65;
    }


    .home-two-column,
    .home-section-heading {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .home-intro,
    .home-business,
    .home-products,
    .home-resources,
    .home-news {
        padding-top: 80px;
        padding-bottom: 85px;
    }


    .home-product-row {
        grid-template-columns:
            50px
            1fr
            30px;
    }


    .home-product-row p {
        display: none;
    }


    .home-news-content {
        grid-template-columns: 1fr;

        gap: 38px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .home-container {
        width: calc(100% - 32px);
    }


    .home-hero-inner {
        min-height: 490px;
    }


    .home-hero-content {
        width: 92%;
    }


    .home-hero h1 {
        font-size: 52px;
    }


    .home-hero-description {
        font-size: 14px;
    }


    .home-hero-actions {
        align-items: flex-start;

        flex-direction: column;
    }


    .home-intro-content h2,
    .home-section-heading h2,
    .home-resources-content h2 {
        font-size: 36px;
    }


    .home-intro-lead {
        font-size: 18px;
    }


    .home-business-grid {
        grid-template-columns: 1fr;
    }


    .home-business-card {
        min-height: 340px;
    }


    .business-content h3 {
        font-size: 26px;
    }


    .home-resources-grid {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    .home-news-content h3 {
        font-size: 29px;
    }


    .home-final-content {
        min-height: 320px;
    }


    .home-final h2 {
        font-size: 52px;
    }

}