strong{font-weight:700}
.highlight-grad{background:linear-gradient(45deg, #ef443b, #EE8D3B);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-fill-color:transparent}

#main-banner{position:relative;padding:155px 0 80px;margin:-75px 0 0}
#main-banner .container{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:100px}
#main-banner .lft{position:relative;z-index:1;width:670px}
#main-banner .lft h1{font-size:80px;font-weight:300;margin:0 0 16px}
#main-banner .lft h1 .highlight{display:block;font-weight:700;color:#ef443b}
#main-banner .lft .module-desc{font-size:21px;font-weight:700;text-align:left}
#main-banner .lft .btn-group{gap:10px;margin-bottom:28px}
#main-banner .lft .developers{font-size:12px;font-weight:300;text-align:center}
#main-banner .rgt{position:relative;z-index:-1;padding-left:10%}
#main-banner .rgt picture{position:relative;width:300px;aspect-ratio:300/365}
#main-banner .rgt picture::before{position:absolute;z-index:1;top:50%;left:50%;opacity:.5;content:'';display:inline-block;width:0;height:0;animation:glow-red 4s infinite alternate}
#main-banner .rgt picture img{position:relative;z-index:9;width:100%;height:100%;object-fit:contain}
@keyframes glow-red {
    from{box-shadow:0 0 80px 80px rgb(var(--rgb-color-primary))}
    to{box-shadow:0 0 130px 130px rgb(var(--rgb-color-primary))}
}
@media (max-width:969px){
    #main-banner .lft h1{font-size:64px}
    #main-banner .rgt picture{width:200px}
    @keyframes glow-red {
        from{box-shadow:0 0 40px 40px rgb(var(--rgb-color-primary))}
        to{box-shadow:0 0 80px 80px rgb(var(--rgb-color-primary))}
    }
}
@media (max-width:769px){
    #main-banner{padding:112px 0 64px;margin:-64px 0 0}
    #main-banner .container{justify-content:center}
    #main-banner .lft{width:100%;max-width:510px}
    #main-banner .lft h1{font-size:48px;margin:0 0 16px}
    #main-banner .lft .module-desc{font-size:19px}
    #main-banner .rgt{position:absolute;padding-left:0;right:0;top:0}
    #main-banner .rgt picture{width:230px;opacity:.5}
}


#switch-banner,
#explore-banner{padding:48px 0}
#switch-banner .item-list,
#explore-banner .item-list{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:32px}
#switch-banner .item-link,
#explore-banner .item-link{overflow:hidden}
#switch-banner .item-link .item,
#explore-banner .item-link .item{position:relative;width:430px;height:400px;padding:32px 32px 32px;display:flex;flex-direction:column;justify-content:end;align-items:start;color:#fff;font-weight:100;transition:all ease .3s}
#switch-banner .item-link .item:hover,
#explore-banner .item-link .item:hover{transform:scale(1.05)}
#switch-banner .item-link .item picture,
#explore-banner .item-link .item picture{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1}
#switch-banner .item-link .item picture::after,
#explore-banner .item-link .item picture::after{position:absolute;top:0;left:0;content:'';display:block;width:100%;height:100%}
#switch-banner .item-link .item picture img,
#explore-banner .item-link .item picture img{width:100%;height:100%;object-fit:cover}
#switch-banner .item-link .item h2,
#explore-banner .item-link .item h2{font-size:32px;font-weight:100;margin:0 0 16px}
#switch-banner .item-link .item p,
#explore-banner .item-link .item p{font-size:16px;margin:0 0 16px}
#switch-banner .item-link .item .more,
#explore-banner .item-link .item .more{color:rgb(var(--rgb-color-primary));text-decoration:underline}
#switch-banner .item-list .item-link:nth-child(1) picture::after,
#explore-banner .item-list .item-link:nth-child(1) picture::after{background:linear-gradient(221deg, rgba(239,68,59,0.65) 0%, rgba(0,0,0,0.65) 100%)}
#switch-banner .item-list .item-link:nth-child(2) picture::after,
#explore-banner .item-list .item-link:nth-child(2) picture::after{background:linear-gradient(221deg, rgba(97,82,160,0.65) 0%, rgba(0,0,0,0.65) 100%)}
#switch-banner .item-list .item-link:nth-child(3) picture::after,
#explore-banner .item-list .item-link:nth-child(3) picture::after{background:linear-gradient(221deg, rgba(172,47,128,0.65) 0%, rgba(0,0,0,0.65) 100%)}
#switch-banner .item-list .item-link:hover picture::after,
#explore-banner .item-list .item-link:hover picture::after{background:linear-gradient(0deg, rgba(26,0,13,0.8) 0%, rgba(0,5,25,0.8) 100%)}
/* 微调 */
#switch-banner{padding-bottom:96px}
#switch-banner .item-link .item h2{font-size:38px}
@media (max-width:969px){
    #switch-banner .item-link,
    #explore-banner .item-link{width:100%}
    #switch-banner .item-link .item,
    #explore-banner .item-link .item{width:100%;height:auto;padding-top:60px}
}
@media (max-width:769px){
    #switch-banner .item-link .item h2,
    #explore-banner .item-link .item h2{font-size:24px}
}


#customer-banner{padding:48px 0}
#customer-banner .highlight-grad{font-weight:700}
#customer-banner .logo-hero{position:relative;margin:16px 0 0;mask-image:linear-gradient(90deg, transparent,#000 20%,#000 80%,transparent);overflow:hidden}
#customer-banner .logo-hero .logo-hero-marquee{display:flex;justify-content:start;align-items:center;gap:80px}
#customer-banner .logo-hero picture{flex: 0 0 auto;width:196px;aspect-ratio:1}
#customer-banner .logo-hero picture img{width:100%;height:100%;object-fit:contain}
@media (max-width:969px){
    #customer-banner .module-title{margin-bottom:16px}
    #customer-banner .logo-hero .logo-hero-marquee{gap:40px}
    #customer-banner .logo-hero picture{width:128px}
}


#plan-banner{background:linear-gradient(90deg, #ef443b 0%, #EE8D3B 100%);color:#fff;margin:100px 0 48px}
#plan-banner .container{display:flex;justify-content:center;align-items:center}
#plan-banner .lft{width:500px}
#plan-banner .lft picture img{margin-top:-100px}
#plan-banner .rgt{width:780px;padding:32px 0}
#plan-banner .rgt .module-title{margin-top:16px;font-size:36px;text-align:left}
#plan-banner .rgt .module-desc{font-size:16px;font-weight:700;text-align:left}
#plan-banner .rgt .use-list{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:30px;margin:0 0 12px}
#plan-banner .rgt .use-list .item{max-width:200px;text-align:center}
#plan-banner .rgt .use-list .item .icon-mask{display:inline-block;background:transparent linear-gradient(314deg, rgba(36,32,113,0.701961) 0%, rgba(97,71,163,0.701961) 100%) 0% 0% no-repeat padding-box;border-radius:50%;padding:17px;margin-bottom:8px}
#plan-banner .rgt .use-list .item picture{position:relative;width:30px;aspect-ratio:1}
#plan-banner .rgt .use-list .item picture img{width:100%;height:100%;object-fit:cover}
#plan-banner .rgt .use-list .item p{font-weight:700}
#plan-banner .rgt .default-btn:hover{background-image:none;background:#000}
@media (max-width:969px){
    #plan-banner .container{flex-wrap:wrap}
    #plan-banner .rgt{padding-top:0}
}
@media (max-width:769px){
    #plan-banner .rgt .module-title{font-size:26px;text-align:center}
    #plan-banner .rgt .module-desc{text-align:center}
    #plan-banner .rgt .use-list .item{width:50%}
    #plan-banner .rgt .btn-group{justify-content:center}
}


#support-banner{padding:96px 0;background:#f8f8f8}
#support-banner .support-list{display:flex;justify-content:space-around;align-items:start;gap:32px}
#support-banner .support-list .item{font-weight:300;text-align:center;max-width:375px}
#support-banner .support-list .item picture{width:50px;height:50px;margin:0 auto 8px}
#support-banner .support-list .item picture img{width:100%;height:100%;object-fit:cover}
#support-banner .support-list .item h2{margin:0 0 16px;font-weight:300;color:rgb(var(--rgb-color-primary))}
#support-banner .support-list .item p{margin:0 0 32px}
#support-banner .support-list .item a{color:rgb(var(--rgb-color-primary));text-decoration:underline}
@media (max-width:769px){
    #support-banner .support-list{flex-wrap:wrap}
    #support-banner .support-list .item p{margin:0 0 16px}
}