/*-----------Default Setting-----------*/
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}
body,
html {
	margin: 0;
	padding: 0;
}
img {
	max-width: 100%;
	border: none;
}

body {
	font-family: Arial, "微軟正黑體", "新細明體", "細明體";
	font-size: 16px;
	background-color: rgb(239, 240, 244);
}
a{
	color: #b71b30;
	outline: none;
}
a:hover,
a:focus {
	color: #d80824;
}
.clearfix:before,
.clearfix:after{
  display: table;
  content: " ";
}
.clearfix:after{
  clear: both;
}
label {
	font-weight: normal;
}

h3,h4,h5{
	margin-top:0;
	margin-bottom:10px;
}
h4{
	font-size:16px;
	margin-bottom:5px;
}
select::-ms-expand {
	display: none;
}
.hide{
	display:none!important;
}

/*---transition---*/
.tran_cs {
	-webkit-transition: background-color .2s linear, color .2s linear;
	-moz-transition: background-color .2s linear, color .2s linear;
	-o-transition: background-color .2s linear, color .2s linear;
	-ms-transition: background-color .2s linear, color .2s linear;
	transition: background-color .2s linear, color .2s linear;
}


.survey_wrap{
    width: 800px;
    position: relative;
    box-shadow: rgb(221, 224, 235) 0px 2px 2px 0px;
    margin: 0px auto;
    background: rgb(255, 255, 255);
    overflow: hidden;
}
.survey_container{
	min-height:400px;
}
.survey_box{
	padding:30px 20px;
}
.survey_input{
	width: 100%;
    border: 1px solid #c2cacf;
    border-radius: 3px;
    padding: 7px 10px;
    box-shadow: none;
    -webkit-box-shadow: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
}
.survey_textarea,
.single_other_textarea,
.multi_other_textarea{
	width: 100%;
    border: 1px solid #c2cacf;
    border-radius: 3px;
    padding: 7px 10px;
    box-shadow: none;
    -webkit-box-shadow: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    resize : none;
}
.survey_description{
	line-height:24px;
	padding-bottom:20px;
}
.normal_info{
	padding:0 20px;
}
.row_group{
	margin-bottom:15px;
}
.row_title{
	padding-bottom:5px;
}
.row_title span{
	color: #b71b30;
	padding-right:2px;
}    
.survey_btn{
	border:none;
	border-radius: 4px;
	text-align: center;
	box-shadow: none;
	padding: 8px 12px;
	cursor: pointer;
	background-color: rgb(61, 186, 144);
	color:#fff;
	transition: background-color 0.3s ease 0s, opacity 0.3s ease 0s;
}

.survey_btn:hover:not(:disabled) {
    background-color: rgb(63, 163, 129);
}

.survey_handle{
	margin:30px 0;
}
.text-center{
	text-align:center;
}
.first_stage .survey_btn,
.done_stage .survey_btn{
	width:200px;
}
.label_check{
	cursor:pointer;
}

.qa_no{
	width:4%;
	position:relative;
	padding-left:6px;
	float:left;
}
.qa_title{
	width:96%;
	float:left;
}
.is_required{
	display: block;
    position: absolute;
    top: 3px;
    left: 0px;
    font-size: 14px;
    line-height: 14px;
    color: #b71b30;
}
.remark{
	color: rgb(152, 152, 152);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    margin-bottom:4px;
}
.qa_box{
	padding-left:4%;
	padding-bottom:30px;
}
.qa_answer{
	margin: 20px auto;
}
.qa_item{
	width:50%;
	float:left;
	margin-bottom:20px;
}
.qa_item label{
	position:relative;
	width:100%;
	display:block;
	cursor:pointer;
	overflow:hidden;
	border-radius: 3px;
	border:1px solid rgb(63, 163, 129);
}
.qa_item:nth-child(odd){
	padding-right:5px;
	clear:left;
}
.qa_item:nth-child(even){
	padding-left:5px;
}
.qa_option,
.qa_item_title,
.item_img{
	position:relative;
	z-index:10;
}
.qa_item_title{
	min-height:40px;
	padding:8px 10px 8px 32px;
	position:relative;
	line-height: 1.5;
	overflow-wrap: break-word;
    word-break: break-word;
}
.item_img{
	padding:0 10px 10px;
}
.item_img img{
	display:block;
	max-height:150px;
}
.item_text{
	display:none;
	padding:10px;
	border: 1px solid rgb(63, 163, 129);
	border-top-width: 0px;
	position: relative;
	top: -2px;	
}
.item_text.display{
	display:block;
}
.qa_option{
	position:absolute;
	left:10px;
	top:14px;
	margin:0;
}
.qa_option:checked + .qa_area{
	background:rgb(63, 163, 129);
}
.qa_option:checked ~ .qa_item_title{
	color:#fff;
}
.qa_area{
	z-index:1;
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
}
.qa_stage,
.done_stage{
	display:none;
}
.done_stage{
	padding:50px 0;
}
.qa_step{
	display:none;
}
.qa_step.active{
	display:block;
}
.transparent{
	opacity: 0;
}
.change_qa{
	opacity: 1;
    transition: opacity 250ms ease-in 0s;
}
.notice_msg:not(:empty){
	margin-bottom: 8px;
}
.notice_msg span{
	display:inline-block;
	padding:7px 10px;
	border-radius: 16px;
	background-color: rgb(238, 65, 93);
	font-size:14px;
	color:#fff;
}
.qa_type {
	margin-bottom: 8px;
}
.qa_type span{
	display:inline-block;
	padding:7px 10px;
	border-radius: 16px;
	background-color: rgb(120, 121, 122);
	font-size:14px;
	color:#fff;
}
@media (max-width: 768px) {
	.survey_wrap{
	    width: 100%;
	}
	.normal_info{
		padding:0;
	}
	.qa_no{
		width:34px;
	}
	.qa_title{
		width: calc(100% - 34px);
	}
	.qa_box{
		padding-left:0;
	}
}

.child-hide{
	display: none;
}

.border-notice{
	border-width: 2px;
	border-color: rgb(238, 65, 93);
}