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

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@font-face {
    font-family: 'Poppins-Light';
    src: url('../fonts/Poppins-Light.ttf');
}

@font-face {
    font-family: 'Poppins-SemiBold';
    src: url('../fonts/Poppins-SemiBold.ttf');
}


:root {
    --ratio-size: calc(100vw / 1920);
    font-size: calc(0.417vw + 8px);
    font-family: Poppins-Light;
}

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

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

img {
    width: 100%;
}

strong {
    font-family: Poppins-SemiBold;
}

.type-area {
    width: 100%;
    padding: 0 calc(var(--ratio-size) * 240);
}

.text-white {
    color: #fff;
}

.common-m-title {
    /* font-size: calc(20rem / 16); */
    font-size: calc(var(--ratio-size) * 20);
}

.common-l-title {
    /* font-size: calc(40rem / 16); */
    font-size: calc(var(--ratio-size) * 40);
}

.common-xl-title {
    /* font-size: calc(48rem / 16); */
    font-size: calc(var(--ratio-size) * 48);
}

.common-xxxl-title {
    /* font-size: calc(100rem / 16); */
    font-size: calc(var(--ratio-size) * 100);
}

.common-s-text {
    font-size: calc(14rem / 16);
    /* font-size: calc(var(--ratio-size) * 14); */
}

.common-m-text {
    font-size: calc(16rem / 16);
    /* font-size: calc(var(--ratio-size) * 16); */
}

.common-l-text {
    /* font-size: calc(18rem / 16); */
    font-size: calc(var(--ratio-size) * 18);
}

.common-xl-text {
    /* font-size: calc(28rem / 16); */
    font-size: calc(var(--ratio-size) * 28);
}

.common-title-content {
    text-align: center;
}

.common-btn a {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--ratio-size) * 15) calc(var(--ratio-size) * 30);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: calc(var(--ratio-size) * 40);
    transition: all .5s;
}

.common-btn a img {
    width: 11px;
    transform: rotate(-90deg);
    margin-left: calc(var(--ratio-size) * 10);
}

.common-btn a:hover {
    background-color: #71b638;
    border-color: #71b638;
    color: #fff;
}


.common-btn a:hover .default-show {
    display: none;
}

.common-btn a:hover .default-hidden {
    display: block;
}

.common-btn a .default-hidden {
    display: none;
}

.common-switch-btn {
    display: flex;
    align-items: center;
}

.common-switch-btn .prev-btn,
.common-switch-btn .next-btn {
    position: relative;
    width: calc(var(--ratio-size) * 49);
    height: calc(var(--ratio-size) * 48);
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
}

.common-switch-btn img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.common-switch-btn .put-pic {
    opacity: 0;
    transition: all .5s;
}

.common-switch-btn .default-pic {
    opacity: 1;
    transition: all .5s;
}

.common-switch-btn .prev-btn:hover .put-pic,
.common-switch-btn .next-btn:hover .put-pic {
    opacity: 1;
}

.common-switch-btn .prev-btn:hover .default-pic,
.common-switch-btn .next-btn:hover .default-pic {
    opacity: 0;
}

.common-banner {
    position: relative;
    display: flex;
    align-items: center;
    height: calc(var(--ratio-size) * 680);
    margin-top: calc(var(--ratio-size) * 160);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

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

.common-banner .roll-icon {
    position: absolute;
    left: calc(var(--ratio-size) * 240);
    bottom: calc(var(--ratio-size) * 80);
    transform: translateX(50%);
    width: calc(var(--ratio-size) * 60);
    cursor: pointer;
}

.common-banner .banner-video {
    position: absolute;
    bottom: calc(var(--ratio-size) * 100);
    right: calc(var(--ratio-size) * 250);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ratio-size) * 260);
    height: calc(var(--ratio-size) * 160);
    text-align: center;
    background-position: center;
    background-size: cover;
    cursor: pointer;
    color: #fff;
}

.common-banner .banner-video .play-btn img {
    width: calc(var(--ratio-size) * 40);
    cursor: pointer;
    transition: all .5s;
}

.common-banner .banner-video:hover img {
    transform: scale(1.1);
}

.roll-icon {
    animation: jumpAn 2s alternate infinite;
}

@keyframes jumpAn {
    to {
        /* bottom: calc(var(--ratio-size) * 40); */
        transform: translate(50%, 80%);
    }
}

.common-banner .common-xxxl-title {
    margin-left: calc(var(--ratio-size) * -7);
    font-weight: bold;
}

.common-expand-btn {
    display: flex;
    align-items: center;
    color: #71b638;
}

.common-expand-btn img {
    width: calc(var(--ratio-size) * 6);
    height: auto;
    margin-left: calc(var(--ratio-size) * 20);
}

.common-btn-gray a {
    border-color: rgba(0, 0, 0, .2);
    color: #666666;
}

.common-btn-gray a img {
    margin-bottom: calc(var(--ratio-size) * -4);
}

.common-download-btn a img {
    width: calc(var(--ratio-size) * 18);
    margin-left: calc(var(--ratio-size) * 20);
    transform: rotate(0);
}

.common-more-btn {
    margin-top: calc(var(--ratio-size) * 60);
    text-align: center;
}

.common-more-btn .pic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ratio-size) * 60);
    height: calc(var(--ratio-size) * 60);
    margin: 0 auto;
    margin-top: calc(var(--ratio-size) * 10);
    border-radius: 50%;
    background-color: #cccccc;
    font-size: calc(var(--ratio-size) * 18);
    cursor: pointer;
    transition: all .5s;
}

.common-more-btn .pic:hover {
    transform: scale(1.1);
    box-shadow: 1px 1px #f1f1f1;
}

.common-more-btn img {
    width: calc(var(--ratio-size) * 14);
}

/*整个滚动条样式*/
.common-show-scrollbar::-webkit-scrollbar {
    width: 2px;
    height: 0px;
}

/*设置滚动条上的滚动滑块样式*/
.common-show-scrollbar::-webkit-scrollbar-thumb {
    background: transparent;
}

/*鼠标位于内容上时，滚动条样式*/
.common-show-scrollbar::-webkit-scrollbar {
    width: 2px;
    height: 0px;
    background: rgba(238, 238, 238, 1);
    border-radius: 1px;
}

/*鼠标位于内容上时，滚动滑块样式*/
.common-show-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(34, 103, 178, .5);
    border-radius: 2px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    padding-top: calc(var(--ratio-size) * 30);
    padding-bottom: calc(var(--ratio-size) * 30);
    background-color: #f4f4f4;
}

.breadcrumb a {
    position: relative;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumb a:not(:last-child)::after {
    content: '';
    /* position: absolute; */
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 8px;
    border-radius: 50%;
    background-color: #808080;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6;
    width: 100%;
    height: calc(var(--ratio-size) * 160);
    padding-top: calc(var(--ratio-size) * 25);
    background: #f5f6f6;
    color: #000;
    transition: all .8s;
}

.header .top-content {
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    padding-bottom: calc(var(--ratio-size) * 25);
}

.header .logo-content {
    display: flex;
    align-items: center;
}

.header .logo-content .logo-pic {
    display: flex;
    align-items: center;
    width: calc(var(--ratio-size) * 100);
}

.header .logo-content .stock-code {
    margin-left: calc(var(--ratio-size) * 35);
}

.header .top-content .function-content {
    display: flex;
}

.header .function-content a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .function-content a:not(:last-child) {
    margin-right: calc(var(--ratio-size) * 40);
    transition: all .5s;
}

.header .function-content a:not(:last-child):hover {
    color: #71b638;
}

.header .function-content .other-website {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(var(--ratio-size) * 18);
    /* margin-right: calc(var(--ratio-size) * 15); */
    /* border: 1px solid #fff; */
    border: 1px solid #dedede;
    border-radius: calc(var(--ratio-size) * 30);
    cursor: pointer;
}

.header .function-content .other-website .arrow-icon {
    margin-left: calc(var(--ratio-size) * 30);
}

.header .function-content .other-website ul {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    transform: translateY(calc(100% + 3px));
    min-width: 100%;
    /* padding: calc(var(--ratio-size) * 10) calc(var(--ratio-size) * 30); */
    background-color: #fff;
    border-radius: calc(var(--ratio-size) * 10);
    color: #000;
    line-height: 2;
    overflow: hidden;
}

.header .function-content .other-website ul a {
    padding: calc(var(--ratio-size) * 7) calc(var(--ratio-size) * 30);
    line-height: 1.2;
    transition: all .5s;
}

.header .function-content .other-website ul a:hover {
    background-color: #71b638;
    color: #fff;
}

.header .function-content .other-website ul li:first-child a {
    padding-top: calc(var(--ratio-size) * 10);
}

.header .function-content .other-website ul li:last-child a {
    padding-bottom: calc(var(--ratio-size) * 10);
}

.header .function-content .other-lang {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(var(--ratio-size) * 18);
    margin-left: 10px;
    /* margin-right: calc(var(--ratio-size) * 15); */
    /* border: 1px solid #fff; */
    border: 1px solid #dedede;
    border-radius: calc(var(--ratio-size) * 30);
    cursor: pointer;
}

.header .function-content .other-lang .arrow-icon {
    margin-left: calc(var(--ratio-size) * 30);
}

.header .function-content .other-lang ul {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    transform: translateY(calc(100% + 3px));
    min-width: 100%;
    /* padding: calc(var(--ratio-size) * 10) calc(var(--ratio-size) * 30); */
    background-color: #fff;
    border-radius: calc(var(--ratio-size) * 10);
    color: #000;
    line-height: 2;
    overflow: hidden;
}

.header .function-content .other-lang ul a {
    padding: calc(var(--ratio-size) * 7) calc(var(--ratio-size) * 30);
    line-height: 1.2;
    transition: all .5s;
}

.header .function-content .other-lang ul a:hover {
    background-color: #71b638;
    color: #fff;
}

.header .function-content .other-lang ul li:first-child a {
    padding-top: calc(var(--ratio-size) * 10);
}

.header .function-content .other-lang ul li:last-child a {
    padding-bottom: calc(var(--ratio-size) * 10);
}

.header .function-content .lang {
    width: calc(var(--ratio-size) * 48);
    /* border: 1px solid #fff; */
    border: 1px solid #dedede;
    border-radius: 50%;
    transition: all .5s;
}

.header .function-content .lang:hover {
    background-color: #71b638;
    color: #fff;
}

.header .bottom-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.header .bottom-content .nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* border-top: 1px solid #fff; */
    border-top: 1px solid #dedede;
    width: calc((100% - var(--ratio-size) * 47 * 4) / 5);
}

.header .bottom-content .first-floor {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .bottom-content .first-floor a {
    flex: 1;
    display: inline-block;
    /* width: 100%; */
    padding-top: calc(var(--ratio-size) * 15);
    padding-bottom: calc(var(--ratio-size) * 20);
}

.header .bottom-content .first-floor .arrow-icon {
    padding-top: calc(var(--ratio-size) * 10);
}

.header .bottom-content .nav .first-ul {
    position: absolute;
    bottom: 0;
    transform: translate(-50%, calc(100% - 1px));
    display: none;
    width: 120%;
    left: 50%;
    background-color: #fff;
    transition: all .5s;
    box-shadow: 0 0 4px #f1f1f1;
}

.header .bottom-content .nav .first-ul li:first-child a {
    padding-top: calc(var(--ratio-size) * 15);
}

.header .bottom-content .nav .first-ul li:last-child a {
    padding-bottom: calc(var(--ratio-size) * 15);
}

.header .bottom-content .nav .first-ul a {
    display: inline-block;
    width: 100%;
    padding: calc(var(--ratio-size) * 7) 10%;
    transition: all .5s;
}

.header .bottom-content .nav .first-ul a:hover {
    background-color: #71b638;
    color: #fff;
}

.header .bottom-content .nav .second-floor {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(100%);
    width: 100%;
    background: #fff;
}

.header .index-hidden {
    display: block;
}

.header .index-show {
    display: none;
}

.header .phone-menu {
    display: none;
    flex-direction: column;
    justify-content: space-evenly;
    width: 25px;
}

.header .phone-menu span {
    width: 100%;
    height: 3px;
    background-color: #00913a;
}

.phone-menu-left,
.phone-menu-right {
    display: none;
}

/* 首页顶部菜单栏 */
.header.index-header {
    background: transparent;
    color: #fff;
}

.header.index-header .bottom-content .nav ul {
    box-shadow: none;
}

.header.index-header .index-show {
    display: block;
}

.header.index-header .index-hidden {
    display: none;
}

.header.index-header .bottom-content .nav ul {
    background-color: transparent;
}

.sidebar-container {
    position: fixed;
    right: calc(var(--ratio-size) * 30);
    bottom: 50%;
    z-index: 5;
    background-color: #fff;
    border-radius: calc(var(--ratio-size) * 40);
    text-align: center;
    /* overflow: hidden; */
    box-shadow: 0 0 3px #c1c1c1;
}

.sidebar-container .query {
    position: relative;
    padding-top: calc(var(--ratio-size) * 24);
    padding-bottom: calc(var(--ratio-size) * 14);
    padding-left: calc(var(--ratio-size) * 8);
    padding-right: calc(var(--ratio-size) * 8);
    border-top-left-radius: calc(var(--ratio-size) * 40);
    border-top-right-radius: calc(var(--ratio-size) * 40);
    border-bottom-left-radius: calc(var(--ratio-size) * 40);
    border-bottom-right-radius: calc(var(--ratio-size) * 40);
}

.sidebar-container .query a {
    position: relative;
    z-index: 2;
}

.sidebar-container .query .qr {
    position: absolute;
    top: 50%;
    left: 0;
    /* transform: translate(calc(-100% - 5px), -50%); */
    transform: translateY(-50%);
    width: calc(var(--ratio-size) * 100);
    height: calc(var(--ratio-size) * 100);
    padding: 5px;
    border-radius: calc(var(--ratio-size) * 10);
    background-color: #fff;
    opacity: 0;
    transition: all .5s;
}

.sidebar-container .query .qr::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateX(100%);
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: #fff;
}

.sidebar-container .logo-pic {
    position: relative;
    width: calc(var(--ratio-size) * 60);
    padding-top: calc(var(--ratio-size) * 12);
    padding-bottom: calc(var(--ratio-size) * 5);
    padding-left: calc(var(--ratio-size) * 8);
    padding-right: calc(var(--ratio-size) * 8);
    border-top-left-radius: calc(var(--ratio-size) * 40);
    border-top-right-radius: calc(var(--ratio-size) * 40);
    border-bottom-left-radius: calc(var(--ratio-size) * 40);
    border-bottom-right-radius: calc(var(--ratio-size) * 40);
}

.sidebar-container .top {
    padding-top: calc(var(--ratio-size) * 14);
    padding-bottom: calc(var(--ratio-size) * 10);
    padding-left: calc(var(--ratio-size) * 8);
    padding-right: calc(var(--ratio-size) * 8);
    overflow: hidden;
    border-bottom-left-radius: calc(var(--ratio-size) * 40);
    border-bottom-right-radius: calc(var(--ratio-size) * 40);
}

.sidebar-container .icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ratio-size) * 24);
    font-size: calc(var(--ratio-size) * 14);
    color: #4c4c4c;
    margin: auto;
}

.sidebar-container .top img {
    max-width: calc(var(--ratio-size) * 18);
}

.sidebar-container img {
    width: auto;
    max-width: 100%;
}

.sidebar-container p {
    margin-top: calc(var(--ratio-size) * 6);
}

.sidebar-container .default-hidden {
    position: absolute;
    top: 0;
    opacity: 0;
    transition: all .5s;
}

.sidebar-container .default-show {
    transition: all .5s;
}

.sidebar-container>div {
    transition: all .5s;
}

.sidebar-container>div:not(.logo-pic):hover {
    background-color: #2655a8;
    color: #fff;
    cursor: pointer;
}

.sidebar-container>div:hover .default-hidden {
    opacity: 1;
}

.sidebar-container>div:hover .default-show {
    opacity: 0;
}



.modules-content .switch-product {
    display: flex;
    justify-content: center;
    background-color: #fff;
    position: relative;
}

.modules-content .switch-product .product-item {
    width: calc(var(--ratio-size) * 320);
    padding: calc(var(--ratio-size) * 18) 0;
    text-align: center;
    cursor: pointer;
    transition: all .5s;
}

.modules-content .switch-product .product-item .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--ratio-size) * 150);
    height: calc(var(--ratio-size) * 80);
    margin: 0 auto;
}

.modules-content .switch-product .product-item .icon img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

.modules-content .switch-product .product-item.active {
    background-image: linear-gradient(to top, rgba(227, 241, 216, 1), rgba(227, 241, 216, 0));
    color: #60a527;
}

.modules-content .switch-product .product-item:hover {
    background-image: linear-gradient(to top, rgba(227, 241, 216, 1), rgba(227, 241, 216, 0));
    color: #60a527;
}

.modules-content .switch-product .common-m-text {
    margin-top: calc(var(--ratio-size) * 4);
}

.switch-product .link {
    position: absolute;
    right: calc(var(--ratio-size)* 240);
    bottom: 10px;
}

.switch-product .link .link-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: calc(var(--ratio-size)* 120);
    height: auto;
    padding: calc(var(--ratio-size)* 5) calc(var(--ratio-size)* 15);
    border-radius: calc(var(--ratio-size)* 40);
    border: 1px solid #dedede;
    cursor: pointer;
}

.switch-product .link .link-btn:hover{
    background-color: #71b638;
    color: #fff;
    border-color: #71b638;
}

.modules-content .product-content {
    padding-top: calc(var(--ratio-size) * 50);
    background-color: #f4f4f4;
}

.modules-content .switch-type {
    display: flex;
    justify-content: center;
}

.modules-content .switch-type .type-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: calc(var(--ratio-size) * 120);
    height: calc(var(--ratio-size) * 40);
    padding: calc(var(--ratio-size) * 15);
    margin: 0 5px;
    border-radius: calc(var(--ratio-size) * 40);
    border: 1px solid #dedede;
    cursor: pointer;
    transition: all .5s;
}

.modules-content .switch-type .type-item.active {
    background-color: #71b638;
    color: #fff;
    border-color: #71b638;
}

