#main-banner{padding:64px 0 32px;background:#007aff;color:#fff}
#main-banner .container{display:flex;align-items:center;justify-content:space-around;gap:20px}
#main-banner .banner-left{width:420px}
#main-banner .banner-right{width:650px}
#main-banner .banner-left img{width:100%}
#main-banner h1{position:relative;font-size:16px;font-weight:400;padding-left:15px;margin:0 0 15px}
#main-banner h1::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:60%;background:#fff;display:inline-block}
#main-banner .banner-title{font-size:42px;font-weight:700;margin:0 0 15px}
#main-banner .banner-desc{font-size:18px;margin:0 0 30px}
#main-banner .banner-btn-group{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
#main-banner .banner-btn-group .banner-btn{position:relative;background:#fff;color:#007aff;border-radius:5px;padding:10px 20px;font-size:18px;text-decoration:none;display:flex;justify-content:center;align-items:center}
#main-banner .banner-btn-group .banner-btn::before{content:"";display:inline-block;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14.644' viewBox='0 0 14 14.644'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%232d73ff' d='M0 0h14v14.644H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M6.218 6.923v-5.7l-6.224.979v4.719zm.778.779v5.82l7 1.1V7.7zm0-.779h7V0l-7 1.1zm-.778.779h-6.22v4.719l6.224.979zm0 0' fill='%232d73ff'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;background-size:cover;width:20px;height:20px;margin-right:10px}
#main-banner .banner-btn-group .detail-link{text-decoration:underline}
#main-banner .banner-vd{display:flex;justify-content:start;align-items:center;margin:12px 0 0;font-size:12px;color:#cde4f8;gap:15px}
@media screen and (max-width:769px){
  #main-banner{display:none}
  #main-banner .banner-left{display:none}
}

