@font-face{ font-family:"OPPOSans"; font-weight:400; src:url("../fonts/OPPOSans-R-2.woff2") format("woff2") }
@font-face{ font-family:"OPPOSans"; font-weight:500; src:url("../fonts/OPPOSans-M-2.woff2") format("truetype") }
@font-face{ font-family:"OPPOSans"; font-weight:600; src:url("../fonts/OPPOSans-SemiBold.ttf") format("truetype") }
@font-face{ font-family:"OPPOSans"; font-weight:700; src:url("../fonts/OPPOSans-B-2.woff2") format("woff2") }
@font-face{ font-family:"OPPOSans"; font-weight:800; src:url("../fonts/OPPOSans-H-2.ttf") format("truetype") }
@font-face{ font-family:"Outfit"; font-weight:300; src:url("../fonts/Outfit-Light.ttf") format("truetype") }
@font-face{ font-family:"Outfit"; font-weight:400; src:url("../fonts/Outfit-Regular.ttf") format("truetype") }
@font-face{ font-family:"Outfit"; font-weight:500; src:url("../fonts/Outfit-Medium.ttf") format("truetype") }
@font-face{ font-family:"Outfit"; font-weight:600; src:url("../fonts/Outfit-SemiBold.ttf") format("truetype") }
@font-face{ font-family:"Outfit"; font-weight:700; src:url("../fonts/Outfit-Bold.ttf") format("truetype") }
@font-face{ font-family:"Outfit"; font-weight:800; src:url("../fonts/Outfit-ExtraBold.ttf") format("truetype") }
@font-face{ font-family:"Outfit"; font-weight:900; src:url("../fonts/Outfit-Black.ttf") format("truetype") }
h1,h2,h3,h4{ font-weight:bold }
body{ font-family:"OPPOSans" }
.qrcode_mask{ position:fixed; left:0; right:0; top:0; bottom:0; background:#000; opacity:.5; z-index:1999 }
.qrcode{ padding:20px; position:fixed; z-index:2000; left:50%; top:50%; margin-left:-120px; margin-top:-140px; background:#fff; z-index:100000; font-size:14px; text-align:center; -webkit-box-shadow:0 5px 15px rgba(0,0,0,.1); box-shadow:0 5px 15px rgba(0,0,0,.1) }
.qrcode img{ max-width:100%; max-height:100% }
.qrcode p{ margin:10px 0 }
.qrcode .weixin_close{ background:#0058a7; display:inline-block; width:100%; height:30px; line-height:30px; text-align:center; color:#fff; text-decoration:none }
.animation{ visibility:hidden; opacity:0 }
.fadel,.fader,.fadeup,.fadez{ visibility:visible }
.fadeup{ animation:slideInUp ease-out .6s forwards; -webkit-animation:slideInUp ease-out .6s forwards }
@keyframes slideInUp{ from{transform:translate3d(0,50%,0) }
to{ opacity:1; transform:none }
}
.fadel{ animation:slideInLeft ease-out .6s forwards; -webkit-animation:slideInLeft ease-out .6s forwards }
@keyframes slideInLeft{ from{transform:translate3d(-50%,0,0) }
to{ opacity:1; transform:none }
}
.fader{ animation:slideInRight ease-out .6s forwards; -webkit-animation:slideInRight ease-out .6s forwards }
@keyframes slideInRight{ from{transform:translate3d(50%,0,0); -webkit-transform:translate3d(50%,0,0); -moz-transform:translate3d(50%,0,0); -ms-transform:translate3d(50%,0,0); -o-transform:translate3d(50%,0,0) }
to{ opacity:1; transform:none }
}
@keyframes fadeIn{ from{opacity:0; transform:translateY(-10px) }
to{ opacity:1; transform:translateY(0) }
}
@keyframes slideInLeft{ from{opacity:0; transform:translateX(-50px) }
to{ opacity:1; transform:translateX(0) }
}
@keyframes slideInRight{ from{opacity:0; transform:translateX(50px) }
to{ opacity:1; transform:translateX(0) }
}
@keyframes bounce{ 0%,20%,53%,80%,100%{transform:translate3d(0,0,0) }
40%,43%{ transform:translate3d(0,-10px,0) }
70%{ transform:translate3d(0,-5px,0) }
90%{ transform:translate3d(0,-2px,0) }
}
#translate{ position:fixed; top:26px; right:5%; z-index:9999 }
#translateSelectLanguage{ padding:6px 0; border:1px solid #e0e0e0; border-radius:8px; background-color:#fff; color:#333; font-size:14px; outline:none }
@media(max-width:768px){ #translateSelectLanguage{display:none }
}
*{ margin:0; padding:0; box-sizing:border-box }
img{ max-width:100% }
.container{ width:100%; max-width:1480px; margin:0 auto }
@media(max-width:1200px){ .container{width:92% }
}
@media(min-width:1201px)and (max-width:1500px){ .container{width:92%; max-width:1400px }
}
.header{ position:fixed; top:0; left:0; right:0; height:80px; z-index:1000; transition:all .3s ease }
.header .container{ display:flex; align-items:center; justify-content:space-between; width:92%; max-width:100%; height:100%; overflow:visible }
.header .logo a{ display:block }
.header .logo a img{ max-height:60px }
.header .mobile-menu-toggle{ display:none; background:rgba(0,0,0,0); border:none; cursor:pointer; padding:10px; z-index:1002; position:relative }
.header .mobile-menu-toggle-icon{ display:block; width:24px; height:3px; background-color:#fff; margin:4px 0; transition:all .3s ease; position:relative; transform-origin:4px 0px }
.header .mobile-menu-toggle.active .mobile-menu-toggle-icon:nth-child(1){ transform:rotate(45deg) translate(0px,0px) }
.header .mobile-menu-toggle.active .mobile-menu-toggle-icon:nth-child(2){ opacity:0 }
.header .mobile-menu-toggle.active .mobile-menu-toggle-icon:nth-child(3){ transform:rotate(-45deg) translate(-5px,1px) }
.header .nav{ display:flex; align-items:center; justify-content:center; margin:0 2% }
.header .nav li{ margin:0 10px; position:relative }
.header .nav li .nav-link{ display:flex; align-items:center; justify-content:center; padding:10px 0; color:#fff; font-size:14px; transition:color .3s ease; font-weight:bold; position:relative; overflow:hidden }
.header .nav li .nav-link b{ display:block; width:100%; text-align:center }
.header .nav li .nav-link::after{ content:""; position:absolute; bottom:0; left:50%; width:0; height:2px; background-color:#36ac00; transition:all .3s ease; transform:translateX(-50%) }
.header .nav li .nav-link .dropdown-link-toggle{ height:100%; display:block; background:rgba(0,0,0,0); border:none; cursor:pointer; transition:all .3s ease; margin-left:5px }
.header .nav li .nav-link .dropdown-link-toggle .dropdown-link-arrow{ display:inline-block; width:0; height:0; border-left:6px solid rgba(0,0,0,0); border-right:6px solid rgba(0,0,0,0); border-top:6px solid #fff; transition:transform .3s ease }
.header .nav li .nav-link .dropdown-link-toggle.open .dropdown-link-arrow{ transform:rotate(180deg) }
.header .nav li .nav-link:hover,.header .nav li .nav-link.active{ color:#36ac00 }
.header .nav li .nav-link:hover::after,.header .nav li .nav-link.active::after{ width:30% }
.header .nav li .nav-link:hover .dropdown-link-arrow,.header .nav li .nav-link.active .dropdown-link-arrow{ border-top:6px solid #36ac00 }
.header .nav li.dropdown:hover .dropdown-menu{ display:block }
.header .nav li .dropdown-menu{ display:none; position:absolute; top:100%; left:50%; width:150px; margin-left:-75px; background-color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.15); border-radius:4px; overflow:hidden; z-index:1001; animation:fadeIn .3s ease }
.header .nav li .dropdown-menu li{ margin:0 }
.header .nav li .dropdown-menu li a{ padding:10px 15px; font-weight:normal; text-align:center; display:block }
.header .nav li .dropdown-menu li a:hover{ background:#f5f5f5; color:#36ac00 }
.header .header-right{ display:flex; align-items:center; justify-content:center }
.header .header-right .tel{ display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; border:1px solid #fff; border-radius:5px; overflow:hidden; padding:6px 15px; word-break:break-all; margin-right:10px }
.header .header-right .tel::before{ background:url("../images/icon-tel.png") no-repeat center center; width:12px; height:13px; display:block; content:""; margin-right:5px; background-size:100% 100% }
.header .header-right .language{ font-size:16px; font-weight:bold; color:#fff; margin:0 10px }
.header .header-right .language.active{ color:#01933e }
.header .header-right #gt_float_wrapper{ top:16px !important; right:0 !important }
.header.active{ background:#fff }
.header.active .nav li .nav-link{ color:#4a4a4a }
.header.active .header-right .tel{ border:1px solid #ddd; color:#4a4a4a }
.header.active .header-right .tel::before{ background:url("../images/icon-tel-black.png") no-repeat center center; background-size:100% 100% }
.header.active .header-right .menu-toggle{ background:url("../images/icon-more-black.png") no-repeat }
.header.active .header-right .lang-btn::before{ background:url("../images/icon-languae-black.png") no-repeat center/auto 100% }
.header.active .header-right .lang-btn::after{ background:url("../images/icon-arrow-down-black.png") no-repeat center/auto 100% }
.snb-lang{ position:relative; margin-left:20px; margin-right:10px }
.lang-btn{ display:block; position:relative; width:70px; height:50px; line-height:50px; text-align:left; font-size:15px; color:inherit; font-weight:600; border:1px solid rgba(0,0,0,0); border-radius:40px; transition:all ease .35s; padding-left:10px; background:none }
.lang-btn::before{ content:""; display:block; width:20px; height:20px; background:url("../images/icon-languae.png") no-repeat center/auto 100%; transition:all ease .35s }
.lang-btn::after{ content:""; display:block; position:absolute; top:50%; transform:translateY(-50%); right:18px; width:10px; height:6px; background:url("../images/icon-arrow-down.png") no-repeat center/auto 100%; transition-property:transform,background; transition-timing-function:ease }
.lang-list{ z-index:8; position:absolute; left:50%; top:48px; padding:8px 0; width:80px; background:#fff; border:1px solid rgba(0,0,0,0); transform:translateX(-50%); visibility:hidden; opacity:0; transition:all ease .35s; box-shadow:0 0px 8px 0 rgba(0,0,0,.12); border-radius:4px }
.lang-list::before{ content:""; z-index:-1; position:absolute; top:-8px; left:0; right:0; margin:auto; width:0; height:0; border-style:solid; border-width:0 8px 8px 8px; border-color:rgba(0,0,0,0) rgba(0,0,0,0) #fff rgba(0,0,0,0) }
.lang-list a{ display:block; padding:8px 0; line-height:1; text-align:center; font-size:15px; color:#111; transition:all ease .35s }
.lang-list a:hover,.lang-list a.on{ color:#097cd3 }
.snb-lang.active .lang-list{ visibility:visible; opacity:1 }
.snb-lang.active .lang-btn::after{ transform:rotate(180deg) translateY(-50%); transform-origin:top }
@media(max-width:1200px){ .header .mobile-menu-toggle{display:block }
.header .logo a img{ max-height:40px }
.header .header-right .tel{ display:none }
.header .snb-lang{ display:none }
.header .nav{ display:none; width:100%; background:linear-gradient(135deg,rgba(0,0,0,0.95) 0%,rgba(26,35,126,0.95) 100%); overflow:hidden; position:fixed; top:0; right:-100%; height:100vh; flex-direction:column; justify-content:center; align-items:center; transition:right .4s cubic-bezier(0.77,0.2,0.05,1); z-index:1001; backdrop-filter:blur(10px); box-shadow:-5px 0 25px rgba(0,0,0,.3) }
.header .nav.open{ right:0; display:flex }
.header .nav ul{ flex-direction:column; width:100%; padding:0 20px }
.header .nav ul li{ margin:0; width:100%; text-align:center; border-bottom:1px solid hsla(0,0%,100%,.05); border-radius:8px; transition:all .3s ease; padding:18px 20px }
.header .nav ul li a{ padding:0; font-size:18px; display:flex; color:#fff; text-decoration:none; transition:all .3s ease; text-shadow:0 1px 2px rgba(0,0,0,.3) }
.header .nav ul li a.active::after,.header .nav ul li a:hover::after{ display:none }
.header .nav ul li.dropdown:hover .dropdown-menu{ display:none }
.header .nav ul li.dropdown{ position:static; width:100% }
.header .nav ul li.dropdown .dropdown-menu{ position:static; width:100%; margin-left:0; margin-top:0; background-color:hsla(0,0%,100%,.05); backdrop-filter:blur(8px); box-shadow:none; border-radius:0 0 8px 8px; display:none; overflow:hidden; z-index:1001; animation:none }
.header .nav ul li.dropdown .dropdown-menu li{ border-bottom:1px solid hsla(0,0%,100%,.05); margin:0; border-radius:0 }
.header .nav ul li.dropdown .dropdown-menu li:last-child{ border-bottom:none }
.header .nav ul li.dropdown .dropdown-menu li:hover{ transform:translateX(0); background-color:rgba(58,123,213,.15) }
.header .nav ul li.dropdown .dropdown-menu li a{ padding:15px 30px; color:hsla(0,0%,100%,.9); font-size:16px; font-weight:normal }
.header .nav ul li.dropdown .dropdown-menu li a:hover{ color:#36ac00; background-color:rgba(0,0,0,0) }
}
@media(min-width:1201px)and (max-width:1500px){ .header .header-right .tel,.header .header-right .snb-lang{display:none }
}
.footer{ background-color:#1f1f1f }
.footer-content{ display:flex; justify-content:space-between; padding:56px 0; font-size:14px }
.footer-info{ width:22%; opacity:.55 }
.footer-info h3{ font-size:18px; color:#fff; font-weight:normal }
.footer-info p{ line-height:24px; color:#989898 }
.footer-info p.area{ margin-top:24px }
.footer-links{ width:40%; padding-left:8%; margin:0 5%; display:flex; border-left:1px solid #565656; border-right:1px solid #565656; justify-content:center; opacity:.55 }
.footer-links dl{ width:50% }
.footer-links dt{ font-size:18px; margin-bottom:20px; color:#fff }
.footer-links a{ color:#989898; text-decoration:none; transition:color .3s ease; display:block; line-height:36px }
.footer-links a:hover{ color:#fff }
.footer-contact{ text-align:center; width:20% }
.footer-contact img{ width:140px; height:140px; display:block; margin:50px auto 32px }
.footer-contact p{ color:#dbdbdb; margin-top:8px }
.footer-bottom{ background:#101010; text-align:center; padding:15px 0 }
.footer-bottom p,.footer-bottom a{ font-size:13px; color:#b7b7b7 }
@media(max-width:1200px){ .footer-content{flex-direction:column; padding:32px 0 }
.footer-info{ width:100% }
.footer-info p.area{ margin-top:12px }
.footer-links{ margin:24px 0 0 0; width:100%; border:0; padding:0 }
.footer-links dt{ margin-bottom:12px }
.footer-links a{ line-height:24px }
.footer-contact{ width:100% }
.footer-contact img{ margin-top:24px; margin-bottom:16px }
.footer-contact p{ margin-top:5px }
}
.banner{ width:100%; height:600px; margin-top:80px; overflow:hidden }
.banner .swiper-container{ width:100%; height:100% }
.banner .swiper-container .swiper-slide img{ width:100%; height:100%; object-fit:cover }
.banner .swiper-container .swiper-pagination{ bottom:20px }
.banner .swiper-container .swiper-pagination-bullet{ width:12px; height:12px; background-color:#fff; opacity:.7; margin:0 8px }
.banner .swiper-container .swiper-pagination-bullet-active{ opacity:1; background-color:#36ac00 }
.banner .swiper-container .swiper-button-prev,.banner .swiper-container .swiper-button-next{ color:#fff; opacity:.8; transition:opacity .3s ease }
.banner .swiper-container .swiper-button-prev:hover,.banner .swiper-container .swiper-button-next:hover{ opacity:1 }
.banner .swiper-container .swiper-button-prev:before,.banner .swiper-container .swiper-button-next:before{ font-size:36px }
.page-banner{ display:flex; align-items:center; justify-content:center; background-position:center center; background-repeat:no-repeat; background-size:cover; height:700px; position:relative }
.page-banner h2{ font-size:72px; color:#fff; font-weight:400; text-align:center }
.page-banner-nav{ width:80%; max-width:650px; background:rgba(55,55,55,.5); height:60px; position:absolute; left:50%; transform:translate(-50%,0%); bottom:8%; z-index:3; display:flex; align-items:center; justify-content:center; border-radius:8px; backdrop-filter:blur(10px); transition:all .3s ease }
.page-banner-nav>li{ width:40%; display:flex; align-items:center; justify-content:center; height:100%; font-size:14px; color:#fff; position:relative; z-index:100; overflow:visible }
.page-banner-nav>li:nth-child(1)::after,.page-banner-nav>li:nth-child(2)::after{ height:20px; content:"|"; display:block; position:absolute; right:0; opacity:.5 }
.page-banner-nav>li>a{ display:flex; align-items:center; justify-content:center; color:#fff; width:100% }
.page-banner-nav>li>a b{ font-weight:normal; text-align:center; max-width:calc(100% - 30px) }
.page-banner-nav>li>a::after{ content:""; background:url("../images/icon-arrow-down.png") no-repeat; width:7px; height:4px; display:block; margin-left:10px; margin-right:20px }
.page-banner-nav>li>a.active::after{ transition:transform .3s ease; transform:rotate(180deg) }
.page-banner-nav>li.home{ width:20%; padding-top:0 }
.page-banner-nav>li.home a::after{ display:none }
.page-banner-nav .sub-nav{ width:100%; position:absolute; top:100%; left:0; background:#fff; border-radius:8px; padding:10px 0; box-shadow:0 4px 16px rgba(0,0,0,.15); z-index:9999; display:none; opacity:0; visibility:hidden; transition:all .3s ease-in-out; transform-origin:top center; transform:translateY(-10px) scaleY(0.9) }
.page-banner-nav .sub-nav.show{ opacity:1; visibility:visible; transform:translateY(0) scaleY(1); display:block }
.page-banner-nav .sub-nav>li{ display:flex; align-items:center; justify-content:center; height:40px; text-align:center; font-size:13px; transition:all .2s ease }
.page-banner-nav .sub-nav>li>a{ color:#333; text-decoration:none; width:100%; height:100%; display:flex; align-items:center; justify-content:center }
.page-banner-nav .sub-nav>li:hover{ background-color:rgba(55,55,55,.1) }
.page-banner-nav .sub-nav>li.active>a{ color:#337ab7; font-weight:500 }
@media(max-width:1200px){ .page-banner{height:300px; background-size:cover }
.page-banner h2{ font-size:36px }
.page-banner-nav{ width:90%; height:36px }
}
.main-content{ padding:5% 0 }
.section-title{ text-align:center; margin-bottom:5% }
.section-title h2{ font-size:28px; color:#282828; margin-bottom:10px }
.section-title h2.small{ font-size:20px }
.section-title p.font-outfit{ font-family:"Outfit"; font-weight:lighter }
.section-title p{ font-size:22px; color:#36ac00 }
@media(max-width:1200px){ .section-title h2{font-size:24px; margin-bottom:12px }
.section-title p{ font-size:18px }
}
.pagination{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; margin:60px auto }
.pagination a{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; color:RGBA(197,196,197,1); text-decoration:none; transition:all .3s ease; margin:0 5px }
.pagination a.active,.pagination a:hover{ background-color:#36ac00; border-color:#36ac00; color:#fff }
.pagination a.prev:hover,.pagination a.next:hover{ background:none; color:#36ac00 }
@media(max-width:1200px){ .pagination{padding:40px 0 }
.pagination a{ width:26px; height:26px; margin:0 2px }
}
.history{ position:relative; padding-bottom:10% }
.history::after{ background:url("../images/bg-history.png") no-repeat; content:""; display:block; position:absolute; right:0; bottom:0; width:1004px; height:859px; background-size:100% auto }
.timeline{ position:relative; overflow:hidden; z-index:1 }
.timeline .timeline-content{ position:relative; max-width:1200px; margin:0 auto }
.timeline .timeline-content::before{ content:""; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:4px; background:#eee }
.timeline .timeline-content::after{ content:""; position:absolute; height:calc(var(--progress,0)*2000px); top:0; left:50%; transform:translateX(-50%); width:4px; background:#36ac00; transition:height .6s ease }
.timeline .timeline-center{ position:absolute; top:0%; left:50%; transform:translate(-50%,-50%); z-index:1 }
.timeline .timeline-dot{ position:relative; --progress:0 }
.timeline .timeline-dot::after{ background:url("../images/icon-arrow.png") no-repeat; display:block; content:""; width:76px; height:76px; position:absolute; top:0; left:50%; transform:translateX(-50%) translateY(calc(var(--progress) * var(--timeline-height,1500px))); opacity:1 !important; visibility:visible !important; z-index:10; pointer-events:none; transition:transform .6s ease }
.timeline .timeline-phase{ position:relative; padding:30px 0; min-height:250px; display:flex; gap:160px; align-items:flex-start }
.timeline .timeline-phase .timeline-phase-title{ font-size:80px; color:#36ac00; margin-bottom:10px; font-weight:normal; font-family:Outfit; line-height:.8 }
.timeline .timeline-phase .timeline-phase-subtitle{ font-size:16px; color:#282828; margin-bottom:30px }
.timeline .timeline-phase:nth-child(even) .timeline-phase-info{ text-align:right }
.timeline .timeline-phase-right{ flex-direction:row-reverse }
.timeline .timeline-phase-right .timeline-item{ flex-direction:row-reverse }
.timeline .timeline-phase-right .timeline-item .timeline-text{ margin-left:0; margin-right:20px }
.timeline .timeline-phase-info{ flex:1 }
.timeline .timeline-items{ display:flex; flex-direction:column; gap:20px; flex:1 }
.timeline .timeline-item{ position:relative; transition:all .3s ease; max-width:100%; display:flex }
.timeline .timeline-item:hover{ transform:translateY(-5px) }
.timeline .timeline-item .timeline-year{ font-size:20px; font-weight:bold; margin-bottom:8px }
.timeline .timeline-item .timeline-text{ font-size:16px; color:#666; line-height:1.6; margin-left:20px }
@media(max-width:1200px){ .timeline .timeline-center{display:none }
.timeline .timeline-content::after,.timeline .timeline-content::before{ display:none }
.timeline .timeline-phase{ flex-direction:column; gap:0 }
.timeline .timeline-phase .timeline-phase-title{ font-size:30px }
.timeline .timeline-item{ flex-direction:column }
.timeline .timeline-item .timeline-text{ margin-left:0 }
.timeline .timeline-phase-right .timeline-item{ flex-direction:column }
}
.about{ padding:0 }
.about-part1{ background:#fff }
.about-part2{ background:#eaeaea; border-radius:36px 36px 0 0 }
.about-part-cont{ display:flex; align-items:center; justify-content:space-between; padding:5% 0; gap:70px }
.about-part-cont-text{ width:50%; line-height:24px; color:dimgray }
.about-part-cont-text h2{ font-size:36px; color:#90bb28; margin-bottom:60px }
.about-part-cont-text p{ font-size:14px; color:dimgray }
.about-part-cont-media{ width:50% }
.about-part-cont-media h2{ font-size:70px; color:#d8d8d8; text-align:center; line-height:58px; height:58px; overflow:hidden }
.about-part-cont-media img{ width:100%; height:394px; display:block; object-fit:cover }
.about-part-cont-media video{ width:100%; height:340px; display:block; object-fit:cover }
@media(max-width:1200px){ .about-part-cont{flex-direction:column; gap:0 }
.about-part-cont-text,.about-part-cont-media{ width:100% }
.about-part-cont-media h2{ font-size:36px }
.about-part-cont-media img{ height:auto }
.about-part-cont-text h2{ font-size:18px; text-align:center; margin-bottom:12px }
.about-part1 .about-part-cont-text{ margin-top:20px }
.about-part2 .about-part-cont-media{ margin-top:20px }
.about-part2 .about-part-cont-media video{ height:auto }
}
.culture{ padding-bottom:0 }
.culture .section-title h2{ font-size:20px }
.culture .section-title p{ font-size:22px }
.culture-part{ background-repeat:no-repeat; background-size:cover; background-position:center center }
.culture-part-cont{ height:100%; display:flex; align-items:center; justify-content:center }
.culture-part-cont.left{ justify-content:flex-start }
.culture-part-cont.right{ justify-content:flex-end }
.culture-part-cont.right dl{ text-align:right }
.culture-part-cont.center{ justify-content:center }
.culture-part-cont.center dl{ text-align:center }
.culture-part dl{ max-width:50% }
.culture-part dt{ font-size:30px; color:#333 }
.culture-part dd h2{ font-size:28px; color:#36ac00; line-height:44px; font-weight:normal; margin:48px 0 32px }
.culture-part dd p{ font-size:14px; color:#666; line-height:28px; min-height:28px }
.culture-part1,.culture-part2,.culture-part3{ padding:10% 0 }
.culture-part4{ position:relative; padding:5% 0 }
.culture-part5{ padding:5% 0 0 0; background:#043d74 }
.culture-part5-cont{ display:flex; align-items:center; justify-content:space-between; align-items:flex-start }
.culture-part5-cont-left{ width:50%; display:block; border-radius:0 18px 0 0; overflow:hidden }
.culture-part5-cont-right{ width:40%; margin-right:10%; margin-left:5% }
.culture-part5-cont-right h1{ font-size:30px; color:#fff; font-weight:normal; margin-bottom:5% }
.culture-part5-cont-right .culture-tabs-btn{ border:2px solid #36ac00; height:40px; border-radius:50px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center }
.culture-part5-cont-right .culture-tabs-btn .tab-background{ position:absolute; top:0; left:0; height:calc(100% - 2px); margin:1px; background:#36ac00; border-radius:20px; transition:left .3s ease-in-out,width .3s ease-in-out; z-index:0 }
.culture-part5-cont-right .culture-tabs-btn a{ font-size:16px; display:block; color:#fff; text-align:center; flex:1; height:40px; line-height:40px; border-radius:20px; position:relative; z-index:1; transition:color .3s ease; overflow:hidden }
.culture-part5-cont-right .culture-tabs-btn a.active{ color:#043d74 !important; font-weight:500 }
.culture-part5-cont-right .culture-tabs-btn a:hover{ color:#36ac00; font-weight:500 }
.culture-part5-cont-right .culture-tabs-cont dl{ width:100%; max-width:100%; display:none }
.culture-part5-cont-right .culture-tabs-cont dl.active{ display:block }
.culture-part5-cont-right .culture-tabs-cont dt{ font-size:28px; color:#36ac00; margin:3% 0 }
.culture-part5-cont-right .culture-tabs-cont dd,.culture-part5-cont-right .culture-tabs-cont dd p{ font-size:14px; color:#fff; line-height:24px }
@media(max-width:1200px){ .culture-part dl{max-width:100% }
.culture-part dt{ font-size:22px }
.culture-part dd h2{ font-size:20px; margin:20px 0 12px }
.culture-part4::before{ width:400px; height:400px }
.culture-part4 .values-container .core-values-center{ width:150px; height:150px }
.culture-part4 .values-container .core-values-center .values-icon{ width:40px; height:40px }
.culture-part4 .values-container .core-values-center .values-title{ font-size:18px }
.culture-part4 .values-container .values-items{ height:400px; max-width:600px }
.culture-part4 .values-container .values-items .value-item{ width:200px }
.culture-part4 .values-container .values-items .value-item .value-icon-circle{ width:100px; height:100px }
.culture-part4 .values-container .values-items .value-item .value-icon-circle .value-icon{ width:40px; height:40px }
.culture-part4 .values-container .values-items .value-item .value-title{ font-size:16px }
.culture-part4 .values-container .values-items .value-item .value-desc{ font-size:12px; line-height:18px }
.culture-part5-cont{ padding:10% 0; flex-direction:column }
.culture-part5-cont-left{ width:100%; border-radius:0 }
.culture-part5-cont-right{ width:92%; margin:0 auto; margin-top:20px }
.culture-part5-cont-right h1{ font-size:20px; margin-bottom:5% }
.culture-part5-cont-right .culture-tabs-btn{ flex-wrap:wrap }
.culture-part5-cont-right .culture-tabs-btn a{ font-size:12px }
.culture-part5-cont-right .culture-tabs-cont dt{ font-size:18px }
}
@media(max-width:768px){ .culture-part4{padding:15% 0 }
.culture-part4::before{ display:none }
.culture-part4 .values-container .core-values-center{ position:relative; top:0; left:0; transform:none; margin:0 auto 50px }
.culture-part4 .values-container .values-items{ height:auto; display:flex; flex-direction:column; gap:40px; align-items:center }
.culture-part4 .values-container .values-items .value-item{ position:relative; top:0; left:0; transform:none; width:100%; max-width:300px }
.culture-part4 .values-container .values-items .value-item .value-icon-circle{ width:120px; height:120px }
}
.solution-world{ padding-bottom:0 }
.solution-oem{ padding-bottom:0 }
.solution-map img{ width:100% }
.solution-richtext{ padding-bottom:5% }
.solution-richtext.center{ text-align:center }
.solution-richtext h2{ font-size:28px; color:#444; line-height:44px; font-weight:normal; margin-bottom:36px }
.solution-richtext p{ font-size:14px; color:dimgray; line-height:24px }
.solution-map{ background:#f1f2f2; padding-top:5% }
.solution-full-img{ width:100% }
.solution-title{ font-weight:400; font-size:28px; color:#444; line-height:44px; text-align:center; margin-bottom:3% }
.solution-oem-part3 .accordion-gallery{ display:flex; width:100%; height:596px; overflow:hidden }
.solution-oem-part3 .accordion-gallery:hover .accordion-item:not(:hover){ flex:.7 }
.solution-oem-part3 .accordion-gallery:hover .accordion-item:hover{ flex:3 }
.solution-oem-part3 .accordion-gallery .accordion-item{ flex:.7; height:100%; position:relative; transition:all .5s ease; cursor:pointer; overflow:hidden; border-left:2px solid #fff; border-radius:17px }
.solution-oem-part3 .accordion-gallery .accordion-item.active{ flex:3 }
.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img{ width:100%; height:100%; position:relative }
.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img img{ width:100%; height:100%; object-fit:cover; transition:all .5s ease }
.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img .accordion-icon img{ width:45px; height:45px; display:block; margin:0 auto; object-fit:contain }
.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img .accordion-caption{ position:absolute; top:0; left:0; width:100%; height:100%; padding:20px; background:rgba(0,0,0,.5); color:#fff; text-align:center; display:flex; flex-direction:column; justify-content:center; transition:all .5s ease }
.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img .accordion-caption .accordion-icon{ font-size:40px; margin-bottom:10px; opacity:1; transform:translateY(0); transition:all .5s ease }
.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img .accordion-caption h3{ font-size:20px; margin-bottom:10px; opacity:1; transform:translateY(0); transition:all .5s ease }
.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img .accordion-caption p{ font-size:14px; line-height:1.5; opacity:0; transform:translateY(20px); transition:all .5s ease; max-height:0; overflow:hidden }
.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img:not(:hover):not(.active) .accordion-caption .accordion-icon,.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img:not(:hover):not(.active) .accordion-caption h3{ transform:translateY(0); opacity:1 }
.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img:not(:hover):not(.active) .accordion-caption p{ transform:translateY(20px); opacity:0; max-height:0 }
.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img .accordion-item.active .accordion-caption p{ transform:translateY(0); opacity:1; max-height:200px; margin:0 auto }
.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img:hover img,.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img.active img{ transform:scale(1.1) }
.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img:hover .accordion-caption .accordion-icon,.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img:hover .accordion-caption h3,.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img.active .accordion-caption .accordion-icon,.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img.active .accordion-caption h3{ transform:translateY(0); opacity:1; margin:10px 0 }
.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img:hover .accordion-caption p,.solution-oem-part3 .accordion-gallery .accordion-item .accordion-img.active .accordion-caption p{ transform:translateY(0); opacity:1; max-height:200px; margin:0 auto; transition:all .5s ease,transform .5s ease,opacity .5s ease; margin:0 auto !important; text-align:center !important }
.solution-oem-part4{ background:#f1f2f2 }
.solution-oem-part4-cont img{ width:100% }
.solution-oem-part4-cont ul{ display:flex; flex-wrap:wrap; justify-content:space-between; text-align:center }
.solution-oem-part4-cont ul li{ flex:1; font-weight:400; font-size:24px; color:#333; margin-top:32px }
.solution-oem-part3 .page-content,.solution-oem-part4 .page-content{ padding:5% 0 }
.solution-tea-part3{ padding:5% 0 0 0 }
.solution-tea-brand{ display:grid; grid-template-columns:repeat(4,1fr); grid-gap:20px }
.solution-tea-brand-item{ background:#fff; border-radius:17px; border:1px solid #e0e0e0; height:150px; overflow:hidden; display:flex; justify-content:center; align-items:center }
.solution-tea-brand-item:hover img{ transition:all .5s ease; transform:scale(1.05) }
.solution-tea-brand-item img{ max-width:100%; max-height:100%; transition:all .5s ease; object-fit:contain }
@media(max-width:1200px){ .solution-richtext h2{font-size:20px }
.solution-tea-brand{ grid-template-columns:1fr }
.solution-oem-part4-cont ul li{ font-size:16px; margin-top:16px }
}
.products-list{ padding:60px 0 0 0; background-color:#fff }
.products-list .products-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; margin-bottom:40px }
.products-list .products-grid .product-item{ background-color:#fff; border-radius:8px; overflow:hidden; transition:all .3s ease; text-align:center; padding:0; margin-bottom:20px }
.products-list .products-grid .product-item:hover{ transform:translateY(-3px) }
.products-list .products-grid .product-item a{ width:100%; height:100%; display:block; text-decoration:none }
.products-list .products-grid .product-item a .product-img-container{ height:480px; margin-bottom:12px; overflow:hidden; border-radius:17px; background-color:#f8f9fa; display:flex; align-items:center; justify-content:center; border:1px solid #b2b2b2 }
.products-list .products-grid .product-item a .product-img-container img{ width:100%; height:100%; object-fit:cover; transition:all .3s ease }
.products-list .products-grid .product-item a h3{ margin:0; font-size:14px; font-weight:500; color:#333; line-height:1.4; min-height:40px; display:flex; align-items:center; justify-content:center }
.news-list{ display:grid; grid-template-columns:repeat(3,1fr); justify-content:flex-start; flex-wrap:wrap; gap:20px }
.news-list-item{ background:RGBA(242,242,242,1); border-radius:17px; height:600px; overflow:hidden; transform:all .5s ease; position:relative }
.news-list-item h2{ font-size:24px; color:#36ac00; padding:0 32px; margin:40px 0 20px; height:40px; line-height:40px }
.news-list-item p{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; font-size:18px; color:#333; line-height:30px; padding:0 32px; height:90px }
.news-list-item img{ width:100%; height:calc(100% - 220px); object-fit:cover; display:block; margin-top:30px; transition:all .3s ease }
.news-list-item:hover{ box-shadow:0px 11px 73px 0px hsla(0,0%,40%,.34) }
.news-list-item:hover h2{ color:#36ac00 }
.news-list-item:hover img{ transition:filter .3s ease; filter:blur(5px) }
.news-list-item:hover::after{ background:url("../images/icon-plus.png") no-repeat; content:""; display:block; width:60px; height:60px; position:absolute; left:50%; transform:translate(-50%,-50%); top:60%; z-index:33 }
@media(max-width:1200px){ .news-list{grid-template-columns:1fr }
.news-list-item{ width:100% }
}
.social-top{ display:flex; align-items:center; justify-content:space-between; padding:5% 0 3%; border-top:1px solid RGBA(215,215,215,1) }
.social-top-img{ width:48%; height:360px; object-fit:cover; border-radius:17px; display:block; overflow:hidden }
.social-top-img:hover{ transition:all .5s ease }
.social-top-img:hover img{ transform:scale(1.1) }
.social-top-img img{ width:100%; height:100%; transition:all .5s ease; object-fit:cover }
.social-top dl{ width:48% }
.social-top dt{ font-size:28px; color:#444; line-height:44px }
.social-top dd.text{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; font-size:14px; color:dimgray; line-height:28px; margin:40px 0 }
.social-top dd.time{ font-size:20px; color:#444 }
.social-list{ border-top:1px solid #d7d7d7; margin-bottom:5% }
.social-list-item{ display:flex; align-items:center; justify-content:space-between; justify-content:flex-start; border-bottom:1px solid #d7d7d7; padding:18px 0; transition:all .3s ease }
.social-list-item:hover{ color:#36ac00; padding-left:10px }
.social-list-item b{ font-size:18px; color:#36ac00; font-weight:normal }
.social-list-item span{ color:#e4e4e4; margin:0 20px }
.social-list-item p{ font-size:18px; color:#333 }
.social-list-item:hover p{ color:#36ac00 }
@media(max-width:1200px){ .social-top{flex-direction:column }
.social-top-img,.social-top dl{ width:100% }
.social-top-img{ height:auto }
.social-top dl{ margin-top:24px }
.social-top dt{ font-size:18px; line-height:24px }
.social-top dd.text{ margin:16px 0 }
.social-list{ margin-top:8% }
.social-list-item p{ font-size:14px }
}
.honor .honor-part{ margin-bottom:80px; position:relative }
.honor .honor-part .honor-part-title{ font-size:30px; font-weight:normal; color:#333; margin-bottom:30px; position:relative; padding-bottom:12px }
.honor .section-title h2{ font-size:20px }
.honor .section-title p{ font-size:22px; color:#36ac00 }
.honor-part1{ border-radius:8px; height:auto }
.honor-part1-wrap{ position:relative; background:#043c73; padding:44px; border-radius:17px; margin:0 auto }
.honor-part1-wrap::after{ content:""; position:absolute; background:url("../images/bg-cup.png"); background-size:contain; width:512px; height:512px; right:0; top:-100px }
.honor-part1 dl{ width:70% }
.honor-part1 dl dt{ font-size:24px; color:#fff; line-height:1.6 }
.honor-part1 dl dd{ font-size:16px; color:#fff; line-height:1.8; margin-top:24px; text-align:justify }
.honor-part2 .honor-swiper-container{ width:100%; position:relative }
.honor-part2 .honor-swiper-container .honors-swiper{ width:100%; padding:20px 0 }
.honor-part2 .honor-swiper-container .honors-swiper .swiper-slide{ display:flex; flex-direction:column; align-items:center; transition:transform .3s ease }
.honor-part2 .honor-swiper-container .honors-swiper .honor-item{ border-radius:8px; overflow:hidden; transition:all .3s ease; width:100% }
.honor-part2 .honor-swiper-container .honors-swiper .honor-item:hover{ transform:translateY(-5px) }
.honor-part2 .honor-swiper-container .honors-swiper .honor-item .honor-img-wrapper{ width:100%; height:300px; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:15px; background:#eee; border-radius:17px }
.honor-part2 .honor-swiper-container .honors-swiper .honor-item .honor-img-wrapper img{ max-width:100%; max-height:100%; object-fit:contain; transition:transform .3s ease }
.honor-part2 .honor-swiper-container .honors-swiper .honor-item .honor-name{ margin:30px 0 40px 0; text-align:center; font-size:14px; font-weight:500; color:#666; line-height:1.4 }
.honor-part2 .honor-swiper-container .honors-swiper .swiper-button-prev,.honor-part2 .honor-swiper-container .honors-swiper .swiper-button-next{ width:40px; height:40px; background-color:hsla(0,0%,100%,.9); border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.15); color:#36ac00; top:50%; transform:translateY(-50%); transition:all .3s ease }
.honor-part2 .honor-swiper-container .honors-swiper .swiper-button-prev::after,.honor-part2 .honor-swiper-container .honors-swiper .swiper-button-next::after{ font-size:18px; font-weight:bold }
.honor-part2 .honor-swiper-container .honors-swiper .swiper-button-prev:hover,.honor-part2 .honor-swiper-container .honors-swiper .swiper-button-next:hover{ background-color:#36ac00; color:#fff }
.honor-part2 .honor-swiper-container .honors-swiper .swiper-button-prev{ left:-20px }
.honor-part2 .honor-swiper-container .honors-swiper .swiper-button-next{ right:-20px }
.honor-part2 .honor-swiper-container .honors-swiper .swiper-pagination{ bottom:-30px }
.honor-part2 .honor-swiper-container .honors-swiper .swiper-pagination .swiper-pagination-bullet{ width:10px; height:10px; background-color:#ddd; opacity:1; margin:0 5px; transition:all .3s ease }
.honor-part2 .honor-swiper-container .honors-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background-color:#36ac00; width:24px; border-radius:5px }
.honor-part2 .swiper-scrollbar-drag{ height:4px; background:#36ac00 }
.honor-part2 .swiper-horizontal>.swiper-scrollbar{ height:4px }
.honor-part3{ width:100%; background-repeat:no-repeat; background-position:center right; background-size:100% auto; padding:5% 0 }
.honor-part3 .container{ height:100%; display:flex; flex-direction:column; justify-content:center }
.honor-part3 dl{ width:70%; margin-top:5% }
.honor-part3 dl.first{ margin-top:0 }
.honor-part3 dl.first dd{ font-size:20px; color:#444 }
.honor-part3 dt{ font-size:30px; margin-bottom:12px; color:#36ac00 }
.honor-part3 dd{ font-size:14px; color:dimgray; line-height:36px }
.honor-part4 .standards-swiper-container{ width:100%; position:relative }
.honor-part4 .standards-swiper-container .standards-swiper{ width:100% }
.honor-part4 .standards-swiper-container .standards-swiper .swiper-slide{ display:flex; justify-content:center }
.honor-part4 .standards-swiper-container .standards-swiper .standard-item{ width:100%; margin-top:10px }
.honor-part4 .standards-swiper-container .standards-swiper .standard-card{ width:100%; background:#fff; border-radius:17px; overflow:hidden; transition:all .3s ease; height:100%; display:flex; flex-direction:column }
.honor-part4 .standards-swiper-container .standards-swiper .standard-card:hover{ transform:translateY(-5px) }
.honor-part4 .standards-swiper-container .standards-swiper .standard-card .standard-img{ width:100%; height:320px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#e5e5e5 }
.honor-part4 .standards-swiper-container .standards-swiper .standard-card .standard-img img{ max-width:100%; max-height:100%; object-fit:contain; transition:transform .3s ease }
.honor-part4 .standards-swiper-container .standards-swiper .standard-card .standard-img img:hover{ transform:scale(1.05) }
.honor-part4 .standards-swiper-container .standards-swiper .standard-card .standard-titles{ background:#36ac00; padding:20px; color:#fff; font-size:14px; line-height:24px; height:162px; position:relative }
.honor-part4 .standards-swiper-container .standards-swiper .standard-card .standard-titles::after{ content:""; display:block; background:url("../images/bg-honor-part4-1.png") no-repeat; background-size:100% 100%; position:absolute; bottom:0; right:0; width:100px; height:78.5px; z-index:1 }
.honor-part4 .standards-swiper-container .standards-swiper .standard-card .standard-titles h3{ margin-top:10px }
.honor-part4 .standards-swiper-container .standards-swiper .standard-card .standard-titles h3,.honor-part4 .standards-swiper-container .standards-swiper .standard-card .standard-titles h4,.honor-part4 .standards-swiper-container .standards-swiper .standard-card .standard-titles h5{ font-weight:normal }
.honor-part4 .standards-swiper-container .standards-swiper .standard-card .standard-titles h5::after{ margin-top:20px; width:10%; content:""; display:block; border-bottom:2px solid #fff }
.honor-part4 .standards-swiper-container .standards-swiper .swiper-button-prev,.honor-part4 .standards-swiper-container .standards-swiper .swiper-button-next{ width:40px; height:40px; background-color:hsla(0,0%,100%,.9); border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.15); color:#36ac00; top:50%; transform:translateY(-50%); transition:all .3s ease }
.honor-part4 .standards-swiper-container .standards-swiper .swiper-button-prev::after,.honor-part4 .standards-swiper-container .standards-swiper .swiper-button-next::after{ font-size:18px; font-weight:bold }
.honor-part4 .standards-swiper-container .standards-swiper .swiper-button-prev:hover,.honor-part4 .standards-swiper-container .standards-swiper .swiper-button-next:hover{ background-color:#36ac00; color:#fff }
.honor-part4 .standards-swiper-container .standards-swiper .swiper-button-prev{ left:-20px }
.honor-part4 .standards-swiper-container .standards-swiper .swiper-button-next{ right:-20px }
.honor-part4 .standards-swiper-container .standards-swiper .swiper-pagination{ bottom:-30px }
.honor-part4 .standards-swiper-container .standards-swiper .swiper-pagination .swiper-pagination-bullet{ width:10px; height:10px; background-color:#ddd; opacity:1; margin:0 5px; transition:all .3s ease }
.honor-part4 .standards-swiper-container .standards-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background-color:#36ac00; width:24px; border-radius:5px }
@media(max-width:1200px){ .honor{margin-bottom:0 }
.honor .honor-part .honor-part-title{ font-size:22px; margin-bottom:0 }
.honor-part1{ padding:0 }
.honor-part1-wrap::after{ display:none }
.honor-part1-wrap dl{ width:100% }
.honor-part1-wrap dl dt{ font-size:22px }
.honor-part1-wrap dl dd{ font-size:15px }
.honor-part2 .swiper-button-prev,.honor-part4 .swiper-button-prev{ left:0 }
.honor-part2 .swiper-button-next,.honor-part4 .swiper-button-next{ right:0 }
.honor-part3{ background:none }
.honor-part3 dl{ width:100% }
.honor-part3 dt{ font-size:20px }
.honor-part3 .patents-grid{ grid-template-columns:repeat(3,1fr); gap:25px }
}
.product .product-categories{ margin-bottom:40px; position:relative }
.product .product-ad{ width:100% }
.product .product-ad img{ width:100% }
.product .category-swiper{ position:relative; width:100%; height:140px }
.product .category-swiper .swiper-wrapper{ align-items:center }
.product .category-swiper a{ width:100%; height:140px; box-shadow:0px 0px 10px 0px rgba(178,178,178,.5); border-radius:17px; color:#666; text-decoration:none; border-radius:20px; font-size:14px; white-space:nowrap; transition:all .3s ease; background-color:#f5f5f5; display:flex; flex-direction:column; align-items:center; justify-content:center }
.product .category-swiper a p{ margin-top:12px }
.product .category-swiper a:hover,.product .category-swiper a.active{ color:#36ac00; background-color:rgba(58,123,213,.1) }
.product .swiper-button-prev,.product .swiper-button-next{ width:30px; height:30px; background-color:#fff; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.15); top:50%; transform:translateY(-50%) }
.product .swiper-button-prev:before,.product .swiper-button-next:before{ font-size:14px; color:#666 }
.product .swiper-button-prev:hover,.product .swiper-button-next:hover{ background-color:#f5f5f5 }
.product .swiper-button-prev{ left:-5px }
.product .swiper-button-next{ right:-5px }
@media(max-width:1200px){ .product-categories .swiper-button-prev{left:0 }
.product-categories .swiper-button-next{ right:0 }
.product-categories .swiper-button-next,.product-categories .swiper-button-prev{ top:60% }
.product-categories .swiper-button-next::after,.product-categories .swiper-button-prev::after{ font-size:12px }
.products-list .products-grid{ grid-template-columns:1fr; gap:20px }
.products-list .products-grid .product-item a .product-img-container{ width:100% }
}
.news-detail{ display:flex; align-items:center; justify-content:space-between; align-items:flex-start }
.news-detail-left{ flex:1 }
.news-detail-left .news-header{ padding-bottom:30px; margin-bottom:30px; border-bottom:1px solid #e4e4e4 }
.news-detail-left .news-header h1{ font-size:28px; color:#333; line-height:1.4; margin:0 0 20px 0; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical }
.news-detail-left .news-header .news-meta{ display:flex; flex-wrap:wrap; margin-bottom:20px }
.news-detail-left .news-header .news-meta .time{ font-size:16px; color:#36ac00 }
.news-detail-left .news-header .news-meta .line{ margin:0 10px }
.news-detail-left .news-header .news-meta span{ display:inline-block; font-size:16px; color:#a3a3a3 }
.news-detail-left .news-content{ font-size:14px; line-height:1.8; color:#666; margin-bottom:20px; overflow:hidden }
.news-detail-left .news-content img{ max-width:100%; height:auto; border-radius:4px; margin:20px 0 }
.news-detail-left .news-next-prev{ margin:40px 0; border-bottom:1px solid #e4e4e4 }
.news-detail-left .news-next-prev a{ display:flex; align-items:center; justify-content:flex-start; padding:12px 20px; border-top:1px solid #e4e4e4; transition:all .3s ease }
.news-detail-left .news-next-prev a span{ font-size:16px; color:#333 }
.news-detail-left .news-next-prev a span:first-child{ width:60px; display:block }
.news-detail-left .news-next-prev a span.line{ margin:0 20px; color:#e4e4e4 }
.news-detail-left .news-next-prev a p{ width:calc(100% - 100px); font-size:16px; color:#666; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical }
.news-detail-right{ width:320px; margin-left:40px; margin-top:130px }
.news-detail-right .recommended-news{ border:1px solid #e4e4e4; border-radius:8px; overflow:hidden }
.news-detail-right .recommended-news h3{ display:flex; align-items:center; justify-content:space-between; background:#36ac00; padding:0 20px; height:60px; font-size:18px; color:#fff; margin:0; font-size:16px }
.news-detail-right .recommended-news h3 img{ width:40px; height:40px; display:block; margin:0 5px }
.news-detail-right .recommended-news h3 div{ display:flex; align-items:center; justify-content:space-between }
.news-detail-right .recommended-news h3 div a{ color:#fff; margin:0 10px }
.news-detail-right .recommended-news h3 div .next{ transform:rotate(180deg) }
.news-detail-right .recommended-news .item{ padding:30px; transition:all .3s ease; display:block }
.news-detail-right .recommended-news .item img{ width:100%; height:160px; object-fit:cover; border-radius:4px }
.news-detail-right .recommended-news .item h4{ font-size:16px; color:#333; line-height:1.5; margin:20px 0; font-weight:500 }
.news-detail-right .recommended-news .item h5{ font-size:14px; color:#929292; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical }
.news-detail-right .recommended-news .item p{ font-size:16px; color:#525252; margin-top:20px }
.news-detail-right .recommended-news .swiper-button-prev,.news-detail-right .recommended-news .swiper-button-next{ position:absolute; top:10px; color:#fff }
.news-detail-right .recommended-news .swiper-button-prev::after,.news-detail-right .recommended-news .swiper-button-next::after{ display:none }
.news-detail-right .recommended-news .swiper-button-prev{ left:75% }
.news-detail-right .recommended-news .swiper-button-next{ right:30; transform:rotate(180deg) }
.news-detail-right .share-links{ margin-top:40px; display:flex; align-items:center; justify-content:center; justify-content:flex-start; font-size:14px; color:#929292 }
.news-detail-right .share-links p{ margin-right:10px }
.news-detail-right .share-links img{ width:20px; height:20px; display:block; margin:0 2px }
@media(max-width:1200px){ .news-detail{flex-direction:column }
.news-detail-left .news-header{ padding-bottom:20px; margin-bottom:20px }
.news-detail-left .news-header h1{ font-size:20px }
.news-detail-left .news-header .news-meta{ margin-bottom:0 }
.news-detail-right{ width:100%; margin-left:0 }
}
.nav-modal{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:1000; visibility:hidden; opacity:0; transition:visibility 0s .3s,opacity .3s }
.nav-modal.active{ visibility:visible; opacity:1; transition:visibility 0s,opacity .3s }
.nav-modal .nav-modal-overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); transition:background .3s }
.nav-modal .nav-modal-content{ position:absolute; top:0; right:-400px; width:320px; height:100%; background:#fff; box-shadow:-5px 0 15px rgba(0,0,0,.1); transition:right .3s cubic-bezier(0.77,0.2,0.05,1); display:flex; flex-direction:column; overflow:hidden }
.nav-modal.active .nav-modal .nav-modal-content{ right:0 }
.nav-modal .nav-modal-header{ display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid #ccc }
.nav-modal .nav-modal-header .nav-modal-logo img{ max-height:40px }
.nav-modal .nav-modal-header .nav-modal-close{ width:30px; height:30px; position:relative; cursor:pointer; background:none; border:none; padding:0 }
.nav-modal .nav-modal-header .nav-modal-close span{ position:absolute; top:50%; left:50%; width:20px; height:2px; background:#666; transform:translate(-50%,-50%) rotate(45deg); transition:background .3s }
.nav-modal .nav-modal-header .nav-modal-close span:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg) }
.nav-modal .nav-modal-header .nav-modal-close:hover span{ background:#36ac00 }
.nav-modal .nav-modal-menu{ flex:1; overflow-y:auto; padding:20px 0 }
.nav-modal .nav-modal-menu li{ position:relative }
.nav-modal .nav-modal-menu li>a{ display:flex; justify-content:space-between; align-items:center; padding:15px 20px; color:#666; font-size:16px; transition:all .3s }
.nav-modal .nav-modal-menu li>a:hover,.nav-modal .nav-modal-menu li>a.active{ color:#36ac00; background:rgba(54,172,0,.05) }
.nav-modal .nav-modal-menu li>a b{ font-weight:600 }
.nav-modal .nav-modal-dropdown .nav-modal-dropdown-menu{ max-height:0; overflow:hidden; transition:max-height .3s ease-out; background:#f9f9f9 }
.nav-modal .nav-modal-dropdown .nav-modal-dropdown-menu.active{ max-height:500px; transition:max-height .5s ease-in }
.nav-modal .nav-modal-dropdown .nav-modal-dropdown-menu li a{ display:block; padding:12px 20px 12px 40px; color:#666; font-size:14px; transition:all .3s }
.nav-modal .nav-modal-dropdown .nav-modal-dropdown-menu li a:hover{ color:#36ac00; padding-left:45px }
.nav-modal .nav-modal-dropdown .nav-modal-dropdown-toggle{ position:absolute; right:0; top:0; width:60px; height:100%; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; z-index:1 }
.nav-modal .nav-modal-dropdown .nav-modal-dropdown-toggle .nav-modal-dropdown-arrow{ position:relative; width:8px; height:8px; border-right:2px solid #666; border-bottom:2px solid #666; transform:rotate(45deg); transition:all .3s }
.nav-modal .nav-modal-dropdown .nav-modal-dropdown-toggle.active .nav-modal-dropdown-arrow{ transform:rotate(225deg); border-color:#36ac00 }
.nav-modal .nav-modal-footer{ padding:20px; border-top:1px solid #e0e0e0; text-align:center }
.nav-modal .nav-modal-footer .nav-modal-tel{ font-size:16px; color:#36ac00; font-weight:600 }
.menu-toggle{ display:block; width:52px; height:24px; position:relative; border:none; cursor:pointer; z-index:1001; background:url("../images/icon-more.png") no-repeat; margin-left:10px }
@media(max-width:768px){ .nav-modal-content{width:80%; max-width:320px }
}
.home{ padding:5% 0 0 0 }
.home-banner{ width:100%; position:relative }
.home-banner-img{ width:100% }
.home-banner .swiper-button-prev{ left:4% }
.home-banner .swiper-button-next{ right:4% }
.home-banner .swiper-pagination{ width:98%; color:#fff; right:20px; top:50%; text-align:right; margin-right:40px; font-size:24px }
.home-banner-scroll{ display:block; position:absolute; left:50%; bottom:20px; transform:translateX(-50%); cursor:pointer; z-index:4; animation:fadeInOut 2s infinite ease-in-out }
@keyframes fadeInOut{ 0%{opacity:.6; transform:translateX(-50%) translateY(0) }
50%{ opacity:1; transform:translateX(-50%) translateY(-10px) }
100%{ opacity:.6; transform:translateX(-50%) translateY(0) }
}
.home .section-header{ text-align:center; margin-bottom:60px; position:relative }
.home .section-header h2{ font-size:42px; color:#0f62ac; margin-bottom:16px; position:relative; display:inline-block }
.home .section-header h3{ font-size:32px; color:#0f62ac }
.home .section-header p{ font-size:30px; color:#363636; margin-top:24px }
.home .btn-more{ width:180px; display:flex; justify-content:space-between; align-items:center; height:44px; line-height:44px; color:#898989; padding:0 20px; text-decoration:none; border-radius:4px; font-size:14px; transition:all .3s ease; border:1px solid #dcdcdc; font-weight:normal }
.home .btn-more::after{ content:""; width:12px; height:2px; background:#898989; display:block }
.home .btn-more:hover{ transform:translateY(-2px) }
.home .btn-more.center{ margin:40px auto 0 }
.home .btn-submit{ display:inline-block; padding:14px 40px; background:#36ac00; color:#fff; border:none; border-radius:4px; font-size:16px; font-weight:500; cursor:pointer; transition:all .3s ease; width:100% }
.home .btn-submit:hover{ background:rgb(45.9941860465,146.5,0); transform:translateY(-2px); box-shadow:0 6px 16px rgba(54,172,0,.3) }
.home .about-us{ padding:0 0 80px 0; background:#fff }
.home .about-us .about-content{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center }
.home .about-us .about-content .about-text-title{ font-size:42px; color:#0f62ac; margin-bottom:20px }
.home .about-us .about-content .about-text p{ font-size:14px; color:#000; line-height:1.8; margin-bottom:20px }
.home .about-us .about-content .about-text .btn-more{ margin-top:40px }
.home .about-us .about-content .about-stats video{ width:100%; height:370px; object-fit:cover }
.home .product-center{ padding:80px 0; background:#f3f7fb }
.home .product-center .product-layout{ display:flex; gap:40px; align-items:flex-start }
.home .product-center .product-left{ width:30% }
.home .product-center .product-left h2{ font-size:42px; color:#0f62ac; margin-bottom:20px }
.home .product-center .product-left p{ font-size:16px; color:#333; opacity:.8; line-height:1.8; margin-bottom:30px }
.home .product-center .product-left .product-search{ position:relative; margin:40px 0; display:flex; background:#e2e4e6; width:70% }
.home .product-center .product-left .product-search input{ width:90%; padding:12px 50px 12px 20px; border:1px solid #e0e0e0; font-size:14px; transition:all .3s ease; display:block; background:none; box-sizing:border-box }
.home .product-center .product-left .product-search .search-btn{ width:15%; display:flex; justify-content:center; align-items:center }
.home .product-center .product-left .product-search .search-btn::after{ content:""; display:block; background:url("../images/icon-search.png") no-repeat; width:21px; height:20px }
.home .product-center .product-right{ width:68%; padding:20px }
.home .product-center .product-right .product-swiper{ width:100%; height:400px }
.home .product-center .product-right .product-swiper .swiper-slide{ text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#f5f5f5; border-radius:17px; overflow:hidden; position:relative; padding-bottom:40px }
.home .product-center .product-right .product-swiper .swiper-slide img{ width:100%; height:100%; object-fit:cover; transition:all .3s ease; border-radius:17px; overflow:hidden; display:block }
.home .product-center .product-right .product-swiper .swiper-slide span{ position:absolute; bottom:0; left:0; width:100%; padding:15px; background:rgba(0,0,0,.7); color:#fff; font-size:16px; font-weight:500; transform:translateY(100%); transition:all .3s ease }
.home .product-center .product-right .product-swiper .swiper-slide:hover span{ transform:translateY(0) }
.home .product-center .product-right .product-swiper .swiper-scrollbar{ width:100%; background:#e2e4e6; height:2px }
.home .product-center .product-right .product-swiper .swiper-scrollbar .swiper-scrollbar-drag{ background:#0f62ac }
.home .product-center .product-right .product-swiper .swiper-pagination{ bottom:0px; text-align:right; color:#5d6d7d; display:none }
.home .news{ padding:80px 0; background:#fff }
.home .news-cards{ width:90%; margin:0 auto; max-width:1680px }
.home .news-cards .news-card{ width:100%; background:#fff; border-radius:17px; overflow:hidden; transition:all .3s ease; display:block }
.home .news-cards .news-card-img{ width:100%; height:240px; object-fit:cover; border-radius:17px; overflow:hidden; display:block }
.home .news-cards .news-card-img img{ width:100%; height:100%; object-fit:cover; transition:all .3s ease }
.home .news-cards .news-card:hover{ overflow:hidden }
.home .news-cards .news-card:hover img{ transform:scale(1.05) }
.home .news-cards .news-card .news-content{ padding:40px 0 25px }
.home .news-cards .news-card .news-content h3{ font-size:20px; color:#363636; margin-bottom:30px; font-weight:400; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.home .news-cards .news-card .news-content p{ font-size:13px; color:#929292; line-height:1.6; margin-bottom:20px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical }
.home .news-cards .news-card .news-content .time{ font-size:20px; color:#363636 }
.home .news-cards .swiper-button-next,.home .news-cards .swiper-button-prev{ background:#fff; border:1px solid #dcdcdc; border-radius:50%; width:46px; height:46px; overflow:hidden; color:#fff }
.home .news-cards .swiper-button-next::after,.home .news-cards .swiper-button-prev::after{ font-size:18px; font-weight:bold; color:#6e6e6e }
.home .news-cards .swiper-button-next{ right:0 }
.home .news-cards .swiper-button-prev{ left:0 }
.home .partners{ padding:80px 0; background:#fff; position:relative; overflow:hidden }
.home .partners .section-header h2{ margin-bottom:0 }
.home .partners .section-header p{ margin-top:30px; line-height:42px }
.home .partners .partner-logos{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; align-items:center; padding:20px 0 }
@keyframes scroll-logos{ 0%{transform:translateY(0) }
50%{ transform:translateY(-5px) }
100%{ transform:translateY(0) }
}
.home .partners .partner-logos .partner-logo{ width:100%; height:100px; display:flex; justify-content:center; align-items:center; transition:all .3s ease; background:#fff; border-radius:17px; border:1px solid #e5e9ea; cursor:pointer; overflow:hidden }
.home .partners .partner-logos .partner-logo img{ max-width:100%; max-height:100%; object-fit:contain }
.home .support-section{ width:100%; background-repeat:no-repeat; background-size:100% auto; padding:0; overflow:hidden }
.home .support-section .section-header{ margin-top:90px }
.home .support-section .section-header h2{ font-size:36px; color:#363636; font-weight:normal }
.home .support-section .section-header p{ font-size:48px; color:#03943e; font-weight:normal; font-family:"Outfit" }
.home .support-section .support-items{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:50px; border-radius:17px; overflow:hidden }
.home .support-section .support-items .support-item{ background:#fff; padding:30px; transition:all .3s ease; position:relative; overflow:hidden; transform-origin:bottom; border-right:1px solid #e5e9ea }
.home .support-section .support-items .support-item:nth-child(n+4){ background:#e5e9ea; border-right:1px solid #fff }
.home .support-section .support-items .support-item:nth-child(3),.home .support-section .support-items .support-item:nth-child(6){ border-right:none }
.home .support-section .support-items .support-item h3{ font-size:24px; color:#333; margin-bottom:15px; font-weight:normal }
.home .support-section .support-items .support-item .support-line{ height:3px; width:40px; background:#36ac00; margin-bottom:20px; border-radius:3px }
.home .support-section .support-items .support-item p{ color:#666; font-size:16px; line-height:1.6 }
.home .cooperation-model{ padding:80px 0; position:relative; width:100%; background-repeat:no-repeat; background-size:cover; height:730px; padding:0 }
.home .cooperation-model .model-items{ display:grid; grid-template-columns:repeat(4,1fr); position:relative; z-index:1; height:730px }
.home .cooperation-model .model-items .model-item{ box-sizing:border-box; height:100%; text-align:center; border-right:1px solid #e5e9ea; display:flex; align-items:flex-end; position:relative; overflow:hidden }
.home .cooperation-model .model-items .model-item .model-icon{ width:80px; height:80px; margin:0 0 20px 0; background:#fff; border-radius:17px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden }
.home .cooperation-model .model-items .model-item .model-icon::before{ content:""; position:absolute; top:-10px; left:-10px; right:-10px; bottom:-10px; background:#fff; z-index:0; opacity:0; transition:opacity .3s }
.home .cooperation-model .model-items .model-item .model-icon img{ width:40px; height:40px; object-fit:contain; position:relative; z-index:1 }
.home .cooperation-model .model-items .model-item:hover .model-icon::before{ opacity:1 }
.home .cooperation-model .model-items .model-item:hover .model-item-content{ background:#fff }
.home .cooperation-model .model-items .model-item h3{ font-size:24px; color:#fff; margin-bottom:20px; position:relative; text-align:left; padding-bottom:15px }
.home .cooperation-model .model-items .model-item h3::after{ content:""; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); width:100%; height:1px; background:#dcdcdc; opacity:0 }
.home .cooperation-model .model-items .model-item p{ font-size:14px; color:#666; line-height:1.6; margin-top:20px; text-align:left; height:120px; line-height:30px; opacity:0 }
.home .cooperation-model .model-items .model-item-content{ padding:30px; transition:all .3s ease; width:100%; position:absolute; bottom:0; left:0; right:0; transform:translateY(calc(100% - 220px)); transition:transform .4s cubic-bezier(0.4,0,0.2,1); overflow:hidden }
.home .cooperation-model .model-items .model-item-content:hover{ background:#fff }
.home .cooperation-model .model-items .model-item-content p{ opacity:0; transform:translateY(20px); transition:all .3s ease .1s }
.home .cooperation-model .model-items .model-item-content.slide-up-active{ transform:translateY(0) }
.home .cooperation-model .model-items .model-item-content.slide-up-active p{ opacity:1; transform:translateY(0) }
.home .cooperation-model .model-items .model-item-content.slide-up-active h3{ color:#333 }
.home .cooperation-model .model-items .model-item-content.slide-up-active h3::after{ opacity:1 }
.home .cooperation-model .model-items .model-item-content.slide-up-active .model-icon{ background:#0f62ac }
.home .cooperation-model .model-items .model-item-content.slide-up-active .model-icon::before{ background:#0f62ac }
.home .cooperation-model .model-items .model-item-content.slide-up-active .model-icon img{ filter:brightness(0) invert(1) }
.home .cooperation-model .model-items .model-item-content:hover{ transform:translateY(0) }
.home .cooperation-model .model-items .model-item-content:hover p{ opacity:1; transform:translateY(0) }
.home .cooperation-model .model-items .model-item-content:hover h3{ color:#333 }
.home .cooperation-model .model-items .model-item-content:hover h3::after{ opacity:1 }
.home .cooperation-model .model-items .model-item-content:hover .model-icon{ background:#0f62ac }
.home .cooperation-model .model-items .model-item-content:hover .model-icon::before{ background:#0f62ac }
.home .cooperation-model .model-items .model-item-content:hover .model-icon img{ filter:brightness(0) invert(1) }
.home .contact-us{ padding:80px 0; background:#dcdcdc }
.home .contact-us .contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:100px; padding:40px; border-radius:8px }
.home .contact-us .contact-form .form-left h3{ font-size:42px; color:#0f62ac; margin-bottom:16px }
.home .contact-us .contact-form .form-left p{ font-size:30px; color:#363636; line-height:1.6; margin-bottom:30px }
.home .contact-us .contact-form .form-left .contact-info{ height:424px; border-radius:17px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end }
.home .contact-us .contact-form .form-left .contact-info .info-item{ padding:0 40px; display:flex; align-items:center; margin-bottom:20px }
.home .contact-us .contact-form .form-left .contact-info .info-item:last-child{ margin-bottom:50px }
.home .contact-us .contact-form .form-left .contact-info .info-item-right{ margin-left:12px; width:calc(100% - 50px) }
.home .contact-us .contact-form .form-left .contact-info .info-item .info-label{ color:#fff; display:block; font-size:16px }
.home .contact-us .contact-form .form-left .contact-info .info-item .info-value{ color:#fff; font-size:16px; line-height:1.6 }
.home .contact-us .contact-form .form-right{ background:#fff; border-radius:17px; overflow:hidden; padding:40px 60px }
.home .contact-us .contact-form .form-right form .form-group{ display:flex; flex-wrap:wrap; justify-content:space-between }
.home .contact-us .contact-form .form-right form .form-group-item{ width:48%; margin-bottom:20px }
.home .contact-us .contact-form .form-right form .form-group-item p{ font-size:16px; color:#333; margin-bottom:10px }
.home .contact-us .contact-form .form-right form .form-group-item.textarea{ width:100%; margin-bottom:20px }
.home .contact-us .contact-form .form-right form .form-group-item.code img{ height:48px; margin-top:30px }
.home .contact-us .contact-form .form-right form .form-group input,.home .contact-us .contact-form .form-right form .form-group textarea{ width:100%; padding:14px 16px; border:1px solid #e0e0e0; border-radius:0; font-size:16px; transition:all .3s ease }
.home .contact-us .contact-form .form-right form .form-group input:focus,.home .contact-us .contact-form .form-right form .form-group textarea:focus{ outline:none; border-color:#36ac00; box-shadow:0 0 0 3px rgba(54,172,0,.1) }
.home .contact-us .contact-form .form-right form .form-group input::placeholder,.home .contact-us .contact-form .form-right form .form-group textarea::placeholder{ color:#666 }
.home .contact-us .contact-form .form-right form .form-group textarea{ min-height:120px; resize:vertical }
.home .contact-us .contact-form .form-right form .btn-submit{ width:48%; background:#0f62ac; height:60px; font-size:16px; border-radius:0 }
.home .contact-us .contact-form .form-right form .btn-submit:hover{ box-shadow:none }
@media(max-width:1200px){ .home .about-content{gap:30px !important }
.home .solution-cards{ grid-template-columns:repeat(2,1fr) !important }
.home .news-list{ grid-template-columns:repeat(2,1fr) !important }
.home .partner-logos{ grid-template-columns:repeat(4,1fr) !important }
}
@media(max-width:992px){ .home .about-content{grid-template-columns:1fr !important }
.home .about-stats{ margin-top:30px }
.home .product-showcase{ grid-template-columns:repeat(2,1fr) !important }
.home .partner-logos{ grid-template-columns:repeat(3,1fr) !important }
.home .contact-form{ grid-template-columns:1fr !important }
.home .form-left{ text-align:center }
.home .contact-info{ display:inline-block; text-align:left }
}
@media(max-width:768px){ .home .support-section .support-items{grid-template-columns:1fr !important; gap:20px !important }
.home .support-section .support-item{ padding:25px !important }
.home .support-section .support-item h3{ font-size:18px !important }
.home .support-section .support-item p{ font-size:15px !important }
.home .section-header h2{ font-size:28px !important }
.home .product-categories{ grid-template-columns:1fr !important }
.home .solution-cards{ grid-template-columns:1fr !important }
.home .news-list{ grid-template-columns:1fr !important }
.home .partner-logos{ grid-template-columns:repeat(2,1fr) !important }
.home .contact-form{ padding:30px !important }
}
@media(max-width:576px){ .home .section-header h2{font-size:24px !important }
.home .about-stats{ grid-template-columns:1fr !important }
.home .product-showcase{ grid-template-columns:1fr !important }
.home .partner-logos{ grid-template-columns:1fr !important }
}
@media(max-width:1200px){ .home-banner-scroll{display:none }
.home .section-header{ margin-bottom:20px }
.home .section-header h3{ font-size:24px }
.home .about-us{ padding-bottom:40px }
.home .about-us .about-content .about-text-title{ font-size:22px }
.home .about-us .about-stats{ margin-top:0 }
.home .product-layout{ flex-direction:column }
.home .product-layout .product-left{ width:100% }
.home .product-layout .product-right{ width:100%; padding:0 }
.home .product-center{ padding:40px 0 }
.home .product-center .product-left h2{ font-size:22px }
.home .product-center .product-right .product-swiper .swiper-pagination{ bottom:10px }
.home .support-section .section-header p{ font-size:24px; margin-top:0 }
.home .support-section .support-items{ margin-top:0 }
.home .support-section .support-items .support-item{ background:#e5e9ea !important; border-radius:17px }
.home .cooperation-model{ background-size:cover; padding:30px 0; height:820px }
.home .cooperation-model .model-items{ grid-template-columns:repeat(1,1fr) }
.home .cooperation-model .model-items .model-item-content{ transform:translateY(calc(100% - 180px)) }
.home .cooperation-model .model-items .model-item h3{ padding-bottom:0; margin-bottom:0 }
.home .cooperation-model .model-items .model-item p{ margin-top:0 }
.home .cooperation-model .model-items .model-item .model-icon{ width:40px; height:40px; margin-bottom:0; border-radius:10px }
.home .cooperation-model .model-items .model-item .model-icon img{ width:20px; height:20px }
.home .cooperation-model .model-items .model-item p{ opacity:1; color:#fff }
.home .partners{ padding:40px 0 }
.home .section-header p{ font-size:16px; margin-top:0 }
.home .contact-us{ padding:40px 0 }
.home .contact-us .contact-form{ gap:0 !important; padding:0 !important }
.home .contact-us .contact-form .form-left{ width:100% }
.home .contact-us .contact-form .form-left h3{ font-size:22px }
.home .contact-us .contact-form .form-left p{ font-size:16px }
.home .contact-us .contact-form .form-right{ width:100%; margin-top:20px; padding:20px }
.home .contact-us .contact-form .form-right form .form-group-item{ width:100% }
.home .contact-us .contact-form .form-right form .btn-submit{ height:40px; line-height:40px; padding:0 40px }
.home .news{ padding:20px 0 }
.home .news-cards .swiper-button-next,.home .news-cards .swiper-button-prev{ top:20% }
}
.modal-overlay{ position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .3s ease,visibility .3s ease; z-index:9999 }
.modal-overlay.active{ opacity:1; visibility:visible }
.modal-container{ background-color:#fff; width:100%; height:100%; overflow-y:auto; padding:20px 5%; position:relative; transform:scale(0.9); transition:transform .3s ease }
.modal-overlay.active .modal-container{ transform:scale(1) }
.modal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; padding-bottom:20px }
.modal-logo .logo-black{ max-height:50px }
.modal-search-lang{ display:flex; align-items:center; gap:20px }
.modal-search{ display:flex; align-items:center; border:1px solid #999; border-radius:50px; overflow:hidden }
.search-input{ border:none; padding:8px 12px; outline:none; flex:1; font-size:14px }
.search-btn{ background:none; border:none; padding:8px 12px; cursor:pointer; display:flex; align-items:center; justify-content:center }
.search-btn::after{ background:url("../images/icon-search2.png") no-repeat center center; background-size:16px 16px; content:""; display:block; width:16px; height:16px }
.search-btn img{ width:16px; height:16px }
.modal-language{ display:flex; align-items:center; gap:10px }
.lang-btn{ text-decoration:none; color:#666; font-size:14px; font-weight:500; padding:5px 10px; border-radius:4px; transition:all .3s ease }
.lang-btn.active,.lang-btn:hover{ color:#01933e }
.modal-close{ background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; width:49px; height:24px; transition:background-color .3s ease; margin-left:10px }
.modal-close img{ width:49px; height:24px }
.modal-content{ display:grid; grid-template-columns:1fr; gap:40px; max-width:1200px }
.modal-content-list{ display:grid; grid-template-columns:1fr 2fr; gap:40px }
.modal-column{ display:grid; gap:40px; grid-template-columns:1fr 1fr }
.modal-column.active{ grid-template-columns:1fr }
.modal-column.active dl dd{ display:flex; gap:0 }
.modal-column.active dl dd a{ display:block; width:50%; line-height:50px }
.modal-column dl{ margin-bottom:30px; flex-wrap:wrap; border-bottom:1px solid #999; padding-bottom:30px }
.modal-column dt{ font-size:18px; font-weight:bold; margin-bottom:15px; color:#333; font-family:"Outfit" }
.modal-column dd{ display:flex; flex-wrap:wrap; gap:15px }
.modal-column a{ color:#666; text-decoration:none; transition:color .3s; white-space:nowrap }
.modal-column a:hover{ color:#08c }
.modal-product-center,.modal-contact-us{ margin-bottom:30px }
.modal-product-center img,.modal-contact-us img{ width:520px; height:210px; border-radius:17px; overflow:hidden; display:block }
.modal-product-center h3,.modal-contact-us h3{ font-size:18px; font-weight:bold; margin-bottom:10px; color:#333 }
.modal-product-center p,.modal-contact-us p{ color:#666; margin-bottom:15px; font-size:14px }
@media(max-width:1024px){ .modal-content{grid-template-columns:1fr 1fr }
.modal-column{ grid-template-columns:1fr }
}
@media(max-width:768px){ .modal-container{width:95%; padding:20px; margin:10px }
.modal-header{ flex-direction:column; gap:20px; align-items:stretch }
.modal-search-lang{ flex-direction:column; gap:15px; margin-right:0 }
.modal-search{ width:100% }
.modal-content{ grid-template-columns:1fr; gap:30px }
.modal-column{ gap:30px }
.modal-column dl{ padding-bottom:20px; margin-bottom:20px }
.modal-column dt{ font-size:16px }
.modal-column dd{ gap:10px }
.modal-column a{ font-size:14px }
.modal-column.active dl dd a{ width:100% }
.modal-product-center img,.modal-contact-us img{ height:180px }
.search-input{ font-size:13px; padding:7px 10px }
.search-btn{ padding:7px 10px }
}
@media(max-width:480px){ .modal-container{width:100%; max-width:100%; height:100%; max-height:100%; border-radius:0; padding:15px; margin:0 }
.modal-header{ padding-bottom:15px; margin-bottom:20px }
.modal-logo .logo-black{ max-height:40px }
.modal-content{ gap:25px }
.modal-column{ gap:25px }
.modal-column dl{ padding-bottom:15px; margin-bottom:15px }
.modal-column dt{ font-size:15px; margin-bottom:10px }
.modal-column dd{ gap:8px }
.search-input{ font-size:12px }
.lang-btn{ font-size:13px; padding:4px 8px }
}
.production-scale{ padding:60px 0 }
.production-scale .section-title p.desc{ font-size:14px; color:dimgray; line-height:24px }
.production-scale .section-title p.desc.active{ width:80%; margin:0 auto }
.production-scale .section-title.active{ margin-bottom:3% }
.production-scale .section-title.base h2{ font-size:20px }
.production-scale .section-title.base p{ font-size:22px }
.production-scale .section-overview{ padding:60px 0; background:#f3f7fb }
.production-scale .section-overview .overview-content{ width:90%; max-width:1680px; position:relative; margin:0 auto }
.production-scale .section-overview .overview-swiper-container{ position:relative; width:100%; overflow:hidden }
.production-scale .section-overview .overview-swiper-container .swiper-wrapper{ height:100% }
.production-scale .section-overview .overview-swiper-container .swiper-slide{ height:100% }
.production-scale .section-overview .overview-swiper-container .swiper-slide .section-title{ margin-bottom:36px }
.production-scale .section-overview .overview-swiper-container .swiper-slide img{ width:100%; height:584px; border-radius:8px; object-fit:cover; transition:transform .5s ease; display:block }
.production-scale .section-overview .overview-swiper-container .swiper-slide .section-title p{ font-size:14px; color:dimgray; line-height:24px; text-transform:none }
.production-scale .section-overview .swiper-button-prev,.production-scale .section-overview .swiper-button-next{ position:absolute; top:60%; transform:translateY(-50%); width:40px; height:40px; background-color:hsla(0,0%,100%,.9); border-radius:50%; color:#333; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; transition:all .3s ease; box-shadow:0 2px 8px rgba(0,0,0,.1) }
.production-scale .section-overview .swiper-button-prev::after,.production-scale .section-overview .swiper-button-next::after{ font-size:16px; font-weight:bold }
.production-scale .section-overview .swiper-button-prev{ left:0 }
.production-scale .section-overview .swiper-button-next{ right:0 }
.production-scale .section-process{ background-color:#fff; padding:60px 0 }
.production-scale .section-process .process-diagram{ position:relative; margin:0 auto }
.production-scale .section-process .process-diagram .process-image{ width:100%; height:auto }
.production-scale .section-process.active{ margin-bottom:3% }
.production-scale .section-process.active .process-diagram{ position:relative; border-radius:17px; overflow:hidden }
.production-scale .section-equipment{ background:#f3f7fb; padding:60px 0 }
.production-scale .section-equipment .equipment-list .equipment-item{ display:flex; align-items:center; height:320px; overflow:hidden; border-radius:17px; margin-bottom:40px }
.production-scale .section-equipment .equipment-list .equipment-item:nth-child(odd) dl::after{ left:0; background:url("../images/icon-arrow-left-gray.png") no-repeat }
.production-scale .section-equipment .equipment-list .equipment-item:first-child dl::after{ left:0; background:url("../images/icon-arrow-left3-gray.png") no-repeat }
.production-scale .section-equipment .equipment-list .equipment-item:nth-child(2n){ flex-direction:row-reverse }
.production-scale .section-equipment .equipment-list .equipment-item:nth-child(2n) dl::after{ right:0 }
.production-scale .section-equipment .equipment-list .equipment-item-img{ background:#e7e7e7; width:50%; height:100%; display:flex; justify-content:center; align-items:center }
.production-scale .section-equipment .equipment-list .equipment-item-img img{ width:100%; height:100%; object-fit:contain; display:block }
.production-scale .section-equipment .equipment-list .equipment-item dl{ background:#fff; width:50%; height:100%; padding:2%; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; position:relative }
.production-scale .section-equipment .equipment-list .equipment-item dl::after{ content:""; display:block; background:url("../images/icon-arrow-gray.png") no-repeat; width:16px; height:32px; top:50%; margin-top:-13px; z-index:3; position:absolute }
.production-scale .section-equipment .equipment-list .equipment-item dl dt{ font-size:24px; color:#444 }
.production-scale .section-equipment .equipment-list .equipment-item dl p{ font-size:14px; color:#a7a7a7; line-height:24px; margin-top:20px }
.production-scale .section-food-safety{ padding-top:60px; padding-bottom:40px }
.production-scale .section-food-safety .food-safety-content{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px }
.production-scale .section-food-safety .food-safety-content .safety-card{ text-align:center; transition:all .3s ease }
.production-scale .section-food-safety .food-safety-content .safety-card .safety-icon{ margin-bottom:20px }
.production-scale .section-food-safety .food-safety-content .safety-card .safety-icon img{ width:100%; height:240px; border-radius:17px; display:block; object-fit:cover; overflow:hidden }
.production-scale .section-food-safety .food-safety-content .safety-card .safety-content h3{ font-size:20px; color:#363636; margin-top:15px; font-weight:normal }
@media(max-width:1200px){ .production-scale .section-process{padding:20px 0 }
.production-scale .section-food-safety{ padding:20px 0 }
.production-scale .section-overview{ padding:20px 0 }
.production-scale .section-overview .overview-swiper-container .swiper-slide img{ height:300px }
.production-scale .section-equipment{ padding:40px 0 }
.production-scale .section-equipment .equipment-list .equipment-item{ flex-direction:column; height:auto }
.production-scale .section-equipment .equipment-list .equipment-item-img{ width:100% }
.production-scale .section-equipment .equipment-list .equipment-item dl{ width:100%; padding-bottom:20px }
.production-scale .section-equipment .equipment-list .equipment-item dl::after{ display:none }
.production-scale .section-equipment .equipment-list .equipment-item:nth-child(2n){ flex-direction:column }
}
.contact-page{ background-color:#fff; padding:60px 0 0 0 }
.contact-page .map-section{ margin-bottom:60px }
.contact-page .map-section .map-container{ position:relative; border-radius:17px; overflow:hidden }
.contact-page .map-section .map-container img{ width:100%; height:auto; display:block }
.contact-page .contact-info-section .contact-content{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; height:270px; margin-bottom:60px }
.contact-page .contact-info-section .contact-details{ background:#f1f1f1; padding:30px; border-radius:17px; height:100%; position:relative; overflow:hidden; box-sizing:border-box }
.contact-page .contact-info-section .contact-details::after{ background:url("../images/bg-contactus.png") no-repeat; background-size:100% auto; position:absolute; right:0; top:50px; display:block; content:""; width:357px; height:264px }
.contact-page .contact-info-section .contact-details h3{ font-size:24px; color:#36ac00; margin-bottom:20px; position:relative; padding-bottom:20px }
.contact-page .contact-info-section .contact-details h3::after{ content:""; position:absolute; left:0; bottom:0; width:20%; height:1px; background-color:#ddd }
.contact-page .contact-info-section .contact-details p{ font-size:14px; color:#333; line-height:24px }
.contact-page .contact-info-section .qrcode-section{ background:#eee; display:flex; gap:30px; justify-content:space-around; border-radius:17px; height:100%; padding:30px; box-sizing:border-box }
.contact-page .contact-info-section .qrcode-section .qrcode-item{ text-align:center }
.contact-page .contact-info-section .qrcode-section .qrcode-item .qrcode-img{ width:150px; height:150px; margin-bottom:10px; margin-top:20px }
.contact-page .contact-info-section .qrcode-section .qrcode-item .qrcode-img img{ width:100%; height:100%; display:block }
.contact-page .contact-info-section .qrcode-section .qrcode-item .qrcode-label{ font-size:14px; color:#333; font-weight:500 }
.contact-page .contact-form-section{ background:#f3f7fb }
.contact-page .contact-form-section .form-contact-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; padding:80px 0 }
.contact-page .contact-form-section .form-container{ padding:0 }
.contact-page .contact-form-section .form-row{ display:flex; gap:20px; margin-bottom:14px }
.contact-page .contact-form-section .form-row .form-group{ flex:1 }
.contact-page .contact-form-section .form-row .form-group label{ display:block; font-size:16px; color:#333; margin-bottom:20px; font-weight:500 }
.contact-page .contact-form-section .form-row .form-group input[type=text],.contact-page .contact-form-section .form-row .form-group input[type=tel],.contact-page .contact-form-section .form-row .form-group input[type=email]{ width:100%; padding:12px 16px; border:1px solid #dcdcdc; border-radius:17px; font-size:14px; color:#333; transition:all .3s ease }
.contact-page .contact-form-section .form-row .form-group input[type=text]:focus,.contact-page .contact-form-section .form-row .form-group input[type=tel]:focus,.contact-page .contact-form-section .form-row .form-group input[type=email]:focus{ outline:none; border-color:#36ac00; box-shadow:0 0 0 2px rgba(0,82,171,.1) }
.contact-page .contact-form-section .form-group{ margin-bottom:20px }
.contact-page .contact-form-section .form-group label{ display:block; font-size:16px; color:#333; margin-bottom:8px; font-weight:500 }
.contact-page .contact-form-section .form-group textarea{ width:100%; padding:12px 16px; border:1px solid #dcdcdc; border-radius:17px; font-size:14px; color:#333; resize:vertical; min-height:120px; transition:all .3s ease }
.contact-page .contact-form-section .form-group textarea:focus{ outline:none; border-color:#36ac00; box-shadow:0 0 0 2px rgba(0,82,171,.1) }
.contact-page .contact-form-section .submit-btn{ width:250px; display:inline-block; background-color:#0f62ac; color:#fff; border:none; height:60px; line-height:60px; border-radius:4px; font-size:16px; font-weight:500; cursor:pointer; transition:all .3s ease }
.contact-page .contact-form-section .submit-btn:hover{ background-color:#0f62ac; transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,82,171,.3) }
.contact-page .contact-form-section .submit-btn:active{ transform:translateY(0) }
.contact-page .contact-form-section .department-contact .department-tabs{ display:flex; border-bottom:1px solid #e0e0e0; margin-bottom:20px }
.contact-page .contact-form-section .department-contact .department-tabs .department-tab{ padding:10px 10px 30px 0; cursor:pointer; font-size:20px; color:#666; transition:all .3s ease; border-bottom:2px solid rgba(0,0,0,0); line-height:1 }
.contact-page .contact-form-section .department-contact .department-tabs .department-tab:hover{ color:#36ac00 }
.contact-page .contact-form-section .department-contact .department-tabs .department-tab.active{ font-size:28px; color:#36ac00; border-bottom-color:#36ac00 }
.contact-page .contact-form-section .department-contact .department-content{ display:none }
.contact-page .contact-form-section .department-contact .department-content.active{ display:flex; flex-wrap:wrap }
.contact-page .contact-form-section .department-contact .department-content .department-info{ width:50%; margin-bottom:15px }
.contact-page .contact-form-section .department-contact .department-content .department-info .info-label{ font-size:14px; color:#666; margin-bottom:5px }
.contact-page .contact-form-section .department-contact .department-content .department-info .info-value{ font-size:16px; color:#333; font-weight:500 }
@media(max-width:1200px){ .contact-page{padding:40px 0 0 0 }
.contact-page .map-section{ margin-bottom:30px }
.contact-page .contact-info-section{ height:auto }
.contact-page .contact-info-section .contact-content{ grid-template-columns:1fr; height:auto }
.contact-page .contact-info-section .contact-details{ width:100%; box-sizing:border-box }
.contact-page .contact-info-section .contact-details h3{ font-size:20px }
.contact-page .contact-info-section .qrcode-section{ width:100%; box-sizing:border-box; flex-wrap:wrap }
.contact-page .contact-form-section{ padding-bottom:40px }
.contact-page .contact-form-section .department-contact{ padding:30px 0 }
.contact-page .contact-form-section .department-contact .department-content .department-info{ width:100% }
.contact-page .contact-form-section .form-container{ padding:0 }
.contact-page .contact-form-section .form-contact-wrapper{ grid-template-columns:1fr }
}
.dev-strength{ padding:0 }
.dev-strength .research-overview{ padding:60px 0; background-color:#fff }
.dev-strength .research-overview .container{ max-width:1200px }
.dev-strength .research-overview .section-title{ margin-bottom:2% }
.dev-strength .research-overview .section-title h2{ font-size:20px }
.dev-strength .research-overview .overview-image{ flex:1; position:relative; transition:transform .6s ease,opacity .6s ease; transform:scale(1); z-index:10; opacity:1; display:none }
.dev-strength .research-overview .overview-image img{ width:100%; height:auto; border-radius:17px; display:block; transition:transform .6s ease }
.dev-strength .patents-section{ background-repeat:no-repeat; background-size:contain; background-position:center; padding:0; position:relative; overflow:visible; width:60%; height:60vh; margin:0 auto; transition:width 1.5s cubic-bezier(0.4,0,0.2,1),height 1.5s cubic-bezier(0.4,0,0.2,1),background-image 1.5s cubic-bezier(0.4,0,0.2,1) }
.dev-strength .patents-section .container{ position:relative; opacity:0; transform:translateY(30px); transition:opacity 1.5s cubic-bezier(0.4,0,0.2,1) .8s,transform 1.5s cubic-bezier(0.4,0,0.2,1) .8s; overflow:visible; width:100%; margin:0 auto; padding:100px 0 }
.dev-strength .patents-section.expanded{ width:100%; height:100vh; background-size:cover }
.dev-strength .patents-section.expanded .container{ opacity:1 !important; transform:translateY(0) !important }
.dev-strength .patents-section .section-title{ font-size:28px; color:#fff; margin-bottom:40px; text-align:center; font-weight:bold; position:relative; margin-top:40px }
.dev-strength .patents-section .section-title h2,.dev-strength .patents-section .section-title p{ color:#fff }
.dev-strength .patents-section .section-title p{ font-size:14px; font-weight:normal; line-height:24px; margin-top:20px }
.dev-strength .patents-section .patents-swiper-container{ width:100%; margin-top:5% }
.dev-strength .patents-section .patents-swiper-container .patents-swiper-slide{ display:flex; align-items:center; justify-content:center; flex-direction:column; padding-bottom:60px; overflow:hidden }
.dev-strength .patents-section .patents-swiper-container .patents-swiper-slide img{ width:100%; height:380px; object-fit:cover; border-radius:17px; display:block; overflow:hidden }
.dev-strength .patents-section .patents-swiper-container .patents-swiper-slide p{ text-align:center; font-size:14px; color:#fff; line-height:24px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:20px }
.dev-strength .patents-section .patents-swiper-container .swiper-scrollbar{ background:hsla(0,0%,100%,.5); height:4px }
.dev-strength .patents-section .patents-swiper-container .swiper-scrollbar-drag{ background:#36ac00 }
.dev-strength .research-philosophy{ padding:60px 0; background-color:#fff; text-align:center }
.dev-strength .research-philosophy .section-title h2{ font-size:30px; color:#444; margin-bottom:10px; font-weight:normal }
.dev-strength .research-philosophy .section-title h3{ font-size:28px; color:#444; font-weight:normal; margin-bottom:20px }
.dev-strength .research-philosophy .section-title p{ font-size:14px; color:#a7a7a7; font-weight:normal; line-height:24px }
.dev-strength .research-philosophy .stats-container{ height:300px; background-color:#06c; padding:30px 0; border-radius:17px; overflow:hidden }
.dev-strength .research-philosophy .stats-container .stat-item-wrap{ width:60%; height:100%; display:flex; justify-content:center; align-items:center; margin-left:40% }
.dev-strength .research-philosophy .stats-container .stat-item{ flex:1; text-align:center; position:relative }
.dev-strength .research-philosophy .stats-container .stat-item:last-child::after{ display:none }
.dev-strength .research-philosophy .stats-container .stat-item::after{ content:""; display:block; background:#e3e3e3; width:1px; height:100%; position:absolute; right:0; top:0; opacity:.1 }
.dev-strength .research-philosophy .stats-container .stat-item .stat-number{ font-size:36px; font-weight:bold; margin-bottom:10px; color:#59c033 }
.dev-strength .research-philosophy .stats-container .stat-item .stat-number span{ font-size:14px }
.dev-strength .research-philosophy .stats-container .stat-item .stat-label{ font-size:14px; color:#f8f8f8 }
.dev-strength .research-center{ padding:60px 0; background-color:#f3f7fb; overflow:hidden }
.dev-strength .research-center .section-title{ margin-bottom:3% }
.dev-strength .research-center .center-swiper{ width:90%; max-width:1680px; margin:0 auto; position:relative }
.dev-strength .research-center .center-swiper-container{ width:100%; position:relative }
.dev-strength .research-center .center-swiper-container .swiper-slide{ display:flex; align-items:flex-start; justify-content:center; flex-direction:column; background:#fff; border-radius:17px; overflow:hidden }
.dev-strength .research-center .center-swiper-container .swiper-slide img{ width:100%; height:400px; object-fit:cover; border-radius:17px 18px 0 0 }
.dev-strength .research-center .center-swiper-container .swiper-slide .center-image{ width:100% }
.dev-strength .research-center .center-swiper-container .swiper-slide .center-text{ width:100%; padding:40px }
.dev-strength .research-center .center-swiper-container .swiper-slide h2{ font-size:28px; color:#444; font-weight:normal; margin-bottom:20px }
.dev-strength .research-center .center-swiper-container .swiper-slide p{ font-size:14px; color:#a7a7a7; line-height:24px }
.dev-strength .research-center .swiper-button-prev,.dev-strength .research-center .swiper-button-next{ top:50%; transform:translateY(-50%); width:46px; height:46px; background-color:hsla(0,0%,100%,.95); border-radius:50%; color:#000; box-shadow:0 1px 6px rgba(0,0,0,.1) }
.dev-strength .research-center .swiper-button-prev::after,.dev-strength .research-center .swiper-button-next::after{ font-size:16px; font-weight:bold }
.dev-strength .industry-academic{ padding:60px 0 80px; background-color:#fff }
.dev-strength .industry-academic .section-title{ margin-bottom:3% }
.dev-strength .industry-academic .section-title p{ font-size:14px; color:#a7a7a7; line-height:24px }
.dev-strength .industry-academic .partners-container{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px }
.dev-strength .industry-academic .partners-container .partner-item{ display:flex; align-items:center; justify-content:center }
.dev-strength .industry-academic .partners-container .partner-item:hover img{ transition:all .3s ease-in-out; transform:translateY(-5px) }
.dev-strength .industry-academic .partners-container .partner-item img{ width:100%; height:240px; border-radius:17px; display:block; object-fit:cover; transition:all .3s ease-in-out }
@media(max-width:1200px){ .dev-strength .research-overview{padding:40px 0 }
.dev-strength .research-overview .overview-content{ flex-direction:column; gap:20px }
.dev-strength .research-overview .overview-content .overview-text .section-title{ font-size:24px; text-align:center }
.dev-strength .research-overview .overview-content .overview-text p{ text-align:center }
.dev-strength .patents-section{ padding:40px 0 }
.dev-strength .patents-section .section-title{ font-size:24px }
.dev-strength .patents-section .patents-swiper-container .patents-swiper-slide img{ object-fit:contain }
.dev-strength .research-philosophy{ padding:40px 0 }
.dev-strength .research-philosophy .section-title{ font-size:24px }
.dev-strength .research-philosophy .section-title h2,.dev-strength .research-philosophy .section-title h3{ font-size:20px }
.dev-strength .research-philosophy .stats-container{ flex-wrap:wrap }
.dev-strength .research-philosophy .stats-container .stat-item-wrap{ margin-left:0; width:100%; flex-wrap:wrap; flex-direction:column }
.dev-strength .research-philosophy .stats-container .stat-item{ width:50%; margin-bottom:15px }
.dev-strength .research-center{ padding:40px 0 }
.dev-strength .research-center .section-title{ font-size:24px }
.dev-strength .research-center .center-swiper-container{ height:auto; padding-bottom:0 }
.dev-strength .research-center .center-swiper-container .swiper-slide .center-text{ padding:20px }
.dev-strength .research-center .center-swiper-container .swiper-slide .center-text h2{ font-size:20px }
.dev-strength .industry-academic{ padding:40px 0 }
.dev-strength .industry-academic .section-title{ font-size:24px }
.dev-strength .industry-academic .partners-container{ grid-template-columns:1fr; gap:20px }
.dev-strength .industry-academic .partners-container .partner-item{ height:auto }
}
.product-detail .product-info{ padding:60px 0; background-color:#fff }
.product-detail .product-info .container{ max-width:1200px }
.product-detail .product-info .product-info-content{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:flex-start }
@media(max-width:1024px){ .product-detail .product-info .product-info-content{gap:40px }
}
@media(max-width:768px){ .product-detail .product-info .product-info-content{grid-template-columns:1fr; gap:30px }
}
.product-detail .product-info .product-swiper-container{ position:relative; border-radius:8px; overflow:hidden; height:400px }
.product-detail .product-info .product-swiper-container .swiper{ width:100%; height:100% }
.product-detail .product-info .product-swiper-container .swiper-slide{ display:flex; align-items:center; justify-content:center }
.product-detail .product-info .product-swiper-container .swiper-slide img{ width:100%; height:100%; display:block; object-fit:cover }
.product-detail .product-info .product-swiper-container .swiper-button-prev::after,.product-detail .product-info .product-swiper-container .swiper-button-next::after{ font-size:22px; color:#fff }
.product-detail .product-info .product-swiper-container .swiper-pagination{ position:absolute; bottom:15px; left:0; right:0; text-align:center; z-index:10 }
.product-detail .product-info .product-swiper-container .swiper-pagination .swiper-pagination-bullet{ width:50px; height:3px; display:inline-block; background-color:hsla(0,0%,100%,.5); margin:0 4px; opacity:1; transition:all .3s ease; cursor:pointer; border-radius:0 }
.product-detail .product-info .product-swiper-container .swiper-pagination .swiper-pagination-bullet:hover,.product-detail .product-info .product-swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background-color:#36ac00 }
.product-detail .product-info .product-details .product-title{ font-size:30px; color:#282828; font-weight:bold; margin-bottom:10px }
.product-detail .product-info .product-details .product-subtitle{ font-size:14px; color:#757575; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #ddd }
.product-detail .product-info .product-details .product-description{ font-size:14px; color:#757575; line-height:1.8; margin-top:30px; margin-bottom:30px }
.product-detail .product-info .product-details .product-features{ margin-bottom:30px }
.product-detail .product-info .product-details .product-features .feature-title{ font-size:18px; color:#282828; font-weight:bold; margin-bottom:15px; padding-top:20px; border-top:1px solid #ddd }
.product-detail .product-info .product-details .product-features .feature-list{ display:flex; flex-wrap:wrap; gap:10px }
.product-detail .product-info .product-details .product-features .feature-list .feature-tag{ display:flex; padding:6px 16px 0 0; color:#757575; font-size:14px }
.product-detail .product-info .product-details .product-features .feature-list .feature-tag span{ display:block; color:#21ac0f; margin-right:5px; transform:rotate(90deg) }
.product-detail .product-showcase{ padding:0 0 60px 0 }
.product-detail .product-showcase .container{ max-width:1200px }
.product-detail .product-showcase .showcase-content{ display:flex; flex-direction:column; gap:40px }
.product-detail .product-showcase .product-tabs{ margin-top:40px; border-radius:8px; overflow:hidden }
.product-detail .product-showcase .tab-nav{ display:flex; border-top:1px solid #e9ecef; border-bottom:1px solid #e9ecef; justify-content:center; align-items:center }
.product-detail .product-showcase .tab-item-line{ color:#ddd }
.product-detail .product-showcase .tab-item{ padding:15px 30px; cursor:pointer; transition:all .3s ease; color:#666; font-size:16px; position:relative }
.product-detail .product-showcase .tab-item:hover{ color:#36ac00 }
.product-detail .product-showcase .tab-item.active{ color:#36ac00; font-weight:500 }
.product-detail .product-showcase .tab-content{ padding:30px }
.product-detail .product-showcase .tab-pane{ display:none }
.product-detail .product-showcase .tab-pane.active{ display:block; animation:fadeIn .5s ease }
@keyframes fadeIn{ from{opacity:0; transform:translateY(10px) }
to{ opacity:1; transform:translateY(0) }
}
.product-detail .product-showcase .detail-content{ color:#333; font-size:18px; margin:20px 0 15px 0; font-weight:500 }
@media(max-width:1024px){ .product-detail .product-info{padding:40px 0 }
.product-detail .product-info .product-details .product-title{ font-size:24px }
.product-detail .product-info .product-details .product-subtitle{ font-size:16px }
.product-detail .product-info .product-details .product-description{ font-size:15px }
.product-detail .product-showcase{ padding:40px 0 }
}
@media(max-width:768px){ .product-detail .product-info{padding:30px 0 }
.product-detail .product-info .product-details .product-title{ font-size:22px }
.product-detail .product-info .product-details .product-description{ font-size:14px }
.product-detail .product-info .product-details .feature-title{ font-size:18px }
.product-detail .product-showcase{ padding:30px 0 }
.product-detail .product-showcase .showcase-title{ font-size:22px }
}
@media(max-width:1200px){ .products-list{padding-top:20px }
.product .product-categories{ padding:0 }
}