/************/
/* 퀴즈 css */
/************/

#resultBox {
	text-align: center;
	display: inline-block;
	width: 1280px;
	height: 720px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../../common/quizData/images/quiz_result.png);
}
#resultBox .thankyou {
	display: inline-block;
	margin-top: 72px;
}
#resultBox .countBox {
	color: #fff;
	font-size: 25px;
	position: absolute;
	left: 444px;
	top: 206px;
}
.resultView img {
	margin: 20px;
}
.totalYes {
	position: absolute;
	top: 42px;
	left: 127px;
	font-size: 35px;
	color: rgba(204, 44, 54, 1);
	font-weight: bold;
}
.reStartBtn {
	display: inline-block;
	position: absolute;
	top: 520px;
	left: 560px;
	cursor: pointer;
}
.gogoBtn {
	cursor: pointer;
	display: none;
	margin-top: 22px;
	position: relative;
	top: 190px;
	right: 250px;
}
#resultBox .resultView {
	position: relative;
	display: inline-block;
	width: 489px;
	top: 233px;
	left: -8px;
	border-collapse: collapse;
}
#resultBox .resultView td {
	position: absolute;
	width: 177px;
	height: 50px;
	color: #fff;
	font-size: 28px;
	line-height: 50px;
	vertical-align: middle;
	top: 140px;
}
#resultBox .resultView td:nth-child(1) {
	left: 48px;
}
#resultBox .resultView td:nth-child(2) {
	left: 295px;
}
#resultBox .resultView td:nth-child(3) {
	left: 338px;
}
#resultBox .resultView td:nth-child(4) {
	left: 507px;
}

#resultBox .resultView tr:nth-child(2) td {
	font-size: 0;
	line-height: 0;
}
#resultBox .resultView td img {
	display: inline-blcok;
	vertical-align: middle;
}
#resultBox .resultView td img:nth-child(2) {
	position: absolute;
	left: -20px;
	top: -10px;
}
#resultBox .resultTxt {
	color: #000;
	font-size: 20px;
	margin-top: 48px;
}
#quizDiv {
	/* display: none; */
	width: 1280px;
	height: 720px;
	position: absolute;
	left: 0px;
	top: 0px;
}
.quizEq {
	display: none;
	width: 1280px;
	height: 720px;
	/* background: url(../../common/quizData/images/box.png) */
}
.quizEq1 {
	display: block;
}

.checkIcon {
	display: none;
	position: absolute;
	left: -39px;
	top: 5px;
	width: 33px;
	height: 18px;
	background: url(../../common/quizData/images/quizCheckIcon.png);
}

.titleO {
	position: absolute;
	left: 68px;
	top: -44px;
	display: none;
	z-index: 1;
}
.titleX {
	position: absolute;
	left: 68px;
	top: -44px;
	display: none;
	z-index: 1;
}

.quizTitleDiv {
	position: relative;
	left: 10px;
	margin-top: 150px;
}

.quizTitleWarp {
	display: table;
	width: 820px;
	height: 60px;
	position: absolute;
	text-align: left;
	font-size: 24px;
	color: #012f3d;
	word-break: keep-all;
	word-wrap: break-word;
	top: -28px;
	left: 167px;
}
.quizaddtitle {
	word-break: keep-all;
	word-wrap: break-word;
	width: 750px;
	position: relative;
	top: 50px;
	left: 60px;
	font-size: 20px;
}
.quizTitle {
	font-size: 28px;
	font-weight: 600;
	line-height: 33px;
	display: table-cell;
	vertical-align: middle;
	color: #2b3e5b;
}

.quizContent {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 250px;
	top: 0px;
}
.quizCountNum {
	font-size: 30px;
	color: #fff;
	font-weight: bold;
}
.selectBox {
	display: inline-block;
	margin-left: 270px;
	margin-top: 10px;
}

.checkBtn {
	position: absolute;
	right: 440px;
	top: 358px;
	width: 132px;
	height: 37px;
	cursor: pointer;
	background: url(../../common/quizData/images/check_btn.png);
	text-align: center;
	display: none;
	z-index: 1;
}
.checkBtn:hover {
	background: url(../../common/quizData/images/check_btn_over.png);
}

.nextQuizBtn {
	position: absolute;
	top: 504px;
	left: 840px;
	width: 119px;
	height: 37px;
	cursor: pointer;
	background: url(../../common/quizData/images/btn_next.png);
	text-align: center;
	display: none;
	z-index: 1;
}
.nextQuizBtn:hover {
	background: url(../../common/quizData/images/btn_next_over.png);
}
.resultBtn {
	position: absolute;
	top: 504px;
	left: 840px;
	width: 119px;
	height: 37px;
	cursor: pointer;
	background: url(../../common/quizData/images/btn_result.png);
	text-align: center;
	display: none;
	z-index: 1;
}
.resultBtn:hover {
	background: url(../../common/quizData/images/btn_result_over.png);
}

