main {
    margin-top: 50px;
}

#history-wrapper {
    position: relative;
    width: 800px;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 30px rgba(0, 0, 0, .5);
    justify-content: center;
    align-items: center;
    border:1px solid #FFFFFF;
    padding: 20px;
    color: #FFFFFF;
    margin: auto;
    overflow: hidden;
    display:block;
}

#history-wrapper h2 {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
}

#history-wrapper h3 {
    display: inline-block;
    width: 100%;
    font-size: 1.3rem;
    text-align: center;
    padding: 10px 0 10px 0;
}

#history-wrapper section {
    width: 500px;
    margin: 0 auto;
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: 400;
    text-align: justify;
}

#viewRanking {
    position: relative;
    width: 600px;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 30px rgba(0, 0, 0, .5);
    justify-content: center;
    align-items: center;
    border:1px solid #FFFFFF;
    padding: 20px;
    color: #FFFFFF;
    margin: auto;
    overflow: hidden;
    display:none;
}

#viewRanking h2 {
    display: inline-block;
    width: 100%;
    font-size: 1.5rem;
    text-align: center;
}

#viewRanking h3 {
    display: inline-block;
    font-size: 1.3em;
    width: 100%;
    text-align: center;
    padding: 10px 0 10px 0;
}

p.button {
    width: 500px;
}

#history-wrapper section.buttons {
    width:100%;
    padding-top: 20px;
    text-align: center;
}

#history-wrapper section.buttons button {
    margin: 0 10px;
}

#viewRanking section.buttons {
    width:100%;
    margin-top:20px;
    text-align: center;
}

#viewRanking section.buttons button {
    margin: 0 10px;
}


/* 문제페이지 */
.title {
    padding-top: 20px;
    width: 80%;
    text-align: center;
    margin: 0 auto;
    font-size: large;
    font-weight: bold;
}

/* 문제영역 */
.wrap-inner {
    padding:20px;
    z-index: 10;
    overflow: auto;
    display: block;
}

.exam {
    display: none;
    position: relative;
    padding: 30px;
    border: 0px solid #FFF;
    z-index: 20;
}

.question {
    font-size:1.1em;
    margin-top:20px;
    text-align: left;
}
.answer {
    margin:30px;
    font-size:1.0em;
    text-align:center;
}
.description {
    overflow-y: scroll;
    width: 100%;
    height: 60px;
    padding: 10px;
    margin: 10px 10px 20px 10px;
    border: 1px solid #feff43;
    font-size: 1.0rem;
}

#btnNext {
    width: 80px;
    border: 1px solid #000;
}

#txtAnswer {
    font-size: 0.9em;
    height: 20px;
    width: 30%;
    border: 1px solid #F00;
    background-color: #000;
    padding: 5px;
    color: #FFF;
}

.exam_state {
    position: relative;
    float:right;
    right: 20px;
    border: 1px solid #228b22;
    height: 30px;
    width: 280px;
    background-color: #FFF;
    overflow:hidden;
}

.num_s {
    position:relative;
    height:30px;
    width:280px;
    text-align:center;
    top:2px;
    z-index:20;
    color:#800000;
}

.fillbar {
    position:relative;
    top:-30px;
    left:-272px;
    height:30px;
    width:280px;
    background-color:#32cd32;
    text-align:center;
    padding-top:5px;
    z-index:1;
}

.timer_area {
    display:none;
    position:relative;
    top:-40px;
    right:-75%;
    border:0px solid #F00;
    font-size:20px;
    padding-top:10px;
}

.timer {
    position:relative;
    width:40px;
    height:30px;
    border:0px solid #1e90ff;
}
/* 정답출력 */
.result { width:100%; border:0px solid #0f0; text-align:center; display:none; }
#tblResult { width:100%; border:0px solid #F00; }
#tblResult th {
    height:30px;
    background: #72034e;
    text-align: center;
}
#tblResult td {
    text-align: center;
    border-bottom: 1px solid #fcf4fa;
    width: 25%;
    height: 30px;
    font-size: 12px;
    color : #fcf4fa;
}

