/* css变量 */
:root {
    /* 默认字体大小 */
    --default-font-size: 18px;
    /* 小屏幕字体大小 */
    --small-screen-font-size: 14px;
    /*大标题默认大小*/
    --default-large-title: 72px;
    /* 一级标题大小 */
    --default-text-one: 48px;
    /* 二级标题大小 */
    --default-text-two: 36px;
    /* 三级标题大小 */
    --default-text-three: 24px;
    /* 四级标题大小 */
}

/* 全局样式统一 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 排除某个 div 及其内部元素的样式 */
.nav,
.nav * {
    box-sizing: content-box;
}

.footer,
.footer * {
    box-sizing: content-box;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

@font-face {
    font-family: 'Source Han Sans';
    src: url('https://static.hitouch.com/hitouch/fonts/SourceHanSansCN-Normal.otf') format('otf');
    font-weight: normal;
    font-style: normal;
}

/* 响应式布局 */
body {
    width: 100%;
    height: 100vh;
    font-family: 'Source Han Sans';
    line-height: 1.6;
    background-color: #fff;
    font-size: var(--default-font-size);
    font-variation-settings: "opsz" auto;
    font-feature-settings: "kern" on;
    color: #1A1A1A;
    /* 1520px及以上屏幕宽度的默认字体大小 */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
}

/* Webkit (Chrome, Safari, Opera) */
::-webkit-scrollbar {
    display: none;
    /* 隐藏滚动条 */
}

.fixed-box {
    height: 72px;
    background: #C32775;
}

/* 导航 */
.nav {
    height: 72px;
    width: 100%;
    top: 0;
    left: 0;
    background: #993366;
}

/* 进入背景视频 */
.video-background {
    width: 100%;
    height: 78%;
}

.video-wrap {
    top: 0;
    left: 0;
}

#video-bg {
    object-fit: cover;
    /* 使用 cover 让视频填充整个容器 */
}

.video-content-all {
    font-variation-settings: "opsz" auto;
    font-feature-settings: "kern" on;
    color: #FFFFFF;
}

.video-content {
    color: #fff;
    width: 100%;
    height: 100%;
}

.video-content-title {
    font-size: var(--default-large-title);
    font-weight: 700;
    line-height: 100px;
}

.video-content-subtitle {
    font-size: var(--default-text-two);
    font-weight: 400;
    line-height: 43px;
    letter-spacing: 0.22em
}

.globalization-trend {
    padding-top: 20px;
    padding-bottom: 20px;
}

.line {
    width: 100px;
    height: 1px;
    border-radius: 10px;
    background: #808080;
    backdrop-filter: blur(100px);
}

.globalization-trend-title {
    font-size: var(--default-font-size);
    font-weight: normal;
    line-height: 100%;
    letter-spacing: 0.68em;
    color: #808080;
}

.globalization-data-box {
    /* width: 1520px; */
    width: 1320px;
    height: 120px;
    border-radius: 10px;
    background-color: rgba(242, 242, 242, 0.75);
    backdrop-filter: blur(100px);
}

.data-box {
    width: 34%;
    height: 120px;
}

.data-box-title {
    font-size: var(--default-text-two);
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0em;
    margin-right: 5px;
    color: #1A1A1A;
}

.data-box-unit {
    margin-bottom: 5px;
    font-weight: normal;
    line-height: 100%;
    letter-spacing: 0em;
    color: #1A1A1A;
}

.data-box-content {
    font-weight: normal;
    line-height: 120%;
    margin-top: 10px;
    letter-spacing: 0em;
    color: #808080;
    padding-left: 4px;
    padding-right: 4px;
}

.data-box-content-one::after {
    content: '1';
    position: absolute;
    top: 4px;
    right: -3px;
    color: #808080;
    width: 12px;
    height: 12px;
    text-align: center;
    line-height: 10px;
    font-size: 8px;
    border-radius: 50%;
    border: 1px solid #808080;
    transform: translate(50%, -50%);
}

.data-box-content-two::after {
    content: '2';
    position: absolute;
    top: 4px;
    right: -3px;
    /* background-color: red; */
    color: #808080;
    width: 12px;
    height: 12px;
    text-align: center;
    line-height: 10px;
    font-size: 8px;
    border-radius: 50%;
    border: 1px solid #808080;
    transform: translate(50%, -50%);
}

.data-box-content-three::after {
    content: '3';
    position: absolute;
    top: 4px;
    right: -3px;
    color: #808080;
    width: 12px;
    height: 12px;
    text-align: center;
    line-height: 10px;
    font-size: 8px;
    border-radius: 50%;
    border: 1px solid #808080;
    transform: translate(50%, -50%);
}

.amazing-msg {
    top: 10px;
    right: 9px;
}

