﻿@charset "utf-8";
.fv-header-img {
	background: url(/images/Activity/header-bg.jpg)center;
	max-width: 1900px;
	min-height: 800px;
}
.quest {
	max-width: 1200px;
	background-color: #efefec;
	border-radius: 20px;
	margin: 80px auto;
    margin-bottom:0px;
	padding: 35px 100px;
	position: relative;
}
.q-title {
	text-align: center;
	border-radius: 39px;
	width: 78px;
	height: 78px;
	background-color: #64d99f;
	font-size: 2.5em;
	color: #fff;
	padding: 13px 0 0 0;
	margin: 0 0 0 -39px;
	position: absolute;
	left: 50%;
	top: -32px;
}
.q-content {
	padding: 28px 0;
}
.q-select-wrap {
	width: 75%;
	margin: 0 auto;
}
p.k-quest {
	font-size: 2.1em;
	font-family: 微軟正黑體;
	font-weight: 300;
	text-align: center;
}
.radio-button {
	display: inline-block;
	/*width: 5%;*/
	vertical-align: top;
}
.q-select {
    text-align:center;
	font-size: 2em;
}
/*.q-selectl {
	text-align: left;
}*/
.radio-img-wrap {
	display: inline-block;
}
.q-select-img {
	text-align: center;
}
.radio-img {
	/*width: 50%;*/
	text-align: center;
	height: auto;
}
.radio-img-button {
	/*width: 50%;*/
	text-align: center;
}
.q-select-img img {
	margin: 10px 0 30px;
}
.q-select input[type="radio"] {
	width: 20px;
	zoom: 1.5;
}
.q-select-img label.select-a {
/*width: 49%;*/
}
label.select-a {
    word-break: break-all;
	font-weight: 300;/*width: 80%;*/
}
.q-other-input input[type="text"] {
	width: 100%;
	margin: 0 0 0 10px;
}
p.prompt {
    color: blue;
	font-size: 1.5em;
	/*font-weight: 300;*/
	text-align: center;
}
p.k-answer {
	font-family: 微軟正黑體;
	font-size: 0.8em;
	font-weight: 400;
	color: #bd2418;
	padding: 17px 0 0 0;
}
p.k-remark {
	font-family: 微軟正黑體;
	font-size: 0.7em;
	font-weight: 400;
	color: #323232;
}
.explain {
	max-width: 1100px;
	background-color: #58c89c;
	border-radius: 20px;
	margin: 0 auto 26px;
	padding: 35px 50px;
	text-align: center;
	font-size: 2em;
	color: #fff;
}
/*footer*/

.thk {
	max-width: 1200px;
	background-color: #efefec;
	border-radius: 20px;
	margin: -140px auto 60px;
	padding: 30px 50px;
	vertical-align: top;
}
.fv-footer-img {
	background: url(/images/Activity/footer-bg.jpg)center;
	max-width: 1900px;
	min-height: 470px;
}
.thk-p {
	font-size: 1.8em;
	font-family: 微軟正黑體;
	font-weight: 400;
}
.thk input[type="radio"] {
	width: 20px;
	zoom: 1.5;
}
.thk-l {
	width: 54%;
	display: inline-block;
	vertical-align: top;
}
.thk-r {
	width: 45%;
	display: inline-block;
	text-align: right;
}
.thk-info-l label.select-a {
	padding: 2px 0;
}

@media screen and (max-width:880px) and (min-width:700px) {
.fv-header-img {
	background: url(/images/Activity/header-bg880.jpg)center;
	max-width: 880px;
	min-height: 600px;
	background-size: cover;
}
.quest {
	max-width: 700px;
}
p.k-quest {
	font-size: 1.3em;
	text-align: center;
}
.q-select {
	font-size: 1.4em;
}
.thk {
	max-width: 90%;
}
.q-select-img label.select-a {
	width: 100%;
	text-align: center;
}
.thk-l {
	width: 100%;
}
.thk-r {
	text-align: center;
	width: 100%;
}
.explain {
	max-width: 80%;
}
.q-select-wrap {
	width: 90%;
	margin: 0 auto;
	text-align: left;
}
.fv-footer-img {
	background: url(/images/Activity/footer-bg880.jpg)center;
	max-width: 880px;
	min-height: 470px;
	background-size: contain;
	background-repeat: no-repeat;
}
.radio-button {
/*width: 9%;*/
    
}
}

