@charset "utf-8";

@import url('//fonts.googleapis.com/earlyaccess/nanummyeongjo.css');

@font-face {
    font-family: 'NanumBarunGothic';
    font-style: normal;
    font-weight: 400;
    src: url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot');
    src: url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot?#iefix') format('embedded-opentype'), url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.woff') format('woff'), url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.ttf') format('truetype');
}

@font-face {
    font-family: 'NanumBarunGothic';
    font-style: normal;
    font-weight: 700;
    src: url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot');
    src: url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot?#iefix') format('embedded-opentype'), url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.woff') format('woff'), url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.ttf') format('truetype')
}

@font-face {
    font-family: 'NanumBarunGothic';
    font-style: normal;
    font-weight: 300;
    src: url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot');
    src: url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot?#iefix') format('embedded-opentype'), url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.woff') format('woff'), url('//fastly.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.ttf') format('truetype');
}

@font-face {
    font-family: 'BonmyeongjoSourceHanSerif';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

:root {
    --main-blue: #003399;
    --main-blue2: #003591;
    --tab-gray: #f2f2f2;
    --btn-num: #e0e0e0;
    --btn-func: #5c7ab2;
    --btn-ac: #e74c3c;
    --btn-equal: #003399;
    --white: #ffffff;
    --black: #212529;
    --Grayddd: #dddddd;
    --Grayccc: #cccccc;
}

.testpage__wrap {
    background-color: #F6F6F6;
    background-image: url(../img/pt-01.png);
    position: relative;
    font-size: 12px;
    padding: 10px 0 50px;
}

.testpage__wrap:before {
    content: '';
    height: 324px;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #00154F;
    background-image: url(../img/bg-top.png);
}

.testpage__wrap.Type-MockTest:before,
.testpage__wrap.Type-Learning:before,
.testpage__wrap.Type-WrongAnswer:before {
    display: none;
}

.testpage__wrap section {
    padding: 0 !important;
}

.testpage__wrap p {
    color: #333;
}

.testpage__wrap .pagebox {
    position: relative;
    max-width: 910px;
    background: var(--white);
    margin: 0px auto 0;
    border-radius: 20px;
    overflow: hidden;
}

.testpage__wrap .pagebox .page-top {
    background: #a6b1c3;
    border-bottom: 1px solid #dddddd;
    padding: 0 40px;
    height: 60px;
    line-height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    font-size: 0.9rem;
}

.testpage__wrap .pagebox .page-top a {
    color: #023591;
}

.testpage__wrap .pagebox .page-top img {
    margin-right: 8px;
}

.testpage__wrap .pagebox .page-top>div {
    display: flex;
    color: #023591;
}

.testpage__wrap .pagebox .page-title {
    background: #F0F0F0;
    padding: 25px 40px;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #F0F0F0;
}

.testpage__wrap .pagebox .page-title .top>div {
    display: flex;

}

.testpage__wrap .pagebox .page-title .top {
    display: flex;
    justify-content: space-between;
}

.testpage__wrap .pagebox .page-title .topleft {
    flex-direction: column;
}

.testpage__wrap .pagebox .page-title .topleft>strong {
    font-weight: 500;
    font-size: 1.1rem;
    text-align: left;
}

.testpage__wrap .pagebox .location {
    display: flex;
    font-size: 0.9rem;
}

.testpage__wrap .pagebox .location dd {
    border-radius: 100%;
    border: 1px solid #333;
    color: #333;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
}

.testpage__wrap .pagebox .location dd.on {
    background-color: var(--main-blue2);
    border: 1px solid var(--main-blue2);
    color: var(--white);
}

.testpage__wrap .pagebox .page-title h2 {
    font-size: 3.5rem;
    font-weight: 600;
    margin-top: 1.4rem;
}

.testpage__wrap .pagebox .page-title .bottom {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}


.testpage__wrap .pagebox .page-title .bottom ul {
    display: flex;
    margin-bottom: 8px;
    padding-left: 0;
}

.testpage__wrap .pagebox .page-title .bottom ul li {
    display: block;
    padding: 6px 18px;
    color: var(--white);
    background-color: #9198A7;
    border-radius: 8px;
    margin: 0 4px;
    font-size: 1rem;
    border: 1px solid #9198A7;
}

.testpage__wrap .pagebox .page-title .bottom ul li strong {
    font-weight: 600;
}

.testpage__wrap .pagebox .page-title .bottom ul li strong:after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: #D0D0D0;
    margin: 0 4px 0 8px;
}

.testpage__wrap .pagebox .page-title .bottom p {
    font-size: 0.9rem;
}

.testpage__wrap .pagebox .page-title .topright button {
    border: 0;
    margin: 0 8px;
}

.testpage__wrap .content {
    padding: 0 0 40px;
    background: var(--white);
    position: relative;
    font-family: 'NanumBarunGothic', sans-serif;
}

.testpage__wrap .content .columns {
    position: relative;
}

.testpage__wrap .content .columns.noblock::before {
    display: block;
    content: '';
    background: rgb(255 255 255 / 17%);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 8;
}

.testpage__wrap .content .exams {
    padding: 0 30px;
    color: #333333;
}


.testpage__wrap .content .exams .text {
    font-size: 1em;
    line-height: 1.5;
    padding: 10px 10px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}



.dark .content .exams {
    color: var(--white)
}

.content .exams em {
    font-style: italic;
    text-indent: 0
}

.content .exams .num::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3em;
    height: 3em;
    background: no-repeat left bottom;
    background-size: contain
}

.content .exams .wrong .num::after {
    background-image: url(/assets/images/webtest/wrong_answer.png)
}

.content .exams .right .num::after {
    background-image: url(/assets/images/webtest/right_answer.png);
    height: 3.8em;
    width: 3.3em;
    margin-top: 0.4em
}

.content .exams .num {
    position: relative;
    font-size: 1em;
    font-weight: 400;
    color: #555555;
}

.content .exams .nums {
    font-size: 1em;
    color: var(--white);
    background: #666;
    padding: 0 5px;
}

.content .exams h2 {
    font-size: 1em;
    margin-bottom: 10px;
    line-height: 1.5;
    color: var(--main-blue2)
}

.content .exams h3 {
    font-size: 1em;
    margin-bottom: 20px;
    line-height: 1.5;
    text-indent: -2.2em;
    margin-left: 2.2em;
    font-family: 'NotoSansKR';
    font-weight: 500;
}

.content .exams .imgArea {
    text-align: center;
    padding-bottom: 50px
}

.content .exams .text {
    font-size: 1em;
    line-height: 1.5;
    padding: 10px 10px;
    border: 1px solid #ccc;
    margin-bottom: 20px
}

.content .exams .text p {
    text-indent: 1em
}

.content .exams .text.list p {
    text-indent: -2em;
    margin-left: 2em
}

.content .exams .text p.center {
    text-align: center
}

.content .exams .text p.right {
    text-align: right
}

.content .exams .bogi {
    font-size: 1em;
    line-height: 1.3;
    margin-bottom: 40px
}

.content .exams .bogi .text {
    text-indent: 0
}

.content .exams .bogi.row ol {
    display: flex;
    justify-content: flex-start;
    width: 100%;

}

.content .exams .bogi.row.first2 ol {
    flex-wrap: wrap
}

.content .exams .bogi.row.first3 ol {
    flex-wrap: wrap
}

.content .exams .bogi.row.first2 li {
    width: 46%
}

.content .exams .bogi.row.first3 li {
    width: 30%
}

.content .exams .bogi.row li {
    display: inline-block;
    width: 20%;
    padding-bottom: 10px;
    padding-left: 0;
    padding-right: 10px
}

.content .exams .bogi.col li {
    padding: 10px 0
}

.content .exams .bogi.table {
    width: auto
}

.content .exams .bogi.table tbody {
    border: 0
}

.content .exams .bogi.table th,
.content .exam .bogi.table td {
    border: 0;
    padding: 10px 20px 0;
    padding-left: 0;
    text-align: left;
    font-size: 1em
}

.content .exams .bogi.table th {
    text-align: center
}

.content .exams .bogi.table label {
    position: relative;
    top: auto;
    left: auto
}


.content .exams label {
    position: absolute;
    left: 0;
    top: 0.2em;
    text-align: center;
    font-weight: 400;
    cursor: pointer;
    display: inline-block;
    font-size: 0.8em;
    width: 1.2em;
    height: 1.2em;
    line-height: 1em;
    border-radius: 50%;
    border: 1px solid #939393;
    color: #939393
}

.content .exams label.checked::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.1em;
    width: 1.5em;
    height: 1.5em;
    background: url(/assets/images/webtest/user_check.png) no-repeat left bottom;
    background-size: contain
}

.content .exams label.rightChecked::after {
    content: "";
    position: absolute;
    left: -0.5em;
    bottom: -0.8em;
    width: 2.2em;
    height: 2.2em;
    background: url(/assets/images/webtest/right_answer.png) no-repeat left bottom;
    background-size: contain
}

.content .text.none {
    border: 0;
    padding: 0
}

.content .fixed {
    table-layout: fixed
}

.content .table1 th,
.content .table1 td {
    font-size: 1em;
    text-align: center;
    padding: 2px 5px;
}

.content .table1 th {
    background: #ccc;
    font-weight: 400
}

.dark .content .table1 th {
    background: #666
}

.content .table1 td.bg {
    background: #e5e5e5
}

.content .exam .bogi span {
    padding-left: 1.3em;
    display: inline-block;
    position: relative;
}

.content table .bg2 {
    background: #ccc
}

.content table .backslash {
    padding: 0 10px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="gray" /></svg>')
}

.content table .backslash .right {
    text-align: right;
    display: block;
}

.content table .backslash .left {
    text-align: left;
    display: block;
}

.content .text .flex {
    display: flex;
    justify-content: space-between
}

.content .text .flex div {
    width: 100%
}

.content .text .flex3 {
    display: flex;
    justify-content: space-between
}

.content .text .flex3 table {
    width: 30%
}

.content .text ul.flex3 {
    flex-wrap: wrap
}

.content .text .flex3 li {
    width: 30%
}

.content .text ul.flex4 {
    display: flex;
    justify-content: space-between
}

.content .text .flex4 li {
    width: 25%;
    text-align: left;
}

.content .text .flex2 {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin-left: 0;
}

.content .text .flex2>li {
    width: 50%;
    margin-left: 0;
    text-align: left;
    text-indent: 0;
}

.content .text .flex2 li .flex2 li {
    width: 45%
}

.content .text .row {
    display: flex;
    align-items: center;
    text-align: left;
    justify-content: space-between
}

.content .text .row li {
    text-indent: 0;
    margin-left: 0
}

.content .exams .bogi.row {
    margin-left: 0;
    margin-right: 0;
}

/* nav */

.testpage__wrap nav {
    z-index: 2;
    position: fixed;
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
    box-shadow: 0px 0px 20px #00000029;
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border-radius: 30px;
    width: 200px;
    height: 234px;
    padding: 2.2vh 1.2vh;
}

.testpage__wrap nav.on {
    border-color: var(--main-blue2);
    padding: 5vh 0 3.6vh;
    border-radius: 26px;
    max-height: 1000px;
    justify-content: space-between;
}

.testpage__wrap .rightLayout {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.testpage__wrap nav .toolWrap ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0 !important;
}

.testpage__wrap nav .toolWrap li {
    width: 100%;
    margin-bottom: 4px;
}

.testpage__wrap nav .imgsize-down,
.testpage__wrap nav .imgsize-up,
.testpage__wrap nav .toolWrap button {
    font-size: 1.1rem;
    font-weight: 500;
    width: 100%;
    height: 34px;
    border-radius: 100px;
    background-color: unset;
    border: var(--main-blue2) 1px solid;
    color: var(--main-blue2);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-size: 30%;
    background-repeat: no-repeat;
}

.testpage__wrap nav .imgsize-down,
.testpage__wrap nav .imgsize-up,
.testpage__wrap nav.on .toolWrap button {
    background-color: var(--main-blue2);
    background-size: 50%;
    color: var(--white);
    border: 0;
}

.testpage__wrap nav .imgsize-down:active,
.testpage__wrap nav .imgsize-up:active {
    background-color: #333333;
}

.testpage__wrap nav .imgsize-down:hover,
.testpage__wrap nav .imgsize-up:hover {
    background-color: #001a46;

}

.testpage__wrap nav .toggle-imgsize {
    display: flex;
    margin-top: 0.5rem;
}

.testpage__wrap nav .toggle-imgsize button {
    border-radius: 6px;
}

.testpage__wrap nav .toggle-imgsize button {
    width: 100%;
}

.testpage__wrap nav .toggle-imgsize button:first-child {
    margin-right: 0.4rem;
}

.testpage__wrap nav .fontsize-up {
    background-image: url("../img/fontsize-up-b.svg");
}

.testpage__wrap nav .fontsize-down {
    background-image: url("../img/fontsize-down-b.svg");
}

.testpage__wrap nav.on .fontsize-up {
    background-image: url("../img/fontsize-up.svg");
}

.testpage__wrap nav.on .fontsize-down {
    background-image: url("../img/fontsize-down.svg");
}

.testpage__wrap nav .imgsize-down::before,
.testpage__wrap nav .imgsize-up::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    background-position: center;
    background-size: 100%;
    margin-right: 0rem;
}

.testpage__wrap nav .imgsize-up::before {
    background-image: url("../img/imgsize-up-w.svg");

}

.testpage__wrap nav .imgsize-down::before {
    background-image: url("../img/imgsize-down-w.svg");

}

.testpage__wrap nav .fontsize-up,
.testpage__wrap nav .fontsize-down {
    background-color: unset;
    border: var(--main-blue2) 1px solid;
    color: var(--main-blue2);
}

.testpage__wrap nav.on .fontsize-down,
.testpage__wrap nav.on .fontsize-up {
    background-color: #9198A7 !important;

}

.testpage__wrap nav.on .fontsize-down:hover,
.testpage__wrap nav.on .fontsize-up:hover {
    background-color: #7d889f !important;
}

.testpage__wrap nav .toolWrap li:nth-child(2),
.testpage__wrap nav .toolWrap li:nth-child(3) {
    width: 46%;
    margin: 0 2px;
}

