* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;

}

:root,
body {
    --ratio-size: calc(100vw / 1920);
    --type-area: max(80px, calc(var(--ratio-size) * 160));
    --title-bigger-size: max(43px, calc(var(--ratio-size) * 86));
    --title-inside-size: max(22px, calc(var(--ratio-size) * 58));
    --title-big-size: max(20px, calc(var(--ratio-size) * 50));

    --inside-title-bigger-size: max(35px, calc(var(--ratio-size) * 72));
    --inside-title-big-size: max(22px, calc(var(--ratio-size) * 48));

    --text-biggest-size: calc(36rem / 16);
    --text-bigger-size: calc(20rem / 16);
    --text-big-size: calc(24rem / 16);
    --text-normal-size: calc(16rem / 16);
    --text-small-size: calc(14rem / 16);
    --half-border-radius: 100000px;
    --header-height: 100px;

    font-size: max(14px, calc(0.417vw + 8px));
    /* letter-spacing: .1em; */
    line-height: 1.5;
    color: #333;
    font-family: 'PingFang SC', 'Microsoft YaHei', '微软雅黑';
}

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

img {
    display: block;
    width: 100%;
}

li,
ol {
    list-style-type: none;
}

.type-area {
    padding-left: var(--type-area);
    padding-right: var(--type-area);
}


/* 文字 */
.common-text-b {
    font-size: calc(66rem / 16);
}

.common-text-banner-t {
    font-size: calc(62rem / 16);
}

.common-text-banner-s {
    font-size: calc(24rem / 16);
}

.common-text-t {
    font-size: calc(48rem / 16);
}

.common-text-b-n {
    font-size: calc(28rem / 16);
}

.common-text-n-n {
    font-size: calc(18rem / 16);
}

.common-text-n {
    font-size: calc(16rem / 16);
}

.full-screen {
    width: 100%;
    height: 100vh;
}

.common-btn-arrow a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: calc(20rem / 16) 0;
    padding-left: calc(55rem / 16);
    padding-right: calc(45rem / 16);
    border: 1px solid #fff;
    border-radius: var(--half-border-radius);
    font-size: var(--text-small-size);
    transition: border .5s;
}

.common-btn-arrow a>* {
    position: relative;
    z-index: 2;
}

.common-btn-arrow a svg {
    transition: all .5s;
}

.common-btn-arrow a:hover svg {
    transform: translateX(10px);
}

.common-btn-arrow a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: var(--half-border-radius);
    background-image: linear-gradient(90deg, #0B58CB, #1785C5, #3ABD1B);
    opacity: 0;
    transition: all .5s;
}

.common-btn-arrow.color-colorful a {
    background-image: linear-gradient(90deg, #0B58CB, #1785C5, #3ABD1B);
    color: #fff;
}

.common-btn-arrow a.hover-colorful:hover {
    border-color: transparent;
}

.common-btn-arrow a.hover-colorful:hover::after {
    opacity: 1;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--header-height);
    /* background-color: #000; */
    z-index: 6;
    font-size: var(--text-normal-size);
    color: #fff;
    transition: all .5s;
}

header.pick-up {
    transform: translateY(-100%);
}

header.to-white-bg {
    padding-left: calc(var(--ratio-size) * 100);
    padding-right: calc(var(--ratio-size) * 100);
    background-color: #fff;
    color: #000;
    box-shadow: 0 3px 5px #c1c1c177;
}

header .logo {
    height: 50px;
}

header .logo img {
    width: auto;
    height: 100%;
}

header nav {
    height: 100%;
    margin-left: auto;
}

header nav a {
    transition: all .5s;
}

header nav a:hover {
    color: #4BC12A;
}

header nav .first-floor {
    display: flex;
    align-items: center;
    height: 100%;
}

header nav .first-floor>li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* height: 100%; */
}

header nav .first-floor>li>a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px calc(var(--ratio-size) * 20);
}

header nav .second-floor {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff;
    min-width: 100%;
    box-shadow: 1px 1px 5px #c1c1c1;
    opacity: 0;
    visibility: hidden;
}

