.abbanner{ width:100%;}
.abbanner img{ width:100%; height:auto;}

.about-company{padding: 55px 0;}
.about-company .container{ background: #FFFFFF;}
.about-company-left{ width: 50%;}
.about-company-left img{ width: 100%; height: 100%;}
.about-company-right{ width: 50%; height: 100%; padding: 60px;}
.about-company-right h2{ font-size: 1.8rem; line-height: 40px;}
.about-company-right p{ margin-top: 25px; font-size: 1rem;}


.about-number{ width: 100%; height: auto; padding: 55px 0; background: url(../images/abnumbg.jpg) no-repeat center; background-size:cover;}
.about-number .container{gap: 12px; grid-template-columns: repeat(4, 1fr); /* 3 列 */  display: grid;}
.about-number-item{ width: 100%; height: auto; background: #FFFFFF; position: relative; padding: 120px 50px; text-align: center; cursor: pointer;}
.about-number-item em{ display: block; position: absolute; top: 15px; left: 15px; color: #C2272D;}
.about-number-item h2{ font-size: 4rem; line-height: 72px;}
.about-number-item p{ margin-top: 10px; font-size: 1.1rem;}
.about-number-item:hover{ background: #C2272D; color: #FFFFFF; transform: translateY(8px);  transition: transform .25s ease;}
.about-number-item:hover em,.about-number-item:hover h2{color: #FFFFFF;}


.about-focus{ padding: 55px 0;}
.about-focus h2{ width: 73%; font-size: 2.1rem; line-height: 46px;}
.about-focus-list{ margin-top: 50px;}
.about-focus-list dl{ padding: 0 50px 0 15px; border-left:2px solid #82868c; max-width: 20%;}
.about-focus-list dl:last-child{ padding-right: 0;}
.about-focus-list dl dd{ margin-top: 20px; font-size: 1.3rem; line-height: 32px; font-family: myFirstFont1;}


.about-choose{ padding: 55px 0; width: 100%; background: #FFFFFF;}
.about-choose h2{ text-align: center; font-size:2.8rem; line-height: 72px; margin-bottom: 25px;}
.about-choose-list{gap: 25px; grid-template-columns: repeat(2, 1fr); /* 3 列 */  display: grid;}

.about-choose-item{ width: 100%; background: #f2f7fc; padding: 35px 30px; border-radius: 8px;}
.about-choose-item h3{ font-size: 1.8rem; line-height: 42px; margin-top: 15px;}
.about-choose-item p{ margin-top: 10px; font-size: 1rem;}

.about-info{ padding:30px; margin-bottom:30px; width:100%;}
.about-info h1{ font-size:1.8rem; line-height:36px;}
.about-info-content{ padding-top:20px; line-height:26px; font-size: 1rem;}
.about-info-content img{max-width:100%; height:auto;}

.about-info-list{ }
.about-info-list dl{ width:32.3%; margin-bottom:2%;}
.about-info-list dl dt img{ width:100%; height:auto;}
.about-info-list dl dd{ text-align:center; line-height:42px; height:42px; background:#eee;}


/*Quality*/
.quality-box{padding: 55px 0;}
.quality-box-left{ width: 50%; height: auto;}
.quality-box-left img{ width: 100%; height: auto;}

.quality-box-right{ width: 50%; height: auto; padding-left: 45px;}
.quality-box-right h2{ background: url(../images/quah2.png) no-repeat left 16px; font-size: 1.8rem; padding-left: 25px; line-height: 40px;}
.quality-box-right p{ padding-left: 25px; font-size: 1rem;}



.quality-deliver{ width: 100%; height: auto; background: url(../images/quabg.jpg) no-repeat center; background-size:cover; padding-bottom: 50px; color: #FFFFFF;}
.quality-deliver-title{ padding: 55px 0 35px 0;}
.quality-deliver-title h2{ font-size: 2rem; line-height: 46px; margin-bottom: 10px; color: #FFFFFF;}
.quality-deliver-title p{ font-size: 1rem;}
.quality-deliver-box{}
.quality-deliver-box img{ max-width: 100%; height: auto;}

/*support*/
.support-left-menu{ display:none;}
.support-left{ width:25%; background:#fff; padding:25px; box-shadow: 3px 3px 20px 0 rgba(0,0,0,.1);}
.support-left h1{ font-size:1.8rem; line-height:36px; margin-bottom:10px;}
.support-left a{ display:block; line-height:32px;}
.support-right{ width:73%; background:#fff; padding:25px; box-shadow: 3px 3px 20px 0 rgba(0,0,0,.1);}
.support-right h2{ font-size:1.8rem; line-height:36px; margin-bottom:10px;}
.support-right-info{ line-height:28px;}


/*Contact-Us*/
.contact-box{ margin: 55px auto;}

.contact-box-left{ width: 40%; padding-right: 150px;}
.contact-box-left h2{ font-size: 2.4rem; line-height: 56px; margin-bottom: 15px;}
.contact-box-left-info{ width: 100%; padding-bottom: 25px;}


.contact-box-right{ width: 60%; height: auto;}
.contact-box-right h2{ font-size: 2rem; line-height: 56px; margin-bottom: 15px;}

.contact-box-right-tab{ width: 100%; background: #FFFFFF; border-radius: 12px; height: 66px; line-height: 64px; padding: 0 40px;}
.contact-box-right-tab ul{ width: 100%;}
.contact-box-right-tab ul li{ margin-right: 35px; color: #666666; cursor: pointer;}
.contact-box-right-tab ul li.active{ color: #111111; border-bottom:2px solid #111111;}
.contact-box-right-tab ul li i{ margin-left: 5px;}

.contact-box-right-box{ width: 100%; background: #FFFFFF; border-radius: 12px; padding: 0 40px 60px 40px; margin-top: 15px;}
.contact-box-right-list{ width: 100%; height: auto; display: none;}

.contact-box-right-list dl{ width: 100%; height: 73px; border-bottom:2px solid #e5e5e5;}
.contact-box-right-list dl dt{ width: 20px; height: 20px;}
.contact-box-right-list dl dd{ width: calc(100% - 20px);}
.contact-box-right-list dl dd input{ width: 100%; height: 71px; line-height: 71px; border: none; padding: 0 15px; font-size: 1rem;}
.contact-box-right-list dl dd select{ width: 100%; height: 71px; line-height: 71px; border: none; padding: 0 15px; font-size: 1rem;}
.contact-box-right-list dl dd textarea{ width: 100%; height: 71px; line-height: 71px; border: none; padding: 0 15px; font-size: 1rem;}
.contact-box-right-list button{ width: auto; color: #FFFFFF; background: #C2272D; border: none; height: 48px; line-height: 48px; border-radius:30px; font-size: 1.1rem; padding: 0 60px; margin-top: 35px;} 
.contact-box-right-list button:hover{ background: #111111;}

/* ====== Part No / Quantity / Remove 行 ====== */
#partListBox .part-row{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;              /* 两列之间的间距 */
  margin: 0;
  padding: 0;
}

#partListBox .part-row li{
  height: 73px;
  border-bottom: 2px solid #e5e5e5;
  list-style: none;
  display: flex;
  align-items: center;
}

/* 前两列：Part No / Quantity */
#partListBox .part-row li:nth-child(1),
#partListBox .part-row li:nth-child(2){
  flex: 1 1 0;            /* 两列平分 */
  min-width: 0;           /* 防止 input 撑破 */
}

/* 第三列：删除按钮 */
#partListBox .part-row .part-actions{
  flex: 0 0 52px;         /* 固定宽度 */
  justify-content: flex-end;
  border-bottom: none;
}

/* input 样式 */
#partListBox .part-row li input{
  width: 100%;
  height: 71px;
  line-height: 71px;
  border: none;
  padding: 0 15px;
  font-size: 1rem;
  outline: none;
  background: transparent;
  box-sizing: border-box;
}

/* 删除按钮（FA） */
#partListBox .btn-remove-part{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f3f3;
  color: #777;
  text-decoration: none;
}

#partListBox .btn-remove-part:hover{
  background: #e9e9e9;
  color: #333;
}

#partListBox .btn-remove-part i{
  font-size: 16px;
  line-height: 1;
}


.contact-box-right-list a.downtemp{ display:inline-block; margin-top:15px; height:36px; line-height:36px; color:#fff; background:#C2272D; border-radius:6px; padding:0 25px; }
.contact-box-right-list a.downtemp i{ margin-right:10px;}
.contact-box-right-list a.addrerow{ display:inline-block; margin-top:15px; height:36px; line-height:36px; color:#fff; background:#C2272D; border-radius:6px; padding:0 25px; }
.contact-box-right-list a.addrerow i{ margin-right:10px;}

/* ===== File Upload UI ===== */
.contact-box-right-list .dl-file { height: 73px; border-bottom:none; margin-top:15px;}
.contact-box-right-list .dl-file dd{ width:100%;}
.contact-box-right-list .file-upload{
  display:flex;
  align-items:center;
  width:100%;
  height:71px;
  border:1px solid #ccc;
  background:#f6f6f6;
  padding:6px;
  box-sizing:border-box;
}

.contact-box-right-list .file-btn{
  position:relative;
  display:inline-block;
  padding:6px 16px;
  background:#e0e0e0;
  border:1px solid #bbb;
  cursor:pointer;
  font-size:14px;
  color:#000;
  white-space:nowrap;
}

.contact-box-right-list .file-btn:hover{ background:#d5d5d5; }

.contact-box-right-list .file-btn input[type="file"]{
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  width:100%;
  height:100%;
  cursor:pointer;
}

.contact-box-right-list .file-name{
  margin-left:12px;
  font-size:14px;
  color:#666;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
}



/*Blogs*/
.blog-main{}

.blog-main-left{ width:75%; background:#fff; border-radius:6px; padding:15px; box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.06); float:left;}




.blog-tabs{ width:100%; height:auto; border-bottom:1px solid #eee;}
.blog-tabs li{ cursor:pointer; height:42px; line-height:42px; font-size:1rem; border:1px solid #eee; border-radius:4px 4px 0 0; border-bottom:none; background:#f7f7f7; margin-right:10px; padding:0 15px;}
.blog-tabs li.thistab{ background:#C2272D; color:#fff;}
.blog-tabs li.thistab a{ color:#fff;}


.blog-tab-pane{ padding-top:15px;}


.blog-tab-pane-box{ width:100%;}

.blog-tab-pane-topblog{ width:39%;}
.blog-tab-pane-topblog dl{ width:100%; padding:10px 0; border-bottom:1px solid #eee;}
.blog-tab-pane-topblog dl dt{ width:40%; height:auto;}
.blog-tab-pane-topblog dl dt img{ width:100%; height:auto; border-radius: 6px;}
.blog-tab-pane-topblog dl dd{ width:60%; height:auto; padding-left:10px;}
.blog-tab-pane-topblog dl dd a{ display:block; line-height:20px; height:40px; overflow:hidden;}
.blog-tab-pane-topblog dl dd em{line-height:20px; height:20px; overflow:hidden; color:#999; margin-top:5px;}
.blog-tab-pane-topblog dl dd em i{ margin-right:6px;}

.blog-tab-pane-hotblog{ width:59%;}
.blog-tab-pane-hotblog dl{ width:100%; height:auto; position:relative;}
.blog-tab-pane-hotblog dl dt{ width:100%; height:100%;}
.blog-tab-pane-hotblog dl dt img{ width:100%; height:100%; border-radius: 6px;}
.blog-tab-pane-hotblog dl dd{ position:absolute; left:0; bottom:0; background:rgba(0,0,0,0.5); padding:15px; z-index:333; width:100%; height:auto; color:#fff; border-radius:0 0 6px 6px;}
.blog-tab-pane-hotblog dl dd a{ height:24px; line-height:24px; display:block; overflow:hidden; color:#fff;}
.blog-tab-pane-hotblog dl dd span i{ margin-right:5px;}

.blog-tab-pane-redblog{ width:100%; height:auto; margin-top:20px;}
.blog-tab-pane-redblog dl{ width: 24%; background: #FFFFFF; box-shadow: 0px 6px 12px 1px rgba(0,48,119,0.1);border-radius: 6px; margin:0.5%;}
.blog-tab-pane-redblog dl dt img{ width: 100%; height: auto; border-radius: 6px 6px 0 0;}
.blog-tab-pane-redblog dl dd{ width: 100%; padding: 25px 15px;}
.blog-tab-pane-redblog dl dd em{  height:22px; line-height:22px; width:100%; color:#666;}
.blog-tab-pane-redblog dl dd em span{ display:block;}
.blog-tab-pane-redblog dl dd em span i{ margin-right:5px;}
.blog-tab-pane-redblog dl dd a.bloglinks1{ display: block; font-weight: bold; color: #111111; font-size: 1rem; line-height: 24px; height: 48px; overflow: hidden;}
.blog-tab-pane-redblog dl dd p{ line-height: 20px; height: 60px; overflow: hidden; margin-top: 5px; display: block; color:#666;}
.blog-tab-pane-redblog dl dd a.bloglinks2{ display:block; font-weight:bold; color:#C2272D; text-transform:uppercase; margin-top:10px;}
.blog-tab-pane-redblog dl dd a.bloglinks2 i{ font-size:1.2rem; margin-left:8px;}
.blog-tab-pane-redblog dl dd a.bloglinks2:hover{ text-decoration:underline;}

.blog-all-tab{ width:100%; line-height:26px; padding:5px 0; border-bottom:1px solid #eee; position:relative; margin-top:15px;}


.blog-main-right{ width:23%; height:auto;  float:right;  position:relative; }

.blog-main-right-cate{width:100%; background:#fff; border-radius:6px; padding:15px; box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.06);}
.blog-main-right-cate a{ display:block; line-height:28px; font-size:16px;}
.blog-main-right-cate a i{ margin-right:10px;}


.blog-main-right-parts{ width:100%; background:#fff; border-radius:6px; padding:15px; box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.06); margin-top:15px; }
.blog-main-right-parts-title{ line-height:32px; margin-bottom:10px;}
.blog-main-right-parts-title b{display:block; font-size:1rem; }
.blog-main-right-parts-title a{ color:#C2272D;}
.blog-main-right-parts-title a i{ padding-left:5px;}
.blog-main-right-parts-list{}
.blog-main-right-parts-list dl{ border-bottom:1px solid #eee; padding:10px 0;}
.blog-main-right-parts-list dl dt{ width:60px; height:60px;}
.blog-main-right-parts-list dl dt img{ width:60px; height:60px;}
.blog-main-right-parts-list dl dd{ width: calc(100% - 60px); height:60px; padding-left:15px;}
.blog-main-right-parts-list dl dd a{ display:block; font-weight:bold; color:#111; line-height:21px;}
.blog-main-right-parts-list dl dd em{ display:block;  line-height:21px;}



.blog-list{ width:100%;}
.blog-list dl{ width:24%; background:#fff; padding:20px; border-radius:6px; margin:0.5%; box-shadow: 3px 3px 20px 0 rgba(0,0,0,.1);}
.blog-list dl dt img{ width:100%; height:auto;}
.blog-list dl dd{ padding-top:15px;}
.blog-list dl dd em{  height:24px; line-height:24px; width:100%;}
.blog-list dl dd em i{ margin-right:8px; color:#C2272D;}
.blog-list dl dd em i.fa-eye{ margin-left:10px;}
.blog-list dl dd a.bloglinks1{ display:block; font-weight:bold; height:48px; line-height:24px; overflow:hidden;}
.blog-list dl dd p{ color:#666; line-height:20px; height:60px; overflow:hidden;}
.blog-list dl dd a.bloglinks2{ display:block; font-weight:bold; color:#C2272D; text-transform:uppercase; margin-top:10px;}
.blog-list dl dd a.bloglinks2 i{ font-size:1.2rem; margin-left:8px;}
.blog-list dl dd a.bloglinks2:hover{ text-decoration:underline;}

.blog-show{ background:#fff; border-radius:6px; padding:30px; box-shadow: 3px 3px 20px 0 rgba(0,0,0,.1);}
.blog-show h1{font-size:1.8rem; line-height:36px; text-align:center; margin-bottom:10px;}
.blog-time{ width:100%; height:24px; line-height:24px; text-align:center; color:#999;}
.blog-time span{ margin:0 10px; display:inline-block;}
.blog-time span i{ color:#C2272D; margin-right:6px;}
.blog-info{ width:100%; padding:25px 0; line-height:26px;}
.blog-info img{ max-width:100%; height:auto;}
.next-prev-single{ line-height:32px;}
.next-prev-single p{ height:32px; overflow:hidden;}

.blog-share-box{ margin:20px 0;}
.blog-share{}
.blog-share b{ font-size:1.2rem; margin-right:10px;}
.blog-share a{ display:inline-block; margin-right:10px; width:50px; height:50px; line-height:50px; text-align:center; border-radius:50%; font-size:1.2rem; background:#eee;}
.blog-share a:hover{ background:#C2272D; color:#fff;}

.relate-blog{ margin-top:25px;}
.relate-blog h2{font-size:1.6rem; line-height:36px; text-align:center; margin-bottom:10px;}
.relate-blog-list dl{ width:24%; background:#fff; padding:20px; border-radius:6px; margin:0.5%; box-shadow: 3px 3px 20px 0 rgba(0,0,0,.1);}
.relate-blog-list dl dt img{ width:100%; height:auto;}
.relate-blog-list dl dd{ padding-top:15px;}
.relate-blog-list dl dd em{  height:24px; line-height:24px;}
.relate-blog-list dl dd a{ display:block; font-weight:bold; height:28px; line-height:28px; overflow:hidden;}





/*brand*/
.brand-feature-box{ position:relative; padding-bottom:30px;}
.brand-feature-box b{font-size:1.8rem; line-height:36px; text-align:center; margin-bottom:20px; display:block;}
.brand-feature-list{}
.brand-feature-list a{ background: #FFFFFF; display: block; width: 17.66%; margin-bottom: 2%; padding: 15px 25px; text-align: center; box-shadow: 0px 4px 8px 1px rgba(27,58,125,0.08); border-radius: 6px; border: 1px solid #E7EBF2;}
.brand-feature-list a img{ width: 100%; height: auto;}
.brand-feature-list a:nth-child(5){ margin-right:5%;}
.brand-feature-list a:nth-child(6){ margin-left:5%;}


/*brand*/
.brand-navigation-box{ position:relative;}
.brand-navigation-box h1{font-size:1.8rem; line-height:36px; text-align:center; margin-bottom:10px;}
.brand-navigation{position:sticky; left:0; top:0; z-index:777;}
.brand-navigation ul{ text-align:center; padding:10px 0; width:100%; }
.brand-navigation ul li{ display:inline-block; background:#fff; border-radius:3px; margin:2px 0; box-shadow: 3px 3px 20px 0 rgba(0,0,0,.2);}
.brand-navigation ul li a{ display:block;  padding:5px 12px;}

.brand-navigation-list{ margin-top:15px;}
.brand-navigation-list dl{ width:100%; margin-bottom:10px; background:#fff; border-radius:3px; padding:30px; border:1px solid #eee;}
.brand-navigation-list dl dt{ font-weight:bold; font-size:1.2rem; line-height:28px; margin-bottom:8px;}
.brand-navigation-list dl dd a{ display:block; width:19%;  line-height:38px; overflow:hidden; margin:0.5%; text-align:center;}
.brand-navigation-list dl dd a img{ display:block; border:1px solid #eee; border-radius:6px; padding:10px; width:150px; margin:0 auto;}


.brand-info-box{ padding:30px; background:#fff;  border-radius:6px; box-shadow: 3px 3px 20px 0 rgba(0,0,0,.2);}
.brand-info-box-left{ width:15%; height:auto;}
.brand-info-box-left img{ width:100%; height:auto;}
.brand-info-box-right{ width:83%; height:auto;}
.brand-info-box-right h1{ font-size:1.5rem; line-height:30px; margin-bottom:10px;}
.brand-info-box-right-info{ line-height:26px;}


.brand-info-list{ margin-top:15px;}
.brand-info-list dl{ width:100%; margin-bottom:10px; background:#fff; border-radius:3px; padding:30px; border:1px solid #eee;}
.brand-info-list dl dt{ font-weight:bold; font-size:1.2rem; line-height:28px; margin-bottom:8px;}
.brand-info-list dl dd a{ display:block; width:32.3%; height:38px; line-height:38px; overflow:hidden; border-bottom:1px solid #eee; margin:0 0.5%;}

/*brand-pro*/
.brand-pro{ width:100%; height:auto; border:1px solid #eee; border-radius:6px; padding:30px; background:#fff; margin-top:20px;}
.brand-pro dl{ width:15.66%; margin:0.5%; text-align:center; overflow:hidden; border:1px solid #eee; border-radius:3px; padding:20px;}
.brand-pro dl dt img{ width:100%; height:auto;}
.brand-pro dl dd{ padding-top:10px;}
.brand-pro dl dd a{ display:block; line-height:24px; height:24px; overflow:hidden; font-weight:bold;}
.brand-pro dl dd em{ display:block; line-height:24px; height:24px; overflow:hidden; }

.brand-franchised-box{ position:relative;}
.brand-franchised-box h1{font-size:1.8rem; line-height:36px; text-align:center; margin-bottom:30px;}

.brand-franchised-list{}
.brand-franchised-list dl{ width: 49.3%; border-radius: 6px; background: #FFFFFF; margin-bottom: 1.4%; padding: 15px;}
.brand-franchised-list dl dt{ width: 120px; height: auto; text-align: center;}
.brand-franchised-list dl dt img{ width: 100%;height: auto;}
.brand-franchised-list dl dd{ width: calc(100% - 120px); padding-left:15px;}
.brand-franchised-list dl dd a{ display: block; font-weight: bold; font-size: 1rem; line-height: 26px; height: 26px; overflow: hidden; margin-bottom: 5px;}
.brand-franchised-list dl dd p{ line-height: 20px; height: 40px; overflow: hidden;}


/*posts*/
.post-list{}
.post-list dl{ width: 49.5%; box-shadow: 0px 4px 8px 1px rgba(56,60,147,0.1);
border-radius: 4px 4px 4px 4px;
border: 1px solid #E7EAEE; background: #FFFFFF; padding: 20px; margin-top: 1%;}
.post-list dl dt{ width: 100px; height: 100px; overflow: hidden;}
.post-list dl dt img{ width: 100px; height: 100px;}
.post-list dl dd{ width: calc(100% - 100px); padding-left: 20px; padding-top: 8px;}
.post-list dl dd a{ display: block; font-size: 1rem; font-weight: bold; color: #111111; font-family: myFirstFont1; line-height: 26px; height: 26px; overflow: hidden;}
.post-list dl dd a:hover{ color:#0359d8;}
.post-list dl dd p{ line-height: 22px; height: 44px; overflow: hidden; margin-top: 5px;}

/*application*/
.application-box{ padding:30px 0;}
/* 列表布局：让 dl 像卡片一样排列 */
.application-box{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
}

/* 每一项卡片 */
.application-box dl{
  width: calc((100% - 44px) / 3); /* 3列：gap(22)*2=44 */
  margin:0;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease;
}

/* hover 效果 */
.application-box dl:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(0,0,0,.12);
}

/* 图片区域 */
.application-box dt{
  margin:0;
  position:relative;
  overflow:hidden;
  background:#f5f6f8;
}

.application-box dt a{
  display:block;
}

/* 你的HTML写死了 width/height，这里用 object-fit 保证裁切不变形 */
.application-box dt img{
  display:block;
  width:100%;
  height:260px;              /* 你也可以改成 280/320 等 */
  object-fit:cover;
  transition:transform .35s ease;
}

/* hover 时图片轻微放大 */
.application-box dl:hover dt img{
  transform:scale(1.05);
}

/* 可选：图片顶部渐变遮罩，让白字标题也能放在图上（若你未来想改结构） */
.application-box dt::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:48%;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  opacity:.0;                /* 默认不显示遮罩 */
  transition:opacity .18s ease;
  pointer-events:none;
}

/* 如果你想 hover 才出现遮罩可用 */
.application-box dl:hover dt::after{
  opacity:.22;
}

/* 标题区域 */
.application-box dd{
  margin:0;
  padding:14px 16px;
  font-size:16px;
  line-height:1.3;
  font-weight:600;
  color:#111827;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/*Tools*/
.tools-info{ padding:30px; margin-bottom:30px; width:100%; background:#fff;}
.tools-info h1{ font-size:1.8rem; line-height:36px;}
.tools-list{ width:100%; display:flex; flex-wrap:wrap; justify-content:space-between;}
.tools-list a{ display:flex; align-items:center; text-align:center; width:24%; margin-bottom:1%; background:#fff; border-radius: 4px; padding:25px; line-height:26px;
    box-shadow: 0 0 15px -7px #ccc; justify-content:center;}
.tools-info table.fromTable{ width:100%; border:none}
.tools-info h1{ color:#111; font-weight:bold; font-size:26px; line-height:32px;}
.tools-info h3{ color:#111; font-weight:bold; font-size:20px; line-height:32px;}
.tools-info td b{ color:#111; font-weight:bold; font-size:20px; line-height:32px; margin:0;}
.tools-info table.fromTable tr{ display:flex; flex-wrap: wrap; border:none !important}
.tools-info table.fromTable td{ display:flex; width:100%; align-items:center; border:none !important}
.tools-info table.fromTable1 td{ vertical-align:middle !important;}
.tools-info table.fromTable input[type="submit"] {
  background-color: #c2272d; /* 设置背景颜色 */
  color: white; /* 设置文本颜色 */
  padding: 10px 20px; /* 设置内边距 */
  border: none; /* 去掉边框 */
  border-radius: 5px; /* 设置边框圆角 */
  cursor: pointer; /* 设置鼠标光标为指针形状 */
  margin-top:15px;
}

.tools-info table.fromTable input[type="submit"]:hover {
    background-color: #1a3762; /* 鼠标悬停时的背景颜色 */
}

.tools-info table.fromTable input[type="button"] {
  background-color: #c2272d; /* 设置背景颜色 */
  color: white; /* 设置文本颜色 */
  padding: 10px 20px; /* 设置内边距 */
  border: none; /* 去掉边框 */
  border-radius: 5px; /* 设置边框圆角 */
  cursor: pointer; /* 设置鼠标光标为指针形状 */
}

.tools-info table.fromTable input[type="button"]:hover {
    background-color: #1a3762; /* 鼠标悬停时的背景颜色 */
}


    .tools-info table.fromTable1 input[type="button"] {
        background-color: #c2272d; /* 设置背景颜色 */
        width:100% !important; height:auto !important;
        color: white; /* 设置文本颜色 */
        padding: 10px 20px; /* 设置内边距 */
        border: none; /* 去掉边框 */
        border-radius: 5px; /* 设置边框圆角 */
        cursor: pointer; /* 设置鼠标光标为指针形状 */
    }

    .tools-info table.fromTable1 input{
        border: 1px solid #ccc; /* 设置背景颜色 */
        padding: 5px 10px; /* 设置内边距 */
        width: 100%;
        height: 46px;
        border-radius: 5px; /* 设置边框圆角 */
    }
    .tools-info table.fromTable1 input[type="radio"] {
        border: 1px solid #ccc; /* 设置背景颜色 */
        width: 20px;
        height: 20px;
 
    }
        .tools-info table.fromTable1 input[type="checkbox"] {
            border: 1px solid #ccc; /* 设置背景颜色 */
            width: 24px;
            height: 24px;
        }

        .tools-info table.fromTable1 input[type="button"]:hover {
            background-color: #1a3762; /* 鼠标悬停时的背景颜色 */
        }

    .tools-info table.fromTable button[type="button"] {
        background-color: #c2272d; /* 设置背景颜色 */
        color: white; /* 设置文本颜色 */
        padding: 10px 20px; /* 设置内边距 */
        border: none; /* 去掉边框 */
        border-radius: 5px; /* 设置边框圆角 */
        cursor: pointer; /* 设置鼠标光标为指针形状 */
    }

        .tools-info table.fromTable button[type="button"]:hover {
            background-color: #1a3762; /* 鼠标悬停时的背景颜色 */
        }
    .tools-info table.fromTable input[type="text"] {
        border:1px solid  #ccc; /* 设置背景颜色 */
    
        padding:5px 10px; /* 设置内边距 */
        width:80%;
        height:46px;
        border-radius: 5px 0 0 5px; /* 设置边框圆角 */
    }

    .tools-info table.fromTable select {
        border: 1px solid #ccc; /* 设置背景颜色 */
        padding: 5px 10px; /* 设置内边距 */
        width: 80%;
        height: 46px;
        border-radius: 5px 0 0 5px; /* 设置边框圆角 */
    }
    .tools-info table.fromTable1 select {
        border: 1px solid #ccc; /* 设置背景颜色 */
        padding: 5px 10px; /* 设置内边距 */
        width: 100% !important;
        height: 46px !important;
        border-radius: 5px 0 0 5px; /* 设置边框圆角 */
    }

    .tools-info table.fromTable input[type="number"] {
        border: 1px solid #ccc; /* 设置背景颜色 */
        padding: 5px 10px; /* 设置内边距 */
        width: 80%;
        height: 46px;
        border-radius: 5px 0 0 5px; /* 设置边框圆角 */
    }

 .tools-info table.fromTable label{ width:20%; text-align:center; margin:0 !important; border-radius:0 5px 5px 0;  background:#f3f5f8; height:46px; line-height:46px; display:block; font-weight:normal;     border:1px solid  #ccc; border-left:none; }
#inductance{ color:#1a3762 !important; font-weight:bold; font-size:16px;}
.tools-info .col-sm-8{ width:100%;}
#results{ width:100%; height:auto; overflow-x:auto;}
.tools-info sup{ display:inline-block; margin:0;}
.tools-info sub{ display:inline-block; margin:0;}
.tools-info .witdh50{ width:50% !important;}
.tools-info .nowaper{ flex-wrap:nowrap !important;}


/*Brand260312*/
.wow {
    visibility: hidden;
}

.animated {
    visibility: visible !important;
}

.fadeInUp50 {
    -webkit-animation-name: fadeInUp50;
    animation-name: fadeInUp50;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp50 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp50 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.list-of-manufacturers{
    padding: 35px 0 20px;

}

.list-of-manufacturers-in{

}

/* 顶部字母筛选 */
.list-of-manufacturers .filter-area{
    position:sticky; left:0; top:0; z-index:666;
    margin-bottom: 35px;
    padding: 0;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    overflow: hidden;
}

.list-of-manufacturers .filter-area ul{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0 20px;
    list-style: none;
    min-height: 80px;
}

.list-of-manufacturers .filter-area ul li{
    margin: 0;
    padding: 0;
    flex: 1;
    text-align: center;
}

.list-of-manufacturers .filter-area ul li a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    font-size: 1.35rem;
    font-weight: 700;
    color: #111111;
    text-decoration: none;
    border-radius: 50%;
    transition: all 0.25s ease;
    position: relative;
}

.list-of-manufacturers .filter-area ul li a:hover{
    color: #ffffff;
    background: #c2272d;
    transform: translateY(-2px);
}

.list-of-manufacturers .filter-area ul li.active a{
    color: #ffffff;
    background: #c2272d;
    box-shadow: 0 8px 18px rgba(239,35,60,0.22);
}

.list-of-manufacturers .filter-area ul li.disabled a{
    color: #a7a7a7;
    cursor: default;
    pointer-events: none;
    background: transparent;
    box-shadow: none;
}

/* 列表内容区 */
.list-of-manufacturers .list-area{
 
}

.list-of-manufacturers .list-panel{
    border-top: 1px solid #d9d9d9;
    padding: 48px 0 42px;
}

.list-of-manufacturers .list-panel.active{
    display: block;
}

.list-of-manufacturers .list-panel:first-child{
    border-top: none;
}

.list-of-manufacturers .list-panel-in{
    display: flex;
    align-items: flex-start;
    gap: 270px;
}

/* 左侧字母圆球 */
.list-of-manufacturers .alphabet{
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #c2272d;
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 44px;
    text-align: center;
    box-shadow: 0 8px 18px rgba(239,35,60,0.18);
}

/* 右侧品牌列表 */
.list-of-manufacturers .list-items{
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    column-gap: 80px;
    row-gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.list-of-manufacturers .list-items li{
    margin: 0;
    padding: 0;
    color: #222222;
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 400;
    word-break: break-word;
    transition: all 0.25s ease;
    cursor: default;
}

.list-of-manufacturers .list-items li:hover{
    color: #c2272d;
    transform: translateX(4px);
}

/* 如果后续 li 里面改成 a，也一起兼容 */
.list-of-manufacturers .list-items li a{
    color: #222222;
    text-decoration: none;
    transition: all 0.25s ease;
}

.list-of-manufacturers .list-items li a:hover{
    color: #c2272d;
}

/* WOW 初始状态兼容，防止隐藏 */
.list-of-manufacturers .wow{
    visibility: visible !important;
}





@media (max-width: 768px) {
	
.home-order-now{ margin-top: 15px;}



.about-company{padding: 25px 0;}
.about-company-left{ width: 100%;}
.about-company-right{ width: 100%; height: 100%; padding: 20px;}
.about-company-right h2{ font-size: 1.4rem; line-height: 28px;}
.about-company-right p{ margin-top: 15px; font-size: 0.9rem;}


.about-number{padding: 25px 0; }
.about-number .container{gap: 10px; grid-template-columns: repeat(1, 1fr); /* 3 列 */  display: grid;}
.about-number-item{padding: 30px 20px; text-align: center; cursor: pointer;}
.about-number-item h2{ font-size: 3rem; line-height: 42px;}
.about-number-item p{ font-size: 1rem;}



.about-focus{ padding: 25px 0;}
.about-focus h2{ width: 100%; font-size: 1.4rem; line-height: 30px;}
.about-focus-list{ margin-top: 20px;}
.about-focus-list dl{ padding: 15px 0; border-left:none; border-bottom:2px solid #82868c;  max-width: 100%; width: 100%;} 
.about-focus-list dl dd{ margin-top: 10px; font-size: 1rem; line-height:24px; }


.about-choose{ padding: 25px 0; }
.about-choose h2{  font-size:1.4rem; line-height:42px; margin-bottom: 15px;}
.about-choose-list{gap: 10px; grid-template-columns: repeat(1, 1fr); /* 3 列 */  display: grid;}

.about-choose-item{  padding:20px;}
.about-choose-item h3{ font-size: 1.2rem; line-height: 32px; margin-top: 10px;}
.about-choose-item p{ margin-top: 5px; font-size: 0.9rem;}


.about-info{ padding:20px;}
.about-info h1{ font-size:1.4rem; line-height:30px;}


.about-info-list dl{ width:100%;}



/*Quality*/
.quality-box{padding: 25px 0;}
.quality-box-left{ width: 100%; height: auto;}
.quality-box-right{ width: 100%; padding-left: 0; padding-top: 25px;}
.quality-box-right h2{ background: url(../images/quah2.png) no-repeat left 10px; font-size: 1.2rem;line-height: 30px;}
.quality-box-right p{  font-size: 0.9rem;}



.quality-deliver{ padding-bottom: 30px; }
.quality-deliver-title{ padding: 25px 0;}
.quality-deliver-title h2{ font-size: 1.4rem; line-height: 32px; margin-bottom: 10px; color: #FFFFFF;}
.quality-deliver-title p{ font-size: 0.9rem;}






/*support*/
.support-left-menu{ display:block; width:100%; height:42px; line-height:42px; background:#fff; padding:0 20px; cursor:pointer;}
.support-left-menu b{font-size:1.4rem;}
.support-left-menu i{ line-height:42px; font-size:1.2rem;}
.support-left{ width:100%; display:none; padding:20px;}
.support-left h1{display:none; }
.support-left a{ display:block; line-height:26px;}
.support-right{ width:100%; padding:20px; margin-top:10px;}
.support-right h2{ font-size:1.2rem; line-height:30px; }
.support-right-info{ line-height:26px;}


/*Contact-Us*/
.contact-box{ margin: 25px auto;}

.contact-box-left{ width: 100%; padding-right: 0;}
.contact-box-left h2{ font-size: 1.4rem; line-height: 36px; margin-bottom: 10px;}



.contact-box-right{ width: 100%; height: auto;}
.contact-box-right h2{ font-size: 1.4rem; line-height: 36px; margin-bottom: 10px;}

.contact-box-right-tab{ width: 100%; background: #FFFFFF; border-radius: 12px; height: auto; line-height: 64px; padding: 0 40px;}
.contact-box-right-tab ul{ width: 100%;}
.contact-box-right-tab ul li{ margin-right: 0; color: #666666; cursor: pointer; width: 50%; text-align: center;}
.contact-box-right-tab ul li.active{ color: #111111; border-bottom:2px solid #111111;}
.contact-box-right-tab ul li i{ margin-left: 5px;}

.contact-box-right-box{ width: 100%; background: #FFFFFF; border-radius: 12px; padding: 0 40px 60px 40px; margin-top: 15px;}
.contact-box-right-list{ width: 100%; height: auto; display: none;}

.contact-box-right-list dl{ width: 100%; height: 73px; border-bottom:2px solid #e5e5e5;}
.contact-box-right-list dl dt{ width: 20px; height: 20px;}
.contact-box-right-list dl dd{ width: calc(100% - 20px);}
.contact-box-right-list dl dd input{ width: 100%; height: 71px; line-height: 71px; border: none; padding: 0 15px; font-size: 1rem;}
.contact-box-right-list dl dd textarea{ width: 100%; height: 71px; line-height: 71px; border: none; padding: 0 15px; font-size: 1rem;}
.contact-box-right-list button{ width: auto; color: #FFFFFF; background: #C2272D; border: none; height: 48px; line-height: 48px; border-radius:30px; font-size: 1.1rem; padding: 0 60px; margin-top: 35px;} 
.contact-box-right-list button:hover{ background: #111111;}



/*Blogs*/
.blog-main-left{ width:100%; float:none;}




.blog-tabs{ border-bottom:none;}
.blog-tabs li{ cursor:pointer; height:32px; line-height:32px; font-size:0.9rem;  border-bottom:1px solid #eee; margin-right:4px; padding:0 5px; margin-bottom:5px;}


.blog-tab-pane{ padding-top:0;}

.blog-tab-pane-topblog{ width:100%;}


.blog-tab-pane-hotblog{ width:100%; margin-top:10px;}

.blog-tab-pane-redblog{ width:100%; height:auto; margin-top:10px;}
.blog-tab-pane-redblog dl{ width: 100%; margin:0.5% 0;}


.blog-list{ width:100%;  float:none;}
.blog-main-right{width:100%;  float:none; margin-top:15px;}


.blog-list dl{ width:100%; margin:0.5% 0;}

.blog-show{ padding:20px;}
.blog-show h1{font-size:1.4rem; line-height:26px; }
.blog-info{padding:20px 0; }
.next-prev-single{ line-height:26px;}
.next-prev-single p{ height:26px; overflow:hidden;}

.relate-blog{ margin-top:15px;}
.relate-blog h2{font-size:1.3rem; line-height:26px;}
.relate-blog-list dl{ width:100%; margin:0.5% 0;}


/*brand*/
.brand-feature-box b{font-size:1.4rem; line-height:30px; }
.brand-feature-list a{ width: 49%; margin-bottom:2%;  }
.brand-feature-list a:nth-child(5){ margin-right:0;}
.brand-feature-list a:nth-child(6){ margin-left:0;}

/*brand*/
.brand-navigation-box h1{font-size:1.4rem; line-height:30px; }
.brand-navigation{top:0;}
.brand-navigation ul{ padding:5px 0;}
.brand-navigation ul li{}

.brand-navigation-list{ margin-top:10px;}
.brand-navigation-list dl{padding:20px;}
.brand-navigation-list dl dt{ font-size:1rem; margin-bottom:5px;}
.brand-navigation-list dl dd a{ width:49%; }


.brand-info-box{ padding:20px; top:0; position:inherit;}
.brand-info-box-left{ width:100%; height:auto; text-align:center;}
.brand-info-box-left img{ width:50%; height:auto;}
.brand-info-box-right{ width:100%; height:auto; padding-top:15px;}
.brand-info-box-right h1{ font-size:1.4rem; }
.brand-info-box-right-info{ line-height:24px;}



.brand-info-list dl{ padding:20px; }
.brand-info-list dl dt{  font-size:1.1rem; }
.brand-info-list dl dd a{ width:100%; margin:0;}

.home-brand-list a{ width: 49%; margin-bottom:2%;  }

/*brand-pro*/
.brand-pro{ padding:20px; }
.brand-pro dl{ width:48%; padding:10px;}

.brand-franchised-box h1{font-size:1.4rem; }

.brand-franchised-list{}
.brand-franchised-list dl{ width: 100%;  margin-bottom: 1.4%; padding: 10px;}



/*post*/
.post-list dl{ width: 100%; padding: 10px; margin-top: 1%;}


/*application*/
 .application-box{
    gap:14px;
  }
  .application-box dl{
    width:100%; /* 1列 */
    border-radius:12px;
  }
  .application-box dt img{
    height:200px;
  }
  .application-box dd{
    padding:12px 14px;
    font-size:15px;
  }

/*Tools*/
.tools-info{ padding:20px; margin-bottom:10px;}
.tools-info h1{ font-size:1.2rem; line-height:26px;}

.tools-list a{width:49%; padding:15px; }

 .list-of-manufacturers{
        padding: 20px 0 10px;
    }

    .list-of-manufacturers .filter-area{
        border-radius: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .list-of-manufacturers .filter-area ul{
        width: max-content;
        min-width: 100%;
        padding: 0 10px;
        gap: 8px;
        justify-content: flex-start;
        min-height: 58px;
    }

    .list-of-manufacturers .filter-area ul li{
        flex: 0 0 auto;
    }

    .list-of-manufacturers .filter-area ul li a{
        min-width: 30px;
        height: 30px;
        font-size: 1rem;
    }

    .list-of-manufacturers .list-panel{
        padding: 26px 0 22px;
    }

    .list-of-manufacturers .list-panel-in{
        gap: 18px;
        align-items: flex-start;
    }

    .list-of-manufacturers .alphabet{
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        line-height: 38px;
        font-size: 1.3rem;
    }

    .list-of-manufacturers .list-items{
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 12px;
    }

    .list-of-manufacturers .list-items li{
        font-size: 1rem;
        line-height: 1.6;
    }

}

/* Brand Detail / FAQ */
.brand-detail-section,
.brand-faq-section{
    margin-top:20px;
}

.brand-content-card{
    background:#fff;
    border:1px solid #eee;
    border-radius:8px;
    padding:28px 30px;
    box-shadow:0 4px 14px rgba(0,0,0,.05);
}

.brand-content-title{
    display:flex;
    align-items:center;
    gap:10px;
    padding-bottom:14px;
    margin-bottom:18px;
    border-bottom:1px solid #eee;
}

.brand-content-title i{
    color:#C2272D;
    font-size:1.3rem;
}

.brand-content-title h2{
    margin:0;
    font-size:1.45rem;
    line-height:32px;
    color:#111;
}

.brand-content-body{
    font-size:1rem;
    line-height:1.8;
    color:#444;
}

.brand-content-body p{
    margin-bottom:12px;
}

.brand-content-body h3{
    margin:20px 0 8px;
    font-size:1.05rem;
    line-height:1.6;
    color:#111;
}

.brand-content-body h3:first-child{
    margin-top:0;
}

.brand-faq-body h3{
    position:relative;
    padding-left:18px;
}

.brand-faq-body h3:before{
    content:"Q";
    position:absolute;
    left:0;
    top:0;
    color:#C2272D;
    font-weight:bold;
}

@media (max-width:768px){
    .brand-content-card{
        padding:20px;
    }

    .brand-content-title h2{
        font-size:1.2rem;
        line-height:28px;
    }

    .brand-content-body{
        font-size:.95rem;
        line-height:1.7;
    }
}