.modules-content .switch-type .type-item:hover {
    background-color: #71b638;
    color: #fff;
    border-color: #71b638;
}


.modules-content .product-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--ratio-size) * 60);
}

.modules-content .product-list .product-item {
    position: relative;
    width: calc((100% - var(--ratio-size) * 120) / 3);
    padding-bottom: calc(var(--ratio-size) * 40);
    margin-bottom: calc(var(--ratio-size) * 50);
    background-color: #ebf0f5;
    text-align: center;
    overflow: hidden;
}

.modules-content .product-list .product-item .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.1);
    transition: all .5s;
}

.modules-content .product-list .product-item .bg img {
    height: 100%;
    object-fit: cover;
}

.modules-content .product-list .product-item a:not(.wfEditorMode) {
    position: relative;
    /* display: inline-block; */
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.modules-content .product-list .product-item:nth-child(3n + 2) {
    margin-left: calc(var(--ratio-size) * 60);
    margin-right: calc(var(--ratio-size) * 60);
}

.modules-content .product-list .product-item .text {
    flex: 1;
    padding: calc(var(--ratio-size) * 28);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.modules-content .product-list .product-item .name {
    font-size: calc(var(--ratio-size) * 24);
    font-weight: bold;
    color: #3473b4;
    transition: all .5s;
}

.modules-content .product-list .product-item .param {
    margin-top: calc(var(--ratio-size) * 20);
    transition: all .5s;
}

.modules-content .product-list .product-item .param .common-l-text {
    font-weight: bold;
}

.modules-content .product-list .product-item .pic {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--ratio-size) * 425);
    margin-top: calc(var(--ratio-size) * 36);
}

.modules-content .product-list .product-item .pic img {
    width: auto;
    max-width: 75%;
    max-height: 100%;
    /* height: calc(var(--ratio-size) * 425); */
}

.modules-content .product-list .product-item:hover .bg {
    opacity: 1;
    transform: scale(1);
}

.modules-content .product-list .product-item:hover .name {
    color: #fff;
}

.modules-content .product-list .product-item:hover .param {
    color: #fff;
}

.modules-content .breadcrumb {
    padding-top: calc(var(--ratio-size) * 20);
    padding-bottom: calc(var(--ratio-size) * 30);
    background-color: #f4f4f4;
}

.product-dialog {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 7;
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .2);
}

.product-dialog .dialog-main {
    position: relative;
    display: flex;
    width: 100%;
    height: calc(var(--ratio-size) * 790);
    margin: auto;
    background-color: #fff;
}

.product-dialog .dialog-pic {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 50%;
    padding: 0 calc(var(--ratio-size) * 100);
    padding-top: calc(var(--ratio-size) * 80);
    padding-bottom: calc(var(--ratio-size) * 100);
    margin-top: 0;
    background-color: #ebf0f5;
}

.product-dialog .dialog-pic .text-content {
    text-align: center;
}

.product-dialog .dialog-pic .text-content .title {
    font-size: calc(var(--ratio-size) * 24);
    color: #3473b4;
    font-weight: bold;
}

.product-dialog .dialog-pic .text-content .num {
    margin-top: calc(var(--ratio-size) * 20);
    font-size: calc(var(--ratio-size) * 18);
    font-weight: bold;
}

.product-dialog .dialog-pic .text-content .dialog-text {
    font-size: calc(var(--ratio-size) * 14);
}

.product-dialog .dialog-pic .text-content .product-img {
    width: 100%;
    height: calc(var(--ratio-size) * 420);
    margin-top: calc(var(--ratio-size) * 50);
}

.product-dialog .dialog-pic .text-content .product-img img {
    width: auto;
    max-width: 100%;
    max-height: calc(var(--ratio-size) * 420);
}

.product-dialog .right {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 50%;
    padding-left: calc(var(--ratio-size) * 50);
    padding-right: calc(var(--ratio-size) * 40);
    padding-top: calc(var(--ratio-size) * 80);
    padding-bottom: calc(var(--ratio-size) * 60);
}

.product-dialog .phone-close-btn {
    display: none;
}

.product-dialog .right .dialog-title {
    font-size: calc(var(--ratio-size) * 30);
    font-weight: bold;
    line-height: 1;
    text-align: left;
}

.product-dialog .right .close-btn {
    position: absolute;
    top: calc(var(--ratio-size) * 20);
    right: calc(var(--ratio-size) * 20);
    width: calc(var(--ratio-size) * 42);
    height: calc(var(--ratio-size) * 42);
    border-radius: 50%;
    cursor: pointer;
    transition: all .5s;
}

.product-dialog .right .close-btn:hover {
    transform: translateY(-5%) scale(1.1);
    box-shadow: 1px 2px 3px #c1c1c1;
}

.product-dialog .right .download-list {
    padding-right: calc(var(--ratio-size) * 10);
    margin-top: calc(var(--ratio-size) * 40);
    overflow: auto;
}

[data-lenis-prevent] {
    overscroll-behavior: contain;
}

.product-dialog .right .download-list .item {
    position: relative;
    cursor: pointer;
}

.product-dialog .right .download-list .item:not(:first-child) {
    margin-top: calc(var(--ratio-size) * 10);
}

.product-dialog .right .download-list .item .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: calc(var(--ratio-size) * 20) calc(var(--ratio-size) * 30);
    background-color: #ebf0f5;
    font-size: calc(var(--ratio-size) * 22);
    transition: all .5s;
}

.product-dialog .right .download-list .item .top:hover {
    transform: translateY(-5%);
    box-shadow: 0 2px 4px #5c5c5c;
}

.product-dialog .right .download-list .item .top .icon {
    position: relative;
    width: calc(var(--ratio-size) * 32);
    height: calc(var(--ratio-size) * 32);
}

.product-dialog .right .download-list .item .top .icon .default-hidden {
    position: absolute;
    left: 0;
    opacity: 0;
}

.product-dialog .right .download-list .item .top.active .default-hidden {
    opacity: 1;
}

.product-dialog .right .download-list .item .top.active .default-show {
    opacity: 0;
}

.product-dialog .right .download-list ul {
    display: none;
}

.product-dialog .right .download-list ul a.wfEditorMode {
    position: relative;
    z-index: 3;
}

.product-dialog .right .download-list .item li a:not(.wfEditorMode) {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: calc(var(--ratio-size) * 20) calc(var(--ratio-size) * 30);
    border-bottom: 1px solid #e5e5e5;
}

.product-dialog .right .download-list .item li a p {
    transition: all .5s;
    text-align: left;
}

.product-dialog .right .download-list .item li .download-left,
.product-dialog .right .download-list .item li .download-right {
    display: flex;
    align-items: center;
}

.product-dialog .right .download-list .item li .download-left .dot {
    width: 4px;
    height: 4px;
    margin-right: calc(var(--ratio-size) * 8);
    background-color: #2573c4;
}

.product-dialog .right .download-list .item li .download-right .icon {
    position: relative;
    width: calc(var(--ratio-size) * 16);
    /* height: calc(var(--ratio-size) * 15); */
    margin-left: calc(var(--ratio-size) * 10);
}

.product-dialog .right .download-list .item li .download-right .icon .default-hidden {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.product-dialog .right .download-list .item li a:hover p {
    color: #2573c4;
}

.product-dialog .right .download-list .item li a:hover .download-right .icon .default-hidden {
    opacity: 1;
}

.product-dialog .right .download-list .item li a:hover .download-right .icon .default-show {
    opacity: 0;
}




.footer {
    /* padding-left: calc(var(--ratio-size) * 240); */
    background-color: #e6e8eb;
}

.footer .top-content {
    display: flex;
}

.footer .left-content {
    width: calc(var(--ratio-size) * 480);
    padding-top: calc(var(--ratio-size) * 80);
    margin-left: calc(var(--ratio-size) * 240);
    border-right: 1px solid rgba(0, 0, 0, .2);
}

.footer .logo {
    width: calc(var(--ratio-size) * 150);
}

.footer .left-content .message {
    margin-top: calc(var(--ratio-size) * 200);
    color: #666666;
}

.footer .left-content .message .name {
    color: #000;
}

.footer .left-content .message .address {
    margin-top: calc(var(--ratio-size) * 25);
}

.footer .left-content .message .tel {
    margin-top: calc(var(--ratio-size) * 20);
}

.footer .right-content {
    flex: 1;
    padding-top: calc(var(--ratio-size) * 80);
}

.footer .right-content .nav-content ul {
    display: flex;
    padding-left: calc(var(--ratio-size) * 80);
    line-height: 1;
}

.footer .right-content .nav-content ul li:not(:last-child) {
    margin-right: calc(var(--ratio-size) * 140);
}

.footer .right-content .nav-content a {
    display: block;
    /* font-size: calc(var(--ratio-size) * 14); */
    font-size: calc(14rem / 16);
    color: #666666;
}

.footer .right-content .nav-content .common-m-title {
    margin-bottom: calc(var(--ratio-size) * 30);
    font-size: calc(var(--ratio-size) * 20);
    color: #000;
}

.footer .right-content .nav-content a:not(.common-m-title) {
    position: relative;
    margin-bottom: calc(var(--ratio-size) * 15);
    transition: all .5s;
}

.footer .right-content .nav-content a:not(.common-m-title)::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #71b638;
    transition: all .5s;
}

.footer .right-content .nav-content a:not(.common-m-title):hover {
    color: #71b638;
}

.footer .right-content .nav-content a:not(.common-m-title):hover::before {
    width: 100%;
}

.footer .right-content .nav-bottom {
    display: flex;
    height: calc(var(--ratio-size) * 240);
    margin-top: calc(var(--ratio-size) * 60);
    border-top: 1px solid rgba(0, 0, 0, .2);
}

.footer .right-content .matrix {
    display: flex;
    align-items: center;
    width: calc(var(--ratio-size) * 600);
    padding: 0 calc(var(--ratio-size) * 80);
    border-right: 1px solid rgba(0, 0, 0, .2);
}

.footer .right-content .matrix-main {
    width: 100%;
}

.footer .right-content .matrix .select {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: calc(var(--ratio-size) * 10);
    margin-top: calc(var(--ratio-size) * 30);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    cursor: pointer;
}

.footer .right-content .matrix .select .default-website {
    color: #808080;
}

.footer .right-content .matrix .select img {
    width: 11px;
    height: 11px;
    transform: rotate(-90deg);
}

.footer .right-content .matrix .select ul {
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(calc(100% + 5px));
    width: 100%;
    background-color: #fff;
    border-radius: calc(var(--ratio-size) * 10);
    overflow: hidden;
}

.footer .right-content .matrix .select ul a {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 3px 5px;
    color: #808080;
    transition: all .5s;
}

.footer .right-content .matrix .select ul li:not(:last-child) a {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.footer .right-content .matrix .select ul a:hover {
    background-color: #71b638;
    color: #fff;
}

.footer .right-content .logo-wall {
    display: flex;
    align-items: center;
    padding-left: calc(var(--ratio-size) * 80);
}

.footer .right-content .logo-list {
    display: flex;
    margin-top: calc(var(--ratio-size) * 20);
}

.footer .right-content .logo-list .logo-item {
    width: calc(var(--ratio-size) * 40);
    margin-right: calc(var(--ratio-size) * 20);
}

.footer .bottom-content {
    display: flex;
    justify-content: space-between;
    padding-top: calc(var(--ratio-size) * 30);
    padding-bottom: calc(var(--ratio-size) * 30);
    background-color: #2655a8;
    font-size: calc(var(--ratio-size) * 14);
    color: #fff;
}

.footer .bottom-content .right a:not(:last-child) {
    margin-right: calc(var(--ratio-size) * 30);
}

.solution-container {
    overflow: hidden;
}

.solution-container .switch-day-night {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* height: calc(var(--ratio-size) * 1900); */
    padding-top: calc(var(--ratio-size) * 99);
}

.solution-container .switch-day-night .bg-night {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    transform: rotate(180deg) scale(3.5);
    opacity: 0;
    /* animation: rotateFull 3s forwards; */
}

.solution-container .switch-day-night .bg-night img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes rotateFull {
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

.solution-container .switch-day-night .common-xl-title {
    position: relative;
    z-index: 2;
    text-align: center;
}

.solution-container .switch-day-night .switch-btn {
    position: relative;
    z-index: 2;
    width: calc(var(--ratio-size) * 100);
    height: calc(var(--ratio-size) * 36);
    margin: 0 auto;
    margin-top: calc(var(--ratio-size) * 50);
    background-color: #60a527;
    border-radius: calc(var(--ratio-size) * 40);
}

.solution-container .switch-day-night .switch-btn .icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-5%, -50%);
    width: calc(var(--ratio-size) * 50);
    height: calc(var(--ratio-size) * 50);
    padding: calc(var(--ratio-size) * 10);
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 1px 1px 4px #939e8b;
    cursor: pointer;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.solution-container .switch-btn .icon .moon-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.5);
    width: auto;
    max-height: 80%;
    opacity: 0;
}

.solution-container .home-night {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    opacity: 0;
}

.solution-container .home {
    position: relative;
    width: calc(var(--ratio-size) * 1513);
    padding-bottom: calc(var(--ratio-size) * 470);
    margin: 0 auto;
    margin-top: calc(var(--ratio-size) * 20);
}

.solution-container .home .item {
    position: absolute;
}

.solution-container .home .more-btn {
    width: calc(var(--ratio-size) * 32);
    height: calc(var(--ratio-size) * 32);
}


.solution-container .home .indicate {
    position: absolute;
    z-index: 3;
}

.solution-container .home .indicate .dot {
    position: absolute;
    display: inline-block;
    width: calc(var(--ratio-size) * 10);
    height: calc(var(--ratio-size) * 10);
    border-radius: 50%;
    background-color: #6acd18;
    transform-origin: center;
}

.solution-container .home .indicate .dot:nth-child(1) {
    animation: dotAn 2s linear infinite;
}

.solution-container .home .indicate .dot:nth-child(1) {
    animation: dotAn 2s linear infinite;
}

.solution-container .home .indicate .dot:nth-child(2) {
    animation: dotAn 2s linear -1s infinite;
}

.solution-container .home .indicate.centralized-dot-1 {
    top: calc(var(--ratio-size) * 717);
    left: calc(var(--ratio-size) * 407);
}

.solution-container .home .indicate.centralized-dot-1 .line {
    position: absolute;
    bottom: calc(var(--ratio-size) * -6);
    right: 0;
    width: calc(var(--ratio-size) * 172);
    height: calc(var(--ratio-size) * 123);
}

.solution-container .home .centralized-item-1 {
    top: calc(var(--ratio-size) * 463);
}

.solution-container .home .indicate.centralized-dot-2 {
    top: calc(var(--ratio-size) * 440);
    left: calc(var(--ratio-size) * 540);
}

.solution-container .home .indicate.centralized-dot-2 .line {
    position: absolute;
    bottom: calc(var(--ratio-size) * -6);
    left: calc(var(--ratio-size) * 4);
    width: calc(var(--ratio-size) * 109);
    height: calc(var(--ratio-size) * 230);
}

.solution-container .home .centralized-item-2 {
    top: calc(var(--ratio-size) * 90);
    left: calc(var(--ratio-size) * 620);
}

.solution-container .home .indicate.centralized-dot-3 {
    top: calc(var(--ratio-size) * 717);
    left: calc(var(--ratio-size) * 630);
}

.solution-container .home .indicate.centralized-dot-3 .line {
    position: absolute;
    bottom: calc(var(--ratio-size) * -6);
    left: calc(var(--ratio-size) * 7);
    width: calc(var(--ratio-size) * 616);
    height: calc(var(--ratio-size) * 66);
}

.solution-container .home .centralized-item-3 {
    top: calc(var(--ratio-size) * 475);
    right: 0;
}


.solution-container .home .indicate.ic-dot-1 {
    top: calc(var(--ratio-size) * 675);
    left: calc(var(--ratio-size) * 200);
}

.solution-container .home .indicate.ic-dot-1 .line {
    position: absolute;
    bottom: calc(var(--ratio-size) * -6);
    right: 0;
    width: calc(var(--ratio-size) * 61);
    height: calc(var(--ratio-size) * 278);
}

.solution-container .home .ic-item-1 {
    top: calc(var(--ratio-size) * 280);
    left: calc(var(--ratio-size) * 50);
}

.solution-container .home .indicate.ic-dot-2 {
    top: calc(var(--ratio-size) * 560);
    left: calc(var(--ratio-size) * 505);
}

.solution-container .home .indicate.ic-dot-2 .line {
    position: absolute;
    bottom: 0;
    left: calc(var(--ratio-size) * 5);
    width: calc(var(--ratio-size) * 109);
    height: calc(var(--ratio-size) * 238);
}

.solution-container .home .ic-item-2 {
    top: calc(var(--ratio-size) * 180);
    left: calc(var(--ratio-size) * 600);
}

.solution-container .home .indicate.ic-dot-3 {
    top: calc(var(--ratio-size) * 710);
    right: calc(var(--ratio-size) * 235);
}

.solution-container .home .indicate.ic-dot-3 .line {
    position: absolute;
    bottom: calc(var(--ratio-size) * -5);
    left: calc(var(--ratio-size) * 5);
    width: calc(var(--ratio-size) * 60);
    height: calc(var(--ratio-size) * 277);
}

.solution-container .home .ic-item-3 {
    top: calc(var(--ratio-size) * 280);
    right: calc(var(--ratio-size) * 50);
}


