#quiz-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(img/bg.png);
    overflow: hidden;
}

/* 퀴즈 메인 */
#quiz-wrapper>#quiz-home {
    position: relative;
    width: 100%;
    height: 100%;
    background: url(img/bg_home.png);
}
#quiz-wrapper>#quiz-home>.btn-start {
    position: absolute;
    top: 440px;
    left: 0;
    right: 0;
    margin: auto;
    width: 108px;
    height: 30px;
    background: url(img/btn_start.png);
}

/* 문제 푸는 화면 */
#quiz-wrapper>#quiz-content {
    position: relative;
    width: 100%;
    height: 100%;
    background: url(img/bg.png);
}
#quiz-wrapper>#quiz-content>.tab {
    position: absolute;
    top: 190px;
    right: 30px;
    margin: 0;
    padding: 0;
    width: 40px;
    list-style: none;
    transform: translateY(-50%);
}
#quiz-wrapper>#quiz-content>.tab>li {
    float: left;
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    line-height: 40px;
    text-align: center;
    font-size: 24px;
    font-family: 'NanumSquare';
}
#quiz-wrapper>#quiz-content>.tab>li.active {
    background: #432e54;
    color: #fff;
}
#quiz-wrapper>#quiz-content>.tab>li+li {
    margin-top: 24px;
}
#quiz-wrapper>#quiz-content>.tab>li+li:before {
    content: "";
    position: absolute;
    left: 19.5px;
    top: -22px;
    width: 1px;
    height: 20px;
    background: #432e54;
}
#quiz-wrapper>#quiz-content>.quiz-num {
    position: absolute;
    top: 90px;
    left: 150px;
    color: #fff;
    font-size: 80px;
    font-family: 'NanumSqaure';
}
#quiz-wrapper>#quiz-content>.quiz-num:before {
    /* content: "Q"; */
    position: absolute;
    left: -50px;
    color: #88f;
    font-size: 80px;
}
#quiz-wrapper>#quiz-content>.quiz-question {
    position: absolute;
    bottom: 400px;
    left: 200px;
    width: 700px;
    font-size: 20px;
    font-weight: bold;
}
#quiz-wrapper>#quiz-content>.quiz-question>.highlight {
    color: #bb4747;
    text-decoration: underline;
}
/* ox */
#quiz-wrapper>#quiz-content>.ox-wrapper {
    position: absolute;
    top: 290px;
    left: 150px;
}
#quiz-wrapper>#quiz-content>.ox-wrapper>input[type=radio] {
    display: none;
}
#quiz-wrapper>#quiz-content>.ox-wrapper>label {
    float: left;
    width: 176px;
    height: 177px;
    opacity: .5;
    cursor: pointer;
}
#quiz-wrapper>#quiz-content>.ox-wrapper>#ox-o+label {
    margin-right: 20px;
    background: url(img/btn_o.png);
}
#quiz-wrapper>#quiz-content>.ox-wrapper>#ox-x+label {
    background: url(img/btn_x.png);
}
#quiz-wrapper>#quiz-content>.ox-wrapper>label:hover,
#quiz-wrapper>#quiz-content>.ox-wrapper>input[type=radio]:checked+label {
    opacity: 1;
}
/* 객관식 */
#quiz-wrapper>#quiz-content>.choice-wrapper {
    position: absolute;
    top: 190px;
    left: 265px;
    width: 550px;
}
#quiz-wrapper>#quiz-content>.choice-wrapper>input[type=radio] {
    display: none;
}
#quiz-wrapper>#quiz-content>.choice-wrapper>label {
    position: relative;
    float: left;
    margin-bottom: 5px;
    width: calc(100% - 25px);
    line-height: 25px;
    font-weight: bold;
    cursor: pointer;
}
#quiz-wrapper>#quiz-content>.choice-wrapper>label:before {
    content: "";
    position: absolute;
    top: 0;
    left: -30px;
    width: 25px;
    height: 25px;
    background: url(img/btn_choice.png);
    border-radius: 15px;
    line-height: 25px;
    text-align: center;
    color: #fff;
}
#quiz-wrapper>#quiz-content>.choice-wrapper>label:nth-of-type(1):before {background-position-x:0}
#quiz-wrapper>#quiz-content>.choice-wrapper>label:nth-of-type(2):before {background-position-x:-25px}
#quiz-wrapper>#quiz-content>.choice-wrapper>label:nth-of-type(3):before {background-position-x:-50px}
#quiz-wrapper>#quiz-content>.choice-wrapper>label:nth-of-type(4):before {background-position-x:-75px}
#quiz-wrapper>#quiz-content>.choice-wrapper>label:nth-of-type(5):before {background-position-x:-100px}
#quiz-wrapper>#quiz-content>.choice-wrapper>input[type=radio]:checked+label:before,
#quiz-wrapper>#quiz-content>.choice-wrapper>label:hover,
#quiz-wrapper>#quiz-content>.choice-wrapper>label:hover:before {
    background-position-y: -25px;
    color: #5a5;
}
#quiz-wrapper>#quiz-content>.choice-wrapper>input[type=radio]:checked+label:after {
    content: "";
    position: absolute;
    top: -13px;
    left: -27px;
    width: 38px;
    height: 33px;
    background: url(img/choice_check.png);
}
/* 주관식 */
#quiz-wrapper>#quiz-content>.input-wrapper {
    position: absolute;
    top: 190px;
    left: 150px;
}
#quiz-wrapper>#quiz-content>.input-wrapper>#input-text {
    padding-left: 10px;
    width: 345px;
    height: 50px;
    border: 5px solid #adadad;
    color: #757575;
    font-family: "NanumSquareRound";
    font-size: 22px;
}
/* 정답보기 */
#quiz-wrapper>#quiz-content>.btn-confirm {
    display: none;
    position: absolute;
    top: 520px;
    right: 25px;
    width: 103px;
    height: 27px;
    background: url(img/btn.png);
}
#quiz-wrapper>#quiz-content>.pop {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}
#quiz-wrapper>#quiz-content>.pop.nosel {
    display: block;
    background: url(img/pop_nosel.png);
}
#quiz-wrapper>#quiz-content>.pop.wrong {
    display: block;
    background: url(img/pop_wrong.png);
}
/* 정답 및 해설 */
#quiz-wrapper>#quiz-content>.answer-wrapper {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 174px;
    background: url(img/bg_answer.png);
    z-index: 10;
}
#quiz-wrapper>#quiz-content>.answer-wrapper.on {display:block}
#quiz-wrapper>#quiz-content>.answer-wrapper.on+.cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0);
    z-index: 5;
}
#quiz-wrapper>#quiz-content>.answer-wrapper>span:nth-child(1),
#quiz-wrapper>#quiz-content>.answer-wrapper>span:nth-child(3) {
    display: none;
    position: absolute;
    top: 135px;
    left: 15px;
    line-height: 30px;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
}
#quiz-wrapper>#quiz-content>.answer-wrapper>span:nth-child(3) {
    top: 220px;
}
#quiz-wrapper>#quiz-content>.answer-wrapper>.answer-answer {
    position: absolute;
    top: 42px;
    left: 0;
    margin: 0;
    width: 155px;
    height: 139px;
    line-height: 139px;
    text-align: center;
    color: #fff;
    font-family: "NanumSquare";
    font-size: 76px;
    font-weight: bold;
}
#quiz-wrapper>#quiz-content>.answer-wrapper>.answer-answer.type2 {
    width: auto;
    background: none;
    font-size: 22px;
}
#quiz-wrapper>#quiz-content>.answer-wrapper>.answer-comment {
    position: absolute;
    top: 60px;
    left: 240px;
    float: left;
    margin: 0;
    width: 700px;
    height: 100px;
    line-height: 25px;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
}
#quiz-wrapper>#quiz-content>.answer-wrapper>.btn-next {
    position: absolute;
    top: -10px;
    right: 25px;
    width: 143px;
    height: 29px;
    background: url(img/btn_next.png);
}