.testpage__wrap nav .toggleBtn {
    border: 0;
    height: 80px;
    width: 100%;
    border-radius: 20px;
    background-image: url(../img/arrow-left.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
    background-color: #dadada;
    position: relative;
    left: 0;
    top: 0;
}

.testpage__wrap .rightLayout.on .toolWrap button {
    font-size: 1rem;
    width: 34px;
    height: 34px;

}

.testpage__wrap .rightLayout.on .toolWrap .toggle button {
    padding: 6px;
    width: 80px;
}

.testpage__wrap .rightLayout .toolWrap .toggle .stop {
    display: none;
}

.testpage__wrap .rightLayout .toolWrap .toggle .start {
    display: block;
}

.testpage__wrap .rightLayout .toolWrap .toggle.on .stop {
    display: block;
}

.testpage__wrap .rightLayout .toolWrap .toggle.on .start {
    display: none;
}


.testpage__wrap .rightLayout.on .toolWrap .toggle .stop,
.testpage__wrap .rightLayout.on .toolWrap .toggle .start {
    background-color: var(--main-blue2);
}

.testpage__wrap .rightLayout.on .toolWrap .toggle .stop:hover,
.testpage__wrap .rightLayout.on .toolWrap .toggle .start:hover {
    background-color: #00286c;
}

.testpage__wrap .rightLayout.on .toolWrap button:active {
    background-color: var(--main-blue2);
}

.testpage__wrap nav .slide_content {
    display: none;
}

.testpage__wrap nav .timer strong {
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    display: block;
    color: var(--main-blue2);
}

.testpage__wrap nav .buttonArea {
    display: none;
}

.testpage__wrap nav .timerArea {
    margin: 0;
}

.testpage__wrap nav .timer {
    position: relative;
    width: 100%;
    border-radius: 20px;
    background-color: #f1f6ff;
    padding: 10px;
}

.testpage__wrap button {
    border: 0;
}

.testpage__wrap nav .toggleBtn-m {
    display: none;
}

.testpage__wrap nav .toggleBtn,
.testpage__wrap nav .toggleBtn-m {
    background: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-bottom: 13px;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
}

.testpage__wrap nav .toggleBtn {
    width: 100%;
}

.testpage__wrap .rightLayout.on {
    height: 1000px;
    width: 360px;
    max-height: 84%;
    flex-direction: column;
}

.testpage__wrap .rightLayout .toggleBtn {
    background-image: url(../img/arrow-left.svg);
}

.testpage__wrap nav.on .toggleBtn,
.testpage__wrap nav.on .toggleBtn-m {
    position: absolute;
}

.testpage__wrap nav.on .toggleBtn {
    width: 30px;
    left: 15px;
    top: 13px;
    background-image: url(../img/arrow-right.svg);
}

.testpage__wrap nav.on .toggleBtn-m {
    display: none;
    left: 15px;
    top: 13px;
    background-image: url(../img/arrow-down.svg);
}

.testpage__wrap .rightLayout.on .timer {
    border: var(--main-blue2) 2px solid;
    padding: 20px;
    background-color: unset;

}

.testpage__wrap .rightLayout.on .timer strong {
    font-size: 3.4rem;
    line-height: 3rem;
}

.testpage__wrap .rightLayout.on .toolWrap ul {
    flex-direction: row;
    flex-wrap: nowrap;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.testpage__wrap .rightLayout.on .toolWrap li {
    margin: 2px 2px;
    width: auto;
}

.testpage__wrap nav.on .toolWrap li:nth-child(2),
.testpage__wrap nav.on .toolWrap li:nth-child(3) {
    width: auto;
}

.testpage__wrap .rightLayout.on .timerArea {
    margin: 1rem 2rem;
}

.content .exams label.checked::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.1em;
    width: 1.5em;
    height: 1.5em;
    background: url(../img/icon-check.svg) no-repeat left bottom;
    background-size: contain;
}

.testpage__wrap nav .mySwiperOmr {
    display: none;
}

.testpage__wrap nav .mySwiperOmr .swiper-wrapper {
    width: 77%;
}

.testpage__wrap nav.on .toolArea,
.testpage__wrap nav.on .mySwiperOmr,
.testpage__wrap nav.on .slide_pagination,
.testpage__wrap nav.on .buttonArea,
.testpage__wrap nav .slide_content {
    display: block;
}

.Type-CBT.final-stage .omr article,
.testpage__wrap .omr article {
    float: left;
    width: 100%;
    padding: 0;
}

.Type-CBT.final-stage .omr .box,
.testpage__wrap .omr .box {
    overflow: hidden;
    background: #ffffff17;
    width: 100%;
}

.Type-CBT.final-stage .omr dl,
.testpage__wrap .omr dl {
    display: flex;
    border-bottom: 1px solid #d9d9d9;
    cursor: pointer;
    align-content: center;
    flex-direction: row;
    margin-bottom: 0;
    height: 35px;
}

.Type-CBT.final-stage .omr dl.active {
    background-color: #FFFEE9;

}

.Type-CBT.final-stage .omr dl.on,
.testpage__wrap .omr dl.on {
    background: #eee;
}

.Type-CBT.final-stage .omr dt,
.testpage__wrap .omr dt {
    width: 16%;
    border-right: 1px solid #787878;
    font-size: 16px;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.Type-CBT.final-stage .omr dt {
    border-right: 1px solid #FF6163;
}

.Type-CBT.final-stage .omr dt a,
.testpage__wrap .omr dt a {
    width: 100%;
    height: 100%;
    color: #212529;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Type-CBT.final-stage .omr dt a:hover,
.testpage__wrap .omr dt a:hover {
    color: #005fbf;
}

/* 
.testpage__wrap .omr dt:hover {
    color: var(--main-blue2);
    background-color: #f1f6ff;
} */

.Type-CBT.final-stage .omr dd,
.testpage__wrap .omr dd {
    display: inline-flex;
    justify-content: space-between;
    width: 84%;
    padding: 0px 10px;
    align-items: center;
    margin-bottom: 0;
}

.Type-CBT.final-stage .omr dd input,
.testpage__wrap .omr dd input {
    display: none;
}

.Type-CBT.final-stage .omr dd label,
.testpage__wrap .omr dd label {
    font-weight: 400;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    border-radius: 50%;
    border: 1px solid #939393;
    color: #939393;
    margin-bottom: 0;
}

.Type-CBT.final-stage .omr dd input:checked+label,
.testpage__wrap .omr dd input:checked+label {
    background: var(--main-blue2);
    color: var(--white);
    border-color: transparent;
}

.Type-CBT.final-stage .omr section {
    padding: 0 !important;
}

.testpage__wrap .slide_btn_prev {
    background: url(../img/icon-arrow-l.svg) no-repeat left center;
    left: 10px;
}

.testpage__wrap .slide_btn_next {
    background: url(../img/icon-arrow-r.svg) no-repeat right center;
    right: 10px;
}

.testpage__wrap .slide_btn {
    z-index: 1;
    position: absolute;
    width: 10px;
    height: 17px;
    background-size: contain;
    top: 50%;
    transform: translateY(-50%);
}

.testpage__wrap nav.on .buttonArea {
    display: flex;
    justify-content: space-between;
    margin: 0 30px;
}

.submitBtn {
    display: none;
    width: 100%;
    height: 44px;
    border-radius: 6px;
    color: var(--white);
    font-size: 1rem;
    background: linear-gradient(to right, #00ae7f 0%, var(--main-blue2) 100%);
}

.submitBtn:hover {
    background: #333333
}

.testpage__wrap nav.on .submitBtn {
    display: block;
}

@media (max-width: 768px) {
    .testpage__wrap .content .exams {
        padding: 0;
    }

    .testpage__wrap .omr dl {
        border-top: 1px solid #d9d9d9;
    }

    .testpage__wrap .omr dl.on {
        background-color: var(--white);
        border: 1px solid #d9d9d9;
    }

    .testpage__wrap .content {
        padding: 40px 0 40px;
    }

    .testpage__wrap.Type-SKpersonality.Type-B {
        padding: 10px 0 50px !important;
    }

    .testpage__wrap .pagebox {
        margin: 0 auto;
    }

    .testpage__wrap .pagebox .page-top {
        padding: 0 20px;
    }

    .testpage__wrap .pagebox .page-title .topleft {
        display: none !important;
    }

    .testpage__wrap .pagebox .page-title h2 {
        font-size: 2.5rem;
        margin-top: 0;
        margin-bottom: 0.5rem;
    }

    .testpage__wrap .pagebox .page-title .bottom {
        align-content: flex-start;
        align-items: flex-start;
    }

    .testpage__wrap .pagebox .page-title {
        padding: 25px 20px;
    }

    .pagebox article .columns {
        padding: 0 20px !important;
    }

    .content .exams .bogi {
        margin-bottom: 4rem;
        padding: 0;
    }

    .row {
        margin-right: 0;
        margin-left: 0;
    }

    .content .exams .bogi.row ol {
        flex-wrap: wrap;
    }

    .content .exams .bogi.row li {
        width: 33%;
    }

    .content .exams .bogi.row.first3 li {
        width: 37%;
    }

    .content .exams .bogi.row li {
        padding-bottom: 1rem;
        padding-right: 1rem;
    }

    .pagebox.op-2ndtier article .columns {
        padding: 0 20px !important;
        column-gap: 1em !important;
    }

    .testpage__wrap .pagebox .page-title .topright {
        width: 100%;
        justify-content: flex-end;
    }

    .testpage__wrap .pagebox .page-title .bottom ul li {
        margin: 0 4px 0 0;
    }

    .pagebox.op-2ndtier article .columns .exams:first-child .exam {
        padding-top: 0;
    }

    .pagebox.op-2ndtier article .columns .exams .exam {
        padding-top: 1rem;
    }

    .testpage__wrap nav {

        display: flex;
        justify-content: space-between;
    }

    .testpage__wrap nav,
    .testpage__wrap nav.mini,
    .testpage__wrap .rightLayout {
        transform: translateX(0);
        left: 0;
        right: 0;
        bottom: 0;
        top: unset;
        width: 100% !important;
        max-width: 100%;
        max-height: 50% !important;
        border-radius: 20px 20px 0 0 !important;
        border: 1px solid #ccc;
    }

    .testpage__wrap .rightLayout,
    .testpage__wrap nav.mini,
    .testpage__wrap nav {
        max-height: 15% !important;
        display: flex;
        flex-direction: row;
        padding: 3vh 3vh 3vh;
    }

    .testpage__wrap .rightLayout.mini {
        max-height: 103px !important;
        display: flex;
        flex-direction: row;
        padding: 2vh 2vh 2vh;
    }

    .testpage__wrap nav,
    .testpage__wrap nav.on,
    .testpage__wrap .rightLayout {
        max-height: 245px !important;
        flex-direction: column;
        height: 100%;
    }

    .testpage__wrap nav.on,
    .testpage__wrap nav,
    .testpage__wrap .rightLayout {
        padding: 2vh 2vh 3vh;
    }

    .testpage__wrap .rightLayout.on .toolWrap button,
    .testpage__wrap nav .toolWrap button,
    .testpage__wrap nav.on .toolWrap button {
        font-size: 0.9rem;
        padding: 0 !important;
        width: 100%;
        height: 30px;
        line-height: 1rem;
        min-width: 43px;
    }

    .testpage__wrap nav.on .toolWrap button,
    .testpage__wrap nav .toolWrap button {
        background-size: 40%;
    }

    .testpage__wrap nav .toolWrap button,
    .testpage__wrap nav.on .toolWrap button {
        background-color: var(--main-blue2);
        color: var(--white);
        border: 0;
    }

    .submitBtn,
    .testpage__wrap nav.on .submitBtn {
        font-size: 1.2rem;
    }

    .testpage__wrap nav.mini .timer .toolWrap,
    .testpage__wrap .rightLayout.mini .timer .toolWrap {
        display: none;
    }

    .testpage__wrap nav.on .toggleBtn,
    .testpage__wrap .rightLayout .toggleBtn {
        display: none
    }

    .testpage__wrap nav.on .submitBtn,
    .submitBtn {
        display: block;
    }

    .testpage__wrap nav .fontsize-up,
    .testpage__wrap nav.on .fontsize-up {
        background-image: url(../img/fontsize-up.svg);
    }

    .testpage__wrap nav .fontsize-down,
    .testpage__wrap nav.on .fontsize-down {
        background-image: url(../img/fontsize-up.svg);
    }

    .testpage__wrap nav .fontsize-down,
    .testpage__wrap nav .fontsize-up {
        background-color: #9198A7 !important;
        border: 0;
    }

    .testpage__wrap nav .fontsize-down:hover,
    .testpage__wrap nav .fontsize-up:hover {
        background-color: #7d889f !important;
    }

    .testpage__wrap .rightLayout .timerArea,
    .testpage__wrap .rightLayout.on .timerArea {
        margin: 0;
    }

    .testpage__wrap nav.on .toggleBtn-m,
    .testpage__wrap nav .toggleBtn-m {
        display: inline-block;
        height: 80px;
        width: 40px;
        border-radius: 20px;
        background-image: url(../img/arrow-up.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 130%;
        position: relative;
        left: 0;
        top: 0;
        margin: 0 12px 0 0;
    }

    .testpage__wrap nav.on .toggleBtn-m,
    .testpage__wrap nav .toggleBtn-m,
    .testpage__wrap .rightLayout .toggleBtn-m {
        position: absolute;
        left: 15px;
        top: 15px;
        display: inline-block;
        height: 40px;
        width: 40px;
        background-image: url(../img/arrow-down.svg);
        background-size: 100%;
        display: none;
    }

    .testpage__wrap nav.mini .toggleBtn-m,
    .testpage__wrap .rightLayout.mini .toggleBtn-m {
        position: relative;
        left: 0;
        top: 0;
        height: 70px;
        background-image: url(../img/arrow-up.svg);
        background-size: 160%;
    }

    .testpage__wrap nav .mySwiperOmr,
    .testpage__wrap nav.on .mySwiperOmr {
        display: block;
    }

    .testpage__wrap nav.on .mySwiperOmr ul {
        padding-left: 0;
    }

    .testpage__wrap nav.mini .mySwiperOmr {
        display: none;
    }

    .testpage__wrap nav .buttonArea,
    .testpage__wrap nav.on .buttonArea {
        display: block;
        margin: 0;
    }

    .testpage__wrap nav.mini .buttonArea {
        display: none;
    }

    .testpage__wrap .rightLayout.on .timerArea,
    .testpage__wrap nav.mini .timerArea,
    .testpage__wrap nav .timerArea {
        width: 80%;
        height: auto;
        margin: 0 0;
    }

    .testpage__wrap nav.mini .timerArea {
        margin: 0;
        height: 60px;
    }

    .testpage__wrap nav .toolWrap,
    .testpage__wrap nav.on .toolWrap {
        width: 100%;
        display: none;
    }

    .testpage__wrap nav .toolWrap ul,
    .testpage__wrap nav.on .toolWrap ul {
        flex-wrap: nowrap;
    }

    .testpage__wrap nav .toolWrap li,
    .testpage__wrap nav.on .toolWrap li {
        width: 80px;
        margin: 0 4px;
    }

    .testpage__wrap nav .toolWrap li:nth-child(2),
    .testpage__wrap nav .toolWrap li:nth-child(3),
    .testpage__wrap nav.on .toolWrap li:nth-child(2),
    .testpage__wrap nav.on .toolWrap li:nth-child(3) {
        width: auto;
    }

    .testpage__wrap .rightLayout.on .timer,
    .testpage__wrap nav.on .timer,
    .testpage__wrap nav .timer {
        padding: 6px !important;
    }

    .testpage__wrap nav .timer,
    .testpage__wrap nav.on .timer {
        border: 0;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 2px solid var(--main-blue2);
    }

    .testpage__wrap .rightLayout.on .timer,
    .testpage__wrap nav .timer {
        background-color: unset;
        border-radius: 12px;
    }

    .testpage__wrap nav.mini.on .timer,
    .testpage__wrap nav.mini .timer {
        background-color: #f1f6ff;
        border: 0;
    }

    .testpage__wrap .rightLayout.on .timer strong,
    .testpage__wrap nav .timer strong {
        font-size: 2.4rem;
        line-height: 3.3rem;
    }

    .testpage__wrap nav.mini .timer strong,
    .testpage__wrap nav.mini.on .timer strong {
        font-size: 2.5rem;
    }


}



.testpage__wrap nav .swiper-button-next:after,
.testpage__wrap nav .swiper-button-prev:after {
    font-size: 20px;
}

.testpage__wrap nav .swiper-pagination-vertical.swiper-pagination-bullets,
.testpage__wrap nav .swiper-vertical>.swiper-pagination-bullets {
    right: 50%;
    left: var(--swiper-pagination-left, auto);
    top: 83%;
    transform: translate3d(50%, -50%, 0);
    display: none;
}

.testpage__wrap nav.on .swiper-pagination-vertical.swiper-pagination-bullets,
.testpage__wrap nav.on .swiper-vertical>.swiper-pagination-bullets {
    display: block;
}

.testpage__wrap nav .swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 22px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 22px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius, 0);
    background: var(--swiper-pagination-bullet-inactive-color, var(--white));
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
    color: #333;
    border: 1px solid #333;
}

.testpage__wrap nav .swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-bullet-inactive-color, var(--white));
    color: #333;
}

.testpage__wrap nav .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.testpage__wrap nav .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 4px;
    display: inline-block;
}

.testpage__wrap nav .swiper-button-next,
.testpage__wrap nav .swiper-button-prev {
    width: calc(var(--swiper-navigation-size)/ 13 * 21);
}

.testpage__wrap nav .swiper-button-next,
.testpage__wrap nav .swiper-button-prev {
    top: var(--swiper-navigation-top-offset, 83%);
}

.testpage__wrap nav .mySwiperOmr {
    margin-bottom: 60px;
    height: 357px;
    overflow: hidden;
}

.testpage__wrap nav .swiper-backface-hidden .swiper-slide {
    height: 179px;
}

.select__div {
    position: absolute;
    top: 18px;
    right: 14px;
    display: none;
    justify-content: center;
    align-items: center;
    width: 18%;
    height: 69px;
    font-size: 1.8rem;
    font-weight: 600;
    padding: 2px;
    text-align: center;
    padding-right: 20px;
    border-radius: 12px;
    border: 2px solid #ccc;
    background-color: var(--white);
    cursor: pointer;
}

.select__div::after {
    content: '';
    display: block;
    position: absolute;
    top: 26px;
    right: 12px;
    width: 14px;
    height: 14px;
    background-image: url(../img/btn-arrow-r.svg);
    transition: all 0.2s;
    transform: rotate(90deg);
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0.5;
}

.content .exams .bogi ol {
    padding-left: 0 !important;
}

.content.op-fontfamily li::marker {
    display: none !important;
    font-size: 0;
}

@media (max-width: 768px) {

    .testpage__wrap nav .mySwiperOmr {
        position: relative;
        left: 0;
        height: 37px;
        width: 100%;
        padding: 0 50px;
        margin: 0
    }

    .testpage__wrap nav .mySwiperOmr .swiper-wrapper {
        width: 100%;
    }

    .testpage__wrap nav .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
    .testpage__wrap nav .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {

        display: inline-block;
    }

    .testpage__wrap .omr article {
        width: 100%;
    }

    .testpage__wrap nav .swiper-button-next,
    .testpage__wrap nav .swiper-button-prev {
        width: calc(var(--swiper-navigation-size)/ 96 * 35);
    }

    .testpage__wrap nav .swiper-button-next,
    .testpage__wrap nav .swiper-button-prev {
        top: var(--swiper-navigation-top-offset, 50%);
    }

    .testpage__wrap nav .swiper-button-next:after,
    .testpage__wrap nav .swiper-button-prev:after {
        font-size: 30px;
    }

    .testpage__wrap .pagebox .page-title .bottom p {
        font-size: 0.6rem;
    }

    .testpage__wrap .pagebox .page-title .top {
        display: none;
    }

    .testpage__wrap .omr .box {
        margin: 0;
    }

    .swiper-vertical>.swiper-wrapper {
        transform: unset;
    }

    /*
    .swiper-slide{
        display: none;
    }
    li.swiper-slide.box-size.swiper-slide-active {
        display: block;
    }*/
    .testpage__wrap nav .swiper-pagination-vertical.swiper-pagination-bullets,
    .testpage__wrap nav .swiper-vertical>.swiper-pagination-bullets {
        right: 17px;
        top: -285px;
        left: unset;
        overflow-y: scroll;
        height: 310px;
        width: 17%;
        transform: unset;
        border: 1px solid #ccc;
        background-color: var(--white);
        border-radius: 8px;
    }

    .testpage__wrap nav.on .swiper-pagination-vertical.swiper-pagination-bullets,
    .testpage__wrap nav.on .swiper-vertical>.swiper-pagination-bullets {
        display: none;
    }

    .testpage__wrap nav.on .swiper-pagination-vertical.swiper-pagination-bullets.on,
    .testpage__wrap nav.on .swiper-vertical>.swiper-pagination-bullets.on {
        display: block;
    }

    .testpage__wrap nav .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
    .testpage__wrap nav .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
        display: block;
        width: 100%;
        margin: 0;
        border: 0;
        border-bottom: 1px solid #ccc;
        line-height: 2rem;
        height: auto;
    }

    .testpage__wrap nav .swiper-pagination-bullet {
        opacity: 1;
    }

    .select__div {
        display: flex;
    }

    .select__div::after {
        top: 21px;
        display: block;
    }

    .testpage__wrap nav .swiper-pagination {
        display: none;
    }

    .testpage__wrap nav .swiper-pagination.on {
        display: block;
    }


}

@media (max-width: 400px) {
    .select__div {
        top: 13px !important;
        width: 17% !important;
    }

    .select__div::after {
        right: 5px;
    }
}

@media print {

    .testpage__wrap .content .exams {
        padding: 0 !important;
    }

    .testpage__wrap .content .columns>.exams {
        display: flex;
        flex-direction: column;
    }

    .testpage__wrap .content .columns {
        width: 100%;
    }

    .testpage__wrap .content .columns,
    .testpage__wrap .content .columns>.exams>.exams,
    .testpage__wrap .content .columns .exams .qs-img,
    .testpage__wrap .content .columns .exams img {
        padding: 0;
        margin: 0;
    }

    .testpage__wrap .content .columns .exams span {
        display: none;
    }

    .testpage__wrap .pagebox .page-title .bottom ul li {
        border: 1px solid #ccc;
        color: #ccc;
    }

    .testpage__wrap .pagebox .page-top {
        border-bottom: 1px solid #6d6d6d;
        padding: 0;
    }

    .testpage__wrap .pagebox .page-title .bottom {
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
    }
}

/* option mode - 폰트고딕/명조 */
.content.op-fontfamily,
.content.op-fontfamily p,
.content.op-fontfamily h1,
.content.op-fontfamily h2,
.content.op-fontfamily h3,
.content.op-fontfamily h4,
.content.op-fontfamily h5,
.content.op-fontfamily ul,
.content.op-fontfamily ol,
.content.op-fontfamily li,
.content.op-fontfamily dl,
.content.op-fontfamily dt,
.content.op-fontfamily dd,
.content.op-fontfamily table,
.content.op-fontfamily th,
.content.op-fontfamily td,
.content.op-fontfamily form,
.content.op-fontfamily fieldset,
.content.op-fontfamily legend,
.content.op-fontfamily u,
.content.op-fontfamily input,
.content.op-fontfamily textarea,
.content.op-fontfamily button,
.content.op-fontfamily select,
.content.op-fontfamily span,
.content.op-fontfamily b {
    font-family: 'BonmyeongjoSourceHanSerif', serif;
    font-weight: 500;
}

.testpage__wrap .BTN__align a {
    font-family: 'NanumBarunGothic', sans-serif;
}

/* option mode - 수험서형식 */

.content .exams h3.op-point {
    font-weight: 900;
}

.content .exams h3.op-point .num {
    color: rgb(0 174 127);
    font-weight: 700;
    font-size: 1.3em;
}


/* option mode - 폰트사이즈 조절 */
.content.op-fontsize10 {
    font-size: 10px
}

.content.op-fontsize11 {
    font-size: 11px
}

.content.op-fontsize12 {
    font-size: 12px
}

.content.op-fontsize13 {
    font-size: 13px
}

.content.op-fontsize14 {
    font-size: 14px
}

.content.op-fontsize15 {
    font-size: 15px
}

.content.op-fontsize16 {
    font-size: 16px
}

.content.op-fontsize17 {
    font-size: 17px
}

.content.op-fontsize18 {
    font-size: 18px
}

.content.op-fontsize19 {
    font-size: 19px
}

.content.op-fontsize20 {
    font-size: 20px
}


