.el-image {
    display: block
}

.welcome {
    background: #000;
    color: #fff;
    font-family: -apple-system,BlinkMacSystemFont,PingFang SC,Helvetica Neue,sans-serif;
    overscroll-behavior: none
}

.section-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto
}

.section-eyebrow {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(44,255,248,.1);
    border-radius: 8px;
    color: #2cfff8;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px
}

.section-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 24px
}

.section-desc {
    font-size: 18px;
    color: #9aa0ae;
    line-height: 1.6;
    margin: 0
}

.section-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.hero-bg-video {
    object-fit: cover;
    object-position: center bottom;
    background: #000;
    pointer-events: none
}

.section-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.15) 60%,rgba(0,0,0,.25))
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    z-index: 100;
    background: rgba(0,0,0,.1);
    backdrop-filter: blur(12px)
}

.login-btn {
    display: inline-block;
    padding: 6px 20px;
    border: 1px solid hsla(0,0%,100%,.3);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: all .2s
}

.login-btn:hover {
    border-color: #2cfff8;
    color: #2cfff8
}

.user-trigger {
    padding: 8px;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer
}

.user-trigger:hover {
    background-color: hsla(0,0%,100%,.15)
}

.user-trigger .el-icon-arrow-down {
    color: hsla(0,0%,100%,.65);
    font-size: 12px
}

.menu-item {
    cursor: pointer;
    line-height: 32px;
    border-radius: 4px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #fff;
    font-size: 14px
}

.menu-item:hover {
    background-color: hsla(0,0%,100%,.15)
}

.money-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg,#2c68ff,#2cfff8);
    box-shadow: 0 12px 32px rgba(44,140,255,.35);
    color: #fff;
    padding: 16px 8px;
    border-radius: 8px;
    margin: 16px 8px
}

.recharge-btn {
    background: #fff;
    color: #000;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer
}

.hero {
    position: relative;
    height: 990px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    max-width: 1200px;
    padding-bottom: 40px;
}

.hero-title {
    font-size: 64px;
    font-weight: 700;
    margin: 0;
    line-height: 92px;
    letter-spacing: 3px;
    margin-top: 24px;
}

.hero-subtitle {
    font-size: 28px;
    color: hsla(0,0%,100%,.7);
    margin: 16px 0 0;
    font-weight: 400
}

.hero-subtitle-top{
    font-size: 22px;
    color: hsla(0,0%,100%,.3);
    margin: 0;
    font-weight: 400
}

.hero-subtitle-line {
    width: 52px;
    height: 2px;
    background: hsla(0,0%,100%,.3);
}

.hero-subtitle-line-left-m {
    margin-right: 16px;
}

.hero-subtitle-line-left {
    margin-right: 32px;
}

.hero-subtitle-line-right-m {
    margin-left: 16px;
}

.hero-subtitle-line-right {
    margin-left: 32px;
}

.hero-wechat, .hero-wechat-m {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
    
}

.hero-wechat-m {
    margin-top: 70px;
}

.hero-wechat-box {
    padding: 15px;
    border-radius: 16px;
    border: 1px solid #ffffff4d;
    background: #ffffff1a;
    backdrop-filter: blur(40.65px);
}

.hero-wechat img{
    /* margin-top: 40px; */
    width: 200px;
}

.hero-wechat-m img{
    /* margin-top: 24px; */
    width: 140px;
}

.hero-subtitle-line-m {
    width: 24px;
    height: 1px;
    background: hsla(0,0%,100%,.3);
}

.hero-wechat-btn-m {
    margin-top: 24px;
}

.hero-wechat-btn {
    margin-top: 36px;
}

.btn {
    display: inline-block;
    width: 160px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s
}

.btn-primary {
    background: #2cfff8;
    color: #000
}

.btn-primary:hover {
    background: #5dfff5
}

.btn-outline {
    border: 1.4px solid #2cfff8;
    color: #2cfff8
}

/* .btn-outline:hover {
    background: rgba(44,255,248,.1)
} */

.hero-models-label {
    position: absolute;
    bottom: 40px;
    left: 0;
    z-index: 10;
    width: 100%;
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: -.64px;
    margin-top: 40px;
}

.hero-bottom-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 200px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg,transparent 0,#000)
}

.brand-scroll-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden
}

.brand-scroll-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: brand-scroll-left 24s linear infinite
}

.brand-scroll-track:hover {
    animation-play-state: paused
}

.brand-logo-item {
    flex-shrink: 0;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center
}

.brand-logo {
    height: 40px;
    opacity: .85;
    transition: opacity .2s
}

.brand-logo:hover {
    opacity: 1
}

@keyframes brand-scroll-left {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

.explore-text {
    display: inline-block;
    padding: 6px 24px;
    border: 1px solid hsla(0,0%,100%,.2);
    border-radius: 200px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none
}

.explore-text:hover {
    border-color: #2cfff8;
    color: #2cfff8
}

.cap-section {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    background: #000
}

.cap-card {
    flex: 1;
    min-width: 0;
    height: 373px;
    background: #131418;
    border: 1px solid hsla(0,0%,100%,.06);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all .3s
}

.cap-card:hover {
    border-color: rgba(44,255,248,.3);
    transform: translateY(-4px)
}

.cap-image {
    position: relative;
    width: 100%;
    height: 222px;
    overflow: hidden;
    background: linear-gradient(135deg,rgba(0,212,255,.15),rgba(155,92,255,.15))
}

.cap-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg,transparent,rgba(5,6,8,.8));
    pointer-events: none
}

.cap-play-icon {
    position: absolute;
    top: 15px;
    left: 14px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5,6,8,.7);
    border: 1px solid hsla(0,0%,100%,.1);
    border-radius: 10px
}

.cap-card-body {
    padding: 18px 23px 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    flex: 1
}

.cap-title {
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 6px;
    color: #fff;
    letter-spacing: -.01em
}

.cap-desc {
    font-size: 14px;
    font-weight: 400;
    color: #6b7180;
    margin: 0;
    line-height: 21px
}

.cap-tag {
    padding: 5px 10px;
    background: hsla(0,0%,100%,.04);
    border: 1px solid hsla(0,0%,100%,.06);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: #9aa0ae
}

.qs-section {
    background: #000
}

.gallery,.qs-section {
    position: relative;
    width: 1200px;
    margin: 0 auto
}

.gallery-grid {
    display: flex;
    height: 366px;
    gap: 10px
}

.gallery-col {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    cursor: pointer;
}

.gallery-card-label {
    position: absolute;
    bottom: 16px;
    left: 16px;
    color: #e8eaf0;
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    z-index: 2
}

.gallery-card-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 16px
}

.btn-more {
    border: 1px solid hsla(0,0%,100%,.15);
    border-radius: 100px;
    font-size: 16px;
    font-weight: 500;
    width: 290px;
    height: 58px;
    text-align: center;
    line-height: 58px;
    color: #fff;
    cursor: pointer;
    transition: all .2s
}

.btn-more:hover {
    background: hsla(0,0%,100%,.1);
    border-color: hsla(0,0%,100%,.3)
}

.start-section {
    position: relative;
    padding: 140px 0
}

.colorful {
    color: #2cfff8
}

.el-picker-panel,.el-popover {
    background: linear-gradient(90deg,rgba(44,255,248,.2),rgba(44,104,255,.2)),#000!important;
    color: #fff!important;
    border-radius: 8px!important
}