@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;
}

.item_light{ position: absolute; bottom: 0; left: 0; width: 7.5rem; height: 3.06rem; background: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/bot_light.png) no-repeat; background-size: cover; z-index: 0;}

.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:.75rem;height:.39rem;margin-left:-.38rem;background:url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/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(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/music_on.png) no-repeat;background-size:100% 100%;z-index: 2;cursor: pointer;}
.slide-music.off{background:url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/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.5rem;height:100%;margin:0 auto;text-align: center;overflow: hidden;}
.swiper_page .item_header{position: absolute;top: 0;left: 0;width: 7.5rem;height: 3rem;background: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/bg_header.png) no-repeat;background-size: cover;}

.swiper_page{background: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/background.jpg) no-repeat;background-size:7.5rem auto;}

.slide_01 .item_01{position: absolute;z-index: 3;top:1rem;left: 50%; margin-left:-1.91rem; width:3.82rem;height: 2.34rem;background: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_1_1.png) no-repeat;background-size: 100% 100%;}
.slide_01 .item_02{position: absolute;z-index: 5; top:2.52rem; left:50%; margin-left:-3.24rem; width: 6.48rem;height: 6.4rem;
background: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_1_2.png) no-repeat;background-size: 100% 100%;}
.slide_01 .item_03,
.slide_04 .item_03{position: absolute;bottom: 1.1rem;left: 50%; margin-left:-.85rem; width: 1.7rem;height: .87rem;background:url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/logo.png) no-repeat;background-size: 100% 100%; z-index: 4;}
.slide_01 .item_04{ position: absolute;z-index: 5;top: 8.2rem;left: 2.85rem;width: 1.81rem; height: .47rem; background: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_1_4.png) no-repeat; background-size: cover;}
.slide_01 .item_05{ position: absolute;top: 9rem; left: 1.75rem;width: 3.84rem; height: .28rem; background: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_1_3.png) no-repeat; background-size: 100% 100%;}
.slide_01 .item_06{ position: absolute;z-index: 6; top:4.67rem; left:50%; margin-left:-2.67rem; width: 5.34rem;height: 3.14rem;background: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_1_7.png) no-repeat;background-size: cover;}

.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;}

.item_line{ position: absolute; width: 2.16rem; height: 1.2rem; background: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_1_6.png) no-repeat; background-size: 100% 100%; opacity: 1; z-index: 99;}
.item_line_01{ top: 1.11rem; left: 1.84rem; transform: rotate(-58deg); -webkit-animation:light_01 3s ease-in-out infinite;  animation:light_01 3s ease-in-out infinite; }
.item_line_02{ top: 5.21rem; left: 0rem; -webkit-animation: 3s linear light_02 infinite;  animation: 3s linear light_02 infinite; }
.item_line_03{ bottom: .48rem; right: -.38rem; transform: rotate(58deg); -webkit-animation: 3s linear light_03 infinite;  animation: 3s linear light_03 infinite;}

@keyframes light_01{
    0%{ transform: translate(0,0) rotate(-58deg); opacity: 0;}
    20%{ opacity: 1;}
    40%{ opacity: 0;}
    60%{ opacity: 1;}
    90%{ transform: translate(-2rem,3.5rem) rotate(-58deg); opacity: 1;}
    100%{ transform: translate(-2rem,3.5rem) rotate(-58deg); opacity: 0;}
}
@-webkit-keyframes light_01{
    0%{ -webkit-transform: translate(0,0) rotate(-58deg); opacity: 0;}
    20%{ opacity: 1;}
    40%{ opacity: 0;}
    60%{ opacity: 1;}
    90%{ -webkit-transform: translate(-2rem,3.5rem) rotate(-58deg); opacity: 1;}
    100%{ -webkit-transform: translate(-2rem,3.5rem) rotate(-58deg); opacity: 0;}
}

@-webkit-keyframes light_02{
   0%{ -webkit-transform: translateX(0); opacity: 0;}
   20%{ opacity: 1;}
   40%{ opacity: 0;}
   60%{ opacity: 1;}
   90%{ -webkit-transform: translateX(4rem); opacity: 1;}
   100%{ -webkit-transform: translateX(4rem); opacity: 0;}
}
@keyframes light_02{
   0%{ transform: translateX(0); opacity: 0;}
   20%{ opacity: 1;}
   40%{ opacity: 0;} 
   60%{ opacity: 1;}
   90%{ transform: translateX(4rem); opacity: 1;}
   100%{ transform: translateX(4rem); opacity: 0;}
}
@-webkit-keyframes light_03{
    0%{ -webkit-transform: translate(0,0) rotate(58deg); opacity: 0;}
    20%{ opacity: 1;}
    40%{ opacity: 0;}
    60%{ opacity: 1;}
    90%{ -webkit-transform: translate(-1.95rem,-3.4rem) rotate(58deg); opacity: 1;}
    100%{ -webkit-transform: translate(-1.95rem,-3.4rem) rotate(58deg); opacity: 0;}
}

