/* ------------------------------------------------------------ */
/* 重置样式 */
/* ------------------------------------------------------------ */
* { -webkit-tap-highlight-color:rgba(0,0,0,0); }
*, *:before, *:after { box-sizing:border-box; }
html { background-color:#fff; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-font-smoothing:antialiased; }
html, body, h1, h2, h3, h4, h5, h6, p, blockquote, figure, pre, dl, dt, dd, ol, ul, menu, dir, li, th, td, form, fieldset, legend, input, select, textarea, button, hr { margin:0; padding:0; }
body, input, select, textarea, button { color:#333; font-size:14px; font-family:"微软雅黑"; }
body { line-height:1; }
h1, h2, h3, h4, h5, h6, big, small { font-size:inherit; }
h1, h2, h3, h4, h5, h6, th, b, strong { font-weight:normal; }
ol, ul, menu, dir { list-style:none; }
table { border-collapse:collapse; border-spacing:0; }
fieldset { border:1px solid #333; }
hr { border:none; border-bottom:1px solid #333; }
a { text-decoration:none; color:#333; }
a:hover { text-decoration:none; color:#333; }
textarea { resize:none; }
img { border:0; vertical-align:middle; }
address, cite, dfn, em, i, var { font-style:normal; }
pre, code, kbd, samp, tt { font-family:inherit; }
:focus { outline:none; }

/* ------------------------------------------------------------ */
/* 辅助样式 */
/* ------------------------------------------------------------ */
.centered { display:block; margin-left:auto; margin-right:auto; }

.clearfix:before, .clearfix:after { content:""; display:block; width:100%; height:0; visibility:hidden; clear:both; }

.pull-left { float:left !important; }
.pull-right { float:right !important; }

.display-block { display:block; }
.display-inline { display:inline; }
.display-inline-block { display:inline-block; }

.show { display:block !important; }
.hide { display:none !important; }

.visible { visibility:visible !important; }
.invisible { visibility:hidden !important; }

.margin-0 { margin:0 !important; }
.margin-5 { margin:5px !important; }
.margin-10 { margin:10px !important; }
.margin-15 { margin:15px !important; }
.margin-20 { margin:20px !important; }
.margin-25 { margin:25px !important; }
.margin-30 { margin:30px !important; }
.margin-35 { margin:35px !important; }
.margin-40 { margin:40px !important; }
.margin-45 { margin:45px !important; }
.margin-50 { margin:50px !important; }
.margin-top-0 { margin-top:0 !important; }
.margin-top-5 { margin-top:5px !important; }
.margin-top-10 { margin-top:10px !important; }
.margin-top-15 { margin-top:15px !important; }
.margin-top-20 { margin-top:20px !important; }
.margin-top-25 { margin-top:25px !important; }
.margin-top-30 { margin-top:30px !important; }
.margin-top-35 { margin-top:35px !important; }
.margin-top-40 { margin-top:40px !important; }
.margin-top-45 { margin-top:45px !important; }
.margin-top-50 { margin-top:50px !important; }
.margin-bottom-0 { margin-bottom:0 !important; }
.margin-bottom-5 { margin-bottom:5px !important; }
.margin-bottom-10 { margin-bottom:10px !important; }
.margin-bottom-15 { margin-bottom:15px !important; }
.margin-bottom-20 { margin-bottom:20px !important; }
.margin-bottom-25 { margin-bottom:25px !important; }
.margin-bottom-30 { margin-bottom:30px !important; }
.margin-bottom-35 { margin-bottom:35px !important; }
.margin-bottom-40 { margin-bottom:40px !important; }
.margin-bottom-45 { margin-bottom:45px !important; }
.margin-bottom-50 { margin-bottom:50px !important; }
.margin-left-0 { margin-left:0 !important; }
.margin-left-5 { margin-left:5px !important; }
.margin-left-10 { margin-left:10px !important; }
.margin-left-15 { margin-left:15px !important; }
.margin-left-20 { margin-left:20px !important; }
.margin-left-25 { margin-left:25px !important; }
.margin-left-30 { margin-left:30px !important; }
.margin-left-35 { margin-left:35px !important; }
.margin-left-40 { margin-left:40px !important; }
.margin-left-45 { margin-left:45px !important; }
.margin-left-50 { margin-left:50px !important; }
.margin-right-0 { margin-right:0 !important; }
.margin-right-5 { margin-right:5px !important; }
.margin-right-10 { margin-right:10px !important; }
.margin-right-15 { margin-right:15px !important; }
.margin-right-20 { margin-right:20px !important; }
.margin-right-25 { margin-right:25px !important; }
.margin-right-30 { margin-right:30px !important; }
.margin-right-35 { margin-right:35px !important; }
.margin-right-40 { margin-right:40px !important; }
.margin-right-45 { margin-right:45px !important; }
.margin-right-50 { margin-right:50px !important; }

.padding-0 { padding:0 !important; }
.padding-5 { padding:5px !important; }
.padding-10 { padding:10px !important; }
.padding-15 { padding:15px !important; }
.padding-20 { padding:20px !important; }
.padding-25 { padding:25px !important; }
.padding-30 { padding:30px !important; }
.padding-35 { padding:35px !important; }
.padding-40 { padding:40px !important; }
.padding-45 { padding:45px !important; }
.padding-50 { padding:50px !important; }
.padding-top-0 { padding-top:0 !important; }
.padding-top-5 { padding-top:5px !important; }
.padding-top-10 { padding-top:10px !important; }
.padding-top-15 { padding-top:15px !important; }
.padding-top-20 { padding-top:20px !important; }
.padding-top-25 { padding-top:25px !important; }
.padding-top-30 { padding-top:30px !important; }
.padding-top-35 { padding-top:35px !important; }
.padding-top-40 { padding-top:40px !important; }
.padding-top-45 { padding-top:45px !important; }
.padding-top-50 { padding-top:50px !important; }
.padding-bottom-0 { padding-bottom:0 !important; }
.padding-bottom-5 { padding-bottom:5px !important; }
.padding-bottom-10 { padding-bottom:10px !important; }
.padding-bottom-15 { padding-bottom:15px !important; }
.padding-bottom-20 { padding-bottom:20px !important; }
.padding-bottom-25 { padding-bottom:25px !important; }
.padding-bottom-30 { padding-bottom:30px !important; }
.padding-bottom-35 { padding-bottom:35px !important; }
.padding-bottom-40 { padding-bottom:40px !important; }
.padding-bottom-45 { padding-bottom:45px !important; }
.padding-bottom-50 { padding-bottom:50px !important; }
.padding-left-0 { padding-left:0 !important; }
.padding-left-5 { padding-left:5px !important; }
.padding-left-10 { padding-left:10px !important; }
.padding-left-15 { padding-left:15px !important; }
.padding-left-20 { padding-left:20px !important; }
.padding-left-25 { padding-left:25px !important; }
.padding-left-30 { padding-left:30px !important; }
.padding-left-35 { padding-left:35px !important; }
.padding-left-40 { padding-left:40px !important; }
.padding-left-45 { padding-left:45px !important; }
.padding-left-50 { padding-left:50px !important; }
.padding-right-0 { padding-right:0 !important; }
.padding-right-5 { padding-right:5px !important; }
.padding-right-10 { padding-right:10px !important; }
.padding-right-15 { padding-right:15px !important; }
.padding-right-20 { padding-right:20px !important; }
.padding-right-25 { padding-right:25px !important; }
.padding-right-30 { padding-right:30px !important; }
.padding-right-35 { padding-right:35px !important; }
.padding-right-40 { padding-right:40px !important; }
.padding-right-45 { padding-right:45px !important; }
.padding-right-50 { padding-right:50px !important; }

.align-top { vertical-align:top; }
.align-middle { vertical-align:middle; }
.align-bottom { vertical-align:bottom; }

.write-nowrap { white-space:nowrap; }
.write-break { white-space:normal; word-break:break-all; word-wrap:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; -ms-hyphens:auto; hyphens:auto; }
.write-ellipsis { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

.text-left { text-align:left; }
.text-center { text-align:center; }
.text-right { text-align:right; }

.color-muted { color:#999; }
.color-primary { color:#0e90d2; }
.color-success { color:#5eb95e; }
.color-info { color:#3bb4f2; }
.color-warning { color:#f37b1d; }
.color-danger { color:#dd514c; }

.weight-thin { font-weight:300; }
.weight-bold { font-weight:600; }

/* ------------------------------------------------------------ */
/* 布局样式 */
/* ------------------------------------------------------------ */
@-webkit-keyframes scrollDown {
    0% { opacity:1; -webkit-transform:translateY(-5px); }
    100% { opacity:0.5; -webkit-transform:translateY(5px); }
}
@keyframes scrollDown {
    0% { opacity:1; transform:translateY(-5px); }
    100% { opacity:0.5; transform:translateY(5px); }
}

html, body { background-color:#fff; }

#fullpage { width:750px; height:100%; margin:0 auto; }

#page1 { position:relative; width:100%; height:100%; background:url("../images/page1/bg.png") no-repeat 50% 0; background-size:cover; overflow:hidden; }
#page1 .logo { position:absolute; top:50px; left:24px; }
#page1 .logo img { display:block; }
#page1 .subscribe { position:absolute; top:50px; right:24px; }
#page1 .subscribe-toggle { position:relative; display:block; width:60px; height:60px; }
#page1 .subscribe-toggle .x { position:absolute; top:12px; width:60px; height:4px; border-radius:2px; background-color:#fff; margin:auto; opacity:0.5; transition:all 70ms ease-out; }
#page1 .subscribe-toggle .y { position:absolute; top:28px; width:60px; height:4px; border-radius:2px; background-color:#fff; margin:auto; opacity:0.5; transition:all 70ms ease-out; }
#page1 .subscribe-toggle .z { position:absolute; top:44px; width:60px; height:4px; border-radius:2px; background-color:#fff; margin:auto; opacity:0.5; transition:all 70ms ease-out; }
#page1 .subscribe-toggle.open {  }
#page1 .subscribe-toggle.open .x { top:28px; transform:rotate(45deg); transition:all 100ms ease-out; }
#page1 .subscribe-toggle.open .y { display:none; }
#page1 .subscribe-toggle.open .z { top:28px; transform:rotate(135deg); transition:all 100ms ease-out; }
#page1 .subscribe-body { position:absolute; top:80px; right:-12px; display:none; width:200px; height:430px; background:url("../images/page1/subscribe.png") no-repeat 50% 0%; }
#page1 .subscribe-body .btn-subscribe { display:block; width:100%; height:68px; margin-bottom:12px; }
#page1 .subscribe-body .btn-wegame { display:block; width:150px; height:67px; background:url("../images/page1/btn-wegame.png") no-repeat 50% 50%; margin:0 auto; }
#page1 .subscribe-body .btn-steam { display:block; width:150px; height:67px; background:url("../images/page1/btn-steam.png") no-repeat 50% 50%; margin:0 auto; }
#page1 .subscribe-body .qrcode { display:block; width:142px; margin:8px auto 0; }
#page1 .slogan { position:absolute; bottom:290px; left:50%; width:750px; height:338px; background:url("../images/page1/slogan.png") no-repeat 50% 50%; transform:translateX(-50%); }
#page1 .protagonist { position:absolute; bottom:50px; left:50%; width:750px; height:230px; background:url("../images/page1/protagonist.png") no-repeat 50% 50%; transform:translateX(-50%); }
#page1 .btn-player { position:absolute; bottom:284px; left:594px; width:80px; height:84px; background:url("../images/page1/btn-player.png") no-repeat 50% 50%; }
#page1 .btn-share { position:absolute; top:72px; left:544px; width:144px; height:46px; }
#page1 .icon-down { position:absolute; bottom:24px; left:50%; z-index:1; width:124px; height:68px; background:url("../images/page1/icon-down.png") no-repeat 50% 50%; margin-left:-62px; animation:scrollDown 1s linear infinite; }

#page2 { position:relative; width:100%; height:100%; background:url("../images/page2/bg.png") no-repeat 50% 0; background-size:cover; overflow:hidden; }
#page2 .goods { position:absolute; top:300px; left:50%; width:740px; height:724px; background-repeat:no-repeat; background-position:50% 50%; margin-left:-370px; }
#page2 .goods:active { background-image:url("../images/page2/goods-shadow.png"); }
#page2 .goods img { display:block; width:100%; height:100%; }
#page2 .icon-down { position:absolute; bottom:24px; left:50%; z-index:1; width:124px; height:68px; background:url("../images/page2/icon-down.png") no-repeat 50% 50%; margin-left:-62px; animation:scrollDown 1s linear infinite; }

#page3 { position:relative; width:100%; height:100%; background:url("../images/page3/bg.png") no-repeat 50% 0; background-size:cover; overflow:hidden; }
#page3 .sect-list { display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap; padding:224px 15px 0 15px; }
#page3 .sect { width:358px; height:484px; }
#page3 .sect img { display:block; width:100%; height:100%; }
#page3 .sect:nth-child(1) { margin-top:0px; }
#page3 .sect:nth-child(1) img {  }
#page3 .sect:nth-child(2) { margin-top:0px; margin-left:4px; }
#page3 .sect:nth-child(2) img {  }
#page3 .sect:nth-child(3) { margin-top:4px; }
#page3 .sect:nth-child(3) img {  }
#page3 .sect:nth-child(4) { margin-top:4px; margin-left:4px; }
#page3 .sect:nth-child(4) img {  }
#page3 .icon-down { position:absolute; bottom:24px; left:50%; z-index:1; width:124px; height:68px; background:url("../images/page3/icon-down.png") no-repeat 50% 50%; margin-left:-62px; animation:scrollDown 1s linear infinite; }

#page4 { position:relative; width:100%; height:100%; background:url("../images/page4/bg.png") no-repeat 50% 0; background-size:cover; overflow:hidden; }
#page4 .story-list { position:absolute; top:156px; left:50%; width:682px; height:1128px; background:url("../images/page4/book.png") no-repeat 50% 0; margin-left:-341px; padding:356px 0 0 0; }
#page4 .story { display:block; width:404px; height:74px; background-repeat:no-repeat; background-position:50% 50%; margin:0 auto; }
#page4 .story:nth-child(1) { background-image:url("../images/page4/story1.png"); }
#page4 .story:nth-child(2) { background-image:url("../images/page4/story2.png"); margin-top:40px; }
#page4 .story:nth-child(3) { background-image:url("../images/page4/story3.png"); margin-top:40px; }
#page4 .story:nth-child(4) { background-image:url("../images/page4/story4.png"); margin-top:40px; }
#page4 .story:nth-child(5) { background-image:url("../images/page4/story5.png"); margin-top:40px; }
#page4 .icon-down { position:absolute; bottom:24px; left:50%; z-index:1; width:124px; height:68px; background:url("../images/page4/icon-down.png") no-repeat 50% 50%; margin-left:-62px; animation:scrollDown 1s linear infinite; }

#page5 { position:relative; width:100%; height:100%; background:url("../images/page5/bg.png") no-repeat 50% 0; background-size:cover; overflow:hidden; }
#page5 .personage { position:relative; width:100%; height:100%; z-index:1; }
#page5 .personage-container { position:relative; z-index:11; width:100%; height:100%; }
#page5 .personage-container .swiper { width:100%; height:100%; overflow:hidden; }
#page5 .personage-container .swiper-wrapper {  }
#page5 .personage-container .swiper-wrapper .swiper-slide {  }
#page5 .personage-container .swiper-wrapper .swiper-slide img { display:block; width:100%; height:100%; }
#page5 .personage-pagination { position:absolute; bottom:140px; left:50%; z-index:12; display:flex; justify-content:space-around; align-items:center; width:472px; margin-left:-236px; }
#page5 .personage-pagination .personage-pagination-bullet { display:block; width:216px; height:216px; background-repeat:no-repeat; background-position:50% 50%; }
#page5 .personage-pagination .personage-pagination-bullet:nth-child(1) { background-image:url("../images/page5/pagination-bullet1.png"); }
#page5 .personage-pagination .personage-pagination-bullet:nth-child(2) { background-image:url("../images/page5/pagination-bullet2.png"); }
#page5 .personage-pagination .personage-pagination-bullet-active { filter:drop-shadow(0px 0px 20px rgba(208,198,182,1)); }
#page5 .icon-down { position:absolute; bottom:24px; left:50%; z-index:1; width:124px; height:68px; background:url("../images/page5/icon-down.png") no-repeat 50% 50%; margin-left:-62px; animation:scrollDown 1s linear infinite; }

#page6 { position:relative; width:100%; height:100%; background:url("../images/page6/bg.png") no-repeat 50% 0; background-size:cover; overflow:hidden; }
#page6 .wallpaper-list { width:100%; height:100%; }
#page6 .wallpaper { position:absolute; top:0; bottom:0; left:0; right:0; display:none; width:100%; height:100%; }
#page6 .wallpaper img { display:block; width:100%; height:100%; object-fit:cover; }
#page6 .feature { position:absolute; top:680px; left:50%; z-index:1; width:710px; height:360px; border-width:14px 20px; border-style:solid; border-color:transparent; background:url("../images/page6/iframe.png") no-repeat 50% 50%; margin-left:-355px; }
#page6 .feature-container { position:relative; z-index:11; width:100%; height:100%; }
#page6 .feature-container .swiper { width:100%; height:100%; overflow:hidden; }
#page6 .feature-container .swiper-wrapper {  }
#page6 .feature-container .swiper-wrapper .swiper-slide {  }
#page6 .feature-container .swiper-wrapper .swiper-slide img { display:block; width:100%; height:100%; }
#page6 .feature-pagination { position:absolute; top:374px; left:50%; z-index:12; display:flex; justify-content:center; align-items:center; transform:translateX(-50%); }
#page6 .feature-pagination .feature-pagination-bullet { display:block; width:14px; height:14px; background:url("../images/page6/pagination-bullet.png") no-repeat 50% 50%; margin:0 6px; }
#page6 .feature-pagination .feature-pagination-bullet-active { background-image:url("../images/page6/pagination-bullet-active.png"); }
#page6 .feature-button-prev,
#page6 .feature-button-next { position:absolute; top:420px; z-index:12; width:58px; height:42px; background-repeat:no-repeat; background-position:50% 50%; background-size:100% 100%; margin-top:0; }
#page6 .feature-button-prev { left:230px; background-image:url("../images/page6/btn-prev.png"); }
#page6 .feature-button-next { right:230px; background-image:url("../images/page6/btn-next.png"); }

.ui-modal.unset-bg-or-overflow { background:none; }
.ui-modal.unset-bg-or-overflow .ui-modal-body { overflow:visible; }

.modal-subscribe { position:relative; }
.modal-subscribe .modal-subscribe-body { position:relative; width:604px; height:576px; background:url("../images/subscribe/bg.png") no-repeat 50% 0; padding:220px 146px 0 146px; }
.modal-subscribe .modal-subscribe-body .input { display:flex; justify-content:flex-start; align-items:center; width:298px; height:60px; background:url("../images/subscribe/input.png") no-repeat 50% 50%; margin:0 auto; padding:6px; }
.modal-subscribe .modal-subscribe-body .input input { flex:1; display:block; width:0; height:100%; border:none; background-color:transparent; padding:0 12px; color:#000; font-size:28px; text-align:left; }
.modal-subscribe .modal-subscribe-body .input .btn-captcha { display:block; min-width:164px; height:100%; background-color:#71746d; padding:0 12px; color:#fff; font-size:28px; text-align:center; line-height:48px; }
.modal-subscribe .modal-subscribe-body .input .btn-captcha.disabled { pointer-events:none; cursor:not-allowed; color:#b3b3b3; }
.modal-subscribe .modal-subscribe-body .btn-submit { display:block; width:312px; height:90px; background:url("../images/subscribe/btn-submit.png") no-repeat 50% 50%; margin:48px auto 0; overflow:hidden; text-align:center; line-height:1000px; }
.modal-subscribe .modal-subscribe-body .btn-submit:active { filter:brightness(0.8); }
.modal-subscribe .modal-subscribe-btn-close { position:absolute; top:-20px; right:-20px; width:78px; height:78px; background:url("../images/subscribe/btn-close.png") no-repeat 50% 50%; }

.modal-player { position:relative; }
.modal-player .modal-player-body { position:relative; width:596px; height:280px; background-color:#000; }
.modal-player .modal-player-body iframe { display:block; width:100%; height:100%; border:none; }
.modal-player .modal-player-btn-close { position:absolute; top:-20px; right:-20px; width:78px; height:78px; background:url("../images/page1/modal/share/btn-close.png") no-repeat 50% 50%; }

.modal-share { position:relative; }
.modal-share .modal-share-body { position:relative; width:596px; height:396px; background:url("../images/page1/modal/share/bg.png") no-repeat 50% 0; }
.modal-share .modal-share-body img { position:absolute; top:168px; left:326px; display:block; width:138px; height:138px; }
.modal-share .modal-share-btn-close { position:absolute; top:50px; right:-20px; width:78px; height:78px; background:url("../images/page1/modal/share/btn-close.png") no-repeat 50% 50%; }

.modal-quiz { position:relative; }
.modal-quiz .modal-quiz-body { position:relative; width:604px; height:1076px; background-color:#5f4736; background-repeat:no-repeat; background-position:50% 0; }
.modal-quiz .modal-quiz-btn-close { position:absolute; top:-20px; right:-20px; width:78px; height:78px; background:url("../images/page2/modal/quiz/btn-close.png") no-repeat 50% 50%; }
.modal-quiz-question {  }
.modal-quiz-question .modal-quiz-body { background-image:url("../images/page2/modal/quiz/bg-question.png"); padding:300px 120px 0 120px; }
.modal-quiz-question .modal-quiz-body .form { display:block; }
.modal-quiz-question .modal-quiz-body .form-label { display:block; color:#fff; font-size:30px; text-align:center; text-shadow:-2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000; }
.modal-quiz-question .modal-quiz-body .form-control { display:block; margin-top:32px; }
.modal-quiz-question .modal-quiz-body .question {  }
.modal-quiz-question .modal-quiz-body .question-title { color:#000; font-size:24px; text-align:left; line-height:32px; }
.modal-quiz-question .modal-quiz-body .question-answer { margin-top:32px; }
.modal-quiz-question .modal-quiz-body .btn-answer { display:block; width:312px; height:90px; background:url("../images/page2/modal/quiz/btn-answer.png") no-repeat 50% 50%; margin:80px auto 0; overflow:hidden; text-align:center; line-height:1000px; }
.modal-quiz-question .modal-quiz-body .btn-answer:active { filter:brightness(0.8); }
.modal-quiz-question .modal-quiz-body .btn-next { display:block; width:312px; height:90px; background:url("../images/page2/modal/quiz/btn-next.png") no-repeat 50% 50%; margin:80px auto 0; overflow:hidden; text-align:center; line-height:1000px; }
.modal-quiz-question .modal-quiz-body .btn-next:active { filter:brightness(0.8); }
.modal-quiz-question .modal-quiz-body .progress { width:300px; margin:16px auto 0; }
.modal-quiz-question .modal-quiz-body .progress-track { height:12px; border:1px solid #000; border-radius:12px; background-color:#fff; }
.modal-quiz-question .modal-quiz-body .progress-thumb { height:100%; border-radius:10px; background-color:#c55a11; }
.modal-quiz-question .modal-quiz-body .progress-text { margin-top:8px; color:#000; font-size:20px; text-align:center; }
.modal-quiz-question .modal-quiz-body .radio-group { display:block; }
.modal-quiz-question .modal-quiz-body .radio { display:block; border:1px solid #000; border-radius:30px; background-color:#b7b7b7; padding:12px; color:#000; font-size:24px; text-align:center; line-height:32px; }
.modal-quiz-question .modal-quiz-body .radio + .radio { margin-top:24px; }
.modal-quiz-question .modal-quiz-body .radio:active,
.modal-quiz-question .modal-quiz-body .radio.active { background-color:#fff; box-shadow:0 0 15px 5px #efed59 inset; }
.modal-quiz-report {  }
.modal-quiz-report .modal-quiz-body { position:relative; }
.modal-quiz-report .modal-quiz-body img { display:block; width:100%; height:100%; }
.modal-quiz-report .modal-quiz-body .btn-subscribe { position:absolute; top:914px; left:50px; display:block; width:312px; height:90px; background:url("../images/page2/modal/quiz/btn-subscribe.png") no-repeat 50% 50%; overflow:hidden; text-align:center; line-height:1000px; }
.modal-quiz-report .modal-quiz-body .btn-subscribe:active { filter:brightness(0.8); }
.modal-quiz-report .modal-quiz-body .qrcode { position:absolute; top:870px; right:56px; width:124px; }
.modal-quiz-report .modal-quiz-body .qrcode .qrcode-body { height:124px; }
.modal-quiz-report .modal-quiz-body .qrcode .qrcode-body img { display:block; width:100%; height:100%; }
.modal-quiz-report .modal-quiz-body .qrcode .qrcode-footer { margin-top:8px; color:#fff; font-size:20px; text-align:center; line-height:30px; }

.modal-sect { position:relative; }
.modal-sect .modal-sect-body { position:relative; width:714px; height:960px; }
.modal-sect .modal-sect-body img { display:block; width:100%; height:100%; }
.modal-sect .modal-sect-btn-close { position:absolute; top:-20px; right:-20px; width:78px; height:78px; background:url("../images/page3/modal/sect/btn-close.png") no-repeat 50% 50%; }

.modal-story { position:relative; }
.modal-story .modal-story-body { position:relative; width:704px; height:1080px; background:url("../images/page4/modal/story/bg.png") no-repeat 50% 0; }
.modal-story .modal-story-body .article { position:absolute; top:150px; left:70px; right:70px; }
.modal-story .modal-story-body .article-header { color:#000; font-size:36px; text-align:center; line-height:1; }
.modal-story .modal-story-body .article-body { height:790px; margin-top:20px; background-color:#fff; overflow:auto; }
.modal-story .modal-story-body .article-body img { display:block; width:100%; }
.modal-story .modal-story-btn-close { position:absolute; top:24px; right:-16px; width:78px; height:78px; background:url("../images/page4/modal/story/btn-close.png") no-repeat 50% 50%; }