@charset "utf-8";
/*--- reset ---*/
body,dl,dt,dd,ul,ol,li,th,td,form,input,textarea,p {margin:0; padding:0;}
img {display:block; border:0;}
li {list-style:none}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
article,aside,canvas,figure,figure img,figcaption,footer,header,hgroup,menu,nav,section,audio,video {display:block; margin:0; padding:0;}

/*--- global ---*/
html {overflow-y:scroll; background-color:#222; background-image:url("../images/bg.jpg"); background-attachment:fixed;}
body {text-align:center; font-size:16px; line-height:20px; font-family:"微軟正黑體", "Microsoft JhengHei", sans-serif; color:#333;}
h1,h2,h3,h4,h5,h6 {margin:0; line-height:23px;}
p {text-align:justify; text-justify:distribute; margin-bottom:12px;}
table {border-collapse:collapse; border-spacing:0; table-layout:fixed; border:1px solid #000;}
th {border:1px solid #000;}
td {border:1px solid #000;}
a {outline:none; text-decoration:none;}
.clear {clear:both;}
input {vertical-align:middle;}

/*--- iScroll test ---*/
#scrollwpr {width:100%; height:100%; position:absolute; left:0; top:0; overflow:hidden;
background-color:rgba(255,0,0,0.2);
}

/*--- wrapper ---*/
.outerWpr {position:relative; max-width:1280px; margin:0 auto; overflow:hidden;
box-shadow:0 0 20px rgba(0,0,0,0.8);
}
.centerwpr {margin:0 auto; max-width:1280px; position:relative; text-align:left;}
.centerwpr a:hover, a:link, a:visited {color: #a8978c;}

#slideWpr {position:relative; left:0;
transition:left 500ms; box-shadow:0 0 20px rgba(0,0,0,0.8);
-webkit-transform: translateZ(0);
}
#slideWpr.slide {left:-300px;}

/* --- nav ---*/
#navwpr {position:fixed; top:-60px; left:0; width:100%; height:55px; z-index:9999;
transition:top 300ms;
}
#navwpr.sticky {top:0;}

#navwpr .centerwpr {max-width:1280px; height:100%;
background-color:#222; color:#999;
background-image:url("../images/bg-nav.jpg");
box-shadow:inset 0 0 10px rgba(0,0,0,0.3),0 0 8px rgba(0,0,0,0.6),0 0 4px rgba(0,0,0,0.3);
}

#navwpr .logo {display:block; width:140px; height:100%; position:absolute; left:0; top:0;
font-size:0; line-height:0;
background-image:url("../images/nav-logo2x.png"); background-repeat:no-repeat; background-position:center 10px; background-size:103px auto;
background-color:rgba(22,22,22,0.2); box-shadow:inset 0 0 12px rgba(0,0,0,0.3);
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
#navwpr .logo:after {content:""; display:block; width:1px; height:100%; position:absolute; right:0; top:0;
background-color:#171617; border-right:1px solid #3d3631;
}

.navTrigger {width:100px; height:100%; position:absolute; right:0; top:0; cursor:pointer;
-webkit-tap-highlight-color:rgba(255,255,255,0); padding-left:20px;
}
.navTrigger .icon {width:30px; height:4px; position:absolute; right:15px; top:50%; margin-top:-2px;
background-color:#846354; border-radius:2px; box-shadow:0 0 2px rgba(0,0,0,0.3);
background-color:#a78675;
transition:transform 300ms;
}
.navTrigger:hover .icon {transform:rotate(90deg);}

.navTrigger .icon:before {content:""; display:block; width:30px; height:4px; position:absolute; left:0; top:-9px;
background-color:#846354; border-radius:2px; box-shadow:0 0 2px rgba(0,0,0,0.3);
transition:250ms; transition-property:transform;
background-color:#a78675;
}
.navTrigger .icon:after {content:""; display:block; width:30px; height:4px; position:absolute; left:0; bottom:-9px;
background-color:#846354; border-radius:2px; box-shadow:0 0 2px rgba(0,0,0,0.3);
transition:250ms; transition-property:transform;
background-color:#a78675;
}

.navTrigger.active .icon {background-color:transparent !important;}
.navTrigger.active .icon:before {transform:rotate(45deg); top:0;}
.navTrigger.active .icon:after {transform:rotate(-45deg); bottom:0;}

.navTrigger .text {display:block;
font-size:15px; font-weight:bold; line-height:55px; color:#846354; font-family:Tahoma; color:#a78675;
text-shadow:0 0 2px rgba(0,0,0,0.3);
transition:opacity 250ms;
}
.navTrigger.active .text {opacity:0;}

/* expand the trigger area */
.navTrigger:after {content:""; display:none; width:100%; height:30px; position:absolute; right:0; bottom:-20px;}

/* --- header ---*/
.header {position:relative;
background-image:url("../images/bg-cave.jpg"); background-repeat:no-repeat; background-size:100% auto; background-position:center bottom;
}
.header:after {content:""; display:block; width:100%; height:100%; position:absolute; left:0; bottom:0; pointer-events:none; z-index:200;
background-image:url("../images/bg-guard.png"); background-repeat:no-repeat; background-size:100% auto; background-position:center bottom;
max-width:1280px;
}

.header .bgwpr {overflow:hidden; position:absolute; left:0; top:0;}
.header .bgwpr:after {content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; pointer-events:none;
background-image:url("../images/lefthand.png"); background-repeat:no-repeat; background-size:100% auto; background-position:center top;
}
.bgwpr img {width:100%;}

.header .contentwpr {position:relative; z-index:300; overflow:hidden;
padding-top:55%; padding-bottom:14%;
}

.header .subtitle {width:100%; margin-bottom:5px;}
.header .intro {padding-left:24%; padding-right:24%;}
.header .intro p {font-size:20px; line-height:150%; color:#a58d7f;
text-shadow:0 0 4px rgba(0,0,0,0.8);
}

/* --- sidebar menu ---*/
#menuWpr {width:100%; height:100%; position:fixed; top:0; left:0; overflow:hidden; pointer-events:none;
}
#menuWpr.active {pointer-events:auto;}
#menuWpr .centerwpr {height:100%; opacity:0;
transition:opacity 500ms;
}
#menuWpr.active .centerwpr {opacity:1;}
#menuWpr .centerwpr:before {content:""; display:block; width:300px; height:100%; position:absolute; right:0; top:0;
background-color:rgba(0,0,0,0.1); box-shadow:inset 0 0 10px rgba(0,0,0,0.3);
}

