@import url('all.css');
@font-face{font-family:"Din Regular";src:url(font/DinRegular.woff2) format("woff2"),url(font/DinRegular.woff) format("woff"),url(font/DinRegular.ttf) format("truetype"),url(font/DinRegular.eot) format("embedded-opentype"),url(https://www.cmtech.com/bocstatic/web/fonts/Din%20Regular.svg) format("svg")}
*{margin:0;padding:0;box-sizing: border-box;}
blockquote,body,dd,div,dl,dt,fieldset,figcaption,figure,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,span,td,textarea,th,ul{margin:0;padding:0;outline:0}
a>img{cursor:pointer}
a>div{cursor:pointer}
a>p{cursor:pointer}
a>h5{cursor:pointer}
a>h4{cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0;vertical-align:middle}
address,caption,cite,code,dfn,em,th,var,i{font-style:normal;font-weight:400}
ol,ul,li{list-style:none;padding:0;margin:0}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%}
a,button,input,select,textarea{outline:0;border-radius:0;line-height:normal}
abbr,acronym{border:0}
a{cursor:pointer}
body{font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;font-size:14px;box-sizing:border-box;outline:none;color:#333;background-color:#fff;}
:root {
            --primary-color: #2563eb;
            --secondary-color: #764ba2;
            --text-dark: #333;
            --text-light: #888;
            --bg-light: #f8fafc;
            --white: #ffffff;
            --tag-bg: #f5f5f5;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            --hover-bg: rgba(0, 0, 0, 0.05);
            --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            --font26:.26rem;
            --font24:.24rem;
            --font23:.23rem;
            --font22:.22rem;
            --font20:.20rem;
            --font18:.18rem;
            --font17:.17rem;
        }
.dinr{font-family:"Din Regular"!important}
.clearfix:after{content:"";height:0;display:block;clear:both}
.fl{float:left}
.fr{float:right}
.dis_n{display:none;}
.dis_b{display:block;}
.pa{position:absolute;}
.pr{position:relative;}
a{text-decoration:none}
.index-bg{background-color:#fff;}
.flexBetween{display:-webkit-flex;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
.flexStart{display:-webkit-box;display:-ms-flexbox;display:flex;display:-webkit-flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
.flexCenter{display:-webkit-flex;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
.flexEnd{display:-webkit-flex;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
.mt80{margin-top:80px;}


.container{max-width:1400px;margin:0 auto;padding:0 20px}

.floating-nav{transition:all 0.4s cubic-bezier(0.16,1,0.3,1);background-color:transparent;position:fixed;top:0;left:0;right:0;z-index:1000;padding:12px 0;border-bottom:1px solid transparent}
.floating-nav.scrolled{background-color:rgba(255,255,255,0.95);padding:12px 0;backdrop-filter:blur(10px);border-bottom-color:rgba(0,0,0,0.1)}
.nav-container{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 24px;transition:all 0.4s cubic-bezier(0.16,1,0.3,1)}
.floating-nav.scrolled .nav-container{padding:0 24px}
.logo img{transition:all 0.4s cubic-bezier(0.16,1,0.3,1);height:30px;width:auto;}
.floating-nav.scrolled .logo img{height:30px;width:auto}
.nav-menu{display:flex;align-items:center}
.menu-toggle{display:none;flex-direction:column;cursor:pointer;z-index:1001}
.menu-toggle span{width:25px;height:3px;background:var(--text-dark);margin:3px 0;transition:var(--transition);border-radius:2px}
.desktop-menu {
    display: flex;
    gap: 60px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.desktop-menu li {
    position: relative;
}

.desktop-menu a {
    text-decoration: none;
    color: var(--primary-black);
    font-size: 0.2rem;
    padding: 8px 0 10px 0;
    transition: var(--transition-smooth);
    position: relative;
    display: block;
}

.desktop-menu a:hover {
    color: #333; /* 悬停时的颜色 */
}

/* 选中状态样式 */
.desktop-menu a.active1 {
    color: #333; /* 选中时的颜色 */
    font-weight: 500;
}

/* 选中状态的下划线 */
.desktop-menu a.active1::after {
    /* content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #007bff; */
    transform: scaleX(1);
    transition: none; /* 移除过渡效果防止抖动 */
}

/* 悬停时的下划线效果 */
.desktop-menu a:hover::after {
    /* content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #007bff; */
    transform: scaleX(1);
    /* transition: transform 0.3s ease; */
}

/* 默认状态无下划线 */
.desktop-menu a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #333;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: center;
}
.mobile-menu{position:fixed;top:0;left:0;width:100%;height:100vh;background:rgba(255,255,255,0.98);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:var(--transition);z-index:999}
.mobile-menu.active{opacity:1;visibility:visible}
.mobile-menu ul{list-style:none;text-align:center}
.mobile-menu li{margin:20px 0}
.mobile-menu a{text-decoration:none;color:var(--text-dark);font-size:var(--font24);font-weight:500;padding:10px 20px;display:inline-block;position:relative;transition:var(--transition)}
.mobile-menu a:hover{color:var(--primary-color)}
.mobile-menu a::after{content:'';position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:0;height:3px;background-color:var(--primary-color);transition:var(--transition)}
.mobile-menu a:hover::after{width:50px}
.menu-toggle.active span:nth-child(1){transform:rotate(-45deg) translate(-5px,6px)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:rotate(45deg) translate(-5px,-6px)}
.banner-section{width:100%;height:600px;position:sticky;top:0;z-index:100}
.banner-swiper{width:100%;height:100%}
.swiper-slide{display:flex;align-items:center;justify-content:center}
.swiper-slide img{width:100%;height:100%;object-fit:cover}
.swiper-pagination{bottom:30px !important}
.swiper-pagination-bullet{width:30px;height:3px;border-radius:0;background:rgba(255,255,255,0.5);opacity:1;transition:var(--transition)}
.swiper-pagination-bullet-active{background:var(--white);width:50px}
.swiper-button-next,.swiper-button-prev{width:50px;height:50px;background:rgba(255,255,255,0.2);border-radius:50%;transition:var(--transition);backdrop-filter:blur(5px)}
.swiper-button-next::after,.swiper-button-prev::after{font-size:16px;color:var(--white);font-weight:bold}
.swiper-button-next:hover,.swiper-button-prev:hover{background:rgba(255,255,255,0.3);transform:scale(1.1)}

/* 内容区域 */
.main-content {
    position: relative;
    z-index: 200;
    background: var(--white);
}

/* 顶部筛选区域 */
.case-header{padding:80px 0 60px;background-color:var(--white)}
.header-content{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:40px}
.intro-text p{font-size:var(--font23);font-weight:500;color:var(--text-dark);margin-bottom:4px;line-height:1.4}
.category-nav{display:flex;flex-wrap:wrap;gap:12px}
.nav-item{text-decoration:none;color:var(--text-light);font-size:var(--font18);padding:5px 16px;border-radius:20px;background-color:var(--tag-bg);transition:var(--transition-smooth)}
.nav-item:hover{color:var(--text-dark);background-color:#e0e0e0}
.nav-item.active{color:var(--white);background-color:var(--text-dark)}

/* 案例网格区域 */
.case-gallery{padding:0 0 100px;background-color:var(--white)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 30px}
.case-item{display:flex;flex-direction:column}
.case-link-wrapper{text-decoration:none;color:inherit;display:block}
.image-wrapper{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:0px;margin-bottom:16px;background-color:#f0f0f0}
.image-wrapper img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s cubic-bezier(0.16,1,0.3,1)}
.hover-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.2);opacity:0;transition:opacity 0.4s ease}
.case-item:hover .image-wrapper img{transform:scale(1.05)}
.case-item:hover .hover-overlay{opacity:1}
.item-info{display:flex;flex-direction:column;gap:4px}
.item-info h3{font-size:var(--font20);font-weight:400;color:var(--text-dark);transition:color 0.3s ease}
.item-info time{font-size:var(--font18);color:#cfcfcf;}
.case-item:hover .item-info h3{color:#555}

/* 更多按钮样式 */
.load-more-wrapper{margin-top:60px;text-align:center}
.btn-load-more{background:transparent;border:1px solid var(--text-dark);padding:14px 32px;font-size:var(--font18);font-weight:400;color:var(--text-dark);cursor:pointer;display:inline-flex;align-items:center;gap:12px;border-radius:30px;transition:var(--transition-smooth);position:relative;overflow:hidden}
.btn-label{position:relative;z-index:1;transition:transform 0.3s ease}
.btn-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;transition:transform 0.3s ease}
.btn-icon i{font-size:0.18rem}
.btn-load-more:hover{background-color:var(--text-dark);color:var(--white);padding-right:40px}
.btn-load-more:hover .btn-label{transform:translateX(-4px)}
.btn-load-more:hover .btn-icon{transform:translateX(4px)}

/* 页脚footer */
.site-footer{background-color:#000000;color:#ffffff;padding:60px 0 40px;font-size:14px}
.footer-wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:50px}
.footer-left{flex:1;display:flex;flex-direction:column;gap:25px}
.company-name{font-size:.23rem;font-weight:700;color:#ffffff;letter-spacing:1px}
.contact-details{display:flex;flex-direction:column;gap:14px}
.info-item{color:#aaaaaa;display:flex;align-items:center;gap:12px;transition:color 0.3s ease}
.info-item i{width:20px;text-align:center;color:#666;font-size:.18rem}
.info-item:hover{color:#ffffff}
.info-item:hover i{color:#ffffff}
.copyright{margin-top:10px;font-size:0.18rem;color:#666}
.copyright a{color:#888;text-decoration:none;transition:color 0.3s ease;border-bottom:1px dotted #666}
.copyright a:hover{color:#ffffff;border-bottom-color:#ffffff}
.footer-right{flex-shrink:0}
.qr-group{display:flex;flex-direction:row;gap:30px;justify-content:flex-start}
.qr-item{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:110px}
.qr-item img{width:120px;height:120px;object-fit:contain;background-color:#ffffff;padding:6px;border-radius:0px;transition:transform 0.3s ease,box-shadow 0.3s ease}
.qr-item:hover img{transform:scale(1.05);box-shadow:0 4px 15px rgba(255,255,255,0.1)}
.qr-label{color:#aaaaaa;font-size:0.18rem;font-weight:500;letter-spacing:0.5px;white-space:nowrap}

/* 回到顶部 */
.back-to-top{position:fixed;right:5px;bottom:30px;width:60px;height:60px;border-radius:50%;background:rgba(0,123,255,.9);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transition:all .3s ease;z-index:999998;border:none;outline:0;box-shadow:0 2px 10px rgba(0,0,0,.2);font-family:Arial,sans-serif}
.back-to-top.show{opacity:1;visibility:visible}
.back-to-top i{font-size:20px;margin-bottom:2px}
.back-to-top span{font-size:12px}
.back-to-top:hover{background:rgba(0,86,179,.9);transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.3)}

/* 加载更多 */
.load-more-section{margin-top:80px;text-align:center}
.load-more-button{background:transparent;border:1px solid var(--text-dark);border-radius:30px;padding:14px 32px;font-size:0.18rem;font-weight:400;color:var(--text-dark);cursor:pointer;display:inline-flex;align-items:center;gap:12px;transition:var(--transition-smooth);position:relative;overflow:hidden;text-decoration:none;min-width:160px}
.load-more-button:hover:not(.loading-state){background-color:var(--text-dark);color:var(--white);padding-right:40px}
.button-text{position:relative;z-index:1;transition:transform 0.3s ease}
.load-more-button:hover .button-text{transform:translateX(-4px)}
.button-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;transition:transform 0.3s ease}
.load-more-button:hover .button-icon{transform:translateX(4px)}
.load-more-button.loading-state{pointer-events:none;padding-right:32px}
.load-more-button.loading-state .button-text{opacity:0}
.loading-indicator{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:none}
.load-more-button.loading-state .loading-indicator{display:block}
.loading-circle{width:20px;height:20px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:rotateCircle 1s linear infinite}
@keyframes rotateCircle{0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}.load-more-button.success-state{border-color:#4CAF50;color:#4CAF50}
.load-more-button.error-state{border-color:#F44336;color:#F44336}

/* 文章内容 */
.article-content{max-width:1200px;margin:0 auto;padding:40px 20px;}
.article-header{margin-bottom:30px;padding-bottom:20px;border-bottom:0px solid var(--text-light)}
.article-title{font-size:.3rem;font-weight:700;color:var(--text-dark);line-height:1.3;margin:0 0 15px}
.article-meta{display:flex;flex-wrap:wrap;gap:15px;color:var(--text-light);font-size:0.18rem}
.meta-item{display:flex;align-items:center;gap:6px}
.article-image{width:100%;height:auto;border-radius:8px;margin:25px 0;box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.article-intro{font-size:.2rem;line-height:1.7;margin:20px 0 30px;font-weight:400}
.article-body{line-height:1.8;color:var(--text-dark);font-size:.2rem}
.article-body p{margin:0px 0;line-height:1.8;}
.article-body h2{font-size:.21rem;margin:40px 0 20px;color:var(--text-dark);font-weight:600}
.article-body h3{font-size:.22rem;margin:30px 0 15px;color:var(--text-dark);font-weight:600}
.article-body ul,.article-body ol{margin:20px 0;padding-left:30px}
.article-body li{margin-bottom:10px}
.article-body img{width:100%;height:auto;border-radius:0px;margin:0px 0;text-align:center;}
.article-figure{margin:30px 0;text-align:center}
.article-figure img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,0.12)}
.figure-caption{margin-top:10px;font-size:0.18rem;color:var(--text-light);font-style:italic}
.article-quote{border-left:4px solid var(--text-light);margin:30px 0;padding:20px 25px;background-color:var(--tag-bg);font-style:italic;color:var(--text-dark);font-size:.2rem;line-height:1.6}
.article-tags{margin:40px 0 20px;display:flex;flex-wrap:wrap;gap:10px}
.tag{background-color:var(--tag-bg);color:var(--text-dark);padding:6px 14px;border-radius:20px;font-size:0.18rem;text-decoration:none;transition:var(--transition-smooth)}
.tag:hover{background-color:var(--text-dark);color:var(--white)}
.article-navigation{display:flex;flex-direction:row;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:0px solid var(--text-light)}
.nav-link{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-dark);text-decoration:none;font-weight:400;padding:12px;border:1px solid var(--text-light);border-radius:6px;transition:var(--transition-smooth);text-align:center}
.nav-link:hover{background-color:var(--hover-bg);border-color:var(--text-dark);color:var(--text-dark)}

/* 关于我们 */
.text-content-layout{display:flex;gap:60px;padding:30px 0;max-width:1400px;margin:0 auto}
.left-blank{flex:0 0 25%;min-width:250px}
.right-text-content{flex:1;max-width:800px;line-height:1.8;font-size:.2rem}
.right-text-content p{margin:25px 0;text-indent:2em}
/* .right-text-content .intro-paragraph{font-size:.2rem;border-left:4px solid var(--text-dark);padding-left:20px;margin-top:0} */
/* 自适应图片样式 */
.adaptive-image {
    width: 100%;
    height: auto;
    border-radius: 0px;
    margin: 30px 0 70px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
}

/* 联系我们 */
.contact-page-layout{display:flex;gap:60px;padding:60px 0;max-width:1400px;margin:0 auto}
.left-contact-title{flex:0 0 40%;min-width:250px;display:flex;align-items:flex-start;justify-content:center;padding-top:0px;}
.contact-us-title{font-size:.3rem;font-weight:300;color:#000;writing-mode:horizontal-tb;text-orientation:mixed;transform:none;white-space:nowrap; letter-spacing: 2px;}
.right-contact-content{flex:1;max-width:800px}
.contact-section{margin-bottom:40px}
.contact-intro{line-height:1.8;font-size:.18rem;margin-bottom:20px}
.com-info{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.com-name{font-size:.2rem;font-weight:500;line-height:1.8}
.company-name-en{font-size:.16rem;font-weight:400}
.contact-info{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.contact-item{font-size:.18rem;color:#000}
.business-consultation{margin-bottom:20px}
.consultation-title{font-size:.2rem;font-weight:400;color:#000;margin-bottom:15px}
.consultation-info{display:flex;flex-direction:column;gap:10px}
.consultation-item{font-size:.18rem;color:#000}
.qr-codes{display:flex;gap:40px;margin-bottom:20px;justify-content:flex-start}
.qr-item{text-align:center;flex:0 0 auto}
.qr-code{width:120px;height:120px;border:1px solid #ddd;padding:5px;background:#fff;margin:0 auto 10px}
.qr-label{font-size:0.18rem;color:#aaa}
.introduction-section{margin-bottom:20px}
.intro-item{font-size:.18rem;color:#000;line-height:1.4;margin-bottom:5px}
.intro-item:last-child{margin-bottom:0}
.intro-item strong{font-weight:bold;display:inline-block;min-width:80px}

@media screen and (max-width: 1024px) {

}


/* 响应式设计 */
@media (max-width: 992px) {
 .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
 .header-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }
    
    .desktop-menu {
        display: none;
    }
    
    .banner-section {
        height: 400px;
    }

.gallery-grid{grid-template-columns:1fr;gap:30px}
.category-nav{width:100%;overflow:visible;flex-wrap:wrap}
.nav-item{white-space:normal;flex-grow:1;text-align:center}
.load-more-wrapper{margin-top:40px;}

 .site-footer{padding:40px 0 30px}
.footer-wrapper{flex-direction:column;align-items:center;text-align:center;gap:40px}
.footer-right{order:-1;width:100%;display:flex;justify-content:center}
.qr-group{justify-content:center;gap:20px}
.footer-left{width:100%;align-items:center}
.contact-details{align-items:center}
.info-item{justify-content:center}

.load-more-button{padding:12px 28px;border-radius:10px}
.load-more-button:hover:not(.loading-state){padding-right:36px}
.load-more-section{margin-top:60px}

.article-content{padding:30px 15px}
.article-header{margin-bottom:20px}
.article-quote{padding:15px 20px;}
.article-meta{gap:8px}

.article-navigation {
        flex-direction: column; /* 垂直布局 */
        gap: 12px; /* 调整间距 */
    }
    
    .nav-link {
        justify-content: center; /* 移动端居中对齐 */
        text-align: center; /* 文字居中 */
    }

    .text-content-layout {
        flex-direction: column;
        gap: 30px;
        padding: 40px 0px;
    }
    
    .left-blank {
        display: none; /* 移动端隐藏左侧空白 */
    }
    
    .right-text-content {
        max-width: 100%;
    }
    
    .right-text-content p {
        text-indent: 1em; /* 移动端缩进稍小 */
    }

    .contact-page-layout {
        flex-direction: column;
        gap: 30px;
        padding: 40px 20px;
    }
    
    .left-contact-title {
        display: none; /* 移动端隐藏左侧标题 */
    }
    
    .right-contact-content {
        max-width: 100%;
    }
    
    .qr-codes {
        /* flex-direction: column; */
        gap: 20px;
    }
    
    .contact-section {
        margin-bottom: 30px;
    }

}

@media (max-width: 576px) {
    .banner-section {
        height: 300px;
    }
    
}

@media screen and (max-width: 480px) {
.copyright{flex-flow:column;}
.qr-item img{width:100px;height:100px}
.qr-group{gap:15px}
.article-content{padding:20px 0px}
.text-content-layout {
        padding: 30px 0px;
    }
    
    .right-text-content p {
        margin: 20px 0;
    }

    .contact-page-layout {
        padding: 30px 0px;
    }
    
    .qr-codes {
        gap: 15px;
    }
    
    .qr-code {
        width: 100px;
        height: 100px;
    }
    
    .intro-item strong {
        min-width: auto;
        margin-bottom: 5px;
    }
}