.banner {
        position: relative;
}

.bannerinner {
        height: 100vh;
        background: url(../images/bannerbg.png) no-repeat left;
        background-size: cover;
        position: relative;
}

.box {
        width: 35.42%;
        position: absolute;
        right: 14.53%;
        /* height: 100%; */
        overflow: hidden;
        top: 50%;
        transform: translateY(-50%);
}

.bannerSwiper {
        height: 0;
        padding-bottom: 100%;
}

.bannerSwiper a {
        display: block;
        padding-bottom: 100%;
}

.swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        background: none;
        border: none;
        opacity: 1;
        margin: 15px 0;
        position: relative;
}

#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {
        background: none;
        border: 1px solid #fff;
        opacity: 1;
}

#fp-nav ul li a span::before, .fp-slidesNav ul li a span::before {
        content: '';
        display: block;
        width: 4px;
        height: 4px;
        background: rgba(255, 255, 255, .2);
        border-radius: 50%;
        position: absolute;
        left: calc(50% - 2px);
        top: calc(50% - 2px);
}

#fp-nav ul li a.active span::before, .fp-slidesNav ul li a.active span::before, #fp-nav ul li:hover a.active span::before, .fp-slidesNav ul li:hover a.active span::before {
        background: #fff;
}




.mouse {
        width: 72px;
        height: 85px;
        background: url(../images/mouse.svg) center no-repeat;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 30px;
        z-index: 6;
        animation: bb 2s linear 0s infinite;
        cursor: pointer;
}

@keyframes bb {
        0% {
                transform: translate(-50%, 0);
                opacity: 0;
        }

        20% {
                transform: translate(-50%, 3px);
                opacity: 1;
        }

        80% {
                transform: translate(-50%, 10px);
                opacity: 1;
        }

        90% {
                transform: translate(-50%, 10px);
                opacity: 0;
        }

        100% {
                transform: translate(-50%, 10px);
                opacity: 0;
        }
}

/* mode1 */
.currents .mode1 {
        /* margin-top: 145px; */
}

.mode1 {
        /* padding-bottom: 194px; */
        /* height: 100vh; */
        box-sizing: border-box;
        background: url(../images/mode1bg.png) no-repeat;
        background-size: cover;
}

.title {
        padding: 60px 0 50px;
        box-sizing: border-box;
}

.titleinner {
        position: relative;
        /* padding-bottom: 20px; */
}


.newact {
        display: inline-block;
        vertical-align: middle;
        padding-bottom: 20px;
        position: relative
}

.newact::before {
        content: '';
        display: block;
        width: 60px;
        height: 4px;
        background: #94070A;
        position: absolute;
        left: 0;
        bottom: 0;
}

.more {
        display: inline-block;
        vertical-align: middle;
        margin-left: 1.3%;
        padding-bottom: 20px;
        color: #ddd;
}

.mode1slick {
        margin: 0 11.33% 0 6.33%;
        overflow: hidden;
}

.mode3slick {
        /* margin: 0 11.33% 0 6.33%; */
}

.mode1l {
        width: 600px;
        border-radius: 10px;
}

.mode1Pic {
        padding-bottom: 72.33%;
       
}
.mode3 .mode1Pic{
         transform: scale(.66);
        transform-origin: left center;
}
.mode1r {
        margin-left: 750px;
}

.date {
        margin: 29px 0 20px;
}

.mode1r p.gp-f20 {
        line-height: 30px;
        height: 60px;
        overflow: hidden;
        margin-bottom: 50px;
}

.mode1r p.gp-f16 {
        line-height: 24px;
        height: 72px;
        overflow: hidden;
        margin-bottom: 50px;
}

.slick-prev {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 50%;
        background: url(../images/l.svg) no-repeat center;
        /* background-size: cover; */
        left: calc(100% - 100px);
        top: calc(100% - 11px);
}

.slick-prev:hover {
         border: 1px solid #94070A;
        background:#94070A url(../images/l.svg) no-repeat center;
}

.slick-next {
        width: 40px;
        height: 40px;
      
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 50%;
        background: url(../images/r.svg) no-repeat center;
       
        top: calc(100% - 11px);
}

.slick-next:hover {
        border: 1px solid #94070A;
        background:#94070A url(../images/r.svg) no-repeat center;
}

.mode1slick>ul {
        position: relative;
}

.custom_paging {
        position: absolute;
        left: 750px;
        top: calc(100% - 40px);
        display: inline-block;
}

