body {
    background-color: #f5f5f5
}

.sec1 {
    padding: 100px 0 119px 0
}

.sec1 .warp {
    width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.sec1 .warp .r {
    width: 720px;
    height: 500px
}

.sec1 .warp .r .swiper {
    width: 100%;
    height: 100%
}

.sec1 .warp .r .swiper img {
    width: 100%;
    height: 100%
}

.sec1 .warp .text {
    width: 572px
}

.sec1 .warp .text .p1 {
    font-weight: 400;
    font-size: 16px;
    color: #111;
    margin: 0 0 20px
}

.sec1 .warp .text .cut {
    display: flex;
    margin: 0 0 38px
}

.sec1 .warp .text .cut .list {
    font-weight: 300;
    font-size: 30px;
    color: #ccc;
    cursor: pointer;
    transition: .3s
}

.sec1 .warp .text .cut .list.on {
    color: #9c0c18;
    font-weight: bold
}

.sec1 .warp .text .cut .list:not(:last-child) {
    margin: 0 7px 0 0
}

.sec1 .warp .text .pick {
    height: 128px
}

.sec1 .warp .text .pick .p {
    display: none
}

.sec1 .warp .text .pick .p.on {
    display: block
}

.sec1 .warp .text .pick .p p {
    font-weight: 500;
    font-size: 16px;
    color: #111;
    line-height: 32px
}

.sec1 .warp .text .button {
    margin: 93px 0 0 0;
    display: flex
}

.sec1 .warp .text .button .circle {
    width: 45px;
    height: 45px;
    background: rgba(0, 0, 0, .05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, .3);
    font-size: 14px;
    transition: .6s;
    cursor: pointer
}

.sec1 .warp .text .button .circle:hover {
    background: #9c0c18;
    color: #fff
}

.sec1 .warp .text .button .circle:first-child {
    transform: rotate(180deg);
    margin: 0 15px 0 0
}

.sec2 {
    margin-top: -70px;
    padding: 208px 0 232px 0;
    position: relative;
    z-index: 1
}

.sec2:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(128, 0, 0, .95);
    z-index: 1
}

.sec2 .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}

.sec2 .wrap {
    width: 1648px;
    margin: auto;
    position: relative;
    z-index: 5
}

.sec2 .wrap .button {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%
}

.sec2 .wrap .button .circle {
    pointer-events: auto;
    cursor: pointer;
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, .2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    transition: .3s ease
}

.sec2 .wrap .button .circle:hover {
    background: #fff;
    color: #9c0c18
}

.sec2 .wrap .button .circle:first-child {
    transform: rotate(180deg)
}

.sec2 .wrap .swiper2 .swiper-slide {
    text-align: center
}

.sec2 .wrap .swiper2 .swiper-slide .icon {
    width: 160px;
    height: 160px;
    margin: 0 auto 48px
}

.sec2 .wrap .swiper2 .swiper-slide .icon img {
    filter: grayscale(5) brightness(10)
}

.sec2 .wrap .swiper2 .swiper-slide h1 {
    font-weight: 500;
    font-size: 32px;
    color: #fff;
    margin: 0 0 39px
}

.sec2 .wrap .swiper2 .swiper-slide .text {
    width: 1071px;
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    line-height: 32px;
    opacity: .8;
    margin: auto
}

.sec3 {
    padding: 90px 0 150px 0
}

.sec3 .wrap {
    width: 1080px;
    margin: auto
}

.sec3 .wrap .title {
    font-weight: 500;
    font-size: 36px;
    color: #111;
    margin: 0 0 49px;
    text-align: center
}

.sec3 .wrap .content .img {
    width: 100%;
    height: 700px;
    overflow: hidden;
    transition: .6s ease;
    position: relative;
    cursor: pointer
}

.sec3 .wrap .content .img.on {
    height: 1529px
}

.sec3 .wrap .content .img img {
    width: 100%;
    max-height: fit-content
}

.sec3 .wrap .content .click {
    text-align: center;
    width: fit-content;
    margin: auto;
    position: relative;
    top: -31px;
    cursor: pointer
}

.sec3 .wrap .content .click.on .circle {
    transform: rotate(-180deg)
}

.sec3 .wrap .content .click .circle {
    width: 62px;
    height: 62px;
    background: #9c0c18;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px
}

@keyframes y {
    0% {
        transform: rotate(90deg) translateX(-2px)
    }

    50% {
        transform: rotate(90deg) translateX(2px)
    }

    100% {
        transform: rotate(90deg) translateX(-2px)
    }
}

.sec3 .wrap .content .click .circle .iconfont {
    color: #fff;
    font-size: 20px;
    transform: rotate(90deg);
    animation: y 1s linear infinite
}