#product-banner{background:#f7f9fc;padding:56px 0 32px 0}
#product-banner .product-list{display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap;gap:15px;margin:40px 0}
#product-banner .product-item{background:#fff;width:400px;padding:24px 12px;border:1px solid rgba(195,200,213,.35);border-radius:10px;display:flex;flex-direction:column;gap:15px}
#product-banner .product-item img{width:100%}
#product-banner .product-item h3{font-size:20px;margin:0 0 8px}
#product-banner .product-item .product-title{display:flex;justify-content:center;align-items:center;gap:15px}
#product-banner .product-item .product-title-icon{width:50px;height:50px;object-fit:cover}
#product-banner .product-item .product-version{color:#76819d}
#product-banner .product-item .product-features{display:flex;flex-direction:column;align-items:center}
#product-banner .product-item ul li{position:relative;padding-left:20px;margin:0 0 8px}
#product-banner .product-item ul li::before{content:"";position:absolute;top:50%;left:0;transform:translateY(-50%);width:12px;height:12px;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%232d73ff' d='M3.426 2.23l7.888 3.427-7.888 3.426L5.58 5.658z'/%3E%3C/svg%3E")}
#product-banner .product-item .product-btn-group{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
#product-banner .product-item .product-btn{position:relative;background:#fff;color:#007aff;border:1px solid #007aff;border-radius:3px;padding:6px 20px;font-size:14px;text-decoration:none;display:flex;justify-content:center;align-items:center;transition:all ease .3s}
#product-banner .product-item .product-btn.product-btn-linux::before,#product-banner .product-item .product-btn.product-btn-mac::before,#product-banner .product-item .product-btn.product-btn-scan::before,#product-banner .product-item .product-btn.product-btn-win::before{content:"";display:inline-block;background-size:cover;width:15px;height:15px;margin-right:5px;transition:all ease .3s}
#product-banner .product-item .product-btn.product-btn-win::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14.644' viewBox='0 0 14 14.644'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%232d73ff' d='M0 0h14v14.644H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M6.218 6.923v-5.7l-6.224.979v4.719zm.778.779v5.82l7 1.1V7.7zm0-.779h7V0l-7 1.1zm-.778.779h-6.22v4.719l6.224.979zm0 0' fill='%232d73ff'/%3E%3C/g%3E%3C/svg%3E") no-repeat center}
#product-banner .product-item .product-btn.product-btn-mac::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='17.211' viewBox='0 0 14 17.211'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath data-name='111' fill='%232d73ff' d='M0 0h14v17.211H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg data-name='31'%3E%3Cg data-name='30' clip-path='url(%23a)'%3E%3Cpath data-name='32' d='M13.984 12.599a9.352 9.352 0 0 1-1.187 2.451c-.717 1.043-1.459 2.1-2.63 2.114-1.152.02-1.52-.687-2.835-.687s-1.726.669-2.815.708c-1.125.046-1.991-1.14-2.711-2.178C.335 12.88-.794 8.98.721 6.366a4.2 4.2 0 0 1 3.554-2.162c1.1-.021 2.152.747 2.821.747.688 0 1.957-.929 3.3-.79a4.043 4.043 0 0 1 3.139 1.7 3.934 3.934 0 0 0-1.856 3.272 3.776 3.776 0 0 0 2.309 3.468M9.52 2.767a3.836 3.836 0 0 0 .9-2.754 3.85 3.85 0 0 0-2.536 1.3 3.579 3.579 0 0 0-.9 2.66 3.282 3.282 0 0 0 2.543-1.211' fill='%232d73ff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center}
#product-banner .product-item .product-btn.product-btn-scan::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.441' height='15.441' viewBox='0 0 15.441 15.441'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%232d73ff%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M14.764 5.689a.677.677 0 0 1-.677-.677V1.761a.407.407 0 0 0-.406-.406H10.43a.677.677 0 0 1-.677-.677.677.677 0 0 1 .677-.677h3.251a1.763 1.763 0 0 1 1.761 1.761v3.251a.677.677 0 0 1-.678.676zM.677 5.689A.677.677 0 0 1 0 5.012V1.761A1.763 1.763 0 0 1 1.761 0h3.251a.677.677 0 0 1 .677.677.677.677 0 0 1-.677.677H1.761a.407.407 0 0 0-.406.406v3.251a.677.677 0 0 1-.678.678zM13.677 15.441h-3.251a.677.677 0 0 1-.677-.677.677.677 0 0 1 .677-.677h3.251a.407.407 0 0 0 .406-.406v-3.254a.677.677 0 0 1 .677-.677.677.677 0 0 1 .677.677v3.251a1.763 1.763 0 0 1-1.76 1.763zM5.012 15.441H1.761A1.763 1.763 0 0 1 0 13.68v-3.253a.677.677 0 0 1 .677-.677.677.677 0 0 1 .677.677v3.251a.407.407 0 0 0 .406.406h3.251a.677.677 0 0 1 .677.677.677.677 0 0 1-.676.68z'/%3E%3Cg%3E%3Cpath class='a' d='M13.409 8.397H2.031a.678.678 0 0 1-.677-.678.677.677 0 0 1 .677-.677h11.378a.677.677 0 0 1 .677.677.678.678 0 0 1-.677.678z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center}
#product-banner .product-item .product-btn.product-btn-linux::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.001' height='15.009' viewBox='0 0 15.001 15.009'%3E%3Cpath d='M6.387.032c-7 .561-5.147 7.961-5.251 10.44A17.083 17.083 0 0 1 0 15.008h1.893a11.634 11.634 0 0 0 .4-2.025c.118.079.239.157.357.229a3.6 3.6 0 0 1 .589.468 2.912 2.912 0 0 0 1.961.936h.2a4 4 0 0 0 2.258-.8 3.341 3.341 0 0 1 .714-.389 3.9 3.9 0 0 0 1.554-.9c.064-.064.121-.125.175-.189.225.818.529 1.739.868 2.661h4.036c-.972-1.5-1.972-2.968-1.95-4.843.046-3.693.429-10.7-6.665-10.129zM1.812 8.158c-.068-1.211.511-2.225 1.293-2.272s1.475.907 1.54 2.1v.193a3.254 3.254 0 0 0-.672.257.07.07 0 0 1 0-.028c-.068-.682-.432-1.2-.818-1.157s-.654.646-.571 1.325a1.888 1.888 0 0 0 .236.768c-.029.025-.114.086-.211.157l-.268.2a2.827 2.827 0 0 1-.529-1.543zm6.3 4.472a4.224 4.224 0 0 0-.911.482 3.189 3.189 0 0 1-1.786.664h-.15a2.065 2.065 0 0 1-1.429-.714 4.519 4.519 0 0 0-.732-.572c-.625-.357-1.014-.793-1.039-1.175a.55.55 0 0 1 .25-.493l.825-.611c.193-.139.25-.182.3-.221l.1-.1a2.682 2.682 0 0 1 1.85-.957 3.472 3.472 0 0 1 1.85.643 3.971 3.971 0 0 0 .932.429c.236.082.5.171.865.329.357.139.732.389.714.807-.021.65-.857 1.243-1.632 1.486zm1.9-4.643a2.985 2.985 0 0 1-.443 1.664 2.052 2.052 0 0 0-.2-.093c-.325-.139-.582-.232-.8-.311a1.916 1.916 0 0 0 .2-.836c0-.768-.357-1.393-.865-1.393s-.907.618-.925 1.386v.075a4.426 4.426 0 0 0-.9-.307.671.671 0 0 1 0-.086A2.322 2.322 0 0 1 7.993 5.5a2.284 2.284 0 0 1 2.022 2.479zm-1.69 2.818a6.05 6.05 0 0 1-3.072.5 4.455 4.455 0 0 1-1.932-.521.429.429 0 1 0-.475.714 5.11 5.11 0 0 0 2.346.654q.243.021.525.021a6.816 6.816 0 0 0 2.968-.593.429.429 0 1 0-.357-.775zm0 0' fill='%232d73ff'/%3E%3C/svg%3E") no-repeat center}
#product-banner .product-item .product-btn.product-btn-win:hover::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14.644' viewBox='0 0 14 14.644'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%232d73ff' d='M0 0h14v14.644H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M6.218 6.923v-5.7l-6.224.979v4.719zm.778.779v5.82l7 1.1V7.7zm0-.779h7V0l-7 1.1zm-.778.779h-6.22v4.719l6.224.979zm0 0' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E") no-repeat center}
#product-banner .product-item .product-btn.product-btn-mac:hover::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='17.211' viewBox='0 0 14 17.211'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath data-name='111' fill='%232d73ff' d='M0 0h14v17.211H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg data-name='31'%3E%3Cg data-name='30' clip-path='url(%23a)'%3E%3Cpath data-name='32' d='M13.984 12.599a9.352 9.352 0 0 1-1.187 2.451c-.717 1.043-1.459 2.1-2.63 2.114-1.152.02-1.52-.687-2.835-.687s-1.726.669-2.815.708c-1.125.046-1.991-1.14-2.711-2.178C.335 12.88-.794 8.98.721 6.366a4.2 4.2 0 0 1 3.554-2.162c1.1-.021 2.152.747 2.821.747.688 0 1.957-.929 3.3-.79a4.043 4.043 0 0 1 3.139 1.7 3.934 3.934 0 0 0-1.856 3.272 3.776 3.776 0 0 0 2.309 3.468M9.52 2.767a3.836 3.836 0 0 0 .9-2.754 3.85 3.85 0 0 0-2.536 1.3 3.579 3.579 0 0 0-.9 2.66 3.282 3.282 0 0 0 2.543-1.211' fill='%23ffffff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center}
#product-banner .product-item .product-btn.product-btn-scan:hover::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.441' height='15.441' viewBox='0 0 15.441 15.441'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23ffffff%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M14.764 5.689a.677.677 0 0 1-.677-.677V1.761a.407.407 0 0 0-.406-.406H10.43a.677.677 0 0 1-.677-.677.677.677 0 0 1 .677-.677h3.251a1.763 1.763 0 0 1 1.761 1.761v3.251a.677.677 0 0 1-.678.676zM.677 5.689A.677.677 0 0 1 0 5.012V1.761A1.763 1.763 0 0 1 1.761 0h3.251a.677.677 0 0 1 .677.677.677.677 0 0 1-.677.677H1.761a.407.407 0 0 0-.406.406v3.251a.677.677 0 0 1-.678.678zM13.677 15.441h-3.251a.677.677 0 0 1-.677-.677.677.677 0 0 1 .677-.677h3.251a.407.407 0 0 0 .406-.406v-3.254a.677.677 0 0 1 .677-.677.677.677 0 0 1 .677.677v3.251a1.763 1.763 0 0 1-1.76 1.763zM5.012 15.441H1.761A1.763 1.763 0 0 1 0 13.68v-3.253a.677.677 0 0 1 .677-.677.677.677 0 0 1 .677.677v3.251a.407.407 0 0 0 .406.406h3.251a.677.677 0 0 1 .677.677.677.677 0 0 1-.676.68z'/%3E%3Cg%3E%3Cpath class='a' d='M13.409 8.397H2.031a.678.678 0 0 1-.677-.678.677.677 0 0 1 .677-.677h11.378a.677.677 0 0 1 .677.677.678.678 0 0 1-.677.678z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center}
#product-banner .product-item .product-btn.product-btn-linux:hover::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.001' height='15.009' viewBox='0 0 15.001 15.009'%3E%3Cpath d='M6.387.032c-7 .561-5.147 7.961-5.251 10.44A17.083 17.083 0 0 1 0 15.008h1.893a11.634 11.634 0 0 0 .4-2.025c.118.079.239.157.357.229a3.6 3.6 0 0 1 .589.468 2.912 2.912 0 0 0 1.961.936h.2a4 4 0 0 0 2.258-.8 3.341 3.341 0 0 1 .714-.389 3.9 3.9 0 0 0 1.554-.9c.064-.064.121-.125.175-.189.225.818.529 1.739.868 2.661h4.036c-.972-1.5-1.972-2.968-1.95-4.843.046-3.693.429-10.7-6.665-10.129zM1.812 8.158c-.068-1.211.511-2.225 1.293-2.272s1.475.907 1.54 2.1v.193a3.254 3.254 0 0 0-.672.257.07.07 0 0 1 0-.028c-.068-.682-.432-1.2-.818-1.157s-.654.646-.571 1.325a1.888 1.888 0 0 0 .236.768c-.029.025-.114.086-.211.157l-.268.2a2.827 2.827 0 0 1-.529-1.543zm6.3 4.472a4.224 4.224 0 0 0-.911.482 3.189 3.189 0 0 1-1.786.664h-.15a2.065 2.065 0 0 1-1.429-.714 4.519 4.519 0 0 0-.732-.572c-.625-.357-1.014-.793-1.039-1.175a.55.55 0 0 1 .25-.493l.825-.611c.193-.139.25-.182.3-.221l.1-.1a2.682 2.682 0 0 1 1.85-.957 3.472 3.472 0 0 1 1.85.643 3.971 3.971 0 0 0 .932.429c.236.082.5.171.865.329.357.139.732.389.714.807-.021.65-.857 1.243-1.632 1.486zm1.9-4.643a2.985 2.985 0 0 1-.443 1.664 2.052 2.052 0 0 0-.2-.093c-.325-.139-.582-.232-.8-.311a1.916 1.916 0 0 0 .2-.836c0-.768-.357-1.393-.865-1.393s-.907.618-.925 1.386v.075a4.426 4.426 0 0 0-.9-.307.671.671 0 0 1 0-.086A2.322 2.322 0 0 1 7.993 5.5a2.284 2.284 0 0 1 2.022 2.479zm-1.69 2.818a6.05 6.05 0 0 1-3.072.5 4.455 4.455 0 0 1-1.932-.521.429.429 0 1 0-.475.714 5.11 5.11 0 0 0 2.346.654q.243.021.525.021a6.816 6.816 0 0 0 2.968-.593.429.429 0 1 0-.357-.775zm0 0' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center}
#product-banner .product-item .product-btn:hover{background:#007aff;color:#fff}
#product-banner .product-item .product-btn-item{display:flex;justify-content:center;align-items:stretch;border:1px solid #007aff;border-radius:3px;overflow:hidden}
#product-banner .product-item .product-btn-item .product-btn{padding:10px 8px;border:none;border-radius:0}
#product-banner .product-item .product-btn-item .product-btn-separator{position:relative;top:50%;transform:translateY(-50%);display:inline-block;width:1px;height:50%;background:#007aff;transition:all ease .3s}
#product-banner .product-item .product-btn-item:hover .product-btn-separator{height:100%}
#product-banner .product-more{display:flex;justify-content:start;align-items:center;flex-wrap:wrap;gap:20px}
#product-banner .product-more-cont{display:flex;justify-content:start;align-items:center;flex-wrap:wrap;gap:20px}
#product-banner .product-more-item{display:flex;justify-content:start;align-items:center;gap:15px;padding:6px 12px;background:#fff}
#product-banner .product-more-item img{width:50px;height:50px;object-fit:cover}
#product-banner .product-more-item h3{font-size:20px;margin:0 0 8px}
#product-banner .product-more-item p{font-size:14px;color:#76819d}

