body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
select,
option,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

* {
    outline: 0 none;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

ul li {
    list-style: none;
}

a {
    color: black;
    outline: 0 none;
    text-decoration: none;
    cursor: pointer;
}

img {
    border: 0;
}

/* body{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;

    font-size:18px; 
}

.inter-<uniquifier> {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
 */



body {
    font-family: 'Manrope', sans-serif;
    overflow-x: hidden;
}

.wrapper {
    width: 100%;
    margin: 0 auto;
}

.wrapper_main {
    width: 100%;
    margin: 0 auto;
}

.section_container_con {
    max-width: 1430px;
    width: 90%;
    height: 100%;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    position: relative;
}








/* header_box */
.header_box {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    
    background: linear-gradient(180deg, rgb(12 18 24 / .3) 0%, rgb(15 22 28 / .1) 100%);
    backdrop-filter: blur(4px) saturate(100%);
    -webkit-backdrop-filter: blur(4px) saturate(100%);
    border-bottom: 1px solid rgb(255 255 255 / .15);
    box-shadow: 0 8px 30px rgb(0 0 0 / .06);
}

.page_header_box {
    background: #fff;
    position: relative;
    top: 0;
    box-sizing: border-box;
}

.header_middle {
    width: 100%;
    height: auto;
    padding: 15px 0px;
    box-sizing: border-box;
    background: none;
    position: relative;
}

.header_middle .conter_box {
    width: 100%;
    height: 80px;
    padding-left: 280px;
    padding-right: 300px;
    box-sizing: border-box;
    position: relative;
}

.header_middle .conter_box .logo_box {
    width: auto;
    height: auto;
    position: absolute;
    top: 6px;
    left: 0;
}

.header_middle .conter_box .logo_box a {
    display: block;
}

.header_middle .conter_box .logo_box img {
    float: left;
    width: auto;
    height: 66px;
}

.header_middle .conter_box .logo_box .text {
    float: left;
    padding-left: 15px;
    box-sizing: border-box;
}

.header_middle .conter_box .logo_box .text h2 {
    font-size: 26px;
    color: #d0151b;
    line-height: 36px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 2px;
}

.header_middle .conter_box .logo_box .text p {
    font-size: 16px;
    color: #555;
    line-height: 26px;
    font-weight: 600;
    letter-spacing: 2px;
    position: relative;
}

.header_middle .conter_box .logo_box .text p::after {
    content: " ";
    width: 100%;
    height: 1px;
    background: #ededed;
    position: absolute;
    top: -3px;
    left: 0;
}

.header_middle .conter_box .header_middle_menu {
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

.header_middle .conter_box .header_middle_menu a {
    display: block;
    width: 280px;
    height: 50px;
    background: #d0151b;
    padding: 10px 15px;
    padding-left: 18px;
    box-sizing: border-box;

}

.header_middle .conter_box .header_middle_menu .menu_icon {
    float: left;
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.header_middle .conter_box .header_middle_menu .title {
    float: left;
    width: auto;
    height: 30px;
    font-size: 14pt;
    color: #fff;
    line-height: 34px;
    font-weight: 600;
    text-transform: uppercase;
}

.header_middle .conter_box .text_conter_box .text_box {
    width: auto;
    height: auto;
    padding: 13px;
    box-sizing: border-box;
    display: none;
}

.header_middle .conter_box .text_conter_box h3 {
    width: 100%;
    height: auto;
    font-size: 18pt;
    color: #303030;
    line-height: 30px;
    text-align: left;
    font-weight: 500;
    letter-spacing: 0;
}

.header_middle .conter_box .text_conter_box p {
    width: 100%;
    height: auto;
    font-size: 14pt;
    color: #666;
    line-height: 22px;
    font-weight: 300;
    text-align: justify;
}

.header_middle .conter_box .text_conter_box {
    width: 100%;
    height: auto;
}

.header_middle .conter_box .header_link_box {
    display: inline-block;
    width: auto;
    min-width: 130px;
    height: auto;
    background: #d0151b;
    background-size: 18px;
    padding: 8px 15px;
    box-sizing: border-box;

    border-radius: 6px;

    font-size: 18px;
    color: #fff;
    line-height: 28px;
    text-align: center;
    letter-spacing: 0px;
    font-weight: 500;
    border: 1px solid #d0151b;
    position: absolute;
    top: 17px;
    right: 0;
}

.header_middle .conter_box .header_link_box:hover {
    background: #fff;
    background-size: 18px;
    color: #d0151b;
}


.header_nav {
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

.header_nav .nav_menu {
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

.header_nav .nav_menu .nav_menu_ul {
    /* width: 680px; */
    margin: 0 auto;
    text-align: center;
}

.header_nav .nav_menu ul li {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 25px 0;
    box-sizing: border-box;
    margin: 0 12px;
    position: relative;
    text-align: left;
}

.header_nav .nav_menu ul li.li_box .link {
    padding-right: 18px;
    box-sizing: border-box;
    position: relative;
}

.header_nav .nav_menu ul li.li_box .link::before {
    content: " ";
    width: 16px;
    height: 26px;
    background: url('../images/header_down.svg') no-repeat center center;
    background-size: 11px;

    position: absolute;
    top: 4px;
    right: 0;
}


.header_nav .nav_menu ul li .link {
    display: block;
    width: auto;
    height: auto;
    color: #fff;
    line-height: 30px;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    font-size: 18px;
    font-weight: 400;
}

.header_nav .nav_menu ul li .link::after {
    content: " ";
    width: 0;
    height: 2px;
    background: #d0151b;
    position: absolute;
    left: 0;
    bottom: -5px;
}

.header_nav .nav_menu ul li:hover .link::after {
    width: 100%;
    transition: all 0.5s;
}

.header_nav .nav_menu ul li.active .link::after {
    width: 100%;
    transition: all 0.5s;
}





.language_box{
    width: 150px;
    height: auto;
    position: absolute;
    top: 5px;
    right: 130px;
    cursor: pointer;
}
.language_title{
    width: 100%;
    height: 70px;
    padding: 15px 5px;
    padding-left: 40px;
    padding-right: 25px;
    box-sizing: border-box;
    position: relative;
}
.language_title span{
    display: inline-block;
    font-size: 18px;
    color: #fff;
    line-height: 40px;
    position: relative;
}
.language_title span::after{
    content: " ";
    width: 30px;
    height: 40px;
    background:  url('../images/language_icon.png') no-repeat left center;
    background-size: 28px;
    position: absolute;
    left: -38px;
    top: 1px;
}
/*.language_title span::before{*/
/*    content: " ";*/
/*    width: 40px; */
/*    height: 40px;*/
/*    background:  url('../images/language_down.png') no-repeat center center;*/
/*    background-size: 14px;*/
/*    position: absolute;*/
/*    right: -40px;*/
/*    top: 3px;*/
/*}*/
.language_drop{
    width: 150px;
    height: auto;
    background: #fff;
    position: absolute;
    top: 70px;
    left: 0;
    margin-left: 0;
    z-index: 11;
    box-shadow: 0px 2px 12px 0 rgb(0 0 0 / 10%);
    
    display: none;
}
.language_drop a{
    float: left;
    width: 100%;
    height: auto;
    padding: 15px 10px;
    padding-left: 20px;
    box-sizing: border-box;
    font-size: 14px;
}
.language_drop a:hover{
    background: #f1f1f1;
}
.language_drop a img{
    float: left;
    width: 20px;
    height: 20px;
    border: 1px solid #f1f1f1;
    border-radius: 50%;
}
.language_drop a span{
    float: left;
    line-height: 20px;
    padding-left: 10px;
    box-sizing: border-box;
}


/* =========================
   首页 Banner
========================= */
.home-banner {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background: #000;
}


.responsive_banner_section{
     height: 30vh;
}

/* 视频容器 */
.home-banner .video-box {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}
/* 视频 */
.home-banner .banner-video {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 150%;
    height: 150%;

    transform: translate(-40%, -50%);

    object-fit: cover;
    object-position: center;

    display: block;
}



/* 视频容器 */
.home-banner .banner_bj_box {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* 视频 */
.home-banner .banner_bj_box .banner_bj {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 100%;
    height: 100%;

    transform: translate(-50%, -50%);

    object-fit: cover;
    object-position: center;

    display: block;
}




/* =========================
   1. 主黑色遮罩
   核心：左边更黑，右边中间自然透亮
========================= */
.hero-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        /* 右边中间这块自然亮出来，不要做成明显圆圈 */
        radial-gradient(
            ellipse 42% 62% at 74% 52%,
            rgba(0, 0, 0, 0.00) 0%,
            rgba(0, 0, 0, 0.02) 24%,
            rgba(0, 0, 0, 0.08) 40%,
            rgba(0, 0, 0, 0.18) 56%,
            rgba(0, 0, 0, 0.30) 72%,
            rgba(0, 0, 0, 0.44) 100%
        ),

        /* 左边整体黑，往右逐渐变轻 */
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.80) 0%,
            rgba(0, 0, 0, 0.70) 18%,
            rgba(0, 0, 0, 0.55) 36%,
            rgba(0, 0, 0, 0.30) 58%,
            rgba(0, 0, 0, 0.10) 100%
        );
}

/* =========================
   2. 红色氛围层
   注意：不是光圈，是右侧环境色
========================= */
.hero-red-ambience {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background:
        /* 右上/右中区域的红色氛围 */
        radial-gradient(
            ellipse 46% 66% at 88% 42%,
            rgba(208, 21, 27, 0.12) 0%,
            rgba(208, 21, 27, 0.08) 22%,
            rgba(208, 21, 27, 0.04) 42%,
            rgba(208, 21, 27, 0.00) 68%
        ),

        /* 整个右边再轻轻带一点红 */
        linear-gradient(
            90deg,
            rgba(208, 21, 27, 0.00) 58%,
            rgba(208, 21, 27, 0.015) 72%,
            rgba(208, 21, 27, 0.05) 88%,
            rgba(208, 21, 27, 0.08) 100%
        );
}

/* =========================
   3. 底部logo区域压暗
========================= */
.hero-bottom-mask {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 170px;
    z-index: 3;
    pointer-events: none;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.34) 52%,
        rgba(0, 0, 0, 0.00) 100%
    );
}





/*banner*/
.home_banner_section {
    /*width: 100%;*/
    /*height: auto;*/
    /*position: relative;*/
}

.home_banner_section .swiper-wrapper {
    width: 100%;
    height: auto;
}

.home_banner_section .swiper-wrapper {
    width: 100%;
    height: auto;
}

.home_banner_section .swiper-wrapper .swiper-slide {
    float: left;
    width: 100%;
    height: auto;
    position: relative;
}

.home_banner_section .swiper-wrapper .swiper-slide .banner_pic {
    float: left;
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

.home_banner_section .swiper-pagination-bullet {
    width: 30px;
    height: 4px;
    border-radius: 0;
    background: #f0f0f0;
    opacity: 1;
}

.home_banner_section .swiper-pagination-bullet-active {
    background: #d0151b;
}

.home_banner_section .swiper-container-horizontal>.swiper-pagination-bullets,
.home_banner_section .swiper-pagination-custom,
.home_banner_section .swiper-pagination-fraction {
    width: 300px;
    left: inherit;
    right: 35px;
    bottom: 35px;
}


.home_banner_section .pagination {
    width: 200px;
    height: auto;
    position: absolute;
    right: 6%;
    bottom: 30px;
    z-index: 10;
}

.home_banner_section .pagination a {
    display: inline-block;
    width: 30px;
    height: 5px;
    border-radius: 0;
    background: #f0f0f0;
    opacity: 1;
    margin: 0 5px;
    text-indent: 2em;
    overflow: hidden;
}

.home_banner_section .pagination a.selected {
    background: #d0151b;
}

.banner_bf {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;

}

.banner_bf .slider2 .item {
    float: left;
    position: relative;
    height: 100%;
}

.banner_bf .slider2 img {
    float: left;
    width: 100%;
    height: 100%;
}


.home_banner_section .banner_pro {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}

.banner_pro_conter {
    width: 100%;
    height: 100%;
    padding-top: 16%;
    box-sizing: border-box;
    position: relative;
}

.banner_pro_conter .banner_text_box {
    float: left;
    width: 43%;
    height: auto;
}

.home_banner_pro .banner_pro_conter .banner_text_box {
    float: left;
    width: 50%;
    height: auto;
}

.banner_pro1 .banner_pro_conter h2 {
    width: 110%;
    height: auto;
    font-size: 2.8rem;
    color: #fff;
    line-height: 1.3;
    font-weight: 600;
    margin-bottom: 35px;
}
.home_banner_pro .banner_pro_conter h2 {
     width: 100%;
}
.banner_pro_about_page .banner_pro_conter h2 {
     width: 100%;
}
.banner_pro1 .banner_pro_conter h2 strong {
    color: #d0151b;
    font-weight: 600;
    letter-spacing: 0px;
}

.banner_pro1 .banner_pro_conter .text {
    width: 100%;
    height: auto;
    font-size: 1.15rem;
    color: #fff;
    line-height: 1.5;
    font-weight: 300;
    box-sizing: border-box;
}


.banner_pro1 .banner_pro_conter .list {
    width: 100%;
    height: auto;
    margin-top: 35px;
}

.banner_pro1 .banner_pro_conter .list li {
    float: left;
    width: 100%;
    height: auto;
    padding-left: 35px;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 10px;
}

.banner_pro1 .banner_pro_conter .list li h4 {
    font-size: 1.1rem;
    color: #fff;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 10px;
}

.banner_pro1 .banner_pro_conter .list li p {
    width: 100%;
    height: auto;
    font-size: 1rem;
    color: #CBCCCD;
    line-height: 1.4;
    font-weight: 500;
    box-sizing: border-box;
}

.banner_pro1 .banner_pro_conter .list li .title_check {
    position: absolute;
    top: 2px;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #d0151b;
    margin-right: .5rem;
}

.banner_pro1 .banner_pro_conter .list li .title_check::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    width: 8px;
    height: 4px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
}




.banner_pro1 .banner_pro_conter .banner_link_box {
    display: inline-block;
    width: auto;
    height: auto;
    background: #d0151b;
    padding: 10px 30px;
    box-sizing: border-box;
    border-radius: 6px;
    font-size: 18px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    margin-top: 30px;
    text-transform: uppercase;
}

.banner_pro1 .banner_pro_conter .banner_link_box:hover {
    background: #fff;
    color: #d0151b;
}

/* banner_right_box */
.banner_pro_conter .banner_right_box {
    float: right;
    width: 50%;
    height: auto;
}

.banner_pro_conter .banner_right_box .video_box {
    width: 100%;
    height: auto;
}

.banner_pro_conter .banner_right_box .video_box video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}