#sidebar {width:300px; height:calc(100% - 55px); position:absolute; right:0; top:55px; overflow:hidden;}

.scrollContent {padding:25px 0; color:#846354; overflow:hidden;}
.scrollContent:after {content:""; display:table; clear:both;}

#menuWpr .navTrigger {height:55px; pointer-events:none; z-index:9999;}
#menuWpr .navTrigger.active {pointer-events:auto;}
#menuWpr .navTrigger .icon {opacity:0;}
#menuWpr .navTrigger.active .icon {opacity:1;}

#menuWpr .navTrigger .icon:before, #menuWpr .navTrigger .icon:after {}
#menuWpr .navTrigger.active .icon:before, #menuWpr .navTrigger.active .icon:after {}

#sidebar h1 {margin-bottom:6px; padding-left:30px;
color:#a78675; font-size:28px;
}
#sidebar h2 {margin-bottom:10px; padding-bottom:10px; padding-left:30px;
font-size:21px; font-weight:normal; color:#947261; font-style:italic;
}
#sidebar h2:before {content:"— ";}

.nav {position:relative; margin-bottom:20px; }
.nav a {display:block; padding:15px 25px 15px 80px; position:relative; z-index:200;
text-shadow:0 0 4px #000;
}

.nav:before {content:""; display:block; width:12px; height:calc(100% - 55px); position:absolute; left:38px; top:20px; opacity:0.5;
background-color:#5b4f4b; box-shadow:inset 0 0 2px rgba(34,22,18,0.6),inset 0 0 6px rgba(0,0,0,0.3),0 0 4px #000;
}