.solution-container .home .item {
    position: absolute;
    z-index: 4;
    width: calc(var(--ratio-size) * 300);
    padding-top: calc(var(--ratio-size) * 40);
    padding-left: calc(var(--ratio-size) * 30);
    padding-right: calc(var(--ratio-size) * 30);
    padding-bottom: calc(var(--ratio-size) * 20);
    border: 1px solid #fff;
    border-radius: calc(var(--ratio-size) * 20);
    box-shadow: 0 1px 3px #c1c1c1;
    background-image: linear-gradient(to bottom right, #edf1f6, #fafbfc);
}

.solution-container .home .item .pic {
    position: absolute;
    left: calc(var(--ratio-size) * 30);
    top: calc(var(--ratio-size) * 30);
    transform: translateY(-100%);
}

.solution-container .home .item .pic img {
    width: auto;
    max-width: calc(var(--ratio-size) * 124);
    max-height: calc(var(--ratio-size) * 100);
}

.solution-container .home .item .title {
    font-size: calc(var(--ratio-size) * 24);
    font-weight: bold;
}

.solution-container .home .item .text {
    margin-top: calc(var(--ratio-size) * 8);
    font-size: calc(var(--ratio-size) * 16);
    color: #333333;
}

.solution-container .home .item .more-icon {
    width: calc(var(--ratio-size) * 30);
    height: calc(var(--ratio-size) * 30);
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 3px #c1c1c1;
    margin-top: calc(var(--ratio-size) * 8);
    font-size: 0;
}

.solution-container .home .item.energy {
    top: calc(var(--ratio-size) * 518);
}

.solution-container .home .item.system {
    top: calc(var(--ratio-size) * 200);
    left: calc(var(--ratio-size) * 140);
}

.solution-container .home .item.pv {
    top: calc(var(--ratio-size) * 100);
    left: calc(var(--ratio-size) * 640);
}

.solution-container .home .item.inverter {
    top: calc(var(--ratio-size) * 220);
    left: calc(var(--ratio-size) * 1080);
}

.solution-container .home .item.hems {
    top: calc(var(--ratio-size) * 500);
    right: calc(var(--ratio-size) * 0);
}

.solution-container .home .indicate.energy {
    top: calc(var(--ratio-size) * 720);
    left: calc(var(--ratio-size) * 455);
}

.solution-container .home .indicate.system {
    top: calc(var(--ratio-size) * 450);
    left: calc(var(--ratio-size) * 405);
}

.solution-container .home .indicate.pv {
    top: calc(var(--ratio-size) * 450);
    left: calc(var(--ratio-size) * 545);
}

.solution-container .home .indicate.inverter {
    top: calc(var(--ratio-size) * 650);
    left: calc(var(--ratio-size) * 640);
}

.solution-container .home .indicate.hems {
    top: calc(var(--ratio-size) * 700);
    right: calc(var(--ratio-size) * 620);
}


.solution-container .home .indicate.system .line img {
    width: 100%;
    height: 100%;
}

.solution-container .home .indicate.energy .line {
    position: absolute;
    bottom: calc(var(--ratio-size) * -5);
    left: 0;
    transform: translateX(-100%);
    width: calc(var(--ratio-size) * 213);
    height: calc(var(--ratio-size) * 73);
}

.solution-container .home .indicate.system .line {
    position: absolute;
    bottom: 0;
    left: calc(var(--ratio-size) * 5);
    width: 1px;
    height: calc(var(--ratio-size) * 105);
}

.solution-container .home .indicate.pv .line {
    position: absolute;
    bottom: 0;
    left: calc(var(--ratio-size) * 5);
    width: calc(var(--ratio-size) * 109);
    height: calc(var(--ratio-size) * 230);
}

.solution-container .home .indicate.inverter .line {
    position: absolute;
    bottom: calc(var(--ratio-size) * -5);
    left: calc(var(--ratio-size) * 5);
    width: calc(var(--ratio-size) * 475);
    height: calc(var(--ratio-size) * 277);
}

.solution-container .home .indicate.hems .line {
    position: absolute;
    bottom: calc(var(--ratio-size) * -5);
    left: calc(var(--ratio-size) * 5);
    width: calc(var(--ratio-size) * 365);
    height: calc(var(--ratio-size) * 66);
}

.solution-container .home .sun {
    position: absolute;
    top: calc(var(--ratio-size) * 60);
    right: calc(var(--ratio-size) * 80);
    width: calc(var(--ratio-size) * 67);
    height: calc(var(--ratio-size) * 67);
    background-color: #f5c534;
    border-radius: 50%;
}

.solution-container .home .sun-out {
    position: absolute;
    width: calc(var(--ratio-size) * 67);
    height: calc(var(--ratio-size) * 67);
    background-color: #f5c534;
    border-radius: 50%;
    animation: sunAn 6s infinite;
}

.solution-container .home .sun-out:nth-child(2) {
    animation-delay: -2s;
}

.solution-container .home .sun-out:nth-child(3) {
    animation-delay: -4s;
}

.solution-container .home .sun-main {
    position: absolute;
    width: calc(var(--ratio-size) * 67);
    height: calc(var(--ratio-size) * 67);
    background-color: #f5c534;
    border-radius: 50%;
}

@keyframes dotAn {
    to {
        scale: 5;
        opacity: 0;
    }
}

@keyframes sunAn {
    to {
        scale: 2.5;
        opacity: 0;
    }
}


.solution-container .hybrid-solar {
    position: absolute;
    top: calc(var(--ratio-size) * -350);
    /* transform: translateY(350px); */
    display: flex;
    min-height: calc(var(--ratio-size) * 480);
    padding-left: calc(var(--ratio-size) * 240);
    color: #000;
}

.solution-container .hybrid-solar:hover .pic img {
    transform: scale(1.1);
}

.solution-container .hybrid-solar .pic {
    width: calc(var(--ratio-size) * 720);
    overflow: hidden;
}

.solution-container .hybrid-solar .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s;
}

.solution-container .hybrid-solar .text-content {
    flex: 1;
    padding: calc(var(--ratio-size) * 70);
    background-color: #fff;
}

.solution-container .hybrid-solar .text-content .description {
    margin-top: calc(var(--ratio-size) * 25);
    font-size: calc(var(--ratio-size) * 22);
}

.solution-container .hybrid-solar .text-content .text {
    margin-top: calc(var(--ratio-size) * 35);
    color: #333333;
}

.solution-container .system-highlights {
    position: relative;
    padding-top: calc(var(--ratio-size) * 300);
    padding-bottom: calc(var(--ratio-size) * 120);
    /* margin-top: calc(var(--ratio-size) * -135); */
    background-image: linear-gradient(to top, #17497b, #246fbd);
}

.solution-container .system-highlights .title {
    margin-bottom: calc(var(--ratio-size) * 40);
    font-size: calc(var(--ratio-size) * 30);
}

.solution-container .system-highlights .list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.solution-container .system-highlights .list .item {
    width: calc((100% - var(--ratio-size) * 60) / 3);
    min-height: calc(var(--ratio-size) * 240);
    padding: calc(var(--ratio-size) * 40);
    margin-bottom: calc(var(--ratio-size) * 30);
    transition: all .5s;
}

.solution-container .system-highlights .list .item:nth-child(3n+2) {
    margin-left: calc(var(--ratio-size) * 30);
    margin-right: calc(var(--ratio-size) * 30);
}

.solution-container .system-highlights .list .item:nth-child(even) {
    background-color: rgba(255, 255, 255, .25);
}

.solution-container .system-highlights .list .item:nth-child(odd) {
    background-color: rgba(255, 255, 255, .1);
}

.solution-container .system-highlights .list .item:hover {
    box-shadow: 0 2px 5px #1b3653;
    transform: translateY(-5%);
}

.solution-container .system-highlights .list .serial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ratio-size) * 40);
    height: calc(var(--ratio-size) * 40);
    border-radius: 50%;
    background-color: #71b638;
    font-size: calc(var(--ratio-size) * 14);
}

.solution-container .system-highlights .list .text {
    margin-top: calc(var(--ratio-size) * 30);
}

.solution-container .product-param {
    height: calc(var(--ratio-size) * 1400);
}

.solution-container .product-param .product-text {
    margin-top: calc(var(--ratio-size) * 100);
    text-align: center;
}

.solution-container .product-param .product-text .common-xl-title {
    font-weight: bold;
}

.solution-container .product-param .product-text .description {
    margin-top: calc(var(--ratio-size) * 30);
}

.solution-container .product-param .product-swiper {
    position: relative;
    /* height: calc(var(--ratio-size) * 660); */
    margin-top: calc(var(--ratio-size) * 50);
    overflow: hidden;
}

.solution-container .product-param .product-swiper .swiper-slide {
    width: 100%;
    height: 100%;
    padding-bottom: calc(var(--ratio-size) * 240);
}

.solution-container .product-param .product-button-prev,
.solution-container .product-param .product-button-next {
    position: absolute;
    top: 30%;
    z-index: 3;
    width: calc(var(--ratio-size) * 48);
    height: calc(var(--ratio-size) * 48);
    cursor: pointer;
}

.solution-container .product-param .product-swiper .default-hidden {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.solution-container .product-param .product-swiper .default-hidden,
.solution-container .product-param .product-swiper .default-show {
    transition: all .5s;
}

.solution-container .product-param .product-button-prev:hover .default-hidden,
.solution-container .product-param .product-button-next:hover .default-hidden {
    opacity: 1;
}

.solution-container .product-param .product-button-prev:hover .default-show,
.solution-container .product-param .product-button-next:hover .default-show {
    opacity: 0;
}

.solution-container .product-param .product-button-prev {
    left: 0;
}

.solution-container .product-param .product-button-next {
    right: 0;
}

.solution-container .product-param .swiper-slide {
    position: relative;
}

.solution-container .product-param .product-swiper .pic {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ratio-size) * 500);
    height: calc(var(--ratio-size) * 500);
    margin: 0 auto;
}

.solution-container .product-param .product-swiper .pic img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 calc(var(--ratio-size) * 30) 10px rgba(0, 0, 0, .5));
}

.solution-container .product-param .param-item {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: calc(var(--ratio-size) * 270);
    text-align: center;
    opacity: 0;
    transition: all 1s;
    /* animation: paramAn 2s linear alternate-reverse infinite; */
}

.solution-container .product-param .param-item .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--ratio-size) * 100);
    height: calc(var(--ratio-size) * 100);
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}

.solution-container .product-param .param-item .icon img {
    width: auto;
    max-width: 85%;
    max-height: 85%;
}

.solution-container .product-param .param-item p {
    margin-top: calc(var(--ratio-size) * 10);
}

.solution-container .product-param .swiper-slide.swiper-slide-active>.param-item {
    transition-delay: .5s;
}

.solution-container .product-param .swiper-slide.swiper-slide-active>.param-item:nth-of-type(2) {
    left: 8%;
    top: calc(var(--ratio-size) * 150);
    transform: translate(0);
    animation-delay: -1s;
    opacity: 1;
}

.solution-container .product-param .swiper-slide.swiper-slide-active>.param-item:nth-of-type(3) {
    left: 15%;
    top: calc(var(--ratio-size) * 460);
    transform: translate(0);
    animation-delay: -2s;
    /* transition-delay: .2s; */
    opacity: 1;
}

.solution-container .product-param .swiper-slide.swiper-slide-active>.param-item:nth-of-type(4) {
    left: 50%;
    top: calc(var(--ratio-size) * 530);
    transform: translateX(-50%);
    animation-name: param4An;
    animation-delay: -3s;
    /* transition-delay: .4s; */
    opacity: 1;
}

.solution-container .product-param .swiper-slide.swiper-slide-active>.param-item:nth-of-type(5) {
    left: 67%;
    top: calc(var(--ratio-size) * 460);
    transform: translate(0);
    animation-delay: -2s;
    /* transition-delay: .6s; */
    opacity: 1;
}

.solution-container .product-param .swiper-slide.swiper-slide-active>.param-item:nth-of-type(6) {
    left: 75%;
    top: calc(var(--ratio-size) * 150);
    transform: translate(0);
    animation-delay: -1s;
    /* transition-delay: .8s; */
    opacity: 1;
}

@keyframes paramAn {
    50% {
        transform: translateY(-10%);
    }

    100% {
        transform: translateY(10%);
    }
}

@keyframes param4An {
    50% {
        transform: translate(-50%, -10%);
    }

    100% {
        transform: translate(-50%, 10%);
    }
}

.solution-container .related-case {
    position: relative;
    padding-top: calc(var(--ratio-size) * 195);
    /* padding-bottom: calc(var(--ratio-size) * 100); */
    background-color: #f4f4f4;
}

.solution-container .related-case .service {
    position: absolute;
    top: calc(var(--ratio-size) * -380);
    width: calc(100% - var(--ratio-size) * 240);
    height: calc(var(--ratio-size) * 480);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.solution-container .related-case .service .left-text {
    width: calc(var(--ratio-size) * 960);
    height: 100%;
    padding-left: calc(var(--ratio-size) * 240);
    padding-top: calc(var(--ratio-size) * 70);
    padding-right: calc(var(--ratio-size) * 80);
    padding-bottom: calc(var(--ratio-size) * 20);
    background: url('../images/left_text_bg.png') no-repeat center/cover;
}

.solution-container .related-case .service .title {
    font-size: calc(var(--ratio-size) * 30);
    line-height: 1;
}

.solution-container .related-case .service .left-text ul {
    margin-top: calc(var(--ratio-size) * 50);
    border-top: 1px solid rgba(255, 255, 255, .5);
}

.solution-container .related-case .service .left-text li {
    display: flex;
    align-self: center;
    width: 100%;
    padding: calc(var(--ratio-size) * 18);
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}

.solution-container .related-case .service .left-text li .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ratio-size) * 32);
}

.solution-container .related-case .service .left-text li .icon img {
    width: auto;
    height: calc(var(--ratio-size) * 26);
}

.solution-container .related-case .service .left-text li p {
    margin-left: calc(var(--ratio-size) * 15);
}

.solution-container .related-case .case-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--ratio-size) * 50);
}

.solution-container .related-case .product-item {
    width: calc(var(--ratio-size) * 320);
    padding: calc(var(--ratio-size) * 18) 0;
    text-align: center;
    cursor: pointer;
}

.solution-container .related-case .product-item .icon {
    width: calc(var(--ratio-size) * 51);
    /* margin: 0 auto; */
}

.solution-container .related-case .product-item.active {
    background-image: linear-gradient(to top, rgba(227, 241, 216, 1), rgba(227, 241, 216, 0));
    color: #60a527;
}

.solution-container .related-case .product-item {
    position: relative;
    width: calc((100% - var(--ratio-size) * 120) / 3);
    padding-bottom: calc(var(--ratio-size) * 40);
    margin-bottom: calc(var(--ratio-size) * 50);
    background-color: #ebf0f5;
    text-align: center;
    overflow: hidden;
}

.solution-container .related-case .product-item .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.1);
    transition: all .5s;
}

.solution-container .related-case .product-item .bg img {
    height: 100%;
    object-fit: cover;
}

.solution-container .related-case .product-item a:not(.wfEditorMode) {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.solution-container .related-case .product-item:nth-child(3n + 2) {
    margin-left: calc(var(--ratio-size) * 60);
    margin-right: calc(var(--ratio-size) * 60);
}

.solution-container .related-case .product-item .text {
    padding: calc(var(--ratio-size) * 28);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.solution-container .related-case .product-item .name {
    font-size: calc(var(--ratio-size) * 24);
    font-weight: bold;
    color: #3473b4;
    transition: all .5s;
}

.solution-container .related-case .product-item .param {
    margin-top: calc(var(--ratio-size) * 20);
    transition: all .5s;
}

.solution-container .related-case .product-item .param .common-l-text {
    font-weight: bold;
}

.solution-container .related-case .product-item .pic {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--ratio-size) * 425);
    margin-top: calc(var(--ratio-size) * 36);
}

.solution-container .related-case .product-item .pic img {
    width: auto;
    max-width: 90%;
    max-height: 100%;
    /* height: calc(var(--ratio-size) * 425); */
}

.solution-container .related-case .product-item:hover .bg {
    opacity: 1;
    transform: scale(1);
}

.solution-container .related-case .product-item:hover .name {
    color: #fff;
}

.solution-container .related-case .product-item:hover .param {
    color: #fff;
}

.about-us-container {
    background-color: #f4f4f4;
}

.about-us-container .gcl-description {
    display: flex;
    padding-top: calc(var(--ratio-size) * 100);
    padding-bottom: calc(var(--ratio-size) * 100);
}

.about-us-container .gcl-description .left {
    flex: 1;
    padding-right: calc(var(--ratio-size) * 40);
}

.about-us-container .gcl-description .left .common-xl-title {
    font-weight: bold;
}

.about-us-container .gcl-description .right-text {
    width: calc(var(--ratio-size) * 700);
    color: #333333;
}

.about-us-container .gcl-description .text-content {
    width: 100%;
    /* height: calc(var(--ratio-size) * 165); */
    overflow: auto;
}

.about-us-container .gcl-description .common-expand-btn {
    margin-top: calc(var(--ratio-size) * 50);
}

.about-us-container .gcl-data {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: calc(var(--ratio-size) * 620);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.about-us-container .gcl-main {
    display: flex;
    flex-direction: column;
    width: calc(var(--ratio-size) * 670);
    border-left: 1px solid rgba(255, 255, 255, .5);
    visibility: visible !important;
}

.about-us-container .gcl-main .data-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: calc(var(--ratio-size) * 80);
    padding-right: calc(var(--ratio-size) * 75);
    font-size: calc(var(--ratio-size) * 18);
}

.about-us-container .gcl-main .data-item:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}

.about-us-container .gcl-main .data-item .num {
    display: flex;
    align-items: center;
    font-size: calc(var(--ratio-size) * 60);
}

.about-us-container .gcl-main .data-item .unit {
    margin-left: calc(var(--ratio-size) * 5);
    font-size: calc(var(--ratio-size) * 18);
}

.about-us-container .gcl-main .data-item .pic {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60%;
}

.about-us-container .gcl-main .data-item .pic img {
    width: auto;
    max-height: 100%;
    min-height: 75%;
}

.about-us-container .milestones {
    position: relative;
    margin-top: calc(var(--ratio-size) * 480);
}

.about-us-container .milestones .overview {
    position: absolute;
    top: calc(var(--ratio-size) * -360);
    left: 0;
    z-index: 3;
    display: flex;
    width: calc(100% - var(--ratio-size) * 240);
    height: calc(var(--ratio-size) * 720);
    background-color: #fff;
}

.about-us-container .milestones .overview .left-text {
    flex: 1;
    padding-top: calc(var(--ratio-size) * 100);
    padding-left: calc(var(--ratio-size) * 240);
    padding-right: calc(var(--ratio-size) * 80);
}

.about-us-container .milestones .overview .common-m-title {
    color: #666;
}

.about-us-container .milestones .overview .left-text .common-xl-title {
    font-weight: bold;
}