.amazing-msg-content {
    font-size: 12px;
    font-weight: normal;
    line-height: 100%;
    letter-spacing: 0em;
    margin-right: 5px;
    color: rgba(26, 26, 26, 0.25);
}

.amazing-msg img {
    width: 16px;
    height: 16px;
}

.amazing-msg-icon {
    line-height: 16px;
}

.amazing-msg-pop {
    font-size: 12px;
    font-weight: normal;
    line-height: 150%;
    letter-spacing: 0em;
    color: #BFBFBF;
    margin-top: 4px;
}

.amazing-msg-pop a {
    word-wrap: break-word;
    /* text-decoration: underline; */
}

.amazing-msg-pop a:hover {
    text-decoration: underline;
}

.going-to-sea {
    /* width: 1520px; */
    width: 1320px;
}

.going-to-sea-box {
    /* padding-left: 50px;
    padding-right: 50px; */
}

.going-to-sea-title {
    font-size: var(--default-text-one);
    font-weight: bold;
    line-height: 100%;
    text-align: center;
    letter-spacing: 0em;
    margin-bottom: 40px;
}

.going-to-sea-content {
    font-weight: normal;
    line-height: 200%;
    letter-spacing: 0em;
    color: #808080;
}

.going-to-sea-content-content {
    margin-top: 36px
}

.going-to-sea-content-list {
    margin-top: 36px
}

.going-to-sea-echart-left {
    padding-right: 17px
}

.going-to-sea-echart-right {
    padding-left: 17px
}

.sea-line {
    width: 1px;
    height: 356px;
    background: #E5E5E5;
    backdrop-filter: blur(100px);
    margin-top: 5px;
}

.sea-title {
    font-size: var(--default-text-three);
    font-weight: bold;
    line-height: 150%;
    text-align: center;
    letter-spacing: 0em;
    margin-bottom: 20px;
}

.sea-samll-title {
    width: 54px;
    font-weight: 350;
    letter-spacing: 0px;
}

.sea-ect {
    width: 0px;
    height: 50px;
    line-height: 50px !important;
    border-radius: 10px;
    margin-left: 12px;
    background: #C32775;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0px;
    color: #FFFFFF;
    padding-left: 13px;
}

.sea-ect-animation {
    transition: width 0.8s;
    /* 定义宽度变化的过渡效果 */
}

.sea-list {
    height: 358px;
    margin-right: 10px;
}

.sea-list-item {
    width: 610px;
    border-radius: 10px;
    background: #F2F2F2;
    margin-bottom: 10px;
    padding: 12px 17px;
}

.sea-scrollbar {
    width: 10px;
    height: 358px;
    border-radius: 10px;
    opacity: 1;
    background: #F2F2F2;
    backdrop-filter: blur(100px);
}

.side-sea-scrollbar {
    width: 16px;
    height: 358px;
    border-radius: 10px;
    opacity: 1;
    background: #E5E5E5;
    backdrop-filter: blur(100px);
}

.side-sea-scrollbar-item {
    top: 9px;
    /* transform: translateY(9px); */
    left: 4px;
    width: 8px;
    height: 36px;
    border-radius: 10px;
    background: #C32775;
    backdrop-filter: blur(100px);
}

.sea-scrollbar-item {
    left: 3px;
    top: 4px;
    width: 4px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    backdrop-filter: blur(100px);
}

.sea-list-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #C32775;
    margin-right: 17px;
}

.sea-list-time {
    font-weight: normal;
    line-height: 150%;
    letter-spacing: 0em;
    margin-bottom: 3px;
}

.sea-list-title {
    font-weight: normal;
    line-height: 150%;
    letter-spacing: 0em;
    padding-left: 25px;
    margin-bottom: 3px;
}

.sea-list-content {
    font-size: var(--small-screen-font-size);
    font-weight: normal;
    line-height: 150%;
    letter-spacing: 0em;
    color: #808080;
    padding-left: 25px;
}

.sea-card {
    width: 350px;
    height: 480px;
    border-radius: 10px;
    background: #FFFFFF;
    backdrop-filter: blur(100px);
    padding: 50px 45px;
    margin-right: 40px;
}

.sea-card:hover {
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
}

.sea-card:hover .how-card-footer {
    width: 310px;
}

/* .sea-card:hover .sea-card-title {
    color: #C32775;
} */

.sea-card:hover .sea-card-content {
    color: #1A1A1A;
}

.sea-card-title {
    font-size: var(--default-text-two);
    font-weight: bold;
    line-height: 120%;
    letter-spacing: 0em;
    margin-bottom: 40px;
    color: #C32775;
}

.sea-card-content {
    font-weight: normal;
    line-height: 175%;
    letter-spacing: 0em;
    /* color: #808080; */
    color: #1A1A1A;
}

