/* 通用样式 */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:sans-serif;line-height:1.6;}



/* 通栏背景色 */
.gray { width: 100%;  background: #f4f4f8;   padding: 60px 20px; }
.blue { width: 100%;  background: #DDE6EB;   padding: 60px 20px; }


.container{max-width:1300px;margin:0 auto;padding: 20px 20px; }
.section{max-width:1300px;margin:40px auto;padding:20px 0;}
@media (max-width: 768px){   .section{margin:0 auto;padding:0;} }


h1 { font-size: 2em;  margin: 30px 0 20px 0;  text-align: center; }
h2 { font-size: 1.9em; color: #006699; margin: 30px 0 20px 0; text-align: center; }
h3 { font-size: 1.5em; margin: 5px 0 5px 0; text-align: center; }


.link { color: blue; text-decoration: underline; text-underline-offset: 4px; transition: all 0.2s ease; }
.link:hover { color: darkblue; }
.link:active { color: black; }



.text{padding:40px 0;}
.text p{margin-bottom:15px;}
.text blockquote{font-style:italic;padding:15px 20px;background:#f9f9f9;border-left:4px solid #0066cc;margin:20px 0;}


/* 首页大图 */
.hero-wrapper { position: relative; z-index: 1; display: flex; justify-content: center; }
.hero-image { position: relative; width: 100%; height: 70vh; overflow: hidden; }
.hero-img-tag { width: 100%; height: 100%; object-fit: cover; }
.hero-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; background-color: rgba(0, 0, 0, 0.5); padding: 20px; width: 80%; box-sizing: border-box; }

@media (max-width: 768px) {
  .hero-image { height: 300px; }
  .hero-content { padding: 15px; width: 90%; }
  .hero-content h2 { font-size: 1.5rem; }
  .hero-content p { font-size: 0.9rem; }
}








/* 导航栏样式 */
nav{background-color:#2b3440;width:100%;}
.nav-container{max-width:1300px;width:100%;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;padding:10px 14px;position:relative;z-index:100;font-family:sans-serif;gap:12px;box-sizing:border-box;}
.logo{display:flex;align-items:center;color:#999;font-weight:bold;font-size:1.1rem;margin-left:0;padding-left:0;}
.logo img{height:40px;width:auto;margin:0 8px 0 0;display:block;float:left;}
.hamburger{display:none;background:none;border:none;font-size:28px;cursor:pointer;padding:5px;color:#fff;transition:transform 0.3s ease;user-select:none;}
.hamburger.active::before{content:"×";font-size:32px;line-height:1;display:inline-block;}
.hamburger.active{font-size:0;}
.nav-menu{ display:flex;list-style:none;gap:30px;margin:0;padding:0;flex:1 1 auto;justify-content:center;}
.nav-menu>li{position:relative;}
.nav-menu>li>a{text-decoration:none;color:#ccc;font-weight:bold;padding:10px 15px;display:block;white-space:nowrap;position:relative;}
.nav-menu li ul{position:absolute;left:50%;top:100%;transform:translate(-50%,0);background:#fff;display:grid;list-style:none;min-width:480px;box-shadow:0 3px 10px rgba(0,0,0,0.1);z-index:100;color:#333;margin:0;padding:10px;grid-template-columns:repeat(3,1fr);gap:8px;opacity:0;visibility:hidden;transition:all 0.3s ease;}
.nav-menu li.active>ul{opacity:1;visibility:visible;transform:translate(-50%,10px);}
.nav-menu li ul li a{padding:10px;display:block;color:#333;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nav-menu li ul li a:hover{background:#f5f5f5;}


.lang-switcher{position:relative;cursor:pointer;color:#666;font-size:18px;user-select:none;}
.lang-switcher .globe-icon{font-size:20px;}
.lang-switcher .lang-menu{position:absolute;top:100%;right:0;list-style:none;padding:6px 0;margin:6px 0 0 0;display:none;background:none;border:none;box-shadow:none;z-index:999;}
.lang-switcher .lang-menu li a{display:block;padding:6px 12px;color:#444;text-decoration:none;font-size:14px;}
.lang-switcher .lang-menu li a:hover{background:#f0f0f0;}
.lang-switcher .lang-menu.show{display:block;}

.lang-modal{position:fixed;top:80px;right:40px;background:#fff;padding:30px 40px;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,0.2);z-index:9999;display:block;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity 0.4s ease,transform 0.4s ease;}
.lang-modal.show{opacity:1;transform:translateY(0);pointer-events:auto;}

.lang-modal .lang-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.lang-modal .lang-options button{padding:12px 10px;border:none;background:#f6f6f6;color:#222;border-radius:6px;cursor:pointer;font-size:15px;transition:all 0.2s ease;}
.lang-modal .lang-options button:hover{background:#e2e2e2;}
.lang-modal .close-modal{position:absolute;top:10px;right:12px;font-size:20px;background:none;border:none;color:#888;cursor:pointer;}
.lang-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.25);z-index:9998;display:block;opacity:0;pointer-events:none;transition:opacity 0.4s ease;}
.lang-overlay.show{opacity:1;pointer-events:auto;}




@media (max-width:768px){
  nav{background:#f4f4f4;}
  .nav-container{width:100%;padding:10px 5%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;}
  .logo{padding-left:0;margin-right:auto;}
  .hamburger{display:block;color:#363;font-size:24px;background:none;border:none;cursor:pointer;order:1;}
  .nav-menu{position:fixed;top:60px;left:0;right:0;background:#fff;flex-direction:column;gap:0;overflow:hidden;max-height:0;transition:max-height 1.2s ease;width:100%;z-index:999;}
  .nav-menu.show{max-height:80vh;overflow-y:auto;}
  .nav-menu>li{border-top:1px solid #ddd;width:100%;position:relative;}
  .nav-menu>li>a{padding:10px 20px;color:#333;display:flex;justify-content:space-between;align-items:center;text-decoration:none;}
  .nav-menu li .toggle-icon{font-size:18px;margin-left:10px;}
  .nav-menu li ul{display:grid;gap:5px;position:relative;left:50%;transform:translateX(-50%);background:#f9f9f9;padding:5px 10px;max-height:0;overflow:hidden;transition:max-height 0.9s ease;box-shadow:none;width:max-content;min-width:220px;text-align:left;z-index:999;}
  .nav-menu li ul.two-columns{grid-template-columns:repeat(2,minmax(140px,1fr));}

  .nav-menu li ul.three-columns{grid-template-columns:repeat(3,minmax(80px,1fr));}

  .nav-menu li ul li{padding:2px 0;}
  .nav-menu li ul li a{display:block;color:#555;padding:3px 22px;text-decoration:none;white-space:nowrap;font-size:15px;}
  .nav-menu li ul li a:hover{background:#eee;}
  .lang-switcher{display:none;}
  .mobile-lang{padding:10px 10px 20px 30px;font-size:18px;text-align:left;color:#333;cursor:pointer;border-top:1px solid #ddd;user-select:none;background:#fff;}
  .mobile-lang:hover{background:#f0f0f0;}
}



















































/* 底部样式 */

.footer-menu { background-color: #eaf1f7; width: 100%; padding: 30px 15px; font-family: sans-serif; font-size: 14px; box-sizing: border-box; }
.footer-container { max-width: 1300px; margin: 0 auto; display: flex; flex-wrap: nowrap; justify-content: space-between; }
.footer-menu .menu-block { width: 33.3333%; text-align: left; padding: 0 15px; box-sizing: border-box; }
.footer-menu .menu-block h4 { font-size: 16px; margin-bottom: 10px; }
.footer-menu .menu-block ul { list-style: none; padding: 0; margin: 0; }
.footer-menu .menu-block ul li { margin-bottom: 6px; }
.footer-menu .menu-block ul li a { text-decoration: none; color: #333; }
.footer-menu .menu-block ul li a:hover { text-decoration: underline; }

/* 响应式：在小屏幕下每行两列 */
@media (max-width: 767px) {
  .footer-container { flex-wrap: wrap; justify-content: center; }
  .footer-menu .menu-block { width: 50%; max-width: 100%; padding: 10px; margin-bottom: 20px; box-sizing: border-box; text-align: left; }
}










footer{width:1200px;margin:0 auto;padding:20px;color:#e660f1;text-align:center;}
@media (max-width: 768px) {
  footer {     width: 100%;      padding: 20px 5%;    }
}



/* 业务板块一行三列 */

.catalog {max-width: 1200px; margin: 40px auto; display: flex; gap: 30px; justify-content: space-between; flex-wrap: wrap;}

.project {background-color: #fff; box-shadow: 0 5px 12px rgba(0,0,0,0.08); overflow: hidden; flex: 1; min-width: 280px; max-width: 100%; display: flex; flex-direction: column; text-align: left; transition: transform 0.3s ease, box-shadow 0.3s ease;}

.project:hover {transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.15);}

.project img {width: 100%; height: auto; display: block;}

.project h3 {font-size: 18px; margin: 16px 12px 8px; color: #222;}

.project p {font-size: 14px; margin: 0 12px 16px; line-height: 1.6; color: #666;}

@media (max-width: 768px) {.catalog {flex-direction: column; gap: 20px; padding: 0 16px;}}









/* 油管视频 */
.responsive-video { width: 100%; max-width: 600px; aspect-ratio: 16 / 9; margin: 30px auto; overflow: hidden; position: relative; }

.responsive-video iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 768px) { .responsive-video { max-width: 100%; margin: 20px auto; } }


/* FAQ 问答 */

.faq {max-width: 800px; margin: auto;  padding-top: 5vh;  padding-bottom: 5vh;}
.faq-item {background: #fff; border-radius: 10px; margin-bottom: 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); overflow: hidden; transition: box-shadow 0.3s;}

.faq-question {padding: 16px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; background: #f0f0f0; transition: background-color 0.3s;}
.faq-question:hover {background: #e0e0e0;}
.faq-item.active .faq-question {background: #d0d0d0;}
.icon::before {content: '+'; font-weight: bold; transition: transform 0.3s;}
.faq-item.active .icon::before {content: '−';}
.faq-answer {max-height: 0; overflow: hidden; background: #f9f9f9; font-size: 1rem; color: #006400; line-height: 2; padding: 0 20px; transition: max-height 1.5s ease, padding 0.5s ease;}
.faq-item.active .faq-answer {padding: 12px 20px 16px; max-height: 700px;}


/* 新闻博客 */

.blog-section {max-width: 1300px; margin: 60px auto; display: flex; gap: 40px; flex-wrap: wrap;}
.blog-item {display: flex; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.08); overflow: hidden; flex: 1 1 48%; min-width: 300px;}
.blog-item img {width: 200px; height: auto; object-fit: cover; display: block;}
.blog-content {padding: 0 10px 5px 30px;  display: flex; flex-direction: column; justify-content: center;}
.blog-content h3 {font-size: 18px; margin: 0 0 10px; color: #222;text-align: left;}
.blog-content p {font-size: 14px; color: #555; line-height: 1.6; margin: 0;}
@media (max-width: 768px) {.blog-section {flex-direction: column; gap: 20px;} .blog-item {flex-direction: column;} .blog-item img {width: 100%; height: auto;}}




.blog {font-family: Arial, sans-serif; max-width: 1300px; margin: 0 auto; padding: 20px 20px; line-height: 2; color: #333; background-color: #fff; box-sizing: border-box;}


.blog .post-info {   margin: 20px 0;  padding-top: 10px;  font-size: 0.9em;
  color: #666;  display: flex;  gap: 20px;justify-content: left; }


.blog h1 {  color: #110099;}
.blog h2 {  color: #114488;  text-align: left;}

.blog img {width: 100%; max-width: 300px; display: block; margin: 20px auto;}
.blog .highlight-link {font-weight: bold; color: #cc0000; text-decoration: none;}
.blog .highlight-link:hover {text-decoration: underline;}

.blog .related-articles {margin-top: 40px; padding: 20px; background-color: #f9f9f9; border-left: 5px solid #114488;}
.blog .related-articles ul {list-style-type: disc; padding-left: 20px;}
.blog .related-articles a {text-decoration: none; color: #114488;}
.blog .related-articles a:hover {text-decoration: underline;}

/* 移动端适配 */
@media (max-width: 768px) {
  .blog { padding: 20px 20px; }  /* 减小左右内边距 */
  .blog .post-info { flex-direction: row; font-size: 0.3em; gap: 1px; }  /* 保持横排、字体缩小、项目间距 */
  .blog img { max-width: 100%; }  /* 图片最大宽度100% */
}






/* 左图右文排列 */
.row{display:flex;align-items:center;justify-content:space-between;margin-bottom:0px;gap:35px;}
.image img{width:100%;max-width:600px;height:auto;}
.text{flex:1;}
.text h2{margin:0 0 8px;font-size:30px;}
.text p{margin:0;font-size:16px;line-height:2.2;color:#333;}
ul li { line-height: 1.8; }

@media (max-width: 768px) {
  .row { flex-direction: column; align-items: flex-start; padding-left: 16px; padding-right: 16px;margin-bottom: 35px; }
  .image, .image img { order: 0; max-width: 100%; }
  .text { order: 1; }
}





/* 虚线 */
.dashed-line { width: 100%; border-top: 1px dashed #3399ff; margin: 10px 0; }

/* 相关产品一行四列 */
.related-products .product-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 20px; }
.related-products .product-item { flex: 1 1 calc(22% - 20px); min-width: 200px; max-width: 250px; text-align: center; text-decoration: none; color: #333; }
.related-products .product-item img { width: 100%; height: auto; margin-bottom: 8px; }
.related-products .product-item p { font-size: 1rem; margin: 0; }

@media (max-width: 1024px) {  .related-products .product-item { flex: 1 1 calc(45% - 20px); max-width: none; }
}
@media (max-width: 600px) {  .related-products .product-item { flex: 1 1 calc(50% - 20px); min-width: auto; max-width: none; }
}

/* 装箱资料 */
ul{padding-left:20px;margin:0;}
li{margin-bottom:6px;line-height:1.4;}
.packing-table{width:100%;margin:20px 0;border-collapse:collapse;background:#fff;}
.packing-table th,.packing-table td{border:1px solid #ddd;padding:12px;text-align:left;}
.packing-table th{background:#eee;font-weight:600;}
.packing-table thead{display:none;}
.packing-table tr{display:block;margin-bottom:15px;border:1px solid #ddd;}
.packing-table td{display:flex;padding:8px 10px;border:none;border-bottom:1px solid #eee;}
.packing-table td:before{content:attr(data-label);font-weight:600;width:40%;display:inline-block;}
.image-row{display:flex;gap:20px;margin-top:20px;justify-content:center;flex-wrap:wrap;}
.image-row img{width:30%;min-width:280px;border-radius:8px;}

@media(min-width:769px){
.packing-table{width:80%;margin:20px auto;}
.packing-table thead{display:table-header-group;}
.packing-table tr{display:table-row;}
.packing-table td{display:table-cell;}
.packing-table td:before{display:none;}
}

/* 一行三张图 */
.image-container { width: 100%; max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }

.image-container img { width: 320px; height: auto; }

@media (max-width: 768px) {
  .image-container { flex-direction: column; align-items: center; gap: 20px; padding: 0 16px; }
  .image-container img { width: 100%; max-width: 360px; }
}




/* 联系表单一行两列 */

.form { max-width: 1200px; margin: 0 auto; padding: 20px; background: #fff; font-family: Arial; }


.contact-box { margin-top: 30px; }

.contact-box-msn { display: flex; flex-wrap: wrap; gap: 5%; }

.contact-box-left, .contact-box-right { box-sizing: border-box; }

.contact-box-left img { max-width: 100%; height: auto; }

.contact-box-left span { display: block; font-size: 16px; line-height: 28px; color: #222; margin-bottom: 10px; }

.contact-box-right { width: 35%; padding: 2%; border-left: 1px solid #f99005; }

.contact-box-left { width: 60%; }

form .row { display: flex; gap: 20px; margin-bottom: 15px; }

form .field { flex: 1; display: flex; flex-direction: column; }

form .field label { font-size: 14px; margin-bottom: 5px; }

form .field input, form .field textarea { border: none; border-bottom: 0.5px solid #666; padding: 6px; font-size: 14px; background: transparent; font-family: Arial, sans-serif; }

form .field textarea { resize: vertical; }

.sub-gestbook1 { padding: 10px 25px; background: #026dc0; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 15px; transition: background 0.3s; }

.sub-gestbook1:hover { background: #014c8c; }



/* 响应式 */
@media screen and (max-width: 768px) {
  .contact-box-msn { flex-direction: column; }
  .contact-box-left, .contact-box-right { width: 100%; }
  form .row { flex-direction: column; }
  form .field { width: 100%; }
  form .field input, form .field textarea { width: 100%; }
}







/* 产品目录 */
.sample {max-width:1450px; margin:0 auto; padding:20px 20px;}
.sample-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:30px;}
.sample-item {background:#fff; box-shadow:0 4px 12px rgba(0,0,0,0.08); overflow:hidden; display:flex; flex-direction:column; align-items:center; transition:transform 0.3s ease;}
.sample-item img {width:100%; height:auto; object-fit:cover; transition:transform 0.5s ease; cursor:pointer;}
.sample-item:hover img {transform:scale(1.1) translateY(-8px);}
.sample-info {padding:10px 5px; width:100%;}
.sample-info h3 {font-size:16px; margin:5px 0; color:#222; text-align:center;}
.sample-info p {font-size:13px; color:#555; margin:0; text-align:left; padding-left:10px;}
@media (max-width:768px) {
  .sample {padding:0 10px;}
  .sample-grid {grid-template-columns:repeat(2,1fr); gap:15px;}
}


/* 弹出查看大图 */
#lightbox-overlay {display:none; position:fixed; z-index:9999; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.85); justify-content:center; align-items:center; cursor:pointer; padding:10px; box-sizing:border-box;}
#lightbox-img-container img {max-width:90vw; max-height:90vh; box-shadow:0 0 20px #000; border-radius:6px; cursor:pointer; object-fit:contain; opacity:0; transform:scale(0.95); transition:opacity 0.3s ease, transform 0.3s ease;}
#lightbox-img-container img.show {opacity:1; transform:scale(1);}
#lightbox-close {position:absolute; top:32px; right:450px; color:#fff; font-size:28px; cursor:pointer; font-weight:bold; background:rgba(0,0,0,0.3); padding:5px 12px; border-radius:4px; user-select:none; z-index:10000; transition:background-color 0.3s; display:none;}
#lightbox-close:hover {background:rgba(255,255,255,0.2);}

/* 通用箭头样式 */
.lightbox-arrow {position:absolute; top:50%; transform:translateY(-50%); font-size:48px; color:#fff; background:rgba(0,0,0,0.15); padding:8px 16px; border-radius:6px; cursor:pointer; user-select:none; z-index:10000; opacity:0.5; transition:opacity 0.3s, background 0.3s;}
.lightbox-arrow:hover {background:rgba(255,255,255,0.2); opacity:1;}
#lightbox-prev {left:450px;}
#lightbox-next {right:450px;}

/* 移动端优化 */
@media (max-width:768px) {
  #lightbox-close {top:148px; right:22px; font-size:24px; padding:4px 8px;}
  #lightbox-img-container img {max-width:100vw; max-height:80vh;}
  .lightbox-arrow {top:auto; bottom:120px; font-size:40px; padding:6px 12px; background:rgba(0,0,0,0.3);}
  #lightbox-prev {left:20%;}
  #lightbox-next {right:20%;}
}







/* 目录分页按钮 */

.page {text-align: center; margin: 30px 0;}
.page-btn {margin: 0 5px; padding: 6px 16px; border: none; background-color: #eee; color: #333; cursor: pointer; border-radius: 4px; font-weight: bold;}
.page-btn.active {background-color: #bbb; color: white;}