@charset "UTF-8";
/**
 * 
 * @authors zhou(shengxue@mafengwo.com)
 * @date    2016-08-25 14:48:34
 * @version $Id$
 */
html{font-size:62.5%;height:100%;}
header{display:none;}
*{margin:0;padding:0;}
*,*:before,*:after{box-sizing:border-box;}
.container{width:100%;min-height:100%;position:absolute;left:50%;top:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);overflow:hidden;}
body{width:100%;background:#17162a url(/mobile/images/activity/plan-c9/bg.jpg) no-repeat;background-attachment:fixed;background-size:cover;-webkit-transform:translate3d(-50%,-50%,0) rotate(90deg);transform:translate3d(-50%,-50%,0) rotate(90deg);position:absolute;left:50%;top:50%;}
.horizontal-screen{-webkit-transform:translate3d(0,0,0) rotate(0);transform:translate3d(0,0,0) rotate(0);position:static;left:auto;top:auto;}
.horizontal-screen .container{position:relative;left:0;top:0;-webkit-transform:translate(0,0);transform:translate(0,0);}
.section{position:relative;}
.person{-webkit-animation:animBg .5s steps(2) 0s infinite;animation:animBg .5s steps(2) 0s infinite;cursor:pointer;}
.person .b-pop{position:absolute;background:url(/mobile/images/activity/plan-c9/bubble.png) no-repeat;display:none;background-size:150px auto;}
.person .b-dot{position:absolute;top:0;width:23px;height:20px;background:url(/mobile/images/activity/plan-c9/anim-dot.png) no-repeat 0 0;-webkit-animation:animBg 1s steps(4) 0s infinite;animation:animBg 1s steps(4) 0s infinite;cursor:pointer;background-size:23px auto;}
.sec-preface .person .b-dot{left:50px;}
.sec-preface .b-pop{left:-10px;top:-70px;width:110px;height:84px;background-position:0 0;}
.sec-detail .b-dot{left:70px;top:0;}
.sec-detail .b-pop{left:0px;top:-105px;width:150px;height:115px;background-position:0 -85px;}
.sec-notice .b-dot{left:90px;top:5px;}
.sec-notice .b-pop{left:-10px;top:-100px;width:128px;height:100px;background-position:0 -200px;}
.sec-preface .person{position:absolute;z-index:5;right:5%;top:15%;width:85px;height:170px;background:url(/mobile/images/activity/plan-c9/anim-person1.png) no-repeat;background-size:85px auto;}
.sec-detail .person{position:absolute;z-index:6;left:0;top:200px;width:93px;height:165px;background:url(/mobile/images/activity/plan-c9/anim-person2.png) no-repeat;background-size:93px auto;}
.sec-notice .person{position:absolute;top:15px;right:-15px;width:102px;height:179px;background:url(/mobile/images/activity/plan-c9/anim-person3.png) no-repeat 0 0;background-size:102px auto;}


.sec-first{height:100%;overflow:hidden;}
.center{text-align:center;position:absolute;left:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);}
.sec-first .arrow{position:absolute;bottom:10px;left:50%;width:27px;height:20px;margin-left:-14px;background:url(/mobile/images/activity/plan-c9/sprites.png) no-repeat 0 -20px;background-size:400px auto;-webkit-animation:float 1s linear 0s infinite;animation:float 1s linear 0s infinite;}
.party-logo{margin:3% auto 1%;width:297px;height:235px;background:url(/mobile/images/activity/plan-c9/anim-logo.png) no-repeat;background-size:297px auto;-webkit-animation:animBg 1s steps(2) 0s infinite;animation:animBg 1.2s steps(2) 0s infinite;}
.mfw-logo{margin:0 auto;width:112px;height:16px;background:url(/mobile/images/activity/plan-c9/sprites.png) no-repeat;background-size:400px auto;}
.sec-preface{height:100%;text-align:center;}
.sec-preface .text{margin-top:23px;display:inline-block;width:357px;height:201px;background:url(/mobile/images/activity/plan-c9/preface.png) no-repeat;background-size:357px auto;position:relative;z-index:2;}
.sec-preface .unknown{display:block;margin-top:55px;height:87px;background:url(/mobile/images/activity/plan-c9/dontunknown.png) no-repeat center top;background-size:auto 100%;}
.sec-preface .planet{position:absolute;left:10%;bottom:10%;width:112px;height:114px;background:url(/mobile/images/activity/plan-c9/planet1.png) no-repeat 0 0;background-size:112px auto;z-index:-1;}

