* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box
}

:root {
    --gold: #FFE0AB;
    --white: #fff;
    --black: #000;
}

[v-cloak] {
    display: none;
}

a {
    text-decoration: none;
    color: #000;
}


body {
    color: #000;
    font-family: "Microsoft YaHei", 微软雅黑;
    background: #000;

}

header {
    position: fixed;
    width: 100%;
    height: 110px;
    background: rgba(0,0,0,.4);
    background: linear-gradient(#000,rgba(0,0,0,0));
    display: flex;
    align-items: center;
    z-index: 999;
    color: var(--white);
    padding: 0 30px;
}

.logo {
    width: 186px;
    display: flex;
    flex-shrink: 0;
}

.logo i {
    padding-bottom: 15.0390625%;
    padding-top: 15.0390625%;
    position: relative;
    width: 100%;
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
}

#menu, .icons {
    display: flex;
    align-items: center;
}

#menu {
    flex-grow: 1;
    display: flex;
    gap: 60px;
    justify-content: center;
}

#menu li a {
    color: var(--white);
    font-size: 24px;
    font-weight: bold;
}

#menu li.active a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: .5em;
    text-decoration-color: #f60;
    text-decoration-thickness: 3px;
}

.icons li {
    display: flex;
    font-size: 12px;
    width: 72px;
    justify-content: center;
}

.icons li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--white);
}

.icons li a .img {
    width: 54px;
    height: 54px;
}

.icons li a .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.icons li a .txt {
    display: flex;
    padding-top: 5px;
}

.moveDown {
    position: absolute;
    left: 50%;
    bottom: 0px;
    animation: flash 2.2s infinite;
    cursor: pointer;
    width: clamp(20px, 3vw, 28px);
    margin-left: calc(clamp(20px, 3vw, 28px) * -0.5);
    z-index: 99;
}

.moveDown.fadeIn {
    animation: flash 2.2s infinite, fadeIn .5s both;
}

.moveDown.fadeOut {
    animation: flash 2.2s infinite, fadeOut .5s both;
}

.floatRight.fadeIn {
    animation: fadeIn .5s both;
}

.floatRight.fadeOut {
    animation: fadeOut .5s 1.2s both;
}

@keyframes fadeIn {

    0% {
        opacity: 0;
        display: none;
    }
    100% {
        opacity: 1;
    }

}

@keyframes fadeOut {

    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
    }

}

@keyframes flash {

    25% {
        transform: translateY(-10%);
    }
    50% {
        filter: brightness(100%);
    }
    75% {
        transform: translateY(10%);
    }


}


.section {
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.section:before {
    position: absolute;
    content: '';
    background: rgba(0, 0, 0, .6);
    background: linear-gradient(rgba(0, 0, 0, .4) 80%, rgba(0, 0, 0, 1));
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}



.section1 {
    /*background-image: url("img/bg1.jpg");*/
    height: 100vh;
}
.section1 .container{
    height: 100%;
    position: relative;
}
.shan {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    mask-size: cover;
    left: 0;
    top: 0;
}
.shan:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, transparent, rgba(255, 255, 255, .5), transparent, transparent);
}
.section1 .slogan{
    max-width: 405px;
    width:40%;
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 0%;
    transform: translateY(-45%);
    display: flex;
}

.section1 .twoBtns{
    display: flex;
    position: absolute;
    bottom: 3vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    gap: 2vw;
}
.section1 .twoBtns a{
    width: 50%;
    max-width: 250px;
    display: flex;
}
.section1 .twoBtns a img{
    width: 100%;transition: all .4s;
}
.section1 .twoBtns a:hover img{
filter: drop-shadow(0px 0px 30px #f60) brightness(120%);
    transform: translateY(-10%);
}


.section1 .pt{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
}

.section1 .bg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
}

.section1:before{
    content: unset;
}
.section1 .videoArea{
    position: absolute;
    z-index: 2;
    background:var(--black);
    overflow: hidden;border-radius: 1vw;
}

.section1 .videoArea .nei{
    padding-bottom: 83.832335329341%;
    position: relative;
}
.section1 .videoArea .nei video{
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
}



.section2 {
    background-image: url("img/bg2.jpg");
}
.section2 .container{
    position: relative;
}
.section2 .title {
    font-weight: bold;
    font-size: 66px;
    background-image: -webkit-linear-gradient(top, #ffa439 40%,#ffef85 70%, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .5));
    text-align: center;

}
.section2 .containerW {
    max-width: 900px;
    width: 100%;
    margin: clamp(20px, 7vw, 60px) auto 0;
    position: relative;
}

.section2 .swiper-slide {
    width: 100%;
    padding-bottom: 62.07650273224%;
    height: 0;
    position: relative;
}
.section2 .swiper-slide .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
}
.section2 .swiper-slide .text {
    width: 70%;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateY(50%) translateX(-50%);
    z-index: 1;
}

