/**
 * Home 4 Template Custom Styles - Industrial Pump Homepage
 * 
 * Custom CSS for the Home 4 industrial pump homepage template
 */

/* Bootstrap Grid System Classes */
.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
section {
    display: block;
    unicode-bidi: isolate;
}
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
*, :after, :before {
    box-sizing: border-box;
}
.row {
    display: flex;
    margin-right: -15px;
    margin-left: -15px;
}
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}



ul:not(.block-editor-block-variation-picker__variations) > li:before{
    display: none;
}

.no-dot {
    list-style-type: none;
    padding-left: 0; /* 可选，移除缩进 */
    margin: 0;        /* 可选 */
  }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* Base column widths */
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
    .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Offset classes */
.offset-1 { margin-left: 8.333333%; }
.offset-2 { margin-left: 16.666667%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.333333%; }
.offset-5 { margin-left: 41.666667%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.333333%; }
.offset-8 { margin-left: 66.666667%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.333333%; }
.offset-11 { margin-left: 91.666667%; }

@media (min-width: 576px) {
    .offset-sm-0 { margin-left: 0; }
    .offset-sm-1 { margin-left: 8.333333%; }
    .offset-sm-2 { margin-left: 16.666667%; }
    .offset-sm-3 { margin-left: 25%; }
    .offset-sm-4 { margin-left: 33.333333%; }
    .offset-sm-5 { margin-left: 41.666667%; }
    .offset-sm-6 { margin-left: 50%; }
    .offset-sm-7 { margin-left: 58.333333%; }
    .offset-sm-8 { margin-left: 66.666667%; }
    .offset-sm-9 { margin-left: 75%; }
    .offset-sm-10 { margin-left: 83.333333%; }
    .offset-sm-11 { margin-left: 91.666667%; }
}

@media (min-width: 768px) {
    .offset-md-0 { margin-left: 0; }
    .offset-md-1 { margin-left: 8.333333%; }
    .offset-md-2 { margin-left: 16.666667%; }
    .offset-md-3 { margin-left: 25%; }
    .offset-md-4 { margin-left: 33.333333%; }
    .offset-md-5 { margin-left: 41.666667%; }
    .offset-md-6 { margin-left: 50%; }
    .offset-md-7 { margin-left: 58.333333%; }
    .offset-md-8 { margin-left: 66.666667%; }
    .offset-md-9 { margin-left: 75%; }
    .offset-md-10 { margin-left: 83.333333%; }
    .offset-md-11 { margin-left: 91.666667%; }
}

@media (min-width: 992px) {
    .offset-lg-0 { margin-left: 0; }
    .offset-lg-1 { margin-left: 8.333333%; }
    .offset-lg-2 { margin-left: 16.666667%; }
    .offset-lg-3 { margin-left: 25%; }
    .offset-lg-4 { margin-left: 33.333333%; }
    .offset-lg-5 { margin-left: 41.666667%; }
    .offset-lg-6 { margin-left: 50%; }
    .offset-lg-7 { margin-left: 58.333333%; }
    .offset-lg-8 { margin-left: 66.666667%; }
    .offset-lg-9 { margin-left: 75%; }
    .offset-lg-10 { margin-left: 83.333333%; }
    .offset-lg-11 { margin-left: 91.666667%; }
}

@media (min-width: 1200px) {
    .offset-xl-0 { margin-left: 0; }
    .offset-xl-1 { margin-left: 8.333333%; }
    .offset-xl-2 { margin-left: 16.666667%; }
    .offset-xl-3 { margin-left: 25%; }
    .offset-xl-4 { margin-left: 33.333333%; }
    .offset-xl-5 { margin-left: 41.666667%; }
    .offset-xl-6 { margin-left: 50%; }
    .offset-xl-7 { margin-left: 58.333333%; }
    .offset-xl-8 { margin-left: 66.666667%; }
    .offset-xl-9 { margin-left: 75%; }
    .offset-xl-10 { margin-left: 83.333333%; }
    .offset-xl-11 { margin-left: 91.666667%; }
}

/* Custom class for left positioning */
.left {
    position: relative;
}

/* Reset and Base Styles */
.hero-slider-section,
.index_about,
.index_global,
.index_wkitw,
.index_prod,
.index_news,
.index_esg,
.index_application {
    position: relative;
    width: 100%;
}

/* Slider Placeholder Styles */
.slider-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    text-align: center;
    padding: 60px 20px;
}

.slider-placeholder .placeholder-content h1 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 20px;
    font-weight: 700;
}

.slider-placeholder .placeholder-content p {
    font-size: 1.1rem;
    color: #5a6c7d;
    line-height: 1.6;
    margin-bottom: 15px;
}

.elementor-edit-btn {
    display: inline-block;
    background: #9b59b6;
    color: white !important;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
}

.elementor-edit-btn:hover {
    background: #8e44ad;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(155, 89, 182, 0.4);
    color: white !important;
}

/* Common Title Styles */
.title_box {
    margin-bottom: 40px;
}

.title_box .title {
    position: relative;
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    text-align: center;
    padding: 20px 0;
}

.title_box .title .top,
.title_box .title .bottom {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #007bff;
}

.title_box .title .top {
    top: 0;
}

.title_box .title .bottom {
    bottom: 0;
}

/* More Button Styles */
.more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #007bff;
    color: white !important;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.more-btn:hover {
    background: #0056b3;
    transform: translateY(-2px);
    color: white !important;
}

.more-btn img {
    width: 16px;
    height: 16px;
}

/* About Us Section */
.index_about {
    padding-top: 70px;
    padding-bottom: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f8f9fa; /* 备用背景色 */
}

@media (max-width: 1535px) {
    .index_about {
        padding-bottom: 200px;
    }
}

@media (max-width: 1024px) {
    .index_about {
        text-align: center;
        padding-bottom: 140px;
        padding-top: 50px;
    }
}

