:root{
    --font-light: 'Montserrat-Light';
    --font-re: 'BebasNeue-Regular';
    --font-bold: 'Montserrat-Bold';
    --font-regular: 'Montserrat-Regular';
    --color-ffffff: #ffffff;
}
/* ==================== UEESHOP 单页全宽修复 ====================
   原因：UEESHOP 主题通常会给 .wide / .article_content_box 设置
   max-width、左右 padding 或居中 margin，仅写 width:100% 不能取消这些限制。
   下方同时重置平台外层，并用 .husch_page_full_bleed 强制突破父级宽度。
================================================================ */
html, body {
    margin: 0;
    overflow-x: hidden;
}
.ly_poster_90 { display: none;}
body .ly_article_1 {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ly_article_1 .article_content_box .article_title { display: none;}
.ly_other_1 { display: none;}

/* 清除 UEESHOP 单页编辑器常见的限宽与左右内边距 */
body .ly_article_1 .wide,
body .ly_article_1 .article_content_box,
body .ly_article_1 .article_content_box .article_content,
body .ly_article_1 .article_content_box .editor_txt,
body .ly_article_1 .article_content_box .ueeshop_responsive_position {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* 即使平台外层仍有限宽，也让本页准确贴合浏览器左右边缘 */
.husch_page_full_bleed {
    position: relative;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    box-sizing: border-box;
}

/* Banner 必须让容器和图片自身都占满宽度 */
.husch_page_full_bleed .banner,
.husch_page_full_bleed .banner .public_img {
    width: 100%;
    max-width: none;
}
.husch_page_full_bleed .banner img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}
* { margin: 0; text-decoration: none; padding: 0; list-style-type: none; -webkit-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
img { max-width: 100%; max-height: 100%;}
.public_img { font-size: 0; }
.hover_img { overflow: hidden;}
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.hover_img:hover { transform: scale(1.1);}
.public_content_w1600 { margin: 0 auto; width: 1600px; max-width: 90%; }
.public_content_w1220 { margin: 0 auto; width: 1220px; max-width: 100%;}
.public_content_w1400 { margin: 0 auto; width: 1400px; max-width: 90%; }
.public_content_w1450 { margin: 0 auto; width: 1450px; max-width: 90%; }
.public_content_w1443 { margin: 0 auto; width: 1443px; max-width: 90%; }
.public_content_w1460 { margin: 0 auto; width: 1460px; max-width: 90%; }
.public_view_detail {display: flex;width: max-content; align-items: center; border: 1px solid var(--color-6b9732); border-radius: 45px; justify-content: space-between; box-sizing: border-box; padding: 0 16px; min-height: 45px; font-family: var(--font-regular); font-size: 18px; color: var(--color-669333);}
.public_view_detail .icon { margin-left: 7px; display: block; min-width: 23px; background-color: var(--color-5b8a35); min-height: 23px; border-radius: 50%; position: relative; }
.public_view_detail .icon::before { content: ''; position: absolute; left: 45%; top: 50%; transform: translate(-50%,-50%) rotate(45deg); width: 40%; height: 40%; border-right: 1px solid var(--color-ffffff); border-top: 1px solid var(--color-ffffff); }
.public_view_detail:hover{ background-color: var(--color-618e34); color: var(--color-ffffff);}
.public_view_detail:hover .icon { background-color: var(--color-ffffff);}
.public_view_detail:hover .icon::before { border-top-color:  var(--color-618e34); border-right-color:  var(--color-618e34);}
.index_public_title { font-size: var(--size40); color: var(--color-212121); font-family: var(--font-bold);}
.public_view_detail .txt { letter-spacing: 0.6px;}
.ellipsis { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.public_content .content { font-family: var(--font-regular); font-size: 20px; color: var(--color-606060); text-align: center; width: 78%; margin: 0 auto; letter-spacing: 0.4px; margin-top: 14px;}
.public_content .title {font-size: 140px; font-family: var(--font-din-black); text-align: center; color: var(--color-f2f2f2); -webkit-text-stroke: var(--color-cee29f); }
.public_content .subtitle { font-size: 88px; color: var(--color-2d2c2c); font-family: var(--font-din-black); text-align: center; margin-top: -73px; }
.public_content .subtitle span { color: var(--color-7aa330);}
/* .public_content .nav { display: flex; color: var(--color-ffffff); font-family: var(--font-din-black);background-color: var(--color-8fbb24); margin-top: 91px;font-size: 60px; border-radius: 20px; width: 100%;  justify-content: center; height: 108px; line-height: 108px;} */
.public_content .nav{ width: 100%; font-size: 60px;padding-top: 0; height: 108px; font-family: var(--font-din-black); display: flex; justify-content: center; margin-top: 91px; align-items: center;  color: #fff; text-align: center; position: relative}
.public_content .nav::after ,.public_content .nav::before{ content: ''; width: 50%; height: 100%; border-top-left-radius: 20px; border-bottom-left-radius: 20px; box-shadow: inset 35px 0 0 0 #6d9732, inset 43px 0 0 0 #fff, inset 89px 0 0 0 #7aa52c, inset 97px 0 0 0 #fff, inset 158px 0 0 0 #7faa2b, inset 166px 0 0 0 #fff, inset 245px 0 0 0 #7faa2b, inset 253px 0 0 0 #fff; background-color: #8fbb24; position: absolute; top: 0; z-index: -1;}
.public_content .nav::before{left: 0;}
.public_content .nav::after{right: 0; transform: rotate(180deg);}

.nav_li { margin-top: 31px; font-family: var(--font-light);  color: #333333; font-size: 16px;}
.nav_li a{ font-family: var(--font-light);  color: #333333; font-size: 16px; text-transform: uppercase;}
.nav_li span { margin:0 18px;}

/* ==================== ABOUT US 首屏布局（重点优化区域） ====================
   可调项：
   1. 左右栏比例：修改 grid-template-columns
   2. 图文间距：修改 column-gap
   3. 右图大小：修改 .about_media 的 max-width
   4. 图片裁切比例：修改 .about_main_img 的 aspect-ratio
   5. “100+”卡片位置：修改 .about_history 的 left / bottom
========================================================================= */
.about_us .content {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(520px, 1.12fr);
    column-gap: clamp(56px, 7vw, 120px);
    align-items: center;
    margin-top: 63px;
}
.about_us .content .about_us_left {
    min-width: 0;
    max-width: 560px;
    margin: 0;
}
.about_us .about_us_subtitle {
    font-weight: bold;
    font-family: var(--font-re);
    font-size: 60px;
    color: #333333;
    margin-top: 19px;
    line-height: 1.1;
    letter-spacing: 0.6px;
}
.about_us .about_us_subtitle span { color: #e70040;}
.about_us .about_us_brief { padding-top: 65px; position: relative;}
.about_us .about_us_brief::after {
    content: '';
    position: absolute;
    width: 26.8%;
    height: 5px;
    background-color: #e70040;
    top: 35px;
    left: 0;
    z-index: 1;
}
.about_us .about_us_brief::before {
    content: '';
    position: absolute;
    width: 0.8%;
    height: 5px;
    background-color: var(--color-ffffff);
    top: 35px;
    left: 120px;
    z-index: 2;
}
.about_us .brief_title {
    font-family: var(--font-bold);
    font-size: 20px;
    color: #e70040;
    padding-bottom: 25px;
}
.about_us .brief_content {
    font-family: var(--font-light);
    color: #333333;
    font-size: 16px;
    line-height: 1.5;
}
.about_us .brief_content:last-child { margin-top: 23px;}

/* 右侧媒体容器：使用正常文档流承载图片，避免绝对定位导致高度塌陷 */
.about_us .content .about_us_right {
    min-width: 0;
    position: relative;
}
.about_us .about_media {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 780px; /* 【可调】右侧图片区域最大宽度 */
    margin-left: auto;
    padding: 34px 0 62px 74px; /* 左、下留白用于承载叠加卡片 */
    box-sizing: border-box;
}
/* 【可替换】右图后的装饰背景；不需要时可删除本规则或设置 display:none */
.about_us .about_media::before {
    content: '';
    position: absolute;
    right: -24px;
    top: 0;
    z-index: 0;
    width: 52%;
    height: 46%;
    background-image: url(../static/images/brand/bg.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .55;
    pointer-events: none;
}
.about_us .about_main_img {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 1.35 / 1; /* 【可调】建议使用约 4:3 的横图 */
    overflow: hidden;
    border-radius: 14px;
    background-color: #f3f3f3;
    box-shadow: 0 18px 44px rgba(31, 36, 47, .16);
}
.about_us .about_main_img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* 【可调】人物偏右时可改为 65% center */
}
/* “100+”信息卡放在图片左下角，和图片形成稳定的视觉锚点 */
.about_us .about_history {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    width: 220px;
    min-height: 152px;
    padding: 22px 20px;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--color-ffffff);
    border-top: 4px solid #e70040;
    border-radius: 10px;
    box-shadow: 0 16px 38px rgba(31, 36, 47, .18);
}
.about_us .about_history_number {
    font-family: var(--font-bold);
    color: #e70040;
    font-size: 48px;
    line-height: 1;
}
.about_us .about_history_brief {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.35;
    color: #333333;
    font-family: var(--font-light);
}


.role { margin-top: 120px; padding-bottom: 122px; position: relative;}
.role .role_item { width: calc(100% / 3 - 25px); margin-right: 36px; border-right: 1px solid rgba(0, 0, 0, .1);}
.role .role_item_title {max-width: 90%; font-family: var(--font-regular); color: #e70040; font-size: 24px; text-transform: uppercase; padding-top: 34px; letter-spacing: 0.3px; line-height: 1.2;}
.role .public_img { background-color: #e70040; border-radius: 10px; width: 59px; position: relative; height: 0; padding-top: 12.465%;}
.role .public_img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.role .role_item_content { font-family: var(--font-light); color: #333333; font-size: 15px; letter-spacing: 0.6px; line-height: 1.6; padding-top: 13px;}
.role .role_item:last-child { margin-right: 0; border-right-color: transparent;}
.role .role_item .role_items:first-child { min-height: 326px;}
.role .role_item .role_items:last-child { padding-top: 20px;}
.role::after {content: ''; display: block; width: 9%; height: 77%; position: absolute; left: 0; top: 0; background-image: url(../static/images/brand/bg2.svg); background-size: cover;  background-repeat: no-repeat; background-position: center;}
.role::before { content: ''; display: block; width: 9%; height: 29%; position: absolute; right: 0; bottom: 0; background-image: url(../static/images/brand/bg3.svg); background-size: cover;  background-repeat: no-repeat; background-position: center;}
.role .public_content_w1450 { display: flex; }


.products { padding: 97px 0; background-color: #f7f7f7;}
.products .content { display: flex; align-items: center;}
.products .products_left { width: 45%; padding-right: 75px; box-sizing: border-box;}
/* 【可替换：测试视频】保持原模块左图的视觉比例与圆角风格 */
.products .products_video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    background-color: #111;
}
.products .products_video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.products .products_right { flex: 1; color: #333333;}
.products .products_title { font-family: var(--font-re); font-size: 60px; line-height: 1.1; letter-spacing: 0.3px;}
.products .products_title span { color: #e70040;}
.products .products_content { font-family: var(--font-light); font-size: 16px; padding-top: 17px; line-height: 1.65;}
.products .products_content p + p { margin-top: 20px;}

.dust_formula { display: flex; margin-top: 33px;}
.dust_formula .dust:first-child { width: 54.5%; padding-right: 32px;}
.dust_formula .dust:last-child { flex: 1; margin-top: 76px;}
.dust_formula .dust_formula_title { margin-top: 16px; font-family: var(--font-bold); font-size: 24px; color: #333333; width: 105%;  border-right: 1px solid rgba(41, 44, 48, .1);}
.dust_formula .dust_formula_title span { color: #e70040;}
.dust_formula .dust_formula_brief { font-family: var(--font-light); font-size: 16px; color: #333333; margin-left: 30px; line-height: 1.5; letter-spacing: 0.1px;}
.dust_formula .dust_formula_content { display: flex; padding: 40px 159px 98px 22px; background-color: #f7f7f7; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.dust_formula .dust:last-child .dust_formula_content { padding: 33px 32px 27px 31px;}
.dust_formula .dust:last-child .dust_formula_title { width: 282%; line-height: 1.4;}

.banner_certificate { margin-top: 55px;}
.banner_certificate .content { display: flex; flex-wrap: wrap;}
.banner_certificate .banner_item { width: calc(100% / 4 - 21px);border-radius: 10px; margin-right: 25px; box-sizing: border-box; border: 1px solid #d9d9d9; padding: 10px;}
.banner_certificate .banner_item .public_img { position: relative; height: 0; padding-top: 32.99%;}
.banner_certificate .banner_item .public_img img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.banner_certificate .banner_item:last-child { margin-right: 0;}
.banner_certificate .banner_title { color: #333333; font-family: var(--font-bold); font-size: 16px; text-align: center; padding-bottom: 6px;}
.banner_certificate .banner_item:hover { border-color: #e70040;}

.what_people { margin-top: 80px;}
.what_people .what_people_title { font-family: var(--font-re); text-align: center; font-size: 60px; color: #333333; }
.what_people .what_people_title span { color: #e70040;}
.what_people .content { display: flex; align-items: center;}
.what_people .page_last { width: 16px; height: 16px; border-top: 4px solid #333333;  border-left: 4px solid #333333; transform: rotate(-45deg);}
.what_people .page_next { width: 16px; height: 16px; border-top: 4px solid #333333;  border-right: 4px solid #333333; transform: rotate(45deg);}
.what_people .what_people_content { width: calc(100% - 60px); margin: 0 auto; }
.what_people .what_people_item { border-bottom: 3px  solid transparent;background-color: #fafafa; border-radius: 8px; box-sizing: border-box; padding: 35px 30px;}
.what_people .people { display: flex; align-items: center;}
.what_people .public_img { border-radius: 50%; border: 5px solid #e70040; position: relative; height: 0; min-height: 96px; padding-top: 25.22%; min-width: 96px; box-sizing: border-box;}
.what_people .public_img img { position: absolute ; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.what_people .people_title { font-family: var(--font-re); font-size: 30px; color: #333333; }
.what_people .people_brief { color: #666666; font-family: var(--font-light); font-size: 16px; margin-top: 3px;}
.what_people .people_content { margin-left: 20px;}
.what_people .people_say { color: #333333; font-family: var(--font-light); font-size: 16px;min-height: 202px; margin-top: 48px; line-height: 1.4; letter-spacing: 0.4px;}
.what_people .content .page_center:first-child { margin-left: 11px;}
.what_people .content .page_center:last-child { margin-right: 11px;}
.what_people .what_people_item:hover {background-color: var(--color-ffffff); box-shadow: 0 0 32px rgba(31, 36, 47, .13); border-bottom-color: #e70040;}
.what_people .swiper-horizontal { margin: 22px auto; padding: 35px; box-sizing: border-box;}
.mobile { display: none;}
@media (max-width: 1480px) {
   .ly_article_1 .wide{ padding-left: 0; padding-right: 0;}
}


@media screen and (max-width:1450px) {
    .about_us .about_us_subtitle { font-size: 40px;}
    .products .products_title { font-size: 40px;}
    .what_people .what_people_title { font-size: 40px;}
    .about_us .about_us_brief { padding-top: 48px;}
    .about_us .brief_title { font-size: 16px; padding-bottom: 15px;}
    .about_us .brief_content:last-child { margin-top: 10px;}
}

@media screen and (max-width:1350px) {
    .about_us .content {
        grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr);
        column-gap: 52px;
    }
    .about_us .about_media {
        max-width: 700px;
        padding-left: 62px;
    }
}

@media screen and (max-width:1200px) {
    .about_us .content {
        grid-template-columns: minmax(0, .94fr) minmax(420px, 1.06fr);
        column-gap: 42px;
    }
    .about_us .about_media {
        padding: 26px 0 54px 52px;
    }
    .about_us .about_history {
        width: 190px;
        min-height: 138px;
        padding: 18px 16px;
    }
    .about_us .about_history_number { font-size: 40px;}
}

@media screen and (max-width:1100px) {
    .about_us .content {
        grid-template-columns: minmax(0, 1fr) minmax(400px, 1fr);
        column-gap: 34px;
    }
    .about_us .about_media { padding-left: 44px;}
}
@media screen and (max-width:991px) {
    :root{
        --size100: 10.0908173562vw;
        --size68: 6.86175580222vw;
    }
    .pc{ display: none;}
    .mobile { display: block;}
    .about_us .content { display: flex; flex-direction: column; align-items: stretch; margin-top: 30px;}
    .about_us .content .about_us_left { width: 100%; max-width: none; margin-right: 0;}
    .about_us .about_us_brief::after { top: 10px;}
    .about_us .about_us_brief { padding-top: 28px;}
    .about_us .content .about_us_right { width: 100%; margin-top: 42px;}
    .about_us .about_media { max-width: 760px; margin: 0 auto; padding: 28px 0 56px 64px;}
    .dust_formula { flex-direction: column;}
    .products .content { flex-direction: column;}
    .role .public_content_w1450 { flex-direction: column;}
    .role .role_item { width: 100%;}
    .role::after { display: none;}
    .role::before { display: none;}
    .products .products_left { width: 100%; padding-right: 0;}
    .dust_formula .dust:first-child { width: 100% ; padding-right: 0;}
    .dust_formula .dust_formula_content { padding: 20px; flex-direction: column;}
    .dust_formula .dust:last-child .dust_formula_content { padding: 20px;}
    .banner_certificate .banner_item { width: calc(100% / 2 - 13px); margin-top: 20px;}
    .banner_certificate .banner_item:nth-child(2n) { margin-right: 0;}
    .what_people .swiper-horizontal { padding: 0;}
    .role .role_item { border-right-color: transparent;}
    .about_us .about_history { width: 190px; min-height: 132px;}
    .about_us .about_history_number { font-size: 36px;}
    .about_us .about_history_brief { font-size: 14px;}
    .role .role_item .role_items:first-child { min-height: auto;  padding-top: 35px;}
    .role .role_item .role_items:last-child { padding-top: 35px;}
    .role { margin-top: 80px; padding-bottom: 30px;}
    .role .public_img { padding-top: 59px;}
    .role .role_item_title { max-width: none; padding-top: 15px; font-size: 20px;}
    .role .role_item_content { font-size: 14px;}
    .products .products_title { font-size: 30px;}
    .products .products_right { margin-top: 20px;}
    .products .products_content { padding-top: 10px; font-size: 14px;}
    .products .products_evaluate { margin-left: 0; margin-top: 10px;}
    .products .li_content { font-size: 14px;}
    .products { padding: 45px 0 ;}
    .about_us .about_us_subtitle { font-size: 30px;}
    .products .products_ul li { padding-top: 13px;}
    .dust_formula .dust_formula_title { font-size: 18px; padding-right: 10px;}
    .dust_formula .dust_formula_brief { margin-top: 20px; font-size: 14px; margin-left: 0;}
    .dust_formula .dust:last-child { margin-top: 40px;}
    .banner_certificate { margin-top: 30px;}
    .banner_certificate .banner_title { margin-top: 10px; font-size: 14px;}
    .what_people { margin-top: 40px;}
    .what_people .what_people_title { font-size: 30px;}
    .what_people .people { flex-direction: column;}
    .what_people .public_img { padding-top: 86px;}
    .what_people .people_content { margin-top: 20px; margin-left: 0; text-align: center;}
    .what_people .what_people_item { padding: 20px;}
    .what_people .people_say { font-size: 14px; margin-top: 24px; min-height: auto;}
    .dust_formula .dust:last-child .dust_formula_title { width: 100%;}
}

@media screen and (max-width:750px) {
    :root{
        --size100: 13.3333333333vw;
        --size68: 9.06666666667vw;
    }
    .about_us .about_media {
        padding: 18px 0 50px 24px;
    }
    .about_us .about_media::before {
        right: -10px;
        width: 58%;
        height: 40%;
    }
    .about_us .about_main_img {
        border-radius: 10px;
    }
    .about_us .about_history {
        width: 164px;
        min-height: 116px;
        padding: 15px 12px;
        border-top-width: 3px;
        border-radius: 8px;
    }
    .about_us .about_history_number { font-size: 32px;}
    .about_us .about_history_brief { margin-top: 7px; font-size: 13px;}
    .role { margin-top: 64px;}

}