@keyframes light_03{
    0%{ transform: translate(0,0) rotate(58deg); opacity: 0;}
    20%{ opacity: 1;}
    40%{ opacity: 0;}
    60%{ opacity: 1;}
    90%{ transform: translate(-1.95rem,-3.4rem) rotate(58deg); opacity: 1;}
    100%{ transform: translate(-1.95rem,-3.4rem) rotate(58deg); opacity: 0;}
}

.item_textLight{ position: absolute; display: block; width: .9rem; height: .4rem; background: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_1_5.png) no-repeat; background-size: cover; opacity: 0;}
.item_textLight_01{ top:2.19rem; left: .6rem; -webkit-animation:txt_light linear 5s infinite; animation:txt_light linear 5s infinite; }
.item_textLight_02{ top:3.63rem; left: 3rem; -webkit-animation:txt_light2 linear 5s infinite; animation:txt_light2 linear 5s infinite;}

@-webkit-keyframes txt_light{
   0%{-webkit-transform: translateX(0); opacity: 0;}
   70%{-webkit-transform: translateX(0); opacity: 0;}
   90%{-webkit-transform: translateX(.6rem); opacity: 1;}
   100%{-webkit-transform: translateX(.6rem); opacity: 0;}
}
@keyframes txt_light{
    0%{transform: translateX(0); opacity: 0;}
    70%{-webkit-transform: translateX(0); opacity: 0;}
    90%{transform: translateX(.6rem); opacity: 1;}
    100%{transform: translateX(.6rem); opacity: 0;}
}

@-webkit-keyframes txt_light2{
   0%{-webkit-transform: translateX(0); opacity: 0;}
   70%{-webkit-transform: translateX(0); opacity: 0;}
   90%{-webkit-transform: translateX(.8rem); opacity: 1;}
   100%{-webkit-transform: translateX(.8rem); opacity: 0;}
}
@keyframes txt_light2{
    0%{transform: translateX(0); opacity: 0;}
    70%{-webkit-transform: translateX(0); opacity: 0;}
    90%{transform: translateX(.8rem); opacity: 1;}
    100%{transform: translateX(.8rem); opacity: 0;}
}