.feedback {
	display: none;
	position: absolute;
	width: 998px;
	height: 185px;
	left: 211px;
	bottom: 0px;
	/* background: url(../../common/quizData/images/quizBottomBox.png); */
}
.quizEq .titleNum {
	display: inline-block;
	width: 963px;
	height: 75px;
	position: absolute;
	top: -30px;
	left: 60px;
	background-repeat: no-repeat;
	background-position-x: center;
}

.quizEq1 .titleNum {
	background-image: url(../../common/quizData/images/q1.png);
}
.quizEq2 .titleNum {
	background-image: url(../../common/quizData/images/q2.png);
}
.quizEq3 .titleNum {
	background-image: url(../../common/quizData/images/q3.png);
}
.quizEq4 .titleNum {
	background-image: url(../../common/quizData/images/q4.png);
}
.quizEq5 .titleNum {
	background-image: url(../../common/quizData/images/q5.png);
}

/* 객관식 */
.selectBox > li {
	cursor: pointer;
	position: relative;
	margin-bottom: 17px;
}
.selectBox > li span {
	vertical-align: top;
}
.selectBox .selectNumIcon1 {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-top: -3px;
	background: url(../../common/quizData/images/num1.png) no-repeat;
}
.selectBox .selectNumIcon2 {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-top: -3px;
	background: url(../../common/quizData/images/num2.png) no-repeat;
}
.selectBox .selectNumIcon3 {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-top: -3px;
	background: url(../../common/quizData/images/num3.png) no-repeat;
}
.selectBox .selectNumIcon4 {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-top: -3px;
	background: url(../../common/quizData/images/num4.png) no-repeat;
}
.selectBox .selectNumIcon5 {
	display: inline-block;
	width: 23px;
	height: 23px;
	margin-top: 0px;
	background: url(../../common/quizData/images/num5.png) no-repeat;
}
.selectBox .selectNumIcon1.on{background: url(../../common/quizData/images/num1_on.png) no-repeat;}
.selectBox .selectNumIcon2.on{background: url(../../common/quizData/images/num2_on.png) no-repeat;}
.selectBox .selectNumIcon3.on{background: url(../../common/quizData/images/num3_on.png) no-repeat;}
.selectBox .selectNumIcon4.on{background: url(../../common/quizData/images/num4_on.png) no-repeat;}
.selectBox .selectNumIcon5.on{background: url(../../common/quizData/images/num5_on.png) no-repeat;}

/* .selectBox > li:nth-child(1) .selectListTxt{
  max-width: 560px;
} */
.selectBox .selectListTxt {
	display: inline-block;
	width: 720px;
	line-height: 25px;
	font-size: 24px;
	word-break: keep-all;
	word-wrap: break-word;
	margin-left: 6px;
	margin-top: 0px;
	font-weight: 600;
}
.selectBox .selectCheck {
	display: none;
	position: absolute;
	left: 1px;
	top: -7px;
}
/* OX */
.oxBox {
	position: absolute;
	width: 1280px;
	text-align: center;
	top: 300px;
	left: -115px;
}
.checkImg {
	display: none;
	position: absolute;
	top: -15px;
	left: 417px;
}
.o_btn {
	display: inline-block;
	width: 76px;
	height: 76px;

	background-image: url(../../common/quizData/images/o_non.png);
	background-size: cover;
	cursor: pointer;
}
.x_btn {
	display: inline-block;
	width: 76px;
	height: 76px;
	margin: 0 100px;
	background-image: url(../../common/quizData/images/x_non.png);
	background-size: cover;
	cursor: pointer;
}

.answer {
	position: absolute;
	left: 135px;
	top: -45px;
	width: 890px;
	height: 193px;
	background-image: url(../../common/quizData/images/explain_1.png);
	background-repeat: no-repeat;
}
.answer > span {
	position: absolute;
	left: 90px;
	top: 6px;
	width: 710px;
	height: 33px;
	font-size: 30px;
	color: rgba(56, 50, 95, 1);
	font-weight: bold;
}
.commentary {
	position: absolute;
	left: 160px;
	top: 12px;
	width: 825px;
	height: 118px;
	/* background-image: url(../../common/quizData/images/explain_2.png); */
	background-repeat: no-repeat;
}
.commentary > span {
	position: absolute;
	width: 710px;
	left: 0px;
	top: 5px;
	color: black;
	height: 72px;
	line-height: 24px;
	font-size: 22px;
	word-break: keep-all;
	word-wrap: break-word;
	overflow: auto;
	font-weight: 400;
}