.about-us-container .milestones .overview .text-content {
    margin-top: calc(var(--ratio-size) * 25);
    color: #333;
}

.about-us-container .milestones .overview .pic {
    width: calc(var(--ratio-size) * 720);
}

.about-us-container .milestones .overview .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-us-container .milestones .overview .common-expand-btn {
    margin-top: calc(var(--ratio-size) * 60);
}

.about-us-container .milestones .overview .common-expand-btn a {
    display: flex;
    align-items: center;
}

.about-us-container .milestones-main {
    position: relative;
    padding-top: calc(var(--ratio-size) * 460);
    padding-bottom: calc(var(--ratio-size) * 50);
    background-image: linear-gradient(to top, #184b86, #2166ad);
}

.about-us-container .milestones-main .common-m-title p {
    padding-bottom: calc(var(--ratio-size) * 25);
    border-bottom: 1px solid #fff;
}

.about-us-container .milestones-main .milestones-swiper {
    position: relative;
    width: calc(var(--ratio-size) * 500);
    height: calc(var(--ratio-size) * 480);
    margin-left: calc(var(--ratio-size) * 620);
    margin-top: calc(var(--ratio-size) * 95);
    overflow: hidden;
}

.about-us-container .milestones-main .milestones-swiper .line-left {
    position: absolute;
    top: calc(var(--ratio-size) * 125);
    left: 0;
    width: 1px;
    height: calc(100% - var(--ratio-size) * 125);
    background-color: #fff;
    transition: all .5s;
}

/* .about-us-container .milestones-main .milestones-swiper::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    height: calc(100% - var(--ratio-size) * 125);
    border-left: 1px solid #fff;
} */

.about-us-container .milestones-main .milestones-swiper .year {
    font-size: calc(var(--ratio-size) * 80);
    font-weight: bold;
    line-height: 1;
}

.about-us-container .milestones-main .milestones-swiper .text {
    padding-left: calc(var(--ratio-size) * 40);
    margin-top: calc(var(--ratio-size) * 40);
}

.about-us-container .milestones-main .milestones-swiper .text strong {
    font-weight: bold;
}

.about-us-container .milestones-swiper .milestones-button-container {
    position: relative;
    z-index: 3;
    display: flex;
    margin-left: calc(var(--ratio-size) * 40);
    margin-top: calc(var(--ratio-size) * 30);
}

.about-us-container .milestones-swiper .milestones-button {
    position: relative;
    width: calc(var(--ratio-size) *50);
    height: calc(var(--ratio-size) *50);
    border-radius: 50%;
    cursor: pointer;
}

.about-us-container .milestones-swiper .milestones-button img {
    transition: all .5s;
}

.about-us-container .milestones-swiper .milestones-button .default-hidden {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.about-us-container .milestones-swiper .milestones-button-next {
    margin-left: calc(var(--ratio-size) * 10);
}

.about-us-container .milestones-swiper .milestones-button img:hover.default-hidden {
    opacity: 1;
}

.about-us-container .milestones-swiper .milestones-button img:hover.default-show {
    opacity: 0;
}

.about-us-container .milestones-main .particle-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(var(--ratio-size) * 800);
    overflow: hidden;
}

.about-us-container .year-swiper {
    width: 100%;
    height: calc(var(--ratio-size) * 300);
    margin-top: calc(var(--ratio-size) * -100);
    overflow: hidden;
}

.about-us-container .year-swiper .swiper-slide {
    text-align: center;
    transition: all .5s;
}

.about-us-container .year-swiper .dot {
    position: relative;
    width: calc(var(--ratio-size) * 30);
    height: calc(var(--ratio-size) * 30);
    border-radius: 50%;
    /* overflow: hidden; */
    background: radial-gradient(#71b638, #fff);
    margin: 0 auto;
    cursor: pointer;
}

.about-us-container .year-swiper .inside-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .5);
    /* transform: scale(2); */
    transition: all .5s;
}

.about-us-container .year-swiper .swiper-slide p {
    margin-top: calc(var(--ratio-size) * 10);
    font-size: calc(var(--ratio-size) * 18);
}

.about-us-container .year-swiper .swiper-slide-active {
    padding-top: calc(var(--ratio-size) * 100);
}

.about-us-container .year-swiper .swiper-slide-next {
    padding-top: calc(var(--ratio-size) * 30);
}

.about-us-container .year-swiper .swiper-slide-next+.swiper-slide+.swiper-slide {
    padding-top: calc(var(--ratio-size) * 10);
}

.about-us-container .year-swiper .swiper-slide-active .inside-dot {
    animation: scaleAn 2s infinite;
}

.about-us-container .year-swiper .swiper-slide-active .inside-dot:nth-child(2) {
    animation-delay: -.5s;
}

@keyframes scaleAn {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

.about-us-container .year-swiper .swiper-slide-active p {
    display: none;
}

.about-us-container .globalization {
    padding-top: calc(var(--ratio-size) * 100);
    background-color: #fff;
}

.about-us-container .globalization .common-m-title {
    padding-bottom: calc(var(--ratio-size) * 60);
}

.about-us-container .globalization .common-m-title p {
    padding-bottom: calc(var(--ratio-size) * 25);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    color: #666;
}

.about-us-container .globalization-main {
    display: flex;
    padding-left: calc(var(--ratio-size) * 240);
    padding-bottom: calc(var(--ratio-size) * 100);
}

.about-us-container .globalization-main .left {
    padding-right: calc(var(--ratio-size) * 50);
    border-right: 1px solid rgba(0, 0, 0, .2);
}

.about-us-container .globalization-main .left .common-xl-title {
    font-weight: bold;
}

.about-us-container .globalization-main .allocation-list {
    margin-top: calc(var(--ratio-size) * 30);
}

.about-us-container .globalization-main .allocation-item {
    display: flex;
    width: calc(var(--ratio-size) * 380);
    min-height: calc(var(--ratio-size) * 150);
    padding: calc(var(--ratio-size) * 25);
    border-radius: calc(var(--ratio-size) * 20);
    background-color: #fff;
    box-shadow: 0 1px 8px rgba(141, 141, 141, 0.2);
}

.about-us-container .globalization-main .allocation-item:not(:last-child) {
    margin-bottom: calc(var(--ratio-size) * 20);
}

.about-us-container .globalization-main .allocation-item .pic {
    width: calc(var(--ratio-size) * 59);
    margin-right: calc(var(--ratio-size) * 15);
}

.about-us-container .globalization-main .allocation-item .text-content {
    flex: 1;
}

.about-us-container .globalization-main .allocation-item .title {
    font-size: calc(var(--ratio-size) * 22);
}

.about-us-container .globalization-main .allocation-item .text {
    margin-top: calc(var(--ratio-size) * 10);
    font-size: calc(var(--ratio-size) * 14);
    color: #333;
}

.about-us-container .globalization-main .right-map {
    position: relative;
    flex: 1;
}

.about-us-container .globalization-main .right-map img {
    width: calc(var(--ratio-size) * 1129);
    margin-left: calc(var(--ratio-size) * -60);
}

.about-us-container .globalization-main .right-map .dot {
    position: absolute;
    z-index: 3;
    width: calc(var(--ratio-size) * 12);
    height: calc(var(--ratio-size) * 12);
    border-radius: 50%;
    background-color: #00913a;
}

.about-us-container .globalization-main .right-map .dot .inside-dot {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #00913a;
    animation: sunAn 3s infinite;
}

.about-us-container .globalization-main .right-map .dot:nth-child(1) {
    top: calc(var(--ratio-size) * 182);
    left: calc(var(--ratio-size) * 82);
}

.about-us-container .globalization-main .right-map .dot:nth-child(2) {
    top: calc(var(--ratio-size) * 295);
    left: calc(var(--ratio-size) * 158);
}

.about-us-container .globalization-main .right-map .dot:nth-child(3) {
    top: calc(var(--ratio-size) * 258);
    left: calc(var(--ratio-size) * 128);
}

.about-us-container .globalization-main .right-map .dot:nth-child(4) {
    top: calc(var(--ratio-size) * 376);
    left: calc(var(--ratio-size) * 307);
}

.about-us-container .globalization-main .right-map .dot:nth-child(5) {
    top: calc(var(--ratio-size) * 402);
    left: calc(var(--ratio-size) * 235);
}

.about-us-container .globalization-main .right-map .dot:nth-child(6) {
    top: calc(var(--ratio-size) * 85);
    left: calc(var(--ratio-size) * 570);
}

.about-us-container .globalization-main .right-map .dot:nth-child(7) {
    top: calc(var(--ratio-size) * 210);
    left: calc(var(--ratio-size) * 530);
}

.about-us-container .globalization-main .right-map .dot:nth-child(8) {
    top: calc(var(--ratio-size) * 300);
    left: calc(var(--ratio-size) * 400);
}

.about-us-container .globalization-main .right-map .dot:nth-child(9) {
    top: calc(var(--ratio-size) * 245);
    left: calc(var(--ratio-size) * 695);
}

.about-us-container .globalization-main .right-map .dot:nth-child(10) {
    top: calc(var(--ratio-size) * 270);
    left: calc(var(--ratio-size) * 766);
}

.about-us-container .globalization-main .right-map .dot:nth-child(11) {
    top: calc(var(--ratio-size) * 302);
    left: calc(var(--ratio-size) * 785);
}

.about-us-container .globalization-main .right-map .dot:nth-child(12) {
    top: calc(var(--ratio-size) * 191);
    left: calc(var(--ratio-size) * 918);
}

.about-us-container .globalization-main .right-map .dot:nth-child(13) {
    top: calc(var(--ratio-size) * 435);
    left: calc(var(--ratio-size) * 914);
}

.about-us-container .globalization-main .right-map .dot:nth-child(14) {
    top: calc(var(--ratio-size) * 102);
    left: calc(var(--ratio-size) * 498);
}

.about-us-container .globalization-main .right-map .dot:nth-child(15) {
    top: calc(var(--ratio-size) * 85);
    left: calc(var(--ratio-size) * 525);
}

.about-us-container .globalization-main .right-map .dot:nth-child(16) {
    top: calc(var(--ratio-size) * 100);
    left: calc(var(--ratio-size) * 518);
}

.about-us-container .globalization-main .right-map .dot:nth-child(17) {
    top: calc(var(--ratio-size) * 98);
    left: calc(var(--ratio-size) * 542);
}

.about-us-container .globalization-main .right-map .dot:nth-child(18) {
    top: calc(var(--ratio-size) * 128);
    left: calc(var(--ratio-size) * 555);
}

.about-us-container .globalization-main .right-map .dot:nth-child(19) {
    top: calc(var(--ratio-size) * 228);
    left: calc(var(--ratio-size) * 575);
}

.about-us-container .globalization-main .right-map .dot:nth-child(20) {
    top: calc(var(--ratio-size) * 133);
    left: calc(var(--ratio-size) * 720);
}

.about-us-container .globalization-main .right-map .dot:nth-child(21) {
    top: calc(var(--ratio-size) * 205);
    left: calc(var(--ratio-size) * 760);
}

.about-us-container .globalization-main .right-map .dot:nth-child(22) {
    top: calc(var(--ratio-size) * 250);
    left: calc(var(--ratio-size) * 780);
}

.about-us-container .globalization-main .right-map .map-message {
    margin-left: calc(var(--ratio-size) * 55);
    margin-top: calc(var(--ratio-size) * -40);
}

.about-us-container .globalization-main .right-map .map-message .map-title {
    margin-bottom: calc(var(--ratio-size) * 20);
    font-size: 16px;
    font-weight: bold;
}

.about-us-container .globalization-main .right-map .message-content {
    display: flex;
    font-size: 14px;
}

.about-us-container .globalization-main .right-map .message-content .message-right {
    margin-left: calc(var(--ratio-size) * 35);
}

.about-us-container .globalization-main .right-map .message-content .message-item {
    display: flex;
    align-items: center;
    /* width: 50%; */
}

.about-us-container .globalization-main .right-map .message-content p {
    flex: 1;
}

.about-us-container .globalization-main .right-map .message-content span {
    display: inline-block;
    width: calc(var(--ratio-size) * 12);
    height: calc(var(--ratio-size) * 12);
    margin-top: -3px;
    margin-right: calc(var(--ratio-size) * 5);
    border-radius: 50%;
}

.about-us-container .globalization-main .right-map .message-left .message-item:nth-child(1) span {
    background-color: #4d4d4d;
}

.about-us-container .globalization-main .right-map .message-left .message-item:nth-child(2) span {
    background-color: #662c91;
}

.about-us-container .globalization-main .right-map .message-left .message-item:nth-child(3) span {
    background-color: #006837;
}

.about-us-container .globalization-main .right-map .message-right .message-item:nth-child(1) span {
    background-color: #0070bb;
}

.about-us-container .globalization-main .right-map .message-right .message-item:nth-child(2) span {
    background-color: #4d4d4d;
}

.about-us-container .globalization-main .right-map .message-right .message-item:nth-child(3) span {
    background-color: #999999;
}


.about-us-container .corporate-culture .title-content {
    padding-top: calc(var(--ratio-size) * 100);
    text-align: center;
}

.about-us-container .corporate-culture .title-content .common-m-title {
    color: #666666;
}

.about-us-container .corporate-culture .title-content .common-xl-title {
    font-weight: bold;
}

.about-us-container .corporate-culture .culture-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: calc(var(--ratio-size) * 85);
}

.about-us-container .corporate-culture .culture-item {
    width: calc((100% - var(--ratio-size) * 30) / 2);
    min-height: calc(var(--ratio-size) * 445);
    padding: calc(var(--ratio-size) * 50) calc(var(--ratio-size) * 65);
    margin-bottom: calc(var(--ratio-size) * 30);
    border-radius: calc(var(--ratio-size) * 20);
    text-align: center;
    box-shadow: 0 0 5px rgba(100, 100, 100, .2);
}

.about-us-container .corporate-culture .culture-item:nth-child(4n + 1),
.about-us-container .corporate-culture .culture-item:nth-child(4n + 4) {
    background-image: linear-gradient(to right, #17497c, #246fbd);
}

.about-us-container .corporate-culture .culture-item:nth-child(4n + 2),
.about-us-container .corporate-culture .culture-item:nth-child(4n + 3) {
    background-color: #fff;
    color: #000;
}

.about-us-container .corporate-culture .culture-item .icon {
    position: relative;
    width: calc(var(--ratio-size) * 80);
    margin: 0 auto;
}

.about-us-container .corporate-culture .culture-item .title {
    margin-top: calc(var(--ratio-size) * 30);
    font-size: calc(var(--ratio-size) * 32);
    font-weight: bold;
}

.about-us-container .corporate-culture .culture-item .text {
    margin-top: calc(var(--ratio-size) * 20);
    font-size: calc(var(--ratio-size) * 20);
}

.about-us-container .corporate-culture .culture-item .icon::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: calc(var(--ratio-size) * 94);
    height: calc(var(--ratio-size) * 94);

    animation: fullRotateCultureAn 2s linear infinite;
    transform-origin: center;
}

.about-us-container .corporate-culture .culture-item:nth-child(4n + 1) .icon::before,
.about-us-container .corporate-culture .culture-item:nth-child(4n + 4) .icon::before {
    background: url('../images/culture_outside_white.png') no-repeat center/contain;
}

.about-us-container .corporate-culture .culture-item:nth-child(4n + 2) .icon::before,
.about-us-container .corporate-culture .culture-item:nth-child(4n + 3) .icon::before {
    background: url('../images/culture_outside_blue.png') no-repeat center/contain;
}

.about-us-container .breadcrumb {
    padding-top: calc(var(--ratio-size) * 130);
    padding-bottom: calc(var(--ratio-size) * 30);
}

.news-container {
    padding-top: calc(var(--ratio-size) * 60);
    background-color: #f4f4f4;
}

.news-container .condition {
    display: flex;
    justify-content: space-between;
    height: calc(48rem / 16);
    margin-bottom: calc(var(--ratio-size) * 40);
    font-size: 14px;
}

.news-container .condition .left {
    display: flex;
    align-items: center;
}

.news-container .condition .select-btn {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: calc(var(--ratio-size) * 30);
    padding-right: calc(var(--ratio-size) * 20);
    margin-right: calc(10rem / 16);
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: calc(30rem / 16);
    cursor: pointer;
}

.news-container .condition .select-btn img {
    width: calc(var(--ratio-size) * 11);
    margin-left: calc(var(--ratio-size) * 28);
}

.news-container .condition .select-btn ul {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(calc(100% + 5px));
    z-index: 3;
    width: 100%;
    background-color: #fff;
    border-radius: calc(var(--ratio-size) * 10);
    overflow: hidden;
}

.news-container .condition .select-btn ul a {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: calc(var(--ratio-size) * 5) 0;
    padding-left: calc(var(--ratio-size) * 20);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    transition: all .5s;
}

.news-container .condition .select-btn ul a:hover {
    background-color: #71b638;
    color: #fff;
}

.news-container .search-input {
    display: flex;
    align-items: center;
    padding-left: calc(var(--ratio-size) * 20);
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: calc(30rem / 16);
}

.news-container .search-input input {
    border: none;
    outline: none;
    background-color: transparent;
}

.news-container .search-input .text-input {
    padding-left: calc(var(--ratio-size) * 8);
}

.news-container .search-input .submit-input {
    display: flex;
    align-items: center;
    background-color: #71b638;
    height: 100%;
    padding: 0 calc(var(--ratio-size) * 37);
    color: #fff;
    border-radius: calc(30rem / 16);
    scale: 1.02;
}

.news-container .top-news {
    display: flex;
    width: calc(100% - var(--ratio-size) * 240);
    height: calc(var(--ratio-size) * 520);
    margin-left: calc(var(--ratio-size) * 240);
    background: #fff;
}

.news-container .top-news:hover .pic img {
    transform: scale(1.1);
}

.news-container .top-news .pic {
    position: relative;
    width: calc(var(--ratio-size) * 720);
    overflow: hidden;
}

.news-container .top-news .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s;
}

.news-container .top-news .pic .time {
    position: absolute;
    z-index: 2;
    display: flex;
    padding: calc(var(--ratio-size) * 60);
    color: #fff;
    text-shadow: 1px 1px 1px #000;
}