.banner_pro_page .banner_pro_conter .banner_text_box{
    width: 430px;
    height: auto;
    padding: 40px 60px;
    box-sizing: box-sizing;
    border-radius: 20px;
    background: linear-gradient(180deg, rgb(12 18 24 / .3) 0%, rgb(15 22 28 / .1) 100%);
    backdrop-filter: blur(4px) saturate(100%);
    -webkit-backdrop-filter: blur(4px) saturate(100%);
    border: 1px solid rgb(255 255 255 / .06);
    box-shadow: 0 8px 30px rgb(0 0 0 / .06);
    
    position: absolute;
    bottom: 150px;
}
.banner_pro_page .banner_pro_conter .text{
    font-size: 1.25rem;
}
.banner_pro_page .banner_pro_conter .banner_text_box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18%;
    width: 64%;
    height: 2px;
    background: linear-gradient(90deg,transparent,rgb(208 21 27 / .65),transparent);

}

.banner_pro_page .banner_pro_conter .banner_text_box::after {
    content: "";
    position: absolute;
    left: 34%;
    bottom: 0;
    width: 42%;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgb(208 21 27 / .5),transparent)
}

.banner_pro_page .banner_pro_conter .banner_link_box{
    margin-top: 50px;
}




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

.about-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 760px;
    overflow: hidden;
    background: #080b0e;
}


/* 背景图 */
.about-hero__bg {
    position: absolute;
    inset: 0;

    /* 换成你的 About Banner 图片 */
    background-image: url("/images/about-banner.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transform: scale(1.01);
}


/* 整体轻遮罩
   左侧稍暗，右侧尽量保留图片本身
*/
.about-hero__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 7, 10, 0.42) 0%,
            rgba(4, 7, 10, 0.20) 42%,
            rgba(4, 7, 10, 0.04) 72%,
            rgba(4, 7, 10, 0.02) 100%
        );
}


/* 内容区域 */
.about-hero__container {
    position: relative;
    z-index: 2;

    width: min(1460px, calc(100% - 120px));
    height: 100%;

    margin: 0 auto;

    display: flex;
    align-items: center;
}





/* banner_pro_trusted */
.banner_pro_trusted {
    width: 100%;
    height: 115px;
    position: absolute;
    left: 0;
    bottom: 10px;
}

.banner_pro_trusted .trust_title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

.banner_pro_trusted .trust_title .title_line {
    flex: 1;
    height: 1px;
    max-width: 640px;
    background: rgba(255, 255, 255, 0.20);
}

.banner_pro_trusted .trust_title h3 {
    font-size: 18px;
    color: #CBCCCD;
    line-height: 30px;
    font-weight: 400;
    text-align: center;
    box-sizing: border-box;
}

.banner_pro_trusted .list_box {
    width: 100%;
    height: auto;
}

.banner_pro_trusted .list_box ul li {
    display: inline-block;
    width: 200px;
    height: 80px;
    margin: 0 5px;
}

.banner_pro_trusted .list_box ul li img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.banner_pro_trusted .str_wrap.str_active {
    background: transparent;
}

.banner_pro_trusted .str_wrap {
    background: transparent;
}


/* page_content */
.page_content {
    width: 100%;
    height: auto;
    min-height: 600px;
    background: #070707;
    box-sizing: border-box;
    
}
.page_content .glow-card-top{
    position: fixed;
    top: 0;
    left: -20%;

    width: 50%;
    height: 600px;
}

.section_container_con .section_link_box {
    display: inline-block;
    width: auto;
    height: auto;
    background: #d0151b;
    padding: 10px 30px;
    box-sizing: border-box;
    border-radius: 6px;
    font-size: 18px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    margin-top: 50px;
}

.section_container_con .section_link_box:hover {
    background: #fff;
    color: #d0151b;
}


/*index_page*/
.index_page{
    width: 100%;
    height: auto;
    min-height: 600px;
    background: radial-gradient(circle at 12% 18%, rgba(208, 21, 27, 0.10), transparent 26%), radial-gradient(circle at 88% 82%, rgba(208, 21, 27, 0.08), transparent 24%), linear-gradient(180deg, #0a0a0a 0%, #060606 100%);
    overflow: hidden;
}



/* home_about */
.home_about {
    width: 100%;
    height: auto;
    padding-top: 120px;
    box-sizing: border-box;
}

.home_about_conter {
    width: 100%;
    height: auto;
}

.home_about_right {
    float: left;
    width: 50%;
    height: auto;
    box-sizing: border-box;
    padding-left: 4%;
}

.home_about_right .text_box {
    width: 100%;
    height: auto;
    position: relative;
    box-sizing: border-box;
}

.home_about_right .text_box h3 {
    width: 100%;
    height: auto;
    font-size: 2.8rem;
    color: #fff;
    line-height: 1.2;
    font-weight: 500;
}

.home_about_right .text_box .text {
    width: 100%;
    height: auto;
    font-size: 1.1rem;
    color: #CBCCCD;
    line-height: 1.4;
    font-weight: 500;
    box-sizing: border-box;
    margin-top: 30px;
}

.home_about_right .text_box .text p:first-child {
    margin-bottom: 30px;
}

.home_about_left {
    float: left;
    width: 50%;
    height: auto;
    box-sizing: border-box;
    padding-right: 4%;
}

.home_about_left .pic_box {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    box-sizing: border-box;
    
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / .06);
    box-sizing: border-box;
}

.home_about_left img {
    display: block;
    width: 100%;
    height: auto;
}







/* home_service */
.home_service {
    width: 100%;
    height: auto;
    padding-top: 150px;
    box-sizing: border-box;
}
.index_page .home_service{
    padding-bottom: 0;
}

.home_service_conter {
    width: 100%;
    height: auto;
}

.home_service_top_box {
    width: 100%;
    height: auto;
    margin-bottom: 50px;
}

.home_service_top_box .text_box {
    width: 60%;
    height: auto;
    position: relative;
    box-sizing: border-box;
}

.home_service_top_box .text_box h3 {
    width: 100%;
    height: auto;
    font-size: 2.8rem;
    color: #fff;
    line-height: 1.2;
    font-weight: 500;
}

.home_service_top_box .text_box .text {
    width: 100%;
    height: auto;
    font-size: 1.1rem;
    color: #CBCCCD;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 30px;
    box-sizing: border-box;
    margin-top: 30px;
}

.home_service_bottom_box {
    width: 100%;
    height: auto;
}

/* 容器和网格布局 */
.cnc-services-container {
    width: 100%;
    /* 最大宽度 */
    margin: 0 auto;
    /* 居中 */
}

.grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3列 */
    grid-template-rows: repeat(2, auto);
    /* 2行 */
    gap: 20px;
    /* 项目之间的间距 */
    /* 
       我们需要调整第一个项目（Milling）使其跨越两行，
       并让其他四个项目占据剩余的 2x2 网格位置。
       为此，我们将第一个项目放置在第一列的两行中，
       并调整其他四个项目的起始列。
    */
    grid-template-areas:
        "milling turning five-axis"
        "milling grinding custom-parts";
}

/* 基础网格项目样式 */
.grid-item {
    position: relative;
    overflow: hidden;
    /* 关键：超出容器部分隐藏，防止放大时溢出 */
    background-color: #333;
    border-radius: 10px;

    /* 容器比例：不管是 3/2、4/3 还是 16/9，图片都会自动居中适配 */
    aspect-ratio: 3 / 2;

    cursor: pointer;
    /* 提升鼠标交互体验 */


      border: 1px solid rgba(255, 255, 255, 0.001);
    box-sizing: border-box;


}

/* 左侧 Large Milling 模块 */
.grid-item.large-item {
    grid-area: milling;
    aspect-ratio: auto;
    /* 自动撑满左右两行的高度 */
}

/* 图像样式 - 自动居中适配与缩放过渡 */
.item-image {
    width: 100%;
    height: 100%;

    /* 核心适配：保持原图比例居中裁剪，完美填充任何比例的容器 */
    object-fit: cover;
    object-position: center center;

    /* 平滑过渡：放大/缩小动画效果 (0.4秒，缓动曲线) */
    transition: transform 0.4s ease-in-out;
}

/* 鼠标悬停（Hover）放大效果 */
.grid-item:hover .item-image {
    transform: scale(1.08);
    /* 悬停时放大到 1.08 倍，可根据需求微调如 1.1 */
}