.custom_paging li {
        color: #fff;
        display: none;
        font-size: 20px;
        font-family: "DIN-Medium";
}

.custom_paging li span {
        font-size: 3.4rem;
        font-family: "DIN-Black";
}

.custom_paging li.slick-active {
        display: block;
}

/* mode2 */
.mode2 {
        /* padding-bottom: 178px; */
        height: 100vh;
        box-sizing: border-box;
        background: url(../images/mode2bg.png) no-repeat;
        background-size: cover;
}

.mode2ul a {
        display: block;
        padding-bottom: 100%;
        height: 0;

        position: relative;
        overflow: hidden;

}

.mode2ul li:nth-child(even) {
        margin-top: 9%;
}

.mode2ul a::before {
        content: '';
        display: block;
        width: 99%;
        height: 99%;
        position: absolute;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 50%;
        left: 0;
        top: 0;
}


.mode2Pic {
        text-align: center;
        box-sizing: border-box;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
        width: 100%;
        z-index: 50;
}

.mode2txt {
        line-height: 30px;
        height: 60px;
        padding: 0 20px;
        box-sizing: border-box;
        overflow: hidden;
        margin-bottom: 30px;
}

.mode2ul .date {
        color: rgba(255, 255, 255, .5);
        margin: 0;
}

.info {
        background: url(../images/22.png);
        background-size: cover;
        width: 100%;
        padding-bottom: 100%;
        height: 0;
        border-radius: 50%;
        -webkit-transition: all 0.35s ease-in-out;
        -moz-transition: all 0.35s ease-in-out;
        transition: all 0.35s ease-in-out;
        position: relative;
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
}

.mode2ul li:hover .info {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
}

/* mode3 */
.mode3 {
        overflow: hidden;
        background: url(../images/mode3bg.png) no-repeat;
        background-size: cover;
        height: 100vh;
}

.mode3l {
        width: 520px;
}

.mode3r {
        display: block;
}

.mode3 .title {
        text-align: center;
}

.mode3r {
        margin-left: 610px;
        width: calc(100% - 80px);
}

.mode3r .slick-current .mode1Pic {
       position: relative;
       transform: scale(1);
       transform-origin: left center;
}
.mode3r .slick-current .mode1Pic::before{
        display:none
}
.mode3r .mode1Pic::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background: url(../images/bb.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        top: 0;
}

.mode3slick .slick-prev {
        left: -15%;
        top: calc(100% - 100px);
}

.mode3slick .slick-next {
        right: 108%;
        top: calc(100% - 100px);
}

.mode3slick .custom_paging {
        left: -610px;
        top: calc(100% - 130px);
}

.slider-nav .slick-slide {
        margin: 0 55px;

}

.slider-nav a {
        display: block;
}

.mode3l p.gp-f20 {
        margin-bottom: 50px;
        line-height: 30px;
        max-height: 60px;
        overflow: hidden;
}

.mode3l p.gp-f16 {
        line-height: 24px;
        max-height: 48px;
        overflow: hidden;
}

.container{
        position: relative;
        z-index: 500;
}

.container::before{
        content: '';
        display: block;
        width: 1px;
        height: 500%;
        background: rgba(255, 255, 255, .2);
        position: absolute;
        right: 4.79%;
        top: 0;
        z-index: 100;
}

@media screen and (max-width:1500px){.box {
    width: 25.42%;
        }}
@media screen and (max-width:1460px) {
        .mode1r {
                margin-left: 400px;
        }

        .mode1 .custom_paging {
                left: 400px;
        }

        .mode3r {
                margin-left: 400px;
                width: calc(100% - 40px);
        }

        .mode3r .slick-current .mode1Pic {
                /* transform: scale(.8); */
                transform-origin: left center;
                position: relative;
        }

        .mode3slick .slick-prev {
                left: -12%;
                top: calc(100% - 60px);
        }

        .mode3slick .slick-next {
                right: 103%;
                top: calc(100% - 60px);
        }

        .mode3slick .custom_paging {
                left: -400px;
                top: calc(100% - 88px);
        }
        .mode1l{
                width: 350px;
        }
        .title {
                padding: 100px 0 20px;
            }
        .mode1r p.gp-f20{
                margin-bottom: 10px;
        }
        .date {
    margin: 19px 0 10px;
}

}


