:root {
    /*ui-scale-factor*/
    --rpx-75: clamp(0.75px, calc(0.026vw + 0.500px), 1px);
    --rpx-67: clamp(0.667px, calc(0.035vw + 0.334px), 1px);
    --rpx-50: 0.052vw;
    /*
    * 1px at 1920
    * 0.667px at 960
    */
    --rpx: var(--rpx-67);
    --wrapper-width: clamp(900px, calc(72.9167vw + 200px), 1600px);
    --wrapper-width-narrow: clamp(720px, calc(25vw + 480px), 960px);

    --serif-font: serif;
    --sans-serif-font: Arial, "Source Han Sans CN", sans-serif;

    font-family: var(--sans-serif-font);

    --theme-navy: rgba(30, 103, 193, 1);
    --theme-navy-dark: #004695;
    --theme-grass: #6fb92c;
    --theme-orange: #f99c1e;

    --bar1-height: calc(40rem / 16);
    --bar2-height: calc(80 * var(--rpx-75));
    --bar2-height-shrinked: calc(64 * var(--rpx-75));
    --header-height-min: var(--bar2-height-shrinked);

    --header-height: var(--header-height-min);
}

* {
    box-sizing: border-box;
}

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

a:hover{
    color: var(--theme-navy);
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

p + p {
    margin-top: 1.25em;
}

html {
    color: #333333;
    /*
    *16px at 1920
    *14px at 960
    */
    font-size: calc(0.208vw + 12px);
}

body {
    font-size: calc(0.20833vw + 12px);
    margin: 0;

    min-height: 100vh;
    display: flex;
    align-items: stretch;
}

sup {
    font-size: .5em;
    line-height: 1em;
    vertical-align: 0;
    transform: translateY(-80%);
    display: inline-block;
}

.anchor {
    position: relative;
    top: calc(-1 * var(--header-height));
}

.wrapper {
    width: var(--wrapper-width);
    margin-left: auto;
    margin-right: auto;
}

.wrapper.narrow{
    width: var(--wrapper-width-narrow);
}

.site-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 600;
    transition: .3s;
}

.site-header-sample{
    position: absolute;
    visibility: hidden;
    left: 0;
    top: 0;
}

.site-header-sample.min{
    height: var(--header-height-min);
}

body.scrolled {
    --header-height: var(--header-height-min);
}

.layer-mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transition: .2s;
}

body.masked .layer-mask {
    opacity: 1;
    visibility: visible;
    transition: .4s;
}

.site-header-bar {
    width: 100%;
    background-color: rgba(255, 255, 255, 0);
    /*background: linear-gradient(to bottom, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, 0) 100%) center 200%/100% 200% no-repeat;*/

    transition: .3s;
    color: #fff;
}

.scrolled .site-header-bar {
    -webkit-backdrop-filter: saturate(190%) blur(12px);
    backdrop-filter: saturate(190%) blur(12px);
    /*background-position-y: 0;*/
    background-color: rgba(255, 255, 255, .9);
    box-shadow: 0 0 3rem rgba(15, 15, 15, .05), 0 0 .75rem rgba(15, 15, 15, .075);
    color: inherit;
}

.scrolled.inner-nav-fixed .site-header-bar{
    box-shadow: none;
    border-bottom: 1px solid #e5e5e5;
    transition: 0s;
}


.site-header-bar .bar1,
.site-header-bar .bar2{
    display: flex;
    align-items: center;

    padding-left: calc(30 * var(--rpx));
    padding-right: calc(30 * var(--rpx));
}

.site-header-bar .bar1{
    justify-content: flex-end;
    height: var(--bar1-height);
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    transition: .4s cubic-bezier(0.15, 1, 0.336, 1);
    font-size: clamp(12px, calc(.2083vw + 10px), 14px);
}

.site-header-bar .bar1>a{
    color: inherit;
}

.scrolled .site-header-bar .bar1{
    height: 0;
    visibility: hidden;
    overflow: hidden;
}

.lang-switch{
    height: 100%;
    flex: 0 0 auto;
}

.site-header-bar .bar2{
    height: var(--bar2-height);
}

.scrolled .site-header-bar .bar2{
    height: var(--bar2-height-shrinked);
}

.site-logo {
    width: clamp(160px, calc(12.5vw + 40px), 280px);
    flex: 0 0 auto;
    position: relative;
    filter: url(#white-overlay);
    margin-right: clamp(20px, calc(3.125vw - 10px), 50px)
}

.site-logo img {
    /* height: auto;
    width: 100%; */
    height: 40px;
    width: auto;
    object-fit: contain;
    transition: .3s;
}

.scrolled .site-logo {
    filter: none;
}

.top-nav {
    height: 100%;
    display: flex;
    font-size: clamp(13px, calc(.3125vw + 10px), 16px);
    flex: 0 1 auto;
}

.top-nav .placeholder {
    font-weight: normal;
}

.top-nav .top-nav-item {
    flex: 0 0 auto;
    position: relative;
}

.top-nav .top-nav-link {
    padding-left: calc(20 * var(--rpx-50));
    padding-right: calc(20 * var(--rpx-50));

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;

    position: relative;
    transition: .2s color;
}

body:not(.scrolled) .top-nav .top-nav-link:hover{
    color: #fff;
}

.top-nav .top-nav-link.active {
    font-weight: bold;
}

.top-nav .top-nav-link::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, .05));
    z-index: 601;
    opacity: 0;
    transition: .2s opacity;
}