/* 文本叠加层样式（加上 pointer-events 防止遮挡鼠标穿透） */
.text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0) 80%);
    display: flex;
    align-items: flex-end;
    padding: 20px;
    color: white;
    box-sizing: border-box;

    /* 保证鼠标悬停在文字或蒙层上时，依然能平滑触发父级的 :hover */
    pointer-events: none;
}

/* 如果需要文字在悬停时也有微调（可选效果） */
.text-content {
    max-width: 90%;
    transition: transform 0.3s ease;
}

.grid-item:hover .text-content {
    transform: translateY(-4px);
    /* 悬停时文字微微向上浮动 4px */
}

/* 红色横条 */
.red-bar {
    width: 36px;
    height: 4px;
    background-color: red;
    margin-bottom: 10px;
}

/* 标题与描述样式 */
.text-content h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.2;
}

.text-content p {
    margin: 6px 0 0;
    font-size: 0.95rem;
    line-height: 1.35;
    opacity: 0.9;
}








/* home_parts_showcase */
.home_parts_showcase {
    width: 100%;
    height: auto;
    padding-top: 50px;
    padding-bottom: 50PX;
    box-sizing: border-box;
}
.index_page .home_parts_showcase{
    padding-top: 120px;
}
.home_parts_showcase_conter {
    width: 100%;
    height: auto;
}

.home_parts_showcase_conter .text_box {
    width: 70%;
    height: auto;
    position: relative;
    box-sizing: border-box;

    text-align: center;
    margin: 0 auto;
    margin-bottom: 50px;
}

.home_parts_showcase_conter .text_box h3 {
    width: 100%;
    height: auto;
    font-size: 2.8rem;
    color: #fff;
    line-height: 1.2;
    font-weight: 500;
}

.home_parts_showcase_conter .text_box .text {
    width: 100%;
    height: auto;
    font-size: 1.1rem;
    color: #CBCCCD;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 30px;
    box-sizing: border-box;
    margin-top: 30px;
}

.home_parts_showcase_list {
    width: 100%;
    height: auto;
    margin-top: 30px;
}

.home_parts_showcase_list ul {
    margin: 15px 0;
}

.home_parts_showcase_list ul li {
    display: inline-block;
    width: 250px;
    height: 250px;
    margin: 0 10px;
}

.home_parts_showcase_list ul li .pic_box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    cursor: unset;
    box-sizing: border-box;

    border-radius: 8px;
    overflow: hidden;
}

.home_parts_showcase_list ul li .pic_box img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.home_parts_showcase_list .str_wrap.str_active {
    background: transparent;
}

.home_parts_showcase_list .str_wrap {
    background: transparent;
    height: 260px !important;
}



/* home_production */
.home_production {
    width: 100%;
    height: auto;
    padding: 70px 0;
    box-sizing: border-box;
}

.home_production_conter {
    width: 100%;
    height: auto;
}

.home_production_top_box {
    width: 100%;
    height: auto;
    margin-bottom: 50px;
}

.home_production_top_box .text_box {
    width: 70%;
    height: auto;
    position: relative;
    box-sizing: border-box;
    text-align: center;
    margin: 0 auto;
}

.home_production_top_box .text_box h3 {
    width: 100%;
    height: auto;
    font-size: 2.8rem;
    color: #fff;
    line-height: 1.2;
    font-weight: 500;
}

.home_production_top_box .text_box .text {
    width: 100%;
    height: auto;
    font-size: 1.1rem;
    color: #CBCCCD;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 30px;
    box-sizing: border-box;
    margin-top: 30px;
}

.home_production_bottom_box {
    width: 100%;
    height: auto;
}

.home_production_list_box {
    width: 100%;
    height: auto;
}

.home_production_item_box {
    width: 100%;
    height: auto;
    margin: 100px 0;
}

.home_production_item_box .left_box {
    float: left;
    width: 45%;
    height: auto;
    box-sizing: border-box;
    padding-right: 8%;
}

.home_production_item_box .left_box .text_box {
    width: 100%;
    height: auto;
    position: relative;
    box-sizing: border-box;
}

.home_production_item_box .left_box .text_box h3 {
    width: 100%;
    height: auto;
    font-size: 2rem;
    color: #fff;
    line-height: 1.2;
    font-weight: 600;
}

.home_production_item_box .left_box .text_box .text {
    width: 100%;
    height: auto;
    font-size: 1.1rem;
    color: #CBCCCD;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 30px;
    box-sizing: border-box;
    margin-top: 30px;
}

.home_production_item_box .left_box .list {
    width: 100%;
    height: auto;
    margin-top: 40px;
}

.home_production_item_box .left_box .list li {
    float: left;
    width: 100%;
    height: auto;
    padding-left: 35px;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 15px;
}

.home_production_item_box .left_box .list li h4 {
    font-size: 1rem;
    color: #fff;
    line-height: 1.4;
    font-weight: 500;
}

.home_production_item_box .left_box .list li p {
    width: 100%;
    height: auto;
    font-size: 17px;
    color: #687684;
    line-height: 24px;
    font-weight: 500;
    box-sizing: border-box;
}

.home_production_item_box .left_box .list li .title_check {
    position: absolute;
    top: 1px;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #d0151b;
    margin-right: .5rem;
}

.home_production_item_box .left_box .list li .title_check::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    width: 8px;
    height: 4px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
}


.home_production_item_box .right_box {
    float: left;
    width: 55%;
    height: auto;
    box-sizing: border-box;
}

.home_production_item_box .right_box .pic_box {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
}

.home_production_item_box .right_box img {
    display: block;
    width: 100%;
    height: auto;
}

.home_production_item_box:nth-child(odd) .left_box {
    float: right;
    padding-right: 0;
    padding-left: 8%;
}


/* home_Process */
.home_Process {
    width: 100%;
    height: auto;
    /* padding: 100px 0; */
    padding-top: 100px;
    box-sizing: border-box;
}

.home_Process .title_box {
    width: 60%;
    height: auto;
    position: relative;
    box-sizing: border-box;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 60px;
}

.home_Process .title_box h3 {
    width: 100%;
    height: auto;
    font-size: 2.8rem;
    color: #fff;
    line-height: 1.2;
    font-weight: 500;
}

.home_Process .title_box .text {
    width: 100%;
    height: auto;
    font-size: 1.1rem;
    color: #CBCCCD;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 30px;
    box-sizing: border-box;
    margin-top: 30px;
}

.home_Process_conter {
    width: 100%;
    height: auto;
    position: relative;
}

.home_Process_background_image {
    width: 100%;
    height: auto;
    position: relative;
}
.home_Process_background_image .list_box{
    width: 65%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.home_Process_background_image .item_pic_box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    opacity: 0;
}


.home_Process_background_image .item_pic_box img {
    display: block;
    width: 80%;
    height: auto;
    margin: 0 auto;
    padding-left: 2%;
    padding-top: 2%;
    box-sizing: border-box;
}

.home_Process_conter .upload_file_box {
    width: 480px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    padding: 20px;
    box-sizing: border-box;
}

.upload_file_conter {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 30px;
    padding: 30px;
    box-sizing: border-box;
    position: relative;
}

.upload_file_conter .text_list {
    width: 100%;
    height: auto;
}

.upload_file_conter .text_list ul li {
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    padding-left: 35px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;

    opacity: 0.25;
}
.upload_file_conter .text_list ul li.active{
    opacity: 1;
}
.upload_file_conter .text_list ul li:hover{
    opacity: 1;
}
.upload_file_conter .text_list ul li span {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    font-size: 1rem;
    color: #303030;
    line-height: 24px;
    font-weight: 800;
    text-align: center;
    position: absolute;
    top: 2px;
    left: 0;
}

.upload_file_conter .text_list ul li h3 {
    width: 100%;
    height: auto;
    font-size: 1.5rem;
    color: #fff;
    line-height: 1.2;
    font-weight: 600;
}

.upload_file_conter .text_list ul li p {
    width: 100%;
    height: auto;
    font-size: 0.93rem;
    color: #CBCCCD;
    line-height: 1.4;
    font-weight: 500;
    margin-top: 10px;
}

.home_Process_conter .upload_file_box .link_box {
    display: block;
    width: 86%;
    height: auto;
    background: #fff;
    padding: 10px 30px;
    box-sizing: border-box;
    border-radius: 16px;
    font-size: 20px;
    color: #000;
    line-height: 30px;
    font-weight: 800;
    text-align: center;
    margin-top: 50px;
    position: absolute;
    left: 7%;
    bottom: 30px;
}


/* 主卡片容器 */
.glow-card {
    position: relative;
    width: 100%;
    height: 600px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    background: #000;
}

/* 液态流体容器：放大并使用高斯模糊将图形融合成柔和光晕 */
.fluid-container {
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    filter: blur(50px);
    /* 核心：高强度模糊实现丝滑融合 */
}

/* 基础红底色 */
.fluid-ball {
    position: absolute;
    border-radius: 50%;
    opacity: 0.85;
    mix-blend-mode: screen;
    /* 混合模式，叠加时产生极具质感的高光 */
}

/* 主色调 #d0151b - 大号流动块 */
.ball-1 {
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, #d0151b 0%, rgba(208, 21, 27, 0) 70%);
    top: 10%;
    left: 10%;
    animation: floatPath1 12s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

/* 辅助高光块 - 鲜亮绯红 */
.ball-2 {
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, #ff3b30 0%, rgba(255, 59, 48, 0) 70%);
    bottom: 10%;
    right: 10%;
    animation: floatPath2 9s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

/* 辅助暗部块 - 深红绛紫，增加视觉深度 */
.ball-3 {
    width: 50%;
    height: 50%;
    background: radial-gradient(circle, #5e0008 0%, rgba(94, 0, 8, 0) 70%);
    top: 40%;
    right: 20%;
    animation: floatPath3 15s ease-in-out infinite alternate;
}

/* 不规则缓动曲线动画：让轨迹看起来像真实的液体漫延 */
@keyframes floatPath1 {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    50% {
        transform: translate(12%, 15%) scale(1.15) rotate(120deg);
    }

    100% {
        transform: translate(-10%, 8%) scale(0.95) rotate(240deg);
    }
}

@keyframes floatPath2 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-15%, -12%) scale(1.2);
    }

    100% {
        transform: translate(10%, -8%) scale(0.85);
    }
}

@keyframes floatPath3 {
    0% {
        transform: translate(0, 0) scale(0.9);
    }

    100% {
        transform: translate(-20%, 15%) scale(1.2);
    }
}

/* 前置毛玻璃蒙版（可选）：赋予画面精致的现代 UI 质感 */
.glass-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    pointer-events: none;
}





/* home_factory */
.home_factory {
    width: 100%;
    height: auto;
    min-height: 500px;
    padding-top: 120px;
    box-sizing: border-box;
}

.home_factory_conter {
    width: 100%;
    height: auto;
}

.home_factory_top_box {
    width: 100%;
    height: auto;
    position: relative;
}

.home_factory_top_box .video_box {
    width: 100%;
    height: auto;
    min-height: 500px;
}

.home_factory_top_box .video_box video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    box-sizing: border-box;
}

.factory_text_box {
    width: 40%;
    height: auto;
    position: absolute;
    bottom: 120px;
    left: 80px;
    z-index: 99;
    background: linear-gradient(180deg, rgb(208 21 27 / .8) 0%, rgb(15 22 28 / .8) 100%);
    backdrop-filter: blur(4px) saturate(100%);
    -webkit-backdrop-filter: blur(4px) saturate(100%);
    border-bottom: 1px solid rgb(255 255 255 / .12);
    box-shadow: 0 8px 30px rgb(0 0 0 / .12);

    padding: 45px;
    padding-bottom: 20px;
    box-sizing: border-box;
    border-radius: 20px;
}

