html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-weight:normal;background: transparent;box-sizing: border-box;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
audio,canvas,progress,video {display: inline-block;vertical-align: baseline;}
audio:not([controls]) {display: none;height: 0;}
ul, li, dl, dt, dd, ol {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
border{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
a{text-decoration: none; color: inherit;}
a:active,a:hover {outline: 0;}
hr{display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1rem 0;padding: 0;}
input, select {vertical-align: middle;}
button,input,optgroup,select,textarea {color: inherit; font: inherit; margin: 0;}
button{cursor: pointer;overflow: visible;}
input[type="radio"] {vertical-align: text-bottom;box-sizing: border-box;padding: 0;}
input[type="checkbox"] {vertical-align: bottom;box-sizing: border-box; padding: 0; }
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}
.clear{clear: both;}
input,button,select,textarea{outline:none;}
 *:focus {outline: none;}
img{max-width: 100%;}
select{background-color:#fff; border-color:transparent;-webkit-appearance: none;position: relative;padding: .5rem 2rem .5rem .5rem;box-sizing: border-box;border: 1px solid #666;background:url(../images/arrow_down.png) no-repeat right;background-size:22px;}
input[type="text"]{background-color:#fff; border-color:transparent;-webkit-appearance: none;position: relative;padding: .5rem 1rem .5rem .5rem;box-sizing: border-box;border: 1px solid #666;}

.block{display: block;}	

/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/


html,body{width: 100%;height: auto;min-width: 320px;}
html{font-family:Helvetica,arial,'Noto Sans TC',Microsoft JhengHei,"微軟正黑體",sans-serif;font-size: 16px;font-weight: bold;}
body{width: 100%;height: 100vh;font-size:1rem;background:#492F15;-webkit-text-size-adjust: none;color: #222;margin: 0 auto;position: relative;background: url(../images/main_bg.jpg) left top repeat;background-size: contain;}



.loading{width: 100%;height: 100vh;position: fixed;z-index:10;background-color: rgba(150,100,50,.8);top: 0;left: 0;z-index: 12;text-align: center;}

.lds-grid {
  position: absolute;
  display: inline-block;
  width: 80px;
  height: 80px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.lds-grid div {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  animation: lds-grid 1.2s linear infinite;
}
.lds-grid div:nth-child(1) {
  top: 8px;
  left: 8px;
  animation-delay: 0s;
}
.lds-grid div:nth-child(2) {
  top: 8px;
  left: 32px;
  animation-delay: -0.4s;
}
.lds-grid div:nth-child(3) {
  top: 8px;
  left: 56px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(4) {
  top: 32px;
  left: 8px;
  animation-delay: -0.4s;
}
.lds-grid div:nth-child(5) {
  top: 32px;
  left: 32px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(6) {
  top: 32px;
  left: 56px;
  animation-delay: -1.2s;
}
.lds-grid div:nth-child(7) {
  top: 56px;
  left: 8px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(8) {
  top: 56px;
  left: 32px;
  animation-delay: -1.2s;
}
.lds-grid div:nth-child(9) {
  top: 56px;
  left: 56px;
  animation-delay: -1.6s;
}
@keyframes lds-grid {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}



.top_btn{background-color: #7F4F21;color: #fff;position: fixed;bottom: 1rem;right: 1rem;z-index: 2;font-size: 1.5rem;display: inline-block;height: 50px;width: 50px;border-radius: 50%;text-align: center;line-height: 50px;box-shadow: 3px 3px 3px rgba(0,0,0,.3)}


.pc{display: block;}
.m{display: none;}


/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/


.main{background: url(../images/bg_yellow.jpg) top center repeat;margin: 0 auto;min-height: 100vh;overflow: hidden;}
.main_o{background: url(../images/bg_orange.jpg) top center repeat;margin: 0 auto;min-height: 100vh;overflow: hidden;}
.main_g{background: url(../images/bg_green.jpg) center center no-repeat #63c168;background-size: cover;}
.logo{position: absolute;left: 1rem;top: 1rem;text-align: center;display: block;}
.logo img{width: 180px;}
.main_o .cpr{position: static;}
.cpr{position: absolute;text-align: center;margin:0rem auto;font-size: 13px;padding: 1rem;bottom: 0;width: 100%;}


.main_o .mainbox{position: static;transform: translate(0,0);width: 100%;margin-top: 2rem;}
.mainbox{margin:0 auto;text-align: center;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);max-width: 740px;width: 75%;}

.cover{width: 100%;}
.cover_title{max-width: 340px;display: block;margin: 0 auto;position: absolute;transform: translate(-50%,-50%);left: 50%;}
.cover_boat{position: absolute;width: 30%;left: 10%;top: 40%;animation: a_cover_boat 3s 1s infinite;}

@keyframes a_cover_boat{
	0%{top: 40%;}
	50%{top: 41%;}
	100%{top: 40%;}
}

.btn_go{position: absolute;bottom: -1rem;right: -1rem; animation: a_btn_go 2s 1s infinite;width: 25%;}
.btn_go:hover{transform: scale(1.05);animation: none;}

@keyframes a_btn_go{
	0%{transform: scale(1);}
	50%{transform: scale(.95);}
	100%{transform: scale(1);}
}


.question{background-color: #000;color: #fff;border-radius: 3rem;margin-bottom: -1rem;position: absolute;transform: translate(-50%,-50%);left: 50%;top: 0;width: 90%;}
.question i{background-color: #FFF100;display: inline-block;height: 3rem;width: 3rem;line-height: 3rem;color: #000;font-size: 2rem;font-style: normal;border-radius: 50%;vertical-align: middle;}
.question p{display: inline-block;margin: 1rem;font-size: 1.5rem;width: 70%;vertical-align: middle;text-align: left;}
.question img{display: inline-block;vertical-align: middle;max-width: 5%;}

.answers{margin-top: -1rem;}
.answers a{background: #EC6C00;color: #fff;display: inline-block;width: 45%;border-radius: 3rem;padding: .8rem;text-align: left;margin-bottom: .5rem;}
.answers a:hover{background: #000;}
.answers a span{background-color: #FFF100;display: inline-block;height: 2rem;width: 2rem;line-height: 2rem;color: #000;font-size: 1rem;font-weight: bold;border-radius: 50%;vertical-align: middle;text-align: center;}
.answers a p{display: inline-block;margin: 0 1rem;width: 70%;font-size: 1.3rem;vertical-align: middle;}
.answers a i{float: right;font-size: 2rem;}




.result{margin: 2rem auto;background-image: url(../images/book_left.png),url(../images/book_right.png);background-repeat: no-repeat;background-size: 50% 100%,50% 100%;background-position: left top,right top;}
.result li{display: inline-block;width: 45%;vertical-align: top;padding: 1.5rem;margin: 1% 2%;min-height: 400px;}
.result li:nth-child(1){position: relative;}
.result li:nth-child(1):after{position: absolute;right: 0;height: 50%;width: 2rem;background: url(../images/book_middle.png);content: "";background-size: contain;transform: translate(100%,-50%);top: 50%;right:0%;}

.result li:nth-child(1)>img{margin-top: -1rem;}
.result li:nth-child(1)>div:nth-of-type(1){background-color: #FFF100;padding: 1rem;margin: -1rem auto .5rem;border-radius: 1rem;border: 3px solid #000;}
.result li:nth-child(1)>div:nth-of-type(1) strong{font-size: 1.2rem;font-weight: bold;}
.result li:nth-child(1)>div:nth-of-type(1)>div{background-color: #fff;margin: 1rem auto;padding: 1rem;border-radius: 1rem;min-height: 10rem;position: relative;}
.result li:nth-child(1)>div:nth-of-type(1)>div:before{position: absolute;content: ",,";top: -2.5rem;left: 0px;font-size: 3rem;color: #EC6C00;font-weight: bold;}
.result li:nth-child(1)>div:nth-of-type(1)>div:after{position: absolute;content: ",,";bottom: -0rem;right: 0px;font-size: 3rem;color: #EC6C00;font-weight: bold;}
.result li:nth-child(1)>div:nth-of-type(1)>div img{display: inline-block;margin-bottom: .5rem;}

.result li:nth-child(1)>p{display:block;margin-bottom: .5rem;font-weight: bold;}
.result li:nth-child(1)>div:nth-of-type(2) a{display: inline-block;width: 45%;margin: 1% .5%;padding:.2rem .3rem;background-color: #EC6C00;color: #fff;border-radius: 1rem;box-sizing: border-box;}
.result li:nth-child(1)>div:nth-of-type(2) a i{margin-right: .1rem;}
.result li:nth-child(1)>div:nth-of-type(2) a:nth-of-type(1){background-color: #1877F2;width: 27%;}
.result li:nth-child(1)>div:nth-of-type(2) a:nth-of-type(2){background-color: #07C202;width: 27%;}
.result li:nth-child(1)>div:nth-of-type(2) a:nth-of-type(3){background-color: #018fc1;width: 36%;}


.result li:nth-child(2)>img{margin-top: 1rem;}
.result li:nth-child(2)>div{background-color: #00AFDB;padding: 1rem;margin: 1rem auto;border-radius: 1rem;border: 3px solid #000;position: relative;}
.result li:nth-child(2)>div strong{color: #fff;font-size: 1.2rem;margin-bottom: 1rem;display: inline-block;}
.result li:nth-child(2)>div div{background-color: #fff;padding: 1rem;border-radius: 1rem;text-align: left;min-height: 310px;}
.result li:nth-child(2)>div img{position: absolute;bottom: -.5rem;right: -.5rem;}
.result li:nth-child(2) a{display: block;background-color: #EC6C00;padding: .5rem;color: #fff;border-radius: 1rem;font-weight: bold;}
.result li:nth-child(2) a i:nth-of-type(1){float: left;}
.result li:nth-child(2) a i:nth-of-type(2){float: right;}


.intro div{margin: 1rem auto;}
.intro div a{display: inline-block;padding:.5rem 1rem;background-color: #00AFDB;color: #fff;border-radius: 2rem;border: 2px solid #000;box-shadow: 0 4px 0px #1477AF, 0 6px 0px #000;font-weight: bold;margin:2% 1%;}
.intro div a i{margin-left: .5rem;}
.intro div a:hover{background-color: #1477AF;box-shadow: 0 4px 0px #00AFDB, 0 6px 0px #000;}


.intro ul{position: relative;text-align: right;margin: 0 auto 2rem;}
.intro ul>li{display: inline-block;vertical-align: top;}
.intro ul>li:nth-child(1){width: 30%;position: absolute;left: 0;top: 0;}
.intro ul>li:nth-child(1) img{border-radius: 1rem;border: 2px solid #000;}
.intro ul>li:nth-child(2){width: 75%;background-color: #fff;border-radius: 1rem;border: 2px solid #000;padding: 1rem 1rem 1rem 4rem;margin-top: 3rem;text-align: left;}
.intro ul>li:nth-child(2) strong{color: #00AFDB;font-size: 1.2rem;font-weight: bold;padding-bottom: .5rem;border-bottom: 2px solid #00AFDB;display: block;margin-bottom: 1.5rem;position: relative;}
.intro ul>li:nth-child(2) strong:after{position: absolute;content: "";height: 1rem;width: 1rem;background-color: #fff;border-left: 2px solid #00AFDB;border-bottom: 2px solid #00AFDB;bottom: -11px;transform:rotate(-45deg);left: 2rem;}
.intro ul>li:nth-child(2) strong img{width: 1.5rem; margin-right: .5rem;vertical-align: middle;}


.intro ul:nth-child(even){text-align: left;}
.intro ul:nth-child(even)>li:nth-child(1){width: 30%;position: absolute;left: inherit;top: 0;right: 0;}
.intro ul:nth-child(even)>li:nth-child(2){padding: 1rem 4rem 1rem 1rem;}





/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/



@media only screen and (max-width: 1000px){

	
  
}








@media only screen and (max-width: 1000px) , screen and (max-height: 750px){
	
	
.pc{display: none;}
.m{display: block;}	
	
	
.main{padding: 1rem;}
.logo{position: static;padding: 1rem;}
.mainbox{position: static;transform: translate(0,0);width: 100%;}
.cpr{position: static;}	
.cpr span{display: block;}	

	
.cover_title{max-width: 260px;transform: translate(-50%,-60%);}	
.cover_boat{position: absolute;width: 30%;left: 10%;top: 40%;animation: a_cover_boat 3s 1s infinite;}
.btn_go{width: 35%;}	
	

@keyframes a_cover_boat{
	0%{top: 60%;}
	50%{top: 61%;}
	100%{top: 60%;}
}	
	
	
	
.question{position: static;transform: translate(0%,0%);left: 0%;top: 0;width: 100%;margin-bottom: 1rem;border-radius: 1rem;}
.question i{background-color: #FFF100;display: inline-block;height: 2rem;width: 2rem;line-height: 2rem;font-size: 1rem;}	
.question p{font-size: 1.2rem;width: 65%;}

.answers{margin-top: 1rem;}
.answers a{display:block;width: 100%;}

	


	
	
	
	
	
	
	

} 


@media only screen and (max-width: 767px){
 

	
.result{margin: 2rem auto;background-image: none;}
.result li{display:block;width: 100%;margin: 0 auto;padding: 2.5rem;}
.result li:nth-child(1){background: url(../images/book_left.png);background-size: 100% 100%;margin-bottom: 1rem;}
.result li:nth-child(2){background: url(../images/book_right.png);background-size: 100% 100%;}
.result li:nth-child(1):after{display: none;}



	
.intro ul{position: relative;text-align: right;max-width: 700px;margin: 0 auto 2rem;border: 2px solid #000;border-radius: 1rem;overflow: hidden;}
.intro ul>li{display:block;}
.intro ul>li:nth-child(1){width: 100%;position: static;border-bottom: 2px solid #000;}
.intro ul>li:nth-child(1) img{border-radius:0;border: none;width: 100%;display: block;}
.intro ul>li:nth-child(2){width: 100%;background-color: #fff;border-radius:0;border:none;padding:1rem;margin-top: 0rem;}


.intro ul:nth-child(even)>li:nth-child(1){width: 100%;position: static;left: inherit;top: 0;right: 0;}
.intro ul:nth-child(even)>li:nth-child(2){padding:1rem;}	
	
	
.result li:nth-child(2)>div div{margin-bottom: 5rem;}	
	
	
	

    
}

@media only screen and (max-width: 400px){
 

	

.result li{display:block;width: 100%;margin: 0 auto;padding: 1.5rem;}


	
	

    
}