.titleTopBox {
	position: absolute;
	left: 90px;
	top: 205px;
	width: 805px;
	/* background: url(../../common/quizData/images/quizTitleBox.png); */
	height: 4px;
	display: none;
}

.popupBox {
	display: none;
	width: 1280px;
	height: 720px;
	position: absolute;
	left: 0px;
	top: 0px;
	background: url(../../common/quizData/images/popup_box.png);
	padding-left: 230px;
	padding-top: 172px;
	background-color: rgba(0, 0, 0, .8);
	z-index: 1;
}
.popupBox .popup_close {
	cursor: pointer;
	display: inline-block;
	position: absolute;
	width: 35px;
	height: 35px;
	left: 1050px;
	top: 104px;
	background: url(../../common/quizData/images/popup_close.png);
}
.popupBox .popup_close:hover {
	background: url(../../common/quizData/images/popup_close_over.png);
}

.popupBox h2 {
	position: relative;
	font-size: 20px;
	max-width: 830px;
}
.popupBox h2::before {
	content: '';
	display: inline-block;
	width: 50px;
	height: 50px;
	background: url(../../common/organizeData/images/bullet2.png) no-repeat;
	position: absolute;
	top: 4px;
	left: -25px;
	background-position-y: 2px;
	margin-bottom: 10px;
}
.popupBox > p {
	width: 760px;
	font-size: 17px;
}
.popupBox > p > span:nth-child(1) {
	display: inline-block;
	vertical-align: top;
	padding-right: 5px;
}
.popupBox > p > span:nth-child(2) {
	display: inline-block;
	vertical-align: top;
	width: 730px;
}

.popupBtn {
	cursor: pointer;
	display: inline-block;
	position: absolute;
	left: 450px;
	top: 110px;
	width: 200px;
	height: 31px;
	background: url(../../common/quizData/images/popup_btn.png) no-repeat;
	display: none;
}

.popupBtn:hover {
	background: url(../../common/quizData/images/popup_btn_over.png) no-repeat;
}
.noAlert1 {
	display: none;
	width: 100%;
	height: 100%;
	background-image: url(../../common/quizData/images/box1.png);
	/* background-color: rgba(0, 0, 0, 0.8); */
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 0;
	left: 0;
}
.noAlert2 {
	display: none;
	width: 100%;
	height: 100%;
	background-image: url(../../common/quizData/images/box2.png);
	/* background-color: rgba(0, 0, 0, 0.8); */
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 0px;
	left: 150px;
}
.noAlert3 {
	display: none;
	width: 100%;
	height: 100%;
	background-image: url(../../common/quizData/images/box3.png);
	/* background-color: rgba(0, 0, 0, 0.8); */
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 0;
	left: 0;
}
.textcolor {
	color: rgba(77, 71, 114, 1);
}
.noAlert4 {
	display: none;
	width: 100%;
	height: 100%;
	background-image: url(../../common/quizData/images/box4.png);
	/* background-color: rgba(0, 0, 0, 0.8); */
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 0;
	left: 0;
}
.quizStartBtn {
	position: absolute;
	left: 454px;
	top: 290px;
	z-index: 101;
	cursor: pointer;
}

.inputBox {
	position: absolute;
	top: 235px;
	left: -12px;
	width: 1280px;
	text-align: center;
}
.inputBox div {
	background-color: #fff;
	width: 450px;
	display: inline-block;
	text-align: center;
	border: 2px solid #673401;
	padding: 5px 20px;
	color: #673401;
	border-radius: 17px;
	font-size: 17px;
	font-weight: 800;
}
.inputBox input {
	opacity: 0.5;
	width: 334px;
	height: 24px;
	padding: 10px 20px;
	font-size: 18px;
	position: absolute;
	color: #fff;
	text-align: center;
	top: 73px;
	left: 320px;
	border: none;
	background: url(../quizData/images/inputBg.png);
}

.quizSub {
	position: absolute;
	top: 130px;
	left: 240px;
	width: 600px;
	z-index: 555;
	display: none;
}
.quizSubImg {
	position: absolute;
	top: 22px;
	left: -120px;
	width: 17px;
	height: 17px;
	background: url(../quizData/images/quizSub.png);
	background-repeat: no-repeat;
	background-position-y: center;
}
.quizSub > span {
	position: absolute;
	display: block;
	max-width: 600px;
	height: 24px;
	top: 20px;
	left: -105px;
	font-size: 17px;
	font-weight: 400;
	line-height: 22px;
	padding: 0 10px 0 10px;
}

.addquiztitle {
	background-color: #fff;
	width: 450px;
	display: inline-block;
	text-align: left;
	border: 2px solid #673401;
	padding: 5px 20px;
	color: #673401;
	border-radius: 17px;
	font-size: 17px;
	font-weight: 800;
	margin-top: 95px;
	margin-left: 256px;
}