/* option mode - 문항별 보기 */
.content.op-questiontype .exams {
    display: none;
}

.content.op-questiontype .exams.on {
    display: block;
}


/* option mode - 2단보기 */
.pagebox.op-2ndtier {
    max-width: 100% !important;
    border-radius: 0;
}

.pagebox.op-2ndtier article .columns {
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;
    padding: 0 70px;
    padding-bottom: 80px;
    margin-bottom: 80px;
}

.pagebox.op-2ndtier article .columns .exams {
    padding: 0;
}

.pagebox.op-2ndtier article .columns .exams .exam {
    padding-top: 2rem;
}

/* Type-GSAT */

.testpage__wrap.Type-GSAT .exam-img {
    padding: 4rem 5rem;
}

.testpage__wrap.Type-GSAT .exam-img img {
    width: 100%;
}

.testpage__wrap.Type-GSAT .content .exams {
    display: none;
}

.testpage__wrap.Type-GSAT .content .exams.on {
    display: block;
}

.testpage__wrap.Type-GSAT .rightLayout.on,
.testpage__wrap.Type-GSAT .rightLayout.on,
.testpage__wrap.Type-GSAT .rightLayout {
    position: fixed;
    right: 0;
    top: unset;
    bottom: 0;
    transform: translateX(0);
    display: block;
    height: 294px;
    width: 430px;
    max-height: 100%;
    flex-direction: column;
    border-radius: 26px 26px 0 0;
    padding: 30px 30px 15px;
}

.testpage__wrap .rightLayout.on .timer {
    border: var(--main-blue2) 2px solid;
    padding: 12px;
    border-radius: 6px;
    background-color: unset;
}

.testpage__wrap.Type-GSAT nav.on .buttonArea {
    display: flex;
    justify-content: space-between;
    margin: 0;
}

.testpage__wrap.Type-GSAT nav .toolWrap,
.testpage__wrap.Type-GSAT nav .toolWrap {
    width: 100%;
    display: none;
}

.testpage__wrap.Type-GSAT nav.on .toggleBtn,
.testpage__wrap.Type-GSAT nav .toggleBtn,
.testpage__wrap.Type-GSAT nav.on .toggleBtn-m,
.testpage__wrap.Type-GSAT nav .toggleBtn-m,
.testpage__wrap.Type-GSAT .rightLayout .toggleBtn-m {
    display: none;
}

.testpage__wrap.Type-GSAT .rightLayout.on .timerArea,
.testpage__wrap.Type-GSAT nav.mini .timerArea,
.testpage__wrap.Type-GSAT nav .timerArea {
    width: 72%;
    height: auto;
    margin: 0 0;
}

.testpage__wrap.Type-GSAT nav .select__div {
    position: absolute;
    top: 30px;
    right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 96px;
    height: 69px;
    font-size: 1.8rem;
    font-weight: 600;
    padding: 2px;
    text-align: center;
    padding-right: 20px;
    border-radius: 6px;
    border: 2px solid #ccc;
    background-color: var(--white);
    cursor: pointer;
}

.testpage__wrap.Type-GSAT .rightLayout.on .timer strong {
    font-size: 2.6rem;
    line-height: 2.6rem;
}

.testpage__wrap.Type-GSAT nav .mySwiperOmr {
    position: relative;
    left: 0;
    height: 37px;
    width: 100%;
    padding: 0 50px;
    margin: 0.7rem 0;
}

.testpage__wrap.Type-GSAT nav .mySwiperOmr .swiper-slide {
    height: 100% !important;
}

.testpage__wrap.Type-GSAT nav .swiper-button-next,
.testpage__wrap.Type-GSAT nav .swiper-button-prev {
    width: calc(var(--swiper-navigation-size)/ 33 * 21);
}

.testpage__wrap.Type-GSAT nav .swiper-button-next,
.testpage__wrap.Type-GSAT nav .swiper-button-prev {
    top: var(--swiper-navigation-top-offset, 45%);
}

.testpage__wrap.Type-GSAT nav .swiper-button-next:after,
.testpage__wrap.Type-GSAT nav .swiper-button-prev:after {
    font-size: 30px;
}

.testpage__wrap.Type-GSAT nav.on .mySwiperOmr ul {
    padding-left: 0;
    width: 100%;
    transform: unset;
}

.testpage__wrap.Type-GSAT .omr .box {
    margin: 0;
}

.testpage__wrap.Type-GSAT nav .swiper-pagination-vertical.swiper-pagination-bullets,
.testpage__wrap.Type-GSAT nav .swiper-vertical>.swiper-pagination-bullets {
    right: 50%;
    left: var(--swiper-pagination-left, auto);
    top: 83%;
    transform: translate3d(50%, -50%, 0);
    display: none;
}

.testpage__wrap.Type-GSAT nav .swiper-pagination-vertical.swiper-pagination-bullets,
.testpage__wrap.Type-GSAT nav .swiper-vertical>.swiper-pagination-bullets {
    right: 38px;
    top: -273px;
    left: unset;
    overflow-y: scroll;
    height: 310px;
    width: 21%;
    transform: unset;
    border: 1px solid #ccc;
    background-color: var(--white);
    border-radius: 8px;
}

.testpage__wrap.Type-GSAT nav .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.testpage__wrap.Type-GSAT nav .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    display: inline-block;
}

.testpage__wrap.Type-GSAT nav .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.testpage__wrap.Type-GSAT nav .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #ccc;
    line-height: 2rem;
    height: auto;
}

.testpage__wrap.Type-GSAT nav .swiper-pagination-bullet {
    opacity: 1;
}

.testpage__wrap.Type-GSAT nav.on .swiper-pagination-vertical.swiper-pagination-bullets,
.testpage__wrap.Type-GSAT nav.on .swiper-vertical>.swiper-pagination-bullets {
    display: none;
}

.testpage__wrap.Type-GSAT nav.on .swiper-pagination-vertical.swiper-pagination-bullets.on,
.testpage__wrap.Type-GSAT nav.on .swiper-vertical>.swiper-pagination-bullets.on {
    display: block;
}

.content.op-2ndtier .content {
    padding: 40px 0 40px
}

.content.op-imgsize80 .exams .exam-img {
    padding: 4rem 10rem;
}

.content.op-imgsize90 .exams .exam-img {
    padding: 4rem 8rem;
}

.content.op-imgsize100 .exams .exam-img {
    padding: 4rem 6rem;
}

.content.op-imgsize110 .exams .exam-img {
    padding: 4rem 4rem;
}

.content.op-imgsize120 .exams .exam-img {
    padding: 4rem 2rem;
}

.content.op-imgsize130 .exams .exam-img {
    padding: 4rem 0rem;
}

.navinfoArea {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: auto;
    color: #676767;
    background-color: var(--white);
    border-radius: 100px;
    padding: 0 1.5rem 0.5rem;
    font-size: 0.8rem;
    /* margin: 0 0 0.5rem; */
}

.navinfoArea::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    background-image: url(../img/icon-info.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
}

@media (max-width: 768px) {

    .testpage__wrap.Type-GSAT .rightLayout.on,
    .testpage__wrap.Type-GSAT .rightLayout.on,
    .testpage__wrap.Type-GSAT .rightLayout {
        position: fixed;
        right: 0;
        top: unset;
        bottom: 0;
        transform: translateX(0);
        height: 100%;
        max-height: 275px !important;
        width: 100%;
        border-radius: 26px 26px 0 0;
        padding: 1.5rem 1.5rem 1rem;
    }

    .navinfoArea {
        padding: 0 1.5rem 0.7rem;
    }

    .testpage__wrap.Type-GSAT nav .select__div {
        top: 1.5rem !important;
        right: 1.5rem !important;
        width: 24% !important;
        height: 58px !important;
    }

    .testpage__wrap.Type-GSAT nav .swiper-pagination-vertical.swiper-pagination-bullets,
    .testpage__wrap.Type-GSAT nav .swiper-vertical>.swiper-pagination-bullets {
        right: 13px;
        top: -284px;
        height: 310px;
        width: 18%;
    }

    .testpage__wrap.Type-GSAT .exam-img {
        padding: 2rem 0;
    }

    .content.op-imgsize80 .exams .exam-img {
        padding: 0 2rem !important;
    }

    .content.op-imgsize90 .exams .exam-img {
        padding: 0 1rem !important;
    }

    .content.op-imgsize100 .exams .exam-img {
        padding: 0 0rem !important;
    }

    .content.op-imgsize110 .exams .exam-img {
        padding: 0 0rem !important;
    }

    .content.op-imgsize120 .exams .exam-img {
        padding: 0 0rem !important;
    }

    .content.op-imgsize130 .exams .exam-img {
        padding: 0 0rem !important;
    }

    .content.op-imgsize110 .exam-img img {
        width: 104% !important;
        margin-left: -2%;
    }

    .content.op-imgsize120 .exam-img img {
        width: 108% !important;
        margin-left: -4%;
    }

    .content.op-imgsize130 .exam-img img {
        width: 110% !important;
        margin-left: -5%;
    }

    .testpage__wrap nav .imgsize-down,
    .testpage__wrap nav .imgsize-up,
    .testpage__wrap nav .toolWrap button {
        font-size: 0.9rem;
    }

    .testpage__wrap .content .BTN__align {
        margin-top: 2rem;
    }

    .testpage__wrap .pagebox .page-top img {
        width: 50px;
    }

    .Type-SKpersonality .page-top {
        height: 30px !important;
    }
}


@media (max-width: 400px) {
    .testpage__wrap.Type-GSAT nav .select__div {
        width: 23% !important;
    }

    .testpage__wrap .pagebox {
        top: 0;
        max-width: 100%;
    }

    .testpage__wrap .pagebox .page-top {
        height: 50px;
    }

    .testpage__wrap .pagebox .page-title h2 {
        font-size: 1.8rem;
    }

    .testpage__wrap .pagebox .page-top a {
        font-size: 0.7rem;
    }
}



/* 251203 빵구노트 온라인 시험 */


.testpage__wrap.Type-bbanggu {
    padding: 1rem 0 5rem;
    min-height: 890px;
}

.testpage__wrap.Type-bbanggu .pagebox {
    padding-bottom: 2rem;
    margin: 30px auto 100px;
}

.testpage__wrap.Type-bbanggu nav.on {
    transform: translateX(-50%);
    left: 50%;
    right: unset;
    bottom: 0;
    top: unset;
    width: 910px !important;
    height: auto !important;
    max-width: 100%;
    max-height: none !important;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    border-radius: 20px 20px 0 0 !important;
    border: 1px solid #ccc;
    padding: 1rem 2rem;
    gap: 2rem;
}

.testpage__wrap.Type-bbanggu .page-top {
    height: 40px;
    line-height: 40px;
    color: #666666;
    padding: 0 1.5rem !important;
    border: 0;
    background-color: #F5F5F5;
}

.testpage__wrap.Type-bbanggu .info-text {
    opacity: 0.6;
    margin: 0;
}

.testpage__wrap.Type-bbanggu .info-text.black {
    opacity: 1;
    white-space: nowrap;
    margin: 0 !important;
}

.testpage__wrap.Type-bbanggu .info-text.black strong {
    display: inline-block;
    margin-right: 4px;
}

.testpage__wrap.Type-bbanggu .pagebox .page-top a {
    color: #666666;
}

.testpage__wrap.Type-bbanggu .pagebox .page-top a:focus {
    color: #8400d7;
}

.testpage__wrap.Type-bbanggu .page-top article {
    display: flex;
}

.testpage__wrap.Type-bbanggu nav h3 {
    font-size: 1.2rem;
}

.testpage__wrap.Type-bbanggu .answer-form {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
}

.testpage__wrap.Type-bbanggu .answer-form>input {
    border: 2px solid var(--main-blue2);
    padding: 1rem;
    border-radius: 4px;
    background-color: var(--white);

}

.testpage__wrap.Type-bbanggu .difficulty-box {
    font-size: 1rem;
    text-align: left;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
}

.testpage__wrap.Type-bbanggu .difficulty-options {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.testpage__wrap.Type-bbanggu .difficulty-options span {
    font-size: 1.3rem;
    font-weight: 600;
}

.testpage__wrap.Type-bbanggu .difficulty-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    min-height: 40px;
    gap: 0.5rem;
    padding: 0.2rem 0.8rem;
    font-size: 1rem;
    font-weight: 400;
    border: 1px #BEBEBE solid;
    border-radius: 6px;
    cursor: pointer;
}

.testpage__wrap.Type-bbanggu .difficulty-btn::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    /* margin-right: 4px; */
    background-image: url('../img/akar-icons_radio.svg');
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.testpage__wrap.Type-bbanggu .difficulty-btn.active {
    border: 0;
    background-color: var(--main-blue2);
    color: var(--white);
}

.testpage__wrap.Type-bbanggu .difficulty-btn.active::before {
    background-image: url('../img/akar-icons_radio-fill.svg');
}

.testpage__wrap.Type-bbanggu .resetBtn {
    width: 40px;
    height: 40px;
    display: block;
    font-size: 0;
    border-radius: 6px;
    padding: 0.4rem;
    background-color: #777;
}

.testpage__wrap.Type-bbanggu .resetBtn:hover {
    background-color: #333;
}

.testpage__wrap.Type-bbanggu .resetBtn img {
    width: 100%;
}

.testpage__wrap.Type-bbanggu .difficulty-btn strong {
    position: relative;
    padding-left: 0.4rem;
    font-weight: 600;
    font-size: 1.2rem;
    line-height: normal;
}

.testpage__wrap.Type-bbanggu .difficulty-btn.active strong::before {
    background-color: var(--white);
}

.testpage__wrap.Type-bbanggu .page-title {
    padding: 2rem 3rem 0 !important;
    background-color: var(--white);
    border: 0;
}

.testpage__wrap.Type-bbanggu .page-title .box {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    border-bottom: 1px solid #212529;
    padding-bottom: 1rem;
}

.testpage__wrap.Type-bbanggu .page-title .box::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #212529;
}

.testpage__wrap.Type-bbanggu .page-title .box::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 2px;
    left: 0;
    border-bottom: 2px solid #212529;
}

.testpage__wrap.Type-bbanggu .page-title h1 {
    font-size: 2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    gap: 1rem;
}

.testpage__wrap.Type-bbanggu .logo-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.testpage__wrap.Type-bbanggu .logo-list img {
    width: 80px;
}

.testpage__wrap.Type-bbanggu .page-title .title-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.4rem;
}

.testpage__wrap.Type-bbanggu .pagebox .page-top img {
    width: 88px;
}

.testpage__wrap.Type-bbanggu .timer-box {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 0.3rem;
    width: 200px;
}

.testpage__wrap.Type-bbanggu .timer-box p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 0.9rem;
    font-weight: 400;
    background-color: #f1f3f7;
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    margin: 0 !important;
}

.testpage__wrap.Type-bbanggu .timer-box p:first-child strong {
    letter-spacing: 1px;
}

.testpage__wrap.Type-bbanggu .timer-box strong {
    font-weight: 600;
    font-size: 1rem;
}

.testpage__wrap.Type-bbanggu .timer-box i {
    font-style: normal;
}

.testpage__wrap.Type-bbanggu .timer-box .red,
.testpage__wrap.Type-bbanggu .timer-box span {
    font-weight: 400;
    font-size: 0.8rem;
}

.testpage__wrap.Type-bbanggu .timer {
    font-size: 1.5rem;
    font-weight: 600;
    padding: 0rem;
    width: 100%;
    border: 3px solid var(--main-blue2);
    color: var(--main-blue2);
    border-radius: 6px;
}

.testpage__wrap.Type-bbanggu .page-body {
    padding: 1rem 3rem !important;
}

.testpage__wrap.Type-bbanggu .content {
    padding: 2rem;
    border: #212529 1px solid;
    text-align: left;
    word-break: keep-all;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}

.testpage__wrap.Type-bbanggu .blank {
    position: relative;
    display: inline-block;
    height: 24px;
    padding: 0;
    color: #E6E6E6;
    vertical-align: text-bottom;
    background-color: #E6E6E6;
    border-radius: 4px;
}

.testpage__wrap.Type-bbanggu .blank::after {
    content: attr(data-label) !important;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #212529;
    font-size: 12px;
    text-align: center;
    font-family: 'Spoqa Han Sans Neo', sans-serif;
    z-index: 2;
}

.testpage__wrap.Type-bbanggu .blank.active {
    color: #ffeaa3;
    background-color: #ffeaa3;
}

.testpage__wrap.Type-bbanggu .blank.completion {
    color: #d0d8e6;
    background-color: #d0d8e6;

}

.testpage__wrap.Type-bbanggu .view .blank,
.testpage__wrap.Type-bbanggu .view .blank.active,
.testpage__wrap.Type-bbanggu .view .blank.completion {
    color: #DD0004;
    background-color: var(--white);
    padding: 0;
    font-weight: 500;
    height: auto;
    vertical-align: baseline;
}

.testpage__wrap.Type-bbanggu .view .blank::after {
    display: none;
}

.testpage__wrap.Type-bbanggu .inputArea {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    margin: 0;
    gap: 0.5rem;
}