.card-column {
    width: 236px;
    height: 444px;
    background: #E5E5E5;
}

.card-column-left {
    top: 0;
    left: 80px;
    border-bottom-left-radius: 118px;
    border-bottom-right-radius: 118px;
}

.card-column-right {
    bottom: 0;
    right: 80px;
    border-top-left-radius: 118px;
    border-top-right-radius: 118px;
}

.card-column-animation {
    transition: all 2s;
}

.going-to-sea-small-title {
    font-weight: normal;
    line-height: 120%;
    letter-spacing: 0em;
    color: #808080;
    margin-bottom: 80px;
}

.how-card {
    width: 182px;
    height: 400px;
    border-radius: 10px;
    background: #fff;
    backdrop-filter: blur(100px);
}

.how-card-title {
    width: 100%;
    font-size: var(--default-text-two);
    font-weight: bold;
    line-height: 120%;
    letter-spacing: 0em;
    /* top: 50%; */
    transform: translateY(178px);
    left: 0;
    color: rgb(26, 26, 26);
}

.how-card-title-other {
    width: 100%;
    font-size: var(--default-text-two);
    font-weight: bold;
    letter-spacing: 0em;
    top: 50%;
    left: 0;
    margin-top: -21px;
    margin-bottom: 50px;
}

.how-card-fa {
    top: 240px;
    left: 0px;
    padding: 0px 60px;
}

.how-card-fa-title {
    font-weight: 700;
    /* font-size: 22px; */
}

.how-card-fa-content {
    /* font-weight: 400;
    font-size: 22px; */
}

.how-card-footer {
    left: 20px;
    top: 370px;
    /* width: 320px; */
    width: 0px;
    height: 2.5%;
    border-radius: 10px;
    opacity: 1;
    background: #C32775;
    backdrop-filter: blur(100px);
}

.how-into-card {
    width: 350px;
    height: 480px;
    border-radius: 10px;
    background: #FFFFFF;
    backdrop-filter: blur(100px);
    margin-right: 40px;
    padding: 50px 40px;
}

/* .how-into-card:hover .card-dot {
    background: #C32775;
} */

.how-into-card:hover {
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
}

.how-into-card:hover>.how-card-title {
    color: #C32775;
}

.how-into-card:hover>.how-card-footer {
    width: 310px;
}

.how-into-card:hover>.how-card-small-title {
    color: #1A1A1A;
}

.how-into-card:hover>.flex>.how-card-content {
    color: #1A1A1A;
}

.how-card-small-title {
    font-weight: 700;
    /* color: #808080; */
    transition: 0.2s;
    margin-top: 30px;
}

.how-card-content {
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0em;
    /* color: #808080; */
    transition: 0.2s;
    font-feature-settings: "kern" on;
}

.card-column-left-bottom {
    bottom: 0;
    left: 80px;
    border-top-left-radius: 118px;
    border-top-right-radius: 118px;
}

.card-column-right-top {
    top: 0;
    right: 80px;
    border-bottom-left-radius: 118px;
    border-bottom-right-radius: 118px;
}

.how-card-step-list {
    width: 220.5px;
    height: 80px;
    z-index: 0;
    /* background: #F2F2F2; */
    /* backdrop-filter: blur(100px); */
    font-size: var(--default-text-three);
    font-weight: normal;
    letter-spacing: 0em;
}

.lwl-tabs {
    width: 1320px;
    height: 360px;
    padding: 0px;
    border-radius: 10px;
    background: #F2F2F2;
}

.lwl-tabs-nav {
    height: 120px;
    background: rgba(242, 242, 242, 0.5);
    /* backdrop-filter: blur(100px); */
    font-size: var(--default-text-three);
    font-weight: bold;
    letter-spacing: 0em;
}

.lwl-active {
    color: #C32775;
    background: #F2F2F2;
}

.lwl-tabs-nav-active {
    width: 11.99px;
    height: 90px;
    border-radius: 10px;
    background: #C32775;
    backdrop-filter: blur(100px);
    left: 10px;
    top: 50%;
    margin-top: -45px;
}

.lwl-tabs-nav-animation {
    animation: expandAnimation 1s ease forwards;
    /* 使用动画 */
}

#tabs-content {
    height: 1080px;
}

.tabs-content-left {
    padding: 36px 45px;
    width: 480px;
}

.tabs-content-left h4 {
    font-size: var(--default-text-three);
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 0em;
    margin-bottom: 30px
}

.tabs-content-left p {
    font-weight: normal;
    line-height: 200%;
    letter-spacing: 0em;
}

.tabs-content-right {
    padding: 36px 45px;
}

.tabs-select {
    height: 64px;
    border-radius: 32px;
    align-self: stretch;
    margin-bottom: 10px;
    /* font-weight: bold; */
    line-height: 120%;
    letter-spacing: 0em;
}

