@font-face {
    font-family: AlimamaShuHei;
    src: url(../AlimamaShuHeiTi-Bold-DeFgh-vb.woff);
    font-weight: 700;
    font-style: normal
}
body {
    color: #212121;
    line-height: 142%;
    font-family: Microsoft YaHei New,Microsoft Yahei,微软雅黑,宋体,Arial,Helvetica,sans-serif;
    font-weight: 500;
    padding: 0;
    margin: 0;
}
*,:after,:before {
    box-sizing: border-box
}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2
}
.h1,h1 {
    font-size: calc(1.3rem + .6vw)
}

@media (min-width: 1200px) {
    .h1,h1 {
        font-size:1.75rem
    }
}

.h2,h2 {
    font-size: 1.25rem
}

.h3,h3 {
    font-size: 1rem
}

.h4,h4 {
    font-size: .875rem
}

.h5,h5 {
    font-size: .75rem
}

.h6,h6 {
    font-size: .625rem
}


:root {
    --theme-color: #12225c;
    --button-bg: #14964f;
    --button-hover-bg: #0e6937;
    --button-color: #fff
}

@media (min-width: 1560px) {
    .container {
        max-width:1400px
    }
}

.shadow-layer {
    background: #12225c;
    opacity: .5
}

.wrapper {
    position: relative;
}

section.hero {
    position: relative;
}

section.hero .shadow-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

section.hero>video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

section.hero .cont {
    position: relative;
    z-index: 2;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8rem 0 4rem
}

@media (max-height: 758px) {
    section.hero .cont {
        height:unset;
        min-height: 100vh;
        padding-bottom: 10rem
    }
}

@media (max-width: 768px) {
    section.hero .cont {
        min-height:100vh;
        height: unset;
        padding-left: 2rem;
        padding-right: 2rem
    }
}

section.hero .hero-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(18,34,92,.5);
    mix-blend-mode: normal;
    z-index: 3;
    padding: .875rem 0
}

@media (max-width: 768px) {
    section.hero .hero-footer {
        display:none
    }
}

section.hero .hero-footer .title {
    display: flex;
    align-items: center
}

section.hero .hero-footer .title img {
    width: 68px;
    height: 68px;
    margin-right: 2rem
}

section.hero .hero-footer .title h1 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 0;
    margin-top: 0;
    font-family: AlimamaShuHei,serif
}
section.hero .cont .pager {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    margin-top: 3.75rem
}
section.hero .cont .pager .dots {
    /* margin-left: 1rem; */
    font-family: AlimamaShuHei,serif;
    /* display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start */
}

section.hero .cont .pager .dots span {
    color: #fff;
    margin: 0 .75rem;
    transition: color .2s;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer
}
.swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #000;
    opacity: 1;
    background: transparent;
}
section.hero .cont .pager .dots span.swiper-pagination-bullet-active {
    color: #3aaf6c
}

section.hero .cont .activity-swiper {
    max-width: 100%;
    overflow: hidden;
    color: #fff;
    text-align: center;
    margin: 0 6rem
}

@media (max-width: 768px) {
    section.hero .cont .activity-swiper {
        margin:0
    }
}

section.hero .cont .activity-swiper .activity-item {
    padding: 0 10px
}

section.hero .cont .activity-swiper .activity-item h3 {
    font-size: 3.25rem;
    font-weight: 500;
    letter-spacing: 1px;
    font-family: AlimamaShuHei,serif;
    margin-bottom: 1rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    section.hero .cont .activity-swiper .activity-item h3 {
        font-size:2rem
    }
}

section.hero .cont .activity-swiper .activity-item h4 {
    font-size: 1.25rem;
    position: relative;
    font-weight: 500;
    width: fit-content;
    margin: 0 auto 6rem
}

@media (max-width: 768px) {
    section.hero .cont .activity-swiper .activity-item h4 {
        font-size:1.125rem;
        margin: 0 auto 5rem
    }
}

section.hero .cont .activity-swiper .activity-item h4:after {
    content: "";
    position: absolute;
    bottom: -3rem;
    width: 60%;
    height: 1px;
    background-color: #fff;
    left: 50%;
    transform: translate(-50%);
    opacity: .75
}

@media (max-width: 768px) {
    section.hero .cont .activity-swiper .activity-item h4:after {
        bottom:-2.5rem
    }
}

section.hero .cont .activity-swiper .activity-item .buttons>* {
    margin-right: 1.25rem
}

@media (max-width: 400px) {
    section.hero .cont .activity-swiper .activity-item .buttons>* {
        font-size:.875rem;
        padding: .5rem 1rem
    }
}

section.hero .cont .activity-swiper .activity-item .buttons>*:last-child {
    margin-right: 0
}

section.hero .cont .pager .pause {
    --progress: 0;
    width: 36px;
    height: 36px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

section.hero .cont .pager .pause i {
    color: #fff;
    font-size: 1.125rem
}

section.hero .cont .pager .pause i.fa-play {
    transform: translate(1px)
}

section.hero .cont .pager .pause svg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    stroke: #fff;
    fill: none;
    stroke-dashoffset: calc(100 * (1 - var(--progress)));
    stroke-dasharray: 100;
    transform: rotate(-90deg)
}
@media (min-width: 1024px) {
    .container-fluid {
        padding-left:2rem;
        padding-right: 2rem
    }
}

nav {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 9
}

nav header.navbar-expand-md .container-fluid {
    justify-content: flex-start
}

nav header.navbar-expand-md .container-fluid .navbar-brand {
    padding: 2rem 0
}


nav header.navbar-expand-md .container-fluid .navbar-brand:hover {
    opacity: 1!important
}

nav header.navbar-expand-md .container-fluid .navbar-brand img {
    width: 216px
}

@media (max-width: 768px) {
    nav header.navbar-expand-md .container-fluid .navbar-brand img {
        width:120px
    }
}

nav header.navbar-expand-md .container-fluid .header-qr {
    display: none
}

@media (max-width: 768px) {
    nav header.navbar-expand-md .container-fluid .header-qr {
        display:flex;
        align-items: center
    }

    nav header.navbar-expand-md .container-fluid .header-qr span {
        color: #fff;
        font-size: .875rem;
        margin-right: .5rem;
        font-family: AlimamaShuHei,serif;
        font-weight: 600
    }

    nav header.navbar-expand-md .container-fluid .header-qr img {
        height: 38px
    }
}

@media (max-width: 374px) {
    nav header.navbar-expand-md .container-fluid .header-qr {
        display:none
    }
}

nav header.navbar-expand-md .container-fluid .open-right-buttons {
    margin-left: 1rem;
    display: none
}

@media (max-width: 768px) {
    nav header.navbar-expand-md .container-fluid .open-right-buttons {
        display:block
    }
}

nav header.navbar-expand-md .container-fluid .open-right-buttons img {
    width: 26px;
    height: 26px;
    object-fit: contain
}

.theme-button {
    background-color: transparent;
    color: #fff;
    padding: .875rem 1.5rem;
    font-size: 1rem;
    border-radius: 1.5rem;
    border: 2px solid #fff;
    transition: all .25s;
    text-decoration: none !important;
    line-height: 1;
    display: inline-block;
}