/* Local page styles generated from index.html utility classes */
*{box-sizing:border-box;margin:0;padding:0;}
*, ::after, ::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}
button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}
html{scroll-behavior:smooth;}
body{font-family:"Microsoft YaHei","PingFang SC","Segoe UI",Arial,sans-serif; background-color:#f8fafc; color:#1f2937; line-height:1.6; min-height:100vh;}
img{max-width:100%;height:auto;display:block;}
button, input, textarea, select{font:inherit;}
a{color:inherit;text-decoration:none;}
.smooth-scroll{scroll-behavior:smooth;}
.hero-bg{position:relative;background-image:linear-gradient(rgba(0,51,102,0.85),rgba(0,51,102,0.7)),url("../img/1.jpg");background-size:cover;background-position:center;background-attachment:fixed;}
.hero-overlay{
    pointer-events:none;
    background-image: url(../img/cubes.png);
}
.card-hover{transition:transform .3s ease, box-shadow .3s ease;}
.card-hover:hover{transform:translateY(-5px);box-shadow:0 10px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1);}
.fade-in-section{opacity:0;transform:translateY(20px);transition:opacity .6s ease-out, transform .6s ease-out;will-change:opacity, visibility;}
.fade-in-section.is-visible{opacity:1;transform:none;}
::-webkit-scrollbar{width:8px;}::-webkit-scrollbar-track{background:#f1f1f1;}::-webkit-scrollbar-thumb{background:#1e40af;border-radius:4px;}::-webkit-scrollbar-thumb:hover{background:#1e3a8a;}
.line-clamp-2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.delay-100{animation-delay:.1s;}
.delay-200{animation-delay:.2s;}
.after\:content-\[''\]::after{content:"";display:block;}
.after\:absolute::after{position:absolute;}
.after\:left-0::after{left:0;}
.after\:-bottom-1::after{bottom:-0.25rem;}
.after\:w-0::after{width:0;}
.after\:h-0\.5::after{height:0.125rem;}
.after\:bg-blue-700::after{background-color:#1d4ed8;}
.after\:transition-all::after{transition:all .3s ease-in-out;}
.group:hover .group-hover\:bg-blue-800{background-color:#1e40af;}
.group:hover .group-hover\:scale-110{transform:scale(1.10);}
.group:hover .group-hover\:translate-x-1{transform:translateX(0.25rem);}
@keyframes bounce {0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes fadeInUp {0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}
.animate-bounce{animation:bounce 1.5s infinite;}
.animate-fade-in-up{animation:fadeInUp .8s ease-out forwards;}
.transition{transition-duration:.3s;transition-timing-function:ease-in-out;}
.transition-all{transition:all .3s ease-in-out;}
.transform{transform:translateZ(0);}
.outline-none:focus{outline:none;}
.focus\:outline-none:focus{outline:none;}
.flex{display:flex;}
.fixed { position: fixed;}
.grid{display:grid;}
.block{display:block;}
.inline-block{display:inline-block;}
.inline-flex{display:inline-flex;}
.items-center{align-items:center;}
.items-start{align-items:flex-start;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.flex-col{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}
.flex-shrink-0{flex-shrink:0;}
.relative{position:relative;}
.absolute{position:absolute;}
.inset-0{top:0;right:0;bottom:0;left:0;}
.top-0{top:0;}
.left-0{left:0;}
.right-0{right:0;}
.bottom-8{bottom:2rem;}
.left-1\/2{left:50%;}
.translate-x-1\/2{transform:translateX(-50%);}
.translate-y-20{transform:translateY(5rem);}
.z-10{z-index:10;}
.z-40{z-index:40;}
.z-50{z-index:50;}
.rounded-full{border-radius:9999px;}
.rounded-lg{border-radius:0.5rem;}
.rounded-xl{border-radius:0.75rem;}
.rounded-2xl{border-radius:1rem;}
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1);}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);}
.drop-shadow-lg{text-shadow:0 10px 15px rgba(0,0,0,0.15);}
.bg-white{background-color:#ffffff;}
.bg-gray-50{background-color:#f9fafb;}
.bg-gray-900{background-color:#111827;}
.bg-gray-950{background-color:#0f172a;}
.bg-blue-700{background-color:#1d4ed8;}
.bg-blue-800\/10{background-color:rgba(30,64,143,0.1);}
.bg-blue-900{background-color:#1e3a8a;}
.bg-blue-900\/30{background-color:rgba(15,23,42,0.3);}
.bg-blue-100{background-color:#dbeafe;}
.bg-blue-50{background-color:#eff6ff;}
.bg-orange-500{background-color:#f97316;}
.bg-orange-100{background-color:#ffedd5;}
.bg-white\/10{background-color:rgba(255,255,255,0.1);}
.bg-white\/95{background-color:rgba(255,255,255,0.95);}
.bg-gray-800{background-color:#1f2937;}
.bg-green-100{background-color:#d1fae5;}
.bg-red-100{background-color:#fa9fa3;}
.text-white{color:#ffffff;}
.text-white\/70{color:rgba(255,255,255,0.7);}
.text-blue-700{color:#1d4ed8;}
.text-blue-900{color:#1e3a8a;}
.text-blue-100{color:#dbeafe;}
.text-blue-200{color:#bfdbfe;}
.text-gray-200{color:#e5e7eb;}
.text-gray-400{color:#9ca3af;}
.text-gray-500{color:#6b7280;}
.text-gray-600{color:#4b5563;}
.text-gray-700{color:#374151;}
.text-gray-800{color:#1f2937;}
.text-gray-900{color:#111827;}
.text-orange-400{color:#fb923c;}
.text-green-600{color:#16a34a;}
.text-transparent{color:transparent;}
.text-center{text-align:center;}
.uppercase{text-transform:uppercase;}
.tracking-wide{letter-spacing:0.05em;}
.tracking-wider{letter-spacing:0.1em;}
.font-bold{font-weight:700;}
.font-medium{font-weight:500;}
.text-sm{font-size:0.875rem;}
.text-base{font-size:1rem;}
.text-lg{font-size:1.125rem;}
.text-xl{font-size:1.25rem;}
.text-2xl{font-size:1.5rem;}
.text-3xl{font-size:1.875rem;}
.text-4xl{font-size:2.25rem;}
.leading-none{line-height:1;}
.leading-tight{line-height:1.1;}
.leading-relaxed{line-height:1.75;}
.uppercase{text-transform:uppercase;}
.max-w-7xl{max-width:80rem;width:100%;}
.max-w-5xl{max-width:64rem;width:100%;}
.max-w-3xl{max-width:48rem;width:100%;}
.max-w-2xl{max-width:46rem;width:100%;}
.max-w-sm{max-width:24rem;width:100%;}
.mx-auto{margin-left:auto;margin-right:auto;}
.mb-1{margin-bottom:0.25rem;}
.mb-2{margin-bottom:0.5rem;}
.mb-3{margin-bottom:0.75rem;}
.mb-4{margin-bottom:1rem;}
.mb-6{margin-bottom:1.5rem;}
.mb-8{margin-bottom:2rem;}
.mb-10{margin-bottom:2.5rem;}
.mb-16{margin-bottom:4rem;}
.mt-2{margin-top:0.5rem;}
.mt-8{margin-top:2rem;}
.mt-12{margin-top:3rem;}
.ml-2{margin-left:0.5rem;}
.p-2{padding:0.5rem;}
.p-4{padding:1rem;}
.p-6{padding:1.5rem;}
.p-8{padding:2rem;}
.px-3{padding-left:0.75rem;padding-right:0.75rem;}
.px-4{padding-left:1rem;padding-right:1rem;}
.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.px-8{padding-left:2rem;padding-right:2rem;}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem;}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem;}
.py-12{padding-top:3rem;padding-bottom:3rem;}
.py-16{padding-top:4rem;padding-bottom:4rem;}
.py-24{padding-top:6rem;padding-bottom:6rem;}
.pt-2{padding-top:0.5rem;}
.pt-4{padding-top:1rem;}
.pt-8{padding-top:2rem;}
.pt-20{padding-top:5rem;}
.pb-4{padding-bottom:1rem;}
.gap-2{gap:0.5rem;}
.gap-3{gap:0.75rem;}
.gap-4{gap:1rem;}
.gap-6{gap:1.5rem;}
.gap-8{gap:2rem;}
.gap-10{gap:2.5rem;}
.gap-16{gap:4rem;}
.space-x-4>*+*{margin-left:1rem;}
.space-x-8>*+*{margin-left:2rem;}
.space-y-1>*+*{margin-top:0.25rem;}
.space-y-2>*+*{margin-top:0.5rem;}
.space-y-4>*+*{margin-top:1rem;}
.space-y-6>*+*{margin-top:1.5rem;}
.rounded-full{border-radius:9999px;}
.border{border-width:1px;border-style:solid;border-color:#d1d5db;}
.border-2{border-width:2px;}
.border-4{border-width:4px;}
.border-blue-700{border-color:#1d4ed8;}
.border-gray-100{border-color:#f3f4f6;}
.border-gray-300{border-color:#d1d5db;}
.border-gray-800{border-color:#1f2937;}
.border-white{border-color:#ffffff;}
.border-white\/30{border-color:rgba(255,255,255,0.3);}
.border-blue-300\/50{border-color:rgba(191,219,254,0.5);}
.border-l-4{border-left-width:4px;}
.border-t{border-top-width:1px;}
.rounded-lg{border-radius:0.5rem;}
.rounded-xl{border-radius:0.75rem;}
.rounded-2xl{border-radius:1rem;}
.overflow-hidden{overflow:hidden;}
.w-full{width:100%;}
.w-1\/2{width:50%;}
.w-10{width:2.5rem;}
.w-12{width:3rem;}
.w-16{width:4rem;}
.w-20{width:5rem;}
.w-24{width:6rem;}
.w-32{width:8rem;}
.h-full{height:100%;}
.h-screen{height:100vh;}
.h-10{height:2.5rem;}
.h-12{height:3rem;}
.h-16{height:4rem;}
.h-20{height:5rem;}
.h-24{height:6rem;}
.h-32{height:8rem;}
.h-48{height:12rem;}
.h-1\.5{height:0.375rem;}
.h-\[400px\]{height:400px;}
.opacity-0{opacity:0;}
.opacity-10{opacity:0.1;}
.hover\:bg-blue-50:hover{background-color:#eff6ff;}
.hover\:bg-blue-600:hover{background-color:#2563eb;}
.hover\:bg-blue-700:hover{background-color:#1d4ed8;}
.hover\:bg-blue-800:hover{background-color:#1e40af;}
.hover\:bg-white:hover{background-color:#ffffff;}
.hover\:border-blue-700:hover{border-color:#1d4ed8;}
.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1);}
.hover\:shadow-xl:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);}
.hover\:shadow-blue-500\/30:hover{box-shadow:0 20px 25px -5px rgba(59,130,246,0.3),0 10px 10px -5px rgba(59,130,246,0.2);}
.hover\:bg-orange-600:hover{background-color:#ea580c;}
.hover\:text-blue-500:hover{color:#3b82f6;}
.hover\:text-blue-700:hover{color:#1d4ed8;}
.hover\:text-blue-800:hover{color:#1e40af;}
.hover\:text-blue-900:hover{color:#1e3a8a;}
.hover\:text-white:hover{color:#ffffff;}
.hover\:after\:w-full:hover::after{width:100%;}
.focus\:border-blue-500:focus{border-color:#3b82f6;}
.focus\:ring-2:focus{box-shadow:0 0 0 2px rgba(59,130,246,0.4);}
.focus\:ring-blue-500:focus{box-shadow:0 0 0 2px rgba(59,130,246,0.4);}
.sm\:flex-row{flex-direction:column;}
.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem;}
.md\:block{display:block;}
.md\:flex{display:flex;}
/* .md\:hidden{display:none;} */
.md\:text-4xl{font-size:2.25rem;}
.md\:text-5xl{font-size:1rem;}
.md\:text-6xl{font-size:3.75rem;}
.md\:text-xl{font-size:1.25rem;}
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.md\:col-span-2{grid-column:span 2/span 2;}
.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.lg\:px-8{padding-left:2rem;padding-right:2rem;}
.hidden{display:none;}
.max-w-7xl{max-width:80rem;}
.max-w-5xl{max-width:64rem;}
.backdrop-blur-sm {backdrop-filter: blur(4px);}
.backdrop-blur-md {backdrop-filter: blur(8px);}
.bg-clip-text {background-clip:text; -webkit-background-clip:text;}
.bg-gradient-to-r {background-image: linear-gradient(to right,#bfdbfe,#ffffff);}
.text-transparent {color: transparent;}
.relative {position: relative;}
.overflow-hidden {overflow: hidden;}
.shadow-blue-500\/30{box-shadow:0 20px 25px -5px rgba(59,130,246,0.3),0 10px 10px -5px rgba(59,130,246,0.2);}
.hover\:shadow-orange-500\/40:hover{box-shadow:0 20px 25px -5px rgba(249,115,22,0.4),0 10px 10px -5px rgba(249,115,22,0.2);}
.fa-bars:before,

.top-4{top:1rem;}
.right-4{right:1rem;}
.right-8{right:2rem;}
.-left-4{left:-1rem;}
.-right-4{right:-1rem;}
.-right-6{right:-1.5rem;}
.-top-4{top:-1rem;}
.-bottom-4{bottom:-1rem;}
.-bottom-6{bottom:-1.5rem;}
.-translate-x-1\/2{transform:translateX(-50%);}
.-z-10{z-index:-10;}
.active{background-color:#1d4ed8;color:#ffffff;border-color:#1d4ed8;}
.col-span-1{grid-column:span 1/span 1;}
.drop-shadow-md{text-shadow:0 4px 6px rgba(0,0,0,0.1);}
.duration-300{transition-duration:.3s;}
.duration-500{transition-duration:.5s;}
.filter-btn{padding:.75rem 1.5rem;border:1px solid #d1d5db;border-radius:9999px;background-color:#ffffff;color:#4b5563;cursor:pointer;transition:all .3s ease-in-out;}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.object-cover{object-fit:cover;}
.origin-top-right{transform-origin:top right;}
.product-card{transition:all .3s ease-in-out;}
.rounded-md{border-radius:0.375rem;}
.skew-x-12{transform:skewX(-12deg);}
.text-blue-600{color:#2563eb;}
.text-orange-600{color:#ea580c;}
.text-xs{font-size:0.75rem;}
.counter{display:inline-block;}
@media (min-width: 640px) {.sm\:flex-row{flex-direction:row;} .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem;}}
@media (min-width: 768px) {.md\:block{display:block;} .md\:flex{display:flex;} .md\:hidden{display:none;} .md\:text-4xl{font-size:2.25rem;} .md\:text-5xl{font-size:3rem;} .md\:text-6xl{font-size:3.75rem;} .md\:text-xl{font-size:1.25rem;} .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));} .md\:grid-cols-3{grid-template-columns:repeat(4,minmax(0,1fr));} .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));} .md\:col-span-2{grid-column:span 2/span 2;}}
@media (min-width: 1024px) {.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));} .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));} .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));} .lg\:px-8{padding-left:2rem;padding-right:2rem;}}
.bg-zs{padding-top: 0px;border-right-width: 0px;padding-right: 0px;padding-left: 0px;border-bottom-width: 0px;padding-bottom: 0px;}
.wrap {
    background-color: #007bdd;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 30px;
    justify-content: center;
}
.item {
    width: 260px;
    flex: 1 1 220px;
    max-width: 280px;
    background: #ffffff;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 10px 12px;
    position: relative;
}
.item::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 8px;
    background: #ed2624;
    border-radius: 99px;
}
.icon-box {
    width: 100px;
    height: 100px;
    border: 3px solid #e8e8e8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom:16px;
}
/* 图片样式 */
.icon-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}
.text {
    font-size:30px;
    color:#ff9900;
    font-weight:bold;
    text-align:center;
    line-height:1.3;
}

/* 手机端缩小 */
@media screen and (max-width:768px){
    .wrap{
        padding:15px;
        gap:20px;
    }
    .icon-box{
        width:100px;
        height:100px;
    }
    .icon-img {
        width: 55px;
        height: 55px;
    }
    .text{
        font-size:18px;
    }
}
@media screen and (max-width:480px){
    .item{
        max-width:100%;
    }
}
/* 外层容器：卡片之间设置间隔 */
.product-wrap {
    display: grid;
    /* 自适应：大屏3列，卡片最小宽度300px */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; /* 卡片横向、纵向隔开距离，可修改数值 */
    max-width: 1200px;
    margin: 0 auto;
}
/* 单个卡片：一张图+一段文字为一列整体 */
.product-item {
    background: #f1f1f1;
    overflow: hidden;
}
.item-img {
    width: 100%;
    display: block;
}
.item-textbox {
    padding: 24px 18px;
}
.item-title {
    font-size: 22px;
    text-align: center;
    font-weight: bold;
    margin-bottom:14px;
}
.item-desc {
    font-size:15px;
    color:#555;
    line-height:1.7;
}
/* 平板：一行2个 */
@media screen and (max-width:992px){
    .product-wrap{
        gap:24px;
    }
}
/* 手机：一行1个，竖排 */
@media screen and (max-width:576px){
    .product-wrap{
        gap:20px;
    }
}