.news-container .top-news .pic .time .day {
    margin-top: calc(var(--ratio-size) * -3);
    font-size: calc(var(--ratio-size) * 80);
    line-height: 1;
}

.news-container .top-news .pic .time .year {
    margin-left: calc(var(--ratio-size) * 10);
    font-size: 14px;
}

.news-container .top-news .text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: calc(var(--ratio-size) * 60);
}

.news-container .top-news .text-content .title {
    width: calc(var(--ratio-size) * 665);
    font-size: calc(var(--ratio-size) * 34);
    font-weight: bold;
    line-height: 1.3;
}

.news-container .top-news .text-content .text {
    width: calc(var(--ratio-size) * 665);
    margin-top: calc(var(--ratio-size) * 30);
    font-size: calc(var(--ratio-size) * 16);
}

.news-container .news-list .news-item {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.news-container .news-list .news-item:hover .pic img {
    transform: scale(1.1);
}

.news-container .news-list .news-item a:not(.wfEditorMode) {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: calc(var(--ratio-size) * 340);
    padding: calc(var(--ratio-size) * 60) 0;
}

.news-container .news-list .news-item a.wfEditorMode {
    transform: translateY(100%);
}

.news-container .news-list .news-item .pic {
    width: calc(var(--ratio-size) * 380);
    height: calc(var(--ratio-size) * 220);
    overflow: hidden;
}

.news-container .news-list .news-item .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s;
}

.news-container .news-list .news-item:hover .right-text .news-btn {
    transform: translateX(200%);
    background-color: #71b638;
    border-color: #71b638;
}

.news-container .news-list .news-item .time {
    display: flex;
    margin: 0 10px;
}

.news-container .news-list .news-item .time .day {
    margin-top: calc(var(--ratio-size) * -4);
    margin-right: calc(var(--ratio-size) * 10);
    font-size: calc(var(--ratio-size) * 72);
    line-height: 1;
    color: #3473b4;
}

.news-container .news-list .news-item .time .month {
    font-size: calc(var(--ratio-size) * 14);
    color: #666666;
}

.news-container .news-list .news-item .right-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(var(--ratio-size) * 720);
    padding-right: calc(var(--ratio-size) * 20);
    font-size: calc(var(--ratio-size) * 20);
}

.news-container .news-list .news-item .right-text .news-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--ratio-size) * 48);
    height: calc(var(--ratio-size) * 48);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .2);
    transition: all .5s;
}

.news-container .news-list .news-item .right-text .news-btn img {
    width: calc(var(--ratio-size) * 15);
}

.news-container .news-list .news-item .right-text .default-hidden {
    position: absolute;
    /* left: 0; */
    opacity: 0;
}

.news-container .news-list .news-item:hover .right-text .default-show {
    opacity: 0;
}

.news-container .news-list .news-item:hover .right-text .default-hidden {
    opacity: 1;
}

.news-container .breadcrumb {
    padding-top: calc(var(--ratio-size) * 60);
    padding-bottom: calc(var(--ratio-size) * 30);
}

.esg-container {
    background-color: #f4f4f4;
}

.esg-container .environment {
    display: flex;
    justify-content: space-between;
    padding-top: calc(var(--ratio-size) * 100);
    padding-bottom: calc(var(--ratio-size) * 395);
}

.esg-container .environment .left {
    width: calc(var(--ratio-size) * 480);
}

.esg-container .environment .right {
    width: calc(var(--ratio-size) * 720);
}

.esg-container .environment .right .common-btn {
    margin-top: calc(var(--ratio-size) * 75);
}

.esg-container .goals {
    position: relative;
    padding-top: calc(var(--ratio-size) * 430);
    padding-bottom: calc(var(--ratio-size) * 120);
    background: url('../images/goals_bg.png') no-repeat center bottom, #2166ad;
}

.esg-container .goals .pic {
    position: absolute;
    top: calc(var(--ratio-size) * -310);
    left: 0;
    height: calc(var(--ratio-size) * 615);
}

.esg-container .goals-main .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(var(--ratio-size) * 450);
    margin-right: 10px;
}

.esg-container .goals-main .left .serial {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* width: calc(var(--ratio-size) * 80);
    height: calc(var(--ratio-size) * 80); */
    width: 81px;
    height: 82px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    /* font-size: calc(var(--ratio-size) * 16); */
    font-size: 16;
}

.esg-container .goals-main .left .serial svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.esg-container .goals-main .left .serial .circle {
    stroke: #fff;
    stroke-width: 1;
    /* stroke-dasharray: 275; */
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
}

.esg-container .goals-main .goals-list .goals-pagination {
    display: none;
}

.esg-container .goals-main .goals-list {
    width: calc(var(--ratio-size) * 720);
    height: calc(var(--ratio-size) * 790);
    overflow: hidden;
}

.esg-container .goals-main {
    display: flex;
    justify-content: space-between;
}

.esg-container .goals-list .item {
    padding: calc(var(--ratio-size) * 40) calc(var(--ratio-size) * 30);
    border-bottom: 1px solid #fff;
}

.esg-container .goals-list .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.esg-container .goals-list .left-content {
    display: flex;
    align-items: center;
}

.esg-container .goals-list .icon {
    position: relative;
    width: calc(var(--ratio-size) * 32);
    height: calc(var(--ratio-size) * 32);
}

.esg-container .goals-list .item .default-show {
    position: absolute;
    top: 0;
    left: 0;
    position: 0;
}

.esg-container .goals-list .item-icon {
    position: relative;
    width: calc(var(--ratio-size) * 98);
}

.esg-container .goals-list .title {
    margin-left: calc(var(--ratio-size) * 20);
    font-size: calc(var(--ratio-size) * 22);
}

.esg-container .goals-list .show-more {
    display: none;
    margin-left: calc(var(--ratio-size) * 53);
    font-size: calc(var(--ratio-size) * 18);
}


.esg-container .goals-list .show-more p {
    position: relative;
    ;
    display: flex;
    align-items: center;
}

.esg-container .goals-list .show-more p::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-top: 1px;
    margin-right: 8px;
    border-radius: 50%;
    background-color: #60a527;
}

.esg-container .goals-list .swiper-slide.swiper-slide-next .item {
    background-color: #fff;
    color: #000;
}

.esg-container .goals-list .swiper-slide.swiper-slide-next .item .show-more {
    display: block;
}

.esg-container .goals-list .swiper-slide.swiper-slide-next .item .default-show {
    opacity: 0;
}

.esg-container .goals-list .swiper-slide.swiper-slide-next .item .default-hidden {
    opacity: 1;
}

.esg-container .environment-description {
    padding-top: calc(var(--ratio-size) * 100);
    padding-bottom: calc(var(--ratio-size) * 100);
}

.esg-container .environment-item {
    display: flex;
    justify-content: space-between;
    min-height: calc(var(--ratio-size) * 460);
}

.esg-container .environment-item:nth-child(even) {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.esg-container .environment-item .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(50% - var(--ratio-size) * 55);
    padding-top: calc(var(--ratio-size) * 30);
    padding-bottom: calc(var(--ratio-size) * 60);
    /* padding-right: calc(var(--ratio-size) * 55); */
}

.esg-container .environment-item .left .text {
    margin-top: calc(var(--ratio-size) * 10);
    color: #666;
    line-height: 1.5;
}

.esg-container .environment-item .left .icon-wall {
    display: flex;
    align-items: stretch;
    min-height: calc(var(--ratio-size) * 112);
    font-size: 12px;
    text-align: center;
    color: #666666;
}

.esg-container .environment-item .left .icon-item {
    width: 20%;
    padding: calc(var(--ratio-size) * 15) calc(var(--ratio-size) * 20);
    margin-top: 10px;
    border-radius: calc(var(--ratio-size) * 20);
}

.esg-container .environment-item .icon-item .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--ratio-size) * 53);
    height: calc(var(--ratio-size) * 40);
    margin: 0 auto;
}

.esg-container .environment-item .left .icon-wall img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.esg-container .environment-item .left .icon-wall p {
    margin-top: calc(var(--ratio-size) * 10);
}

.esg-container .environment-item .left .icon-item:nth-child(odd) {
    background-image: linear-gradient(to bottom right, #fbfcfc, #ecf0f5);
    box-shadow: 0 1px 3px #c1c1c1;
}

.esg-container .environment-item .pic {
    width: 50%;
}

.esg-container .environment-item .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.esg-container .download {
    padding-top: calc(var(--ratio-size) * 100);
    padding-bottom: calc(var(--ratio-size) * 100);
    background-color: #fff;
}

.esg-container .download .common-xl-title {
    text-align: center;
}

.esg-container .download-list {
    margin-top: calc(var(--ratio-size) * 50);
}

.esg-container .download-item {
    display: flex;
    justify-content: space-between;
    background-color: #f4f4f4;
}

.esg-container .download-item:not(:first-child) {
    margin-top: 25px;
}

.esg-container .download-item .left {
    display: flex;
    align-items: center;
    padding: calc(var(--ratio-size) * 40);
}

.esg-container .download-item .year-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(var(--ratio-size) * 200);
    height: calc(var(--ratio-size) * 200);
    /* background-color: #226cb8; */
    background-image: linear-gradient(to bottom right, #2062a7, #236fbc);
    border-radius: 50%;
    text-align: center;
}

.esg-container .download-item .year-content .arrow {
    width: calc(9rem / 16);
    margin-top: calc(var(--ratio-size) * 5);
}

.esg-container .download-item .text {
    width: calc(var(--ratio-size) * 650);
    margin-left: calc(var(--ratio-size) * 50);
}

.esg-container .download-item .text .title {
    font-size: calc(var(--ratio-size) * 30);
}

.esg-container .download-item .text .download-btn {
    display: inline-flex;
    margin-top: calc(var(--ratio-size) * 20);
    color: #71b638;
}

.esg-container .download-item .text .download-btn .icon {
    width: calc(var(--ratio-size) * 18);
    margin-left: calc(var(--ratio-size) * 20);
}

.esg-container .download-item .text ul li {
    display: flex;
    justify-content: space-between;
    line-height: 2;
}

.esg-container .download-item .text ul li .pdf-title {
    flex: 1;
}

.esg-container .download-item .text ul li .download-btn {
    margin-top: 0;
}

.esg-container .download-item .pic {
    min-width: calc(var(--ratio-size) * 350);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: calc(var(--ratio-size) * 80);
    padding-left: calc(var(--ratio-size) * 65);
    border-left: 1px solid rgba(0, 0, 0, .1);
}

.esg-container .download-item .pic img {
    width: auto;
    /* width: calc(var(--ratio-size) * 200); */
    height: calc(var(--ratio-size) * 200);
}

.esg-container .breadcrumb {
    padding-bottom: calc(var(--ratio-size) * 30);
    background-color: #fff;
}

.career-container {
    padding-top: calc(var(--ratio-size) * 100);
    background-color: #f5f6f6;
}

.career-container .career-slogan {
    display: flex;
    padding-bottom: calc(var(--ratio-size) * 400);
}

.career-container .slogan-item {
    position: relative;
    width: calc((100% - var(--ratio-size) * 60) / 3);
    height: calc(var(--ratio-size) * 640);
    padding-top: calc(var(--ratio-size) * 80);
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
}

.career-container .slogan-item:nth-child(3n + 2) {
    margin-left: calc(var(--ratio-size) * 30);
    margin-right: calc(var(--ratio-size) * 30);
}

.career-container .slogan-item .pic {
    position: relative;
    width: calc(var(--ratio-size) * 114);
    height: calc(var(--ratio-size) * 114);
    margin: 0 auto;
}

.career-container .slogan-item .pic::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    background: url('../images/career_icon_outside.png') no-repeat center/cover;
    animation: fullRotateAn 3s linear infinite;
}

.career-container .slogan-item .title {
    position: relative;
    width: calc(var(--ratio-size) * 310);
    margin: 0 auto;
    margin-top: calc(var(--ratio-size) * 30);
    font-size: calc(var(--ratio-size) * 30);
    text-align: center;
}

.career-container .slogan-item .text {
    position: relative;
    width: calc(var(--ratio-size) * 335);
    margin: 0 auto;
    margin-top: calc(var(--ratio-size) * 30);
    text-align: center;
    line-height: 1.5;
}

.career-container .slogan-item .icon {
    position: relative;
    width: calc(var(--ratio-size) * 32);
    height: calc(var(--ratio-size) * 32);
    margin: 0 auto;
    margin-top: calc(var(--ratio-size) * 25);
    border-radius: 50%;
    overflow: hidden;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .2));
    transition: all .5s;
}

.career-container .slogan-item .icon img {
    transition: all .5s;
}

.career-container .slogan-item .icon .default-hidden {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.career-container .slogan-item .bg-color {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right bottom, #2470bf, #1b548e);
    opacity: 0;
    transition: all .5s;
}

.career-container .slogan-item .text {
    display: none;
}

.career-container .slogan-item:hover .bg-color {
    opacity: 1;
}

.career-container .slogan-item:hover .icon {
    margin-top: calc(var(--ratio-size) * 80);
}

.career-container .slogan-item:hover .default-show {
    opacity: 0;
}

.career-container .slogan-item:hover .default-hidden {
    opacity: 1;
}

.career-container .join-us {
    position: relative;
    padding-top: calc(var(--ratio-size) * 410);
    padding-bottom: calc(var(--ratio-size) * 30);
    background-color: #f5f6f6;
}

.career-container .join-us .work-in {
    position: absolute;
    top: calc(var(--ratio-size) * -310);
    left: 0;
    display: flex;
    min-height: calc(var(--ratio-size) * 620);
}

.career-container .work-in .pic {
    width: 50%;
    /* height: 100%; */
}

.career-container .work-in .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.career-container .work-in .work-swiper {
    padding-bottom: calc(var(--ratio-size) * 60);
    font-size: 0;
}

.career-container .work-in .text-content {
    width: 50%;
    /* height: 100%; */
    overflow: hidden;
    background-image: linear-gradient(to right bottom, #2470bf, #1b548e);
}

.career-container .work-in .swiper-slide {
    padding: calc(var(--ratio-size) * 80);
}

.career-container .work-in .swiper-slide .s-title {
    font-size: calc(var(--ratio-size) * 20);
}

.career-container .work-in .swiper-slide .title {
    margin-top: calc(var(--ratio-size) * 10);
    font-size: calc(var(--ratio-size) * 48);
}

.career-container .work-in .swiper-slide .text {
    margin-top: calc(var(--ratio-size) * 30);
    font-size: calc(var(--ratio-size) * 18);
    line-height: 1.5;
}

.career-container .work-in .work-button-prev,
.career-container .work-in .work-button-next {
    position: relative;
    display: inline-block;
    width: calc(var(--ratio-size) * 49);
    height: calc(var(--ratio-size) * 48);
    border-radius: 50%;
    cursor: pointer;
}

.career-container .work-in .work-button-prev img,
.career-container .work-in .work-button-next img {
    transition: all .5s;
}

.career-container .work-in .work-button-prev:hover .default-show,
.career-container .work-in .work-button-next:hover .default-show {
    opacity: 0;
}

.career-container .work-in .work-button-prev:hover .default-hidden,
.career-container .work-in .work-button-next:hover .default-hidden {
    opacity: 1;
}

.career-container .work-in .work-button-next {
    margin-left: calc(var(--ratio-size) * 10);
}

.career-container .work-in .work-button-prev {
    margin-left: calc(var(--ratio-size) * 78);
}

.career-container .work-in .default-hidden {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.career-container .join-us-description {
    display: flex;
    justify-content: space-between;
    padding-bottom: calc(var(--ratio-size) * 50);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.career-container .join-us-description .left {
    width: calc(var(--ratio-size) * 320);
}

.career-container .join-us-description .left .common-m-title {
    color: #666666;
}

.career-container .join-us-description .left .common-xl-title {
    margin-top: calc(var(--ratio-size) * 5);
}

.career-container .join-us-description .text-content {
    width: calc(var(--ratio-size) * 980);
    padding-right: calc(var(--ratio-size) * 30);
}

.career-container .join-us-description .text-content .text {
    margin-top: calc(var(--ratio-size) * 20);
    color: #333;
    line-height: 1.5;
}

.career-container .join-us-switch {
    display: flex;
    justify-content: space-between;
    margin-top: calc(var(--ratio-size) * 58);
}

.career-container .join-us-switch .title {
    font-weight: bold;
}

.career-container .join-us-switch .btn-container {
    display: flex;
    align-items: center;
}

.career-container .join-us-switch .btn-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    border-radius: calc(var(--ratio-size) * 40);
    border: 1px solid #dedede;
    transition: all .5s;
}

.career-container .join-us-switch .btn-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: calc(var(--ratio-size) * 130);
    height: calc(var(--ratio-size) * 40);
    padding: calc(var(--ratio-size) * 15) calc(var(--ratio-size) * 20);
}

.career-container .join-us-switch .btn-item:hover {
    background-color: #71b638;
    color: #fff;
    border-color: #71b638;
    cursor: pointer;
}

.career-container .join-us-switch .btn-item.active {
    background-color: #71b638;
    color: #fff;
    border-color: #71b638;
}

.career-container .join-us-list {
    margin-top: calc(var(--ratio-size) * 30);
}

.career-container .join-us-item {
    background-color: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, .1);
    cursor: pointer;
}

.career-container .join-us-item:not(:last-child) {
    margin-bottom: calc(var(--ratio-size) * 15);
}

.career-container .join-us-list .title-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: calc(var(--ratio-size) * 35);
    padding-bottom: calc(var(--ratio-size) * 35);
    padding-left: calc(var(--ratio-size) * 30);
    padding-right: calc(var(--ratio-size) * 30);
    transition: all .5s;
}

.career-container .join-us-list .title-content:hover {
    background-color: #2655a8;
    color: #fff;
}

.career-container .join-us-list .title-content:hover .title-main .text {
    color: #fff;
}

.career-container .join-us-list .title-main {
    display: flex;
    font-size: calc(var(--ratio-size) * 18);
}

.career-container .join-us-list .title-main .name {
    font-weight: bold;
}

.career-container .join-us-list .title-main .title {
    width: calc(var(--ratio-size) * 600);
    margin-top: calc(var(--ratio-size) * -3);
    font-size: calc(var(--ratio-size) * 20);
}