#tblResult td.exam_no {
    width: 5%;
}

#tblResult td.question {
    text-align: left;
}

#tblResult td.in_answer {
    width: 10%;
}

#tblResult td.rightanswer {
    width: 10%;
}

#tblResult th.rank_date { width:300px; }
#tblResult td.rank_date { width:300px; }

/* 채점결과 */
.subtitle {
    width:100%;
    font-size:16px;
    font-weight: bold;
    text-align: center;
}

.total {
    width:100%;
    text-align: right;
}

.row {
    padding-top: 0px;
}

p.buttons {
    padding-top: 10px;
}

/* 랭킹등록 */


/* 랭킹보기 */

#stopwatch { display:none; }

#mask {
    position:absolute;
    left:0; top:0;
    z-index:500;
    background-color:#000;
    display:none;
}

#quizinfo {
    position:absolute;
    left:0; top:0;
    z-index:600;
    width:400px; height:400px;
    padding:50px;
    background-color:#FFF;
    font-size:1.3em;
    line-height:1.4em;

}

#rankinfo {
    position: relative;
    width:420px; height:400px;
    margin: 0 auto;
    padding:20px;
    font-size:0.9em;
    line-height:1.4em;
    overflow-y: auto;
    display:none;

}

.start { width:100px; height:50px; }
.start1 { width:100%; text-align:center; }

.btnRegist { width:80px; height:40px; }

.tblRank th { padding-top:10px; padding-bottom:10px; }
.tblRank td { padding-top:10px; padding-bottom:10px; text-align:center; }
.tblRank td.rank_nicname {
    text-overflow: ellipsis " [...]";
}

.tblRank td.rank_date {
    font-size: 0.8em;
}

