/* ===== 基础 ===== */
html {
    font-size: clamp(14px, 0.6vw + 8px, 18px);
}

.row {
    margin: 0;
}

.row > * {
    margin-top: 0;
}

img {
    max-width: 100%;
    height: auto;
}

video {
    max-width: 100%;
    height: auto;
    display: block;
}

.line {
    height: 0.0625rem;
}

#scroll-progress-bar {
    height: 0.125rem;
}

/* ===== Banner ===== */
.page-content .banner {
    padding: 0 var(--p);
}

.page-content .banner .banner-title {
    padding: 7.5rem 2.5rem;
    gap: 1.25rem;
}


.banner-title .banner-title-text {
    font-size: 3.75rem;
}


.banner-info .info-text {
    padding: 1.25rem;
}

.banner-info .btn {
    gap: 1.25rem;
    padding: 0 1.25rem;
    height: 3.125rem;
}
/* ===== 模块头部 ===== */
.box-header {
    height: 3.125rem;
    font-size: 1rem;
}

.box-header .mark-icon {
    --size: 0.9375rem;
}

/* ===== 模块内容 ===== */
.box .box-content {
    padding: 0 var(--p);
}

.box-content .box-title {
    font-size: 1.875rem;
    /* top: 3.125rem; */
    /* margin-bottom: 6.25rem; */
}

.box-title .text {
    padding: 2.5rem;
}

.box-content .menu-item,
.box-menu .menu-item {
    gap: 0.9375rem;
    padding: 1.5rem 0.9375rem;
}

.menu-item .item-icon {
    width: 0.625rem;
}

.item-icon .icon {
    margin: calc(1.25rem / 2) 0;
}

.menu-item .item-container {
    gap: 0.5rem;
}

.item-container .info-list {
    font-size: 0.875rem;
    row-gap: 0.625rem;
}

.menu-item.on:hover .info-list {
    height: 5.625rem;
    opacity: 1;
}

.info-list .info-item {
    gap: 0.625rem;
    padding-right: 1.25rem;
}

.info-item .icon {
    line-height: 1.3em;
}

.box-menu .item-title,
.bbox-content .item-title {
    font-size: 1.25rem;
}

.box-menu .item-tip,
.box-content .item-tip {
    font-size: 1rem;
}

.box-content .box-list {
    gap: 4.375rem;
}

.box-content .box-item {
    top: 3.125rem;
}

.item-header {
    padding: 2.5rem 0.5rem;
    gap: 1rem;
}

.item-header .item-title {
    font-size: 1.25rem;
}

.item-content {
    height: calc(100vh - 3.125rem);
}

.item-content .content-box {
    border-radius: 0.625rem;
}

.item-content .content-box .content-media {
    padding: 0.9375rem;
}

.item-content .content-box .blur-mark {
    backdrop-filter: blur(1.25rem);
}

/* ===== 案例 ===== */
.cases .box-title > .text {
    padding: 3.75rem 1.25rem;
    gap: 1.25rem;
}

.btn-box .btn {
    gap: 1.25rem;
    padding: 0 1.25rem;
    height: 3.125rem;
    font-size: 1rem;
}

.cases .boxTabs .tab {
    padding: 1.25rem;
}

.cases .tab .tabTitle {
    font-size: 1.3125rem;
}

.cases .tabTitle .num {
    font-size: 0.9375rem;
}

.cases .tab .tabText {
    font-size: 1rem;
    padding-top: 0.625rem;
}



.cases .tabContentBox {
    --p: 1.25rem;
    padding: 0.625rem;
    border-radius: 0.625rem;
}

.cases .blur-mark {
    backdrop-filter: blur(1.25rem);
}

.cases .cardGrid {
    padding: 1.25rem 0;
}

.cases .cardGridItem .GridNum {
    padding: 0.625rem;
    font-size: 2.625rem;
}

.cases .cardGridItem .gruidtext {
    font-size: 1rem;
}

.cases .cardContent {
    padding: 0.625rem;
}


.cases .user .avatar {
    font-size: 1.875rem;
}

.cases .msg {
    padding: 1.25rem;
    border-radius: 0.625rem 0.625rem 0.625rem 0;
}

.cases .msg::after {
    width: 1.25rem;
    height: 1.25rem;
    bottom: -1.2rem;
}

/* ===== 频道模块 ===== */
.channelGrid {
    /* --size: 100%; */
    padding: 1.25rem;
}

.channelItem {
    border-radius: 0.75rem;
    box-shadow: 0 0 0.625rem -0.1875rem rgba(0, 85, 255, 0.15);
}

.channelItem .itemBox {
    font-size: 0.875rem;
}

