* {margin: 0;padding: 0;box-sizing: border-box;}
html, body {width: 100%;height: 100%;font-family: Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;}
h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;} 
img{border:0;} 
a{text-decoration:none;color:#222;noline:-webkit-tap-highlight-color:rgba(0,0,0,0);transition:all 0.2s linear;-webkit-transition:all 0.2s linear;}
a:hover{text-decoration:underline;color:#0d5aac;}
a:focus{outline:none;-moz-outline:none;}
*:hover{transition:all 0.2s linear;-webkit-transition:all 0.2s linear;}
ul, li, dl{list-style-type:none;margin:0px;padding:0px;}
.fl{float:left;}.fr{float:right;}.cl{clear:both;}
.clearfix{overflow:hidden;_zoom:1;}
.clearfix:after{content:'';display:block;clear:both;height:0;visibility:hidden;}
.clearfix{*zoom:1;}

.wrap {width: 100%;max-width: 1680px;margin: 0 auto;padding: 0 20px;position: relative;z-index: 2;}
.header {position: fixed;top: 0;left: 0;width: 100%;z-index: 999;transition: all 0.3s ease;background-color: rgba(0, 0, 0, 0.1);backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);}
.header.scroll {background-color: rgba(255, 255, 255, 0.95);box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}
.header-wrap {width: 100%;max-width: 1680px;margin: 0 auto;padding: 0 20px;display: flex;justify-content: space-between;align-items: center;height: 80px;}
.logo a {display: block;position: relative;}
.logo img {height: 40px;display: block;}
.logo-light {display: none !important;}
.header.scroll .logo-dark {display: none !important;}
.header.scroll .logo-light {display: block !important;}
.nav-pc {flex: 1;text-align: center;margin: 0 40px;}
.nav-pc ul {list-style: none;display: inline-flex;gap: 40px;}
.nav-pc ul li a {text-decoration: none;font-size: 16px;transition: color 0.3s ease;color: #ffffff !important;}
.header.scroll .nav-pc ul li a {color: #003366 !important;}
.header-right-pc {display: flex;align-items: center;gap: 20px;}
.lang, .phone {display: flex;align-items: center;gap: 8px;font-size: 14px;color: #ffffff !important;}
.header.scroll .lang, .header.scroll .phone {color: #003366 !important;}
.header a {color: #ffffff !important;}
.header.scroll a {color: #003366 !important;}
.lang-light, .phone-light {display: none !important;}
.header.scroll .lang-dark, .header.scroll .phone-dark {display: none !important;}
.header.scroll .lang-light, .header.scroll .phone-light {display: inline-block !important;}
.lang img, .phone img {height: 18px;}

.menu-btn {display: none;flex-direction: column;justify-content: space-between;width: 24px;height: 16px;cursor: pointer;z-index: 1000;}
.menu-btn span {width: 100%;height: 2px;background-color: #ffffff;transition: all 0.3s ease;}
.header.scroll .menu-btn span {background-color: #003366;}
.menu-btn.active span:nth-child(1) {transform: rotate(45deg) translate(5px, 5px);}
.menu-btn.active span:nth-child(2) {opacity: 0;}
.menu-btn.active span:nth-child(3) {transform: rotate(-45deg) translate(5px, -5px);}
.nav-mobile {position: fixed;top: 80px;left: 0;width: 100%;background-color: #ffffff;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);transform: translateY(-100%);opacity: 0;visibility: hidden;transition: all 0.3s ease;z-index: 998;}
.nav-mobile.show {transform: translateY(0);opacity: 1;visibility: visible;}
.nav-mobile ul {list-style: none;padding: 20px;}
.nav-mobile ul li {padding: 12px 0;border-bottom: 1px solid #f0f0f0;}
.nav-mobile ul li a {text-decoration: none;color: #003366;font-size: 18px;}
.mobile-lang, .mobile-phone {display: flex;align-items: center;gap: 8px;color: #003366;font-size: 16px;}
.mobile-lang img, .mobile-phone img {height: 18px;}

.main-content {padding-top: 80px; min-height: 2000px; background: #47698f;}

.footer {width: 100%;background: url('../images/bg-footer.jpg') #003366; color: #ffffff;padding: 60px 0 30px;}
.footer .wrap {max-width: 1280px;padding: 0 20px;margin: 0 auto;}
.footer-links {display: flex;justify-content: flex-start;align-items: flex-start;width: 100%;margin-bottom: 30px;}
.link-col-large {width: 45%;padding: 0;}
.link-col-small {width: 12%;margin-left: 2%;padding: 0;}
.link-col h3 {font-size: 18px;font-weight: 600;color: #ffffff;margin-bottom: 15px;padding: 0;}
.link-col ul {list-style: none;padding: 0;margin: 0;}
.link-col ul li {margin-bottom: 12px;font-size: 14px;color: rgba(255, 255, 255, 0.85);line-height: 1.6;}
.link-col ul li a {color: rgba(255, 255, 255, 0.85);text-decoration: none;}
.link-col ul li a:hover {color: #ffffff;}
.copyright {width: 100%;padding: 20px 0 0;border-top: 1px solid rgba(255, 255, 255, 0.2);text-align: left;}
.copyright p {font-size: 12px;color: rgba(255, 255, 255, 0.7);margin: 0;}
.copyright a{color: rgba(255, 255, 255, 0.7);padding: 0 5px;}
@media (max-width: 768px) {
  .nav-pc, .header-right-pc {display: none;}
  .menu-btn {display: flex;}
  .header-wrap {height: 70px;}
  .nav-mobile {top: 70px;}
  .logo img {height: 35px;}
  .main-content {padding-top: 70px;}
  .footer {padding: 40px 0 20px;}
  .footer-links {flex-wrap: wrap;gap: 20px;}
  .link-col-large {width: 100%;margin-bottom: 20px;}
  .link-col-small {width: 30%;margin-left: 0;margin-bottom: 20px;}
  .copyright {text-align: center;}
  .header a {color: #003366 !important;}
  .header.scroll a {color: #003366 !important;}
}
@media (max-width: 480px) {
  .link-col-small {width: 45%;}
}

.banner-section {width: 100%;position: relative;overflow: hidden;}
.banner-container {position: relative;width: 100%;height: 760px;max-height: 760px;min-height: 360px;}
.banner-bg {width: 100%;height: 100%;object-fit: cover;display: block;}
.banner-content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;color: white;z-index: 2;}
.banner-content h1 {font-size: 3rem;margin-bottom: 1rem;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);}
.banner-content p {font-size: 1.5rem;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);}

.content-section {padding: 40px 0;background-color: #fff;}
.container {width: 100%;max-width: 1480px;margin: 0 auto;padding: 0 20px;}
.breadcrumb-nav-container {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 20px;padding: 20px 0;border-bottom: 1px solid #eee;margin-bottom: 30px;}
.breadcrumb {font-size: 0.9rem;color: #666;}
.breadcrumb a {color: #1e50af;text-decoration: none;}
.breadcrumb a:hover {text-decoration: underline;}
.sub-nav ul {display: flex;list-style: none;margin: 0;padding: 0;gap: 15px;}
.sub-nav li a {display: block;padding: 8px 16px;text-decoration: none;color: #333;border-radius: 4px;transition: all 0.3s ease;}
.sub-nav li a:hover, .sub-nav li a.active {background-color: #1e50af;color: white;}
.page-content {max-width: 1200px;margin: 0 auto;}
.page-content h2.bt {font-size: 2rem;margin-bottom: 20px;color: #333;border-left: 4px solid #1e50af;padding-left: 15px;}
.page-content .maininfo {font-size: .825rem;margin-bottom: 20px;color: #888;border-bottom: 1px solid #ddd;padding-bottom: 15px;}
.page-content .maininfo em {font-style: normal;margin-right: 20px;}
.content-text {line-height: 1.8;color: #555;font-size: 1.25rem;}
.content-text p {margin-bottom: 20px;}
.content-text img {max-width: 100% !important;height: auto !important;}
.company-values {margin-top: 30px;padding: 20px;background-color: #f9f9f9;border-radius: 8px;}
.company-values h3 {font-size: 1.5rem;margin-bottom: 15px;color: #333;}
.company-values ul {list-style-type: none;padding: 0;}
.company-values li {margin-bottom: 10px;padding-left: 20px;position: relative;}
.company-values li::before {content: "•";position: absolute;left: 0;color: #1e50af;font-weight: bold;}

@media (max-width: 1480px) {
  .container {max-width: 100%;padding: 0 40px;}
  .page-content {max-width: 100%;padding: 0 20px;}
}
@media (max-width: 1200px) {
  .banner-container {height: 680px;}
  .banner-content h1 {font-size: 2.5rem;}
  .banner-content p {font-size: 1.2rem;}
}
@media (max-width: 992px) {
  .banner-container {height: 600px;}
  .breadcrumb-nav-container {flex-direction: column;align-items: flex-start;}
  .sub-nav ul {flex-wrap: wrap;justify-content: flex-start;}
  .banner-content h1 {font-size: 2rem;}
  .banner-content p {font-size: 1rem;}
}
@media (max-width: 768px) {
  .banner-container {height: 500px;}
  .container {padding: 0 15px;}
  .breadcrumb {order: 2;width: 100%;}
  .sub-nav {order: 1;width: 100%;}
  .sub-nav ul {justify-content: center;}
  .page-content h2.bt {font-size: 1.5rem;}
  .banner-content h1 {font-size: 1.8rem;}
  .banner-content p {font-size: 0.9rem;}
}
@media (max-width: 576px) {
  .banner-container {height: 360px;}
  .banner-content h1 {font-size: 1.5rem;}
  .banner-content p {font-size: 0.8rem;}
  .sub-nav ul {gap: 10px;}
  .sub-nav li a {padding: 6px 12px;font-size: 0.9rem;}
  .company-values h3 {font-size: 1.2rem;}
}
@media (min-width: 1920px) {
  .banner-container {height: 760px;}
}
@media (max-height: 600px) {
  .banner-container {height: 400px;}
}
@media (max-height: 450px) {
  .banner-container {height: 360px;}
}
.products-page {padding: 40px 0;}
.container {width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 20px;}
.page-header {text-align: center;margin-bottom: 40px;}
.page-header h1 {font-size: 2.5rem;color: #333;margin-bottom: 15px;font-weight: 700;}
.page-header p {font-size: 1.2rem;color: #666;max-width: 600px;margin: 0 auto;}
.products-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;width: 100%;}
.product-item {background: white;border-radius: 8px;overflow: hidden;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);transition: all 0.3s ease;display: flex;flex-direction: column;height: 100%;}
.product-item:hover {transform: translateY(-5px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);}
.product-image {position: relative;height: 280px;overflow: hidden;}
.product-image img {width: 100%;height: 100%;object-fit: cover;display: block;transition: transform 0.4s ease;}
.product-item:hover .product-image img {transform: scale(1.05);}
.product-info {padding: 25px;flex: 1;display: flex;flex-direction: column;text-align: center;}
.product-info h3 {font-size: 1.2rem;color: #333;font-weight: normal;height: 1.6rem;line-height: 1.6rem;overflow: hidden;}
.product-info p {font-size: 1rem;color: #666;line-height: 1.6;flex: 1;}
@media (max-width: 992px) and (min-width: 768px) {
  .products-grid {grid-template-columns: repeat(2, 1fr);gap: 25px;}
  .product-image {height: 250px;}
  .product-info {padding: 20px;}
}
@media (max-width: 768px) {
  .products-grid {grid-template-columns: 1fr;gap: 20px;}
  .product-image {height: 220px;}
  .page-header h1 {font-size: 2rem;}
  .product-info {padding: 15px;}
  .product-info h3 {font-size: 1.2rem;}
}
@media (min-width: 1440px) {
  .container {max-width: 1200px;}
  .products-grid {grid-template-columns: repeat(3, 1fr);gap: 40px 80px;}
  .product-image {height: 280px;}
}
@media (max-width: 576px) {
  .page-header {padding: 0 10px;}
  .product-item {border-radius: 6px;}
  .product-info h3 {font-size: 1.1rem;}
}
@media (hover: none) and (pointer: coarse) {
  .product-item:hover {transform: none;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);}
}
.product-image::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(45deg, #f0f0f0, #e0e0e0);z-index: 1;opacity: 0;transition: opacity 0.3s ease;}
.product-image img {z-index: 2;}
.product-image img.onload {
	.product-image::before {opacity: 0;}
}

.news-page {padding: 40px 0;}
.container {width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 20px;}
.page-header {text-align: center;margin-bottom: 40px;}
.page-header h1 {font-size: 2.5rem;color: #333;margin-bottom: 15px;font-weight: 700;}
.page-header p {font-size: 1.2rem;color: #666;max-width: 600px;margin: 0 auto;}
.news-list {width: 100%;}
.news-item {background: white;border-radius: 8px;overflow: hidden;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);margin-bottom: 20px;transition: all 0.3s ease;border: solid 1px #eee;}
.news-item a {text-decoration:none;}
.news-item:hover {box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);transform: translateY(-2px);}
.news-content {display: flex;align-items: flex-start;padding: 20px;}
.news-image {flex-shrink: 0;width: 200px;height: 150px;border-radius: 6px;overflow: hidden;margin-right: 20px;}
.news-image img {width: 100%;height: 100%;object-fit: cover;display: block;transition: transform 0.3s ease;}
.news-item:hover .news-image img {transform: scale(1.05);}
.news-text {flex: 1;display: flex;flex-direction: column;justify-content: space-between;}
.news-title {font-size: 1.6rem;color: #333;margin: 0 0 15px 0;font-weight: 600;line-height: 1.4;}
.news-meta {display: flex;flex-direction: column;gap: 10px;}
.news-summary {font-size: 1rem;color: #666;line-height: 1.6;margin: 0;flex: 1;}
.news-time {font-size: 0.9rem;color: #999;align-self: flex-end;margin-top: 10px;}
@media (min-width: 1440px) {
  .news-content {padding: 25px;}
  .news-image {width: 220px;height: 160px;}
}
@media (max-width: 1200px) and (min-width: 768px) {
  .news-content {padding: 18px;}
  .news-image {width: 180px;height: 135px;margin-right: 15px;}
  .news-title {font-size: 1.3rem;}
  .news-summary {font-size: 0.95rem;}}
@media (max-width: 768px) {
  .news-content {flex-direction: column;padding: 15px;}
  .news-image {width: 100%;height: 200px;margin-right: 0;margin-bottom: 15px;}
  .news-text {width: 100%;}
  .news-title {font-size: 1.2rem;margin-bottom: 10px;}
  .news-meta {align-items: flex-start;}
  .news-time {align-self: flex-start;margin-top: 10px;}
  .page-header h1 {font-size: 2rem;}
}
@media (max-width: 480px) {
  .container {padding: 0 15px;}
  .news-content {padding: 12px;}
  .news-image {height: 180px;}
  .news-title {font-size: 1.1rem;}
  .news-summary {font-size: 0.9rem;}
  .news-time {font-size: 0.8rem;}
}
.news-item.no-image .news-content {flex-direction: column;}
.news-item.no-image .news-image {display: none;}
.news-item.no-image .news-text {width: 100%;}
@media (hover: none) and (pointer: coarse) {
  .news-item:hover {transform: none;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);}
	.news-title:hover {color: #0d5aac;}
}
.news-summary {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.news-content.no-image {flex-direction: column;}
.news-image img {z-index: 2;}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.news-image img {animation: fadeIn 0.3s ease-in;}

.listpage{margin-top:30px;text-align:center;clear:both;height:40px;line-height:40px; font-size:16px;}
.listpage a{color:#0d5aac;margin-right:8px;text-decoration:none;padding:6px 12px;border:1px solid #eee;border-radius:4px;}
.listpage a:hover{color:#0d5aac;background-color:#f5f5f5;text-decoration:none;border:1px solid #0d5aac;}
.listpage a:active{color:#0d5aac;background-color:#f5f5f5;border:1px solid #666;}
.listpage span.cur{font-weight:bold;color:#fff;margin-right:8px;background:#0d5aac;border:1px solid #0d5aac;padding:6px 12px;border-radius:4px;}
.listpage span.disabled{color:#eee;margin-right:8px;border:1px solid #f3f3f3;padding:6px 12px;border-radius:4px;}
.list_page, .pagelink{margin:15px 5px;}
.pagelink a, .list_page a, .list_page b{padding:2px 6px 1px;border:1px solid #d2efff;background:#f0f8ff;text-align:center;display:inline;font-size:14px;}
.pagelink a:hover, .list_page a:hover{border:1px solid #d2efff;background:#fff;text-align:center;font-weight:bold;text-decoration:none;}

.contact-main {display: flex;gap: 30px;width: 100%;min-height: 500px;}
.contact-info {width: 40%;}
.contact-map {width: 60%;background: #f5f5f5;border-radius: 4px;overflow: hidden;}
.map-image {width: 100%;height: auto;display: block;max-width: 100%;}
@media (max-width: 1200px) {
  .contact-main {flex-direction: column;gap: 20px;}
  .contact-map {width: 100%;min-height: 400px;}
  .map-image {height: 400px;object-fit: cover;}
}
@media (max-width: 768px) {
  .map-image {height: 350px;}
}
@media (max-width: 480px) {
  .map-image {height: 300px;}
}
.contact-info {border: none;box-shadow: none;}
.contact-map {border: none;box-shadow: none;}
.contact-map {background-color: #f5f5f5;}

.page-header {text-align: center;margin-bottom: 20px;}
.page-header p {font-size: 1.75rem;color: #666;max-width: 600px;margin: 0 auto;padding-top: 20px;}
.feedback-form {width: 100%;background: white;border-radius: 4px;padding: 30px 0;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);}
.form-row {display: flex;gap: 20px;margin-bottom: 25px;width: 100%;}
.form-row:last-child {margin-bottom: 0;}
.form-group {flex: 1;min-width: 0;}
.form-group.full-width {flex: 1;width: 100%;}
.form-group input, .form-group textarea {width: 100%;padding: 18px 15px;border: 1px solid #ddd;border-radius: 4px;font-size: 1rem;color: #333;outline: none;transition: border-color 0.3s ease;}
.form-group input:focus, .form-group textarea:focus {border-color: #007bff;}
.form-group input::placeholder, .form-group textarea::placeholder {color: #999;font-size: 1rem;}
.form-group textarea {resize: vertical;min-height: 200px;}
.captcha-group {display: flex;align-items: center;gap: 15px;}
.captcha-group label {font-size: 1rem;color: #333;width: 60px;margin: 0;padding: 0;}
.captcha-input {display: flex;align-items: center;gap: 10px;flex: 1;}
.captcha-input input {flex: 1;height: 54px;padding: 8px 12px;font-size: 1rem;}
.captcha-image {width: 100px;height: 54px;border-radius: 4px;cursor: pointer;object-fit: cover;}
.submit-group {display: flex;align-items: center;justify-content: flex-end;}
.submit-btn {background: #0d5aac;border: 1px solid #ddd;border-radius: 4px;padding: 18px 25px;font-size: 1rem;color: #fff;cursor: pointer;transition: all 0.3s ease;font-weight: 500;}
.submit-btn:hover {background-color: #f8f9fa;border-color: #007bff;color: #007bff;}
@media (min-width: 768px) {
  .form-row.row-1 {flex-wrap: nowrap;}
  .form-group {flex: 1;}
  .form-group:not(:last-child) {margin-right: 20px;}
  .form-group.full-width {flex: 1;}
  .captcha-group {flex: 1;}
  .submit-group {flex: 1;justify-content: flex-end;}
}
@media (max-width: 767px) {
  .form-row {flex-direction: column;gap: 15px;}
  .form-group {width: 100%;}
  .captcha-group {flex-direction: column;align-items: flex-start;gap: 10px;}
  .captcha-input {width: 100%;flex-direction: row;justify-content: space-between;}
  .captcha-image {width: 120px;height: 54px;}
  .submit-group {width: 100%;justify-content: center;}
  .submit-btn {width: 100%;padding: 18px 20px;font-size: 1.1rem;}
}
@media (max-width: 480px) {
  .feedback-form {padding: 0;}
  .page-header h1 {font-size: 2rem;}
  .captcha-image {width: 100px;height: 54px;}
  .captcha-input input {padding: 6px 10px;font-size: 0.9rem;}
  .submit-btn {padding: 18px 15px;font-size: 1.25rem;}
}