/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}/* global.css */

/*所有通用設定-----------------------------------------------------------------------*/
/*border-box-------------*/
* { 
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}

html{ height:100%;
-webkit-text-size-adjust:none;/*修正旋轉後文字會變大*/
-webkit-overflow-scrolling:touch; /*修正ios滾動順暢*/
 word-break: break-all;
 }

body{ font-family:"微軟正黑體", Microsoft YaHei, Verdana, Geneva, sans-serif; font-size:15px; line-height:1.7; font-weight:normal; color:#272727;}

/*預設連結狀態*/
a:link, a:visited{ text-decoration:none; color:#1b82ca;}
a:hover, a:active{ text-decoration:none; color:#134b87;}

/*圖片無框*/
a img { border:none;}

/*去除圖片底下空白*/
img{vertical-align: bottom; } 

/*ul*/
ul, ol{list-style-type:none}

/*h標題設定*/
h1 { font-size:20px; font-weight:normal;}
h2 { font-size:20px; font-weight:normal;}
h3 { font-size:16px; font-weight:normal;}
h4 { font-size:14px; font-weight:normal;}
h5 { font-size:13px; font-weight:normal;}

/*選取*/
::selection { background:#5ac3e1; color:#fff; }

/*清除 clearfix*/
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {*zoom: 1; _zoom: 1; }

/*清除 clear*/
.clear{ clear:both;}

/*more基本型*/
.more_box{ clear:both;}
a.more{ display:block; height:30px; line-height:30px; padding-right:25px; font-size:15px; text-align:right; color:#666;}
a.more:hover, a.more:active{ color:#333;}
.more_box a.more{ margin-bottom:10px;}

/* .gototop 滾回網頁最上面 ============*/
.gototop{ width:45px; height:45px; text-indent:-9999px; background:url(../images/gototop.png) no-repeat; background-size:45px 45px; border-radius:5px; opacity:0.9; position:fixed; bottom:25px; right:15px; cursor:pointer; z-index:10; display:none; }





@charset "utf-8";
/* CSS Document */
/* ============================= 版型 =============================*/
@keyframes bg_ani {
    0%, 100%{
        background-position: center 30%;
    }
    50% {
        background-position: center 50%;
    }
}
body, html { width:100%; height:100vh;}
body { background:#000611 url(../images/bg.jpg) no-repeat center center; background-size:100% auto; animation: bg_ani 8s infinite ease-in-out;}
.wrapper { max-width:1366px; height:100vh; margin:0 auto; padding:60px 20px 20px 20px; position: relative;}
.header { width:350px; height:78px; margin-bottom:40px;}
.nav { width:200px; float:left; text-align: center;}
.container { width:calc(100% - 230px); height:500px; float:left; position: relative;}
.header a { display:block; width:100%; height:100%; background:url(../images/logo_header.png) no-repeat; background-size:100% auto;}


/*選單 ====================*/
.result .nav { display:none;}
.nav.mobile_hide { display:block;}
.nav a.btn { display:inline-block; width:170px; height:60px; text-indent:-9999px; margin-bottom:20px; transition:0.2s;
background:url(../images/bg_nav.png) no-repeat center top; background-size:100% auto;}
.nav a.btn:hover { width:180px; height:65px; background-size:101% auto;}
.nav a.btn.btn_1 { background-position:center 0;}
.nav a.btn.btn_2 { background-position:center 20%;}
.nav a.btn.btn_3 { background-position:center 40%;}
.nav a.btn.btn_4 { background-position:center 60%;}
.nav a.btn.btn_5 { background-position:center 80%;}
.nav a.btn.btn_6 { background-position:center 100%;}
.nav a.message { display:inline-block; width:200px; height:120px; background:url(../images/message.gif); background-size:100% auto;}


/* ============================= 題目頁 =============================*/
/*影音 ====================*/
.video_box { width:925px; height:500px; margin:0 auto; position: relative;}
.video_box:after { content:""; display:block; width:1130px; height:730px; position:absolute; left:-115px; top:-130px;
background:url(../images/bg_video.png) no-repeat center center; background-size:100% auto; margin:0 auto;}
.video_box p.loading_txt { display:block; font-size:24px; color:rgba(255,255,255,0.5); position:absolute; left:calc(50% - 50px); top:calc(50% - 40px);} 
.video_box video { max-width:100%; height:auto; }


/*題目 ====================*/
.question { width:950px; height:150px; background:url(../images/question_list.png) no-repeat center center; background-size:100% auto;
position: absolute; left:70px; top:-80px;}
.question.q1 { background-position: center 0;}
.question.q2 { background-position: center 25%;}
.question.q3 { background-position: center 50%;}
.question.q4 { background-position: center 75%;}
.question.q5 { background-position: center 100%;}


/*答案 ====================*/
.answer { width:960px; position:absolute; left:80px; bottom:-100px;}
.answer a { display: inline-block; width:49%; height:120px; background:url(../images/answer_list.png) no-repeat left center; background-size:200% auto;}
.answer a:hover { background-image:url(../images/answer_list_hover.png);}
.answer a.btn_1 { background-position-x: left;}
.answer a.btn_2 { background-position-x: right;}

.answer.a1 a { background-position-y: 0;}
.answer.a2 a { background-position-y: 25%;}
.answer.a3 a { background-position-y: 50%;}
.answer.a4 a { background-position-y: 75%;}
.answer.a5 a { background-position-y: 100%;}

/*倒數 ====================*/
#num_time { width:100px; height:130px; position: absolute; right:-40px; bottom:-90px;
background:url(../images/num_time.png) no-repeat right center; background-size:auto 100%;}
#num_time.num_9 { background-position-x: calc(100% / 9 * 9);}
#num_time.num_8 { background-position-x: calc(100% / 9 * 8);}
#num_time.num_7 { background-position-x: calc(100% / 9 * 7);}
#num_time.num_6 { background-position-x: calc(100% / 9 * 6);}
#num_time.num_5 { background-position-x: calc(100% / 9 * 5);}
#num_time.num_4 { background-position-x: calc(100% / 9 * 4);}
#num_time.num_3 { background-position-x: calc(100% / 9 * 3);}
#num_time.num_2 { background-position-x: calc(100% / 9 * 2);}
#num_time.num_1 { background-position-x: calc(100% / 9 * 1);}
#num_time.num_0 { background-position-x: calc(100% / 9 * 0);}

/*下一頁 ====================*/
.next { width:420px; height: 180px; opacity:0; transition:3s; position:absolute; top:-40px; right:0; bottom:0; left:0; margin:auto;}
.next a { display:inline-block; width:150px; height:182px; background:url(../images/btn_replay.png) no-repeat center center; background-size:100% auto;
margin-right:25%; text-indent:-9999px;}
.next a:hover { background-size:101% auto;}
.next a:nth-of-type(1) { }
.next a:nth-of-type(2) { background-image:url(../images/btn_go_story.png); margin-right:0;}


/*1366px*/
@media only screen and (max-width:1366px){
    body { background-size:115% auto;}
    .wrapper{ transform:scale(0.85); padding:0; position: relative; top:-40px;}
    .container{ top:20px;}
    .question { left:90px;}
    .answer { left:85px;}
}
/*1220px*/
@media only screen and (max-width:1220px){
    body { background-size: auto 100%;}
    .video_box { left:70px;}
    .result .story { left:48px;}
    #num_time { bottom:-150px;}
}
/*1024px*/
@media only screen and (max-width:1024px){
    .container{ transform:scale(0.75); left:-50px;}
    #num_time { right:-200px;}
    .next { left: 150px;}
}
/*768px*/
@media only screen and (max-width:768px){
     @keyframes bg_ani {
        0%, 100%{
            background-position: center 20%;
        }
        50% {
            background-position: center 60%;
        }
    }
    body { background-size: auto 120%; overflow: hidden;}
    .wrapper { transform:scale(1); padding-top:230px; overflow: hidden; position: static;} 
    .header { width:500px; height:140px; position:absolute; top:45px; right:-9999px; bottom:0px; left:-9999px; margin:0 auto;}
    .header a { background-image: url(../images/logo_header_m.png);}
    .container { width:100%; top:10px; left:-70px; transform:scale(0.75);}
    .nav { display:flex; display:none; justify-content:center; flex-direction: column ; width:100%; height:100%; z-index:100; overflow:hidden;
        background:rgba(0,0,0,0.98); position:fixed; left:0; top:0; padding:40px;}
    .nav.mobile_hide { display:none;}
    .nav.mobile_hide.show { display:flex;}
    .nav a.btn { display:block; width:180px; height:70px; margin:0 auto 15px auto;}
    .nav a.btn:hover { width:180px; background-size:100% auto;}
    .nav a.message { width:100px; height:60px; margin: 0 auto;}
    #btn_switch { width:50px; height:40px; position:fixed; left:40px; top:40px;
    background:url(../images/btn_nav.png) left center no-repeat; background-size: 90% auto; z-index:200;} 
    #btn_switch.btn_close { background-image: url(../images/btn_nav_close.png);}
    .video_box { left:0px;}
    .question { background-image:url(../images/question_list_m.png); left:0px; top:-180px;}
    .answer { transform:scale(0.8); left:-10%; bottom:-320px;}
    .answer.a2{ left: 0%;}
    .answer a { width:100%; height:100px; left:0px; background-image:url(../images/answer_list_m.png); margin-bottom:20px;}
    .answer a:hover { background-image:url(../images/answer_list_hover_m.png);}
    #num_time { bottom:-240px;}
} 
/*640px*/
@media only screen and (max-width:640px){
    .wrapper {} 
    .header { top: 0px;}
    .container { transform:scale(0.65); left:-110px; top:-50px;}
    .question { top:-150px;}
    #num_time { right:-330px; bottom:-350px;}
    .next { border-style color;}
}
/*480px*/
@media only screen and (max-width:480px){
    .container { transform:scale(0.5); left:-125px;}
     .wrapper { padding-top: 190px;}  
     .header { transform:scale(0.9); top: 10px;} 
    .nav a.btn { width:100px; height:35px;}
    #btn_switch { left:15px; top:15px;}
    #num_time { right:-500px;}
}
/*414px*/
@media only screen and (max-width:414px){
    .wrapper {} 
    .container { transform:scale(0.42); left:-108px; top:-130px;}
    .header { transform:scale(0.7);}
    #num_time { right:-540px;}
    .question { top:-210px;}
    .answer { transform:scale(1); left:-25%;}
    .answer.a4 { left:-9%;}
    .next { left:calc(50% + 50px);}
}
/*375px*/
@media only screen and (max-width:375px){
    .container { transform:scale(0.38);top:-175px;}
    #num_time { right:-575px;}
    .question { top:-170px;}
    .next {}
}
/*320px*/
@media only screen and (max-width:320px){
    .container { transform:scale(0.35); top:-150px;}
    .wrapper { padding-top: 150px;} 
    .header { transform:scale(0.65);} 
    #num_time { bottom:-330px;}
    .next { left: 250px;}
}


/* ============================= loading =============================*/
/*loading  ====================*/
.loading { display:flex; justify-content:center; width:100%; height:100vh; position:fixed; left:0; top:0; display:none;}
.loading .ghost_box { align-self: center; width:150px; height:428px; position: relative;}
.loading .ghost_box .ghost { width:150px; height:428px; background:url(../images/loading_ghost.png) no-repeat center center; background-size:100% auto;
 animation: ghost_ani 2s infinite ease-in-out; position: relative; top:0;}
.loading .ghost_box .shadow { content:""; display:block; width:500px; height:190px; background:url(../images/loading_shadow.png); background-size:100% auto;
position: absolute; left:-200px; bottom:-85px;}
.loading .ghost_box .fog { width:400px; height:313px; background:url(../images/loading_fog.png) no-repeat center center; background-size:100% auto;
position: absolute; left:-110px; bottom:-70px; animation: fog_ani 6s infinite ease-in-out;}
.loading .ghost_box .text { width:180px; height:100px; background:url(../images/loading_text.png) no-repeat center center; background-size:100% auto;
position: absolute; left:-15px; bottom:200px; animation: text_ani 1.8s infinite ease-in-out;}
@keyframes text_ani {
    0%, 100% {
        opacity:0.7;
    }
    50% {
        opacity:1;
    }
}
@keyframes ghost_ani {
    0%, 100% {
        top:0;
    }
    50% {
        top:-10px;
    }
}
@keyframes fog_ani {
    0%, 100%  {
        left:-110px;
        opacity: 0.8;
    }
    25%, 75%{
        opacity: 0.2;
    }
    50% {
        left:-130px;
        opacity: 0.8;
    }
}

/*768px*/
@media only screen and (max-width:768px){
    .loading { transform:scale(0.7);}
}
/*480px*/
@media only screen and (max-width:480px){
    .loading { transform:scale(0.5);}
}

/*圓圈動畫 ====================*/
.spinner { position: absolute; left:35px; top:230px;}
.spinner.small div { height: 8px; width: 8px;}
.spinner > div { display: inline-block; width: 13px; height: 13px; margin-right:15px; background-color: #a60000; border-radius: 50%; 
box-shadow:0 0 10px rgba(255,255,255,0.5); -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both;}

.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s;}
.spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s;}
@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}/* ============================= 結果頁 =============================*/
/* 框框 */
body.result .video_box { background:rgba(0,0,0,0.5); padding-top:30px;}

/* 文章 ====================*/
body.result .story { width:860px; height:410px; overflow: auto;
position: absolute; left:125px; top:35px;}
body.result .story img { max-width:100%; height:auto;}
body.result .story .mobile { display:none;}
body.result .story .pc { }
body.result .story .iScrollVerticalScrollbar { opacity:0.5;}


/*標題 ====================*/
body.result .title_result { width:1000px; height:150px; position: absolute; left:100px; top:-80px; z-index:20;}
body.result .title_result span { display:inline-block; width:250px; height:114px; background:url(../images/result_title.png) no-repeat center top; background-size:100% auto;}
body.result .title_result #hand { display:inline-block; width:0; height:140px; background:url(../images/result_hand.png) repeat-x left top; background-size:auto 100%;
position: relative; left:0px; bottom:30px;}

/*手印 ====================*/
body.result .title_result #hand.width_0 { width:calc(570px / 5 * 0);}
body.result .title_result #hand.width_1 { width:calc(570px / 5 * 1);}
body.result .title_result #hand.width_2 { width:calc(570px / 5 * 2);}
body.result .title_result #hand.width_3 { width:calc(570px / 5 * 3);}
body.result .title_result #hand.width_4 { width:calc(570px / 5 * 4);}
body.result .title_result #hand.width_5 { width:calc(570px / 5 * 5);}
body.result .title_result #hand.width_6 { width:calc(570px / 5 * 6);}

/*按鈕 ====================*/
body.result .btn_result { width:960px; position:absolute; left:50px; bottom:-100px;}
body.result .btn_result a { display: inline-block; width:470px; height:120px; background:url(../images/btn_result.png) no-repeat center center; background-size:200% auto; text-indent:-9999px;}
body.result .btn_result a:nth-of-type(1) { background-position-x: left;}
body.result .btn_result a:nth-of-type(2) { background-position-x: right;}

/*1220px*/
@media only screen and (max-width:1220px){
}
/*768px*/
@media only screen and (max-width:768px){
    body.result { background:url(../images/bg_mobile.jpg); background-size:100% auto; animation:none;}
    body.result .wrapper { padding-top:160px;}
    body.result .header { top: 0px;}
    body.result .container { width:100%; height:65vh; transform:scale(1); left:0; top:20px;}
    body.result .video_box { height:65vh; background:none;}  
    body.result .video_box:after { display: none;}
    body.result .story { width:100%; height:100%; left:0; top:0px; padding:0 40px;}
    body.result .story .mobile { display:block;}
    body.result .story .pc { display:none;}
    body.result .title_result { transform: scale(0.6); left:-170px; top:-100px;}
    body.result .btn_result { transform:scale(0.8); left:-120px; bottom:-110px;}
}
/*640px*/
@media only screen and (max-width:640px){
    body.result .container { top:45px;}
}
/*480px*/
@media only screen and (max-width:480px){
    body.result .title_result { transform: scale(0.5); left:-245px; }
}
/*414px*/
@media only screen and (max-width:414px){
    
    body.result .header { top: -30px;}
    body.result .container { height:65vh; transform:scale(0.95); top:-40px; /*border:1px solid green;*/}
    body.result .story { padding:0 5px; /*border:1px solid red;*/}
    body.result .title_result { transform: scale(0.4); left:-290px; top:-100px;}
    body.result .btn_result { transform:scale(0.55); left:-260px; bottom:-100px;}
    body.result .btn_result a { width:450px; height:140px; background-size:250% auto;}

}
/*375px*/
@media only screen and (max-width:375px){
    body.result .wrapper { padding-top:180px;}
    body.result .header { transform:scale(0.65);}
    body.result .container { height:60vh; top:-70px;}
    body.result .title_result { transform: scale(0.35); left:-320px; top:-90px;}
    body.result .btn_result { left:-280px; bottom:-110px;}
}
/*320px*/
@media only screen and (max-width:320px){
    body.result .header { transform:scale(0.55);}
    body.result .container { height:57vh;}
    body.result .btn_result { transform:scale(0.4); left:-300px; bottom:-110px;}
}