.tabs-select-active {
    background: #C32775;
    color: #fff;
}

.tabs-select:hover {
    background: #C32775;
    color: #fff;
}

.popular {
    width: 1327px;
    height: 500px;
    padding: 0px 100px;
    gap: 20px 20px;
    box-sizing: border-box;
}

.popular-item {
    width: 240px;
    height: 240px;
    border-radius: 10px;
    padding: 40px 0px;
    gap: 40px 0px;
    color: #808080;
    box-sizing: border-box;
}

.popular-item:hover {
    background: #fff;
    color: #C32775;
    box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.05);
}

.popular-item:hover svg path {
    fill: #C32775;
}

.popular-item p {
    font-size: var(--default-text-three);
    font-weight: normal;
    line-height: 120%;
    letter-spacing: 0em;
}

.brand-customers {
    width: 1286px;
    height: 576px;
    padding: 0px;
    gap: 24px 24px;
}

.brand-customers-item {
    width: 180px;
    height: 96px;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: 0.2s;
}

.brand-customers-item>img {
    width: 139px;
}

.brand-customers-item:hover {
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1);
}

.brand-customers-item:hover>img {
    position: relative;
    bottom: 6px;
}

.certificate {
    /* width: 1520px; */
    width: 1320px;
}

.certificate-title {
    color: #808080;
}

.certificate-small-title {
    font-size: var(--default-text-three);
    font-weight: normal;
    line-height: 150%;
    letter-spacing: 0em;
}

.bg-pic-list {
    left: 0;
    top: 0;
}

.bg-pic {
    width: 650px;
    height: 457px;
    border-radius: 10px;
    top: 0;
    left: 0;
    /* box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1); */
}

.bg-pic-one {
    background: url(../fonts/4b016c0a35d94b01a43dc07996b99c8d.woff);
} */

.see-card:hover .see-card-content-title {
    color: #C32775;
}

/* .see-card:hover>.how-card-footer {
    width: 360px;
} */

.see-card-content {
    padding: 20px 0px;
}

.see-card-content-title {
    font-size: var(--default-text-three);
    font-weight: bold;
    line-height: 120%;
    letter-spacing: 0em;
}

.see-card-content-content {
    font-size: 14px;
    font-weight: normal;
    line-height: 150%;
    letter-spacing: 0em;
    color: #808080;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* 控制显示的行数 */
    -webkit-line-clamp: 3;
    /* 显示前三行 */
    line-clamp: 3;
    /* 控制文本超出后的处理方式 */
    text-overflow: ellipsis;
    /* 省略号 */
}

.see-card:hover .see-card-content-content {
    color: #C32775;
}

.swiper-content {
    height: 457px;
}

.right-menu {
    left: 20px;
    top: 0px;
}

.right-menu-item {
    width: 4px;
    height: 0px;
    border-radius: 10px;
    background: #C32775;
    margin-right: 10px;
}

.right-menu-item-active {
    height: 30px;
}

.right-menu-title {
    width: 108px;
    font-size: 16px;
    font-weight: normal;
    line-height: 100%;
    letter-spacing: 0em;
    color: #808080;
}

.right-menu-item-choose {
    font-size: var(--default-font-size) !important;
    font-weight: bold;
    color: #1A1A1A;
}

.right-menu-box {
    height: 30px;
    margin-bottom: 6px;
}

#title-two {
    padding-top: 100px;
    padding-bottom: 100px
}

#title-three {
    height: 840px;
    background: #f2f2f2
}

.title-three-title {
    margin-bottom: 60px
}

#title-four {
    height: 840px
}

.how-title {
    margin-bottom: 20px;
}

.byc {
    width: 1320px;
}

#title-five {
    height: 800px;
    background: #f2f2f2
}

.title-five-title {
    width: 100%;
    font-size: var(--default-text-two);
    font-weight: bold;
    letter-spacing: 0em;
    margin-bottom: 50px;
    color: #C32775;
}

.title-five-h5 {
    margin-bottom: 40px;
}

#title-six {
    height: 1000px;
    padding-bottom: 100px;
}

.title-six-box {
    width: 1320px;
}

.lwl-tabs-left {
    width: 400px;
}

#tabs-content-one {
    height: 360px;
}

#tabs-content-two {
    height: 360px;
}

#tabs-content-three {
    height: 360px;
}

.tabs-select-two {
    height: 48px;
}

#title-seven {
    height: 760px;
    background: #f2f2f2
}

.title-seven-box {
    width: 1320px;
}

.title-eight-box {
    width: 1320px;
}

#title-eight {
    background: #fff;
    height: 660px
}

#title-nine {
    height: 840px;
    background: #f7f7f7
}

.going-to-sea-title-bottom {
    margin-bottom: 60px;
}

