.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

.fixed video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.banner .text {
    text-align: center;
}

.banner .text span {
    font-size: 38px;
    font-weight: bold;
    color: #FFFFFF;
    margin: 0 0 10px 0;
    display: block;
}

.banner .text p {
    font-size: 38px;
    font-family: Source Han Sans CN;
    font-weight: 100;
    color: #FFFFFF;
    height: 50px;
    overflow: hidden;
}

.section {
    width: 100%;
    background: #060606;
    padding: 133px 0 45px 0;
    position: relative;
    overflow: hidden;
    z-index: 3;
}

.section .background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    pointer-events: none;
}

.section .circle_background {
    position: absolute;
    top: 701px;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

.section .warp {
    position: relative;
    z-index: 1;
}

.section .warp .title {
    width: 1491px;
    margin: auto;
}

.section .warp .title p {
    font-size: 38px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 50px;
}

.section .warp .title .line {
    margin: 76px 0 0 0;
    width: 100%;
    height: 1px;
    background: #FFFFFF;
    opacity: 0.08;
}

.section .warp .content {
    width: 1491px;
    margin: 99px auto 116px;
    display: flex;
    justify-content: space-between;
}

.section .warp .content .explore .headline {
    display: flex;
    align-items: center;
    margin: 0 0 100px 0;
}

.section .warp .content .explore > div:first-child {
    transition: 2s;
    transform: translateX(-300px);
    opacity: 0;
}

.section .warp .content .explore div.aos-animate {
    transform: translateX(0);
    opacity: 1;
}

.section .warp .content .explore .headline .line {
    width: 36px;
    height: 1px;
    background: #E8340C;
    margin: 0 15px 0 0;
}

.section .warp .content .explore .headline p {
    font-size: 14px;
    font-family: Rubik;
    font-weight: 400;
    color: #FFFFFF;
}

.section .warp .content .explore .figure {
    margin: 0 0 0 180px;
}

.section .warp .content .explore .figure .item {
    margin: 0 0 75px 0;
}

.section .warp .content .explore .figure .item:nth-child(2n) {
    margin: 0 0 75px 190px;
}

.section .warp .content .explore .figure .item:last-child {
    margin: 0 0 0 190px;
}

.section .warp .content .explore .figure .item > p {
    font-size: 16px;
    font-family: Rubik;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 34px;
    opacity: 0.04;
    transition: 0.8s;
}

.section .warp .content .explore .figure .item .line {
    width: 280px;
    height: 1px;
    background: #FFFFFF;
    opacity: 0.04;
    margin: 21px 0 24px 0;
    transition: 0.8s;
}

.section .warp .content .explore .figure .item .number {
    display: flex;
    align-items: center;
}

.section .warp .content .explore .figure .item .number span {
    font-size: 65px;
    font-family: Rubik;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 0.04;
    transition: 0.8s;
}

.section .warp .content .explore .figure .item .number span:nth-child(2) {
    font-size: 18px;
    margin: 24px 0 0 4px;
}

.section .warp .content .explore .figure .active > p {
    opacity: 0.2;
}

.section .warp .content .explore .figure .active .line {
    opacity: 0.11;
}

.section .warp .content .explore .figure .active .number span {
    opacity: 1;
}

.section .warp .content .text .pick {
    transform: translateY(300px);
    opacity: 0;
    transition: 4s;
}

.section .warp .content .text .pick.aos-animate {
    transform: translateY(0);
    opacity: 1;
}

.section .warp .content .text .pick .text_effects {
    width: 739px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #FFFFFF;
    line-height: 34px;
}

.section .warp .content .text .more {
    width: 120px;
    height: 120px;
    border: 1px solid rgba(92, 92, 92, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 122px 0 0 158px;
    text-align: center;
    padding: 12px 0 0 0;
}

.section .warp .content .text .more p {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #A2A2A2;
    margin: 0 0 2px 0;
}

.section .warp .content .text .more .iconfont {
    color: rgba(161, 161, 161, 1);
    font-size: 23px;
}
.section_video{
    background: #050505;
    height: calc(100vh + 2935px);
    overflow: hidden;
    position: relative;
}
.section_video .warp{
    width: 100%;
    height: 100vh;
    -webkit-clip-path: inset(10.5rem 18vw 10.5rem 18vw round 3.6rem);
    animation: 5s video_wrap forwards;
    animation-play-state: paused;
}
@keyframes video_wrap {
    /*100%*/
    0%{
        -webkit-clip-path: inset(10.5rem 18vw 10.5rem 18vw round 3.6rem);
    }
    100%{
        -webkit-clip-path: inset(-0.5rem 0vw -0.5rem 0vw round 0rem);
    }
}
.section_video .warp .video {
    width: 100%;
    height: 100%;
    margin: auto;
    /*border-radius: 49px;*/
    overflow: hidden;
    position: relative;

}
.section_video .warp .video:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
}

.section_video .warp .video img{
    width: 100%;
    height: 100%;

}

.section_video .warp .video .button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    cursor: pointer;
    z-index: 2;
}

