*{margin: 0;padding: 0;box-sizing: border-box} html,body{height: 100%;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size: 16px;line-height: 1.5;color: #333} ul,ol{list-style: none} a{text-decoration: none;color: inherit} img{max-width: 100%;height: auto;vertical-align: middle} button,input,select,textarea{font-family: inherit;font-size: inherit;line-height: inherit;outline: none;border: none} .clearfix::after{content: "";display: table;clear: both} #header{position: fixed;top: 0;left: 0;width: 100%;z-index: 1000;background: linear-gradient( 180deg,rgba(240,245,255,0.9) 0%,rgba(240,245,255,0.8) 100% );backdrop-filter: blur(10px)} #header.header-default{background-color: #f2f4fa !important;box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important} #header.header-light-blue{background-color: #ddeeff !important;box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important} #header.header-transparent{background: transparent !important;background-color: transparent !important;backdrop-filter: none !important;box-shadow: none !important} #header.header-transparent .logo-btn,#header.header-transparent li a{color: #454545;font-family: var(--font-medium),sans-serif;text-shadow: none} #header.header-transparent li a:hover,#header.header-transparent li a.active{color: #0066ff;font-family: var(--font-medium),sans-serif;text-shadow: none} nav{width: 100%;max-width: 100%;margin: 0 auto;padding: 15px 20px;display: flex;align-items: center;gap: 5%} .logo-btn{display: flex;align-items: center;justify-content: flex-end;text-decoration: none;color: #333;font-size: 16px;width: 20%;gap: 10px;flex: 0 0 auto} .logo-btn img{height: 32px;margin-right: 8px} nav ul{width: 60%;display: flex;padding-left: 10%;gap: 5%;margin: 0;padding: 0;font-family: var(--font-medium);justify-content: space-around;list-style: none} nav ul li a{text-decoration: none;color: #333;font-size: 16px;font-weight: 500;transition: color 0.3s ease} nav ul li a:hover,nav ul li a.active{color: #0066ff} body{padding-top: 70px !important;margin-top: 0 !important} html{scroll-behavior: auto !important} #header > nav,#header > nav *{transition: none !important;animation: none !important} .menu-toggle{display: none;flex-direction: column;gap: 6px;cursor: pointer} .menu-toggle span{display: block;width: 25px;height: 2px;background-color: #333;transition: 0.3s} #header.header-transparent .menu-toggle span{background: #454545;box-shadow: none} .menu-overlay{display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);z-index: 998} .menu-overlay.active{display: block} @media (max-width: 992px){nav ul{gap: 3%} } @media (max-width: 850px){nav ul{gap: 2%} nav ul li a{font-size: 14px} } @media (max-width: 768px){.menu-toggle{display: flex} nav ul{display: none;position: fixed;top: 70px;left: 0;width: 100%;background: white;flex-direction: column;padding: 20px;box-shadow: 0 4px 6px rgba(0,0,0,0.1)} nav ul.active{display: flex} } #footer{background: linear-gradient(135deg,#2c3e50 0%,#34495e 100%);color: #fff;padding: 50px 0 0;font-family: var(--font-regular),sans-serif} #footer .container{max-width: 1920px;margin-left:120px } .footer-content{display: flex;align-items: flex-start;padding-bottom: 40px;gap: 60px;width: 100%} .qrcode-section{display: flex;gap: 32px;min-width: 200px} .qrcode-item{text-align: center;display: flex;flex-direction: column;align-items: center} .qrcode-image{width: 80px;height: 80px;margin-bottom: 12px;object-fit: cover;transition: all 0.3s ease} .qrcode-image:hover{transform: scale(1.05);border-color: rgba(255,255,255,0.3)} .qrcode-item p{color: #fff;font-size: 14px;font-weight: 400;margin: 0} .footer-nav{min-width: 260px;flex: 0.5;display: flex;gap: 60px;padding-left: 0;margin-left: 120px} .nav-column{display: flex;flex-direction: column;gap: 16px} .nav-item{margin: 0} .footer-nav a{color: #fff;font-size: 16px;text-decoration: none;transition: all 0.3s ease;font-weight: 400;position: relative;display: block;padding: 4px 0} .footer-nav a:hover{color: #74b9ff;transform: translateX(4px)} .footer-nav a::after{content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background: #74b9ff;transition: width 0.3s ease} .footer-nav a:hover::after{width: 100%} .contact-info{min-width: 180px} .contact-item{display: flex;align-items: center;margin-bottom: 16px;font-size: 14px} .contact-item:last-child{margin-bottom: 0} .contact-label{color: rgba(255,255,255,0.8);font-weight: 400;min-width: 70px} .contact-value{color: #fff;font-weight: 500;word-wrap: break-word;word-break: break-all} .footer-bottom{padding: 20px 0} .footer-bottom .container{display: flex;align-items: center} .footer-bottom .icp{width: 100%;color: rgba(255,255,255,0.7);font-size: 12px;margin: 0;display: flex;align-items: center;gap: 8px;padding-left: 0;justify-content: flex-start !important;text-align: left !important} .icp-icon{font-size: 14px;opacity: 0.8} @media screen and (max-width: 1024px){.footer-content{gap: 40px} .footer-nav{padding-left: 20px} .footer-nav ul{gap: 30px} } @media screen and (max-width: 768px){.footer-content{flex-direction: column;align-items: center;gap: 40px;text-align: center} .qrcode-section{order: 1;gap: 30px} .footer-nav{order: 2;padding-left: 0;justify-content: center;gap: 40px} .nav-column{align-items: center} .contact-info{order: 3;min-width: auto;width: 100%} .contact-item{justify-content: center;margin-bottom: 12px} } @media screen and (max-width: 576px){#footer{padding: 40px 0 0} .footer-content{gap: 30px;padding-bottom: 30px} .qrcode-section{gap: 20px} .qrcode-image{width: 80px;height: 80px} .footer-nav{gap: 30px} .nav-column{gap: 12px} .footer-nav a{font-size: 14px} .contact-item{flex-direction: column;gap: 4px;margin-bottom: 16px} .contact-label{min-width: auto} .footer-bottom .icp{font-size: 11px;flex-direction: column;gap: 4px} } @font-face{font-family: "DingTalk-JinBuTi";src: url("../../fonts/DingTalk JinBuTi.ttf") format("truetype");font-weight: normal;font-style: normal;font-display: swap} @font-face{font-family: "AlibabaPuHuiTi-2-55-Regular";src: url("../../fonts/AlibabaPuHuiTi-2-55-Regular/AlibabaPuHuiTi-2-55-Regular.woff") format("woff"),url("../../fonts/AlibabaPuHuiTi-2-55-Regular/AlibabaPuHuiTi-2-55-Regular.ttf") format("truetype");font-weight: 400;font-style: normal;font-display: swap} @font-face{font-family: "AlibabaPuHuiTi-2-65-Medium";src: url("../../fonts/AlibabaPuHuiTi-2-65-Medium/AlibabaPuHuiTi-2-65-Medium.woff") format("woff"),url("../../fonts/AlibabaPuHuiTi-2-65-Medium/AlibabaPuHuiTi-2-65-Medium.ttf") format("truetype");font-weight: 500;font-style: normal;font-display: swap} @font-face{font-family: "DIN-Medium";src: url("../../fonts/DIN-Medium.otf") format("opentype");font-weight: 500;font-style: normal;font-display: swap} @font-face{font-family: "AlibabaPuHuiTi-2-45-Light";src: url("../../fonts/AlibabaPuHuiTi-2-45-Light/AlibabaPuHuiTi-2-45-Light.woff") format("woff"),url("../../fonts/AlibabaPuHuiTi-2-45-Light/AlibabaPuHuiTi-2-45-Light.ttf") format("truetype");font-weight: 300;font-style: normal;font-display: swap} :root{--font-primary: "AlibabaPuHuiTi-2-55-Regular","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;--font-heading: "DingTalk-JinBuTi";--font-medium: "AlibabaPuHuiTi-2-65-Medium",var(--font-primary);--font-light: "AlibabaPuHuiTi-2-45-Light",var(--font-primary);--font-number: "DIN-Medium","Helvetica Neue",Arial,sans-serif} body{font-family: var(--font-primary);font-weight: 400} h1,h2,h3,h4,h5,h6{font-family: var(--font-heading)} .font-medium{font-family: var(--font-medium)} .font-light{font-family: var(--font-light)} .font-number{font-family: var(--font-number)} .font-loading{visibility: hidden} .fonts-loaded .font-loading{visibility: visible} @supports not (font-display: swap){body{font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif} } .contact-float{position: fixed;right: 40px;height:240px;bottom: 100px;width: 90px;padding: 22px 0 14px 0;background: linear-gradient(180deg,#1e90ff 0%,#4fc3ff 100%);border-radius: 55px;box-shadow: 0 4px 24px rgba(0,0,0,0.12);display: flex;flex-direction: column;justify-content: space-evenly;align-items: center;z-index: 9999;font-family: 'PingFang SC','Microsoft YaHei',Arial,sans-serif} .contact-float:hover{box-shadow: 0 8px 15px rgba(0,0,0,0.2)} .contact-float-close{position: absolute;top: -10px;right: -10px;background: transparent;border: none;font-size: 24px;color: #2682FF;cursor: pointer;z-index: 2;line-height: 1} .contact-float-avatar img{width: 50px;height: 50px;border-radius: 50%;margin-bottom: 10px;object-fit: cover;background: #fff} .contact-float-title{color: #fff;font-size: 13px;text-align: center;margin-bottom: 2px;font-weight: 400;letter-spacing: 1px} .contact-float-phone{color: #fff;font-size: 10px;text-align: center;margin-bottom: 12px} .contact-float-actions{display: flex;flex-direction: column;gap: 8px} .contact-btn{width: 70px;height: 26px;background: #fff;color: #1e90ff;border: none;border-radius: 3px;font-size: 13px;font-weight: 500;margin-bottom: 10px;cursor: pointer;transition: background 0.2s;box-shadow: 0 2px 8px rgba(30,144,255,0.08);outline: none} .contact-btn:hover{background: #e3f2fd} .back-to-top-btn{width: 70px;height: 26px;background: transparent;color: #fff;font-size: 13px;border-radius: 13px;display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;transition: background 0.2s,color 0.2s;outline: none;margin: 0;padding: 0} .back-to-top-btn:hover{background: rgba(255,255,255,0.12);color: #e3f2fd} .triangle{width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 7px solid #fff;margin: 0 auto 2px auto;display: block} @media screen and (max-width: 768px){.contact-float{width: 100px;right: 10px;bottom: 10px;padding: 16px 0 10px 0;border-radius: 50px} .contact-float-avatar img{width: 38px;height: 38px;margin-bottom: 8px} .contact-btn,.back-to-top-btn{width: 70px;height: 26px;font-size: 13px;border-radius: 13px} } main{background-color: #f2f4fa} ::-webkit-scrollbar{width: 0;height: 0;background: transparent} html{scrollbar-width: none;-ms-overflow-style: none} .container{max-width: 1200px;margin: 0 auto;padding: 0 15px} @media screen and (max-width: 1920px){.container{max-width: 1440px} } @media screen and (max-width: 1440px){.container{max-width: 1200px} } @media screen and (max-width: 1200px){.container{max-width: 960px} } @media screen and (max-width: 992px){.container{max-width: 720px} } @media screen and (max-width: 768px){.container{max-width: 540px} } @media screen and (max-width: 576px){.container{max-width: none;padding: 0 10px} } .mt-1{margin-top: 0.25rem} .mt-2{margin-top: 0.5rem} .mt-3{margin-top: 1rem} .mt-4{margin-top: 1.5rem} .mt-5{margin-top: 3rem} .mb-1{margin-bottom: 0.25rem} .mb-2{margin-bottom: 0.5rem} .mb-3{margin-bottom: 1rem} .mb-4{margin-bottom: 1.5rem} .mb-5{margin-bottom: 3rem} .btn{display: inline-block;padding: 0.5rem 1rem;border-radius: 4px;cursor: pointer;transition: all 0.3s ease} .btn-primary{background-color: #007bff;color: white} .btn-primary:hover{background-color: #0056b3} .text-center{text-align: center} .text-left{text-align: left} .text-right{text-align: right} .d-flex{display: flex} .flex-wrap{flex-wrap: wrap} .justify-content-between{justify-content: space-between} .justify-content-center{justify-content: center} .align-items-center{align-items: center} .row{display: flex;flex-wrap: wrap;margin-right: -15px;margin-left: -15px} .col{position: relative;width: 100%;padding-right: 15px;padding-left: 15px} @media (min-width: 576px){.col-sm-6{flex: 0 0 50%;max-width: 50%} .col-sm-4{flex: 0 0 33.333333%;max-width: 33.333333%} .col-sm-3{flex: 0 0 25%;max-width: 25%} } @media (min-width: 768px){.col-md-6{flex: 0 0 50%;max-width: 50%} .col-md-4{flex: 0 0 33.333333%;max-width: 33.333333%} .col-md-3{flex: 0 0 25%;max-width: 25%} } img[data-src],img[data-lazy]{background-color: #f5f5f5;background-image: linear-gradient(45deg,#f0f0f0 25%,transparent 25%),linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f0f0 75%),linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);background-size: 20px 20px;background-position: 0 0,0 10px,10px -10px,-10px 0px;transition: opacity 0.3s ease} img.loading{opacity: 0.7;animation: pulse 1.5s ease-in-out infinite} img.loaded{opacity: 1;background: none} img.error{background-color: #ffebee;background-image: none;position: relative} img.error::after{content: '图片加载失败';position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);color: #f44336;font-size: 12px;white-space: nowrap} @keyframes pulse{0%{opacity: 0.7} 50%{opacity: 0.4} 100%{opacity: 0.7} } @keyframes fadeInUp{from{opacity: 0;transform: translateY(30px)} to{opacity: 1;transform: translateY(0)} } @keyframes fadeInLeft{from{opacity: 0;transform: translateX(-30px)} to{opacity: 1;transform: translateX(0)} } @keyframes fadeInRight{from{opacity: 0;transform: translateX(30px)} to{opacity: 1;transform: translateX(0)} } @keyframes scaleIn{from{opacity: 0;transform: scale(0.9)} to{opacity: 1;transform: scale(1)} } @keyframes float{0%{transform: translateY(0px)} 50%{transform: translateY(-10px)} 100%{transform: translateY(0px)} } .animate{opacity: 0} .animate.fade-in-up{animation: fadeInUp 0.6s ease forwards} .animate.fade-in-left{animation: fadeInLeft 0.6s ease forwards} .animate.fade-in-right{animation: fadeInRight 0.6s ease forwards} .animate.scale-in{animation: scaleIn 0.6s ease forwards} .delay-1{animation-delay: 0.1s} .delay-2{animation-delay: 0.2s} .delay-3{animation-delay: 0.3s} .delay-4{animation-delay: 0.4s} .hover-float{transition: transform 0.3s ease} .hover-float:hover{transform: translateY(-5px)} .hover-scale{transition: transform 0.3s ease} .hover-scale:hover{transform: scale(1.05)} .continuous-float{animation: float 3s ease-in-out infinite} @keyframes countUp{from{opacity: 0;transform: translateY(20px)} to{opacity: 1;transform: translateY(0)} } .count-up{animation: countUp 1s ease forwards} .banner-section{position: relative;min-height: 644px;background: linear-gradient( 180deg,rgba(240,245,255,1) 0%,rgba(240,245,255,0.9) 100% );display: flex;align-items: center;padding: 80px 20px;overflow: hidden;margin-top: -80px} .banner-section::before{content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url("../images/index/hf.jpg") no-repeat center center;background-size: cover;opacity: 0.8;z-index: 1} .banner-content{position: relative;z-index: 2;max-width: 1920px;margin-left: 15%} .banner-title{font-family: var(--font-heading);font-size: 48px;color: #0066ff;margin-bottom: 72px;line-height: 1.2} .banner-subtitle{font-size: 36px;color: #333333;margin-bottom: 72px;font-family: var(--font-heading)} .banner-btn-container{display: flex;align-items: center;cursor: pointer;color: #0066ff;font-size: 16px;gap: 10px;background: #ecf5fc;width: fit-content;border: 1px solid #0066ff;border-radius: 3px;padding: 10px 20px} @media (max-width: 768px){.banner-title{font-size: 32px} .banner-subtitle{font-size: 20px} } .about-intro{padding: 60px 0 0 0;background: #f4f6fb} .about-intro-title{text-align: center;font-size: 32px;font-weight: bold;color: #222;margin-bottom: 8px;font-family: var(--font-medium)} .about-intro-subtitle{text-align: center;font-size: 16px;color: #888;margin-bottom: 32px;font-family: var(--font-light)} .about-intro-content{max-width: 1200px;margin: 0 auto;background: #fff;border-radius: 1px;display: flex;align-items: center;padding: 0 18px 0 0;height:400px} .about-intro-img-box{flex: 0 0 460px;border-radius: 8px;position: relative;left: -26px;top: 10px;min-width: 320px;min-height: 200px} .about-intro-img-box img{width: 95%;box-shadow: 0 4px 24px rgba(0,0,0,0.06)} .about-intro-info{flex: 1;display: flex;flex-direction: column;align-items: flex-start} .about-intro-company{color: #0D7DFC;font-size: 18px;font-family: var(--font-medium);text-align: center;width:100%;margin-bottom: 20px;margin-top: 10px} .about-intro-stats{display: flex;gap: 48px;margin-bottom: 20px;justify-content: center;width:100%} .about-intro-stat{text-align: center} .about-intro-stat-num{color: #0D7DFC;font-size: 36px;font-family: var(--font-number)} .about-intro-stat-label{color: #333333;font-size: 16px;margin-top: 4px;font-family: var(--font-light)} .about-intro-desc{color: #333333;font-size: 15px;line-height: 2;font-family: var(--font-light),sans-serif;text-indent: 2em} .about-intro-desc p{margin-bottom: 8px} @media (max-width: 900px){.about-intro-content{flex-direction: column;padding: 32px 12px;gap: 24px} .about-intro-img-box{min-width: 220px;min-height: 220px;width: 100%} } .about-culture{padding: 60px 0 0 0;background: #f4f6fb} .about-culture-title{text-align: center;font-size: 32px;font-weight: bold;color: #222;margin-bottom: 8px;font-family: var(--font-medium),sans-serif} .about-culture-subtitle{text-align: center;font-size: 16px;color: #888;margin-bottom: 32px;font-family: var(--font-light),sans-serif} .about-culture-cards{max-width: 1200px;margin: 0 auto;display: flex;gap: 32px;justify-content: center} .about-culture-card{flex: 1;min-width: 320px;background: #fff url(../images/about/ehbg.webp) no-repeat center center;border: 1.5px solid #e3e8f7;box-shadow: 0 4px 24px rgba(0,0,0,0.04);padding: 9px 20px;display: flex;align-items: center;transition: box-shadow 0.2s,border-color 0.2s} .about-culture-card:hover{border-color: #b3c6f7;box-shadow: 0 8px 32px rgba(0,0,0,0.08)} .about-culture-icon{width: 64px;height: 64px;border-radius: 8px;margin-right: 24px;display: flex;align-items: center;justify-content: center;flex-shrink: 0} .about-culture-card-content{display: flex;flex-direction: column;justify-content: center} .about-culture-card-title{font-size: 20px;font-weight: bold;color: #222;margin-bottom: 8px;font-family: var(--font-medium),sans-serif} .about-culture-card-desc{font-size: 15px;color: #4b5563;font-family: var(--font-light),sans-serif} @media (max-width: 900px){.about-culture-cards{flex-direction: column;gap: 20px} .about-culture-card{min-width: 0;padding: 24px 12px} .about-culture-icon{margin-right: 16px} } .about-history{padding: 60px 0 0 0;position: relative;overflow: hidden;margin-top: 100px} .about-history-title{text-align: center;font-size: 32px;font-weight: bold;color: #222;margin-bottom: 8px;font-family: var(--font-medium),sans-serif} .about-history-subtitle{text-align: center;font-size: 16px;color: #888;margin-bottom: 32px;font-family: var(--font-light),sans-serif} .about-history-bg{position: absolute;left: 0;right: 0;top: 180px;bottom: 0;z-index: 0;background: url(../images/about/lcbg.webp) no-repeat center center;background-position: 0 0;background-size: cover;opacity: 0.7;pointer-events: none} .about-timeline{position: relative;z-index: 1;width: 100%;margin: 0 auto;height: 680px;display: flex;align-items: center;justify-content: space-between} .about-timeline::before{content: '';position: absolute;left: 0;right: 0;top: 50%;height: 8px;background: linear-gradient(180deg,#0D7DFC 0%,rgba(13,125,252,0.2) 100%);border-radius: 2px;z-index: 0;transform: translateY(-50%)} .about-timeline-item{position: relative;width: 180px;display: flex;flex-direction: column;align-items: center;z-index: 1} .about-timeline-item-top::before{content: '';position: absolute;left: 50%;top: 0;width: 0;height: calc(50% - 12px);border-left: 2px dashed #4ca6ff;transform: translateX(-50%);z-index: 0} .about-timeline-item-bottom::before{content: '';position: absolute;left: 50%;bottom: 0;width: 0;height: calc(50% - 12px);border-left: 2px dashed #4ca6ff;transform: translateX(-50%);z-index: 0} .about-timeline-dot{width: 24px;height: 24px;position: absolute;top: 50%;left: 150%;transform: translate(-50%,-50%);z-index: 1} .about-timeline-item-top .about-timeline-dot{border-color: #4ca6ff} .about-timeline-item-bottom .about-timeline-dot{border-color: #2563eb} .about-timeline-content{background: transparent;text-align: center;margin-bottom: 0;margin-top: 0;min-height: 60px;min-width: 260px;max-width: 380px;position: relative} .about-timeline-item-top .about-timeline-content{position: absolute;bottom: 160px;left: 150%;transform: translateX(-50%)} .about-timeline-item-bottom .about-timeline-content{position: absolute;top: 160px;left: 150%;transform: translateX(-50%)} .about-timeline-date{color: #0D7DFC;font-size: 16px;font-family: var(--font-medium),sans-serif} .about-timeline-desc{color: #333333;font-size: 14px;width:100%;font-family: var(--font-primary),sans-serif} .about-timeline-item-top .about-timeline-content::after{content: '';position: absolute;left: 50%;top: 100%;width: 0;height: 140px;border-left: 1px dashed #0D7DFC;transform: translateX(-50%);z-index: 1} .about-timeline-item-bottom .about-timeline-content::before{content: '';position: absolute;left: 50%;bottom: 100%;width: 0;height: 140px;border-left: 1px dashed #0D7DFC;transform: translateX(-50%);z-index: 1} .about-timeline-date-row{display: flex;align-items: center;justify-content: center;gap: 10px;white-space: nowrap;margin-bottom: 12px} .about-timeline-date-icon{width: 28px;height: 16px;display: block} @media (max-width: 1200px){.about-timeline{max-width: 1000px} .about-timeline-item{width: 140px} } @media (max-width: 900px){.about-timeline{max-width: 700px;height: 520px} .about-timeline-item{width: 100px} .about-timeline-content{min-width: 80px;max-width: 120px} } @media (max-width: 600px){.about-timeline{flex-direction: column;height: auto;padding: 40px 0} .about-timeline-item{width: 100%;margin-bottom: 40px} .about-timeline-item-top .about-timeline-content,.about-timeline-item-bottom .about-timeline-content{position: static;transform: none;margin: 0 auto 12px auto} .about-timeline-dot{position: static;transform: none;margin: 0 auto 12px auto} .about-timeline-item-top::before,.about-timeline-item-bottom::before{display: none} } .about-products{padding: 60px 0 0 0} .about-products-title{text-align: center;font-size: 32px;font-weight: bold;color: #222;margin-bottom: 8px;font-family: var(--font-medium),sans-serif} .about-products-subtitle{text-align: center;font-size: 16px;color: #888;margin-bottom: 32px;font-family: var(--font-light),sans-serif} .about-products-card{width: 80%;margin: 0 auto 60px auto;background: #F7F8FF;padding: 40px 32px;display: flex;flex-direction: column;justify-content: center;align-items: center} @media (max-width: 1200px){.about-products-card{width: 95%;padding: 24px 8px;min-height: 320px} } .about-address{padding: 60px 0 0 0} .about-address-card{width: 80%;margin: 0 auto 60px auto;background: #fff;border-radius: 2px;padding: 32px 32px 24px 32px;display: flex;flex-direction: column;gap: 24px} .about-address-info{display: flex;flex-direction: column;gap: 12px} .about-address-row{display: flex;align-items: center;flex-wrap: wrap;gap: 24px;font-size: 16px;margin-bottom: 8px} .about-address-company{font-size: 20px;font-weight: bold;color: #222;margin-right: 32px;font-family: var(--font-medium),sans-serif} .about-address-icon{font-size: 18px;margin-right: 4px} .about-address-label{color: #2563eb;font-weight: bold;margin-right: 2px} .about-address-text{color: #444;margin-right: 24px} .about-address-map{width: 100%;height: 320px;border-radius: 8px;overflow: hidden;margin-top: 8px} .about-address-map iframe{width: 100%;height: 100%;border: none;border-radius: 8px} @media (max-width: 1200px){.about-address-card{width: 95%;padding: 16px 4px 12px 4px} } @media (max-width: 700px){.about-address-row{flex-direction: column;align-items: flex-start;gap: 8px} .about-address-company{margin-bottom: 8px} .about-address-map{height: 200px} } .banner-breadcrumb{margin-top: 20px;font-size: 14px;color: rgba(255,255,255,0.8)} .banner-breadcrumb a{color: rgba(255,255,255,0.8);text-decoration: none;transition: color 0.3s ease} .banner-breadcrumb a:hover{color: #fff} .banner-breadcrumb span{margin: 0 8px;color: rgba(255,255,255,0.6)} .activity-detail-content{background: #f5f7fa;padding: 60px 0;min-height: 500px} .loading-state{display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 80px 20px;text-align: center} .loading-spinner{width: 50px;height: 50px;border: 4px solid #f3f3f3;border-top: 4px solid #0066FF;border-radius: 50%;animation: spin 1s linear infinite;margin-bottom: 20px} @keyframes spin{0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)} } .loading-state p{color: #666;font-size: 16px;margin: 0} .error-state{display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 80px 20px;text-align: center} .error-state p{color: #999;font-size: 16px;margin-bottom: 20px} .retry-btn{padding: 12px 30px;background: #0066FF;color: white;border: none;border-radius: 6px;font-size: 14px;cursor: pointer;transition: background 0.3s ease} .retry-btn:hover{background: #0052CC} .detail-wrapper{max-width: 1200px;margin: 0 auto;padding: 0 20px} .detail-container{background: #fff;border-radius: 12px;box-shadow: 0 4px 20px rgba(0,0,0,0.08);overflow: hidden;display: grid;min-height: 600px} .detail-image-section{position: relative;background: #f8f9fa;display: flex;align-items: center;justify-content: center;padding: 40px} .detail-image-section img{width: 100%;height: auto;max-height: 500px;object-fit: cover;border-radius: 8px;box-shadow: 0 8px 30px rgba(0,0,0,0.12)} .detail-info-section{padding: 40px;display: flex;flex-direction: column;justify-content: space-between} .detail-title{font-size: 20px;color: #333;font-family: var(--font-medium);line-height: 1.3;margin-bottom: 30px;padding-bottom: 15px;text-align: center} .detail-meta{margin-bottom: 30px} .meta-item{display: flex;align-items: center;justify-content: center;margin-bottom: 12px;font-size: 14px} .meta-label{color: #666;font-weight: 500;min-width: 80px} .meta-value{color: #999999;font-family: var(--font-primary);font-size: 14px;text-align: center} .meta-value.status{background: #e8f5e8;color: #2d8f2d;padding: 4px 12px;border-radius: 20px;font-size: 12px;font-weight: 500} .detail-content{flex: 1;color: #333;font-size: 16px;line-height: 1.8;margin-bottom: 40px;font-family: var(--font-primary)} .detail-content p{margin-bottom: 16px;text-align: justify} .detail-content p:last-child{margin-bottom: 0} .detail-content h1,.detail-content h2,.detail-content h3,.detail-content h4,.detail-content h5,.detail-content h6{color: #333;font-family: var(--font-medium);margin: 24px 0 16px 0;line-height: 1.4} .detail-content h1{font-size: 24px} .detail-content h2{font-size: 22px} .detail-content h3{font-size: 20px} .detail-content h4{font-size: 18px} .detail-content h5{font-size: 16px} .detail-content h6{font-size: 14px} .detail-content ul,.detail-content ol{margin: 16px 0;padding-left: 24px} .detail-content li{margin-bottom: 8px;line-height: 1.6} .detail-content blockquote{border-left: 4px solid #0066FF;margin: 20px 0;padding: 16px 20px;background: #f8f9fa;border-radius: 0 8px 8px 0;font-style: italic;color: #555} .detail-content img{max-width: 100%;height: auto;border-radius: 8px;margin: 16px 0;box-shadow: 0 4px 12px rgba(0,0,0,0.1)} .detail-content a{color: #0066FF;text-decoration: none;border-bottom: 1px solid transparent;transition: border-color 0.3s ease} .detail-content a:hover{border-bottom-color: #0066FF} .detail-content strong,.detail-content b{font-weight: 600;color: #222} .detail-content em,.detail-content i{font-style: italic} .detail-content code{background: #f1f3f4;padding: 2px 6px;border-radius: 4px;font-family: 'Courier New',monospace;font-size: 14px;color: #d73a49} .detail-content pre{background: #f6f8fa;border-radius: 8px;padding: 16px;overflow-x: auto;margin: 16px 0;border: 1px solid #e1e4e8} .detail-content pre code{background: none;padding: 0;color: #333} .detail-content table{width: 100%;border-collapse: collapse;margin: 20px 0;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 8px rgba(0,0,0,0.1)} .detail-content th,.detail-content td{padding: 12px 16px;text-align: left;border-bottom: 1px solid #e1e4e8} .detail-content th{background: #f6f8fa;font-weight: 600;color: #333} .detail-content tr:hover{background: #f8f9fa} .detail-actions{display: flex;gap: 16px} .action-btn{display: flex;align-items: center;gap: 8px;padding: 14px 28px;border: none;border-radius: 8px;font-size: 16px;font-weight: 500;cursor: pointer;transition: all 0.3s ease;text-decoration: none} .action-btn.primary{background: #0066FF;color: white} .action-btn.primary:hover{background: #0052CC;transform: translateY(-2px);box-shadow: 0 6px 20px rgba(0,102,255,0.3)} .action-btn.secondary{background: #f8f9fa;color: #666;border: 1px solid #e9ecef} .action-btn.secondary:hover{background: #e9ecef;color: #333} .icon-contact::before{content: "📞";font-size: 14px} .icon-back::before{content: "←";font-size: 14px} .related-activities{background: #fff;padding: 60px 0} .section-container{max-width: 1200px;margin: 0 auto;padding: 0 20px} .section-title{font-size: 24px;color: #333;text-align: center;margin-bottom: 40px;font-family: var(--font-medium)} .related-list{display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 24px} .related-item{background: #f8f9fa;border-radius: 8px;padding: 20px;transition: transform 0.3s ease,box-shadow 0.3s ease;cursor: pointer} .related-item:hover{transform: translateY(-4px);box-shadow: 0 8px 25px rgba(0,0,0,0.1)} .related-item h3{font-size: 16px;color: #333;margin-bottom: 8px;font-family: var(--font-medium)} .related-item p{color: #666;font-size: 14px;line-height: 1.6;margin: 0} @media (max-width: 900px){.detail-container{grid-template-columns: 1fr;min-height: auto} .detail-image-section{padding: 30px 20px} .detail-image-section img{max-height: 300px} .detail-info-section{padding: 30px 20px} .detail-title{font-size: 22px;margin-bottom: 20px} .detail-content{font-size: 15px;margin-bottom: 30px} .detail-content h1{font-size: 20px} .detail-content h2{font-size: 18px} .detail-content h3{font-size: 16px} .detail-content h4{font-size: 15px} .detail-content h5{font-size: 14px} .detail-content h6{font-size: 13px} .detail-actions{flex-direction: column} .action-btn{justify-content: center;padding: 12px 24px} .related-list{grid-template-columns: 1fr;gap: 16px} .activity-detail-content{padding: 40px 0} .related-activities{padding: 40px 0} } @media (max-width: 600px){.detail-wrapper{padding: 0 10px} .detail-title{font-size: 20px} .detail-content{font-size: 14px} .detail-content h1{font-size: 18px} .detail-content h2{font-size: 16px} .detail-content h3{font-size: 15px} .detail-content h4{font-size: 14px} .detail-content h5{font-size: 13px} .detail-content h6{font-size: 12px} .detail-content ul,.detail-content ol{padding-left: 20px} .detail-content blockquote{padding: 12px 16px;margin: 16px 0} .detail-content table{font-size: 13px} .detail-content th,.detail-content td{padding: 8px 12px} .meta-item{font-size: 13px} } .certificates-banner{position: relative;background: url('../images/certificates/hf.webp') center/cover no-repeat;min-height: 644px;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;overflow: hidden;margin-top: -80px} .certificates-banner::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1} .banner-content{position: relative;z-index: 2;max-width: 1200px;margin-left: 15%} .banner-title{font-family: var(--font-heading);font-size: 48px;font-weight: bold;color: #0066FF;margin-bottom: 20px;line-height: 1.2} .banner-subtitle{font-family: var(--font-heading);font-size: 24px;color: #333333;font-weight: 500} .certificates-container{width:100%;background-color: #F2F4FA} .certificates-section{display: flex;gap: 120px;margin:0 auto;padding: 40px 0;min-height: 380px;align-items: center} .certificates-section:last-child{border-bottom: none} .certificates-section:nth-child(2){height:420px;background: url('../images/certificates/content/bg1.webp') center/cover no-repeat;background-size: cover;background-position: center;padding: 80px 40px;border-radius: 12px;margin: 60px 0;position: relative;align-items: flex-end} .section-title{font-family: var(--font-medium);font-size: 32px;color: #333;margin-bottom: 20px} .section-subtitle{font-size: 16px;color: #333333;margin-bottom: 60px;font-family: var(--font-light)} .certificates-section:nth-child(2)::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(255,255,255,0.05);border-radius: 12px;z-index: 1} .certificates-section:nth-child(2) .certificates-img,.certificates-section:nth-child(2) .certificates-text{position: relative;z-index: 2;text-align: left} .certificates-section:nth-child(2){flex-direction: row-reverse} .certificates-section:nth-child(2) .certificates-img{justify-content: flex-start;text-align: left} .certificates-section:nth-child(2) .certificates-text{padding-left: 0;padding-right: 20px} .certificates-section:nth-child(4){height:420px;background-size: cover;background-position: center;padding: 80px 40px;border-radius: 12px;margin: 60px 0;position: relative;align-items: flex-end} .certificates-section:nth-child(4)::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(255,255,255,0.05);border-radius: 12px;z-index: 1} .certificates-section:nth-child(4) .certificates-img,.certificates-section:nth-child(4) .certificates-text{position: relative;z-index: 2;text-align: left} .certificates-section:nth-child(4){flex-direction: row-reverse} .certificates-section:nth-child(4) .certificates-img{justify-content: flex-start;text-align: left} .certificates-section:nth-child(4) .certificates-text{padding-left: 0;padding-right: 20px} .certificates-img{text-align: center;width: 40%;display: flex;align-items: flex-end;justify-content: flex-end} .certificates-img img{max-width: 300px;height: auto;border-radius: 8px;box-shadow: 0 4px 20px rgba(0,0,0,0.1);transition: transform 0.3s ease,box-shadow 0.3s ease} .certificates-img img:hover{transform: translateY(-5px);box-shadow: 0 8px 30px rgba(0,0,0,0.15)} .certificates-text{flex: 0.6;padding-left: 20px;display: flex;flex-direction: column;justify-content: center} .certificates-text-title{font-size: 28px;font-weight: 65 Medium;color: #333333;margin-bottom: 40px;font-family: var(--font-medium);line-height: 1.3} .certificates-text-desc{font-size: 18px;line-height: 1.8;font-weight:55 Regular;color: #333333;font-family: var(--font-primary)} .back-home{display: inline-block;margin: 24px 0 0 0;padding: 8px 22px;background: linear-gradient(135deg,#4CA6FF 0%,#6EE7B7 100%);color: #fff;border-radius: 8px;font-size: 1rem;font-weight: bold;text-decoration: none;transition: background 0.2s} .back-home:hover{background: linear-gradient(135deg,#6EE7B7 0%,#4CA6FF 100%)} #header{background-color: #fff !important;box-shadow: none !important} #header.header-default{background-color: #fff !important;box-shadow: none !important} #header nav{background-color: #fff !important;box-shadow: none !important} .certificate-swiper{width: 240px;height: 320px;margin: 0 auto;position: relative;overflow: visible} .certificate-swiper .swiper-slide{display: flex;align-items: center;justify-content: center;border-radius: 8px;overflow: hidden} .certificate-swiper .swiper-slide img{width: 100%;height: auto;display: block} .certificate-swiper .swiper-slide-prev{transform: translate3d(calc(-17.25% - 240px),0px,-100px) rotateZ(-5deg) scale(1)} .certificate-swiper .swiper-slide-next{transform: translate3d(calc(-34.5% - 480px),0px,-200px) rotateZ(-10deg) scale(1)} .certificate-swiper .swiper-pagination,.certificate-swiper .swiper-button-next,.certificate-swiper .swiper-button-prev{display: none} @media screen and (max-width: 768px){.certificate-swiper{width: 200px;height: 280px} } .certificates-img{position: relative} @media screen and (max-width: 768px){.certificates-banner{min-height: 300px;padding: 60px 20px;padding-top: 140px} .banner-title{font-size: 32px} .banner-subtitle{font-size: 18px} .certificates-container{padding: 0 12px} .certificates-section{flex-direction: column;gap: 20px;margin-bottom: 40px;padding: 30px 0;min-height: 300px;align-items: center} .certificates-img{flex: none;max-width: 100%;align-self: center} .certificates-text{padding-left: 0;justify-content: center} .certificates-text-title{font-size: 24px;text-align: center;margin-bottom: 15px} .certificates-text-desc{font-size: 15px;line-height: 1.7;text-align: center} .certificates-section:nth-child(2){padding: 60px 20px;margin: 40px 0;flex-direction: column;align-items: flex-end} .certificates-section:nth-child(2) .certificates-text{padding-right: 0;justify-content: flex-end} .certificates-section:nth-child(2) .certificates-img{align-self: flex-start} .certificate-swiper .swiper-button-next,.certificate-swiper .swiper-button-prev{display: none} } @media screen and (max-width: 480px){.banner-title{font-size: 28px} .banner-subtitle{font-size: 16px} .certificates-section{margin-bottom: 30px;padding: 20px 0} .certificates-img{max-width: 280px} .certificates-text-title{font-size: 20px;text-align: center} .certificates-text-desc{font-size: 14px;line-height: 1.6;text-align: center} .certificates-section:nth-child(2){padding: 50px 15px;margin: 30px 0;flex-direction: column;align-items: flex-end} .certificates-section:nth-child(2) .certificates-text{padding-right: 0;justify-content: flex-end} .certificates-section:nth-child(2) .certificates-img{align-self: flex-start} } .certificates-section:nth-child(2) .certificates-text{justify-content: flex-end} .contact-us{padding: 80px 0;text-align: center} .contact-form{display: flex;align-items: center;border-radius: 8px;padding: 6px 6px 6px 16px;max-width: 440px;margin: 0 auto} .contact-input{flex: 1;border: 1.5px solid #E3EAF5;outline: none;font-size: 16px;padding: 8px 12px;background: #fff;color: #A9A9A9;font-family: var(--font-light),sans-serif;font-weight: 45 Light;box-shadow: none} .contact-input::placeholder{color: #C0C7D1;font-size: 15px} .contact-input:focus{border: 1.5px solid #4CA6FF;outline: none;box-shadow: none;background: #fff;color: #333} .contact-submit{padding: 0 28px;height: 42px;border: none;background: linear-gradient(90deg,#4CA6FF 0%,#1CB5FF 100%);color: #fff;font-size: 16px;font-weight: 500;font-family: var(--font-medium),sans-serif;font-weight: 65 Medium;cursor: pointer;box-shadow: 0 2px 8px rgba(76,166,255,0.10)} .contact-submit:hover{background: linear-gradient(90deg,#4CA6FF 0%,#1CB5FF 100%);box-shadow: 0 2px 8px rgba(76,166,255,0.10)} .hover-float:hover{transform: translateY(-3px)} @media screen and (max-width: 768px){.contact-form{flex-direction: column;max-width: 80%} .contact-input,.contact-submit{width: 100%} } .banner-section{position: relative;min-height: 644px;background: linear-gradient( 180deg,rgba(240,245,255,1) 0%,rgba(240,245,255,0.9) 100% );display: flex;align-items: center;padding: 80px 20px;overflow: hidden;margin-top: -80px} .banner-section::before{content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url("../images/index/hf.jpg") no-repeat center center;background-size: cover;opacity: 0.8;z-index: 1} .banner-content{position: relative;z-index: 2;max-width: 1920px;margin-left: 15%} .banner-title{font-family: var(--font-heading);font-size: 48px;color: #0066ff;margin-bottom: 72px;line-height: 1.2} .banner-subtitle{font-size: 36px;color: #333333;margin-bottom: 72px;font-family: var(--font-heading)} .banner-btn-container{display: flex;align-items: center;cursor: pointer;color: #0066ff;font-size: 16px;gap: 10px;background: #ecf5fc;width: fit-content;border: 1px solid #0066ff;border-radius: 3px;padding: 10px 20px} .banner-btn{display: inline-block;padding: 15px 40px;background: #0066ff;color: white;text-decoration: none;border-radius: 30px;font-size: 18px;font-weight: 500;transition: transform 0.3s ease,box-shadow 0.3s ease} .banner-btn:hover{transform: translateY(-3px);box-shadow: 0 5px 15px rgba(0,102,255,0.3)} .hover-float{transition: transform 0.3s ease} .hover-float:hover{transform: translateY(-5px)} @media (max-width: 768px){.banner-title{font-size: 32px} .banner-subtitle{font-size: 20px} .banner-btn{padding: 12px 30px;font-size: 16px} } .banner-video{width: 100%} .banner-video video{width: 100%} .company-intro{padding: 80px 0;background-color: #F2F4FA;text-align: center} .section-title{font-family: var(--font-medium);font-size: 32px;color: #333;margin-bottom: 20px} .section-subtitle{font-size: 16px;color: #333333;margin-bottom: 60px;font-family: var(--font-light)} .feature-container{max-width: 1400px;margin: 0 auto;background-color: #fff;border-radius: 5px;padding: 25px 30px;box-shadow: 0 0 20px rgba(0,0,0,0.03)} .feature-cards{display: flex;justify-content: space-between;flex-wrap: wrap;max-width: 1320px;margin-left: auto;margin-right: auto} .feature-card{width: calc(25% - 15px);margin-bottom: 30px;text-align: center;padding: 5px 20px;background-color: #fff;position: relative} .feature-card:not(:last-child)::after{content: "";position: absolute;right: -7.5px;bottom: -25px;height: calc(60% - 10px);width: 1px;background-color: #EAEAEA} .feature-card-header{display: flex;align-items: center;margin-bottom: 15px;font-family: var(--font-primary)} .feature-card-icon{width: 50px;height: 50px;margin-right: 10px;display: flex;justify-content: center;align-items: center;border-radius: 5px;position: relative} .feature-card-icon::before{content: "";position: absolute;top: 3px;left: 60px;right: 3px;bottom: 3px;width: 40px;height: 2px;background-color: #23AAFF} .feature-card-icon img{width: 40px;height: 40px;position: relative;z-index: 2;opacity: 1} .feature-card-title{font-size: 16px;font-weight: bold;color: #0D7DFC;text-align: left;margin: 0} .feature-card-divider{height: 1px;background-color: #eee;margin: 15px 0} .feature-card-content{text-align: left;font-family: var(--font-light)} .feature-card-desc{font-size: 14px;line-height: 1.8;color: #666;text-align: left;margin: 0} @media (max-width: 992px){.feature-card{width: calc(50% - 20px)} .feature-card:nth-child(2n)::after{display: none} } @media (max-width: 768px){.feature-container{padding: 20px 10px} } @media (max-width: 576px){.feature-card{width: 100%;margin-bottom: 30px} .feature-card::after{display: none} } .service-map{width: 100%;margin: 0 auto;padding: 20px 0;text-align: center;position: relative} .service-map::before{content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-size: contain;opacity: 0.1} .map-stats{width: fit-content;display: flex;flex-direction: column;position: absolute;top: 150px;left: 20%;z-index: 2} .stat-item{display: inline-block;margin: 0 40px} .stat-number{font-size: 36px;color: #0D7DFC;font-family: var(--font-number)} .stat-label{font-size: 16px;color: #333333;margin-top: 10px;font-family: var(--font-light)} .map-container{max-width: 1200px;margin: 0 auto;height: 600px;background: url("../images/index/map.png") no-repeat center center;background-size: contain;position: relative;z-index: 1} @media (max-width: 768px){.map-container{height: 400px} .stat-item{margin: 0 20px} .stat-number{font-size: 28px} .stat-label{font-size: 14px} } .our-advantages{padding: 80px 0;background: #DFE7FA;.section-title{text-align: center;font-family: var(--font-medium);font-weight: 65 Medium;color:#333333} .section-subtitle{text-align: center;font-family: var(--font-light);color:#333333;font-weight: 45 Light} } .advantage-flex{display: flex;max-width: 1400px;margin: 0 auto;gap: 30px} .advantage-main-card{flex: 1 1 18%;background: url('../images/index/advantage.png') no-repeat center center / cover;color: #fff;border-radius: 3px;box-shadow: 0 8px 32px rgba(58,141,255,0.18);padding: 48px 16px;display: flex;flex-direction: column} .main-card-title{font-size: 20px;font-family: var(--font-primary);font-weight: 55 Regular;margin-bottom: 48px;letter-spacing: 1px} .main-card-desc{font-size: 14px;line-height: 2;font-family: var(--font-light);font-weight: 45 Light} .advantage-grid{flex: 2 1 67%;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(2,1fr);gap: 24px} .advantage-card{background: #fff;border-radius: 3px;box-shadow: 0 2px 12px rgba(0,0,0,0.07);padding: 32px 20px 24px 24px;min-height: 140px;display: flex;flex-direction: column;justify-content: flex-start} .advantage-card-title{font-size: 16px;font-family: var(--font-primary);font-weight: 55 Regular;color: #0D7DFC;margin-bottom: 16px} .advantage-card-desc{font-size: 14px;font-family: var(--font-light);font-weight: 45 Light;color: #333;line-height: 1.8} @media (max-width: 1100px){.advantage-flex{flex-direction: column;gap: 24px} .advantage-main-card{max-width: 100%;min-width: unset;margin-bottom: 16px} .advantage-grid{grid-template-columns: repeat(2,1fr);grid-template-rows: repeat(3,1fr)} } @media (max-width: 700px){.advantage-flex{flex-direction: column;gap: 16px} .advantage-main-card{padding: 32px 16px} .advantage-grid{grid-template-columns: 1fr;grid-template-rows: repeat(6,1fr);gap: 12px} .advantage-card{padding: 20px 12px 16px 14px;min-height: unset} } .brand-showcase{padding: 80px 0;background: #f5f6fa;text-align: center} .brand-grid{display: grid;grid-template-columns: repeat(5,1fr);gap: 30px;max-width: 1400px;margin: 0 auto;justify-items: center;align-items: center} .brand-item{display: flex;flex-direction: column;align-items: center;background: none;box-shadow: none;border: none;cursor: pointer} .brand-img-wrapper{width: 120px;height: 120px;background: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;box-shadow: 0 2px 12px rgba(0,0,0,0.07);margin-bottom: 10px;transition: border 0.2s,box-shadow 0.2s,transform 0.3s cubic-bezier(.4,2,.6,1);border: 2px solid transparent;overflow: hidden} .brand-item:hover .brand-img-wrapper{border: 2px solid #1165FF;box-shadow: 0 8px 32px rgba(17,101,255,0.18);transform: scale(1.15)} .brand-img-wrapper img{transition: transform 0.4s cubic-bezier(.4,2,.6,1)} .brand-item:hover .brand-img-wrapper img{transform: scale(1.4)} .brand-label{margin-top: 0;text-align: center;color: #4CA6FF;font-size: 14px;letter-spacing: 1px;width: fit-contact;white-space: nowrap;overflow: hidden;text-overflow: ellipsis} .contact-us{padding: 80px 0;text-align: center} .contact-form{display: flex;align-items: center;border-radius: 8px;padding: 6px 6px 6px 16px;max-width: 440px;margin: 0 auto} .contact-input{flex: 1;border: 1.5px solid #E3EAF5;outline: none;font-size: 16px;padding: 8px 12px;background: #fff;color: #A9A9A9;font-family: var(--font-light),sans-serif;font-weight: 45 Light;box-shadow: none} .contact-input::placeholder{color: #C0C7D1;font-size: 15px} .contact-input:focus{border: 1.5px solid #4CA6FF;outline: none;box-shadow: none;background: #fff;color: #333} .contact-submit{padding: 0 28px;height: 42px;border: none;background: linear-gradient(90deg,#4CA6FF 0%,#1CB5FF 100%);color: #fff;font-size: 16px;font-weight: 500;font-family: var(--font-medium),sans-serif;font-weight: 65 Medium;cursor: pointer;box-shadow: 0 2px 8px rgba(76,166,255,0.10)} .contact-submit:hover{background: linear-gradient(90deg,#4CA6FF 0%,#1CB5FF 100%);box-shadow: 0 2px 8px rgba(76,166,255,0.10);transform: none} body.index-page #header.header-transparent{background: transparent !important;box-shadow: none !important} body.index-page #header.header-default{background: rgba(255,255,255,0.9) !important;backdrop-filter: blur(10px) !important;box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important} body.index-page #header nav ul li a{color: #333} body.index-page #header nav ul li a:hover,body.index-page #header nav ul li a.active{color: #0066ff} .about-products{padding: 80px 20px;background: #F2F4FA;text-align: center} .about-products-title{font-size: 36px;font-family: var(--font-heading);color: #333;margin-bottom: 16px} .about-products-subtitle{font-size: 16px;color: #666;margin-bottom: 60px;font-family: var(--font-light)} .about-products-cards{display: grid;grid-template-columns: repeat(3,1fr);gap: 30px;max-width: 85%;margin: 0 auto} .about-products-card{background: #fff;border-radius: 3px;padding: 10px 20px;text-align: center;box-shadow: 0 4px 20px rgba(0,0,0,0.08);transition: transform 0.3s ease,box-shadow 0.3s ease;position: relative;overflow: hidden} .about-products-card:hover{transform: translateY(-5px);box-shadow: 0 8px 30px rgba(0,0,0,0.12)} .about-products-icon{width: 80px;height: 80px;margin: 0 auto 24px;display: flex;align-items: center;justify-content: center;position: relative} .about-products-icon::before{content: "";position: absolute;width: 40px;height: 40px;background: rgba(255,255,255,0.3);border-radius: 50%} .about-products-card-title{font-size: 18px;font-family: var(--font-medium);color: #0D7DFC;margin-bottom: 16px} .about-products-card-subtitle{font-size: 14px;color: #333333;margin-bottom: 16px;font-family: var(--font-primary)} .about-products-card-desc{font-size: 14px;color: #333333;line-height: 1.6;font-family: var(--font-primary)} @media (max-width: 992px){.about-products-cards{grid-template-columns: repeat(2,1fr);gap: 24px} } @media (max-width: 768px){.about-products{padding: 60px 20px} .about-products-title{font-size: 28px} .about-products-cards{grid-template-columns: 1fr;gap: 20px} .about-products-card{padding: 30px 20px} } @font-face{font-family: "DIN-Medium";src: url("../fonts/DIN-Medium.otf") format("opentype");font-weight: normal;font-style: normal} .hot-activities{background: #f5f7fa;padding: 40px 0} .activity-card{width: 75%;margin: 0 auto 32px auto;background: #fff;border-radius: 3px;box-shadow: 0 2px 8px rgba(0,0,0,0.05);padding: 32px;position: relative} .activity-card-left{display: flex;align-items: center;gap: 32px} .activity-card-right{display: flex;align-items: center;gap: 32px;flex-direction: row-reverse} .activity-card-left-top{display: flex;align-items: stretch;gap: 24px} .activity-card-left-top .activity-img{flex: 0 0 250px;width: 250px;height: auto} .activity-card-right-top{display: flex;align-items: stretch;gap: 24px;flex-direction: row-reverse} .activity-card-right-top .activity-img{flex: 0 0 250px;width: 250px;height: auto} .activity-card-no-image{display: block} .activity-img{overflow: hidden;border-radius: 8px;display: flex;align-items: center;justify-content: center;background: #eee} .activity-img img{width: 100%;height: 100%;object-fit: cover;border-radius: 8px} .activity-card-left .activity-img,.activity-card-right .activity-img{max-width: 320px;min-width: 220px;height: 180px} .activity-card-left-top .activity-img,.activity-card-right-top .activity-img{border-radius: 8px;overflow: hidden;background: #f5f5f5;display: flex;align-items: center;justify-content: center} .activity-card-left-top .activity-img img,.activity-card-right-top .activity-img img{width: 100%;height: 100%;object-fit: cover;background: #fff} .activity-info{flex: 1;display: flex;flex-direction: column;justify-content: flex-start;min-height: 0} .activity-card-left-top .activity-info,.activity-card-right-top .activity-info{flex: none} .activity-card-no-image .activity-info{flex: none;width: 100%} .activity-title{font-size: 18px;color: #333;font-family: var(--font-medium);line-height: 1.4;margin-bottom: 20px;font-weight: 65 Medium;text-align: center} .activity-content{color: #333;font-size: 14px;line-height: 1.8;margin-bottom: 20px;text-align: justify;font-family: var(--font-primary)} .activity-content p{margin-bottom: 16px;line-height: 1.8} .activity-content p:last-child{margin-bottom: 0} .activity-time{color: #999;font-size: 14px;display: flex;align-items: center;justify-content: flex-start;gap: 8px;margin-top: auto;padding-top: 16px} .icon-time{display: inline-block;width: 14px;height: 14px;background: url('../images/common/time.svg') no-repeat center/contain;opacity: 0.6;flex-shrink: 0} .loading-state{display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 60px 20px;text-align: center} .loading-spinner{width: 40px;height: 40px;border: 3px solid #f3f3f3;border-top: 3px solid #0066FF;border-radius: 50%;animation: spin 1s linear infinite;margin-bottom: 16px} @keyframes spin{0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)} } .loading-state p{color: #666;font-size: 16px;margin: 0} .error-state{display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 60px 20px;text-align: center} .error-state p{color: #999;font-size: 16px;margin-bottom: 16px} .retry-btn{padding: 8px 24px;background: #0066FF;color: white;border: none;border-radius: 4px;font-size: 14px;cursor: pointer;transition: background 0.3s ease} .retry-btn:hover{background: #0052CC} .empty-state{display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 60px 20px;text-align: center} .empty-state p{color: #999;font-size: 16px;margin: 0} @media (max-width: 900px){.activity-card{padding: 16px} .activity-card-left,.activity-card-right{flex-direction: column;gap: 16px} .activity-card-left .activity-img,.activity-card-right .activity-img{width: 100%;min-width: 0;max-width: 100%;height: 180px;flex: none} .activity-card-left-top,.activity-card-right-top{flex-direction: column;gap: 16px} .activity-card-left-top .activity-img,.activity-card-right-top .activity-img{width: 100%;height: 180px;flex: none} .activity-card-left .activity-info,.activity-card-right .activity-info{flex: none;width: 100%} .activity-title{font-size: 20px;margin-bottom: 16px} .activity-content{font-size: 15px;line-height: 1.7;margin-bottom: 16px} .activity-time{font-size: 13px;padding-top: 12px} } .activity-detail{display: flex;justify-content: center;align-items: center;background: #f5f7fa} .detail-container{display: flex;background: #fff;border-radius: 3px;width: 75%;height: 400px} .detail-img-box{position: relative;left: -35px;top: -35px;width: 400px;height: 460px;z-index: 1} .detail-img-box img{width: 100%;height: 100%;border-radius: 8px;position: relative;z-index: 2} .detail-info{flex: 1;display: flex;flex-direction: column} .detail-title{width:fit-content;font-size: 18px;margin: 15px auto;padding:8px;color: #333333;text-align: center;font-family: var(--font-medium);border-bottom: 2px solid #0D7DFC} .detail-content{color: #333333;font-family: var(--font-primary);font-size: 14px;text-indent: 2em;line-height: 24px;margin-bottom: 16px} .detail-times{display: flex;gap: 48px;margin-bottom: 32px} .detail-time{display: flex;flex-direction: column;align-items: center} .time-date{color: #0D7DFC;font-family: var(--font-number);font-size: 24px;margin-bottom: 4px} .time-desc{color: #333;font-family: var(--font-light);font-size: 16px} .detail-btn{display: inline-block;width:fit-content;padding: 10px 32px;background: #ECF5FC;color: #0D7DFC;border:1px solid #0D7DFC;border-radius: 3px;font-size: 16px;text-decoration: none;transition: background 0.2s} .detail-btn:hover{background: rgba(13,125,252,0.3)} .arrow{margin-left: 6px;font-size: 18px} @media (max-width: 900px){.detail-container{flex-direction: column;align-items: center;padding: 24px 8px;gap: 24px} .detail-img-box{margin-right: 0;margin-bottom: 16px;width: 100%;height: 220px} } .animate__animated{animation-duration: 1s;animation-fill-mode: both} .animate__delay-1s{animation-delay: 0.2s} .animate__delay-2s{animation-delay: 0.4s} .animate__delay-3s{animation-delay: 0.6s} .animate__faster{animation-duration: 0.5s} .hover-scale{transition: transform 0.3s ease,box-shadow 0.3s ease} .hover-scale:hover{transform: scale(1.03);box-shadow: 0 10px 30px rgba(0,0,0,0.1)} .hover-float{transition: transform 0.3s ease} .hover-float:hover{transform: translateY(-5px)} [data-aos]{opacity: 0;transition: transform 0.3s,opacity 0.3s} [data-aos].aos-animate{opacity: 1} .hero-banner{position: relative;width: 100%;overflow: hidden;margin-top: -70px;padding-top: 70px} .hero-banner::before{content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url("../images/merchant-verification/hf.jpg") no-repeat center center;background-size: cover;z-index: 0} .hero-banner > .container{display: flex;max-width: 1200px;margin: 0 auto;padding: 120px 20px;position: relative;z-index: 1} .banner-left{display: flex;width: 100%;flex-direction: column;align-items: flex-start;position: relative;top: -10%} .banner-title{font-size: 48px;width: 100%;font-family: var(--font-heading);color: #0066ff;margin-bottom: 30px} .banner-subtitle{font-size: 36px;font-family: var(--font-heading);color: #333333;margin-bottom: 12px} .banner-desc{font-size: 36px;font-family: var(--font-heading);color: #333333;margin-bottom: 32px} .qrcode-block{display: flex;flex-direction: column;align-items: center;margin-top: 16px;background-color: #fff;padding: 10px;border-radius: 12px;box-shadow: 0 4px 15px rgba(0,0,0,0.1)} .banner-qrcode{width: 120px;height: 120px;border-radius: 8px;margin-bottom: 8px} .qrcode-tip{font-size: 0.95rem;color: #666;text-align: center} .banner-right{position: absolute;right: 10%;top: 30%;transform: translateY(-50%)} .app-preview-box{border-radius: 18px;margin-top: 30px} .app-preview-img{width: 360px;max-width: 100%;display: block} .banner-image{flex: 1;max-width: 400px;animation: float 6s ease-in-out infinite} .banner-image img{width: 100%;height: auto;filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1))} @keyframes float{0%{transform: translateY(0px)} 50%{transform: translateY(-20px)} 100%{transform: translateY(0px)} } @media screen and (max-width: 1200px){.hero-banner > .container{padding: 100px 20px} } @media screen and (max-width: 992px){.hero-banner > .container{padding: 80px 20px} } @media screen and (max-width: 900px){.hero-banner > .container{flex-direction: column;text-align: center;padding: 60px 20px} .banner-left,.banner-right{min-width: 0;width: 100%;align-items: center} .banner-left{margin-bottom: 32px} .app-preview-img{width: 160px} } .section-title{text-align: center;font-size: 28px;font-weight: bold;margin-bottom: 15px;color: #333} .section-desc{text-align: center;font-size: 16px;color: #666;margin-bottom: 50px} .merchant-benefits .section-title{font-size: 24px;margin-bottom: 10px} .merchant-benefits .section-desc{margin-bottom: 40px} .merchant-benefits{padding: 80px 0;background-color: #fff} .benefits-container{display: flex;justify-content: space-around;flex-wrap: wrap;max-width: 100%;margin: 0 auto;padding: 0 260px;gap: 60px} .benefit-item{flex: 0 1 220px;text-align: center;display: flex;flex-direction: column;align-items: center;transition: transform 0.3s ease,opacity 0.3s ease} .benefit-item:hover{transform: translateY(-10px) scale(1.03)} .benefit-icon{width: 100px;height: 100px;margin: 0 auto 15px;border-radius: 50%;display: flex;align-items: center;justify-content: center;transition: transform 0.3s ease} .benefit-item:hover .benefit-icon{transform: scale(1.1)} .benefit-icon img{width: 100%;height: 100%} .benefit-content_title{font-size: 20px;color: #333;font-family: var(--font-medium);font-weight: 65 Medium;margin-bottom: 12px} .benefit-content_desc{font-size: 14px;font-family: var(--font-light);font-weight: 45 Light;color: #333333;line-height: 1.5;width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis} .choose-reasons{padding: 60px 0;background-color: #F2F4FA} .choose-reasons .section-title{font-size: 28px;margin-bottom: 10px;font-family: var(--font-medium),sans-serif} .choose-reasons .section-desc{font-size: 16px;margin-bottom: 40px;font-family: var(--font-primary),sans-serif} .reasons-container{display: grid;grid-template-columns: repeat(2,1fr);gap: 30px;max-width: 1000px;margin: 0 auto;padding: 0 20px} .reason-item{background: #fff;padding: 20px 30px;border-radius: 0;box-shadow: 0 1px 6px rgba(0,0,0,0.03);transition: transform 0.3s ease;display: flex;flex-direction: row;align-items: center;border: 1px solid #f0f0f0;height: 80px} .reason-item:hover{transform: translateY(-5px)} .reason-title{width: 90px;margin-right: 30px;text-align: center;padding-right: 0;display: flex;justify-content: center;align-items: center} .reason-title img{width: 100%;height: auto;max-height: 50px;object-fit: contain} .reason-desc{font-size: 14px;color: #666;line-height: 1.5;font-family: var(--font-light),sans-serif;margin: 0;flex: 1} .contact-us{padding: 80px 0;text-align: center} .contact-form{display: flex;align-items: center;border-radius: 8px;padding: 6px 6px 6px 16px;max-width: 440px;margin: 0 auto} .contact-input{flex: 1;border: 1.5px solid #E3EAF5;outline: none;font-size: 16px;padding: 8px 12px;background: #fff;color: #A9A9A9;font-family: var(--font-light),sans-serif;font-weight: 45 Light;box-shadow: none} .contact-input::placeholder{color: #C0C7D1;font-size: 15px} .contact-input:focus{border: 1.5px solid #4CA6FF;outline: none;box-shadow: none;background: #fff;color: #333} .contact-submit{padding: 0 28px;height: 42px;border: none;background: linear-gradient(90deg,#4CA6FF 0%,#1CB5FF 100%);color: #fff;font-size: 16px;font-weight: 500;font-family: var(--font-medium),sans-serif;font-weight: 65 Medium;cursor: pointer;box-shadow: 0 2px 8px rgba(76,166,255,0.10)} .contact-submit:hover{background: linear-gradient(90deg,#4CA6FF 0%,#1CB5FF 100%);box-shadow: 0 2px 8px rgba(76,166,255,0.10);transform: none} .contact-input:hover{border: 1.5px solid #4CA6FF} .section-subtitle{text-align: center;font-size: 16px;color: #666;margin-bottom: 50px} @media screen and (max-width: 768px){.benefits-container{padding: 0 20px;gap: 40px} .benefit-item{flex: 0 1 100%;max-width: 220px} .reasons-container{grid-template-columns: 1fr} .reason-item{flex-direction: column;align-items: flex-start;height: auto;padding: 20px} .reason-title{margin-right: 0;margin-bottom: 15px;padding-right: 0;text-align: center;padding-bottom: 10px;width: 100%} .reason-title img{max-width: 80px} .contact-form{flex-direction: column} .submit-btn{width: 100%} } @font-face{font-family: var(--font-number);src: url("../fonts/DIN-Medium.otf") format("opentype");font-weight: normal;font-style: normal} .partners-banner{padding: 80px 0 60px;text-align: center;background-color: #fff} .partners-banner h2{font-size: 30px;color: #333333;margin-bottom: 20px;font-family: var(--font-medium)} .partners-banner .subtitle{font-size: 16px;color: #333333;margin-bottom: 50px;font-family: var(--font-light)} .partners-grid{display: flex;flex-wrap: wrap;max-width: 1200px;margin: 0 auto} .partner-item{width: 220px;height: 160px;margin: 10px;display: flex;align-items: center;justify-content: center;border-radius: 4px;padding: 20px;transition: all 0.3s ease} .partner-item:hover{box-shadow: 0 0 15px rgba(0,0,0,0.1);transform: translateY(-5px)} .partner-item img{max-width: 80%;max-height: 80%;object-fit: contain} @media screen and (max-width: 768px){.partners-banner h2{font-size: 28px} .partner-item{width: 150px;height: 100px} } @media screen and (max-width: 576px){.partners-banner{padding: 50px 0 30px} .partners-banner h2{font-size: 24px} .partner-item{width: 120px;height: 80px;margin: 5px} } .partners-categories{padding: 80px 0;text-align: center;background-color: #f2f4fa} .categories-container{max-width: 1200px;margin: 0 auto;padding: 0 15px} .main-category{display: flex;background-color: #fff;border-radius: 8px;overflow: hidden;margin-bottom: 30px;box-shadow: 0 4px 12px rgba(0,0,0,0.05)} .main-category img{width: 50%;object-fit: cover} .main-category-info{width: 50%;padding: 40px;text-align: left;display: flex;flex-direction: column;justify-content: center} .main-category-info h3{font-size: 24px;font-weight: bold;color: #333;margin-bottom: 20px} .main-category-info p{font-size: 14px;color: #666;margin-bottom: 10px;line-height: 1.6} .categories-grid{display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 20px} .category-item{position: relative;background-color: #fff;border-radius: 8px;overflow: hidden;box-shadow: 0 4px 12px rgba(0,0,0,0.05);transition: all 0.3s ease;aspect-ratio: 1/1;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 20px} .category-item:hover{box-shadow: 0 8px 20px rgba(0,0,0,0.1);transform: translateY(-5px)} .category-item img{width: 70%;height: auto;object-fit: contain;margin-bottom: 15px;transition: all 0.3s ease} .category-item p{font-size: 16px;color: #333;font-weight: 500} .category-item.more-item{background-color: #f8f9fa;border: 2px dashed #ddd} .category-item.more-item p{font-size: 18px;color: #0066ff;cursor: pointer} @media screen and (max-width: 992px){.main-category{flex-direction: column} .main-category img,.main-category-info{width: 100%} .main-category-info{padding: 30px} .categories-grid{grid-template-columns: repeat(2,1fr)} } @media screen and (max-width: 576px){.categories-grid{grid-template-columns: 1fr} .main-category-info{padding: 20px} .main-category-info h3{font-size: 20px} } .partners-testimonials{padding: 80px 0;background-color: #f9f9f9;text-align: center} .testimonials-container{max-width: 1200px;margin: 0 auto;padding: 0 15px} .testimonial-slider{margin-bottom: 60px} .testimonial-main{display: flex;align-items: center;justify-content: space-between;position: relative} .testimonial-card{display: flex;background-color: #fff;border-radius: 8px;overflow: hidden;box-shadow: 0 4px 15px rgba(0,0,0,0.08);margin: 0 20px;width: 100%} .testimonial-image{width: 30%;min-width: 200px;max-width: 300px} .testimonial-image img{width: 100%;height: 100%;object-fit: cover} .testimonial-content{padding: 30px;text-align: left;flex: 1} .testimonial-name{font-size: 20px;color: #161822;font-family: var(--font-primary);font-weight: 500;margin-bottom: 5px} .testimonial-name span{font-size: 14px;font-weight: normal;color: #161822;margin-left: 8px} .testimonial-stars{color: #FFD700;margin-bottom: 15px;font-size: 16px} .testimonial-text{font-size: 14px;line-height: 1.8;color: #161822;font-family: var(--font-primary)} .testimonial-navigation{width: 40px;height: 40px;border-radius: 50%;background-color: #fff;display: flex;align-items: center;justify-content: center;cursor: pointer;box-shadow: 0 2px 10px rgba(0,0,0,0.1);transition: all 0.3s ease;z-index: 10;border: 1px dashed #ddd} .testimonial-navigation:hover{background-color: #0066ff;color: #fff;transform: scale(1.1);border-color: #0066ff} .nav-arrow{font-size: 18px;font-weight: bold} .testimonial-navigation.clicked{transform: scale(0.9)} .testimonial-grid{display: flex;flex-direction: column;overflow: hidden;position: relative;width: 100vw;margin-left: calc(-50vw + 50%);margin-right: calc(-50vw + 50%);background-color: #f0f2f5} .testimonial-track{width: 100%;overflow: hidden;position: relative;background-color: #f0f2f5;height: 300px} .track-center-wrapper{display: flex;gap: 20px;padding: 20px 0;will-change: transform;animation: scrollCards 30s linear infinite} .track-center-wrapper.reverse{animation: scrollCardsReverse 30s linear infinite} @keyframes scrollCards{0%{transform: translateX(0)} 100%{transform: translateX(calc(-600px * 4 - 20px * 4))} } @keyframes scrollCardsReverse{0%{transform: translateX(calc(-600px * 4 - 20px * 4))} 100%{transform: translateX(0)} } .track-center-wrapper:hover{animation-play-state: paused} .testimonial-small{flex: 0 0 600px;width: 600px;height: 260px;background: #fff;padding: 35px;box-shadow: 0 4px 12px rgba(0,0,0,0.1);transition: transform 0.3s ease} .testimonial-small:hover{transform: translateY(-5px);box-shadow: 0 5px 15px rgba(0,0,0,0.1)} .testimonial-small-inner{display: flex;align-items: flex-start;gap: 35px;height: 100%} .small-image{width: 200px;height: 250px;flex-shrink: 0;border-radius: 8px;overflow: hidden} .small-image img{width: 100%;height: 100%;object-fit: cover} .small-content{flex: 1;display: flex;flex-direction: column;justify-content: flex-start;overflow: hidden;font-family: var(--font-primary);color: #161822} .small-content h4{font-size: 20px;color: #161822;margin-bottom: 10px;display: flex;align-items: end;font-weight: 500;gap: 12px} .small-content h4 span{font-size: 14px;font-weight: normal;white-space: nowrap} .small-content p{font-size: 14px;line-height: 1.8;text-align: left;display: -webkit-box;-webkit-line-clamp: 7;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis} .testimonial-nav-button{position: absolute;top: 50%;transform: translateY(-50%);width: 40px;height: 40px;border-radius: 50%;background-color: #fff;box-shadow: 0 2px 10px rgba(0,0,0,0.1);display: flex;align-items: center;justify-content: center;cursor: pointer;z-index: 10;transition: all 0.3s ease;color: #333} .testimonial-nav-button:hover{background-color: #0066ff;color: #fff;transform: translateY(-50%) scale(1.1)} .testimonial-nav-button.nav-left{left: 5%} .testimonial-nav-button.nav-right{right: 5%} .testimonial-nav-button i{font-size: 16px} .special-layout .testimonial-small:hover{transform: translateY(-5px);box-shadow: 0 8px 25px rgba(0,0,0,0.15)} @media screen and (max-width: 1200px){.testimonial-track{width: calc(600px * 1.5)} .special-layout .testimonial-small{width: 580px} .testimonial-nav-button.nav-left{left: 2%} .testimonial-nav-button.nav-right{right: 2%} } @media screen and (max-width: 992px){.testimonial-track{width: calc(580px * 1.2)} .special-layout .testimonial-small{width: 560px} } @media screen and (max-width: 768px){.testimonial-track{width: calc(540px * 1.1)} .special-layout .testimonial-small{width: 520px;height: 300px;padding: 25px} .small-image{width: 180px;height: 230px} .small-content h4{font-size: 20px} .small-content p{font-size: 16px;-webkit-line-clamp: 6} } @media screen and (max-width: 576px){.testimonial-track{width: calc(480px * 1.1)} .special-layout .testimonial-small{width: 460px;height: 280px;padding: 20px} .small-image{width: 160px;height: 220px} } .contact-us{padding: 80px 0;text-align: center;background-color: #fff} .section-title{font-size: 32px;color: #161822;margin-bottom: 20px;font-weight: 500;font-family: var(--font-medium)} .section-subtitle{font-size: 16px;color: #161822;margin-bottom: 40px;font-family: var(--font-light)} .contact-form{display: flex;align-items: center;border-radius: 8px;padding: 6px 6px 6px 16px;max-width: 440px;margin: 0 auto} .contact-input{flex: 1;border: 1.5px solid #E3EAF5;outline: none;font-size: 16px;padding: 8px 12px;background: #fff;color: #A9A9A9;box-shadow: none;transition: border-color 0.2s} .contact-input::placeholder{color: #C0C7D1;font-size: 15px} .contact-input:focus{border: 1.5px solid #4CA6FF;outline: none;box-shadow: none;background: #fff;color: #333} .contact-input:hover{border: 1.5px solid #4CA6FF} .contact-submit{padding: 0 28px;height: 42px;border: none;background: linear-gradient(90deg,#4CA6FF 0%,#1CB5FF 100%);color: #fff;font-size: 16px;font-weight: 500;cursor: pointer;box-shadow: 0 2px 8px rgba(76,166,255,0.10)} .contact-submit:hover{background: linear-gradient(90deg,#4CA6FF 0%,#1CB5FF 100%);box-shadow: 0 2px 8px rgba(76,166,255,0.10)} .hover-float{transition: transform 0.3s ease} .hover-float:hover{transform: translateY(-5px)} .testimonial-swiper{width: 100%;padding: 50px 0} .testimonial-swiper .swiper-slide{width: 70%;max-width: 800px;background-color: transparent;transition: transform 0.3s} .testimonial-swiper .swiper-slide-active{transform: scale(1.05);z-index: 1} .testimonial-swiper .testimonial-card{background-color: #fff;border-radius: 10px;box-shadow: 0 5px 20px rgba(0,0,0,0.1);display: flex;width: 100%;height: 400px;max-width: 100%;overflow: hidden;position: relative} .testimonial-swiper .testimonial-image{flex: 0 0 240px;height: 100%;overflow: hidden;position: relative} .testimonial-swiper .testimonial-image:after{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3))} .testimonial-swiper .testimonial-image img{width: 100%;height: 100%;object-fit: cover} .testimonial-swiper .testimonial-content{flex: 1;padding: 30px;position: relative;height: 100%;overflow-y: auto} .testimonial-swiper .testimonial-content::-webkit-scrollbar{width: 6px} .testimonial-swiper .testimonial-content::-webkit-scrollbar-track{background: #f1f1f1;border-radius: 10px} .testimonial-swiper .testimonial-content::-webkit-scrollbar-thumb{background: #ddd;border-radius: 10px} .testimonial-swiper .testimonial-content::-webkit-scrollbar-thumb:hover{background: #4CA6FF} .testimonial-swiper .testimonial-name{font-size: 20px;margin-bottom: 15px;color: #161822;font-weight: 500;font-family: var(--font-primary)} .testimonial-swiper .testimonial-name span{font-size: 16px;color: #161822;font-family: var(--font-primary);font-weight: normal;margin-left: 10px} .testimonial-swiper .testimonial-position{font-size: 14px;color: rgba(22,24,34,0.5);margin-bottom: 15px;font-weight: normal;line-height: 1.5} .testimonial-swiper .testimonial-text{color: #161822;line-height: 1.5;font-size: 14px;font-family: var(--font-primary)} .testimonial-swiper .swiper-button-next,.testimonial-swiper .swiper-button-prev{color: #4CA6FF;background-color: rgba(255,255,255,0.8);width: 40px;height: 40px;border-radius: 50%;box-shadow: 0 2px 5px rgba(0,0,0,0.1)} .testimonial-swiper .swiper-button-next:after,.testimonial-swiper .swiper-button-prev:after{font-size: 18px;font-weight: bold} .testimonial-swiper .swiper-button-next:hover,.testimonial-swiper .swiper-button-prev:hover{background-color: #4CA6FF;color: white} @font-face{font-family: "DIN-Medium";src: url("../fonts/DIN-Medium.otf") format("opentype");font-weight: normal;font-style: normal} .banner{position: relative;width: 100%;height: 600px;background-image: url('../images/products/hf.jpg');background-size: cover;background-position: center;background-repeat: no-repeat;display: flex;margin-top: -70px;padding-top: 70px} .banner .container{position: relative;width: 100%;top: 100px;height: fit-content;padding: 0 20px} .banner h1{font-size: 48px;margin-bottom: 8%;font-family: var(--font-heading);color: #0066FF} .banner p{font-size: 24px;font-family: var(--font-heading);color: #333333;max-width: 600px} @media (max-width: 768px){.banner{height: 400px} .banner h1{font-size: 36px} .banner p{font-size: 18px;padding: 0 20px} } @media (max-width: 480px){.banner{height: 300px} .banner h1{font-size: 28px} .banner p{font-size: 16px} } .products{padding: 40px 0;background-color: #F2F4FA} .products .container{max-width: 1200px;margin: 0 auto;padding: 0 15px} .section-title{font-size: 36px;text-align: center;color: #333;margin-bottom: 10px;font-family: var(--font-heading)} .section-subtitle{font-size: 16px;text-align: center;color: #666;margin-bottom: 40px;font-family: var(--font-primary)} .products-grid{display: grid;grid-template-columns: repeat(4,1fr);gap: 20px;margin-top: 20px} .product-card{background: #fff;border-radius: 8px;padding: 20px;text-align: center;transition: all 0.3s ease;cursor: pointer;border: 1px solid #f0f0f0;display: flex;flex-direction: column} .product-card:hover{transform: translateY(-5px);box-shadow: 0 8px 16px rgba(0,0,0,0.08)} .product-image{width: 100%;height: 260px;object-fit: contain;margin-bottom: 12px;flex-shrink: 0} .product-title{font-size: 14px;color: #333;margin-bottom: 8px;line-height: 1.6;font-family: var(--font-primary);font-weight: 500;text-align: left;display: block;overflow: visible;height: auto;word-break: break-all;white-space: normal} .product-price{color: #333;font-size: 16px;font-weight: normal;text-align: left;font-family: var(--font-primary);margin-bottom: 0} .product-price::before{content: "¥";font-size: 14px;margin-right: 2px} @media (max-width: 1024px){.products-grid{grid-template-columns: repeat(3,1fr)} } @media (max-width: 768px){.products-grid{grid-template-columns: repeat(2,1fr);gap: 20px} } @media (max-width: 480px){.products-grid{grid-template-columns: 1fr} }