@font-face {
    font-family: "CalibriR"; 
    src: url("../fonts/calibri.ttf"); 
  }
  @font-face {
    font-family: "CalibriB"; 
    src: url("../fonts/calibrib.ttf"); 
  }
  @font-face {
    font-family: "CalibriL"; 
    src: url("../fonts/calibril.ttf"); 
  }
  @font-face {
    font-family: "DinM"; 
    src: url("../fonts/DIN-Medium.otf"); 
  }
  @font-face {
    font-family: "DinB"; 
    src: url("../fonts/DIN-Bold.otf"); 
  }

:root {
    --fubeiRed-color: #172a88;
}
.numFont {font-family: "DinM", sans-serif;}
*{margin: 0;padding: 0;list-style: none;}
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {margin: 0;padding: 0;}
/** 设置默认字体 **/
body,button, input, select, textarea /* for ie */ {font:18px "CalibriR", sans-serif;}
p {font-family: "CalibriR", sans-serif;font-size: 18px;}
h1, h2, h3, h4, h5, h6 { font-size: 100%;}
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置文本格式元素 **/
a { text-decoration: none; color:#333 }
a:hover { text-decoration: underline; color:#d91213 }
/** 重置表单元素 **/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
select {
border: solid 1px #000;
/*很关键：将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*加padding防止文字覆盖*/
padding-right: 14px;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }

/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;}
body {background:#fff;}
em{font-style:normal}
li{list-style:none}
img {transition: all 0.3s linear 0s;}
img:hover {transition: all 0.3s linear 0s;}
a {color:#333; transition: all 0.3s linear 0s !important;}
a:hover {color:#cf0745; transition: all 0.3s linear 0s !important; text-decoration:none}
p {text-align: justify}
input,textarea {background:none; border-radius:0 !important; outline:none}
select {outline:0 !important; appearance:none !important; background:none; -webkit-appearance:none !important;}
textarea,button {background:none}
dl {margin:0px !important; padding:0px !important;}


header {width:100%; height:6vw; min-height:80px; background:#fff; position:fixed; top:0px; left:0px; z-index:99999;padding: 15px 0;}
header div.headmian {width:90%; height:6vw; min-height:80px; margin:0px auto; min-width:1100px; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:center; align-content:center; padding-left:5%; padding-right:5%; position:relative}

header div.headmian div.logo img {width: 280px;}
header div.headmian div.logo a {width:100%; overflow:hidden; height:auto; display:block; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; align-content:center;}
header div.headmian div.logo a i {width:auto; overflow:hidden; text-align:left; font-size:clamp(2.2rem, 4vw, 60px); color:#172a88; display:block}
header div.headmian div.logo a span {width:auto; overflow:hidden; text-align:left; font-size:clamp(2.2rem, 4vw, 60px); color:#000; display:block; padding-left:3%}

header div.headmian div.navigation {width:64%; min-width:700px;}
header div.headmian div.navigation ul {width:100%; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; align-content:center;}
header div.headmian div.navigation ul li {width:auto; overflow:hidden; height:6vw; min-height:80px; padding-left:2%; padding-right:2%; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; align-content:center; cursor:pointer;}
header div.headmian div.navigation ul li a {width:100%; overflow:hidden; text-align:center; display:block; font-size:clamp(1rem, 1vw, 26px); color:#000}
header div.headmian div.navigation ul li a:hover {width:100%; overflow:hidden; text-align:center; display:block; font-size:clamp(1rem, 1vw, 26px); color:#172a88; font-weight:bold !important}
header div.headmian div.navigation ul li div.zcd {width:100%; overflow:hidden; background:#fff; position:absolute; top:50%; left:50%; transform: translate(-50%, 16%); z-index:9999; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:stretch; align-content:stretch; display:none}
header div.headmian div.navigation ul li div.zcd div.l {width:36%; overflow:hidden; height:auto}
header div.headmian div.navigation ul li div.zcd div.l img {width:100%; overflow:hidden; height:auto; display:block}
header div.headmian div.navigation ul li div.zcd div.r {width:64%; overflow:hidden; height:auto; }
header div.headmian div.navigation ul li div.zcd div.r div.ll {width:30%; overflow:hidden; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; align-content:center}
header div.headmian div.navigation ul li div.zcd div.r div.ll span {font-size:clamp(1.6rem, 1.8vw, 50px); color:#000; display:block}
header div.headmian div.navigation ul li div.zcd div.r div.rr {width:65%; overflow:hidden; height:auto; position:relative; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; align-content:center; padding-left:5%}
header div.headmian div.navigation ul li div.zcd div.r div.rr a {width:auto; overflow:hidden; text-align:center; font-size:clamp(1rem, 1vw, 18px); color:#000; display:block; padding-left:3%; padding-right:3%; position:relative; z-index:1}
header div.headmian div.navigation ul li div.zcd div.r div.rr a:hover {width:auto; overflow:hidden; text-align:center; font-size:clamp(1rem, 1vw, 18px); color:#172a88; display:block; padding-left:3%; padding-right:3%; position:relative; z-index:1; font-weight:bold !important}
header div.headmian div.navigation ul li div.zcd div.r div.rr p {width:auto; overflow:hidden; display:block; font-family:data-c !important; color:#fafafa; font-size:clamp(10rem, 12vw, 240px); position:absolute; top:50%; right:50%; transform: translate(76%, -50%); z-index:0; text-transform: uppercase}


header div.headmian div.navigation ul li:hover {width:auto; ; height:6vw; min-height:80px; padding-left:2%; padding-right:2%; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; align-content:center;}
header div.headmian div.navigation ul li:hover a {width:100%; overflow:hidden; text-align:center; display:block; font-size:clamp(1rem, 1vw, 26px); color:#172a88; font-weight:bold !important}
header div.headmian div.navigation ul li:hover a:hover {width:100%; overflow:hidden; text-align:center; display:block; font-size:clamp(1rem, 1vw, 26px); color:#172a88; font-weight:bold !important}
header div.headmian div.navigation ul li:hover div.zcd {width:100%; overflow:hidden; background:#fff; position:absolute; top:50%; left:50%; transform: translate(-50%, 16%); z-index:9999; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:stretch; align-content:stretch;}
header div.headmian div.navigation ul li:hover div.zcd div.l {width:36%; overflow:hidden; height:auto}
header div.headmian div.navigation ul li:hover div.zcd div.l img {width:100%; overflow:hidden;  display:block}
header div.headmian div.navigation ul li:hover div.zcd div.r {width:64%; overflow:hidden; height:auto; display: flex;align-items: center;flex-direction: column;justify-content: space-between; padding: 30px 0;}
header div.headmian div.navigation ul li:hover div.zcd div.r div.ll {width:100%;height: auto; overflow:hidden; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; align-content:center}
header div.headmian div.navigation ul li:hover div.zcd div.r div.ll span {font-size:clamp(1.6rem, 1.8vw, 50px); color:#000; display:block}
header div.headmian div.navigation ul li:hover div.zcd div.r div.rr {width:100%; flex: 1;overflow:hidden; ; position:relative; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; align-content:center; padding-left:5%}
header div.headmian div.navigation ul li:hover div.zcd div.r div.rr a {width:auto; overflow:hidden; text-align:center; font-size:clamp(1rem, 1vw, 18px); color:#000; display:block; padding-left:3%; padding-right:3%; position:relative; z-index:1}
header div.headmian div.navigation ul li:hover div.zcd div.r div.rr a:hover {width:auto; overflow:hidden; text-align:center; font-size:clamp(1rem, 1vw, 18px); color:#172a88; display:block; padding-left:3%; padding-right:3%; position:relative; z-index:1; font-weight:bold !important}
header div.headmian div.navigation ul li:hover div.zcd div.r div.rr p {width:auto; overflow:hidden; display:block; font-family:data-c !important; color:#fafafa; font-size:clamp(10rem, 12vw, 240px); position:absolute; top:50%; right:50%; transform: translate(76%, -50%); z-index:0; text-transform: uppercase}

header div.headmian div.navigation ul li.ahover a { color:#172a88; font-weight:bold !important}



header div.headmian div.language {width:18%; min-width:200px; height:6vw; position:relative;}
header div.headmian div.language div.m {width:100px; height:6vw; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-end; align-items:center; align-content:center; cursor:pointer; float:right}
header div.headmian div.language div.m i {width:auto; overflow:hidden; text-align:left; color:#000; display:block}
header div.headmian div.language div.m i::before {font-size:clamp(0.5rem, 5vw, 20px) !important; display:block;margin-left: 5px;}
header div.headmian div.language div.m span {width:auto; overflow:hidden; text-align:left;  font-size:clamp(1.4rem, 1vw, 26px); color:#000; display:block;}
header div.headmian div.language div.m em {width:auto; overflow:hidden; text-align:left; padding-left:3%; font-size:clamp(0.6rem, 0.8vw, 20px); color:#000; display:block}

header div.headmian div.language div.m div.tcyy {width:130px; overflow:hidden; background:#fff; position:absolute; top:50%; left:50%; transform: translate(34%, 30%); position:absolute; z-index:9999; min-height:80px; display:none}
header div.headmian div.language div.m div.tcyy a {width:100%; overflow:hidden; text-align:center; line-height:50px; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; align-content:center;}
header div.headmian div.language div.m div.tcyy a b {width:auto; overflow:hidden; font-size:clamp(1.2rem, 1.2vw, 18px); color:#000; display:block; font-weight:normal}
header div.headmian div.language div.m div.tcyy a p {width:auto; overflow:hidden; font-size:clamp(1rem, 1vw, 16px); color:#000; display:block; padding-left:5%}
header div.headmian div.language div.m div.tcyy a:hover {width:100%; overflow:hidden; text-align:center; line-height:50px; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; align-content:center; background:#172a88}
header div.headmian div.language div.m div.tcyy a:hover b {width:auto; overflow:hidden; font-size:clamp(1.2rem, 1.2vw, 18px); color:#fff; display:block; font-weight:normal}
header div.headmian div.language div.m div.tcyy a:hover p {width:auto; overflow:hidden; font-size:clamp(1rem, 1vw, 16px); color:#fff; display:block; padding-left:5%}


header div.headmian div.language div.m:hover div.tcyy {width:130px; overflow:hidden; background:#fff; position:absolute; top:50%; left:50%; transform: translate(34%, 30%);  position:absolute; z-index:9999; min-height:80px; display:block}
 /* 自定义下拉菜单样式 */
        /* 自定义下拉菜单样式 */
.custom-select { position: relative; display: inline-block; }
.select-selected { padding: 8px 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.select-items { position: absolute; background-color: #f9f9f9;  border-top: none; z-index: 99; width: 100%; display: none; text-align: center;}
.select-items div { padding: 8px 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.select-items div:hover { background-color: #e9e9e9; }
/* 图标样式 */
.iconfont { margin-right: 5px; }
/* 确保图标和文字横向排列 */
.lang-item { display: flex !important; align-items: center; }


/* 首页福贝关键词介绍区域 */
 .slogan {width: 100%; height: 200px; margin-top: 6vw;}  
 .slogan h1 {font-size:  clamp(4rem, 4vw, 70px);height: 100%; color: var(--fubeiRed-color); display: flex; align-items: center; justify-content: center;}
 .keywords-content {display: flex;width: 90%;margin: 0 auto; align-items: center;}
 .keywords-content-pic {width: 50%;margin-right: 50px;border-radius: 12px; overflow: hidden;}
 .keywords-content-text {flex: 1;}
 .keywords-content-pic img {width: 100%;height: 100%;object-fit: cover;}
 .keywords-content-text .title h1 {width: 100%; overflow: hidden; text-align: center; font-size: clamp(2.4rem, 2.4vw, 50px); font-weight: bold !important; color: #172a88;}
 .keywords-content-text .title h2 {width: 60%; overflow: hidden; text-align: center; font-size: clamp(1.2rem, 1.2vw, 30px); color: #7d7d7d; font-weight: normal; padding-top: 0.8vw;margin: 0 auto;}
 .keywords-content-text .shuju { width: 100%; overflow: hidden; padding-top: 3vw; display: flex; display: -webkit-flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: stretch; align-content: stretch; }
.keywords-content-text .shuju dl { width: 20%; overflow: hidden; display: flex; display: -webkit-flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; }
.keywords-content-text .shuju dl dt { width: 100%; overflow: hidden; text-align: center; font-size: clamp(3rem, 3vw, 80px); color: #172a88; }
.icon-lou:before { content: "\e6f7"; }
.iconfont { font-family: "iconfont" !important;  font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.keywords-content-text .shuju dl dd { width: auto; overflow: hidden; text-align: center; color: #7a7a7a; font-size: clamp(1rem, 1vw, 20px); padding-top: 0.4vw; }
.keywords-content-text .shuju dl dd span { width: auto; overflow: hidden; display: inline; font-family: data-c !important; color: #172a88; font-size: clamp(1.8rem, 1.8vw, 38px); font-family: "DinM", sans-serif !important; }
.keywords-content-text .shuju em { width: 2px; overflow: hidden; background: #f5f5f5; display: block; margin-left: 2%; margin-right: 2%; }
.keywords-content-text .anniu { width: 100%; overflow: hidden; padding-top: 3vw; display: flex; display: -webkit-flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; }
.keywords-content-text .anniu a { width: auto; overflow: hidden; height: 40px; line-height: 40px; border-radius: 100px; background: #172a88; text-align: center; font-size: clamp(1rem, 1vw, 18px); color: #FFF; padding-left: 4%; padding-right: 4%; display: flex; display: -webkit-flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; }
.keywords-content-text .shuju dl dd p { width: auto; overflow: hidden; display: inline; font-weight: bold !important; color: #172a88; font-size: clamp(1.8rem, 1.8vw, 38px); }
.keywords-content-text .anniu a:hover {width:auto; overflow:hidden; height:40px; line-height:40px; border-radius:100px; background:#00a8ff; text-align:center; font-size:clamp(1rem, 1vw, 18px); color:#FFF; padding-left:4%; padding-right:4%; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center;}


 .sig-title h1 {font-size: clamp(2.4rem, 2.4vw, 50px); font-weight: bolder;color: var(--fubeiRed-color);text-align: center;padding: 5.21vw 0 2.6vw;}
 .select-ingredients-globally  .map img{ width: 100%;}
 .select-ingredients-globally .icon svg {width: 24px;}
 /* .sig-content {position: relative;} */

/*爆品中心*/
.indexbaopin {width:100%; height:auto; min-width:1100px; position:relative;
margin-top: 5.21vw;}
.indexbaopin div.m {width:91%; overflow:hidden; min-width:1100px; margin:0px auto; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center;}
.indexbaopin div.m h1 {width:99%; overflow:hidden;text-align: center; margin:0px auto; font-size:clamp(2.4rem, 2.4vw, 50px); color:#172a88; font-weight:normal;font-weight: bold;}
.indexbaopin .indexbaopin-btn {display: flex;align-items: center; justify-content: center;}
/* .indexbaopin .indexbaopin-btn a {width: 6vw; overflow: hidden; height: 2.6vw; line-height: 2.6vw; border-radius: 100px; border: 2px solid #172a88; text-align: center; font-size: clamp(1.2rem, 1.2vw, 20px); color: #172a88; padding-left: 5%; padding-right: 5%; display: flex; justify-content: center; align-items: center; gap: 5px; transition: all 0.3s ease; min-width: 120px;} */
.indexbaopin div.m h1 a i {width:15px; overflow:hidden; font-size:1vw; color:#172a88; display:inline; padding-left:3px}
.indexbaopin .indexbaopin-btn a:hover { border:1px solid #172a88; background:#172a88; color: #fff;}
.indexbaopin .indexbaopin-btn a:hover i {width:15px; overflow:hidden; font-size:1vw; color:#fff; display:inline; padding-left:3px}

.swiper-container {width:100%; height:100%; margin-top:2.8vw;overflow: hidden;}
.swiper-container div.swiper-wrapper {width:auto}
.swiper-container div.swiper-wrapper div.swiper-slide {width:auto; overflow:hidden;}
.swiper-container div.swiper-wrapper div.swiper-slide a {width:96%; overflow:hidden; margin:0px auto; display:block; position:relative}
.swiper-container div.swiper-wrapper div.swiper-slide a img {width:100%; overflow:hidden; height:auto; display:block; margin-bottom:6%; border-radius:10px}
.swiper-container div.swiper-wrapper div.swiper-slide a h3 {width:100%; overflow:hidden; text-align:center; font-size:clamp(1.4rem, 1.4vw, 30px); color:#656565; font-weight:normal}
.swiper-container div.swiper-wrapper div.swiper-slide a i {width:60%; overflow:hidden; height:auto; display:block; position:absolute; left:50%; bottom:10%; transform: translate(-50%, 0%); display:block}
.swiper-container div.swiper-wrapper div.swiper-slide a i img {width:100%; overflow:hidden; height:auto; display:block; margin:0px !important}


.indexbaopin div.swiper-button-next {width:2.6vw !important; overflow:hidden !important; height:2.6vw !important; position:absolute !important; right:1% !important; top:50% !important; z-index:99 !important; transform: translate(0%, -50%) !important; border-radius:100px !important; border:1px solid #172a88 !important; text-align:center !important; line-height:50px !important; font-size:clamp(1rem, 1vw, 18px) !important; color:#172a88}
.indexbaopin div.swiper-button-next::after {font-size:0px;}
.indexbaopin div.swiper-button-prev {width:2.6vw !important; overflow:hidden !important; height:2.6vw !important; position:absolute !important; left:1% !important; top:50% !important; z-index:99 !important; transform:(0%, -50%) !important; border-radius:100px !important; border:1px solid #172a88 !important; text-align:center !important; line-height:50px !important; font-size:clamp(1rem, 1vw, 18px) !important; color:#172a88}
.indexbaopin div.swiper-button-prev::after {font-size:0px;}

/* 福贝博客 */
.fubeblogs {
    width: 100%;
    min-width: 1100px;
    position: relative;
    padding: 100px 0;
    background: #fff;
  }

  .fubeblogs .m {
    width: 90%;
    overflow: hidden;
    min-width: 1100px;
    margin: 0 auto;
  }
  
  .fubeblogs .m h1 {
    width: 99%;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
    font-size: clamp(2.4rem, 2.4vw, 50px);
    color: #172a88;
    font-weight: bold;
  }
  
  .fubeblogs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 50px;
  }
  
  .fubeblogs-item {
    width: 23%;
    margin-bottom: 30px;
    overflow: hidden;
  }
   
  .fubeblogs-item a {
    display: block;
    position: relative;
    text-decoration: none;
  }
  
  .fubeblogs-item .img-wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 66.67%;
    overflow: hidden;
    border-radius: 12px;
    position: relative;
  }
  
  .fubeblogs-item img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  .fubeblogs-item h3 {
    font-size: clamp(1rem, 1vw, 18px);
    color: #333;
    margin: 15px 0 10px;
    line-height: 1.4;
    height: 2.8em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
  }
  
  .fubeblogs-item p {
    font-size: 14px;
    color: #999;
    margin-bottom: 10px;
  }
  
  .fubeblogs-item .learn-more {
    color: #172a88;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
  }
  
  .fubeblogs-item .learn-more i {
    font-size: 12px;
    transition: transform 0.3s ease;
  }
  
  .fubeblogs-item:hover img {
    transform: scale(1.1);
  }
  
  .fubeblogs-item:hover h3 {
    color: #172a88;
  }
  
  .fubeblogs-item:hover .learn-more {
    gap: 10px;
  }
  
  .fubeblogs-item:hover .learn-more i {
    transform: translateX(5px);
  }
  
  .fubeblogs-btn {
    display: flex;
    justify-content: center;
    margin-top: 50px;
  }
  
  .fubeblogs-btn a {
    width: 6vw;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    border-radius: 100px;
    border: 2px solid #172a88;
    text-align: center;
    font-size: clamp(1.2rem, 1.2vw, 20px);
    color: #172a88;
    padding-left: 5%;
    padding-right: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
    min-width: 120px;
  }
  
  .fubeblogs-btn a i {
    font-size: 14px;
    transition: transform 0.3s ease;
  }
  
  .fubeblogs-btn a:hover {
    background: #172a88;
    color: #fff;
    gap: 10px;
  }
  
  .fubeblogs-btn a:hover i {
    transform: translateX(5px);
  }
  .blogs-page {
    padding: 0;
  }
  .blogs-page .fubeblogs-list {
    margin-top: 0;
  }

 /* blogs详情页面 */

 .lastest-blogs {
  width: 90%;
  overflow: hidden;
  margin: 0 auto;
 }
 .lastest-blogs .blogs-title {
  width: 99%;
  overflow: hidden;
  text-align: center;
  margin: 0 auto;
  font-size: clamp(2.4rem, 2.4vw, 50px);
  color: var(--fubeiRed-color);
  margin-top: 5.21vw;
 }
 .lastest-blogs .blogs-content a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
 }
 .lastest-blogs .blogs-content .learn-more {
  color: #172a88;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
 }
 .lastest-blogs .blogs-content .blogs-pic {
  width: 40%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
 }
 .blogs-text-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8; /* 限制展示 3 行 */
  overflow: hidden;
  text-overflow: ellipsis;
}
 .lastest-blogs .blogs-content .blogs-pic img {
  width: 100%;
  max-width: 650px;
  transition: transform 0.3s ease;
  height: 100%;
  object-fit: cover;
 }
 .lastest-blogs .blogs-content .blogs-text {
  width: 60%;
  overflow: hidden;
  padding-left: 5%;
 }
 .lastest-blogs .blogs-content .blogs-text h2 {
  font-size: 30px;
  color: var(--fubeiRed-color);
  padding-bottom: 40px;
 }  
 .lastest-blogs .blogs-content .blogs-text p {
  font-size: clamp(1.1rem, 1.1vw, 18px);
  margin-bottom: 10px;
  color: #636363;
  line-height: 1.5;
 }
 .lastest-blogs a i {
  font-size: 14px;
  transition: transform 0.3s ease;
}
 .lastest-blogs:hover .learn-more i {
  transform: translateX(5px);
}
.lastest-blogs:hover img {
  transform: scale(1.1);
}
 .blogs-detail {
  width: 90%;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 10vw;
 }
 .blogs-detail-title {
  overflow: hidden;
  margin: 0 auto;
  font-size: clamp(2.4rem, 2.4vw, 50px);
  color: var(--fubeiRed-color);
  padding-bottom: 2vw;
 }
 .blogs-detail-title .release-date, .blogs-detail-title .source, .blogs-detail-title .author, .blogs-detail-title .views {
  font-size: 16px;
  color: #636363;
  margin-right: 20px;
 }
 .blogs-detail-title p {
  font-size: 16px;
  color: #666;
  padding: 1.5vw 0 2vw;
  border-bottom: 1px solid #ddd;
 }
 .blogs-detail-content {
  padding: 1.5vw 0 2vw;
 }
 .blogs-detail-content p {
  font-size: 18px;
  color: #646571;
  line-height: 1.5;
  margin-bottom: 15px;
 }
 .blogs-detail-content img {
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
 }
 .blogs-detail-btn a.more {
  width: 200px;
  overflow: hidden;
  margin: 0px auto;
  height: 45px;
  line-height: 2.6vw;
  border-radius: 100px;
  border: 2px solid #172a88;
  text-align: center;
  font-size: clamp(1.2rem, 1.2vw, 20px);
  color: #172a88;
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin-top: 5vw !important;
}
.blogs-detail-btn a:hover {
  background: var(--fubeiRed-color);
  color: #fff;
}
.blogs-detail-btn a i {
  transition: transform 0.3s ease;
}
.blogs-detail-btn a:hover i {
  transform: translateX(5px);
}
.pagination ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: bottom;
}
.pagination {
    width: auto;
    text-align: center;
    margin-top: 4vw;
}
.pagination ul li {
  margin: 0 5px;
  font-size: 14px;
  border: none;
  border-radius: 100px;
}
.pagination ul li a {
  color: #6e6e6e;
  background: #fff;
  padding: 12px 16px;
  border: 1px solid #DCDCDC;
  border-radius: 100px;
  display: inline-block; /* 使 a 元素可以设置宽度 */
  max-width: 400px; /* 设置元素的宽度，可根据实际需求调整 */
  white-space: nowrap; /* 文本不换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 溢出部分用省略号表示 */
  box-sizing: border-box;
  width: 100%;
}
.pagination ul li a:hover {
  background: var(--fubeiRed-color);
  color: #fff;
}

.pagination ul li a span {
  font-weight: 600;
}


 /* 原材料产地-地图开始 */
:root {
    --map-width: 1920;   /* 地图原始宽度 */
    --map-height: 820;   
  }
.map-container {
position: relative;
  width: 100%;
  padding-top: 42.7083%; /* 1920x820 的宽高比 */
  /* overflow: hidden;   */
  }
  
  .map-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 关键属性，禁止裁剪或变形 */
  }
  /* 图标容器：绝对定位 + 百分比坐标 */
  .productImg-box {
    position: absolute;
    transform: translate(-50%, -50%); /* 图标中心对准坐标点 */
  }
  .productImg-box:hover {z-index: 9999;}
  /* 具体图标的坐标*/
  /* 示例：假设某图标在 (x=600, y=300) 的位置 */
.productImg-box1 {
    left: calc(417 / var(--map-width)* 100%);
    top: calc(137 / var(--map-height)* 100%);
    transform: translate(-50%, -50%);
}
.productImg-box2 {
    left: calc(716 / var(--map-width)* 100%);
    top: calc(534 / var(--map-height)* 100%);
}
.productImg-box3 {
    left: calc(1028 / var(--map-width)* 100%);
    top: calc(199 / var(--map-height)* 100%);
    transform: translate(-50%, -50%);
}
.productImg-box4 {
    left: calc(1029 / var(--map-width)* 100%);
    top: calc(98 / var(--map-height)* 100%);
    transform: translate(-50%, -50%);
}
.productImg-box5 {
    left: calc(411 / var(--map-width)* 100%);
    top: calc(250 / var(--map-height)* 100%);
    transform: translate(-50%, -50%);
}
.productImg-box6 {
    left: calc(684 / var(--map-width)* 100%);
    top: calc(65 / var(--map-height)* 100%);
    transform: translate(-50%, -50%);
}
.productImg-box7 {
    left: calc(1332 / var(--map-width)* 100%);
    top: calc(129 / var(--map-height)* 100%);
    transform: translate(-50%, -50%);
}
.productImg-box8 {
    left: calc(1092 / var(--map-width)* 100%);
    top: calc(355 / var(--map-height)* 100%);
    transform: translate(-50%, -50%);
}
.productImg-box9 {
    left: calc(444 / var(--map-width)* 100%);
    top: calc(333 / var(--map-height)* 100%);
    transform: translate(-50%, -50%);
}
.productImg-box10 {
    left: calc(958 / var(--map-width)* 100%);
    top: calc(192 / var(--map-height)* 100%);
    transform: translate(-50%, -50%);
}
.productImg-box11 {
    left: calc(1613 / var(--map-width)* 100%);
    top: calc(287 / var(--map-height)* 100%);
    transform: translate(-50%, -50%);
}
.productImg-box12 {
    left: calc(1476 / var(--map-width)* 100%);
    top: calc(396 / var(--map-height)* 100%);
    transform: translate(-50%, -50%);
}
.productImg-box13 {
    left: calc(537 / var(--map-width)* 100%);
    top: calc(530 / var(--map-height)* 100%);
    transform: translate(-50%, -50%);
}
.productImg-box14 {
    left: calc(988 / var(--map-width)* 100%);
    top: calc(213 / var(--map-height)* 100%);
    transform: translate(-50%, -50%);
}
.productImg-box15 {
    left: calc(1858 / var(--map-width)* 100%);
    top: calc(693 / var(--map-height)* 100%);
    transform: translate(-50%, -50%);
}
.productImg-box16 {
    left: calc(1552 / var(--map-width)* 100%);
    top: calc(239 / var(--map-height)* 100%);
    transform: translate(-50%, -50%);
}
.productImg-box17 {
    left: calc(558 / var(--map-width)* 100%);
    top: calc(639 / var(--map-height)* 100%);
}
.productImg-box18 {
    left: calc(1142 / var(--map-width)* 100%);
    top: calc(786 / var(--map-height)* 100%);
    flex-direction: column;
}
.productImg-box19 {
    left: calc(1889 / var(--map-width)* 100%);
    top: calc(671 / var(--map-height)* 100%);
    transform: translate(-50%, -50%);
}
.productImg-box20 {
    left: calc(1569 / var(--map-width)* 100%);
    top: calc(327 / var(--map-height)* 100%);
    transform: translate(-50%, -50%);
}
.productImg-box21 {
    left: calc(1429 / var(--map-width)* 100%);
    top: calc(278 / var(--map-height)* 100%);
    transform: translate(-50%, -50%);
}




.productImg-box1 {flex-direction: column;}
.productImg-box9 .productImg {order: 2;}
.productImg-box2 .productImg {order: 2; }
.productImg-box3 .productImg {order: 2; }
.productImg-box3 .productImg img {transform-origin: left center;}
.productImg-box16 .productImg {order: 2; }
.productImg-box9 .productImg img {transform-origin: left center;}
.productImg-box2 .productImg img {transform-origin: left center;}
.productImg-box4 {flex-direction: column;}
.productImg-box14 {flex-direction: column;}
.productImg-box14 .productImg {order: 2;}
.productImg-box19{flex-direction: column;}
.productImg-box20{flex-direction: column;}
.productImg-box20 .productImg {order: 2;}
/* 遮罩层样式 */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

/* 放大后的图片样式 */
.enlarged-img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  z-index: 99999;
}
 /* .sig-content .productImg-box6 {flex-direction: column;}
 .sig-content .productImg-box1 {flex-direction: column;}
 .sig-content .productImg-box10 .productImg {order: 2;}
 .sig-content .productImg-box12 {flex-direction: column;}
 .sig-content .productImg-box15 {flex-direction: column;}
 */
 .productImg-box span {display: block; margin: 10px;}
 .productImg-box {display: flex;justify-content: space-between; align-items: center;}
 .productImg img {max-width: 60px; border-radius: 6px;transition: all 0.3s ease;transform-origin: right center;} 
 /* .productImg img.enlarged {transform: scale(3);transform-origin: right center;}  */
 .productImg-box:hover img {transform: scale(6.2);}
/* 原材料产地-地图结束 */

 /* ---------------------关于我们页面---------------- */
 .about-content {display: flex;align-items: center; min-height: auto; height: 500px;}
 .about-content-pic {width: 50%;height: 100%;}
 .about-content-text {flex: 1;padding: 0 5vw;}
 .about-content-pic img {width: 100%;height: 100%;object-fit: cover;}
 .about-content-text h3 {font-size: 30px;color: var(--fubeiRed-color);margin-bottom: 40px;}
 .about-content-text p{font-size: 18px;color: #636363;}
 :root {
    --hBg-width: 1920;  
    --hBg-height: 680;  
  }
  .history-container {
  position: relative;
  width: 100%;
  /* padding-top: 24.17%;  */

  }
 .history-content .history-text {position: absolute;display: flex;flex-direction: column;align-items: center;color: #ffffff;} 
 .history-content .history-text h5 {font-size: 18px;}
 /* writing-mode: vertical-rl; display: flex;flex-wrap: wrap;*/
 .history-content .history-text p { margin-top: 10px;font-size: 18px;width: 60px;}
 .history-content .text-2005 {  
    left: calc(1694/ var(--hBg-width) * 100%); 
    top: calc(530 / var( --hBg-height) * 100%);
    transform: translate(-50%, -50%);     
}
 .history-content .text-2006 {  
    left: calc(1600 / var(--hBg-width) * 100%); 
    top: calc(480 / var( --hBg-height) * 100%);
    transform: translate(-50%, -50%);     
}
.history-content .text-2009{  
    left: calc(1473 / var(--hBg-width) * 100%); 
    top: calc(460 / var( --hBg-height) * 100%);
    transform: translate(-50%, -50%);     
}
.history-content .text-2010 {  
    left: calc(1349 / var(--hBg-width) * 100%); 
    top: calc(440 / var( --hBg-height) * 100%);
    transform: translate(-50%, -50%);     
}
.history-content .text-2012 {  
    left: calc(1202 / var(--hBg-width) * 100%); 
    top: calc(400 / var( --hBg-height) * 100%);
    transform: translate(-50%, -50%);     
}
.history-content .text-2013 {  
    left: calc(1066 / var(--hBg-width) * 100%); 
    top: calc(370/ var( --hBg-height) * 100%);
    transform: translate(-50%, -50%);     
}

.history-content .text-2015 {  
    left: calc(906 / var(--hBg-width) * 100%); 
    top: calc(330 / var( --hBg-height) * 100%);
    transform: translate(-50%, -50%);     
}
.history-content .text-2018 {  
    left: calc(741 / var(--hBg-width) * 100%); 
    top: calc(300 / var( --hBg-height) * 100%);
    transform: translate(-50%, -50%);     
}
.history-content .text-2020 {  
    left: calc(608 / var(--hBg-width) * 100%); 
    top: calc(280 / var( --hBg-height) * 100%);
    transform: translate(-50%, -50%);     
}
.history-content .text-2023{  
    left: calc(408 / var(--hBg-width) * 100%); 
    top: calc(240 / var( --hBg-height) * 100%);
    transform: translate(-50%, -50%);     
}
.history-content .text-2024{  
    left: calc(232 / var(--hBg-width) * 100%); 
    top: calc(190/ var( --hBg-height) * 100%);
    transform: translate(-50%, -50%);     
}


 .history-content img {width: 100%; height: auto;}
 /* 小屏幕下历史模块的显示 */
 .m-history-content { max-width: 1200px; margin: 50px auto; position: relative; height: 860px;margin: 30px 20px; display: none;}
.m-history-content .timeline-line { position: absolute; left: 50%; top: 0; width: 2px; height: 100%; background-color: #172a88; transform: translateX(-50%); }
.m-history-content .time-node { position: absolute; width: 100%; display: flex; align-items: center; justify-content: center; transition: all 0.3s; cursor: pointer; }
.m-history-content .time-node:hover { transform: scale(1.05); }
.m-history-content .dot { width: 16px; height: 16px; background: #172a88; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); position: relative; z-index: 1; }
.m-history-content .content { position: absolute; white-space: normal; font-family: Arial, sans-serif; padding: 8px 15px; background: rgba(255, 255, 255, 0.9); border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); top: 50%; transform: translateY(-50%); max-width: 200px; /* 可根据实际情况调整最大宽度 */ }
.m-history-content .year { font-weight: bold; color: #172a88; margin-bottom: 4px; font-size: 18px;}
.m-history-content .text { color: #666; font-size: 14px; word-wrap: break-word; word-break: normal;font-size: 14px; }
.m-history-content #node1 { top: 3%; }
.m-history-content #node2 { top: 12%; }
.m-history-content #node3 { top: 21%; }
.m-history-content #node4 { top: 30%; }
.m-history-content #node5 { top: 39%; }
.m-history-content #node6 { top: 48%; }
.m-history-content #node7 { top: 57%; }
.m-history-content #node8 { top: 66%; }
.m-history-content #node9 { top: 75%; }
.m-history-content #node10 { top: 84%; }
.m-history-content #node11 { top: 93%; }
.m-history-content .time-node:nth-child(odd) .content { right: calc(50% + 20px); }
.m-history-content .time-node:nth-child(even) .content { left: calc(50% + 20px); }


/* 福贝价值观 */
.our-value-content {display: flex;padding: 0 10vw;justify-content: space-around;}
.our-value-content .our-value-item {width: 33%;max-width: 400px;display: flex;align-items: center;flex-direction: column;    }
.our-value-content h3 {font-size: 20px;text-align: center;}
.our-value-content  .our-value-item img {min-width: 60px; margin-bottom: 30px;}



/* --------------------关于我们qualification页面------------------------ */
.qualification-content {display: flex;align-items: center;height: 550px;}
.qualification-content .image-wrapper {width: 50%;height: 100%;}
.qualification-content .text-wrapper {width: 50%;padding: 0 5%;}
.qualification-content img {width: 100%;height: 100%;object-fit: cover;}
.qualification-section { margin-top: 6vw}
.qualification-content .text-wrapper h2 {color: var(--fubeiRed-color);font-size: clamp(2rem, 2vw, 48px);padding-bottom: 40px;}
.qualification-content .text-wrapper p {color: #636363;font-size: clamp(1.1rem, 1.1vw, 18px);margin-bottom: 10px;}


/*footer*/
footer {width:100%; overflow:hidden; background:#172a88; padding-bottom:3vw; padding-top:3.6vw}
footer div.footnav {width:90%; overflow:hidden; margin:0px auto; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; align-content:flex-start;}
footer div.footnav dl {width:auto; overflow:hidden;}
footer div.footnav dl dt {width:auto; overflow:hidden;}
footer div.footnav dl dt a {width:auto; overflow:hidden; text-align:left; color:#FFF; font-size:clamp(1.3rem, 1.3vw, 26px); display:block; padding-bottom:0.6vw}
footer div.footnav dl dt a:hover {color:#00a8ff}
footer div.footnav dl dd {width:auto; overflow:hidden;}
footer div.footnav dl dd a {width:auto; overflow:hidden; text-align:left; color:#FFF; font-size:clamp(1rem, 1vw, 20px); display:block; line-height:2vw}
footer div.footnav dl dd a:hover {color:#00a8ff}

footer div.banquan {width:90%; margin:0px auto; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; align-content:flex-start; border-top:1px solid #f9f9f9; margin-top:2vw; padding-top:1.5vw}
footer div.banquan div.l {width:60%; overflow:hidden; text-align:left; font-size:clamp(0.9rem, 0.9vw, 18px); color:#FFF; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:center; align-content:center;}
footer div.banquan div.l a {color:#FFF}
footer div.banquan div.l i {width:1px; overflow:hidden; height:0.5vw; background:#FFF; display:inline; margin-left:1%; margin-right:1%}
footer div.banquan div.r {width:40%; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-end; align-items:center; align-content:center;}
footer div.banquan div.r dl {width:auto; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-end; align-items:flex-start; align-content:center;}
footer div.banquan div.r dl dt {width:40px; color:#FFF; text-align:left; font-size:clamp(1.8rem, 1.8vw, 36px);}
footer div.banquan div.r dl dd {width:auto; font-family:data-c !important; color:#FFF; text-align:left; font-size:clamp(1.2rem, 1.2vw, 26px);}
.socialMedia {display: flex;padding-left: 2%;}
footer div.banquan div.r a {width:auto; display:block; color:#FFF; text-align:left; font-size:clamp(1.8rem, 1.8vw, 36px); padding-top:0px; padding-left:2%; position:relative}
footer div.banquan div.r a em {width:120px; overflow:hidden; height:120px; display:none; background:#FFF; border-radius:8px; padding:6px; position:absolute; left:50%; bottom:50px; z-index:9999; margin-left:-60px;}
footer div.banquan div.r a em img {width:100%; overflow:hidden; height:auto; display:block}
footer div.banquan div.r a b {width:220px; overflow:hidden; height:50px; display:none; background:#FFF; border-radius:8px; padding:6px; position:absolute; left:50%; bottom:50px; z-index:9999; margin-left:-110px; font-weight:normal; font-size:clamp(1.2rem, 1.2vw, 30px); color:#172a88; text-align:center; line-height:50px;}

footer div.banquan div.r a:hover {width:auto; display:block; color:#f6c1c9; text-align:left; font-size:clamp(1.8rem, 1.8vw, 36px); padding-top:0px; padding-left:2%; position:relative}
footer div.banquan div.r a:hover em {width:120px; overflow:hidden; height:120px; display:block; background:#FFF; border-radius:8px; padding:6px; position:absolute; left:50%; bottom:50px; z-index:9999; margin-left:-60px;}
footer div.banquan div.r a:hover em img {width:100%; overflow:hidden; height:auto; display:block}
footer div.banquan div.r a:hover b {width:220px; overflow:hidden; height:50px; display:block; background:#FFF; border-radius:8px; padding:6px; position:absolute; left:50%; bottom:50px; z-index:9999; margin-left:-110px; font-weight:normal; font-size:clamp(1.2rem, 1.2vw, 30px); color:#172a88; text-align:center; line-height:50px;}



/*------------------------产品中心-------------------*/
.productcenter {width:100%; overflow:hidden; background:url(../images/bg.jpg) center top no-repeat #fafbfb; margin-top: 6vw;}
.productcenter div.pnav {width:90%; overflow:hidden; height:4vw; background:#fff; border-radius:100px; margin:0px auto; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:center; align-content:center; margin-bottom:3.6vw;margin-top: 4.8vw; }
.productcenter div.pnav a {padding:0 50px; overflow:hidden; height:4vw; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center; font-size:clamp(1.2rem, 1.2vw, 36px); color:#172a88; background:#fff; border-radius:100px;}
.productcenter div.pnav a:hover {padding:0 50px;  overflow:hidden; height:4vw; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center; font-size:clamp(1.2rem, 1.2vw, 36px); color:#fff; background:#172a88; border-radius:100px;}
.productcenter div.pnav a.ahover {padding:0 50px;  overflow:hidden; height:4vw; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center; font-size:clamp(1.2rem, 1.2vw, 36px); color:#fff; background:#172a88; border-radius:100px;}

.productcenter h1 {width:26%; overflow:hidden; text-align:center; margin:0px auto; font-size:clamp(1rem, 1vw, 30px); color:#454545; font-weight:normal}
.productcenter h1 span {width:auto; overflow:hidden; display:inline;  font-size:clamp(1.8rem, 1.8vw, 50px);}

.productcenter div.m {width:90%; overflow:hidden; margin:0px auto; margin-top:4vw; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:center; align-content:center; padding-bottom:3vw}
.productcenter div.m a {width:49%; overflow:hidden; margin-top:2vw; display:flex;border-radius: 16px; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:stretch; align-content:stretch; background:#fff; -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); position:relative}
.productcenter div.m a i {width:60%; overflow:hidden; display:block;border-top-right-radius: 16px;border-bottom-right-radius: 16px;}
.productcenter div.m a i img {width:100%; overflow:hidden; height:100%; display:block;object-fit: cover;transition: all 0.5s linear;}
.productcenter div.m a span {width:30%; overflow:hidden; text-align:left; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:center; align-content:center; font-size:clamp(1.4rem, 1.4vw, 38px); font-family: "DinM", sans-serif; color:#807f87}
.productcenter div.m a span b {font-size:clamp(0.8rem, 0.8vw, 12px); padding-right:15%; padding-top:3%; font-weight:normal}
.productcenter div.m a:hover {background-color: #f9f2f3;}
.productcenter div.m a:hover img {transform: scale(1.2);}

/* ---------------------------研发和智能制造--------------------------- */
.zhizao {background-image: none;background-color: transparent;}
.zhizao div.pnav {border: 1px solid var(--fubeiRed-color);}
.zhizaobanner {width:100%; overflow:hidden; height:100vh;margin-top: 4vw; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center;background: url(../images/zhizaobanner.jpg) center center / cover no-repeat; visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;position: relative;overflow: hidden;}

.smartFactoryB {background: url(../images/smartfactory.jpg) center center / cover no-repeat; visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;position: relative;overflow: hidden;}
.centralFactoryB {background: url(../images/centralfactory.jpg) center center / cover no-repeat; visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;position: relative;overflow: hidden;}
.industrialParkB{background: url(../images/industrialpark.jpg) center center / cover no-repeat; visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;position: relative;overflow: hidden;}

/* 视频播放 */
.video-box {width: 40%; margin: 0 auto;cursor: pointer;}
.video-box iframe {max-width: 100%;max-height: 700px;}

.research-section {background-color: #f5f5f5;margin-top: 0;}

/*分页*/
.fenye {width: 100%; overflow: hidden; text-align: center; margin: 50px auto;}
.fenye a {display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border: 1px solid #e5e5e5; border-radius: 50%; margin: 0 5px; color: #666; font-size: 14px; transition: all 0.3s ease;font-size: 18px;}
.fenye a.active {background: #172a88; color: #fff; border-color: #172a88;}
.fenye a:hover {background: #172a88; color: #fff; border-color: #172a88;}
.fenye a.prev, .fenye a.next {width: 80px;border-radius: 30px;}


/*-------------------联系我们------------------*/
/* .message {background-color: #f1f1f1;} */
.contact {width:80%; overflow:hidden; margin:0px auto; min-width:1100px;}
.contact h1 {width: 99%; overflow: hidden; text-align: center; margin: 0 auto; font-size: clamp(2.4rem, 2.4vw, 50px); color: #172a88; font-weight: bold;margin-top: 5.21vw;}
.contact div.m {width:100%; overflow:hidden; margin-top:50px;}
.contact div.m form {width:100%; overflow:hidden; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:center; align-content:center;}
.contact div.m form dl {width:49%; overflow:hidden; border-bottom:2px solid #cacaca; padding-bottom:1vw !important; margin-bottom:4vw !important; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; align-content:center;}
.contact div.m form dl dt {width:40px; overflow:hidden; text-align:left; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; align-content:center; font-size:clamp(1.6rem, 1.6vw, 36px); color:#172a88}
.contact div.m form dl dd {width:93%; overflow:hidden; text-align:left;}
.contact div.m form dl dd input {width:100%; overflow:hidden; text-align:left; border:0px; background:none; font-size:clamp(1rem, 1vw, 20px); color:#8e8e8e}

.contact div.m form dl.c {width:100%; overflow:hidden; border-bottom:2px solid #cacaca; padding-bottom:1vw !important; margin-bottom:4vw !important; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; align-content:center; position:relative}
.contact div.m form dl.c dt {width:40px; overflow:hidden; text-align:left; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; align-content:center; font-size:clamp(1.6rem, 1.6vw, 36px); color:#172a88}
.contact div.m form dl.c dd {width:98%; overflow:hidden; text-align:left;}
.contact div.m form dl.c dd select {width:100%; overflow:hidden; text-align:left; border:0px; background:none; font-size:clamp(1rem, 1vw, 20px); color:#8e8e8e; position:relative; z-index:2}
.contact div.m form dl.c i {width:40px; overflow:hidden; text-align:right; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; align-content:center; font-size:clamp(1.4rem, 1.4vw, 36px); color:#172a88; position:absolute; top:50%; right:0%; transform: translate(0%, -50%); z-index:1}

.contact div.m form dl.sub {width:100%; overflow:hidden; border-bottom:0px solid #cacaca; padding-bottom:1vw !important; margin-bottom:0vw !important; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; align-content:center; position:relative}
.contact div.m form dl.sub dt {width:40px; overflow:hidden; text-align:left; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; align-content:center; font-size:clamp(1.6rem, 1.6vw, 36px); color:#172a88}
.contact div.m form dl.sub dd {width:98%; overflow:hidden; text-align:left; font-size:clamp(1rem, 1vw, 20px); color:#8e8e8e}

.contact div.m form div.ly {width:100%; overflow:hidden;padding-bottom:1vw !important;  display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; position:relative}
.contact div.m form div.ly textarea {width:100%; overflow:hidden; min-height:160px; text-align:left; border:0px; background:none; font-size:clamp(1rem, 1vw, 20px); color:#8e8e8e}

.contact div.m form div.an {width:100%; overflow:hidden; border-bottom:0px solid #cacaca !important; padding-bottom:1vw !important; margin-bottom:4vw !important; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; align-content:center; position:relative}

.contact div.m form div.an button {width:425px; overflow:hidden; margin:0px auto; height:2.6vw; line-height:2.6vw; border-radius:100px; border:2px solid #172a88; background:#172a88; text-align:center; font-size:clamp(1.2rem, 1.2vw, 20px); color:#fff; padding-left:5%; padding-right:5%; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center;min-height: 50px;}
.contact div.m form div.an button em {width:15px; overflow:hidden; font-size:1vw; color:#fff; display:inline; padding-left:3px}
.contact div.m form div.an button:hover {border:2px solid #10a3ef; background:#10a3ef;}
.contact div.m form div.an button:hover em {width:15px; overflow:hidden; font-size:1vw; color:#fff; display:inline; padding-left:3px}
.wpcf7 form .wpcf7-response-output {margin: -50px 0 80px !important;}
.wpcf7 form.sent .wpcf7-response-output {border-radius: 4px;text-align: center;overflow: hidden;
    margin: 0px auto;}
.contactshare {width:100%; min-width:1100px; background:#f5f5f5}
.contactshare div.m {width:90%; margin:0px auto; padding-top:5%; padding-bottom:5%; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:center; align-content:center;}
.contactshare div.m dl {width:19%; background:#FFF; border-radius:100px; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center; padding-top:0.6vw !important; padding-bottom:0.6vw !important; -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); position:relative; cursor:pointer}
.contactshare div.m dl dt {width:60px; overflow:hidden; text-align:left; font-size:clamp(2.2rem, 2.2vw, 50px);}
.contactshare div.m dl dd {width:auto; overflow:hidden; color:#666; font-size:clamp(1.4rem, 1.4vw, 30px);}
.contactshare div.m dl span {width:40%; overflow:hidden; padding:1%; background:#FFF; position:absolute; left:50%; bottom:10%; transform: translate(-50%, -50%); display:none; z-index:999; border:1px solid #ddd; border-radius:10px;}
.contactshare div.m dl span img {width:100%; overflow:hidden; height:auto; display:block}
.contactshare div.m dl p {width:90%; overflow:hidden; padding:5%; background:#FFF; position:absolute; left:50%; bottom:50%; transform: translate(-50%, -50%); display:none; z-index:999; border:1px solid #ddd; text-align:center; color:#666; font-size:clamp(1.4rem, 1.4vw, 30px); border-radius:10px;}

.contactshare div.m dl:hover {width:19%; background:#FFF; border-radius:100px; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center; padding-top:0.6vw !important; padding-bottom:0.6vw !important; -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2); position:relative; cursor:pointer}
.contactshare div.m dl:hover dt {width:60px; overflow:hidden; text-align:left; font-size:clamp(2.2rem, 2.2vw, 50px);}
.contactshare div.m dl:hover dd {width:auto; overflow:hidden; color:#666; font-size:clamp(1.4rem, 1.4vw, 30px);}
.contactshare div.m dl:hover span {width:40%; overflow:hidden; padding:1%; background:#FFF; position:absolute; left:50%; bottom:10%; transform: translate(-50%, -50%); display:block; z-index:999; border:1px solid #ddd; text-align:center; color:#666; font-size:clamp(1.4rem, 1.4vw, 30px); border-radius:10px;}
.contactshare div.m dl:hover span img {width:100%; overflow:hidden; height:auto; display:block}
.contactshare div.m dl:hover p {width:90%; overflow:hidden; padding:5%; background:#FFF; position:absolute; left:50%; bottom:50%; transform: translate(-50%, -50%); display:block; z-index:999; border:1px solid #ddd; text-align:center; color:#666; font-size:clamp(1.4rem, 1.4vw, 30px); border-radius:10px;}


.contactInfo {width: 100%;padding: 50px 0;}
.contactInfo-content {display: flex;width: 50%;margin: 0 auto;justify-content: space-between;margin-top: 6rem;color: var(--fubeiRed-color);}
.contactInfo-tel, .contactInfo-email {display: flex; align-items: center;}
.contactInfo-tel P {font-family: "DinB", sans-serif;font-size: 24PX;margin-left: 10px;}
.contactInfo-email P {font-family: "CalibriB", sans-serif;font-size: 24px;margin-left: 10px;}
/* 联系我们页面 联系我们模块 */
.contactMessage {display: flex;width: 90%; margin: 0 auto; align-items: center;background-color: #fff;border-radius: 12px;padding-top: 50px;}
.contactMessage .leftText {flex: 1;padding: 0 50px;}
.contactMessage .leftText P {color: #636363;font-size: clamp(1.1rem, 1.1vw, 18px);margin-bottom: 10px;line-height: 1.5;}
.contactMessage .rightForm {width: 50%;}
.contactMessage .contact {min-width: auto;}
.contact div.m form dl:nth-child(2) dt {height: 31px;}
.contactMessage .contact h1 {margin-top: 0;}
/* 联系我们页面合作流程模块 */
.coorperation {display: flex; align-items: center;background-color: #f5f5f5;padding: 5.21vw 0;}
.coorperation .leftPic {width: 50%;overflow: hidden; align-self: stretch;}
.coorperation .leftPic img {width: 100%;height: 100%;object-fit: cover;}
.coorperation .contact h1 {margin-top: 0;}
.coorperation .contactInfo {padding-top: 0;}

.rightProcedures { width: 50%; padding: 40px;  border-radius: 20px; }
.procedures-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; padding: 20px; }
.procedure-item { position: relative; padding: 25px; background: #fff; border-radius: 12px; transition: all 0.3s ease; }
.procedure-item:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.procedure-number { position: absolute; top: -15px; left: 20px; font-family: "DinM", sans-serif; font-size: 36px; font-weight: 700; color: #172a88; opacity: 0.2; }
.procedure-item h3 { margin: 15px 0 10px; font-size: 18px; font-weight: 600; color: #333; }
.procedure-item p { font-size: 14px; line-height: 1.6; color: #666; margin: 0; }
@media screen and (max-width: 1200px) { .rightProcedures { width: 100%; padding: 0px; box-sizing: border-box;} }
@media screen and (max-width: 768px) { .procedures-container { grid-template-columns: 1fr; gap: 20px; } .procedure-item { padding: 20px; } .procedure-number { font-size: 28px; } .procedure-item h3 { font-size: 16px; } .procedure-item p { font-size: 13px; } }
.procedure-item::before { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: #172a88; transition: width 0.3s ease; }
.procedure-item:hover::before { width: 100%; }
.procedure-item:hover .procedure-number { opacity: 0.4; }


/*----------------福贝研发------------*/
.fubeijidi {width:90%; overflow:hidden; margin:0px auto; min-width:1100px; padding-top:6%;}
.fubeijidi h1 {width:100%; overflow:hidden;  font-size:clamp(2.4rem, 2.4vw, 50px); font-weight:bold !important; color:#172a88; font-weight:normal; margin-bottom:2vw;text-align: center;}
.fubeijidi div.m {width:90%; overflow:hidden; text-align:left; color:#636363; font-size:clamp(1rem, 1vw, 20px); line-height:2vw;margin: auto;}
.fubeijidi div.m p {width:100%; overflow:hidden; display:block; padding-bottom:1vw}


.fubeilinghang {width:90%; overflow:hidden; height:16vw; margin:5.21vw auto 0;}
.fubeilinghang a {width:auto; overflow:hidden; height:16vw; display:block; position:relative; border-radius:8px; margin-right:1vw; float:left}
.fubeilinghang a img {width:auto; overflow:hidden; height:100%; display:block}
.fubeilinghang a i {position:absolute; top:-20%; left:50%; transform: translate(-50%, -50%); z-index:999; width:2.6vw; text-align:center; font-size:clamp(2.4rem, 2.4vw, 50px); color:#fff; transition: all 0.2s linear 0s;}
.fubeilinghang a:hover i {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:999; width:2.6vw; text-align:center; font-size:clamp(2.4rem, 2.4vw, 50px); color:#fff; transition: all 0.2s linear 0s;}
.spmain {width:1000%}
#demo14 {float:left !important}
#demo15 {float:left !important}

/* -------------手机端导航------------ */
.menu-toggle { display: none; flex-direction: column; cursor: pointer; }
.menu-toggle span { width: 25px; height: 2px; background-color: var(--fubeiRed-color); margin: 3px 0; transition: 0.4s; }
nav { position: fixed; top: 0; right: 0; width: 100%; height: 0;overflow: hidden; background-color: #fff; z-index: 1001; transition: all 0.5s linear; box-sizing: border-box; padding-top: 60px; }

nav ul {list-style: none;padding: 20px 0;margin: 0 auto;width: 90%;}

nav ul li {margin-bottom: 10px;}

nav ul li a {text-decoration: none;color: #636363;display: block;padding: 8px 15px;border-radius: 5px;transition: 0.3s ease;font-size: 16px;width: 90%;display:flex; justify-content: space-between;align-items: center;}
/* nav ul li a span {width: 80%;display: inline-block;} */
nav ul li a em {font-size: 14px !important;margin-left: 6px;}
nav ul li a:hover {background-color: #e0e0e0;}
.has-submenu {position: relative;}

.submenu {display: none;list-style: none;padding: 0;margin-left: 20px;}

.submenu li a {padding: 6px 10px;}

.has-submenu.active .submenu {display: block;}
/*header.m-active {border-bottom: 1px solid rgba(99, 99, 99, 0.3);}*/
/* 关闭按钮样式 */
.close-menu {position: absolute;top: 15px;right: 15px;cursor: pointer;font-size: 24px;}

.slogan-dif {padding: 50px 0 30px; text-align: center;}

/* Certificates Slider Styles */
.certificates { background: #F5F5F5; margin-top: 5.21vw; padding-bottom: 5.21vw; }
.certificates .sig-title h1 { padding: 5.21vw 0 2.6vw; }
.certificates-slider { width: 90%; margin: 0 auto 40px; padding: 0 20px; overflow: hidden; }
.cert-container { width: 100%; overflow: hidden; position: relative; }
.cert-wrapper { display: flex; position: relative; }
.cert-content { display: flex; gap: 20px; padding: 20px 0; position: relative; left: 0; transition: left 0.5s ease; }
.cert-item { min-width: 240px; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: all 0.3s ease; flex-shrink: 0; }
.cert-item:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.cert-img { width: 100%; height: 200px; overflow: hidden; }
.cert-img img { width: 100%; height: 100%; object-fit: contain; }
.cert-text { padding: 15px; text-align: center; }
.cert-text h3 { font-size: 16px; color: #333; margin: 0; font-weight: 600; }
@media screen and (max-width: 768px) {
.certificates-slider { padding: 0 10px; }
.cert-img { height: 160px; }
.cert-text h3 { font-size: 14px; }
.cert-item { min-width: 100px; width: 180px; }
}

@media (max-width: 1300px) {
    header div.headmian {min-width: auto;}
    header div.headmian div.language {width: auto;min-width: auto;}
    header div.headmian div.language div.m {width: auto;}
    header div.headmian div.logo img {width: 150px;padding-left: 0;padding-right: 0;}
    p {line-height: 1.5;}
    .fubeilinghang {height: auto;}
    .fubeilinghang a {height: 35vw;max-height: 200px;}
    .our-value {width: 90%;margin: 0 auto;}
    .our-value-content {padding: 0;}
 }


/* 手机屏幕样式 */
@media (max-width: 1180px) {
    .keywords-content {flex-direction: column;}
    .keywords-content-pic {margin-right: 0;width: 100%;margin-bottom: 40px;}
    .keywords-content-text {width: 100%;}
    .keywords-content-text h3 {margin-bottom: 20px;text-align: center;}
    .about-content {height: auto;flex-wrap: wrap;width: 90%;margin: 0 auto 0;}
    .about-content-pic {width: 100%;height: auto;margin-bottom: 40px;}
    .about-content-text {width: 100%;padding: 0;order: 2;margin-bottom: 40px;}
    .about-content-text h3 {margin-bottom: 20px;text-align: center;}
    .contact div.m form dl {width: 100%;}
    .contact {width: 90%;min-width: auto;}
    .productcenter div.pnav {height: auto;border-radius: 16px;padding: 30px 30px 15px;justify-content: flex-start;border: 1px solid var(--fubeiRed-color);margin: 0 20px;}
    .productcenter div.pnav a {margin-bottom: 15px;height: auto;padding: 5px 20px;width: 100%;}
    .productcenter div.pnav a:hover {height: auto; padding: 5px 20px;}
    .productcenter div.pnav a.ahover {height: auto; padding: 5px 20px;}
    .productcenter h1 {width: 50%;}
    .productcenter div.m a span {width: 33%;}
    .productcenter div.pnav {width: auto; }
    .slogan-section, .zhizao {width: 90%;margin: 0 auto;}
    .zhizaobanner {height: 50vh;}
    .video-box {width: 80%;}
    .fubeijidi {width: auto;min-width: auto;}
    .productcenter h1 {width: 90%;padding:30px 0;}
    .history-content {display: none;}
    .m-history-content {display: block;}
    .productImg-box {display: none;}
    .productImg-box1 {display: block;}
    .productImg-box3 {display: block;}
    .productImg-box11 {display: block;}
    .productImg-box12 {display: block;}
    .productImg-box2 {display: block;}
    .zhizao {margin-top: 12vw;}
    .blogs-text-content {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5; /* 限制展示 3 行 */
      overflow: hidden;
      text-overflow: ellipsis;
    }

  .fubeblogs {
    min-width: auto;
  }
  
  .fubeblogs .m {
    min-width: auto;
    width: 90%;
  }
  
  .fubeblogs-item {
    width: 48%;
  }
  .indexbaopin {
    min-width: auto;
  }
  .indexbaopin div.m {
    min-width: auto;
  }
  .blogs-detail {
    margin-top: 12vw;
   }
   .m-history-content {
       height: auto;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   .m-history-content img {
       max-width: 80%;
   }
}
@media (max-width: 1024px) {
    
    /* 头部导航相关 */
    header {min-height: 60px;}
    .menu-toggle {display: flex;margin-left: 10px;}
    nav.active {height: 100vh;}
    .overlay.active {display: block;opacity: 1;}
    .navigation {display: none;}
    header div.headmian div.logo img {width: 50vw;max-width: 200px;}
    header div.headmian div.language div.m {width: auto;}
    header div.headmian {min-width: auto;padding-left: 0;padding-right: 0;min-height: 60px;}
    header div.headmian div.language {width: 70%;min-width: auto;}
    header div.headmian div.language div.m span {color: var(--fubeiRed-color);font-size: 22px;}
    header div.headmian div.language div.m i::before {color: var(--fubeiRed-color);}
    /* 底部 */
    footer div.banquan {flex-direction: column;}
    footer div.banquan div.l {width: 100%;justify-content: center;}
    footer div.banquan div.r {width: 100%;justify-content: center;margin: 30px 0;}
    footer div.footnav dl dd a {line-height: 2;}
    .slogan {height: 150px;margin-top: 60px;} 
    .slogan h1 {font-size: clamp(3rem, 4vw, 70px);}
    .sig-title h1 {padding: 10vw 0 2.6vw;}
    footer div.footnav {flex-wrap: nowrap;flex-direction: column;}
    footer div.footnav dl {width: 100%;overflow: hidden;}
    footer div.footnav dl dt {width: 100%;overflow: hidden;}
    footer div.footnav dl dd { width: 100%; overflow: hidden; display: flex; display: -webkit-flex; flex-direction: column;  justify-content: flex-start; align-items: flex-start; padding-bottom: 1.5rem; }
    footer div.footnav dl dd a {margin-right: 20px;} 
    .qualification-content {height: auto;flex-wrap: wrap;width: 90%;margin-left: auto;margin-right:auto;}
    .qualification-content .text-wrapper {width: 100%;margin-bottom: 50px;}
    .qualification-content .image-wrapper {width: 100%;}
    .qualification-content .text-wrapper h2 {padding: 20px;margin-top: 10px;text-align: center;}
    .qualification-content .text-wrapper {order: 2;}
    .qualification-content .image-wrappe {order: 1;}
    .productcenter div.m a i {width: 100%;}
    .productcenter div.m a span {width: 100%;padding: 30px;}
    .productcenter div.m a {margin-bottom: 10px; flex-direction: column;}
    .close-btn {font-size: 28px;}
    .modal-content {max-width: 68%;}
    .contactInfo-content {flex-direction: column; align-items: center; justify-content: center;gap: 30px;}
    .contactMessage {flex-direction: column;align-items: center;}
    .contactMessage .contact {box-sizing: border-box;}
    .contactMessage .rightForm {width: 100%;}
    .coorperation {flex-direction: column;align-items: center;}
    .coorperation .leftPic {width: 100%;}
    .contact div.m {margin-top: 0;}
    .coorperation .contactInfo {padding: 15vw 0 10vw;}
   
    .blogs-text-content {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3; /* 限制展示 3 行 */
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pagination ul {
      flex-direction: column;
    }
    .pagination ul li {
      width: 100%;
      margin-bottom: 10px;
    }
    .keywords-content-text .title h2 {
      width: 80%;
      margin: 20px auto;
    }
    .keywords-content-text .shuju dl {
      width: 30%;
    }
    .keywords-content-text .anniu a {
      margin: 30px 0;
    }
}
@media (max-width: 820px) {
  .lastest-blogs .blogs-content a {
    flex-direction: column;
  }
  .lastest-blogs .blogs-content .blogs-pic {
    width: 100%;
    margin-bottom: 50px;
  }
  .lastest-blogs .blogs-content .blogs-text {
    width: 100%;
    padding-left: 0;
  }
  .lastest-blogs .blogs-content .blogs-pic img {
    max-width: 100%;
  }
  .blogs-detail {
    margin-top: 15vw;
   }
}
   



@media (max-width: 768px) {
  .productImg-box:hover img {
    transform: none;
}
  .fubeblogs-item {
    width: 100%;
  }
  .our-value-content {
    flex-direction: column;
    align-items: center;
  }
  .our-value-content .our-value-item {
    width: 100%;
    margin-bottom: 20px;
  }
  .fubeblogs-btn a {
    width: auto;
    height: auto;
  }
  .indexbaopin div.swiper-button-next {
    width: 3.6vw !important;
    height: 3.6vw !important;
  }
  .indexbaopin div.swiper-button-prev {
    width: 3vw !important;
    height: 3vw !important;
  }
  .certificates .sig-title h1 {
    padding: 15vw 0 6vw !important;
  }
  .sig-title h1 {
    padding: 15vw 0 6vw !important;
  }
  .indexbaopin {
    margin-top: 15vw;
  }

  .swiper-container {
    margin-top: 6vw;
  }
  .fubeblogs-list {
    margin-top: 6vw;
  }
  .fubeblogs-btn {
    margin-top: 5vw;
  }
  .indexbaopin .swiper-slide {
    margin-bottom: 30px;
  }
  .contact h1 {
    margin: 50px 0 30px;
  }
  .contact div.m form div.an {
    margin-bottom: 15vw !important;
    margin-top: 5vw;
  }
  footer div.banquan div.l {
   display: block;
   text-align: center;
   font-size: clamp(1rem, 0.9vw, 18px);
  }
  .slogan h1 {font-size: clamp(2.5rem, 4vw, 70px);}
    .productcenter h1 {width: 90%; padding:30px 0;}
    .productcenter div.m a {width: 100%;margin-bottom: 10px; flex-direction: column;}
    .lastest-blogs .blogs-content .blogs-text h2 {font-size: 26px;}
    .blogs-detail-title h1 {font-size: 26px;}
    .blogs-detail {
      margin-top: 20vw;
     }
    .zhizao {
        margin-top: 22vw;
    }
      .m-history-content img {
       max-width: 100%;
   }
}
@media (max-width: 500px) {
.fubeijidi h1 {  font-size:clamp(2.0rem, 2.4vw, 50px); }
  .indexbaopin div.swiper-button-next {
    width: 6vw !important;
    height: 6vw !important;
    right: 7% !important;
  }
  .indexbaopin div.swiper-button-prev {
    width: 6vw !important;
    height: 6vw !important;
    left: 7% !important;
  }
  footer div.banquan div.r {
    flex-direction: column;
  }
  .productImg img {
    max-width: 45px;
  }
  .productImg-box span {
    margin: 2px;
  }
  .socialMedia {width: 100%;justify-content: center;margin-top: 10px;}
  .socialMedia, footer div.banquan div.r a:nth-child(1){
   padding-left: 0;
  }
  .contactMessage .leftText {padding: 0 30px;}
  .blogs-detail {
    margin-top: 25vw;
   }
}































/* 博客详情页样式 */
.blogs-detail-content {
  overflow: hidden;
}

.blogs-detail-content .image-wrapper {
  float: left;
  width: 33.33%;
  margin: 0 40px 10px 0;
  overflow: hidden;
  border-radius: 12px;
}

.blogs-detail-content .float-left {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  display: block;
}

.blogs-detail-content .image-wrapper:hover .float-left {
  transform: scale(1.05);
}

.blogs-detail-content p {
  margin-bottom: 15px;
  line-height: 1.6;
  text-align: justify;
}