.section_video .warp .video .button .iconfont {
    color: rgba(255, 255, 255, 1);
    font-size: 89px;
}

.section_video .warp .video .button svg {
    margin: 0 0 10px 0;
}

.section_video .warp .video .button p {
    font-size: 24px;
    font-family: Rubik;
    font-weight: 400;
    color: #FFFFFF;
}

.section2 {
    width: 100%;
    background: #060606;
    position: relative;
    overflow: hidden;
    padding: 0 0 250px 0;
}

.section2 .warp {
    width: 1491px;
    margin: 100px auto 188px;
    position: relative;
    z-index: 2;
}

@media screen and (max-width: 1920px) {
    .section2 {
        padding: 0 0 42px 0;
    }

    .section2 .warp {
        margin: 100px auto 256px;
    }
}

.section2 .warp .title {
    font-size: 14px;
    font-family: Rubik;
    font-weight: 400;
    color: #FFFFFF;
}

.section2 .warp .content .text {
    width: 50%;
    margin-left: 50%;
    margin-top: 408px;
    position: relative;
    z-index: 1;
}

.section2 .warp .content .text .item {
    margin: 0 0 1410px 0;
    opacity: 0.1;
}

.section2 .warp .content .text .item:last-child {
    margin: 0;
}

.section2 .warp .content .text .item .time {
    font-size: 16px;
    font-family: Rubik;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 0.25;
    margin: 0 0 50px 0;
}

.section2 .warp .content .text .item span {
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFFFFF;
    margin: 0 0 33px 0;
    display: block;
}

.section2 .warp .content .text .item p {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #FFFFFF;
    line-height: 34px;
}

.section2 .joke {
    width: 100%;
    height: 100vh;
    position: absolute;
}

.section2 .joke .one {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: 1s;
}

.section2 .joke .one div {
    width: 100%;
    height: 100%;
    clip-path: circle(5vw at 27vw 50vh);
    -webkit-clip-path: circle(5vw at 27vw 50vh);
    animation: 5s scrP1 forwards;
    animation-play-state: paused;
}

.section2 .joke .one.active {
    opacity: 1;
}

@keyframes scrP1 {
    0% {
        clip-path: circle(5vw at 27vw 50vh);
        -webkit-clip-path: circle(5vw at 27vw 50vh);
    }
    70% {
        clip-path: circle(78vw at 27vw 50vh);
        -webkit-clip-path: circle(78vw at 27vw 50vh);
    }
    71% {
        clip-path: inset(0 0 0 0 round 0px);
        -webkit-clip-path: inset(0 0 0 0 round 0px);
    }
    85% {
        clip-path: inset(1.5rem 10vw 0.5rem 10vw round 0.6rem);
        -webkit-clip-path: inset(8.5rem 10vw 6.5rem 10vw round 2.6rem);
    }
    93% {
        clip-path: inset(1.5rem 10vw 0.5rem 10vw round 0.6rem);
        -webkit-clip-path: inset(8.5rem 10vw 6.5rem 10vw round 2.6rem);
    }
    100% {
        clip-path: inset(1.5rem 10vw 0.5rem 10vw round 0.6rem);
        -webkit-clip-path: inset(8.5rem 10vw 6.5rem 10vw round 2.6rem);
    }
}

.section2 .joke .one img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100%;
}

.section2 .joke .one:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 102%;
    background: rgba(0, 0, 0, 0.5);
}

.section2 .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #060606;
    z-index: 1;
    mix-blend-mode: multiply;
}