header nav .second-floor a {
    display: block;
    padding: 8px 10px;
    color: #000;
    border-bottom: 1px solid #c1c1c150;
    font-size: var(--text-small-size);
    white-space: nowrap;
}

header nav .second-floor a:hover {
    color: #4BC12A;
}

header .function {
    margin-left: 30px;
}

header .function .lang a {
    display: block;
    padding: 8px max(15px, calc(var(--ratio-size) * 30));
    border: 1px solid #fff;
    border-radius: var(--half-border-radius);
    transition: all .5s;
}


header.to-white-bg .function .lang a {
    border-color: rgba(0, 0, 0, .3);
    color: #666;
}

header .function .lang a:hover {
    background-color: #4BC12A;
    color: #fff;
}

header .header-white-logo {
    display: block;
}

header .header-color-logo {
    display: none;
}

header.to-white-bg .header-color-logo {
    display: block;
}

header.to-white-bg .header-white-logo {
    display: none;
}

header .phone-menu {
    display: none;
    flex-direction: column;
    gap: 5px;
    margin-left: 20px;
}

header .phone-menu span {
    display: block;
    width: 23px;
    height: 3px;
    background-color: #000;
}

.phone-left {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 35%;
    height: 100vh;
    transform: translateX(-100%);
    background-color: rgba(0, 0, 0, .5);
    transition: all .5s;
}

.phone-left.show-menu {
    transform: translateX(0);
}

.phone-right {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    width: 65%;
    height: 100vh;
    transform: translateX(100%);
    background-color: rgba(255, 255, 255, 0.871);
    transition: all .5s;
}

.phone-right.show-menu {
    transform: translateX(0);
}

.phone-right .close-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 40px;
    border-bottom: 1px solid #c1c1c1;
}

.phone-right .close-btn .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-left: 1px solid #c1c1c1;
}

.phone-right .close-btn svg {
    width: 30px;
}

.phone-right a {
    border-bottom: 1px solid rgba(193, 193, 193, .5);
}

.phone-right ul .more-floor {
    display: flex;
    align-items: center;
}

.phone-right ul .more-floor a {
    flex: 1;
}

.phone-right ul .more-floor .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-left: 1px solid #c1c1c1;
    border-bottom: 1px solid #c1c1c1;
    background-color: rgba(55, 187, 52, 1);
}

.phone-right ul .more-floor .icon svg {
    width: 20px;
    transform: rotate(-90deg);
    transition: all .5s;
}

.phone-right ul .more-floor .icon.show-more svg {
    transform: rotate(0);
}

.phone-right ul li {
    position: relative;
}

.phone-right ul li a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 42px;
    padding-left: 10px;
}

.phone-right .phone-second-floor {
    display: none;
}

.phone-right .phone-second-floor a {
    padding-left: 20px;
}




footer {
    padding-top: calc(var(--ratio-size) * 76);
    padding-bottom: calc(var(--ratio-size) * 30);
    border-top: 1px solid #c1c1c150;
}

footer .nav-list {
    padding: 0 var(--type-area);
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: calc(14rem / 16);
}

footer .nav-list ul li:first-child {
    margin-bottom: calc(var(--ratio-size) * 30);
    font-weight: bold;
    font-size: calc(16rem / 16);
}

footer .nav-list ul li:not(:first-child) {
    color: rgba(51, 51, 51, .5);
}

footer .nav-list li a {
    display: inline-block;
    line-height: 2;
    transition: all .5s;
}

footer .nav-list li a:hover {
    color: #37C6B7;
}

footer .bottom {
    padding: 0 var(--type-area);
    margin-top: calc(var(--ratio-size) * 90);
}

footer .bottom .logo img {
    margin: 0 auto;
    width: 70px;
}

footer .bottom .title {
    margin-top: calc(var(--ratio-size) * 45);
}

