body{font-family:'Segoe UI',Arial,sans-serif;color:#333;overflow-x:hidden}

a:hover{text-decoration:none;}
/* 核心：1440容器 */
.container-1440{max-width:1440px;margin:0 auto;padding:0 15px;width:100%}
.my-shadow {box-shadow: 0 .3125rem .625rem rgba(0, 0, 0, .15) !important;}
.inner-page-main{}
.bg-gray{background-color:#f1f2f4;}
/* ---------------- Header ---------------- */
.header-transparent{position:relative;width:100%;z-index:1000;background-color:#333333;padding:15px 0}
.navbar-brand{font-size:28px;font-weight:700;color:#fff!important}
.nav-link{color:#ccc!important;font-size:0.875rem;margin:5px 8px;transition:.3s;display: flex;font-size: 1rem;justify-content: space-between;align-items: anchor-center;border-bottom:2px solid #333333}
.nav-link:hover{color:#fff!important}
.body-es .nav-link{font-size:1rem;}
.nav-item.active .nav-link,.nav-item:hover .nav-link{color:#c83232 !important;}
.dropdown-menu{border-radius: 5px; background-color:#ffffff;border:none;padding:0;overflow:hidden}
.dropdown-item{padding:0;}
.dropdown-item.focus,.dropdown-item:hover{background-color:#c83232;color:#fff!important;}
.dropdown-item-link{display:block;color:#333!important;font-size:15px;margin:0px; padding: .75rem 1.5rem;}
.dropdown-item.focus .dropdown-item-link,.dropdown-item:hover .dropdown-item-link{color:#fff!important;text-decoration:none;}
.dropdown-item.active .dropdown-item-link{color:#333!important;border-bottom:2px solid #c83232}
@media (min-width:1400px){
  .nav-link{font-size:1.125rem;}
}
/* 大屏：导航下拉同时支持 hover 悬停展开与点击（Bootstrap data-toggle），移动端仍以点击为主 */
@media (min-width:992px){
  .nav-link{margin: 0 0.8rem;padding: 0px !important;}
  .nav-item.active .nav-link, .nav-item:hover .nav-link{border-bottom:2px solid #c83232}
}

/* --- 关键：自定义 1300px 断点 --- */
@media (max-width: 1299.98px) {
  .header-transparent .navbar-nav .nav-item.dropdown{position:relative}
  .header-transparent .navbar-nav .nav-item.dropdown>.dropdown-menu{margin-top:0}
  .header-transparent .navbar-nav .nav-item.dropdown:hover>.dropdown-menu{display:block}
  .navbar-expand-lg{justify-content: space-between;-ms-flex-flow: wrap;flex-flow: wrap;-ms-flex-pack: justify;}
  /* 1. 强制导航栏容器在 1300px 以下保持垂直布局空间 */
  .navbar-expand-lg .navbar-toggler{display:block!important}
  .navbar-expand-lg .navbar-collapse{display:none!important;flex-basis:100%;flex-grow:1;align-items:center}
  /* 当点击汉堡按钮展开后 */
  .navbar-expand-lg .navbar-collapse.show{display:block!important}
  /* 2. 布局优化：让品牌和按钮两端对齐 */
  .navbar-expand-lg .container,.navbar-expand-lg .container-fluid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
  /* 3. 菜单项布局优化 */
  .navbar-expand-lg .navbar-nav{flex-direction:column;text-align:center;padding-top:1rem}
  .navbar-expand-lg .nav-item{width:100%;border-bottom:1px solid rgba(255,255,255,.1)}  
}

/* --- 恢复 1300px 以上的横向布局 --- */
@media (min-width: 1300px) {
  .navbar-expand-lg .navbar-toggler{display:none!important}
  .navbar-expand-lg .navbar-collapse{display:flex!important}
  .navbar-expand-lg .navbar-nav{flex-direction:row}
  .navbar-expand-lg .nav-item{border-bottom:none}
}
/* ---------------- Swiper Banner ---------------- */
.banner-swiper{width:100%;height:360px}
.swiper-slide{position:relative;background-size:cover;background-position:center}
.slide-inner{height:100%;display:flex;align-items:center;color:#fff;background:rgba(0,0,0,.2)}
.swiper-pagination-bullet{background:#fff;opacity:.5}
.swiper-pagination-bullet-active{background:#c83232;opacity:1;width:25px;border-radius:5px}
@media (min-width:992px){.banner-swiper{height:700px}}
/* ---------------- Popular Categories (Static 5 columns) ---------------- */
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.cat-card{background:#fff;text-align:center;transition:.3s;box-shadow:1px 1px 5px #adabab;border-radius:10px;overflow:hidden}
.cat-card a{display:block;width:100%;height:100%;}
.cat-card img{width:100%;border-radius:4px}
.cat-card .cat-title{font-weight:600;position:relative;line-height:45px;height:45px;color:#333333;}
.cat-title{font-weight:600;position:relative;line-height:45px;height:45px}
.cat-title::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:30px;height:3px;background:#c83232}
/* ---------------- Why Choose GreatSink ---------------- */
.choose-greatsink{margin-top:110px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.choose-greatsink .item{text-align:center}
.choose-greatsink .item img{width: 80px; height: 80px; object-fit: contain;}
.choose-greatsink .item p{font-size: 18px; font-weight: 500; margin-top: 10px;}
/* ---------------- Featured Products Swiper ---------------- */
.product-swiper{padding:20px 0 50px}
.prod-card{background:#fff;margin-left:5px;margin-right:5px;border-radius:4px;text-align:center;height:100%;box-shadow:1px 1px 5px #adabab;border-radius:10px;overflow:hidden}

/* 别忘了清除 Swiper 默认字体 */
.product-swiper .swiper-button-prev,.product-swiper .swiper-button-next{width: 46px;height: 46px; border-radius: 23px;background-color: rgba(255, 255, 255, 0.8);box-shadow: 1px 1px 5px #999;}
.product-swiper .swiper-button-prev::after,.product-swiper .swiper-button-next::after  { display: none; }
/* 现在的图标由本地的 all.min.css 控制 */
.product-swiper .swiper-button-prev i,.product-swiper .swiper-button-next i { font-size: 30px; color: #333; }
.prod-card img {width: 100%;}
.prod-card-content{padding: 10px;}
.prod-card-content h6{margin-bottom: 0px; font-size: 16px; height: 40px;line-height: 20px;color:#333333;}
.prod-card-content small{font-size: 14px;}

.my-btn-red{background-color:#c83232;border-color:#c83232;color:#fff;font-weight:600;padding:.65rem 1.75rem;transition:background-color .2s ease,border-color .2s ease}
.my-btn-red:focus,.my-btn-red:hover{border-color:#a82828;color:#fff}
.my-btn-red:focus{box-shadow:none}

/* ---------------- Awards Swiper ---------------- */

.awards-wrap{width:100%;height:100%;overflow:hidden;}
.awards-wrap .swiper-wrapper{padding-bottom: 30px;}

.awards-wrap .swiper-slide{width:100%;height:100%;}
.awards-wrap .swiper-slide img{width:100%;height:100%;object-fit:cover;}

/* ---------------- Become Our Distributor (全屏背景，内容1440) ---------------- */
.distributor-full-width{width:100vw;height:auto; position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;background-color:#fff;display:flex}
.cta-dark-part{height:157px; background-color:#2b2e33;color:#fff;padding:25px 0;flex:1;clip-path:polygon(0 0,97% 0,100% 101%,0% 101%)}
.inner-distributor{max-width: 720px; width: 100%; padding-left: 15px;}
.cta-light-part{background-color:#fff;padding:25px 0;flex:1}
.cta-light-part .inner{max-width: 720px; width: 100%; display: flex; align-items: center; justify-content: space-around;}
.cta-light-part .inner .num{font-size: 2.25rem; font-weight: 700;line-height: 2.25rem;}
.cta-light-part .inner p{font-size: 1.125rem; font-weight: 500; line-height: 1.125rem;}
.btn-red-cta{background:#c83232;color:#fff;border-radius:2px;padding:10px 25px;border:none}
.btn:hover{background:#a82828;color:#fff}
.body-es .distributor_title{font-size: 1.5rem;}
@media (min-width: 1600px) {
.cta-dark-part{height: 128px;}
}
/* ---------------- Footer ---------------- */
.footer{background:#2b2e33;color:#999;padding:60px 0;font-size:14px}
.footer h5{color:#fff;margin-bottom:25px;font-size:16px}
.footer ul{list-style:none;padding:0}
.footer li{margin-bottom:12px}
.footer a{color:#c0c0c0;text-decoration:none}
.footer a:hover{color:#fff}
.social-box a{display:inline-block;width:38px;height:38px;background:#444;color:#fff;line-height:38px;text-align:center;border-radius:4px;margin-right:8px;font-size: 20px;}
.footer h5{color:#fff;margin-bottom:25px;font-size: 1.125rem;}
.footer-menu li{margin-bottom:12px}
.footer-menu li a{font-size: 1rem}
.footer-contact p{color:#c0c0c0;margin-bottom:12px;font-size:16px}
/* 首页新闻卡片：左图右文，简介两行截断 */
.home-news-card{transition:box-shadow .2s ease,transform .2s ease}
.home-news-card-link:hover .home-news-card{box-shadow:0 .5rem 1rem rgba(0,0,0,.12)!important}
.home-news-card .row{min-height:120px}
.home-news-card__media{background:#f0f0f0;min-height:120px}
.home-news-card__img{height:100%;min-height:120px;object-fit:cover;display:block}
.line-clamp-1{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;word-break:break-word}
.line-clamp-2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-word}
.line-clamp-3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;word-break:break-word}
.home-news-card__title{font-size:1.05rem;line-height:1.35}
.news-card-text {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;word-break: break-word;}
@media (min-width: 992px) {
.news-card-text{-webkit-line-clamp: 3;}
}



/** inner page banner **/
.inner-banner{position:relative;min-height:200px;display:flex;align-items:center;background-color:#1a1d22;background-size:cover;background-position:right center}
.inner-banner-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(0,0,0,.72) 0,rgba(0,0,0,.45) 55%,rgba(0,0,0,.25) 100%)}
.inner-banner-text{position:relative;z-index:1;padding-top:3.5rem;padding-bottom:3.5rem}
@media (min-width:992px){.inner-banner{min-height: 500px; padding-top:4.5rem;padding-bottom:4.5rem;background-position:center}}
@media (min-width:768px){}
.inner-banner .lead{font-size:1.125rem;line-height:1.65;opacity:.95;}
/* 响应式调整 */
@media (max-width: 992px) {
    .grid-5{grid-template-columns:repeat(2,1fr)}
    .distributor-full-width{flex-direction:column}
    .cta-dark-part{clip-path:none}
    .choose-greatsink{margin-top: 20px}
}

@media (max-width: 678px) {
    .grid-5{grid-template-columns:repeat(1,1fr)}
}



/* 避免 type="email" 在输入过程中触发 :invalid 导致红框；校验由下方脚本与弹窗完成 */
#feedback .form-control:invalid, #feedback .form-control:-moz-ui-invalid { border-color: #ced4da; box-shadow: none; }

/* 提交成功：绿色提示 */
.contact-feedback-modal--success .modal-header { background-color: #28a745; color: #fff; border-bottom: 1px solid #218838; }
.contact-feedback-modal--success .modal-title { color: #fff; }
.contact-feedback-modal--success .modal-header .close { color: #fff; opacity: 0.92; text-shadow: none; }
.contact-feedback-modal--success .modal-header .close:hover { opacity: 1; color: #fff; }
.contact-feedback-modal--success .modal-body { color: #155724; background-color: #d4edda; border-bottom-left-radius: 0.3rem; border-bottom-right-radius: 0.3rem; }

/* --- 移动端优先 (Mobile First) --- */
/* 默认情况下，所有字号都缩小一个档次，以适应窄屏 */

.res-h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; } /* 相当于原 h2 */
.res-h2 { font-size: 1.5rem;  font-weight: 700; line-height: 1.2; } /* 相当于原 h3 */
.res-h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.2; } /* 相当于原 h4 */
.res-h4 { font-size: 1.1rem;  font-weight: 700; line-height: 1.2; }
.res-h5 { font-size: 1rem;    font-weight: 700; line-height: 1.2; }
.res-h6 { font-size: 0.9rem;  font-weight: 700; line-height: 1.2; }


/* 默认：移动端大小 */
.btn-res { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; }
.btn-res:focus{box-shadow:none}
/* --- 2. 平板端 (≥ 678px) --- */
/* 这里的字号介于手机和电脑之间 */
@media (min-width: 678px) {
    .res-h1 { font-size: 2rem; }
    .res-h2 { font-size: 1.75rem; }
    .res-h3 { font-size: 1.5rem; }
    .res-h4 { font-size: 1.25rem; }
    .res-h5 { font-size: 1.1rem; }
    .res-h6 { font-size: 1rem; }
    .btn-res {
        padding: 0.5rem 1rem;
        font-size: 1rem;
        line-height: 1.5;
      }
  }

/* --- 电脑端适配 (LG 断点: 992px) --- */
/* 当屏幕够大时，恢复 Bootstrap 标准的宏伟字号 */

@media (min-width: 992px) {
  .res-h1 { font-size: 2.5rem; }   /* 40px */
  .res-h2 { font-size: 2rem; }     /* 32px */
  .res-h3 { font-size: 1.75rem; }  /* 28px */
  .res-h4 { font-size: 1.5rem; }   /* 24px */
  .res-h5 { font-size: 1.25rem; }  /* 20px */
  .res-h6 { font-size: 1rem; }     /* 16px */
  .btn-res {
    padding: .5rem 1.5rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
  }
}

/*右侧漂浮替换样式*/
.im {position:fixed;right:2px;top:auto;bottom:40px;z-index:11}
.im-l {color:#fff;width:40px;height:60px;cursor:pointer;background-color:#c83232;box-shadow:0 0 8px #4e4e4e;border-radius:4px 0 0 4px;display:block;text-align:center;line-height:60px;float:left}
.im-l i {font-size:20px}
#select {display:none}
.im .box {float:right;width:60px;background-color:#c83232;border-radius:0 4px 4px 4px;display:none;}
.im .box ul {background-color:#fff;list-style-type:none;margin:5px;padding: 0px;}
.im .box ul li {height:50px;width:50px;overflow:hidden;text-align:center;line-height:50px}
.im .box ul li a {text-decoration:none;display:block}
.im .box ul li i {font-size:24px;color:#f39d22}
.im .box ul li i.fa-skype {color:#00aff0}
.im .box ul li i.fa-square-whatsapp {color:#00d51b;font-size: 30px;}
.im .box ul li i.fa-user {color:#F66}
.im .box ul li i.fa-skype,.im .box ul li i.fa-envelope {font-size:30px}
.im .box ul li a:hover i {color:#343537}
#select:checked+.box {display:block}
#cus_ser1 .msn {background-image:url(../images/c.html);background-repeat:no-repeat;height:50px;width:50px}
.im .skype {background-image:url(../images/c.html);background-repeat:no-repeat;background-position:-47px 0;height:50px;width:47px}
.im .mail {background-image:url(../images/c.html);background-repeat:no-repeat;background-position:-94px 0;height:50px;width:47px}
.im .kefu_01 {background-repeat:no-repeat;background-position:center center;height:50px;width:50px;overflow:hidden;background-color:#FFF}
.im .whatsapp {background-repeat:no-repeat;background-position:center center;height:50px;width:50px;overflow:hidden;background-color:#FFF}
@media screen and (min-width:768px) {
  .im {width:100px;position:fixed;right:-60px;top:250px;transition:right .5s;bottom:auto;z-index:11}
  .im:hover {right:0}
  .im .box {position:absolute;display:block;width:60px;right:0;top:0}
}

/* ===== 动画基础 ===== */
.anim-up,
.anim-left,
.anim-right,
.anim-scale {
    opacity: 0;
    transition: opacity .75s ease, transform .75s ease;
    will-change: opacity, transform;
}
.anim-up    { transform: translateY(50px); }
.anim-left  { transform: translateX(-60px); }
.anim-right { transform: translateX(60px); }
.anim-scale { transform: scale(.88); }
.anim-up.is-visible,
.anim-left.is-visible,
.anim-right.is-visible,
.anim-scale.is-visible {opacity: 1;transform: translate(0) scale(1);}