.sec3 .wrap .content .click p {
    font-weight: 400;
    font-size: 16px;
    color: #111
}

.cursor {
    width: 70px;
    height: 70px;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    backface-visibility: hidden
}

.cursor.on .circle {
    opacity: 1
}

.cursor .circle {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #9c0c18;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    opacity: 0;
    transition: 1s
}

.cursor .circle:after {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed #9c0c18
}

.alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: 1s
}

.alert.on {
    pointer-events: auto;
    opacity: 1
}

.alert .mask_ {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5)
}

.alert .content {
    position: relative;
    z-index: 56;
    height: 70%
}

@media screen and (max-width: 1920px) {
    .sec1 {
        padding: 5.208333333333334vw 0 6.197916666666667vw 0
    }

    .sec1 .warp {
        width: 75vw;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .sec1 .warp .r {
        width: 37.5vw;
        height: 26.041666666666668vw
    }

    .sec1 .warp .r .swiper {
        width: 100%;
        height: 100%
    }

    .sec1 .warp .r .swiper img {
        width: 100%;
        height: 100%
    }

    .sec1 .warp .text {
        width: 29.791666666666668vw
    }

    .sec1 .warp .text .p1 {
        font-weight: 400;
        font-size: 0.8333333333333334vw;
        color: #111;
        margin: 0 0 1.0416666666666667vw
    }

    .sec1 .warp .text .cut {
        display: flex;
        margin: 0 0 1.9791666666666667vw
    }

    .sec1 .warp .text .cut .list {
        font-weight: 300;
        font-size: 1.5625vw;
        color: #ccc;
        cursor: pointer;
        transition: .3s
    }

    .sec1 .warp .text .cut .list.on {
        color: #9c0c18;
        font-weight: bold
    }

    .sec1 .warp .text .cut .list:not(:last-child) {
        margin: 0 0.36458333333333337vw 0 0
    }

    .sec1 .warp .text .pick {
        height: 6.666666666666667vw
    }

    .sec1 .warp .text .pick .p {
        display: none
    }

    .sec1 .warp .text .pick .p.on {
        display: block
    }

    .sec1 .warp .text .pick .p p {
        font-weight: 500;
        font-size: 0.8333333333333334vw;
        color: #111;
        line-height: 1.6666666666666667vw
    }

    .sec1 .warp .text .button {
        margin: 4.84375vw 0 0 0;
        display: flex
    }

    .sec1 .warp .text .button .circle {
        width: 2.34375vw;
        height: 2.34375vw;
        background: rgba(0, 0, 0, .05);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(0, 0, 0, .3);
        font-size: 0.7291666666666667vw;
        transition: .6s;
        cursor: pointer
    }

    .sec1 .warp .text .button .circle:hover {
        background: #9c0c18;
        color: #fff
    }

    .sec1 .warp .text .button .circle:first-child {
        transform: rotate(180deg);
        margin: 0 0.78125vw 0 0
    }

    .sec2 {
        margin-top: -3.6458333333333335vw;
        padding: 10.833333333333334vw 0 12.083333333333334vw 0;
        position: relative;
        z-index: 1
    }

    .sec2:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(128, 0, 0, .95);
        z-index: 1
    }

    .sec2 .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1
    }

    .sec2 .wrap {
        width: 85.83333333333334vw;
        margin: auto;
        position: relative;
        z-index: 5
    }

    .sec2 .wrap .button {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%
    }

    .sec2 .wrap .button .circle {
        pointer-events: auto;
        cursor: pointer;
        width: 2.8645833333333335vw;
        height: 2.8645833333333335vw;
        background: rgba(255, 255, 255, .2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 0.8333333333333334vw;
        transition: .3s ease
    }

    .sec2 .wrap .button .circle:hover {
        background: #fff;
        color: #9c0c18
    }

    .sec2 .wrap .button .circle:first-child {
        transform: rotate(180deg)
    }

    .sec2 .wrap .swiper2 .swiper-slide {
        text-align: center
    }

    .sec2 .wrap .swiper2 .swiper-slide .icon {
        width: 8.333333333333334vw;
        height: 8.333333333333334vw;
        margin: 0 auto 2.5vw
    }

    .sec2 .wrap .swiper2 .swiper-slide .icon img {
        filter: grayscale(5) brightness(10)
    }

    .sec2 .wrap .swiper2 .swiper-slide h1 {
        font-weight: 500;
        font-size: 1.6666666666666667vw;
        color: #fff;
        margin: 0 0 2.03125vw
    }

    .sec2 .wrap .swiper2 .swiper-slide .text {
        width: 55.78125vw;
        font-weight: 400;
        font-size: 0.8333333333333334vw;
        color: #fff;
        line-height: 1.6666666666666667vw;
        opacity: .8;
        margin: auto
    }

    .sec3 {
        padding: 4.6875vw 0 7.8125vw 0
    }

    .sec3 .wrap {
        width: 56.25vw;
        margin: auto
    }

    .sec3 .wrap .title {
        font-weight: 500;
        font-size: 1.875vw;
        color: #111;
        margin: 0 0 2.5520833333333335vw;
        text-align: center
    }

    .sec3 .wrap .content .img {
        width: 100%;
        height: 36.458333333333336vw;
        overflow: hidden;
        transition: .6s ease;
        position: relative;
        cursor: pointer
    }

    .sec3 .wrap .content .img.on {
        height: 79.63541666666667vw
    }

    .sec3 .wrap .content .img img {
        width: 100%;
        max-height: fit-content
    }

    .sec3 .wrap .content .click {
        text-align: center;
        width: fit-content;
        margin: auto;
        position: relative;
        top: -1.6145833333333335vw;
        cursor: pointer
    }

    .sec3 .wrap .content .click.on .circle {
        transform: rotate(-180deg)
    }

    .sec3 .wrap .content .click .circle {
        width: 3.229166666666667vw;
        height: 3.229166666666667vw;
        background: #9c0c18;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 0.625vw
    }

    @keyframes y {
        0% {
            transform: rotate(90deg) translateX(-2px)
        }

        50% {
            transform: rotate(90deg) translateX(2px)
        }

        100% {
            transform: rotate(90deg) translateX(-2px)
        }
    }

    .sec3 .wrap .content .click .circle .iconfont {
        color: #fff;
        font-size: 1.0416666666666667vw;
        transform: rotate(90deg);
        animation: y 1s linear infinite
    }

    .sec3 .wrap .content .click p {
        font-weight: 400;
        font-size: 0.8333333333333334vw;
        color: #111
    }

    .cursor {
        width: 3.6458333333333335vw;
        height:3.6458333333333335vw;
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        border-radius: 50%;
        pointer-events: none;
        backface-visibility: hidden
    }

    .cursor.on .circle {
        opacity: 1
    }

    .cursor .circle {
        position: absolute;
        width: 3.6458333333333335vw;
        height: 3.6458333333333335vw;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #9c0c18;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 0.7291666666666667vw;
        opacity: 0;
        transition: 1s
    }

    .cursor .circle:after {
        content: "";
        position: absolute;
        width: 120%;
        height: 120%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 1px dashed #9c0c18
    }

    .alert {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 999999;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: 1s
    }

    .alert.on {
        pointer-events: auto;
        opacity: 1
    }

    .alert .mask_ {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .5)
    }

    .alert .content {
        position: relative;
        z-index: 56;
        height: 70%
    }
}

