@charset "utf-8";

/* 基础重置 */
*{font-size: 17px; list-style: none; margin:0; padding:0; font-family: "microsoft yahei",Arial,sans-serif; text-decoration: none; }

/* header 区域 */
.header { width: 100%; background-color: black; justify-content: center; display: flex; align-items: center; height: 5rem; font-size: 1.2rem;font-weight: bolder; }
.header-content { width: 95%; display: flex; flex-wrap: nowrap;; justify-content: space-between; color: lightgray; text-decoration: none; align-items: center;   }
.header-content a{text-decoration: none; color:lightgray;}

.ya { color: black; }

/* NAV 导航 */
.about { display: none; }
.nav { width: 100%; height: auto; font-weight: bold; display: flex; display: -webkit-flex; justify-content: center; flex-flow: nowrap; margin: 0 auto; }
.nav ul { width: 90%;display:flex;flex-wrap: nowrap; }
.nav li { width: 8.5rem;min-width: 1rem; height:4rem;min-height: 2rem; line-height: 4rem; text-align: center; }
.nav a { color: black; display: block; font-size: 1.25rem; text-decoration: none; color: black; width: 100%; text-align: center; }
.nav a:hover { background-color: darkblue; color: white;cursor: pointer;text-shadow: 0rem -6.3rem #171717;}
.logo { font-size: 2.5rem; display: block; font-weight: bold; color: darkblue; text-align: center; text-shadow: 0.125rem 0.125rem white;  }
.logo:hover {text-shadow: 65.18rem 0rem green;cursor: pointer;}
.language:hover {text-shadow: 5.5rem 4rem #DDFFC3;cursor: pointer;}
/* 面包屑导航 */
.breadcrumb-nav { width: 95%; margin: 0 auto; padding: 0.625rem 0; background-color: #f8f9fa; margin-bottom: 0.25rem; }
.breadcrumb { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 0.875rem; }
.breadcrumb li { display: inline; color: #6c757d; }
.breadcrumb li:not(:last-child)::after { content: " > "; margin: 0 0.5rem; color: #6c757d; }
.breadcrumb a { text-decoration: none; color: #007bff; transition: color 0.3s ease; }
.breadcrumb a:hover { color: #0056b3; text-decoration: underline; }
.breadcrumb .active { color: #495057; font-weight: 500; background-color: #f8f9fa; }

/* 滑动轮播 */
.image-slider-container { position: relative; width: 100%; max-width: 100%; height: 21.875rem; margin: 0.3125rem auto; overflow: hidden; touch-action: pan-y; }
.image-slider { display: flex; transition: transform 0.3s ease; height: 21.875rem; }
.slide { min-width: 100%; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slider-indicators { position: absolute; bottom: 0.625rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; }
.indicator { width: 3.75rem; height: 0.3125rem; background-color: rgba(255, 255, 255, 0.5); cursor: pointer; }
.indicator.active { background-color: white; }

/* 轮播 */
* { box-sizing: border-box; }
body{font-size:16px;}
body { font-family: Verdana, sans-serif; }
.mySlides { display: none; }
/* banner：窗口高度固定 21.875rem(350px)，超出部分裁掉，由 js 在窗口内上下平移展示 */
.slideshow-container { position: relative; width: 100%; max-width: 100%; height: 21.875rem; margin: 0.3125rem auto; overflow: hidden; background-color: #f5f5f5; }
/* 图片等比铺满宽度（不变形）；宽度撑满后比窗口高时，js 会加上 .yz-pan 缓慢上下走动 */
.mySlides img { display: block; width: 100%; height: auto; }
.mySlides img.yz-pan { animation-name: yzPan; animation-timing-function: linear; animation-fill-mode: both; }
@keyframes yzPan { from { transform: translateY(0); } to { transform: translateY(var(--yz-pan, 0px)); } }
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -1.375rem; padding: 1rem; color: white; font-weight: bold; font-size: 1.125rem; transition: 0.6s ease; border-radius: 0 0.1875rem 0.1875rem 0; }
.next { right: 0; border-radius: 0.1875rem 0 0 0.1875rem; }
.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); }
.text { color: #f2f2f2; font-size: 0.9375rem; padding: 0.5rem 0.75rem; position: absolute; bottom: 0.5rem; width: 100%; text-align: center; }
.numbertext { color: #f2f2f2; font-size: 0.75rem; padding: 0.5rem 0.75rem; position: absolute; top: 0; }
.dot { cursor: pointer; height: 0.8125rem; width: 0.8125rem; margin: 0 0.125rem; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }
.active, .dot:hover { background-color: #717171; }
.fade { -webkit-animation-name: fade; -webkit-animation-duration: 2s; animation-name: fade; animation-duration: 2s; }
@-webkit-keyframes fade { from { opacity: .4; } to { opacity: 1; } }
@keyframes fade { from { opacity: .4; } to { opacity: 1; } }


/* banner */
.banner { width: 100%; height: auto; display: flex; color: darkblue; justify-content: center; margin: 0.3125rem auto; }
.banner img { width: 100%; height: auto; overflow: hidden; margin: 0 auto; }

/* about us */
.aboutus { display: flex; width: 95.2%; height: auto; flex-wrap: wrap; justify-content: space-between; align-content: center; margin: 0.3125rem auto; border-bottom: 0.375rem solid darkblue; background-color: #D9D9DC; position: relative; }
.aboutusleft { width: 25%; }
.aboutus img { width: 100%; height: auto; }
.profile { width: 71%; padding: 1%; height: auto; }
.jieshao { width: 15%; min-width: 10rem; height: 3.125rem; font-size: 1.225rem; font-weight: bold; background-color: darkblue; color: white; text-align: center; line-height: 3.125rem; margin-top: 1.25rem; margin-bottom: 1.25rem; }
.productlist{font-weight: bold;}
.profile p{font-size: 1.1rem; line-height: 0.8rem; line-height: 1.7;}

.aboutusbackgroundimg img { width: 57%; height: auto; opacity: 0.4; position: absolute; bottom: 2.8125rem; }
.full-text { display: block; }
.mobile-text { display: none; }
.more-content { display: block; }
.read-more-btn { display: none; }

/* danye zhanshi */
.zhanshi { display: flex; width: 95%; height: auto; flex-wrap: wrap; justify-content: space-between; align-content: center; margin: 3.75rem auto; border-bottom: 0.375rem solid darkblue; background-color: #D9D9DC; }
.timu { padding-bottom: 0.9375rem; padding: 0.5rem; padding-top: 0.5rem; }
.zhanshi-2 { display: flex; width: 95%; height: auto; flex-wrap: wrap; justify-content: flex-start; }
.zhanshi-pic img { display: 15%; width: 25rem; height: auto; }
.zhanshi-jieshao { display: 45%; line-height: 1.875rem; font-size: 1.125rem; font-weight: bolder; padding: 0.625rem; }

/* diamater */
.diamater { display: flex; width: 95%; height: auto; margin: 0 auto; border-bottom: 0.375rem solid gray; background-color: #D9D9DC; }
.diamater-box { width: 100%; height: auto; display: flex; flex-wrap: wrap; justify-content: flex-start; border: 0.0625rem solid gray; }
.canshu { border: 0.0625rem solid gray; width: 30.3%; height: auto; padding: 0.5rem; }

/* products */
.wf2075 img { width: 48%; padding-bottom: 0.9375rem; }
.wf2075 { width: 95%; display: flex; flex-wrap: wrap; justify-content: space-between; }
/* 产品展示：每行 5 个，间距加大，卡片式更精致 */
.product { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem; width: 96%; height: auto; margin: 2rem auto; padding: 1.5rem; box-sizing: border-box; background: url("../images/products.png") no-repeat bottom; border-radius: 1.15rem; }
/* 品牌页专用：横竖分组排列。横竖切换时换行（每个类型单独一个子网格，不混排）。其他页面 .product 走原 5 列单网格。 */
.product.product-brand { display: flex; flex-direction: column; gap: 1.75rem; }
.product-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem; }
.product a, .product figure { width: auto; height: auto; margin: 0; padding: 0.65rem; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; overflow: hidden; background: #fff; border: 0.0625rem solid #eaeaea; border-radius: 0.6rem; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.product a:hover, .product figure:hover { box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.12); transform: translateY(-0.25rem); }
.product span, .product figcaption { display: block; text-align: center; margin: 0.5rem auto 0; color: #333; font-size: 0.9rem; line-height: 1.3; word-break: break-word; }
.product img { width: 100%; height: 12rem; object-fit: contain; display: block; overflow: hidden; transition: transform 0.4s ease; }
.product a:hover img, .product figure:hover img { transform: scale(1.06); }
.product video { width: 100%; height: 12rem; object-fit: contain; background: #000; display: block; }

/* 点击图片放大查看（lightbox） */
.yz-lightbox { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 1.5rem; box-sizing: border-box; }
.yz-lightbox.show { display: flex; }
.yz-lightbox img { max-width: 92%; max-height: 88%; width: auto; height: auto; object-fit: contain; background: #fff; border-radius: 0.5rem; box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.5); }
.yz-lightbox .yz-lightbox-close { position: absolute; top: 1rem; right: 1.5rem; color: #fff; font-size: 2.5rem; line-height: 1; font-weight: bold; cursor: pointer; user-select: none; }

/* news - 电脑端走马灯，手机端横向滑动 */
.news { width: 100%; margin: 1.5rem auto; background-color:#9AA3B3; color: #948F8F; overflow: hidden; }
.news-track { display: flex; flex-wrap: nowrap; width: max-content; animation: news-marquee 30s linear infinite; }
.news:hover .news-track { animation-play-state: paused; }
@keyframes news-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.newsbox { flex: 0 0 auto; width: 24vw; max-width: 480px; height: auto; background-color:#042654; margin: 0.9rem 0.5rem; align-content: center; justify-content: cente; padding: 2.3rem; }
.newsbox img{width: 60%; max-width:98%;}
.newsbox img:hover {cursor: pointer; transform: scale(1.44); transition: 2s; }

/* 手机端：关闭走马灯动画，改为可触摸横向滑动 */
@media only screen and (max-width: 50rem) {
  .news { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  .news-track { animation: none; width: max-content; }
  .newsbox { scroll-snap-align: start; width: 80vw; max-width: 80vw; margin: 0.5rem 0.3rem; padding: 0.3125rem; }
  .newsbox img { width: 99%; max-width: 99%; }
}

/* Under Producing - 最新产品预览区（由 Go 注入内容） */
.under-producing { width: 100%; margin: 1.5rem auto; padding: 1.5rem; background-color: #042654; color: #fff; box-sizing: border-box; }
.under-producing h2 { margin: 0 0 0.3rem; font-size: 1.4rem; color: #fff; }
.under-producing .up-desc { margin: 0 0 1rem; color: #ccc; font-size: 0.95rem; }
.under-producing .up-grid { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: flex-start; }
.under-producing .up-item { width: calc(16.666% - 0.833rem); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0.375rem; background: #fff; }
.under-producing .up-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.under-producing .up-item:hover img { transform: scale(1.08); }
.under-producing .up-btn { display: inline-block; margin-top: 1.2rem; padding: 0.6rem 1.5rem; background-color: #9AA3B3; color: #042654; text-decoration: none; border-radius: 0.25rem; font-weight: 600; transition: background-color 0.3s; }
.under-producing .up-btn:hover { background-color: #fff; }

@media only screen and (max-width: 50rem) {
  .under-producing .up-item { width: calc(50% - 0.5rem); }
}


/* ANLI */
.anlibigbox { width: 100%; background-color:#3D414C; margin-top: 2.5rem; }
.anli { display: flex; width: 96.2%; height: auto; justify-content: space-between; flex-wrap: wrap; margin: 0.125rem auto; padding: 0.625rem 0.625rem; }
.anli a { width: 16%; height: auto; margin-top: 0.625rem; margin-bottom: 0.3125rem; overflow: hidden; }
.anli img { width: 100%; height: auto; margin: 0.3125rem 0 0 0; }
.anli span { display: block; color: white; text-align: center; margin: 0.0625rem auto; }
.anli a span:hover { background-color: black; height: 1.5rem; font-size: 1.0625rem; }
.anli img:hover { transform: scale(1.05); }

/* brand */
.brand profiletxt { width: 100%; padding: 0.5rem; height: auto; }
.brand jieshao { width: 6.25rem; height: 0.875rem; font-size: 0.8125rem; font-weight: bold; background-color: darkblue; color: white; text-align: center; line-height: 0.875rem; margin-top: 0.375rem; margin-bottom: 0.625rem; }
.brand aboutus p { width: 100%; height: auto; line-height: 1rem; }
.brand { display: flex; width: 95%; height: auto; justify-content: space-between; flex-wrap: wrap; margin: 0.125rem auto; padding: 0.375rem 1.25rem; background-color: lightgray; }
.brand a { display: block; width: 5%; height: auto; overflow: hidden; margin: 0.3125rem 0 0 0; justify-content: center; align-items: center; }
.brand img { width: 100%; display: block; padding-left: 0.3125rem; padding-right: 0.3125rem; }
.brand span { display: block; color: white; text-align: center; margin: 0.0625rem auto; }
.brand img:hover { transform: scale(1.5); transition: 1s; }
.brand-logos{ display: flex; width: 95%; height: auto; justify-content: space-between; flex-wrap: wrap; margin: 0.125rem auto; padding: 0.375rem 1.25rem; background-color: lightgray;}

/* factory */
.factorypictures { display: flex; margin: 0 auto; margin-top: 1.875rem; width: 100%; justify-content: space-between; flex-wrap: wrap; background-color: #9EA1A6}
.factorypictures img { width: 49%; height: auto; margin-top: 0.7rem;}
.factorypictures img:hover { cursor: pointer;transition: 1s; transform: translate(2px, 5px); }


/* footer */
.bottom { width: 100%; height: auto; background-color: black; margin: 0 auto; }
.footerbox { width: 95%; display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0.0625rem auto; padding: 3.125rem 0; font-size: 1rem; }
.p { width: auto; height: auto; color: #767676; }
.p a { width: auto; height: auto; color: #767676; }

/* ==================== 媒体查询 ==================== */

/* 520px 及以下 */
@media only screen and (max-width : 42rem ){
  body{font-size:11px;}
 *{-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;} 
  .p-lang a{font-size: 0.3rem; }
  .rexian { display:none;}
  .header{font-size: 0.86rem;display: flex; flex-wrap: nowrap;; justify-content:space-around;}
  .nav {-webkit-font-smoothing: antialiased; }
  .nav li{height:2.5rem;line-height:2.6rem; }
  .nav a{font-size: 1.0rem;}
  .nav .nav-cn a{font-size: 0.83rem;}
  .about { display: block; }

  .aboutusnav { display: none; }
  .news {width: 99%;}
  .full-text{font-size:0.4rem;}
  .header{ position: sticky; height: 1.9rem; position: sticky; position: -webkit-sticky; top: 0; z-index: 1001; }
  nav{  position: sticky; position: -webkit-sticky; top: 1.6rem; z-index: 1000; background-color: rgba(255, 255, 255, 0.6); border-bottom: 0.0625rem solid lightgray; backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); }
  .dot { cursor: pointer; height: 0.5rem; width: 0.8125rem; }
	
	.profile p{font-size: 0.7rem; line-height: 0.8rem; line-height: 1.4;}
	.productlist{font-weight: bold;}
  .anli { width: 100%;}
  .factorypictures { width: 99%; }
  .product { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem; }
  .product-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .product a, .product figure { width: auto; }
  .product img, .product video { height: 10rem; }
}

  

/* 748px 及以下 */
@media only screen and (max-width:50rem){
  body{font-size:14px;}
  .logo { display: none; }
  .shouye { display: none; }
  .breadcrumb-nav { display: none; }
  .ya { color: #159706; }
  
  .aboutus { margin: 0.625rem auto; }
  .profile { padding: 0.3125rem; }
  .aboutusbackgroundimg { display: none; }
  .aboutusleft, .profile { width: 100%; height: auto; }
  .product img, .product video { margin: 0; width: 100%; height: 10.5rem; }
	
	
  .anli a { width: 48%; height: auto; }
  .anli img { width: 100%; height: auto; }
  .factorypicbox { padding: 0.3125rem; }
  .bottom { font-size: 0.5rem; }
  .powerby { font-size: 0.4375rem; }
  .wechat { margin-top: 0.9375rem; }
  .banner { display: none; }
  .aboutus { margin: 0.625rem auto; }
  .profile { padding: 0.625rem; }
  .jieshao { width: 10rem; height: 1.875rem; font-size: 0.9375rem; line-height: 1.875rem; margin-top: 0.625rem; margin-bottom: 0.625rem; }
  .full-text { display: none; }
  .mobile-text { display: block; }
  .more-content { display: none; }
  .read-more-btn { display: inline-block; background: none; border: none; color: #0066cc; cursor: pointer; font-weight: bold; padding: 0.3125rem 0; text-decoration: none; }
  .read-more-btn:hover { color: #004499; }
  .anlibigbox { margin-top: 0.9375rem; }
  .anli a { width: 49%; }
  .anli img { width: 100%; height: auto; }
  .anli video { width: 50%; height: 14.375rem; }
  .brand a { width: 19%; }
  
  .footerbox { font-size: 0.9rem; }
  .canshu { width: 40%; text-overflow: ellipsis; overflow: hidden; }
}

/* 956px 及以下 */
@media only screen and (max-width: 60rem) {
  .room, .shouye { display: none; }
  
}

/* 平板：product 每行 3 个 */
@media only screen and (min-width: 42.0625rem) and (max-width: 60rem) {
  .product { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .product-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}
.p-lang {
}