@charset 'utf-8';

/* 레이아웃, 디자인 공통 */
.layout {
   width: 96%;
   max-width: 1200px;
   position: relative;
   margin: 0 auto;
}
.bgArea {
   width: 100%;
   padding: var(--mg-40);
   background-color: var(--color-gray200);
   border: 1px solid var(--color-gray400);
   border-radius: 10px;
}
.mSection {
   padding: var(--mg-80) 0;
}
.mw400 {
   max-width: 400px;
   margin: 0 auto;
}
.titArea {
   text-align: center;
   margin-bottom: var(--mg-30);
}
.titArea p {
   margin-top: var(--mg-30);
}
.tabArea {
   margin-top: var(--mg-20);
}
.tabArea ul {
   display: flex;
   justify-content: center;
   align-items: center;
}
.tabArea li {
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 40px;
   margin: 0 var(--mg-5);
   padding: 0 var(--mg-20);
   background-color: var(--color-gray200);
   border-radius: 20px;
}
.tabArea li.on {
   background-color: var(--color-orange);
}
.tabArea li.on span {
   color: var(--color-white);
}
.testFormArea form {
   width: 100%;
}
.testFormArea .formRow {
   display: flex;
   flex-direction: column;
   margin-bottom: var(--mg-30);
}
.testFormArea .boldTxt18 {
   margin-bottom: var(--mg-20);
}
.testFormArea .formSelect {
   width: 100%;
   height: 55px;
   background-color: var(--color-white);
   border: 1px solid var(--color-gray400);
   border-radius: 5px;
}
.testFormArea ul.modeSelect {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0 var(--mg-20);
}
.testFormArea .formLabel {
   cursor: pointer;
   display: flex;
   align-items: center;
   width: 100%;
   height: 55px;
   padding: 0 var(--mg-20);
   background-color: var(--color-white);
   border: 1px solid var(--color-gray400);
   border-radius: 5px;
   font-size: var(--font-16);
   font-weight: var(--fw-300);
}
.testFormArea .formLabel .hidden {
   display: none;
}
.testFormArea .formLabel span {
   width: 24px;
   height: 24px;
   margin-right: var(--mg-10);
}
.testFormArea .formLabel .svg circle,
.testFormArea .formLabel .svg path {
   transition: var(--transition);
}
.testFormArea .formLabel input[type="radio"]:checked + span .svg circle {
   fill: var(--color-green);
}
.testFormArea .formLabel input[type="radio"]:checked + span .svg path {
   stroke: var(--color-white);
}
.selectMultiple {
   width: 100%;
   position: relative;
}
.selectMultiple select {
   display: none;
}
.selectMultiple > div {
   z-index: 2;
   position: relative;
   min-height: 55px;
   padding: var(--mg-10) var(--mg-20);
   background: #fff;
   border: 1px solid var(--color-gray400);
   border-radius: 5px;
   font-size: var(--font-16);
}
.selectMultiple > div .arrow {
   right: 20px;
   top: 0;
   bottom: 0;
   cursor: pointer;
   position: absolute;
   width: 18px;
   background: url("/public/images/icon-down.svg") no-repeat center / 18px auto;
}