footer .bottom .title .pic {
    width: 100%;
    height: 100%;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background: -o-linear-gradient(left, #37C6B710, #0090DB 20%, #37C6B710 40%, #37C6B710 100%);
    background: -webkit-linear-gradient(left, #37C6B710, #0090DB 20%, #37C6B710 40%, #37C6B710 100%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

    mask-image: url('../images/bottom_title.svg');
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center 90%;
    -webkit-mask-image: url('../images/bottom_title.svg');
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    background-position: 0px;

    animation: autoChangeColor 10s infinite forwards linear;
    -webkit-animation: autoChangeColor 10s infinite forwards linear;
}

@-webkit-keyframes autoChangeColor {
    50% {
        background-position: calc(var(--ratio-size) * 950);
    }
}

@keyframes autoChangeColor {
    50% {
        background-position: calc(var(--ratio-size) * 950);
    }
}

footer .bottom .title .pic img {
    opacity: 0;
}

footer .bottom .message {
    margin-top: calc(var(--ratio-size) * 30);
    text-align: center;
    font-size: calc(14rem / 16);
    line-height: 1.5;
    color: rgba(51, 51, 51, .5);
}

footer .bottom .media-list {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: calc(var(--ratio-size) * 24);
}

footer .bottom .media-list a {
    position: relative;
    margin: 0 5px;
    cursor: pointer;
}

footer .bottom .media-list a .code {
    display: none;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -110%);
    width: calc(var(--ratio-size) * 150);
    height: calc(var(--ratio-size) * 150);
    padding: calc(var(--ratio-size) * 5);
    background-color: #2F9CAC;
    border-radius: 10px;
}

footer .bottom .media-list a .code::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, 95%);
    border: 10px solid transparent;
    border-top-color: #2F9CAC;
}

footer .bottom .media-list a .code img {
    width: 100%;
}

footer .nav-list .follow-us {
    text-align: left;
}

footer .nav-list .follow-us .qr-code {
    padding: 5px;
    background-color: #B4B4B4;
    border-radius: 10px;
}

footer .nav-list .follow-us .qr-code img {
    width: 110px;
}

.partner {
    position: relative;
    width: 100%;
    height: calc(var(--ratio-size) * 580);
    overflow: hidden;
    padding-top: calc(var(--ratio-size) * 230);
    padding-bottom: calc(var(--ratio-size) * 110);
    color: #fff;
    text-align: center;
    background-color: #2F9CAC;
    border-bottom-right-radius: 60px;
    border-bottom-left-radius: 60px;
}

.partner .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/partner_bg.png') no-repeat center/120%;
    overflow: hidden;
}

.partner .bg::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 50%;
    width: 70%;
    height: 150%;

    background-image: radial-gradient(rgba(55, 198, 183, 1) 5%, rgba(55, 198, 183, .6) 45%, rgba(55, 198, 183, .1) 65%, transparent 70%);
    /* background-image: radial-gradient(rgba(55, 198, 183, 1), #fff); */

    transform: translateX(-50%);
    border-radius: 50%;
}

.partner .content {
    position: relative;
    z-index: 2;
}

.partner .text {
    margin-top: calc(var(--ratio-size) * 20);
    font-size: calc(20rem / 16);
}

.partner .btn-container {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: calc(var(--ratio-size) * 55);
}

.partner .btn-container .common-btn a {
    border: 1px solid #fff;
    background-image: none;
    background-color: transparent;
    font-size: calc(18rem / 16);
}

.partner .btn-container .common-btn.icon .icon {
    margin-right: calc(15rem / 16);
}

/* .partner .btn-container .common-btn:first-child {
    margin-right: 20px;
} */

.partner .btn-container .common-btn a:hover {
    box-shadow: none;
}

.common-page-nav {
    display: flex;
    border-top: 1px solid #c1c1c1;
    padding-top: 20px;
    padding-bottom: 20px;
    /* padding-top: calc(var(--ratio-size) * 110); */
    background-color: #f7f7f7;
    font-size: 14px;
    color: #666;
}

.common-page-nav a:not(:last-child)::after {
    content: '>';
    margin: 0 6px;
}

.common-banner-container {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: calc(var(--ratio-size) * 650);
    background-color: #eee;
}

.common-banner-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, 0));
}

.common-banner-container .content {
    position: relative;
    z-index: 2;
    padding-bottom: calc(var(--ratio-size) * 150);
    color: #fff;
}

.common-banner-container .text {
    margin-top: calc(var(--ratio-size) * 20);
}

.page-nav-list {
    display: flex;
    font-size: calc(20rem / 16);
}