.nav .name {padding-left:8px; margin-bottom:4px; height:17px; position:relative;
color:#aeaeae; font-size:15px; line-height:17px; font-family:Arial;
border-left:4px solid #7d4038;
}
.nav a:hover .name {color:#d6d6d6; border-left:4px solid #90473d;}
.nav .current .name {color:#fff !important;
border-left:4px solid #a44e43 !important;
}
.nav .name:before {content:""; display:block; width:30px; height:30px; position:absolute; left:-55px; top:50%; margin-top:-7px;
background-color:#675851; border-radius:32px;
box-shadow:0 0 0 2px rgba(34,22,18,0.8),0 0 4px rgba(0,0,0,0.8);
}
.nav a:hover .name:before {background-color:#876f63;}
.nav .current .name:before {background-color:#a78675 !important;}

.nav .name:after {content:""; display:block; width:18px; height:18px; position:absolute; left:-49px; top:50%; margin-top:-1px;
background-color:#1d1c1a; border-radius:18px;
box-shadow:inset 0 0 2px rgba(34,22,18,0.8);
}

.nav .title {font-size:17px; color:#86675d; font-weight:bold;}
.nav a:hover .title {color:#9a7a6d;}
.nav .current .title {color:#ae8e7d !important;}

.shareBtnwpr {float:left; position:relative; left:50%;}
.shareBtnwpr:after {content:""; display:table; clear:both;}
h3.share {height:24px; margin-bottom:3px; z-index:0;
color:#fff; line-height:24px; font-size:13px; text-align:center; font-family:Tahoma; font-weight:normal;
background-color:#1d3757;
}
.shareBtnwpr .btn {display:block; width:66px; height:80px; position:relative; float:left; right:50%; margin-right:8px;}
.shareBtnwpr .btn.line {margin-right:0;}
.shareBtnwpr .btn i {display:block; width:46px; height:46px; position:absolute; left:50%; top:10px; margin-left:-23px;
font-size:0; line-height:0; border-radius:46px;
background-image:url("../images/socialbtn.png"); background-repeat:no-repeat; background-size:30px auto;
}
#navwpr .centerwpr .shareBtnwpr {
  position: absolute;
  top: 0;
  left: 140px;
}
#navwpr .centerwpr .shareBtnwpr .btn {display:block; width:66px; height:80px; position:relative; float:left; right: auto; margin-right:-15px;}
#navwpr .centerwpr .shareBtnwpr .btn i {
  width:35px; height:35px;
}
.shareBtnwpr .facebook i {background-color:#1e6ba9; background-position:17px 13px;}
.shareBtnwpr .weibo i {background-color:#ae313f;  background-position:9px -65px;}
.shareBtnwpr .line i {background-color:#2eb250;  background-position:9px -141px;}

#navwpr .centerwpr .shareBtnwpr .facebook i {background-color:#1e6ba9; background-position:12px 7px;}
#navwpr .centerwpr .shareBtnwpr .weibo i {background-color:#ae313f;  background-position:3px -70px;}
#navwpr .centerwpr .shareBtnwpr .line i {background-color:#2eb250;  background-position:3px -145px;}

.shareBtnwpr .text {display:block; width:100%; height:13px; position:absolute; left:0; top:62px;
font-size:13px; line-height:13px; text-align:center; color:#aeaeae; font-family:Arial; font-weight:bold;
white-space:nowrap;
}

/* --- size detection ---*/
.detecion {position:fixed; left:5px; bottom:0; pointer-events:none; z-index:10000; opacity:0.7; display:none;
font-family:Tahoma; font-size:13px; line-height:15px; text-align:left; color:#a48e82;
}
.sc {position:fixed; left:0; top:0; pointer-events:none;}
#aw {width:100%; height:0;}
#ah {width:0; height:100%;}


/* --- content ---*/
article{text-align:left;}
section {margin-bottom:80px; }
.even section:last-child {margin-bottom:20px;}

.chapter {padding:8% 8% 10% 8%; position:relative;}
.chapter.cacacity {padding-top:0;}

.chapter.odd {color:#5a3a30; text-shadow:0 0 1px rgba(0,0,0,0.1);
background-image:url("../images/bg-paper.jpg");
}
.chapter.odd:before {content:""; display:block; width:100%; max-width:1280px; height:345px; position:absolute; left:0; top:0; opacity:0.9;
background-image:url("../images/bg-odd-top.png"); background-repeat:no-repeat; background-size:100% auto; background-position:center top;
}
.chapter.odd:after {content:""; display:block; width:100%; max-width:1280px; height:345px; position:absolute; left:0; bottom:0;
background-image:url("../images/bg-odd-bottom.png"); background-repeat:no-repeat; background-size:100% auto; background-position:center bottom;
}

.chapter.cacacity:before {display:none;}

.chapter.even {color:#a8978c; text-shadow:0 2px 4px rgba(0,0,0,0.3); padding-top:5%;
background-image:url("../images/bg-even.jpg"); background-size:100% auto;
}
.chapter.even:before {content:""; display:block; width:100%; max-width:1280px; height:240px; position:absolute; left:0; top:0;
background-image:url("../images/bg-even-top.png"); background-repeat:no-repeat; background-size:100% auto; background-position:center top;
}
.chapter.even:after {content:""; display:block; width:100%; max-width:1280px; height:150px; position:absolute; left:0; bottom:0;
background-image:url("../images/bg-even-bottom.png"); background-repeat:no-repeat; background-size:100% auto; background-position:center bottom;
}

.divider {width:100%; height:43px; position:relative; z-index:200; margin:-20px 0;
background-image:url("../images/bg-divider.png"); background-repeat:no-repeat; background-size:auto 100%; background-position:center top;
}

.cHeader {width:100%; margin:0 auto;}

h1,h2,h3,h4,h5,h6 {line-height:100%; position:relative; z-index:201;}
.chapter h1 {font-size:38px; text-align:center; margin-bottom:15px;}
.chapter h1 .normal {font-weight:normal;}
.chapter h1 br {display:none;}
.chapter h2 {font-size:30px; text-align:center; margin-bottom:15px; font-weight:normal; font-style:italic;
opacity:0.8;
}
.chapter h3 {font-size:26px; margin-bottom:45px; position:relative;}
.chapter h3:after {content:"　　"; position:absolute; left:0; bottom:-20px;
border-bottom:4px solid #ba4444; clear:both;
}
.even h1, .even h2 {color:#fff;}

.chapter p {position:relative; z-index:201;  margin-bottom:30px;
font-size:18px; line-height:150%;
}

.author {margin-bottom:20px; overflow:hidden;}
.author:after {content:""; display:inline-block; width:100%; height:1px; vertical-align:middle;
margin-right:-100%; margin-left:20px;
border-top:3px solid #765b52;
}
.even .author:after {border-top-color:#6f5e55;}

.imgGroup:after {content:""; display:table; clear:both;}
.imgwpr {margin:0 auto; margin-bottom:30px;}
.imgwpr img {display:block; width:100%;}
.imgwpr p {padding-top:10px; margin-bottom:0;
font-size:15px; line-height:120%; text-align:center;
}

.imgGroup .left {float:left;}
.imgGroup .right {float:right;}
.imgwpr.d2 {width:49%;}

.badge {width:165px; height:220px; margin:0 auto; position:relative; z-index:300;
background-repeat:no-repeat; background-size:90% auto; background-position:center center;
}
.cacacity .badge {margin-top:-15px; background-image:url("../images/article/badge-cacacity.png");}
.phantasia .badge {background-image:url("../images/article/badge-phantasia.png");}
.bgl .badge {background-image:url("../images/article/badge-bgl.png");}
.punch .badge {background-image:url("../images/article/badge-punch.png");}
.secret .badge {background-image:url("../images/article/badge-secret.png");}
.quiz .badge {background-image:url("../images/article/badge-quiz.png"); margin-bottom:20px; }

.quotewpr {text-align:center; margin-bottom:35px;}
.quote {margin:0 auto; padding:0 20px; display:inline-block;
border-left:5px solid #f1b235; border-right:5px solid #f1b235;
}
.quote p {margin-bottom:0; opacity:0.8;
font-size:21px; line-height:155%; font-style:italic; color:#fff; text-align:center; font-weight:bold;
}

section.info {padding-top:30px; text-align:center;
border-top:3px dotted #7a6057;
}
section.info h4 {font-size:22px; margin-bottom:10px;}
section.info h5 {font-size:20px; margin-bottom:10px;}
section.info p {text-align:center;}

#quiz section {max-width:768px; margin:0 auto 60px auto;}
.quizwpr {margin:0 auto; max-width:768px; overflow:hidden;
border-radius:8px; background-color:#d6d6d6;
}
.quiz .quote {margin-bottom:25px;}

/* --- Related Posts ---*/
#quiz .relatedwpr {max-width:100%; margin-bottom:20px; }
.relatedwpr .subtitle {width:100%; margin-bottom:10px; }
.relatedwpr .centerwpr {max-width:788px;}
.relatedwpr .centerwpr:after {content:""; display:table; clear:both;}

.relatedwpr .slot {display:block; width:49%; padding:10px; box-sizing:border-box; float:left; cursor:pointer; margin-bottom:20px;}
.relatedwpr .imgwpr {height:0; padding-bottom:66.67%; margin-bottom:15px;
background-size:cover; border-radius:3px; box-shadow:0 0 3px rgba(0,0,0,0.5);
}
.relatedwpr h1 {text-align:left; font-size:20px; color:#f6f4f3; margin-bottom:10px;}
.relatedwpr p {font-size:16px; line-height:140%; margin-bottom:0;}

.relatedwpr .divider {height:0; margin:0; clear:both; background-image:none;}


/* --- Responsive ---*/
@media screen and (max-width: 320px) {
  #questionnaire {
    height: 1055px !important;
  }
  .chapter.even:after {
    height: 100px;
  }

  #navwpr .centerwpr .shareBtnwpr {
    position: absolute;
    top: 0;
    left: 120px;
  }
  #navwpr .centerwpr .shareBtnwpr .btn {display:block; width:66px; height:80px; position:relative; float:left; right: auto; margin-right:-30px;}
  #navwpr .centerwpr .shareBtnwpr .btn i {
    width:25px; height:25px; background-size: 20px auto;
  }
  #navwpr .centerwpr .shareBtnwpr .facebook i {background-color:#1e6ba9; background-position:9px 6px;}
  #navwpr .centerwpr .shareBtnwpr .weibo i {background-color:#ae313f;  background-position:3px -46px;}
  #navwpr .centerwpr .shareBtnwpr .line i {background-color:#2eb250;  background-position:3px -96px;}

}
@media screen and (max-width: 425px) and (min-width: 321px) {
  #questionnaire {
    height: 935px !important;
  }
  .chapter.even:after {
    height: 100px;
  }

  #navwpr .centerwpr .shareBtnwpr {
    position: absolute;
    top: 0;
    left: 120px;
  }
  #navwpr .centerwpr .shareBtnwpr .btn {display:block; width:66px; height:80px; position:relative; float:left; right: auto; margin-right:-30px;}
  #navwpr .centerwpr .shareBtnwpr .btn i {
    width:25px; height:25px; background-size: 20px auto;
  }
  #navwpr .centerwpr .shareBtnwpr .facebook i {background-color:#1e6ba9; background-position:9px 6px;}
  #navwpr .centerwpr .shareBtnwpr .weibo i {background-color:#ae313f;  background-position:3px -46px;}
  #navwpr .centerwpr .shareBtnwpr .line i {background-color:#2eb250;  background-position:3px -96px;}

}
@media screen and (max-width: 768px) and (min-width: 426px) {
  #questionnaire {
    height: 1100px !important;
  }
}


/* line 19, ../sass/style.scss */
a {
  color: inherit;
  text-decoration: none;
}