@charset "utf-8";
/* CSS Document */
*{-webkit-text-size-adjust:100%; font-size:28px; outline:none; font-family:"Microsoft YaHei"; margin:0; padding:0;}
*:focus{outline:none;}
body, button, input, select, textarea { font-size: 100%; margin:0 auto; font-family:"微软雅黑";}
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, th, td, p, blockquote, pre, form, fieldset, legend, input, button, textarea, hr { margin: 0; padding: 0;}
table { border-collapse: collapse; border-spacing: 0; }
li { list-style: none; }
fieldset, img { border: 0; vertical-align: top;}
q:before, q:after { content: ''; }
input, textarea { outline-style: none; font-size:100%;}
input[type="text"], input[type="password"] {vertical-align:middle; }
input[type="text"], input[type="password"], textarea { outline-style: none; -webkit-appearance: none; }
textarea { resize: none;  font-size:100%;}
address, caption, cite, code, dfn, em, i, th, var { font-style: normal; font-weight: normal; }
strong,b{font-weight: normal;}
abbr, acronym { border: 0; font-variant: normal;}
ul{ list-style:none; overflow:hidden;}
a{ outline:none; text-decoration:none; display:inline-block; border:none; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0);}
body{ overflow-y:hidden;}

/*公用样式*/
.wrapBox{ width:100%; max-width:750px; height: 100%; margin:0 auto; position:relative; display:block; background: #034402;}
.wrapBox img{ width:100%;}
.section{ position:relative; width:100%; height: 100%; overflow:hidden;}
.slide{ width:100%; height: 100%; position:relative; margin:0 auto;}
.slide img{ width:100%;}
.slide .common_bg{ width: 100%; height: 100%;}
.slide .logo1{ width: 139px; height: 42px; position: absolute; top: 49px; left: 41px; background: url(../images/logo1.png) no-repeat;}
.slide .logo2{ width: 62px; height: 62px; position: absolute; top: 40px; right: 34px; background: url(../images/logo2.png) no-repeat;}
.slide .bottom{ width: 750px; height: 272px; position: absolute; bottom: 0; left: 0; background: url(../images/footer.png) no-repeat;}
.slide .question_word{ color: #ffffff; font-size: 34px; height: auto; left: 75px; line-height: 48px; position: absolute; top: 205px; width: 600px;}
.slide .question_word.change_box{ text-align: center;}
.slide .answer_box{ width: 570px; height: 460px; padding: 20px 15px; background: #ffffff; position: absolute; top: 330px; left: 75px; border: none; font-size: 30px; line-height: 42px; color: #333333;}
.slide .next_btn{ width: 208px; height: 73px; position: absolute; top: 880px; right: 145px; background: url(../images/next_btn.png) no-repeat;}
.slide .prev_btn{ width: 208px; height: 73px; position: absolute; top: 880px; left: 145px; background: url(../images/prev_btn.png) no-repeat;}
.slide .success_word{ width: 100%; height: auto; position: absolute; top: 460px; left: 0; text-align: center; font-size: 46px; color: #ffffff; font-weight: bold; line-height: 72px;}

/*问题页面*/
/*第一屏*/
.question_slide1 .prev_btn{ display: none;}
.question_slide1 .next_btn{ left: 271px;}

.question_slide4 .answer_box{ top: 370px;}
.question_slide4 .next_btn{ top: 910px;}
.question_slide4 .prev_btn{ top: 910px;}

.question_slide5 .next_btn{ display: none;}
.question_slide5 .up_btn{ width: 208px; height: 73px; position: absolute; top: 880px; right: 145px; background: url(../images/upload_btn.png) no-repeat;}

/*邀请函页面*/
.section .common_bg{ width: 100%; height: 100%;}
.section .logo1{ width: 18.53%; height: 42px; position: absolute; top: 4%; left: 5.46%; background: url(../images/logo1.png) no-repeat; background-size: 100% 100%;}
.section .logo2{ width: 8.26%; height: 62px; position: absolute; top: 3.31%; right: 4.53%; background: url(../images/logo2.png) no-repeat; background-size: 100% 100%;}
.section .bottom{ width: 100%; height: 22.55%; position: absolute; bottom: 0; left: 0; background: url(../images/footer.png) no-repeat; background-size: 100% 100%;}
/*第一页*/
.section1 .index_title{ width: 462px; height: 104px; position: absolute; top: 240px; left: 223px; background: url(../images/index_title.png?test=1) no-repeat;}
.section1 .index_time{ font-weight: 28px; color: #ffffff; position: absolute; top: 410px; left: 330px;}
.section1 .index_line{ width: 750px; height: 749px; position: absolute; bottom: 0; left: 0; background: url(../images/index_line.png) no-repeat;}
.section1 .index_noodle{ width: 750px; height: 606px; position: absolute; bottom: 52px; left: 0; background: url(../images/index_noodle.png) no-repeat;}

.section.active .index_title{ animation: bounceInRight 1.2s ease 0.6s both; -webkit-animation: bounceInRight 1.2s ease 0.6s both;}
.section.active .index_time{ animation: bounceInRight 1.2s ease 1.2s both; -webkit-animation: bounceInRight 1.2s ease 1.2s both;}
.section.active .index_noodle{ animation: fadeInUp 1.2s ease 2s both; -webkit-animation: fadeInUp 1.2s ease 2s both;}

/*第二页*/
.section2 .second_title{ width: 100%; height: auto; position: absolute; top: 145px; left: 0; text-align: center; font-weight: bold; font-size: 52px; color: #ffffff; letter-spacing: 2px;}
.section2 .second_word{ width: 616px; font-size: 25px; color: #ffffff; position: absolute; top: 237px; left: 68px; line-height: 46px;}
.section2 .second_word p{ text-indent: 2em; font-size: 25px;}
.section2 .second_word p span{ font-weight: bold;}
.section2 .second_tips{ width: 633px; height: 208px; position: absolute; top: 766px; left: 66px; background: url(../images/tip_bg.png) no-repeat;}
.section2 .tips_word{ font-size: 21px; color: #ffffff; line-height: 28px; float: left; margin: 20px 0 0 110px;}

.section.active .second_title{ animation: showUp 0.6s ease 0.6s both; -webkit-animation: showUp 0.6s ease 0.6s both;}
.section.active .second_word{ animation: showUp 0.6s ease 1.2s both; -webkit-animation: showUp 0.6s ease 1.2s both;}
.section.active .second_tips{ animation: showUp 0.6s ease 1.8s both; -webkit-animation: showUp 0.6s ease 1.8s both;}

/*第三页*/
.section3 .time_title{ width: 100%; height: auto; position: absolute; top: 145px; left: 0; text-align: center; font-weight: bold; font-size: 52px; color: #ffffff; letter-spacing: 2px;}
.section3 .time_word{ width: 616px; font-size: 22px; color: #ffffff; position: absolute; top: 237px; left: 68px; line-height: 31px;}
.section3 .time_word span{ width: 65px; height: 20px; float: left;}
.section3 .time_list{ width: 622px; height: auto; position: absolute; top: 345px; left: 64px;}

.section.active .time_title{ animation: showUp 0.6s ease 0.6s both; -webkit-animation: showUp 0.6s ease 0.6s both;}
.section.active .time_word{ animation: showUp 0.6s ease 1.2s both; -webkit-animation: showUp 0.6s ease 1.2s both;}
.section.active .time_list{ animation: showUp 0.6s ease 1.8s both; -webkit-animation: showUp 0.6s ease 1.8s both;}


/*第四页*/
.section4 .code_box{ width: 510px; height: 510px; position: absolute; top: 240px; left: 120px; background: #ffffff; -webkit-transform:rotate(0deg) scale(0);}
.section4 .code_box img{ width: 466px; height: auto; padding: 22px; float: left;}
.section4 .code_word{ font-size: 32px; color: #ffffff; width: 100%; height: auto; text-align: center; position: absolute; top: 800px; left: 0; line-height: 54px;}
.section4 .code_bg{ width: 1500px; height: auto; position: absolute; top: 0; left: 0;}

.section.active .code_box{ animation: showAround 1.2s ease 0.6s both; -webkit-animation: showAround 1.2s ease 0.6s both;}
.section.active .code_word{ animation: showUp 0.6s ease 1.8s both; -webkit-animation: showUp 0.6s ease 1.8s both;}

.fell_down{ width:74px; height:auto; position:fixed; left:338px; bottom:132px; z-index:1;}
.fell_down img{ width: 100%;}
.fadeInDown{
    -webkit-animation:fadeInDown 1s .2s ease infinite both; 
    -moz-animation:fadeInDown 1s .2s ease infinite both;
}

/*音乐播放*/
.play{ -webkit-transform-origin:center center; transform-origin:center center; animation:2s linear 0s normal none infinite runAround; -webkit-animation:2s linear 0s normal none infinite runAround;}
.play_btn{ width:68px; height:auto; position:absolute; right:34px; bottom:10.2%;}
.play_btn img{ width:100%; height:auto;}
@-webkit-keyframes runAround {
    from{-webkit-transform:rotate(0deg)}
    to{-webkit-transform:rotate(360deg)}
}
@keyframes runAround { 
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

/* Down */
@-webkit-keyframes fadeInDown{
    0%{ opacity:0; -webkit-transform:translateY(20px)}
    100%{ opacity:1; -webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInDown{
    0%{ opacity:0; -moz-transform:translateY(20px)}
    100%{ opacity:1; -moz-transform:translateY(0)}
}

@keyframes bounceInRight {
    0%, 100%, 60%, 75%, 90% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(3000px, 0px, 0px);
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0px, 0px);
    }
    75% {
        transform: translate3d(20px, 0px, 0px);
    }
    90% {
        transform: translate3d(-5px, 0px, 0px);
    }
    100% {
        transform: none;
    }
}
@-webkit-keyframes bounceInRight {
    0%, 100%, 60%, 75%, 90% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0px, 0px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0px, 0px);
    }
    75% {
        -webkit-transform: translate3d(20px, 0px, 0px);
    }
    90% {
        -webkit-transform: translate3d(-5px, 0px, 0px);
    }
    100% {
        -webkit-transform: none;
    }
}


/* Up */
@-webkit-keyframes fadeInUp{
    0%{ opacity:0; -webkit-transform:translateY(125px)}
    100%{ opacity:1; -webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInUp{
    0%{ opacity:0; -moz-transform:translateY(125px)}
    100%{ opacity:1; -moz-transform:translateY(0)}
}

/*透明度*/
@-webkit-keyframes talkshow{
    0%{ opacity:0;}
    100%{ opacity:1;}
}
@-moz-keyframes talkshow{
    0%{ opacity:0;}
    100%{ opacity:1;}
}

/* ShowUp */
@-webkit-keyframes showUp{
    0%{ opacity:0; -webkit-transform:translateY(25px)}
    100%{ opacity:1; -webkit-transform:translateY(0)}
}
@-moz-keyframes showUp{
    0%{ opacity:0; -moz-transform:translateY(25px)}
    100%{ opacity:1; -moz-transform:translateY(0)}
}

/*旋转出*/
@-webkit-keyframes showAround {
    0{ -webkit-transform:rotate(0deg) scale(0);}
    100%{ -webkit-transform:rotate(360deg) scale(1);}
}
@-moz-keyframes showAround { 
    0{ transform:rotate(0deg) scale(0);}
    100%{ transform:rotate(360deg) scale(1);}
}