@import"./fonts/iconfont.css";@keyframes slideIn{0%{transform:translateX(var(--start));opacity:0}100%{transform:translateX(0);opacity:1}}*{margin:0;box-sizing:border-box}:root{--slideIn-left: slideIn;--slideIn-right: slideIn;--start-left: -100%;--start-right: 100%}a{text-decoration:none;color:inherit;outline:none}ul{margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}li{list-style-type:none}.header-wrapper{display:flex;flex-direction:column;background:url(./images/solution-banner.jpg) center/cover no-repeat;height:640px}.header-wrapper .hamburger{display:none;background:none;border:none;font-size:1.5rem;padding:1rem;cursor:pointer}.header-wrapper .nav-box{display:flex;justify-content:center;align-items:center;width:100%}.header-wrapper .nav-box nav{display:flex;justify-content:center;align-items:center;padding:10px 20px;width:100%;max-width:1000px}.header-wrapper .nav-box nav img{width:108px;height:108px}.header-wrapper .nav-box .nav-list{display:flex;justify-content:center;list-style:none;margin-left:auto;gap:38px;padding-bottom:60px;transition:all .3s ease}.header-wrapper .nav-box .nav-list .nav-item a{color:#212834;text-decoration:none;font-family:Arial,sans-serif;font-size:16px;position:relative;padding:5px 0;transition:color .3s}.header-wrapper .nav-box .nav-list .nav-item a::after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:8px;height:8px;background:#212834;border-radius:50%;opacity:0;transition:opacity .3s}.header-wrapper .nav-box .nav-list .nav-item a:hover{color:#005abc}.header-wrapper .nav-box .nav-list .nav-item a:hover::after{opacity:1}.header-wrapper .header-text{margin:0 auto;flex:1;max-width:1000px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#212834}.header-wrapper .header-text .text-1{font-size:3rem}.header-wrapper .header-text .text-2{font-size:1.3rem}.header-wrapper .header-text .contact{display:flex;padding-top:20px;text-align:center;align-items:center;justify-content:center}.header-wrapper .header-text a{cursor:pointer;width:120px;height:40px;line-height:40px;font-size:14px;border-radius:4px;color:#fff;background:#228de8}.header-wrapper .header-text a:hover{background:#0079bf}.section-box{margin:0;padding:0;width:100%}.section-box .title{padding-top:24px;font-size:2.3rem;text-align:center}.introduce-box{padding:20px 0;display:flex;justify-content:center;align-items:center}.introduce-box .introduce{max-width:1200px;height:100%;display:flex;justify-content:center;align-items:center}.introduce-box .introduce .features{flex:1;display:flex;justify-content:space-between}.introduce-box .introduce .features>.left,.introduce-box .introduce .features>.right{width:50%}.introduce-box .introduce .features .feature-item{padding:20px;margin:20px;cursor:pointer;background-color:#fff;box-shadow:0px 5px 12px hsla(0,0%,40%,.16);height:220px}.introduce-box .introduce .features .feature-item .icon-box{height:54px;width:54px;background:#228de8;border-radius:18px 0 18px 0;line-height:50px;color:#fff;text-align:center}.introduce-box .introduce .features .feature-item p{font-size:1rem;text-align:left;padding-top:10px}.introduce-box .introduce .features .feature-item .text{font-size:15px;color:#777;line-height:1.5}.introduce-box .introduce .features .feature-item:hover{transform:translateY(-3px);transition:box-shadow .3s,border .3s,background-color .3s,color .3s,transform .3s}.introduce-box .introduce .detail{flex:1;padding:0 20px;text-align:right}.introduce-box .introduce .detail .title p{font-size:36px;color:#000;line-height:1;margin-bottom:20px}.introduce-box .introduce .detail .text{color:#777;line-height:1.5;margin-bottom:20px}.introduce-box .introduce .detail .more{display:inline-block;width:168px;height:48px;margin-bottom:20px;background:#228de8;color:#fff;text-align:center;text-decoration:none;line-height:48px}.introduce-box .introduce .detail .more:hover{background:#0079bf}.pano-box{background-color:#f5f5f5}.pano-box .pano{margin:0 auto;text-align:center}.solution-match-box .service{padding-bottom:24px}.solution-match-box .service .tabs{display:flex;justify-content:center;align-items:center;margin-bottom:40px;border-bottom:1px solid #eaeaea;padding-bottom:10px}.solution-match-box .service .tab-btn{padding:10px 20px;margin:0 auto;background:rgba(0,0,0,0);border:none;font-size:18px;cursor:pointer;position:relative;color:#666;transition:color .3s}.solution-match-box .service .tab-btn.active{color:#36f;font-weight:500}.solution-match-box .service .tab-btn.active::after{content:"";position:absolute;bottom:-11px;left:0;width:100%;height:2px;background-color:#36f}.solution-match-box .service .products-grid{display:none}.solution-match-box .service .products-grid.active{display:grid;grid-template-columns:repeat(2, 1fr);gap:20px;width:100%}.solution-match-box .service .product-card{display:flex;border:1px solid #f0f0f0;padding:20px;border-radius:8px;align-items:center;transition:transform .3s,box-shadow .3s}.solution-match-box .service .product-card:hover{transform:translateY(-5px);box-shadow:0 5px 15px rgba(0,0,0,.05)}.solution-match-box .service .icon-container{width:80px;height:80px;background-color:#f0f4ff;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-right:20px;flex-shrink:0}.solution-match-box .service .icon-container .iconfont{font-size:32px;color:#36f}.solution-match-box .service .product-info{flex-grow:1;text-align:left}.solution-match-box .service .product-info h3{font-size:18px;font-weight:500;margin-bottom:8px;color:#333}.solution-match-box .service .product-info p{font-size:14px;color:#666;line-height:1.5}.solution-match-box .service .detail-btn{display:flex;flex-wrap:wrap;border:none 0}.solution-match-box .service .detail-btn button,.solution-match-box .service .detail-btn a{margin-top:10px;margin-right:12px;padding:6px 12px;background-color:rgba(0,0,0,0);border:1px solid #36f;color:#36f;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s,color .3s}.solution-match-box .service .detail-btn button:hover,.solution-match-box .service .detail-btn a:hover{background-color:#36f;color:#fff}.solution-match-box .service .detail-btn button.disable,.solution-match-box .service .detail-btn a.disable{color:#999;border:1px solid #999}.solution-match-box .service .detail-btn button.disable:hover,.solution-match-box .service .detail-btn a.disable:hover{background-color:rgba(0,0,0,0);color:#999}.case-box{padding-bottom:16px;background-color:#f5f5f5}.case-box .case-grid{max-width:1200px;margin:16px auto 0 auto;display:grid;grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));gap:30px;justify-items:center}.case-box .qr-item{width:180px;transition:transform .3s}.case-box .qr-item:hover{transform:translateY(-5px)}.case-box .qr-item dl{width:100%;padding:8px;background-color:#36f;border-radius:6px}.case-box .qr-item dl dd{margin:0}.case-box .qr-item dl dd img{width:100%}.case-box .qr-item dl dt{margin:0;color:#fff;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.case-box .qr-item dl dt a{color:#fff}.case-box .qr-item .qr-code{width:100%;height:auto}.contact-box{display:flex;justify-content:center;align-items:center;width:100%}.devices{display:flex;justify-content:center;align-items:center;width:100%;max-width:1200px;padding:30px 0 10px 0;background:linear-gradient(-75deg, #837ae8, #65bffd);border-radius:10px}.monitor{display:flex;justify-content:center;align-items:center;flex-direction:column;margin-right:20px}.monitor .frame{width:180px;height:90px;background-color:#fff;padding:6px;border-radius:6px;box-shadow:0px 5px 12px hsla(0,0%,40%,.16)}.monitor .frame .screen{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;background:linear-gradient(-75deg, #6098fd, #7bd8fe);border-radius:4px}.monitor .frame .screen .text{color:#fff;font-size:24px}.monitor .frame .screen .bubble{position:absolute;top:-28px;right:-20px;width:100px;height:40px;background-color:#6b89ff;border-radius:4px;display:flex;justify-content:center;align-items:center;color:#fff;font-size:14px}.monitor .frame .screen .bubble span{padding:0 6px 0 0;transition:padding-left .3s ease-in-out,padding-right .3s ease-in-out}.monitor .frame .screen .bubble::before{content:"";position:absolute;left:0px;bottom:-10px;border-right-color:#6b89ff;border-style:solid;border-width:12px 12px 0 0px;border-color:#6b89ff rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)}.monitor .frame .screen .bubble:hover span{padding:0 0 0 6px}.monitor .bracket{z-index:2;width:40px;height:14px;background-color:#d2dcfa;box-shadow:0px 2px 4px hsla(0,0%,40%,.16)}.monitor .base{z-index:1;position:relative;top:-8px;width:70px;height:16px;background:#75bef7;border-radius:4px;transform:perspective(10px) rotateX(5deg);transform-origin:bottom;box-shadow:0px 2px 4px hsla(0,0%,40%,.16)}.device-list{display:grid;grid-template-columns:repeat(2, 1fr);gap:16px;padding:0;margin:20px 0}.device{display:flex;justify-content:center;align-items:center;margin-right:20px;width:140px;height:70px;background-color:hsla(0,0%,100%,.15);border-radius:6px;box-shadow:0px 5px 12px hsla(0,0%,40%,.16);color:#fff}.device a{display:flex;width:100%;padding:0 16px}.device .text{flex:1;line-height:2}.device .iconfont{font-size:32px;margin-right:8px}.device:hover{background-color:hsla(0,0%,100%,.2);border:1px solid #fff}.application .application-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px}.application .application-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;border:1px solid #f0f0f0;border-radius:8px}.customer .customer-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px}.customer .customer-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;border:1px solid #f0f0f0;border-radius:8px}.contact-box{padding:10px 0;background-color:#f8f8f8;font-weight:300}.contact-box a{color:#1b7cf6}.contact-box p{font-size:14px;padding:2px 0}.copyright{margin:36px auto;text-align:center;padding:10px 0;font-size:1rem;font-weight:300}.copyright a{color:#1b7cf6}.copyright p{font-size:14px;padding:2px 0}@media(max-width: 767px){.header-wrapper{height:360px}.header-wrapper .hamburger{display:block;margin-left:auto;color:#fff}.header-wrapper .nav-box .nav-list{display:none;flex-direction:column;width:100%;padding:0;gap:0;position:absolute;top:0;left:0;background-color:#0757ac}.header-wrapper .nav-box .nav-list .nav-item{width:100%;text-align:center;border-top:1px solid #d3d3d3}.header-wrapper .nav-box .nav-list .nav-item a{display:block;padding:1rem;color:#fff}.header-wrapper .nav-box .nav-list .nav-item a::after{content:none}.header-wrapper .nav-box .nav-list .nav-item a:hover{color:#f19204}.header-wrapper .nav-box .nav-list.active{display:flex}.header-wrapper .header-text{padding:0 16px}.header-wrapper .header-text .text-1{font-size:2rem}.header-wrapper .header-text .text-2{font-size:1rem}.section-box{width:100%}.introduce-box{padding:0}.introduce-box .introduce{flex-direction:column}.introduce-box .introduce .features{flex-direction:column}.introduce-box .introduce .features>.left,.introduce-box .introduce .features>.right{width:100%;animation:var(--slideIn-left) 2s forwards;--start: var(--start-left)}.introduce-box .introduce .features>.right{margin-top:-20px;--start: var(--start-right)}.introduce-box .introduce .detail .title>p{font-size:1.5rem}.devices{flex-direction:column}.solution-match-box .service .products-grid.active{grid-template-columns:repeat(1, 1fr)}.solution-match-box .service .detail-btn{margin:0;display:flex;flex-direction:column}.solution-match-box .service .detail-btn>a,.solution-match-box .service .detail-btn button{margin-top:10px;padding:4px 9px;width:120px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.qr-grid{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));gap:20px}.qr-item{width:150px}}@media(min-width: 768px)and (max-width: 1023px){.section-box{padding:0 30px}.devices{flex-direction:column}.device-list{grid-template-columns:repeat(3, 1fr)}.introduce{flex-direction:row}.introduce>.left,.introduce>.right{width:50%}.detail{padding-left:30px;text-align:right}}@media(min-width: 1024px){.introduce-box{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.introduce-box .introduce{max-width:1200px;height:100%;display:flex;justify-content:center;align-items:center}.introduce-box .introduce .features{flex:1;display:flex;justify-content:space-between;min-width:600px}.introduce-box .introduce .features>.left,.introduce-box .introduce .features>.right{width:50%;animation:var(--slideIn-left) 2s forwards;--start: var(--start-left)}.introduce-box .introduce .features>.right{margin-top:60px;--start: var(--start-right)}.introduce-box .introduce .features .feature-box{padding:20px;margin:20px;cursor:pointer;background-color:#fff;background-image:none;background-position:0 0;background-repeat:no-repeat;background:linear-gradient(top, none, none);background-size:auto;border-top:0px none #eee;border-bottom:1px none #eee;border-right:1px none #eee;border-left:0px none #eee;box-shadow:0px 5px 12px hsla(0,0%,40%,.16)}.introduce-box .introduce .features .feature-box:hover{transform:translateY(-3px);transition:box-shadow .3s,border .3s,background-color .3s,color .3s,transform .3s}.introduce-box .introduce .detail{flex:1;padding-left:40px;text-align:right;animation:slideInRight 2s forwards}.introduce-box .introduce .detail .title p{font-size:36px;color:#000;line-height:1;margin-bottom:20px}.introduce-box .introduce .detail .text{color:#777;line-height:1.5;margin-bottom:20px}.introduce-box .introduce .detail .more{display:inline-block;margin-bottom:20px;width:168px;height:48px;line-height:48px;color:#fff;text-align:center;text-decoration:none}.pano-box{background-color:#f5f5f5}.pano-box .advantage{display:flex;justify-content:center;align-items:center;max-width:1200px;height:100%;padding:20px 0}.pano-box .advantage .left{flex:1;padding-right:40px;text-align:left;animation:slideInLeft 2s forwards}.pano-box .advantage .left .title p{font-size:36px;color:#000;line-height:1;margin-bottom:20px}.pano-box .advantage .left .text{font-size:14px;color:#777;line-height:1.5;margin-bottom:20px}.pano-box .advantage .left .more{display:inline-block;width:168px;height:48px;line-height:48px;font-size:12px;color:#fff;margin-bottom:20px;background:#228de8;text-align:center;text-decoration:none}.pano-box .advantage .left .more:hover{background:#0079bf}.pano-box .advantage .right{flex:1;animation:slideInRight 2s forwards}.pano-box .advantage .right .img-box{position:relative;height:624px;width:457px;background-color:rgba(0,0,0,0);background-image:url(images/img.png);background-repeat:no-repeat;background-position:50% 50%;margin-left:40px}.pano-box .advantage .right .img-box .transparent-box{position:absolute;height:135px;width:135px;left:0px;top:214px;z-index:10;background-color:rgba(34,141,232,.8);background-image:none;background-repeat:repeat;color:#fff;animation:slideInLeft 2s forwards}.solution-match-box .service{max-width:1200px;margin:0 auto}.device-list{display:flex;justify-content:center;align-items:center}}