@charset "utf-8";
/* =============================================================================
 * taoyi 主题 · home.css —— 首页 9 板块
 * 依据：taoyi-style-spec.md §3.5.2（原站 home.html DOM + 行号）
 *       taoyi-theme-design.md §5（板块与取数）
 * 约定：rem 基准 = 1920 视口下 1rem = 100px；装饰图用相对路径 ../images/
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 板块 1：Hero 轮播 .home_banner（L1949-1977 / L2030-2090 / L2163-2400）
 * -------------------------------------------------------------------------- */
.home_banner { position: relative; background: #0a3864; }
.home_banner .banner { position: relative; }
.home_banner .banner-swiper { width: 100%; }

.home_banner .swiper-slide { position: relative; overflow: hidden; }
.home_banner .bs_img {
    width: 100%;
    padding-bottom: 39%;                                    /* L1972 等比 2.56 */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.home_banner .b_text {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    display: flex; align-items: center;
    background: linear-gradient(90deg, rgba(10, 56, 100, .55) 0%, rgba(10, 56, 100, 0) 70%);
}
.home_banner .b_text_inner { width: 100%; }

.home_banner .b_text1_text1,
.home_banner .b_text2_text1,
.home_banner .b_text3_text1 {
    max-width: 60%;
    font-size: var(--title_fz);                             /* L2151 / L2250 / L2286 */
    font-weight: bold;
    line-height: 1.3;
    color: var(--i_color);
    font-family: var(--font-cn);
    text-transform: uppercase;
}
.home_banner .b_text1_text2,
.home_banner .b_text2_text2,
.home_banner .b_text3_text2 {
    max-width: 55%;
    margin-top: 0.2rem;
    font-size: 0.22rem;                                     /* L2219 / L2268 / L2332 */
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
}
.home_banner .b_text1_btn,
.home_banner .b_text2_btn,
.home_banner .b_text3_btn { margin-top: 0.35rem; }

/* 入场动画：由 main.js 给当前 slide 加 .is-active（不引 animate.css） */
.home_banner .b_text p,
.home_banner .b_text div {
    opacity: 0;
    transform: translateY(0.24rem);
}
.home_banner .swiper-slide.is-active .b_text > div > p:first-child { animation: tyFadeUp .7s ease forwards 0s; }
.home_banner .swiper-slide.is-active .b_text > div > p:nth-child(2) { animation: tyFadeUp .7s ease forwards .1s; }
.home_banner .swiper-slide.is-active .b_text > div > div { animation: tyFadeUp .7s ease forwards .2s; }
@keyframes tyFadeUp {
    from { opacity: 0; transform: translateY(0.24rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 分页器（L2030） */
.banner-pagination { position: absolute; left: 0; right: 0; bottom: 0.3rem; z-index: 10;
                     display: flex; justify-content: center; gap: 0.12rem; }
.banner-pagination .swiper-pagination-bullet {
    width: 0.32rem; height: 0.04rem; border-radius: 0;
    background: rgba(255, 255, 255, .5); opacity: 1; cursor: pointer;
    transition: background .3s ease;
}
.banner-pagination .swiper-pagination-bullet-active { background: var(--i_color); }

/* 左右箭头：默认藏在容器外，hover 时出现（L2033-2090） */
.home_banner .banner-button-prev,
.home_banner .banner-button-next {
    position: absolute; top: 50%; z-index: 10;
    width: 0.56rem; height: 0.56rem; margin-top: -0.28rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .9); color: var(--i_color);
    font-size: 0.3rem; cursor: pointer;
    opacity: 0; transition: opacity .4s ease, left .4s ease, right .4s ease;
}
.home_banner .banner-button-prev { left: -0.8rem; }
.home_banner .banner-button-next { right: -0.8rem; }
.home_banner:hover .banner-button-prev { opacity: 1; left: 0.3rem; }
.home_banner:hover .banner-button-next { opacity: 1; right: 0.3rem; }
.home_banner .banner-button-prev:hover,
.home_banner .banner-button-next:hover { background: var(--i_color); color: #fff; }

/* -----------------------------------------------------------------------------
 * 板块 2：Product Range（L2656-2802）
 * -------------------------------------------------------------------------- */
.home_product_range { padding: 0.6rem 0; background: var(--c_bg1); }   /* L2657-2659 */
.hprm_top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.2rem; } /* L2665-2673 */
.hprmt_left { width: 80%; }                                            /* L2675 */
.hprmt_right { width: 20%; text-align: right; }

.hprm_contain ul { display: flex; flex-wrap: wrap; gap: 0.2rem; }      /* L2690-2698 */
.hprm_contain ul li { width: calc((100% - 0.4rem) / 3); background: #fff; }  /* L2701 */
.hprm_contain ul li > a { display: block; }
.hprmc_img { position: relative; display: block; background: #fff; overflow: hidden; }
.hprmc_img::before { content: ""; display: block; padding-bottom: 97.7%; }  /* L2717 */
.hprmc_img img {
    position: absolute; left: 3.57%; top: 3.9%;
    width: 92.857%; height: 95.12%; object-fit: contain;                /* L2704-2732 */
    transition: transform .4s ease;
}
.hprm_contain ul li:hover .hprmc_img img { transform: scale(1.06); }
.hprmc_bottom {
    padding: 0.2rem;                                                    /* L2734-2766 */
    background: #fff; color: var(--i_color);
    font-size: 0.2rem; font-weight: bold; text-align: center;
    text-transform: uppercase;
    transition: background .4s ease, color .4s ease;
}
.hprm_contain ul li:hover .hprmc_bottom { background: var(--i_color); color: #fff; }  /* L2768-2772 */

/* -----------------------------------------------------------------------------
 * 板块 3：About TAOYI（L2818-3020）—— 视频弹窗已删除，纯图文
 * -------------------------------------------------------------------------- */
.home_about_taoyi {
    padding: 0.6rem 0;                                                  /* L2819 */
    background: url(../images/home-about-bg.webp) center / cover no-repeat;  /* L6459 */
}
.hat_maxbox { display: flex; align-items: center; gap: 0.4rem; }
.tat_top { flex: 1 1 auto; min-width: 0; position: relative; }
.hatm_top { position: relative; }
.hatm_top h3 {
    position: relative; z-index: 2;
    font-size: 0.4rem; font-weight: 900; color: var(--i_color);
    font-family: var(--font-en); letter-spacing: 0.02em;
}
.hatm_top h3::before {                                                  /* L2877-2881 水印 */
    content: "TAOYI";
    position: absolute; left: -0.02rem; top: -0.3rem; z-index: -1;
    font-size: 1.2rem; font-weight: 900; color: #dedede;
    white-space: nowrap; pointer-events: none;
}
.hatm_text {
    position: relative; z-index: 2;
    margin-top: 0.16rem; font-size: 0.16rem; color: var(--c_text);       /* L2891 */
    line-height: 1.9;
}
.hatm_contain { margin-top: 0.3rem; }
.hatm_contain ul { display: flex; flex-wrap: wrap; }                     /* L2921-2931 */
.hatm_contain ul li { width: 33.333%; }
.hatmc_icon { display: block; width: 0.72rem; height: 0.72rem; }         /* L2962 */
.hatmc_icon img { width: 100%; height: 100%; object-fit: contain; }
.hatm_contain ul li h3 {
    margin-top: 0.12rem; font-size: 0.48rem; font-weight: bold;          /* L2962 */
    color: var(--i_color); font-family: var(--font-en);
}
.hatm_contain ul li h4 { margin-top: 0.04rem; font-size: 0.16rem; font-weight: normal; color: var(--c_text); }

.hatm_pic { flex: 0 0 38%; max-width: 38%; }
.hatm_span { display: block; position: relative; overflow: hidden; }
.hatm_span::before { content: ""; display: block; padding-bottom: 40.31%; }  /* L3019 */
.hatm_span img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

/* -----------------------------------------------------------------------------
 * 板块 4：Hot Products（L3406-3540）
 * -------------------------------------------------------------------------- */
.home_hot_products {
    padding: 0.6rem 0;                                                  /* L3407 */
    background: url(../images/hot-products-bg.webp) center / cover no-repeat;
}
.hhpm_top { margin-bottom: 0.3rem; }
.hhpm_contain ul { display: flex; flex-wrap: wrap; gap: 0.2rem; }        /* L3433 */
.hhpm_contain ul li { width: calc((100% - 0.4rem) / 3); }
.hhpm_contain ul li > a { display: block; background: #fff; transition: box-shadow .4s ease; }
.hhpm_contain ul li:hover > a { box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }  /* L3458-3462 */
.hhpm_img { display: block; padding: 0.16rem 0.15rem; background: #fff; } /* L3471 */
.hhpm_img i { position: relative; display: block; padding-bottom: 97.7%; overflow: hidden; } /* L3481 */
.hhpm_img i img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
.hhpm_contain ul li h3 {
    padding: 0.23rem 0.2rem;                                            /* L3509 */
    background: var(--c_bg1); color: var(--c_title);
    font-size: 0.18rem; font-weight: normal; text-align: center;        /* L3513-3515 */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* -----------------------------------------------------------------------------
 * 板块 5+6：Why Choose Us（L3583-3668）
 * -------------------------------------------------------------------------- */
.home_why_choose_us { padding: 0.6rem 0; }                               /* L3584 */
.hwcu_maxbox { }
.hwcum_top { margin-bottom: 0.4rem; }
.hwcum_contain { position: relative; min-height: 4.4rem; }               /* L3590 */
.hwcumc_img {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 38%; padding-bottom: 35.8%;                                   /* L3611 原 38%，按图 530×499 校正 */
    background: url(../images/home-wcu-bg.webp) center / contain no-repeat;
}
.hwcum_card {
    position: absolute; width: 27%;
    display: flex; gap: 0.16rem; padding: 0.2rem;
    background: #fff; box-shadow: var(--boxShadow);
    transition: transform .4s ease, box-shadow .4s ease;
}
.hwcum_card:hover { transform: translateY(-0.06rem); box-shadow: 0 8px 24px rgba(0, 88, 167, .22); }
.hc_card1 { left: 0;     top: 2%; }
.hc_card2 { left: 0;     top: 54%; }
.hc_card3 { right: 0;    top: 2%; }
.hc_card4 { right: 0;    top: 54%; }                                     /* L3664-3668 Rich Experience */
.hwcumc_icon {
    flex: 0 0 0.46rem; width: 0.46rem; height: 0.46rem;                  /* L3730 */
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--i_color); border-radius: 50%;
    color: var(--i_color); padding: 0.08rem;
    transition: background .4s ease, color .4s ease;
}
.hwcumc_icon img { width: 100%; height: 100%; object-fit: contain; }
.hwcum_card:hover .hwcumc_icon { background: var(--i_color); }
.hwcumc_info { flex: 1 1 auto; min-width: 0; }
.hwcumc_info h3 { font-size: 0.18rem; font-weight: bold; color: var(--c_title); }  /* L3694 */
.hwcumc_info p { margin-top: 0.08rem; font-size: 0.14rem; color: var(--c_text); line-height: 1.7; }

/* -----------------------------------------------------------------------------
 * 板块 7：Scene Of Employment（L3869-4260）
 * -------------------------------------------------------------------------- */
.home_scene_of_employment { padding: 0.6rem 0 0; }                       /* L3870 */
.hsoe_maxbox { position: relative; overflow: hidden; }
.hsoe_maxbox::before { content: ""; display: block; padding-bottom: 51%; }  /* L3882 */
.hsoe_pic { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.hsoe_pic img {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity .5s ease;         /* L3986-4004 */
}
.hsoe_pic img.active { opacity: 1; }
.hsoe_maxbox::after {                                                    /* 左侧渐变遮罩 */
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 62%;
    background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .75) 60%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}
.hsoem_top {
    position: absolute; left: 0; top: 0; z-index: 2;
    width: 56%; height: 100%;
    display: flex; flex-direction: column; justify-content: center;
    padding: 0.4rem 0 0.4rem 0.1rem;
}
.hsoemt_box { margin-top: 0.3rem; }
.hsoemt_box ul { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.hsoemt_box ul li { width: calc((100% - 0.4rem) / 3); }
.hsoemt_box ul li > a {
    display: block; padding: 0.2rem 0.16rem;
    background: #fff; border: 1px solid var(--border_color);
    transition: background .4s ease, border-color .4s ease;
}
.hsoemt_box ul li.active > a,
.hsoemt_box ul li:hover > a { background: var(--i_color); border-color: var(--i_color); }
.hsoemt_icon {
    display: block; width: 0.46rem; height: 0.46rem; margin: 0 auto 0.12rem;
    background-position: center; background-size: contain; background-repeat: no-repeat;
    transition: filter .4s ease;
}
.hsoemt_box ul li:nth-child(1) .hsoemt_icon { background-image: url(../images/scene-icon-1.webp); }
.hsoemt_box ul li:nth-child(2) .hsoemt_icon { background-image: url(../images/scene-icon-2.webp); }
.hsoemt_box ul li:nth-child(3) .hsoemt_icon { background-image: url(../images/scene-icon-3.webp); }
.hsoemt_box ul li p { text-align: center; font-size: 0.16rem; color: var(--c_title); transition: color .4s ease; }
.hsoemt_box ul li.active > a p,
.hsoemt_box ul li:hover > a p { color: #fff; }
.hsoemt_box ul li.active .hsoemt_icon,
.hsoemt_box ul li:hover .hsoemt_icon { filter: brightness(0) invert(1); }

/* 移动端替代块 .hsoe_box（L4115-4260）：默认隐藏 */
.hsoe_box { display: none; }

/* -----------------------------------------------------------------------------
 * 板块 8：Follow Our News（L4299-4485）
 * -------------------------------------------------------------------------- */
.home_follow_our_news { padding: 0.6rem 0; }                             /* L4300 */
.hprmt_contain ul { display: flex; flex-wrap: wrap; gap: 0.35rem; }      /* L4313 */
.hprmt_contain ul li { width: calc((100% - 0.7rem) / 3); }               /* 容器按 3 列算，只放 2 条 */
.hprmt_contain ul li > a { display: block; background: #fff; }
.hprmtc_img { position: relative; display: block; overflow: hidden; }
.hprmtc_img::before { content: ""; display: block; padding-bottom: 63.5%; }  /* L4378 */
.hprmtc_img img {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform .4s ease;                   /* L4365-4399 */
}
.hprmt_contain ul li:hover .hprmtc_img img { transform: scale(1.1); }
.hprmtc_info { padding: 0.25rem 0.14rem 0.1rem; background: var(--c_bg2); }  /* L4402-4404 */
.hprmtc_info h3 {
    font-size: 0.2rem; color: var(--c_title); line-height: 1.5;          /* L4420 */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hprmtc_info h4 {
    margin-top: 0.1rem; font-size: 0.14rem; font-weight: normal; color: var(--c_text);
    line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hprmtc_bottom {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 0.16rem; padding-top: 0.1rem;
    border-top: 1px solid var(--border_color);
}
.hprmtc_btn { padding: 0.13rem 0.24rem; background: var(--i_color); color: #fff; font-size: 0.15rem; }  /* L4327 */
.hprmtc_date { font-size: 0.14rem; color: var(--c_text); }               /* L4484 */

/* -----------------------------------------------------------------------------
 * 响应式
 * -------------------------------------------------------------------------- */
@media (max-width: 1366px) {
    .hwcum_contain { min-height: 4rem; }
}
@media (max-width: 1200px) {
    .home_banner .b_text1_text1,
    .home_banner .b_text2_text1,
    .home_banner .b_text3_text1 { max-width: 72%; }
    .home_banner .b_text1_text2,
    .home_banner .b_text2_text2,
    .home_banner .b_text3_text2 { max-width: 66%; }
}
@media (max-width: 1024px) {
    .hat_maxbox { flex-direction: column; gap: 0.3rem; }
    .hatm_pic { flex: 0 0 auto; max-width: 100%; width: 100%; }
    .hwcumc_img { display: none; }
    .hwcum_contain { min-height: 0; display: flex; flex-wrap: wrap; gap: 0.2rem; }
    .hwcum_card { position: static; width: calc((100% - 0.2rem) / 2); }
    .hsoem_top { width: 74%; }
    .hsoe_maxbox::after { width: 80%; }
    .hprmt_contain ul li { width: calc((100% - 0.35rem) / 2); }
    .home_banner .banner-button-prev,
    .home_banner .banner-button-next { display: none; }
}
@media (max-width: 768px) {
    .hprm_top { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
    .hprmt_left, .hprmt_right { width: 100%; text-align: left; }
    .hatm_top h3::before { font-size: 0.8rem; top: -0.18rem; }
    .hwcum_card { width: 100%; }
    .hsoe_maxbox::before { padding-bottom: 0; }
    .hsoe_maxbox::after { display: none; }
    .hsoe_pic { display: none; }
    .hsoem_top { position: static; width: 100%; height: auto; padding: 0; }
}
@media (max-width: 560px) {
    .hprm_contain ul li,
    .hhpm_contain ul li { width: calc((100% - 0.2rem) / 2); }            /* L2798 3→2 列 */
    .hprmt_contain ul li { width: 100%; }
    .hatm_contain ul li { width: 33.333%; }
    .hatm_contain ul li h3 { font-size: 0.3rem; }
    /* 场景：桌面版整体隐藏，改用纵向堆叠的 .hsoe_box */
    .hsoem_top { display: none; }
    .hsoe_box { display: block; }
    .hsoe_box ul { display: flex; flex-wrap: wrap; gap: 0.2rem; }
    .hsoe_box ul li { width: calc((100% - 0.2rem) / 2); }
    .hsoe_box ul li span { position: relative; display: block; overflow: hidden; }
    .hsoe_box ul li span::before { content: ""; display: block; padding-bottom: 100%; }
    .hsoe_box ul li span img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
    .hsoe_box ul li p { margin-top: 0.1rem; text-align: center; font-size: 0.16rem; color: var(--c_title); }
}