@charset "UTF-8";
*{ margin: 0; padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
ul, li { margin: 0; padding: 0; list-style: none;}
img, div, iframe{ border: 0; vertical-align: bottom;}
body, html { width: 100%; height: 100%;}
h1{ display: none;}
li li, li p, li span, li p span, p span{ font-size: 1em;}
a:link, a:visited ,a:hover ,a:active {text-decoration: none;}
button, input{ border:0; background-color: none; outline:none; -webkit-appearance: none;}
img{ width: 100%;}

body, html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility !important;
  font-family: Arial, Helvetica, 微軟正黑體, Microsoft JhengHei, sans-serif;
  color: #333333;
}
  
.logo {
  width: 114px;
  position: absolute;
  right: 20px;
  top: 20px;
}

/* Banner */
.banner-area{
  margin-top: 40px;
}
.banner_o{
	max-width: 100%;
}
.banner_m{
	display:none;
}
@media (max-width: 768px) and (min-width: 320px){
  .banner_o{
   display:none;
  }
  .banner_m{
   max-width: 100%;   
   display:block;  
  }
}

/* start page */
/* .start-page-area{
  display: none;
} */
.start-page-top{
  width: 82%;
  height: 78px;
  margin: 0 auto;
  background: url('../images/bg1_top_start.jpg') center bottom no-repeat; 
  background-size: 1450px;
  overflow: hidden;
}
.start-page-middle{
  width: 82%;
  margin: 0 auto;
  background: url('../images/bg1_middle_start.jpg') center top repeat-y; 
  background-size: 1450px;
  overflow: hidden;
}
.start-page-middle .row{
  margin: 0 8%;
}
.start-page-middle img{
  max-width: 358px;
}
.start-btn:hover{
  cursor: pointer;
  filter: brightness(0.8);
}
.start-page-bottom{
  width: 82%;
  height: 78px;
  margin: 0 auto;
  background: url('../images/bg1_bottom_start.jpg') center top no-repeat; 
  background-size: 1450px;
  overflow: hidden;
}
.start-page-middle .start-img-1{
  max-width: 59px;
}
.start-page-middle .start-img-2{
  max-width: 210px;
}
.start-page-text{
  font-size: 18px;
  line-height: 33px;
}
.start-page-middle .row .col-4{
  position: relative;
}
.start-page-middle .row .col-4 .start-img{
  position: absolute;
  top: 10%;
}
@media (max-width: 1920px) and (min-width: 1441px){
  .start-page-top{
    background-size: 1570px;
  }
  .start-page-middle{
    background-size: 1570px;
  }
  .start-page-bottom{
    background-size: 1570px;
  }
}
@media (max-width: 768px) and (min-width: 320px){
  .start-page-top{
    width: 100%;
  }
  .start-page-middle{
    width: 100%;
  }
  .start-page-bottom{
    width: 100%;
  }
  .start-img{
    display: none;
  }
  .start-page-text{
    font-size: 16px;
  }
  .start-page-middle .row .col-12{
    width: 100%;
  }
}

/* test page */
.test-page-area{
  display: none;
}
.test-page-top-odd{
  width: 82%;
  height: 78px;
  margin: 0 auto;
  background: url('../images/bg2_top_test135.jpg') center bottom no-repeat; 
  background-size: 1450px;
  overflow: hidden;
}
.test-page-top-even{
  width: 82%;
  height: 78px;
  margin: 0 auto;
  background: url('../images/bg3_top_test24.jpg') center bottom no-repeat; 
  background-size: 1450px;
  overflow: hidden;
}
.test-page-middle-odd{
  width: 82%;
  margin: 0 auto;
  background: url('../images/bg2_middle_test135.jpg') center center repeat; 
  background-size: 1450px;
  overflow: hidden;
}
.test-page-middle-even{
  width: 82%;
  margin: 0 auto;
  background: url('../images/bg3_middle_test24.jpg') center center repeat; 
  background-size: 1450px;
  overflow: hidden;
}
.test-page-bottom-odd{
  width: 82%;
  height: 78px;
  margin: 0 auto;
  background: url('../images/bg2_bottom_test135.jpg') center top no-repeat; 
  background-size: 1450px;
  overflow: hidden;
}
.test-page-bottom-even{
  width: 82%;
  height: 78px;
  margin: 0 auto;
  background: url('../images/bg3_bottom_test24.jpg') center top no-repeat; 
  background-size: 1450px;
  overflow: hidden;
}
.test-page-area .row{
  margin: 0 25%;
}
.test-img-label{
  display: block;
}
.test-img-label img{
  max-width: 370px;
}
.test-img-label img:hover{
  cursor: pointer;
}
.form-check-input{
  margin-top: 8px;
}
.form-check-input:checked {
  background-color: #FF6B00;
  border-color: #FF6B00;
}
.form-check-label{
  font-size: 18px;
  font-weight: bold;
  line-height: 32px;
}
.current-q{
  color: #cf9463;
}
.total-q{
  color: #cf9463;
}
#q2, #q3, #q4, #q5, #q6, #q7{
  display: none;
}
.result-name{
  display: inline-block;
  font-size: 18px;
}
.share-btn-area{
  float: right;
}
.share-btn{
  width: 35px; 
  height: 35px; 
}
.test-page-title{
  font-size: 20px;
}
@media (max-width: 1920px) and (min-width: 1441px){
  .test-page-top-odd, .test-page-top-even, .test-page-bottom-odd, .test-page-bottom-even{
    background-size: 1574px;
    height: 84px;
  }
  .test-page-middle-odd, .test-page-middle-even{
    background-size: 1574px;
  }
}
@media (max-width: 768px) and (min-width: 320px){
  .test-page-top-odd, .test-page-top-even{
    width: 100%;
  }
  .test-page-middle-odd, .test-page-middle-even{
    width: 100%;
  }
  .test-page-bottom-odd, .test-page-bottom-even{
    width: 100%;
  }
  .test-page-area .row{
    margin: 0;
    text-align: center;
  }
}