.testpage__wrap.Type-bbanggu .input-row {
    gap: 0.4rem;
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.testpage__wrap.Type-bbanggu .input-row>input {
    width: 100%;
    height: 52px;
    font-size: 1.2rem;
    border: 3px solid #808080;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 0 8px 0px #00000021;
}

.testpage__wrap.Type-bbanggu .input-row>input:active {
    border-color: #023591;
}

.testpage__wrap.Type-bbanggu nav.on .buttonArea {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-direction: column;
    width: 200px;
    margin: 0;
    gap: 0.5rem;
}

.submitBtn {
    height: 52px;
    font-size: 1.2rem;
    font-weight: 500;
}

.testpage__wrap.Type-bbanggu nav .view-answer-btn {
    color: #212529;
    font-size: 1rem;
    text-decoration: underline;
    background: unset;
    border: 0;
    padding: 0 0.4rem;
    text-align: right;
    height: auto;
    font-weight: 400;
}

.testpage__wrap.Type-bbanggu nav .view-answer-btn:hover {
    color: #023591;
    font-weight: 600;
    background: none !important;
}

.testpage__wrap.Type-bbanggu nav h3 {
    font-weight: 400;
    display: flex;
    align-items: center;
}

.testpage__wrap.Type-bbanggu nav h3 strong {
    font-weight: 600;
    background-color: #ffeaa3;
    display: block;
    padding: 2px 4px;
}

.testpage__wrap.Type-bbanggu .difficulty-list {
    gap: 0.4rem;
    display: flex;
}

.testpage__wrap.Type-bbanggu .timer-list {
    gap: 0.4rem;
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media (max-width: 1000px) {

    .testpage__wrap.Type-bbanggu nav.on {
        transform: unset;
        left: 0;
        width: 100% !important;
        padding: 2rem;
        gap: 2rem;
    }

    .testpage__wrap.Type-bbanggu .input-row,
    .testpage__wrap.Type-bbanggu .inputArea {
        width: 100%;
    }

    .testpage__wrap.Type-bbanggu .timer-box p {
        font-size: 1rem;
        padding: 0.2rem 1.5rem;
    }

    .testpage__wrap.Type-bbanggu .pagebox .page-top a {
        color: #414141;
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    .testpage__wrap.Type-bbanggu .pagebox {
        margin: 20px auto 100px;
    }

    .testpage__wrap.Type-bbanggu .pagebox {
        padding-bottom: 10rem;
    }

    .testpage__wrap.Type-bbanggu .page-title h1 {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        gap: 0.4rem;
        font-size: 1.3rem;
        text-align: left;
    }

    .testpage__wrap.Type-bbanggu .logo-list img {
        width: 40px;
    }

    .testpage__wrap.Type-bbanggu nav.on {
        /* flex-direction: column; */
        padding: 1rem;
        gap: 0.4rem;
    }

    .testpage__wrap.Type-bbanggu .page-top {
        line-height: 34px;
        height: 34px;
        display: none;
    }

    .testpage__wrap.Type-bbanggu .page-title {
        padding: 1.5rem 1.5rem 0 !important;
    }

    .testpage__wrap.Type-bbanggu .page-title .box {
        justify-content: space-between;
        flex-direction: column;
        padding-bottom: 1rem;
    }

    .testpage__wrap.Type-bbanggu .page-title .title-area {
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .testpage__wrap.Type-bbanggu .content {
        padding: 0;
        border: 0;
    }

    .testpage__wrap.Type-bbanggu .difficulty-options {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0rem;
        flex-direction: column;
    }

    .testpage__wrap.Type-bbanggu .input-row {
        gap: 0.2rem;
        width: 100%;
    }

    .testpage__wrap.Type-bbanggu .input-row>input {
        height: 40px;
        font-size: 0.8rem;
        padding: 0.5rem;
        border: 2px solid #808080;
    }

    .testpage__wrap.Type-bbanggu .blank {
        height: 20px;
    }

    .testpage__wrap.Type-bbanggu nav.on .buttonArea {
        width: 86px;
        gap: 0.2rem;
    }

    .testpage__wrap.Type-bbanggu nav.on .submitBtn {
        font-size: 0.8rem;
        height: 40px;
    }

    .testpage__wrap.Type-bbanggu nav.on button.view-answer-btn {
        height: auto;
        width: auto;
        position: absolute;
        top: -1.6rem;
        font-size: 0.8rem;
    }

    .testpage__wrap.Type-bbanggu nav h3 strong {
        padding: 1px 1px;
    }

    .testpage__wrap.Type-bbanggu .page-body {
        padding: 1rem 1.5rem 1.5rem !important;
    }

    .testpage__wrap.Type-bbanggu .timer-list {
        display: flex;
        flex-direction: row;
    }

    .testpage__wrap.Type-bbanggu .timer {
        font-size: 1.2rem;
        border: 3px solid var(--main-blue2);
        letter-spacing: 4px;
        width: 50%;
    }

    .testpage__wrap.Type-bbanggu .timer-box {
        width: 100%;
        margin-top: 0.5rem;
        flex-direction: row;
    }

    .testpage__wrap.Type-bbanggu .timer-box p {
        display: flex;
        justify-content: center;
        height: 34px;
        gap: 0.8rem;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-size: 0.8rem;
    }

    .testpage__wrap.Type-bbanggu .timer-box strong {
        font-size: 0.9rem;
    }

    .testpage__wrap.Type-bbanggu .difficulty-box {
        gap: 0.4rem;
    }

    .testpage__wrap.Type-bbanggu .difficulty-btn {
        font-size: 0;
        gap: 0.1rem;
        height: 28px;
        min-height: 28px;
        padding: 0.2rem 0.6rem;
    }

    .testpage__wrap.Type-bbanggu .difficulty-btn::before {
        width: 14px;
        height: 14px;
    }

    .testpage__wrap.Type-bbanggu .difficulty-list {
        gap: 0.2rem;
    }

    .testpage__wrap.Type-bbanggu .resetBtn {
        width: 28px;
        height: 28px;
    }

    .testpage__wrap.Type-bbanggu .difficulty-btn strong {
        font-size: 1rem;
        padding-left: 0;
    }

    .testpage__wrap.Type-bbanggu nav h3 {
        font-size: 0.9rem;
    }

    .testpage__wrap.Type-bbanggu .difficulty-btn.active strong::before {
        display: none;
    }

    .testpage__wrap.Type-bbanggu .content.op-fontsize20 {
        font-size: 16px;
    }

    .testpage__wrap.Type-bbanggu .info-text {
        font-size: 0.9rem;
        display: none;
    }

    .testpage__wrap.Type-bbanggu .difficulty-options span {
        display: none;
    }
}





/* 251208 빵구노트 추가 디자인 */


.testpage__wrap.Type-bbanggu nav.Type-B.on {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 2rem 2rem 1rem;
}

.testpage__wrap.Type-bbanggu .info-text strong {
    font-size: 1.3rem;
    color: #212529;

}

.testpage__wrap.Type-bbanggu .box.Type-B .timer-box {
    justify-content: flex-end;
}


.textArea {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.textArea button {
    display: inline-block;
    line-height: normal !important;
    padding: 6px 10px !important;
    border-radius: 4px;
    font-size: 1.2rem;
    color: #212529;
    background-color: var(--white) !important;
    border: 1px solid #ccc !important;
    transition: all 0.3s;
}

.textArea button.active,
.textArea button:hover {
    background-color: var(--main-blue2) !important;
    color: var(--white);
    border-color: var(--main-blue2) !important;
}

.Type-OX .textArea {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 1rem !important;
}

.Type-OX .textArea>button {
    width: 45%;
    padding: 14px 10px !important;
}

.GuidedTooltip {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 400px;
    height: 200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #2a2a2ade;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 6px;
    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
    padding: 2rem;
    z-index: 10;
}

.GuidedTooltip.correctAnswer {
    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
    background-color: #ffffffde;
}

.GuidedTooltip .top {
    display: flex;
    flex-direction: column;
    color: var(--white);
}

.GuidedTooltip.correctAnswer .top {
    color: #212529;
}

.GuidedTooltip .slider-container {
    display: none;
}

.GuidedTooltip p {
    width: 350px;
    font-size: 1rem;
    color: var(--white);
    font-weight: 400;
    line-height: 28px;
    float: left;
    margin: 0;
}

.GuidedTooltip .bottom {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    position: relative;
    bottom: 0;
    gap: 0.5rem;
    width: 100%;
}

.GuidedTooltip h1 {
    font-size: 2rem;
}

.GuidedTooltip .close {
    cursor: pointer;
}

.GuidedTooltip .close:before,
.GuidedTooltip .close:after {
    content: "";
    position: absolute;
    height: 13px;
    width: 13px;
    top: 26px;
    right: 20px;
    border-top: 2px solid #bebebe;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.GuidedTooltip .close:before {
    right: 28px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.GuidedTooltip [class*="btn-"] {
    flex: 1;
    border: 0;
    margin: 0;
    padding: 0.6rem !important;
    font-size: 1rem;
    line-height: normal !important;
    text-transform: uppercase;
    color: var(--white);
    font-weight: 500 !important;
    border-bottom-right-radius: 0;
    background-color: #7a7a7a !important;
    cursor: pointer;
    transition: all 0.3s;
}

.GuidedTooltip .btn-next {
    background-color: #212121 !important;
}

.GuidedTooltip [class*="btn-"]:hover {
    background-color: var(--white) !important;
    transition: all 0.3s;
    color: #212529;
}

.GuidedTooltip [class*="btn-"]:active {
    background-color: var(--white) !important;
    color: #212529;
}

.GuidedTooltip.correctAnswer [class*="btn-"] {
    background-color: var(--main-blue2) !important;
}

.GuidedTooltip.correctAnswer [class*="btn-"]:hover {
    background-color: #212529 !important;
    color: var(--white);
}

.GuidedTooltip.correctAnswer [class*="btn-"]:active {
    background-color: #212529 !important;
    color: var(--white);
}

.GuidedTooltip.correctAnswer .close:before,
.GuidedTooltip.correctAnswer .close:after {
    border-top: 2px solid #666666;
}

@media (max-width: 768px) {

    .textArea button {
        padding: 4px 6px !important;
        font-size: 1rem;
    }

    .textArea {
        gap: 0.3rem;
    }

    .testpage__wrap.Type-bbanggu nav.Type-B.on {
        gap: 0.5rem;
        padding: 1.5rem 1rem 1rem;
    }

    .testpage__wrap.Type-bbanggu .info-text.blank {
        display: flex;
        width: 100%;
    }

    .testpage__wrap.Type-bbanggu .box.Type-B .title-area {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .testpage__wrap.Type-bbanggu .box.Type-B .info-text {
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
        flex-direction: row;
        line-height: 1.2rem;
    }

    .testpage__wrap.Type-bbanggu .box.Type-B .info-text strong {
        font-size: 1.1rem;
    }

    .GuidedTooltip {
        width: 80%;

    }

}


/* 260225 독끝SKCT */
.Type-skct {
    padding: 0 0 30px 0 !important;
    min-height: 890px;
    min-width: 1200px;
}

.testpage__wrap.Type-skct:before {
    display: none;
}

.Type-skct.main {
    min-width: auto;
}

.testpage__wrap.Type-skct.main:before {
    display: none;
}

.Type-skct .pagebox {
    padding-bottom: 2rem;
    /* margin: 30px auto 0px; */
    margin: 0 auto;
    max-width: 100% !important;
}

.Type-skct.main .pagebox {
    max-width: 100% !important;
    box-shadow: 0 0 12px #0000001f;
    margin: 0px auto 0px;
}

.Type-skct nav.on {
    transform: translateX(-50%);
    left: 50%;
    right: unset;
    bottom: 0;
    top: unset;
    width: 910px !important;
    height: auto !important;
    max-width: 100%;
    max-height: none !important;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    border-radius: 20px 20px 0 0 !important;
    border: 1px solid #ccc;
    padding: 1rem 2rem;
    gap: 2rem;
}

.Type-skct .page-top {
    height: 40px !important;
    line-height: 40px !important;
    color: #666666;
    padding: 0 1.5rem !important;
    border: 0;
    background-color: #F5F5F5 !important;
}

.Type-skct .info-text {
    opacity: 0.6;
    margin: 0;
}

.Type-skct .info-text.black {
    opacity: 1;
    white-space: nowrap;
    margin: 0 !important;
    font-size: 1rem;
}

.Type-skct .info-text.black strong {
    display: inline-block;
    /* margin-right: 4px; */
}

.Type-skct .pagebox .page-top a {
    color: #666666;
}

.Type-skct .pagebox .page-top a:focus {
    color: #8400d7;
}

.Type-skct .page-top article {
    display: flex;
}

.Type-skct nav h3 {
    font-size: 1.2rem;
}

.Type-skct .title-right {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.Type-skct .answer-form {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
}

.Type-skct .answer-form>input {
    border: 2px solid var(--main-blue2);
    padding: 1rem;
    border-radius: 4px;
    background-color: var(--white);

}

.Type-skct .difficulty-box {
    font-size: 1rem;
    text-align: left;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
}

.Type-skct .difficulty-options {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.Type-skct .difficulty-options span {
    font-size: 1.3rem;
    font-weight: 600;
}

.Type-skct .difficulty-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    min-height: 40px;
    gap: 0.5rem;
    padding: 0.2rem 0.8rem;
    font-size: 1rem;
    font-weight: 400;
    border: 1px #BEBEBE solid;
    border-radius: 6px;
    cursor: pointer;
}

.Type-skct .difficulty-btn::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    /* margin-right: 4px; */
    background-image: url('../img/akar-icons_radio.svg');
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.Type-skct .difficulty-btn.active {
    border: 0;
    background-color: var(--main-blue2);
    color: var(--white);
}

.Type-skct .difficulty-btn.active::before {
    background-image: url('../img/akar-icons_radio-fill.svg');
}

.Type-skct .resetBtn {
    width: 40px;
    height: 40px;
    display: block;
    font-size: 0;
    border-radius: 6px;
    padding: 0.4rem;
    background-color: #777;
}

.Type-skct .resetBtn:hover {
    background-color: #333;
}

.Type-skct .resetBtn img {
    width: 100%;
}

.Type-skct .difficulty-btn strong {
    position: relative;
    padding-left: 0.4rem;
    font-weight: 600;
    font-size: 1.2rem;
    line-height: normal;
}

.Type-skct .difficulty-btn.active strong::before {
    background-color: var(--white);
}

.Type-skct .page-title {
    padding: 1rem 1.5rem 0 !important;
    background-color: var(--white) !important;
    border: 0;
}

.Type-skct .page-title .box section {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    border-bottom: 1px solid #212529;
    padding-bottom: 1rem !important;
}

.Type-skct .page-title .box section::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #212529;
}

.Type-skct .page-title .box section::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 2px;
    left: 0;
    border-bottom: 2px solid #212529;
}

.Type-skct .page-title h1 {
    font-size: 1.5rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    gap: 0.4rem;
}

.Type-skct .page-title h1 strong {
    font-weight: 600;
}

.Type-skct .logo-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.Type-skct .logo-list img {
    width: 80px;
}

.Type-skct .page-title .title-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.6rem;
}

.Type-skct .pagebox.ReSize-01 {
    max-width: 1000px !important;
}

.Type-skct .pagebox.ReSize-02 {
    max-width: 90% !important;
}

.Type-skct .pagebox.ReSize-03 {
    max-width: 100% !important;
}

.Type-skct .pagebox.ReSizeImg-01 .Question-img {
    padding: 4rem;
}

.Type-skct .pagebox.ReSizeImg-01 .Question-img img {
    max-width: 100% !important;
}

.Type-skct .pagebox.ReSizeImg-02 .Question-img {
    padding: 0;
}

.Type-skct .pagebox.ReSizeImg-02 .Question-img img {
    max-width: 100% !important;
}

.Type-skct .pagebox.ReSizeImg-03 .Question-img {
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.Type-skct .pagebox.ReSizeImg-03 .Question-img img {
    width: fit-content !important;
    height: 100%;
    /* max-height: 650px;
    max-width: 1000px; */
}

.Type-skct .pagebox .page-top img {
    width: 88px;
}

.Type-skct .timer-box {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 0.3rem;
    background-color: #f1f3f7;
    padding: 0.3rem 1rem;
    border-radius: 6px;
    margin: 0 !important;
}

.Type-skct .timer-box p:first-child strong {
    letter-spacing: 1px;
}

.Type-skct .timer-box strong {
    font-weight: 600;
}

.Type-skct .timer-box i {
    font-style: normal;
}

.Type-skct .timer-box .red,
.Type-skct .timer-box span {
    font-weight: 400;
    font-size: 0.8rem;
}

.Type-skct .timer {
    font-size: 1rem;
    font-weight: 400;
    padding: 0rem;
    width: 100%;
    border: 3px solid var(--main-blue2);
    color: var(--main-blue2);
    border-radius: 6px;
}

.Type-skct .timer-control {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0.5rem;
}

.Type-skct .timer-control>button {
    width: 100%;
    min-width: 130px;
    padding: 2px 7px !important;
    min-height: auto;
    line-height: 1.6rem;
}

.Type-skct .timer-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    gap: 0.3rem;
}

.Type-skct .page-body {
    position: relative;
    display: flex;
    flex-direction: row;
    padding: 1rem 1.5rem !important;
    gap: 1rem;
}

.Type-skct .pagebox.ReSize-01 .page-body {
    gap: 0.3rem;
}

.Type-skct .page-block {
    position: relative;
}

.Type-skct .page-block>h4 {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--white);
    text-align: center;
    z-index: 21;
}

.Type-skct .page-block>h4 strong {
    font-size: 2rem;
    font-weight: 600;
}

.Type-skct .page-block>h4.active {
    display: inline-block;
}

.Type-skct .page-block.test-stop::before,
.Type-skct .page-block.test-off::before {
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97.2%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #000000d1;
    backdrop-filter: blur(9px);
    z-index: 20;
}

.Type-skct .page-bottom {
    display: block;
    width: 100%;
    padding: 1rem 1.5rem !important;
}

.Type-skct .page-bottom article {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.Type-skct .content-top .right {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
}

.Type-skct .pagebox.ReSize-01 .content-top .right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.Type-skct .content-top .right input {
    border: 1px solid #cccccc;
    background-color: var(--white);
    padding: 0.1rem 0.5rem;
    width: 50px;
    text-align: center;
    margin-right: 0.5rem;
    font-weight: 600;
}

.Type-skct .pagebox.ReSize-01 .content-top .right input {
    width: 40px;
}

.Type-skct .content-top .right .btn__base.disabled {
    background-color: #dddddd !important;
    color: #434343 !important;
}

.Type-skct .pagebox.ReSize-02 .content-top .right .btn__base.mm,
.Type-skct .pagebox.ReSize-03 .content-top .right .btn__base.mm,
.Type-skct .content-top .right .btn__base.mm {
    min-height: 18px;
    padding: 7px 16px !important;
    font-size: 1rem;
}

.Type-skct .pagebox.ReSize-01 .content-top .right .btn__base.lb {
    padding: 5px 12px 5px 2px !important;
    font-size: 0.7rem;
    min-height: auto;
}

.Type-skct .pagebox.ReSize-01 .content-top .right .btn__base.rw {
    padding: 5px 7px 5px 12px !important;
    font-size: 0.7rem;
    min-height: auto;
}

.Type-skct .pagebox.ReSize-01 .content-top .right .btn__base.mm .Type-skct .pagebox.ReSize-01 .content-top .Options-Button span {
    font-size: 0.8rem;
}

/* .Type-skct .ReSize-01 .content-top{
    flex-direction: column;
} */
.Type-skct .content-top {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 1rem;
    background-color: #f5f5f5;
    z-index: 5;
}

.Type-skct .content-top .Options-Button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.Type-skct .content-top .Options-Button span {
    font-size: 1rem;
    font-weight: 600;
}

.Type-skct .content-top .Options-Button button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 1rem;
    text-indent: -999;
    color: #555555;
    border: 1px solid #cccccc;
    background-color: #f5f5f5;
}

.Type-skct .pagebox.ReSize-01 .content-top .Options-Button button {
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
}

.Type-skct .content-top .Options-Button button.active::after {
    opacity: 1;
}

.Type-skct .content-top .Options-Button button.active {
    background-color: var(--white);
    border: 1px solid #212529;
    color: #212529;
}

.Type-skct .OMRtab-content {
    padding: 0;
    height: 100%;
    max-height: 530px;
}

.Type-skct .content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    border: #212529 1px solid;
    text-align: left;
    word-break: keep-all;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;

}

.Type-skct .page-body .content:first-child {
    max-width: 66%;
}

.Type-skct .content-OMR,
.Type-skct .content-right {
    position: relative;
    width: 340px;
    max-width: 340px;
    height: 730px;
    padding: 0.5rem;
    border: #212529 1px solid;
}

.OMRtab-wrap .container {
    max-width: 340px;
}

.Type-skct .Question-img {
    position: relative;
    top: 70px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 650px;
    padding: 2rem;
    overflow-y: scroll;
    overflow-x: scroll;
}

.Type-skct .pagebox.ReSize-01 .Question-img {
    padding: 1rem;
    height: 657px;
    top: 60px;
}

.Type-skct .Question-img img {
    transition: transform 0.3s ease;
    width: 100%;
}

.Type-skct .omr dd label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.Type-skct .pagebox.ReSize-01 .omr dd label {
    font-size: 12px;
    width: 20px;
    height: 20px;
}



.testpage__wrap .pagebox.ReSize-01 .omr dt {
    font-size: 14px;
}

.OMRtab-wrap {
    max-width: 600px;
    height: 100%;
    margin: 0 auto;
    font-family: sans-serif;
}

.OMRtab-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.2rem;
    margin-bottom: 0;
}

.OMRtab-box h3 {
    /* position: absolute; */
    width: calc(100%);
    padding: 11px 10px;
    border: none;
    background: #f1f1f1;
    color: #555555;
    font-weight: bold;
    font-size: 0.9rem;
    border-radius: 0;
    transition: 0.2s;
}

.OMRtab-btn {
    padding: 11px 10px;
    border: none;
    background: #f1f1f1;
    color: #555555;
    font-weight: bold;
    font-size: 0.9rem;
    border-radius: 0;
    transition: 0.2s;
    cursor: pointer;
}

.OMRtab-btn:hover {
    background: #ddd;
    color: #212529;
}

.OMRtab-box h3,
.OMRtab-btn.active {
    background: var(--main-blue2);
    color: var(--white);
}

.OMRtab-content {
    display: none;
    padding: 20px;
    background: #fafafa;
    border-radius: 10px;
}

.OMRtab-box {
    display: block;
    position: relative;
    padding: 0;
    background: #fafafa;
    border-radius: 0;
}

.OMRtab-box .omr {
    height: 628px;
    overflow-y: scroll;
}

.content-OMR .btn__base.GradientBlue {
    width: 100%;
}

.OMRtab-Toggle {
    display: block;
    margin-bottom: 1rem;
}

.OMRtab-Toggle .toggle-box {
    width: 100%;
    border-radius: 0;
    background: #fafafa;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.OMRtab-Toggle .toggle-header {
    padding: 11px 10px;
    border: none;
    background: var(--main-blue2);
    color: var(--white);
    font-weight: bold;
    font-size: 0.9rem;
    border-radius: 0;
    transition: 0.2s;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.OMRtab-Toggle .toggle-header:hover {
    background: #002461;
}

.OMRtab-Toggle .arrow {
    position: relative;
    top: unset;
    transition: transform 0.3s ease;
    border: 0;
    width: 12px;
    height: 12px;
    font-size: 0.6rem;
}

.OMRtab-Toggle .toggle-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding: 0;
    font-size: 14px;
    color: #555;
}

.OMRtab-Toggle .toggle-content p {
    margin: 15px 0;
}

.OMRtab-Toggle .toggle-box.active .toggle-content {
    max-height: 200px;
    padding-bottom: 15px;
}

.OMRtab-Toggle .toggle-box.active .arrow {
    transform: rotate(180deg);

}

.OMRtab-content.active {
    display: block;
}


.CalculatorBox .calculator {
    width: 340px;
    background: #2c2c2c;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.CalculatorBox .display {
    width: 100%;
    height: 60px;
    background: #000;
    color: #0f0;
    text-align: right;
    font-size: 24px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow-x: auto;
}

.CalculatorBox .toggle-btn {
    width: 100%;
    background: #444;
    color: var(--white);
    border: none;
    padding: 8px;
    margin-bottom: 15px;
    border-radius: 6px;
    cursor: pointer;
}

.CalculatorBox .buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.CalculatorBox button {
    height: 50px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    background: #e6e5e5;
    color: #000000;
    transition: 0.2s;
}

.CalculatorBox button:hover {
    background: #d6deee;
}

.CalculatorBox .operator {
    background: #ff9500;
    color: var(--white);
}

.CalculatorBox .equal {
    background: var(--main-blue2);
    color: var(--white);
}

.CalculatorBox .clear {
    background: #dc3545;
    color: var(--white);
}

.CalculatorBox .scientific {
    display: none;
    margin-bottom: 10px;
}

.CalculatorBox .scientific.active {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.WebMemoPage {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
}

.WebMemoPage .toolbar {
    padding: 10px;
    background: #ddd;
    display: flex;
    gap: 10px;
}

.WebMemoPage button {
    padding: 6px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background: #333;
    color: var(--white)
}

.WebMemoPage button:hover {
    opacity: 0.8;
}

.WebMemoPage textarea {
    flex: 1;
    resize: none;
    border: none;
    padding: 20px;
    font-size: 16px;
    outline: none;
    width: 100%;
    height: 370px;
}

.DrawPage {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
}

.DrawPage .toolbar {
    margin-bottom: 10px;
}

.DrawPage button {
    padding: 8px 14px;
    margin-right: 5px;
    cursor: pointer;
}

.DrawPage .active {
    background: black;
    color: var(--white)
}

.DrawPage canvas {
    cursor: crosshair;
    width: 100%;
    height: 370px;
}

.Type-skct .page-main {
    padding: 3rem 8rem 3rem !important
}

.Type-skct.main .page-main {
    padding: 3rem 5rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.Type-skct .page-main img {
    width: 100%;
    max-width: 850px;
}

.Type-SKCTmocktest.main .Tag-text,
.Type-skct .Tag-text {
    padding: 3px 12px !important;
    font-size: 0.8rem;
}

.Type-skct .lecture-table thead {
    border-top: 0;
}

.testpage__wrap.Type-OX .logo-list img {
    width: 120px;
}

.style-OX h3 {
    padding: 0 0 2rem;
    font-size: 1.5rem;
    line-height: 2rem;
}

.style-OX .Question-Hint {
    display: block;
    text-align: left;
    font-weight: 400;
    font-size: 1rem;
    border-radius: 10px;
    padding: 2rem;
    background-color: #e8ecf3;
    color: #004080;
}

.style-OX .Question-Hint h4 {
    font-size: 1.2rem;
    font-family: 'Spoqa Han Sans Neo', sans-serif;
}

.Type-QuestionOX .icon-quiz-o,
.Type-QuestionOX .icon-quiz-x {
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Type-QuestionOX .icon-quiz-o::after,
.Type-QuestionOX .icon-quiz-x::after {
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    background-color: #212529;
    transition: background-color 0.3s;
}

.Type-QuestionOX .icon-quiz-o::after {
    mask: url(../img/icon-quiz-o.svg) no-repeat center / contain;
    -webkit-mask: url(../img/icon-quiz-o.svg) no-repeat center / contain;
}

.Type-QuestionOX .icon-quiz-x::after {
    mask: url(../img/icon-quiz-x.svg) no-repeat center / contain;
    -webkit-mask: url(../img/icon-quiz-x.svg) no-repeat center / contain;
}

.Type-QuestionOX .icon-quiz-o.active::after,
.Type-QuestionOX .icon-quiz-x.active::after,
.Type-QuestionOX .icon-quiz-o:active::after,
.Type-QuestionOX .icon-quiz-x:active::after,
.Type-QuestionOX .icon-quiz-o:hover::after,
.Type-QuestionOX .icon-quiz-x:hover::after {
    background-color: var(--white);
}

.testpage__wrap.Type-OX .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 430px;
}

/* [이미지 반영] 계층형 탭 구조 */
.OMRtab-wrap .top-nav {
    margin-bottom: 5px;
}

.OMRtab-wrap .calc-toggle {
    width: 100%;
    padding: 11px 10px;
    background: var(--main-blue);
    color: var(--white);
    border: none;
    font-weight: bold;
    text-align: left;
    cursor: auto;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.OMRtab-wrap .calc-toggle span {
    font-family: cursive;
    font-size: 0.7rem;
}

.OMRtab-wrap .sub-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin-bottom: 5px;
}

.OMRtab-wrap .nav-btn {
    padding: 11px 10px;
    font-size: 0.9rem;
    line-height: 0.9rem;
    min-height: 44px;
    background: #dddddd;
    border: none;
    font-weight: bold;
    cursor: pointer;
    border: 0.5px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.OMRtab-wrap .nav-btn.active {
    background: var(--main-blue);
    color: var(--white);
}

.OMRtab-wrap .container {
    padding: 0;
}

.OMRtab-wrap .content {
    display: none;
    padding: 15px 0;
    min-height: 550px;
    border: 0 !important;
    padding: 0 !important;
}

.OMRtab-wrap .content.active {
    display: block;
}

/* 계산기 스타일 (이미지 2, 3 스타일 반영) */
.OMRtab-wrap .display {
    min-height: 45px;
    max-height: 232px;
    padding: 1.5rem;
    text-align: right;
    font-size: 1.5rem;
    border-radius: 8px;
    margin-bottom: 5px;
    background: black;
    color: var(--white);
    word-break: break-all;
    white-space: normal;
    overflow-y: auto;
}

/* 기본 상태에서는 스크롤 숨김 */
.OMRtab-wrap .display::-webkit-scrollbar {
    width: 0px;
}

/* 내용이 넘쳐서 스크롤이 생기면 스타일 */
.OMRtab-wrap .display::-webkit-scrollbar {
    width: 6px;
}

.OMRtab-wrap .display::-webkit-scrollbar-thumb {
    background: #776765;
    border-radius: 10px;
    margin-right: 0.2rem;
}

.OMRtab-wrap .calc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

.OMRtab-wrap .calc-grid button {
    border: none;
    border-radius: 4px;
    padding: 16px 0;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
}

.OMRtab-wrap .b-equal {
    background: var(--btn-equal);
    color: var(--white);
    grid-column: span 4;
    margin-top: 5px;
    padding: 18px 0;

}

/* 그림판 스타일 */

#pColor {
    width: 32px;
    height: 32px;
}

.pagebox.ReSize-01 #pColor {
    width: 20px;
    height: 32px;
}

.paint-toolbar {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

#content-paint .tool-btn {
    flex: 1;
    padding: 5px 0;
    font-size: 0.85rem;
    background: #eee;
    border: 1px solid var(--Grayccc);
    cursor: pointer;
    font-size: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#content-paint .tool-btn.active {
    background: #3e3e3e;
    color: var(--white);
}

#content-paint .tool-btn::after {
    content: '';
    width: 18px;
    height: 18px;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% !important;
    background-color: var(--black);
}

.pagebox.ReSize-01 #content-paint .tool-btn::after {

    width: 12px;
    height: 12px;
}

#content-paint .tool-btn.active::after {
    background-color: var(--white);
}