.career-container .join-us-list .title-main .city,
.career-container .join-us-list .title-main .category {
    width: calc(var(--ratio-size) * 200);
}

.career-container .join-us-list .title-main .text {
    margin-top: calc(var(--ratio-size) * 20);
    color: #666666;
    transition: all .5s;
}

.career-container .join-us-list .title-content .icon {
    position: relative;
    width: calc(var(--ratio-size) * 32);
    height: calc(var(--ratio-size) * 32);
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .1);
}

.career-container .join-us-list .title-content .icon img {
    transition: all .5s;
}

.career-container .join-us-list .title-content .icon .default-hidden {
    position: absolute;
    left: 0;
    opacity: 0;
}

/* .career-container .join-us-list .title-content:hover .icon .default-hidden {
    opacity: 1;
}

.career-container .join-us-list .title-content:hover .icon .default-show {
    opacity: 0;
} */

.career-container .join-us-list .message-content {
    display: none;
    padding-top: calc(var(--ratio-size) * 35);
    padding-left: calc(var(--ratio-size) * 30);
    padding-bottom: calc(var(--ratio-size) * 50);
    padding-right: calc(var(--ratio-size) * 550);
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.career-container .join-us-list .message-content h6 {
    margin-bottom: calc(var(--ratio-size) * 20);
    font-size: calc(var(--ratio-size) * 20);
    color: #4c4c4c;
}

.career-container .join-us-list .message-content ul {
    list-style-type: upper-alpha;
    padding-left: calc(var(--ratio-size) * 25);
    font-size: calc(var(--ratio-size) * 16);
    line-height: 1.5;
    color: #333;
}

.career-container .join-us-list .message-content p {
    font-size: calc(var(--ratio-size) * 16);
    margin-bottom: calc(var(--ratio-size) * 6);
    line-height: 1.5;
    color: #333;
}

.career-container .join-us-list .message-content ul li {
    margin-bottom: calc(var(--ratio-size) * 6);
}

.career-container .join-us-list .message-content h6:not(:first-child) {
    margin-top: calc(var(--ratio-size) * 30);
}

.career-container .join-us-list .message-content .send-email {
    margin-top: calc(var(--ratio-size) * 40);
}

.career-container .join-us-list .message-content .send-email a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: calc(var(--ratio-size) * 17) calc(var(--ratio-size) * 30);
    border-radius: calc(var(--ratio-size) * 30);
    background-color: #71b638;
    color: #fff;
    overflow: hidden;
}

.career-container .join-us-list .message-content .send-email a .icon,
.career-container .join-us-list .message-content .send-email a p {
    position: relative;
    z-index: 2;
}

.career-container .join-us-list .message-content .send-email a::after {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #2655a8;
    transition: all .5s;
}

.career-container .join-us-list .message-content .send-email a:hover::after {
    width: 100%;
}

.career-container .join-us-list .message-content .send-email .icon {
    margin-right: calc(var(--ratio-size) * 10);
    font-size: 0;
}

.career-container .join-us-item.active .title-content .icon .default-hidden {
    opacity: 1;
}

.career-container .join-us-item.active .title-content .icon .default-show {
    opacity: 0;
}

.career-container .breadcrumb {
    padding-top: calc(var(--ratio-size) * 60);
    padding-bottom: calc(var(--ratio-size) * 30);
    background-color: #f5f6f6;
}

.contact-container .business {
    padding-top: calc(var(--ratio-size) * 100);
    padding-bottom: calc(var(--ratio-size) * 120);
    background-color: #f5f5f5;
}

.contact-container .business .common-xl-title {
    line-height: 1;
}

.contact-container .business .business-list {
    margin-top: calc(var(--ratio-size) * 50);
}

.contact-container .business .business-item .name {
    font-size: calc(var(--ratio-size) * 24);
    font-weight: bold;
}

.contact-container .business .business-item:not(:first-child) {
    margin-top: calc(var(--ratio-size) * 50);
}

.contact-container .business .business-item .message-list {
    display: flex;
    justify-content: space-between;
    margin-top: calc(var(--ratio-size) * 25);
    background-color: #fff;
}

.contact-container .business .business-item .message-list .item {
    padding: 0 calc(var(--ratio-size) * 40);
    padding-top: calc(var(--ratio-size) * 40);
    padding-bottom: calc(var(--ratio-size) * 25);
    text-align: center;
}

.contact-container .business .business-item .message-list .item:nth-child(1) {
    width: 39%;
}

.contact-container .business .business-item .message-list .item:nth-child(2) {
    position: relative;
    width: 28%;
}

.contact-container .business .business-item .message-list .item:nth-child(2)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    border-left: 1px solid #d9d9d9;
}

.contact-container .business .business-item .message-list .item:nth-child(2)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    border-left: 1px solid #d9d9d9;
}

.contact-container .business .business-item .message-list .item:nth-child(3) {
    width: 33%;
}

.contact-container .business .business-item .message-list .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--ratio-size) * 58);
    height: calc(var(--ratio-size) * 58);
    margin: 0 auto;
    margin-bottom: calc(var(--ratio-size) * 28);
}

.contact-container .business .business-item .message-list .icon img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

.contact-container .business .business-item .message-list .item-name {
    font-size: calc(var(--ratio-size) * 18);
}

.contact-container .business .business-item .message-list .remark {
    margin-top: calc(var(--ratio-size) * 8);
    font-size: calc(var(--ratio-size) * 16);
    color: #666666;
}

.contact-container .layout {
    padding-top: calc(var(--ratio-size) * 120);
    padding-bottom: calc(var(--ratio-size) * 120);
}

.contact-container .layout .common-xl-title {
    padding-bottom: calc(var(--ratio-size) * 50);
    line-height: 1;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.contact-container .layout .layout-main {
    display: flex;
    justify-content: space-between;
    /* height: calc(var(--ratio-size) * 740); */
    margin-top: calc(var(--ratio-size) * 60);
}

.contact-container .layout .country-list {
    width: calc(var(--ratio-size) * 423);
    height: 100%;
    overflow-y: auto;
    padding-left: 3px;
    padding-top: 2px;
    padding-right: calc(var(--ratio-size) * 40);
}

.contact-container .layout .country-item {
    padding: calc(var(--ratio-size) * 25) calc(var(--ratio-size) * 30);
    margin-bottom: calc(var(--ratio-size) * 10);
    border-radius: calc(var(--ratio-size) * 20);
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    cursor: pointer;
    transition: all .5s;
}

.contact-container .layout .country-item .area {
    margin-bottom: calc(var(--ratio-size) * 15);
    font-size: calc(var(--ratio-size) * 20);
    font-weight: bold;
}

.contact-container .layout .country-item .country {
    font-size: calc(var(--ratio-size) * 16);
    color: #7dbc49;
    transition: all .5s;
}

.contact-container .layout .country-item .position {
    margin-top: calc(var(--ratio-size) * 2);
    font-size: calc(var(--ratio-size) * 16);
}

.contact-container .layout .country-item .message {
    margin-top: calc(var(--ratio-size) * 15);
    font-size: calc(var(--ratio-size) * 14);
}

.contact-container .layout .country-item .message-item {
    display: flex;
}

.contact-container .layout .country-item .message-item .icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ratio-size) * 20);
    height: calc(var(--ratio-size) * 20);
    margin-right: calc(var(--ratio-size) * 10);
}

.contact-container .layout .country-item .message-item .icon img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    transition: all .5s;
}

.contact-container .layout .country-item .message-item:not(:last-child) {
    margin-bottom: calc(var(--ratio-size) * 4);
}

.contact-container .layout .country-item .default-hidden {
    position: absolute;
    opacity: 0;
}

.contact-container .layout .country-item.active {
    background-color: #7dbc49;
    color: #fff;
}

.contact-container .layout .country-item.active .country {
    color: #17497b;
}

.contact-container .layout .country-item.active .default-hidden {
    opacity: 1;
}

.contact-container .layout .country-item.active .default-show {
    opacity: 0;
}

.contact-container .layout .map {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    border-left: 1px solid rgba(0, 0, 0, .2);
}

.contact-container .layout .map .map-main {
    position: relative;
    width: 95%;
}

/* .contact-container .layout .map img {
    width: 95%;
    height: auto;
} */

.contact-container .layout .map img:not(.map-original) {
    position: absolute;
    z-index: 2;
    opacity: 0;
    transition: all .5s;
}

.contact-container .layout .map img {
    width: auto;
}

.contact-container .layout .map img.map-original {
    width: calc(var(--ratio-size) * 1017);
}

.contact-container .layout .map img.active {
    opacity: 1;
}

/* .contact-container .layout .map .asia_1 {
    left: 0;
    top: calc(var(--ratio-size) * 270);
    width: calc(var(--ratio-size) * 247);
}

.contact-container .layout .map .asia_2 {
    left: calc(var(--ratio-size) * 317);
    top: calc(var(--ratio-size) * 224);
    width: calc(var(--ratio-size) * 82);
}

.contact-container .layout .map .asia_3 {
    left: calc(var(--ratio-size) * 399);
    top: calc(var(--ratio-size) * 313);
    width: calc(var(--ratio-size) * 65);
}

.contact-container .layout .map .asia_4 {
    left: calc(var(--ratio-size) * 400);
    top: calc(var(--ratio-size) * 265);
    width: calc(var(--ratio-size) * 19);
}

.contact-container .layout .map .asia_5 {
    left: calc(var(--ratio-size) * 53);
    top: calc(var(--ratio-size) * 309);
    width: calc(var(--ratio-size) * 145);
}

.contact-container .layout .map .asia_6 {
    left: calc(var(--ratio-size) * 0);
    top: calc(var(--ratio-size) * 151);
    width: calc(var(--ratio-size) * 243);
} */

.contact-container .layout .map .asia_1 {
    left: 0;
    top: calc(var(--ratio-size) * 153);
    width: calc(var(--ratio-size) * 194);
}

.contact-container .layout .map .asia_2 {
    left: calc(var(--ratio-size) * 194);
    top: calc(var(--ratio-size) * 50);
    width: calc(var(--ratio-size) * 97);
}

.contact-container .layout .map .asia_3 {
    left: calc(var(--ratio-size) * 291);
    top: calc(var(--ratio-size) * 48);
    width: calc(var(--ratio-size) * 297);
}

.contact-container .layout .map .asia_4 {
    left: calc(var(--ratio-size) * 291);
    top: calc(var(--ratio-size) * 212);
    width: calc(var(--ratio-size) * 77);
}

.contact-container .layout .map .asia_5 {
    left: calc(var(--ratio-size) * 367);
    top: calc(var(--ratio-size) * 262);
    width: calc(var(--ratio-size) * 98);
}

.contact-container .layout .map .asia_6 {
    left: calc(var(--ratio-size) * 380);
    top: calc(var(--ratio-size) * 370);
    width: calc(var(--ratio-size) * 126);
}

.contact-container .layout .map .asia_7 {
    left: calc(var(--ratio-size) * 538);
    top: calc(var(--ratio-size) * 459);
    width: calc(var(--ratio-size) * 39);
}

.contact-container .layout .map .europe_1 {
    left: calc(var(--ratio-size) * 67);
    top: calc(var(--ratio-size) * 44);
    width: calc(var(--ratio-size) * 180);
}

.contact-container .layout .map .japan_1 {
    left: calc(var(--ratio-size) * 432);
    top: calc(var(--ratio-size) * 194);
    width: calc(var(--ratio-size) * 37);
}

.contact-container .layout .map .japan_2 {
    left: calc(var(--ratio-size) * 462);
    top: calc(var(--ratio-size) * 166);
    width: calc(var(--ratio-size) * 8);
}

.contact-container .layout .map .japan_3 {
    left: calc(var(--ratio-size) * 470);
    top: calc(var(--ratio-size) * 162);
    width: calc(var(--ratio-size) * 24);
}

.contact-container .layout .map .america_1 {
    left: calc(var(--ratio-size) * 830);
    top: calc(var(--ratio-size) * 274);
    width: calc(var(--ratio-size) * 187);
}

.contact-container .layout .map .america_2 {
    left: calc(var(--ratio-size) * 758);
    top: calc(var(--ratio-size) * 201);
    width: calc(var(--ratio-size) * 162);
}

.contact-container .layout .map .area-map {
    position: absolute;
    z-index: 2;
    opacity: 0;
    transition: all .5s;
}

.contact-container .layout .map .map-original {
    position: relative;
    z-index: 1;
}

.contact-container .layout .map .area-map.active {
    opacity: 1;
}

.contact-container .breadcrumb {
    padding-bottom: calc(var(--ratio-size) * 30);
}

.case-container {
    position: relative;
    background-color: #f5f5f5;
}

.case-container .title-content {
    padding-top: calc(var(--ratio-size) * 60);
    padding-bottom: calc(var(--ratio-size) * 50);
    text-align: right;
}

.case-container .title-content .common-xl-title {
    margin-top: calc(var(--ratio-size) * 3);
}

.case-container .top-case {
    position: relative;
    display: flex;
    width: calc(100% - var(--ratio-size) * 240);
    height: calc(var(--ratio-size) * 660);
}

.case-container .top-case .top-case-content {
    width: calc(var(--ratio-size) * 700);
    /* padding-left: calc(var(--ratio-size) * 240); */
    padding-left: calc(var(--ratio-size) * 140);
    padding-right: calc(var(--ratio-size) * 50);
    /* padding-top: calc(var(--ratio-size) * 80); */
    background-image: linear-gradient(to bottom right, #2470bf, #1b548e);
}

.case-container .top-case .text-swiper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.case-container .top-case .text-swiper .swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* justify-content: space-between; */
}

.case-container .top-case .text-content {
    width: calc(var(--ratio-size) * 240);
    padding-bottom: calc(var(--ratio-size) * 80);
    font-size: calc(var(--ratio-size) * 16);
}

.case-container .top-case .pic-swiper {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.case-container .top-case .pic-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-container .top-case .swiper-btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: calc(var(--ratio-size) * 49);
    height: calc(var(--ratio-size) * 48);
    box-shadow: 0 0 3px #c1c1c1;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

.case-container .top-case .swiper-btn .default-hidden {
    position: absolute;
    left: 0;
    opacity: 0;
    transition: all .5s;
}

.case-container .top-case .swiper-btn .default-show {
    transition: all .5s;
}

.case-container .top-case .swiper-btn:hover .default-hidden {
    opacity: 1;
}

.case-container .top-case .swiper-btn:hover .default-show {
    opacity: 0;
}

.case-container .top-case .pic-button-prev {
    left: calc(var(--ratio-size) * 700);
    transform: translate(-50%, -50%);
}

.case-container .top-case .pic-button-next {
    right: 0;
    transform: translate(50%, -50%);
}

.case-container .top-case .title {
    font-size: calc(var(--ratio-size) * 42);
}

.case-container .case-content {
    margin-top: calc(var(--ratio-size) * 88);
}

.case-container .case-content .case-switch {
    display: flex;
    justify-content: space-between;
}

.case-container .case-content .case-switch .btn-container {
    display: flex;
    align-items: center;
}

.case-container .case-content .case-switch .btn-item {
    min-width: calc(var(--ratio-size) * 120);
    padding: calc(var(--ratio-size) * 15) calc(var(--ratio-size) * 25);
    margin-left: calc(var(--ratio-size) * 10);
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: calc(var(--ratio-size) * 30);
    text-align: center;
    cursor: pointer;
    transition: all .5s;
}

.case-container .case-content .case-switch .btn-item.active {
    background-color: #71b638;
    color: #fff;
    border-color: #71b638;
}

.case-container .case-content .case-switch .btn-item:hover {
    background-color: #71b638;
    color: #fff;
    border-color: #71b638;
}

.case-container .case-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--ratio-size) * 50);
}

.case-container .case-list .case-item {
    display: flex;
    flex-direction: column;
    width: calc((100% - var(--ratio-size) * 60) / 3);
    margin-bottom: calc(var(--ratio-size) * 30);
    background-color: #fff;
}

.case-container .case-list .case-item:hover .pic img {
    transform: scale(1.1);
}

.case-container .case-list .case-item:hover .text-content .default-hidden {
    opacity: 1;
}

.case-container .case-list .case-item:hover .text-content .default-show {
    opacity: 0;
}

.case-container .case-list .case-item:nth-child(3n + 2) {
    margin-left: calc(var(--ratio-size) * 30);
    margin-right: calc(var(--ratio-size) * 30);
}

.case-container .case-list .case-item .pic {
    width: 100%;
    height: calc(var(--ratio-size) * 520);
    overflow: hidden;
}

.case-container .case-list .case-item .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s;
}

.case-container .case-list .case-item .text-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
    height: calc(var(--ratio-size) * 120);
    padding: calc(var(--ratio-size) * 40) calc(var(--ratio-size) * 30);
}

.case-container .case-list .case-item .text-content p {
    padding-right: calc(var(--ratio-size) * 10);
    font-size: calc(var(--ratio-size) * 18);
    color: #333333;
    line-height: 1.5;
}

.case-container .case-list .case-item .text-content .icon {
    position: relative;
    width: calc(var(--ratio-size) * 42);
    height: calc(var(--ratio-size) * 42);
    border-radius: 50%;
    font-size: 0;
}

.case-container .case-list .case-item .text-content .icon img {
    transition: all .5s;
}

.case-container .case-list .case-item .text-content .default-hidden {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.case-container .common-more-btn {
    margin-top: calc(var(--ratio-size) * 20);
}

.case-container .breadcrumb {
    padding-bottom: calc(var(--ratio-size) * 30);
    margin-top: calc(var(--ratio-size) * 40);
}

.case-container .case-dialog {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    /* display: flex; */
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .2);
}

.case-container .case-dialog .dialog-main {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(var(--ratio-size) * 1000);
    /* height: calc(var(--ratio-size) * 680); */
    margin: auto;
}

.case-container .case-dialog .dialog-main .close-btn {
    position: absolute;
    right: calc(var(--ratio-size) * 20);
    top: calc(var(--ratio-size) * 20);
    z-index: 4;
    width: calc(var(--ratio-size) * 40);
    height: calc(var(--ratio-size) * 40);
    cursor: pointer;
}

