@charset "UTF-8";
.swiper-active .sw1-news {
    opacity: 1;
    -webkit-transform: translateX(7.19rem);
    transform: translateX(7.19rem);
    transition: 2s ease .05s
}
.swiper-inactive .sw1-news {
    opacity: 0;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition: 2s ease .05s
}

.swiper-active .swiper1-text {
    opacity: 1;
    -webkit-transform: translateX(7.19rem);
    transform: translateX(7.19rem);
    transition: 2s ease .05s
}
.swiper-inactive .sw2-logo {
    opacity: 0;
    -webkit-transform: translateY(7.19rem);
    transform: translateY(7.19rem);
    transition: 2s ease .05s
}
.swiper-active .sw2-logo {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: 2s ease .05s
}

.sw2-right .swiper-inactive .sw2-s1 {
    opacity: 0;
    -webkit-transform: translateX(7.19rem);
    transform: translateX(7.19rem);
    transition: 2s ease .05s
}
.sw2-right .swiper-active .sw2-s1 {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition: 1s ease .05s;
}
.sw2-right .swiper-active .sw2-s1:nth-child(2) {
    transition: 1s ease 1.05s;
}
.sw2-right .swiper-active .sw2-s1:nth-child(3) {
    transition: 1s ease 2.05s;
}
.sw2-right .swiper-active .sw2-s1:nth-child(4) {
    transition: 1s ease 3.05s;
}

.sw3-xf {
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}
.sw3-xf-1 .flipper {
    background: linear-gradient( 142deg, #F5CF6C 0%, #FBC438 100%);
    background-size: 100% auto;
}
.sw3-xf-1 .back {
    background: url('../img/xf-1.png') no-repeat center center;
    background-size: cover;
    transform: rotateY(180deg);
}
.sw3-xf-2 .flipper {
    background: linear-gradient( 142deg, #FFABAB 0%, #FF8888 100%);
    background-size: 100% auto;
}
.sw3-xf-2 .back {
    background: url('../img/xf-2.png') no-repeat center center;
    background-size: cover;
    transform: rotateY(180deg);
}
.sw3-xf-3 .flipper {
    background: url("../img/logo-1.png") no-repeat top left, linear-gradient( 140deg, #FEC268 0%, #FFB13C 100%);
    background-size: 100% auto;
}
.sw3-xf-3 .back {
    background: url('../img/xf-3.png') no-repeat center center;
    background-size: cover;
    transform: rotateY(180deg);
}
.sw3-xf-4 .flipper {
    background: url("../img/logo-2.png") no-repeat top left, linear-gradient( 140deg, #FF9535 0%, #F8871F 100%);
    background-size: 100% auto;
}
.sw3-xf-4 .back {
    background: url('../img/xf-4.png') no-repeat center center;
    background-size: cover;
    transform: rotateY(180deg);
}

.sw3-xf:hover .c1 { display: none; }
.sw3-xf:hover .c2 { left: .24rem; top: .5rem; bottom: auto; }
.sw3-xf:hover .c3 { display: none; }
.sw3-xf:hover .c6 { display: block; }
/* .sw3-xf-2:hover .c2, .sw3-xf-2:hover .c6 { display: none; } */

.flipper, .back {
    transition: transform .8s;
    transform-style: preserve-3d;
    position: relative;
}
.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.sw3-xf:hover .flipper {
    transform: rotateY(180deg);
}

@keyframes moveBackground {
    0% {
        transform: rotateY(0deg) rotate(0deg);
    }
    50% {
        transform: rotateY(20deg) rotate(5deg);
    }
    100% {
        transform: rotateY(0deg) rotate(0deg);
    }
}

.sw4-ul .c1-back {
    width: 3.67rem;
    height: 1.3rem;
    background: url('../img/image_25.png') no-repeat bottom center;
    background-size: 1.94rem .73rem;
    animation: moveBackground 2s linear infinite;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}

.swiper-inactive .sw4-ul .c1 {
    opacity: 0;
    -webkit-transform: translateY(7.19rem);
    transform: translateY(7.19rem);
    transition: 2s ease .05s
}
.swiper-active .sw4-ul .c1 {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: 1s ease .05s;
}
.swiper-active .sw4-ul .c1:nth-child(2) {
    transition: 1s ease 1.05s;
}
.swiper-active .sw4-ul .c1:nth-child(3) {
    transition: 1s ease 2.05s;
}