#article-banner{padding:30px 0}
#article-banner .articles{display:flex;align-items:start;justify-content:space-around;flex-wrap:wrap;margin:40px 0 0;gap:40px}
#article-banner .article-list{width:calc(77% - 20px);display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:15px}
#article-banner .article-sidebar{width:calc(23% - 20px);display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:15px}
#article-banner .article-list .article-item{display:flex;align-items:center;gap:20px;width:100%;padding:20px;border-radius:12px;transition:all ease .3s}
#article-banner .article-list .article-item:hover{box-shadow:0 6px 10px rgba(45,115,255,.1)}
#article-banner .article-list .article-item picture{width:160px;height:120px;border-radius:5px;overflow:hidden}
#article-banner .article-list .article-item img{width:100%;height:100%;object-fit:cover;transition:all ease .3s}
#article-banner .article-list .article-detail{width:700px}
#article-banner .article-list .article-item:hover img{transform:scale(1.1)}
#article-banner .article-list .article-item .title{font-weight:700;font-size:18px;margin:0 0 16px;transition:all ease .3s}
#article-banner .article-list .article-item:hover .title{color:#2d73ff}
#article-banner .article-list .article-item .content{font-size:14px;color:#76819d;margin:0 0 16px}
#article-banner .article-list .article-item .more{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#76819d}
#article-banner .article-sidebar .article-head{width:100%;max-width:300px;display:flex;justify-content:space-between;align-items:center}
#article-banner .article-sidebar .article-head h3{font-size:18px}
#article-banner .article-sidebar .article-item{width:100%;max-width:300px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:15px;padding:8px}
#article-banner .article-sidebar .article-item:hover{box-shadow:0 6px 10px rgba(45,115,255,.1)}
#article-banner .article-sidebar .article-item picture{width:240px;height:200px;border-radius:5px;overflow:hidden}
#article-banner .article-sidebar .article-item img{width:100%;height:100%;object-fit:cover;transition:all ease .3s}
#article-banner .article-sidebar .article-item:hover img{transform:scale(1.1)}
#article-banner .article-sidebar .article-item:hover .title{color:#2d73ff}
@media (max-width:769px){
  #article-banner .article-list,#article-banner .article-sidebar{width:100%}
}