.section2 .mask .circle {
    width: 474px;
    height: 474px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 645px;
    left: 30%;
    transform: translate(-50%, -50%) scale(1);
}

.section3 {
    width: 100%;
    background: #060606;
    overflow: hidden;
}

.section3 .wrap {
    width: 1491px;
    margin: 162px auto 180px;
}

.section3 .wrap .title .small {
    font-size: 14px;
    font-family: Rubik;
    font-weight: 400;
    color: #FFFFFF;
    margin: 0 0 153px 0;
}

.section3 .wrap .title span {
    font-size: 38px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #FFFFFF;
}

.section3 .wrap .title .line {
    margin: 77px 0 0 0;
    width: 0;
    height: 1px;
    background: #FFFFFF;
    transition: 0.8s;
}

.section3 .wrap .title .line.aos-animate {
    width: 100%;
}

.section3 .wrap .content {
    margin: 73px 0 0 0;
    display: flex;
}

.section3 .wrap .content .item {
    position: relative;
    width: 70px;
    overflow: hidden;
    cursor: pointer;
    transition: 1.5s;
    transition-timing-function: cubic-bezier(.77, 0, .175, 1);
}

.section3 .wrap .content .item.on {
    width: fit-content;
}

.section3 .wrap .content .item .left {
    width: 70px;
    height: 510px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0 0 0;
    position: absolute;
    left: 0;
    top: 0;
    transition: 0.6s;
    transition-delay: 0.5s;
}

.section3 .wrap .content .item .left .num {
    font-size: 14px;
    font-family: Rubik;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 0.1;
}

.section3 .wrap .content .item .left span {
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    white-space: nowrap;
    width: 21px;
    transform: rotate(270deg);
}

.section3 .wrap .content .item.on .left {
    opacity: 0;
    pointer-events: none;
    transition-delay: unset;
}

.section3 .wrap .content .item .right {
    display: flex;
    opacity: 0;
    transition: 1s;
    pointer-events: none;
}

.section3 .wrap .content .item.on .right {
    opacity: 1;
    pointer-events: auto;
    padding: 0 30px;
}

.section3 .wrap .content .item .right .text .headline {
    display: flex;
    align-items: center;
    margin: 0 0 140px 0;
}

.section3 .wrap .content .item .right .text .headline p {
    font-size: 14px;
    font-family: Rubik;
    font-weight: 400;
    color: #FFFFFF;
    margin: 0 37px 0 0;
}

.section3 .wrap .content .item .right .text .headline span {
    font-size: 26px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
}

.section3 .wrap .content .item .right .pick {
    margin: 0 0 0 55px;
}

.section3 .wrap .content .item .right .pick p {
    width: 397px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #FFFFFF;
    line-height: 34px;
}

