@charset "utf-8";
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}
html{ max-width:640px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; font-size:50px; line-height:1.5em; color:#212121;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none; touch-callout:none;
}
html , body , .page_box{ width:100%; height:100%; position:relative; overflow:hidden;}
.page{ background:url(data:image/jpg;base64,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) repeat-y; background-size:100%;}
.page{  justify-content:center; align-items:center; width:100%; height:100%; position:absolute; left:0; top:0; overflow:hidden;}
.page.hide{ display:none;}
.preface { background: url(../img/sjbn-bg.png) no-repeat; padding-top: 264px; background-size: cover;}
.video { background: url(../img/sjbn-video-bg.png) no-repeat; background-size: cover;}
.ques { background: url(../img/sjbn-qBG.png) no-repeat; background-size: cover;}
.share { background: url(../img/sjbn-sharebg.jpg) no-repeat; padding-top: 160px; background-size: cover;}
/* .letter { background: url(../img/sjbn-qBG.png) no-repeat center; background-size: cover;} */
.letter { background: url(../img/sjbn-bg2.jpg) no-repeat top center; background-size: cover;}
.preface>div>div { float: left;}
.page .top { background: url(../img/sjbn-top.png) no-repeat; width: 100%; height: 470px; position: absolute; top: 0;left: 0;}
/* .preface .xr { background: url(../img/sjbn-xr.png) no-repeat; width: 135px; height: 65px; margin-left: 53px;}
.preface .sjsz { background: url(../img/sjbn-sjsz.png) no-repeat; width: 399px; height: 85px; margin-top: -20px; margin-bottom: 75px;} */
.preface .szsjsz { background: url(../img/sjbn-szsjsz.png) no-repeat; width: 579px; height: 81px; margin-left: 30px;margin-bottom: 80px;}
.preface .xn { background: url(../img/sjbn-xn.png) no-repeat; width: 150px; height: 72px; margin-left: 53px;}
.preface .bn { background: url(../img/sjbn-bn.png) no-repeat; width: 266px; height: 295px; margin-top: -70px;}
.preface .l { background: url(../img/sjbn-l.png) no-repeat; width: 99px; height: 71px;}
/* .preface .m { background: url(../img/sjbn-m.png) no-repeat; width: 115px; height: 75px;} */
.preface .btn { background: url(../img/sjbn-btn.png) no-repeat; width: 218px; height: 70px; position: absolute; top: 650px; left: -109px; margin-left: 50%;}
.preface .getC { background: url(../img/sjbn-hqhk.png) no-repeat; width: 140px; height: 30px; position: absolute; left: -70px; margin-left: 50%; top: 735px;}
.page .bottom { background: url(../img/sjbn-share-bottom.png) no-repeat; width: 100%; height: 227px; position: absolute; bottom: 0; left: 0; z-index: 0;}
.preface .bottom ,.video .bottom { background: url(../img/sjbn-p12-bottom.png) no-repeat; height: 240px;}
.page .firework { background: url(../img/sjbn-firework1.png) no-repeat transparent; width: 93px; height: 96px; position: absolute;}
.preface .firework1 {left: 320px; top: 165px;}
.preface .firework2 { top: 507px; left: 185px; width: 50px; height: 50px; background-size: 50px;}
.preface .firework3 { top: 362px; left: 453px; width: 50px; height: 50px; background-size: 50px;}
.page .cloud { background: url(../img/sjbn-cloud.png) no-repeat transparent; width: 114px; height: 29px; position: absolute;}
.page .cloud1 { right: 25px; top: 232px;}
.page .cloud2 { left: 0px; top: 550px; background-size: 146px; width: 146px; height: 43px;}
.video{ display:block; background-color: black; padding: 42.53vw 11.88vw;}
.video video { width: 600px; height: 337.5px; position: absolute; left: -300px; margin-left: 50%;top: 370px;z-index:99999;}
.video .cloud2 { left: -42px; top: 485px; z-index: -1;}
.video .firework1 { right: 196px; top: 150px;}
.video .firework2 { right: 265px; top: 194px; width: 50px; height: 50px; background-size: 50px;}
.video .firework3 { left: 43px; top: 380px; z-index: -1; width: 50px; height: 50px; background-size: 50px;}
.video .intro { background: url(../img/sjbn-intro.png) no-repeat; width: 299px; height: 94px; margin: auto;}
.video .enter { background: url(../img/sjbn-enter.png) no-repeat; width: 215px; height: 67px; position: absolute; bottom: 50px; margin-left: 50%; left: -107.5px;}
.video .title { background: url(../img/sjbn-video-title.png) no-repeat; width: 502px; height: 96px; left: -251px; margin-left: 50%; position: absolute; top: 233px;}

