@charset "utf-8";
.logo{position: absolute;right: 14px;top: 21px;}
.logo a{display: block; width: 176px;height: 56px;background-position: -371px -630px;}
html,body,.wrap,.swiper-container,.swiper-slide,.page_1,.page_2{height: 100%; background-size:750px auto;}
body::-webkit-scrollbar { width:0px;}
/* bg.png */
.wrap *{line-height: 1;-webkit-box-sizing: border-box; box-sizing: border-box;font-size: 0px;appearance: none;-moz-appearance: none;-webkit-appearance: none;-ms-appearance: none;}
select::-ms-expand { display: none; }
.sp{width: 2000px;height: 2000px;background: url(../img/sp.png) no-repeat;background-size: 2000px 2000px}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
 .clearfix {display: inline-block;}  /* for IE/Mac */
 .clearfix {zoom: 1;display: block;   }
.fl{float: left;}
.fr{float: right;}
a{-webkit-tap-highlight-color: rgba(0, 0, 0, 0); user-select: none;}
.none{display: none;}
.wrap,.wrap>.swiper-container,.wrap>.swiper-container>.swiper-slide{position: relative; }

h1{font-size: 30px}
.slide1{width: 750px;background: url(../img/bg1.jpg)center center no-repeat; }
.slide2{width: 750px;background: url(../img/bg2.jpg)center center no-repeat; }
.slide3{width: 750px;background: url(../img/bg4.jpg)center center no-repeat; }
.slide4{width: 750px;background: url(../img/bg4.jpg)center center no-repeat; }
.slide5{width: 750px;background: url(../img/bg4.jpg)center center no-repeat; }
.wrap>.swiper-container .swiper-slide {overflow: hidden;}
.wrap>.swiper-container .swiper-slide .content{position: absolute;top: 50%;margin-top: -585px; width: 100%;height: 1170px; }
.log{z-index: 99;position: absolute;top: 50%;margin-top: -600px; left: 10px; width: 178px;height: 82px;background-position: -300px -578px;}
.slide1 .t_t{position: relative;}
.arrow { position: absolute;bottom: 40px;background-position: -902px -232px; width: 40px;height: 55px;left: 50%;    margin-left: -20px;z-index: 99;animation: flow 1s .6s ease-in infinite alternate; }