.case-container .case-dialog .dialog-pic-swiper {
    position: relative;
    width: 100%;
    height: calc(var(--ratio-size) * 450);
    overflow: hidden;
    font-size: 0;
}

.case-container .case-dialog .dialog-pic-swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-container .case-dialog .dialog-pic-swiper .dialog-pic-pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    width: auto;
    padding: calc(var(--ratio-size) * 10) calc(var(--ratio-size) * 24);
    bottom: calc(var(--ratio-size) * 20);
    background-color: rgba(0, 0, 0, .5);
    border-radius: calc(var(--ratio-size) * 30);
}

.case-container .case-dialog .dialog-pic-swiper .dialog-pic-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #a3a6a5;
    border-radius: 50%;
    transition: all .5s;
}

.case-container .case-dialog .dialog-pic-swiper .dialog-pic-dot:not(:last-child) {
    margin-right: calc(var(--ratio-size) * 10);
}

.case-container .case-dialog .dialog-pic-swiper .dialog-pic-dot.pagination-active {
    width: calc(var(--ratio-size) * 20);
    background-color: #fff;
    border-radius: calc(var(--ratio-size) * 10);
}

.case-container .case-dialog .dialog-text {
    width: 100%;
    padding: calc(var(--ratio-size) * 40) calc(var(--ratio-size) * 80);
    /* padding-bottom: calc(var(--ratio-size) * 40); */
    background-color: #fff;
    text-align: center;
}

.case-container .case-dialog .dialog-text .title {
    font-size: calc(var(--ratio-size) * 30);
}

.case-container .case-dialog .dialog-text .text {
    margin-top: calc(var(--ratio-size) * 40);
    font-size: calc(var(--ratio-size) * 16);
    color: #333333;
}

.case-container .case-dialog .dialog-text .text:not(:last-child) {
    margin-bottom: calc(var(--ratio-size) * 20);
}

.case-container .case-dialog .dialog-text .text:last-child {
    margin-bottom: calc(var(--ratio-size) * 20);
}

.download-container {
    padding-top: calc(var(--ratio-size) * 80);
}

.download-container .classify-switch {
    display: flex;
}

.download-container .classify-item {
    width: calc(var(--ratio-size) * 240);
    text-align: center;
    border-top: 4px solid #fff;
    cursor: pointer;
}

.download-container .classify-item a {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding-top: calc(var(--ratio-size) * 40);
    padding-bottom: calc(var(--ratio-size) * 40);
}

.download-container .classify-item.active {
    border-top: 4px solid #71b638;
    background-color: #f5f5f5;
}

.download-container .classify-item .pic {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--ratio-size) * 75);
    height: calc(var(--ratio-size) * 57);
    margin: 0 auto;
}

.download-container .classify-item .pic img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.download-container .classify-item p {
    margin-top: calc(var(--ratio-size) * 25);
    font-size: calc(var(--ratio-size) * 22);
}

.download-container .download-main {
    padding-top: calc(var(--ratio-size) * 40);
    background-color: #f5f5f5;
}

.download-container .top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.download-container .top .title {
    font-size: calc(var(--ratio-size) * 24);
}

.download-container .top .function-container {
    display: flex;
}

.download-container .top .function-container .search {
    display: flex;
    align-items: center;
    height: auto;
    /* padding: calc(var(--ratio-size) * 15) calc(var(--ratio-size) * 20); */
    margin-right: calc(var(--ratio-size) * 10);
    border-radius: calc(var(--ratio-size) * 30);
    border: 1px solid rgba(0, 0, 0, .2);
    overflow: hidden;
}

.download-container .top .function-container .search img {
    width: calc(var(--ratio-size) * 17);
}

.download-container .top .function-container .search form {
    height: 100%;
    padding-left: calc(var(--ratio-size) * 20);
}

.download-container .top .function-container .search .text-input {
    width: calc(var(--ratio-size) * 200);
    padding-left: calc(var(--ratio-size) * 15);
    outline: none;
    border: none;
    background-color: transparent;
    font-size: calc(var(--ratio-size) * 14);
}

.download-container .top .function-container .search .search-btn {
    height: 100%;
    padding: 0 10px;
    background-color: #71b638;
    border: none;
    color: #fff;
    cursor: pointer;
}

.download-container .top .function-container .select-content {
    position: relative;
    display: flex;
    align-items: center;
    padding: calc(var(--ratio-size) * 15) calc(var(--ratio-size) * 35);
    border-radius: calc(var(--ratio-size) * 30);
    border: 1px solid rgba(0, 0, 0, .2);
}

.download-container .top .function-container .select-arrow {
    width: calc(var(--ratio-size) * 11);
    margin-top: calc(var(--ratio-size) * 8);
    margin-left: calc(var(--ratio-size) * 20);
}

.download-container .top .function-container .select-content .selected {
    font-size: calc(var(--ratio-size) * 14);
}

.download-container .function-container .select-content ul {
    display: none;
    position: absolute;
    bottom: -10px;
    left: 0;
    transform: translateY(100%);
    width: 100%;
    background-color: #fff;
    border-radius: calc(var(--ratio-size) * 10);
    box-shadow: 0 0 3px #c1c1c1;
}

.download-container .function-container .select-content a {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: calc(var(--ratio-size) * 3) 0;
    padding-left: calc(var(--ratio-size) * 35);
}

.download-container .function-container .select-content li:first-child a {
    padding-top: calc(var(--ratio-size)* 6);
}

.download-container .function-container .select-content li:last-child a {
    padding-bottom: calc(var(--ratio-size)* 6);
}

.download-container .function-container .select-content li:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.download-container .download-content {
    display: flex;
    justify-content: space-between;
    min-height: calc(var(--ratio-size) * 1030);
    margin-top: calc(var(--ratio-size) * 40);
}

.download-container .download-content .catalog-list {
    width: calc(var(--ratio-size) * 420);
    background-color: #fff;
}

/* .download-container .download-content .catalog-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--ratio-size) * 30);
    padding-left: 0;
    border-bottom: 1px solid #dedede;
    cursor: pointer;
} */

.download-container .download-content .catalog-item a.first-floor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--ratio-size) * 30);
    padding-left: 0;
    border-bottom: 1px solid #dedede;
}

.download-container .download-content .catalog-item .third-floor a {
    padding-left: calc(var(--ratio-size) * 60);
}



.download-container .download-content .catalog-item ul {
    display: none;
    width: 100%;
    font-size: calc(14rem / 16);
}

.download-container .download-content .catalog-item ul.active {
    display: block;
}

.download-container .download-content .catalog-item a {
    display: inline-block;
    width: 100%;
    padding: calc(var(--ratio-size) * 10) 0;
    padding-left: calc(var(--ratio-size) * 40);
}

.download-container .download-content .catalog-item ul a {
    border-bottom: 1px solid #dedede;
    /* transition: all .5s; */
}

.download-container .download-content .catalog-item ul a:hover {
    background-color: #71b638;
    color: #fff;
}

.download-container .download-content .catalog-item ul a.active {
    background-color: #71b638;
    color: #fff;
}

.download-container .download-content .catalog-item p {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: calc(var(--ratio-size) * 30);
    transition: all .5s;
}

.download-container .download-content .catalog-item p::after {
    content: '';
    position: absolute;
    left: 0;
    display: inline-block;
    width: 4px;
    height: 100%;
    height: 0;
    background-color: #71b638;
    transition: all .5s;
}

.download-container .download-content .catalog-item img {
    width: calc(var(--ratio-size) * 6);
    margin-top: calc(var(--ratio-size) * 3);
    opacity: 0;
    transition: all .5s;
    transform: translateX(calc(var(--ratio-size) * -100));
}

.download-container .download-content .catalog-item:hover p {
    color: #71b638;
}

.download-container .download-content .catalog-item:hover p::after {
    height: 100%;
}

.download-container .download-content .catalog-item:hover img {
    opacity: 1;
    transform: translateX(0);
}

.download-container .download-content .catalog-item.active p {
    color: #71b638;
}

.download-container .download-content .catalog-item.active p::after {
    height: 100%;
}

.download-container .download-content .catalog-item.active img {
    opacity: 1;
    transform: translateX(0);
}

.download-container .download-content .download-list {
    flex: 1;
    margin-left: calc(var(--ratio-size) * 40);
}

.download-container .download-content .download-item:not(:last-child) {
    margin-bottom: calc(var(--ratio-size) * 15);
}

.download-container .download-content .download-item a:not(.wfEditorMode) {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: calc(var(--ratio-size) * 30);
    background-color: #fff;
}

.download-container .download-content .download-item a.wfEditorMode {
    transform: translateY(100%);
}

.download-container .download-content .download-item .s-title {
    font-size: calc(var(--ratio-size) * 16);
    color: #666666;
}

.download-container .download-content .download-item .title {
    position: relative;
    display: inline-block;
    margin-top: calc(var(--ratio-size) * 10);
    font-size: calc(var(--ratio-size) * 20);
    transition: all .5s;
}

.download-container .download-content .download-item .title::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    border-bottom: 2px solid #71b638;
    transition: all .5s;
}

.download-container .download-content .download-item .icon {
    position: relative;
    width: calc(var(--ratio-size) * 42);
    height: calc(var(--ratio-size) * 42);
}

.download-container .download-content .download-item .icon .default-hidden {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.download-container .download-content .download-item .icon img {
    transition: all .5s;
}

.download-container .download-content .download-item:hover .title {
    color: #71b638;
}

.download-container .download-content .download-item:hover .title::before {
    width: 100%;
}

.download-container .download-content .download-item:hover .default-hidden {
    opacity: 1;
}

.download-container .download-content .download-item:hover .default-show {
    opacity: 0;
}

.download-container .common-more-btn {
    margin-top: calc(var(--ratio-size) * 40);
}

.download-container .breadcrumb {
    margin-top: calc(var(--ratio-size) * 40);
    padding-bottom: calc(var(--ratio-size) * 30);
}

.strength-container {
    padding-top: calc(var(--ratio-size) * 100);
    padding-bottom: calc(var(--ratio-size) * 50);
    background-color: #f4f4f4;
}

.strength-container .description {
    display: flex;
    justify-content: space-between;
}

.strength-container .description .left {
    width: calc(var(--ratio-size) * 360);
}

.strength-container .description .text {
    width: calc(var(--ratio-size) * 700);
    margin-top: calc(var(--ratio-size) * 30);
    line-height: 1.5;
}

.strength-container .strength-list {
    position: relative;
    /* padding-left: calc(var(--ratio-size) * 130); */
    margin-top: calc(var(--ratio-size) * 140);

    /* height: 100px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%); */
}

.strength-container .strength-list::before {
    content: '';
    position: absolute;
    left: calc(var(--ratio-size) * 50);
    height: 100%;
    border-left: 1px dotted #71b638;
}

.strength-container .strength-item {
    position: relative;
    padding-left: calc(var(--ratio-size) * 180);
}

.strength-container .strength-item:not(:last-child) {
    padding-bottom: calc(var(--ratio-size) * 80);
}

.strength-container .strength-item:last-child {
    padding-bottom: calc(var(--ratio-size) * 5);
}

.strength-container .strength-item .icon-content {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ratio-size) * 100);
    height: calc(var(--ratio-size) * 100);
    border-radius: 50%;
    border: 1px solid #71b638;
    background-color: #f4f4f4;
}

.strength-container .strength-item .icon-content img {
    width: auto;
    height: auto;
    max-width: 60%;
    max-height: 80%;
}

.strength-container .strength-item .icon-content .default-hidden {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.strength-container .strength-main {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: calc(var(--ratio-size) * 530);
    background-color: #fff;
    overflow: hidden;
}

.strength-container .strength-main::before {
    content: '';
    position: absolute;
    left: -110%;
    /* left: 10%; */
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 80%);
    transform: skew(-30deg);
}

.strength-container .strength-main:hover:before {
    left: 110%;
    transition: all 1s;
}

.strength-container .strength-main .left {
    flex: 1;
    padding-top: calc(var(--ratio-size) * 75);
    padding-left: calc(var(--ratio-size) * 58);
    padding-right: calc(var(--ratio-size) * 80);
    padding-bottom: calc(var(--ratio-size) * 40);
}

.strength-container .strength-main .title {
    font-size: calc(var(--ratio-size) * 46);
    line-height: 1;
    color: #3473b4;
    font-weight: bold;
}

.strength-container .strength-main .text-content {
    margin-top: calc(var(--ratio-size) * 25);
    font-size: calc(var(--ratio-size) * 16);
    color: #4c4c4c;
    line-height: 1.5;
}

.strength-container .strength-main .pic {
    width: calc(var(--ratio-size) * 420);
    overflow: hidden;
}

.strength-container .strength-main .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s;
}

.strength-container .strength-main .data-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--ratio-size) * 50);
}

.strength-container .strength-main .data-item {
    display: flex;
    align-items: center;
    width: calc((100% - var(--ratio-size) * 25) / 2);
    margin-bottom: calc(var(--ratio-size) * 30);
}

.strength-container .strength-main .data-item .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ratio-size) * 55);
    height: calc(var(--ratio-size) * 55);
    border-radius: 50%;
    border: 1px solid #71b638;
}

.strength-container .strength-main .data-item .icon img {
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 80%;
}

.strength-container .strength-main .data-item .text {
    flex: 1;
    margin-left: calc(var(--ratio-size) * 15);
    font-size: calc(var(--ratio-size) * 16);
}

.strength-container .strength-main .data-item .text strong {
    font-size: calc(var(--ratio-size) * 22);
    font-weight: normal;
    color: #71b638;
}

.strength-container .strength-main .data-item h6 {
    color: #71b638;
}

.strength-container .strength-main:hover .pic img {
    transform: scale(1.1);
}

.strength-container .breadcrumb {
    padding-bottom: calc(var(--ratio-size) * 30);
    margin-top: calc(var(--ratio-size) * 100);
}



/* 波浪 */
/* body {
    background-color: hsl(220deg, 13%, 19%);
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  } */
.about-us-container .milestones-main .line-wave {
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 4;

    --move-period: 30s;
    --scale-period: 25s;

    --color-one: #fff;
    --color-two: #fff;
    --color-three: #fff;
}

.about-us-container .milestones-main .line-wave canvas {
    margin-top: calc(var(--ratio-size) * 200);
}



.header .bottom-content .nav ul.hidden-second-menu {
    transform: translate(-50%, calc(100% + 30px));
    opacity: 0;
}

.news-detail {
    padding-top: calc(var(--ratio-size) * 90);
    padding-bottom: calc(var(--ratio-size) * 50);
    margin-top: calc(var(--ratio-size) * 160);
}

.news-detail .title {
    width: 60%;
    margin: 0 auto;
    font-size: calc(var(--ratio-size) * 30);
    font-weight: bold;
    text-align: center;
}

.news-detail .time {
    margin-top: calc(var(--ratio-size) * 50);
    text-align: center;
    font-size: calc(var(--ratio-size) * 16);
}

.news-detail .text-content {
    width: 70%;
    margin: 0 auto;
    margin-top: calc(var(--ratio-size) * 70);
    font-size: calc(var(--ratio-size) * 16);
}

.news-detail .text-content p {
    margin-bottom: calc(var(--ratio-size) * 20);
    line-height: 1.5;
}

.news-detail .text-content img {
    display: block;
    width: revert-layer;
    max-width: 100%;
    margin: 0 auto;
}

.news-detail .button-container {
    display: flex;
    justify-content: space-between;
    width: 75%;
    padding-top: calc(var(--ratio-size) * 50);
    margin: 0 auto;
    margin-top: calc(var(--ratio-size) * 50);
    border-top: 1px solid #c1c1c1;
}

.news-detail .button-container .back-btn {
    display: flex;
    align-items: center;
}

.news-detail .button-container .back-btn img {
    width: calc(var(--ratio-size) * 20);
}

.news-detail .button-container .back-btn p {
    margin-left: calc(var(--ratio-size) * 15);
}

.news-detail .button-container .prev-next {
    display: flex;
}

.news-detail .button-container .prev-next .prev-btn {
    margin-right: calc(var(--ratio-size) * 30);
}

.news-detail .button-container .btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.news-detail .button-container .icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ratio-size) * 50);
    height: calc(var(--ratio-size) * 50);
    font-size: 0;
    border: 1px solid #c1c1c1;
    border-radius: 50%;
    transition: all .5s;
}

.news-detail .button-container .btn .icon img {
    transition: all .5s;
}

.news-detail .button-container .btn .icon .default-hidden {
    position: absolute;
    opacity: 0;
}

.news-detail .button-container .btn.prev-btn .icon {
    transform: rotateY(180deg);
}

.news-detail .button-container .btn p {
    transition: all .5s;
}

.news-detail .button-container .btn:hover .icon {
    background-color: #71b638;
    border-color: #71b638;
}

.news-detail .button-container .btn:hover p {
    color: #71b638;
}

.news-detail .button-container .btn:hover .default-hidden {
    opacity: 1;
}

.news-detail .button-container .btn:hover .default-show {
    opacity: 0;
}

.news-detail .button-container img {
    width: calc(var(--ratio-size) * 10);
}

.news-detail .button-container .btn.prev-btn p {
    margin-left: calc(var(--ratio-size) * 15);
}

.news-detail .button-container .btn.next-btn p {
    margin-right: calc(var(--ratio-size) * 15);
}

.news-detail .recommendation {
    display: flex;
    justify-content: space-between;
    width: 75%;
    margin: 0 auto;
    margin-top: calc(var(--ratio-size) * 100);
}

.news-detail .recommendation .news-item {
    width: 32%;
    background-color: #e6e8eb;
    transition: all .5s;
}

.news-detail .recommendation .news-item:hover {
    background-color: #71b638;
    color: #fff;
}

.news-detail .recommendation .news-item:hover img {
    transform: scale(1.1);
}

.news-detail .recommendation .news-item:hover .recommendation-time {
    color: #fff;
}

.news-detail .recommendation .news-item .pic {
    height: calc(var(--ratio-size) * 250);
    overflow: hidden;
}

.news-detail .recommendation .news-item .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s;
}

.news-detail .recommendation .recommendation-text-content {
    padding: calc(var(--ratio-size) * 15) calc(var(--ratio-size) * 15);
    padding-bottom: calc(var(--ratio-size) * 30);
}