.section2 .swiper-button-next, .section2 .swiper-button-prev {
    width: 60px;
    height: 60px;
    background-size: cover;
}
.section2 .swiper-button-next {
    transform: translateX(200%);
    background-image: url(img/s2_next.png);
}
.section2 .swiper-button-prev {
    transform: translateX(-200%);
    background-image: url(img/s2_prev.png);
}


.section3 {
    background-image: url("img/bg3.jpg");
}
.section3 .container{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.section3 .title{
    display: flex;
    width: 100%;
    max-width: 626px;
}
.section3 .title img{
    width: 100%;
}

.section3 .ms{
    color: var(--white);
    text-align: center;
    font-size:clamp(14px,2vw,20px)
}
.section3 .k{
    display: flex;
    padding-top: 6vw;
}
.section3 .k li{
    display: flex;
    width: 33.33%;
    max-width: 358px;
}

.section3 .k li img{
    width: 100%;
}

.section4 {
    background-image: url("img/bg4.jpg");
}
.section4 .container{
    position: relative;
}

.section4 .container .dot{
    position: absolute;
    display: flex;
    flex-direction: column;
    width:4.6875vw;
    gap:2vw;
    top: 40%;
}
.section4 .container .dot li{
    padding-bottom: 100%;
    position: relative;
    cursor: pointer;
    /*filter: brightness(50%);*/
    transition: all .5s;
}
.section4 .container .dot li.on{
    /*filter: brightness(100%);*/
}
.section4 .container .dot li.on:before{
    content: '';
    position: absolute;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 100%;
    border:solid 4px var(--gold);
    left: 0;
    top: 0;
    z-index: 1;
}

.section4 .container .dot li img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}


.section4 .container .dot.left{
    left: 5vw;
}
.section4 .container .dot.right{
    right: 5vw;
}

.section4 .container .allInfo{
    height: 100%;
    padding-left: calc(5vw + 4.6875vw);
    padding-right: calc(5vw + 4.6875vw);
}
.section4 .container .allInfo .imgText{
    height: 100%;
    display: flex;
}
.section4 .container .allInfo .imgText .text,.section4 .container .allInfo .imgText .img{
    width: 50%;
}
.section4 .container .allInfo .imgText .img.animate{
    animation: slideLeft 1s .3s both ease-out;
}
.section4 .container .allInfo .imgText .img i{
    position: relative;
    padding-bottom: 100%;
    display: flex;
}
.section4 .container .allInfo .imgText .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    filter: drop-shadow(0 4px 4px var(--black));
}

.section4 .container .allInfo .imgText .text{
    display: flex;
    flex-direction: column;
    padding-top: 10%;
    padding-left: 10%;
}
.section4 .container .allInfo .imgText .text.animate{
    animation: slideRight 1s both ease-out;
}
.section4 .container .allInfo .imgText .text .title{
    display: flex;
    justify-content: center;
}
.section4 .container .allInfo .imgText .text .title img{
    width: 100%;
    max-width: 664px;
}
.section4 .container .allInfo .imgText .text .ms{
    color: #fff;
    font-size:clamp(14px,1.14584vw,22px);
    padding-top: 10%;
    line-height: 1.8em;
    filter: drop-shadow(0 2px 1px #000);
}

@keyframes slideLeft {
    0%{
        transform: translateX(20%);
        opacity: 0;
    }
    100%{
        transform: translateX(0%);
        opacity: 1;
    }

}
@keyframes slideRight {
    0%{
        transform: translateX(-20%);
        opacity: 0;
    }
    100%{
        transform: translateX(0%);opacity: 1;
    }

}



.section5 .frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 888;
}

.section5 .frame:after, .section5 .frame:before {
    position: absolute;
    top: 0;
    width: 592px;
    content: "";
}

.section5 .frame:before {
    left: 0;
    height: 905px;
    background: url(img/frame-left-top.png) no-repeat 0% 0;
    z-index: 0;
}

.section5 .frame:after {
    right: 0;
    height: 905px;
    background: url(img/frame-right-top.png) no-repeat 0% 0;
}

.section5 .frame__left {
    position: absolute;
    top: 50%;
    left: 0;
    width: 284px;
    height: 864px;
    margin-top: -432px;
    background: url(img/navi-shadow.png) no-repeat 0% 0;
}


