@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:#2e251c;}
body {text-align:center; font-size:17px; line-height:27px; font-family:"微軟正黑體", "Microsoft JhengHei", sans-serif; color:#b6a499;}
h1,h2,h3,h4,h5,h6 {margin:0; line-height:23px;}
p {text-align:justify; text-justify:distribute; margin-bottom:26px;}
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;}


/*--- common ---*/


/*--- opening ---*/
.opening {position:relative; overflow:hidden; margin-bottom:20px;}
.opening__heroimg {width:120%; margin:0 auto; margin-left:-10%;}

/*.opening__logo {display:block; width:144px; height:60px; position:absolute; top:15px; left:20px; cursor:pointer;
background-image:url("../images/logo.png"); background-repeat:no-repeat; background-size:144px auto; background-position:left top;
}*/
.opening__btngroup {width:90px; height:40px; position:absolute; left:16px; top:16px;
position:fixed; z-index:3000; 
}
.opening__btngroup:after {content:""; display:table; clear:both;}
.opening__btngroup a {display:block; width:40px; height:40px; cursor:pointer;
background-image:url("../images/topbtn.png"); background-repeat:no-repeat; background-size:auto 100%;
}
.opening__logo {background-position:left top; float:left;}
.opening__share {background-position:right top; float:right;}


.credit {position:absolute; width:100%; bottom:17%; left:0;}
.credit p {margin-bottom:0;
color:#8d8178; font-weight:bold; line-height:26px; text-align:center;
}

/*--- top intro ---*/
.topintro {max-width:850px; position:relative; top:-80px; 
margin:0 auto 50px auto; padding:0 25px;
color:#9d9087;
}
.topintro__title {margin-bottom:30px;
font-size:23px; line-height:120%; color:#c4bcb7; font-weight:bold;
}
.topintro__title .outdent {margin-left:-12px;}
.topintro__inner {padding-left:35px; color:#afa49d;
border-left:8px solid #6e3d39;    
}

