@charset "UTF-8";
.rel-position {
    position: relative;
}

.follow-position {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.yyx-banner .container-custom {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding-top: 14.323vw;
    color: #fff;
}

.yyx-banner .container-custom img {
    width: 22.917vw;
}

.yyx-banner .container-custom h1 {
    width: calc(324px + (582 - 324) * ((100vw - 375px) / (768 - 375)));
    max-width: 100%;
    font-family: "SourceHanSansCN-Medium";
    font-size: calc(29px + (52 - 29) * ((100vw - 375px) / (768 - 375)));
    font-weight: 500;
    line-height: 1.87;
}

.yyx-banner .container-custom h1 .t-1 {
    color: #bfff00;
}

.yyx-banner .container-custom h1 .t-2 {
    color: #02151c;
}

.yyx-banner .container-custom h1 .t-3 {
    color: #00ffa2;
}

.yyx-banner>img {
    width: 100%;
}

.yyx-main01 {
    padding-top: 10.417vw;
}

.yyx-main01 .pic-group {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    margin-top: 1.042vw;
}

.yyx-main01 .pic-group .box .info {
    top: 9.756%;
    text-align: center;
}

.yyx-main01 .pic-group .box .info.i-1 {
    color: #fff;
}

.yyx-main01 .pic-group .box .info.i-2 {
    color: #000;
}

.yyx-main01 .pic-group .box .info h3 {
    font-size: calc(18px + (28 - 18) * ((100vw - 375px) / (768 - 375)));
}

.yyx-main01 .pic-group .box .info p {
    padding-top: 1.823vw;
    font-size: calc(14px + (16 - 14) * ((100vw - 375px) / (768 - 375)));
}

.yyx-main02 {
    padding-bottom: 10.417vw;
    text-align: center;
}

.yyx-main02 h2 {
    padding-top: 10.417vw;
    font-family: "SourceHanSansCN-Medium";
    font-size: calc(32px + (52 - 32) * ((100vw - 375px) / (768 - 375)));
    font-weight: 500;
    line-height: 1;
}

.yyx-main02 .desc {
    padding-top: 1.823vw;
    padding-bottom: 7.813vw;
    font-size: calc(14px + (16 - 14) * ((100vw - 375px) / (768 - 375)));
}

.yyx-main02 .container-custom ul li img {
    width: 15.625vw;
}

.yyx-main02 .container-custom ul li .scene {
    padding-top: 3.125vw;
    font-size: calc(16px + (20 - 16) * ((100vw - 375px) / (768 - 375)));
    color: #000;
}

.yyx-main02 .container-custom ul li:nth-of-type(n+5) {
    margin-top: 6.51vw;
}

.yyx-main03 {
    padding-top: 10.417vw;
    padding-bottom: 10.417vw;
    background-color: #f2f2f2;
}

.yyx-main03 .container-custom .item+.item {
    margin-top: 7.813vw;
}

.yyx-main03 .container-custom .item .pic img {
    width: 100%;
}

.yyx-main03 .container-custom .item .cont-box {
    position: relative;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    background-color: #fff;
}

.yyx-main03 .container-custom .item .cont-box .icon {
    position: absolute;
    top: 0;
    left: 50%;
    width: 12.5vw;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.yyx-main03 .container-custom .item .cont-box .icon img {
    width: 100%;
}

.yyx-main03 .container-custom .item .cont-box .cont {
    margin-top: 11.719vw;
    margin-bottom: 6.51vw;
    text-align: center;
}

.yyx-main03 .container-custom .item .cont-box .cont h3 {
    font-family: "SourceHanSansCN-Medium";
    font-size: calc(32px + (52 - 32) * ((100vw - 375px) / (768 - 375)));
    line-height: 1;
}

.yyx-main03 .container-custom .item .cont-box .cont p {
    padding-top: 2.604vw;
    font-size: calc(14px + (20 - 14) * ((100vw - 375px) / (768 - 375)));
}

.yyx-main04 {
    position: relative;
    padding-bottom: 10.417vw;
    background-color: #f2f2f2;
}

.yyx-main04 .slide-nav {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    margin-bottom: 6.25vw;
}

.yyx-main04 .slide-nav .slide-nav-item {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26.042vw;
    height: 7.552vw;
    font-size: calc(18px + (28 - 18) * ((100vw - 375px) / (768 - 375)));
    font-weight: bold;
    color: #000;
    background-color: #fff;
}

.yyx-main04 .item-bg {
    position: absolute;
    top: 30PX;
    left: -30PX;
    width: 297px;
    height: 334px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);
    opacity: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.yyx-main04 .item-bg.active {
    top: 0;
    left: 0;
    opacity: 1;
}

.yyx-main04 .details-swiper .swiper-slide {
    padding-top: 1.042vw;
    padding-bottom: 1.042vw;
    text-align: center;
}

.yyx-main04 .details-swiper .swiper-slide .number, .yyx-main04 .details-swiper .swiper-slide h3 {
    display: none;
}

.yyx-main04 .details-swiper .swiper-slide p {
    padding-bottom: 3.255vw;
    font-size: calc(14px + (16 - 14) * ((100vw - 375px) / (768 - 375)));
}

.yyx-main04 .slide-nav .slide-nav-item.active {
    color: #fff;
    background-color: #1052fa;
}

.yyx-main05>h2 {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    padding-top: 10.417vw;
    padding-bottom: 7.813vw;
    font-family: "SourceHanSansCN-Medium";
    font-size: calc(32px + (52 - 32) * ((100vw - 375px) / (768 - 375)));
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
}

.yyx-main06 {
    position: relative;
    padding-top: 10.417vw;
    padding-bottom: 7.813vw;
}

.yyx-main06 h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 94.27vw;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1.042vw;
    padding-left: 1.042vw;
    font-family: "SourceHanSansCN-Medium";
    font-size: calc(32px + (52 - 32) * ((100vw - 375px) / (768 - 375)));
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.yyx-main06 img {
    width: 100%;
}

@media (min-width: 992px) {
    .yyx-banner .container-custom {
        justify-content: center;
        align-items: flex-start;
        padding-top: 0;
    }

    .yyx-banner .container-custom img {
        width: calc(142px + (176 - 142) * ((100vw - 1024px) / (1920 - 1024)));
        max-width: 176px;
    }

    .yyx-banner .container-custom h1 {
        font-size: calc(52px + (56 - 52) * ((100vw - 1024px) / (1920 - 1024)));
    }

    .yyx-main01 {
        padding-top: calc(80px + (120 - 80) * ((100vw - 1024px) / (1920 - 1024)));
    }

    .yyx-main01 .pic-group {
        margin-top: calc(10px + (15 - 10) * ((100vw - 1024px) / (1920 - 1024)));
    }

    .yyx-main01 .pic-group .box .info {
        top: 11.636%;
    }

    .yyx-main01 .pic-group .box .info h3 {
        font-size: calc(28px + (32 - 28) * ((100vw - 1024px) / (1920 - 1024)));
    }

    .yyx-main01 .pic-group .box .info p {
        padding-top: 16px;
        font-size: calc(16px + (18 - 16) * ((100vw - 1024px) / (1920 - 1024)));
    }

    .yyx-main02 {
        padding-bottom: calc(80px + (120 - 80) * ((100vw - 1024px) / (1920 - 1024)));
    }

    .yyx-main02 h2 {
        padding-top: calc(80px + (120 - 80) * ((100vw - 1024px) / (1920 - 1024)));
        font-size: calc(52px + (56 - 52) * ((100vw - 1024px) / (1920 - 1024)));
    }

    .yyx-main02 .desc {
        padding-top: 24px;
        padding-bottom: calc(60px + (80 - 60) * ((100vw - 1024px) / (1920 - 1024)));
        font-size: calc(16px + (18 - 16) * ((100vw - 1024px) / (1920 - 1024)));
    }

    .yyx-main02 .container-custom .width-custom {
        width: 93.88%;
        margin-right: auto;
        margin-left: auto;
    }

    .yyx-main02 .container-custom ul li img {
        width: 120px;
    }

    .yyx-main02 .container-custom ul li .scene {
        padding-top: 24px;
        font-size: calc(20px + (24 - 20) * ((100vw - 1024px) / (1920 - 1024)));
    }

    .yyx-main02 .container-custom ul li:nth-of-type(n+5) {
        margin-top: 50px;
    }

    .yyx-main03 {
        padding-top: calc(80px + (120 - 80) * ((100vw - 1024px) / (1920 - 1024)));
        padding-bottom: calc(80px + (120 - 80) * ((100vw - 1024px) / (1920 - 1024)));
    }

    .yyx-main03 .container-custom .item {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
    }

    .yyx-main03 .container-custom .item+.item {
        margin-top: 0;
    }

    .yyx-main03 .container-custom .item .pic {
        flex: 0 0 50%;
    }

    .yyx-main03 .container-custom .item .cont-box {
        align-items: center;
        flex: 0 0 50%;
        background-color: transparent;
    }

    .yyx-main03 .container-custom .item .cont-box .icon {
        top: 50%;
        width: 96px;
    }

    .yyx-main03 .container-custom .item:nth-child(odd) .cont-box .icon {
        left: 0;
    }

    .yyx-main03 .container-custom .item:nth-child(even) {
        flex-direction: row-reverse;
    }

    .yyx-main03 .container-custom .item:nth-child(even) .cont-box .icon {
        left: 100%;
    }

    .yyx-main03 .container-custom .item .cont-box .cont {
        margin-top: 0;
        margin-bottom: 0;
    }

    .yyx-main03 .container-custom .item .cont-box .cont h3 {
        font-size: calc(52px + (56 - 52) * ((100vw - 1024px) / (1920 - 1024)));
    }

    .yyx-main03 .container-custom .item .cont-box .cont p {
        padding-top: 20px;
        font-size: calc(20px + (24 - 20) * ((100vw - 1024px) / (1920 - 1024)));
    }

    .yyx-main04 {
        padding-bottom: calc(80px + (120 - 80) * ((100vw - 1024px) / (1920 - 1024)));
    }

    .yyx-main04 .slide-nav {
        display: none;
    }

    .yyx-main04 .details-swiper .swiper-slide {
        padding-top: calc(10px + (15 - 10) * ((100vw - 1024px) / (1920 - 1024)));
        padding-bottom: calc(10px + (15 - 10) * ((100vw - 1024px) / (1920 - 1024)));
    }

    .yyx-main04 .details-swiper .swiper-slide .number, .yyx-main04 .details-swiper .swiper-slide h3 {
        display: block;
    }

    .yyx-main04 .details-swiper .swiper-slide .number {
        font-size: calc(28px + (32 - 28) * ((100vw - 1024px) / (1920 - 1024)));
        font-weight: bold;
        text-align: left;
    }

    .yyx-main04 .details-swiper .swiper-slide h3 {
        padding-top: 12px;
        font-size: calc(28px + (32 - 28) * ((100vw - 1024px) / (1920 - 1024)));
        font-weight: bold;
        text-align: left;
    }

    .yyx-main04 .details-swiper .swiper-slide p {
        padding-top: 20px;
        padding-bottom: 30px;
        font-size: calc(16px + (18 - 16) * ((100vw - 1024px) / (1920 - 1024)));
        text-align: left;
    }

    .yyx-main05>h2 {
        padding-top: calc(80px + (120 - 80) * ((100vw - 1024px) / (1920 - 1024)));
        padding-bottom: calc(60px + (80 - 60) * ((100vw - 1024px) / (1920 - 1024)));
        font-size: calc(52px + (56 - 52) * ((100vw - 1024px) / (1920 - 1024)));
    }

    .yyx-main06 {
        padding-top: calc(80px + (120 - 80) * ((100vw - 1024px) / (1920 - 1024)));
        padding-bottom: calc(60px + (80 - 60) * ((100vw - 1024px) / (1920 - 1024)));
    }

    .yyx-main06 h2 {
        width: 96.094%;
        max-width: 1230px;
        padding-right: calc(10px + (15 - 10) * ((100vw - 1024px) / (1920 - 1024)));
        padding-left: calc(10px + (15 - 10) * ((100vw - 1024px) / (1920 - 1024)));
        font-size: calc(52px + (56 - 52) * ((100vw - 1024px) / (1920 - 1024)));
    }

    .yyx-main06 h2 br {
        display: none;
    }
}

@media (min-width: 1920px) {
    .yyx-banner .container-custom h1 {
        font-size: 56px;
    }

    .yyx-main01 {
        padding-top: 120px;
    }

    .yyx-main01 .pic-group {
        margin-top: 15px;
    }

    .yyx-main01 .pic-group .box .info {

    }

    .yyx-main01 .pic-group .box .info h3 {
        font-size: 32px;
    }

    .yyx-main01 .pic-group .box .info p {
        padding-top: 20px;
        font-size: 18px;
    }

    .yyx-main02 {
        padding-bottom: 120px;
    }

    .yyx-main02 h2 {
        padding-top: 120px;
        font-size: 56px;
    }

    .yyx-main02 .desc {
        padding-top: 32px;
        padding-bottom: 80px;
        font-size: 18px;
    }

    .yyx-main02 .container-custom .width-custom {
        width: 88.194%;
    }

    .yyx-main02 .container-custom ul li img {
        width: 148px;
    }

    .yyx-main02 .container-custom ul li .scene {
        padding-top: 24px;
        font-size: 24px;
    }

    .yyx-main03 {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .yyx-main03 .container-custom .item .cont-box .icon {
        width: 120px;
    }

    .yyx-main03 .container-custom .item .cont-box .cont h3 {
        font-size: 56px;
    }

    .yyx-main03 .container-custom .item .cont-box .cont p {
        padding-top: 24px;
        font-size: 24px;
    }

    .yyx-main03 {
        padding-bottom: 120px;
    }

    .yyx-main04 .details-swiper .swiper-slide {
        padding-top: 15PX;
        padding-bottom: 15PX;
    }

    .yyx-main05>h2 {
        padding-top: 120px;
        padding-bottom: 80px;
        font-size: 56px;
    }

    .yyx-main06 {
        padding-top: 120px;
        padding-bottom: 80px;
    }

    .yyx-main06 h2 {
        width: 91.179%;
        max-width: 1430px;
        font-size: 56px;
    }
}