@media (max-width: 768px) {
    .index_about {
        padding-top: 40px;
        padding-bottom: 150px;
        margin-bottom: 60px;
    }
    
    .index_about .row {
        flex-direction: column;
    }
    
    .index_about .offset-xl-1.col-xl-4.col-lg-12 {
        order: 1;
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0;
        margin-bottom: 30px;
    }
    
    .index_about .col-xl-7.col-lg-12.right_box {
        order: 2;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 40px;
    }
    
    .index_about .right_box .right {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 480px) {
    .index_about {
        padding-top: 30px;
        padding-bottom: 120px;
        margin-bottom: 80px;
    }
}

.index_about .left {
    margin-top: 100px;
}

@media (max-width: 1280px) {
    .index_about .left {
        margin-top: 0;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .index_about .left {
        margin-top: 0;
        margin-bottom: 0;
    }
}

@media (max-width: 1200px) {
    .index_about .left {
        text-align: center;
    }
}

.index_about .left .title_box {
    margin-bottom: 30px;
}

.index_about .left .title_box .title {
    display: inline-block;
    position: relative;
    font-size: 3.5rem;
    font-family: Play-Bold, Microsoft JhengHei, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1;
    -webkit-background-clip: text;
    background-clip: text;
    padding: 25px 45px;
    background-size: cover;
    color: transparent;
    font-style: italic;
    background-image: linear-gradient(180deg, #333 25%, #4d4d4d 30%, #666 35%, #b6b6b6 45%, #666 60%, #444 70%);
}

@media (max-width: 1520px) {
    .index_about .left .title_box .title {
        font-size: 2.625rem;
    }
}

@media (max-width: 1280px) {
    .index_about .left .title_box .title {
        font-size: 2.375rem;
    }
}

@media (max-width: 768px) {
    .index_about .left .title_box .title {
        font-size: 1.625rem;
        padding: 15px 25px;
    }
}

@media (max-width: 480px) {
    .index_about .left .title_box .title {
        font-size: 1.375rem;
        padding: 10px 20px;
    }
}

@media (max-width: 360px) {
    .index_about .left .title_box .title {
        font-size: 1.125rem;
        padding: 8px 15px;
    }
}

.index_about .left .title_box .title .top {
    border-top: 3px solid #333;
    border-left: 3px solid #333;
    width: 85%;
    height: 65%;
    position: absolute;
    top: 0;
    left: 0;
}

.index_about .left .title_box .title .bottom {
    border-bottom: 3px solid #333;
    border-right: 3px solid #333;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 85%;
    height: 65%;
}

.index_about .left .sub_title {
    font-size: 1.875rem;
    color: #333;
    line-height: 1;
    font-family: Play-Bold, Microsoft JhengHei, Arial, sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
    font-style: italic;
}

@media (max-width: 1520px) {
    .index_about .left .sub_title {
        font-size: 1.625rem;
        margin-bottom: 10px;
    }
}

@media (max-width: 1280px) {
    .index_about .left .sub_title {
        font-size: 1.375rem;
    }
}

@media (max-width: 768px) {
    .index_about .left .sub_title {
        font-size: 1.125rem;
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .index_about .left .sub_title {
        font-size: 1rem;
        margin-bottom: 10px;
    }
}

.index_about .left .text {
    font-size: 1.125rem;
    color: #555;
    line-height: 1.667;
    margin-bottom: 20px;
}

@media (max-width: 1520px) {
    .index_about .left .text {
        font-size: 1rem;
    }
}

@media (max-width: 1024px) {
    .index_about .left .text {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .index_about .left .text {
        width: 90%;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .index_about .left .text {
        width: 95%;
        font-size: 0.75rem;
        line-height: 1.5;
    }
}

.index_about .left .text p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    max-height: 120px;
}

@media (max-width: 1366px) {
    .index_about .left .text p {
        -webkit-line-clamp: 3;
        max-height: 78px;
    }
}

.index_about .left .btn_box a {
    display: inline-block;
    font-family: Play-Regular, Microsoft JhengHei, Arial, sans-serif;
    color: #fff;
    text-transform: uppercase;
    background-color: #003d97;
    font-style: italic;
    padding: 20px 30px;
    line-height: 1;
    font-size: 1.25rem;
    white-space: nowrap;
    position: relative;
    z-index: 2;
    text-decoration: none;
}

@media (max-width: 1280px) {
    .index_about .left .btn_box a {
        font-size: 1rem;
    }
}

.index_about .left .btn_box a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 100%;
    bottom: 0;
    background-color: #333;
    transition: 0.3s ease-in-out;
    z-index: -1;
}

.index_about .left .btn_box a:hover:before {
    right: 0;
}

.index_about .left .btn_box a:hover {
    color: #fff;
}

.index_about .right_box {
    padding-right: 0;
}

@media (max-width: 1200px) {
    .index_about .right_box {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 1024px) {
    .index_about .right_box {
        padding-right: 15px;
    }
}

.index_about .right_box .right {
    padding-left: 45px;
}

@media (max-width: 1200px) {
    .index_about .right_box .right {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.index_about .right_box .right .image img {
    width: 100%;
}

/* Global Sales Section - Optimized */
.index_global {
    background-image: url(https://yiming-en.oss-ap-northeast-1.aliyuncs.com/bg/gm_bg.jpg);
    background-position-y: bottom;
    background-position-x: center;
    background-size: cover;
    overflow-x: hidden;
}

.index_global .row {
    justify-content: center;
    flex-wrap: wrap;
}

.index_global .row .title_box {
    text-align: center;
    padding-top: 90px;
    padding-bottom: 90px;
}

@media (max-width: 1530px) {
    .index_global .row .title_box {
        padding-bottom: 65px;
    }
}

@media (max-width: 1200px) {
    .index_global .row .title_box {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media (max-width: 1024px) {
    .index_global .row .title_box {
        padding-bottom: 60px;
    }
}

@media (max-width: 991px) {
    .index_global .row .title_box {
        padding: 30px 85px 50px;
        background-color: transparent;
    }
}

@media (max-width: 767px) {
    .index_global .row .title_box {
        padding-top: 50px;
        padding-bottom: 30px;
    }
}

.index_global .row .title_box .title {
    display: inline-block;
    position: relative;
    font-size: 3.5rem;
    font-family: Play-Bold, Microsoft JhengHei, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1;
    -webkit-background-clip: text;
    background-clip: text;
    padding: 25px 45px;
    background-size: cover;
    color: transparent;
    font-style: italic;
    background-image: linear-gradient(180deg, #333 25%, #4d4d4d 30%, #666 35%, #b6b6b6 45%, #666 60%, #444 70%);
}

@media (max-width: 1520px) {
    .index_global .row .title_box .title {
        font-size: 2.625rem;
    }
}

@media (max-width: 1280px) {
    .index_global .row .title_box .title {
        font-size: 2.375rem;
    }
}

@media (max-width: 768px) {
    .index_global .row .title_box .title {
        font-size: 1.625rem;
    }
}

.index_global .row .title_box .top {
    background-image: url(https://yiming-en.oss-ap-northeast-1.aliyuncs.com/bg/gm_top_border.png);
    background-repeat: no-repeat;
    width: 85%;
    height: 65%;
    position: absolute;
    top: 0;
    left: 0;
}

.index_global .row .title_box .bottom {
    background-image: url(https://yiming-en.oss-ap-northeast-1.aliyuncs.com/bg/gm_bottom_border.png);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 85%;
    height: 65%;
}

.index_global .row .item_box {
    padding: 50px 30px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: #fff;
    z-index: 1;
}

@media (max-width: 1200px) {
    .index_global .row .item_box {
        background-color: transparent;
        padding: 0 30px 80px;
    }
}

@media (max-width: 767px) {
    .index_global .row .item_box {
        padding-top: 0;
    }
}

.index_global .row .item_box .item {
    width: 25%;
    text-align: center;
}

@media (max-width: 1200px) {
    .index_global .row .item_box .item {
        width: 50%;
        margin-bottom: 35px;
    }
}

@media (max-width: 1024px) {
    .index_global .row .item_box .item {
        margin-bottom: 20px;
    }
}

@media (max-width: 991px) {
    .index_global .row .item_box .item {
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .index_global .row .item_box .item {
        width: 100%;
    }
}

.index_global .row .item_box .item .top {
    font-family: Play-Bold, Microsoft JhengHei, Arial, sans-serif;
    color: #000;
    font-weight: 700;
    font-style: italic;
}

.index_global .row .item_box .item .top .num {
    display: inline-block;
    font-size: 3.75rem;
}

@media (max-width: 1520px) {
    .index_global .row .item_box .item .top .num {
        font-size: 3.125rem;
    }
}

@media (max-width: 480px) {
    .index_global .row .item_box .item .top .num {
        font-size: 2.625rem;
    }
}

.index_global .row .item_box .item .top .text {
    margin-left: 10px;
    display: inline-block;
    font-size: 1.5rem;
}

.index_global .row .item_box .item .bottom {
    font-family: Play-Regular, Microsoft JhengHei, Arial, sans-serif;
    font-size: 1.25rem;
    color: #000;
}

/* Well Known In The World Section - Optimized */
.index_wkitw {
    margin-top: -45px;
}

.index_wkitw .wkitw-bg {
    padding-top: 175px;
    padding-bottom: 150px;
    color: #fff;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
}

.index_wkitw .title {
    font-size: 3.25rem;
    font-weight: 700;
    text-shadow: 0 8px 8.6px rgba(31, 32, 32, 0.4);
    font-family: Play-Bold, Microsoft JhengHei, Arial, sans-serif;
    font-style: italic;
    margin-bottom: 30px;
}

@media (max-width: 1520px) {
    .index_wkitw .title {
        font-size: 2.875rem;
    }
}

@media (max-width: 1280px) {
    .index_wkitw .title {
        font-size: 2rem;
    }
}

.index_wkitw .summary {
    font-size: 1.25rem;
    line-height: 1.5;
    text-shadow: 0 8px 8.6px rgba(31, 32, 32, 0.4);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: 60px;
}

/* Product Introduction Section - Optimized with Splide */
.index_prod {
    padding-bottom: 30px;
    background-size: cover;
    background-position: 50%;
    background-image: url(https://yiming-en.oss-ap-northeast-1.aliyuncs.com/bg/product_bg.jpg);
}
.index_prod .row {
    flex-wrap: wrap;
}

@media (max-width: 1024px) {
    .index_prod {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 767px) {
    .index_prod {
        padding-left: 0;
        padding-right: 0;
    }
}

.index_prod .title_box {
    text-align: center;
    padding-top: 90px;
    padding-bottom: 60px;
}

@media (max-width: 1520px) {
    .index_prod .title_box {
        padding-bottom: 45px;
    }
}

@media (max-width: 991px) {
    .index_prod .title_box {
        padding-top: 70px;
    }
}

@media (max-width: 767px) {
    .index_prod .title_box {
        padding: 50px 0 30px;
    }
}

.index_prod .title_box .title {
    display: inline-block;
    position: relative;
    font-size: 3.5rem;
    font-family: Play-Bold, Microsoft JhengHei, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1;
    -webkit-background-clip: text;
    background-clip: text;
    padding: 25px 45px;
    background-size: cover;
    color: transparent;
    font-style: italic;
    background-image: linear-gradient(180deg, #333 25%, #4d4d4d 30%, #666 35%, #b6b6b6 45%, #666 60%, #444 70%);
}

@media (max-width: 1520px) {
    .index_prod .title_box .title {
        font-size: 2.625rem;
    }
}

@media (max-width: 1280px) {
    .index_prod .title_box .title {
        font-size: 2.375rem;
    }
}

@media (max-width: 768px) {
    .index_prod .title_box .title {
        font-size: 1.625rem;
    }
}

.index_prod .title_box .top {
    background-image: url(https://yiming-en.oss-ap-northeast-1.aliyuncs.com/bg/prod_top_border.png);
    top: 0;
    left: 0;
}

.index_prod .title_box .bottom,
.index_prod .title_box .top {
    background-repeat: no-repeat;
    width: 85%;
    height: 65%;
    position: absolute;
}

.index_prod .title_box .bottom {
    background-image: url(https://yiming-en.oss-ap-northeast-1.aliyuncs.com/bg/prod_bottom_border.png);
    background-position-x: right;
    background-position-y: bottom;
    bottom: 0;
    right: 0;
}

/* Splide Carousel Styles - Enhanced for visibility */
.index_prod .splide {
    overflow: visible !important;
    position: relative;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    width: 100%;
    min-height: 300px;
}

.index_prod .splide .splide__track {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
}

.index_prod .splide .splide__list {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    touch-action: pan-Y;
    flex-wrap: nowrap !important;
    will-change: transform;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
    list-style-type: none !important;
}
.splide__arrow {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    padding: 0;
    background: transparent;
}
.index_prod .splide .splide__slide {
    text-align: center;
    padding: 30px;
    transition: 0.3s ease-in-out;
    flex-shrink: 0;
    position: relative;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    list-style-type: none;
}

@media (max-width: 1520px) {
    .index_prod .splide .splide__slide {
        padding: 30px;
        min-width: 250px;
    }
}

@media (max-width: 480px) {
    .index_prod .splide .splide__slide {
        padding-right: 45px;
        min-width: 200px;
    }
}

.index_prod .splide .splide__slide .image {
    margin-bottom: 25px;
    background-color: #fff;
    transform-origin: bottom;
    transform: skewX(-4deg);
    text-align: center;
    box-shadow: 0 16px 49.02px 7.98px rgba(31, 32, 32, .22);
    overflow: hidden;
}


.index_prod .splide .splide__slide .image  img{
    max-width: 100%;
    transform: skewX(4deg);
}

@media (max-width: 1520px) {
    .index_prod .splide .splide__slide .image {
        box-shadow: 0 16px 20px 0 rgba(31, 32, 32, 0.22);
    }
}

.index_prod .splide .splide__slide .catname {
    font-size: 1.625rem;
    color: #222;
    font-family: Play-Bold, Microsoft JhengHei, Arial, sans-serif;
    text-transform: uppercase;
    border-bottom: 1px solid #cdcdcd;
    font-style: italic;
    transition: 0.3s ease-in-out;
    padding-bottom: 10px;
    display: block;
    visibility: visible;
}

@media (max-width: 1520px) {
    .index_prod .splide .splide__slide .catname {
        font-size: 1.25rem;
    }
}

.index_prod .splide .splide__slide:hover {
    transform: translateY(-20px);
}

.index_prod .splide .splide__slide:hover .catname {
    color: #003d97;
    border-color: #003d97;
}

.index_prod .splide .splide__slide a {
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
}

.index_prod .splide .splide__slide a:hover {
    text-decoration: none;
    color: inherit;
}

/* Splide Arrow Styles */
.index_prod .splide .splide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.3s ease;
    display: block !important;
}

.index_prod .splide .splide__arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.index_prod .splide .splide__arrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.index_prod .splide .splide__arrow:before {
    content: "";
    position: absolute;
    top: calc(50% + 5px);
    width: 50px;
    height: 50px;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 1px solid #666;
    opacity: 0;
    transition: 0.3s ease-in-out;
}

@media (max-width: 1024px) {
    .index_prod .splide .splide__arrow:before {
        top: calc(50% - 5px);
    }
}

.index_prod .splide .splide__arrow:hover:before {
    opacity: 1;
}

.index_prod .splide .splide__arrow.splide__arrow--next {
    right: -15px;
}

@media (max-width: 991px) {
    .index_prod .splide .splide__arrow.splide__arrow--next {
        display: none !important;
    }
}

.index_prod .splide .splide__arrow.splide__arrow--next:before {
    right: -25px;
}

.index_prod .splide .splide__arrow.splide__arrow--prev {
    left: -15px;
}

@media (max-width: 991px) {
    .index_prod .splide .splide__arrow.splide__arrow--prev {
        display: none !important;
    }
}

.index_prod .splide .splide__arrow.splide__arrow--prev:before {
    left: -25px;
}

@media (max-width: 767px) {
    .index_prod .splide .splide__arrows {
        display: none !important;
    }
}

.splide__pagination{
    display: none !important;
}
.splide__arrows{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    justify-content: space-between;
    width: 100%;
}




/* News Section - Updated Styles */
.index_news {
    background-color: #f2f2f2;
    padding: 0;
}

@media (max-width: 767px) {
    .index_news {
        text-align: center;
    }
}

.index_news .news_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 60px;
    padding-bottom: 150px;
}

@media (max-width: 1024px) {
    .index_news .news_title {
        flex-wrap: wrap;
    }
}

.index_news .news_title .title {
    font-size: 2.75rem;
    font-family: Play-Bold, Microsoft JhengHei, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    font-style: italic;
    padding-right: 100px;
    color: #000;
    margin: 0;
}

@media (max-width: 1024px) {
    .index_news .news_title .title {
        margin-bottom: 30px;
        padding-right: 0;
        width: 100%;
    }
}

.index_news .news_title .title:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 42px;
    height: 4px;
    background-color: #000;
}

@media (max-width: 767px) {
    .index_news .news_title .title:before {
        left: 50%;
        transform: translateX(-50%);
    }
}

.index_news .news_title .date {
    font-size: 1.5rem;
    font-family: Play-Bold, Microsoft JhengHei, Arial, sans-serif;
    font-style: italic;
    color: #003d97;
    white-space: nowrap;
    padding-right: 20px;
    margin: 0;
}

@media (max-width: 1024px) {
    .index_news .news_title .date {
        margin-bottom: 15px;
        width: 100%;
        padding-right: 0;
    }
}

.index_news .news_title .catname {
    font-size: 1.5rem;
    color: #000;
    text-transform: uppercase;
    font-style: italic;
    font-family: Play-Regular, Microsoft JhengHei, Arial, sans-serif;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    padding-right: 120px;
    margin: 0;
}

@media (max-width: 1024px) {
    .index_news .news_title .catname {
        margin-bottom: 15px;
        padding-right: 0;
        width: 100%;
        font-size: 1.25rem;
    }
}

@media (max-width: 767px) {
    .index_news .news_title .catname {
        display: block;
    }
}

.index_news .news_title a {
    display: inline-block;
    font-family: Play-Regular, Microsoft JhengHei, Arial, sans-serif;
    color: #fff;
    text-transform: uppercase;
    background-color: #003d97;
    font-style: italic;
    padding: 20px 30px;
    line-height: 1;
    font-size: 1.25rem;
    white-space: nowrap;
    position: relative;
    z-index: 2;
    text-decoration: none;
}

@media (max-width: 767px) {
    .index_news .news_title a {
        font-size: 1rem;
        margin-left: auto;
        margin-right: auto;
    }
}

.index_news .news_title a img {
    margin-left: 10px;
    margin-top: -5px;
}

.index_news .news_title a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 100%;
    bottom: 0;
    background-color: #333;
    transition: 0.3s ease-in-out;
    z-index: -1;
}

.index_news .news_title a:hover:before {
    right: 0;
}

.index_news .news_title a:hover {
    color: #fff;
}

/* ESG Section - Updated Styles */
.index_esg {
    margin-top: -85px;
    padding: 0;
    
}

.index_esg .row {
    display: flex;
    align-items: flex-start;
}

@media (max-width: 1200px) {
    .index_esg .row .left {
        display: none;
    }
}
.index_esg .row .right {
    background-size: cover;
    background-position: 50%;
    display: flex
;
    flex-direction: column;
    padding-top: max(1.6vw, 18px);
}
.index_esg .row .res_left {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
    padding-top: 190px;
}
.index_esg .row .res_left .title {
    font-size: 4.625rem;
    color: #e9e9e9;
    font-family: Play-Bold, Microsoft JhengHei, Arial, sans-serif;
    text-transform: uppercase;
    position: relative;
    line-height: 1;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-style: italic;
    letter-spacing: 1px;
}

.index_esg .row .res_left .title:before {
    content: "";
    position: absolute;
    bottom: calc(100% + 30px);
    left: 50%;
    display: inline-block;
    width: 3px;
    height: 160px;
    background-color: #e9e9e9;
}

.index_esg .esg-bg {
    background-size: cover;
    background-position: 50%;
    display: flex
;
    flex-direction: column;
    padding-top: max(3.80208vw, 36.5px);
    padding-bottom: max(4.16667vw, 40px);
}

.index_esg .esg-summary {
    width: 100%;
    font-size: max(2.29167vw, 30px);
    color: #fff;
    font-family: Play-Bold, Microsoft JhengHei, Arial, sans-serif;
    text-align: center;
    line-height: 1;
    margin-bottom: max(2.91667vw, 28px);
}

.index_esg .esg-summary p {
    margin-bottom: 0;
}

.index_esg .esg-summary p:not(:last-child) {
    margin-bottom: max(1.25vw, 12px);
}

.index_esg .row .esg-items {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
}

.index_esg .esg-item {
    text-align: center;
    display: flex
;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
    width: 375px;
    height: 375px;
    padding: 98px 0;
    transform: skew(-5deg);
    transition: .3s ease-in-out;
}

@media (max-width: 1520px) {
    .index_esg .esg-item {
        width: 255px;
        height: 255px;
        padding: 44px 0;
        margin: 0;
        flex-grow: 0;
    }
}

@media (max-width: 991px) {
    .index_esg .esg-item {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .index_esg .esg-item {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
    }
}

.index_esg .esg-item .image {
    width: 100%;
    margin-bottom: 10px;
    transform: skew(5deg);
}

.index_esg .esg-item .image img {
    transition: 0.3s ease-in-out;
    width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: contain;
}

@media (max-width: 1520px) {
    .index_esg .esg-item .image img {
        max-width: 80%;
    }
}

.index_esg .esg-item h3 {
    transition: 0.3s ease-in-out;
    width: 100%;
    font-size: 1.75rem;
    color: hsla(0, 0%, 100%, 0.8);
    font-family: Play-Bold, Microsoft JhengHei, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-style: italic;
    text-align: left;
    transform: skew(5deg);
    margin-left: -1.97917vw;
    position: relative;
    margin: 0;
}

.index_esg .esg-item h3:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -3.125vw;
    width: 41px;
    height: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

@media (max-width: 1520px) {
    .index_esg .esg-item h3 {
        font-size: 1.25rem;
    }
}

@media (max-width: 1024px) {
    .index_esg .esg-item h3 {
        font-size: 1rem;
    }
}

.index_esg .esg-item:hover {
    background: #0c4461;
}

.index_esg .esg-item:hover img {
    filter: contrast(1);
}

.index_esg .esg-item:hover h3 {
    color: #fff;
}

.index_esg .esg-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Application Section - Updated to match reference exactly */
.index_application {
    margin-top: 0;
}

@media (max-width: 1024px) {
    .index_application {
        margin-top: 35px;
    }
}

.index_application .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.index_application .row .app_item {
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
    transition: .3s ease-in-out;
    position: relative;
    transform-style: preserve-3d;
    transition: all .6s;
    background-size: cover;
    background-position: 50%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    filter: grayscale(100%);
    min-height: 340px;
    max-height: 340px;
}

.index_application .row .app_item:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .4);
}

@media (max-width: 1024px) {
    .index_application .row .app_item:after {
        display: none;
    }
}

@media (max-width: 1024px) {
    .index_application .row .app_item {
        filter: grayscale(0);
        align-content: flex-start;
        padding: 10px 15px 40px;
        background-image: none !important;
        max-height: none;
        min-height: none;
    }
}

@media (max-width: 767px) {
    .index_application .row .app_item {
        padding-bottom: 40px;
    }
}

.index_application .row .app_item .mobile_img {
    display: none;
}

@media (max-width: 1024px) {
    .index_application .row .app_item .mobile_img {
        display: block;
        max-height: 320px;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .index_application .row .app_item .mobile_img {
        width: auto;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .index_application .row .app_item .mobile_img {
        width: 100%;
    }
}

.index_application .row .app_item:nth-child(2),
.index_application .row .app_item:nth-child(5),
.index_application .row .app_item:nth-child(8),
.index_application .row .app_item:nth-child(10) {
    filter: grayscale(0);
}

.index_application .row .app_item:nth-child(2):before,
.index_application .row .app_item:nth-child(5):before,
.index_application .row .app_item:nth-child(8):before,
.index_application .row .app_item:nth-child(10):before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #003D9680;
}

@media (max-width: 1024px) {
    .index_application .row .app_item:nth-child(2):before,
    .index_application .row .app_item:nth-child(5):before,
    .index_application .row .app_item:nth-child(8):before,
    .index_application .row .app_item:nth-child(10):before {
        background-color: transparent;
    }
}

@media (max-width: 1024px) {
    .index_application .row .app_item {
        order: 3;
        padding-bottom: 20px;
    }

    .index_application .row .app_item:nth-child(9),
    .index_application .row .app_item:nth-child(10) {
        filter: grayscale(0);
    }

    .index_application .row .app_item:nth-child(10):before {
        display: none;
    }
}

.index_application .row .app_item > * {
    z-index: 2;
    position: relative;
}

.index_application .row .app_item .before {
    transition: .25s ease-in-out;
}

@media (max-width: 1024px) {
    .index_application .row .app_item .before {
        display: none;
    }
}

.index_application .row .app_item .catname {
    font-size: 2rem;
    font-family: Play-Bold, Microsoft JhengHei, Arial, sans-serif;
    color: #f8f8f8;
    margin-bottom: 10px;
    width: 100%;
}

@media (max-width: 1520px) {
    .index_application .row .app_item .catname {
        font-size: 1.625rem;
    }
}

@media (max-width: 1280px) {
    .index_application .row .app_item .catname {
        font-size: 1.25rem;
    }
}

.index_application .row .app_item .summary {
    width: 100%;
    font-size: 1.125rem;
    color: #fff;
    line-height: 1.556;
    font-family: Play-Regular, Microsoft JhengHei, Arial, sans-serif;
    margin-bottom: 20px;
    display: none;
    max-height: 84px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    padding-left: 15px;
    padding-right: 15px;
}

.index_application .row .app_item .false_btn,
.index_application .row .app_item a {
    font-size: 1.125rem;
    color: #fff;
    font-family: Play-Regular, Microsoft JhengHei, Arial, sans-serif;
    text-transform: uppercase;
    display: inline-block;
    line-height: 1;
    padding: 15px 40px;
    text-decoration: none;
}

@media (max-width: 1280px) {
    .index_application .row .app_item .false_btn,
    .index_application .row .app_item a {
        font-size: 1rem;
    }
}

.index_application .row .app_item a {
    letter-spacing: 1px;
}

.index_application .row .app_item:hover {
    transform: skewX(-4deg) scale(.97) rotateY(0deg);
    box-shadow: 5px 5px 1px 3px #ddd;
}

@media (max-width: 1024px) {
    .index_application .row .app_item:hover {
        box-shadow: none;
        transform: none;
    }
}

.index_application .row .app_item .after {
    transition: .4s ease-in-out;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    visibility: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-items: center;
    align-content: center;
    text-align: center;
}

@media (max-width: 1024px) {
    .index_application .row .app_item .after {
        opacity: 1;
        visibility: visible;
        position: static;
    }

    .index_application .row .app_item .after .catname {
        margin-top: 20px;
        color: #003d97;
    }

    .index_application .row .app_item .after .summary {
        display: -webkit-box;
        color: #003d97;
    }

    .index_application .row .app_item .after a {
        color: #fff;
        letter-spacing: 1px;
        background-color: #003d97;
    }
}

.index_application .row .app_item .after a {
    margin: 0 auto;
}

.index_application .row .app_item.active {
    box-shadow: none;
    transform: skewX(0deg) scale(1) rotateY(180deg);
    filter: grayscale(0);
}

@media (max-width: 1024px) {
    .index_application .row .app_item.active {
        box-shadow: none;
        transform: none;
    }
}

.index_application .row .app_item.active .before {
    opacity: 0;
    visibility: hidden;
}

.index_application .row .app_item.active .catname,
.index_application .row .app_item.active .summary,
.index_application .row .app_item.active a {
    transform: rotateY(-180deg);
}

@media (max-width: 1024px) {
    .index_application .row .app_item.active .catname,
    .index_application .row .app_item.active .summary,
    .index_application .row .app_item.active a {
        transform: none;
    }
}

.index_application .row .app_item.active .summary {
    display: -webkit-box;
}

.index_application .row .app_item.active a {
    background-color: #fff;
    color: #003d97;
    letter-spacing: 1px;
}

@media (max-width: 1024px) {
    .index_application .row .app_item.active a {
        background-color: #003d97;
        color: #fff;
    }
}

.index_application .row .app_item.active .after {
    visibility: visible;
    opacity: 1;
}

.index_application .row .app_item.active .after:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #003d97;
}

@media (max-width: 1024px) {
    .index_application .row .app_item.active .after:before {
        display: none;
    }
}

.index_application .row .text {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    padding-left: 50px;
    padding-right: 50px;
}

@media (max-width: 1200px) {
    .index_application .row .text {
        padding-top: 30px;
    }
}

@media (max-width: 1024px) {
    .index_application .row .text {
        order: 1;
    }
}

@media (max-width: 480px) {
    .index_application .row .text {
        padding-left: 30px;
        padding-right: 30px;
    }
}

.index_application .row .text .title_box {
    text-align: center;
    margin-bottom: 30px;
}

.index_application .row .text .title_box .title {
    display: inline-block;
    position: relative;
    font-size: 3.5rem;
    font-family: Play-Bold, Microsoft JhengHei, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1;
    -webkit-background-clip: text;
    background-clip: text;
    padding: 25px 45px;
    background-size: cover;
    color: transparent;
    font-style: italic;
    background-image: linear-gradient(180deg, #333 25%, #4d4d4d 30%, #666 35%, #b6b6b6 45%, #666 60%, #444 70%);
}

@media (max-width: 1520px) {
    .index_application .row .text .title_box .title {
        font-size: 2.625rem;
    }
}

@media (max-width: 1280px) {
    .index_application .row .text .title_box .title {
        font-size: 2.375rem;
    }
}

.index_application .row .text .title_box .top {
    background-image: url(https://yiming-en.oss-ap-northeast-1.aliyuncs.com/bg/app_top_border.png);
    background-repeat: no-repeat;
    width: 85%;
    height: 65%;
    position: absolute;
    top: 0;
    left: 0;
}

.index_application .row .text .title_box .bottom {
    background-image: url(https://yiming-en.oss-ap-northeast-1.aliyuncs.com/bg/app_bottom_border.png);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 85%;
    height: 65%;
}

.index_application .row .text .summary {
    font-size: 1.25rem;
    font-family: Play-Regular, Microsoft JhengHei, Arial, sans-serif;
    color: #222;
    line-height: 2;
    max-height: 120px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@media (max-width: 1520px) {
    .index_application .row .text .summary {
        font-size: 1.125rem;
    }
}

@media (max-width: 1024px) {
    .index_application .row .text .summary {
        text-align: center;
    }
}

@media (max-width: 1024px) {
    .index_application .row .content_txt {
        order: 2;
        margin-bottom: 25px;
    }
}

.index_application .row .content {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    padding: 4% 10%;
    height: 100%;
}

@media (max-width: 991px) {
    .index_application .row .content {
        display: block;
        margin-bottom: 30px;
    }
}

.index_application .row .content ol {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    margin-bottom: 0;
    list-style-type: none;
}


@media (min-width: 1200px) {
    .offset-xl-1 {
        margin-left: 8.33333333%;
    }
}

.index_application .row .content ol li {
    width: 100%;
    font-size: 1.5rem;
    color: #003d97;
    font-family: Play-Bold, Microsoft JhengHei, Arial, sans-serif;
    text-transform: uppercase;
    line-height: 1.2;
    font-style: italic;
}

@media (max-width: 1520px) {
    .index_application .row .content ol li {
        font-size: 1.25rem;
    }
}

@media (max-width: 1024px) {
    .index_application .row .content ol li {
        text-align: center;
        list-style-position: inside;
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .index_about .left {
        padding-right: 20px;
    }
}

@media (max-width: 992px) {
    .index_about .left {
        padding: 0;
        margin-bottom: 40px;
    }
    
    .index_global .item_box {
        flex-direction: column;
        align-items: center;
    }
    
    .index_global .item {
        max-width: 300px;
    }
    
    .index_esg .esg-items {
        flex-direction: column;
        align-items: center;
    }
    
    .index_esg .esg-item {
        max-width: 250px;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .title_box .title {
        font-size: 2rem;
    }
    
    .index_wkitw .title {
        font-size: 2rem;
    }
    
    .index_wkitw .summary {
        font-size: 1.1rem;
    }
    
    .product-slider {
        gap: 20px;
    }
    
    .product-item {
        flex: 0 0 250px;
    }
    
    .index_application .row .app_item {
        height: 250px;
    }
    
    .index_application .mobile_img {
        display: block;
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 10px;
        margin-bottom: 15px;
    }
    
    .index_application .content ol li {
        padding-left: 50px;
    }
    
    .index_application .content ol li::before {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .index_about,
    .index_global,
    .index_prod,
    .index_news,
    .index_esg,
    .index_application {
        padding: 40px 0;
    }
    
    .title_box .title {
        font-size: 1.8rem;
    }
    
    .index_global .item .num {
        font-size: 2.5rem;
    }
    
    .index_wkitw .title {
        font-size: 1.8rem;
    }
    
    .product-item {
        flex: 0 0 200px;
    }
    
    .index_application .content ol li h2 span {
        font-size: 24px !important;
    }
}

/* Large Screen Container */
@media (min-width: 1580px) {
    .container {
        max-width: 1530px;
    }
}

/* Enhanced Mobile Optimization for Home-4 Template */

/* 手机端导航和滚动按钮优化 */
@media (max-width: 767px) {
    .scroll_down {
        display: none;
    }
    
    .banner .splide__pagination {
        bottom: 20px !important;
    }
    
    .banner .splide__pagination__page {
        width: 10px !important;
        height: 10px !important;
        margin: 0 3px !important;
    }
}

/* 手机端视频区域优化 */
@media (max-width: 767px) {
    .index_video .left .text {
        padding: 20px 15px;
        text-align: center;
        margin-left: 0;
        margin-right: 0;
    }
    
    .index_video .left .text .title h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    .index_video .left .text .summary p {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        margin-bottom: 20px;
    }
    
    .index_video .left .text .more_btn a {
        font-size: 0.875rem !important;
        padding: 12px 20px !important;
    }
    
    .video_txt_box {
        display: none;
    }
    
    .index_video .left .video {
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 0;
    }
}

/* 手机端全球销售区域优化 */
@media (max-width: 767px) {
    .index_global .item_box {
        justify-content: center;
        gap: 20px;
    }
    
    .index_global .item {
        min-width: 140px;
        margin-bottom: 20px;
    }
    
    .index_global .item .num {
        font-size: 2rem !important;
    }
    
    .index_global .item .text {
        font-size: 0.75rem !important;
    }
    
    .index_global .item .bottom {
        font-size: 0.875rem !important;
    }
}

/* 手机端 Well Known In The World 区域优化 */
@media (max-width: 767px) {
    .index_wkitw {
        padding: 60px 0;
        text-align: center;
    }
    
    .index_wkitw .container {
        padding: 0 20px;
    }
    
    .index_wkitw .title {
        font-size: 1.5rem !important;
        margin-bottom: 20px;
    }
    
    .index_wkitw .summary {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
        max-width: 90%;
        margin: 0 auto;
    }
}

/* 手机端产品介绍区域优化 */
@media (max-width: 767px) {
    .index_prod .splide .splide__slide {
        min-width: 280px !important;
        padding: 20px 15px;
    }
    
    .index_prod .splide .splide__slide .image {
        margin-bottom: 15px;
        transform: none;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }
    
    .index_prod .splide .splide__slide .image img {
        transform: none;
    }
    
    .index_prod .splide .splide__slide .catname {
        font-size: 1rem !important;
        white-space: normal;
        line-height: 1.3;
    }
    
    .index_prod .splide .splide__slide:hover {
        transform: none;
    }
}

/* 手机端新闻区域优化 */
@media (max-width: 767px) {
    .index_news .news_title {
        flex-direction: column;
        padding: 40px 20px;
        gap: 15px;
    }
    
    .index_news .news_title .title {
        font-size: 1.5rem !important;
        text-align: center;
        width: 100%;
        margin-bottom: 15px;
    }
    
    .index_news .news_title .date,
    .index_news .news_title .catname,
    .index_news .news_title a {
        text-align: center;
        font-size: 0.875rem;
    }
    
    .index_news .news_title .catname {
        font-size: 1rem;
        margin: 10px 0;
        line-height: 1.4;
    }
}

/* 手机端ESG区域优化 */
@media (max-width: 767px) {
    .index_esg {
        padding: 40px 0;
    }
    
    .index_esg .left {
        display: none;
    }
    
    .index_esg .right {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .index_esg .esg-summary {
        text-align: center;
        padding: 30px 20px;
    }
    
    .index_esg .esg-summary p {
        font-size: 1rem;
        color: #fff;
    }
    
    .index_esg .esg-items {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 0 20px 30px;
    }
    
    .index_esg .esg-item {
        width: 100%;
        max-width: 250px;
    }
    
    .index_esg .esg-item h3 {
        font-size: 1rem;
        margin-top: 10px;
    }
}

/* 手机端应用区域优化 */
@media (max-width: 767px) {
    .index_application {
        padding: 40px 0;
    }
    
    .index_application .text {
        order: 1;
        text-align: center;
        padding: 0 20px 30px;
    }
    
    .index_application .text .title {
        font-size: 1.5rem !important;
        margin-bottom: 15px;
    }
    
    .index_application .text .summary {
        font-size: 0.875rem !important;
        text-align: center !important;
    }
    
    .index_application .content_txt {
        order: 2;
        padding: 20px;
    }
    
    .index_application .content ol {
        padding-left: 20px;
    }
    
    .index_application .content ol li {
        margin-bottom: 15px;
        padding-left: 40px;
    }
    
    .index_application .content ol li h2 span {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
    
    .index_application .app_item {
        order: 3;
        height: 200px !important;
        margin-bottom: 20px;
    }
    
    .index_application .app_item .before,
    .index_application .app_item .after {
        padding: 15px;
    }
    
    .index_application .app_item .catname {
        font-size: 0.875rem;
    }
    
    .index_application .app_item .summary {
        font-size: 0.75rem;
        line-height: 1.4;
    }
}

/* 手机端通用优化 */
@media (max-width: 480px) {
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    
    .row > [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* 标题通用优化 */
    .title_box .title {
        font-size: 1.5rem !important;
        padding: 15px 20px !important;
    }
    
    /* 按钮通用优化 */
    .btn_box a,
    .more_btn a {
        font-size: 0.75rem !important;
        padding: 10px 15px !important;
    }
}

/* 手机端菜单按钮颜色优化 */
.mobile-header .menu-trigger .hamburger span {
    background-color: #fff !important;
}

.mobile-header .menu-trigger .hamburger span:before,
.mobile-header .menu-trigger .hamburger span:after {
    background-color: #fff !important;
}

/* Video Section Styles - Optimized */
.index_video {
    margin-top: -105px;
}

@media (max-width: 1024px) {
    .index_video {
        margin-top: -70px;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .index_video {
        margin-top: -30px;
    }
    
    .index_video .left .row {
        flex-direction: column;
    }
    
    .index_video .offset-xl-1.col-xl-5.col-lg-7 {
        order: 1;
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0;
        margin-bottom: 30px;
    }
    
    .index_video .col-xl-5.col-lg-5 {
        order: 2;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .index_video {
        margin-top: -20px;
    }
}

.index_video .container-fluid > .row {
    align-items: stretch;
}

.index_video .left {
    position: relative;
    padding-bottom: 90px;
}

.index_video .left:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 65px;
    bottom: 0;

    background-image: url(https://yiming-en.oss-ap-northeast-1.aliyuncs.com/bg/about_2_bg.jpg);
    background-size: cover;
    background-position: center;
}

@media (max-width: 1685px) {
    .index_video .left {
        padding-top: 20px;
    }
}

@media (max-width: 1200px) {
    .index_video .left {
        padding-bottom: 30px;
    }
}

@media (max-width: 1024px) {
    .index_video .left {
        padding-top: 0;
        padding-bottom: 45px;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .index_video .left {
        padding-bottom: 20px;
    }
}

.index_video .left .row {
    align-items: flex-end;
}

@media (max-width: 768px) {
    .index_video .left .row {
        align-items: stretch;
    }
}

.index_video .left .video {
    position: relative;
}

@media (max-width: 767px) {
    .index_video .left .video {
        padding-left: 15px;
        padding-right: 15px;
    }
}


.index_video .left .video .play-icon {
    font-size: 24px;
    color: #333;
    margin-left: 4px;
}

.index_video .left .video img {
    width: 100%;
}

.index_video .left .text {
    padding-left: 45px;
    margin-top:100px;
}

@media (max-width: 1200px) {
    .index_video .left .text {
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
    }
}

@media (max-width: 1024px) {
    .index_video .left .text {
        padding-left: 0;
    }
}

@media (max-width: 991px) {
    .index_video .left .text {
        padding-top: 20px;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .index_video .left .text {
        width: 100%;
        padding-top: 0;
    }
}

.index_video .left .text .title {
    font-size: 2.125rem;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-family: Play-Bold, Microsoft JhengHei, Arial, sans-serif;
    font-style: italic;
    margin-bottom: 25px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    max-height: 120px;
}

@media (max-width: 1520px) {
    .index_video .left .text .title {
        font-size: 1.625rem;
    }
}

@media (max-width: 1338px) {
    .index_video .left .text .title {
        font-size: 1.5rem;
    }
}

@media (max-width: 1366px) {
    .index_video .left .text .title p {
        max-height: 130px;
    }
}

.index_video .left .text .summary {
    font-size: 1.125rem;
    color: #fff;
    line-height: 1.667;
    margin-bottom: 30px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    max-height: 150px;
}

@media (max-width: 1520px) {
    .index_video .left .text .summary {
        font-size: 1rem;
    }
}

@media (max-width: 1280px) {
    .index_video .left .text .summary {
        -webkit-line-clamp: 3;
        max-height: 78px;
    }
}

.index_video .left .text .more_btn a {
    display: inline-block;
    font-family: Play-Regular, Microsoft JhengHei, Arial, sans-serif;
    color: #fff;
    text-transform: uppercase;
    background-color: #003d97;
    font-style: italic;
    padding: 15px 35px;
    line-height: 1;
    font-size: 1.25rem;
    position: relative;
    z-index: 2;
    text-decoration: none;
}

@media (max-width: 1280px) {
    .index_video .left .text .more_btn a {
        font-size: 1rem;
    }
}

.index_video .left .text .more_btn a img {
    margin-left: 10px;
    margin-top: -5px;
}

.index_video .left .text .more_btn a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 100%;
    bottom: 0;
    background-color: #333;
    transition: 0.3s ease-in-out;
    z-index: -1;
}

.index_video .left .text .more_btn a:hover:before {
    right: 0;
}

.index_video .left .text .more_btn a:hover {
    color: #fff;
}

@media (max-width: 1024px) {
    .index_video .video_txt_box {
        display: none;
    }
}

.index_video .video_txt_box .video_txt {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
}

@media (max-width: 1200px) {
    .index_video .video_txt_box .video_txt {
        display: none;
    }
}

.index_video .video_txt_box .video_txt .text {
    font-size: 6.875rem;
    color: #e9e9e9;
    font-family: Play-Bold, Microsoft JhengHei, Arial, sans-serif;
    text-transform: uppercase;
    position: relative;
    line-height: 1;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-style: italic;
    padding: 0;
}

.index_video .video_txt_box .video_txt .text:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #e5e5e5;
}