.home-container {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%,-50%);
}

.main-text {
    font-size: 6rem;
    text-wrap: nowrap;
    color: #ffffff !important;
}

.sub-text {
    float: right;
    padding-right: 5px;
    font-size: 0.8rem;
    color: #ffffff;
    position: relative;
    text-shadow: 0 0 1px rgba(255,255,255,0.6);
}

    .sub-text::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: transparent;
        background: linear-gradient( -45deg, #ffffff 0%, #ffffff 20%, #ffffff 40%, #5cd4fe 60%, #ffffff 80%, #ffffff 100% );
        background-size: 400% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        animation: colorSweep 6s ease-in-out infinite;
    }

@keyframes colorSweep {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.qr-container {
    width: 100%; /* 占据全部宽度 */
    padding: 0; /* 移除内边距 */
    margin: 0; /* 移除外边距 */
    position: absolute;
    left: 0;
    bottom: 80px;
    color: #ffffff;
}

.home-grid {
    width: 100%;
    height: 100%;
    position: relative;
}

.home-row {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    text-align:center;
}

.qr-image {
    position: relative;
    height: 280px;
    margin-bottom: 20px;
}

.qr-desc {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 0;
    display: none;
}

.qr {
    width: 250px;
    height: 250px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    display: none;
    background-size: cover !important; /* 关键属性：保持比例填满 */
    background-position: center !important; /* 居中显示 */
    background-repeat: no-repeat !important;
}

.qr-arrow {
    font-size: 1.2rem;
    transform: scale(1.1);
    animation: bounce 0.8s cubic-bezier(0.5, 0.05, 0.5, 1) infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(2px);
    }

    50% {
        transform: translateY(-2px);
    }
}

.qr-label {
    font-size: 1.5rem;
    margin-top: 20px;
}

.qr-label-handler {
    cursor:pointer;
}

.qr-label-desc{
    font-size:0.9rem;
}

.advantage-container {
    width: 100%; /* 占据全部宽度 */
    padding: 0; /* 移除内边距 */
    margin: 0; /* 移除外边距 */
    position: absolute;
    left: 0;
    bottom: 30px;
    color: #ffffff;
}

#advantage {
    display: none;
    font-style: italic;
}

.advantage-row{
    position:relative;
}

.advantage-label {
    width:33%;
    font-style: italic;
    text-align: center;
}

#ul-1 {
    position: absolute;
    left: 200%;
}

#ul-2 {
    position: absolute;
    left: 200%;
}

#ul-3 {
    position: absolute;
    left: -200%;
}

#bl-1 {
    position: absolute;
    left: 200%;
}

#bl-2 {
    position: absolute;
    left: 200%;
}

#bl-3 {
    position: absolute;
    left: -200%;
}

#bl-4 {
    position: absolute;
    left: -200%;
}

#tl-1 {
    position: absolute;
    left: 200%;
}

#tl-2 {
    position: absolute;
    left: 200%;
}

#tl-3 {
    position: absolute;
    left: -200%;
}

#tl-4 {
    position: absolute;
    left: -200%;
}

/* 移动设备 */
@media (min-width: 400px) {
    .main-text {
        font-size: 6rem;
    }

    .sub-text {
        font-size: 1.2rem;
    }

    .qr-row {
        width: 90%;
    }

    .home-row {
        width: 90%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        text-align: center;
    }
}

/* 移动设备 */
@media (min-width: 576px) {
    .main-text {
        font-size: 6rem;
    }

    .sub-text {
        font-size: 1.2rem;
    }

    .qr-row{
        width:60%;
    }

    .home-row {
        width: 80%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        text-align: center;
    }
}

/* 平板设备 */
@media (min-width: 992px) {
    .main-text {
        font-size: 8rem;
    }

    .sub-text {
        font-size: 1.4rem;
    }

    .home-row {
        width: 70%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        text-align: center;
    }
}

/* 中等屏幕 */
@media (min-width: 1200px) {
    .main-text {
        font-size: 10rem;
    }

    .sub-text {
        font-size: 1.6rem;
    }

    .home-row {
        width: 60%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        text-align: center;
    }
}

/* 大屏幕优先 */
@media (min-width: 1440px) {
    .main-text {
        font-size: 12rem;
    }

    .sub-text {
        font-size: 1.8rem;
    }

    .home-row {
        width: 50%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        text-align: center;
    }
}

/* 大屏幕优先 */
@media (min-width: 1920px) {
    .main-text {
        font-size: 14rem;
    }

    .sub-text {
        font-size: 2rem;
    }

    .home-row {
        width: 50%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        text-align: center;
    }
}