@media screen and (max-width: 1024px) {
    .sec2 .wrap{
        width: 90%;
    }
    .sec2{
        padding: 45px 0;
    }
    .sec2 .wrap .swiper2 .swiper-slide .icon{
        width: 50px;
        height: 50px;
        margin: 0 auto 30px;
    }
    .sec2 .wrap .swiper2 .swiper-slide h1{
        font-size: 24px;
        margin: 0 0 10px;
    }
    .sec2 .wrap .swiper2 .swiper-slide .text{
        font-size: 14px;
        line-height: 1.5;
    }
    .sec2 .wrap .swiper2 .swiper-slide .text{
        width: 90%;
        margin: auto;
    }
    .sec2 .wrap .button{
        width: 35%;
        position: static;
        margin: 45px auto 0;
    }
    .sec2 .wrap .button .circle{
        width: 45px;
        height: 45px;
        font-size: 14px;
    }

    .sec1{
        padding: 25px 0;
    }
    .sec1 .warp{
        width: 90%;
        flex-direction: column;
    }
    .sec1 .warp .text{
        width: 100%;
    }
    .sec1 .warp .text .p1{
        font-size: 14px;
        margin: 0 0 10px;
    }
    .sec1 .warp .text .cut{
        margin: 0 0 15px;
    }
    .sec1 .warp .text .cut .list{
        font-size: 20px;
    }
    .sec1 .warp .text .cut .list:not(:last-child) {
        margin: 0 20px 0 0;
    }

    .sec1 .warp .text .pick .p p{
        font-size: 14px;
        line-height: 2.1;
    }
    .sec1 .warp .text .pick {
        height: auto;
    }

    .sec1 .warp .r{
        width: 100%;
        height: auto;
    }

    .sec3{
        padding: 15px 0;
    }

    .sec3 .wrap{
        width: 90%;
    }
    .sec3 .wrap .title{
        font-size: 24px;
        margin: 0 0 20px;
    }
    .sec3 .wrap .content .img{
        height: 200px;
    }
    .alert .content{
        width: 90%;
    }

    .cursor{
        display: none;
    }
}