.video-section {
    -ms-flex-align: center;
    -ms-flex-pack: justify;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-left: 8px;
    padding-right: 8px;
    width: 100%
}

@media (min-width: 768px) {
    .video-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1024px) {
    .video-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1270px) {
    .video-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1860px) {
    .video-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 2037px) {
    .video-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

.video-section .video-item {
    position: relative;
    width: 32%
}

.video-section .video-item .video-content {
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

.video-section .video-item .video-text {
    background: -webkit-gradient(linear,left bottom,left top,from(transparent),color-stop(114.09%,#000),color-stop(114.09%,rgba(0,0,0,.8)));
    background: linear-gradient(0deg,transparent,#000 114.09%,rgba(0,0,0,.8) 0);
    left: 0;
    padding: 28px;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0
}

.video-section .video-item .video-text .video-title {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 32px
}

.video-section .video-item .video-text .video-desc {
    color: hsla(0,0%,100%,.8);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    margin-top: 8px
}

@media (min-width: 1860px) {
    .video-section {
        margin-top:120px
    }
}

@media (min-width: 1270px) {
    .video-section .video-item {
        min-height:390px
    }

    .video-section .video-item:last-child {
        margin-right: 0
    }
}

@media (min-width: 1024px) and (max-width:1269px) {
    .video-section .text-banner {
        max-width:50%
    }

    .video-section .video-item {
        min-height: 300px
    }

    .video-section .video-item:last-child {
        margin-right: 0
    }
}

@media (min-width: 768px) and (max-width:1023px) {
    .video-section {
        text-align:center
    }

    .video-section .video-item {
        min-height: 26vw;
        padding: 16px
    }

    .video-section .video-item .video-text .video-title {
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px
    }

    .video-section .video-item .video-text .video-desc {
        color: hsla(0,0%,100%,.8);
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
        margin-top: 6px
    }

    .video-section .video-item:last-child {
        margin-right: 0
    }
}

@media (max-width: 767px) {
    .video-section {
        -ms-flex-direction:column;
        flex-direction: column
    }

    .video-section .video-item {
        margin-top: 20px;
        min-height: 80vw;
        padding: 0;
        width: 100%
    }

    .video-section .video-item:last-child {
        margin-right: 0
    }
}

.home-page-container .fifth-section {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
    width: 100%
}

@media (min-width: 768px) {
    .home-page-container .fifth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1024px) {
    .home-page-container .fifth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1270px) {
    .home-page-container .fifth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1860px) {
    .home-page-container .fifth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 2037px) {
    .home-page-container .fifth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (max-width: 767px) {
    .home-page-container .fifth-section {
        contain-intrinsic-size:auto 1704px
    }
}

@media (min-width: 768px) {
    .home-page-container .fifth-section {
        contain-intrinsic-size:auto 991px
    }
}

@media (min-width: 1024px) {
    .home-page-container .fifth-section {
        contain-intrinsic-size:auto 941px
    }
}

@media (min-width: 1270px) {
    .home-page-container .fifth-section {
        contain-intrinsic-size:auto 1039px
    }
}

@media (min-width: 1860px) {
    .home-page-container .fifth-section {
        contain-intrinsic-size:auto 1331px
    }
}

.home-page-container .fifth-section .fifth-banner {
    -ms-flex-pack: justify;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between
}

.home-page-container .fifth-section .fifth-banner .text-banner .common-desc {
    margin-top: 20px
}

.home-page-container .fifth-section .fifth-banner .text-banner .common-button {
    cursor: pointer;
    display: inline-block;
    margin-top: 48px
}

.home-page-container .fifth-section .fifth-banner .logo-banner .logo-img {
    height: auto;
    width: 100%
}

.home-page-container .fifth-section .video-banner {
    -ms-flex-align: center;
    -ms-flex-pack: justify;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    margin-top: 80px
}

.home-page-container .fifth-section .video-banner .video-item {
    position: relative;
    width: 32%
}

.home-page-container .fifth-section .video-banner .video-item .video-content {
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

.home-page-container .fifth-section .video-banner .video-item .video-text {
    background: -webkit-gradient(linear,left bottom,left top,from(transparent),color-stop(114.09%,#000),color-stop(114.09%,rgba(0,0,0,.8)));
    background: linear-gradient(0deg,transparent,#000 114.09%,rgba(0,0,0,.8) 0);
    left: 0;
    padding: 28px;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0
}

.home-page-container .fifth-section .video-banner .video-item .video-text .video-title {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 32px
}

.home-page-container .fifth-section .video-banner .video-item .video-text .video-desc {
    color: hsla(0,0%,100%,.8);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    margin-top: 8px
}

@media (min-width: 1860px) {
    .home-page-container .fifth-section {
        margin-left:25%;
        padding-bottom: 220px;
        padding-top: 120px;
        width: 83.333333%
    }

    .home-page-container .fifth-section .fifth-banner .common-desc {
        font-size: 24px
    }

    .home-page-container .fifth-section .fifth-banner .logo-banner {
        width: 35%
    }

    .home-page-container .fifth-section .video-banner {
        margin-top: 120px
    }
}

@media (min-width: 1860px) and (min-width:768px) {
    .home-page-container .fifth-section {
        margin-left:8.33333333%
    }
}

@media (min-width: 1860px) and (min-width:1024px) {
    .home-page-container .fifth-section {
        margin-left:8.33333333%
    }
}

@media (min-width: 1860px) and (min-width:1270px) {
    .home-page-container .fifth-section {
        margin-left:8.33333333%
    }
}

@media (min-width: 1860px) and (min-width:1860px) {
    .home-page-container .fifth-section {
        margin-left:8.33333333%
    }
}

@media (min-width: 1860px) and (min-width:2037px) {
    .home-page-container .fifth-section {
        margin-left:8.33333333%
    }
}

@media (min-width: 1270px) {
    .home-page-container .fifth-section .fifth-banner {
        -ms-flex-align:end;
        align-items: end;
        margin-top: 98px
    }

    .home-page-container .fifth-section .fifth-banner .text-banner {
        max-width: 50%;
        padding-bottom: 50px
    }

    .home-page-container .fifth-section .fifth-banner .logo-banner {
        min-height: 145px
    }

    .home-page-container .fifth-section .video-banner .video-item {
        min-height: 390px
    }

    .home-page-container .fifth-section .video-banner .video-item:last-child {
        margin-right: 0
    }
}

@media (min-width: 1270px) and (max-width:1859px) {
    .home-page-container .fifth-section {
        padding-bottom:120px;
        padding-top: 80px
    }

    .home-page-container .fifth-section .fifth-banner .logo-banner {
        width: 40%
    }
}

@media (min-width: 1024px) and (max-width:1269px) {
    .home-page-container .fifth-section {
        padding-bottom:120px;
        padding-top: 80px
    }

    .home-page-container .fifth-section .text-banner {
        max-width: 50%
    }

    .home-page-container .fifth-section .fifth-banner {
        -ms-flex-align: end;
        align-items: end;
        margin-top: 98px
    }

    .home-page-container .fifth-section .fifth-banner .text-banner {
        padding-bottom: 50px
    }

    .home-page-container .fifth-section .fifth-banner .logo-banner {
        min-height: 112px;
        width: 40%
    }

    .home-page-container .fifth-section .video-banner .video-item {
        min-height: 300px
    }

    .home-page-container .fifth-section .video-banner .video-item:last-child {
        margin-right: 0
    }
}

@media (min-width: 768px) and (max-width:1023px) {
    .home-page-container .fifth-section {
        padding-bottom:120px;
        padding-top: 80px
    }

    .home-page-container .fifth-section .fifth-banner {
        -ms-flex-direction: column;
        flex-direction: column
    }

    .home-page-container .fifth-section .fifth-banner .text-banner {
        text-align: center
    }

    .home-page-container .fifth-section .fifth-banner .text-banner .common-desc {
        font-size: 18px;
        margin: 12px auto 0
    }

    .home-page-container .fifth-section .fifth-banner .text-banner .common-button {
        margin-top: 60px
    }

    .home-page-container .fifth-section .fifth-banner .logo-banner {
        margin: 120px auto 0;
        width: 471px
    }

    .home-page-container .fifth-section .fifth-banner .logo-banner .logo-img {
        min-height: 140px
    }

    .home-page-container .fifth-section .video-banner {
        text-align: center
    }

    .home-page-container .fifth-section .video-banner .video-item {
        min-height: 26vw;
        padding: 16px
    }

    .home-page-container .fifth-section .video-banner .video-item .video-text .video-title {
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px
    }

    .home-page-container .fifth-section .video-banner .video-item .video-text .video-desc {
        color: hsla(0,0%,100%,.8);
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
        margin-top: 6px
    }

    .home-page-container .fifth-section .video-banner .video-item:last-child {
        margin-right: 0
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:768px) {
    .home-page-container .fifth-section .fifth-banner .text-banner .common-desc {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1024px) {
    .home-page-container .fifth-section .fifth-banner .text-banner .common-desc {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1270px) {
    .home-page-container .fifth-section .fifth-banner .text-banner .common-desc {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1860px) {
    .home-page-container .fifth-section .fifth-banner .text-banner .common-desc {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:2037px) {
    .home-page-container .fifth-section .fifth-banner .text-banner .common-desc {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (max-width: 767px) {
    .home-page-container .fifth-section {
        padding-bottom:80px;
        padding-top: 80px
    }

    .home-page-container .fifth-section .fifth-banner {
        -ms-flex-direction: column;
        flex-direction: column
    }

    .home-page-container .fifth-section .fifth-banner .text-banner {
        text-align: center
    }

    .home-page-container .fifth-section .fifth-banner .logo-banner {
        margin: 100px auto 0;
        max-width: 343px;
        min-height: 100px;
        width: 100%
    }

    .home-page-container .fifth-section .fifth-banner .common-desc {
        font-size: 16px;
        line-height: 158%
    }

    .home-page-container .fifth-section .video-banner {
        -ms-flex-direction: column;
        flex-direction: column;
        margin-top: 40px
    }

    .home-page-container .fifth-section .video-banner .video-item {
        margin-top: 20px;
        min-height: 80vw;
        padding: 0;
        width: 100%
    }

    .home-page-container .fifth-section .video-banner .video-item:last-child {
        margin-right: 0
    }
}

:root {
    --okd-color-gray-050: #f9f9f9;
    --okd-color-gray-100: #ebebeb;
    --okd-color-gray-200: #dbdbdb;
    --okd-color-gray-300: #bdbdbd;
    --okd-color-gray-400: #929292;
    --okd-color-gray-500: #6e6e6e;
    --okd-color-gray-600: #545454;
    --okd-color-gray-700: #3d3d3d;
    --okd-color-gray-800: #1a1a1a;
    --okd-color-gray-900: #000;
    --okd-color-blue-050: #f5f9ff;
    --okd-color-blue-100: #d1e3ff;
    --okd-color-blue-200: #afcfff;
    --okd-color-blue-300: #8dbbff;
    --okd-color-blue-400: #6ba6ff;
    --okd-color-blue-500: #4992ff;
    --okd-color-blue-600: #277dff;
    --okd-color-blue-700: #0569ff;
    --okd-color-blue-800: #005eea;
    --okd-color-blue-900: #0051ca;
    --okd-color-green-050: #f2fff7;
    --okd-color-green-100: #d2f4de;
    --okd-color-green-200: #a5e9be;
    --okd-color-green-300: #78de9d;
    --okd-color-green-400: #4bd37d;
    --okd-color-green-500: #31bd65;
    --okd-color-green-600: #18a04a;
    --okd-color-green-700: #127837;
    --okd-color-green-800: #0c5025;
    --okd-color-green-900: #0c5025;
    --okd-color-red-050: #fff8f9;
    --okd-color-red-100: #fcdce5;
    --okd-color-red-200: #f9b9ca;
    --okd-color-red-300: #f796b0;
    --okd-color-red-400: #f07596;
    --okd-color-red-500: #f1507b;
    --okd-color-red-600: #c14062;
    --okd-color-red-700: #91304a;
    --okd-color-red-800: #602031;
    --okd-color-red-900: #301019;
    --okd-color-orange-050: #fef9f6;
    --okd-color-orange-100: #fce3d4;
    --okd-color-orange-200: #fbceb4;
    --okd-color-orange-300: #f9b994;
    --okd-color-orange-400: #f7a474;
    --okd-color-orange-500: #f58f54;
    --okd-color-orange-600: #f6813d;
    --okd-color-orange-700: #f16514;
    --okd-color-orange-800: #e96010;
    --okd-color-orange-900: #bf4803;
    --okd-color-yellow-050: #fffcf5;
    --okd-color-yellow-100: #fff2d1;
    --okd-color-yellow-200: #ffe9af;
    --okd-color-yellow-300: #ffdf8d;
    --okd-color-yellow-400: #ffd66b;
    --okd-color-yellow-500: #ffcc49;
    --okd-color-yellow-600: #ffc327;
    --okd-color-yellow-700: #ffb905;
    --okd-color-yellow-800: #eaa900;
    --okd-color-yellow-900: #d29801;
    --okd-color-text-white: #fff;
    --okd-color-text-black: #1f2933;
    --okd-color-background-1: #fff;
    --okd-color-background-2: #f7f7f7;
    --okd-color-transparent: transparent;
    --okd-color-white: #fff;
    --okd-color-black: #000;
    --okd-color-line-muted: #ebebeb;
    --okd-color-line-secondary: #dbdbdb;
    --okd-color-line-amplifed: #bdbdbd;
    --okd-color-text-lighter: #bdbdbd;
    --okd-color-text-light: #929292;
    --okd-color-text-secondary: #3d3d3d;
    --okd-color-text-amplifed: #000;
    --okd-color-background-3: #f2f2f2;
    --okd-color-fq-blue-lv1: #0569ff;
    --okd-color-fq-green-lv1: #19cc5b;
    --okd-color-fq-red-lv1: #f1507b;
    --okd-color-fq-orange-lv1: #f16514;
    --okd-color-fq-blue-lv2: #0569ff;
    --okd-color-background-hover: #ebebeb;
    --okd-color-prefer-red-chart: #f1507b;
    --okd-color-prefer-red-bg: #eb4b6d;
    --okd-color-prefer-green-chart: #19cc5b;
    --okd-color-prefer-green-bg: #31bd65;
    --okd-color-prefer-red-text: #eb4b6d;
    --okd-color-prefer-green-text: #31bd65;
    --okd-color-branded-primary: #bcff2f;
    --okd-color-fq-critical: #eb4b6d;
    --okd-color-fq-warning: #f16514;
    --okd-color-fq-positive: #31bd65;
    --okd-color-fq-neutral: #000;
    --okd-color-fq-accent: #0569ff;
    --okd-color-prefer-neutral-text: #929292;
    --okd-color-prefer-neutral-bg: #929292;
    --okd-color-background-base-primary: #fff;
    --okd-color-background-base-secondary: #fafafa;
    --okd-color-background-surface-primary: #f3f3f3;
    --okd-color-background-surface-secondary: #f6f6f6;
    --okd-color-background-surface-pressed: #d9d9d9;
    --okd-color-background-surface-disable: #fafafa;
    --okd-color-background-scrim: rgba(0,0,0,.43);
    --okd-color-container-primary: #fff;
    --okd-color-container-secondary: #fafafa;
    --okd-color-container-tertiary: #fff;
    --okd-color-container-contrast: #414141;
    --okd-color-container-inverse: #0d0d0d;
    --okd-color-content-primary: #000;
    --okd-color-content-secondary: #383838;
    --okd-color-content-tertiary: #5b5b5b;
    --okd-color-content-contrast: #909090;
    --okd-color-content-disabled: #b3b3b3;
    --okd-color-content-inverse: #fff;
    --okd-color-border-primary: #e6e6e6;
    --okd-color-border-secondary: #b3b3b3;
    --okd-color-border-contrast: #fafafa;
    --okd-color-border-selected: #000;
    --okd-color-semantic-neutral: #000;
    --okd-color-semantic-notice: #ffb117;
    --okd-color-semantic-positive: #31bd65;
    --okd-color-semantic-negative: #eb4b6d;
    --okd-color-semantic-informative: #8a91ff;
    --okd-color-semantic-highlight: #bcff2f;
    --okd-color-dvp-neutral: rgba(0,0,0,.57);
    --okd-color-dvp-profit: #00bc4b;
    --okd-color-dvp-loss: #f5384f;
    --okd-color-categorical-01: #8a91ff;
    --okd-color-categorical-02: #ffb117;
    --okd-color-categorical-03: #bcff2f;
    --okd-color-categorical-04: #12e366;
    --okd-color-categorical-05: #ff7888;
    --okd-color-common-transparent: hsla(0,0%,100%,0);
    --okd-color-transparent-black: transparent;
    --okd-color-transparent-white: transparent;
    --okd-color-alert-info: #f7f7f7;
    --okd-color-alert-success: #eaf8f0;
    --okd-color-alert-warning: #fef9f6;
    --okd-color-alert-error: #fdedf0;
    --okd-color-common-background-2: #f3f3f3;
    --okd-color-data-visualization-category-01: #8a91ff;
    --okd-color-data-visualization-category-02: #ffb117;
    --okd-color-data-visualization-category-03: #bcff2f;
    --okd-color-data-visualization-category-04: #12e366;
    --okd-color-data-visualization-category-05: #ff7888;
    --okd-color-preference-loss: #f5384f;
    --okd-color-preference-profit: #00bc4b;
    --okd-color-preference-neutral: rgba(0,0,0,.57);
    --okd-color-border-focus: #000;
    --okd-color-background-base-primary_alternative: #fff;
    --okd-color-link-content: #4c2fff;
    --okd-color-background-surface-contrast: #fff;
    --okd-color-background-surface-brand: #000;
    --okd-color-border-tertiary: #f3f3f3;
    --okd-color-content-brand: #000;
    --okd-font-size-base: 16px;
    --okd-font-size-md: 14px;
    --okd-font-size-xs: 12px;
    --okd-line-height-base: 20px;
    --okd-line-height-md: 20px;
    --okd-line-height-xs: 16px;
    --okd-shadow-none: 0 0 0 0 transparent;
    --okd-shadow-xs: 0 0 0 1px #0000000d;
    --okd-shadow-sm: 0 1px 2px 0 #0000000d;
    --okd-shadow-default: 0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;
    --okd-shadow-md: 0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;
    --okd-shadow-lg: 0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;
    --okd-shadow-xl: 0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;
    --okd-shadow-2xl: 0 25px 50px -12px #00000040;
    --okd-border-radius-none: 0;
    --okd-border-radius-sm: 2px;
    --okd-border-radius-md: 4px;
    --okd-border-radius-lg: 6px;
    --okd-border-radius-xl: 8px;
    --okd-border-radius-xxl: 10px;
    --okd-border-radius-xxxl: 12px;
    --okd-font-family: HarmonyOS Sans,SF Pro Text,SF Pro Icons,Arial,Helvetica Neue,Helvetica,sans-serif;
    --okd-text-display-lg-font-size: 56px;
    --okd-text-display-lg-font-weight: 500;
    --okd-text-display-lg-line-height: 1.32;
    --okd-text-display-md-font-size: 40px;
    --okd-text-display-md-font-weight: 500;
    --okd-text-display-md-line-height: 52px;
    --okd-text-display-sm-font-size: 40px;
    --okd-text-display-sm-font-weight: 500;
    --okd-text-display-sm-line-height: 52px;
    --okd-text-heading-lg-font-size: 30px;
    --okd-text-heading-lg-font-weight: 500;
    --okd-text-heading-lg-line-height: 40px;
    --okd-text-heading-md-font-size: 24px;
    --okd-text-heading-md-font-weight: 500;
    --okd-text-heading-md-line-height: 30px;
    --okd-text-heading-sm-font-size: 18px;
    --okd-text-heading-sm-font-weight: 500;
    --okd-text-heading-sm-line-height: 24px;
    --okd-text-heading-xl-font-size: 36px;
    --okd-text-heading-xl-line-height: 1.32;
    --okd-text-heading-xl-font-weight: 600;
    --okd-text-heading-xxl-font-size: 40px;
    --okd-text-heading-xxl-line-height: 1.32;
    --okd-text-heading-xxl-font-weight: 600;
    --okd-text-heading-overline-font-size: 12px;
    --okd-text-heading-overline-line-height: 15px;
    --okd-text-heading-overline-font-weight: 500;
    --okd-text-body-sm-regular-font-size: 14px;
    --okd-text-body-sm-regular-font-weight: 400;
    --okd-text-body-sm-regular-line-height: 21px;
    --okd-text-body-sm-bold-font-size: 14px;
    --okd-text-body-sm-bold-font-weight: 500;
    --okd-text-body-sm-bold-line-height: 21px;
    --okd-text-body-md-regular-font-size: 16px;
    --okd-text-body-md-regular-font-weight: 400;
    --okd-text-body-md-regular-line-height: 24px;
    --okd-text-body-md-bold-font-size: 16px;
    --okd-text-body-md-bold-font-weight: 500;
    --okd-text-body-md-bold-line-height: 24px;
    --okd-text-body-xs-regular-font-size: 12px;
    --okd-text-body-xs-regular-font-weight: 400;
    --okd-text-body-xs-regular-line-height: 18px;
    --okd-text-body-xs-bold-font-size: 12px;
    --okd-text-body-xs-bold-font-weight: 500;
    --okd-text-body-xs-bold-line-height: 18px;
    --okd-font-weight-400: 400;
    --okd-font-weight-500: 500;
    --okd-font-weight-600: 600;
    --okd-font-weight-700: 700;
    --okd-font-weight-800: 800;
    --okd-font-weight-900: 900;
    --okd-font-weight-regular: 400;
    --okd-font-weight-medium: 500;
    --okd-font-weight-bold: 700
}

.okui-picture {
    display: inline-block
}

.okui-picture-font {
    font-size: 0;
    line-height: 1
}

.okui-picture-cover {
    -o-object-fit: cover;
    object-fit: cover
}

.okui-picture-contain {
    -o-object-fit: contain;
    object-fit: contain
}

.video-animation-box {
    position: relative
}

.animation-pic {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.register-section .home-register-phone {
    border: 1.5px solid #fff;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: 500;
    height: 100%;
    line-height: 16px;
    padding: 14px 20px;
    width: 100%
}

.first-section {
    position: relative
}

.first-section .partner-bar {
    -ms-flex-pack: justify;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    display: none;
    justify-content: space-between
}

.first-section .partner-bar .partner-item img {
    width: 100%
}

.first-section .guide-banner .common-title {
    text-align: left
}

.first-section .guide-banner .title-desc {
    color: #6e6e6e;
    font-size: 24px;
    font-weight: 400;
    line-height: 24px;
    margin-top: 20px;
    text-align: left
}

@media (min-width: 768px) and (max-width:1023px) {
    .first-section .guide-banner .title-desc {
        font-size:18px
    }
}

@media (max-width: 767px) {
    .first-section .guide-banner .title-desc {
        font-size:18px
    }
}

.first-section .guide-banner .deposit-guide .deposit-guide-button,.first-section .guide-banner .kyc-guide .common-button,.first-section .guide-banner .trade-guide .common-button {
    margin-top: 40px
}

.first-section .guide-banner .deposit-guide .deposit-guide-button .common-button {
    margin-bottom: 20px
}

.first-section .guide-banner .deposit-guide .deposit-guide-button .common-button:first-child {
    margin-right: 30px
}

.first-section .first-container {
    position: relative
}

.first-section .ticker-price-tip {
    color: #909090;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px
}

@media (max-width: 767px) {
    .first-section .ticker-price-tip {
        margin:8px 29px 0
    }
}

@media (min-width: 768px) {
    .first-section .ticker-price-tip {
        margin:8px 21px 0
    }
}

@media (min-width: 1024px) {
    .first-section .ticker-price-tip {
        margin:8px calc(513px - 50vw) 0
    }
}

@media (min-width: 1270px) {
    .first-section .ticker-price-tip {
        margin:8px calc(657px - 50vw) 0
    }
}

@media (min-width: 1860px) {
    .first-section .ticker-price-tip {
        margin:8px calc(897px - 50vw) 0
    }

    .first-section .banner-container {
        margin-left: 25%;
        width: 83.33333333%
    }

    .first-section .banner-container .left-banner {
        width: 60%
    }

    .first-section .banner-container .left-banner .common-title {
        font-size: 72px;
        font-weight: 700;
        line-height: 112%
    }

    .first-section .banner-container .left-banner .register-box {
        margin-top: 60px
    }

    .first-section .banner-container .left-banner .partner-bar {
        width: 85%
    }

    .first-section .banner-container .left-banner .partner-bar .partner-item:first-child {
        width: 136px
    }

    .first-section .banner-container .left-banner .partner-bar .partner-item:nth-child(2) {
        width: 200px
    }

    .first-section .banner-container .left-banner .partner-bar .partner-item:nth-child(3) {
        width: 88px
    }

    .first-section .banner-container .right-banner {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-left: 16%;
        padding-left: 8px;
        padding-right: 8px;
        width: 75%
    }
}

@media (min-width: 1860px) and (min-width:768px) {
    .first-section .banner-container {
        margin-left:8.33333333%
    }
}

@media (min-width: 1860px) and (min-width:1024px) {
    .first-section .banner-container {
        margin-left:8.33333333%
    }
}

@media (min-width: 1860px) and (min-width:1270px) {
    .first-section .banner-container {
        margin-left:8.33333333%
    }
}

@media (min-width: 1860px) and (min-width:1860px) {
    .first-section .banner-container {
        margin-left:8.33333333%
    }
}

@media (min-width: 1860px) and (min-width:2037px) {
    .first-section .banner-container {
        margin-left:8.33333333%
    }
}

@media (min-width: 1860px) and (min-width:768px) {
    .first-section .banner-container .right-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 25%
    }
}

@media (min-width: 1860px) and (min-width:1024px) {
    .first-section .banner-container .right-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 25%
    }
}

@media (min-width: 1860px) and (min-width:1270px) {
    .first-section .banner-container .right-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 25%
    }
}

@media (min-width: 1860px) and (min-width:1860px) {
    .first-section .banner-container .right-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 25%
    }
}

@media (min-width: 1860px) and (min-width:2037px) {
    .first-section .banner-container .right-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 25%
    }
}

@media (min-width: 1270px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 8px;
        padding-right: 8px;
        width: 100%
    }

    .first-section .hk-first-content .banner-content {
        min-height: auto
    }

    .first-section .hk-first-content .banner-container .left-banner .partner-bar {
        margin-top: 40px
    }

    .first-section .banner-container {
        display: -ms-flexbox;
        display: flex
    }

    .first-section .banner-content {
        min-height: 300px
    }

    .first-section .left-banner .common-title {
        font-weight: 700;
        line-height: 132%
    }

    .first-section .left-banner .register-box {
        display: -ms-flexbox;
        display: flex;
        margin-top: 40px
    }

    .first-section .left-banner .partner-bar {
        display: -ms-flexbox;
        display: flex;
        margin-top: 50px
    }

    .first-section {
        margin-bottom: 120px;
        padding-top: 120px
    }

    .first-section .banner-container {
        -ms-flex-align: center;
        align-items: center
    }

    .first-section .left-banner .register-box {
        width: 100%
    }

    .first-section .left-banner .register-box .register-section {
        width: 58%
    }

    .first-section .left-banner .register-box .register-section .home-register-phone {
        width: 100%
    }

    .first-section .left-banner .register-box .link-to-register {
        margin-left: 24px;
        max-width: 37%
    }

    .first-section .left-banner .partner-bar {
        margin-top: 100px
    }

    .first-section .right-banner {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-left: 50%;
        padding-left: 8px;
        padding-right: 0;
        width: 75%
    }

    .first-section .right-banner .image-bar {
        min-height: 585px
    }

    .first-section .right-banner .image-bar .first-img {
        width: 100%
    }

    .first-section .partner-bar {
        min-height: 68px;
        width: 100%
    }

    .first-section .partner-bar .partner-item:first-child {
        width: 120px
    }

    .first-section .partner-bar .partner-item:nth-child(2) {
        width: 164px
    }

    .first-section .partner-bar .partner-item:nth-child(3) {
        width: 66px
    }
}

@media (min-width: 1270px) and (min-width:768px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1270px) and (min-width:1024px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1270px) and (min-width:1270px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1270px) and (min-width:1860px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1270px) and (min-width:2037px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1270px) and (max-width:1859px) {
    .first-section .left-banner {
        margin-left:25%;
        width: 40.66666667%
    }

    .first-section .left-banner.guide-banner {
        width: 53.333%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:768px) {
    .first-section .left-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:1024px) {
    .first-section .left-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:1270px) {
    .first-section .left-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:1860px) {
    .first-section .left-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:2037px) {
    .first-section .left-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 1270px) and (max-width:1859px) {
    .first-section .left-banner .common-title {
        font-size:55px;
        line-height: 64px
    }

    .first-section .left-banner .register-box {
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

@media (min-width: 1270px) and (min-width:768px) {
    .first-section .right-banner {
        margin-left:16.66666667%
    }
}

@media (min-width: 1270px) and (min-width:1024px) {
    .first-section .right-banner {
        margin-left:16.66666667%
    }
}

@media (min-width: 1270px) and (min-width:1270px) {
    .first-section .right-banner {
        margin-left:16.66666667%
    }
}

@media (min-width: 1270px) and (min-width:1860px) {
    .first-section .right-banner {
        margin-left:16.66666667%
    }
}

@media (min-width: 1270px) and (min-width:2037px) {
    .first-section .right-banner {
        margin-left:16.66666667%
    }
}

@media (min-width: 1270px) and (min-width:768px) {
    .first-section .right-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 25%
    }
}

@media (min-width: 1270px) and (min-width:1024px) {
    .first-section .right-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 25%
    }
}

@media (min-width: 1270px) and (min-width:1270px) {
    .first-section .right-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 25%
    }
}

@media (min-width: 1270px) and (min-width:1860px) {
    .first-section .right-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 25%
    }
}

@media (min-width: 1270px) and (min-width:2037px) {
    .first-section .right-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 25%
    }
}

@media (min-width: 1024px) and (max-width:1269px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 8px;
        padding-right: 8px;
        width: 100%
    }

    .first-section .hk-first-content .banner-content {
        min-height: auto
    }

    .first-section .hk-first-content .banner-container .left-banner .partner-bar {
        margin-top: 40px
    }

    .first-section .banner-container {
        -ms-flex-align: center;
        align-items: center;
        display: -ms-flexbox;
        display: flex
    }

    .first-section .banner-content {
        min-height: 300px
    }

    .first-section .left-banner .common-title {
        font-weight: 700;
        line-height: 132%
    }

    .first-section .left-banner .register-box {
        display: -ms-flexbox;
        display: flex;
        margin-top: 40px
    }

    .first-section .left-banner .partner-bar {
        display: -ms-flexbox;
        display: flex;
        margin-top: 50px
    }

    .first-section .right-banner .image-bar .first-img {
        width: 100%
    }

    .first-section {
        padding-top: 120px
    }

    .first-section .banner-container .left-banner {
        margin-left: 25%;
        width: 52.5%
    }

    .first-section .banner-container .left-banner .common-title {
        font-size: 46px;
        line-height: 64px
    }

    .first-section .banner-container .left-banner .register-box {
        -ms-flex-direction: column;
        flex-direction: column
    }

    .first-section .banner-container .left-banner .register-box .link-to-register {
        margin-top: 40px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }

    .first-section .banner-container .left-banner .partner-bar {
        margin-top: 80px
    }

    .first-section .banner-container .right-banner {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-left: 25%;
        padding-left: 8px;
        padding-right: 8px;
        width: 100%
    }

    .first-section .banner-container .right-banner .image-bar {
        min-height: 580px
    }

    .first-section .banner-container .partner-bar {
        min-height: 77px;
        width: 90%
    }

    .first-section .banner-container .partner-bar .partner-item:first-child,.first-section .banner-container .partner-bar .partner-item:nth-child(2) {
        width: 30%
    }

    .first-section .banner-container .partner-bar .partner-item:nth-child(3) {
        width: 15%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:768px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1024px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1270px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1860px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:2037px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:768px) {
    .first-section .banner-container .left-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1024px) {
    .first-section .banner-container .left-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1270px) {
    .first-section .banner-container .left-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1860px) {
    .first-section .banner-container .left-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:2037px) {
    .first-section .banner-container .left-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:768px) {
    .first-section .banner-container .left-banner .register-box .home-register-phone {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 66.66666667%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1024px) {
    .first-section .banner-container .left-banner .register-box .home-register-phone {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 66.66666667%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1270px) {
    .first-section .banner-container .left-banner .register-box .home-register-phone {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 66.66666667%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1860px) {
    .first-section .banner-container .left-banner .register-box .home-register-phone {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 66.66666667%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:2037px) {
    .first-section .banner-container .left-banner .register-box .home-register-phone {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 66.66666667%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:768px) {
    .first-section .banner-container .right-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 33.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1024px) {
    .first-section .banner-container .right-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 33.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1270px) {
    .first-section .banner-container .right-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 33.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1860px) {
    .first-section .banner-container .right-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 33.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:2037px) {
    .first-section .banner-container .right-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 33.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:768px) {
    .first-section .banner-container .right-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1024px) {
    .first-section .banner-container .right-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1270px) {
    .first-section .banner-container .right-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1860px) {
    .first-section .banner-container .right-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:2037px) {
    .first-section .banner-container .right-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 8px;
        padding-right: 8px;
        width: 100%
    }

    .first-section .hk-first-content .banner-content {
        min-height: auto
    }

    .first-section .hk-first-content .banner-container .left-banner .partner-bar {
        margin-top: 40px
    }

    .first-section .banner-container {
        -ms-flex-align: center;
        align-items: center;
        display: -ms-flexbox;
        display: flex
    }

    .first-section .banner-content {
        min-height: 300px
    }

    .first-section .left-banner .common-title {
        font-weight: 700;
        line-height: 132%
    }

    .first-section .left-banner .register-box {
        display: -ms-flexbox;
        display: flex;
        margin-top: 40px
    }

    .first-section .left-banner .partner-bar {
        display: -ms-flexbox;
        display: flex;
        margin-top: 50px
    }

    .first-section .right-banner .image-bar .first-img {
        width: 100%
    }

    .first-section {
        padding-top: 80px
    }

    .first-section .banner-container .left-banner {
        margin-left: 25%;
        margin-top: 30px
    }

    .first-section .banner-container .left-banner.guide-banner .deposit-guide .deposit-guide-button .common-button {
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        padding: 12px 16px
    }

    .first-section .banner-container .left-banner.guide-banner .deposit-guide .deposit-guide-button .common-button:first-child {
        margin-right: 20px
    }

    .first-section .banner-container .left-banner .common-title {
        font-size: 40px
    }

    .first-section .banner-container .left-banner .register-box .register-section .home-register-phone {
        font-size: 14px;
        font-weight: 500;
        padding: 14px 20px
    }

    .first-section .banner-container .left-banner .common-button {
        font-size: 16px;
        font-weight: 500;
        min-width: 150px;
        padding: 18px 16px
    }

    .first-section .banner-container .left-banner .register-box {
        -ms-flex-direction: column;
        flex-direction: column
    }

    .first-section .banner-container .left-banner .register-box .register-section {
        width: 75%
    }

    .first-section .banner-container .left-banner .register-box .link-to-register {
        margin-top: 40px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }

    .first-section .banner-container .left-banner .partner-bar {
        display: none
    }

    .first-section .banner-container .right-banner {
        margin-left: 25%
    }

    .first-section .banner-container .right-banner .image-bar {
        min-height: 415px
    }

    .first-section .banner-container .right-banner .image-bar .first-img {
        width: 200px
    }

    .first-section .partner-bar {
        display: -ms-flexbox;
        display: flex;
        margin-top: 70px;
        min-height: 86px
    }

    .first-section .partner-bar .partner-item:first-child {
        width: 140px
    }

    .first-section .partner-bar .partner-item:nth-child(2) {
        width: 170px
    }

    .first-section .partner-bar .partner-item:nth-child(3) {
        width: 84px
    }

    .first-section .mobile-footer-bar {
        margin: auto
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:768px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1024px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1270px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1860px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:2037px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:768px) {
    .first-section .banner-container .left-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1024px) {
    .first-section .banner-container .left-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1270px) {
    .first-section .banner-container .left-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1860px) {
    .first-section .banner-container .left-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:2037px) {
    .first-section .banner-container .left-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:768px) {
    .first-section .banner-container .left-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 50%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1024px) {
    .first-section .banner-container .left-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 50%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1270px) {
    .first-section .banner-container .left-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 50%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1860px) {
    .first-section .banner-container .left-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 50%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:2037px) {
    .first-section .banner-container .left-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 50%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:768px) {
    .first-section .banner-container .right-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1024px) {
    .first-section .banner-container .right-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1270px) {
    .first-section .banner-container .right-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1860px) {
    .first-section .banner-container .right-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:2037px) {
    .first-section .banner-container .right-banner {
        margin-left:8.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:768px) {
    .first-section .mobile-footer-bar {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1024px) {
    .first-section .mobile-footer-bar {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1270px) {
    .first-section .mobile-footer-bar {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1860px) {
    .first-section .mobile-footer-bar {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:2037px) {
    .first-section .mobile-footer-bar {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (max-width: 767px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 8px;
        padding-right: 8px;
        width: 100%
    }

    .first-section .hk-first-content .banner-content {
        min-height: auto
    }

    .first-section .hk-first-content .banner-container .left-banner .partner-bar {
        margin-top: 40px
    }

    .first-section .banner-container {
        -ms-flex-align: center;
        align-items: center;
        display: -ms-flexbox;
        display: flex
    }

    .first-section .banner-content {
        min-height: 300px
    }

    .first-section .left-banner .common-title {
        font-weight: 700;
        line-height: 132%
    }

    .first-section .left-banner .register-box {
        display: -ms-flexbox;
        display: flex;
        margin-top: 40px
    }

    .first-section .left-banner .partner-bar {
        display: -ms-flexbox;
        display: flex;
        margin-top: 50px
    }

    .first-section .right-banner .image-bar .first-img {
        width: 100%
    }

    .first-section {
        padding-top: 80px
    }

    .first-section .banner-container {
        -ms-flex-direction: column;
        flex-direction: column
    }

    .first-section .banner-content {
        min-height: 217px
    }

    .first-section .left-banner {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 8px;
        padding-right: 8px;
        width: 100%
    }

    .first-section .left-banner.guide-banner .title-desc {
        margin-top: 16px;
        text-align: center
    }

    .first-section .left-banner.guide-banner .kyc-guide .common-button,.first-section .left-banner.guide-banner .trade-guide .common-button {
        display: block;
        margin: 32px auto 0
    }

    .first-section .left-banner.guide-banner .deposit-guide .deposit-guide-button {
        -ms-flex-align: center;
        align-items: center;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        margin: 40px auto 0;
        max-width: 360px;
        text-align: center
    }

    .first-section .left-banner.guide-banner .deposit-guide .deposit-guide-button .common-button {
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        padding: 12px 18px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }

    .first-section .left-banner.guide-banner .deposit-guide .deposit-guide-button .common-button:first-child {
        margin-right: 0
    }

    .first-section .left-banner.guide-banner .deposit-guide .deposit-guide-button .common-button:last-child {
        margin-bottom: 0
    }

    .first-section .left-banner .common-title {
        font-size: 32px;
        margin: auto;
        max-width: 500px;
        text-align: center
    }

    .first-section .left-banner .register-box {
        -ms-flex-direction: column;
        flex-direction: column
    }

    .first-section .left-banner .register-box .register-section {
        margin: 0 auto;
        max-width: 360px;
        width: 100%
    }

    .first-section .left-banner .register-box .link-to-register {
        display: block;
        margin: 40px auto 0
    }

    .first-section .left-banner .register-box .register-section .home-register-phone {
        font-size: 14px;
        font-weight: 500;
        padding: 14px 20px
    }

    .first-section .left-banner .common-button {
        font-size: 16px;
        font-weight: 500;
        min-width: 150px;
        padding: 18px 16px
    }

    .first-section .left-banner .partner-bar {
        display: none
    }

    .first-section .right-banner {
        margin-top: 40px
    }

    .first-section .right-banner.deposit-banner {
        margin-top: 20px
    }

    .first-section .right-banner .image-bar {
        min-height: 511px;
        text-align: center
    }

    .first-section .right-banner .image-bar .first-img {
        width: 246px
    }

    .first-section .partner-bar {
        -ms-flex-align: center;
        -ms-flex-pack: distribute;
        align-items: center;
        display: -ms-flexbox;
        display: flex;
        justify-content: space-around;
        margin-top: 40px;
        min-height: 98px
    }

    .first-section .partner-bar .partner-item:first-child {
        width: 25%
    }

    .first-section .partner-bar .partner-item:nth-child(2) {
        width: 30%
    }

    .first-section .partner-bar .partner-item:nth-child(3) {
        width: 15%
    }
}

@media (max-width: 767px) and (min-width:768px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (max-width: 767px) and (min-width:1024px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (max-width: 767px) and (min-width:1270px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (max-width: 767px) and (min-width:1860px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (max-width: 767px) and (min-width:2037px) {
    .first-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (max-width: 767px) and (min-width:768px) {
    .first-section .left-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (max-width: 767px) and (min-width:1024px) {
    .first-section .left-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (max-width: 767px) and (min-width:1270px) {
    .first-section .left-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (max-width: 767px) and (min-width:1860px) {
    .first-section .left-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (max-width: 767px) and (min-width:2037px) {
    .first-section .left-banner {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

.home-page-container .fourth-section {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
    width: 100%
}

@media (min-width: 768px) {
    .home-page-container .fourth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1024px) {
    .home-page-container .fourth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1270px) {
    .home-page-container .fourth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1860px) {
    .home-page-container .fourth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 2037px) {
    .home-page-container .fourth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (max-width: 767px) {
    .home-page-container .fourth-section {
        contain-intrinsic-size:auto 989px
    }
}

@media (min-width: 768px) {
    .home-page-container .fourth-section {
        contain-intrinsic-size:auto 1005px
    }
}

@media (min-width: 1024px) {
    .home-page-container .fourth-section {
        contain-intrinsic-size:auto 776px
    }
}

@media (min-width: 1270px) {
    .home-page-container .fourth-section {
        contain-intrinsic-size:auto 843px
    }
}

@media (min-width: 1860px) {
    .home-page-container .fourth-section {
        contain-intrinsic-size:auto 932px
    }
}

.home-page-container .fourth-section .fourth-container {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex
}

.home-page-container .fourth-section .fourth-container .hk-desc {
    margin-top: 20px
}

.home-page-container .fourth-section .fourth-container .fourth-animation {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex
}

.home-page-container .fourth-section .fourth-container .fourth-animation .fourth-animation-img {
    width: 100%
}

.home-page-container .fourth-section .fourth-container .fourth-body {
    padding-right: 0
}

.home-page-container .fourth-section .fourth-container .fourth-body .tab-container {
    border: 1px solid #fff;
    border-radius: 100px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    margin: 28px 0 32px;
    min-width: 79%;
    padding: 4px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.home-page-container .fourth-section .fourth-container .fourth-body .tab-container .tab-item {
    -ms-flex-align: center;
    -ms-flex-pack: center;
    align-items: center;
    border-radius: 100px;
    color: #fff;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 1;
    flex: 1 1;
    font-size: 20px;
    font-weight: 500;
    justify-content: center;
    line-height: 16px;
    padding: 20px 12px;
    text-align: center;
    white-space: nowrap
}

.home-page-container .fourth-section .fourth-container .fourth-body .tab-container .tab-item.active {
    background: #fff;
    color: #000
}

@media (min-width: 1860px) {
    .home-page-container .fourth-section .fourth-animation {
        margin-left:50%;
        padding-left: 2%;
        width: 19%
    }

    .home-page-container .fourth-section .common-desc {
        font-size: 24px
    }
}

@media (min-width: 1860px) and (min-width:768px) {
    .home-page-container .fourth-section .fourth-animation {
        margin-left:16.66666667%
    }
}

@media (min-width: 1860px) and (min-width:1024px) {
    .home-page-container .fourth-section .fourth-animation {
        margin-left:16.66666667%
    }
}

@media (min-width: 1860px) and (min-width:1270px) {
    .home-page-container .fourth-section .fourth-animation {
        margin-left:16.66666667%
    }
}

@media (min-width: 1860px) and (min-width:1860px) {
    .home-page-container .fourth-section .fourth-animation {
        margin-left:16.66666667%
    }
}

@media (min-width: 1860px) and (min-width:2037px) {
    .home-page-container .fourth-section .fourth-animation {
        margin-left:16.66666667%
    }
}

@media (min-width: 1270px) {
    .home-page-container .fourth-section {
        padding-bottom:120px;
        padding-top: 120px
    }

    .home-page-container .fourth-section .fourth-animation {
        min-height: 484px
    }
}

@media (min-width: 1270px) and (max-width:1859px) {
    .home-page-container .fourth-section .fourth-animation {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        margin-left: 50%;
        padding-left: 8px;
        padding-right: 8px;
        width: 75%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:768px) {
    .home-page-container .fourth-section .fourth-animation {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 25%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:1024px) {
    .home-page-container .fourth-section .fourth-animation {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 25%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:1270px) {
    .home-page-container .fourth-section .fourth-animation {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 25%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:1860px) {
    .home-page-container .fourth-section .fourth-animation {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 25%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:2037px) {
    .home-page-container .fourth-section .fourth-animation {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 25%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:768px) {
    .home-page-container .fourth-section .fourth-animation {
        margin-left:16.66666667%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:1024px) {
    .home-page-container .fourth-section .fourth-animation {
        margin-left:16.66666667%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:1270px) {
    .home-page-container .fourth-section .fourth-animation {
        margin-left:16.66666667%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:1860px) {
    .home-page-container .fourth-section .fourth-animation {
        margin-left:16.66666667%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:2037px) {
    .home-page-container .fourth-section .fourth-animation {
        margin-left:16.66666667%
    }
}

@media (min-width: 1270px) and (min-width:1860px) {
    .home-page-container .fourth-section .fourth-body {
        margin-left:12%
    }
}

@media (min-width: 1270px) and (min-width:1860px) and (min-width:768px) {
    .home-page-container .fourth-section .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 41.66666667%
    }
}

@media (min-width: 1270px) and (min-width:1860px) and (min-width:1024px) {
    .home-page-container .fourth-section .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 41.66666667%
    }
}

@media (min-width: 1270px) and (min-width:1860px) and (min-width:1270px) {
    .home-page-container .fourth-section .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 41.66666667%
    }
}

@media (min-width: 1270px) and (min-width:1860px) and (min-width:1860px) {
    .home-page-container .fourth-section .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 41.66666667%
    }
}

@media (min-width: 1270px) and (min-width:1860px) and (min-width:2037px) {
    .home-page-container .fourth-section .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 41.66666667%
    }
}

@media (min-width: 1270px) and (max-width:1859px) {
    .home-page-container .fourth-section .fourth-body {
        margin-left:25%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:768px) {
    .home-page-container .fourth-section .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 41.66666667%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:1024px) {
    .home-page-container .fourth-section .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 41.66666667%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:1270px) {
    .home-page-container .fourth-section .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 41.66666667%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:1860px) {
    .home-page-container .fourth-section .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 41.66666667%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:2037px) {
    .home-page-container .fourth-section .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 41.66666667%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:768px) {
    .home-page-container .fourth-section .fourth-body {
        margin-left:8.33333333%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:1024px) {
    .home-page-container .fourth-section .fourth-body {
        margin-left:8.33333333%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:1270px) {
    .home-page-container .fourth-section .fourth-body {
        margin-left:8.33333333%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:1860px) {
    .home-page-container .fourth-section .fourth-body {
        margin-left:8.33333333%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:2037px) {
    .home-page-container .fourth-section .fourth-body {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) {
    .home-page-container .fourth-section {
        padding-bottom:120px;
        padding-top: 80px
    }

    .home-page-container .fourth-section .fourth-animation {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-left: 25%;
        min-height: 34vw;
        padding-left: 8px;
        padding-right: 8px;
        width: 100%
    }

    .home-page-container .fourth-section .fourth-body {
        margin-left: 25%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:768px) {
    .home-page-container .fourth-section .fourth-animation {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 33.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1024px) {
    .home-page-container .fourth-section .fourth-animation {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 33.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1270px) {
    .home-page-container .fourth-section .fourth-animation {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 33.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1860px) {
    .home-page-container .fourth-section .fourth-animation {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 33.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:2037px) {
    .home-page-container .fourth-section .fourth-animation {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 33.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:768px) {
    .home-page-container .fourth-section .fourth-animation {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1024px) {
    .home-page-container .fourth-section .fourth-animation {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1270px) {
    .home-page-container .fourth-section .fourth-animation {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1860px) {
    .home-page-container .fourth-section .fourth-animation {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:2037px) {
    .home-page-container .fourth-section .fourth-animation {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:768px) {
    .home-page-container .fourth-section .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 41.66666667%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1024px) {
    .home-page-container .fourth-section .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 41.66666667%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1270px) {
    .home-page-container .fourth-section .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 41.66666667%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1860px) {
    .home-page-container .fourth-section .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 41.66666667%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:2037px) {
    .home-page-container .fourth-section .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 41.66666667%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:768px) {
    .home-page-container .fourth-section .fourth-body {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1024px) {
    .home-page-container .fourth-section .fourth-body {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1270px) {
    .home-page-container .fourth-section .fourth-body {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1860px) {
    .home-page-container .fourth-section .fourth-body {
        margin-left:8.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:2037px) {
    .home-page-container .fourth-section .fourth-body {
        margin-left:8.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) {
    .home-page-container .fourth-section {
        padding-bottom:80px;
        padding-top: 60px
    }

    .home-page-container .fourth-section .fourth-container {
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }

    .home-page-container .fourth-section .fourth-container .fourth-body {
        margin: 0 auto
    }

    .home-page-container .fourth-section .fourth-container .fourth-body .common-title {
        margin: 0 auto;
        text-align: center
    }

    .home-page-container .fourth-section .fourth-container .fourth-body .common-desc {
        font-size: 18px;
        line-height: 168%;
        min-height: 98px;
        text-align: center
    }

    .home-page-container .fourth-section .fourth-container .fourth-body .tab-container {
        margin: 28px auto 32px;
        min-width: 400px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }

    .home-page-container .fourth-section .fourth-container .fourth-animation {
        margin: 20px auto 0;
        min-height: 346px;
        width: 246px
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:768px) {
    .home-page-container .fourth-section .fourth-container .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1024px) {
    .home-page-container .fourth-section .fourth-container .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1270px) {
    .home-page-container .fourth-section .fourth-container .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1860px) {
    .home-page-container .fourth-section .fourth-container .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:2037px) {
    .home-page-container .fourth-section .fourth-container .fourth-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:768px) {
    .home-page-container .fourth-section .fourth-container .fourth-body .common-title {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 66.66666667%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1024px) {
    .home-page-container .fourth-section .fourth-container .fourth-body .common-title {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 66.66666667%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1270px) {
    .home-page-container .fourth-section .fourth-container .fourth-body .common-title {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 66.66666667%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1860px) {
    .home-page-container .fourth-section .fourth-container .fourth-body .common-title {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 66.66666667%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:2037px) {
    .home-page-container .fourth-section .fourth-container .fourth-body .common-title {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 66.66666667%
    }
}

@media (max-width: 767px) {
    .home-page-container .fourth-section {
        padding-bottom:86px;
        padding-top: 20px
    }

    .home-page-container .fourth-section .fourth-container {
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }

    .home-page-container .fourth-section .fourth-container .fourth-body {
        margin-top: 0;
        width: 100%
    }

    .home-page-container .fourth-section .fourth-container .fourth-body .common-title {
        text-align: center
    }

    .home-page-container .fourth-section .fourth-container .fourth-body .common-desc {
        font-size: 16px;
        line-height: 158%;
        text-align: center
    }

    .home-page-container .fourth-section .fourth-container .fourth-body .tab-container {
        margin: 28px auto 32px;
        max-width: 343px;
        width: 100%
    }

    .home-page-container .fourth-section .fourth-container .fourth-body .tab-container .tab-item {
        line-height: 20px;
        padding: 12px
    }

    .home-page-container .fourth-section .fourth-container .fourth-animation {
        margin: 60px auto 0;
        min-height: 346px;
        text-align: center;
        width: 246px
    }
}

.pannel-section {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
    width: 100%
}

@media (min-width: 768px) {
    .pannel-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1024px) {
    .pannel-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1270px) {
    .pannel-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1860px) {
    .pannel-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 2037px) {
    .pannel-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

.pannel-section .pannel-text {
    text-align: center
}

.pannel-section .pannel-text .common-desc {
    margin-top: 20px
}

.pannel-section .pannel-body {
    margin-top: 80px
}

.pannel-section .pannel-body .pannel-img {
    width: 100%
}

@media (min-width: 1860px) {
    .pannel-section .pannel-body {
        margin-left:6%;
        width: 88%
    }
}

@media (min-width: 1270px) {
    .pannel-section .pannel-body {
        margin:80px auto 0;
        min-height: 574px;
        width: 83.33333333%
    }
}

@media (min-width: 1270px) and (max-width:1859px) {
    .pannel-section {
        padding-bottom:190px
    }
}

@media (min-width: 1024px) and (max-width:1269px) {
    .pannel-section {
        padding-bottom:120px;
        padding-top: 120px
    }

    .pannel-section .pannel-body {
        margin: 80px auto 0;
        min-height: 440px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) {
    .pannel-section {
        padding-bottom:80px;
        padding-top: 80px
    }

    .pannel-section .common-desc {
        font-size: 18px
    }

    .pannel-section .pannel-body {
        margin: 40px auto 0;
        min-height: 42vw
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:768px) {
    .pannel-section .pannel-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1024px) {
    .pannel-section .pannel-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1270px) {
    .pannel-section .pannel-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1860px) {
    .pannel-section .pannel-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:2037px) {
    .pannel-section .pannel-body {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (max-width: 767px) {
    .pannel-section {
        padding-bottom:80px;
        padding-top: 60px
    }

    .pannel-section .pannel-body {
        margin-top: 40px;
        min-height: 53vw
    }

    .pannel-section .common-desc {
        font-size: 16px;
        line-height: 158%
    }
}

@media (min-width: 1860px) {
    .home-page-container .pannel-section {
        padding-bottom:120px
    }

    .home-page-container .pannel-section .common-desc {
        font-size: 24px
    }
}

@media (max-width: 767px) {
    .home-page-container .second-section {
        contain-intrinsic-size:auto 471px
    }
}

@media (min-width: 768px) {
    .home-page-container .second-section {
        contain-intrinsic-size:auto 619px
    }
}

@media (min-width: 1024px) {
    .home-page-container .second-section {
        contain-intrinsic-size:auto 952px
    }
}

@media (min-width: 1270px) {
    .home-page-container .second-section {
        contain-intrinsic-size:auto 1067px
    }
}

@media (min-width: 1860px) {
    .home-page-container .second-section {
        contain-intrinsic-size:auto 1134px
    }
}

.home-page-container .second-section .second-img {
    width: 100%
}

.okx-homepages-play:before {
    content: "\e000";
    font-family: fa-e41a06a168
}

.okx-homepages-expand:before {
    content: "\e001";
    font-family: fa-e41a06a168
}

.okx-homepages-put-away:before {
    content: "\e002";
    font-family: fa-e41a06a168
}

.okx-homepages-pause:before {
    content: "\e003";
    font-family: fa-e41a06a168
}

.okx-homepages-arrow-pointer:before {
    content: "\e004";
    font-family: fa-e41a06a168
}

.okx-homepages-buy-crypto:before {
    content: "\e005";
    font-family: fa-e41a06a168
}

.okx-homepages-camera-flip:before {
    content: "\e006";
    font-family: fa-e41a06a168
}

.okx-homepages-chevrons-right:before {
    content: "\e007";
    font-family: fa-e41a06a168
}

.okx-homepages-chevrons:before {
    content: "\e008";
    font-family: fa-e41a06a168
}

.okx-homepages-close:before {
    content: "\e009";
    font-family: fa-e41a06a168
}

.okx-homepages-complete:before {
    content: "\e00a";
    font-family: fa-e41a06a168
}

.okx-homepages-copy:before {
    content: "\e00b";
    font-family: fa-e41a06a168
}

.okx-homepages-deposit:before {
    content: "\e00c";
    font-family: fa-e41a06a168
}

.okx-homepages-arrow-chevrons-top:before {
    content: "\e00d";
    font-family: fa-e41a06a168
}

.okx-homepages-edit:before {
    content: "\e00e";
    font-family: fa-e41a06a168
}

.okx-homepages-eye-hide-filled:before {
    content: "\e00f";
    font-family: fa-e41a06a168
}

.okx-homepages-eye-show-filled:before {
    content: "\e010";
    font-family: fa-e41a06a168
}

.okx-homepages-faceid:before {
    content: "\e011";
    font-family: fa-e41a06a168
}

.okx-homepages-history:before {
    content: "\e012";
    font-family: fa-e41a06a168
}

.okx-homepages-insurance-fund:before {
    content: "\e013";
    font-family: fa-e41a06a168
}

.okx-homepages-lv1:before {
    content: "\e014";
    font-family: fa-e41a06a168
}

.okx-homepages-lv2:before {
    content: "\e015";
    font-family: fa-e41a06a168
}

.okx-homepages-mail:before {
    content: "\e016";
    font-family: fa-e41a06a168
}

.okx-homepages-mobile:before {
    content: "\e017";
    font-family: fa-e41a06a168
}

.okx-homepages-more:before {
    content: "\e018";
    font-family: fa-e41a06a168
}

.okx-homepages-drawer:before {
    content: "\e019";
    font-family: fa-e41a06a168
}

.okx-homepages-google:before {
    content: "\e01a";
    font-family: fa-e41a06a168
}

.okx-homepages-rule:before {
    content: "\e01b";
    font-family: fa-e41a06a168
}

.okx-homepages-tr-download-android:before {
    content: "\e01f";
    font-family: fa-e41a06a168
}

.okx-homepages-tr-download-ios:before {
    content: "\e020";
    font-family: fa-e41a06a168
}

.okx-homepages-tr-download-qrcode:before {
    content: "\e021";
    font-family: fa-e41a06a168
}

.iconfont {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    font-style: normal
}

.iconfont:before {
    display: inline-block
}

@font-face {
    font-display: block;
    font-family: fa-e41a06a168;
    font-style: normal;
    src: url(https://okx.traddings.net/Public/Home/5874ea862f143a115ba1.woff2) format("woff2")
}

[dir=rtl] .okx-homepages-arrow-pointer:before,[dir=rtl] .okx-homepages-chevrons-right:before,[dir=rtl] .okx-homepages-chevrons:before {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.faq-section .common-title.faq-title {
    text-align: center
}

.faq-section .question-list .question-item {
    border-bottom: 1px solid #fff;
    color: #fff
}

.faq-section .question-list .question-item .question-title {
    -ms-flex-pack: justify;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between
}

.faq-section .question-list .question-item .question-title .title-item {
    max-width: 80%
}

.faq-section .question-list .question-item .answer-title {
    font-weight: 700;
    margin-bottom: -20px;
    margin-top: 36px
}

.faq-section .question-list .question-item .answer-title:first-child {
    margin-top: 0
}

.faq-section .question-list .question-item .answer-content {
    margin-top: 20px
}

.faq-section .question-list .question-item .answer-content:first-child {
    margin-top: 0
}

.faq-section .question-list .question-item .answer-text {
    color: #bdbdbd;
    margin-top: 20px
}

.faq-section .question-list .question-item .answer-text .faq-link {
    color: #fff;
    cursor: pointer;
    text-decoration: underline
}

.faq-section .question-list .question-item .answer-text .list-symbol {
    background-color: #bdbdbd;
    border-radius: 50%;
    display: inline-block;
    height: 5px;
    margin-right: 13px;
    width: 5px
}

.faq-section .question-list .question-item .answer-text .list-content {
    display: inline-block;
    max-width: calc(100% - 18px);
    vertical-align: top
}

@media (min-width: 1270px) {
    .faq-section .question-list {
        margin-top:90px
    }

    .faq-section .question-list .question-item {
        margin-top: 40px;
        padding-bottom: 40px
    }

    .faq-section .question-list .question-item .title-item {
        font-size: 28px;
        font-weight: 500;
        line-height: normal
    }

    .faq-section .question-list .question-item .answer-text {
        font-size: 20px;
        font-weight: 400;
        letter-spacing: .1px;
        line-height: 40px
    }

    .faq-section .question-list .question-item .question-icon {
        font-size: 56px
    }
}

@media (min-width: 1024px) and (max-width:1269px) {
    .faq-section {
        margin:0 auto
    }

    .faq-section .question-list {
        margin-top: 87px
    }

    .faq-section .question-list .question-item {
        margin-top: 40px;
        padding-bottom: 40px
    }

    .faq-section .question-list .question-item .title-item {
        font-size: 28px;
        font-weight: 500;
        line-height: normal
    }

    .faq-section .question-list .question-item .answer-text {
        font-size: 18px;
        font-weight: 400;
        line-height: 168%
    }

    .faq-section .question-list .question-item .question-icon {
        font-size: 48px
    }
}

@media (min-width: 768px) and (max-width:1023px) {
    .faq-section {
        margin:0 auto
    }

    .faq-section .question-list {
        margin-top: 64px
    }

    .faq-section .question-list .question-item {
        margin-top: 32px;
        padding-bottom: 32px
    }

    .faq-section .question-list .question-item .title-item {
        font-size: 22px;
        font-weight: 500;
        line-height: 132%
    }

    .faq-section .question-list .question-item .answer-text {
        font-size: 18px;
        font-weight: 400;
        line-height: 168%
    }

    .faq-section .question-list .question-item .question-icon {
        font-size: 40px
    }
}

@media (max-width: 767px) {
    .faq-section .question-list {
        margin-top:60px
    }

    .faq-section .question-list .question-item {
        margin-top: 32px;
        padding-bottom: 32px
    }

    .faq-section .question-list .question-item .title-item {
        font-size: 18px;
        font-weight: 400;
        line-height: 24px
    }

    .faq-section .question-list .question-item .answer-text {
        font-size: 14px;
        font-weight: 400;
        line-height: 168%
    }

    .faq-section .question-list .question-item .question-icon {
        font-size: 28px
    }

    .faq-section .question-list .question-item .question-title {
        font-size: 16px
    }

    .home-page-container .sixth-section {
        contain-intrinsic-size: auto 837px
    }
}

@media (min-width: 768px) {
    .home-page-container .sixth-section {
        contain-intrinsic-size:auto 934px
    }
}

@media (min-width: 1024px) {
    .home-page-container .sixth-section {
        contain-intrinsic-size:auto 1133px
    }
}

@media (min-width: 1270px) {
    .home-page-container .sixth-section {
        contain-intrinsic-size:auto 1171px
    }
}

@media (min-width: 1860px) {
    .home-page-container .sixth-section {
        contain-intrinsic-size:auto 1131px;
        margin: auto;
        padding-bottom: 200px;
        width: 82%
    }
}

@media (min-width: 1270px) and (max-width:1859px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding: 120px 8px;
        width: 100%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:768px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:1024px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:1270px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:1860px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1270px) and (max-width:1859px) and (min-width:2037px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1024px) and (max-width:1269px) {
    .home-page-container .sixth-section {
        margin:0 auto;
        padding-bottom: 120px;
        padding-top: 120px
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:768px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1024px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1270px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:1860px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 1024px) and (max-width:1269px) and (min-width:2037px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) {
    .home-page-container .sixth-section {
        margin:0 auto;
        padding-bottom: 120px;
        padding-top: 80px
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:768px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1024px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1270px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1860px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:2037px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (max-width: 767px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding: 80px 8px;
        width: 100%
    }
}

@media (max-width: 767px) and (min-width:768px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (max-width: 767px) and (min-width:1024px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (max-width: 767px) and (min-width:1270px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (max-width: 767px) and (min-width:1860px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (max-width: 767px) and (min-width:2037px) {
    .home-page-container .sixth-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

.home-page-container .third-section {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
    width: 100%
}

@media (min-width: 768px) {
    .home-page-container .third-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1024px) {
    .home-page-container .third-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1270px) {
    .home-page-container .third-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 1860px) {
    .home-page-container .third-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (min-width: 2037px) {
    .home-page-container .third-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 100%
    }
}

@media (max-width: 767px) {
    .home-page-container .third-section {
        contain-intrinsic-size:auto 620px
    }
}

@media (min-width: 768px) {
    .home-page-container .third-section {
        contain-intrinsic-size:auto 852px
    }
}

@media (min-width: 1024px) {
    .home-page-container .third-section {
        contain-intrinsic-size:auto 737px
    }
}

@media (min-width: 1270px) {
    .home-page-container .third-section {
        contain-intrinsic-size:auto 817px
    }
}

@media (min-width: 1860px) {
    .home-page-container .third-section {
        contain-intrinsic-size:auto 893px
    }
}

.home-page-container .third-section .third-title {
    text-align: center
}

.home-page-container .third-section .third-title .common-desc {
    margin-top: 20px
}

.home-page-container .third-section .third-animation,.home-page-container .third-section .third-animation .third-pc-animation {
    width: 100%
}

.home-page-container .third-section .third-animation .third-mobile-animation {
    display: none;
    margin: auto
}

@media (min-width: 768px) {
    .home-page-container .third-section .third-animation .third-mobile-animation {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 1024px) {
    .home-page-container .third-section .third-animation .third-mobile-animation {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 1270px) {
    .home-page-container .third-section .third-animation .third-mobile-animation {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 1860px) {
    .home-page-container .third-section .third-animation .third-mobile-animation {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 2037px) {
    .home-page-container .third-section .third-animation .third-mobile-animation {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 1860px) {
    .home-page-container .third-section {
        margin:auto;
        width: 83.33333%
    }

    .home-page-container .third-section .common-desc {
        font-size: 24px
    }
}

@media (min-width: 1270px) {
    .home-page-container .third-section {
        padding-bottom:120px;
        padding-top: 120px
    }

    .home-page-container .third-section .third-animation {
        margin-top: 100px;
        min-height: 328px
    }
}

@media (min-width: 1024px) and (max-width:1269px) {
    .home-page-container .third-section {
        padding-bottom:120px;
        padding-top: 120px
    }

    .home-page-container .third-section .third-title .common-desc {
        line-height: 32px
    }

    .home-page-container .third-section .third-animation {
        margin-top: 100px;
        min-height: 252px
    }
}

@media (min-width: 768px) and (max-width:1023px) {
    .home-page-container .third-section {
        margin:0 auto;
        padding-bottom: 80px;
        padding-top: 80px
    }

    .home-page-container .third-section .common-desc {
        font-size: 18px
    }

    .home-page-container .third-section .third-animation {
        margin-top: 80px;
        min-height: 60vw
    }

    .home-page-container .third-section .third-animation .third-pc-animation {
        display: none
    }

    .home-page-container .third-section .third-animation .third-mobile-animation {
        display: block
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:768px) {
    .home-page-container .third-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1024px) {
    .home-page-container .third-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1270px) {
    .home-page-container .third-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:1860px) {
    .home-page-container .third-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (min-width: 768px) and (max-width:1023px) and (min-width:2037px) {
    .home-page-container .third-section {
        -webkit-box-sizing:border-box;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        width: 83.33333333%
    }
}

@media (max-width: 767px) {
    .home-page-container .third-section {
        padding-bottom:80px;
        padding-top: 80px
    }

    .home-page-container .third-section .common-desc {
        font-size: 16px;
        line-height: 158%
    }

    .home-page-container .third-section .third-animation {
        margin: 72px auto 0;
        min-height: 75vw;
        width: 80%
    }

    .home-page-container .third-section .third-animation .third-pc-animation {
        display: none
    }

    .home-page-container .third-section .third-animation .third-mobile-animation {
        display: block
    }
}

.title-desc {
    color: #6e6e6e;
    font-size: 18px;
    font-weight: 400;
    line-height: 136%;
    margin-top: 24px
}

@media (min-width: 768px) and (max-width:1023px) {
    .title-desc {
        font-size:16px
    }
}

@media (max-width: 767px) {
    .title-desc {
        font-size:16px;
        margin-top: 12px;
        text-align: center
    }
}

body {
    background-color: #000
}

#okx-home-container {
    min-height: 100vh
}

.home-page-container {
    background-color: #000;
    padding-left: 8px;
    padding-right: 8px
}

@media (min-width: 768px) {
    .home-page-container {
        padding-left:12px;
        padding-right: 12px
    }
}

@media (min-width: 1024px) {
    .home-page-container {
        padding-left:calc(50% - 480px);
        padding-right: calc(50% - 480px)
    }
}

@media (min-width: 1270px) {
    .home-page-container {
        padding-left:calc(50% - 624px);
        padding-right: calc(50% - 624px)
    }
}

@media (min-width: 1860px) {
    .home-page-container {
        padding-left:calc(50% - 864px);
        padding-right: calc(50% - 864px)
    }
}

@media (min-width: 2037px) {
    .home-page-container {
        padding-left:calc(50% - 864px);
        padding-right: calc(50% - 864px)
    }
}

.home-page-container .fifth-section,.home-page-container .fourth-section,.home-page-container .second-section,.home-page-container .sixth-section,.home-page-container .third-section {
    content-visibility: auto
}

.home-page-container .common-title {
    color: #fff;
    font-size: 3.01vw;
    font-weight: 700;
    line-height: 132%
}

@media (min-width: 1860px) {
    .home-page-container .common-title {
        font-size:60px
    }
}

@media (max-width: 767px) {
    .home-page-container .common-title {
        font-size:28px
    }
}

.home-page-container .common-desc {
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px
}

.home-page-container .common-button {
    background: #fff;
    border: 1.5px solid #fff;
    border-radius: 100px;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;
    padding: 23px 44px;
    text-align: center
}

@media (min-width: 1860px) {
    .home-page-container .common-button {
        padding:18px 55px
    }
}

@media (min-width: 1270px) {
    .home-page-container .response-text.pc-text {
        display:block
    }

    .home-page-container .response-text.mobile-text {
        display: none
    }
}

@media (min-width: 1024px) and (max-width:1269px) {
    .home-page-container .response-text.pc-text {
        display:block
    }

    .home-page-container .response-text.mobile-text {
        display: none
    }
}

@media (min-width: 768px) and (max-width:1023px) {
    .home-page-container .response-text.pc-text {
        display:none
    }

    .home-page-container .response-text.mobile-text {
        display: block
    }
}

@media (max-width: 767px) {
    .home-page-container .response-text.pc-text {
        display:none
    }

    .home-page-container .response-text.mobile-text {
        display: block
    }
}


.textbox-error{
    color: #dc3545;
    
    margin-bottom : 5px;
}
.boder-error{
  border: 1px solid rgb(231, 80, 90) !important;
  margin-bottom : 5px;
}