.quiz-conts{}
.quiz-list {
    /*width: 100%;*/
    /*max-width: 600px;*/
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    
    -webkit-justify-content: center;
    justify-content: center;
    align-items: top;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    
    z-index: 998;
}
.quiz-list li{
    color: #111111;
    display: block;
    position: relative;
    /*border-bottom: 1px solid #dcdcdc;*/
    margin: 5px;
}

.quiz-h60px{ height: 60px;}

.quiz-list-50{ width: 50%;}
.quiz-list-65{ width: 65%;}
.quiz-list-70{ width: 72%;}
.quiz-list-80{ width: 80%;}
.quiz-list-90{ width: 87%;}
.quiz-list-full li{ width: 100%; margin: 0 0 10px 0;}
.quiz-list-5 li{ width: 18%;}
.quiz-list-3 li{ width: 30%;}
.quiz-list-2 li{ width: 50%;}

.quiz-list-left{
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    
    -webkit-justify-content: left;
    justify-content: left;
    align-items: top; 
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.quiz-list li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

.quiz-list li input[type=checkbox]{
  position: absolute;
  visibility: hidden;
}

.quiz-list li label{
    display: block;
    position: relative;
    
    font-weight: 300;
    font-size: 15px;
    text-align: justify;
    line-height: 24px;
    padding: 15px 15px;
    margin: 0;
    height: 100%;
    
    z-index: 9;
    cursor: pointer;
    -webkit-transition: all 0.25s linear;
}

.quiz-list li:hover label{
	color: #ffffff;
}

.quiz-list li .check{
  display: block;
  position: absolute;
  /*border: 4px solid #ffffff;*/
  background: #fff;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}

/*.quiz-list li .check{
  display: block;
  position: absolute;
  border: 4px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 20px;
  left: 0px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}*/

.quiz-list li:hover .check {
  /*border: 4px solid #8e622e;*/
    background: #8e622e; 
    color: #fff;
}

.quiz-list li .check::before {
    display: block;
    position: absolute;
	content: '';
    border-radius: 100%;
    height: 9px;
    width: 9px;
    top: 4px;
	left: 4px;
    margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}


input[type=radio]:checked ~ .check {
    /*border: 4px solid #ff0000;*/
    background: #8e622e; 
    color: #fff;
}

input[type=radio]:checked ~ .check::before{
  /*background: #ff6600;*/ /*點選後的點*/
}

input[type=radio]:checked ~ label{
  color: #ffffff;
}

input[type=checkbox]:checked ~ .check {
  /*border: 4px solid #ff6600;*/
  background: #8e622e; 
  color: #fff;
}

input[type=checkbox]:checked ~ .check::before{
  background: #ffffff;
}

input[type=checkbox]:checked ~ label{
  color: #ffffff;
}

.signature {
	position: fixed;
	margin: auto;
	bottom: 0;
	top: auto;
	width: 100%;
}

.signature p{
	text-align: center;
	font-family: Helvetica, Arial, Sans-Serif;
	font-size: 0.85em;
	color: #AAAAAA;
}

.signature .much-heart{
	display: inline-block;
	position: relative;
	margin: 0 4px;
	height: 10px;
	width: 10px;
	background: #AC1D3F;
	border-radius: 4px;
	-ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.signature .much-heart::before, 
.signature .much-heart::after {
	  display: block;
  content: '';
  position: absolute;
  margin: auto;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #AC1D3F;
  top: -4px;
}

.signature .much-heart::after {
	bottom: 0;
	top: auto;
	left: -4px;
}

.signature a {
	color: #AAAAAA;
	text-decoration: none;
	font-weight: bold;
}

.quiz-icon-box{ margin: 0 auto;}
.quiz-icon-box .num{ 
    width: 48px; float: left;
    font-size: 16px;
    line-height: 24px;
}
.quiz-icon-box .text{
    display: table-cell;
    vertical-align: top;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.05em;
    font-weight: 600;
    text-align: justify;
}
.quiz-icon-box .text2{ height: auto;}

@media only screen and (max-width:768px) {
    
}
@media only screen and (max-width:414px) {

}
@media only screen and (max-width:375px) {
    
}
@media only screen and (max-width:320px) {
 
}