#title-ten {
    height: 840px;
    background: #f2f2f2
}

.swiper-img-box {
    height: 457px;
    width: 650px
}

.swiper-item-title {
    margin-bottom: 84px;
}

.footer-box {
    width: 1320px;
}

.title-six-title-mb {
    margin-bottom: 10px;
    margin-top: 0px;
    padding-top: 20px;
}

.line-box {
    margin-bottom: 60px;
}

.how-card-line {
    width: 1096px;
    height: 2px;
    background: #BFBFBF;
    bottom: 0px;
    left: 50%;
    margin-left: -548px;
}

.how-card-dot {
    display: flex;
    justify-content: center;
    padding: 5px;
    margin-top: 5px;
    margin-right: 11px;
}

.card-dot {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    /* background: #808080; */
    background: #C32775;
}

.mob-menu {
    display: none;
}

#title-two-mobile {
    display: none;
}

#title-three-mobile {
    display: none;
}

#title-four-mobile {
    display: none;
}

#title-five-mobile {
    display: none;
}

#title-six-mobile {
    display: none;
}

#title-seven-mobile {
    display: none;
}

.title-eight-box-title {
    margin-bottom: 60px;
}

#title-ten-mobile {
    display: none;
}

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

.title-eight-see-more{
    display: none;
}

/* 在1520px以下的屏幕宽度应用不同的字体大小 */
@media (max-width: 1620px) {
    :root {
        /* 默认字体大小 */
        --default-font-size: 16px;
        /* 小屏幕字体大小 */
        --small-screen-font-size: 12px;
        /*大标题默认大小*/
        --default-large-title: 60px;
        /* 一级标题大小 */
        --default-text-one: 46px;
        /* 二级标题大小 */
        --default-text-two: 34px;
        /* 三级标题大小 */
        --default-text-three: 22px;
        /* 四级标题大小 */
    }

    .video-content-subtitle {
        font-size: 30px;
        line-height: 30px;
    }

    #title-two {
        padding-top: 60px;
        padding-bottom: 70px
    }

    .globalization-data-box {
        width: 1100px;
        height: 94px;
    }

    .going-to-sea-title {
        font-size: 36px;
    }

    .data-box-title {
        font-size: 24px;
    }

    .data-box-unit {
        margin-bottom: 3px;
    }

    .going-to-sea {
        width: 1100px;
    }

    .sea-list-item {
        width: 504px;
    }

    .going-to-sea-title {
        margin-bottom: 20px;
    }

    .going-to-sea-content-content {
        margin-top: 20px
    }

    .going-to-sea-echart-left {
        padding-right: 12px
    }

    .going-to-sea-echart-right {
        padding-left: 12px
    }

    .sea-samll-title {
        width: 48px;
    }

    .going-to-sea-content-list {
        margin-top: 20px
    }

    .right-menu-title {
        font-size: var(--small-screen-font-size);
    }

    .right-menu-item-choose {
        font-size: 14px !important;
        font-weight: bold;
        color: #1A1A1A;
    }

    .right-menu-item-active {
        height: 20px;
    }

    .right-menu-box {
        height: 20px;
        margin-bottom: 5px;
    }

    #title-three {
        height: 630px;
    }

    .title-three-title {
        margin-bottom: 40px
    }

    .sea-card {
        width: 309px;
        height: 400px;
        margin-right: 30px;
        padding: 35px;
    }

    .sea-card-title {
        font-size: 24px;
        margin-bottom: 30px;
    }

    #title-four {
        height: 630px
    }

    .how-title {
        margin-bottom: 30px;
    }

    .going-to-sea-small-title {
        margin-bottom: 60px;
    }

    .byc {
        width: 1100px;
    }

    .how-card {
        width: 138px;
        height: 340px;
    }

    .how-card-title {
        font-size: 24px;
        transform: translateY(150px);
    }

    #title-five {
        height: 600px;
    }

    .how-into-card {
        width: 309px;
        height: 360px;
        padding: 35px;
        margin-right: 30px;
    }

    .title-five-title {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .title-five-h5 {
        margin-bottom: 20px;
    }

    .how-card-small-title {
        margin-top: 20px;
    }

    #title-six {
        height: 735px;
        padding-bottom: 0px;
    }

    .title-six-box {
        width: 1100px;
    }

    .how-card-step-list {
        font-size: 18px;
        height: 40px;
        width: 183.3px;
    }

    .lwl-tabs {
        width: 1100px;
        height: 260px;
    }

    .lwl-tabs-left {
        width: 350px;
    }

    .lwl-tabs-nav {
        height: 86.6px;
    }

    .lwl-tabs-nav-active {
        width: 5.38px;
        height: 65px;
        margin-top: -32.5px;
    }

    .lwl-tabs-nav-animation {
        animation: expandAnimationSmall 1s ease forwards;
    }

    #tabs-content {
        height: 780px;
    }

    #tabs-content-one {
        height: 260px;
    }

    #tabs-content-two {
        height: 260px;
    }

    #tabs-content-three {
        height: 260px;
    }

    .tabs-content-left {
        padding: 26px 38px;
        width: 400px;
    }

    .tabs-content-right {
        padding: 26px 45px;
    }

    .tabs-select {
        height: 44.5px;
    }

    .tabs-select-two {
        height: 34.6px;
    }

    .tabs-content-left h4 {
        font-size: 18px;
        margin-bottom: 23px;
    }

    #title-seven {
        height: 570px;
    }

    .popular {
        width: 1100px;
        height: 380px;
    }

    .popular-item {
        width: 180px;
        height: 180px;
        padding: 20px 0px;
    }

    .title-seven-box {
        width: 1100px;
    }

    .popular-item p {
        font-size: 18px;
    }

    .title-eight-box {
        width: 1100px;
    }

    .see-card {
        width: 346px;
        height: 280px;
    }

    .see-card-content-title {
        font-size: 18px;
    }

    .see-card-content-content {
        font-size: 12px;
    }

    .brand-customers {
        width: 1100px;
        height: 502px;
        gap: 20px 20px;
    }

    .brand-customers-item {
        width: 157.5px;
        height: 84px;
    }

    #title-eight {
        height: 495px
    }

    #title-nine {
        height: 700px;
    }

    .going-to-sea-title-bottom {
        margin-bottom: 30px;
    }

    #title-ten {
        height: 600px;
    }

    .certificate {
        width: 1100px;
    }

    .how-card-title-other {
        font-size: 24px;
    }

    .certificate-small-title {
        font-size: 16px;
    }

    .swiper-img-box {
        height: 342.75px;
        width: 487.5px;
    }

    .bg-pic {
        height: 342.75px;
        width: 487.5px;
    }

    .swiper-item-title {
        margin-bottom: 50px;
    }

    .how-card-title-other-margin {
        margin-top: 0px;
    }

    .footer-box {
        width: 1100px;
    }

    .how-card-line {
        width: 920px;
        height: 2px;
        background: #BFBFBF;
        bottom: 0px;
        left: 50%;
        margin-left: -460px;
    }

    .title-six-title-mb {
        margin-bottom: 10px;
        margin-top: 0px;
        padding-top: 0px;
    }

    .back-top {
        width: 50px;
        height: 50px;
    }

    .back-top>svg {
        width: 18.75px;
        height: 16.88px;
    }

    .brand-customers-item>img {
        width: 120px;
    }

    .line-box {
        margin-bottom: 40px;
    }
}

