@charset "utf-8";
/* CSS Document */
*{box-sizing: border-box;}
html, body {
    position: relative;
    height: 100%;
}
body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    color:#000;
    margin: 0;
    padding: 0;
    line-height: 1;
    background-color: #260965;
}

.main{height:100%;margin:0 auto;font-family: Microsoft YaHei;overflow: hidden;}

.loading{position: fixed;z-index: 99;top: 0;left: 0;width: 100%;height: 100%;background-color: #000;overflow: hidden;transform-origin: center center;-webkit-transform-origin: center center;}
.loading img{position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 1.6rem;height: 1.6rem;margin: auto;}
.loading.out{
-webkit-animation: loadingOut .5s ease-in-out forwards;
        animation: loadingOut .5s ease-in-out forwards;
}

@keyframes loadingOut{
    0%{transform: translateY(0);opacity: 1;}
    100%{transform:translateY(-100%);}
}
@-webkit-keyframes loadingOut{
    0%{-webkit-transform: translateY(0);opacity: 1;}
    100%{-webkit-transform: translateY(-100%);}
}

.swiper-container {width: 100%;height: 100%;}
.swiper-slide {
    position:relative;
    text-align: center;
    box-sizing: border-box;
    overflow:hidden;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.slide-tip{display:none;position:absolute;bottom:.15rem;left:50%;width:.33rem;height:.3rem;margin-left:-.16rem;background:url(https://png.pookcdn.net/website_img/net/activity/cj2017/icon_down.png) no-repeat;background-size:100% 100%;z-index: 2;transform-origin: 50% 50%;-webkit-transform-origin: 50% 50%;}
.slide-tip{-webkit-animation:tipAnimate 1.3s ease-in-out infinite;animation:tipAnimate 1.3s ease-in-out infinite;}
.slide-tip.rotate{-webkit-animation:tipAnimateRotate 1.2s infinite;animation:tipAnimateRotate 1.2s infinite;}
@keyframes tipAnimate {
    0%{
        opacity:0;
        transform: translateY(0);
    }
    50%{
        opacity:1;
    }
    100%{
        opacity:0;
        transform: translateY(-.3rem);
    }
}
@-webkit-keyframes tipAnimate {
    0%{
        opacity:0;
        -webkit-transform: translateY(0);
    }
    50%{
        opacity:1;
    }
    100%{
        opacity:0;
        -webkit-transform: translateY(-.3rem);
    }
}
@keyframes tipAnimateRotate {
    0%,100%{
        transform: translateY(0) rotate(180deg);
    }
    50%{
        transform: translateY(.15rem) rotate(180deg);
    }
}
@-webkit-keyframes tipAnimateRotate {
    0%,100%{
        -webkit-transform: translateY(0) rotate(180deg);
    }
    50%{
        -webkit-transform: translateY(15px) rotate(180deg);
    }
}

.slide-music{position: fixed;top:.2rem;right:.2rem;width:.5rem;height:.5rem;background:url(https://png.pookcdn.net/website_img/net/activity/cj2017/music_on.png) no-repeat;background-size:100% 100%;z-index: 2;cursor: pointer;}
.slide-music.off{background:url(https://png.pookcdn.net/website_img/net/activity/cj2017/music_off.png) no-repeat;background-size:100% 100%;}
.slide-music{
    -webkit-animation:musicAnimate 2s linear infinite;
    animation:musicAnimate 2s linear infinite;
}
@keyframes musicAnimate {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
@-webkit-keyframes musicAnimate {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

.swiper-slide img{display: block;}
.swiper_page{position:relative;width:7.2rem;height:100%;margin:0 auto;text-align: center;overflow: hidden;}

.swiper_page{background: url(https://png.pookcdn.net/website_img/net/activity/cj2017/background.jpg) no-repeat;background-size:7.2rem auto;}

.slide_01 .item_01{position: absolute;z-index: 3;top: 2.24rem;left: 2.35rem;width: 2.5rem;height: 3.7rem;background: url(https://png.pookcdn.net/website_img/net/activity/cj2017/page_1_1.png) no-repeat;background-size: 100% 100%;opacity: 0;}
.slide_01 .item_02{position: absolute;z-index: 4;bottom: 2.85rem;left: 1.56rem;width: 4.04rem;height: .77rem;background: url(https://png.pookcdn.net/website_img/net/activity/cj2017/page_1_2.png) no-repeat;background-size: 100% 100%;}
.slide_01 .item_03{position: absolute;bottom: 1.3rem;left: 2.75rem;width: 1.7rem;height: .87rem;background:url(https://png.pookcdn.net/website_img/net/activity/cj2017/logo.png) no-repeat;background-size: 100% 100%;}
.slide_01 .item_circle_01,
.slide_01 .item_circle_02{transform-origin: center center;-webkit-transform-origin: center center;}
.slide_01 .item_circle_01{position: absolute;z-index: 1;top: .63rem;left: .22rem;width: 6.76rem;height: 6.76rem;background-color: rgba(0,0,0,.3);border-radius: 50%;transform: scale(0);-webkit-transform: scale(0);}
.slide_01 .item_circle_02{position: absolute;z-index: 2;top: 1.41rem;left: 1rem;width: 5.2rem;height: 5.2rem;background-color: rgba(0,0,0,.6);border-radius: 50%;opacity: 0;}

.slide_01.swiper-slide-active .item_01{
-webkit-animation-name: fadeIn,rotateEle;
        animation-name: fadeIn,rotateEle;
-webkit-animation-duration: 1s,20s;
        animation-duration: 1s,20s;
-webkit-animation-delay: 1.3s,2.3s;
        animation-delay: 1.3s,2.3s;
-webkit-animation-timing-function:linear;
        animation-timing-function:linear;
-webkit-animation-iteration-count:1,infinite;
        animation-iteration-count:1,infinite;
-webkit-animation-fill-mode:forwards,none;
        animation-fill-mode:forwards,none;
}

.slide_01.swiper-slide-active .item_circle_01{
-webkit-animation-name: circleShow1;
        animation-name: circleShow1;
-webkit-animation-duration: .6s;
        animation-duration: .6s;
-webkit-animation-delay: 1.1s;
        animation-delay: 1.1s;
-webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out;
-webkit-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
}
.slide_01.swiper-slide-active .item_circle_02{
-webkit-animation-name: circleShow2;
        animation-name: circleShow2;
-webkit-animation-duration: .8s;
        animation-duration: .8s;
-webkit-animation-delay: .5s;
        animation-delay: .5s;
-webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out;
-webkit-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
}

@keyframes circleShow1{
    0%{transform: scale(0);}
    100%{transform: scale(1);}
}
@-webkit-keyframes circleShow1{
    0%{-webkit-transform: scale(0);}
    100%{-webkit-transform: scale(1);}
}

@keyframes circleShow2{
    0%{transform: scale(.2) translateY(-6rem);opacity:0;}
    50%{transform: scale(.2) translateY(0);opacity:1;}
    100%{transform: scale(1) translateY(0);opacity:1;}
}
@-webkit-keyframes circleShow2{
    0%{-webkit-transform: scale(.2) translateY(-6rem);opacity:0;}
    50%{-webkit-transform: scale(.2) translateY(0);opacity:1;}
    100%{-webkit-transform: scale(1) translateY(0);opacity:1;}
}

.item_gradient{position: absolute;z-index: 0;top: 1.5rem;left: .73rem;width: 5.74rem;height: 8.78rem;background: linear-gradient(to bottom,transparent 0%,rgba(49,12,107,.3) 50%,transparent 100%);background: -webkit-linear-gradient(to bottom,transparent 0%,rgba(49,12,107,.3) 50%,transparent 100%);transform-origin: center center;-webkit-transform-origin: center center;}

.slide_02.swiper-slide-active .item_gradient,
.slide_03.swiper-slide-active .item_gradient{
-webkit-animation-name: item_gradient_show_01;
        animation-name: item_gradient_show_01;
-webkit-animation-duration: 1.5s;
        animation-duration: 1.5s;
-webkit-animation-timing-function:linear;
        animation-timing-function:linear;
-webkit-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
}
@keyframes item_gradient_show_01{
    0%{transform: scaleY(0);}
    100%{transform: scaleY(1);}
}
@-webkit-keyframes item_gradient_show_01{
    0%{-webkit-transform: scaleY(0);}
    100%{-webkit-transform: scaleY(1);}
}


.slide_02 .item_01{position: absolute;z-index: 5;top: .98rem;left: .87rem;width: 3.18rem;height: 2.93rem;background:url(https://png.pookcdn.net/website_img/net/activity/cj2017/page_2_1.png) no-repeat;background-size: 100% 100%;}
.slide_02 .item_02{position: absolute;z-index: 4;top: 4.28rem;left: 3.06rem;width: 3.18rem;height: 2.93rem;background:url(https://png.pookcdn.net/website_img/net/activity/cj2017/page_2_2.png) no-repeat;background-size: 100% 100%;}
.slide_02 .item_03{position: absolute;z-index: 3;top: 7.69rem;left: 1.38rem;width: 2.99rem;height: 2.76rem;background:url(https://png.pookcdn.net/website_img/net/activity/cj2017/page_2_3.png) no-repeat;background-size: 100% 100%;}
.slide_02 .text{position: absolute;z-index: 2;font-size: .24rem;color: #fff;letter-spacing: .02rem;}
.slide_02 .text.text_01{top: 2.28rem;left: 4.3rem;}
.slide_02 .text.text_02{top: 5.6rem;right: 4.4rem;}
.slide_02 .text.text_03{top: 8.96rem;left: 4.8rem;}
.slide_02 .svg_box{position: absolute;top: 3.92rem;left: 2.24rem;width: 3.29rem;height: 5.16rem;}
.slide_02 .line_01,
.slide_02 .line_02{position: absolute;z-index: 2;width: 2.46rem;height: .06rem;background-color: rgba(1,221,255,.42);opacity: 0;transform-origin: left top;-webkit-transform-origin: left top;}
.slide_02 .line_01{top: 2.9rem;left: 3.55rem;transform: rotate(55deg);-webkit-transform: rotate(55deg);}
.slide_02.swiper-slide-active .line_01{
-webkit-animation-name: line_01;
        animation-name: line_01;
-webkit-animation-duration: 1s;
        animation-duration: 1s;
-webkit-animation-delay: 1s;
        animation-delay: 1s;
-webkit-animation-timing-function:linear;
        animation-timing-function:linear;
-webkit-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
}
.slide_02 .line_02{top: 6.97rem;left: 5rem;transform: rotate(125deg);-webkit-transform: rotate(125deg);}
.slide_02.swiper-slide-active .line_02{
-webkit-animation-name: line_02;
        animation-name: line_02;
-webkit-animation-duration: 1s;
        animation-duration: 1s;
-webkit-animation-delay: 2s;
        animation-delay: 2s;
-webkit-animation-timing-function:linear;
        animation-timing-function:linear;
-webkit-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
}

@keyframes slide_2_2{
    0%{transform:translate(-3.29rem,-2.29rem);opacity: 0;}
    50%{opacity: 1;}
    100%{transform:translate(0,0);opacity: 1;}
}
@-webkit-keyframes slide_2_2{
    0%{-webkit-transform:translate(-3.29rem,-2.29rem);opacity: 0;}
    50%{opacity: 1;}
    100%{-webkit-transform:translate(0,0);opacity: 1;}
}

@keyframes slide_2_3{
    0%{transform:translate(2.08rem,-3.13rem);opacity: 0;}
    50%{opacity: 1;}
    100%{transform:translate(0,0);opacity: 1;}
}
@-webkit-keyframes slide_2_3{
    0%{-webkit-transform:translate(2.08rem,-3.13rem);opacity: 0;}
    50%{opacity: 1;}
    100%{-webkit-transform:translate(0,0);opacity: 1;}
}

@keyframes line_01{
    from{width: 0;transform: rotate(55deg);opacity: 1;}
    to{width: 2.46rem;transform: rotate(55deg);opacity: 1;}
}
@-webkit-keyframes line_01{
    from{width: 0;-webkit-transform: rotate(55deg);opacity: 1;}
    to{width: 2.46rem;-webkit-transform: rotate(55deg);opacity: 1;}
}

@keyframes line_02{
    from{width: 0;transform: rotate(125deg);opacity: 1;}
    to{width: 2.46rem;transform: rotate(125deg);opacity: 1;}
}
@-webkit-keyframes line_02{
    from{width: 0;-webkit-transform: rotate(125deg);opacity: 1;}
    to{width: 2.46rem;-webkit-transform: rotate(125deg);opacity: 1;}
}

@keyframes item_gradient_show_02{
    0%{height: 0;}
    100%{height: 8.78rem;}
}
@-webkit-keyframes item_gradient_show_02{
    0%{height: 0;}
    100%{height: 8.78rem;}
}

.slide_03 .progress{position: absolute;z-index: 2;top: 1.68rem;left: 1.37rem;width: .18rem;height: 7.91rem;background: url(https://png.pookcdn.net/website_img/net/activity/cj2017/page_3_1.png) no-repeat;background-size: .18rem 7.91rem;}
.slide_03.swiper-slide-active .progress{
-webkit-animation-name: progressShow;
        animation-name: progressShow;
-webkit-animation-duration: 4.5s;
        animation-duration: 4.5s;
-webkit-animation-timing-function:linear;
        animation-timing-function:linear;
-webkit-animation-fill-mode:forwards;
        animation-fill-mode:forwards;    
}
.slide_03 .progress .progress_bar{position: absolute;left: -.58rem;bottom: -.54rem;width: 1.3rem;height: 1.33rem;background:url(https://png.pookcdn.net/website_img/net/activity/cj2017/icon_light.png) no-repeat;background-size: 100% 100%;}
.slide_03 .process_list{position: absolute;z-index: 2;top: 1.56rem;left: 1.73rem;}
.slide_03 .process_list .list{height: .42rem;margin-bottom: .68rem;padding:.05rem 0 0 .7rem;font-size: .3rem;color: #ffffff;text-align: left;background-repeat: no-repeat;background-size: .42rem .42rem;}
.slide_03 .process_list .list:nth-child(1){background-image: url(https://png.pookcdn.net/website_img/net/activity/cj2017/icon_01.png);}
.slide_03 .process_list .list:nth-child(2){background-image: url(https://png.pookcdn.net/website_img/net/activity/cj2017/icon_02.png);}
.slide_03 .process_list .list:nth-child(3){background-image: url(https://png.pookcdn.net/website_img/net/activity/cj2017/icon_03.png);}
.slide_03 .process_list .list:nth-child(4){background-image: url(https://png.pookcdn.net/website_img/net/activity/cj2017/icon_04.png);}
.slide_03 .process_list .list:nth-child(5){background-image: url(https://png.pookcdn.net/website_img/net/activity/cj2017/icon_05.png);}
.slide_03 .process_list .list:nth-child(6){background-image: url(https://png.pookcdn.net/website_img/net/activity/cj2017/icon_06.png);}
.slide_03 .process_list .list:nth-child(7){background-image: url(https://png.pookcdn.net/website_img/net/activity/cj2017/icon_07.png);}
.slide_03 .process_list .list:nth-child(8){background-image: url(https://png.pookcdn.net/website_img/net/activity/cj2017/icon_08.png);}

@keyframes progressShow{
    0%{height: .18rem;}
    100%{height:7.91rem;}
}
@-webkit-keyframes progressShow{
    0%{height: .18rem;}
    100%{height:7.91rem;}
}

.slide_04 .item_circle{position: absolute;z-index: 1;top: .63rem;left: .22rem;width: 6.76rem;height: 6.76rem;background-color: rgba(0,0,0,.3);border-radius: 50%;transform: scale(0);-webkit-transform: scale(0);}
.slide_04 .item_01{position: absolute;z-index: 2;top: 1.41rem;left: 1rem;width: 5.2rem;height: 5.2rem;background: url(https://png.pookcdn.net/website_img/net/activity/cj2017/page_4_1.png) no-repeat;background-size: 100% 100%;transform-origin:center center;-webkit-transform-origin:center center;opacity: 0;}
.slide_04 .item_02{position: absolute;z-index: 3;top: .6rem;left: 2.65rem;width: 1.9rem;height: 1.66rem;background: url(https://png.pookcdn.net/website_img/net/activity/cj2017/page_4_2.png) no-repeat;background-size: 100% 100%;}
.slide_04 .item_03{position: absolute;z-index: 4;bottom: 3.57rem;left: 2.65rem;width: 1.91rem;height: .26rem;background: url(https://png.pookcdn.net/website_img/net/activity/cj2017/page_4_3.png) no-repeat;background-size: 100% 100%;}
.slide_04 .item_04{position: absolute;z-index: 4;bottom: 1.98rem;left: 1.55rem;width: 4.12rem;height: 1.28rem;background: url(https://png.pookcdn.net/website_img/net/activity/cj2017/page_4_4.png) no-repeat;background-size: 100% 100%;}
.slide_04 .text_01,
.slide_04 .text_02,
.slide_04 .text_03,
.slide_04 .text_04{position: absolute;left: 0;width: 100%;text-align: center;}
.slide_04 .text_04{bottom: .58rem;font-size: .22rem;color: #363591;}

.slide_04.swiper-slide-active .item_circle{
-webkit-animation-name: circleShow1;
        animation-name: circleShow1;
-webkit-animation-duration: .6s;
        animation-duration: .6s;
-webkit-animation-delay: .5s;
        animation-delay: .5s;
-webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out;
-webkit-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
}

.slide_04.swiper-slide-active .item_01{
-webkit-animation-name: rotateShow;
        animation-name: rotateShow;
-webkit-animation-duration: 1s;
        animation-duration: 1s;
-webkit-animation-delay: 1s;
        animation-delay: 1s;
-webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out;
-webkit-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
}

@keyframes rotateShow{
    0%{transform: rotate(-540deg) scale(.1);opacity: 0;}
    100%{transform: rotate(0) scale(1);opacity: 1;}
}
@-webkit-keyframes rotateShow{
    0%{-webkit-transform: rotate(-540deg) scale(.1);opacity: 0;}
    100%{-webkit-transform: rotate(0) scale(1);opacity: 1;}
}

@-webkit-keyframes bounceIn{
    0%,
    100%,
    20%,
    40%,
    60%,
    80%
    {-webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);}
    0%{-webkit-transform: scale(.3);opacity: 0;}
    20%{-webkit-transform: scale(1.1);}
    40%{-webkit-transform: scale(.9);}
    60%{-webkit-transform: scale(1.03);opacity: 1;}
    80%{-webkit-transform: scale(.97);}
    100%{-webkit-transform: scale(1);opacity: 1;}
}
@keyframes bounceIn{
    0%,
    100%,
    20%,
    40%,
    60%,
    80%
    {transition-timing-function: cubic-bezier(.215,.61,.355,1);}
    0%{transform: scale3d(.3);opacity: 0;}
    20%{transform: scale3d(1.1);}
    40%{transform: scale(.9);}
    60%{transform: scale(1.03);opacity: 1;}
    80%{transform: scale(.97);}
    100%{transform: scale(1);opacity: 1;}
}

@-webkit-keyframes zoomIn{
    0%{-webkit-transform: scale(.3);opacity: 0;}
    50%{opacity: 1;}
}
@keyframes zoomIn{
    0%{transform: scale(.3);opacity: 0;}
    50%{opacity: 1;}
}

@keyframes rotateEle{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@-webkit-keyframes rotateEle{
    0%{-webkit-transform: rotate(0deg);}
    100%{-webkit-transform: rotate(360deg);}
}