.slide1 .time{display: flex;justify-content: space-between;align-items: center;flex-wrap: nowrap;margin:88px auto 0;width: 294px; top: 88px; color: #9b799e;font-size: 24px;text-align: center; }
.slide1.swiper-slide-active .time{animation:t_t 1s 0s both;} 
.slide1 .time::after,.slide1 .time::before{content: ""; width: 10px;height: 10px;border-radius: 50%;border: 1px solid #a98aac; }
.slide1 h5{  width: 699px; height: 168px;background-position: -0px -3px; margin: auto;}
.slide1.swiper-slide-active h5{animation:t_t 1s 0.5s both;}
.slide1 .text{width: 438px; height: 46px;background-position: -0px -193px;margin:-18px auto 0;}
.slide1.swiper-slide-active .text{animation:t_t 1s 0.8s both;}
.slide1 .play_box{position: absolute; left: 611px; top: 162px;width: 90px;height: 86px;}
.slide1 .play_bg{ position: absolute;content: ""; width: 90px;height: 86px;background-position: -467px -179px; animation:Myrotate 6s infinite both linear;}
.slide1 .play_btn{position: absolute;left: 50%;top:50%;margin: -9.5px 0 0 -6px; width: 16px;height: 19px;background-position: -586px -213px;}
.slide1 .person_box{position: relative; width: 100%;display: flex;margin-top: 5px;padding-left: 91px; justify-content: center;align-items: center;}
.slide1.swiper-slide-active .person_box img{ animation:fadeInRight 1s .5s  both linear}
.slide1 .person_box span{position: absolute;}
.slide1 .person_box .flower1{left: 45px;top: 471px; width: 102px;height: 51px; background-position: -130px -403px; animation:flower1 3s infinite alternate ease-in-out ;}
.slide1 .person_box .flower2{width: 66px;top: 128px; right: 50px; height: 38px;background-position: -148px -497px;animation:flower1 3s 1s infinite alternate ease-in-out ;}
.slide1 .person_box .flower3{ width: 73px; height: 52px; background-position: -146px -578px;animation:flower1 2s 1.5s infinite alternate ease-in-out ;}
.after{z-index: 9;background: url(../img/after.png) center center no-repeat;background-size: 750px 242px; width: 750px;height: 242px;position: absolute;left: 50%;margin-left: -375px;bottom: -100px;}


.slide2 .t_t{width: 689px;height: 197px; background: url(../img/t1.png)center center no-repeat; background-size: 689px 197px; margin:87px auto 13px;}
.slide2.swiper-slide-active .t_t{}
/* 女装 */
.slide2 .page_1{background: url(../img/bg5.jpg) center center no-repeat; transition: background .5s linear;}
.slide2 .page_1.active{background: url(../img/bg6.jpg) center center no-repeat;}
.slide2 .page_1 .content{padding-top: 334px;}
.slide2 .page_1 .page_person{position: relative;left: 25px;height: 611px; width: 608px;}
.slide2 .page_1 .woman.active img:first-child{animation:fadeInRight .8s .5s  both linear}
.slide2 .page_1 .woman.active img:last-child{animation: fadeInLeft .8s .5s both linear;}
.slide2 .page_1 .page_person img{position: absolute;}
.slide2 .page_1 .page_person img:first-child{z-index: 9; top: 0px;left: 54px;}
.slide2 .page_1 .page_person img:last-child{top: 31px;right: 70px;}

.slide2 .page_1 >p{display: flex;align-items: center;justify-content: center;width: 407px;height: 47px;margin: 40px auto 0;background-position: -16px -282px;color: #aca1a7;font-size: 20px;}
.slide2 .details_box{position: absolute;top: 556px;left: 500px;}
.slide2 .toggle_box{position: relative; z-index: 99; display: flex;justify-content: space-between;align-items: center; width: 425px;height: 64px;background-position: -300px -429px; margin:35px auto 0; padding: 8px 10px 0 0;}
.slide2 .toggle_box.active{animation: t_t 1s 1.8s both;}
.slide2 .toggle_box a{width: 50%;color: #9579ba;font-size: 24px;text-align: center;}
.slide2 .toggle_box a.return{color: #fff;}
.slide2  .details_box .details{position: relative; width: 158px;height: 158px;}
.slide2  .details_box .details1{margin:0 0 24px 78px;}
.slide2 .details::before{display: block;content: ""; width: 158px; height: 158px;  background: url(../img/details_bg.png)center center no-repeat; background-size:158px 158px ;animation:Myrotate 3s 0s infinite   both linear}
.slide2  .details_box img{position: absolute;left: 50%; top: 50%; margin: -73px 0 0 -73px; width: 146px; height: 146px; border-radius: 50%;}
.slide2 .page_1 .woman.active .details_box img{animation: rotateIn 2s both;}
.slide2  .details_box .details p{color: #8c85a2;font-size: 16px;text-align: center;margin-top: 10px;}
.slide2.swiper-slide-active .t_t{animation:t_t 1s 0.5s both;}
.slide2 .person_box{position: relative;}
.slide2 .person_box >.text{position: absolute;top: -104px; right: 41px; width: 72px;  height: 0px;background-position: -0 -372px; transition: all 1s 1.5s linear;}
.slide2 .details .details_person{position: relative; margin: auto; width: 706px;height: 100%;}
 .slide2 .details .details_person img{position: absolute;} 
.slide2 .details .details_person img:first-child{z-index: 2; left: 69px; top: 15px;} 
 .slide2 .details .details_person img:last-child{right: 151px; top: 0px;} 
.slide2 .details >.text{height: 356px;}
/* 男装 */
.slide2 .man{display: none;}
.slide2 .man .page_person{position: relative;top: 0px;left: 92px; width: 610px;}
.slide2 .man .page_person img{position: absolute;}
.slide2 .man.active .page_person img:first-child{animation:fadeInRight .8s .5s  both linear}
.slide2 .man.active .page_person img:last-child{animation: fadeInLeft .8s .5s both linear;}
.slide2 .man .page_person img:first-child{top: 20px; left: 46px;}
.slide2 .man .page_person img:last-child{right: 67px;top: 0;}
.slide2 .page_1 .man.active .details_box img{animation: rotateIn 2s both;}
.slide2 .man .details_box{z-index: 9; left: 0px;}
.slide2 .man .details_box .details{margin: 0;}
.slide2 .man .details_box .details2{margin:30px 0 0 80px;}
.slide2 .man .get_method {position: relative; top: 968px;}
.slide2 .man .toggle_box{position: relative;top: 961px;}
.slide2 .person_box .text.active{height: 356px;}
.slide2 .person{position: relative; display: flex;justify-content: space-between; width: 670px; height: 771px;    margin: auto;}
.slide2 .person img:first-child{position: absolute;left: 0px; top: 0px;}
.slide2 .person img:last-child{position: absolute;right: 0px; top: 60px;}
.slide2.swiper-slide-active .person img:first-child{animation:fadeInLeft .8s 1s  both linear}
.slide2.swiper-slide-active .person img:last-child{animation:fadeInRight .8s 1s  both linear}
.slide2 .indicate1{position: absolute;top: 61px;left: 33px;width: 109px;height: 150px;}
.slide2.swiper-slide-active .indicate1{animation:fadeInLeft .8s 1.5s  both linear}
.slide2 .indicate1 p.text{color: #aa8da5;font-size: 18px;width: 39px;}
.slide2 .indicate1 p.pach{z-index: 9; position: absolute;left: 30px;top: 88px;transform: rotate(50deg);width: 36px;height: 2px;background: #d6c3d8;}
.slide2 .indicate1 .sign,
.slide2 .indicate2 .sign{position: absolute;right: 0;bottom: 0px; width: 77px; height: 77px;background-position: -467px -303px; animation: optiacy .5s infinite alternate linear;}
.slide2 .indicate1  .indicate_btn,
.slide2 .indicate2  .indicate_btn{z-index: 10; position: absolute;left: 58px;top: 100px; width: 22px; height: 22px;background-position: -639px -210px;animation:Myrotate .8s 0s infinite   both linear}
.slide2 .indicate2{z-index: 9; position: absolute;right: 160px;top: 290px; width: 70px;height: 70px;}
.slide2.swiper-slide-active .indicate2{animation:fadeInRight .8s 1s  both linear}
.slide2 .indicate2  .indicate_btn{left: 23px;top: 21px;}
.slide2 .get_method{display: flex;align-items: center;justify-content: center; width: 407px;height: 47px;margin: auto; background-position: -16px -282px;color: #aca1a7;font-size: 20px;}
.slide2.swiper-slide-active .get_method{animation:t_t 1s 1.5s both;}
.slide2 .get_method em{color: #a98198;font-size: 24px;}
.slide3 .t_t{position: absolute;top: 68px;left: 50%;margin-left: -312.5px; width: 625px;height: 197px;background: url(../img/t2.png)center center no-repeat; background-size: 625px 197px;}
.slide3.swiper-slide-active .t_t{animation:t_t 1s 0.5s both;}

.slide3 .text{position: absolute;right: 76px;top: 50%;margin-top: -144.5px; width: 52px; height: 389px;background-position: -743px -3px;    }
.slide3.swiper-slide-active .text{animation: fadeInRight .5s .5s both linear;}
.slide3 .c_box{position: relative; width: 460px;height: 400px;}
.slide3 .c_box.bottom{       padding: 5px 81px 50px 97px;margin: -18px auto 0; width: 560px;height: 438px;background: url(../img/man_hd.png) -70px center no-repeat;background-size:560px 438px;}
.slide3 .c_box.bottom video{position: relative;z-index: 997; width: 100%;height: 100%; border-radius: 50%; object-fit: fill;}
.slide3 .get_method {display: flex;align-items: center;justify-content: center;width: 407px;height: 47px;margin:-27px auto 0;background-position: -16px -282px;color: #aca1a7;font-size: 20px;}
.slide3.swiper-slide-active .get_method{animation: t_t 1s 1.5s both;}
.slide3 .get_method em {color: #a98198;font-size: 24px;}
.slide3 .c_box.top{    padding: 4px 74px 34px 111px;margin: 260px auto 0; width: 567px; height: 423px;background: url(../img/woman_hd.png)-70px center no-repeat; background-size:567px 423px;}
.slide3 .c_box.top video{position: relative;z-index: 997;width: 100%;height: 100%;border-radius:50% ; object-fit: fill;}
.slide3.swiper-slide-active .top{animation: t_t 1s 1s both;}
.slide3.swiper-slide-active .bottom{animation: t_t 1s 1.3s both;}
.slide3 .c_box.top .butterfly{position: absolute;top: 101px;left: -15px; width: 48px; height: 56px;background-position: -572px -314px;animation: butterfly 3s infinite alternate ease-in-out;}
.slide3 .c_box.bottom .butterfly{position: absolute;top: 302px;right: -6px; width: 51px; height: 57px;background-position: -648px -315px;animation: butterfly 2s 1s infinite alternate ease-in-out;}
.slide3 .c_box.top .truee{position: absolute;left: -7px;top: 183px; width: 66px; height: 111px;background-position: -582px -552px; animation: truee 1s infinite alternate linear;}
.slide4 .t_t{position: absolute;top: 141px;left: 82px; width: 244px;height: 346px;background: url(../img/t3.png) center center no-repeat; background-size: 244px 346px;}
.slide4.swiper-slide-active .t_t{animation:fadeInLeft .5s .5s  both linear}
.slide4 .play_box {z-index: 19; position: absolute;left: 288px;top: 240px;width: 90px;height: 86px;}
.slide4 .play_bg {position: absolute;content: "";width: 90px;height: 86px;background-position: -467px -179px;animation: Myrotate 6s infinite both linear;}
.slide4 .play_btn {position: absolute;left: 50%;top: 50%;margin: -9.5px 0 0 -6px;width: 16px;height: 19px;background-position: -586px -213px;}
.slide4  .butterfly {position: absolute;top: -22px;right:35px;width: 51px;height: 57px;background-position: -648px -315px;animation: butterfly 2s 1s infinite alternate ease-in-out;}
.slide4  .butterfly2 { width: 51px; height: 57px;top: 1000px;left: 156px;background-position: -572px -314px; animation: butterfly 1.5s 1.5s infinite alternate ease-in-out;}
.slide4.swiper-slide-active img{animation:fadeInRight .5s .5s  both linear}
.slide4 img{margin:-62px 0 0 109px;}

.slide4 .get_method {display: flex;align-items: center;justify-content: center;width: 407px;height: 47px;margin:-51px auto;background-position: -16px -282px;color: #aca1a7;font-size: 20px;}
.slide4.swiper-slide-active .get_method{animation: t_t 1s 1s both;}
.slide4 .get_method em {color: #a98198;font-size: 24px;}
.slide5 .t_t{margin: 70px auto 14px; width: 625px;height: 197px;background: url(../img/t4.png) center center no-repeat; background-size: 625px 197px;}
.slide5.swiper-slide-active .t_t{animation: t_t 1s .5s both;}
.slide5 .dj_box {padding: 0 28px;display: flex; justify-content: space-between; margin-bottom: 50px;}
.slide5.swiper-slide-active .dj_box{animation: t_t 1s .8s both;}
.slide5 .dj_box li{display: flex;justify-content: center;align-items: center; width: 321px;height: 276px;background: url(../img/dj_bg1.png)center center no-repeat; background-size:321px 276px;}
.slide5 .dj_box li:first-child img{margin-top: 50px;}
.slide5 .swper_box{position: relative; width: 682px;height: 369px;background: url(../img/swiper_box.png)center center no-repeat; background-size: 682px 369px;margin: auto; padding: 6px 0 0 5px;}
.slide5.swiper-slide-active .swper_box{animation: t_t 1s 1.3s both;}
.swiper-container1{overflow: hidden;width: 670px;}
.swiper-pagination1 {display: flex;align-items: center;justify-content: center; height: 73px;}
.swiper-pagination1 span{height: 20px;width: 20px;border: solid 2px #d29cd2;background: transparent;margin: 0 15px;}
.swiper-pagination-bullet-active{background: #e39cc7 !important;}
.slide5 .get_method {display: flex;align-items: center;justify-content: center;width: 407px;height: 47px;margin: 80px auto 0;background-position: -16px -282px;color: #aca1a7;font-size: 20px;}
.slide5.swiper-slide-active .get_method{animation: t_t 1s 1.6s both;}
.slide5 .get_method em {color: #a98198;font-size: 24px;}
/* pop */
.wrap .off {z-index: 99;position: absolute;top: -41px;right: 0px;width: 40px;height: 40px;background-position: -757px -429px;}
.pop1 {position: relative;width: 696px;height: 390px;margin: auto;}
.pop1 .video_box1 video{width: 696px;height: 390px;object-fit: fill;}
.pop1 .video_box2 video{width: 696px;height: 390px;object-fit: fill;}


@keyframes t_t{ 
    0%{transform: translateY(40px);opacity: 0;}
    100%{transform: translateY(0px);opacity: 1; }
}
@keyframes Myrotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(30px);
        -ms-transform: translateX(30px);
        transform: translateX(30px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

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

@keyframes flower1{
    0%{
        opacity: .5;
        transform: translateY(-20px);
    }
    0%{
        opacity: 1;
        transform: translateY(20px);
    }
}

@keyframes optiacy{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes butterfly{
    0%{
        opacity: .5;
        transform:scale(1) skew(0deg) translateY(-20px);
    }
    0%{
        opacity: 1;
        transform:scale(.8) skew(10deg) translateY(20px);
    }
}
@keyframes rotateIn {
    0% {
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(-200deg);
        -ms-transform: rotate(-200deg);
        transform: rotate(-200deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}
@keyframes flow{
    0%{transform:translateY(-5px) scale(1.5);}
    100%{transform:translateY(5px) scale(1.5);}}