#content-paint .paint-wrap {
    width: 100%;
    height: calc(100% - 99px);
    border: 1px solid var(--Grayccc);
    overflow: hidden;
    position: relative;
}

#canvas {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--white);
    cursor: crosshair;
    width: 100%;
    height: 100%;

}

#btn-del::after {
    mask: url(../img/icon-draw-eraser-line.svg) no-repeat center / contain;
    -webkit-mask: url(../img/icon-draw-eraser-line.svg) no-repeat center / contain;

}

#btn-pen::after {
    mask: url(../img/icon-draw-writing-fluently.svg) no-repeat center / contain;
    -webkit-mask: url(../img/icon-draw-writing-fluently.svg) no-repeat center / contain;
}

#btn-tri::after {
    mask: url(../img/icon-draw-triangle.svg) no-repeat center / contain;
    -webkit-mask: url(../img/icon-draw-triangle.svg) no-repeat center / contain;
}

#btn-rect::after {
    mask: url(../img/icon-draw-square.svg) no-repeat center / contain;
    -webkit-mask: url(../img/icon-draw-square.svg) no-repeat center / contain;
}

#btn-circle::after {
    mask: url(../img/icon-draw-circle.svg) no-repeat center / contain;
    -webkit-mask: url(../img/icon-draw-circle.svg) no-repeat center / contain;
}

/* 메모장 */
#content-memo textarea {
    width: 100%;
    height: calc(100% - 32px);
    padding: 15px;
    border: 1px solid var(--Grayccc);
    border-radius: 8px;
    resize: none;
    box-sizing: border-box;
    font-size: 16px;
    background: #fcfcfc;
}

/* 레이어 팝업 기본 */
.content.layer-popup {
    position: fixed;
    right: 20px;
    top: 80px;
    cursor: move;
    width: 260px;
    height: 500px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 99;
    padding: 0.5rem !important;
    display: none;
}

.content.layer-popup.memo {
    top: 260px;
    right: 160px;
}

.content.layer-popup textarea,
.content.layer-popup canvas {
    cursor: default;
}

.content.layer-popup .content-head {
    display: flex;
    position: relative;
    min-height: 30px;
    align-items: center;
    justify-content: space-between;
}

.content.layer-popup h4 {
    font-size: 1rem;
}

.content.layer-popup.show {
    display: block;
}

.content.layer-popup .layer-close {
    cursor: pointer;
    font-size: 14px;
    width: 17px;
}

.Type-skct.main .page-titlebox {
    display: flex;
    align-items: center;
    justify-content: center;
}

.Type-skct.main .page-titlebox span {
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    font-size: 2rem;
    line-height: 2rem;
    color: #ffffff;
    background-color: #212529;
    border-radius: 100px;
    padding: 0.5rem 5rem !important;
    border: 0 !important;
    margin-top: 0.8rem;
}

.Type-skct.main .page-titlebox strong {
    margin-right: 1rem;
}

.Type-skct.main .page-bottombtn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
}

.OMRtab-wrap .nav-btn .icon-open {
    width: 20px;
    height: 20px;
}

.OMRtab-wrap .nav-btn .icon-open::before {
    content: "";
    margin-left: 4px;
    background-image: url(../img/icon-window-new-16-regular.svg);
    background-size: 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
}



/* 260526 독끝HMAT */
.Type-hmat {
    padding: 0 0 30px 0 !important;
    min-height: 890px;
    min-width: 1200px;
}

.testpage__wrap.Type-hmat:before {
    display: none;
}

.Type-hmat.main {
    min-width: auto;
}

.testpage__wrap.Type-hmat.main:before {
    display: none;
}

.Type-hmat .pagebox {
    padding-bottom: 2rem;
    /* margin: 30px auto 0px; */
    margin: 0 auto;
    max-width: 100% !important;
}

.Type-hmat.main .pagebox {
    max-width: 100% !important;
    box-shadow: 0 0 12px #0000001f;
    margin: 0px auto 0px;
}

.Type-hmat nav.on {
    transform: translateX(-50%);
    left: 50%;
    right: unset;
    bottom: 0;
    top: unset;
    width: 910px !important;
    height: auto !important;
    max-width: 100%;
    max-height: none !important;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    border-radius: 20px 20px 0 0 !important;
    border: 1px solid #ccc;
    padding: 1rem 2rem;
    gap: 2rem;
}

.Type-hmat .page-top {
    height: 40px !important;
    line-height: 40px !important;
    color: #666666;
    padding: 0 1.5rem !important;
    border: 0;
    background-color: #F5F5F5 !important;
}

.Type-hmat .info-text {
    opacity: 0.6;
    margin: 0;
}

.Type-hmat .info-text.black {
    opacity: 1;
    white-space: nowrap;
    margin: 0 !important;
    font-size: 1rem;
}

.Type-hmat .info-text.black strong {
    display: inline-block;
    /* margin-right: 4px; */
}

.Type-hmat .pagebox .page-top a {
    color: #666666;
}

.Type-hmat .pagebox .page-top a:focus {
    color: #8400d7;
}

.Type-hmat .page-top article {
    display: flex;
}

.Type-hmat nav h3 {
    font-size: 1.2rem;
}

.Type-hmat .title-right {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.Type-hmat .answer-form {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
}

.Type-hmat .answer-form>input {
    border: 2px solid var(--main-blue2);
    padding: 1rem;
    border-radius: 4px;
    background-color: var(--white);

}

.Type-hmat .difficulty-box {
    font-size: 1rem;
    text-align: left;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
}

.Type-hmat .difficulty-options {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.Type-hmat .difficulty-options span {
    font-size: 1.3rem;
    font-weight: 600;
}

.Type-hmat .difficulty-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    min-height: 40px;
    gap: 0.5rem;
    padding: 0.2rem 0.8rem;
    font-size: 1rem;
    font-weight: 400;
    border: 1px #BEBEBE solid;
    border-radius: 6px;
    cursor: pointer;
}

.Type-hmat .difficulty-btn::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    /* margin-right: 4px; */
    background-image: url('../img/akar-icons_radio.svg');
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.Type-hmat .difficulty-btn.active {
    border: 0;
    background-color: var(--main-blue2);
    color: var(--white);
}

.Type-hmat .difficulty-btn.active::before {
    background-image: url('../img/akar-icons_radio-fill.svg');
}

.Type-hmat .resetBtn {
    width: 40px;
    height: 40px;
    display: block;
    font-size: 0;
    border-radius: 6px;
    padding: 0.4rem;
    background-color: #777;
}

.Type-hmat .resetBtn:hover {
    background-color: #333;
}

.Type-hmat .resetBtn img {
    width: 100%;
}

.Type-hmat .difficulty-btn strong {
    position: relative;
    padding-left: 0.4rem;
    font-weight: 600;
    font-size: 1.2rem;
    line-height: normal;
}

.Type-hmat .difficulty-btn.active strong::before {
    background-color: var(--white);
}

.Type-hmat .page-title {
    padding: 1rem 1.5rem 0 !important;
    background-color: var(--white) !important;
    border: 0;
}

.Type-hmat .page-title .box section {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    border-bottom: 1px solid #212529;
    padding-bottom: 1rem !important;
}

.Type-hmat .page-title .box section::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #212529;
}

.Type-hmat .page-title .box section::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 2px;
    left: 0;
    border-bottom: 2px solid #212529;
}

.Type-hmat .page-title h1 {
    font-size: 1.5rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    gap: 0.4rem;
}

.Type-hmat .page-title h1 strong {
    font-weight: 600;
}

.Type-hmat .logo-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.Type-hmat .logo-list img {
    width: 80px;
}

.Type-hmat .page-title .title-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.6rem;
}

.Type-hmat .pagebox.ReSize-01 {
    max-width: 1000px !important;
}

.Type-hmat .pagebox.ReSize-02 {
    max-width: 90% !important;
}

.Type-hmat .pagebox.ReSize-03 {
    max-width: 100% !important;
}

.Type-hmat .pagebox.ReSizeImg-01 .Question-img {
    padding: 4rem;
}

.Type-hmat .pagebox.ReSizeImg-01 .Question-img img {
    max-width: 100% !important;
}

.Type-hmat .pagebox.ReSizeImg-02 .Question-img {
    padding: 0;
}

.Type-hmat .pagebox.ReSizeImg-02 .Question-img img {
    max-width: 100% !important;
}

.Type-hmat .pagebox.ReSizeImg-03 .Question-img {
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.Type-hmat .pagebox.ReSizeImg-03 .Question-img img {
    width: fit-content !important;
    height: 100%;
}

.Type-hmat .pagebox .page-top img {
    width: 88px;
}

.Type-hmat .timer-box {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 0.3rem;
    background-color: #f1f3f7;
    padding: 0.3rem 1rem;
    border-radius: 6px;
    margin: 0 !important;
}

.Type-hmat .timer-box p:first-child strong {
    letter-spacing: 1px;
}

.Type-hmat .timer-box strong {
    font-weight: 600;
}

.Type-hmat .timer-box i {
    font-style: normal;
}

.Type-hmat .timer-box .red,
.Type-hmat .timer-box span {
    font-weight: 400;
    font-size: 0.8rem;
}

.Type-hmat .timer {
    font-size: 1rem;
    font-weight: 400;
    padding: 0rem;
    width: 100%;
    border: 3px solid var(--main-blue2);
    color: var(--main-blue2);
    border-radius: 6px;
}

.Type-hmat .timer-control {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0.5rem;
}

.Type-hmat .timer-control>button {
    width: 100%;
    min-width: 130px;
    padding: 2px 7px !important;
    min-height: auto;
    line-height: 1.6rem;
}

.Type-hmat .timer-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    gap: 0.3rem;
}

.Type-hmat .page-body {
    position: relative;
    display: flex;
    flex-direction: row;
    padding: 1rem 1.5rem !important;
    gap: 1rem;
}

.Type-hmat .pagebox.ReSize-01 .page-body {
    gap: 0.3rem;
}