.section5 .frame__center:after, .section5 .frame__center:before {
    position: absolute;
    left: 50%;
    width: 576px;
    margin-left: -288px;
    content: "";
}

.section5 .frame__center:before {
    top: 0;
    height: 208px;
    background: url(img/frame-top.png) no-repeat 0% 0;
}

.section5 .frame__center:after {
    bottom: 0;
    height: 185px;
    background: url(img/frame-bottom.png) no-repeat 0% 0;
}


.section5 .guide {
    position: absolute;
    width: 15%;
    max-width: 180px;
    left: 12%;
    top: 56%;
    z-index: 891;
    transition: all .4s ease-in-out;
    animation: flash 1.4s infinite;
}
.section5 img{
  -webkit-user-drag: none;
}
.section5 .videoK {
    position: relative;
    transform: scale(1);
    overflow: hidden;
    user-select: none;
}

.section5 .videoK:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(to top, transparent 90%, #000);
    z-index: 1;
}

.section5  .text, .section5  .text {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    position: relative;
    padding-top: 6%;
    z-index: 2;
}

.section5  .slog, .section5  .slog {
    font-size: clamp(38px, 5vw, 50px);
    font-weight: bold;
    filter: drop-shadow(0 clamp(2px, .5vw, 4px) 0 #000);
    -webkit-text-stroke: clamp(4px, 1vw, 10px) #fff;
}

.section5  .slog:before, .section5 .slog:before {
    content: attr(data-title);
    position: absolute;
    background-image: linear-gradient(#ff7900, #9d221a);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /*需要文字透明*/
    -webkit-text-stroke: 0;
}

.section5 .videoArea {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section5 video, .section5 video {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.section5 .flag {
    position: absolute;
    z-index: 890;
    cursor: pointer;
}



.section5 .flag img {
    width: 100%;
    user-select: none;
    display: block;
    position: relative;
    z-index: 2;
}

.section5 .flag img.flash {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 1;
    display: none;
}

.section5 .flag.on {
    filter: brightness(120%);
}

.section5 .flag.on img.flash {
    display: block;
    transform: scale(1.5, 3) translateY(-40%);
}




.section5 .moveFlag {
    width: 3.125%;
    left: 15.927083%;
    top: 81%;
    animation: flash1 1.2s infinite;
}

.section5 .point {
    animation: flash 1.2s infinite;
    width: 3%;
    max-width: 30px;
    left: 16.2%;
    top: 76%;
}

@keyframes flash1 {
    0% {
        filter: brightness(100%);
    }
    25% {
        filter: brightness(120%);
    }
    50% {
        filter: brightness(100%);
    }
    75% {
        filter: brightness(80%);
    }
    100% {
        filter: brightness(100%);
    }

}

@keyframes flash {
    0% {
        filter: brightness(100%);
    }
    25% {
        filter: brightness(120%);
        transform: translateY(-10%);
    }
    50% {
        filter: brightness(100%);
    }
    75% {
        filter: brightness(80%);
        transform: translateY(10%);
    }
    100% {
        filter: brightness(100%);
    }

}

.section5 .flag1 {
    width: 6.6145833333%;
    width: 10%;
    left: 24.854167%;
    top: 58.018519%;
    filter: grayscale(0);
    z-index: 891;
}

.section5 .flag2 {
    width: 6.875%;
    width: 10%;
    left: 19.229167%;
    top: 40.888889%;
    filter: grayscale(0);
}

.section5 .flag3 {
    width: 8.8020833333%;
    width: 10%;
    left: 39.229167%;
    top: 45%;
    filter: grayscale(0);
}

.section5 .flag4 {
    width: 8.8125%;
    width: 10%;
    left: 71.270833%;
    top: 35%;
    filter: grayscale(0);
}

.section5 .flag5 {
    width: 7.6041666667%;
    width: 10%;
    left: 50.208333%;
    top: 22%;
    filter: grayscale(0);
}

.section5 .clickFlag {
    position: absolute;
    z-index: 890;
    cursor: pointer;
    inset-area: center;
    width: 100%;
    height: 100%;
}

.section5 .guide--drag {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 375px;
    height: 142px;
    margin-top: -71px;
    margin-left: -188px;
    background: url(img/s5_guide-zh.png) no-repeat 50% 0;
    background-size: cover;
    pointer-events: none;
    z-index: 4;
}
.section5 .guide--drag__hand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 40px;
    margin-top: -3px;
    margin-left: -30px;
    background: url(img/s5_guide-hand.png) no-repeat 50% 0;
    background-size: cover;
    animation: hd 1.3s infinite ease-in-out;
}
@keyframes hd {
    0%{
        transform: translateX(0);

    }
    50%{
        transform: translateX(70%);

    }
    100%{
       transform: translateX(0);
    }

}


.section6 {
    background-image: url("img/bg6.jpg");
}
.section6 .container{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.section6 .title {
    font-weight: bold;
    font-size: 66px;
    background-image: -webkit-linear-gradient(top, #9ce9fd, #f0ffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .5));
    text-align: center;

}


.section6 .threeIco {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 18vh;
    width: 100%;
}

.section6 .threeIco li {
    width: 262px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section6 .threeIco li a {
    width: 100%;
    padding-bottom: 167.5572519084%;
    background-size: cover;
}

.section6 .threeIco li:nth-child(1) a {
    background-image: url("img/s6_four_1.png");
}

.section6 .threeIco li:nth-child(2) a {
    background-image: url("img/s6_four_2.png");
}

.section6 .threeIco li:nth-child(3) a {
    background-image: url("img/s6_four_3.png");
}











.videoplay {
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, .8);
    align-items: center;
    justify-content: center;
    display: none;
}

.videoplay .kuang2 {
    width: 90%;
    max-width: 800px;
    box-shadow: 0 0 0 2px #ffe0ae;
    background: #000;
    position: relative;

    background: radial-gradient(#333, #111);

    padding: 4%;
}

.videoplay .kuang2 .videoText {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: 100%;
}
.videoplay .kuang2 .videoText .tx{
    display: flex;
    width: 20%;
    display: flex;
}
.videoplay .kuang2 .videoText .tx i{
    width: 100%;
    padding-bottom: 100%;
    position: relative;
}

.videoplay .kuang2 .videoText .tx img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
    position: absolute;
}

.videoplay .kuang2 .videoText .text {
    width: 80%;
    display: flex;
    justify-content: center;
    color: #ffe0ae;
    position: relative;
    padding: 0 10%;
    display: flex;
    flex-direction: column;
}

.videoplay .kuang2 .videoText .text:before {
    content: '“';
    position: absolute;
    left: 0%;
    top: -4vw;
    font-size: clamp(16px, 10vw, 136px);
    width: clamp(16px, 10vw, 136px);
    height: clamp(16px, 10vw, 136px);
    background-image: linear-gradient(#ff7900, #9d221a);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: rotateY(180deg);
}

.videoplay .kuang2 .videoText .text:after {
    content: '“';
    position: absolute;
    right: 0%;
    bottom: -4vw;
    font-size: clamp(16px, 10vw, 136px);
    width: clamp(16px, 10vw, 136px);
    height: clamp(16px, 10vw, 136px);
    background-image: linear-gradient(#ff7900, #9d221a);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.videoplay .kuang2 .videoText .text .name{
    color: #f60;
    font-weight: bold;
    padding-bottom: 10px;
     font-size: clamp(20px, 3vw, 46px);
}
.videoplay .kuang2 .videoText .text .ms{
     font-size: clamp(16px, 2vw, 26px);
}


.videoplay .closewin {
    width: 6%;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
    transform: translateY(-120%);
    z-index: 1;

}

.videoplay .closeI {
    padding-bottom: 100%;
    position: relative;
    transform: rotate(45deg);
    transition: all .4s;
}

.videoplay .closeI:hover {
    transform: rotate(145deg);
}

.videoplay .closewin span {
    display: block;
    background: #fff;
    position: absolute;
}

.videoplay .closewin span:nth-child(1) {
    height: 2px;
    width: 100%;
    top: 50%;
    margin-left: -50%;
    left: 50%;
    margin-top: -1px;
}

.videoplay .closewin span:nth-child(2) {
    height: 100%;
    width: 2px;
    left: 50%;
    margin-left: -1px;
    margin-top: -50%;
    top: 50%;
}


.fadeOut-leave-to {
    opacity: 0;
}

.fadeOut-leave {
    opacity: 1;
}






.fp-tooltip {
    color: #000;
    position: inherit;
    display: none;
}

#fp-nav {
    display: none
}

#fp-nav ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#fp-nav li {
    width: fit-content;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0;
    position: inherit;
    gap: 8px;
}

#fp-nav li a {
    display: flex;
    position: inherit;
    width: inherit;
    height: inherit;
    cursor: pointer;
    text-decoration: none;
    align-items: center;
}

#fp-nav span {
    width: 10px;
    height: 10px;
    border: 1px solid #000;
    background: rgba(0, 0, 0, 0);
    border-radius: 50%;
    position: inherit;
}

#fp-nav li .active span {
    background: var(--blue);
    border-color: var(--blue);
}