.factory_text_box h3 {
    width: 100%;
    height: auto;
    font-size: 2.2rem;
    color: #fff;
    line-height: 1.2;
    font-weight: 600;
}

.factory_text_box .text {
    width: 100%;
    height: auto;
    font-size: 1.1rem;
    color: #eee;
    line-height: 1.4;
    font-weight: 400;
    margin-bottom: 30px;
    box-sizing: border-box;
    margin-top: 30px;
}

.factory_text_box .text p {
    margin-bottom: 25px;
}



/* home_gallery */
.home_gallery {
    width: 92%;
    height: auto;
    background: #fff;
    border-radius: 20px;
    padding: 60px 60px;
    box-sizing: border-box;
    margin: 0 auto;

    background: linear-gradient(180deg, rgb(208 21 27 / .3) 0%, rgb(15 22 28 / .8) 100%);

    /* background: linear-gradient(180deg, rgb(15 22 28 / .8) 0%, rgb(208 21 27 / .3) 100%); */

    backdrop-filter: blur(4px) saturate(100%);
    -webkit-backdrop-filter: blur(4px) saturate(100%);
    border-bottom: 1px solid rgb(255 255 255 / .12);
    box-shadow: 0 8px 30px rgb(0 0 0 / .12);
}

.home_gallery_conter {
    width: 100%;
    height: auto;
}

.home_gallery_top_box {
    width: 100%;
    height: auto;
    min-height: 100px;
    padding-left: 300px;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 50px;
}

.home_gallery_top_box .text {
    width: 300px;
    height: auto;
    font-size: 1.2rem;
    color: #ddd;
    line-height: 1.4;
    font-weight: 500;
    position: absolute;
    top: 0;
    left: 0;
    padding-right: 30px;
    box-sizing: border-box;
}

.home_gallery_top_box h3 {
    width: 100%;
    height: auto;
    font-size: 2.8rem;
    color: #fff;
    line-height: 1.2;
    font-weight: 500;
    text-align: right;
}

.home_gallery_bottom_box {
    width: 100%;
    height: auto;
}

.home_gallery_list {
    width: 100%;
    height: auto;
    margin-top: 30px;
}

.home_gallery_list ul {
    margin: 15px 0;
}

.home_gallery_list ul li {
    display: inline-block;
    width: 300px;
    height: 400px;
    margin: 0 10px;
}

.home_gallery_list ul li .pic_box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    cursor: unset;
    box-sizing: border-box;

    border-radius: 8px;
    overflow: hidden;
}

.home_gallery_list ul li .pic_box img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.home_gallery_list .str_wrap.str_active {
    background: transparent;
}

.home_gallery_list .str_wrap {
    background: transparent;
    height: 400px !important;
}



.home_gallery_page_bj{
    background: #070707;
}
.home_gallery_page{
    max-width: 1400px;
    width: 100%;
    position: relative;
}
.home_gallery_page .section_container_con{
    width: 100%;
}
.home_gallery_page::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    
    background-image:
        /*linear-gradient(*/
        /*    90deg,*/
        /*    rgba(5, 5, 6, 0.82) 0%,*/
        /*    rgba(15, 7, 9, 0.25) 38%,*/
        /*    rgba(15, 7, 9, 0.20) 62%,*/
        /*    rgba(5, 5, 6, 0.82) 100%*/
        /*),*/
        url("../images/home_gallery_page_bj.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;


    overflow: hidden;
}
.home_gallery_page .home_gallery_top_box{
    padding-left: 350px;
    margin-bottom: 20px;
}
.home_gallery_page .home_gallery_top_box .text{
    width: 320px;
    padding-right: 0;
}
.home_gallery_page .home_gallery_top_box .text_right{
    text-align: right;
}
.home_gallery_page .home_gallery_top_box h3{
    font-size: 2.2rem;
}
.home_gallery_page .banner_link_box {
    display: inline-block;
    width: auto;
    height: auto;
    background: #d0151b;
    padding: 10px 30px;
    box-sizing: border-box;
    border-radius: 6px;
    font-size: 18px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    margin-top: 30px;
    text-transform: uppercase;
}

.home_gallery_page .banner_link_box:hover {
    background: #fff;
    color: #d0151b;
}

/* .wello-footer */
.wello-footer {
    position: relative;
    background: #070707;
    overflow: hidden;
}

.wello-footer-inner {
    width: 100%;
    margin: 0 auto;
    padding: 90px 0 30px;
}

.wello-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1.05fr 0.9fr 1.1fr;
    gap: 55px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wello-footer-col {
    min-width: 0;
    position: relative;
    padding-right: 10px;
    padding-top: 20px;
}

.wello-footer-brand {
    padding-top: 0;
    padding-right: 40px;
}

.wello-footer-col:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 0;
    width: 1px;
    height: calc(100% - 8px);
    background: rgba(255, 255, 255, 0.08);
}

/* Logo / Brand */
.wello-footer-logo {
    display: inline-block;
    margin-bottom: 24px;
}

.wello-footer-logo img {
    width: auto;
    height: 85px;
    display: block;
}

.wello-footer-desc {
    max-width: 430px;
    margin: 0 0 35px;
    color: #CBCCCD;
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 400;
    padding-right: 15px;
    box-sizing: border-box;
}

.wello-footer-social {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.wello-footer-social a {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    transition: all 0.25s ease;
    overflow: hidden;
}

.wello-footer-social a.LinkedIn {
    width: 26px;
    height: 32px;
}

.wello-footer-social a.Facebook {
    width: 26px;
    height: 32px;
}

.wello-footer-social a:hover {
    transform: translateY(-5px);
}

/* Titles */
.wello-footer-title {
    position: relative;
    margin: 0 0 30px;
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.03em;
}

.wello-footer-title::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin-top: 15px;
    border-radius: 999px;
    background: #d0151b;
}

/* Links */
.wello-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wello-footer-links li {
    margin-bottom: 12px;
}

.wello-footer-links a {
    position: relative;
    display: inline-block;
    padding-left: 18px;
    color: #CBCCCD;
    text-decoration: none;
    font-size: 17px;
    line-height: 1.7;
    transition: all 0.25s ease;
}

.wello-footer-links a::before {
    content: "›";
    position: absolute;
    left: 0;
    top: 0;
    color: #CBCCCD;
    font-size: 18px;
    line-height: 1.4;
}

.wello-footer-links a:hover {
    color: #ffffff;
    transform: translateX(3px);
}

/* Contact */
.wello-footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 30px;
}

.wello-footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 30px;
}

.wello-footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.wello-footer-contact-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wello-footer-contact-label {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
}

.wello-footer-contact-value {
    color: #CBCCCD;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 400;
}

/* Bottom */
.wello-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 22px;
}

.wello-footer-copyright {
    color: #CBCCCD;
    font-size: 15px;
    line-height: 1.6;
}

.wello-footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.wello-footer-bottom-links a {
    color: #CBCCCD;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.25s ease;
}

.wello-footer-bottom-links a:hover {
    color: #fff;
}

.wello-footer-divider {
    color: rgba(255, 255, 255, 0.22);
}




/* blog_item_box */
.blog_item_box {
    width: 100%;
    height: auto;
    position: relative;
}

.blog_item_box a {
    display: block;
    width: 100%;
    height: auto;
}

.blog_item_box .pic_box {
    width: 100%;
    height: 460px;
    border-radius: 10px;
    overflow: hidden;
}

.blog_item_box .pic_box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* blog_page */
.blog_page {
    width: 100%;
    height: auto;
    padding: 60px 0;
    padding-bottom: 150px;
    box-sizing: border-box;
    
    
    background: radial-gradient(circle at 12% 18%, rgba(208, 21, 27, 0.10), transparent 26%), radial-gradient(circle at 88% 82%, rgba(208, 21, 27, 0.08), transparent 24%), linear-gradient(180deg, #0a0a0a 0%, #060606 100%);
    overflow: hidden;
}

.blog_list_box {
    width: 100%;
    height: auto;
}

.blog_list_box ul {
    margin: 0 -1%;
}

.blog_list_box ul li {
    float: left;
    width: 31.333333%;
    height: auto;
    margin: 1%;
    background: #fff;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 10px;

    background: linear-gradient(180deg, rgb(208 21 27 / .3) 0%, rgb(15 22 28 / .8) 100%);
    backdrop-filter: blur(4px) saturate(100%);
    -webkit-backdrop-filter: blur(4px) saturate(100%);
    border-bottom: 1px solid rgb(255 255 255 / .12);
    box-shadow: 0 8px 30px rgb(0 0 0 / .12);
}

.blog_list_box ul li .pic_box {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
}

.blog_list_box ul li .pic_box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    transition: all .4s;
}
.blog_list_box ul li:hover .pic_box img{
     transform: scale(1.16);
}
.blog_list_box ul li .title_box {
    width: 100%;
    height: auto;
    padding: 20px 0;
    box-sizing: border-box;
}

.blog_list_box ul li .title_box h3 {
    width: 100%;
    height: auto;
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.4;
    font-weight: 500;
    overflow: hidden;
    
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.blog_list_box ul li .title_box .text {
    width: 100%;
    height: auto;
    font-size: 1rem;
    color: #CBCCCD;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 30px;
    box-sizing: border-box;
    margin-top: 15px;
    
}

.blog_list_box ul li .title_box .more {
    width: 100%;
    height: auto;
    font-size: 1.2rem;
    color: #d0151b;
    line-height: 1.4;
    font-weight: 500;
    box-sizing: border-box;
    margin-top: 15px;
}


/* banner_secondary_nav */
/* .banner_secondary_nav{
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 10px;
}
.banner_secondary_nav ul li{
  float: left;
  width: auto;
  height: auto;
  margin: 10px 15px;
} */

.banner_secondary_nav .nav_list_box {
    width: 100%;
    height: auto;
    padding: 5px 0;
    box-sizing: border-box;
}

.banner_secondary_nav .nav_list_box ul li {
    float: left;
    width: auto;
    height: auto;
    margin: 10px 10px;
}

.banner_secondary_nav .nav_list_box ul li a {
    display: block;
    width: auto;
    min-width: 100px;
    height: auto;
    padding: 13px 20px;
    box-sizing: border-box;
    border-radius: 40px;
    font-size: 1.05rem;
    color: #fff;
    line-height: 20px;
    text-align: center;
    background: rgb(255 255 255 / .15);
}

.banner_secondary_nav .nav_list_box ul li a.active {
    background: linear-gradient(180deg, rgb(208 21 27 / .3) 0%, rgb(15 22 28 / .8) 100%);
    backdrop-filter: blur(4px) saturate(100%);
}

.banner_secondary_nav .nav_list_box ul li:hover a {
    background: linear-gradient(180deg, rgb(208 21 27 / .3) 0%, rgb(15 22 28 / .8) 100%);
    backdrop-filter: blur(4px) saturate(100%);
}


/* video_page */
.video_page .blog_list_box ul li .pic_box video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    transition: all .4s;
}



/* faqs_page */
.faqs_page {
     width: 100%;
    height: auto;
    padding: 60px 0;
    padding-bottom: 150px;
    box-sizing: border-box;
    
    
    background: radial-gradient(circle at 12% 18%, rgba(208, 21, 27, 0.10), transparent 26%), radial-gradient(circle at 88% 82%, rgba(208, 21, 27, 0.08), transparent 24%), linear-gradient(180deg, #0a0a0a 0%, #060606 100%);
    overflow: hidden;
}

/* ========================================
   CNC FAQ
======================================== */

.faq-section {
    width: 100%;
    /* padding: 60px 40px; */
    /* background: rgba(255, 255, 255, 0.3); */
}

.faq-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}