/* result page */
.result-page-area{
  display: none;
}
.result-page-top{
  width: 82%;
  height: 78px;
  margin: 0 auto;
  background: url('../images/bg2_top_test135.jpg') center bottom no-repeat; 
  background-size: 1450px;
  overflow: hidden;
}
.result-page-middle{
  width: 82%;
  margin: 0 auto;
  background: url('../images/bg2_middle_test135.jpg') center center repeat-y; 
  background-size: 1450px;
  overflow: hidden;
  padding: 0 15%;
}
.result-page-bottom{
  width: 82%;
  height: 78px;
  margin: 0 auto;
  background: url('../images/bg2_bottom_test135.jpg') center top no-repeat; 
  background-size: 1450px;
  overflow: hidden;
}
.result-page-middle #result-name{
  color: #FF6B00;
  font-size: 25px;
}
.result-page-middle .result-item{
  background-color: #fff;
  border: 5px solid #eddec6;
  max-width: 230px;
}
.result-page-middle .result-item-title{
  color: #754c24;
  font-size: 20px;
}
#result-sum-name{
  color: #FF6B00;
  font-size: 20px;
}
.result-btn img:hover{
  cursor: pointer;
  filter: brightness(0.8);
}
.again-btn{
  margin-right: 15px;
}
#more-link{
  margin-right: 15px;
  width: 145px;
}
.result-img-m{
  display: none;
}
.btn-m-area{
  display: none;
}
.more-btn-m{
  display: none;
}
#result-description, .result-item-text, .result-sum{
  font-size: 18px;
  line-height: 32px;
}
.result-pre-item-text{
  font-size: 18px;
}
@media (max-width: 1920px) and (min-width: 1441px){
  .result-page-top, .result-page-bottom{
    background-size: 1570px;
    height: 84px;
  }
  .result-page-middle{
    background-size: 1570px;
  }
}
@media (max-width: 1060px) and (min-width: 769px){
  .result-page-middle #result-name{
    display: block;
  }
}

@media (max-width: 768px) and (min-width: 320px){
  .result-page-top{
    width: 100%;
  }
  .result-page-middle{
    width: 100%;
    padding: 0 10%;
  }
  .result-page-bottom{
    width: 100%;
  }
  .result-page-area .result-item-block{
    display: block !important;
  }
  .result-page-area .result-item-block div{
    margin: 0 auto 10px auto;
  }
  .result-img-pc{
    display: none;
  }
  .result-img-m{
    display: block;
  }
  .result-btn .again-btn{
    display: none;
  }
  .btn-m-area{
    display: flex;
    margin: 0 auto 20px auto;
    justify-content: center;
    /* max-width: 150px; */
  }
  .btn-m-area a:hover{
    cursor: pointer;
    filter: brightness(0.8);
  }
  .result-page-middle .result-item-title{
    font-size: 18px;
  }
  #result-sum-name{
    font-size: 16px;
  }
  #donate-link{
    width: 222px;
  }
  #more-link{
    margin-right: 15px;
    width: 155px;
  }
  .more-btn-pc{
    display: none;
  }
  .more-btn-m{
    display: block;
  }
  #result-description, .result-item-text, .result-sum{
    font-size: 16px;
    line-height: 24px;
  }
  .result-name{
    font-size: 16px;
  }
  .result-page-middle #result-name{
    display: block;
    font-size: 20px !important;
  }
}
@media (max-width: 500px){
  #more-link {
    margin-right: 5px;
  }
}
@media (max-width: 350px){
  .result-name{
    font-size: 13px !important;
  }
  .result-page-middle #result-name{
    font-size: 18px !important;
  }
}