.channelItem .itemBox::after {
    --size: 5.3125rem;
    border-width: 0.0625rem;
}

.channelCard {
    padding: 1.25rem;
    border-radius: 0.75rem;
}

.channelItem-icon {
    font-size: 2.375rem;
    margin-bottom: 0.5rem;
}

.channelTextBox {
    padding: 1.25rem;
    font-size: 1.875rem;
    gap: 1.25rem;
}

.channelTextBox .channelText {
    font-size: 1rem;
}

.channeTypeBox {
    padding: 1.25rem;
    gap: 1.25rem;
}

.channeTypeBox .channelTypeTitle {
    font-size: 1.25rem;
}

.channeTypeBox .channelTypeTitle .icon {
    --size: 0.625rem;
}

.channeTypeBox .channeTypeList {
    gap: 0.625rem;
}

.channeTypeBox .typeItem {
    height: 1.875rem;
    padding: 0.625rem 0.9375rem;
    gap: 0.375rem;
    border-radius: 1.25rem;
}

/* ===== FAQ模块 ===== */
.faq .btn-box {
    padding: 0.625rem;
}

.faq .btnBoxCard {
    font-size: 0.875rem;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 0.3125rem;
    box-shadow: 0 0 0.1875rem rgba(0, 85, 255, 0.1);
}

.faq .btnBoxCard .btnBoxCardHeader {
    gap: 0.625rem;
}

.faq .btnBoxCard .boxCardTitle {
    font-size: 1.5rem;
}

.faq .btnBoxCard .BoxCardTip {
    font-size: 0.875rem;
}

.faq .cardBtns {
    gap: 1.25rem;
}

.faq .cardBtns .cardBtn {
    line-height: 2.1875rem;
    padding: 0 1.5625rem;
    border-radius: 0.3125rem;
}


.faq .faqItem .faqTitle {
    font-size: 1.3125rem;
}

.faq .faqItem .faqValue {
    height: 0;
}

.faq .faqItem:hover .faqValue {
    height: 18.75rem;
}