.selectMultiple > div span {
   cursor: pointer;
   position: absolute;
   top: 16px;
   left: 20px;
   color: var(--color-dark);
   font-size: var(--font-16);
   display: block;
   transition: all 0.3s ease;
}
.selectMultiple > div span.hide {
   opacity: 0;
   visibility: hidden;
   transform: translate(-4px, 0);
}
.selectMultiple > div a {
   position: relative;
   padding: 0 24px 6px 8px;
   line-height: 28px;
   color: var(--color-dark);
   display: inline-block;
   vertical-align: top;
   margin: 0 6px 0 0;
}
.selectMultiple > div a em {
   font-style: normal;
   display: block;
   white-space: nowrap;
}
.selectMultiple > div a:before {
   content: "";
   left: 0;
   top: 0;
   bottom: 6px;
   width: 100%;
   position: absolute;
   display: block;
   background: var(--color-gray200);
   z-index: -1;
   border-radius: 5px;
}
.selectMultiple > div a i {
   cursor: pointer;
   position: absolute;
   top: 0;
   right: 0;
   width: 24px;
   height: 28px;
   display: block;
}
.selectMultiple > div a i:before,
.selectMultiple > div a i:after {
   content: "";
   display: block;
   width: 2px;
   height: 10px;
   position: absolute;
   left: 50%;
   top: 50%;
   background: var(--color-dark);
   border-radius: 1px;
}
.selectMultiple > div a i:before {
   transform: translate(-50%, -50%) rotate(45deg);
}
.selectMultiple > div a i:after {
   transform: translate(-50%, -50%) rotate(-45deg);
}
.selectMultiple > div a.notShown {
   opacity: 0;
   transition: opacity 0.3s ease;
}
.selectMultiple > div a.notShown:before {
   width: 28px;
   transition: width 0.45s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.2s;
}
.selectMultiple > div a.notShown i {
   opacity: 0;
   transition: all 0.3s ease 0.3s;
}
.selectMultiple > div a.notShown em {
   opacity: 0;
   transform: translate(-6px, 0);
   transition: all 0.4s ease 0.3s;
}
.selectMultiple > div a.notShown.shown {
   opacity: 1;
}
.selectMultiple > div a.notShown.shown:before {
   width: 100%;
}
.selectMultiple > div a.notShown.shown i {
   opacity: 1;
}
.selectMultiple > div a.notShown.shown em {
   opacity: 1;
   transform: translate(0, 0);
}
.selectMultiple > div a.remove:before {
   width: 28px;
   transition: width 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0s;
}
.selectMultiple > div a.remove i {
   opacity: 0;
   transition: all 0.3s ease 0s;
}
.selectMultiple > div a.remove em {
   opacity: 0;
   transform: translate(-12px, 0);
   transition: all 0.4s ease 0s;
}
.selectMultiple > div a.remove.disappear {
   opacity: 0;
   transition: opacity 0.5s ease 0s;
}
.selectMultiple > ul {
   margin: 0;
   padding: 0;
   list-style: none;
   font-size: 16px;
   z-index: 1;
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   visibility: hidden;
   opacity: 0;
   border-radius: 5px;
   transform: translate(0, 20px) scale(0.8);
   transform-origin: 0 0;
   filter: drop-shadow(0 12px 20px rgba(22, 42, 90, 0.08));
   transition: all 0.4s ease, transform 0.4s cubic-bezier(0.87, -0.41, 0.19, 1.44), filter 0.3s ease 0.2s;
}
.selectMultiple > ul li {
   color: var(--color-dark);
   background: #fff;
   padding: var(--mg-20);
   cursor: pointer;
   overflow: hidden;
   position: relative;
   transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease 0.3s, opacity 0.5s ease 0.3s, border-radius 0.3s ease 0.3s;
}
.selectMultiple > ul li:first-child {
   border-radius: 5px 5px 0 0;
}
.selectMultiple > ul li:first-child:last-child {
   border-radius: 5px;
}
.selectMultiple > ul li:last-child {
   border-radius: 0 0 5px 5px;
}
.selectMultiple > ul li:last-child:first-child {
   border-radius: 5px;
}
.selectMultiple > ul li:hover {
   background: var(--color-green);
   color: #fff;
}
.selectMultiple > ul li:after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 6px;
   height: 6px;
   background: rgba(0, 0, 0, 0.4);
   opacity: 0;
   border-radius: 100%;
   transform: scale(1, 1) translate(-50%, -50%);
   transform-origin: 50% 50%;
}
.selectMultiple > ul li.beforeRemove {
   border-radius: 0 0 5px 5px;
}
.selectMultiple > ul li.beforeRemove:first-child {
   border-radius: 5px;
}
.selectMultiple > ul li.afterRemove {
   border-radius: 5px 5px 0 0;
}
.selectMultiple > ul li.afterRemove:last-child {
   border-radius: 5px;
}
.selectMultiple > ul li.remove {
   transform: scale(0);
   opacity: 0;
}
.selectMultiple > ul li.remove:after {
   -webkit-animation: ripple 0.4s ease-out;
   animation: ripple 0.4s ease-out;
}
.selectMultiple > ul li.notShown {
   display: none;
   transform: scale(0);
   opacity: 0;
   transition: transform 0.35s ease, opacity 0.4s ease;
}
.selectMultiple > ul li.notShown.show {
   transform: scale(1);
   opacity: 1;
}
.selectMultiple.open > div {
   box-shadow: 0 4px 20px -1px rgba(22, 42, 90, 0.12);
}
.selectMultiple.open > div .arrow:before {
   transform: rotate(-50deg);
}
.selectMultiple.open > div .arrow:after {
   transform: rotate(50deg);
}
.selectMultiple.open > ul {
   transform: translate(0, 12px) scale(1);
   opacity: 1;
   visibility: visible;
   filter: drop-shadow(0 16px 24px rgba(22, 42, 90, 0.16));
}

@-webkit-keyframes ripple {
   0% {
      transform: scale(0, 0);
      opacity: 1;
   }
   25% {
      transform: scale(30, 30);
      opacity: 1;
   }
   100% {
      opacity: 0;
      transform: scale(50, 50);
   }
}

@keyframes ripple {
   0% {
      transform: scale(0, 0);
      opacity: 1;
   }
   25% {
      transform: scale(30, 30);
      opacity: 1;
   }
   100% {
      opacity: 0;
      transform: scale(50, 50);
   }
}

.testFormArea ul.achievementCheck {
   display: flex;
   align-items: center;
   width: 100%;
   height: 55px;
   margin-bottom: var(--mg-10);
   padding: 0 var(--mg-20);
   background-color: var(--color-white);
   border: 1px solid var(--color-gray400);
   border-radius: 5px;
}
.testFormArea ul.achievementCheck li {
   margin-right: var(--mg-20);
}
.testFormArea ul.achievementCheck li:last-of-type {
   margin-right: 0;
}
.testFormArea ul.achievementCheck .formLabel {
   width: auto;
   height: auto;
   padding: 0;
   background-color: transparent;
   border: 0;
   border-radius: 0;
}
.testFormArea .formInput {
   width: calc(50% - 10px);
   height: 55px;
   padding: 0 var(--mg-20);
   background-color: var(--color-white);
   border: 1px solid var(--color-gray400);
   border-radius: 5px;
   font-size: var(--font-16);
   font-weight: var(--fw-300);
}
.testFormArea .formInput::placeholder {
   font-size: var(--font-16);
   font-weight: var(--fw-300);
}

.btnArea {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: var(--mg-60);
}
.commonComplete .btnArea {
   margin-top: var(--mg-40);
}
.btnArea .btn {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 60px;
   padding: 0 var(--mg-40);
   background-color: var(--color-green);
   border-radius: 5px;
}
.btnArea .btn.gray {
   background-color: var(--color-gray400);
}
.btnArea .btn:hover {
   background-color: var(--color-green-hover);
}
.btnArea .btn.gray:hover {
   background-color: var(--color-green);
}
.btnArea .btn span {
   color: var(--color-white);
   transition: var(--transition);
}
.btnArea .btn.gray span {
   color: var(--color-dark);
}
.btnArea .btn.gray:hover span {
   color: var(--color-white);
}

.utillBtnArea {
   display: flex;
   justify-content: center;
   align-items: center;
}
.utillBtnArea .btn {
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 45px;
   margin: 0 var(--mg-10);
   padding: 0 var(--mg-25);
   background-color: var(--color-gray200);
   border-radius: 5px;
}
.utillBtnArea .btn img {
   margin-right: var(--mg-10);
}
.utillBtnArea .btn.yellow:hover {
   background-color: var(--color-yellow);
}
.utillBtnArea .btn.gray:hover {
   background-color: var(--color-gray400);
}
.utillBtnArea .btn.excel.on {
   background-color: var(--color-excel);
}