.sec-process{padding:45px 0 50px;}
.sec-process .title{height:100px;background:url(/mobile/images/activity/plan-c9/process-title.png) no-repeat center top;background-size:contain;}
.pro-detail{margin:0 auto;width:400px;height:250px;background:url(/mobile/images/activity/plan-c9/process-line.png) no-repeat center 5px;position:relative;background-size:auto 240px;}
.pro-detail div{position:absolute;background:url(/mobile/images/activity/plan-c9/process-sprites.png) no-repeat;background-size:500px auto;}
.section.active .pro-detail div{-webkit-animation:lightSpeedIn .5s ease-out 0s forwards;animation:lightSpeedIn .5s ease-out 0s forwards;}
.section .pro-detail div.s1{left:80px;top:9px;width:105px;height:15px;background-position:0 0;}
.section .pro-detail div.s2{left:135px;top:52px;width:200px;height:15px;background-position:-105px 0;-webkit-animation-delay:.2s;animation-delay:.2s;}
.section .pro-detail div.s3{left:-65px;top:35px;width:140px;height:25px;background-position:0 -15px;-webkit-animation-delay:.4s;animation-delay:.4s;}
.section .pro-detail div.s4{left:-80px;top:90px;width:80px;height:25px;background-position:-140px -15px;-webkit-animation-delay:.6s;animation-delay:.6s;}
.section .pro-detail div.s5{left:55px;top:130px;width:75px;height:25px;background-position:-230px -15px;-webkit-animation-delay:.8s;animation-delay:.8s;}
.section .pro-detail div.s6{left:150px;top:90px;width:220px;height:12px;background-position:-230px -55px;-webkit-animation-delay:1s;animation-delay:1s;}
.section .pro-detail div.s7{left:255px;top:140px;width:100px;height:28px;background-position:-305px -15px;-webkit-animation-delay:1.2s;animation-delay:1.2s;}
.section .pro-detail div.s8{left:30px;top:198px;width:120px;height:25px;background-position:0 -43px;-webkit-animation-delay:1.4s;animation-delay:1.4s;}
.section .pro-detail div.s9{left:250px;top:215px;width:68px;height:14px;background-position:-230px -43px;-webkit-animation-delay:1.6s;animation-delay:1.6s;}
.section .pro-detail div.s10{left:380px;top:190px;width:75px;height:28px;background-position:-140px -43px;-webkit-animation-delay:1.8s;animation-delay:1.8s;}

.sec-detail{margin-bottom:30px;height:710px;}
.sec-detail .text-con{position:relative;padding-top:80px;text-align:center;z-index:4;}
.sec-detail dl{margin-bottom:15px;font-size:14px;color:#faf7d8;line-height:20px;}
.sec-detail dt{margin-bottom:5px;font-size:15px;color:#f07938;}
.sec-detail .t-tips{margin-bottom:5px;opacity:.4;display:inline-block;}
.sec-detail .title{position:absolute;top:10px;right:20%;width:161px;height:100px;background:url(/mobile/images/activity/plan-c9/detail-title.png) no-repeat 0 0;background-size:161px auto;-webkit-animation:float 2s linear 0s infinite;animation:float 2s linear 0s infinite;}
.sec-detail .planet{position:absolute;left:50%;top:100px;width:93px;height:90px;-webkit-animation:rotate 100s linear 0s infinite;animation:rotate 100s linear 0s infinite;z-index:-1;}
.sec-detail .planet:after{content:'';position:absolute;top:-200px;right:-200px;display:block;width:93px;height:90px;background:url(/mobile/images/activity/plan-c9/planet2.png) no-repeat 0 0;background-size:93px auto;}

.sec-notice{width:441px;margin:0 auto 55px;font-size:12px;line-height:18px;color:#faf7d8;}
.notice-con{margin-bottom:8px;height:155px;background:url(/mobile/images/activity/plan-c9/notice-bg.png) no-repeat 0 0;color:#494949;background-size:auto 155px;}
.notice-con div{padding:48px 50px 0 17px;}
.notice-con div span{color:#f07938;}
.notice-con + p{padding-left:17px;}

.sec-apply{padding-bottom:40px;text-align:center;}
.sec-apply .btn{display:inline-block;width:172px;height:46px;background:url(/mobile/images/activity/plan-c9/sprites.png) no-repeat 0 -45px;background-size:400px auto;overflow:hidden;line-height:400px;vertical-align:top;}
.sec-apply .planet{position:absolute;left:20%;bottom:-30px;width:82px;height:82px;background:url(/mobile/images/activity/plan-c9/planet3.png) no-repeat;background-size:82px auto;}
.empty{height:1900px;}
@media screen and (max-width:560px){
    .pro-detail,.sec-process .title{transform:scale(.9);}
}
@keyframes float{
	from,to{transform:translate(0,0);}
	25%{transform:translate(0,5px);}
	75%{transform:translate(0,-5px);}
}
@-webkit-keyframes rotate{
	from{-webkit-transform:rotate(0deg);}
	to{-webkit-transform:rotate(360deg);}
}
@-webkit-keyframes animBg{
	from{background-position:0 0;}
	to{background-position:0 100%;}
}
@keyframes animBg{
	from{background-position:0 0;}
	to{background-position:0 100%;}
}
@-webkit-keyframes rotate{
	from{-webkit-transform:rotate(0deg);}
	to{-webkit-transform:rotate(360deg);}
}
@keyframes rotate{
	from{transform:rotate(0deg);}
	to{transform:rotate(360deg);}
}

@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }
    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }
    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}