#quiz { height: 100%; overflow: hidden; /* max-width: 1000px; */}

#quiz #intro { height: 100%; } 
#quiz #intro > div { /* border: 1px solid #316eeb; */}
#quiz #intro .quiz-intro-left { padding: 0; background: url('../images//quiz/quiz_in_bg.png') no-repeat top left / 100%; } 

#quiz #intro .intro-wrap { height: 100%; display: flex; align-items: center; justify-content: center; padding-top: 4rem; } 

#quiz .intro-wrap.column { padding: 0; } 

.intro-section { display: flex; flex-direction: column; position: relative; } 
.intro-section > * { /* border: 1px solid green; */
 margin: 4% 0; } 
#quiz .intro-section .intro-title { position: absolute; top: 0; left: -9rem; font-size: 2rem; line-height: 2.375rem; font-weight: 700; color: #000; } 
#quiz .intro-section .intro-belt { font-size: 1.3em; color: #000; } 
#quiz .intro-section .intro-text { font-size: 1em; color: #000; font-weight: 700;line-height: 1.25rem; } 
#quiz .intro-section .intro-text span { color: #F7B616; font-weight: 700; } 
#quiz .intro-section button#start-quiz { text-align: center; width: 107px; height: 41px; margin-top: 2.375rem; font-size: 1rem; font-weight: 700; color: #000; border-radius: 40px; border: none; cursor: pointer; background: #F7B616; text-transform: uppercase; } 
#quiz .intro-section button#start-quiz:hover { background-position: 0 0; } 

/* end of intro */

#assessment { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 5%; } 

#assessment .steps { display: none; width: 100%; min-height: 440px; flex-direction: column; } 

#assessment .steps.active { display: flex; } 

#assessment .rubric { display: flex; align-items: center; } 