.textbox { height:20px; }
.selected_choice { color:#FFFF33; }
.choice { display:block; margin-top:0.13em; padding-bottom:10px; cursor:pointer; }

.txtAnswer { width:80px; }

.input-box {
    float:left;
    width: 80px;
    height: 50px;
    border-bottom: 2px solid #FFFFFF;
    margin:0 10px 0 10px;
}

.input-box input {
    width: 80px;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1em;
    color: #FFFFFF;
    font-weight: 600;
    padding: 0 35px 0 5px;
}

.btnSubmit {
    width:100px;
    height:50px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: white;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: white;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: white;
}

@media screen and (max-width: 768px) {

    .exam_state { display:none; }

    main {
        margin-top: 0px !important;
        overflow: auto;
        height: 80vh;
        display: block;
    }

    #history-wrapper {
        position: relative;
        width: 90%;
        border-radius: 20px;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        box-shadow: 0 0 30px rgba(0, 0, 0, .5);
        justify-content: center;
        align-items: center;
        border:1px solid #FFFFFF;
        padding: 20px;
        color: #FFFFFF;
        margin: auto;
        overflow: hidden;
        display:block;
    }

    #history-wrapper h3.title {
        font-size: 1.5rem;
    }

    #history-wrapper h3 {
        display: inline-block;
        width: 100%;
        font-size: 1.0rem;
        text-align: center;
        padding: 10px 0 10px 0;
    }

    #history-wrapper section {
        width: 100%;
        margin: 0 auto;
        font-family: 'Nanum Gothic', sans-serif;
        font-size: 0.9rem;
        text-align: justify;
    }

    #viewRanking {
        position: relative;
        width: 90%;
        border-radius: 20px;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        box-shadow: 0 0 30px rgba(0, 0, 0, .5);
        justify-content: center;
        align-items: center;
        border:1px solid #FFFFFF;
        padding: 20px;
        color: #FFFFFF;
        margin: auto;
        overflow: hidden;
        display:none;
    }

    #viewRanking h2 {
        display: inline-block;
        width: 100%;
        font-size: 1.2rem;
        text-align: center;
    }

    #viewRanking h3 {
        display: inline-block;
        width: 100%;
        font-size: 1.0rem;
        text-align: center;
        padding: 10px 0 10px 0;
    }

    .total {
        font-size: 0.8rem;
        justify-content: center;
    }

    /* 랭킹보기 및 채점결과 테이블  */
    #tblResult th {
        font-size: 0.68rem;
        width: 20%;
    }

    #tblResult td.rank_nicname {
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #viewRanking > .buttons > .btn {
        font-size: 0.8rem !important;
    }

    .wrap-inner {
        width: 100%;
        padding: 0px;
    }

    .exam {
        padding: 10px;
        font-size: 1.0rem;
    }

    .question {
        height: 19vh;
        overflow-y: scroll;
        scrollbar-color: red yellow;
    }

    .question > p {
        font-size: 0.9rem !important;
    }

    .description {
        width: 90%;
        height:80px;
        padding: 15px 10px;
        overflow-y: scroll;
        font-size: 0.8rem;
        scrollbar-color: red yellow;
    }

    .description ::-webkit-scrollbar {
        width: 5px;               /* width of the entire scrollbar */
    }

    .description ::-webkit-scrollbar-track {
        background: transparent;        /* color of the tracking area */
    }

    .description ::-webkit-scrollbar-thumb {
        background-color: transparent;    /* color of the scroll thumb */
        border-radius: 3px;       /* roundness of the scroll thumb */
        border: 1px solid #F1CAF1FF;  /* creates padding around scroll thumb */
    }

    .exam .atom ul {
        display: flex;
        flex-direction: column;
    }

    .exam .atom li {
        list-style-position: inside;
        text-indent: -17px;
        margin-left: 20px;
        font-size: 0.8rem;
    }

    .answer {
        margin: 10px;
        text-align: center;
    }

    .question::-webkit-scrollbar {
        width: 5px;               /* width of the entire scrollbar */
    }

    .question::-webkit-scrollbar-track {
        background: transparent;        /* color of the tracking area */
    }

    .question::-webkit-scrollbar-thumb {
        background-color: transparent;    /* color of the scroll thumb */
        border-radius: 3px;       /* roundness of the scroll thumb */
        border: 1px solid #F1CAF1FF;  /* creates padding around scroll thumb */
    }

    #rankinfo {
        position: relative;
        width: 100%;
        color: #FFFFFF;
        margin: auto;
        overflow-y: auto;
        font-size: 0.8rem;
        line-height: 1.2rem;
        text-align: justify;
        display:none;
    }

    .rank {
        text-align: center;
    }

    .rank > form {
        display: inline-flex;
        flex-direction: column;
    }

    .rank > form > .input-box {
        width: 100%;
        margin: 0px;
    }

    .rank > form > .input-box input {
        width: 100%;
        margin-top: 10px;
    }

    #btnSubmit {
        font-size: 1.0rem !important;
        margin-top: 20px;
        width: 100%;
        height: 40px;
    }

    #rankinfo::-webkit-scrollbar {
        width: 5px;               /* width of the entire scrollbar */
    }

    #rankinfo::-webkit-scrollbar-track {
        background: transparent;        /* color of the tracking area */
    }

    #rankinfo::-webkit-scrollbar-thumb {
        background-color: transparent;    /* color of the scroll thumb */
        border-radius: 3px;       /* roundness of the scroll thumb */
        border: 1px solid #F1CAF1FF;  /* creates padding around scroll thumb */
    }

    #btnRetry { width: 38%; font-size: 0.8rem; }
    #btnHome { width: 38%; font-size: 0.8rem; }

    #tblResult td.rank_date {
        font-size: 0.7rem;
    }


    #tblResult td.in_answer {
        font-size: 0.6rem;
    }

    #tblResult td.rightanswer {
        font-size: 0.6rem;
    }
}