/* 결과화면 */
#quiz-wrapper>#quiz-result {
    position: relative;
    width: 100%;
    height: 100%;
    background: url(img/bg_result.png);
}
#quiz-wrapper>#quiz-result>.quiz-count {
    position: absolute;
    top: 230px;
    left: 347px;
    width: 30px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 40px;
    color: #fcd328;
}
#quiz-wrapper>#quiz-result>.quiz-score {
    position: absolute;
    top: 230px;
    left: 465px;
    width: 30px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 40px;
    color: #fcd328;
}
#quiz-wrapper>#quiz-result>table {
    position: absolute;
    top: 275px;
    left: 50%;
    border-collapse: collapse;
    transform: translateX(-50%);
}
#quiz-wrapper>#quiz-result>table th,
#quiz-wrapper>#quiz-result>table td {
    width: 155px;
    text-align: center;
}
#quiz-wrapper>#quiz-result>table th {
    height: 50px;
    background: #fcd328;
    color: #fff;
    font-size: 50px;
}
#quiz-wrapper>#quiz-result>table td {
    height: 120px;
    background: #000;
    color: #fff;
    font-size: 40px;
}
#quiz-wrapper>#quiz-result>table td.o:before {content:url(img/res_o.png)}
#quiz-wrapper>#quiz-result>table td.x:before {content:url(img/res_x.png)}
#quiz-wrapper>#quiz-result>.btn-restart {
    position: absolute;
    top: 470px;
    left: 0;
    right: 0;
    margin: auto;
    width: 122px;
    height: 39px;
    background: url(img/btn_restart.png) 0 0 no-repeat;
    cursor: pointer;
}