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

#prequiz-wrapper>.content-tab {
    display: none;
    position: fixed;
    top: 142px;
    left: 180px;
    z-index: 10;
}
#prequiz-wrapper>.content-tab.on {
    display: block;
}
#prequiz-wrapper>.content-tab>.tab {
    float: left;
    margin-right: 5px;
    width: 159px;
    height: 47px;
    background: url(img/tab.png);
    line-height: 47px;
    text-align: center;
    color: #fff;
    font-size: 26px;
    cursor: default;
}
#prequiz-wrapper>.content-tab>.tab.active {
    background-position-y: -47px;
}

#prequiz-wrapper>#prequiz-home {
    position: relative;
    width: 100%;
    height: 100%;
    background: url(img/bg_home.png) no-repeat 0 200px;
}
#prequiz-wrapper>#prequiz-home>.btn-start1 {
    position: absolute;
    top: 320px;
    left: 300px;
    width: 166px;
    height: 49px;
    background: url(img/btn_start1.png);
}
#prequiz-wrapper>#prequiz-home>.btn-start2 {
    position: absolute;
    top: 320px;
    left: 544px;
    width: 166px;
    height: 49px;
    background: url(img/btn_start2.png);
}
#prequiz-wrapper>#prequiz-home>.btn-start1:hover,
#prequiz-wrapper>#prequiz-home>.btn-start2:hover {
    background-position-y: -49px;
}