/* ========================================
   Header
======================================== */

.faq-header {
    margin-bottom: 50px;
}

.faq-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;

    color: #d0151b;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.faq-label::before {
    content: "";
    width: 24px;
    height: 2px;
    background: #d0151b;
}

.faq-header h2 {
    width: 100%;
    height: auto;
    font-size: 2.8rem;
    color: #fff;
    line-height: 1.2;
    font-weight: 500;
}

.faq-header p {
   width: 100%;
    height: auto;
    font-size: 1.1rem;
    color: #CBCCCD;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 30px;
    box-sizing: border-box;
    margin-top: 30px;
}


/* ========================================
   FAQ List
======================================== */

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* FAQ item */

.faq-item {
    overflow: hidden;

    background: #ccc;
    border: 1px solid #e0e3e7;
    border-radius: 8px;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.faq-item:hover {
    border-color: #d3d6da;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.035);
}


/* Remove default marker */

.faq-item summary {
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}


/* ========================================
   Question
======================================== */

.faq-item summary {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 76px;
    padding: 0 28px;

    color: #171717;

    font-size: 17px;
    font-weight: 650;
    line-height: 1.5;

    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.faq-item summary > span:first-child {
    padding-right: 50px;
}


/* ========================================
   Active Question
======================================== */

.faq-item[open] summary {
    color: #fff;

    background:
        linear-gradient(
            100deg,
            #550e11 0%,
            #550e11 48%,
            #550e11 100%
        );

       
}


/* ========================================
   Plus / Minus Icon
======================================== */

.faq-icon {
    position: relative;

    flex: 0 0 auto;

    width: 26px;
    height: 26px;

    border: 1px solid #252525;
    border-radius: 50%;

    transition:
        border-color 0.3s ease,
        transform 0.3s ease;
}


/* Horizontal line */

.faq-icon::before {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: 10px;
    height: 1.5px;

    background: #252525;

    transform: translate(-50%, -50%);

    transition: background 0.3s ease;
}


/* Vertical line */

.faq-icon::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: 1.5px;
    height: 10px;

    background: #252525;

    transform: translate(-50%, -50%);

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        opacity 0.3s ease;
}


/* Open status */

.faq-item[open] .faq-icon {
    border-color: rgba(255, 255, 255, 0.85);
}

.faq-item[open] .faq-icon::before {
    background: #fff;
}

.faq-item[open] .faq-icon::after {
    background: #fff;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}


/* ========================================
   Answer
======================================== */

.faq-content {
    padding: 24px 28px 27px;

    background: rgb(255 255 255 / .15);
}

.faq-content p {
    max-width: 1200px;

    margin: 0;

    color: #555;
    font-size: 16px;
    line-height: 1.8;
}


/* ========================================
   Desktop Hover
======================================== */

@media (hover: hover) {

    .faq-item:not([open]) summary:hover {
        color: #d0151b;
    }

    .faq-item:not([open]) summary:hover .faq-icon {
        border-color: #d0151b;
    }

    .faq-item:not([open]) summary:hover .faq-icon::before,
    .faq-item:not([open]) summary:hover .faq-icon::after {
        background: #d0151b;
    }
}







/* about */
.banner_about_pro .num_list_box {
    width: 100%;
    height: auto;
    padding: 50px 40px;
    box-sizing: border-box;
    margin-bottom: 50px;
    
    background: linear-gradient(180deg, rgb(208 21 27 / .3) 0%, rgb(15 22 28 / .8) 100%);
    /* background: linear-gradient(180deg, rgb(15 22 28 / .8) 0%, rgb(208 21 27 / .3) 100%); */
    backdrop-filter: blur(4px) saturate(100%);
    -webkit-backdrop-filter: blur(4px) saturate(100%);
    border-bottom: 1px solid rgb(255 255 255 / .12);
    box-shadow: 0 8px 30px rgb(0 0 0 / .12);
    
    border-radius: 20px;
}

.banner_about_pro .num_list_box .list_box {
    display: flex;
    justify-content: space-between;
}

.banner_about_pro .num_list_box .list_box .num_box h3 {
    width: 100%;
    height: auto;
    width: 100%;
    height: auto;
    font-size: 2.8rem;
    color: #fff;
    line-height: 1.2;
    font-weight: 500;
    text-align: center;
}

.banner_about_pro .num_list_box .list_box .num_box h3 strong {
    font-size: 1.5rem;
    color: #fff;
    margin-left: 8px;
    font-weight: 500;
}

.banner_about_pro .num_list_box .list_box .num_box p {
    display: block;
    width: 100%;
    height: auto;
    font-size: 1.1rem;
    color: #CBCCCD;
    line-height: 1.4;
    font-weight: 500;
    text-align: center;
    margin-top: 15px;
}


/* about_page */
.about_page {
    width: 100%;
    height: auto;
    min-height: 600px;
    
    background:
        radial-gradient(circle at 12% 18%, rgba(208, 21, 27, 0.10), transparent 26%),
        radial-gradient(circle at 88% 82%, rgba(208, 21, 27, 0.08), transparent 24%),
        linear-gradient(180deg, #0a0a0a 0%, #060606 100%);
    overflow: hidden;
}



/* about_page_section */
.about_page_section {
    width: 100%;
    height: auto;
    padding: 100px 0;
    box-sizing: border-box;
}

.about_page_section_conter {
    width: 100%;
    height: auto;
}

.about_page_section_left {
    float: left;
    width: 50%;
    height: auto;
    box-sizing: border-box;
    padding-right: 4%;
}

/* 顶部小标题 */
.about_page_section_left .t {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 16px;

  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.75);
}

.about_page_section_left .t .red-line {
  width: 30px;
  height: 3px;

  background: #d0151b;
  border-radius: 2px;
}

.about_page_section_left .text_box {
    width: 100%;
    height: auto;
    position: relative;
    box-sizing: border-box;
}

.about_page_section_left .text_box h3 {
    width: 100%;
    height: auto;
    font-size: 2.8rem;
    color: #fff;
    line-height: 1.2;
    font-weight: 500;
}

.about_page_section_left .text_box .text {
    width: 100%;
    height: auto;
    font-size: 1.05rem;
    color: #CBCCCD;
    line-height: 1.4;
    font-weight: 400;
    margin-bottom: 30px;
    box-sizing: border-box;
    margin-top: 30px;
}


.about_page_section_left .text_box .text p {
    margin-bottom: 20px;
}

.about_page_section_left .text_box .text p strong{
    color: #fff;
     font-size: 1.3rem;
}

.brand-highlight {
    position: relative;
    display: flex;
    align-items: center;
    gap: 35px;

    width: 100%;
    padding: 28px 32px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(208, 21, 27, 0.12),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.015)
        );

    border: 1px solid rgba(255,255,255,0.12);
    border-left: 3px solid #d0151b;

    border-radius: 10px;

    overflow: hidden;
    
    box-sizing: border-box;
    margin-top: 50px;
}

/* 左侧引号 */
.brand-highlight__quote {
    flex: 0 0 auto;

    font-size: 72px;
    line-height: 0.8;
    font-weight: 700;

    color: #d0151b;

    font-family: Georgia, serif;
    transform: translateY(-4px);
}

/* 分隔线 */
.brand-highlight__content {
    position: relative;
    padding-left: 35px;
}

.brand-highlight__content::before {
    content: "";
    position: absolute;

    left: 0;
    top: 4px;

    width: 1px;
    height: calc(100% - 8px);

    background: rgba(255,255,255,0.18);
}

/* 小标题 */
.brand-highlight__label {
    display: block;
    margin-bottom: 8px;

    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;

    color: #d0151b;
}

/* 主文案 */
.brand-highlight p {
    margin: 0;

    max-width: 620px;

    font-size: 20px;
    line-height: 1.55;
    font-weight: 400;

    color: rgba(255,255,255,0.88);
}

/* 强调部分 */
.brand-highlight strong {
    color: #fff;
    font-weight: 600;
}

/* 微弱红色光效 */
.brand-highlight::after {
    content: "";
    position: absolute;

    width: 180px;
    height: 180px;

    left: -80px;
    bottom: -100px;

    background: rgba(208,21,27,0.15);
    filter: blur(70px);

    pointer-events: none;
}




.about_page_section_right {
    float: left;
    width: 50%;
    height: auto;
    box-sizing: border-box;
    padding-left: 2%;
}

.about_page_section_right .pic_box {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / .06);
    box-sizing: border-box;
}

.about_page_section_right img {
    display: block;
    width: 100%;
    height: auto;
}

/* about_page_who */
.about_page_who {
    padding-top: 120px;
    padding-bottom: 100px;
    /* background: rgba(35, 97, 182, 0.07); */
}

.about_page_who .about_page_section_left {
    float: right;
    padding-left: 4%;
    padding-right: 0;
    padding-top: 0%;
}

.about_page_who .about_page_section_right {
    padding-left: 0;
    padding-right: 4%;
}
/*.about_page_who .about_page_section_right .video_box{*/
/*    width: 100%;*/
/*    height: auto;*/
/*}*/
/*.about_page_who .about_page_section_right .video_box video{*/
/*    width: 100%;*/
/*    height: auto;*/
/*}*/
.about_page_who .list {
    width: 100%;
    height: auto;
    margin-top: 40px;
}

.about_page_who .list ul {
    margin: 0 -2%;
}

.about_page_who .list li {
    float: left;
    width: 46%;
    height: auto;
    padding-left: 90px;
    box-sizing: border-box;
    position: relative;
    margin: 0 2%;
    margin-bottom: 30px;
}

.about_page_who .list li h4 {
    font-size: 19px;
    color: #1660ab;
    line-height: 30px;
    font-weight: 700;
    margin-bottom: 5px;
}

.about_page_who .list li p {
    width: 100%;
    height: auto;
    font-size: 17px;
    color: #687684;
    line-height: 24px;
    font-weight: 500;
    box-sizing: border-box;
}

.about_page_who .list li .icon {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: rgba(35, 97, 182, 0.07);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.about_page_who .list li .icon svg {
    width: 60px;
    height: 60px;
    display: block;
}

.about_page_who .list li .title_check {
    position: absolute;
    top: 5px;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1660ab;
    margin-right: .5rem;

    display: none;
}

.about_page_who .list li .title_check::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    width: 8px;
    height: 4px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
}



/* about_canada_list*/
.about_page_who .about_canada_list {
    width: 100%;
    height: auto;
    margin-top: 30px;
}

.about_page_who .about_canada_list li {
    float: left;
    width: 100%;
    height: auto;
    padding-left: 35px;
    box-sizing: border-box;
    position: relative;
    margin-top: 10px;
}

.about_page_who .about_canada_list li h4 {
    font-size: 1.3rem;
    color: #fff;
    line-height: 1.4;
    font-weight: 500;
}

.about_page_who .about_canada_list li .title_check {
    position: absolute;
    top: 5px;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #d0151b;
    margin-right: .5rem;
}

.about_page_who .about_canada_list li .title_check::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    width: 8px;
    height: 4px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
}




/* about_product_portfolio */
.about_product_portfolio {
    padding-bottom: 0;
}