.section3 .wrap .content .item .right .pick .more {
    width: 120px;
    height: 120px;
    border: 1px solid rgba(92, 92, 92, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80px 0 0 0;
    text-align: center;
    padding: 12px 0 0 0;
}

.section3 .wrap .content .item .right .pick .more p {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #A2A2A2;
    margin: 0 0 2px 0;
}

.section3 .wrap .content .item .right .pick .more .iconfont {
    color: rgba(161, 161, 161, 1);
    font-size: 23px;
}

.section3 .wrap .content .item .right .picture {
    margin: 17px 0 0 79px;
}

.section4 {
    width: 100%;
    height: 100vh;
    background: rgba(10, 87, 153, 1);
    display: flex;
    align-items: center;
}

.section4 .index_join{
    position: relative;
    overflow: hidden;
}
section4 .index_join > div:first-child{
    position: relative;
    z-index: 1;
}
.section4 .background {
    position: absolute;
    top: 0;
    left: 0;
}

.section4 .index_join, .section4 .picture {
    width: 50%;
    height: 100%;
}

.section4 .index_join {
    padding: 0 60px 0 187px;
    display: flex;
    align-items: center;
}

.section4 .index_join img {
    margin: 0 0 75px 0;
}

.section4 .index_join .text {
    margin: 0 0 317px 0;
}

.section4 .index_join .text span {
    font-size: 38px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #FFFFFF;
    display: block;
    margin: 0 0 32px 0;
}

.section4 .index_join .text p {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
}

.section4 .index_join .pick .index_news {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 0.47;
}

.section4 .index_join .pick .line {
    width: 0;
    height: 1px;
    background: #FFFFFF;
    margin: 29px 0 49px 0;
    transition: 0.8s;
}

.section4 .index_join .pick .line.aos-animate {
    width: 720px;
}

.section4 .index_join .pick span {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #FFFFFF;
    margin: 0 0 38px 0;
    display: block;
}

.section4 .index_join .pick p {
    width: 693px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 28px;
}

.section4 .picture img {
    width: 100%;
    height: 100%;
}

div[aos='transform_three'] {
    transform: translateY(100px);
    opacity: 0;
}

div[aos='transform_three'].aos-animate {
    opacity: 1;
    transform: translateY(0);
    transition: 3s;
}
@media screen and (max-width: 1856px) {
    .section4 .index_join .pick .line.aos-animate{
        width: 100%;
    }
    .section4 .index_join{
        padding: 0 7%;
    }
    .section4 .index_join > div{
        width: 100%;
    }
    .section4{
        height: auto;
    }
    .section4 .index_join .text {
        margin: 0 0 32% 0;
    }
    .section4 .index_join .pick p{
        width: 100%;
    }
    .section .warp .title,.section3 .wrap,.section .warp .content,.section2 .warp{
        width: 80%;
    }
}
@media screen and (max-width: 1635px) {
    .section .warp .content .text .pick .text_effects{
        width: fit-content;
        font-size: 14px;
        line-height: 32px;
    }
    .section .warp .content .text{
        margin: 0 0 0 80px;
    }
    .section .warp .content .explore .figure .item .line{
        width: 220px;
    }
    .section .warp .content .explore .figure .item .number span{
        font-size: 45px;
    }
    .section3 .wrap .content .item .right .picture{
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .section3 .wrap .content .item .right .picture img{
        width: 100%;
    }
    .section3 .wrap .content .item .right .text .headline{
        margin: 0 0 70px 0;
    }
    .section3 .wrap .content .item .right .pick p{
        font-size: 13px;
        line-height: 30px;
    }
}

@media screen and (max-width: 1366px) {
    .section .warp .content .text .pick .text_effects{
        font-size: 13px;
    }
    .section .warp .content .text .more{
        margin: 54px 0 0 158px;
    }
    .section .warp .content .text {
        margin: 0 0 0 49px;
    }
    .section4 .index_join .text {
        margin: 0 0 21% 0;
    }
    .section .warp .title, .section3 .wrap, .section .warp .content, .section2 .warp{
        width: 90%;
    }
    .section_video .warp .video .button{
        transform: translate(-50%,-50%) !important;
    }
}

/* mobile */
@media screen and (max-width: 1270px) {
    .banner .text{
        max-width: 90%;
    }
    .banner .text span,.banner .text p{
        font-size: 26px;
        height: auto;
    }
    .section .warp .title p{
        font-size: 22px;
        line-height: 38px;
    }
    .section .warp .title .line {
        margin: 25px 0 0 0;
    }
    .section{
        padding: 50px 0;
    }
    .section .warp .content .explore .figure .item .number span {
        opacity: 1;
        font-size: 36px;
    }
    .section .warp .content .explore .figure .item .line {
        width: 100%;
        opacity: 0.11;
        margin: 14px 0 10px 0;
    }
    .section .warp .content .explore .figure .item > p {
        opacity: 0.2;
        font-size: 14px;
    }
    .section .warp .title,.section .warp .content .explore .headline,.section .warp .content .text,.section_video .warp{
        transform: none!important;
    }
    .section .warp .content{
        margin: 22px auto 20px;
        flex-direction: column;
        align-items: unset;
    }
    .section .warp .content .explore > div:first-child{
        transform: translateX(0);
        opacity: 1;
    }
    .section .warp .content .explore .headline p{
        font-size: 12px;
    }
    .section .warp .content .explore .figure{
        margin: 0;
    }
    .section .warp .content .explore .figure .item .number span:nth-child(2) {
        font-size: 14px;
        margin: 9px 0 0 4px;
    }
    .section .warp .content .explore .figure .item {
        margin: 0 0 50px 0!important;
    }
    .section .warp .content .explore .headline{
        margin: 0 0 55px 0;
    }
    .section .warp .content .text {
        margin: 0;
    }
    .section .warp .content .text .pick{
        transform: translateY(0);
        opacity: 1;
    }
    .section .warp .content .text .more {
        margin: 50px 0 0 0;
    }
    .section .warp .content .text .more{
        width: 100px;
        height: 100px;
    }
    .section_video .warp{
        -webkit-clip-path: unset!important;
        clip-path: unset!important;
        animation: unset!important;
        animation-play-state: initial!important;
    }
    .section_video{
        height: auto;
    }
    .section_video .warp{
        width: 90%;
        height: auto;
        margin: 0 auto 50px;
        border-radius: 20px;
        overflow: hidden;
    }
    .section_video .warp .video .button p{
        font-size: 18px;
    }
    .section2 .warp{
        margin: 30px auto 50px;
    }
    .section2 .warp .content,.section2 .joke{
        display: none;
    }
    .mobile_content{
        display: block!important;
        width: 100%;
        margin: 40px 0 0 0;
    }
    .mobile_content .item{
        width: 100%;
    }
    .mobile_content .item:not(:last-child) {
        margin: 0 0 40px 0;
    }
    .mobile_content .item img{
        width: 100%;
        border-radius: 20px;
    }
    .mobile_content .item .text {
        margin: 20px auto 0;
    }
    .mobile_content .item .text span {
        font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #FFFFFF;
        margin: 0 0 20px 0;
        display: block;
    }
    .mobile_content .item .text p {
        font-size: 13px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #FFFFFF;
        line-height: 29px;
    }
    .section3 .wrap{
        margin: 0 auto 40px;
    }
    .section3 .wrap .title .small {
        margin: 0 0 35px 0;
    }
    .section3 .wrap .title span{
        font-size: 28px;
    }
    .section3 .wrap .content{
        margin: 10px 0 0 0;
        flex-direction: column;
    }
    .section3 .wrap .content .item .left{
        display: none;
    }

    .section3 .wrap .content .item{
        width: 100% !important;
        margin: 0 0 50px 0;
    }
    .section3 .wrap .content .item .right{
        flex-direction: column-reverse;
        opacity: 1;
        pointer-events: auto;
        padding: 0!important;
    }

    .section3 .wrap .content .item .right .text .headline span{
        font-size: 22px;
    }
    .section3 .wrap .content .item .right .text .headline p {
        font-size: 13px;
        margin: 0 19px 0 0;
    }
    .section3 .wrap .content .item .right .pick{
        margin: 0;
    }
    .section3 .wrap .content .item .right .text .headline {
        margin: 0 0 31px 0;
    }
    .section3 .wrap .content .item .right .pick p {
        font-size: 13px;
        line-height: 27px;
        width: 100%;
    }
    .section3 .wrap .title .line {
        margin: 23px 0 0 0;
        width: 100%;
    }
    .section3 .wrap .content .item.on .right .flex{
        margin: 15px 0 0 0;
    }
    .section3 .wrap .content .item .right .pick .more{
        width: 100px;
        height: 100px;
        margin: 46px 0 0 0;
    }
    .section4{
        flex-direction: column-reverse;
        padding: 5% 0;
    }
    .section4 .index_join, .section4 .picture{
        width: 90%;
        margin: auto;
        height: auto;
    }
    .section4 .index_join{
        padding: 25px 0;
    }
    .section4 .index_join img{
        pointer-events: none;
    }
    .section4 .index_join img {
        width: 33px;
        margin: 0 0 22px 0;
    }
    .section4 .index_join .text span{
        font-size: 22px;
    }
    .section4 .index_join .text p {
        font-size: 13px;
        line-height: 25px;
    }
    .section4 .index_join .pick .line {
        width: 100%;
        margin: 12px 0 19px 0;
    }
    .section4 .index_join .pick span{
        font-size: 18px;
        margin: 0 0 24px 0;
    }
    .section4 .index_join .pick p {
        font-size: 13px;
        line-height: 27px;
    }
    .filmgrain{
        z-index: 9;
    }
    .filmgrain canvas,.banner canvas{
        position: absolute;
        z-index: 5;
        /*opacity: 0;*/
    }
}
@media screen and (max-width: 540px) {

}