@charset "utf-8";


.contents {display:flex; padding:20px; height:100%; align-items:center; background:rgba(255,255,255,.7);}
.contents-wrap {padding:10px; width:1400px; max-width:100%; margin:0 auto; background:#fff; border-radius:30px; box-shadow:10px 10px 20px rgba(0,0,0,.2);}

.area {}
.area-btn {position:relative;}
.area-btn img {border-radius:25px 25px 0 0; max-width:100%;}
.area-btn a {position:absolute; width:50px; height:50px; line-height:44px; text-align:center; display:block; background:#3fc79f; border:3px solid; opacity:.8; border-radius:50%; color:#fff;}
.area-btn a:hover {opacity:1;}
.area-btn a.on {background:#ee2e24;}
.area-btn .backBtn {padding:16px 25px 16px 45px; left:10px; top:10px; width:auto; height:auto; line-height:1; color:#000; border:0; border-radius:15px; background:url(../images/common/i-back.svg)20px 45% /18px no-repeat; font-weight:700; font-size:18px; }
.area-info {display:flex; position:relative; padding:40px; align-items:center; }
.area-info .today {min-width:145px; padding:0 25px; line-height:45px; color:#fff; background:var(--c_green2); display:inline-block; font-size:14px; border-radius:100px;}
.area-list {
	display:grid;
	grid-template-columns:repeat(5, 20%); 
	width:1000px;
}
.area-list ul {padding-right:10px;}
.area-list ul li {}
.area-list ul li a {font-size:14px;color:#000; display:inline-block;line-height:1.2;}
.area-list ul li:hover a {color:var(--c_green1);}
.area-list ul li.on a {color:var(--c_red);}
.area-state {width:115px;}
.area-state p {padding-left:16px; font-size:14px; position:relative; color:#000;}
.area-state p:before {position:absolute; content:''; display:block; width:10px; height:10px; left:0; top:5px; border-radius:50%;}
.area-state p.ing:before {background:var(--c_green1);}
.area-state p.end:before {background:var(--c_red);}
.area-state p.int:before {background:var(--c_gray);}

.quiz {}
.quiz-wrap {display:flex; padding-bottom:10px;}
.quiz-wrap>div {width:calc((100% - 10px)/2); border-radius:20px; border:3px solid #eee;}
.quiz-img {overflow:hidden; }
.quiz-img img {width:100%; height:100%; object-fit:contain; object-position:center;}
.quiz-inner {padding:20px; margin-left:10px; background:#fff; height:550px; overflow-y:auto;}
.quiz-txt .titAcc {background:#2d8ac3; color:#fff; font-size:22px; padding:20px; border-radius:20px;}
.quiz-info {color:#000;}
.quiz-info::-webkit-scrollbar {
  width: 7px;
}
.quiz-info::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius: 100px;
  background-clip: padding-box;
  /* border: 2px solid transparent; */
}
.quiz-info h3 {font-size:36px; font-weight:700; padding:30px 0;}
.quiz-list {}
.quiz-list li {margin-top:25px; padding-left:20px;}
.quiz-list li h4 {padding-bottom:5px; color:#000; font-size:18px; position:relative; font-weight:700;}
.quiz-list li h4:before {content:''; display:block; width:4px; height:4px; background:#000; position:absolute; left:-10px; top:5px; border-radius:0;}
.quiz-list li p {font-size:16px; font-weight:300;}
.quiz-list li .acc {color:red; border-bottom:1px solid; font-weight:400;}


.quiz-result {}
.quiz-result>div {
	position:relative;display:flex; align-items:center; border:3px dashed; border-radius:25px;
	/* border-image:url(../images/common/border-dasged.jpg)27 23 / 50px 30px / 1rem round space; */
}
.quiz-question {padding:60px 35px; border-color:var(--c_blue) !important;}
.quiz-question-icon {width:280px;}
.quiz-question-icon p {font-size:72px; font-weight:700; color:var(--c_blue); display:inline-block; position:relative; line-height:1;}
.quiz-question-icon p:after {content:''; display:block; width:37px; height:27px; background:url(../images/sub/i-quiz.svg)center /100% no-repeat; position:absolute; right:0;top:-15px;}
.quiz-question-txt {width:calc(100% - 460px); padding-right:10vw;}
.quiz-question-txt p {font-size:22px; color:#000;}
.quiz-question-answer {display:flex; width:180px;}
.quiz-question-answer a {display:block; width:67px; height:67px; background:center no-repeat;}
.quiz-question-answer a.o {background-image:url(../images/sub/i-o.jpg); margin-right:45px;}
.quiz-question-answer a.x {background-image:url(../images/sub/i-x.jpg);}

.quiz-correct {padding:60px; border-color:var(--c_red) !important;}
.quiz-correct-icon {width:200px;}
.quiz-correct-icon p {color:var(--c_red); padding-right:75px; font-size:30px; font-weight:700; display:inline-block; line-height:67px;}
.quiz-correct-icon p.co {background:url(../images/sub/i-o.jpg)100% center no-repeat; background-size:40%;}
.quiz-correct-icon p.in {background:url(../images/sub/i-x.jpg)100% center no-repeat; background-size:40%;}
.quiz-correct-icon p.num1 {background:url(../images/sub/i-num1.jpg)100% center no-repeat;}
.quiz-correct-icon p.num2 {background:url(../images/sub/i-num2.jpg)100% center no-repeat;}
.quiz-correct-icon p.num3 {background:url(../images/sub/i-num3.jpg)100% center no-repeat;}
.quiz-correct-icon p.num4 {background:url(../images/sub/i-num4.jpg)100% center no-repeat;}
.quiz-correct-txt {width:calc(100% - 200px); padding-right:10vw; }
.quiz-correct-txt p {font-size:18px; color:#000;}
.quiz-correct-btn {padding:4px 60px 0px 0; display:block; color:var(--c_blue); font-size:20px; font-weight:700; position:absolute; right:40px; bottom:30px;}
.quiz-correct-btn {background:url(../images/sub/next-btn.png)100% center no-repeat;}

.quiz-incorrect {padding:35px 0; justify-content:center;border-color:var(--c_red) !important;}
.quiz-incorrect-txt {}
.quiz-incorrect-txt p {padding:0 0 0 130px; line-height:96px; font-size:36px; color:#000;background:url(../images/sub/incorrect-icon.png)0 center no-repeat;}
.quiz-incorrect-btn {padding:4px 60px 0px 0; display:block; color:var(--c_blue); font-size:20px; font-weight:700; position:absolute; right:40px; top:50%; transform:translateY(-50%);}
.quiz-incorrect-btn {background:url(../images/sub/next-btn.png)100% center no-repeat;}

.quizEnd {position:fixed; left:0; top:0; width:100%; height:100vh; display:none;}
.quizEnd.on {display:block;}
.quizEnd-wrap {
	width:1400px; max-width:calc(100% - 40px); border:10px solid #fff; border-radius:30px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
	background:url(../images/sub/area-img.jpg)center /cover no-repeat; box-shadow:10px 10px 20px rgba(0,0,0,.2);
}
.quizEnd-inner {padding:80px 20px; background:rgba(0,0,0,.6);border-radius:25px; text-align:center;}
.quizEnd-card {padding:240px 40px 0; width:800px; max-width:100%; margin:0 auto; background:#fff url(../images/sub/card-img.png)center top /100% no-repeat; border-radius:20px;}
.quizEnd-card p {font-size:24px; color:#000;}
.quizEnd-btn {padding:30px 0 45px; display:flex; justify-content:center; align-items:center;}
.quizEnd-btn a {margin:0 5px;width:200px; line-height:60px; border-radius:100px; color:#fff; font-weight:700; font-size:18px;}
.quizEnd-btn a.end {padding-left:35px; background:#021a32 url(../images/sub/i-eduEnd.svg)40px 40% /26px no-repeat;}
.quizEnd-btn a.print {padding-left:45px; background:#021a32 url(../images/sub/i-print.svg)32px center /32px no-repeat;}




/* 특정기간 퀴즈 */
.edu {padding:50px 20px; overflow-y:auto; display:block;}
.eduQuiz-result {}
.eduQuiz-resultWrap {padding:50px 50px 50px 40px;position:relative; border:3px dashed; border-radius:25px;}
.eduQuiz-question { border-color:var(--c_blue) !important;}
.eduQuiz-questionWrap {margin-bottom:30px;}
.eduQuiz-question-tit {padding-bottom:20px;}
.eduQuiz-question-tit p {font-size:72px; font-weight:700; color:var(--c_blue); display:inline-block; position:relative; line-height:1;}
.eduQuiz-question-tit p:after {content:''; display:block; width:37px; height:27px; background:url(../images/sub/i-quiz.svg)center /100% no-repeat; position:absolute; right:0;top:-15px;}
.eduQuiz-question-txt {padding-bottom:10px; }
.eduQuiz-question-txt p {font-size:24px; color:#000;}
/*.eduQuiz-question-answer {display:flex;}*/
.eduQuiz-question-answer {display: block;}
.eduQuiz-question-answer a {display:block; width:67px; height:67px; background:center no-repeat; position:relative;}
.eduQuiz-question-answer a.o {background-image:url(../images/sub/i-o-off.jpg); margin-right:45px;}
.eduQuiz-question-answer a.x {background-image:url(../images/sub/i-x-off.jpg);}
.eduQuiz-question-answer a.o.on {background-image:url(../images/sub/i-o.jpg);}
.eduQuiz-question-answer a.x.on {background-image:url(../images/sub/i-x.jpg);}
.eduQuiz-question-answer a.num {width:auto; height:auto ;line-height:1.5; border-radius:50%; font-size:24px; margin-right:50px; color:#000; font-weight:500;}
.eduQuiz-question-answer a.num.on {color:#ee2e24;}
.eduQuiz-question-answer label {position:absolute; left:0; top:0; right:0; bottom:0; cursor:pointer;}
.eduQuiz-question-answer input {position:absolute; left:-9999px;}

.eduQuiz-correct-icon {width:200px;}
.eduQuiz-correct-icon p {color:var(--c_red); padding-right:75px; font-size:30px; font-weight:700; display:inline-block;background:url(../images/sub/i-o.jpg)100% center no-repeat; line-height:67px;}
.eduQuiz-correct-txt {width:calc(100% - 200px); padding-right:10vw; }
.eduQuiz-correct-txt p {font-size:18px; color:#000;}
.eduQuiz-correct-btn {padding:4px 60px 0px 0; display:block; color:var(--c_blue); font-size:20px; font-weight:700; position:absolute; right:40px; bottom:30px;}
.eduQuiz-correct-btn {background:url(../images/sub/next-btn.png)100% center no-repeat;}

.eduQuiz-incorrect {padding:35px 0; justify-content:center;border-color:var(--c_red) !important;}
.eduQuiz-incorrect-txt {}
.eduQuiz-incorrect-txt p {padding:0 0 0 130px; line-height:96px; font-size:36px; color:#000;background:url(../images/sub/incorrect-icon.png)0 center no-repeat;}
.eduQuiz-incorrect-btn {padding:4px 60px 0px 0; display:block; color:var(--c_blue); font-size:20px; font-weight:700; position:absolute; right:40px; top:50%; transform:translateY(-50%);}
.eduQuiz-incorrect-btn {background:url(../images/sub/next-btn.png)100% center no-repeat;}


.eduQuiz-submitBtn {text-align:right;}
.eduQuiz-submitBtn a {}

/* ************************ 태블릿 이하(~1199) ************************ */
@media screen and (max-width: 1199px) {
	
	.area-btn img {}
	.area-btn a {display:none;}
	.area-btn .backBtn {display:block; font-size:13px;}
	.area-info {display:block; padding:30px;}
	.area-list {grid-template-columns:repeat(3, 33.3333%);width:100%;}
	.area-list ul:nth-child(1) {order:1;}
	.area-list ul:nth-child(2) {order:4;}
	.area-list ul:nth-child(3) {order:2;}
	.area-list ul:nth-child(4) {order:5;}
	.area-list ul:nth-child(5) {order:3;}
	.area-list ul {}
	.area-list ul li {}
	.area-list ul li a {}
	.area-info .today {vertical-align:bottom; margin-top:10px;}
	.area-state {padding:16px 0 0; display:inline-block;}
	
	
	
	.quiz {}
	.quiz-wrap>div {}
	.quiz-info {height:100%;}
	.quiz-info h3 {font-size:30px; padding-bottom:20px;}
	.quiz-inner {padding:50px 20px 30px 30px;}
	.quiz-list li {margin-top:20px;}
	.quiz-list li h4 {}
	
	
	.quiz-result>div {}
	
	.quiz-question {padding:50px 30px; }
	.quiz-question-icon {width:200px;}
	.quiz-question-icon p {font-size:60px;}
	.quiz-question-icon p:after {width:30px; height:22px; top:-8px;}
	.quiz-question-txt {width:calc(100% - 350px);}
	.quiz-question-txt p {font-size:20px;}
	.quiz-question-answer {width:150px;}
	.quiz-question-answer a {width:60px; height:60px; background-size:100%;}
	.quiz-question-answer a.o {margin-right:30px;}
	
	.quiz-correct {padding:50px;}
	.quiz-correct-icon {width:180px;}
	.quiz-correct-icon p {font-size:27px;}
	.quiz-correct-txt p {font-size:17px;}
	
	
	.quiz-incorrect-txt p {font-size:30px; background-size:95px; line-height:85px;}
	
	.quizEnd-card {padding:240px 20px 0;}
	.quizEnd-card p {font-size:22px;}
	.quizEnd-btn a {font-size:17px; line-height:55px;}
	
	
	/* 특정기간 퀴즈 */
	.eduQuiz-question-tit {}
	.eduQuiz-question-tit p {font-size:60px;}
	.eduQuiz-question-tit p:after {width:30px; height:22px; top:-8px;}
	.eduQuiz-question-txt {}
	.eduQuiz-question-txt p {font-size:20px;}
	.eduQuiz-question-answer {}
	.eduQuiz-question-answer a {width:60px; height:60px; background-size:100%; }
	.eduQuiz-question-answer a.o {margin-right:30px;}
	.eduQuiz-question-answer a.num {font-size:22px; margin-right:40px;}
	
	.eduQuiz-correct {padding:50px;}
	.eduQuiz-correct-icon {width:180px;}
	.eduQuiz-correct-icon p {font-size:27px;}
	.eduQuiz-correct-txt p {font-size:17px;}
	
	
	.eduQuiz-incorrect-txt p {font-size:30px; background-size:95px; line-height:85px;}
	
	.quizEnd-card {padding:240px 20px 0;}
	.quizEnd-card p {font-size:22px;}
	.quizEnd-btn a {font-size:17px; line-height:55px;}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

}

/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {
	
	body {font-size:15px; line-height:1.6;}
	
	.area-info {padding:20px; }
	.area-info .today {font-size:13px; padding:0 20px; min-width:130px;}
	.area-list {margin-top:-5px;}
	.area-list {grid-template-columns:repeat(2, 50%);width:100%;}
	.area-list ul:nth-child(1) {order:1;}
	.area-list ul:nth-child(2) {order:3;}
	.area-list ul:nth-child(3) {order:5;}
	.area-list ul:nth-child(4) {order:2;}
	.area-list ul:nth-child(5) {order:4;}
	
	.area-list ul+ul {margin-left:0;}
	.area-list ul li {margin-top:5px;}
	
	
	.mBlock {height:100%; overflow-y:auto; display:block;}
	.quiz-wrap {flex-wrap:wrap;}
	.quiz-wrap>div { width:100%; }
	.quiz-inner {margin:10px 0 0;}
	.quiz-info h3 {font-size:24px; padding-bottom:14px;}
	.quiz-list li {margin-top:14px;}
	.quiz-list li h4 {font-size:16px;}
	
	.quiz-result>div {flex-wrap:wrap; justify-content:center;}
	
	.quiz-question {padding:40px 20px;}
	.quiz-question-icon {width:100%; }
	.quiz-question-icon p {font-size:48px;}
	.quiz-question-icon p:after {width:24px; height:20px; top:-7px;}
	.quiz-question-txt {width:100%; padding:15px 0;}
	.quiz-question-txt p {font-size:18px;}
	.quiz-question-answer {width:100%;}
	.quiz-question-answer a {width:50px; height:50px;}
	.quiz-question-answer a.o {margin-right:20px;}
	
	.quiz-correct {padding:40px 40px 60px;}
	.quiz-correct-icon {width:100%;}
	.quiz-correct-icon p {font-size:24px; padding-right:60px; background-size:50px; line-height:50px;}
	.quiz-correct-txt {width:100%; padding-right:0; padding-top:20px;}
	.quiz-correct-txt p {font-size:16px;}
	.quiz-correct-btn {padding:4px 45px 0px 0; right:30px; bottom:20px;  font-size:18px; background-size:40px;}
	

	.quiz-incorrect {padding:30px; justify-content:left;}
	.quiz-incorrect-txt p {padding:0 0 0 85px; font-size:24px; background-size:70px; line-height:62px;}
	.quiz-incorrect-btn {padding:4px 45px 0px 0; right:30px; font-size:18px; background-size:40px;}
	.quiz-incorrect-btn {
		padding:4px 60px 0px 0; display:block; color:var(--c_blue); font-size:20px; font-weight:700;
		position:relative; right:auto; top:auto; transform:none;}
	
	.quizEnd-inner {padding:8vw 20px;}
	.quizEnd-card  {padding:25vw 20px 0;}
	.quizEnd-card p {font-size:19px;}
	.quizEnd-btn {display:block; text-align:center; padding:20px 0 35px;}
	.quizEnd-btn a {width:180px; display:inline-block; margin:3px; font-size:16px; line-height:48px;}
	.quizEnd-btn a.end {padding-left:25px; background:#021a32 url(../images/sub/i-eduEnd.svg)40px 40% /20px no-repeat}
	.quizEnd-btn a.print {padding-left:35px;background:#021a32 url(../images/sub/i-print.svg)32px center /26px no-repeat}
	
	
	/* 특정기간 퀴즈 */
	.eduQuiz-result>div {flex-wrap:wrap;}
	.eduQuiz-resultWrap {padding:30px;}
	.eduQuiz-question-tit {padding-bottom:15px;}
	.eduQuiz-question-tit p {}
	.eduQuiz-question {}
	.eduQuiz-question-tit {}
	.eduQuiz-question-tit p {font-size:48px;}
	.eduQuiz-question-tit p:after {width:24px; height:20px; top:-7px;}
	.eduQuiz-question-txt p {font-size:18px;}
	.eduQuiz-question-answer {width:100%;}
	.eduQuiz-question-answer a {width:50px; height:50px;}
	.eduQuiz-question-answer a.o {margin-right:20px;}
	.eduQuiz-question-answer a.num {font-size:20px; margin-right:20px; }
	
	
	
	
	
	
	
	
}