.about_product_portfolio .wello-about-video {
    width: 100%;
}
.about_product_portfolio .wello-about-video video{
    display: block;
    width: 100%;
    height: auto;
}
.about_product_portfolio .list {
    width: 100%;
    height: auto;
    margin-top: 40px;
}

.about_product_portfolio .list li {
    float: left;
    width: 100%;
    height: auto;
    padding-left: 35px;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 20px;
}

.about_product_portfolio .list li h4 {
    font-size: 1.3rem;
    color: #fff;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 10px;
}

.about_product_portfolio .list li p {
    width: 100%;
    height: auto;
    font-size: 1rem;
    color: #CBCCCD;
    line-height: 1.4;
    font-weight: 500;
    box-sizing: border-box;
}

.about_product_portfolio .list li .title_check {
    position: absolute;
    top: 5px;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #d0151b;
    margin-right: .5rem;
}

.about_product_portfolio .list li .title_check::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    width: 8px;
    height: 4px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
}




/* about_page_team */
.about_page_team{
    padding-top: 50px;
}
.about_page_team .title_box {
    width: 65%;
    height: auto;
    position: relative;
    box-sizing: border-box;
}

.about_page_team .title_box h3 {
    width: 100%;
    height: auto;
    font-size: 2.8rem;
    color: #fff;
    line-height: 1.2;
    font-weight: 500;
}

.about_page_team .title_box .text {
    width: 100%;
    height: auto;
    font-size: 1.1rem;
    color: #CBCCCD;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 40px;
    box-sizing: border-box;
    margin-top: 30px;
}

.about_page_team .title_box .text p {
    margin-bottom: 20px;
}


.yfh-team-list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 50px;
    width: 100%;
}

.yfh-team-person {
    display: grid;
    grid-template-columns: 35% 65%;
    min-height: 300px;
    background: #090a0c;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .05);
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
}

/* 图片区域 */
.yfh-team-photo {
    position: relative;
    min-height: 300px;
    overflow: hidden;
}

.yfh-team-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* 图片和文字衔接更柔和 */
.yfh-team-photo::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, #090a0c 100%);
    pointer-events: none;
}

/* 文字区域 */
.yfh-team-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 40px 40px 40px;
    background:
        radial-gradient(circle at 100% 50%, rgba(208, 21, 27, 0.08), transparent 45%),
        #090a0c;
}

.yfh-team-info h3 {
    margin: 0 0 16px;
    position: relative;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 600;
    color: #fff;
}

.yfh-team-info h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -9px;
    width: 40px;
    height: 3px;
    background: #d0151b;
}

.yfh-team-role {
    margin-bottom: 20px;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}

.yfh-team-info p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.68);
}

.yfh-team-info p:last-child {
    margin-bottom: 0;
}




/* ==============================
   Manufacturing Capabilities
============================== */

.yfh-capabilities {
    width: 100%;
    padding: 100px 0;
    padding-top: 50px;

}

.yfh-capabilities-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}


/* ==============================
   标题
============================== */

.yfh-capabilities-head {
    max-width: 820px;
    margin: 0 auto 60px;
    text-align: center;
}

.yfh-capabilities-head h2 {
    margin: 0 0 18px;

    font-size: 44px;
    line-height: 1.2;
    font-weight: 600;

    color: #fff;
}

.yfh-capabilities-head p {
    margin: 0 auto;

    max-width: 760px;

    font-size: 17px;
    line-height: 1.65;
    font-weight: 400;

    color: rgba(255, 255, 255, 0.68);
}


/* ==============================
   Grid
============================== */

.yfh-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    column-gap: 26px;
    row-gap: 26px;
}


/* ==============================
   单项
============================== */

.yfh-capability-item {
    display: block;

    color: #fff;
    text-decoration: none;

    text-align: center;
}


/* 图片 */
.yfh-capability-img {
    position: relative;

    width: 100%;
    aspect-ratio: 1.5 / 1;

    overflow: hidden;

    background: #111;
    
    border: 1px solid rgb(255 255 255 / .35);
    box-sizing: box-sizing;
}

.yfh-capability-img img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.55s ease,
        filter 0.55s ease;
}


/* 轻微暗层 */
.yfh-capability-img::after {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.06);

    transition: background 0.4s ease;

    pointer-events: none;
}


/* 标题 */
.yfh-capability-item h3 {
    position: relative;

    display: inline-block;

    margin: 17px 0 0;

    padding-bottom: 13px;

    font-size: 19px;
    line-height: 1.4;
    font-weight: 500;

    color: #fff;
}


/* 红色短线 */
.yfh-capability-item h3::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 38px;
    height: 2px;

    background: #d0151b;

    transform: translateX(-50%);

    transition: width 0.35s ease;
}


/* ==============================
   Hover
============================== */

.yfh-capability-item:hover .yfh-capability-img img {
    transform: scale(1.045);
}

.yfh-capability-item:hover .yfh-capability-img::after {
    background: rgba(0, 0, 0, 0);
}

.yfh-capability-item:hover h3::after {
    width: 58px;
}




/* about_page_mission */
.about_page_mission {
    padding-bottom: 20px;
    padding-top: 60px;
}
.about_canada_page_mission{
    padding-bottom: 40px;
}
.about_page_mission .about_page_section_left {
    float: right;
    padding-left: 4%;
    padding-right: 0;
}

.about_page_mission .about_page_section_right {
    padding-left: 0;
    padding-right: 4%;
}

.about_page_mission .wello-about-video {
    width: 100%;
    height: auto;
}
.about_page_mission .wello-about-video video{
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / .50);
}
.about_page_mission .list {
    width: 100%;
    height: auto;
    margin-top: 30px;
}

.about_page_mission .list li {
    float: left;
    width: 100%;
    height: auto;
    padding-left: 35px;
    box-sizing: border-box;
    position: relative;
   margin-top: 18px;
}

.about_page_mission .list li h4 {
    font-size: 1.3rem;
    color: #fff;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 5px;
  
}

.about_page_mission .list li p {
    width: 100%;
    height: auto;
    font-size: 1rem;
    color: #CBCCCD;
    line-height: 1.4;
    font-weight: 500;
    box-sizing: border-box;
}

.about_page_mission .list li .title_check {
    position: absolute;
    top: 5px;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #d0151b;
    margin-right: .5rem;
}

.about_page_mission .list li .title_check::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    width: 8px;
    height: 4px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
}


/* about_page_factory */
.about_page_factory {
  padding-bottom: 150px;
}

.about_page_factory .about_page_section_left {
    float: none;
    width: 100%;
    padding: 0;
    margin-bottom: 40px;
}

/* ==============================
   Factory Gallery
================================= */

.factory-gallery {
    width: 100%;
    box-sizing: border-box;
}

.factory-gallery__grid {
    width: 100%;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(3, 260px);
    gap: 20px;
}


/* ==============================
   Image Card
================================= */

.factory-gallery__item {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #edf2f7;
    box-shadow: 0 4px 18px rgba(20, 54, 95, 0.06);

    border: 1px solid #555;
    box-sizing: border-box;
}

.factory-gallery__item::before {
    content: " ";
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0, 0.05);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}

.factory-gallery__item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;
    pointer-events: none;

    background: linear-gradient(to top,
            rgba(4, 28, 59, 0.40),
            rgba(4, 28, 59, 0));

    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 10;
}

.factory-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.55s cubic-bezier(0.2, 0.65, 0.3, 1),
        filter 0.4s ease;
}

.factory-gallery__item:hover img {
    transform: scale(1.045);
    filter: brightness(0.96);
}

.factory-gallery__item:hover::after {
    opacity: 1;
}


/* ==============================
   Image Label
================================= */

.factory-gallery__label {
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 2;

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

    min-height: 36px;
    padding: 0 16px;

    color: #d0151b;
    background: rgba(255, 255, 255, 0.80);

    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 7px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;

    box-shadow: 0 5px 16px rgba(5, 34, 68, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    z-index: 11;
    
    display: none;
}


/* ==============================
   Desktop Grid Placement
================================= */

/* 左侧大图：占两排、六列 */
.factory-gallery__item--main {
    grid-column: 1 / 7;
    grid-row: 1 / 3;
}


/* 右侧第一排：两张图 */
.factory-gallery__item--top-1 {
    grid-column: 7 / 10;
    grid-row: 1;
}

.factory-gallery__item--top-2 {
    grid-column: 10 / 13;
    grid-row: 1;
}


/* 右侧第二排：三张图 */
.factory-gallery__item--middle-1 {
    grid-column: 7 / 10;
    grid-row: 2;
}

.factory-gallery__item--middle-2 {
    grid-column: 10 / 13;
    grid-row: 2;
}

.factory-gallery__item--middle-3 {
    grid-column: 11 / 13;
    grid-row: 2;
}


/* 最下面第三排：四张图 */
.factory-gallery__item--bottom-1 {
    grid-column: 1 / 4;
    grid-row: 3;
}

.factory-gallery__item--bottom-2 {
    grid-column: 4 / 7;
    grid-row: 3;
}

.factory-gallery__item--bottom-3 {
    grid-column: 7 / 10;
    grid-row: 3;
}

.factory-gallery__item--bottom-4 {
    grid-column: 10 / 13;
    grid-row: 3;
}




/* about_page_global */
.about_page_global{
    padding-bottom: 50px;
}
.about_page_global .title_box{
    width: 80%;
}

/* =========================
   图片网格
========================= */

.partnership-gallery {
  display: grid;

  grid-template-columns:
    1fr
    1fr
    1fr;

  gap: 20px;
  
  margin-bottom: 50px;
}


/* 第一张大图 */
.partnership-card--large {
  grid-row: span 1;
}


/* 通用卡片 */
.partnership-card {
  position: relative;

  min-height: 300px;

  overflow: hidden;

  border-radius: 10px;

  background: #111;

  border: 1px solid rgba(255,255,255,.08);
}


.partnership-card img {
  width: 100%;
  height: 100%;

  position: absolute;
  inset: 0;

  object-fit: cover;

  transition:
    transform .55s ease,
    filter .55s ease;
}


.partnership-card:hover img {
  transform: scale(1.04);
}


/* 图片遮罩 */
.partnership-card::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.12) 35%,
      rgba(0,0,0,.95) 100%
    );
}


/* 图片文字 */
.partnership-card__overlay {
  position: absolute;

  left: 24px;
  right: 24px;
  bottom: 22px;

  z-index: 2;
}


.partnership-card__title {
  position: relative;

  padding-left: 18px;

  color: #fff;

  font-size: 18px;
  font-weight: 600;
}


.partnership-card__title::before {
  content: "";

  position: absolute;

  left: 0;
  top: 3px;

  width: 3px;
  height: 18px;

  background: #d0151b;

  border-radius: 2px;
}


.partnership-card__text {
  margin-top: 6px;

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

  font-size: 14px;
  line-height: 1.5;
  
  display: none;
}


/* 第二排 */
/*.partnership-gallery*/
/*.partnership-card:nth-child(n+4) {*/
/*  min-height: 270px;*/
/*}*/




/* ===== Quality mini cards ===== */
.quality-mini-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}

.quality-mini-card{
  position: relative;
  padding: 15px 22px 24px;
  border-radius: 12px;
  overflow: hidden;

  background:
    linear-gradient(180deg, rgba(20,20,20,.96) 0%, rgba(10,10,10,.98) 100%);
  border: 1px solid rgba(255,255,255,.08);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.quality-mini-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(208,21,27,.16), transparent 32%);
  pointer-events: none;
}

.quality-mini-card:hover{
  transform: translateY(-4px);
  border-color: rgba(208,21,27,.45);
  box-shadow:
    0 10px 30px rgba(0,0,0,.28),
    0 0 22px rgba(208,21,27,.08);
}