.scrolled .top-nav .top-nav-item:hover .top-nav-link,
.scrolled .top-nav .top-nav-item .top-nav-link.active{
    color: #fff;
}

.scrolled .top-nav .top-nav-link::after {
    background: var(--theme-navy);
}

.top-nav .top-nav-item:hover .top-nav-link::after,
.top-nav .top-nav-item .top-nav-link.active::after {
    opacity: 1;
}

.top-nav a:hover {
}

.top-nav a span {
    position: relative;
    line-height: 1.45em;
    height: 1.45em;
    z-index: 620;
}

.top-nav a span.placeholder {
    visibility: hidden;
}

.top-nav a span.display {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

.top-nav a span.placeholder::after {
    content: "";
    height: calc(2 * var(--rpx));
    width: 100%;
    transform: scale(0);
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    visibility: visible;
    background-color: #e1d1b0;
    transition: .3s;
    transform-origin: left center;
}

.top-nav a:hover span.placeholder::after {
    transform: none;
    opacity: 1;
}

.top-nav a.active span.placeholder::after {
    transform: scaleX(1.04);
    transform-origin: center center;
    opacity: 1;
}

.top-nav-sub {
    position: absolute;
    left: 0;

    display: flex;
    flex-direction: column;
    width: calc(240em / 16);
    align-items: stretch;

    background-color: #fff;

    top: 100%;
    color: #333;

    padding: calc(15 * var(--rpx-75)) 0;
    border-top: 1px solid #ebebeb;

    box-shadow: 0 calc(5 * var(--rpx)) calc(10 * var(--rpx)) 0px rgba(0, 0, 0, 0.2);
    visibility: hidden;
    transform: translateY(-5%);
    opacity: 0;
    transition: cubic-bezier(0.15, 1, 0.336, 1) .3s;

    border-bottom: calc(5 * var(--rpx)) solid var(--theme-navy);
}

.top-nav-item:hover .top-nav-sub {
    transition-duration: .5s;
    transform: none;
    visibility: visible;
    opacity: 1;
}

.top-nav-item .top-nav-sub a{
    display: block;
    width: 100%;
    line-height: 1.75em;
    padding: .5em calc(20 * var(--rpx-75));
}

.top-nav-item .top-nav-sub a:hover{
    background-color: var(--theme-navy);
    color: #fff;
}

.swiper-button-disabled {
    opacity: .5;
    pointer-events: none;
}

.section-inner {
    overflow: hidden;
}

.follow-mouse {
    display: block;
    transform: scale(0.667);
    transition: .4s;
    border-radius: calc(21 * var(--rpx));
    padding: calc(15 * var(--rpx)) calc(24 * var(--rpx));
    margin-left: calc(-16 * var(--rpx));
    transform-origin: left center;
}

.follow-mouse-outer {
    cursor: pointer;
    align-self: flex-start;
    font-size: 1.5rem;
}

.follow-mouse-outer:hover .follow-mouse {
    transform: scale(.8) translateX(calc(18 * var(--rpx)));
    background-color: rgba(0, 0, 0, .0) !important;
}

.follow-mouse-outer.light:hover .follow-mouse {
    background-color: rgba(0, 0, 0, .04);
    color: #011a65;
}

.follow-mouse-outer.hovered .follow-mouse {
    transition: .1s;
}

.link-more {
    font-weight: bold;
    display: flex;
    line-height: calc(30em / 16);
    cursor: pointer;
}

.link-more:hover {
    color: var(--theme-navy);
}

.arr {
    margin-left: calc(8em / 16);
    width: calc(30em / 16);
    height: calc(30em / 16);
    border-radius: 50%;
    flex: 0 0 auto;
    background-color: var(--theme-grass);
    position: relative;
    transition: .4s;
    display: inline-block;
    vertical-align: middle;
    margin-top: calc(-2em / 16);
}

.arr::before {
    content: "";
    width: calc(12em / 16);
    height: calc(11em / 16);
    background: url("../images/global/icon_more.svg") center/80% auto no-repeat;
    filter: url(#white-overlay);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    transition: .4s;
}

.link-more:hover .arr::before {
}

.link-more .arr::after {
    /*content: "";*/
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("../images/global/btn_more_wrap.svg") center/contain no-repeat;
    animation: spin 4s linear infinite;
    opacity: 0;
    transition: .4s;
}

.link-more:hover .arr::after {
    opacity: 1;
}

.arr.left::before{
    transform: rotate(-135deg);
}

.arr.list::before{
    background: url("../images/global/icon_list.svg") center/90% auto no-repeat;
}

.site-footer {
    position: relative;
    z-index: 205;
}

.site-footer .part-copy{
    border-top: calc(10 * var(--rpx)) solid #fff;
    position: relative;
}

.site-footer .part-copy::before{
    content: "";
    position: absolute;
    width: 100%;
    height: calc(10 * var(--rpx));
    top: calc(-10 * var(--rpx));
    left: 0;
    background: linear-gradient(to right, var(--theme-navy), var(--theme-grass));
}

.site-footer .part-copy .wrapper{
    display: flex;
    justify-content: space-between;
    padding-top: calc(40 * var(--rpx-50));
    padding-bottom: calc(40 * var(--rpx-50));
}

.pr-select{
    cursor: pointer;
    position: relative;
}

.pr-select .current{
    display: flex;
    align-items: center;
    padding: calc(10em / 14) calc(14em / 14);
    border-radius: calc(3 * var(--rpx));
    transition: .3s;
}

.pr-select:hover .current,
.pr-select.active .current {
    background-color: rgb(230,233,243);
}

.pr-select .current:active {
    transition: 0s;
    background-color: #e2e5ee;
}

.lang-switch .current::before {
    content: "";
    width: calc(25em / 14);
    height: calc(25em / 14);
    background: url("../images/global/icon_global.svg") center/contain no-repeat;
    margin-right: calc(8em / 14);
}

.pr-select .current::after {
    content: "";
    width: calc(11em / 14);
    height: calc(7em / 14);
    background: url("../images/global/icon_angle_down.svg") center/contain no-repeat;
    margin-left: calc(8em / 14);
}

.pr-select .pr-option-list {
    position: absolute;
    top: calc(100% + 4 * var(--rpx));
    left: 0;
    width: 100%;

    border-radius: calc(3 * var(--rpx));
    overflow: hidden;
    transition: cubic-bezier(0.15, 1, 0.336, 1) .4s;
    transform: translateY(-20%);
    opacity: 0;
    visibility: hidden;
}

.pr-select.active .pr-option-list {
    transform: none;
    opacity: 1;
    visibility: visible;
}

.pr-select .pr-option {
    padding: calc(10em / 14) calc(14em / 14);
    border-bottom: 1px solid #d7d7d7;
    background-color: rgb(230,233,243);
    display: block;
    text-align: center;
}

.site-footer .left .bottom .pr-select .pr-option:hover{
    color: rgba(1, 26, 101, 1);
}

.pr-select .pr-option:hover {
    background-color: #e2e5ee;
    color: rgba(1, 26, 101, 1);
}

.pr-select .pr-option:last-of-type {
    border-bottom: none;
}

h1, h2, h3 {
    margin-top: 0;
    margin-bottom: 0;
}

.page-header {
    height: calc(480 * var(--rpx-75));
    width: 100%;
    display: flex;
    align-items: stretch;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.page-header.gap{
    margin-bottom: calc(90 * var(--rpx-75));
}

.page-header a:hover{
    color: inherit;
}

.page-header .wrapper{
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-top: calc(100 * var(--rpx));
    position: relative;
    z-index: 210;
}

.page-title span{
    display: block;
}

.page-title .cn{
    font-size: calc(48 * var(--rpx));
    font-weight: bold;
}

.page-title .en{
    font-size: calc(38 * var(--rpx));
    text-transform: uppercase;
}

.desc {
    font-family: "Source Han Sans CN", sans-serif;
    font-size: calc(18rem / 16);

    line-height: calc(32em / 18);
}

.desc.lg{
    width: clamp(720px, calc(29.1667vw + 440px), 1000px);
    font-size: calc(24 * var(--rpx));
    line-height: calc(38em / 24);
    text-align: center;
    margin: 0 auto;
}

.desc-summary{

}

.desc p + p {
    margin-top: calc(30em / 18);
}


.desc h2, .desc h3{
    margin-top: 1em;
    margin-bottom: 1em;
}

.desc + .btn-ctn {
    margin-top: calc(80 * var(--rpx-50));
}

.desc img, .desc video{
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}

.scroll-hint-outer {
    font-size: calc(14rem / 16 * 1.5);
    justify-content: flex-end;
    margin-top: auto;
    margin-bottom: 0;

    text-transform: uppercase;


    cursor: pointer;

}

.scroll-hint {
    transform-origin: left center;
    transform: scale(0.667);
    border-radius: calc(21 * var(--rpx));

    display: flex;
    align-items: center;
}

.scroll-mouse {
    width: calc(25em / 14);
    height: calc(37em / 14);
    border-radius: calc(13em / 14);
    border: 1px solid #fff;
    margin-right: 1em;
    position: relative;
}

@keyframes scrollHintAngleMove {
    0% {
        opacity: 0;
        transform: translateY(calc(-12em / 14)) scale(.8);
    }
    33% {
        opacity: 1;
        transform: translateY(calc(-4em / 14)) scale(1);
    }
    67% {
        opacity: 1;
        transform: translateY(calc(4em / 14)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(calc(12em / 14)) scale(.8);
    }
}

.scroll-text {
    line-height: 1.5em;
    position: relative;
    margin-bottom: .5em;
}

.scroll-text::before,
.scroll-text::after {
    content: "";
    height: 1px;
    width: 100%;
    background: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: .4s;
}

.scroll-text::before {
    opacity: .3;
}

.scroll-text::after {
    width: 28%;
}

.scroll-hint-outer:hover .scroll-text::after {
    content: "";
    width: 100%;
    background-color: #fff;
}

.scroll-mouse i {
    width: calc(10em / 14);
    height: calc(5em / 14);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: url("../images/global/icon_angle_down.svg") center/contain no-repeat;
    filter: url(#white-overlay);
    animation: scrollHintAngleMove 2s linear infinite;
    opacity: 0;
}

.scroll-mouse i:nth-of-type(2) {
    animation-delay: .5s;
}

.scroll-mouse i:nth-of-type(3) {
    animation-delay: 1s;
}

.scroll-mouse i:nth-of-type(4) {
    animation-delay: 1.5s;
}

.flex-box {
    display: flex;
    --gap: calc(48 * var(--rpx));
    --column: 3;
    gap: var(--gap);
    flex-wrap: wrap;
    width: 100%;
}

.flex-box .list-item,
.flex-box .flex-item {
    width: calc((100% - var(--gap) * (var(--column) - 1)) / var(--column));
    flex: 0 0 auto;
}


.flex-box .flex-item.fullwidth{
    width: 100%;
}

.page-header-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 200;
}

.page-header-back img,
.page-header-back svg{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.page-inner-nav-placeholder {
    --inner-header-height: calc(60 * var(--rpx));
    height: var(--inner-header-height);
    position: relative;
    font-size: 1rem;
    font-weight: lighter;
    z-index: 205;
}

.page-inner-nav {
    position: relative;
    width: 100%;
    will-change: transform;
    display: flex;
    justify-content: center;
    height: var(--inner-header-height);
    padding-left: calc(30 * var(--rpx));
    padding-right: calc(30 * var(--rpx));
}

.page-inner-nav.fixed{
    justify-content: flex-start;
    height: calc(var(--inner-header-height) * .9);
    background-color: #fff;

    -webkit-backdrop-filter: saturate(190%) blur(12px);
    backdrop-filter: saturate(190%) blur(12px);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 3rem rgba(15, 15, 15, .05), 0 0 0.75rem rgba(15, 15, 15, .075);
}

.page-inner-nav .inner-nav-page-title{
    width: 0;
    overflow: hidden;
    font-weight: bold;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding-right: calc(54 * var(--rpx));
    position: relative;
    white-space: nowrap;
    pointer-events: none;

    opacity: 0;
}

.page-inner-nav.fixed .inner-nav-page-title{
    pointer-events: all;
}

.page-inner-nav .inner-nav-page-title::after{
    content: "";
    position: absolute;
    right: calc(24 * var(--rpx));
    width: 1px;
    height: 1.6em;
    top: .25em;
    bottom: 0;
    margin: auto;
    background-color: #d8d8d8;
}

.page-inner-nav .inner-nav-link {
    font-weight: 400;
    flex: 0 0 auto;
    width: auto;
    padding-left: 3.5em;
    padding-right: 3.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: calc(2 * var(--rpx)) solid #e5e5e5;
    transition: .2s border, .2s color;
    position: relative;
}

.page-inner-nav.fixed .inner-nav-link{
    padding-left: 2em;
    padding-right: 2em;
}

.page-inner-nav .inner-nav-link .en{
    display: none;
}

.page-inner-nav .inner-nav-link.muted{
    display: none;
}

.page-inner-nav .inner-nav-link:hover{
    color: var(--theme-navy);
    border-bottom-color: var(--theme-navy);
}

.page-inner-nav:not(.fixed) .inner-nav-page-title+.inner-nav-link{
    margin-left: calc(-60 * var(--rpx));
}

.page-inner-nav .inner-nav-link.active{
    color: var(--theme-navy);
    font-weight: bold;
    border-bottom: calc(2 * var(--rpx)) solid var(--theme-navy);
}

section .section-back {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    z-index: 200;
    min-height: 100%;
    object-fit: cover;
}

section .section-back.fixed{
    height: 100vh;
    min-height: unset;
}

section .wrapper {
    position: relative;
    z-index: 201;
}

section {
    position: relative;
    z-index: 200;
    background-color: #fff;
}

.page-header.fullscreen {
    background-color: transparent;
}

.dialog{
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.dialog .btn-close{
    position: absolute;
    left: 100%;
    top: 0;
    width: calc(100 * var(--rpx));
    height: calc(100 * var(--rpx));
    background-color: var(--theme-navy);
    cursor: pointer;
}

.dialog .btn-close::after{
    content: "";
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: url("../images/global/icon_close.svg") center/contain no-repeat;
    filter: url(#white-overlay);
    transition: .4s cubic-bezier(0.15, 1, 0.336, 1)
}

.dialog .btn-close:hover::after{
    transform: scale(1.25);
}

.dialog-title{
    width: 100%;
    padding: calc(30 * var(--rpx)) calc(80 * var(--rpx));
    font-weight: bold;
    font-family: var(--serif-font);
    font-size: calc(40 * var(--rpx));
    background-color: #e6e9f3;
}

.dialog-content{
    width: calc(100% - 80 * var(--rpx));

    padding: 0 calc(40 * var(--rpx));
    margin-top: calc(60 * var(--rpx));
    margin-bottom: calc(60 * var(--rpx));
    padding-bottom: calc(20 * var(--rpx));

    font-size: calc(18 * var(--rpx));
    line-height: calc(30em / 18);
    max-height: calc(100vh - 300vh / 10.8 - calc(140 * var(--rpx)));
    overflow: auto;
}


.dialog-content::-webkit-scrollbar{
    width: 2px;
    background-color: #e5e5e5;
}

.dialog-content::-webkit-scrollbar-thumb{
    background-color: var(--theme-navy);
}

.dialog-content h3{
    font-weight: bold;
    font-family: var(--sans-serif-font);
    font-size: calc(28 * var(--rpx));
    margin-bottom: calc(24 * var(--rpx));
    margin-top: calc(60 * var(--rpx));
}

.dialog-content h3:first-of-type{
    margin-top: 0;
}

.dialog-content p+p{
    margin-top: calc(30em / 18);
}

.dialog-content .link-list a{
    display: block;
}

.dialog-content .link-list a:hover{
    color: var(--theme-navy);
    font-weight: bold;
}

.dialog-content .link-list a .arr{
    display: inline-block;
    vertical-align: middle;
    margin-left: 0;
    margin-top: calc(-2em / 18)
}

.dialog-content .link-list a .arr::before{
    content: "";
    filter: url(#navy-overlay);
}

.dialog-content ul{
    padding-left: 1em;
}

.dialog-content li{
    margin-bottom: calc(30em / 18);
}

.dialog-content li:last-of-type{
    margin-bottom: 0;
}

.dialog-layer{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 800;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: .4s cubic-bezier(0.15, 1, 0.336, 1);
}

.dialog-layer.active{
    opacity: 1;
    visibility: visible;
}

.dialog{
    visibility: hidden;
    opacity: 0;
    transform: scale(.96);
    width: clamp(720px, calc(25vw + 480px), 960px);
    transition: .8s cubic-bezier(0.15, 1, 0.336, 1);
}

.dialog-layer.active .dialog{
    visibility: visible;
    opacity: 1;
    transform: none;
}

.dropdown-ctn{
    position: relative;
}

.dropdown-options{
    position: absolute;
    width: 100%;
    top: calc(100% + 2px);
    height: auto;
    transform: scaleY(.5);
    transform-origin: top center;
    opacity: 0;
    background-color: #fff;
    overflow: hidden;
    border-radius: calc(5 * var(--rpx));
    color: #333;
    padding-top: .5em;
    padding-bottom: .5em;
    transition: .4s cubic-bezier(0.15, 1, 0.336, 1);
    visibility: hidden;
    z-index: 210;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
}

.dropdown-options>*{
    line-height: 1.6em;
    padding: .4em 1em;
    display: block;
    width: 100%;
}

.dropdown-options>*:hover{
    color: #fff;
    background-color: var(--theme-navy);
}

.dropdown-current{
    height: 100%;
    line-height: 1.5em;
    cursor: pointer;
    transition: .4s cubic-bezier(0.15, 1, 0.336, 1);
}

.dropdown-ctn.active .dropdown-options{
    transform: none;
    opacity: 1;

    visibility: visible;
}

.lang-switch .dropdown-current,
.link-contact{
    cursor: pointer;
    height: 100%;
    padding-left: 1em;
    padding-right: 1em;
    display: flex;
    align-items: center;
    line-height: 1.5em;
}

.lang-switch .dropdown-current::before{
    content: "";
    width: calc(17em / 14);
    height: calc(17em / 14);
    background: url("../images/global/icon_language.svg") center/contain no-repeat;
    filter: url(#white-overlay);
    margin-right: calc(10em / 14);
}

.lang-switch .dropdown-current::after{
    content: "";
    margin-left: calc(8em / 14);
}

.dropdown-current::after{
    content: "";
    width: calc(10em / 14);
    height: calc(5em / 14);
    background: url("../images/global/icon_angle_down.svg") center/contain no-repeat;
    filter: url(#white-overlay);
}

.lang-switch .dropdown-current:hover,
.link-contact:hover{
    background: linear-gradient(to bottom, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05));
}

.scrolled .lang-switch .dropdown-current:hover,
.scrolled .link-contact:hover{
    background: var(--theme-navy);
}

.site-header .external-links{
    margin-left: auto;
    margin-right: calc(20 * var(--rpx));
    justify-content: flex-end;
    font-size: clamp(12px, calc(.2083vw + 10px), 14px);
}

.external-links .dropdown-current{
    height: calc(40em / 14);
    border-radius: calc(20em / 14);
    border: 1px solid rgba(255, 255, 255, .5);
    width: calc(160em / 14);
    display: flex;
    align-items: center;
    padding-left: calc(18em / 14);
    padding-right: calc(18em / 14);
}

.external-links .dropdown-current:hover{
    background-color: rgba(255, 255, 255, .1);
}

.external-links .dropdown-current::after{
    content: "";
    width: calc(15em / 14);
    height: calc(8em / 14);

    position: absolute;
    top: 0;
    bottom: 0;
    right: 1em;
    margin: auto;
}

.scrolled .external-links .dropdown-current,
.site-footer .external-links .dropdown-current{
    border-color: rgba(0, 0, 0, .3);
}

.site-footer .external-links .dropdown-current{
    color: var(--theme-navy);
}

.scrolled .external-links .dropdown-current:hover{
    background-color: rgba(0, 0, 0, 0.05);
}

.scrolled .external-links .dropdown-current::after{
    filter: url(#black-overlay);
    opacity: .3;
}

.site-footer .external-links .dropdown-current::after{
    filter: url(#navy-overlay);
    opacity: 1;
}

.dropdown-ctn.flip .dropdown-current::after{
    transform: rotate(180deg);
}
.dropdown-ctn.flip .dropdown-options{
    transform-origin: bottom center;
    top: unset;
    bottom: calc(100% + 2px);
}


.site-header .btn-search{
    height: calc(40em / 14);
    width: calc(40em / 14);
    border-radius: calc(20em / 14);
    border: 1px solid rgba(255, 255, 255, .5);
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    align-items: center;
    padding-left: calc(18em / 14);
    padding-right: calc(18em / 14);
    position: relative;
    cursor: pointer;
    font-size: clamp(12px, calc(.2083vw + 10px), 14px);
}

.site-header .btn-search:hover{
    background-color: rgba(255, 255, 255, .1);
}

.scrolled .site-header .btn-search{
    border-color: rgba(0, 0, 0, .3);
}

.site-header .btn-search::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: calc(17em / 14);
    height: calc(17em / 14);
    background: url("../images/global/icon_search.svg") center/contain no-repeat;
    filter: url(#white-overlay);
}
.scrolled .site-header .btn-search::after{
    filter: url(#black-overlay);
    opacity: .3;
}
.scrolled .site-header .btn-search:hover{
    cursor: pointer;
    background-color: rgba(0, 0, 0, .05);
}

.section-title{
    margin-bottom: calc(40 * var(--rpx-50));
}

.section-title span{
    display: block;
}

.section-title .en{
    opacity: .5;
    text-transform: uppercase;
}

.section-title .cn{
    font-size: calc(42 * var(--rpx));
    font-weight: bold;
}

.btn-more{
    line-height: 1.5em;
    padding: calc(15em / 16) 3em calc(15em / 16) 5em;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    overflow: hidden;
    background-color: #edeff2;
    border-radius: calc(27em / 16);
    color: #000000;
}

.btn-more:hover{
    filter: brightness(1.05);
}

.btn-more::before{
    content: "";
    left: 0;
    top: 0;
    position: absolute;
    height: 100%;
    aspect-ratio: 1/1;
    width: auto;
    border-radius: 0 50% 50% 0;
    background: url("../images/global/icon_more.svg") center/1em auto no-repeat var(--theme-grass);
}

.hover-shadow{
    transition: .3s box-shadow !important;
    box-shadow: 0 0 0 rgba(0, 0, 0, .05);
}

.hover-shadow:hover{
    box-shadow: 0 5px 20px rgba(0, 0, 0, .05);
}

.site-footer{
    border-top: 1px solid #e5e5e5;
    background-color: #fff;
}

.site-footer .row1{
    padding-top: calc(80 * var(--rpx-50));
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: calc(30 * var(--rpx-50));
}

.site-footer .row2{
    padding-top: calc(30 * var(--rpx-50));
}

.site-footer .right{
    display: flex;
    align-items: center;
}

.site-footer .link-out{
    width: calc(40em / 16);
    height: calc(40em / 16);
    margin-right: calc(20em / 16);
}

.site-footer .link-out img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-logo{
    width: calc(430 * var(--rpx));
    display: block;
}

.footer-logo img{
    display: block;
    width: 100%;
    height: auto;
}

.nav-title{
    font-size: 1rem;
    color: #333;
    margin-bottom: calc(24 * var(--rpx));
}

.site-footer .row2 .left{
    width: calc(480 * var(--rpx-75));
}

.contact-ctn{
    display: flex;
    align-items: stretch;
    gap: calc(30 * var(--rpx-75));
    font-size: calc(14rem / 16);
}

.tab-pane{
    display: none;
}
.tab-pane.active{
    display: block;
}

.contact-ctn .tab-header{
    width: calc(120 * var(--rpx-75));
    flex: 0 0 auto;
}

.contact-ctn .tab{
    line-height: calc(24em / 14);
    padding-top: calc(8em / 14);
    padding-bottom: calc(8em / 14);
    padding-left: calc(18em / 14);
    color: #999999;
    border-left: 2px solid currentColor;
    cursor: pointer;
}

.contact-ctn .tab:hover{
    color: var(--theme-navy);
}

.contact-ctn .tab.active{
    color: var(--theme-navy);
}

.contact-ctn .tab-body{
    width: calc(330 * var(--rpx-75));
    flex: 0 0 auto;
}

.contact-ctn .title {
    line-height: 1.5em;
    padding-top: .25em;
    padding-bottom: .25em;
    border-bottom: 1px solid #e6e9eb;
    font-size: 1rem;
}

.contact-ctn .company,
.contact-ctn .address,
.contact-ctn .telephone{
    margin-top: .75em;
    color: #666666;
}


.contact-ctn .btn-ctn{
    display: flex;
    justify-content: flex-start;
    margin-top: 1.5em;
}

.contact-ctn .btn-ctn a{
    font-size: clamp(11px, calc(0.1042vw + 10px), 12px);
    display: flex;
    align-items: center;
    height: calc(34em / 12);
    padding-left: calc(22em / 12);
    padding-right: calc(22em / 12);
    border-radius: calc(17em / 12);
    border: 1px solid #e3e5e9;
}

.contact-ctn .btn-ctn a:hover{
    border-color: currentColor;
}

.contact-ctn .company::before,
.contact-ctn .telephone::before{
    content: "";
    width: calc(17em / 14);
    height: calc(17em / 14);
    vertical-align: middle;
}

.site-footer .row2{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: calc(90 * var(--rpx-50));
}

.site-footer .row2 .right{
    flex: 0 0 calc(100% - calc(540 * var(--rpx-75)));

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: calc(30 * var(--rpx));
}

@media (min-width: 1441px) {
    .site-footer .row2 .right{
        justify-content: space-between;
    }
}

.site-footer .row2 .right .col a{
    display: block;
    white-space: nowrap;
}

.site-footer .row2 .right .col{
    flex: 0 0 auto;
}

.site-footer .nav-links{
    font-size: calc(14rem / 16);
    line-height: calc(24em / 14);
    color: #666666;
}

img[data-viewer], *[data-viewer] img{
    cursor: zoom-in;
}

img[data-viewer]:hover, *[data-viewer] img:hover{
    filter: brightness(.8);
}

.sidebar{
    position: fixed;
    right: 0;
    height: 100%;
    top: 0;
    pointer-events: none;

    width: calc(80 * var(--rpx-75));
    padding-bottom: calc(80 * var(--rpx));
    gap: calc(10 * var(--rpx-75));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;

    z-index: 600;
}

.sidebar .btn{
    width: calc(60 * var(--rpx-75));
    height: calc(60 * var(--rpx-75));
    flex:0 0 auto;
    animation: fadeInUp .8s .2s cubic-bezier(0, .6, .4, 1) forwards;
    border-radius: 50%;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
    pointer-events: all;
    cursor: pointer;
    position: relative;
    background-color: #fff;
    transition: .2s;
}

.sidebar .btn img{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: calc(36 * var(--rpx-75));
    height: calc(36 * var(--rpx-75));
    object-fit: contain;
}

.sidebar .btn:hover{
    filter: brightness(1.05);
    box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
}

.sidebar .btn-top{
    background-color: var(--theme-navy);
    visibility: hidden;
    opacity: 0;
}

.scrolled .sidebar .btn-top{
    visibility: visible;
    opacity: 1;
}

.video-layer {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .75);
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 750;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    transition: .5s;
    opacity: 0;
    pointer-events: none;
}

.video-layer.active {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}

.video-layer .btn-close {
    position: absolute;
    left: calc(50vw + 410px);
    top: calc(50vh - 240px);
    border-radius: 50%;
    width: 32px;
    line-height: 30px;
    height: 32px;
    font-size: 20px;
    color: white;
    background: var(--theme-navy);
    cursor: pointer;
    text-align: center;
    transition: .3s;
}

.video-js .vjs-big-play-button {
    bottom: 0;
    right: 0;
    margin: auto;
}

.fold-handler{
    cursor: pointer;
}

.fold-content-wrapper{
    height: 0;
    overflow: hidden;
}


.swiper .controls{
    position: absolute;
    left: 0;
    bottom: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    z-index: 240;
}

.swiper .pagination{
    color: #666;
    margin-bottom: calc(12 * var(--rpx));
}

.swiper .swiper-pagination-current{
    color: var(--theme-navy-dark);
    font-size: 2em;
    font-weight: bold;
}

.swiper .navigation{
    gap: calc(20 * var(--rpx-50));
    display: flex;
    align-items: center;
}

.swiper .navigation .btn-prev,
.swiper .navigation .btn-next{
    cursor: pointer;
    width: calc(60 * var(--rpx-75));
    height: calc(60 * var(--rpx-75));
    border-radius: 50%;
    background-color: #edeff2;
    position: relative;
}

.swiper .navigation .btn-prev::after,
.swiper .navigation .btn-next::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: calc(8 * var(--rpx));
    height: calc(15.4 * var(--rpx));
    filter: url(#blue-overlay);
}

.swiper .navigation .btn-prev::after{
    background: url("../images/global/icon_angle_left.svg") center/contain no-repeat;
}

.swiper .navigation .btn-next::after{
    background: url("../images/global/icon_angle_right.svg") center/contain no-repeat;
}



.editor-link-mockup {
    height: 1.3em;
    line-height: 1.3em;
    margin: 0;
    padding: 0 0.5em;
    background: white;
    color: #99ccff;
    position: absolute;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 999;
}

body.wfEditorMode .editor-link-mockup{
    visibility: visible;
}

.news-card{
    --padding: clamp(24px, calc(3.3333vw - 8px), 56px);
    padding: var(--padding) var(--padding) 0 var(--padding);
    background-color: #fff;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    position: relative;

    height: clamp(320px, calc(29.1667vw + 40px), 600px);
}

.news-card .catalog{
    position: relative;
    padding-left: 1em;
    color: var(--theme-navy);
    margin-bottom: calc(32 * var(--rpx-50));
}

.news-card .catalog::before{
    content: "";
    background-color: currentColor;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    width: calc(6em / 16);
    height: calc(6em / 16);
    position: absolute;
}

.news-card .title{
    font-weight: bold;
    font-size: calc(18rem / 16);
    line-height: calc(30em / 18);
    color: #333333;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;

    height: calc(90em / 18);
    margin-bottom: .5em;
}

.news-card .desc{
    font-size: calc(14rem / 16);
    color: #666666;
    line-height: calc(24em / 14);

    display: -webkit-box;
    -webkit-line-clamp: 3;
    height: calc(72em / 14);
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

.news-card .bottom{
    height: clamp(60px, calc(4.1667vw + 20px), 100px);
    border-top: 1px solid #e3e5e9;
    padding-top: calc(24 * var(--rpx-50));
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex: 0 0 auto;
    margin-top: auto;
    margin-bottom: 0;
    width: 100%;
}

.news-card .date{
    color: var(--theme-navy);
    font-size: calc(60 * var(--rpx));
    line-height: .8em;
}

.news-card .month{
    color: #999999;
}

.news-card .btn-view-detail{
    height: clamp(60px, calc(4.1667vw + 20px), 100px);
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(101%);
    padding-left: var(--padding);
    background-color: #1e67c1;
    width: 100%;
    transition: .6s cubic-bezier(0.15, 1, 0.336, 1);
    color: #fff;
    display: flex;
    align-items: center;
}

.news-card .btn-view-detail::after{
    content: "";
    /*不加important可能会在transition过程中连续触发网络请求*/
    background: url("../images/global/icon_arr_right_white.svg") center/30% auto no-repeat #155ab0 !important;
    position: absolute;
    height: 100%;
    aspect-ratio: 1/1;
    right: 0;
    bottom: 0;
}

.news-card:hover .btn-view-detail{
    transform: none;
}

.yiiPager{
    margin-top: calc(80 * var(--rpx-50));
    display: flex;
    justify-content: center;
    align-items: center;
}

.yiiPager .page a{
    font-weight: bold;
    line-height: calc(26em / 16);
    border-bottom: 2px solid transparent;
    border-top: 2px solid transparent;
    padding-left: .1em;
    padding-right: .1em;
    display: block;
    margin: auto calc(10em / 16);
}

.yiiPager .page.selected a{
    color: var(--theme-navy);
    border-bottom-color: var(--theme-navy);
}

.yiiPager .hidden,
.yiiPager .dots{
    opacity: .5;
    pointer-events: none;
}

.yiiPager .previous a,
.yiiPager .next a{
    height: calc(50em / 16);
    padding-left: calc(36em / 16);
    padding-right: calc(36em / 16);
    border-radius: calc(25em / 16);
    border: 1px solid #e3e5e9;

    display: flex;
    align-items: center;
}

.yiiPager .previous a:hover,
.yiiPager .next a:hover{
    border-color: var(--theme-navy)
}

.yiiPager .previous{
    margin-right: calc(30em / 16);
}

.yiiPager .next{
    margin-left: calc(30em / 16);
}

.no-content-hint{
    font-size: 1.5em;
    color: #999;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-top: calc(40 * var(--rpx));
}

.year-selector-row{
    display: flex;
    justify-content: center;
}

.year-selector-row .dropdown-ctn{
    width: calc(200 * var(--rpx));
    font-size: calc(24 * var(--rpx));
    font-weight: bold;
}

.year-selector-row .dropdown-options{
    max-height: calc(260 * var(--rpx));
    overflow: auto;
}

.year-selector-row .dropdown-current{
    height: calc(62 * var(--rpx));
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--theme-navy);
    position: relative;
}

.year-selector-row .dropdown-current:hover{
    color: var(--theme-navy);
}

.year-selector-row .dropdown-current::after{
    content: "";
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    border-radius: 50%;
    position: absolute;
    width: calc(30 * var(--rpx));
    height: calc(30 * var(--rpx));
    background: url("../images/global/icon_angle_down.svg") center/calc(12 * var(--rpx)) auto no-repeat #edeff2;
    filter: none;
}

.report-card{
    position: relative;
    aspect-ratio: 370/450;
    background: url("../images/global/report_stripe.png") right bottom/40% auto no-repeat #f5f5f5;

    width: calc(370 * var(--rpx));
    height: auto;
}

.report-card a.wfEditorMode{
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 0;
    z-index: 240;
}

.report-card::before,
.report-card::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
}

.report-card::before{
    left: 0;
    bottom: 0;
    border-top: calc(90 * var(--rpx)) solid transparent;
    border-left: calc(104 * var(--rpx)) solid #fff;
}

.report-card::after{
    right: 0;
    top: 0;
    border-top: calc(90 * var(--rpx)) solid #fff;
    border-left: calc(104 * var(--rpx)) solid transparent;
}

.report-card .cover{
    width: calc(266% / 3.7);
    aspect-ratio: 266/360;
    border: 1px solid #e3e5e9;
}

.report-card:hover .cover{
    border-color: var(--theme-navy);
}

.report-card .cover img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.report-card .year{
    position: absolute;
    right: 0;
    top: calc(90 * var(--rpx));
    opacity: .2;
    color: #000;
    writing-mode: vertical-rl;
    font-size: calc(88 * var(--rpx));
    line-height: .8em;
}

.report-card .link-more{
    position: absolute;
    top: calc(360% / 4.5);
    bottom: 0;
    margin: auto;
    left: calc(140% / 3.7);
    line-height: 1.5em;
    height: 1.5em;
    font-size: calc(20 * var(--rpx));
}

.report-card:hover{
    background-color: var(--theme-navy);
    color: #fff;
}

.report-card:hover .year{
    color: #fff;
}

.report-card:hover .link-more{
    color: #fff;
    text-decoration: underline;
}

.report-card .link-more:hover{
    color: #fff;
}