.Type-hmat .page-block {
    position: relative;
}

.Type-hmat .page-block>h4 {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--white);
    text-align: center;
    z-index: 21;
}

.Type-hmat .page-block>h4 strong {
    font-size: 2rem;
    font-weight: 600;
}

.Type-hmat .page-block>h4.active {
    display: inline-block;
}

.Type-hmat .page-block.test-stop::before,
.Type-hmat .page-block.test-off::before {
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97.2%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #000000d1;
    backdrop-filter: blur(9px);
    z-index: 20;
}

.Type-hmat .page-bottom {
    display: block;
    width: 100%;
    padding: 1rem 1.5rem !important;
}

.Type-hmat .page-bottom article {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.Type-hmat .content-top .right {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
}

.Type-hmat .pagebox.ReSize-01 .content-top .right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.Type-hmat .content-top .right input {
    border: 1px solid #cccccc;
    background-color: var(--white);
    padding: 0.1rem 0.5rem;
    width: 50px;
    text-align: center;
    margin-right: 0.5rem;
    font-weight: 600;
}

.Type-hmat .pagebox.ReSize-01 .content-top .right input {
    width: 40px;
}

.Type-hmat .content-top .right .btn__base.disabled {
    background-color: #dddddd !important;
    color: #434343 !important;
}

.Type-hmat .pagebox.ReSize-02 .content-top .right .btn__base.mm,
.Type-hmat .pagebox.ReSize-03 .content-top .right .btn__base.mm,
.Type-hmat .content-top .right .btn__base.mm {
    min-height: 18px;
    padding: 7px 16px !important;
    font-size: 1rem;
}

.Type-hmat .pagebox.ReSize-01 .content-top .right .btn__base.lb {
    padding: 5px 12px 5px 2px !important;
    font-size: 0.7rem;
    min-height: auto;
}

.Type-hmat .pagebox.ReSize-01 .content-top .right .btn__base.rw {
    padding: 5px 7px 5px 12px !important;
    font-size: 0.7rem;
    min-height: auto;
}

.Type-hmat .pagebox.ReSize-01 .content-top .right .btn__base.mm .Type-hmat .pagebox.ReSize-01 .content-top .Options-Button span {
    font-size: 0.8rem;
}

.Type-hmat .content-top {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 1rem;
    background-color: #f5f5f5;
    z-index: 5;
}

.Type-hmat .content-top .Options-Button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.Type-hmat .content-top .Options-Button span {
    font-size: 1rem;
    font-weight: 600;
}

.Type-hmat .content-top .Options-Button button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 1rem;
    text-indent: -999;
    color: #555555;
    border: 1px solid #cccccc;
    background-color: #f5f5f5;
}

.Type-hmat .pagebox.ReSize-01 .content-top .Options-Button button {
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
}

.Type-hmat .content-top .Options-Button button.active::after {
    opacity: 1;
}

.Type-hmat .content-top .Options-Button button.active {
    background-color: var(--white);
    border: 1px solid #212529;
    color: #212529;
}

.Type-hmat .OMRtab-content {
    padding: 0;
    height: 100%;
    max-height: 530px;
}

.Type-hmat .content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    border: #212529 1px solid;
    text-align: left;
    word-break: keep-all;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;

}

.Type-hmat .page-body .content:first-child {
    max-width: 79%;
}

.Type-hmat .content-OMR,
.Type-hmat .content-right {
    position: relative;
    width: 340px;
    max-width: 340px;
    height: 730px;
    padding: 0.5rem;
    border: #212529 1px solid;
}

.Type-hmat .Question-img {
    position: relative;
    top: 70px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 650px;
    padding: 2rem;
    overflow-y: scroll;
    overflow-x: scroll;
}

.Type-hmat .pagebox.ReSize-01 .Question-img {
    padding: 1rem;
    height: 657px;
    top: 60px;
}

.Type-hmat .Question-img img {
    transition: transform 0.3s ease;
    width: 100%;
}

.Type-hmat .omr dd label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.Type-hmat .pagebox.ReSize-01 .omr dd label {
    font-size: 12px;
    width: 20px;
    height: 20px;
}


.Type-hmat .page-main {
    padding: 3rem 8rem 3rem !important
}

.Type-hmat.main .page-main {
    padding: 3rem 5rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.Type-hmat .page-main img {
    width: 100%;
    max-width: 850px;
}

.Type-hmatmocktest.main .Tag-text,
.Type-hmat .Tag-text {
    padding: 3px 12px !important;
    font-size: 0.8rem;
}

.Type-hmat .lecture-table thead {
    border-top: 0;
}

.Type-hmat.main .page-titlebox {
    display: flex;
    align-items: center;
    justify-content: center;
}

.Type-hmat.main .page-titlebox span {
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    font-size: 2rem;
    line-height: 2rem;
    color: #ffffff;
    background-color: #212529;
    border-radius: 100px;
    padding: 0.5rem 5rem !important;
    border: 0 !important;
    margin-top: 0.8rem;
}

.Type-hmat.main .page-titlebox strong {
    margin-right: 1rem;
}

.Type-hmat.main .page-bottombtn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
}



@media (max-width: 1200px) {
    .Type-skct .pagebox {
        max-width: 100%;

    }

    .Type-skct.main {
        min-width: auto;
    }

    .Type-skct.main .page-main {
        padding: 0 5rem !important;
    }

    .Type-skct.main .page-titlebox span {
        font-size: 1.5rem;
        line-height: 2rem;
        padding: 0.6rem 7rem !important;
    }

    .Type-hmat .pagebox {
        max-width: 100%;

    }

    .Type-hmat.main {
        min-width: auto;
    }

    .Type-hmat.main .page-main {
        padding: 0 5rem !important;
    }

    .Type-hmat.main .page-titlebox span {
        font-size: 1.5rem;
        line-height: 2rem;
        padding: 0.6rem 7rem !important;
    }
}

@media (max-width: 768px) {

    .TableToggle-wrap.mt50 {
        margin-top: 30px;
    }

    .Tag-text.WidthAuto {
        width: 100%;
        padding: 4px 20px !important;
        margin-top: 0.5rem;
    }

    .Type-skct.main .page-main {
        padding: 0 1.5rem !important;
    }

    .Type-skct.main .page-titlebox span {
        font-size: 1.3rem;
        padding: 1rem 2rem !important;
        margin-top: 0.8rem;
        line-height: 1rem;
    }

    .Type-skct.main .lecture-table td:last-child:before {
        display: none;
    }

    .Type-skct.main .lecture-table-wrap.basic .lecture-table th:last-child,
    .Type-skct.main .lecture-table-wrap.basic .lecture-table td:last-child {
        border-left: 0;
        border-top: 0;
        padding: 0;
    }

    .Type-skct.main .lecture-table-wrap.basic .lecture-table td {
        border-left: 0;
        border-top: 0;
        height: auto;
    }

    .Type-skct.main .page-bottombtn .btn__base.blue2 {
        font-size: 0.8rem;
        min-height: auto;
    }

    .Type-hmat.main .page-main {
        padding: 0 1.5rem !important;
    }

    .Type-hmat.main .page-titlebox span {
        font-size: 1.3rem;
        padding: 1rem 2rem !important;
        margin-top: 0.8rem;
        line-height: 1rem;
    }

    .Type-hmat.main .lecture-table td:last-child:before {
        display: none;
    }

    .Type-hmat.main .lecture-table-wrap.basic .lecture-table th:last-child,
    .Type-hmat.main .lecture-table-wrap.basic .lecture-table td:last-child {
        border-left: 0;
        border-top: 0;
        padding: 0;
    }

    .Type-hmat.main .lecture-table-wrap.basic .lecture-table td {
        border-left: 0;
        border-top: 0;
        height: auto;
    }

    .Type-hmat.main .page-bottombtn .btn__base.blue2 {
        font-size: 0.8rem;
        min-height: auto;
    }

}


/* 260423 sk인성검사 응답화면 */
.Type-SKpersonality.main .page-main img {
    width: 500px;
}

.Type-SKpersonality.main .page-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 3rem !important;
}

.Type-SKpersonality.main .page-titlebox {
    display: flex;
    align-items: center;
    justify-content: center;
}

.Type-SKpersonality.main .page-titlebox span {
    width: fit-content;
    text-align: center;
    font-weight: 600;
    font-size: 1.5rem;
    color: #ffffff;
    background-color: #212529;
    border-radius: 100px;
    padding: 0.3rem 5rem !important;
    border: 0 !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 0.8rem;
    line-height: 2rem;
}

.TableToggle-wrap {
    width: 100%;
}

.Type-SKpersonality .page-top {
    height: 40px !important;
    line-height: 40px !important;
    color: #666666;
    padding: 0 1.5rem !important;
    border: 0;
    background-color: #F5F5F5 !important;
}

.Type-SKpersonality .page-top article {
    display: flex;
}

.Type-SKpersonality .page-top h1 {
    font-size: 0.9rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-direction: row;
}

.Type-SKpersonality h2 {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.2rem !important;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 0rem !important;
}

.Type-SKpersonality .pagebox .page-top a {
    color: #666666;
}

.Type-SKpersonality .page-bottombtn,
.Type-SKpersonality .page-body,
.Type-SKpersonality .page-title {
    padding: 0 2rem !important;
}

.Type-SKpersonality .page-title {
    background-color: #ffffff !important;
    margin-bottom: 0.5rem;
    border-bottom: 0 !important;
}

.WebtestTopInfo {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.WebtestTopInfo p {
    font-size: 0.9rem;
    text-align: left;
    margin-bottom: 0.2rem;
}

.WebtestTopInfo h2 {
    font-size: 1.2rem;
}


.Type-SKpersonality .contentbox-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem !important;
}

.Type-SKpersonality .contentbox-title h2 {
    margin-top: 0 !important;
}

.Type-SKpersonality .contentbox-title .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-right: 2rem;
}

.Type-SKpersonality .contentbox-title .btn__base {
    width: 150px;
}

.Type-SKpersonality .timer-box {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 1.3rem;
    font-weight: 600 !important;
    color: #001DB7 !important;
    background-color: #f1f3f7;
    padding: 0rem 1rem;
    border-radius: 6px;
    margin: 0 !important;
}

.Type-SKpersonality .timer-box {
    letter-spacing: 1px;
}

.Type-SKpersonality .page-bottombtn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem 2rem !important;
}

.Type-SKpersonality .page-bottombtn>div {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin: 0;
}

.tableDiv.st101 .omr dl {
    border: 0;
    padding: 0;
    width: 100%;
    height: auto;
}

.tableDiv.st101 .omr dd {
    border: 0;
    padding: 0;
}

.tableDiv.st101 .omr dd div {
    height: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #A8AFD4;
}

.tableDiv.st101 .omr dd div:last-child {
    border-right: 0 !important;
}

.tableDiv.st101 .td.left {
    width: 100%;
}

.tableDiv.st101 .omr dd label {
    font-size: 14px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 100px;
    border: 1px solid #939393;
    color: #939393;
}

.tableDiv.st101 .omr dd label:hover {
    background-color: #f5f5f5 !important;
}

.testpage__wrap .omr dd input:checked+label:hover {
    background: var(--main-blue2) !important;
    color: var(--white) !important;
    border-color: transparent;
}

.tableDiv.st101 .omr dd {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    gap: 0;
    width: 100%;
    padding: 0px;
    margin-bottom: 0;
}

.tableDiv.st101 .thead .th:first-child {
    width: 250px;
}

.tableDiv.st101 .thead .th:nth-child(3),
.tableDiv.st101 .tbody .td-group .td:last-child {
    width: 400px;
}

.tableDiv.st101 .thead .th:nth-child(4),
.tableDiv.st101 .tbody .td:nth-child(4) {
    width: 200px;
}

.tableDiv.st101 .group-content .td:first-child {
    width: 74.7px;
    font-weight: 500 !important;
}

.tableDiv.st101 .group-content .td:nth-child(2) {
    align-items: flex-start;
    width: 199px;
    font-weight: 500 !important;
    padding: 0;
}

.tableDiv.st101 .group-content .td:nth-child(3) {
    width: 100px;
    padding: 0;
    border-left: 1px solid #A8AFD4;
}

.tableDiv.st101 .group-content .td:nth-child(4) {
    width: 99px;
    padding: 0;
}

.tableDiv.st101.Type02 .group {
    width: 141.4px;
}

.group-wrap:nth-of-type(5n) {
    border-bottom: 1px solid #001DB7 !important;
}

.tableDiv.st101.Type02 .answer1 {
    width: 341px !important;
    border-left: 1px solid #cccccc;
}

.tableDiv.st101 .tbody .tr {
    border-top: 0;
}

.tableDiv.st101.Type02 .title {
    align-items: flex-start;
    padding: 0 1rem;
    font-weight: 500 !important;
    text-align: left;
}

.tableDiv.st101 .group-inner {
    display: flex;
    flex-direction: row;
    width: auto;
}

.tableDiv.st101 .tbody .title {
    text-align: left;
    color: #212529;
}

.tableDiv.st101 .group-inner .td:first-child {
    width: 422px;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 0.7rem;
}

@media (max-width: 1000px) {
    .tableDiv.st101 .thead .th:first-child {
        width: 99px;
    }

    .tableDiv.st101 .group-inner {
        width: 100%;
    }

    .tableDiv.st101 .group-content .td:nth-child(2) {
        width: 345px;
    }

    .tableDiv.st101 .group-content .td:nth-child(3) {
        width: 133px;
    }

    .tableDiv.st101 .group {
        width: 50px;
    }

    .tableDiv.st101 .group-inner .td:first-child {
        width: 100%;
    }

    .tableDiv.st101.Type02 .group {
        width: 58.4px;
    }

    .tableDiv.st101.Type02 .group-wrap {
        grid-template-columns: 58.4px 1fr;
    }

    .tableDiv.st101.Type02 .answer1 {
        width: 379px !important;
    }
}

@media (max-width: 768px) {
    .WebtestTopInfo {
        gap: 0.5rem;
    }

    .tableDiv.st101 .group-inner .td:first-child {
        width: 100%;
    }

    .Type-SKpersonality h2 {
        font-size: 1rem !important;
        gap: 0.5rem;
    }

    .Type-SKpersonality h2 .btn__base.blueline {
        width: 160px;
        padding: 7px 0px !important;
    }

    .Type-SKpersonality h2 .btn__base.blueline.icon-up {
        width: 90px;
    }

    .Type-SKpersonality .pagebox .page-title {
        padding: 25px 20px 0 !important;
    }

    .WebtestTopInfo p {
        font-size: 0.8rem;
    }

    .Type-SKpersonality .page-bottombtn,
    .Type-SKpersonality .page-body,
    .Type-SKpersonality .page-title {
        padding: 0 1.5rem !important;
    }

    .Type-SKpersonality .page-title {
        margin-bottom: 1rem;
    }

    .tableDiv.st101 .thead {
        display: flex;
        flex-direction: row;
    }

    .tableDiv.st101 .tr {
        display: flex;
        gap: 0;
        grid-auto-flow: column;
        width: 100%;
    }

    .tableDiv.st101 .thead .th:first-child {
        width: 46px;
        display: flex;
    }

    .Type-SKpersonality.Type-A .tableDiv.st101 .thead .th:first-child {
        width: 58px;
    }

    .tableDiv.st101 .group-content .td:nth-child(3) {
        width: 73px;
    }

    .tableDiv.st101 .thead .th:nth-child(3) {
        display: none;
    }

    .tableDiv.st101 .thead .th:nth-child(4) {
        width: 75px;
    }

    .tableDiv.st101 .th:nth-of-type(2) {
        width: 100%;
        display: flex;
    }

    .tableDiv.st101 .group {
        width: 40px
    }

    .Type-SKpersonality.Type-A .tableDiv.st101 .group-wrap {
        grid-template-columns: 40px 1fr;
    }

    .tableDiv.st101.Type02 .group {
        width: 42px;
    }

    .tableDiv.st101.Type02 .group-wrap {
        grid-template-columns: 42px 1fr;
    }

    .tableDiv.st101.Type02 .answer1 {
        width: 180px !important;
        padding: 0;
    }

    .tableDiv.st101.Type02 .thead>.tr>div:nth-of-type(2) {
        border-right: 0;
    }

    .tableDiv.st101.Type02 .tr:last-child {
        display: flex;
        flex-direction: column;
        width: 100%;
        border-bottom: 0;
    }

    .tableDiv.st101.Type02 .thead .tr:last-child {
        flex-direction: row;
    }

    .tableDiv.st101.Type02 .thead .th {
        padding: 0.7rem 0.5rem !important;
    }

    .tableDiv.st101.Type02 .tr>div {
        width: 100%;
    }

    .tableDiv.st101 .omr dd div {
        height: 27px;
    }

    .tableDiv.st101.Type02 .td {
        display: flex !important;
    }

    .tableDiv.st101.Type02 .tr:last-child .td:nth-child(1) {
        border-bottom: 1px solid #A8AFD4;
    }

    .tableDiv.st101.Type02 .title {
        padding: 0.8rem 0.5rem;
        font-weight: 600 !important;
        font-size: 0.9rem;
    }

    .tableDiv.st101.Type02 .group {
        border-right: 1px solid #A8AFD4;
        border-bottom: 0;
    }

    .tableDiv.st101.Type02 .tr {
        padding: 0;
        border-top: 0;
    }

    .tableDiv.st101.Type02 .answer1 {
        width: 100% !important;
        border-left: 0;
    }

    .Type-SKpersonality .page-bottombtn {
        padding: 1rem 1.5rem 5rem !important;
    }

    .Type-SKpersonality .page-bottombtn>div {
        width: 100%;
        gap: 0.5rem;
    }

    .Type-SKpersonality .page-bottombtn {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }

    .Type-SKpersonality .page-bottombtn .btn__base {
        width: 100% !important;
        gap: 0.5rem;
    }

    .Type-SKpersonality.Type-A .tableDiv .td:nth-child(1) {
        display: flex;
        width: 30px;
    }

    .Type-SKpersonality.Type-A .tableDiv .group .td:nth-child(1) {
        width: 50px;
    }

    .Type-SKpersonality.Type-A .tableDiv .group-inner .td:nth-child(1) {
        width: 100% !important;
        padding: 0.6rem 0.5rem;
        border-right: 0;
        border-bottom: 1px solid #A8AFD4;
        font-size: 1rem;
    }

    .Type-SKpersonality .page-top {
        line-height: normal !important;
    }

    .Type-SKpersonality .pagebox .page-top a {
        font-size: 0.7rem;
    }

    .Type-SKpersonality .page-top h1 {
        font-size: 0.7rem;
        margin-bottom: 0 !important;
    }

    .tableDiv.st101 .group-content {
        border-left: 1px solid #A8AFD4;
    }

    .tableDiv.st101 .omr dl {
        width: 100%;
        height: 100%;
    }

    .tableDiv.st101 .group-content .tr {
        display: flex;
        grid-auto-flow: row;
        gap: 0;
        border-bottom: 1px solid #A8AFD4;
    }

    .tableDiv.st101 .omr .check dd div {
        height: 100%;
        width: 100%;
    }

    .tableDiv.st101 .group-inner {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .tableDiv.st101 .group-content .td:nth-child(2) {
        width: 100%;
        align-items: flex-start;
        font-weight: 500 !important;
        padding: 0;
        margin-top: 0;
    }

    .Type-SKpersonality .contentbox-title .btn__base {
        width: 110px;
        line-height: 0.9rem
    }

    .Type-SKpersonality .contentbox-title .title {
        margin-right: 0.5rem;
    }

    .Type-SKpersonality .timer-box {
        letter-spacing: 1px;
        width: 100px;
        font-size: 1.2rem;
        padding: 0rem 0.5rem;
        border-radius: 4px;
        align-items: center;
    }

    .Type-SKpersonality .contentbox-title {
        margin-top: 0 !important;
    }
}



@media (max-width: 400px) {

    .Type-SKpersonality .page-top h1 {
        font-size: 0.7rem;
    }

    .Type-SKpersonality .pagebox .page-top a {
        font-size: 0.6rem;
    }

    .Type-SKpersonality h2 {
        font-size: 1rem !important;
    }

    .Type-SKpersonality h2 .btn__base.blueline.icon-up {
        width: 90px;
    }

    .Type-SKpersonality h2 .btn__base.blueline {
        width: 170px;
    }

    .Type-SKpersonality.Type-B h2 .btn__base.blueline.icon-up {
        width: 90px;
    }

    .Type-SKpersonality.Type-B h2 .btn__base.blueline {
        width: 150px;
    }


    .Type-SKpersonality .page-title {
        margin-bottom: 1rem;
    }
}


/* SKCT실전모의고사 */
.Type-SKCTmocktest.main .page-main img {
    width: 500px;
}

.Type-SKCTmocktest.main .page-titlebox {
    display: flex;
    align-items: center;
    justify-content: center;
}

.Type-SKCTmocktest.main .page-titlebox span {
    width: fit-content;
    text-align: center;
    font-weight: 600;
    font-size: 1.5rem;
    color: #ffffff;
    background-color: #212529;
    border-radius: 100px;
    padding: 0.3rem 5rem !important;
    border: 0 !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 0.8rem;
    line-height: 2rem;
}

.Type-SKCTmocktest.main .page-bottombtn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem 2rem !important;
}