@media screen and (max-width:1301px) {
        .mode1l {
                /* width: 461px; */
        }

        .mode1r {
                /* margin-left: 567px; */
        }

        .mode1 .custom_paging {
                /* left: 567px; */
        }

        .mode3slick .slick-prev {
                left: -12%;
                top: calc(100% - 45px);
        }

        .mode3slick .slick-next {
                right: 103%;
                top: calc(100% - 45px);
        }

        .mode3slick .custom_paging {
                /* left: 0; */
                top: calc(100% - 76px);
        }

        .slider-nav .slick-slide {
                margin: 0 20px;
        }
}


@media screen and (max-width:1100px) {
        .mode1slick, .mode3slick {
                margin: 0 4.33% 0 2.33%;

        }
        .title {
                padding: 60px 0 50px;
            }
        .bannerinner {
                height: 0;
                padding-bottom: 48.96%;
        }

        .mode1l {
                width: 450px;
        }

        .mode1r {
                margin-left: 520px;
        }

        .mode1 .custom_paging {
                left: 520px;
        }

        .mode1, .mode2, .mode3 {
                height: auto;
                padding-bottom: 50px;
        }



        .mode3slick .slick-prev {
                left: -17%;
                top: calc(100% - 30px);
        }

        .mode3slick .slick-next {
                right: 104%;
                top: calc(100% - 30px);
        }

        .mode3slick .custom_paging {
                left: -340px;
                top: calc(100% - 63px);
        }

        .mode3l {
                width: 310px;
        }

        .mode3r {
                margin-left: 340px;
                width: calc(100% - 40px);
        }

        .mode3l p.gp-f20 {
                margin-bottom: 10px;
        }
        .container::before{
                display: none;
        }
        #fp-nav.right{
                display: none;
        }
}



@media screen and (max-width:996px) {

        .bannerinner {
                height: 0;
                padding-bottom: 48.96%;
        }


        .title {
                padding: 25px 0 16px;
                box-sizing: border-box;
        }

        .mode1l {
                width: 380px;
        }

        .mode1r {
                margin-left: 420px;
        }

        .mode1 .custom_paging {
                left: 420px;
        }

        .mode1r p.gp-f20 {
                margin-bottom: 10px;
        }

        .mode2ul li {
                margin-top: 0 !important;
                margin-bottom: 20px;
        }

       .mode2ul li a {
                margin: 0 10px;
                padding-bottom: calc(100% - 20px);
        }
      .mode2txt{
                margin-bottom: 10px;
        }
        .mode2ul {
                margin: 0 -10px;
                text-align:center;
        }

        .mode3 .date {
                margin: 0px 0 5px;
        }

        .mode3l p.gp-f20 {
                margin-bottom: 3px;
        }

        .mode3slick .slick-prev {
                left: -20%;
                top: calc(100% - 30px);
        }
        

}

@media screen and (max-width:767px) {
        .mode1l {
                width: 100%;
                float: none;
        }

        .mode1r {
                margin-left: 0 !important;
                margin-right: 0;
        }

        .custom_paging {
                left: 0px;
        }

        .mode3slick .slick-prev {
                left: calc(100% - 90px);
                top: 110%;
        }

        .mode3slick .slick-next {
                right: 0;
                top: 110%;
        }

        .mode3slick .custom_paging {
                left: 0;
                top: calc(100% - 59px);
        }

        .mode3l {
                width: 100%;
                float: none;
        }

        .mode3r {
                margin-left: 0;
                width: 100%;
        }

        .mode3l p.gp-f20, .mode3l p.gp-f16 {
                margin-bottom: 20px;

        }

        .slider-nav .slick-slide {
                margin: 0 10px;
        }

        .mode3slick .custom_paging {
                left: 0;
                top: 100%;
        }

       
        .mode1 .custom_paging {
                left: 0;
            }
}

@media screen and (max-width:600px) {
        .swiper-pagination-bullet {
                margin: 3px 0;

        }

        .mouse {
                width: 36px;
                height: 50px;
                background: url(../images/mouse.png) center no-repeat;
                background-size: 36px 50px;
                left: 50%;
                transform: translateX(-50%);
                bottom: 15px;

        }

        .mode3r .slick-current .mode1Pic {
                transform: scale(1);
        }
        .mode3r .slick-current .mode1Pic::before{
                display: none;
        }
}

@media screen and (max-width:479px) {


        .title {
                padding: 30px 0 25px;
                box-sizing: border-box;
        }
        .mode3slick .slick-prev {
                top: 117%;
        }

        .mode3slick .slick-next {
                top: 117%;
        }
}

@media screen and (max-width:414px) {


}