#prequiz-wrapper>#prequiz-content {
    position: relative;
    width: 100%;
    height: 100%;
    background: url(img/bg_content.png) no-repeat 0 180px;
}
#prequiz-wrapper>#prequiz-content>ul.quiz-tab {
    position: absolute;
    top: 210px;
    left: 200px;
    margin: 0;
    padding: 0;
    height: 52px;
    list-style: none;
}
#prequiz-wrapper>#prequiz-content>ul.quiz-tab>li {
    float: left;
    width: 43px;
    height: 52px;
    background: url(img/tab_num.png);
}
#prequiz-wrapper>#prequiz-content>ul.quiz-tab>li+li {margin-left: 5px}
#prequiz-wrapper>#prequiz-content>ul.quiz-tab>li.active {background-position-y:-52px}
#prequiz-wrapper>#prequiz-content>ul.quiz-tab>li:nth-child(1) {background-position-x: 0}
#prequiz-wrapper>#prequiz-content>ul.quiz-tab>li:nth-child(2) {background-position-x: -43px}
#prequiz-wrapper>#prequiz-content>ul.quiz-tab>li:nth-child(3) {background-position-x: -86px}
#prequiz-wrapper>#prequiz-content>ul.quiz-tab>li:nth-child(4) {background-position-x: -129px}
#prequiz-wrapper>#prequiz-content>ul.quiz-tab>li:nth-child(5) {background-position-x: -172px}
#prequiz-wrapper>#prequiz-content>.point {
    display: none;
    position: absolute;
    top: 230px;
    right: 110px;
    padding-left: 73px;
    width: 123px;
    height: 27px;
    background: url('img/point.png') no-repeat;
    line-height: 27px;
    font-size: 18px;
}
#prequiz-wrapper>#prequiz-content.quiz>.point {display: block}
#prequiz-wrapper>#prequiz-content>.quiz-question {
    position: absolute;
    top: 275px;
    left: 0;
    right: 0;
    margin: auto;
    width: 800px;
    text-align: center;
    color: #fff;
    font-size: 26px;
    letter-spacing: -0.05em;
}
/* yes or no */
#prequiz-wrapper>#prequiz-content>.yn-wrapper {
    position: absolute;
    top: 340px;
    left: 50%;
    transform: translateX(-50%);
}
#prequiz-wrapper>#prequiz-content>.yn-wrapper>input[type=radio] {
    display: none;
}
#prequiz-wrapper>#prequiz-content>.yn-wrapper>label {
    float: left;
    margin: 0 10px;
    width: 121px;
    height: 71px;
    background: no-repeat center 0;
    opacity: .5;
    cursor: pointer;
}
#prequiz-wrapper>#prequiz-content>.yn-wrapper>#yn-yes+label {
    background-image: url(img/btn_yes.png);
}
#prequiz-wrapper>#prequiz-content>.yn-wrapper>#yn-no+label {
    background-image: url(img/btn_no.png);
}
#prequiz-wrapper>#prequiz-content>.yn-wrapper>label:hover,
#prequiz-wrapper>#prequiz-content>.yn-wrapper>input[type=radio]:checked+label {
    opacity: 1;
}
/* ox */
#prequiz-wrapper>#prequiz-content>.ox-wrapper {
    position: absolute;
    top: 340px;
    left: 50%;
    transform: translateX(-50%);
}
#prequiz-wrapper>#prequiz-content>.ox-wrapper>input[type=radio] {
    display: none;
}
#prequiz-wrapper>#prequiz-content>.ox-wrapper>label {
    float: left;
    margin: 0 10px;
    width: 80px;
    height: 90px;
    opacity: .5;
    cursor: pointer;
}
#prequiz-wrapper>#prequiz-content>.ox-wrapper>#ox-o+label {
    background: url(img/btn_o.png);
}
#prequiz-wrapper>#prequiz-content>.ox-wrapper>#ox-x+label {
    background: url(img/btn_x.png);
}
#prequiz-wrapper>#prequiz-content>.ox-wrapper>label:hover,
#prequiz-wrapper>#prequiz-content>.ox-wrapper>input[type=radio]:checked+label {
    opacity: 1;
}
/* 객관식 */
#prequiz-wrapper>#prequiz-content>.choice-wrapper {
    position: absolute;
    top: 355px;
    left: 0;
    right: 0;
    margin: auto;
    width: 600px;

}
#prequiz-wrapper>#prequiz-content>.choice-wrapper>input[type=radio] {
    display: none;
}
#prequiz-wrapper>#prequiz-content>.choice-wrapper>label {
    position: relative;
    float: left;
    margin-bottom: 15px;
    width: 50%;
    line-height: 25px;
    font-weight: bold;
    cursor: pointer;
}
#prequiz-wrapper>#prequiz-content>.choice-wrapper>label:before {
    content: "";
    float: left;
    margin-right: 5px;
    width: 25px;
    height: 25px;
    background: url(img/btn_choice.png);
    border-radius: 15px;
    line-height: 25px;
    text-align: center;
    color: #fff;
}
#prequiz-wrapper>#prequiz-content>.choice-wrapper>label:nth-of-type(1):before {background-position-x:0}
#prequiz-wrapper>#prequiz-content>.choice-wrapper>label:nth-of-type(2):before {background-position-x:-25px}
#prequiz-wrapper>#prequiz-content>.choice-wrapper>label:nth-of-type(3):before {background-position-x:-50px}
#prequiz-wrapper>#prequiz-content>.choice-wrapper>label:nth-of-type(4):before {background-position-x:-75px}
#prequiz-wrapper>#prequiz-content>.choice-wrapper>label:nth-of-type(5):before {background-position-x:-100px}
#prequiz-wrapper>#prequiz-content>.choice-wrapper>input[type=radio]:checked+label:before,
#prequiz-wrapper>#prequiz-content>.choice-wrapper>label:hover,
#prequiz-wrapper>#prequiz-content>.choice-wrapper>label:hover:before {
    background-position-y: -25px;
    color: #f55;
}
#prequiz-wrapper>#prequiz-content>.choice-wrapper>input[type=radio]:checked+label:after {
    content: "";
    position: absolute;
    top: -8px;
    left: 3px;
    width: 26px;
    height: 23px;
    background: url(img/choice_check.png);
}
/* 주관식 */
#prequiz-wrapper>#prequiz-content>.input-wrapper {
    position: absolute;
    top: 360px;
    left: 50%;
    transform: translateX(-50%);
}
#prequiz-wrapper>#prequiz-content>.input-wrapper>#input-text {
    padding-left: 10px;
    width: 345px;
    height: 50px;
    border: 5px solid #adadad;
    color: #757575;
    font-family: "NanumSquareRound";
    font-size: 22px;
}
/* 정답보기 */
#prequiz-wrapper>#prequiz-content>.btn-confirm {
    position: absolute;
    top: 440px;
    left: 880px;
    width: 103px;
    height: 27px;
    background: url(img/btn.png);
}
#prequiz-wrapper>#prequiz-content>.answer-wrapper {
    display: none;
}
#prequiz-wrapper>#prequiz-content>.answer-wrapper.on+.cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0);
    z-index: 5;
}