.Type-SKpersonality.main .TableToggle-wrap,
.Type-SKCTmocktest.main .TableToggle-wrap {
    padding: 1rem 0;
}

.Type-SKCTmocktest.main .page-top article {
    display: flex;
}

.Type-SKCTmocktest.main .pagebox .page-top img {
    margin-right: 8px;
}

.Type-SKpersonality.main h3,
.Type-SKCTmocktest.main h3 {
    font-size: 1.2rem;
    font-weight: 600;
}

.Type-SKpersonality.main .lecture-table-wrap.basic .lecture-table th,
.Type-SKCTmocktest.main .lecture-table-wrap.basic .lecture-table th {
    height: 36px;
}

.Type-SKpersonality.main .lecture-table-wrap.basic .lecture-table td,
.Type-SKCTmocktest.main .lecture-table-wrap.basic .lecture-table td {
    height: 34px;
}

.Type-SKCTmocktest.main .pagebox .page-top a {
    color: #666666;
    font-size: 0.7rem;
}

.Type-SKCTmocktest.main .pagebox .page-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    font-size: 0.9rem;
    height: 40px !important;
    line-height: 40px !important;
    color: #666666;
    padding: 0 1.5rem !important;
    border: 0;
    background: #F5F5F5 !important;
    border-bottom: 1px solid #dddddd;
}

.Type-SKCTmocktest.main .page-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 3rem 3rem !important;
}

.TableToggle-content.Dual-table {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
}

.TableToggle-content .lecture-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
}

.info__graybox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 100%;
    gap: 1rem;
    padding: 1.2rem 1.5rem;
    background-color: #f5f5f5;
    border: 1px solid #cccccc;
}

.info__graybox h4 {
    position: relative;
    font-size: 1.2rem;
    font-weight: 500;
    width: 150px;
    color: #555555;
}

.info__graybox h4::before {
    content: '';
    display: inline-block;
    width: 25px;
    height: 3px;
    background-color: #555555;
    position: absolute;
    top: -5px;
    left: 0;
}

.info__graybox ol {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.info__graybox ol li {
    width: 100%;
    font-size: 0.9rem;
    color: #555555;
}

.lecture-bottombtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Type-Learning */
.Type-WrongAnswer,
.Type-Learning {
    padding: 0 !important;
    min-height: 896px;
    min-width: 1200px;
    background-image: unset;
    background-color: #fff;
}

.Type-WrongAnswer .pagebox,
.Type-Learning .pagebox {
    margin: 0 auto;
    max-width: 100% !important;
    width: 100%;
    height: 892px;
    border-radius: 0;
}

.Type-WrongAnswer .page-top,
.Type-Learning .page-top {
    height: auto !important;
    line-height: normal !important;
    padding: 0.5rem 0.5rem 0.5rem 1.5rem !important;
    border: 0;
    color: #ffffff;
    background-color: #009EEC !important;
}

.Type-WrongAnswer .page-top h1,
.Type-Learning .page-top h1 {
    font-size: 1.8rem;
}

.Type-WrongAnswer .page-title,
.Type-Learning .page-title {
    padding: 0 !important;
    background-color: unset !important;
    border: 0;
}

.Type-WrongAnswer .Learning-block,
.Type-Learning .Learning-block {
    position: relative;
    padding: 0.5rem;
}

.Learning-block .Learning-block>h4,
.Type-Learning .Learning-block>h4 {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--white);
    text-align: center;
    z-index: 21;
}

.Type-WrongAnswer .Learning-block>h4,
.Type-Learning .Learning-block>h4 {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--white);
    text-align: center;
    z-index: 21;
}

.Type-WrongAnswer .page-title .title-area,
.Type-Learning .page-title .title-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.6rem;
}

.Type-WrongAnswer .title-right,
.Type-Learning .title-right {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.testpage__wrap .difficulty-box {
    font-size: 1rem;
    text-align: left;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
}

.Type-Learning .page-title h1 {
    font-size: 1.5rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    gap: 0.4rem;
}

.testpage__wrap .info-text.black {
    opacity: 1;
    white-space: nowrap;
    margin: 0 !important;
    font-size: 1rem;
}

.testpage__wrap .timer-box {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 0.3rem;
    background-color: #f1f3f7;
    padding: 0.3rem 1rem;
    border-radius: 6px;
    margin: 0 !important;
}

.testpage__wrap .timer-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    gap: 0.3rem;
}

.testpage__wrap .Learning-body .content:first-child {
    max-width: 66%;
}

.testpage__wrap .content-OMR {
    position: relative;
    width: 340px;
    max-width: 340px;
    height: 730px;
    padding: 0.5rem;
    border: #212529 1px solid;
}

.stats__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    background: #edf1f4;
    border-radius: 6px;

    width: fit-content;
    box-sizing: border-box;
}

.stats__card .stat-item {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.stats__card.nomal {
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    padding: 0;
}

.stats__card.nomal .label {
    font-size: 12px;
}

.stats__card.nomal .stat-item {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.3rem;
    padding: .5rem;
}

.stats__card.nomal .stat-item.end {
    border-left: 1px solid #ccc;
    min-width: 100px;
}

.stats__card .label {
    font-size: 15px;
    font-weight: 400;
    color: #4b5563;
    line-height: 1;
}

.stats__card.nomal .stat-item label {
    font-size: 0.9rem;
}

.stats__card .value {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: #1f2937;
    letter-spacing: -0.03em;
}

.stats__card .value.orange,
.stats__card .value.wrong {
    color: #ff6b00;
}

.stats__card .value.correct {
    color: #10b981;
}

.viewer__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: #cfd5de;
}

.viewer__toolbar .setting-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 42px;
    padding: 0 18px !important;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 700;
    background: #fff;
    border: 2px solid #333;
    cursor: pointer;
}

.viewer__toolbar .setting-btn .icon {
    display: flex;
}

.viewer__toolbar .setting-btn img {
    width: 18px;
}

.viewer__toolbar .setting-btn .arrow-black {
    margin-left: 10px;
    display: block;
    width: 10px;
    height: 10px;
    background-image: url(../img/icon-arrow-up.svg);
    background-size: 100%;
    transition: .3s;
    transform: rotate(-180deg);
}

.viewer__toolbar .setting-btn.active .arrow-black {
    transform: rotate(0deg);
}

.viewer__toolbar .toolbar-right {
    position: relative;
    display: flex;
    align-items: center;
    gap: 36px;
}

.viewer__toolbar .toolbar-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.viewer__toolbar .group-title {
    color: #0047b3;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

.viewer__toolbar .tool-btn {
    height: 42px;
    padding: 0 16px !important;
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 700;
    background: #fff;
    border: 2px solid #333;
    cursor: pointer;
}

.viewer__toolbar .tool-btn.active {
    background-color: #e8eefc;
}

.viewer__toolbar .tool-btn img {
    width: 22px;
}

.viewer__toolbar .layout-btn {
    width: 38px !important;
    height: 38px;

    background: #fff;
    border: 2px solid #333;
    border-radius: 4px;

    cursor: pointer;
    position: relative;
}

.viewer__toolbar .layout-1::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(#333, #333) center/100% 2px no-repeat;
}

.viewer__toolbar .layout-2::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(#333, #333) center/2px 100% no-repeat;
}

.viewer__toolbar .layout-3::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 2px solid #333;
}

.viewer__toolbar .layout-group {
    display: flex;
    gap: 10px;
}

.viewer__toolbar .layout-group label {
    margin: 0;
}

.viewer__toolbar .layout-group input {
    display: none;
}

/* 선택 상태 */
.viewer__toolbar input:checked+.layout-btn {
    background: #e8eefc;
}

.viewer__toolbar .calc-btn {
    height: 42px;
    padding: 0 18px !important;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    background: #4f7fe7;
    border: 0;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.Learning-body {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
}

.Learning-body.row {
    flex-direction: row;
}

.Learning-body.col {
    flex-direction: column;
}

.Learning-body.full {
    flex-direction: column;
    height: 698px;
}
/* 
.Learning-body.full .question__panel,
.Learning-body.full .answer__panel {
    height: 696px;
} */

.Learning-body .question__panel,
.Learning-body .answer__panel {
    overflow-y: auto;
    padding: 1.5rem;
    border: 1px solid #cccccc;
    height: 686px;
}

.Learning-body .question__panel {
    flex: 1;
    min-width: 50%;
}

.Type-WrongAnswer .answer__panel,
.Learning-body .answer__panel {
    width: 48%;
    min-width: 48%;
}

/* 학습정보 */
.question-info {
    display: flex;
    border: 2px solid #4d88ff;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 40px;
}

.question-info__title {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 84px;
    font-size: 1.4rem;
    line-height: 1.5rem;
    font-weight: 700;
    color: #fff;
    background: #4d88ff;
}

.question-info__content {
    flex: 1;
    padding: 14px 24px 16px 24px;
    position: relative;
}

.question-info__top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.question-info .breadcrumb {
    font-size: 18px;
    font-weight: 400;
}

.question-info .solve-count {
    position: absolute !important;
    top: 15px !important;
    right: 24px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 1px 8px;
    font-weight: 500;
    font-size: 0.9rem;
    color: #4d88ff;
    background: #eef4ff;

}

.question-info .bookmark-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 4px 12px !important;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 4px;
    background-color: #f5f5f5;
}

.question-info .bookmark-btn::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-image: url(../img/icon-star02.svg);
    background-size: 100%;
}

.question-info .bookmark-btn.active {
    background-color: #ffde9b;
}

.question-info .bookmark-btn.active::before {
    background-image: url(../img/icon-star01.svg);
}

.question-info__badge {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 5px;
}

.question-info__badge>div:first-child {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.testpage__wrap .badge {
    padding: 6px 12px;
    border: 2px solid;
    border-radius: 4px;
    background: #fff;
    font-weight: 700;
    font-size: 0.9rem;
}

.testpage__wrap .badge--orange {
    color: #ff6a00;
}

.testpage__wrap .badge--blue {
    color: #005dff;
}

.testpage__wrap .badge--green {
    color: #12a63b;
}

/* 문제 */

.testpage__wrap .question-title {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 24px;
}

.question-box {
    position: relative;
    z-index: 1;
}

.question-box.state-answer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -7px;
    display: block;
    width: 50px;
    height: 50px;
    background-image: url(../html/260609/img/icon-state-answer.svg);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
}

.question-box.state-incorrectanswer::before {
    content: '';
    position: absolute;
    top: 1px;
    left: -7px;
    display: block;
    width: 50px;
    height: 50px;
    background-image: url(../html/260609/img/icon-state-incorrectanswer.svg);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
}

.question-box .question-number {
    color: #00a2ff;
    font-size: 42px;
    font-weight: 800;
    width: auto;
    height: auto;
    min-width: auto;
    padding: 4px 0 0;
    background: none;
    background-color: unset;
}

.question-box .question-number img {
    width: 20px;
}

.question-box.question-box.state-incorrectanswer .question-number,
.question-box.state-answer .question-number {
    font-size: 30px;
    font-weight: 800;
    width: 60px;
    height: auto;
    min-width: auto;
    align-items: flex-start;
}

.question-box .question-title p {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}

.question-box .question-text {
    min-height: 60px;
    border: 2px solid #d8d8d8;
    border-radius: 14px;
    padding: 1.4rem 1.6rem;
    font-size: 1rem;
    font-weight: 500;
}

.question-box .question-in {
    padding-left: 1.9rem;
}

/* 보기 */
.choice-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    margin: 1rem 0 3rem;
    padding-left: 2.8rem;
}

.choice-list.col {
    grid-template-columns: repeat(1, 1fr);
    padding-left: 1.9rem;
}

.choice-list.row {
    grid-template-columns: repeat(2, 1fr);
    padding-left: 1.9rem;
}

.choice-list .choice-item {
    height: auto;
    padding: 4px 0;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    background-color: #ffffff;
    border: 0;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 400;
    border-radius: 100px;
    margin: 0;
    cursor: pointer;
}

.choice-list.col .choice-item {
    padding: 4px 0;
}

.choice-list .choice-item.active {
    font-weight: 700;
}

.choice-list .choice-item .num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 100px;
    padding: 0;
    border: 1px solid #999999;
    font-size: 0.9rem;
    line-height: 0.9rem;
}

.choice-list .choice-item input {
    display: none;
}

.choice-list .choice-item label {
    cursor: pointer;
}

.choice-list .choice-item:has(input:checked) .num {
    background: #000000;
    color: #ffffff;
    border: 0;
}

.choice-list .choice-item:has(input:checked) {
    font-weight: 700;
}

/* 우측 */
.answer__panel .info-section {
    margin-bottom: 50px;
}

.answer__panel .answer-result {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 2rem;
}

.answer__panel .section-title {
    display: inline-flex;
    align-items: center;
    padding: 7px 20px;
    gap: 0.3rem;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0;
    border-radius: 0 4px 4px 0;
    background: #4A80DB;
    border-left: 4px solid #003591;
}

.answer__panel .answer-badge img,
.answer__panel .section-title img {
    width: 18px;
}

.answer__panel .info-section:nth-child(3) .section-title img {
    width: 12px;
}

.answer__panel .section-content {
    padding-top: 8px;
    font-size: 18px;
    line-height: 1.8;
}

.answer__panel .point-box {
    border: 3px solid #4A80DB;
    background: #f3f3f3;
    padding: 28px;
    font-size: .9rem;
}

.answer__panel .point-box table{
    background-color: #fff;
    width: 100%;
}
.answer__panel .point-box p {
    font-size: 1rem;
}

.answer__panel .point-inner {
    margin-top: 20px;
    border: 1px solid #999;
    padding: 24px;
    font-size: 0.9rem;
}

.answer__panel .answer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 20px;
    border-radius: 0 4px 4px 0;
    font-size: 16px;
    font-weight: 500;
    gap: 0.3rem;
    color: #fff;
    background: #ff1493;
    border-left: 4px solid #B10067;
}

.answer__panel .answer-number {
    margin-top: 6px;
    font-weight: 800;
}

.answer__panel .answer-number .num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 100px;
    padding: 0;
    font-size: 18px;
    border: 1px solid #999999
}

.question__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    background: #ebebeb;
}

/* 좌측 버튼 */
.question-footer__tools {
    display: flex;
    gap: 6px;
}

.question-footer__tools.popup {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: 1rem;
}

.testpage__wrap .question__footer .footer-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 16px !important;
    border: 1.5px solid #0d47a1;
    border-radius: 8px;
    background: #fff;
    color: #0d47a1;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
}

.testpage__wrap .question__footer .footer-btn.lock::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-image: url(../html/260609/img/CBT-lock.svg);
    background-repeat: no-repeat;
    background-size: 100%;
}

.testpage__wrap .question__footer .footer-btn.lock:hover {
    background-color: #333;
    border-color: #333;
}

.testpage__wrap .question__footer .footer-btn span {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.testpage__wrap .question__footer .footer-btn.active {
    border-color: #333;
    color: #333;
}

.testpage__wrap .question__footer .footer-btn.orange {
    border-color: #EC7914;
    background-color: #EC7914;
    color: var(--white) !important;
}

.testpage__wrap .question__footer .footer-btn.gray777 {
    border-color: #777;
    background-color: #777;
    color: var(--white) !important;
}

.testpage__wrap .question__footer .footer-btn.green {
    border-color: #009519;
    background-color: #009519;
    color: var(--white) !important;
}

.testpage__wrap .question__footer .footer-btn.blue {
    background-color: #0d47a1;
    color: var(--white) !important;
}

.testpage__wrap .question__footer .footer-btn.red {
    background-color: #CB0000;
    border-color: #CB0000;
    color: var(--white) !important;
}

.testpage__wrap .question__footer .footer-btn:hover {
    transform: translateY(-1px);
}

.testpage__wrap .question__footer .footer-btn i {
    display: block;
    width: 18px;
    height: 18px;
    background-size: 100%;
}

.testpage__wrap .question__footer .footer-btn .icon-retun {
    mask: url(../html/260609/img/CBT-arrow-u-left-top.svg) no-repeat center / contain;
    -webkit-mask: url(../html/260609/img/CBT-arrow-u-left-top.svg) no-repeat center / contain;
    background-color: #ffffff;
}


.testpage__wrap .question__footer .footer-btn .icon-submit {
    mask: url(../html/260609/img/CBT-arrow-circle-right-rounded.svg) no-repeat center / contain;
    -webkit-mask: url(../html/260609/img/CBT-arrow-circle-right-rounded.svg) no-repeat center / contain;
    background-color: #ffffff;
}

.testpage__wrap .question__footer .footer-btn .icon-chat {
    mask: url(../html/260609/img/CBT-comment.svg) no-repeat center / contain;
    -webkit-mask: url(../html/260609/img/CBT-comment.svg) no-repeat center / contain;
    background-color: #0d47a1;
}

.testpage__wrap .question__footer .footer-btn.active .icon-chat{
     background-color: #212529;
}
.testpage__wrap .question__footer .footer-btn .icon-video {
    mask: url(../html/260609/img/CBT-playback-progress.svg) no-repeat center / contain;
    -webkit-mask: url(../html/260609/img/CBT-playback-progress.svg) no-repeat center / contain;
    background-color: #0d47a1;
}

.testpage__wrap .question__footer .footer-btn .icon-note {
    mask: url(../html/260609/img/CBT-agreement.svg) no-repeat center / contain;
    -webkit-mask: url(../html/260609/img/CBT-agreement.svg) no-repeat center / contain;
    background-color: #0d47a1;
}

.testpage__wrap .question__footer .footer-btn .icon-simulator {
    mask: url(../html/260609/img/CBT-click.svg) no-repeat center / contain;
    -webkit-mask: url(../html/260609/img/CBT-click.svg) no-repeat center / contain;
    background-color: #0d47a1;
}

/* 우측 페이지 이동 */
.question__footer .question-footer__paging {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0.3rem;
    border-radius: 100px;
    background-color: #fff;
}

.question__footer .paging-current {
    font-size: 22px;
    font-weight: 500;
    color: #222;
}

.question__footer .paging-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 100px;
    height: 33px;
    border: none;
    border-radius: 31px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

/* 이전 */
.question__footer .paging-btn.prev {
    background: #e5e5e5;
    color: #888;
}

.question__footer .paging-btn.prev::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-image: url(../img/icon-arrow-l.svg);
    background-size: 100%;
    opacity: 0.6;
}