.quality-mini-card__icon{
  width: 66px;
  height: 66px;
  margin-bottom: 15px;
  border-radius: 15px;

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

  background:
    radial-gradient(circle at 30% 30%, rgba(208,21,27,.30), rgba(208,21,27,.08) 45%, rgba(255,255,255,.02) 100%);

  box-shadow:
    inset 0 0 16px rgba(255,255,255,.03),
    0 0 18px rgba(208,21,27,.06);
}

.quality-mini-card__icon svg{
  width: 46px;
  height: 46px;
  display: block;
}

.quality-mini-card h4{
  margin: 0 0 10px;
  color: #fff;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.2px;
}

.quality-mini-card p{
  margin: 0;
  color: rgba(255,255,255,.64);
  font-size: 14px;
  line-height: 1.65;
}




/* ==========================
   Quality Control Process
========================== */

/* ==========================
   表格外层
========================== */

.quality-process__table-wrap {
  width: 100%;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;

  background: #0c0c0c;
}


/* ==========================
   Table
========================== */

.quality-process__table {
  width: 100%;

  border-collapse: collapse;
  table-layout: fixed;
}


/* 表头 */
.quality-process__table thead {
  background:
    linear-gradient(
      90deg,
      rgba(208,21,27,.55) 0%,
      rgba(110,14,18,.68) 40%,
      rgba(208,21,27,.42) 100%
    );
}


.quality-process__table th {
  padding: 18px 20px;

  color: #fff;

  font-size: 1.35rem;
  font-weight: 600;
  text-align: left;

  border-right:
    1px solid rgba(255,255,255,.08);
}


.quality-process__table th:last-child {
  border-right: 0;
}


/* 第一列 */
.quality-process__table .col-number {
  width: 70px;
}


/* 各列宽度 */
.quality-process__table th:nth-child(2) {
  width: 22%;
}

.quality-process__table th:nth-child(3) {
  width: 42%;
}

.quality-process__table th:nth-child(4) {
  width: 30%;
}


/* ==========================
   表格内容
========================== */

.quality-process__table td {
  padding: 17px 20px;

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

  font-size: 1.1rem;
  line-height: 1.6;
  vertical-align: middle;

  border-top:
    1px solid rgba(255,255,255,.07);

  border-right:
    1px solid rgba(255,255,255,.055);

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


.quality-process__table td:last-child {
  border-right: 0;
}


.quality-process__table strong {
  color: rgba(255,255,255,.92);

  font-size: 1.15rem;
  font-weight: 500;
}


/* hover */
.quality-process__table tbody tr {
  transition: background .25s ease;
}


.quality-process__table tbody tr:hover {
  background:
    linear-gradient(
      90deg,
      rgba(208,21,27,.08),
      rgba(255,255,255,.01)
    );
}


/* ==========================
   红色数字
========================== */

.quality-step {
  width: 34px;
  height: 34px;

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

  border-radius: 50%;

  background: #d0151b;

  color: #fff;

  font-size: 12px;
  font-weight: 600;

  box-shadow:
    0 0 0 5px rgba(208,21,27,.08),
    0 0 16px rgba(208,21,27,.18);
}





/* services */
.model-box {
    width: min(760px, 90vw);
    height: min(650px, 75vh);
}

model-viewer {
    width: 100%;
    height: 550px;
    background: transparent;

    /* 模型加载完成前，保持占位图尺寸合理 */
    --poster-color: transparent;
}

canvas {
    display: block !important;
}




/* about Canada*/
/* =========================
   Canada Process
========================= */

.canada-process {
  width: 100%;
}

.canada-process__inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px;
}


/* 卡片 */
.process-card {
  position: relative;
  overflow: visible;

  background:
    linear-gradient(
      180deg,
      rgba(26, 26, 26, 0.96) 0%,
      rgba(13, 13, 13, 0.98) 100%
    );

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.process-card:hover {
  transform: translateY(-6px);

  border-color: rgba(208, 21, 27, 0.5);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, .35),
    0 0 30px rgba(208, 21, 27, .06);
}


/* 图片 */
.process-card__image {
  width: 100%;
  height: 220px;
  overflow: hidden;

  border-radius: 9px 9px 0 0;
}

.process-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;

  transition: transform .55s ease;
}

.process-card:hover .process-card__image img {
  transform: scale(1.045);
}


/* 内容 */
.process-card__content {
  min-height: 230px;
  padding: 24px 24px 30px;
  box-sizing: border-box;
}


/* 数字 */
.process-card__number {
  margin-bottom: 15px;

  color: #d0151b;

  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
}


/* 标题 */
.process-card__content h3 {
  margin: 0 0 13px;

  color: #fff;

  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}


/* 描述 */
.process-card__content p {
  margin: 0;

  color: rgba(255, 255, 255, 0.62);

  font-size: 14px;
  line-height: 1.65;
}


/* =========================
   卡片中间箭头
========================= */

.process-arrow {
  position: absolute;
  z-index: 10;

  top: 50%;
  right: -48px;

  width: 34px;
  height: 34px;

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

  transform: translateY(-50%);

  background: #d0151b;
  border-radius: 50%;

  box-shadow:
    0 0 0 5px rgba(208, 21, 27, .10),
    0 7px 18px rgba(0, 0, 0, .3);
}

.process-arrow span {
  position: relative;
  top: -1px;

  color: #fff;

  font-size: 26px;
  font-weight: 300;
  line-height: 1;
}


/* 两边的小连接线 */
.process-arrow::before,
.process-arrow::after {
  content: "";
  position: absolute;

  top: 50%;
  width: 13px;
  height: 1px;

  background: rgba(208, 21, 27, .55);
}

.process-arrow::before {
  right: 100%;
}

.process-arrow::after {
  left: 100%;
}



/* =========================
   Canada Warehouse Gallery
========================= */

.canada-gallery {
  width: 100%;
  padding: 40px 0;
  padding-bottom: 150px;
}

.canada-gallery-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 26px;
}


/* 通用图片 */
.canada-gallery-item {
  position: relative;
  overflow: hidden;

  background: #111;
  border-radius: 8px;

  border: 1px solid rgba(255,255,255,.08);
}

.canada-gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;

  transition: transform .5s ease;
}


/* 第一排 3 张 */
.gallery-small {
  grid-column: span 2;
  height: 360px;
}


/* 第二排 2 张 */
.gallery-large {
  grid-column: span 3;
  height: 440px;
}


/* hover */
.canada-gallery-item:hover img {
  transform: scale(1.04);
}


/* 轻微遮罩，让它更融合黑色网站 */
.canada-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,.18) 100%
    );

  pointer-events: none;
}


/* =========================
   1200px
========================= */

@media (max-width: 1200px) {

  .gallery-small {
    height: 300px;
  }

  .gallery-large {
    height: 380px;
  }

}


/* =========================
   平板
========================= */

@media (max-width: 900px) {

  .canada-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-small,
  .gallery-large {
    grid-column: span 1;
    height: 300px;
  }

  /* 第5张占满一行 */
  .canada-gallery-item:nth-child(5) {
    grid-column: span 2;
  }

}




/* =========================
   Delivery Workflow Module
========================= */
.delivery-workflow-module {
  width: 100%;
  padding: 10px 0 0;
}

.delivery-workflow-inner {
  width: 100%;
}




/* ==================================================
   QUALITY ASSURANCE WORKFLOW
================================================== */

.quality-assurance-workflow {
  width: 100%;
  padding: 10px 0 0;
}

.quality-assurance-workflow__inner {
  width: 100%;
}


/* ==================================================
   8 STEPS
================================================== */

.quality-assurance-workflow__steps {
  display: grid;

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

  gap: 16px 24px;

  align-items: stretch;
}


/* 每一个步骤 + 箭头 */
.quality-assurance-workflow__item {
  display: grid;

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

  column-gap: 12px;

  align-items: center;

  min-width: 0;
}


/* 每行最后一个没有箭头 */
.quality-assurance-workflow__item--end {
  grid-template-columns: minmax(0, 1fr);
}


/* ==================================================
   STEP CARD
================================================== */

.quality-assurance-step {
  position: relative;

  min-height: 135px;

  padding: 20px 14px 25px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  overflow: hidden;

  border-radius: 10px;

  background:
    linear-gradient(
      180deg,
      rgba(16,16,16,.97) 0%,
      rgba(8,8,8,.98) 100%
    );

  border:
    1px solid rgba(255,255,255,.10);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.quality-assurance-step:hover {
  transform: translateY(-4px);

  border-color:
    rgba(208,21,27,.42);

  box-shadow:
    0 12px 30px rgba(0,0,0,.28);
}


/* ==================================================
   STEP NUMBER
================================================== */

.quality-assurance-step__number {
  position: absolute;

  top: 12px;
  left: 12px;

  width: 42px;
  height: 42px;

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

  border-radius: 50%;

  background: #ff1828;

  color: #fff;

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

  line-height: 1;

  box-shadow:
    0 4px 14px rgba(208,21,27,.16);
}


/* ==================================================
   ICON
================================================== */

.quality-assurance-step__icon {
  margin-top: 8px;
  margin-bottom: 16px;

  color: rgba(255,255,255,.95);
}


.quality-assurance-step__icon svg {
  display: block;

  width: 52px;
  height: 52px;
}


/* ==================================================
   STEP TITLE
================================================== */

.quality-assurance-step h3 {
  margin: 0;

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

  font-size: 18px;
  line-height: 1.25;

  font-weight: 500;

  letter-spacing: -.2px;
}


/* ==================================================
   ARROW
================================================== */

.quality-assurance-workflow__arrow {
  display: flex;

  align-items: center;
  justify-content: center;

  color: #ff1828;

  font-size: 42px;
  font-weight: 300;

  line-height: 1;

  transform: translateY(-1px);
}


/* ==================================================
   BOTTOM 4 BENEFITS
================================================== */

.quality-assurance-benefits {
  display: grid;

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

  gap: 18px;

  margin-top: 50px;
}


/* ==================================================
   BENEFIT CARD
================================================== */

.quality-assurance-benefit {
  min-height: 155px;

  padding: 28px 30px 26px;

  border-radius: 12px;

  border:
    1px solid rgba(255,255,255,.09);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.quality-assurance-benefit:hover {
  transform: translateY(-3px);

  border-color:
    rgba(208,21,27,.30);

  box-shadow:
    0 10px 26px rgba(0,0,0,.20);
}


/* 左边两个 */
.quality-assurance-benefit--dark {
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(32,55,75,.18),
      transparent 50%
    ),
    linear-gradient(
      180deg,
      #101214 0%,
      #090a0b 100%
    );
}


/* 右边两个 */
.quality-assurance-benefit--red {
  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(208,21,27,.16),
      transparent 50%
    ),
    linear-gradient(
      180deg,
      #221012 0%,
      #0d090a 100%
    );

  border-color:
    rgba(208,21,27,.22);
}


/* ==================================================
   RED LINE
================================================== */

.quality-assurance-benefit__line {
  display: block;

  width: 48px;
  height: 4px;

  margin-bottom: 20px;

  background: #ff1828;

  border-radius: 10px;
}


/* ==================================================
   BENEFIT TITLE
================================================== */

.quality-assurance-benefit h4 {
  margin: 0 0 16px;

  color: #fff;

  font-size: 19px;

  line-height: 1.35;

  font-weight: 600;

  letter-spacing: -.2px;
}


/* ==================================================
   BENEFIT TEXT
================================================== */