@media (max-width: 767.98px) {
    .page-content .banner .banner-title {
        padding: 2.5rem;
    }
    .banner-title .banner-title-text {
        font-size: 2.25rem;
        line-height: 1.2;
    }

    .banner-info .banner-info-col {
        width: 100%;
        height: auto;
    }

    .banner-info .btns {
        max-width: none;
        margin-bottom: 10px;
    }

    .banner-info .xbtn {
        height: 2.75rem;
    }

    .trademark-box .trademark {
        font-size: 1.75rem;
    }

    .bannerVideo.box .box-content{
        padding: 20px var(--p);
    }

    .box .box-content,
    .box .box-content.reverse {
        flex-direction: column;
        padding: 0 1rem;
    }

    .box-content .box-title {
        position: static;
        top: auto;
        margin-bottom: 0;
        font-size: 1.5rem;
    }

    .box-content .box-list {
        gap: 2rem;
    }

    .box-content .box-item {
        position: static;
        top: auto;
    }

    .item-content {
        height: auto;
    }

    .item-content .content-box {
        position: static;
        width: 100%;
        margin: 0;
        transform: none;
        border-radius: 0.5rem;
    }

    .item-content .content-box .content-media {
        padding: 0.75rem;
    }

    .advantage .advantageContent{
        grid-template-columns: 1fr;
        padding: 10px 0;
    }
    .advantage .advantageItem .itemInfo{
        padding: 20px 5%;
    }
    .advantage .box-title {
        flex-direction: column;
    }
    .advantage .box-title > .text {
        padding: 1.25rem 1rem;
        border-right: none;
    }


    .cases .box-title {
        flex-direction: column;
    }

    .cases .box-title > .text {
        padding: 2rem 1rem;
    }

    .cases .boxTabs {
        border-right: 0;
    }

    .cases .tabContent {
        height: auto;
        padding: 1rem;
    }
    .cases .cardContent{
        width: 100%;
    }
    .cases .tab.on .tabTextBox {
        height: auto;
    }

    .channelGrid {
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }

    body {
        --p: 1rem;
        padding-top: 4.375rem;
    }

    .box.business .box-menu .menu-item {
        cursor: pointer;
    }

    .box.business .box-menu {
        display: none;
    }

    .box.business [data-box-sync-list] .box-item {
        display: none;
    }

    .box.business [data-box-sync-list] .box-item.active {
        display: block;
    }

    .box.business .menu-item.on .info-list {
        height: 5.625rem;
        opacity: 1;
    }

    .mobile-item-text {
        display: block;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 0.5rem;
        padding: 1rem;
        margin: 0 0 1rem 0;
    }

    .mobile-item-text .mobile-title {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--font);
        margin-bottom: 0.25rem;
    }

    .mobile-item-text .mobile-tip {
        font-size: 0.9375rem;
        color: var(--greyFont);
    }

    
    .cases .box-title > .text {
        padding: 1.25rem 1rem;
        border-right: 0;
    }

    .cases .tip {
        width: 100%;
    }

    .cases .btn-box {
        width: 100%;
        padding: 1rem;
    }

    .cases .boxTabBox {
        flex-direction: column;
    }

    .cases .boxTabs {
        flex: initial;
        width: 100%;
        flex-direction: row;
        gap: 0.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-right: 0;
        padding: 0 1rem 0.5rem;
        scroll-snap-type: x mandatory;
    }

    .cases .boxTabs .tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
        border: 1px solid var(--line);
        border-radius: 9999px;
        padding: 0.5rem 0.75rem;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    }

    .cases .boxTabs .tab .tabTitle {
        font-size: 0.9375rem;
        gap: 0.5rem;
        align-items: center;
    }

    .cases .boxTabs .tab .tabTextBox {
        height: 0;
        display: none;
    }

    .cases .boxTabs .tab.on {
        background: var(--link);
        color: #fff;
    }

    .cases .box-content {
        padding: 0 1rem;
    }

    .cases .tabContent {
        height: auto;
        padding: 1rem;
        background-size: cover;
    }

    .cases .tabContentBox {
        position: static;
        width: 100%;
        height: auto;
        padding: 0.5rem;
        border-radius: 0.5rem;
        opacity: 1;
    }

    .cases .blur-mark {
        display: none;
    }

    .cases .cardGrid {
        /* grid-template-columns: 1fr 1fr; */
        grid-template-columns: repeat(3, 1fr);
        padding: 0.75rem 0;
    }

    .cases .cardGridItem .GridNum {
        font-size: 1.5rem;
        padding: 0.5rem;
    }

    .cases .cardGridItem .gruidtext {
        font-size: 0.9375rem;
    }

    .cases .cardGridItem:not(:last-child) {
        border-right: 0;
    }

    .cases .msg {
        /* width: 100%; */
        padding: 1rem;
    }

    .cases .tabContent {
        height: auto;
        padding: 1rem;
        background-size: cover;
    }

    .cases .tabContentBox {
        position: static;
        width: 100%;
        height: auto;
        padding: 0.5rem;
        border-radius: 0.5rem;
        display: none;
    }

    .cases .tabContentBox.on {
        display: block;
    }

    .cases .blur-mark {
        display: none;
    }

    .cases .boxTabBox {
        flex-direction: row;
    }

    .cases .boxTabs {
        width: auto;
        flex: 0.6;
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow: visible;
        padding: 0;
        border-right: 1px solid var(--line);
    }

    .cases .boxTabs .tab {
        flex: initial;
        border: 0;
        border-radius: 0;
        padding: 20px;
        background: transparent;
        box-shadow: none;
        width: 100%;
    }

    .cases .boxTabs .tab .tabTitle {
        font-size: 21px;
    }

    .cases .boxTabs .tab .tabTextBox {
        display: block;
        height: 0;
        overflow: hidden;
        transition: 0.3s height;
    }

    .cases .boxTabs .tab.on .tabTextBox {
        height: auto;
    }

    .cases .box-content {
        padding: 0;
    }

    .cases .boxTabBox {
        flex-direction: column;
    }

    .cases .boxTabs {
        width: 100%;
        flex: initial;
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow: visible;
        padding: 0 1rem;
        border-right: 0;
    }

    .cases .boxTabs .tab {
        width: 100%;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        padding: 0.75rem 0;
        background: transparent;
        box-shadow: none;
    }

    .cases .boxTabs .tab.on {
        background: transparent;
        color: inherit;
    }

    .cases .boxTabs .tab .tabTitle {
        font-size: 1rem;
    }

    .cases .boxTabs .tab .tabTextBox {
        display: block;
        height: 0;
        overflow: hidden;
        transition: height 0.3s;
    }

    .cases .boxTabs .tab.on .tabTextBox {
        height: auto;
    }

    .cases .tabContent {
        padding: 1rem;
    }

    .channel .channelItem .channelItem-title {
        font-size: 12px;
    }
}

@media (max-width: 575.98px) {
    .banner-title .banner-title-text {
        font-size: 1.875rem;
    }

    .box-title .text {
        padding: 1.25rem;
    }

    .cases .cardGrid {
        /* grid-template-columns: 1fr; */
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    body {
        --p: calc(100% / 12);
        padding-top: 4.375rem;
    }

    .box.business .box-item .menu-item {
        display: none;
    }
}