.quiz h2{ text-align: center; font-size: 1.8em; line-height: 1.6em; font-weight: bold; color:#0189aa; padding-top: 10px; }
.quiz h3{ text-align: center; font-size: 1.3em; line-height: 1.6em; font-weight: bold; color:#000; padding-bottom: 10px; }

.quizAns{}
.quizAns h4 { background-color: #f288ab; color: #fff; padding: 10px; font-size: 1.2em; letter-spacing: 0.5em; 
	border-radius: 30px; 
-webkit-border-radius: 30px;
-moz-border-radius: 30px;}
.quizAns ul { padding: 30px 0;}
.end {text-align: center; line-height: 1.5em;}

@media all and (max-width: 767px) {
.quiz h2{font-size: 1.6em;}
.quiz h3{font-size: 1.0em;}
}
.txtArea .txt { margin-bottom: 0!important;}

.p_present, .p_present span { display: block; position: relative; margin: 0 auto; background-size: contain;}
@media all and (min-width: 768px) {
.p_present, .p_present span{ width:740px; height: 290px;}
}
@media all and (max-width: 767px) {
.p_present span{ width:100%; height: 0; padding-top: 39.189%;}
}

#quizArea { padding:55px 0 30px;}
#quiz {
background-color: #fff8c9; margin-bottom: 20px; padding:45px 10px 10px; position: relative;
border-radius: 30px; 
-webkit-border-radius: 30px;
-moz-border-radius: 30px; 
text-align: center;
}
#quiz div {
background-color: #fff; padding:10px; /*border: solid 10px #fff8c9;*/
border-radius: 30px; 
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
.quizTxt {background:url(../img/quiz/icon_q.png) no-repeat top left; padding-left: 45px; font-size: 1.4em; line-height: 1.6em; font-weight: bold; display: inline-block; padding-bottom: 10px; }
#quiz div ul { display: inline-block;text-align: left;}
#quiz div ul li {background-repeat: no-repeat; background-position: left center; min-height: 28px; font-size: 1.4em; font-weight: bold; padding-left: 45px; margin: 10px 0; }
#quiz div ul li.aswA {background-image:url(../img/quiz/icon_a.png);}
#quiz div ul li.aswB {background-image:url(../img/quiz/icon_b.png);}
#quiz div ul li.aswC {background-image:url(../img/quiz/icon_c.png);}


p.btn a {
  display: block;
  border-radius: 30px;
  background-color: #5bc5de;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../img/brave/btn_apply.png);
background-size: contain;
text-indent: -9999px;
margin: 0 auto;
}
p.btn a:hover {background-color: #89d5e7;}

.quiz #bknm { padding-top: 15px!important;}
#bknm div { padding-top: 15px;}
#bknm dl {padding: 0 20px 15px;}
#bknm dl dt, #bknm dl dd { padding: 5px; line-height: 1.6em;}
#bknm dl dt span { font-size: 1.1em; font-weight:bold; color:#038aab; margin-right: 0.4em; display: inline-block;}
#bknm dl dd {font-size: 1.2em; vertical-align: middle;}
#bknm dl dd span { font-size: 0.8em; font-weight:bold; color:#fff; padding: 0 0.2em; background: #d84f8f; text-align: center; margin-right: 0.4em; display: inline-block;}

@media all and (min-width: 768px) {
p.btn a {
width: 350px;
height: 60px;
}
}
@media all and (max-width: 767px) {
#quizArea { padding:45px 0 30px;}
.quizTxt { font-size: 1.2em;}
p.btn a {
width: 90%;
height: 0;
padding-top: 15%
}
}

#quiz .epnum { background-repeat: no-repeat; background-size: contain; display: inline-block; vertical-align: middle;  width:80px; height: 80px; text-indent: -9999px; position: absolute; top:-40px; left: 50%; margin-left: -40px;}
.quiz1 .epnum {background-image: url(../img/story/ep01.png);}
.quiz2 .epnum {background-image: url(../img/story/ep02.png);}
.quiz3 .epnum {background-image: url(../img/story/ep03.png);}
.quiz4 .epnum {background-image: url(../img/story/ep04.png);}
.quiz5 .epnum {background-image: url(../img/story/ep05.png);}
.quiz6 .epnum {background-image: url(../img/story/ep06.png);}
.quiz7 .epnum {background-image: url(../img/story/ep07.png);}
.quiz8 .epnum {background-image: url(../img/story/ep08.png);}
.quiz9 .epnum {background-image: url(../img/story/ep09.png);}
.quiz10 .epnum {background-image: url(../img/story/ep10.png);}
@media all and (max-width: 767px) {
#quiz .epnum { width:70px; height: 70px; text-indent: -9999px; position: absolute; top:-35px; left: 50%; margin-left: -35px;}
}