.question__footer .paging-btn.prev:disabled {
    cursor: default;
}

/* 다음 */
.question__footer .paging-btn.next {
    background: #1f232b;
    color: #fff;
}

.question__footer .paging-btn.next::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-image: url(../img/icon-arrow-r.svg);
    background-size: 100%;
    opacity: 0.6;
}

.question__footer .paging-btn span {
    font-size: 28px;
    line-height: 1;
}

.setting-wrap {
    position: relative;
}

.setting-popup {
    position: absolute;
    top: calc(100% + -1px);
    left: 0;
    width: 750px;
    border-radius: 4px;
    padding: 18px;
    background: #fff;
    /* border: 2px solid #aaaaaa; */
    box-shadow: 1px 1px 12px #00000040;
    z-index: 100;
    display: none;
}

.setting-popup.show {
    display: block;
}

/* 테이블 */

.setting-table {
    border-top: 1px solid #ddd;
}

.setting-row {
    display: flex;
    border-bottom: 1px solid #ddd;
}

.setting-half {
    width: 50%;
    display: flex;
}

.setting-th {
    flex-shrink: 0;

    width: 86px;

    background: #f3f3f3;
    border-right: 1px solid #ddd;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    font-weight: 700;
}

.setting-td {
    flex: 1;

    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    padding: 10px 12px;
}

/* 버튼 */

.option-btn {
    height: 34px;
    padding: 0 16px !important;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid #bbb;
    background: #f9f9f9;
    cursor: pointer;
}

.option-btn.active {
    background: #4f7fe7;
    border-color: #4f7fe7;
    color: #fff;
}

/* 적용 버튼 */

.apply-btn {
    width: 100% !important;
    height: 42px;
    margin-top: 10px;
    border: 0;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background: #000;
    cursor: pointer;
}

/* zoom-200 */

.zoom-200 .question-box .question-text {
    font-size: 1.5rem;
}

.zoom-200 .question-box .question-number img {
    width: 32px;
}

.zoom-200 .question-box .question-title p {
    font-size: 30px;
}

.zoom-200 .question-box .choice-item {
    font-size: 26px;
}

.zoom-200 .question-box .choice-item .num {
    width: 35px;
    height: 35px;
}

.zoom-200 .question-box .breadcrumb {
    font-size: 28px;
}

.zoom-200 .question-box .badge {
    font-size: 1.2rem;
}

.zoom-200 .question-box .bookmark-btn {
    font-size: 1.3rem;
}

.zoom-200 .answer__panel .section-title {
    font-size: 26px;
}

.zoom-200 .answer__panel .answer-badge,
.zoom-200 .answer__panel .section-content {
    font-size: 26px;
}

.zoom-200 .answer__panel .point-box p {
    font-size: 1.7rem;
}

.zoom-200 .answer__panel .point-inner {
    font-size: 1.4rem;
}

.zoom-200 .answer__panel .answer-badge img,
.zoom-200 .answer__panel .section-title img {
    width: 25px;
}

.zoom-200 .answer__panel .info-section:nth-child(3) .section-title img {
    width: 18px;
}

.zoom-200 .answer__panel .answer-number {
    margin-top: 8px;
    font-size: 62px;
}

.zoom-200 .question-in {
    padding-left: 2.6rem;
}

.zoom-200 .choice-list {
    padding-left: 3.6rem;
}

.zoom-200 .choice-list.col {
    padding-left: 2.4rem;
}

.zoom-200 .choice-list .choice-item .num {
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
}

.zoom-200 .choice-list .choice-item {
    font-size: 1.2rem;
}

/* zoom-150 */

.zoom-150 .question-box .question-text {
    font-size: 1.2rem;
}

.zoom-150 .question-box .question-number img {
    width: 28px;
}

.zoom-150 .question-box .question-title p {
    font-size: 26px;
}

.zoom-150 .question-box .choice-item {
    font-size: 22px;
}

.zoom-150 .question-box .choice-item .num {
    width: 28px;
    height: 28px;
}

.zoom-150 .question-box .breadcrumb {
    font-size: 24px;
}

.zoom-150 .question-box .badge {
    font-size: 1rem;
}

.zoom-150 .question-box .bookmark-btn {
    font-size: 1.1rem;
}

.zoom-150 .answer__panel .section-title {
    font-size: 22px;
}

.zoom-150 .answer__panel .answer-badge,
.zoom-150 .answer__panel .section-content {
    font-size: 22px;
}

.zoom-150 .answer__panel .point-box p {
    font-size: 1.4rem;
}

.zoom-150 .answer__panel .point-inner {
    font-size: 1.1rem;
}

.zoom-150 .answer__panel .answer-badge img,
.zoom-150 .answer__panel .section-title img {
    width: 20px;
}

.zoom-150 .answer__panel .info-section:nth-child(3) .section-title img {
    width: 14px;
}

.zoom-150 .answer__panel .answer-number {
    margin-top: 6px;
    font-size: 52px;
}

.zoom-150 .choice-list .choice-item .num {
    width: 25px;
    height: 25px;
    font-size: 1rem;
}

.zoom-150 .question-in {
    padding-left: 2.0rem;
}

.zoom-150 .choice-list {
    padding-left: 3.2rem;
}

.zoom-150 .choice-list.col {
    padding-left: 2.0rem;
}

.zoom-150 .choice-list .choice-item {
    font-size: 1rem;
}

.Learning-body.col .answer__panel {
    width: 100%;
    min-width: 100%;
    height: auto;
    background-color: #f5f5f5;
}

.MockTest-body.col .question__panel,
.Learning-body.col .question__panel {
    min-width: 100%;
    height: auto;
}

.MockTest-body.full .question__panel,
.Learning-body.full .question__panel,
.Learning-body.full .answer__panel {
    border: 0;
    background-color: #ffffff;
}

.Learning-body.full .answer__panel {
    width: 100%;
    min-width: 100%;
    height: auto;
    background-color: #ffffff;
}

.MockTest-body.full .question__panel,
.Learning-body.full .question__panel {
    min-width: 100%;
    height: auto;
}

.MockTest-body.full .solve-count,
.MockTest-body.col .solve-count,
.Learning-body.full .solve-count,
.Learning-body.col .solve-count {
    position: relative;
    top: unset;
    right: unset;
}

/* Type-MockTest */
.Type-MockTest {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0 !important;
    min-height: 896px;
    min-width: 100%;
    width: 100%;
}

.Type-MockTest section {
    padding: 0 !important;
    margin: 0;
}

.Type-WrongAnswer .MockTest-block,
.Type-MockTest .MockTest-block {
    position: relative;
    padding: 0.5rem;
}

.MockTest-body {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
}

.MockTest-body.row {
    flex-direction: row;
}

.MockTest-body.col {
    flex-direction: column;
}

.MockTest-body.full {
    overflow-y: scroll;
    flex-direction: column;
    height: 687px;
}

.MockTest-body .question__panel{
    overflow-y: auto;
    padding: 1.5rem;
    width: 100%;
    height: 705px;
}
.MockTest-body .answer__panel {
    overflow-y: auto;
    padding: 1.5rem;
    width: 49.7%;
    height: 705px;
}

.MockTest-body .question__panel {
    border: 1px solid #cccccc;
    
}

.MockTest-body.col .question__panel {
    overflow-y: auto;
    padding: 1.5rem;
    border: 1px solid #cccccc;
    width: 100%;
    height: 339px;
}

.MockTest-body.full .question__panel {
    overflow-y: unset;
    padding: 1.5rem;
    border: 0;
    width: 100%;
    height: auto;
}

.Type-MockTest .MockTest-block>h4 {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--white);
    text-align: center;
    z-index: 21;
}

.Type-MockTest .MockTest-block>h4 {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--white);
    text-align: center;
    z-index: 21;
}

.Type-MockTest .MockTest-body .content:first-child {
    max-width: 66%;
}

.Type-MockTest .viewer__toolbar {
    justify-content: flex-end;
}

.Type-MockTest .page__side {
    width: 300px;
    height: 724px;
}

.Type-MockTest:before {
    display: none;
}

.Type-MockTest .pagebox {
    margin: 0 auto;
    max-width: 100% !important;
    border-radius: 0;
    width: 100%;
}

.Type-MockTest .page__side h3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.Type-MockTest .page__side h3 {
    color: #ffffff;
    font-weight: 400;
    font-size: 0.7rem;
}

.Type-MockTest .page__side h3 strong {
    font-weight: 600;
    font-size: 1.2rem;
}

.Type-MockTest .page__side .side-time {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex;
    gap: 0.8rem;
    padding: 0 1rem;
    height: 54px;
    background-color: #2052A7;
    color: #ffffff;
}

.Type-MockTest .page__side .side-time .timer-box {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 0rem 1.5rem;
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: 2px;
    border-radius: 4px;
    color: #2052A7;
    background-color: var(--white);
}

.Type-MockTest .page__side .side-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 59px;
    padding: 1rem 1rem;
    font-size: 1rem;
    color: var(--white);
    background-color: #3664B1;
}

.Type-MockTest .page__side h2 {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.3rem;
}


.Type-MockTest .page__side .side-btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100% !important;
    height: 58px;
    padding: 0.5rem !important;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white);
    background-color: #318BFF;
}

.Type-MockTest .page__side .side-btn-submit:hover {
    background-color: #2783fa;
}

.Type-MockTest .page__side .side-btn-submit::after {
    content: '';
    width: 28px;
    height: 28px;
    display: block;
    background-image: url(../html/260609/img/CBT-arrow-circle-right-rounded.svg);
    background-repeat: no-repeat;
    background-size: 100%;
}


.Type-MockTest .side-answersheet {
    background-color: var(--white);
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    height: 100%;
    overflow-y: scroll;
}

.Type-CBT.final-stage .omr dt,
.Type-MockTest .omr dt {
    background-color: #FFE7E7;
    color: #FF6163;
    border-right: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Type-CBT.final-stage .omr dl.active dt {
    background-color: #FFF1A3;
}

.Type-MockTest .omr dt:first-child {
    background-color: #ffffff;
    color: #212529;
}

.Type-CBT.final-stage .omr dd,
.Type-MockTest .omr dd {
    background-color: #ffffff;
}

.Type-CBT.final-stage .omr dl.active dd {
    background-color: #FFFEE9;
}

.Type-MockTest .omr dl {
    border-bottom: 1px solid #efd3d3;
}

.Type-CBT.final-stage .omr dl {
    border-bottom: 1px solid #ffa0a1 !important;

}

.Type-CBT.final-stage .omr dd label,
.Type-MockTest .omr dd label {
    border: 1px solid #FF6163;
    color: #FF6163;
    display: flex;
    align-items: center;
    justify-content: center;
    background: unset;
}

.Type-CBT.final-stage .omr dd input:checked+label,
.Type-MockTest .omr dd input:checked+label {
    background: #FF6163;
    color: var(--white);
    border-color: transparent;

}

.Type-MockTest .omr .check__box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}

.Type-CBT.final-stage .omr dd input:checked+label:hover,
.testpage__wrap .omr dd input:checked+label:hover {
    background: #FF6163 !important;
    color: var(--white) !important;
    border-color: transparent;
}

.Type-MockTest .check__box input[type=checkbox]+label {
    border: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    background: url('../img/check-orange.svg') no-repeat left top !important;
    background-size: 100% !important;
}

.Type-MockTest .check__box input[type=checkbox]:checked+label {
    background: url('../img/check-orange.svg') no-repeat left bottom !important;
    background-size: 100% !important;

}

.question-title .check__box {
    width: 40px;
    height: 30px;

    margin-bottom: 0;
    justify-content: center;
}

.question-title .check__box input[type=checkbox]+label {
    width: 20px !important;
    height: 20px !important;
    background: url('../img/check-orange.svg') no-repeat left top !important;
    background-size: 100% !important;
}

.question-title .check__box input[type=checkbox]:checked+label {
    background: url('../img/check-orange.svg') no-repeat left bottom !important;
    background-size: 100% !important;
}


.popup_st_01.Type-CBT .title {
    font-size: 1.4rem;
}

.popup_st_01.Type-CBT .title p {
    font-size: 0.9rem;
    font-weight: 400;
}

.number-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 9px;
    max-width: 460px;
    padding: 20px;
    margin: 0 !important;
    background-color: #ffffff;
    border: 1px solid #cccccc;
}

.number-grid.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 9px;
}

.side-answersheet .number-grid {
    border: 0;
}

.number-grid button {
    width: 34px;
    height: 34px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    border: 1px solid #888888;
    color: #212529;
    background-color: #ffffff;
}

.number-grid button:hover,
.number-grid button.active {
    background-color: #4da3ff;
    border: 1px solid #4da3ff;
    color: #fff;
}

.side-answersheet-info {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #eee;
    gap: 0.5rem;
    padding: 1rem;
}

.side-answersheet-info p {
    font-size: 0.8rem;
}

.side-answersheet-info ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.side-answersheet-info ul li {
    display: flex;
    flex-direction: row;
    font-size: 1rem;
    font-weight: 500;
    gap: 0.5rem;
}

.side-answersheet-info ul li span {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    border: 1.5px solid #888888;
    color: #212529;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.side-answersheet-info ul li.wrong span,
.number-grid button.wrong {
    border-color: #CB0000;
    color: #CB0000;
}

.side-answersheet-info ul li.check span,
.number-grid button.check {
    border-color: #EC7914;
    color: #EC7914;
}

.number-grid button.wrong:hover {
    background-color: #CB0000;
    color: #fff;
}

.number-grid button.check:hover {
    background-color: #EC7914;
    color: #fff;
}

.Type-CBT.check-question .number-grid button {
    border: 1px solid #EC7914;
    color: #ffffff;
    background-color: #EC7914;
}

.Type-CBT.check-question .number-grid button:hover,
.Type-CBT.check-question .number-grid button.active {
    background-color: #212529;
    border: 1px solid #212529;
    color: #fff;
}


.Type-CBT.remaining-question .number-grid button {
    border: 1px solid #009519;
    color: #ffffff;
    background-color: #009519;
}

.Type-CBT.remaining-question .number-grid button:hover,
.Type-CBT.remaining-question .number-grid button.active {
    background-color: #212529;
    border: 1px solid #212529;
    color: #fff;
}

.Type-CBT.final-stage .popup_con {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
}

.Type-CBT.final-stage .popup_con>div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    border: 1px solid #cccccc;
    padding: 1rem;
    margin: 0 !important;
}

.Type-CBT.final-stage .FinalCheck-left {
    width: 400px !important;
}

.Type-CBT.final-stage .FinalCheck-left table {
    border: 1px solid #cccccc;
}

.Type-CBT.final-stage .FinalCheck-left thead {
    padding: 1rem;
    text-align: center;
    background-color: #009DD6;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
}

.Type-CBT.final-stage .FinalCheck-left thead th {
    font-weight: 500;
    padding: 1rem;
}

.Type-CBT.final-stage .FinalCheck-left tbody tr {
    border-bottom: 1px solid #cccccc;
}

.Type-CBT.final-stage .FinalCheck-left tbody tr:last-child {
    border-bottom: 0;
}

.Type-CBT.final-stage .FinalCheck-left tbody th {
    padding: 0.5rem;
    text-align: center;
    background-color: #EDF9FF;
    color: #003591;
    font-size: 0.9rem;
    width: 100px;
}

.Type-CBT.final-stage .FinalCheck-left tbody td {
    padding: 0.5rem;
    text-align: center;
    font-size: 1rem;
    background-color: #ffffff;
    color: #212529;
}

.Type-CBT.final-stage .FinalCheck-right {
    min-width: 900px;
}

.Type-CBT.final-stage .FinalCheck-right .title {
    padding: 1rem;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
    background-color: #3664B1;
    color: #ffffff;
}

.Type-CBT.final-stage .FinalCheck-in {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.Type-CBT.final-stage .FinalCheck-col {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    border-radius: 8px;
    border: 1px solid #cccccc;
}

.Type-CBT.final-stage .FinalCheck-col .omr:first-child {
    border-top: 1px solid #FF6163;
}

.Type-CBT.final-stage .FinalCheck-col .omr:nth-child(5n) {
    border-bottom: 1px solid #FF6163;
}

.viewer__toolbar .calc--popup {
    display: none;
    position: absolute;
    right: 0;
    top: 46px;
    width: 200px;
    background: #d7e5f4;
    /* border: 2px solid #cccccc; */
    font-family: Arial, sans-serif;
    box-shadow: 1px 1px 12px #00000040;
    z-index: 10;

}

.viewer__toolbar .calc--popup.show {
    display: block;
}

.calc--popup .calculator {
    width: 100%;
}

.calc--popup .calc-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;
    background: #4f7fe7;
    padding: 0.2rem 0.5rem;
}

.calc--popup .calc-header span {
    font-size: 1rem;
    color: #fff;
}

.calc--popup .calc-close {
    position: relative;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 18px;
}

.calc--popup .calc-display {
    height: auto;
    max-height: 320px;
    padding: 10px 8px;
    background: #fff;
    border-top: 1px solid #4f7fe7;
    /* border-bottom: 1px solid #4f7fe7; */
    text-align: right;
    font-size: 28px;
    line-height: 38px;
    color: #333;
}

.calc--popup .calc-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: #b9cbe0;
    border-top: 1px solid #b9cbe0;
}

.calc--popup .calc-buttons button {
    height: 36px;
    border: 0;
    font-size: 16px;
    font-weight: 600;
    border-right: 1px solid #b9cbe0;
    border-bottom: 1px solid #b9cbe0;
    color: #4f7fe7;
    background: #f2f6ff;
    cursor: pointer;
}

.calc--popup .calc-buttons button:nth-child(4n) {
    border-right: 0;
}

.calc--popup .calc-buttons button.num {
    background: #fff;
}

.calc--popup .calc-buttons button:hover {
    background: #e5f1ff;
}

.calc--popup .zero {
    grid-column: span 2;
}

.calc--popup .equal {
    background: #7ca5ff !important;
    color: #fff !important;
}

.calc--popup .calc-buttons button.equal:hover {
    background: #4f7fe7 !important;
}

.info_text-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.2rem;
}

.info_text-wrap .info_text {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
    gap: 0.3rem;
}

.title-left .title {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 16px !important;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    background: #EC7914;
    border: 2px solid #EC7914;
    color: #fff;
}

.page__side .top-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 55px;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    color: #ffffff;
    background-color: #009519;
}

.page__side .top-title h3 {
    font-size: 1.5rem;
}

/* Type-WrongAnswer */
.Type-WrongAnswer {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0 !important;
    min-height: 896px;
    min-width: 100%;
    width: 100% !important;
    background-color: #fff;
}

.Type-WrongAnswer .pagebox {
    margin: 0;
    width: 100%;
}

.Type-WrongAnswer .page__side {
    height: 892PX;
    width: 300px;
    background-color: #fff;
    border-left: 1px solid #cccccc;
}