.tit35 {
   display: block;
   font-size: var(--font-35);
   font-weight: var(--fw-700);
}
.boldTxt25 {
   display: block;
   font-size: var(--font-25);
   font-weight: var(--fw-700);
}
.boldTxt20 {
   display: block;
   font-size: var(--font-20);
   font-weight: var(--fw-700);
}
.boldTxt18 {
   display: block;
   font-size: var(--font-18);
   font-weight: var(--fw-700);
}
.boldTxt16 {
   display: block;
   font-size: var(--font-16);
   font-weight: var(--fw-700);
}
.lightTxt18 {
   font-size: var(--font-18);
   font-weight: var(--fw-300);
}
.lightTxt16 {
   font-size: var(--font-16);
   font-weight: var(--fw-300);
}
.lightTxt14 {
   font-size: var(--font-14);
   font-weight: var(--fw-300);
}

#subContent {
   position: relative;
   padding: var(--mg-80) 0 var(--mg-100) 0;
}
.contentWrap {
   display: flex;
}

.timerArea {
   max-width: 530px;
   margin: var(--mg-60) auto var(--mg-60) auto;
}
.timerArea #container {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   padding: var(--mg-25) var(--mg-80);
   background-color: var(--color-gray200);
}
.timerArea .time {
   max-width: 90px;
   background-color: transparent;
   text-align: right;
   font-size: var(--mg-60);
   font-weight: var(--fw-700);
}
.timerArea input[type="number"]::-webkit-inner-spin-button,
.timerArea input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
}
.timerArea .label {
   position: relative;
   top: -10px;
}
.timerArea .funtionBtnArea {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: var(--mg-20);
}
.timerArea .funtionBtnArea .btn {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 64px;
   height: 30px;
   margin-right: var(--mg-20);
   border-radius: 5px;
}
.timerArea .funtionBtnArea .btn span {
   color: var(--color-white);
   font-size: var(--font-12);
   font-weight: var(--fw-700);
}
.timerArea .funtionBtnArea .btn.start {
   background-color: var(--color-dark);
}
.timerArea .funtionBtnArea .btn.stop {
   background-color: var(--color-red);
}
.timerArea .funtionBtnArea .btn.reset {
   background-color: var(--color-blue);
}
.timerArea .time-group {
   display: flex;
   align-items: flex-end;
   width: 33.33%;
   margin-right: var(--mg-30);
}

.questionArea {
   margin-bottom: var(--mg-60);
}
.questionArea:last-of-type {
   margin-bottom: 0;
}
.questionArea .row1 {
   margin-bottom: var(--mg-40);
}
.questionArea .row1:last-of-type {
   margin-bottom: 0;
}
.questionArea .row1.w50 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0 var(--mg-40);
}
.questionArea .questionTxtArea,
.questionArea .questionImgArea,
.questionArea .textArea,
.questionArea .answerArea,
.questionArea .explanationTxtArea,
.questionArea .explanationImgArea {
   padding: var(--mg-30);
   background-color: var(--color-white);
   border: 1px solid var(--color-gray400);
   border-radius: 10px;
}
.questionArea .questionTxtArea strong {
   margin-bottom: var(--mg-10);
}
.questionArea .questionImgArea img,
.questionArea .explanationImgArea img {
   width: 100%;
}
.questionArea .textArea {
   height: 200px;
   background-color: var(--color-gray200);
}
.questionArea .textArea::placeholder {
   font-size: var(--font-18);
   font-weight: var(--fw-300);
}
.questionArea .answerWriteArea .btnArea {
   justify-content: flex-end;
   margin-top: var(--mg-20);
}
.questionArea .answerBtn {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 55px;
   padding: 0 var(--mg-40);
   background-color: var(--color-green);
   border-radius: 5px;
}
.questionArea .answerBtn:hover,
.questionArea .answerBtn.on {
   background-color: var(--color-green-hover);
}
.questionArea .answerBtn span {
   margin-right: var(--mg-10);
   color: var(--color-white);
}
.questionArea .answerBtn .svg {
   transition: var(--transition);
}
.questionArea .answerBtn.on .svg {
   transform: rotate(-180deg);
}
.questionArea .answerBtn .svg path {
   stroke: var(--color-white);
}
.questionArea .answerArea {
   display: none;
   margin-top: var(--mg-20);
   background-color: var(--color-gray200);
}
.questionArea .leftContent {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   max-width: 900px;
   width: 75%;
   margin-right: var(--mg-40);
   padding-right: var(--mg-40);
   border-right: 1px solid var(--color-gray400);
}
.questionArea .qusetionNumbersTit {
   margin-bottom: var(--mg-20);
}
.questionArea .qusetionNumbers {
   display: flex;
   flex-wrap: wrap;
}
.questionArea .qusetionNumbers button {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 40px;
   height: 40px;
   margin-right: var(--mg-10);
   margin-bottom: var(--mg-10);
   background-color: var(--color-gray200);
   border-radius: 5px;
}
.questionArea .qusetionNumbers button:hover,
.questionArea .qusetionNumbers button.on {
   background-color: var(--color-green);
}
.questionArea .qusetionNumbers button:hover span,
.questionArea .qusetionNumbers button.on span {
   color: var(--color-white);
}
.questionArea .qusetionNumbersArea .btnArea {
   justify-content: flex-start;
}
.questionArea .qusetionNumbersArea .btnArea .btn {
   height: 55px;
   margin-right: var(--mg-10);
}
.questionArea .qusetionNumbersArea .btnArea .btn.gray {
   background-color: var(--color-gray400);
}
.questionArea .qusetionNumbersArea .btnArea .btn.gray:hover {
   background-color: var(--color-green);
}
.questionArea .achievement {
   display: flex;
}
.questionArea .achievement .btn {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 40px;
   height: 40px;
   margin-right: var(--mg-10);
   background-color: var(--color-gray200);
   border-radius: 5px;
}
.questionArea .achievement .btn:hover,
.questionArea .achievement .btn.on {
   background-color: var(--color-green);
}
.questionArea .achievement .btn .svg circle,
.questionArea .achievement .btn .svg path {
   transition: var(--transition);
}
.questionArea .achievement .btn:hover .svg circle,
.questionArea .achievement .btn:hover .svg path,
.questionArea .achievement .btn.on .svg circle,
.questionArea .achievement .btn.on .svg path {
   fill: var(--color-white);
}
.questionArea .achievement .btn:last-of-type:hover .svg path {
   stroke: var(--color-white);
}
.questionArea .explanationTxtArea,
.questionArea .explanationImgArea {
   background-color: var(--color-gray200);
}
.questionArea .explanationTxtArea.blind,
.questionArea .explanationImgArea.blind {
   filter: blur(5px);
}
.questionArea .explanationBtnArea .btnArea {
   justify-content: flex-start;
   margin-top: var(--mg-20);
}
.questionArea .explanationBtnArea .btnArea .btn {
   height: 55px;
   margin-right: var(--mg-10);
}
.questionArea .explanationBtnArea .btnArea .btn.on {
   background-color: var(--color-green-hover);
}
.questionArea .explanationBtnArea .btnArea .btn img {
   margin-right: var(--mg-10);
}
.questionArea .explanationBtnArea .btnArea .btn.yellow {
   background-color: var(--color-gray400);
}
.questionArea .explanationBtnArea .btnArea .btn.yellow span {
   color: var(--color-dark);
}
.questionArea .explanationBtnArea .btnArea .btn.yellow:hover,
.questionArea .explanationBtnArea .btnArea .btn.yellow.on {
   background-color: var(--color-yellow);
}