@media (max-width:1120px) {
    :root {
        /* 默认字体大小 */
        --default-font-size: 16px;
        /* 小屏幕字体大小 */
        --small-screen-font-size: 12px;
        /*大标题默认大小*/
        --default-large-title: 60px;
        /* 一级标题大小 */
        --default-text-one: 46px;
        /* 二级标题大小 */
        --default-text-two: 34px;
        /* 三级标题大小 */
        --default-text-three: 24px;
        /* 四级标题大小 */
    }

    .video-background {
        height: 53.5vw;
    }

    .video-content-title {
        line-height: 120%;
    }

    .video-content-subtitle {
        font-size: 30px;
        font-weight: 400;
        line-height: 48px;
    }

    #video-bg {
        display: none;
    }

    #title-one {
        display: none;
    }

    #title-one-child {
        display: none;
    }

    .fixed-box {
        height: 58px;
    }

    .mob-menu {
        display: flex;
        width: 100%;
        background: #F2F2F2;
        padding-top: 40px;
        padding-bottom: 106px;
    }

    .mob-menu-title {
        font-size: 18px;
        font-weight: bold;
        line-height: 100%;
        letter-spacing: 0em;
        margin-bottom: 5px;
    }

    .mob-menu-item {
        width: 39.5vw;
        height: 60px;
        border-radius: 10px;
        background: #FFFFFF;
        font-size: 18px;
        font-weight: normal;
        text-align: center;
        letter-spacing: 0em;
        color: #C32775;
        line-height: 60px;
    }

    #title-two {
        display: none;
    }

    #title-two-mobile {
        display: block;
        background: #fff;
        /* padding: 40px 47px; */
        padding: 40px 0px;
    }

    .title-title-mobile {
        font-size: var(--default-text-three);
        font-weight: bold;
        line-height: 100%;
        text-align: center;
        letter-spacing: 0em;
    }

    .title-content-mobile {
        font-size: 14px;
        font-weight: normal;
        line-height: 150%;
        letter-spacing: 0em;
        color: #808080;
        margin-top: 20px;
    }

    .title-card-mobile {
        width: 38.1vw;
        height: 48px;
        border-radius: 10px;
        background: #F2F2F2;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    #title-three-mobile {
        display: block;
        padding: 40px 0px;
    }

    .title-big-card-mobile {
        width: 78.9vw;
        /* height: 84px; */
        border-radius: 10px;
        background: #F2F2F2;
        padding-right: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .title-mobile-dot {
        width: 4px;
        height: 4px;
        border-radius: 2px;
        background: #C32775;
    }

    .title-mobile-defult {
        font-size: 14px;
        font-weight: normal;
        line-height: 150%;
        letter-spacing: 0em;
    }

    #title-three {
        display: none;
    }

    #title-four-mobile {
        display: block;
        background: #F2F2F2;
        padding: 40px 10.7vw;
    }

    .title-four-card-mobile {
        border-radius: 10px;
        background: #FFFFFF;
        padding-top: 30px;
        padding-bottom: 40px;
        padding-left: 27px;
        padding-right: 27px;
    }

    .title-four-card-title-mobile {
        font-size: 18px;
        font-weight: bold;
        line-height: 120%;
        text-align: center;
        letter-spacing: 0em;
        color: #C32775;
    }

    .title-four-card-content-mobile {
        font-size: 14px;
        font-weight: normal;
        line-height: 150%;
        letter-spacing: 0em;
        margin-top: 20px;
    }

    #title-four {
        display: none;
    }

    #title-five-mobile {
        display: block;
        background: #FFFFFF;
        padding: 40px 10.7vw;
    }

    .title-five-mobile-byc-item {
        width: 100%;
        height: 48px;
        border-radius: 10px;
        font-size: 18px;
        font-weight: bold;
        line-height: 100%;
        text-align: center;
        letter-spacing: 0em;
        margin-bottom: 10px;
        padding: 15px 0px;
        overflow: hidden;
    }

    .title-five-mobile-byc-active {
        background: #F2F2F2;
        color: #C32775;
        height: 234px;
        align-items: flex-start !important;
        padding: 15px 0px;
    }

    .title-five-mobile-byc-title {
        font-weight: 700;
        font-size: 14px;
        color: #1A1A1A;
    }

    .title-five-mobile-byc-content {
        font-weight: 400;
        font-size: 14px;
        color: #1A1A1A;
    }

    .title-five-mobile-byc-item-content {
        opacity: 0;
    }

    #title-five {
        display: none;
    }

    #title-six-mobile {
        display: block;
        background: #F2F2F2;
        padding: 40px 10.7vw;
    }

    .how-into-card-mobile {
        width: 100%;
        border-radius: 10px;
        background: #FFFFFF;
        padding: 20px 11.1%;
        height: 270px;
    }

    .title-six-title-mobile {
        font-size: 18px;
        font-weight: bold;
        line-height: 120%;
        text-align: center;
        letter-spacing: 0em;
        color: #C32775;
        margin-bottom: 20px;
    }

    .how-card-small-title {
        font-size: 14px;
        font-weight: bold;
        line-height: 150%;
    }

    .how-card-content {
        font-size: 14px;
        font-weight: normal;
        line-height: 150%;
    }

    .card-dot {
        width: 4px;
        height: 4px;
        border-radius: 2px;
    }

    .how-card-dot {
        display: flex;
        justify-content: center;
        padding: 5px;
        margin-top: 4px;
        margin-right: 9px;
    }

    #title-six {
        display: none;
    }

    #title-seven-mobile {
        display: block;
        background: #fff;
        padding: 40px 10.7vw;
    }

    .title-small-title-mobile {
        font-size: 18px;
        font-weight: bold;
        line-height: 120%;
        text-align: center;
        letter-spacing: 0em;
    }

    .title-seven-mobile-timeline {
        font-size: 14px;
        font-weight: normal;
        line-height: 120%;
        text-align: left;
        letter-spacing: 0em;
        padding: 5px 0px;
    }

    .title-seven-mobile-timeline-dot {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #BFBFBF;
    }

    .title-seven-mobile-timeline-line {
        width: 1px;
        height: 136px;
        background: #BFBFBF;
    }

    .title-seven-tabs-title {
        width: 24.5vw;
        height: 48px;
        border-radius: 24px;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 0em;
        text-align: center;
        line-height: 48px;
        color: #1A1A1A;
    }

    .title-seven-tabs-active {
        background: #C32775;
        color: #fff;
    }

    .title-seven-tabs-content {
        width: 236vw;
        display: flex;
        justify-content: space-between;
        /* align-items: center; */
        align-items: flex-start;
    }

    .title-seven-tabs-content-content {
        font-size: 14px;
        font-weight: normal;
        line-height: 150%;
        letter-spacing: 0em;
        padding: 0px 7.5vw;
        margin-bottom: 20px;
    }

    .title-seven-tabs-content-item {
        height: 40px;
        border-radius: 30px;
        background: #F2F2F2;
        font-size: 14px;
        font-weight: normal;
        line-height: 100%;
        text-align: center;
        letter-spacing: 0em;
        color: #C32775;
        line-height: 40px;
        margin-bottom: 10px;
    }

    #title-seven {
        height: auto;
        background: #F2F2F2;
        padding: 40px 10.7vw;
    }

    #title-seven .going-to-sea-title {
        font-size: 24px;
        font-weight: bold;
        line-height: 120%;
        text-align: center;
        letter-spacing: 0em;
    }

    .popular {
        width: 100vw;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 0px 10px;
        gap: 0px 20px;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .popular-item {
        width: 32vw;
        height: 32vw;
        gap: 22px 0px;
        pointer-events: none;
    }

    .popular-item p {
        font-size: 14px;
        font-weight: normal;
        line-height: 120%;
        text-align: center;
        letter-spacing: 0em;
    }

    #title-eight {
        height: auto;
        width: 100vw;
        padding: 40px 10.7vw;
    }

    #title-eight .going-to-sea-title {
        font-size: 24px;
        font-weight: bold;
        line-height: 120%;
        text-align: center;
        letter-spacing: 0em;
    }

    .title-eight-box-title {
        margin-bottom: 30px;
    }

    .title-eight-box-title a {
        display: none;
    }

    .title-eight-box-item {
        display: block !important;
    }

    .see-card {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
        pointer-events: none;
    }

    .title-eight-see-more {
        display: block;
        font-size: 14px;
        font-weight: normal;
        line-height: 120%;
        letter-spacing: 0em;
        color: #808080;
        margin-top: 20px;
        text-align: center;
    }

    #title-nine {
        height: auto;
        width: 100vw;
        padding: 40px 0px;
    }

    #title-nine .going-to-sea-title {
        font-size: 24px;
        font-weight: bold;
        line-height: 120%;
        text-align: center;
        letter-spacing: 0em;
    }

    .brand-customers {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 0px;
        gap: 10px 10px;
        flex-wrap: wrap;
        align-content: flex-start;
        width: 100%;
        height: auto;
    }

    .brand-customers-item {
        width: 26.7vw;
        height: auto;
        padding: 2.7vw;
        pointer-events: none;
        border-radius: 10px;
        /* box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1); */
    }

    .brand-customers-item img {
        width: 100%;
    }

    .brand-customers-item:nth-child(n+22):nth-child(-n+30) {
        display: none;
    }

    #title-ten {
        display: none;
    }

    #title-ten-mobile {
        display: block;
        background: #F2F2F2;
        padding: 40px 10.7vw;
    }

    .mobile-swiper-img-box {
        width: 100%;
    }

    .mobile-swiper-content {
        width: 100%;
        height: 54.3vw;
        position: relative;
    }

    .mobile-bg-pic {
        position: absolute;
    }

    .mobile-swiper-title {
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        line-height: 150%;
        letter-spacing: 0em;
        margin-top: 10px;
    }

    .mobile-swiper-small-title {
        font-size: 14px;
        font-weight: normal;
        line-height: 150%;
        letter-spacing: 0em;
        color: #808080;
        margin-top: 10px;
        /* margin-bottom: 40px; */
    }

    .mobile-swiper-dot {
        width: 50px;
        height: 4px;
        border-radius: 10px;
        background: #D8D8D8;
        margin-right: 10px;
    }

    .mobile-swiper-dot:last-child {
        margin-right: 0px;
    }

    .mobile-swiper-dot-active {
        background: #808080;
    }

    .nav {
        height: 58px;
        width: 100%;
    }

    .secondary-menu-box {
        overflow-x: auto;
        width: 100%;
        height: 58px;
        top: 0px;
        left: 0px;
        background: #FFFFFF;
        box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    }

    .secondary-menu {
        width: max-content;
        height: 58px;
    }

    .secondary-menu-item {
        margin: 0px 13px;
        font-size: 14px;
        font-weight: normal;
        line-height: 100%;
        letter-spacing: 0em;
    }

    .secondary-menu-item-active {
        font-size: 18px;
        font-weight: bold;
        line-height: 100%;
        letter-spacing: 0em;
        border-bottom: 2px solid #C32775;
        padding-bottom: 7px;
    }

    .secondary-menu-box {
        display: block;
    }

    .mobile-swiper-item-content {
        width: 100%;
        text-align: center;
        padding: 0px 9px;
    }

    .on-footer{
        display: none !important;
    }
}

@media (max-width: 768px) {
    .video-content-title {
        font-size: 36px;
    }

    .video-content-subtitle {
        font-size: 18px;
        line-height: 30px;
    }
}