.quality-assurance-benefit p {
  margin: 0;

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

  font-size: 14px;

  line-height: 1.75;
}


/* ==================================================
   1440
================================================== */

@media (max-width: 1440px) {

  .quality-assurance-workflow__steps {
    gap: 14px 18px;
  }


  .quality-assurance-workflow__item {
    grid-template-columns:
      minmax(0, 1fr)
      24px;

    column-gap: 8px;
  }


  .quality-assurance-workflow__item--end {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .quality-assurance-step {
    min-height: 195px;

    padding:
      18px 12px 15px;
  }


  .quality-assurance-step h3 {
    font-size: 16px;
  }


  .quality-assurance-step__icon svg {
    width: 48px;
    height: 48px;
  }


  .quality-assurance-workflow__arrow {
    font-size: 36px;
  }


  .quality-assurance-benefit {
    padding:
      24px 24px 22px;
  }

}


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

@media (max-width: 991px) {

  .quality-assurance-workflow__steps {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .quality-assurance-workflow__item,
  .quality-assurance-workflow__item--end {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .quality-assurance-workflow__arrow {
    display: none;
  }


  .quality-assurance-benefits {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


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

@media (max-width: 600px) {

  .quality-assurance-workflow__steps {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 12px;
  }


  .quality-assurance-step {
    min-height: 175px;
  }


  .quality-assurance-step__number {
    width: 36px;
    height: 36px;

    font-size: 13px;
  }


  .quality-assurance-step__icon svg {
    width: 42px;
    height: 42px;
  }


  .quality-assurance-step h3 {
    font-size: 15px;
  }


  .quality-assurance-benefits {
    grid-template-columns: 1fr;

    gap: 12px;

    margin-top: 18px;
  }


  .quality-assurance-benefit {
    min-height: auto;

    padding:
      22px 20px;
  }


  .quality-assurance-benefit h4 {
    font-size: 18px;

    margin-bottom: 12px;
  }

}




/* =========================================================
   YUNFENGHE MEGA MENU
   CNC Services / Capabilities / Industries / Resources
========================================================= */

:root {
    --red: #d0151b;

    --menu-bg: #ffffff;
    --menu-text: #111318;
    --menu-gray: #737985;
    --menu-line: #e8e9ec;

    --menu-radius: 12px;
}


/* =========================================================
   主导航
========================================================= */

.main-nav {
    display: flex;
    align-items: center;
    gap: 38px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.nav-item {
    position: relative;
}


.nav-link {
    position: relative;

    height: 76px;

    display: flex;
    align-items: center;

    gap: 8px;

    color: #fff;

    font-size: 16px;
    font-weight: 500;

    text-decoration: none;
    white-space: nowrap;

    transition: color .25s ease;
}


/* 下箭头 */
.nav-arrow {
    width: 6px;
    height: 6px;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg) translateY(-2px);

    transition: transform .25s ease;
}


/* 一级菜单底部红线 */
.nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background: var(--red);

    transform: scaleX(0);

    transition: transform .25s ease;
}


/* hover */
.has-mega:hover>.nav-link::after,
.has-mega:focus-within>.nav-link::after {
    transform: scaleX(1);
}


.has-mega:hover .nav-arrow,
.has-mega:focus-within .nav-arrow {
    transform: rotate(225deg);
}



/* =========================================================
   MEGA MENU 主容器
========================================================= */

.mega-menu {
    position: absolute;

    top: 76px;
    left: 50%;

    width: 800px;
    min-height: 350px;

    padding: 14px;

    display: grid;

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

    background: #fff;

    border-radius: 12px;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, .30);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(-32%) translateY(14px);

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s;

    z-index: 9999;
}


.mega-menu-About {
    width: 550px;
}
.mega-menu-Resources{
    width: 550px;
}
.mega-menu-Materials{
    width: 585px;
}

/* 顶部白色小三角 */
.mega-menu::before {
    content: "";

    position: absolute;

    top: -7px;
    left: 250px;

    width: 15px;
    height: 15px;

    background: #fff;

    transform: rotate(45deg);

    border-radius: 2px;
}

.has-mega-Resources .mega-menu::before {
    left: 200px;
}

/* 展开 */
.has-mega:hover>.mega-menu,
.has-mega:focus-within>.mega-menu {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-32%) translateY(0);
}



/* =========================================================
   左侧视觉模块
========================================================= */

.mega-feature {
    position: relative;

    min-height: 322px;

    overflow: hidden;

    border-radius: 9px;

    background: #111;
}


/* 图片 */
.mega-feature-img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .55s ease;
}


.mega-feature:hover .mega-feature-img {
    transform: scale(1.045);
}



/* 黑色渐变 */
.mega-feature-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, .05) 0%,
            rgba(0, 0, 0, .18) 30%,
            rgba(0, 0, 0, .88) 100%);
}



/* 内容 */
.mega-feature-content {
    position: absolute;

    left: 24px;
    right: 24px;
    bottom: 23px;

    color: #fff;

    z-index: 2;
}



/* =========================================================
   每个一级栏目只保留一个主 Icon
========================================================= */

.mega-main-icon {
    width: 48px;
    height: 48px;

    margin-bottom: 13px;

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


.mega-main-icon svg {
    width: 44px;
    height: 44px;

    fill: none;

    stroke: #fff;

    stroke-width: 2.1;

    stroke-linecap: round;
    stroke-linejoin: round;
}



/* 左侧标题 */
.mega-feature-content h3 {
    margin: 0 0 9px;

    color: #fff;

    font-size: 27px;
    line-height: 1.08;

    font-weight: 650;

    letter-spacing: -0.4px;
}


/* 简介 */
.mega-feature-content p {
    max-width: 250px;

    margin: 0 0 19px;

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

    font-size: 14px;

    line-height: 1.5;
}



/* 左下角入口 */
.mega-feature-more {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--red);

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition:
        gap .22s ease;
}


.mega-feature-more:hover {
    gap: 13px;
}



/* =========================================================
   右侧菜单公共区域
========================================================= */

.mega-links {
    padding:

        8px 10px 8px 28px;
}


/* 两列结构 */
.mega-links-2 {
    display: grid;

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


/* 单列结构 */
.mega-links-1 {
    display: grid;

    grid-template-columns: 1fr;
}



/* =========================================================
   右侧单个入口
========================================================= */

.mega-link {
    position: relative;

    min-height: 80px;

    padding:
        10px 15px 10px 20px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    border-bottom:
        1px solid var(--menu-line);

    color: var(--menu-text);

    text-decoration: none;

    transition:
        background .22s ease,
        padding-left .22s ease;
}

.mega-menu-Services .mega-link{
     min-height: 70px;
}

/* 两列中间分割线 */
.mega-links-2 .mega-link:nth-child(odd) {
    border-right:
        1px solid #e8e9ec;
}



/* 标题 */
.mega-link h4 {
    margin: 0 0 6px;
    font-size: 1.05rem;
    color: #303030;
    line-height: 1.25;
    font-weight: 650;
    text-align: left;
    transition: color .2s ease;
}

/* 简介 */
.mega-link p {
    max-width: 235px;
    margin: 0;
    color: #737985;
    font-size: .85rem;
    line-height: 1.4;
    text-align: left;

}


/* 箭头 */
.mega-link>span {
    flex-shrink: 0;

    color: #d0151b;

    font-size: 25px;
    font-weight: 300;

    transition:
        color .2s ease,
        transform .2s ease;
}



/* Hover 效果 */
.mega-link:hover {

    padding-left: 25px;

    background:
        linear-gradient(90deg,
            rgba(208, 21, 27, .055),
            rgba(208, 21, 27, 0));
}


.mega-link:hover h4 {
    color: #d0151b;
}


.mega-link:hover>span {
    color: #d0151b;

    transform:
        translateX(4px);
}



/* =========================================================
   6项菜单
========================================================= */

.mega-links-2:not(.mega-links-four):not(.mega-links-industries) .mega-link:nth-last-child(-n+2) {

    border-bottom: none;
}



/* =========================================================
   Capabilities 四项
========================================================= */

.mega-links-four {
    grid-template-rows:
        repeat(2, 1fr);
}


.mega-links-four .mega-link {
    min-height: 138px;
}


.mega-links-four .mega-link:nth-child(3),
.mega-links-four .mega-link:nth-child(4) {
    border-bottom: none;
}



/* =========================================================
   Industries 八项
========================================================= */

.mega-links-industries {
    grid-template-rows:
        repeat(3, 1fr);
}


.mega-links-industries .mega-link:nth-child(5),
.mega-links-industries .mega-link:nth-child(6) {
    border-bottom: none;
}



/* =========================================================
   Resources 三项
========================================================= */

.mega-links-1 .mega-link {

    min-height: 80px;

    padding-left: 32px;
}


.mega-links-1 .mega-link:last-child {
    border-bottom: none;
}


.mega-links-1 .mega-link p {
    max-width: 430px;
}











@media (max-width: 1600px){
    .banner_pro1 .banner_pro_conter h2{
        font-size: 2.4rem;
    }
    .banner_pro_trusted{
        display: none;
    }
    .contact_page_banner_section{
        height: 115vh;
    }
}


@media (max-width: 1440px){
     .section_container_con{
        max-width: 1280px;
        width: 1280px;
    }
    
    .home_banner_pro .banner_pro_conter .banner_text_box{
        width: 55%;
    }
    .header_nav .nav_menu ul li{
        margin: 0 8px;
    }
    
    .header_middle .conter_box .header_link_box{
        min-width: 110px;
        padding: 5px 6px;
        font-size: 17px;
        top: 20px;
    }
    .language_box{
        right: 110px;
    }
    
    .home_gallery_page {
        max-width: 1280px;
    }



}


@media (max-width: 1366px){
   
    .section_container_con{
        max-width: 1200px;
        width: 1200px;
    }
    .header_nav .nav_menu ul li {
        margin: 0 5px;
    }
    .banner_pro_page .banner_pro_conter .banner_text_box{
        bottom: 60px;
    }
    .banner_pro1 .banner_pro_conter .banner_link_box{
        display: none;
    }

}



@media (max-width: 768px){
    .section_container_con {
        max-width: 100%;
        width: 100%;
    }
    .header_nav{
        display: none;
    }
    .language_box{
        display: none;
    }
    .header_middle .conter_box .header_link_box{
        display: none;
    }
    
    .header_middle{
        padding: 8px 0;
    }
    .header_middle .conter_box{
        height: 60px;
        padding: 0;
    }
    .header_middle .conter_box .logo_box{
        top: 4px;
    }
    .header_middle .conter_box .logo_box img{
        height: 50px;
    }
    .banner_pro_conter .banner_text_box{
        width: 90%;
    }
    .banner_pro1 .banner_pro_conter .text{
        font-size: 1rem;
        color: #ddd;
    }
    
    
    
    .home-banner{
        min-height: 400px;
    }
    .responsive_banner_section {
        height: 40vh;
    }
    
    .banner_pro_conter{
        padding-top: 130px;
    }
    .banner_pro1 .banner_pro_conter h2 {
        font-size: 1.55rem;
        margin-bottom: 25px;
    }
 
    
    .about_page_section_left{
        width: 100%;
        padding: 0;
    }
    .about_page_section_right{
        width: 100%;
        padding: 0;
    }
    
    
    .wello-footer-grid{
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .wello-footer-col{
        display: none;
    }
    .wello-footer-brand{
        display: block;
        padding-right: 0;
    }
    .wello-footer-col:not(:last-child)::after{
        display: none;
    }
    .wello-footer-desc{
        max-width: 100%;
        padding-right: 0;
    }
  
    
    
}