.news-detail .recommendation .text {
    margin-top: calc(var(--ratio-size) * 10);
}

.news-detail .recommendation .recommendation-time {
    color: #2655a8;
    transition: all .5s;
}

.search-container {
    margin-top: calc(var(--ratio-size) * 160);
}

.search-container form {
    padding-top: calc(var(--ratio-size) * 200);
    margin-bottom: calc(var(--ratio-size) * 100);
    text-align: center;
}

.search-container form .input-container {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    height: calc(var(--ratio-size) * 50);
    border-radius: calc(var(--ratio-size) * 20);
    overflow: hidden;
    border: 1px solid #c1c1c1;
}

.search-container form input {
    height: 100%;
    border: none;
    outline: none;
}

.search-container form .searchText {
    width: calc(var(--ratio-size) * 400);
    padding-left: calc(var(--ratio-size) * 10);
}

.search-container form .searchBtn {
    padding: 0 calc(var(--ratio-size) * 20);
    cursor: pointer;
    background-color: #71b638;
    color: #fff;
}

.search-container .news-list {
    margin-top: calc(var(--ratio-size) * 80);
}

.search-container .news-list .news-item {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.search-container .news-list .news-item:hover .pic img {
    transform: scale(1.1);
}

.search-container .news-list .news-item a:not(.wfEditorMode) {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: calc(var(--ratio-size) * 340);
    padding: calc(var(--ratio-size) * 60) 0;
}

.search-container .news-list .news-item a.wfEditorMode {
    transform: translateY(100%);
}

.search-container .news-list .news-item .pic {
    width: calc(var(--ratio-size) * 380);
    height: calc(var(--ratio-size) * 220);
    overflow: hidden;
}

.search-container .news-list .news-item .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s;
}

.search-container .news-list .news-item:hover .right-text .news-btn {
    transform: translateX(200%);
    background-color: #71b638;
    border-color: #71b638;
}

.search-container .news-list .news-item .time {
    display: flex;
    margin: 0 10px;
}

.search-container .news-list .news-item .time .day {
    margin-top: calc(var(--ratio-size) * -4);
    margin-right: calc(var(--ratio-size) * 10);
    font-size: calc(var(--ratio-size) * 72);
    line-height: 1;
    color: #3473b4;
}

.search-container .news-list .news-item .time .month {
    font-size: calc(var(--ratio-size) * 14);
    color: #666666;
}

.search-container .news-list .news-item .right-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(var(--ratio-size) * 720);
    padding-right: calc(var(--ratio-size) * 20);
    font-size: calc(var(--ratio-size) * 20);
}

.search-container .news-list .news-item .right-text .news-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--ratio-size) * 48);
    height: calc(var(--ratio-size) * 48);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .2);
    transition: all .5s;
}

.search-container .news-list .news-item .right-text .news-btn img {
    width: calc(var(--ratio-size) * 15);
}

.search-container .news-list .news-item .right-text .default-hidden {
    position: absolute;
    /* left: 0; */
    opacity: 0;
}

.search-container .news-list .news-item:hover .right-text .default-show {
    opacity: 0;
}

.search-container .news-list .news-item:hover .right-text .default-hidden {
    opacity: 1;
}

.search-container .search-error,
.search-container .search-result-empty {
    margin-bottom: calc(var(--ratio-size) * 100);
    text-align: center;
}

.privacy-container {
    padding-bottom: calc(var(--ratio-size) * 100);
    margin-top: calc(var(--ratio-size) * 240);
}

.privacy-container h3 {
    font-size: calc(var(--ratio-size) * 30);
    font-weight: bold;
    color: #2655a8;
    text-align: center;
}

.privacy-container .text-content {
    margin-top: calc(var(--ratio-size) * 50);
    font-size: calc(var(--ratio-size) * 16);
}

.privacy-container h6 {
    margin-bottom: calc(var(--ratio-size) * 20);
    font-size: calc(var(--ratio-size) * 22);
    font-weight: bold;
}

.privacy-container p:not(:last-child) {
    margin-bottom: calc(var(--ratio-size) * 25);
    line-height: 1.5;
}



@keyframes fullRotateAn {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fullRotateCultureAn {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.noHeight {
    display: none;
}

.gcl-group-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.gcl-group-container .roll-icon {
    position: absolute;
    left: calc(var(--ratio-size) * 240);
    bottom: calc(var(--ratio-size) * 80);
    transform: translateX(50%);
    z-index: 5;
    width: calc(var(--ratio-size) * 60);
    cursor: pointer;
}

.gcl-group-container .gcl-swiper {
    width: 100%;
    height: 100%;
}

.gcl-group-container .gcl-swiper .swiper-slide:not(:last-child) {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.gcl-group-container .gcl-swiper .swiper-slide:last-child {
    height: auto;
}

.gcl-group-container .text-main {
    margin-top: calc(var(--ratio-size) * 220);
    /* margin-top: 10%; */
}

.gcl-group-container .zero-carbon {
    position: relative;
}

.gcl-group-container .zero-carbon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
}

.gcl-group-container .zero-carbon .text-main {
    position: relative;
    z-index: 2;
    width: 45%;
    color: #fff;
    opacity: 0;
    font-size: 14px;
}

.gcl-group-container .zero-carbon .title {
    margin-bottom: calc(var(--ratio-size) * 40);
    font-size: calc(var(--ratio-size) * 48);
    line-height: 1.2;
    font-weight: bold;
}

.gcl-group-container .fbr {
    position: relative;
}

.gcl-group-container .fbr::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0));
}

.gcl-group-container .fbr .text-main {
    position: relative;
    z-index: 2;
    width: 80%;
    color: #000;
    opacity: 0;
}

.gcl-group-container .fbr .top-title {
    padding-bottom: calc(var(--ratio-size) * 20);
    font-size: calc(var(--ratio-size) * 48);
    font-weight: bold;
    color: #71b638;
    border-bottom: 1px solid rgb(113, 183, 56)
}

.gcl-group-container .fbr .text {
    margin-top: calc(var(--ratio-size) * 15);
    font-size: 14px;
}

.gcl-group-container .fbr .data-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--ratio-size) * 30);
}

.gcl-group-container .fbr .data-item {
    width: 33%;
    padding: 0 calc(var(--ratio-size) * 20);
    margin-bottom: calc(var(--ratio-size) * 30);
    border-left: 1px solid rgb(114, 177, 219);
}

.gcl-group-container .fbr .data-item .title {
    position: relative;
    font-weight: bold;
    color: rgb(0, 114, 190);
    line-height: 1;
}

.gcl-group-container .fbr .data-item .title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    display: inline-block;
    width: 80%;
    height: calc(var(--ratio-size) * 20);
    background-image: linear-gradient(to right, rgba(113, 183, 56, .8), rgba(113, 183, 56, 0));
}

.gcl-group-container .fbr .data-item .title span {
    font-size: calc(var(--ratio-size) * 35);
}

.gcl-group-container .fbr .data-item .icon {
    width: calc(var(--ratio-size) * 28);
}

.gcl-group-container .fbr .blue-br {
    width: 100%;
    margin-bottom: calc(var(--ratio-size) * 30);
    border-bottom: 1px solid rgb(0, 114, 190);
}

.gcl-group-container .perovskite {
    position: relative;
    display: flex;
    color: #fff;
}

.gcl-group-container .perovskite::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .1);
}

.gcl-group-container .perovskite>div {
    position: relative;
    z-index: 2;
    opacity: 0;
}

.gcl-group-container .perovskite .text-main.left-content {
    width: 35%;
}

.gcl-group-container .perovskite .product-pic {
    width: calc(var(--ratio-size) * 300);
    margin-top: calc(var(--ratio-size) * 220);
}

.gcl-group-container .perovskite .product-pic img {
    width: 100%;
    height: auto;
}

.gcl-group-container .perovskite .text-main.right-content {
    flex: 1;
    margin-left: calc(var(--ratio-size) * 30);
}

.gcl-group-container .perovskite .title {
    font-size: calc(var(--ratio-size) * 48);
    line-height: 1.2;
    font-weight: bold;
}

.gcl-group-container .perovskite .s-title {
    font-size: 18px;
}

.gcl-group-container .perovskite .text {
    margin-top: calc(var(--ratio-size) * 20);
    font-size: 14px;
}

.gcl-group-container .perovskite .right-content .data-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--ratio-size) * 20);
}

.gcl-group-container .perovskite .right-content .data-item {
    width: 50%;
    margin-bottom: calc(var(--ratio-size) * 25);
}

.gcl-group-container .perovskite .right-content .data-title {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, .1));
    width: 90%;
    padding: calc(var(--ratio-size) * 8) 0;
    padding-left: calc(var(--ratio-size) * 20);
    color: rgb(48, 112, 184);
    font-size: calc(var(--ratio-size) * 18);
    font-weight: bold;
}

.gcl-group-container .perovskite .right-content .data-main {
    padding-left: calc(var(--ratio-size) * 20);
    padding-right: calc(var(--ratio-size) * 20);
    margin-top: calc(var(--ratio-size) * 20);
    border-left: 1px solid #fff;
}

.gcl-group-container .perovskite .right-content .text-num {
    position: relative;
    font-size: calc(var(--ratio-size) * 16);
    font-weight: bold;
    line-height: 1;
}

.gcl-group-container .perovskite .right-content .text-num::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: calc(var(--ratio-size) * 100);
    height: calc(var(--ratio-size) * 10);
    background-image: linear-gradient(to right, rgba(110, 185, 45, 1), rgba(110, 185, 45, 0));
}

.gcl-group-container .perovskite .right-content .text-num span {
    font-size: calc(var(--ratio-size) * 35);
    line-height: 1;
}

.gcl-group-container .perovskite .right-content .annotation-text {
    margin-top: calc(var(--ratio-size) * 20);
}

/* .gcl-group-container .perovskite .right-content .low-energy {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
} */

/* .gcl-group-container .perovskite .right-content .low-energy .data-main {
    width: 48%;
} */

.gcl-group-container .semiconductor {
    position: relative;
    background-image: linear-gradient(to right, rgba(49, 113, 183, 0), rgba(49, 113, 183, .7));
}

.gcl-group-container .semiconductor::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(49, 113, 183, 0), rgba(49, 113, 183, .9));
}

.gcl-group-container .semiconductor .title {
    font-size: calc(var(--ratio-size) * 48);
    font-weight: bold;
}

.gcl-group-container .semiconductor .s-title {
    font-size: 18px;
    line-height: 1.2;
}

.gcl-group-container .semiconductor .text-main {
    position: relative;
    z-index: 2;
    width: 45%;
    margin-left: auto;
    color: #fff;
    opacity: 0;
}

.gcl-group-container .semiconductor .text {
    margin-top: calc(var(--ratio-size) * 40);
    font-size: 14px;
}

.gcl-group-container .semiconductor .text p {
    margin-bottom: calc(var(--ratio-size) * 10);
}

.gcl-group-container .li-battery {
    position: relative;
}

.gcl-group-container .li-battery::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .6);
}

.gcl-group-container .li-battery .title {
    font-size: calc(var(--ratio-size) * 48);
    color: rgb(0, 114, 190);
    font-weight: bold;
}

.gcl-group-container .li-battery .text-main {
    position: relative;
    z-index: 2;
    width: 43%;
    opacity: 0;
}

.gcl-group-container .li-battery .text {
    margin-top: calc(var(--ratio-size) * 20);
    font-size: 14px;
}

.gcl-group-container .li-battery .text strong {
    font-weight: bold;
}

.gcl-group-container .hub {
    position: relative;
}

.gcl-group-container .hub::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
}

.gcl-group-container .hub .text-main {
    position: relative;
    z-index: 2;
    width: 45%;
    margin-left: auto;
    color: #fff;
    opacity: 0;
}

.gcl-group-container .hub .text-main .title {
    font-size: calc(var(--ratio-size) * 48);
    line-height: 1.2;
    color: #fff;
    font-weight: bold;
}

.gcl-group-container .hub .text-main .s-title {
    margin-top: calc(var(--ratio-size) * 10);
    font-size: 18px;
    line-height: 1.2;
}

.gcl-group-container .hub .text-main .text {
    margin-top: calc(var(--ratio-size) * 20);
    font-size: 14px;
}

.gcl-group-container .natural-gas {
    position: relative;
}

.gcl-group-container .natural-gas .text-main {
    position: relative;
    z-index: 2;
    width: 45%;
    margin-left: auto;
    color: #fff;
    opacity: 0;
}

.gcl-group-container .natural-gas .text-main .title {
    font-size: calc(var(--ratio-size) * 48);
    font-weight: bold;
}

.gcl-group-container .natural-gas .text-main .text {
    margin-top: calc(var(--ratio-size) * 20);
    font-size: 14px;
}

.contact-container .form-content {
    padding-top: calc(var(--ratio-size) * 120);
    padding-bottom: calc(var(--ratio-size) * 120);
    background-color: #f5f5f5;
}

.contact-container .form-content .common-xl-title {
    text-align: center;
}

.contact-container .form-content .input-item {
    margin-bottom: calc(var(--ratio-size) * 25);
}

.contact-container .form-content .name {
    margin-bottom: 5px;
    font-size: calc(var(--ratio-size) * 20);
}

.contact-container .form-content input,
.contact-container .form-content textarea {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 5px;
    padding-left: calc(var(--ratio-size) * 15);
    border: 1px solid #c1c1c1;
    outline: none;
    font-size: calc(var(--ratio-size) * 18);
}

.contact-container .form-content textarea {
    resize: none;
}

.contact-container .form-content form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: calc(var(--ratio-size) * 100);
}

.contact-container .form-content .input-item {
    position: relative;
    width: 48%;
}

.contact-container .form-content .input-item .input-error {
    position: absolute;
    bottom: 0;
    transform: translateY(0);
    color: #ff0000;
    font-size: calc(var(--ratio-size) * 14);
    opacity: 0;
    transition: all .5s;
}

.contact-container .form-content .input-item .input-error.show {
    opacity: 1;
    transform: translateY(100%);
}

.contact-container .form-content .input-item.full-item {
    width: 100%;
}

.contact-container .form-content .input-item .small-text {
    font-size: calc(var(--ratio-size) * 18);
}

.contact-container .select-content {
    position: relative;
}

.contact-container .select-content .show-value {
    cursor: pointer;
    transition: all .5s;
}

.contact-container .select-content .show-value:hover {
    background-color: #e0e0e0;
}

.contact-container .select-content .icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
}

.contact-container .select-content .icon img {
    display: block;
}

.contact-container .select-content ul {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 4;
    width: 100%;
    transform: translateY(100%);
    box-shadow: 0 1px 3px #c1c1c1;
}

.contact-container .select-content ul li {
    border-bottom: 1px solid #e0e0e0;
    padding: calc(var(--ratio-size) * 10);
    padding-left: calc(var(--ratio-size) * 15);
    cursor: pointer;
    background-color: #fff;
}

.contact-container .select-content ul li:hover {
    background-color: #ececec;
}

.contact-container .select-content .write-value {
    display: none;
    position: absolute;
    width: 100%;
    justify-content: space-between;
    border: 1px solid #c1c1c1;
}

.contact-container .select-content .write-value input {
    flex: 1;
    margin-top: 0;
    border: none;
}

.contact-container .select-content .write-value .enter-btn {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--ratio-size) * 45);
    padding: calc(var(--ratio-size) * 10);
    width: calc(var(--ratio-size) * 45);
    cursor: pointer;
}

.contact-container .select-content .write-value .enter-btn:hover {
    background-color: #dfdfdf;
}

.contact-container .agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: auto;
    margin-top: calc(var(--ratio-size) * 80);
}

.contact-container .agreement .state-icon {
    width: calc(0.729vw + 6px);
    height: calc(0.729vw + 6px);
    margin-right: calc(var(--ratio-size) * 15);
    border-radius: 50%;
    border: 1px solid #c1c1c1;
    background-color: #fff;
    cursor: pointer;
}

.contact-container .agreement .state-icon.checked {
    background: url('../images/enter_icon.png') no-repeat center/cover;
}

.contact-container .agreement p {
    cursor: pointer;
}

.contact-container .agreement p a {
    color: rgb(28, 77, 164);
    text-decoration: underline;
}

.contact-container .sub-btn {
    width: 100%;
    margin-top: calc(var(--ratio-size) * 20);
    text-align: center;
}

.contact-container .sub-btn p {
    display: inline-block;
    padding: calc(var(--ratio-size) * 15) calc(var(--ratio-size) * 50);
    border: 1px solid #c1c1c1;
    font-size: calc(var(--ratio-size) * 20px);
    background-color: rgb(38, 85, 168);
    cursor: pointer;
    color: #fff;
    transition: all .5s;
}

.contact-container .sub-btn p:hover {
    background-color: rgb(125, 188, 73);
}

.tips-container {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    background-color: #fff;
    border-radius: 50px;
    padding: calc(var(--ratio-size) * 100) calc(var(--ratio-size) * 70);
    box-shadow: 0 1px 3px #c1c1c1;
    font-size: calc(var(--ratio-size) * 22);
}

.tips-container .input-tips,
.tips-container .agreement-tips {
    display: none;
}


.load-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, .5);
}

.load-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

.load-effect div {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-animation: load 2.08s linear infinite;
}

.load-effect div span {
    position: absolute;
    left: 50%;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgb(217, 223, 217);
    /* margin-top: -10px;
    margin-left: -10px; */
}

@-webkit-keyframes load {
    0% {
        -webkit-transform: rotate(0deg);
    }

    10% {
        -webkit-transform: rotate(45deg);
    }

    50% {
        opacity: 1;
        -webkit-transform: rotate(160deg);
    }

    62% {
        opacity: 0;
    }

    65% {
        opacity: 0;
        -webkit-transform: rotate(200deg);
    }

    90% {
        -webkit-transform: rotate(340deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }

}

.load-effect div:nth-child(1) {
    -webkit-animation-delay: 0.2s;
}

.load-effect div:nth-child(2) {
    -webkit-animation-delay: 0.4s;
}

.load-effect div:nth-child(3) {
    -webkit-animation-delay: 0.6s;
}

.load-effect div:nth-child(4) {
    -webkit-animation-delay: 0.8s;
}