.rubric .quiz-number { max-width: 90px; width: 100%; height: 90px; float: left; display: flex; align-items: center; justify-content: center; color: #000; background-color: #F2F2F2; font-size: 1.625rem; font-weight: bold; border-radius: 10px; } 

.notice-wrap .notice { font-size: 1.2em; color: #eb4031; height: 2em; } 

.rubric .quiz-number.q-1 { background-position: 0px 0px; } 
.rubric .quiz-number.q-2 { background-position: -90px 0px; } 
.rubric .quiz-number.q-3 { background-position: -180px 0px; } 

.rubric p.quiz-title { font-size: 1.5em; padding-left: 1rem; color: #000; } 

.rubric p.quiz-title u { color: #eb4031; } 

.choices { /* float: left; height: 148px; */
 padding-left: 5%; } 

.choices ul { /* margin-left: 200px; */}

.choices ul li { width: 100%;
 font-size: 1.125em; line-height: 20px; cursor: pointer; padding: 0.3rem; } 
.choices li span { display: inline-block; /* float: left; */
 width: 20px; height: 20px; background: transparent url(../images/quiz/answernum.png) no-repeat 0 0; /* margin-bottom: 10px; margin-right: 10px; */
 text-indent: -9999em; position: relative; margin-right: 0.4em; } 

.choices li.correct_li span { background: transparent url(../images/quiz/right_num.png) no-repeat 0 0; margin-left: -30px; width: 50px; } 

.choices li.choice_1 span { background-position: 0px 0px; } 
.choices li.choice_2 span { background-position: -20px 0px; } 
.choices li.choice_3 span { background-position: -40px 0px; } 
.choices li.choice_4 span { background-position: -60px 0px; } 

.choices li.choice_1.selected span,
.choices li.choice_1:hover span { background-position: 0px -20px; } 
.choices li.choice_2.selected span,
.choices li.choice_2:hover span { background-position: -20px -20px; } 
.choices li.choice_3.selected span,
.choices li.choice_3:hover span { background-position: -40px -20px; } 
.choices li.choice_4.selected span,
.choices li.choice_4:hover span { background-position: -60px -20px; } 

.choices .selected span::after { content: ""; width: 25px; height: 25px; background: transparent url(../images/quiz/chek.png) no-repeat 0 0; position: absolute; top: -10px; right: -5px; } 

.choices li.choice_1.correct_li span { background-position: 0px 0px; } 
.choices li.choice_2.correct_li span { background-position: 0px -20px; } 
.choices li.choice_3.correct_li span { background-position: 0px -40px; } 
.choices li.choice_4.correct_li span { background-position: 0px -60px; } 

.choices .check-v { display: none; width: 25px; height: 25px; background: transparent url(../images/quiz/chek.png) no-repeat 0 0; position: relative; text-indent: -9999em; /* left: 202px; */}

.choices .right_num { display: none; width: 50px; height: 20px; background: transparent url(../images/quiz/right_num.png) no-repeat 0 0; position: absolute; text-indent: -9999em; } 

button.quiz-buttons { width: 110px; height: 40px; border: none; cursor: pointer; display: none; float: right;font-family: inherit; color: #000; font-weight: 700;font-size: 1rem; border-radius: 40px; background: #F7B616; } 

button.quiz-buttons.active { display: block; } 

.choices li.disabled { pointer-events: none; /* opacity:0.7; */}

div.check { width: 100%; } 

button.check-btn { display: none; margin-top: 20px; margin-right: 10px; } 

button.check-btn:hover,
button.next-btn:hover,
button.result-btn:hover,
#result button#retry:hover { background-color: #F2BF27; } 

button.next-btn { /* position: absolute; */
 right: 10px; margin-top: 20px; z-index: 1; } 

button.result-btn { /* position: absolute; */
 right: 10px; margin-top: 20px; z-index: 1; } 

div.result-area { display: none; /* width: 815px; height: 230px; */
 /* top: 318px; margin-left: 195px; */
 /* background: rgba(160, 150, 180, 0.8) url(../images/quiz/commentarybg.png) no-repeat 0 0; */
 /* float: left; */
 /* position: absolute; */
 align-items: flex-start; gap: 1rem; padding-top: 1rem; margin-top: 1rem; border-top: 1px solid #F7B616; } 

.result-area .correct-area { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 5.625rem; height: 5.625rem; background-color: #F7B616; border-radius: 20px; } 

.result-area .correct-area .correct-title { font-size: 1.125em; text-align: center; font-weight: 500; color: #000; } 

.result-area .correct-area .correct-number { font-size: 2em; font-weight: 700; text-align: center; color: #000; } 

.result-area .explain-area { display: flex; gap: 1rem; align-items: flex-start; width: 100%; } 

.result-area .explain-area .explain-title { flex: 0 0 auto; padding: 0.5rem 2rem; font-size: 1.125rem; font-weight: 500; color: #000; background: #FFEBB9; border-radius: 10px; } 

.result-area .explain-area .explain-body { overflow-y: auto; width: 100%; max-height: 9rem; font-weight: 500; font-size: 0.875rem; color: #000; } 

/* end of assessment */

#result { display: none; background-color: #f2f2f2; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; align-items: center; justify-content: center; flex-direction: column; } 
#result .result-title { padding: 1rem 7rem; background: #ddd; border-radius: 20px; }
#result .result-title img { vertical-align: middle; } 
#result .result-title p { font-size: 2.5rem; font-weight: 700; color: #000; } 
#result .result-title strong {font-size: 2rem;color: #000;}

#result .result-message { width: 100%; margin-top: 1rem; font-size: 1.5em; } 

#result .result-message span.result-count { color: #eb4031; } 
#result .result-message > p,
#result .result-feedback > p { text-align: center; } 
#result .result-feedback { width: 100%;margin-top: 2%;} 

#result .result-feedback .feedback-message { width: 100%; font-size: 1.3em; color: #3d4350; font-weight: bold; letter-spacing: -1px; } 

#result .result-feedback .feed-success { display: block; } 

#result .result-feedback .feed-failed { display: none; } 

#result .result-table { display: flex; margin: 1em 0; } 

#result .result-table .result-cell { width: 140px; height: 170px; margin: 0 1rem; /* background: transparent url(../images/quiz/result.png) no-repeat 0 0; */
 background-color: #fff; } 
#result .result-table .result-cell p { text-align: center; background-color: #F7B616; color: #000; font-size: 21px; font-weight: bold; padding: 2px 0; } 
#result .result-table .result-1 { background-position: 0px 0px; } 
#result .result-table .result-2 { background-position: -140px 0px; } 
#result .result-table .result-3 { background-position: -280px 0px; } 

#result .result-table .result-cell .result-ox { width: 70px; height: 70px; background: transparent url(../images/quiz/ox.png) no-repeat 0 0; float: left; margin: 35px 35px; } 

#result .result-table .result-cell .result-ox.is_x { background-position: -70px 0; } 

#result .result-table .result-cell .result-add { float: left; width: 110px; height: 40px; background: transparent url(../images/quiz/addquizbtn.png) no-repeat 0 0; text-indent: -9999em; border: none; margin-top: -73px; margin-left: 30px; cursor: pointer; } 

#result .result-table .result-cell .result-add:hover { background-position: 0 -40px; } 

#result button#reading { width: 190px; height: 46px; background: transparent url(../images/quiz/deepconbtn.png) no-repeat 0 0; border: none; text-indent: -9999em; cursor: pointer; } 

#result button#retry { width: 150px; height: 46px; font-weight: 700; font-size: 1.125rem; color: #000; line-height: 2.875rem; background: #F7B616; border: none; border-radius: 20px; cursor: pointer; } 

#result button#reading:hover { background-position: 0px -46px; } 
#result button#retry:hover { background-position: 0px -46px; } 

.content-wrap.type-full-screen #quiz .intro-title {top: 2%;left: -82%;font-size: 4rem;line-height: 1;}
.content-wrap.type-full-screen #quiz .intro-belt {font-size: 2rem;}
.content-wrap.type-full-screen #quiz .intro-text {font-size: 2rem;line-height: 2.5rem;}
.content-wrap.type-full-screen #quiz button#start-quiz {width: 50%;height: 60px;font-size: 2rem;}

@media (max-width: 786px) { 
    div.check {display: flex;padding-left: 5%;}
}