/* .share .swsz { background: url(../img/sjbn-swsz.png) no-repeat; height: 70px; width: 498px; margin: auto;} */
.share .szsjsz1 { background: url(../img/sjbn-share-szsjsz.png) no-repeat; width: 501px; height: 70px; margin: auto;background-size: 501px;}
.share .sharePic { background: url(../img/sjbn-share.png) no-repeat; width: 380px; height: 380px; position: absolute; top: 280px; left: -190px; margin-left: 50%;z-index: 0;}
.share .to { height: 35px; font-size: 37.64px; margin-top: 1vw; color: rgb(255, 238, 194); text-align: center; width: 100%; position: absolute; z-index: 1; font-weight: bold;}
.share .cloud,.share .firework { z-index: 1;}
.share .cloud1 { right: 60px; top: 417px;}
.share .cloud2 { left: -25px; top: 479px;}
.share .firework1 { right: 196px; top: 102px; width: 50px; height: 50px; background-size: 50px;}
.share .firework2 { right: -50px; top: 237px;}
.share .firework3 { right: 180px; top: 312px;}
.share .firework4 { left: -50px; top: 385px;}
.share .firework5 { right: 39px; top: 489px; width: 50px; height: 50px; background-size: 50px;}
.share .qrcode { background: url(../img/sjbn-qrcode.png) no-repeat bottom; width: 155px; height: 166px;position: absolute; margin-left: 50%; left: -77.5px; top: 760px;font-size: 12px;line-height: 20px; text-align: center;color: #950c16;}
.share .people { width: 141px; position: absolute; bottom: 0;z-index: 2;}
.share .sj { background: url(../img/sjbn-sj.png) no-repeat; height: 391px; left: 39px;}
.share .sz { background: url(../img/sjbn-sz.png) no-repeat; height: 378px; right: 44px; background-size: 160px}
.share .text { background: url(../img/sjbn-share-text.png) no-repeat; width: 469px; height: 88px; position: absolute;top: 650px;left: -234.5px; margin-left: 50%;}
.share .bottom { background: url(../img/sjbn-share-bottom.png) no-repeat; width: 100%; height: 239px;}
.share .btn { /*background: url(../img/sjbn-letter-btn.png?v1) no-repeat; */width: 272px; height: 66px;position: absolute;top: 752px;left: -136px; margin-left: 50%;}
.share>div>div { z-index: 1;}
.share p {
	text-align: center;
    position: absolute;
    width: 100%;
    top: calc(582px + 21%);
    font-size: 30px;
    color: #fee9bb;
}


.letter .title { background: url(../img/sjbn-letter-tit.png) no-repeat; width: 433px; height: 118px; margin-left: 50%;position: absolute; left: -216.5px; top: 185px;}
.letter .bdbox { display: flex; flex-flow: column; -ms-flex-flow: column;width: 560px; height: calc(100vh - 512px); position: absolute;top: 220px; left: -280px; margin-left: 50%;}
.letter .bdbox .bd { width: 460px;height: 46px; position: absolute; margin-left: 50%; left: -230px;}
.letter .bdbox .bd-top { background: url(../img/sjbn-xk-top.png) no-repeat; top: 0;}
.letter .bdbox .bd-mid { /*background: url(../img/sjbn-xk-mid.png) repeat-y;*/top: 46px; height: calc(100vh - 580px); padding-left: 38px; padding-right: 38px; overflow: auto;}
.letter .bdbox .bd-mid .letterBox { font-size: 25px; color: #713030; position: relative; line-height: 50px;}
.letter .bdbox .bd-mid .letterBox p { text-indent: 50px;text-align: justify;}
.letter .bdbox .bd-mid .letterBox p b{ color:#d02727; font-weight: normal;}
.letter .bdbox .bd-mid .letterBox :nth-child(1) { text-align: left; text-indent: 0;}
.letter .bdbox .bd-mid .letterBox :nth-child(2) { text-align: justify;text-indent: 50px;}
.letter .bdbox .bd-mid .letterBox :nth-last-child(1) { text-align: right;}
.letter .bdbox .bd-mid .letterBox :nth-last-child(2) { text-align: right;}
.letter .bdbox .bd-mid .letterBox :nth-last-child(3) { text-align: right;}
.letterBox span {text-align: justify;
    width: 230px;
    display: inline-block;
    text-align-last: justify;}

.letter .bdbox .bd-btm { background: url(../img/sjbn-xk-bottom.png) no-repeat; bottom: 0;}
.letter .letter-btn { background: url(../img/sjbn-letter-btn.png) no-repeat; width: 272px; height: 66px; position: absolute; bottom: 35px; left: -136px; margin-left: 50%;}
.letter .bdbox .bd-mid #mask {display: none;}

.yearimg{ width:582px; height:582px; position:absolute; left:50%; margin-left:-291px; margin-top:18%;}
/* .yearimg ul li{} */
.yearimg img{
	display:block; width:190px; height:190px; margin:2px; background:#999; overflow:hidden; float:left;
	object-fit: cover;
}

.ques>div>div { position: absolute;}
.ques .opt { z-index: 1;}
.ques .opt>span { display: none;}
.ques .next { background: url(../img/sjbn-next.png) no-repeat ; height: 56px; width: 257px; top: 888px; margin-left: 50%; left: -128.5px;}
.ques .chosen { background: url(../img/sjbn-chosen.png) no-repeat; display: none;}
.ques .on { display: block;}
.ques #submit { background: url(../img/sjbn-submit.png) no-repeat;}
.Q15 .bg { background: url(../img/sjbn-q15-bg.png) no-repeat; height: 244px; width: 393px; left: 0; top: 509px;}
.Q15 .que { background: url(../img/sjbn-q15-que.png) no-repeat; height: 78px; width: 628px; top: 262px; left: -314px; margin-left: 50%;}
.Q15 .opt1 { background: url(../img/sjbn-q15-opt1.png) no-repeat; height: 84px; width: 443px; margin-left: 50%; left: -221.5px; top: 363px;}
.Q15 .opt2 { background: url(../img/sjbn-q15-opt2.png) no-repeat; height: 83px; width: 238px; right: 24px; top: 525px;}
.Q15 .opt3 { background: url(../img/sjbn-q15-opt3.png) no-repeat; height: 82px; width: 306px; right: 48px; top: 707px;}
.Q15 .chosen1 { height: 76px; width: 489px; margin-left: 50%; left: -244.5px; top: 363px;}
.Q15 .chosen2 { height: 58px; width: 289px; right: 0; top: 545px; background-size: 289px 58px;}
.Q15 .chosen3 { height: 58px; width: 300px; right: 48px; top: 730px; background-size: 300px 58px;}

.Q14 .bg { background: url(../img/sjbn-q14-bg.png) no-repeat; height: 244px; width: 393px; left: 0; top: 509px;}
.Q14 .que { background: url(../img/sjbn-q14-que.png) no-repeat; height: 78px; width: 628px; top: 262px; left: -314px; margin-left: 50%;}
.Q14 .opt { height: 88px; width: 68px; right: 104px;}
.Q14 .opt1 { background: url(../img/sjbn-q14-opt1.png) no-repeat; top: 398px;}
.Q14 .opt2 { background: url(../img/sjbn-q14-opt2.png) no-repeat; top: 551px;}
.Q14 .opt3 { background: url(../img/sjbn-q14-opt3.png) no-repeat; top: 707px;}
.Q14 .chosen { height: 84px; width: 176px; right: 60px; background-size: 171px 79px;}
.Q14 .chosen1 { top: 405px;}
.Q14 .chosen2 { top: 556px;}
.Q14 .chosen3 { top: 712px;}

.Q13 .bg { background: url(../img/sjbn-q13-bg.png) no-repeat; height: 365px; width: 393px; left: 9px; top: 438px;}
.Q13 .que { background: url(../img/sjbn-q13-que.png) no-repeat; height: 92px; width: 628px; top: 262px; left: -314px; margin-left: 50%;}
.Q13 .opt { height: 87px; width: 136px; right: 71px;}
.Q13 .opt1 { background: url(../img/sjbn-q13-opt1.png) no-repeat; top: 398px;}
.Q13 .opt2 { background: url(../img/sjbn-q13-opt2.png) no-repeat; top: 551px; width: 168px; right: 56px;}
.Q13 .opt3 { background: url(../img/sjbn-q13-opt3.png) no-repeat; top: 707px;}
.Q13 .chosen { height: 84px; width: 176px; right: 50px; background-size: 171px 79px;}
.Q13 .chosen1 { top: 405px;}
.Q13 .chosen2 { top: 556px;}
.Q13 .chosen3 { top: 712px;}

.Q12 .bg { background: url(../img/sjbn-q12-bg.png) no-repeat; height: 242px; width: 520px; top: 521px; left: -260px; margin-left: 50%;}
.Q12 .que { background: url(../img/sjbn-q12-que.png) no-repeat; height: 96px; width: 628px; top: 218px; left: -314px; margin-left: 50%;}
.Q12 .opt { height: 35px; width: 90px; top: 393px;}
.Q12 .opt1 { background: url(../img/sjbn-q12-opt1.png) no-repeat; left: 71px;}
.Q12 .opt2 { background: url(../img/sjbn-q12-opt2.png) no-repeat; left: 260px;}
.Q12 .opt3 { background: url(../img/sjbn-q12-opt3.png) no-repeat; left: 444px;}
.Q12 .chosen { height: 51px; width: 120px; top: 398px; background-size: 120px 51px;}
.Q12 .chosen1 { left: 56px;}
.Q12 .chosen2 { left: 238px;}
.Q12 .chosen3 { left: 428px;}

.Q11 .bg { background: url(../img/sjbn-q11-bg.png) no-repeat; height: 333px; width: 300px; left: 0; top: 444px;}
.Q11 .que { background: url(../img/sjbn-q11-que.png) no-repeat; height: 54px; width: 629px; top: 257px; left: -314.5px; margin-left: 50%;}
.Q11 .opt { height: 84px; width: 272px;}
.Q11 .opt1 { background: url(../img/sjbn-q11-opt1.png) no-repeat; top: 398px; right: 24px;}
.Q11 .opt2 { background: url(../img/sjbn-q11-opt2.png) no-repeat; top: 551px; right: 4px;}
.Q11 .opt3 { background: url(../img/sjbn-q11-opt3.png) no-repeat; top: 707px; right: 36px;}
.Q11 .chosen { height: 84px; width: 306px; right: 20px; background-size: 306px 84px;}
.Q11 .chosen1 { top: 405px;}
.Q11 .chosen2 { top: 556px;}
.Q11 .chosen3 { top: 712px;}

.Q10 .bg { background: url(../img/sjbn-q10-bg.png) no-repeat; height: 318px; width: 342px; top: 531px; left: -171px; margin-left: 50%;}
.Q10 .que { background: url(../img/sjbn-q10-que.png) no-repeat; height: 81px; width: 628px; top: 245px; left: -314px; margin-left: 50%;}
.Q10 .opt { height: 84px; width: 102px; top: 408px;}
.Q10 .opt1 { background: url(../img/sjbn-q10-opt1.png) no-repeat; left: 71px;}
.Q10 .opt2 { background: url(../img/sjbn-q10-opt2.png) no-repeat; left: 260px;}
.Q10 .opt3 { background: url(../img/sjbn-q10-opt3.png) no-repeat; left: 444px;}
.Q10 .chosen { height: 65px; width: 137px; top: 421px; background-size: 137px 65px;}
.Q10 .chosen1 { left: 56px;}
.Q10 .chosen2 { left: 238px;}
.Q10 .chosen3 { left: 423px;}

.Q9 .bg { background: url(../img/sjbn-q9-bg.png) no-repeat; height: 355px; width: 352px; left: 0; top: 428px;}
.Q9 .que { background: url(../img/sjbn-q9-que.png) no-repeat; height: 92px; width: 628px; top: 218px; left: -314px; margin-left: 50%;}
.Q9 .opt { height: 103px; width: 170px;}
.Q9 .opt1 { background: url(../img/sjbn-q9-opt1.png) no-repeat; top: 398px; right: 43px;}
.Q9 .opt2 { background: url(../img/sjbn-q9-opt2.png) no-repeat; top: 551px; right: 13px;}
.Q9 .opt3 { background: url(../img/sjbn-q9-opt3.png) no-repeat; top: 707px; right: 71px;}
.Q9 .chosen { height: 84px; width: 250px; right: 20px; background-size: 250px 84px;}
.Q9 .chosen1 { top: 405px; background-size: 197px 84px; right: -3px;}
.Q9 .chosen2 { top: 556px; background-size: 192px 84px; right: -14px;}
.Q9 .chosen3 { top: 712px;}

.Q8 .bg { background: url(../img/sjbn-q8-bg.png) no-repeat; height: 329px; width: 446px; top: 543px; left: -223px; margin-left: 50%;}
.Q8 .que { background: url(../img/sjbn-q8-que.png) no-repeat; height: 82px; width: 628px; top: 256px; left: -314px; margin-left: 50%;}
.Q8 .opt { height: 91px; width: 101px; top: 408px;}
.Q8 .opt1 { background: url(../img/sjbn-q8-opt1.png) no-repeat; left: 71px;}
.Q8 .opt2 { background: url(../img/sjbn-q8-opt2.png) no-repeat; left: 260px;}
.Q8 .opt3 { background: url(../img/sjbn-q8-opt3.png) no-repeat; left: 444px;}
.Q8 .chosen { height: 65px; width: 137px; top: 421px; background-size: 137px 65px;}
.Q8 .chosen1 { left: 56px;}
.Q8 .chosen2 { left: 238px;}
.Q8 .chosen3 { left: 423px;}

.Q7 .bg { background: url(../img/sjbn-q7-bg.png) no-repeat; height: 348px; width: 358px; left: 0; top: 446px;}
.Q7 .que { background: url(../img/sjbn-q7-que.png) no-repeat; height: 117px; width: 628px; top: 237px; left: -314px; margin-left: 50%;}
.Q7 .opt { height: 97px; width: 138px;}
.Q7 .opt1 { background: url(../img/sjbn-q7-opt1.png) no-repeat; top: 414px; right: 150px;}
.Q7 .opt2 { background: url(../img/sjbn-q7-opt2.png) no-repeat; top: 546px; right: 72px; width: 205px; height: 91px;}
.Q7 .opt3 { background: url(../img/sjbn-q7-opt3.png) no-repeat; top: 689px; right: 70px;}
.Q7 .chosen { height: 75px; width: 187px; right: 48px; background-size: 187px 75px;}
.Q7 .chosen1 { top: 425px; background-size: 180px 72px; right: 127px;}
.Q7 .chosen2 { top: 556px; background-size: 192px 84px; right: 93px;}
.Q7 .chosen3 { top: 712px;}

.Q6 .bg { background: url(../img/sjbn-q6-bg.png) no-repeat; height: 312px; width: 475px; top: 543px; right: 0;}
.Q6 .que { background: url(../img/sjbn-q6-que.png) no-repeat; height: 57px; width: 608px; top: 256px; left: -304px; margin-left: 50%;}
.Q6 .opt { height: 85px; width: 101px; top: 408px;}
.Q6 .opt1 { background: url(../img/sjbn-q6-opt1.png) no-repeat; left: 71px;}
.Q6 .opt2 { background: url(../img/sjbn-q6-opt2.png) no-repeat; left: 260px;}
.Q6 .opt3 { background: url(../img/sjbn-q6-opt3.png) no-repeat; left: 444px;}
.Q6 .chosen { height: 65px; width: 137px; top: 421px; background-size: 137px 65px;}
.Q6 .chosen1 { left: 56px;}
.Q6 .chosen2 { left: 238px;}
.Q6 .chosen3 { left: 423px;}

.Q5 .bg { background: url(../img/sjbn-q5-bg.png) no-repeat; height: 238px; width: 328px; left: 0; top: 490px;}
.Q5 .que { background: url(../img/sjbn-q5-que.png) no-repeat; height: 126px; width: 628px; top: 228px; left: -314px; margin-left: 50%;}
.Q5 .opt { height: 91px; width: 102px; right: 71px;}
.Q5 .opt1 { background: url(../img/sjbn-q5-opt1.png) no-repeat; top: 419px;}
.Q5 .opt2 { background: url(../img/sjbn-q5-opt2.png) no-repeat; top: 576px; right: 144px;}
.Q5 .opt3 { background: url(../img/sjbn-q5-opt3.png) no-repeat; top: 718px;}
.Q5 .chosen { height: 88px; width: 250px; background-size: 168px 88px;}
.Q5 .chosen1 { top: 422px; right: -42px;}
.Q5 .chosen2 { top: 580px; right: 31px;}
.Q5 .chosen3 { top: 724px; right: -48px;}

.Q4 .bg { background: url(../img/sjbn-q4-bg.png) no-repeat; height: 378px; width: 306px; top: 528px; right: 0;}
.Q4 .que { background: url(../img/sjbn-q4-que.png) no-repeat; height: 118px; width: 618px; top: 218px; left: -309px; margin-left: 50%;}
.Q4 .opt { height: 137px; width: 190px; top: 368px; left: 62px;}
.Q4 .opt1 { background: url(../img/sjbn-q4-opt1.png) no-repeat;}
.Q4 .opt2 { background: url(../img/sjbn-q4-opt2.png) no-repeat; left: 344px;}
.Q4 .opt3 { background: url(../img/sjbn-q4-opt3.png) no-repeat; top: 591px;}
.Q4 .chosen { height: 67px; width: 223px; top: 408px; left: 48px; background-size: 223px 67px;}
.Q4 .chosen1 { left: 46px;}
.Q4 .chosen2 { left: 326px;}
.Q4 .chosen3 { top: 630px;}

.Q3 .bg { background: url(../img/sjbn-q3-bg.png) no-repeat; height: 363px; width: 526px; top: 527px; left: 0;}
.Q3 .que { background: url(../img/sjbn-q3-que.png) no-repeat; height: 76px; width: 627px; top: 236px; left: -313.5px; margin-left: 50%;}
.Q3 .opt { height: 84px; width: 135px; top: 348px;}
.Q3 .opt1 { background: url(../img/sjbn-q3-opt1.png) no-repeat; left: 72px;}
.Q3 .opt2 { background: url(../img/sjbn-q3-opt2.png) no-repeat; left: 420px;}
.Q3 .opt3 { background: url(../img/sjbn-q3-opt3.png) no-repeat; left: 264px; top: 453px;}
.Q3 .chosen { height: 70px; width: 168px; top: 361px; background-size: 168px 70px;}
.Q3 .chosen1 { left: 56px;}
.Q3 .chosen2 { left: 381px;}
.Q3 .chosen3 { left: 220px; top: 461px;}

.Q2 .bg { background: url(../img/sjbn-q2-bg.png) no-repeat; height: 256px; width: 268px; left: 0; top: 456px;}
.Q2 .que { background: url(../img/sjbn-q2-que.png) no-repeat; height: 66px; width: 560px; top: 254px; left: -280px; margin-left: 50%;}
.Q2 .opt { height: 109px; width: 209px; right: 90px;}
.Q2 .opt1 { background: url(../img/sjbn-q2-opt1.png) no-repeat; top: 398px;}
.Q2 .opt2 { background: url(../img/sjbn-q2-opt2.png) no-repeat; top: 551px;}
.Q2 .opt3 { background: url(../img/sjbn-q2-opt3.png) no-repeat; top: 707px;}
.Q2 .chosen { height: 98px; width: 263px; right: 64px; background-size: 263px 98px;}
.Q2 .chosen1 { top: 405px;}
.Q2 .chosen2 { top: 556px;}
.Q2 .chosen3 { top: 712px;}

.Q1 .bg { background: url(../img/sjbn-q1-bg.png) no-repeat; height: 227px; width: 244px; left: 38px; top: 491px;}
.Q1 .que { background: url(../img/sjbn-q1-que.png) no-repeat; height: 126px; width: 628px; top: 239px; left: -314px; margin-left: 50%;}
.Q1 .opt { height: 98px; width: 155px; right: 90px;}
.Q1 .opt1 { background: url(../img/sjbn-q1-opt1.png) no-repeat; top: 428px;}
.Q1 .opt2 { background: url(../img/sjbn-q1-opt2.png) no-repeat; top: 549px;}
.Q1 .opt3 { background: url(../img/sjbn-q1-opt3.png) no-repeat; top: 675px;}
.Q1 .chosen { height: 85px; width: 203px; right: 64px; background-size: 203px 85px;}
.Q1 .chosen1 { top: 431px;}
.Q1 .chosen2 { top: 556px;}
.Q1 .chosen3 { top: 685px;}

.Q16 .bg { background: url(../img/sjbn-q16-bg.png) no-repeat; height: 244px; width: 421px; top: 618px; left: -210.5px; margin-left: 50%;}
.Q16 .que { background: url(../img/sjbn-q16-que.png) no-repeat; height: 132px; width: 611px; top: 242px; left: -305.5px; margin-left: 50%;}
.Q16 .opt { height: 83px; width: 67px; top: 432px;}
.Q16 .opt1 { background: url(../img/sjbn-q16-opt1.png) no-repeat; left: 108px;}
.Q16 .opt2 { background: url(../img/sjbn-q16-opt2.png) no-repeat; left: 270px;}
.Q16 .opt3 { background: url(../img/sjbn-q16-opt3.png) no-repeat; left: 432px;}
.Q16 .chosen { height: 65px; width: 120px; top: 448px; background-size: 120px 65px;}
.Q16 .chosen1 { left: 79px;}
.Q16 .chosen2 { left: 243px;}
.Q16 .chosen3 { left: 406px;}

.Q17 .bg { background: url(../img/sjbn-q17-bg.png) no-repeat; height: 289px; width: 375px; top: 566px; left: -187.5px; margin-left: 50%;}
.Q17 .que { background: url(../img/sjbn-q17-que.png) no-repeat; height: 105px; width: 628px; top: 228px; left: -314px; margin-left: 50%;}
.Q17 .opt { height: 82px; width: 82px; top: 432px;}
.Q17 .opt1 { background: url(../img/sjbn-q17-opt1.png) no-repeat; left: 108px;}
.Q17 .opt2 { background: url(../img/sjbn-q17-opt2.png) no-repeat; left: 270px;}
.Q17 .opt3 { background: url(../img/sjbn-q17-opt3.png) no-repeat; left: 432px;}
.Q17 .chosen { height: 65px; width: 120px; top: 448px; background-size: 120px 65px;}
.Q17 .chosen1 { left: 94px;}
.Q17 .chosen2 { left: 263px;}
.Q17 .chosen3 { left: 428px;}

.Q18 .bg { background: url(../img/sjbn-q18-bg.png) no-repeat; height: 269px; width: 234px; top: 583px; left: -117px; margin-left: 50%;}
.Q18 .que { background: url(../img/sjbn-q18-que.png) no-repeat; height: 98px; width: 628px; top: 234px; left: -314px; margin-left: 50%;}
.Q18 .opt { height: 82px; width: 62px; top: 432px;}
.Q18 .opt1 { background: url(../img/sjbn-q18-opt1.png) no-repeat; left: 134px;}
.Q18 .opt2 { background: url(../img/sjbn-q18-opt2.png) no-repeat; left: 299px;}
.Q18 .opt3 { background: url(../img/sjbn-q18-opt3.png) no-repeat; left: 468px;}
.Q18 .chosen { height: 65px; width: 120px; top: 448px; background-size: 120px 65px;}
.Q18 .chosen1 { left: 73px;}
.Q18 .chosen2 { left: 235px;}
.Q18 .chosen3 { left: 389px;}

.Q19 .bg { background: url(../img/sjbn-q19-bg.png) no-repeat; height: 317px; width: 324px; top: 548px; left: -162px; margin-left: 50%;}
.Q19 .que { background: url(../img/sjbn-q19-que.png) no-repeat; height: 110px; width: 630px; top: 228px; left: -315px; margin-left: 50%;}
.Q19 .opt { height: 98px; width: 91px; top: 426px;}
.Q19 .opt1 { background: url(../img/sjbn-q19-opt1.png) no-repeat; left: 108px;}
.Q19 .opt2 { background: url(../img/sjbn-q19-opt2.png) no-repeat; left: 270px;}
.Q19 .opt3 { background: url(../img/sjbn-q19-opt3.png) no-repeat; left: 446px;}
.Q19 .chosen { height: 65px; width: 125px; top: 448px; background-size: 125px 65px;}
.Q19 .chosen1 { left: 88px;}
.Q19 .chosen2 { left: 254px;}
.Q19 .chosen3 { left: 428px;}

.Q20 .bg { background: url(../img/sjbn-q20-bg.png) no-repeat; height: 268px; width: 366px; top: 386px; left: -183px; margin-left: 50%;}
.Q20 .que { background: url(../img/sjbn-q20-que.png) no-repeat; height: 148px; width: 640px; top: 230px; left: -320px; margin-left: 50%;}
.Q20 .opt { height: 110px; width: 108px; top: 676px;}
.Q20 .opt1 { background: url(../img/sjbn-q20-opt1.png) no-repeat; left: 99px;}
.Q20 .opt2 { background: url(../img/sjbn-q20-opt2.png) no-repeat; left: 254px; width: 144px;}
.Q20 .opt3 { background: url(../img/sjbn-q20-opt3.png) no-repeat; left: 441px;}
.Q20 .chosen { height: 76px; width: 180px; top: 699px; background-size: 180px 76px;}
.Q20 .chosen1 { left: 56px;}
.Q20 .chosen2 { left: 238px;}
.Q20 .chosen3 { left: 401px;}

.Q21 .bg { background: url(../img/sjbn-q21-bg.png) no-repeat; height: 319px; width: 234px; left: 0px; top: 482px;}
.Q21 .que { background: url(../img/sjbn-q21-que.png) no-repeat; height: 95px; width: 630px; top: 243px; left: -315px; margin-left: 50%;}
.Q21 .opt { height: 108px; width: 405px; right: 26px;}
.Q21 .opt1 { background: url(../img/sjbn-q21-opt1.png) no-repeat; top: 396px;}
.Q21 .opt2 { background: url(../img/sjbn-q21-opt2.png) no-repeat; top: 543px; width: 416px;}
.Q21 .opt3 { background: url(../img/sjbn-q21-opt3.png) no-repeat; top: 690px;}
.Q21 .chosen { height: 90px; width: 456px; right: 6px; background-size: 456px 90px;}
.Q21 .chosen1 { top: 408px;}
.Q21 .chosen2 { top: 556px;}
.Q21 .chosen3 { top: 709px;}

.Q22 .bg { background: url(../img/sjbn-q22-bg.png) no-repeat; height: 258px; width: 427px; top: 621px; left: -213.5px; margin-left: 50%;}
.Q22 .que { background: url(../img/sjbn-q22-que.png) no-repeat; height: 115px; width: 640px; top: 228px; left: -320px; margin-left: 50%;}
.Q22 .opt { height: 90px; width: 76px; top: 432px;}
.Q22 .opt1 { background: url(../img/sjbn-q22-opt1.png) no-repeat; left: 99px;}
.Q22 .opt2 { background: url(../img/sjbn-q22-opt2.png) no-repeat; left: 263px; width: 111px;}
.Q22 .opt3 { background: url(../img/sjbn-q22-opt3.png) no-repeat; left: 435px;}
.Q22 .chosen { height: 67px; width: 144px; top: 446px; background-size: 144px 67px;}
.Q22 .chosen1 { left: 61px;}
.Q22 .chosen2 { left: 231px;}
.Q22 .chosen3 { left: 398px;}

.Q23 .bg { background: url(../img/sjbn-q23-bg.png) no-repeat; height: 226px; width: 529px; top: 408px; left: -264.5px; margin-left: 50%;}
.Q23 .que { background: url(../img/sjbn-q23-que.png) no-repeat; height: 134px; width: 635px; top: 239px; left: -317.5px; margin-left: 50%;}
.Q23 .opt { height: 83px; width: 54px; top: 676px;}
.Q23 .opt1 { background: url(../img/sjbn-q23-opt1.png) no-repeat; left: 135px;}
.Q23 .opt2 { background: url(../img/sjbn-q23-opt2.png) no-repeat; left: 305px;}
.Q23 .opt3 { background: url(../img/sjbn-q23-opt3.png) no-repeat; left: 470px;}
.Q23 .chosen { height: 68px; width: 144px; top: 688px; background-size: 144px 68px;}
.Q23 .chosen1 { left: 87px;}
.Q23 .chosen2 { left: 259px;}
.Q23 .chosen3 { left: 428px;}

.Q24 .bg { background: url(../img/sjbn-q24-bg.png) no-repeat; height: 254px; width: 427px; left: 0px; top: 470px;}
.Q24 .que { background: url(../img/sjbn-q24-que.png) no-repeat; height: 125px; width: 628px; top: 234px; left: -314px; margin-left: 50%;}
.Q24 .opt { height: 88px; width: 113px;}
.Q24 .opt1 { background: url(../img/sjbn-q24-opt1.png) no-repeat; top: 410px; right: 144px;}
.Q24 .opt2 { background: url(../img/sjbn-q24-opt2.png) no-repeat; top: 545px; right: 71px;}
.Q24 .opt3 { background: url(../img/sjbn-q24-opt3.png) no-repeat; top: 714px; right: 89px; width: 141px;}
.Q24 .chosen { height: 76px; width: 176px; background-size: 176px 76px;}
.Q24 .chosen1 { top: 417px; right: 112px;}
.Q24 .chosen2 { top: 556px; right: 38px;}
.Q24 .chosen3 { top: 724px; right: 72px;}

.Q25 .bg { background: url(../img/sjbn-q25-bg.png) no-repeat; height: 279px; width: 402px; top: 560px; left: -201px; margin-left: 50%;}
.Q25 .que { background: url(../img/sjbn-q25-que.png) no-repeat; height: 97px; width: 640px; top: 240px; left: -320px; margin-left: 50%;}
.Q25 .opt { height: 88px; width: 72px; top: 414px;}
.Q25 .opt1 { background: url(../img/sjbn-q25-opt1.png) no-repeat; left: 123px;}
.Q25 .opt2 { background: url(../img/sjbn-q25-opt2.png) no-repeat; left: 293px;}
.Q25 .opt3 { background: url(../img/sjbn-q25-opt3.png) no-repeat; left: 456px;}
.Q25 .chosen { height: 69px; width: 140px; top: 427px; background-size: 140px 69px;}
.Q25 .chosen1 { left: 83px;}
.Q25 .chosen2 { left: 256px;}
.Q25 .chosen3 { left: 420px;}

.Q26 .bg { background: url(../img/sjbn-q26-bg.png) no-repeat; height: 351px; width: 248px; left: 42px; top: 498px;}
.Q26 .que { background: url(../img/sjbn-q26-que.png) no-repeat; height: 90px; width: 639px; top: 240px; left: -314.5px; margin-left: 50%;}
.Q26 .opt { height: 87px;}
.Q26 .opt1 { background: url(../img/sjbn-q26-opt1.png) no-repeat; top: 366px; right: 164px; width: 309px;}
.Q26 .opt2 { background: url(../img/sjbn-q26-opt2.png) no-repeat; top: 530px; right: 86px; width: 147px;}
.Q26 .opt3 { background: url(../img/sjbn-q26-opt3.png) no-repeat; top: 712px; right: 81px; width: 227px;}
.Q26 .chosen { height: 70px; width: 203px;}
.Q26 .chosen1 { top: 380px; width: 370px; background-size: 370px 70px; right: 134px;}
.Q26 .chosen2 { top: 537px; height: 75px; width: 213px; background-size: 213px 75px; right: 52px;}
.Q26 .chosen3 { top: 721px; width: 282px; background-size: 282px 70px; right: 56px;}

.Q27 .bg { background: url(../img/sjbn-q27-bg.png) no-repeat; height: 208px; width: 374px; top: 667px; left: -187px; margin-left: 50%;}
.Q27 .que { background: url(../img/sjbn-q27-que.png) no-repeat; height: 171px; width: 640px; top: 240px; left: -320px; margin-left: 50%;}
.Q27 .opt { height: 46px; width: 570px; left: 45px;}
.Q27 .opt1 { background: url(../img/sjbn-q27-opt1.png) no-repeat; top: 447px;}
.Q27 .opt2 { background: url(../img/sjbn-q27-opt2.png) no-repeat; top: 524px;}
.Q27 .opt3 { background: url(../img/sjbn-q27-opt3.png) no-repeat; top: 600px;}
.Q27 .chosen { height: 85px; width: 600px; right: 24px; background-size: 600px 85px;}
.Q27 .chosen1 { top: 427px;}
.Q27 .chosen2 { top: 510px;}
.Q27 .chosen3 { top: 582px;}

.Q28 .bg { background: url(../img/sjbn-q28-bg.png) no-repeat; height: 285px; width: 421px; top: 557px; left: -201px; margin-left: 50%;}
.Q28 .que { background: url(../img/sjbn-q28-que.png) no-repeat; height: 90px; width: 640px; top: 243px; left: -320px; margin-left: 50%;}
.Q28 .opt { height: 87px; width: 99px; top: 417px;}
.Q28 .opt1 { background: url(../img/sjbn-q28-opt1.png) no-repeat; left: 116px;}
.Q28 .opt2 { background: url(../img/sjbn-q28-opt2.png) no-repeat; left: 281px;}
.Q28 .opt3 { background: url(../img/sjbn-q28-opt3.png) no-repeat; left: 450px;}
.Q28 .chosen { height: 80px; width: 160px; top: 420px; background-size: 160px 80px;}
.Q28 .chosen1 { left: 82px;}
.Q28 .chosen2 { left: 251px;}
.Q28 .chosen3 { left: 414px;}

/*==================================*/
 
.page.inTop{
            -webkit-animation:ShowTop .5s ease-out both;
					animation:ShowTop .5s ease-out both;
}
.page.outTop{
            -webkit-animation:HideTop .5s ease-out both;
					animation:HideTop .5s ease-out both;
}
.page.inDown{
            -webkit-animation:ShowDown .5s ease-out both;
					animation:ShowDown .5s ease-out both;
}
.page.outDown{
            -webkit-animation:HideDown .5s ease-out both;
					animation:HideDown .5s ease-out both;
}
@-webkit-keyframes ShowTop{
	0%{ -webkit-transform:translateY(100%);}
	100%{ -webkit-transform:translateY(0);}
}
@keyframes ShowTop{
	0%{ transform:translateY(100%);}
	100%{ transform:translateY(0);}
}
@-webkit-keyframes HideTop{
	0%{ -webkit-transform:translateY(0);}
	100%{ -webkit-transform:translateY(-100%);}
}
@keyframes HideTop{
	0%{ transform:translateY(0);}
	100%{ transform:translateY(-100%);}
}
@-webkit-keyframes ShowDown{
	0%{ -webkit-transform:translateY(-100%);}
	100%{ -webkit-transform:translateY(0);}
}
@keyframes ShowDown{
	0%{ transform:translateY(-100%);}
	100%{ transform:translateY(0);}
}
@-webkit-keyframes HideDown{
	0%{ -webkit-transform:translateY(0);}
	100%{ -webkit-transform:translateY(100%);}
}
@keyframes HideDown{
	0%{ transform:translateY(0);}
	100%{ transform:translateY(100%);}
}
 
/*==================================*/

.arrow{ width:70px; height:56px; line-height:56px; text-align:center; font-size:50px; font-weight:bold; color:#fee9bb; position:absolute; left:285px; bottom:27px;
	-webkit-animation:arrow 1.2s .5s ease-in-out infinite;
			animation:arrow 1.2s .5s ease-in-out infinite;
}
@-webkit-keyframes arrow{
0%{ -webkit-transform:translateY(0); opacity:1;}
100%{ -webkit-transform:translateY(-50%); opacity:0}
}
@keyframes arrow{
0%{ transform:translateY(0); opacity:1;}
100%{ transform:translateY(-50%); opacity:0}
}
@keyframes fadeIn{
	0%{ opacity:0;}
	100%{ opacity:1}
	}

/*==================================*/


@-webkit-keyframes fadeRightTan{
	0%{ -webkit-transform:translateX(100%); opacity:0;}
	70%{ -webkit-transform:translateX(-5%); opacity:1;}
	80%{ -webkit-transform:translateX(2%); opacity:1;}
	90%{ -webkit-transform:translateX(-2%); opacity:1;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeRightTan{
	0%{ transform:translateX(100%); opacity:0;}
	70%{ transform:translateX(-5%); opacity:1;}
	80%{ transform:translateX(2%); opacity:1;}
	90%{ transform:translateX(-2%); opacity:1;}
	100%{ transform:translateX(0); opacity:1;}
}
@-webkit-keyframes fadeRight{
	0%{ -webkit-transform:translateX(100%); opacity:0;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeRight{
	0%{ transform:translateX(100%); opacity:0;}
	100%{ transform:translateX(0); opacity:1;}
}
@-webkit-keyframes fadeLeftTan{
	0%{ -webkit-transform:translateX(-100%); opacity:0;}
	70%{ -webkit-transform:translateX(5%); opacity:1;}
	80%{ -webkit-transform:translateX(-2%); opacity:1;}
	90%{ -webkit-transform:translateX(2%); opacity:1;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeLeftTan{
	0%{ -webkit-transform:translateX(-100%); opacity:0;}
	70%{ -webkit-transform:translateX(5%); opacity:1;}
	80%{ -webkit-transform:translateX(-2%); opacity:1;}
	90%{ -webkit-transform:translateX(2%); opacity:1;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@-webkit-keyframes fadeLeft{
	0%{ -webkit-transform:translateX(-100%); opacity:0;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeLeft{
	0%{ -webkit-transform:translateX(-100%); opacity:0;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@-webkit-keyframes fadeTopTan{
	0%{ -webkit-transform:translateY(-100%); opacity:0;}
	100%{ -webkit-transform:translateY(0); opacity:1;}
}
@keyframes fadeTopTan{
	0%{ -webkit-transform:translateY(-100%); opacity:0;}
	100%{ -webkit-transform:translateY(0); opacity:1;}
}
@-webkit-keyframes fadeBottomTan{
	0%{ -webkit-transform:translateY(100%); opacity:0;}
	100%{ -webkit-transform:translateY(0); opacity:1;}
}
@keyframes fadeBottomTan{
	0%{ -webkit-transform:translateY(100%); opacity:0;}
	100%{ -webkit-transform:translateY(0); opacity:1;}
}
@-webkit-keyframes fadeFrontTan{
	0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3);}
	50% { opacity: 1;}
	100% { opacity: 1;}
}
@keyframes fadeFrontTan{
	0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3);}
	50% { opacity: 1;}
	100% { opacity: 1;}
}
@-webkit-keyframes shiningTan{
	0% { opacity: 1;}
	50% { opacity: 1; -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9);}
	100% { opacity: 1;}
}
@keyframes shiningTan{
	0% { opacity: 1;}
	50% { opacity: 1; -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9);}
	100% { opacity: 1;}
}
@-webkit-keyframes fireworkTan{
	0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3);}
	50% { opacity: 1;}
	100% { opacity: 1;}
}
@keyframes fireworkTan{
	0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3);}
	50% { opacity: 1;}
	100% { opacity: 1;}
}    
/* transform: translateY(-6240px); */
/* @-webkit-keyframes flowBottom{
	0%{ -webkit-transform:translateY(0);}
	100%{ -webkit-transform:translateY(calc(100vh - 7448px));}
}
@keyframes flowBottom{
	0%{ -webkit-transform:translateY(0);}
	100%{ -webkit-transform:translateY(calc(100vh - 7448px));}
} */
/*==================================*/

.scrollBox {
	-webkit-animation:flowBottom 120s 2s linear forwards;
			animation:flowBottom 120s 2s linear forwards;
			text-align:center;
}
.scrollBox img{}


.preface > div > div:nth-child(1),
.video > div > div:nth-child(1),
.share > div > div:nth-child(1){
		-webkit-animation:fadeTopTan .8s .2s ease-in-out both;
				animation:fadeTopTan .8s .2s ease-in-out both;
}
.preface > div > div:nth-child(2){
	-webkit-animation:fadeLeftTan .8s .7s ease-in-out both;
			animation:fadeLeftTan .8s .7s ease-in-out both;
}
.preface > div > div:nth-child(3){
	-webkit-animation:fadeRightTan .8s .7s ease-in-out both;
			animation:fadeRightTan .8s .7s ease-in-out both;
}

.preface > div > div:nth-child(4),
.share > div > div:nth-child(2),
.share > div > div:nth-child(10){
	-webkit-animation:fadeFrontTan .8s .5s ease-in-out both;
			animation:fadeFrontTan .8s .5s ease-in-out both;
}
.preface > div > div:nth-child(5){
	-webkit-animation:fadeFrontTan .8s 1.7s ease-in-out both;
			animation:fadeFrontTan .8s 1.7s ease-in-out both;
}
.preface > div > div:nth-child(6){
	-webkit-animation:fadeFrontTan .8s 2.2s ease-in-out both;
			animation:fadeFrontTan .8s 2.2s ease-in-out both;
}

.share > div > div:nth-child(2) {
	-webkit-animation:fadeIn .8s .5s ease-in-out both;
			animation:fadeIn .8s .5s ease-in-out both;
}
.preface > div > div:nth-child(7),
.video > div > div:nth-child(10),
.share > div > div:nth-child(12),
.letter .letter-btn{
	-webkit-animation-name:fadeFrontTan, shiningTan;
	-webkit-animation-duration: .8s, 1.5s;
	-webkit-animation-timing-function:ease-in-out, ease-in-out;
	-webkit-animation-delay: 1.7s, 2.5s;
	-webkit-animation-iteration-count:1, infinite;
	-webkit-animation-fill-mode: backwards, none;
			animation-name:fadeFrontTan, shiningTan;
			animation-duration: .8s, 1.5s;
			animation-timing-function:ease-in-out, ease-in-out;
			animation-delay: 1.7s, 2.5s;
			animation-iteration-count:1, infinite;
			animation-fill-mode: backwards, none;
}
.preface > div > div:nth-child(14) {
	-webkit-animation:fadeFrontTan .8s 2.7s ease-in-out both;
			animation:fadeFrontTan .8s 2.7s ease-in-out both;
}
.preface > div > div:nth-child(8),
.video > div > div:nth-child(3){
	-webkit-animation:fadeBottomTan .8s .2s ease-in-out both;
			animation:fadeBottomTan .8s .2s ease-in-out both;
}
.preface > div > div:nth-child(9){
	-webkit-animation-name:fadeFrontTan, fireworkTan;
	-webkit-animation-duration: .8s, 1.5s;
	-webkit-animation-timing-function:ease-in-out, ease-in-out;
	-webkit-animation-delay: 0.7s, 3.5s;
	-webkit-animation-iteration-count:1, infinite;
	-webkit-animation-fill-mode: backwards, none;
			animation-name:fadeFrontTan, fireworkTan;
			animation-duration: .8s, 1.5s;
			animation-timing-function:ease-in-out, ease-in-out;
			animation-delay: 2.7s, 3.5s;
			animation-iteration-count:1, infinite;
			animation-fill-mode: backwards, none;
}
.preface > div > div:nth-child(10){
	-webkit-animation-name:fadeFrontTan, fireworkTan;
	-webkit-animation-duration: .8s, 1s;
	-webkit-animation-timing-function:ease-in-out, ease-in-out;
	-webkit-animation-delay: 0.7s, 3.5s;
	-webkit-animation-iteration-count:1, infinite;
	-webkit-animation-fill-mode: backwards, none;
			animation-name:fadeFrontTan, fireworkTan;
			animation-duration: .8s, 1s;
			animation-timing-function:ease-in-out, ease-in-out;
			animation-delay: 2.7s, 3.5s;
			animation-iteration-count:1, infinite;
			animation-fill-mode: backwards, none;
}
.preface > div > div:nth-child(11){
	-webkit-animation-name:fadeFrontTan, fireworkTan;
	-webkit-animation-duration: .8s, .8s;
	-webkit-animation-timing-function:ease-in-out, ease-in-out;
	-webkit-animation-delay: 0.7s, 3.5s;
	-webkit-animation-iteration-count:1, infinite;
	-webkit-animation-fill-mode: backwards, none;
			animation-name:fadeFrontTan, fireworkTan;
			animation-duration: .8s, .8s;
			animation-timing-function:ease-in-out, ease-in-out;
			animation-delay: 2.7s, 3.5s;
			animation-iteration-count:1, infinite;
			animation-fill-mode: backwards, none;
}
.preface > div > div:nth-child(12){
	-webkit-animation:fadeRightTan .8s 2.2s ease-in-out both;
			animation:fadeRightTan .8s 2.2s ease-in-out both;
}
.preface > div > div:nth-child(13){
	-webkit-animation:fadeLeftTan .8s 2.2s ease-in-out both;
			animation:fadeLeftTan .8s 2.2s ease-in-out both;
}
.video > div > div:nth-child(4){
	-webkit-animation:fadeBottomTan .8s .5s ease-in-out both;
			animation:fadeBottomTan .8s .5s ease-in-out both;
}
.video > div > div:nth-child(5){
	-webkit-animation:fadeLeftTan .8s .5s ease-in-out both;
			animation:fadeLeftTan .8s .5s ease-in-out both;
}
.video > div > div:nth-child(6){
	-webkit-animation:fadeLeftTan .8s .5s ease-in-out both;
			animation:fadeLeftTan .8s .5s ease-in-out both;
	/* -webkit-animation-name:fadeFrontTan, fireworkTan;*/ 
	/* -webkit-animation-duration: .8s, 1s;*/ 
	/* -webkit-animation-timing-function:ease-in-out, ease-in-out;*/ 
	/* -webkit-animation-delay: .5s, 1.3s;*/ 
	/* -webkit-animation-iteration-count:1, infinite;*/ 
	/* -webkit-animation-fill-mode: backwards, none;*/ 
			/* animation-name:fadeFrontTan, fireworkTan;*/ 
		/* 	animation-duration: .8s, 1s;*/ 
		/* 	animation-timing-function:ease-in-out, ease-in-out;*/ 
		/* 	animation-delay: .5s, 1.3s;*/ 
		/* 	animation-iteration-count:1, infinite;*/ 
		/* 	animation-fill-mode: backwards, none; */ 
}
.video > div > div:nth-child(7){
	-webkit-animation-name:fadeFrontTan, fireworkTan;
	-webkit-animation-duration: .8s, .8s;
	-webkit-animation-timing-function:ease-in-out, ease-in-out;
	-webkit-animation-delay: .5s, 1.3s;
	-webkit-animation-iteration-count:1, infinite;
	-webkit-animation-fill-mode: backwards, none;
			animation-name:fadeFrontTan, fireworkTan;
			animation-duration: .8s, .8s;
			animation-timing-function:ease-in-out, ease-in-out;
			animation-delay: .5s, 1.3s;
			animation-iteration-count:1, infinite;
			animation-fill-mode: backwards, none;
}
.video > div > div:nth-child(8){
	-webkit-animation-name:fadeFrontTan, fireworkTan;
	-webkit-animation-duration: .8s, 1.5s;
	-webkit-animation-timing-function:ease-in-out, ease-in-out;
	-webkit-animation-delay: .5s, 1.3s;
	-webkit-animation-iteration-count:1, infinite;
	-webkit-animation-fill-mode: backwards, none;
			animation-name:fadeFrontTan, fireworkTan;
			animation-duration: .8s, 1.5s;
			animation-timing-function:ease-in-out, ease-in-out;
			animation-delay: .5s, 1.3s;
			animation-iteration-count:1, infinite;
			animation-fill-mode: backwards, none;
}
.video > div > div:nth-child(9) {
	-webkit-animation:fadeFrontTan .8s 1.2s ease-in-out both;
			animation:fadeFrontTan .8s 1.2s ease-in-out both;
}
.share > div > div:nth-child(5),
.share > div > div:nth-child(8){
	-webkit-animation-name:fadeFrontTan, fireworkTan;
	-webkit-animation-duration: .8s, 1s;
	-webkit-animation-timing-function:ease-in-out, ease-in-out;
	-webkit-animation-delay: 2s, 2.8s;
	-webkit-animation-iteration-count:1, infinite;
	-webkit-animation-fill-mode: backwards, none;
			animation-name:fadeFrontTan, fireworkTan;
			animation-duration: .8s, 1s;
			animation-timing-function:ease-in-out, ease-in-out;
			animation-delay: 2s, 2.8s;
			animation-iteration-count:1, infinite;
			animation-fill-mode: backwards, none;
}
.share > div > div:nth-child(6),
.share > div > div:nth-child(9){
	-webkit-animation-name:fadeFrontTan, fireworkTan;
	-webkit-animation-duration: .8s, .8s;
	-webkit-animation-timing-function:ease-in-out, ease-in-out;
	-webkit-animation-delay: 2s, 2.8s;
	-webkit-animation-iteration-count:1, infinite;
	-webkit-animation-fill-mode: backwards, none;
			animation-name:fadeFrontTan, fireworkTan;
			animation-duration: .8s, .8s;
			animation-timing-function:ease-in-out, ease-in-out;
			animation-delay: 2s, 2.8s;
			animation-iteration-count:1, infinite;
			animation-fill-mode: backwards, none;
}
.share > div > div:nth-child(7){
	-webkit-animation-name:fadeFrontTan, fireworkTan;
	-webkit-animation-duration: .8s, 1.5s;
	-webkit-animation-timing-function:ease-in-out, ease-in-out;
	-webkit-animation-delay: 2s, 2.8s;
	-webkit-animation-iteration-count:1, infinite;
	-webkit-animation-fill-mode: backwards, none;
			animation-name:fadeFrontTan, fireworkTan;
			animation-duration: .8s, 1.5s;
			animation-timing-function:ease-in-out, ease-in-out;
			animation-delay: 2s, 2.8s;
			animation-iteration-count:1, infinite;
			animation-fill-mode: backwards, none;
}
.share > div > div:nth-child(11){
	-webkit-animation:fadeFrontTan .8s 1.2s ease-in-out both;
			animation:fadeFrontTan .8s 1.2s ease-in-out both;
}

.share > div > div:nth-child(13){
	-webkit-animation:fadeRightTan 2.1s .7s ease-in-out both;
			animation:fadeRightTan 2.1s .7s ease-in-out both;
}
.share > div > div:nth-child(3){

}
.share > div > div:nth-child(4){
	-webkit-animation:fadeLeftTan 2.8s .5s ease-in-out both;
			animation:fadeLeftTan 2.8s .5s ease-in-out both;
}

.Q28 > div > div:nth-child(1),
.Q21 > div > div:nth-child(1),
.Q15 > div > div:nth-child(1),
.Q14 > div > div:nth-child(1),
.Q13 > div > div:nth-child(1),
.Q11 > div > div:nth-child(1),
.Q2 > div > div:nth-child(1){
	-webkit-animation:fadeLeft .8s 1.2s ease-in-out both;
			animation:fadeLeft .8s 1.2s ease-in-out both;
}

.Q4 > div > div:nth-child(1){
	-webkit-animation:fadeRight .8s 1.2s ease-in-out both;
			animation:fadeRight .8s 1.2s ease-in-out both;
}

.Q27 > div > div:nth-child(1),
.Q26 > div > div:nth-child(1),
.Q25 > div > div:nth-child(1),
.Q24 > div > div:nth-child(1),
.Q23 > div > div:nth-child(1),
.Q22 > div > div:nth-child(1),
.Q20 > div > div:nth-child(1),
.Q19 > div > div:nth-child(1),
.Q18 > div > div:nth-child(1),
.Q17 > div > div:nth-child(1),
.Q16 > div > div:nth-child(1),
.Q12 > div > div:nth-child(1),
.Q10 > div > div:nth-child(1),
.Q9 > div > div:nth-child(1),
.Q8 > div > div:nth-child(1),
.Q7 > div > div:nth-child(1),
.Q5 > div > div:nth-child(1),
.Q3 > div > div:nth-child(1),
.Q1 > div > div:nth-child(1),
.Q15 > div > div:nth-child(6){
	-webkit-animation:fadeFrontTan .8s 1.2s ease-in-out both;
			animation:fadeFrontTan .8s 1.2s ease-in-out both;
}


.ques > div > div:nth-child(2){
	-webkit-animation:fadeRightTan .8s .7s ease-in-out both;
			animation:fadeRightTan .8s .7s ease-in-out both;
}
.ques > div > div:nth-child(3){
	-webkit-animation:fadeRightTan .8s 1.2s ease-in-out both;
			animation:fadeRightTan .8s 1.2s ease-in-out both;
}
.ques > div > div:nth-child(4){
	-webkit-animation:fadeRightTan .8s 1.7s ease-in-out both;
			animation:fadeRightTan .8s 1.7s ease-in-out both;
}
.ques > div > div:nth-child(5){
	-webkit-animation:fadeRightTan .8s 2.2s ease-in-out both;
			animation:fadeRightTan .8s 2.2s ease-in-out both;
}
.ques > div > div:nth-child(6){
	-webkit-animation:fadeFrontTan .8s 2.7s ease-in-out both;
			animation:fadeFrontTan .8s 2.7s ease-in-out both;
}

/* 2022.01.23新加样式式 */
/* 封面 */
.page00{ background:url(../img/bg00.png) no-repeat top center ; height: 100%; width: 100%; background-size: cover; }
.display{ display: none;}
.xf-mod{ position: relative; width: 557px; max-height: 487px; margin:350px auto 0;}
.xf-close,.xf-open,.btn-hz{ position: absolute;}
.xf-open{ top: -75px;}
.xf-close{-webkit-animation:ShowTop .5s ease-out both;
				 animation:ShowTop .5s ease-out both;}
.btn-hz{ top: 190px; left: 275px;}


.page01-txt{ position: relative; top: 410px; width:70% ; left: 50%; margin-left: -35%;
	  -webkit-animation:ShowTop .5s ease-out both;
				 animation:ShowTop .5s ease-out both;}
.page01-txt img{ width: 100%;}

.tiger{ position: absolute; bottom: -10px; width: 88%; left: 50%; margin-left: -44%;}
.tiger img{ width: 100%;}

/* 第2页 */
.btn-next{ position: absolute; width:46%; left: 50%; bottom:-11%; margin-left: -23%;}
.btn-next img{ width: 100%;}

/* 分享页 */
.page02{ background:url(../img/bg02.png) no-repeat top center ; background-size: cover;}

.jinju{ width: 70%; margin:260px auto 0;}

/* 二维码 */
.ewm-mod{ position: absolute; width: 40%; left: 50%; bottom: 4%; margin-left: -20%; text-align: center;}
.ewm{ background:#ffe9b4; border-radius: 10px; padding: 5px;  width: 100px; height: 100px;  margin: 0 auto 15px; box-sizing: content-box;}
.ewm img{ width: 100px; height: 100px;}

.ewm-txt1,.ewm-txt2{ font-size: 0; line-height: 0; margin-bottom: 10px;}