.excelArea {
   z-index: -1;
   position: absolute;
   top: 0;
   left: 0;
   display: none;
   flex-direction: column;
   width: 100%;
   height: 100%;
}
.excelArea.on {
   display: block;
}
.excelArea .excelHeader {
   width: 100%;
   height: 30px;
   background: url("/public/images/excel-header.jpg") no-repeat center;
}
.excelArea .excelContent {
   width: 100%;
   height: 100%;
   background: url("/public/images/excel-content.jpg") repeat top center;
}

#sub-content,
#page-wrap {
   position: relative;
   padding: 190px 0 150px;
}
#page-wrap {
   border-bottom: var(--border-light2);
}
.page-titarea {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: var(--mg-25);
}
.page-titarea .tit-wrap h2 {
   margin-bottom: 12px;
}
.imgarea img {
   width: 100%;
}
.sub-txt {
   margin-top: 1.875rem;
   text-align: center;
   color: #5a5a5a;
   font-size: 1.063rem;
}
.page-tit-wrap {
   width: 100%;
   text-align: center;
   margin-bottom: var(--mg-25);
}

.tit-en {
   font-size: var(--font-15);
   color: var(--color-brown);
   font-weight: var(--fw-700);
   font-family: var(--font-en);
}
.tit-main {
   font-family: var(--font-pretty);
   font-size: var(--font-30);
}

.txt-small {
   font-size: var(--font-15);
   font-weight: var(--fw-300);
   line-height: 1.4;
}
.txt-basic {
   font-weight: var(--fw-300);
}
.txt-basic-2 {
   font-size: var(--font-15);
   font-weight: var(--fw-500);
}

.tit-small {
   font-size: var(--font-18);
   font-weight: var(--fw-700);
}
.tit-basic {
   font-size: var(--font-25);
   font-weight: var(--fw-700);
}
.tit-basic-fm {
   font-size: var(--font-25);
   font-weight: var(--fw-500);
}

.tit-large {
   font-size: var(--font-30);
   font-weight: var(--fw-300);
}

.box-small {
   background-color: var(--color-white);
   padding: var(--mg-40) var(--mg-40) var(--mg-45);
}
/* 
.border-wrap {
    border-bottom: var(--border-light2)
} */
.sort-wrap {
   display: flex;
   justify-content: flex-end;
   align-items: center;
}
.sort-wrap button {
   font-size: var(--font-15);
   color: var(--color-dark);
}
.half-line {
   position: relative;
   margin-right: 21px;
}
.half-line::after {
   content: "";
   position: absolute;
   right: -11px;
   top: 2px;
   width: 1px;
   height: 15px;
   background-color: var(--color-gray500);
}

.br-none {
   display: none;
}
.w100 {
   width: 100%;
}
.bt-basic {
   border-top: var(--border-light);
}
.color-orange {
   color: var(--color-orange);
}

.use-color {
   color: var(--color-orange);
}

.mb-50 {
   margin-bottom: var(--mg-50);
}

.mb-25 {
   margin-bottom: var(--mg-25);
}
.mb-20 {
   margin-bottom: var(--mg-20);
}
.mb-10 {
   margin-bottom: var(--mg-10);
}
.mt-25 {
   margin-top: var(--mg-25);
}
.mt-10 {
   margin-top: var(--mg-10);
}
.mr-10 {
   margin-right: var(--mg-10);
}