.page-nav-list a {
    position: relative;
    flex: 1;
    display: inline-block;
    width: 100%;
    padding: 26px 0;
    text-align: center;
    transition: all .5s;
    border-bottom: 1px solid #ccc;
}

.page-nav-list a::before {
    content: '';
    position: absolute;
    right: 50%;
    bottom: -1px;
    height: 1px;
    width: 0;
    background-color: #37c6b7;
    transition: all .5s;
}

.page-nav-list a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    height: 1px;
    width: 0;
    background-color: #37c6b7;
    transition: all .5s;
}

.page-nav-list a:hover {
    color: #37c6b7;
}

.page-nav-list a:hover::before,
.page-nav-list a:hover::after {
    width: 50%;
}

.page-nav-list a.active {
    color: #37c6b7;
}

.page-nav-list a.active::before,
.page-nav-list a.active::after {
    width: 50%;
}

.common-title-effect {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding-bottom: calc(var(--ratio-size) * 5); */
}

.common-title-effect .en-title {
    font-size: var(--title-bigger-size);
    background-image: linear-gradient(to bottom, #D6D6D650, #D6D6D600);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    line-height: 1.5;
}

.common-title-effect .cn-title {
    position: absolute;
    bottom: 0;
    font-size: var(--title-big-size);
    background-image: linear-gradient(to left, #37BB34, #0091DC, #005AC5);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    line-height: 1.5;
}

.common-title-effect.inside-page {
    padding-bottom: calc(var(--ratio-size) * 10);
}

.common-title-effect.inside-page .en-title {
    font-size: var(--inside-title-bigger-size);
}

.common-title-effect.inside-page .cn-title {
    font-size: var(--inside-title-big-size);
}

.common-title-effect .cn-title.color-white {
    background-image: none;
    background-clip: unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    color: #fff;
}

.common-title-effect .cn-title.color-black {
    background-image: none;
    background-clip: unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    color: #000;
}

.common-title-effect.align-left {
    align-items: flex-start;
}

.inside-banner-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: calc(var(--ratio-size) * 650);
    padding-top: 40px;
    margin-top: var(--header-height);
    color: #fff;
}

.inside-banner-container .inside-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inside-banner-container .content {
    position: relative;
    z-index: 2;
    margin-bottom: 10%;
}

.inside-banner-container .content .title {
    font-size: var(--title-inside-size);
    font-weight: bold;
}

.inside-banner-container .content .text {
    margin-top: calc(30rem / 16);
    font-size: var(--text-bigger-size);
}

.switch-nav-list-container {
    display: flex;
    justify-content: center;
    gap: calc(100rem / 16);
    padding: 0 20px;
    font-size: var(--text-normal-size);
    background-color: #fff;
    box-shadow: 0px 4px 16px 0px rgba(13, 87, 200, 0.1);
}

.switch-nav-list-container li {
    height: 100%;
}

.switch-nav-list-container a {
    display: block;
    padding: 20px 0;
}

.switch-nav-list-container a.active {
    border-bottom: 1px solid #0043B7;
}

.breadcrumbs-nav-container ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 13px 0;
}

.breadcrumbs-nav-container ul li {
    position: relative;
}

.breadcrumbs-nav-container ul li:not(:last-child)::after {
    content: '>';
    position: relative;
    padding: 0 3px;
}

.alert-notice {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* font-size: var(--text-bigger-size); */
    color: #fff;
}

.alert-notice .alert-main {
    position: relative;
    width: min(90%, 800px);
    padding: 90px 40px;
}

.alert-notice .alert-main>* {
    position: relative;
    z-index: 2;
}

.alert-notice .alert-main::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, #0B58CB, #1785C5, #3ABD1B);
    border-radius: 30px;
    opacity: .7;
}

.alert-notice .alert-main .title {
    text-align: center;
    font-weight: bold;
    font-size: calc(25rem / 16);
}

.alert-notice .alert-main .text {
    font-size: calc(20rem / 16);
    /* text-align: justify; */
}

.alert-notice .alert-main .text p:nth-child(2) {
    margin-top: 10px;
    /* text-indent: 2em; */
    /* font-size: var(--text-big-size); */
}