.hard-product{width:100%;min-height:100vh;background:#fff}.hero-section{position:relative;width:100%;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}.hero-bg{position:absolute;top:0;left:0;z-index:1}.hero-bg,.hero-bg img{width:100%;height:100%}.hero-bg img{-o-object-fit:cover;object-fit:cover}.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(2,6,21,.85),rgba(2,6,21,.6) 50%,rgba(0,136,255,.2));z-index:2}.hero-content{position:relative;z-index:3;text-align:center;padding:0 20px}.hero-title{font-size:72px;font-weight:700;color:#fff;margin:0 0 16px 0;letter-spacing:8px;text-shadow:0 0 40px rgba(0,136,255,.5);-webkit-animation:fadeInUp 1s ease-out;animation:fadeInUp 1s ease-out}.hero-subtitle{font-size:24px;color:hsla(0,0%,100%,.6);letter-spacing:12px;margin:0 0 32px 0;-webkit-animation:fadeInUp 1s ease-out .2s both;animation:fadeInUp 1s ease-out .2s both}.hero-line{width:120px;height:4px;background:linear-gradient(90deg,transparent,#08f,transparent);margin:0 auto 32px;-webkit-animation:fadeInUp 1s ease-out .4s both;animation:fadeInUp 1s ease-out .4s both}.hero-desc{font-size:20px;color:hsla(0,0%,100%,.8);letter-spacing:4px;margin:0;-webkit-animation:fadeInUp 1s ease-out .6s both;animation:fadeInUp 1s ease-out .6s both}.scroll-indicator{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;-webkit-animation:bounce 2s infinite;animation:bounce 2s infinite}.mouse{width:30px;height:50px;border:2px solid hsla(0,0%,100%,.5);border-radius:15px;display:flex;justify-content:center;padding-top:10px}.wheel{width:4px;height:8px;background:#08f;border-radius:2px;-webkit-animation:scrollWheel 1.5s infinite;animation:scrollWheel 1.5s infinite}.arrow-down{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid hsla(0,0%,100%,.5);margin-top:8px}@-webkit-keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@-webkit-keyframes scrollWheel{0%{transform:translateY(0);opacity:1}to{transform:translateY(12px);opacity:0}}@keyframes scrollWheel{0%{transform:translateY(0);opacity:1}to{transform:translateY(12px);opacity:0}}@-webkit-keyframes bounce{0%,20%,50%,80%,to{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-10px)}60%{transform:translateX(-50%) translateY(-5px)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-10px)}60%{transform:translateX(-50%) translateY(-5px)}}.hard-product-content{background:url("/images/banner/科技感跳色背景 (5).jpg") no-repeat 50% fixed;background-size:cover;min-height:100vh;width:100%;display:flex;flex-direction:column;position:relative;overflow:hidden}.hard-product-content:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(3,40,85,.2196078431372549),rgba(1,23,47,.5215686274509804));z-index:0;filter:hue-rotate(356deg)}.hard-product-content>*{position:relative;z-index:1;flex:1}.hard-product-content>*,.introduction-backimg-6{display:flex;align-items:center;justify-content:center}.introduction-backimg-6{width:100%;min-height:100vh;padding:60px 20px}.hard-introduction-box{margin:0 auto;width:100%;max-width:1400px;left:0;display:flex;flex-direction:column;align-items:center}.introduction-title-hard{padding:0 0 60px;text-align:center;width:100%;max-width:880px}h2.block-title{font-size:36px;color:#fff;font-weight:700;text-align:center;position:relative;margin-bottom:30px;text-shadow:0 0 20px rgba(0,136,255,.5)}h2.block-title:after{content:"";position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);width:120px;height:4px;background:linear-gradient(90deg,transparent,#08f,transparent);box-shadow:0 0 10px rgba(0,136,255,.8)}p.hard-block-content{color:#fff;font-size:19px;line-height:36px;text-align:center;font-family:Font Awesome\ 5 Free;letter-spacing:1px}.hard-product-cards{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%;position:relative;z-index:1}.product-card{width:calc(25% - 24px);overflow:hidden;transition:all .4s ease;display:flex;flex-direction:column;-webkit-backdrop-filter:blur(12px);position:relative;cursor:pointer;min-height:340px;justify-content:space-around;padding:8px}.product-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:0 solid #0eb1ff;transition:border-top-width .3s ease 0s,border-right-width .3s ease .1s,border-bottom-width .3s ease .2s,border-left-width .3s ease .3s;pointer-events:none}.product-card:hover{border-color:rgba(0,136,255,.5)}.product-card:hover:before{border-top-width:4px;border-right-width:4px;border-bottom-width:4px;border-left-width:4px}.product-card:not(:hover):before{transition:border-top-width .3s ease .3s,border-right-width .3s ease .2s,border-bottom-width .3s ease .1s,border-left-width .3s ease 0s;border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0}.card-image{width:100%;height:300px;overflow:hidden;background:linear-gradient(135deg,rgba(0,51,237,.45098039215686275),rgba(0,0,0,.5215686274509804));position:relative}.card-image:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(0,136,255,.15),transparent);z-index:1;opacity:0;transition:opacity .4s ease}.product-card:hover .card-image:before{opacity:1}.card-image img{width:100%;height:100%;background-size:100% auto;-o-object-fit:contain;object-fit:cover;transition:transform .6s ease}.product-card:hover .card-image img{transform:scale(1.08)}.card-content{width:100%;padding:0 24px;flex-direction:column;background:linear-gradient(153deg,rgba(127,134,171,.9490196078431372),rgba(133,175,195,.5215686274509804),#81c6db);position:relative;justify-content:center;margin-top:10px;height:80px;display:flex;align-items:center;-webkit-backdrop-filter:brightness(.8);backdrop-filter:brightness(.8)}.card-content:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,136,255,.4),transparent);opacity:0;transition:opacity .4s ease}.product-card:hover .card-content{background:linear-gradient(135deg,rgba(66,98,255,.7803921568627451),#4eceff);-webkit-backdrop-filter:brightness(1);backdrop-filter:brightness(1);filter:drop-shadow(1px 1px 4px #3f5466)}.product-card:hover .card-content:after{opacity:1}.card-content h3{color:#f5f2f2;font-size:20px;font-weight:700;text-align:center;transition:all .4s ease;margin:0;padding:0;letter-spacing:1px;-webkit-line-clamp:2;max-height:60px}.card-content h3,.card-content p{position:relative;z-index:1;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.card-content p{color:#a0aec0;font-size:14px;font-weight:400;margin-bottom:20px;height:90px;-webkit-line-clamp:3;flex:1}.more-btn{background-color:transparent;border:1px solid rgba(0,136,255,.4);color:#08f;padding:10px 20px;font-size:14px;cursor:pointer;transition:all .4s ease;border-radius:25px;align-self:center;position:relative;overflow:hidden;z-index:1}.more-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,136,255,.2),transparent);transition:left .6s ease;z-index:-1}.more-btn:hover:before{left:100%}.more-btn:hover{background-color:#08f;color:#fff;box-shadow:0 0 20px rgba(0,136,255,.5);border-color:#08f;transform:translateY(-2px)}@media (max-width:1200px){.hard-introduction-box{width:95%}.hard-product-cards{justify-content:center}.product-card{width:calc(50% - 10px)}}@media (max-width:768px){.product-card{width:100%}h2.block-title{font-size:32px}p.hard-block-content{font-size:14px}}