@font-face {
    font-family: 'Gmarket Sans';
    font-style: normal;
    font-weight: 700;
    src:local('Gmarket Sans Bold'), local('GmarketSans-Bold'), url('http://script.ebay.co.kr/fonts/GmarketSansBold.woff2') format('woff2'),
    url( 'http://script.ebay.co.kr/fonts/GmarketSansBold.woff') format('woff');
}
@font-face {
    font-family: 'Gmarket Sans';
    font-style: normal;
    font-weight: 500;
    src:local('Gmarket Sans Medium'), local('GmarketSans-Medium'), url('http://script.ebay.co.kr/fonts/GmarketSansMedium.woff2') format('woff2'),
    url( 'http://script.ebay.co.kr/fonts/GmarketSansMedium.woff') format('woff');
}
@font-face {
    font-family: 'Gmarket Sans';
    font-style: normal;
    font-weight: 300;
    src:local('Gmarket Sans Light'), local('GmarketSans-Light'), url('http://script.ebay.co.kr/fonts/GmarketSansLight.woff2') format('woff2'),
    url( 'http://script.ebay.co.kr/fonts/GmarketSansLight.woff') format('woff');
}

#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: 460px;
    left: 0px;
    right: 0;
    margin: auto;
    width: 198px;
    height: 84px;
    background: url(img/btn_start.png) no-repeat;
}
#quiz-wrapper>#quiz-home>.btn-start:hover {
    position: absolute;
    top: 460px;
    left: 0px;
    right: 0;
    margin: auto;
    width: 198px;
    height: 84px;
    background: url(img/btn_start_on.png) no-repeat;
}

/* 문제 푸는 화면 */
#quiz-wrapper>#quiz-content {
    position: relative;
    width: 100%;
    height: 100%;
    background: url(img/bg_content.png);
}
#quiz-wrapper>#quiz-content>.quiz-tab {
    position: absolute;
    top: 100px;
    right: 50px;
    padding: 0;
    list-style: none;
}
#quiz-wrapper>#quiz-content>.quiz-tab>li {
    float: left;
    width: 31px;
    height: 42px;
    background: url(img/tab0.png);
    line-height: 35px;
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight: 100;
}
#quiz-wrapper>#quiz-content>.quiz-tab>li+li {margin-left: 3px}
#quiz-wrapper>#quiz-content>.quiz-tab>li.active {
    background: url(img/tab1.png);
}
#quiz-wrapper>#quiz-content>.quiz-num {
    position: absolute;
    top: 167px;
    left: 172px;
    font-size: 60px;
    font-family: 'Gmarket Sans';
    font-weight: 700;
    color: #FFF;
}
#quiz-wrapper>#quiz-content>.quiz-num:before {
    content: url(img/Q.png);
    position: absolute;
    top: -1px;
    left: -60px;
    color: #88f;
    font-size: 80px;
}
#quiz-wrapper>#quiz-content>.quiz-num:after {
    position: absolute;
    top: -21px;
    left: -83px;
    z-index: 5;
}
#quiz-wrapper>#quiz-content>.quiz-num.o:after {content: url(img/answer_o.png)}
#quiz-wrapper>#quiz-content>.quiz-num.x:after {content: url(img/answer_x.png)}
#quiz-wrapper>#quiz-content>.quiz-question {
    position: absolute;
    top: 190px;
    left: 250px;
    width: 930px;
    font-size: 28px;
    font-family: 'Gmarket Sans';
    font-weight: 700;
    color:#333;
    /*text-align: center;
    font-family: "KoPubDotum Medium";*/
}
#quiz-wrapper>#quiz-content>.quiz-question>.highlight {
    color: #bb4747;
    text-decoration: underline;
}
#quiz-wrapper>#quiz-content>.quiz-question>.box {
    width: 730px;
    height: 85px;
    border: 2px solid rgba(141,161,198,.3);
}
/* ox */
#quiz-wrapper>#quiz-content>.ox-wrapper {
    position: absolute;
    top: 290px;
    left: 413px;
}
#quiz-wrapper>#quiz-content>.ox-wrapper>input[type=radio] {
    display: none;
}
#quiz-wrapper>#quiz-content>.ox-wrapper>label {
    float: left;
    width: 120px;
    height: 148px;
    opacity: .5;
    cursor: pointer;
}
#quiz-wrapper>#quiz-content>.ox-wrapper>#ox-o+label {
    margin-right: 190px;
    background: url(img/btn_o.png)no-repeat;
}
#quiz-wrapper>#quiz-content>.ox-wrapper>#ox-x+label {
    width: 153px;
    height: 148px;
    background: url(img/btn_x.png)no-repeat;
}
#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: 300px;
    left: 280px;
    width: 830px;
}
#quiz-wrapper>#quiz-content>.choice-wrapper>input[type=radio] {
    display: none;
}
#quiz-wrapper>#quiz-content>.choice-wrapper>label {
    position: relative;
    float: left;
    margin-bottom: 16px;
    width: calc(100% - 20px);
    line-height: 27px;
    font-size: 23px;
    font-family: 'Gmarket Sans';
    font-weight: 500;
    cursor: pointer;
}
#quiz-wrapper>#quiz-content>.choice-wrapper>label:before {
    content: "";
    position: absolute;
    top: -2px;
    left: -35px;
    width: 28px;
    height: 29px;
    background: url(img/btn_choice.png);
    line-height: 26px;
    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:-28px}