.pd-30 {
   padding: var(--pd-30);
}
.plr-30 {
   padding: var(--pd-lr-30);
}
.ptm-30 {
   padding: var(--pd-tm-30);
}
.plr-40 {
   padding: var(--pd-lr-40);
}
.pb-45 {
   padding-bottom: var(--mg-45);
}
.popup-notice {
   border-top: var(--color-gray400);
   padding-top: var(--mg-25);
}
.dot-list li {
   font-size: var(--font-15);
   margin-bottom: var(--mg-5);
   position: relative;
   padding-left: 7px;
   color: var(--color-dark);
}
.dot-list li::before {
   content: "";
   width: 2px;
   height: 2px;
   background-color: var(--color-dark);
   display: block;
   position: absolute;
   left: 0;
   top: 8px;
}
.dot-list li:last-child {
   margin-bottom: 0;
}
/* 쇼핑몰 모달 팝업*/
.shop-popup .dia-wrap {
   padding: var(--mg-60) 0 var(--mg-45);
}
.shop-popup .dialog-head {
   justify-content: center;
}
.shop-popup button.action {
   position: absolute;
   right: var(--mg-35);
   top: var(--mg-25);
}
.shop-popup .dia-wrap-inner {
   padding: 0 var(--mg-35);
}
.shop-popup .previous {
   position: absolute;
   left: var(--mg-35);
   top: var(--mg-25);
}
/* ==================== 레이아웃, 디자인 공통 미디어쿼리 */
/* 레이아웃, 디자인 미디어쿼리 1200px 이하 */
@media all and (max-width: 1200px) {
   .bgArea {
      padding: var(--mg-30);
   }
   .mSection {
      padding: var(--mg-60) 0;
   }
   .titArea {
      margin-bottom: var(--mg-25);
   }
   .titArea p {
      margin-top: var(--mg-25);
   }
   .tabArea {
      margin-top: var(--mg-15);
   }
   .tabArea li {
      height: 35px;
      padding: 0 var(--mg-15);
   }
   .testFormArea .formRow {
      margin-bottom: var(--mg-25);
   }
   .testFormArea .boldTxt18 {
      margin-bottom: var(--mg-15);
   }
   .testFormArea .formSelect {
      height: 50px;
   }
   .testFormArea ul.modeSelect {
      gap: 0 var(--mg-15);
   }
   .testFormArea .formLabel {
      height: 50px;
      padding: 0 var(--mg-15);
      font-size: var(--font-15);
   }
   .testFormArea .formLabel span {
      width: 22px;
      height: 22px;
   }
   .testFormArea .formLabel .svg {
      width: 22px;
   }
   .selectMultiple > div {
      min-height: 50px;
      padding: var(--mg-10) var(--mg-15);
      font-size: var(--font-15);
   }
   .selectMultiple > div .arrow {
      right: 15px;
      width: 16px;
      background-size: 16px auto;
   }

   .selectMultiple > div span {
      top: 15.5px;
      left: 15px;
      font-size: var(--font-15);
   }
   .selectMultiple > div a {
      line-height: 26px;
   }
   .selectMultiple > div a em {
      font-size: var(--font-15);
   }
   .selectMultiple > ul {
      font-size: 15px;
   }
   .selectMultiple > ul li {
      padding: var(--mg-15);
   }

   .testFormArea ul.achievementCheck {
      height: 50px;
      padding: 0 var(--mg-15);
   }
   .testFormArea ul.achievementCheck li {
      margin-right: var(--mg-15);
   }
   .testFormArea .formInput {
      width: calc(50% - 7.5px);
      height: 50px;
      padding: 0 var(--mg-15);
      font-size: var(--font-15);
   }
   .testFormArea .formInput::placeholder {
      font-size: var(--font-15);
   }

   .btnArea {
      margin-top: var(--mg-40);
   }
   .commonComplete .btnArea {
      margin-top: var(--mg-30);
   }
   .btnArea .btn {
      height: 55px;
      padding: 0 var(--mg-30);
   }

   .utillBtnArea .btn {
      height: 40px;
      margin: 0 var(--mg-5);
      padding: 0 var(--mg-20);
   }

   .tit35 {
      font-size: var(--font-30);
   }
   .boldTxt25 {
      font-size: var(--font-20);
   }
   .boldTxt20 {
      font-size: var(--font-18);
   }
   .boldTxt18 {
      font-size: var(--font-16);
   }
   .boldTxt16 {
      font-size: var(--font-15);
   }
   .lightTxt18 {
      font-size: var(--font-16);
   }
   .lightTxt16 {
      font-size: var(--font-15);
   }
   .lightTxt14 {
      font-size: var(--font-13);
   }

   #subContent {
      padding: var(--mg-60) 0 var(--mg-80) 0;
   }

   .timerArea {
      margin: var(--mg-40) auto var(--mg-40) auto;
   }
   .timerArea #container {
      padding: var(--mg-20) var(--mg-60);
   }
   .timerArea .time {
      max-width: 90px;
      font-size: var(--mg-50);
   }
   .timerArea .funtionBtnArea {
      margin-top: var(--mg-15);
   }
   .timerArea .funtionBtnArea .btn {
      width: 54px;
      height: 30px;
      margin-right: var(--mg-15);
   }
   .timerArea .time-group {
      margin-right: var(--mg-25);
   }

   .questionArea {
      margin-bottom: var(--mg-40);
   }
   .questionArea .row1 {
      margin-bottom: var(--mg-30);
   }
   .questionArea .row1.w50 {
      gap: 0 var(--mg-30);
   }
   .questionArea .questionTxtArea,
   .questionArea .questionImgArea,
   .questionArea .textArea,
   .questionArea .answerArea,
   .questionArea .explanationTxtArea,
   .questionArea .explanationImgArea {
      padding: var(--mg-25);
   }
   .questionArea .textArea {
      height: 200px;
   }
   .questionArea .textArea::placeholder {
      font-size: var(--font-16);
   }
   .questionArea .answerWriteArea .btnArea {
      margin-top: var(--mg-15);
   }
   .questionArea .answerBtn {
      height: 50px;
      padding: 0 var(--mg-30);
   }
   .questionArea .answerBtn span {
      margin-right: var(--mg-10);
   }
   .questionArea .answerArea {
      margin-top: var(--mg-15);
   }
   .questionArea .leftContent {
      margin-right: var(--mg-30);
      padding-right: var(--mg-30);
   }
   .questionArea .qusetionNumbersTit {
      margin-bottom: var(--mg-15);
   }
   .questionArea .qusetionNumbers button {
      width: 35px;
      height: 35px;
   }
   .questionArea .qusetionNumbersArea .btnArea .btn {
      height: 50px;
   }
   .questionArea .achievement .btn {
      width: 35px;
      height: 35px;
   }
   .questionArea .explanationBtnArea .btnArea {
      margin-top: var(--mg-15);
   }
   .questionArea .explanationBtnArea .btnArea .btn {
      height: 50px;
   }
}
@media all and (max-width: 1000px) {
   #sub-content,
   #page-wrap {
      padding: 190px 0 130px;
   }
}
/* 레이아웃, 디자인 미디어쿼리 768px 이하 */
@media all and (max-width: 768px) {
   .layout {
      width: 94%;
   }
   .bgArea {
      padding: var(--mg-20);
   }
   .mSection {
      padding: var(--mg-40) 0;
   }
   .titArea {
      margin-bottom: var(--mg-20);
   }
   .titArea p {
      margin-top: var(--mg-20);
   }
   .tabArea {
      margin-top: var(--mg-10);
   }
   .tabArea li {
      height: 30px;
   }
   .testFormArea .formRow {
      margin-bottom: var(--mg-20);
   }
   .testFormArea .boldTxt18 {
      margin-bottom: var(--mg-10);
   }
   .testFormArea .formSelect {
      height: 45px;
   }
   .testFormArea ul.modeSelect {
      gap: 0 var(--mg-10);
   }
   .testFormArea .formLabel {
      height: 45px;
      padding: 0 var(--mg-10);
      font-size: var(--font-14);
   }
   .testFormArea .formLabel span {
      width: 20px;
      height: 20px;
      margin-right: var(--mg-5);
   }
   .testFormArea .formLabel .svg {
      width: 20px;
   }
   .selectMultiple > div {
      min-height: 45px;
      padding: var(--mg-10) var(--mg-10);
      font-size: var(--font-14);
   }
   .selectMultiple > div .arrow {
      right: 10px;
      width: 14px;
      background-size: 14px auto;
   }

   .selectMultiple > div span {
      top: 12px;
      left: 10px;
      font-size: var(--font-14);
   }
   .selectMultiple > div a {
      line-height: 24px;
   }
   .selectMultiple > div a em {
      font-size: var(--font-14);
   }
   .selectMultiple > ul {
      font-size: 14px;
   }
   .selectMultiple > ul li {
      padding: var(--mg-10);
   }

   .testFormArea ul.achievementCheck {
      height: 45px;
      padding: 0 var(--mg-10);
   }
   .testFormArea ul.achievementCheck li {
      margin-right: var(--mg-10);
   }
   .testFormArea .formInput {
      width: calc(50% - 5px);
      height: 45px;
      padding: 0 var(--mg-10);
      font-size: var(--font-14);
   }
   .testFormArea .formInput::placeholder {
      font-size: var(--font-14);
   }

   .btnArea {
      margin-top: var(--mg-30);
   }
   .commonComplete .btnArea {
      margin-top: var(--mg-20);
   }
   .btnArea .btn {
      height: 50px;
      padding: 0 var(--mg-20);
   }

   .utillBtnArea {
      flex-wrap: wrap;
      align-items: flex-start;
   }
   .utillBtnArea .btn {
      height: 35px;
      padding: 0 var(--mg-15);
   }
   .utillBtnArea .btn:nth-of-type(1),
   .utillBtnArea .btn:nth-of-type(2) {
      margin-bottom: var(--mg-10);
   }

   .tit35 {
      font-size: var(--font-25);
   }
   .boldTxt25 {
      font-size: var(--font-18);
   }
   .boldTxt20 {
      font-size: var(--font-16);
   }
   .boldTxt18 {
      font-size: var(--font-15);
   }
   .boldTxt16 {
      font-size: var(--font-14);
   }
   .lightTxt18 {
      font-size: var(--font-15);
   }
   .lightTxt16 {
      font-size: var(--font-14);
   }
   .lightTxt14 {
      font-size: var(--font-12);
   }

   #subContent {
      padding: var(--mg-40) 0 var(--mg-60) 0;
   }

   .contentWrap {
      flex-direction: column;
   }

   .timerArea {
      margin: var(--mg-30) auto var(--mg-30) auto;
   }
   .timerArea #container {
      padding: var(--mg-20) var(--mg-60);
   }
   .timerArea .time {
      max-width: 90px;
      font-size: var(--mg-30);
   }
   .timerArea .funtionBtnArea {
      margin-top: var(--mg-10);
   }
   .timerArea .funtionBtnArea .btn {
      width: 44px;
      height: 25px;
      margin-right: var(--mg-10);
   }
   .timerArea .time-group {
      margin-right: var(--mg-20);
   }
   .timerArea .label {
      top: -5px;
   }

   .questionArea {
      margin-bottom: var(--mg-30);
   }
   .questionArea .row1 {
      margin-bottom: var(--mg-20);
   }
   .questionArea .row1.w50 {
      grid-template-columns: 1fr;
      gap: var(--mg-20) 0;
   }
   .questionArea .questionTxtArea,
   .questionArea .questionImgArea,
   .questionArea .textArea,
   .questionArea .answerArea,
   .questionArea .explanationTxtArea,
   .questionArea .explanationImgArea {
      padding: var(--mg-20);
   }
   .questionArea .textArea {
      height: 150px;
   }
   .questionArea .textArea::placeholder {
      font-size: var(--font-15);
   }
   .questionArea .answerWriteArea .btnArea {
      margin-top: var(--mg-10);
   }
   .questionArea .answerBtn {
      height: 45px;
      padding: 0 var(--mg-20);
   }
   .questionArea .answerArea {
      margin-top: var(--mg-10);
   }
   .questionArea .leftContent {
      width: 100%;
      margin-bottom: var(--mg-20);
      padding-bottom: var(--mg-20);
      border-bottom: 1px solid var(--color-gray400);
      border-right: 0;
      margin-right: 0;
      padding-right: 0;
   }
   .questionArea .qusetionNumbersTit {
      margin-bottom: var(--mg-10);
   }
   .questionArea .qusetionNumbers button {
      width: 30px;
      height: 30px;
   }
   .questionArea .qusetionNumbersArea .btnArea {
      flex-wrap: wrap;
   }
   .questionArea .qusetionNumbersArea .btnArea .btn {
      height: 45px;
   }
   .questionArea .achievement .btn {
      width: 30px;
      height: 30px;
   }
   .questionArea .explanationBtnArea .btnArea {
      margin-top: var(--mg-10);
   }
   .questionArea .explanationBtnArea .btnArea .btn {
      height: 45px;
   }
}
@media all and (max-width: 640px) {
   #sub-content,
   #page-wrap {
      padding: 150px 0 80px;
   }
   .page-titarea {
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
   }
   .page-titarea .tit-wrap h2 {
      margin-bottom: 8px;
   }
   .page-titarea .tit-warp,
   .page-titarea .breadcrumb {
      width: 100%;
   }
   .page-titarea .breadcrumb {
      margin-top: var(--mg-15);
   }
   .tit-basic {
      font-size: var(--font-23);
   }
   .tit-basic-fm {
      font-size: var(--font-20);
   }

   .breadcrumb li {
      font-size: var(--font-14);
   }
   .page-tit-wrap {
      margin-bottom: var(--mg-20);
   }
   .br-none {
      display: block;
   }
   .box-small {
      padding: var(--mg-30) var(--mg-25) var(--mg-30);
   }
   .mb-50 {
      margin-bottom: var(--mg-30);
   }
   .sort-wrap button {
      font-size: var(--font-14);
   }
   .half-line {
      margin-right: 16px;
   }
   .half-line::after {
      right: -9px;
      height: 13px;
      top: 1px;
   }

   .shop-popup button.action {
      right: var(--mg-20);
      top: var(--mg-15);
   }
   .shop-popup button.previous {
      left: var(--mg-20);
      top: var(--mg-15);
   }
   .shop-popup .dia-wrap-inner {
      padding: 0 var(--mg-20);
   }
   .shop-popup .dia-wrap-inquiry {
      padding: var(--mg-40) 0 var(--mg-45);
   }
}
@media all and (max-width: 387px) {
   .questionArea .qusetionNumbersArea .btnArea .btn:last-of-type {
      margin-top: var(--mg-10);
   }
}