@media screen and (max-width:700px) and (min-width:652px) {
.fv-header-img {
	background: url(/images/Activity/header-bg880.jpg)center;
	max-width: 700px;
	min-height: 600px;
}
.quest {
	max-width: 90%;
	padding: 35px 10px 0px 20px;
}
label.select-a {
	padding: 0;
	font-weight: 300;
	width: 100%;
}
p.k-answer {
	font-size: 0.65em;
}
.thk {
	max-width: 90%;
	background-color: #efefec;
	border-radius: 20px;
	margin: -140px auto 20px;
	padding: 30px 20px;
	vertical-align: top;
}
.thk-l {
	width: 100%;
}
.thk-r {
	width: 100%;
	text-align: center;
}
.q-select-img label.select-a {
	width: 100%;
	text-align: center;
}
p.k-quest {
	font-size: 2em;
	font-family: 微軟正黑體;
	font-weight: 300;
	text-align: left;
}
.fv-footer-img {
	background: url(/images/Activity/footer-bg476.jpg)center;
	max-width: 700px;
	min-height: 470px;
	background-size: cover;
	background-repeat: no-repeat;
}
.radio-button {
/*width: 9%;*/
    
}
}

@media screen and (max-width:652px) and (min-width:476px) {
.fv-header-img {
	background: url(/images/Activity/header-bg476.jpg)center;
	max-width: 650px;
	min-height: 600px;
	background-repeat: no-repeat;
}
.fv-footer-img {
	background: url(/images/Activity/footer-bg476.jpg)center;
	max-width: 650px;
	min-height: 470px;
	background-size: contain;
	background-repeat: no-repeat;
}
.q-select-img label.select-a {
	width: 100%;
	text-align: center;
}
.radio-button {
/* width: 10%;*/
   
}
label.select-a {
	width: 100%;
}
.q-select-wrap {
	width: 100%;
}
.quest {
	max-width: 90%;
	background-color: #efefec;
	border-radius: 20px;
	margin: 80px auto;
	padding: 35px 35px;
	position: relative;
}
}

@media screen and (max-width:476px) {
    .q-select{
        text-align:left;
    }
.fv-header-img {
	background: url(/images/Activity/header-bg476.jpg)center;
	max-width: 476px;
	min-height: 500px;
	background-size: cover;
}
.q-content {
	padding: 20px 0 15px 0;
}
.q-select-img label.select-a {
	width: 100%;
	text-align: center;
}
.quest {
	max-width: 95%;
	padding: 35px 10px 0px;
	margin: 50px auto 10px;
}
.q-content p.k-quest {
	font-size: 1.4em;
	font-weight: 400;
	text-align: left;
}
p.k-answer {
	font-size: 0.6em;
}
p.k-remark {
	font-size: 0.45em;
}
label.select-a {
	/*padding: 0 9px;*/
	font-weight: 400;
	font-size: 0.7em;
	/*width: 100%;*/
}
.q-select-wrap {
	width: 100%;
	margin: 0 auto;
	text-align: left;
}
.radio-button {
/* width: 15%;*/
   
}
/*explain*/
.explain {
	max-width: 90%;
	padding: 20px 20px;
	font-size: 1.5em;
}
.explain:hover{
    opacity:.8;
}
.fv-footer-img {
	background: url(/images/Activity/footer-bg476.jpg)center;
	max-width: 476px;
	min-height: 380px;
	background-size: contain;
	background-repeat: no-repeat;
}
/*footer*/
.thk-l {
	width: 100%;
}
.thk-r {
	width: 100%;
}
.thk-info-l label.select-a {
	padding: 0;
	font-size: 0.7em;
}
.thk {
	margin: -140px auto 20px;
	max-width: 90%;
	padding: 20px 20px;
}
.thk-info-l p {
	font-size: 0.7em;
}
}
