/*quiz*/

.read {
	background-repeat: no-repeat;
	background-position:top right;
	background-image: url(../img/quiz/p_present.png);
	
}
.read p { text-align: center; line-height: 1.5em;}
.underPink {
  background: linear-gradient(transparent 50%, #fddbea 50%); padding: 5px;text-shadow: 1px 1px 0px #fff; font-weight: bold;
}

h3 { text-align: center; font-size: 1.3em; line-height: 1.5em; padding: 10px 0;}

#quizArea { border: solid 2px #ffcce4; padding: 1em; margin: 1em 0 2em; text-align: center; position: relative;}
.quizTxt span {
	background-repeat: no-repeat;
	background-position:center left;
	background-image: url(../img/quiz/icon_q.png);
	text-align: center;
	padding: 10px 0 0px 55px;
	margin-bottom: 15px;
	min-height: 36px;
	display: inline-block;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.3em;
}
.answerTxt { background-color: #fde0ed; padding: 15px 5px 10px; margin-top: 10px;}
.answerTxt span {
	background-repeat: no-repeat;
	background-position:center left;
	background-image: url(../img/quiz/icon_a.png);
	text-align: center;
	padding: 10px 0 0px 55px;
	margin-bottom: 15px;
	min-height: 36px;
	display: inline-block;
	font-size: 1.8em;
	font-weight: bold;
	color: #f7439c;
	line-height: 1.2em;
}

#quiz .epnum { background-repeat: no-repeat; background-size: contain; display: inline-block; vertical-align: middle;  width:60px; height: 60px; text-indent: -9999px; position: absolute; top:4px; left: 4px;}
.quiz1 .epnum {background-image: url(../img/bkn01.png);}
.quiz2 .epnum {background-image: url(../img/bkn02.png);}
.quiz3 .epnum {background-image: url(../img/bkn03.png);}
.quiz4 .epnum {background-image: url(../img/bkn04.png);}
.quiz5 .epnum {background-image: url(../img/bkn05.png);}
.quiz6 .epnum {background-image: url(../img/bkn06.png);}
.quiz7 .epnum {background-image: url(../img/bkn07.png);}
.quiz8 .epnum {background-image: url(../img/bkn08.png);}
.quiz9 .epnum {background-image: url(../img/bkn09.png);}
.quiz10 .epnum {background-image: url(../img/bkn10.png);}

p.btn {width:320px; vertical-align: top; display: inline-block; }
p.btn a {
  display: block;
  border-radius: 30px;
  background-color: #f7439c;
background-repeat: no-repeat;
background-position: center center;
	background-size: contain;
width:100%; max-width: 340px; height: 80px;
margin: 0.5em auto 0.5em;
	text-indent: -9999px;
	background-image: url(../img/quiz/btn_quiz.png);
}
p.btn a:hover {background-color: #f27eb1}
p.btn a span { font-size: 0.8em}

.end {text-align: center; line-height: 1.5em; margin-bottom: 2em;}

.quiz #bknm { padding: 30px 0;;}
#bknm div { padding-top: 15px;}
#bknm dl {padding: 0 0 10px; border-bottom: dotted 2px #ffcce4; }
#bknm dl dt, #bknm dl dd { padding: 5px; line-height: 1.6em;}
#bknm dl dt span { 
font-size: 1.1em; 
font-family: vdl-megag, sans-serif;
font-style: normal;
font-weight: bold;
color: #e74c09; 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-family: vdl-megag, sans-serif;
font-style: normal;
font-weight: bold;
color:#fff; padding: 0 0.5em; background: #f7439c; text-align: center; margin-right: 0.5em; display: inline-block;}

@media all and (min-width: 768px) {
	.read { padding-top: 35px; min-height: 205px;}
	.read h2 { font-size: 1.3em; width:450px;}
	.read p { width:450px;}
	#bknm dl {margin: 0 20px; }
}

@media all and (max-width: 767px) {
	.read h2 { font-size: 1.0em;}
	.read { background-size: 80%; background-position: center 5em; padding-bottom: 0.5em;}
	.read p { padding-top: 45%; font-size: 0.9em;}
	
	h3 { font-size: 1.05em;}
	
	.quizTxt span {background-position:center top; background-size: 40px 32px; padding: 45px 0 0px 0px;  font-size: 1.2em;}
	
	.answerTxt span { font-size: 1.6em; }
	
	#quiz .epnum { width:40px; height: 40px;}
	
	p.btn {margin: 0.5em auto; width: 90%;}
	
	#bknm dl {padding: 0 0 6px;}
	#bknm dl dd {font-size: 1.1em;}
	
}

@media all and (max-width: 350px) {
	.read h2 { font-size: 0.9em;}
	h3 { font-size: 0.9em;}
	#quizArea {padding: 0.5em;}
}