/* Signe Interior Business HTML-5 Template */

/*** 

====================================================================
	Attachment Css Files
====================================================================

***/

@import url('global.css');
@import url('header.css');
@import url('footer.css');
@import url('animate.css');
@import url('rtl.css');
@import url('dark-body.css');

@import url('slider.css');
@import url('about.css');
@import url('services.css');
@import url('accordion.css');
@import url('process.css');
@import url('clients.css');
@import url('projects.css');
@import url('pricing.css');
@import url('team.css');
@import url('testimonial.css');
@import url('news.css');
@import url('contact.css');
@import url('commited.css');
@import url('faq.css');
@import url('counter.css');
@import url('flaticon_interior.css');

@import url('cta.css');
@import url('shop.css');
@import url('privacy.css');
@import url('not-found.css');
@import url('coming-soon.css');
@import url('page-title.css');
@import url('jquery-ui.css');
@import url('swiper.min.css');
@import url('font-awesome.css');
@import url('fontawesome-free.css');
@import url('custom-animate.css');
@import url('magnific-popup.css');
@import url('odometer-theme-default.css');
@import url('jquery.bootstrap-touchspin.css');



/* 全局基础重置，不污染外部页面 */
.drecksage-container * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.drecksage-container {
    width: 100%;
    background: #fff;
}
.drecksage-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}
:root{
    --main-blue:#0044aa;
}

/* ========== 模块1 头部标题（代理介绍模块）drecksage-agent ========== */
.drecksage-agent-wrap {
    padding: 60px 0;
}
.drecksage-agent-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:40px;
}
.drecksage-agent-text{
    flex:1;
}
.drecksage-agent-title-en{
    font-size: clamp(24px,3vw,42px);
    color:var(--main-blue);
    margin-bottom:12px;
}
.drecksage-agent-desc{
    font-size: clamp(16px,1.6vw,20px);
    line-height:1.7;
    color:#333;
}
.drecksage-agent-pic{
    flex:1;
}
.drecksage-agent-pic img{
    width:335px;
    height:auto;
    display:block;
}

/* ========== 模块2 蓝色横幅banner ========== */
.drecksage-banner-wrap{
    background-color: var(--main-blue);
    padding:50px 0;
}
.drecksage-banner-text{
    color:#ffffff;
    font-size: clamp(18px,1.8vw,22px);
    line-height:1.8;
}

/* ========== 模块3 ESR橡胶环图文 esr ========== */
.drecksage-esr-wrap{
    padding:60px 0;
}
.drecksage-esr-content{
    display:flex;
    align-items:center;
    gap:40px;
}
.drecksage-esr-img{
    flex:1;
}
.drecksage-esr-img img{
    width:100%;
    height:auto;
    display:block;
}
.drecksage-esr-text{
    flex:1;
}
.drecksage-esr-title{
    font-size: clamp(22px,2.4vw,30px);
    color:var(--main-blue);
    margin-bottom:16px;
}
.drecksage-esr-desc{
    font-size: clamp(16px,1.6vw,20px);
    line-height:1.7;
    color:#333;
}

/* ========== 模块4 11大优势标题图片 advantage ========== */
.drecksage-advantage-wrap {
    padding: 40px 0;
}
.drecksage-advantage-title {
    font-size: clamp(28px, 5vw, 60px);
    color: var(--main-blue);
    font-weight: 600;
    margin: 0 0 32px;
    line-height: 1.2;
    text-align:center;
}
.drecksage-advantage-imgbox {
    border: 2px solid var(--main-blue);
    padding: 4px;
}
.drecksage-advantage-imgbox img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========== 模块5 参数网格列表 spec ========== */
.drecksage-spec-wrap {
    padding: 60px 0;
}
.drecksage-spec-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 48px;
}
.drecksage-spec-item {
    display: flex;
    gap: 20px;
}
.drecksage-spec-iconbox {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    background-color: var(--main-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}
.drecksage-spec-iconbox img {
    width: 60%;
    height: auto;
}
.drecksage-spec-text {
    flex: 1;
}
.drecksage-spec-title {
    font-size: clamp(20px, 2.4vw, 28px);
    color: var(--main-blue);
    font-weight: bold;
    margin: 0 0 10px;
}
.drecksage-spec-desc {
    font-size: clamp(16px, 1.7vw, 20px);
    color: #444;
    line-height: 1.7;
    margin: 0;
}

/* ========== 移动端响应式统一规则 ========== */
@media screen and (max-width:992px){
    .drecksage-agent-content,
    .drecksage-esr-content{
        flex-direction:column;
    }
    .drecksage-spec-grid{
        grid-template-columns: 1fr;
        gap:28px;
    }
    .drecksage-spec-iconbox{
        width:72px;
        height:72px;
    }
}


/* 独立前缀类名：drecksage-banner- 不和之前模块冲突 */
.drecksage-banner-wrap {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    background-color: #0044aa;
    position: relative;
    overflow: hidden;
    min-height: 360px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
/* 背景辊筒图片 */
.drecksage-banner-bgimg {
    position: absolute;
    right: 0;
    top: 0;
    width: 72%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    opacity: 0.92;
}
/* 左侧文字容器 */
.drecksage-banner-textbox {
    position: relative;
    z-index: 2;
    width: 46%;
    padding: 40px 36px;
    color: #ffffff;
    box-sizing: border-box;
}
.drecksage-banner-title {
    font-size: clamp(26px, 4vw, 44px);
    font-weight: bold;
    margin: 0 0 26px;
    line-height: 1.2;
color:#fff;
}
.drecksage-banner-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
color:#fff;
}
.drecksage-banner-feature-list li {
    font-size: clamp(13px, 2vw, 18px);
    line-height: 1.7;
    margin-bottom: 10px;
    padding-left: 28px;
    position: relative;
color:#fff;
}
.drecksage-banner-feature-list li p{color:#fff;}
/* 方块前置符号 */
.drecksage-banner-feature-list li::before {
    content: "";
    width: 12px;
    height: 12px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0.45em;
}
/* 右下角文字 */
.drecksage-banner-import-txt {
    position: absolute;
    right: 32px;
    bottom: 32px;
    color: #fff;
    font-size: clamp(22px, 3vw, 40px);
    font-weight: bold;
    z-index: 2;
}

/* 移动端适配 */
@media screen and (max-width: 992px) {
    .drecksage-banner-wrap {
        flex-direction: column;
    }
    .drecksage-banner-bgimg {
        width: 100%;
        opacity: 0.25;
    }
    .drecksage-banner-textbox {
        width: 100%;
        padding: 30px 24px;
    }
    .drecksage-banner-import-txt {
        position: relative;
        right: auto;
        bottom: auto;
        padding: 0 24px 24px;
    }
}