﻿
section {padding: 80px 20px;}
.container {max-width: 1200px;margin: 0 auto;}
.section-title {text-align: center;font-size: 2.5rem;color: #000;margin-bottom: 50px;}
.reliable-story {background: #f8f9fa;}
.story-tabs {display: flex;justify-content: center;gap: 15px;margin-bottom: 30px;flex-wrap: wrap;}
.story-tab {padding: 12px 25px;background: white;border: 2px solid #000;border-radius: 0;cursor: pointer;font-size: 1rem;color: #000;transition: all 0.3s;}
.story-tab.active {background: #000;color: white;}
.story-content {display: none;}
.story-content.active {display: block;}
.story-images {display: flex;gap: 15px;justify-content: center;flex-wrap: wrap;}
.story-images img {width: calc(20% - 12px);height: 180px;object-fit: cover;border-radius: 8px;transition: transform 0.3s;}
.story-images img:hover {transform: scale(1.05);}
.certification {background: white;}
.cert-carousel-wrapper {position: relative;max-width: 1000px;margin: 0 auto;}
.cert-carousel {display: flex;gap: 20px;overflow-x: auto;scroll-behavior: smooth;padding: 20px 0;}
.cert-card {min-width: 250px;text-align: center;background: #f8f9fa;border-radius: 10px;padding: 15px;}
.cert-card img {width: 100%;height: auto;border-radius: 8px;margin-bottom: 15px;}
.cert-card .title {color: #000;margin-bottom: 10px;}
.cert-card .btn {display: inline-block;padding: 10px 20px;background: #e74c3c;color: white;text-decoration: none;border-radius: 5px;transition: background 0.3s;}
.cert-card .btn:hover {background: #c0392b;}
.cert-nav-btn {position: absolute;top: 50%;transform: translateY(-50%);background: #000;color: white;border: none;padding: 15px;cursor: pointer;font-size: 1.2rem;z-index: 10;}
.cert-nav-btn.prev {left: -50px;}
.cert-nav-btn.next {right: -50px;}
@media (max-width: 768px) {.about-reliable .content-wrapper {flex-direction: column;}
.advantage-grid, .product-grid, .production-grid, .material-grid {grid-template-columns: 1fr;}
.story-images img {width: calc(50% - 8px);}
.navbar .container {gap: 10px;}
.navbar a {padding: 5px 10px;font-size: 0.9rem;}}
@media (max-width: 1024px){
.cert-nav-btn{display: none;}
.cert-carousel{flex-wrap: wrap;}
.cert-card{min-width: auto;width: calc((100% - 80px)/5);}
}
@media (max-width: 768px) {.cert-card{min-width: auto;width: calc((100% - 60px)/4);}}
@media (max-width:540px) {.cert-card{min-width: auto;width: calc((100% - 40px)/3);}}

.abnav{position: sticky;top: 78px;background: #fff;z-index: 9;}
.abnav .list{display: flex;flex-wrap: wrap;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;}
.abnav .list .item{width: 14%;transition: all .3s;position: relative;cursor: pointer;}
.abnav .list .item:after{position:absolute;bottom:-1px;left:0;width:100%;height:3px;content:'';display:block;transition: all .3s;background: transparent;}
.abnav .list .item span{text-align: center;display:flex;align-items: center;justify-content: center;width:100%;height:100%;padding:10px 0;color:var(--fontcolor);font-weight:var(--fontbold7)}
.abnav .list .item span:hover{text-decoration: none;}
.abnav .list .item.act:after,.abnav .list .item:hover:after{background:var(--color)}