#quiz-wrapper>#quiz-content>.choice-wrapper>label:nth-of-type(3):before {background-position-x:-56px}
#quiz-wrapper>#quiz-content>.choice-wrapper>label:nth-of-type(4):before {background-position-x:-84px}
#quiz-wrapper>#quiz-content>.choice-wrapper>label:nth-of-type(5):before {background-position-x:-107px}
/* #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: -29px;
    color: #c9003e;
}
#quiz-wrapper>#quiz-content>.choice-wrapper>input[type=radio]:checked+label:after {
    content: "";
    position: absolute;
    top: -20px;
    left: -40px;
    width: 41px;
    height: 38px;
    background: url(img/choice_check.png);
}
/* 주관식 */
#quiz-wrapper>#quiz-content>.input-wrapper {
    position: absolute;
    top: 200px;
    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 {
    position: absolute;
    top: 522px;
    right: 100px;
    width: 171px;
    height: 73px;
    background: url(img/btn_confirm.png);
    z-index: 1;
}
#quiz-wrapper>#quiz-content>.btn-confirm:hover {
    position: absolute;
    top: 522px;
    right: 100px;
    width: 171px;
    height: 73px;
    background: url(img/btn_confirm_on.png);
    z-index: 1;
}
#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_wrong.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: 0px;
    left: 251px;
    width: 759px;
    height: 197px;
    opacity: 0;
    z-index: -1;
}
#quiz-wrapper>#quiz-content>.answer-wrapper.on {
    /* display:block */
    left: 86px;
    top: 503px;
    width: 151px;
    height: 240px;
    background: url(../quiz/img/bg_answer.png) no-repeat;
    opacity: 1;
    z-index: 10;
}
#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) {
    position: absolute;
    top: 35px;
    left: 80px;
    line-height: 30px;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
}
#quiz-wrapper>#quiz-content>.answer-wrapper>span:nth-child(3) {
    top: 70px;
    display: none;
}
#quiz-wrapper>#quiz-content>.answer-wrapper>.answer-answer {
    position: absolute;
    top: 95px;
    left: 57px;
    margin: 0;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border-radius: 15px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    font-size: 55px;
    font-family: "Gmarket Sans";
    font-weight: 700;
}
#quiz-wrapper>#quiz-content>.answer-wrapper>.answer-answer.type2 {
    width: auto;
    background: none;
    color: #000;
    font-size: 22px;
}
#quiz-wrapper>#quiz-content>.answer-wrapper>.answer-comment {
    position: absolute;
    top: 75px;
    left: 170px;
    float: left;
    margin: 0;
    width: 820px;
    height: 103px;
    line-height: 26px;
    font-size: 22px;
    color: #000;
    font-family: "Gmarket Sans";
    font-weight: 500;
    overflow-x: hidden;
    overflow-y: auto;
}
#quiz-wrapper>#quiz-content>.answer-wrapper>.btn-next {
    position: absolute;
    top: 19px;
    right: -942px;
    width: 171px;
    height: 73px;
    background: url(img/btn_next.png);
}
#quiz-wrapper>#quiz-content>.answer-wrapper>.btn-next:hover {
    position: absolute;
    top: 19px;
    right: -942px;
    width: 171px;
    height: 73px;
    background: url(img/btn_next_on.png);
}
#quiz-wrapper>#quiz-content>.answer-wrapper>.btn-next.last {
    background: url(img/btn_result.png);
}
#quiz-wrapper>#quiz-content>.answer-wrapper>.btn-next.last:hover {
    background: url(img/btn_result_on.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: 300px;
    left: 469px;
    width: 30px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 31px;
    font-family: "Gmarket Sans";
    font-weight: 500;
    color: black;
}
#quiz-wrapper>#quiz-result>.quiz-score {
    position: absolute;
    top: 300px;
    left: 578px;
    width: 30px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 35px;
    font-family: "Gmarket Sans";
    font-weight: 500;
    color: #cc2987;
}
#quiz-wrapper>#quiz-result>table {
    position: absolute;
    top: 278px;
    left: 262px;
    border-collapse: collapse;
    /*transform: translateX(-50%);*/
}
#quiz-wrapper>#quiz-result>table tr{
    position:absolute;
    top:89px;
    width:414px;
    left:185px;
}

#quiz-wrapper>#quiz-result>table th,
#quiz-wrapper>#quiz-result>table td {
    width: 130px;
    text-align: center;

}
#quiz-wrapper>#quiz-result>table th {
    height: 75px;
    color: transparent;
    font-size: 32px;
}
#quiz-wrapper>#quiz-result>table td {
    height: 102px;
    color: #fff;
    font-size: 40px;
}
#quiz-wrapper>#quiz-result>table td.o:before {
    content:"";
    display: block;
    width: 100%;
    height: 100%;
    background: url(img/res_o.png) no-repeat center;

}
#quiz-wrapper>#quiz-result>table td.x:before {
    content:"";
    display: block;
    width: 100%;
    height: 100%;
    background: url(img/res_x.png) no-repeat center;
}
#quiz-wrapper>#quiz-result>.btn-restart {
    position: absolute;
    top: 460px;
    left: 50%;
    width: 171px;
    height: 73px;
    background: url(img/btn_restart.png) 0 0 no-repeat;
    transform: translateX(-50%);
    cursor: pointer;
}
#quiz-wrapper>#quiz-result>.btn-restart:hover {
    position: absolute;
    top: 460px;
    left: 50%;
    width: 171px;
    height: 73px;
    background: url(img/btn_restart_on.png) 0 0 no-repeat;
    transform: translateX(-50%);
    cursor: pointer;
}

/* 확인학습 bg로 변경 */
#quiz-wrapper.type2>#quiz-home {background: url(img/bg_home2.png)}
#quiz-wrapper.type2>#quiz-content {background: url(img/bg_content2.png)}