/* 适用于移动端 */
@media (max-width:768px) {
    .carousel-pc {
        display: none;
    }

    .carousel-item-caption {
        position: absolute;
        top: 10%;
        left: 0;
        padding: 0 20px;
        width: 100%;
    }

    .caption-p1 {
        position: relative;
        font-weight: bold;
        font-size: 16px;
        color: #242B40;
        /* text-align: center; */
        line-height: 20px;
        z-index: 2;
    }

    .caption-line {
        margin-top: 25px;
        width: 244px;
        height: 5px;
        background: linear-gradient(90deg, #2C6BFC 0%, rgba(44, 107, 252, 0) 100%);
    }

    .caption-p2 {
        margin-top: 15px;
        font-size: 14px;
        color: #212A46;
        line-height: 24px;
    }

    .caption-p2-blue {
        color: #2C6BFC;
    }

    .module-title {
        margin-bottom: 15px;
        padding: 0 20px;
        width: 100%;
        font-weight: bold;
        font-size: 22px;
        line-height: 30px;
        color: #2C2D3F;
        text-align: center;
    }

    .module-intro {
        padding: 0 15px;
        width: 100%;
        font-size: 14px;
        color: #393D45;
        text-align: center;
    }

    .module-main {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
    }

    .content {
        padding: 20px 15px;
    }

    .module {
        max-width: 540px;
    }

    .content1 {
        padding: 20px 15px;
        background-image: url('../../img/ecommerce/social/module1_bg.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .main-card1 {
        margin-bottom: 20px;
        padding: 25px 27px;
        width: 100%;
        background: #FFFFFF;
        border-radius: 8px;
    }

    .card1-icon {
        display: block;
        margin: 0 auto;
        width: 65px;
    }

    .card1-title {
        margin-top: 28px;
        font-size: 18px;
        font-weight: bold;
        color: #2C2D3F;
        text-align: center;
    }

    .card1-tag {
        display: block;
        margin: 12px auto 0;
        background: linear-gradient(#43506C 0%, #67748E 100%);
        border-radius: 18px;
        width: 140px;
        height: 30px;
        font-size: 14px;
        color: #FFFFFF;
        text-align: center;
        line-height: 30px;
    }

    .card1-intro {
        margin-top: 20px;
        margin-bottom: 30px;
        font-size: 16px;
        color: #72767C;
        line-height: 25px;
    }

    .card1-intro-blue {
        color: #2C6BFC;
    }

    .content2 {
        background: #FBFCFF;
    }

    .module-tab2 {
        display: flex;
        position: relative;
    }

    .module-tab2-item {
        flex: 1;
        padding: 10px 20px;
        font-size: 15px;
        cursor: pointer;
        position: relative;
        color: #333;
        text-align: center;
        /* 让边框重叠 */
        transition: all 0.3s ease;
        z-index: 1;
    }

    /* 第一个tab不需要左边距 */
    .module-tab2-item:first-child {
        margin-left: 0;
    }

    /* 选中状态 */
    .module-tab2-item.active {
        color: #2C6BFC;
        border-bottom: 2px solid #2C6BFC;
        z-index: 2;
        font-weight: 500;
    }

    /* 内容区域样式 */
    .module2-container {
        margin-top: 30px;
        padding: 0;
        display: flex;
    }

    .tab-pane {
        display: none;
        width: 100%;
        justify-content: space-between;
    }

    .tab-pane.active {
        display: flex;
        animation: fadeIn 0.5s ease;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* 左侧子Tab栏样式 */
    .sub-tab-container {
        display: none;
    }

    .content-pane {
        margin-bottom: 40px;
        width: 100%;
    }

    .content-pane-img {
        margin-top: 20px;
        width: 100%;
    }

    .content-pane-header {
        padding: 15px 20px;
        display: flex;
        align-items: flex-start;
        background-color: #f0f7ff;
    }

    .pane-header-icon {
        margin-top: 0;
        margin-right: 10px;
        width: 25px;
    }

    .pane-header-title {
        font-size: 18px;
        color: #2C6BFC;
    }

    .pane-header-intro {
        display: block;
        font-size: 14px;
        color: #7B8498;
    }

    .content3 {
        padding: 20px 15px;
        background-image: url('../../img/ecommerce/social/module3_bg.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .main-card3 {
        margin-bottom: 20px;
        width: 100%;
        border-radius: 8px;
    }

    .card3-icon {
        width: 100%;
    }

    .card3-title {
        margin-top: 14px;
        font-weight: bold;
        font-size: 20px;
        color: #2C2D3F;
        text-align: center;
    }

    .card3-intro {
        margin-top: 10px;
        font-size: 16px;
        color: #7B8498;
        /* text-align: center; */
    }

    .main-card4 {
        margin-bottom: 20px;
        padding: 30px 20px;
        width: 100%;
        background: #FFFFFF;
        border-radius: 8px;
    }

    .card4-title {
        font-weight: bold;
        font-size: 18px;
        color: #2C2D3F;
        text-align: center;
        display: flex;
        align-items: center;
    }

    .card4-title img {
        margin-right: 10px;
        width: 24px;
    }

    .card4-intro {
        margin-top: 22px;
        font-size: 16px;
        color: #72767C;
        line-height: 26px;
    }
}

@media (min-width:768px) and (max-width:992px) {
    .carousel-item img {
        height: 264px;
    }

    .carousel-item-caption {
        position: absolute;
        top: 22%;
        left: 50%;
        transform: translateX(-50%);
        width: 768px;
    }

    .caption-p1 {
        position: relative;
        font-weight: bold;
        font-size: 20px;
        color: #242B40;
        line-height: 20px;
        z-index: 2;
    }

    .caption-line {
        margin-top: 35px;
        width: 244px;
        height: 5px;
        background: linear-gradient(90deg, #2C6BFC 0%, rgba(44, 107, 252, 0) 100%);
    }

    .caption-p2 {
        margin-top: 15px;
        font-size: 14px;
        color: #212A46;
        line-height: 24px;
    }

    .caption-p2-blue {
        color: #2C6BFC;
    }


    .module-title {
        margin-bottom: 28px;
        padding: 0 20px;
        width: 100%;
        font-weight: bold;
        font-size: 30px;
        line-height: 40px;
        color: #2C2D3F;
        text-align: center;
    }

    .module-intro {
        padding: 0 15px;
        width: 100%;
        font-size: 16px;
        color: #393D45;
        text-align: center;
    }

    .content1 {
        padding-top: 72px;
        padding-bottom: 90px;
    }

    .module1 {
        max-width: 768px;
    }

    .main-card1 {
        padding: 25px 27px;
        width: 247px;
    }

    .card1-icon {
        width: 56px;
    }

    .card1-title {
        margin-top: 28px;
        font-size: 16px;
    }

    .card1-tag {
        margin: 12px auto 0;
        width: 140px;
        height: 30px;
        font-size: 13px;
        line-height: 30px;
    }

    .card1-intro {
        margin-top: 20px;
        margin-bottom: 30px;
        font-size: 14px;
        line-height: 22px;
    }

    .content2 {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .module2 {
        max-width: 768px;
    }

    /* 左侧子Tab栏样式 */
    .sub-tab-container {
        width: 238px;
    }

    .sub-tab-icon {
        width: 26px;
        height: 26px;
    }

    .sub-tab-title {
        font-size: 18px;
        line-height: 30px;
    }

    .sub-tab-intro {
        font-size: 15px;
    }

    .content-pane img {
        width: 441px;
    }

    .content3 {
        padding-top: 72px;
        padding-bottom: 90px;
    }

    .module3 {
        max-width: 768px;
    }

    .main-card3 {
        padding-bottom: 20px;
        width: 243px;
    }

    .card3-title {
        margin-top: 24px;
        font-size: 17px;
    }

    .card3-intro {
        margin-top: 10px;
        padding: 0 5px;
        font-size: 15px;
    }

    .content4 {
        padding-top: 72px;
        padding-bottom: 128px;
    }

    .module4 {
        max-width: 768px;
    }

    .main-card4 {
        padding: 30px 20px;
        width: 243px;
    }

    .card4-title {
        font-size: 20px;
    }

    .card4-title img {
        margin-right: 10px;
        width: 28px;
    }

    .card4-intro {
        margin-top: 22px;
        font-size: 17px;
    }
}

@media (min-width:992px) and (max-width:1200px) {
    .carousel-item img {
        height: 413px;
    }

    .carousel-item-caption {
        position: absolute;
        top: 22%;
        left: 50%;
        transform: translateX(-50%);
        width: 992px;
    }

    .caption-p1 {
        position: relative;
        font-weight: bold;
        font-size: 26px;
        color: #242B40;
        line-height: 26px;
        z-index: 2;
    }

    .caption-line {
        margin-top: 29px;
        width: 316px;
        height: 7px;
        background: linear-gradient(90deg, #2C6BFC 0%, rgba(44, 107, 252, 0) 100%);
    }

    .caption-p2 {
        margin-top: 33px;
        font-size: 17px;
        color: #212A46;
        line-height: 26px;
    }

    .caption-p2-blue {
        color: #2C6BFC;
    }

    .module-title {
        margin-bottom: 38px;
        padding: 0 20px;
        width: 100%;
        font-weight: bold;
        font-size: 40px;
        line-height: 40px;
        color: #2C2D3F;
        text-align: center;
    }

    .module-intro {
        padding: 0 15px;
        width: 100%;
        font-size: 20px;
        color: #393D45;
        text-align: center;
    }

    .content1 {
        padding-top: 72px;
        padding-bottom: 90px;
    }

    .module1 {
        max-width: 992px;
    }

    .main-card1 {
        padding: 25px 27px;
        width: 319px;
    }

    .card1-icon {
        width: 88px;
    }

    .card1-title {
        margin-top: 28px;
        font-size: 20px;
    }

    .card1-tag {
        margin: 12px auto 0;
        width: 162px;
        height: 36px;
        font-size: 18px;
        line-height: 36px;
    }

    .card1-intro {
        margin-top: 20px;
        margin-bottom: 30px;
        font-size: 17px;
        line-height: 25px;
    }

    .content2 {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .module2 {
        max-width: 992px;
    }

    /* 左侧子Tab栏样式 */
    .sub-tab-container {
        width: 308px;
    }

    .sub-tab-icon {
        width: 26px;
        height: 26px;
    }

    .sub-tab-title {
        font-size: 18px;
        line-height: 30px;
    }

    .sub-tab-intro {
        font-size: 15px;
    }

    .content-pane img {
        width: 569px;
    }

    .content3 {
        padding-top: 72px;
        padding-bottom: 90px;
    }

    .module3 {
        max-width: 992px;
    }

    .main-card3 {
        padding-bottom: 20px;
        width: 314px;
    }

    .card3-title {
        margin-top: 24px;
        font-size: 20px;
    }

    .card3-intro {
        margin-top: 20px;
        font-size: 16px;
    }

    .content4 {
        padding-top: 72px;
        padding-bottom: 128px;
    }

    .module4 {
        max-width: 992px;
    }

    .main-card4 {
        padding: 30px 20px;
        width: 314px;
    }

    .card4-title {
        font-size: 20px;
    }

    .card4-title img {
        margin-right: 10px;
        width: 28px;
    }

    .card4-intro {
        margin-top: 22px;
        font-size: 17px;
    }
}

@media (min-width:1200px) {
    .carousel-item img {
        height: 500px;
    }

    .carousel-item-caption {
        position: absolute;
        top: 22%;
        left: 50%;
        transform: translateX(-50%);
        width: 1200px;
    }

    .caption-p1 {
        position: relative;
        font-weight: bold;
        font-size: 34px;
        color: #242B40;
        line-height: 32px;
        z-index: 2;
    }

    .caption-line {
        margin-top: 35px;
        width: 382px;
        height: 8px;
        background: linear-gradient(90deg, #2C6BFC 0%, rgba(44, 107, 252, 0) 100%);
    }

    .caption-p2 {
        margin-top: 40px;
        font-size: 20px;
        color: #212A46;
        line-height: 30px;
    }

    .caption-p2-blue {
        color: #2C6BFC;
    }

    .module-title {
        margin-bottom: 58px;
        padding: 0 20px;
        width: 100%;
        font-weight: bold;
        font-size: 40px;
        line-height: 40px;
        color: #2C2D3F;
        text-align: center;
    }

    .module-intro {
        padding: 0 15px;
        width: 100%;
        font-size: 20px;
        color: #393D45;
        text-align: center;
    }

    .content1 {
        padding-top: 72px;
        padding-bottom: 90px;
    }

    .module1 {
        max-width: 1200px;
    }

    .main-card1 {
        padding: 25px 27px;
        width: 386px;
    }

    .card1-icon {
        width: 88px;
    }

    .card1-title {
        margin-top: 28px;
        font-size: 20px;
    }

    .card1-tag {
        margin: 12px auto 0;
        width: 162px;
        height: 36px;
        font-size: 18px;
        line-height: 36px;
    }

    .card1-intro {
        margin-top: 20px;
        margin-bottom: 30px;
        font-size: 17px;
        line-height: 25px;
    }

    .content2 {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .module2 {
        max-width: 1200px;
    }

    /* 左侧子Tab栏样式 */
    .sub-tab-container {
        width: 372px;
    }

    .sub-tab-icon {
        width: 30px;
        height: 30px;
    }

    .sub-tab-title {
        font-size: 20px;
        line-height: 30px;
    }

    .sub-tab-intro {
        font-size: 16px;
    }

    .content-pane img {
        width: 688px;
    }

    .content3 {
        padding-top: 72px;
        padding-bottom: 90px;
    }

    .module3 {
        max-width: 1200px;
    }

    .main-card3 {
        padding-bottom: 20px;
        width: 380px;
    }

    .card3-title {
        margin-top: 24px;
        font-size: 20px;
    }

    .card3-intro {
        margin-top: 28px;
        font-size: 16px;
    }

    .content4 {
        padding-top: 72px;
        padding-bottom: 128px;
    }

    .module4 {
        max-width: 1200px;
    }

    .main-card4 {
        padding: 30px 20px;
        width: 380px;
    }

    .card4-title {
        font-size: 20px;
    }

    .card4-title img {
        margin-right: 10px;
        width: 28px;
    }

    .card4-intro {
        margin-top: 22px;
        font-size: 17px;
    }
}

/* 除移动端的屏幕 */
@media (min-width:768px) {
    .carousel-moblie {
        display: none;
    }

    /* 卡片悬停效果 */
    .shadow {
        transform: translateY(0);
        /* box-shadow: none; */
        transition: all 0.3s ease;
    }

    .shadow:hover {
        transform: translateY(-10px);
        box-shadow: 0px 8px 22px 0px rgba(92, 99, 125, 0.25);
    }

    .carousel-item img {
        width: 100%;
        object-fit: cover;
    }

    .module-main {
        display: flex;
        justify-content: space-between;
    }

    .content1 {
        background-image: url('../../img/ecommerce/social/module1_bg.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .main-card1 {
        background: #FFFFFF;
        border-radius: 8px;
    }

    .card1-icon {
        display: block;
        margin: 0 auto;
    }

    .card1-title {
        font-weight: bold;
        color: #2C2D3F;
        text-align: center;
    }

    .card1-tag {
        display: block;
        background: linear-gradient(#43506C 0%, #67748E 100%);
        border-radius: 18px;
        color: #FFFFFF;
        text-align: center;
    }

    .card1-intro {
        color: #72767C;
    }

    .card1-intro-blue {
        color: #2C6BFC;
    }

    .content2 {
        background: #FBFCFF;
    }

    .module-tab2 {
        display: flex;
        position: relative;
    }

    .module-tab2-item {
        flex: 1;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 19px;
        cursor: pointer;
        position: relative;
        background-color: #FFFFFF;
        color: #333;
        border: 1px solid #DCDEE5;
        margin-left: -1px;
        /* 让边框重叠 */
        transition: all 0.3s ease;
        z-index: 1;
    }

    /* 第一个tab不需要左边距 */
    .module-tab2-item:first-child {
        margin-left: 0;
    }

    /* 选中状态 */
    .module-tab2-item.active {
        background-color: #EFF4FD;
        color: #2C6BFC;
        border: 1px solid #EFF4FD;
        z-index: 2;
        font-weight: 500;
    }

    /* 内容区域样式 */
    .module2-container {
        margin-top: 56px;
        padding: 0;
        display: flex;
    }

    .tab-pane {
        display: none;
        width: 100%;
        justify-content: space-between;
    }

    .tab-pane.active {
        display: flex;
        animation: fadeIn 0.5s ease;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .sub-tab {
        padding: 15px 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        background-color: transparent;
        text-align: left;
        width: 100%;
        display: flex;
        align-items: flex-start;
        user-select: none;
        /* 防止文字被选中 */
    }

    .sub-tab:hover {
        background-color: #f0f7ff;
    }

    /* 图标容器样式 */
    .sub-tab-icon {
        margin-right: 10px;
        flex-shrink: 0;
        position: relative;
    }

    /* 图标样式 */
    .sub-tab-icon img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: opacity 0.3s ease;
    }

    /* 默认状态图标 */
    .sub-tab-icon .icon-normal {
        opacity: 1;
    }

    /* 选中状态图标 */
    .sub-tab-icon .icon-active {
        opacity: 0;
    }

    /* 选中状态下的图标样式 */
    .sub-tab.active .sub-tab-icon .icon-normal {
        opacity: 0;
    }

    .sub-tab.active .sub-tab-icon .icon-active {
        opacity: 1;
    }

    .sub-tab p {
        display: flex;
        flex-direction: column;
        pointer-events: none;
        /* 防止p标签拦截点击事件 */
    }

    .sub-tab-title {
        color: #2C2D3F;
    }

    .sub-tab-intro {
        display: none;
        margin-top: 10px;
        font-size: 16px;
        color: #7B8498;
    }

    .sub-tab:hover .sub-tab-title {
        color: #1a4cb8;
    }

    .sub-tab.active {
        background-color: #e6f0ff;
        font-weight: 500;
    }

    .sub-tab.active .sub-tab-title {
        color: #1a4cb8;
    }

    .sub-tab.active .sub-tab-intro {
        display: block;
    }

    /* 右侧内容区域样式 */
    .content-area {
        /* flex: 1; */
    }

    .content-pane {
        display: none;
        width: 100%;
        height: 100%;
    }

    .content-pane.active {
        display: flex;
        justify-content: center;
        align-items: center;
        animation: fadeIn 0.5s ease;
    }

    .content-pane-header {
        display: none;
    }

    .content3 {
        background-image: url('../../img/ecommerce/social/module3_bg.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .main-card3 {
        border-radius: 8px;
    }

    .card3-icon {
        width: 100%;
    }

    .card3-title {
        font-weight: bold;
        color: #2C2D3F;
        text-align: center;
    }

    .card3-intro {
        padding: 0 10px;
        color: #7B8498;
        /* text-align: center; */
    }

    .main-card4 {
        background: #FFFFFF;
        border-radius: 8px;
    }

    .card4-title {
        font-weight: bold;
        color: #2C2D3F;
        text-align: center;
        display: flex;
        align-items: center;
    }

    .card4-intro {
        color: #72767C;
    }
}

body {
    background: #F6F7FB;
}

.banner-tabs {
    /* position: relative; */
    z-index: 10;
    margin-right: auto;
    margin-left: auto;
}

.banner-tabs .tab {
    background-image: url('../../img/home/banner_tabBg.png');
    background-repeat: no-repeat;
    background-origin: content-box;
    /* 背景图片从内容区域开始定位 */
    background-position: right bottom;
    /* 相对于内容区域的右下角 */
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.content {
    width: 100%;
}

.module {
    margin-right: auto;
    margin-left: auto;
}

input {
    outline: none;
}