/* ======================== 네비게이션 */
.breadcrumb {
   display: flex;
   align-items: center;
}
.breadcrumb li {
   margin: 0 10px;
   display: flex;
   align-items: center;
   font-size: var(--font-14);
   color: var(--color-gray);
   position: relative;
}
.breadcrumb li:last-child {
   margin-right: 0;
}
.breadcrumb li:not(:last-child)::after {
   content: "";
   position: absolute;
   width: 4px;
   height: 7px;
   right: -10px;
   top: 6px;
   display: block;
   background: center / contain url("/public/images/icon-next.svg") no-repeat;
}
.breadcrumb li .home {
   width: 16px;
   height: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* ======================== 페이징 */
.pagination {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: var(--mg-50);
}
.pagination ul {
   display: flex;
   justify-content: center;
   align-items: center;
}
.pagination li {
   color: var(--color-gray);
   margin: 0 6px;
   display: flex;
   justify-content: center;
   align-items: center;
}
.pagination li a {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: var(--font-15);
}
.pagination li.active {
   color: var(--color-dark);
}
.pagination .nav-label img {
   height: 10px;
}
.pagination .nav-label-prev {
   margin-right: var(--mg-10);
}
.pagination .nav-label-next {
   margin-left: var(--mg-10);
}
/* 페이징 미디어쿼리 */
@media all and (max-width: 640px) {
   .pagination {
      margin-top: var(--mg-40);
   }
   .pagination li a {
      font-size: var(--font-14);
   }
}

/* ======================== 버튼 스타일 */
.btn-area {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   margin-top: var(--mg-40);
}
.btn-more {
   width: 54px;
   height: var(--mg-30);
   border: 1px solid var(--color-gray400);
   border-radius: 15px;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: 0.25s ease;
   font-weight: var(--fw-700);
   font-size: var(--font-13);
   font-family: var(--font-en);
   border-radius: 5px;
}
.btn-more:hover {
   border-color: var(--color-dark);
   color: var(--color-dark);
}
.btn-basic {
   width: 104px;
   height: var(--mg-45);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: var(--font-15);
   font-weight: var(--fw-700);
   background-color: var(--color-green);
   color: var(--color-white);
   border: 1px solid var(--color-green);
   border-radius: 5px;
}
.btn-basic.ograng {
   background-color: #aa8552;
}
.btn-basic-wide {
   width: 100% !important;
}
.btn-basic-line {
   width: 104px;
   height: var(--mg-45);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: var(--font-15);
   font-weight: var(--fw-700);
   background-color: transparent;
   color: var(--color-dark);
   border: 1px solid var(--color-gray400);
   border-radius: 5px;
}
.btn-area.double a,
.btn-area.double button {
   margin: 0 var(--mg-5);
}
.btn-mini-line {
   width: 52px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: var(--font-13);
   font-weight: var(--fw-500);
   background-color: transparent;
   color: var(--color-dark);
   border: 1px solid var(--color-gray600);
   border-radius: 5px;
}
.btn-black {
   width: 100%;
   height: 42px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: var(--color-dark);
   border: 1px solid var(--color-dark);
   color: var(--color-white);
   border-radius: 5px;
}
.btn-pass {
   width: 100%;
   height: 42px;
   font-size: var(--font-15);
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: var(--color-gray200);
   border: 1px solid var(--color-gray400);
   color: var(--color-dark);
   font-weight: var(--fw-700);
   border-radius: 5px;
}
.btn-basic:hover,
.btn-brown:hover {
   background-color: var(--color-green-hover);
   color: var(--color-white);
   border: 1px solid var(--color-green-hover);
}
.btn-basic-line:hover,
.btn-black:hover {
   background-color: var(--color-green);
   color: var(--color-white);
   border: 1px solid var(--color-green);
}
.btn-pass:hover {
   color: var(--color-white);
   background-color: var(--color-green);
   border: 1px solid var(--color-green);
}
.btn-mini-line:hover {
   color: var(--color-white);
   border: 1px solid var(--color-green);
   background-color: var(--color-green);
}
/* ================ 버튼 스타일 미디어쿼리 */
@media all and (max-width: 640px) {
   .btn-more {
      width: 48px;
      height: 25px;
   }
   .btn-basic,
   .btn-basic-line {
      width: 90px;
      font-size: var(--font-14);
      height: var(--mg-40);
   }
   .btn-area {
      margin-top: var(--mg-30);
   }
}

/* ======================== 메인 */
/* 메인 배너 */
.mainVisual {
   position: relative;
   width: 100%;
}
.mainVisual .swiper-slide img {
   width: 100%;
}
.mainVisual .swiper-slide img.m {
   display: none;
}
.mainVisual .swiper-pagination-bullet {
   width: 40px;
   height: 6px;
   border-radius: 3px;
   background-color: var(--color-white);
   opacity: 0.5;
}
.mainVisual .swiper-pagination-bullet-active {
   opacity: 1;
}

/* 메인 시험지 */
.mSection2 .tabCont {
   display: none;
}
.mSection2 .formArea {
   max-width: 640px;
   margin: 0 auto;
}

/* 메인 교재구매 */
.mSection3 {
   background-color: var(--color-gray200);
}
.productList .mypage-nav {
   margin-bottom: var(--mg-40);
}
.productList .mypage-nav li {
   width: 25%;
}
.productList .mypage-nav li:nth-of-type(2) a,
.productList .mypage-nav li:nth-of-type(3) a,
.productList .mypage-nav li:nth-of-type(4) a {
   border-radius: 0;
}
.productList .mypage-nav li:nth-of-type(5) a {
   border-radius: 0 10px 10px 0;
}
.productListArea {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   gap: var(--mg-40) var(--mg-20);
}
.productListArea .item .imgArea {
   overflow: hidden;
   position: relative;
   padding-top: calc(80% / 224 * 319);
}
.productListArea .item .imgArea img {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top;
   transition: var(--transition);
}
.productListArea .item a:hover .imgArea img {
   transform: scale(1.1);
}
.productListArea .item .txtArea {
   margin-top: var(--mg-15);
}
.productListArea .item .priceArea {
   display: flex;
   align-items: flex-end;
   margin-top: var(--mg-10);
}
.productListArea .item .priceArea .cost {
   margin-right: var(--mg-10);
   font-size: var(--font-20);
   font-weight: var(--fw-700);
}
.productListArea .item .priceArea .discount {
   text-decoration: line-through;
   color: var(--color-gray600);
   font-size: var(--font-14);
   font-weight: var(--fw-300);
}
.mSection3 .btnArea {
   margin-top: var(--mg-30);
}
/* 메인 미디어쿼리 1200px 이하*/
@media all and (max-width: 1200px) {
   /* 메인 배너 */
   .mainVisual .swiper-pagination-bullet {
      width: 40px;
      height: 6px;
      border-radius: 3px;
      background-color: var(--color-white);
      opacity: 0.5;
   }
   .mainVisual .swiper-pagination-bullet-active {
      opacity: 1;
   }

   /* 메인 교재구매 */
   .productListArea {
      grid-template-columns: 1fr 1fr 1fr 1fr;
   }
   .productListArea .item .priceArea .cost {
      font-size: var(--font-18);
   }
   .productListArea .item .priceArea .discount {
      font-size: var(--font-13);
   }
}
/* 메인 미디어쿼리 768px 이하*/
@media all and (max-width: 768px) {
   .mainVisual .swiper-slide img.pc {
      display: none;
   }
   .mainVisual .swiper-slide img.m {
      display: block;
   }

   /* 메인 교재구매 */
   .productListArea {
      grid-template-columns: 1fr 1fr 1fr;
      gap: var(--mg-30) var(--mg-15);
   }
   .productListArea .item .txtArea {
      margin-top: var(--mg-10);
   }
   .productListArea .item .priceArea {
      margin-top: var(--mg-5);
   }
   .productListArea .item .priceArea .cost {
      font-size: var(--font-16);
   }
   .productListArea .item .priceArea .discount {
      font-size: var(--font-12);
   }
}
/* 메인 미디어쿼리 414px 이하*/
@media all and (max-width: 414px) {
   /* 메인 교재구매 */
   .productListArea {
      grid-template-columns: 1fr 1fr;
      gap: var(--mg-20) var(--mg-10);
   }
}

/* 오답노트 */
#subContent.wanotes .selectArea {
   max-width: 580px;
   margin: var(--mg-60) auto;
}
#subContent.wanotes .selectArea form {
   width: 100%;
}
#subContent.wanotes .selectArea .formSelect {
   width: 100%;
   height: 55px;
   margin-right: var(--mg-20);
   padding: 0 var(--mg-20);
   border: 1px solid var(--color-gray400);
   border-radius: 5px;
}
#somedialog.report .dia-wrap {
   height: 40%;
   padding: var(--mg-40);
}
#somedialog.report .dialog-head {
   justify-content: center;
}
#somedialog.report .dialog-head h2 {
   font-size: var(--font-20);
   font-weight: var(--fw-700);
}
#somedialog.report .dialog-head .close {
   top: 0;
   right: 0;
}
#somedialog.report .dialog-content {
   padding: var(--mg-40);
}