#prequiz-wrapper>#prequiz-result {
    position: relative;
    width: 100%;
    height: 100%;
    background: url(img/bg_content.png) no-repeat 0 180px;
    overflow: hidden;
}
/* 사전 평가 결과 */
#prequiz-wrapper>#prequiz-result>.table-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}
#prequiz-wrapper>#prequiz-result>.table-wrapper>.quiz-result {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 48px auto 0;
    width: 720px;
    border-collapse: collapse;
    border-spacing: 0;
    transform: translateY(-50%);
    text-align: center;
    color: #fff;
}
#prequiz-wrapper>#prequiz-result>.table-wrapper>.quiz-result tr>th {
    padding: 3px 0;
    background-color: rgba(106, 106, 241, .5);
    border: 2px solid #fff;
    font-size: 20px;
}
#prequiz-wrapper>#prequiz-result>.table-wrapper>.quiz-result tr>th:first-child {
    width: 50px;
    background-color: rgba(25, 255, 37, .5);
    font-size: 33px;
    word-break: break-all;
}
#prequiz-wrapper>#prequiz-result>.table-wrapper>.quiz-result tr>td {
    padding: 3px 10px;
    border: 2px solid #fff;
    color: #ffefad;
    font-size: 18px;
    letter-spacing: 0.05em;
}
#prequiz-wrapper>#prequiz-result>.table-wrapper>.quiz-result tr>td:first-child {
    text-align: left;
    color: #fff;
}
#prequiz-wrapper>#prequiz-result>.table-wrapper>.quiz-result tr>td.checked {
    background: url(img/choice_check.png) no-repeat center;
}
#prequiz-wrapper>#prequiz-result>.table-wrapper>.btn-next {
    position: absolute;
    top: 440px;
    left: 880px;
    width: 103px;
    height: 27px;
    background: url(img/btn.png);
}
/* 유형 분류 */
#prequiz-wrapper>#prequiz-result>.yourtype-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}
#prequiz-wrapper>#prequiz-result>.yourtype-wrapper:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: no-repeat 0 180px;
}
#prequiz-wrapper>#prequiz-result>.yourtype-wrapper.a:before {background-image: url(img/typeA.png)}
#prequiz-wrapper>#prequiz-result>.yourtype-wrapper.b:before {background-image: url(img/typeB.png)}
#prequiz-wrapper>#prequiz-result>.yourtype-wrapper.i:before {background-image: url(img/typeI.png)}
#prequiz-wrapper>#prequiz-result>.yourtype-wrapper>.btn-order {
    position: absolute;
    top: 400px;
    right: calc(50% + 10px);
    width: 166px;
    height: 49px;
    background: url(img/btn_order.png);
    cursor: pointer;
}
#prequiz-wrapper>#prequiz-result>.yourtype-wrapper>.btn-study {
    position: absolute;
    top: 400px;
    left: calc(50% + 10px);
    width: 166px;
    height: 49px;
    background: url(img/btn_study.png);
    cursor: pointer;
}
#prequiz-wrapper>#prequiz-result>.yourtype-wrapper>.btn-order:hover,
#prequiz-wrapper>#prequiz-result>.yourtype-wrapper>.btn-study:hover {
    background-position-y: -49px;
}
#prequiz-wrapper>#prequiz-result>.yourtype-wrapper>.order.show {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(img/bg_content.png) no-repeat 0 180px;
    z-index: 10;
}
#prequiz-wrapper>#prequiz-result>.yourtype-wrapper>.order.show:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(img/order.png) no-repeat 0 180px;
}
#prequiz-wrapper>#prequiz-result>.yourtype-wrapper>.order.show>.btn-close {
    position: absolute;
    top: 220px;
    right: 110px;
    width: 29px;
    height: 35px;
    background: url(img/btn_close.png);
}