/* --- title ---*/
h3 {margin:0 auto; height:60px; margin-bottom:30px; overflow:hidden; position:relative;}
.h3__bgcolor {padding:0 20px; height:100%; display:inline-block; position:relative;
line-height:60px; font-size:26px; color:#fff; white-space:nowrap;
background-color:#6e3d39;
margin:0 auto;
}
.h3__tri--left,.h3__tri--right {width:10px; height:100%; position:absolute; top:0;}
.h3__tri--left {left:-8px; border-right:2px solid #6e3d39;}
.h3__tri--right {right:-8px; border-left:2px solid #6e3d39;}

.h3__tri--left:before,.h3__tri--left:after,.h3__tri--right:before,.h3__tri--right:after {content:""; display:block; width:0; height:0; position:absolute;
border-style:solid;
}

.h3__tri--left:before,.h3__tri--left:after {left:0;}
.h3__tri--left:before {top:0;
border-width:60px 0 0 12px; border-color:#6e3d39 transparent transparent transparent;
}
.h3__tri--left:after {bottom:0;
border-width:0 0 60px 12px; border-color:transparent transparent #6e3d39 transparent;
}

.h3__tri--right:before,.h3__tri--right:after {right:0;}
.h3__tri--right:before {top:0;
border-width:60px 12px 0 0; border-color:#6e3d39 transparent transparent transparent;
}
.h3__tri--right:after {bottom:0;
border-width:0 12px 60px 0; border-color:transparent transparent #6e3d39 transparent;
}

.vsub {margin:0 auto; margin-bottom:30px; overflow:hidden;}
.vsub__inner {display:inline-block; margin:0 auto; position:relative;
color:#ba8a77; font-size:22px; font-weight:bold;
}
.vsub__inner:before,.vsub__inner:after {content:""; display:block; width:30px; height:2px;
position:absolute; top:50%;
background-color:#ab7b6b; border-radius:2px;
}
.vsub__inner:before {left:-42px;}
.vsub__inner:after {right:-42px;}

.vdata__source {padding:0 25px;
color:#928f8d; font-size:15px;
}
.note-star {position:relative; top:9px; margin-right:6px;
color:#da5753; font-size:26px; font-style:normal; font-weight:bold;
}
.v05 table .note-star {color:#c24e4b; top:5px; margin-left:3px; margin-right:0;}

/* --- visual data ---*/
.vdata {padding-bottom:160px; position:relative; margin:0 auto;}
.vdata:first-child {padding-top:40px;}
.vdata.odd {
background-color:#271f19;
}
.vdata h3 {top:-40px; margin-bottom:10px;}

.imgwpr {position:relative; margin:0 auto; min-height:300px;}
.imgwpr img {margin:0 auto; max-width:100%;}

.vdata.v06 .imgwpr {max-width:100% !important;}

.imgwpr.v04 {max-width:700px;}
.v04__chart {width:100%; height:560px; position:relative;
background-color:#362822; border-radius:20px;
box-shadow:0 0 2px rgba(0,0,0,0.1);
}
.v04__cheap {width:251px; height:169px; position:absolute; right:-52px; top:-52px;
background-image:url("../images/vdata/c-cheap.png"); background-repeat:no-repeat; background-size:251px auto;
}

.v04__icon {position:absolute; top:35px; left:50px;
line-height:22px;
}
.v04__icon .price {display:inline-block; margin-right:30px; color:#fff;}
.v04__icon .price i {width:22px; height:22px; display:block; margin-right:10px;
border-radius:2px; float:left;
}
.v04__icon .import i {background-color:#a1a1a1;}
.v04__icon .export i {background-color:#9f4a38;}
.v04__icon .note {display:inline-block; color:#928f8d; font-size:15px;}


.v05__intro {text-align:center;
font-size:18px; color:#b8b6b4; line-height:30px;
}
.v05__intro strong {color:#fff; font-size:23px; font-weight:bold;}
.v05__footer {font-size:21px; color:#fff; line-height:36px;}
.v05__footer-period {display:inline-block; width:140px; height:36px; margin:0 46px;
text-align:center; font-weight:bold;
border-radius:36px; background-color:#207a7d;
}

.vdata__disc {max-width:800px; padding:35px 25px 0 25px; margin:0 auto;
color:#b8b6b4; position:relative;
}
.vdata__disc:after {content:""; display:table; clear:both;}
.vdata__bubble {padding:20px 25px; float:left; width:calc(100% - 166px); position:relative;
color:#412d25; text-align:justify; text-justify:distribute;
background-color:#cfc9c3; border-radius:20px;
margin-bottom:20px; min-height:76px;
}
.vdata__bubble:before {content:""; display:block; position:absolute; left:-20px; top:38px;
width:0; height:0; border-style:solid; border-width:20px 20px 20px 0;
border-color:transparent #cfc9c3 transparent transparent;
}

.badge-taiwancement {width:96px; height:96px; float:left; margin-right:20px;
background-image:url("../images/badge-taiwancement.png"); background-repeat:no-repeat; background-size:auto 96px;
position:relative; top:10px; z-index:200; 
}
.badge-acc {width:96px; height:96px; float:left; margin-right:20px;
background-image:url("../images/badge-acc.png"); background-repeat:no-repeat; background-size:auto 96px;
position:relative; top:10px; z-index:200; 
}
.badge-boea {width:96px; height:96px; float:left; margin-right:20px;
background-image:url("../images/badge-boea.png"); background-repeat:no-repeat; background-size:auto 96px;
position:relative; top:10px; z-index:200; 
}

.v05 .vdata__disc {max-width:650px;}
.v05__tablenote {padding-top:8px;
font-size:15px; text-align:left; line-height:19px;
}


/* --- make choice ---*/
.choice {
background-color:#46362e; border-top:45px solid #221c16; border-bottom:45px solid #221c16;
}
.choice__title {display:inline-block; height:80px; position:relative; top:-66px; left:-34px; margin:0 auto -16px auto;
background-image:url("../images/choicetitle-bg1.png"); background-repeat:no-repeat; background-size:auto 80px;
}
.choice__title:after {content:""; display:block; width:67px; height:80px;
position:absolute; right:-67px; top:0;
background-image:url("../images/choicetitle-bg2.png"); background-repeat:no-repeat; background-size:auto 80px;
}
.choice__title span {display:inline-block; padding:0 61px 0 128px;
line-height:66px; font-size:34px; font-weight:bold; color:#fff; letter-spacing:1px;
}
.choice__intro {max-width:850px; margin:0 auto 40px auto; padding:0 25px;
color:#fff; text-align:center;
}
.choice__box {width:606px; height:400px; margin:0 auto 80px auto; position:relative;}
.choice__box:before,.choice__box:after {content:""; display:block; position:absolute; left:50%; top:50%;}
.choice__box:before {width:400px; height:400px; margin:-200px 0 0 -200px;
background-color:#8e735b; border-radius:100%; box-shadow:0 0 8px rgba(0,0,0,0.2);
}
.choice__box:after {width:320px; height:320px; margin:-170px 0 0 -170px;
background-color:#382e24; border-radius:100%; border:10px solid #352a27;
background-image:url("../images/choice-text.png"); background-repeat:no-repeat;
background-size:290px auto; background-position:center 99px;
}

.choice__hand {width:135px; height:157px; position:absolute; top:240px; z-index:200; 
background-repeat:none; background-size:135px auto; cursor:pointer;
transition:400ms top;
}
.choice__hand:hover {top:225px;}
.choice__hand.left {left:112px;
background-image:url("../images/choice-lefthand.png"); background-position:left top;
}
.choice__hand.right {right:112px;
background-image:url("../images/choice-righthand.png"); background-position:left top;
}

.choice__hand--disabled {width:135px; height:157px; position:absolute; top:0; left:0;
background-repeat:none; background-size:135px auto;
opacity:0; transition:400ms opacity;
}
.left .choice__hand--disabled {
background-image:url("../images/choice-lefthand.png"); background-position:left bottom;
}
.right .choice__hand--disabled {
background-image:url("../images/choice-righthand.png"); background-position:left bottom;
}

.choice__cloud {position:absolute; z-index:200;
background-image:url("../images/choice-cloud.png"); background-repeat:none;
background-size:auto 73px;
}
.choice__cloud.left {width:153px; height:73px; left:0; top:63px;
background-position:left top;
}
.choice__cloud.right {width:110px; height:56px; right:0; top:11px;
background-position:right top;
}

.choice__pilltext {position:absolute; top:180px;
white-space:nowrap;
}
.choice__pilltext h2 {margin-bottom:12px;
font-size:28px; font-weight:bold; color:#fff;
}

.choice__pilltext.blue {text-align:right; right:518px;}
.choice__pilltext.red {text-align:left; left:518px;}

.choice__pilltext i {width:12px; height:12px; display:inline-block; margin-right:12px;
position:relative; top:-6px; left:2px;
border-radius:100%;
}
.choice__pilltext.blue i {background-color:#008efa;}
.choice__pilltext.red i {background-color:#e4305a;}

.choice-result {background-color:#271f19; padding:80px 0;}
.choice-result__img {max-width:1134px; overflow:hidden; position:relative;}

.choice-result__txt {width:100%; position:absolute; left:0; top:0;
padding-top:37%; z-index:200; 
}
.choice-result__txt p {font-size:20px; padding:0 25%; margin-bottom:0;}

.choice-result__img strong {display:block; margin-bottom:10px;
font-size:24px; color:#fff;
}
.musical-note {font-size:40px; font-family:Arial;}

.choice__pilltext p {line-height:21px; font-weight:bold; font-size:18px;}
.choice__pilltext.blue p {text-align:right;}

.choice-result__regret {padding-top:40px;
color:#fff; text-align:center; font-size:20px;
}
.choice-result__regret a {display:inline-block; margin:0 auto;
height:50px; padding:0 24px; margin-left:10px;
font-weight:bold; line-height:50px; font-size:22px;
background-color:#6e3d39; border-radius:50px;
cursor:pointer; box-shadow:0 0 6px rgba(0,0,0,0.2);
transition:300ms background-color;
}
.choice-result__regret a:hover {background-color:#d34661;}


.choice__hint {position:relative; width:300px; margin:0 auto;
color:#f7e9e2; font-size:22px; line-height:24px;
}
.choice__hint p {text-align:center; position:relative; top:-25px;}

.choice__hint:before,.choice__hint:after {content:""; display:block; width:53px; height:46px;
position:absolute; top:-40px;
background-image:url("../images/choice-arrow.png"); background-repeat:none;
background-size:auto 46px;
}
.choice__hint:before {left:0; background-position:0 0;}
.choice__hint:after {right:0; background-position:right 0;}

/* --- article content ---*/
.article-container {position:relative;
background-image:url("../images/bg-paper.jpg");
}
.article-container:before {content:""; display:block; width:100%; height:100px; position:absolute; left:0; top:0;
}

.article-container.part2:before {
background-color:#271f19; border-bottom:20px solid #dbd5d1;    
}
.article-container.part2 {padding-top:140px;}

.part2__badgeshock {width:232px; height:250px; position:absolute; left:50%; top:-30px;
margin-left:-116px;
background-image:url("../images/badge-shock.png"); background-repeat:no-repeat;
background-size:100% auto;
}

.part2__sectitle {border-top:none;}
.part2__sectitle:before {content:""; display:block; width:91px; height:75px;
position:absolute; left:-90px; top:-20px;
background-image:url("../images/vdata/c-leaf.png"); background-repeat:no-repeat;
background-size:91px auto;
}

.article-container.part2-2:before {display:none;}
.part2-2__overlaybg {width:100%; height:100%; position:absolute; left:0; top:0;
background-color:rgba(81,62,53,0.1);
}
.part2-2__overlaybg:before {content:""; display:block; width:100%; height:10px;
position:absolute; left:0; top:0;
background-color:rgba(81,62,53,0.03);
}

.article-container.part2 {padding-bottom:80px;}
.part2__footer {width:495px; height:104px; position:absolute; bottom:-18px; left:50%; 
background-image:url("../images/c-mountain.png"); background-repeat:no-repeat;
background-size:auto 104px; background-position:center bottom;
z-index:200; margin-left:-247px;
}
.part2__footer:before {content:""; display:block; width:128px; height:82px;
position:absolute; left:-70px; bottom:8px;
background-image:url("../images/vdata/c-excavator-flip.png"); background-repeat:no-repeat;
background-size:128px auto;
}
.part2__footer:after {content:""; display:block; width:126px; height:75px;
position:absolute; right:-70px; bottom:8px;
background-image:url("../images/vdata/c-bigtruck.png"); background-repeat:no-repeat;
background-size:126px auto;
}

.part3__overlaybg {width:100%; height:98px; position:absolute; left:0; top:0;
background-color:rgba(81,62,53,0.1);
}

.article-container.part3 {background-color:#312924; background-image:none;}
.article-container.part3:before {height:98px;
background-image:url("../images/bg-paper.jpg");
border-bottom:8px solid #2c241f;
}

article {max-width:850px; margin:0 auto; padding:100px 25px 5px 25px;}
.part2 article,.part2-2 article {color:#412d25;}
.part2-2 article {padding-top:74px;}

article section {margin-bottom:56px; padding-bottom:4px;}

article .choice__title {margin-bottom:10px;}

article h1 {font-size:36px; margin-bottom:36px; position:relative;}
article h2 {font-size:28px; margin-bottom:36px; padding:22px 12px; display:inline-block; position:relative;
border-top:3px dotted #412d25; border-bottom:3px dotted #412d25; color:#4d3931;
}
article p {position:relative;}
article p strong {padding:0 5px;
font-weight:normal;
background-color:rgba(248,194,34,0.15);
border-bottom:2px solid rgba(65,45,37,0.1);
}

h2.medal:before,h2.medal:after {content:""; display:block; width:83px; height:83px; position:absolute; top:-8px;
background-repeat:no-repeat; background-size:83px auto;
}
h2.medal:before { left:-85px;
background-image:url("../images/medal-01.png");
}
h2.medal:after {right:-85px;
background-image:url("../images/medal-02.png");
}

.part2-2 h2 {border-top:none;}
.part2-2__conclusion {
font-size:21px; font-weight:bold;
}

.infobox {position:relative; font-weight:bold;
border-bottom:2px dotted #412d25; cursor:pointer; display:inline-block;
}
.infobox i {display:inline-block; width:24px; height:23px; margin-left:4px;
background-image:url("../images/icon-infobox.png"); background-repeat:no-repeat;
background-size:24px auto; background-position:0 0;
}

p a {display:inline-block; padding:0 5px;
font-weight:bold; color:#412d25;
border-bottom:2px dotted #412d25; cursor:pointer;
transition:250ms background-color;
}
p a:hover {background-color:rgba(255,255,255,0.9);}

/* --- css table ---*/
.tablewpr {width:100%; margin:0 auto 5px auto; 
border-radius:6px; overflow:hidden; position:relative;
box-shadow:0 0 2px rgba(179,175,172,0.8);
}
.table {display:table; table-layout:fixed; width:100%;
border-collapse:collapse; border-spacing:0;
background-color:rgba(231,226,222,0.4);
}
.table__body {display:table-row-group;}
.table__row {display:table-row;}
.table__head,.table__cell {display:table-cell; padding:12px 8px;
color:#362822; font-size:15px;
border-bottom:1px solid #ccc6c2; vertical-align:middle;
}
.table__head {border-bottom:1px solid #472821;}

.table__row.heading {background-color:#56302b;}
.table__row.heading .table__head {color:#ddd6d5; font-weight:bold;}

.table__row:nth-child(odd) .table__cell {
background-color:rgba(231,226,222,0.5);
}
.table__row:last-child .table__cell {border-bottom:none;}

.table-title {font-size:19px; font-weight:bold; margin-bottom:10px; padding-top:20px;}
.table-source {font-size:15px; margin-bottom:46px;}

.vdata__disc .tablewpr {
box-shadow:0 0 2px rgba(0,0,0,0.3);
}
.vdata__disc .table {background-color:#b6b0aa;}
.vdata__disc .table__head,.vdata__disc .table__cell {padding:8px 8px;}
.vdata__disc .table-title {font-size:16px; text-align:center; clear:both;}

/* --- html table ---*/
table {width:100%;}
th,td {padding:11px 12px; text-align:center;
font-size:15px; border:none;
}

th {color:#ddd6d5; font-weight:bold;
background-color:#56302b; border:1px solid #56302b; border-bottom:1px solid #a59b95;
}
td {color:#362822;
border:none; background-color:#b6b0aa;
border:1px solid #a59b95;
}
.v05 th br {display:none;}

/* --- opinion diff ---*/
.opiniondiff {margin-bottom:60px;
text-align:left;
}
.opiniondiff:after {content:""; display:table; clear:both;}

.opiniondiff__q {display:inline-block; margin:0 auto 10px auto;
font-size:25px; line-height:120%; font-weight:bold; color:#fff;
}
.opiniondiff__q:after {content:""; display:table; clear:both;}
.opiniondiff__q strong {display:block; width:54px; height:54px; margin-right:10px;
line-height:54px; text-align:center; color:#fff;
background-color:#d8545e; border-radius:30px;
float:left; position:relative; top:-13px;
}

.opiniondiff__o {margin-bottom:20px; position:relative; margin-left:42px;}

.opiniondiff__bubble {display:inline-block; padding:10px 24px; margin-bottom:6px;
color:#312924; line-height:25px;
border-radius:60px; background-color:#beb3ad;
}
.opiniondiff__source {padding-left:18px; padding-bottom:3px; margin-left:30px; margin-bottom:0;
font-size:13px; color:#928f8d; line-height:19px; font-family:Tahoma;
border-left:3px dotted #928f8d;
}

.opiniondiff__q.more {margin-bottom:0;}
.opiniondiff__q.more strong {font-size:16px; line-height:20px;
display:flex; align-items:center; justify-content:center;
}

.opiniondiff__o--detail {margin-left:82px;}
.opiniondiff__o--detail li {margin-bottom:5px; list-style:disc; padding-left:6px;}
.opiniondiff__o--detail a {color:#ded9d6;
border-bottom:2px dotted transparent;
transition:300ms; transition-property:color,border-bottom;
}
.opiniondiff__o--detail a:hover {color:#fff;
border-bottom:2px dotted #ded9d6;
}

/* --- footer ---*/
footer {min-height:100px; position:relative;
background-color:#221c16;
}
/*footer:before {content:""; display:block; width:100%; height:120px; position:absolute; top:-113px; left:0;
background-image:url("../images/miningcart.png"); background-repeat:no-repeat;
background-size:724px auto; background-position:center top;
z-index:200; 
}*/
.article-container.part3:after {content:""; display:block; width:100%; height:120px; position:absolute; bottom:-7px; left:0;
background-image:url("../images/miningcart.png"); background-repeat:no-repeat;
background-size:724px auto; background-position:center top;
z-index:200; 
}



/* --- lightbox ---*/
html.stop-scroll {overflow-y:hidden;}

.lightbox {width:100vw; height:100vh; position:fixed; left:0; top:0; z-index:1000;
pointer-events:none;
}
.lightbox.show {pointer-events:auto;}

.lightbox__overlay {width:100%; height:100%; position:absolute; left:0; top:0;
background-color:rgba(231,226,222,0.92); opacity:0;
/*transition:250ms opacity;*/
}
.show .lightbox__overlay {opacity:1;}

.lightbox__content {width:70%; max-width:700px; height:90%; margin:0 auto; position:relative; top:0; box-sizing:border-box; padding:40px 0 60px 0;
color:#5d4c45; font-size:15px; line-height:23px;
background-color:#f3f1ef; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,0.1); 
opacity:0;
transition:400ms; transition-property:opacity,top;
}
.show .lightbox__content {opacity:1; top:5%;}

.lightbox__scrollwpr {height:100%; padding:0 45px; overflow-y:auto;
text-align:left;
}

.lightbox section {margin-bottom:30px; padding:4px;}
.lightbox h1 {font-size:24px; margin-bottom:20px; padding:14px 6px; line-height:120%;
border-top:3px dotted #5d4c45; border-bottom:3px dotted #5d4c45;
}
.lightbox ol {margin-bottom:26px; margin-left:18px;}
.lightbox ol li {list-style:decimal; margin-bottom:4px;}

.lightbox__close {width:150px; height:40px; position:absolute; bottom:12px; left:50%; margin-left:-75px; cursor:pointer;
color:#fff; text-align:center; font-size:18px; line-height:40px; letter-spacing:2px;
background-color:#66443f; border-radius:40px;
transition:400ms background-color;
}
.lightbox__close:hover {background-color:#5a3a36;}

/* --- size detection ---*/
.detecion {position:fixed; right:5px; bottom:0; pointer-events:none; z-index:10000; opacity:0.4;
font-family:Tahoma; font-size:13px; line-height:15px; text-align:left; color:#fff;
}
.zc {position:fixed; left:0; top:0; pointer-events:none;}
#zw {width:100%; height:0;}
#zh {width:0; height:100%;}