.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: .59rem;left: 1.34rem;width: 2.67rem;height: 2.67rem;background:url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_2_1.png) no-repeat;background-size: 100% 100%;}
.slide_02 .item_02{position: absolute;z-index: 4;top: 3.36rem;left: 3.35rem;width: 2.67rem;height: 2.67rem;background:url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_2_2.png) no-repeat;background-size: 100% 100%;}
.slide_02 .item_03{position: absolute;z-index: 3;top: 6.25rem;left: 1.6rem;width: 2.52rem;height: 2.52rem;background:url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_2_3.png) no-repeat;background-size: 100% 100%;}
.slide_02 .item_04{position: absolute;z-index: 3;top: 8.77rem;left: 3.95rem;width: 2.49rem;height: 2.49rem;background:url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_2_7.png) no-repeat;background-size: 100% 100%;}
.slide_02 .item_01::after,
.slide_02 .item_02::after,
.slide_02 .item_03::after,
.slide_02 .item_04::after{ content: ""; position: absolute; top:-.07rem; left: -.07rem; width: 2.78rem; height: 2.78rem; background: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_2_bubble.png) no-repeat; background-size: cover; z-index: 3;}
.slide_02 .item_03::after,
.slide_02 .item_04::after{ top:-.1rem; left: -.1rem; width: 2.7rem; height: 2.7rem; background-image: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_2_bubbleSmall.png);}
.slide_02 .text{position: absolute; width:2.35rem; height:.66rem; background-repeat: no-repeat; background-size: cover; z-index: 2;}
.slide_02 .text.text_01{top: 1.6rem;left: 4.3rem; background-image: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_2_4_1.png);}
.slide_02 .text.text_02{top: 4.5rem;right: 4.55rem; background-image: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_2_5_1.png);}
.slide_02 .text.text_03{top: 7.4rem;left: 4.5rem; background-image: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_2_6_1.png);}
.slide_02 .text.text_04{top: 9.6rem;left: 1.22rem; background-image: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_2_8.png);}
.slide_02 .text span{ display: block; margin-top: .1rem; font-size: .2rem; color: #c194bb; letter-spacing: 0;}
.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,
.slide_02 .line_03{position: absolute;z-index: 2;width: 2.46rem;height: .06rem;background-color: rgba(161,98,234,.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: .6s;
        animation-duration: .6s;
-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: 5.2rem;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: .6s;
        animation-duration: .6s;
-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;
}
.slide_02 .line_03{top:7.5rem;left: 3rem;transform: rotate(55deg);-webkit-transform: rotate(55deg);}
.slide_02.swiper-slide-active .line_03{
-webkit-animation-name: line_03;
        animation-name: line_03;
-webkit-animation-duration: .6s;
        animation-duration: .6s;
-webkit-animation-delay: 3s;
        animation-delay: 3s;
-webkit-animation-timing-function:linear;
        animation-timing-function:linear;
-webkit-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
}
.slide_02 .item_01::after,
.slide_02 .item_02::after,
.slide_02 .item_03::after,
.slide_02 .item_04::after{
-webkit-animation-name: bubble;
        animation-name: bubble;
-webkit-animation-duration: 3s;
        animation-duration: 3s;
-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;
-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
}

@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 line_03{
    from{width: 0;transform: rotate(55deg);opacity: 1;}
    to{width: 2.46rem;transform: rotate(55deg);opacity: 1;}
}
@-webkit-keyframes line_03{
    from{width: 0;-webkit-transform: rotate(55deg);opacity: 1;}
    to{width: 2.46rem;-webkit-transform: rotate(55deg);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;}
}

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



.slide_03 .progress{position: absolute;z-index: 2;top: 1.68rem;left: 1.37rem;width: .18rem;height: 7.91rem;background: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/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: 3.8s;
        animation-duration: 3.8s;
-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: -.53rem;bottom: -.53rem;width: 1.3rem;height: 1.33rem;background:url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/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{ width:4.39rem; height: .42rem;margin-bottom: .68rem;padding:.05rem 0 0 .7rem;font-size: .3rem;color: #ffffff;text-align: left;background-repeat: no-repeat;background-size:4.39rem .42rem;}
.slide_03 .process_list .list:nth-child(1){background-image: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/icon_01.png);}
.slide_03 .process_list .list:nth-child(2){background-image: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/icon_02.png);}
.slide_03 .process_list .list:nth-child(3){background-image: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/icon_03.png);}
.slide_03 .process_list .list:nth-child(4){background-image: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/icon_04.png);}
.slide_03 .process_list .list:nth-child(5){background-image: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/icon_05.png);}
.slide_03 .process_list .list:nth-child(6){background-image: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/icon_06.png);}
.slide_03 .process_list .list:nth-child(7){background-image: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/icon_07.png);}
.slide_03 .process_list .list:nth-child(8){background-image: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/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_01{ position: absolute; top:2.52rem; left: .8rem; width: 5.9rem; height: 5.77rem;}
.slide_04 .item_01 img{ position: relative; width: 5.9rem; z-index: 2;}
.slide_04 .item_01::after,.slide_04 .item_01::before{ content: ""; position: absolute; width: 5.9rem; height: 5.77rem; border: .03rem #423b96b8 solid; z-index:0;}
.slide_04 .item_01::after{ top:-.1rem; left: -.3rem;}
.slide_04 .item_01::before{ top:.3rem; left: .2rem;}
.slide_04 .item_02{ position: absolute; top:9.35rem; left: 50%; margin-left: -2rem; width: 4.01rem; height: .77rem; background: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_4_2.png) no-repeat; 
text-align: center; font-size: .32rem; color: #76f1ff; background-size: cover;}
.slide_04 .item_02 img{ display: inline-block; margin-right: .05rem; width: .2rem;}
.slide_04 .item_02 span{ display: block; margin-top: .3rem; text-align: center; color: #fefefe;}
.slide_04 .item_03{position: absolute;z-index: 2;top: 4.86rem;left: 4.4rem;width: 1.78rem;height: .64rem;background: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_4_3.png) no-repeat;background-size: cover;}

.slide_05 .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_05 .item_01{position: absolute;z-index: 2;top: 4.2rem; left: .97rem; width:5.58rem;height: 3.89rem;background: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_5_1.png) no-repeat;
background-size: 100% 100%;transform-origin:center center;-webkit-transform-origin:center center;opacity: 0;}
.slide_05 .item_01::after,.slide_05 .item_01::before{ content: ""; position: absolute; width: 5.58rem; height: 3.89rem; border: .03rem #423b96b8 solid; z-index:0;}
.slide_05 .item_01::after{ top:-.1rem; left: -.3rem;}
.slide_05 .item_01::before{ top:.3rem; left: .2rem;}
.slide_05 .item_01 img{ position: relative; width:5.58rem;height: 3.89rem; z-index: 2;}
.slide_05 .item_02{position: absolute;z-index: 3;top:1rem;left: 50%; margin-left:-1.91rem; width:3.82rem;height: 2.34rem;background: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_1_1.png) no-repeat;background-size: 100% 100%;}
.slide_05 .item_03{position: absolute;z-index: 4;bottom: 3.57rem;left: 2.65rem;width: 2.08rem;height:.26rem;background: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_5_3.png) no-repeat;background-size: 100% 100%;}
.slide_05 .item_04{position: absolute;z-index: 4;top: 9.3rem;left: 1.78rem;width: 3.89rem;height: .82rem;background: url(//png.pookcdn.net/puic-net/net/share/chinajoy/2018/page_5_4.png) no-repeat;background-size: 100% 100%;}
.slide_05 .text_01,
.slide_05 .text_02,
.slide_05 .text_03,
.slide_05 .text_04{position: absolute;left: 0;width: 100%;text-align: center;}
.slide_05 .text_04{z-index: 2;top: 10.8rem;font-size: .22rem;color: #734d76;}

/*.slide_05.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_05.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);}
}



.snow_con{ position: absolute; left: 50%; width: 2.5rem; margin-left: -1.25rem;z-index: 1;}
.snow_con.top{ top: 0; }
.snow_con.bottom { bottom: -.4rem; transform: rotate(180deg);-webkit-transform: rotate(180deg);}

.drop { position: absolute; top: 0;	z-index: -1; opacity: 0;}
.snow { height: .03rem; width: .03rem; border-radius: 50%; background-color: #FFE7C2; box-shadow: 0 0 .04rem #FAA870;}
.animateLeft {
-webkit-animation: fallingLeft 10s infinite cubic-bezier(.16,.08,.85,.39),snow 5s linear infinite;	
	animation: fallingLeft 10s infinite cubic-bezier(.16,.08,.85,.39),snow 5s linear infinite;	
}

.animateRight {
-webkit-animation: fallingRight 10s infinite ease-in,snow 5s linear infinite;	
	animation: fallingRight 10s infinite ease-in,snow 5s linear infinite;	
}

.animateBottom{
-webkit-animation: fallingBottom 7s infinite ease-in,snow 5s linear infinite;	
	animation: fallingBottom 7s infinite ease-in,snow 5s linear infinite;	
}

@-webkit-keyframes fallingLeft {
	0% { transform: translate(0);}
	100% { transform: translate(-1.2rem, 1.6rem); opacity: 0}
}
@keyframes fallingLeft {
	0% { transform: translate(0);}
	100% { transform: translate(-1.2rem, 1.6rem); opacity: 0}
}

@-webkit-keyframes fallingRight {
	0% { transform: translate(0);}
	100% { transform: translate(1.2rem, 1.6rem); opacity: 0}
}
@keyframes fallingRight {
	0% { transform: translate(0);}
	100% { transform: translate(1.2rem, 1.6rem); opacity: 0}
}

@-webkit-keyframes fallingBottom {
	0% { transform: translateY(0);}
	100% { transform: translateY(1.6rem); opacity: 0}
}
@keyframes fallingBottom {
	0% { transform: translateY(0);}
	100% { transform: translateY(1.6rem); opacity: 0}
}

@-webkit-keyframes snow {
	0% { opacity: 1;}
	50% {  opacity: 0;}
	100% {  opacity: 1;}
}
@keyframes snow {
	0% { opacity: 1;}
	50% {  opacity: 0;}
	100% {  opacity: 1;}
}

@-webkit-keyframes bounceInDownMin {
    0%,
    100%,
    60%,
    75%,
    90% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0)
    }
    /*75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }*/
    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInDownMin {
    0%,
    100%,
    60%,
    75%,
    90% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100px, 0);
        -ms-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 15px, 0);
        -ms-transform: translate3d(0, 15px, 0);
        transform: translate3d(0, 15px, 0)
    }
    /*75% {
        -webkit-transform: translate3d(0, -10px, 0);
        -ms-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        -ms-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }*/
    100% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

.bounceInDownMin {
    -webkit-animation-name: bounceInDownMin;
    animation-name: bounceInDownMin
}

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

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

.bounceInMax {
    -webkit-animation-name: bounceInMax;
    animation-name: bounceInMax;
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}