/* footer */
footer { background: #b5b5b6; padding: 25px 0 0;}
.form-td{ display: flex; justify-content: center; align-items: center;}
.form-item{ flex: 1; margin: 0 10px;}
.form-item p{ text-align: right; color: #fff; font-weight: 700; margin-bottom: 0;}
.form-control{ width: 100%; padding: 10px; border: 1px solid #fff; border-radius: 5px;}
.fx{ flex: 1;}
input:focus{ outline: none; border: 1px solid #ff7802;  box-shadow: 3px 3px 3px 3px rgba(255, 120, 2, 0.1);}
.form-btn{ padding: 6px 12px 7px; background: #ff7802; color: #fff; font-size: 1rem;
border-radius: 5px; cursor: pointer; transition: 0.5s;}
.form-btn:hover { background-color: #ea5504; transition: 0.5s;}
.f-wrap {width: 970px; margin: 0 auto; display: flex; vertical-align: top; align-items: flex-end;}
.f-td1 { width: 75%; margin: 30px 5% 25px 0; color: #fff; font-size: 1rem; line-height: 1.625rem;}
.f-td1 a { color: #fff; transition: 0.5s;}
.f-td1 a:hover { color: #f37123; transition: 0.5s;}
.f-td1 p.info1 { float: left; width: 50%;}
.f-td1 p.info2{ float: left; margin-left: 2%; width: 48%;}
.f-td2 { width: 20%; margin: 40px 0 30px 0;}
.f-td2 li { float: left;}
.f-btn { 
  display: block; 
  width: 38px; 
  height: 38px; 
  background: #fff;
  border-radius: 50%; 
  color: #b5b5b6; 
  text-align: center;
  margin: auto 5px; 
  font-size: 1.4rem; 
  line-height: 36px;
}
.f-btn a { 
  display: block; 
  width: 100%; 
  height: 100%;
  text-decoration: none; 
  cursor: pointer; 
  border-radius: 50%;
  transition: 0.5s; 
  color: #b5b5b6; 
  padding-top: 2px;
}
.f-btn a:hover { 
  text-decoration: none; 
  background: #ea5504;
  border-radius: 50%; 
  color: #fff; 
  transition: 0.5s;
}
.f-btn2 { 
  display: block; 
  width: 38px; 
  height: 38px; 
  background: #fff; 
  border-radius: 50%;
  color: #b5b5b6; 
  text-align: center; 
  margin: auto 5px; 
  line-height: 39px; 
  font-size: 1.5rem;
}
.f-btn2 a { 
  display: block; 
  width: 100%; 
  height: 100%; 
  text-decoration: none;
  cursor: pointer; 
  border-radius: 50%; 
  transition: 0.5s; 
  color: #b5b5b6;
}
.f-btn2 a:hover { 
  text-decoration: none; 
  background: #ea5504;
  border-radius: 50%; 
  color: #fff; 
  transition: 0.5s;
}
.h-f{ position: absolute; right: 160px; top: 25px; background: #b5b5b6; z-index: 9;}
.h-f a{ color: #fff;}

@media screen and (max-width: 1024px) {
  .f-wrap { width: 95%;}
  .f-td1 { width: 72%; margin: 30px 5% 30px 0;}
  .f-td1 p { font-size: 1rem;}
  .f-td1 p span { margin-left: 30px;}
  .f-td2 { width: 23%;}
}

@media screen and (max-width: 1023px) {
  .f-wrap { width: 100%; flex-direction: column; text-align: center;}
  .f-td1 { width: 100%; margin: 20px 0;}
  .f-td1 p.info1 { width: 100%; display: block;}
  .f-td1 p.info2 { margin-left: 0; width: 100%; display: block;}
  .f-td2 { width: 232px; margin: 0 auto 20px auto;}
  .f-td2 li { margin: 0 10px;}
}
@media screen and (max-width: 640px) {
  .f-wrap { padding: 0 20px;}
  .fx{ flex: 2;}
}
@media screen and (max-width: 480px) {
  .form-td{ flex-wrap: wrap;}
  .form-item{ flex: none; margin: 0 7.5%; width: 85%;}
  .form-item p{ text-align: center; margin-bottom: 10px;}
  .fx{ flex: 1; margin-bottom: 10px;}
  .form-btn{ width: 100%; padding: 6px 12px 7px;}
}