/* .timer{position: fixed; width: 12.2rem; height: 14.1rem; top: 10rem; right: 3rem; display: flex; align-items: center; justify-content: center; background-image: url('/images/sub/timer.png'); background-size: cover; padding: 3.2rem 1.3rem 1.3rem; z-index: 9999;} */
.timer{position: fixed; width: 12.9rem; height: 15rem; top: 10rem; right: 3rem; display: flex; align-items: center; justify-content: center;
    background-image: url('/images/sub/timer.svg'); background-size: contain; background-repeat: no-repeat; padding: 3.2rem 1.3rem 1.3rem; z-index: 9999;}
.timer .in{display: flex; gap: 0.5rem; align-items: center; justify-content: center; flex-direction: column; text-align: center;}
.timer .in .kr{font-size: 1.5rem; line-height: 1; color: #333333; font-weight: 500;}
.timer .in .date{font-size: 1.9rem; line-height: 1; color: var(--point2); font-weight: 550;}

.btn{position: relative; width: 27rem; height: 6.5rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.3rem; line-height: 2.4rem; color: #fff; font-weight: bold;
    background-color: var(--point2); border-radius: 0.5rem; box-shadow: 0 0 1rem rgba(0,0,0,0.1);}
.btn.mini{width: 27rem; height: 4rem; font-size: 1.8rem; line-height: 2.4rem; background-color: var(--point3);}

/* 0101 intro */
#intro{background-color: #fafbfc; padding: 8rem 0 12rem;}
#intro .inner{text-align: center; background-color: #fff; border: 1px solid #f1f2f2; border-radius: 5rem; padding: 8rem 2rem; margin: 0 auto;}
#intro .inner .round{display: inline-block; font-size: 2.3rem; line-height: 1; color: #fff; padding: 1.5rem 3rem; background-color: var(--point); border-radius: 3rem; }
#intro .inner .round .count{font-weight: 550;}
#intro .inner .title{font-size: 4.3rem; line-height: 1.25; color: #333333; font-weight: bold; margin-top: 4.5rem;}
#intro .inner .sub{font-size: 2rem; line-height: 1.5; color: #666666; margin-top: 2rem;}
#intro .inner .tip{max-width: 800px; display: block; font-size: 2.1rem; line-height: 3rem; color: #333333; background-color: #eceef1; padding: 1.5rem 1rem; margin: 8rem auto 0;}
#intro .inner .btn{ margin: 7rem auto 0;}
#intro .inner .btn span{position: relative; padding-right: 4rem;}
#intro .inner .btn span::after{position: absolute; content: ''; top: 0; right: 0; width: 2.5rem; height: 2.4rem; background-image: url('/images/sub/icon_start.png'); background-size: cover;}

/* 0101 exam_contents */
.exam_article{background-color: #f3f5f8; border-radius: 1.5rem; overflow: hidden;}
.exam_article .head::after{position: absolute; content: ''; width: 4rem; height: 4rem; top: calc(50% - 2rem); right: 2rem; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1; color: var(--point3); font-weight: bold; background-color: transparent; border-radius: 50%;}
.exam_article.answer .head::after{content: '정답'; color: var(--point3); background-color: #fff;}
.exam_article.wrong .head{background-color: #ffdede;}
.exam_article.wrong .head::after{content: '오답'; color: var(--point4); background-color: #fff;}
.exam_article + .exam_article{margin-top: 5rem;}
.exam_article .head{position: relative;display: flex;background-color: #cee9fc;}
.exam_article .head .num{width: 6rem;display: flex;align-items: center;justify-content: center;font-size: 2.2rem;line-height: 1;color: #ffffff;font-weight: bold;background-color: var(--point3);}
.exam_article .head .title{width: calc(100% - 6rem);font-size: 2rem;line-height: 1.5;color: #1a1c1e;font-weight: 550;/* background-color: var(--point3); */padding: 1.5rem 0 1.5rem 6rem;}

.exam_article .body{background-color: #f3f5f8; padding: 5rem;}
.exam_article .head .num{width: 6rem; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; line-height: 1; color: #ffffff; font-weight: bold; background-color: var(--point3); }
.exam_article .head .title{width: calc(100% - 6rem); font-size: 2rem; line-height: 1.5; color: #1a1c1e; font-weight: 550; /* background-color: var(--point3);  */padding: 1.5rem 6rem 1.5rem 6rem; }


.exam_article .body .quizBox{background-color: #fff; border-radius: 1rem; box-shadow: 0.5rem 0 1.5rem rgba(0,0,0,0.05); padding: 4rem 2rem 4rem 6rem; margin: 0 auto 4rem; position: relative; z-index:2;}

.exam_article .body .quiz-description{margin:-5rem -5rem 8rem -5rem; margin-bottom:8rem; background-color: #ededed; border-radius: 0 0 1rem 1rem; position: relative;}
.exam_article .body .quizBox+.quiz-description{margin:-4rem 0 8rem;}
.exam_article .body .quiz-description .quiz-description-in{padding:4rem 2rem 4rem 6rem; display:none;}

.exam_article .body .quiz-description .btn-description{width:15rem; height:3.4rem; margin-left:-7.5rem; background-color: #fff; border:1px solid #00ccbe; border-top:none; font-weight: 500; font-size:1.6rem; line-height:1; color: #00ccbe; position: absolute; left:50%; top:100%; z-index:3; border-radius:0 0 5px 5px; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center; box-shadow:2px 2px 2px rgba(0,0,0,0.1); transition: all 0.3s ease;}
.exam_article .body .quiz-description .btn-description:after{content: "↓"; padding:0 0.4rem; transition: all 0.3s ease;}

.exam_article .body .quiz-description.open .btn-description{background-color: #ededed; border-color:#ededed; color: #000;}
.exam_article .body .quiz-description.open .btn-description:after{transform:rotate(180deg);}

.exam_article .body .exam_article_ul{ }
.exam_article .body .exam_article_ul li{width: 100%; font-size: 0; line-height: 0;}
.exam_article .body .exam_article_ul li + li{margin-top: 2rem;}
.exam_article .body .exam_article_ul li span{position: relative; display: block; padding-left: 2.5rem;}
/* .exam_article .body .exam_article_ul li span::before{position: absolute; content: ''; left: 0; top: 0; font-size: 1.8rem; line-height: 2.2rem; color: #4d5357; font-weight: normal;} */
.exam_article .body .exam_article_ul li span::before{position: absolute; content: ''; left: 0; top: 0.1rem; width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; text-align: center; border-radius: 50%; border: 1px solid #4d5357; font-weight: 600; }
/* .exam_article .body .exam_article_ul li:nth-of-type(1) span::before{content: '① ';} */
/* .exam_article .body .exam_article_ul li:nth-of-type(2) span::before{content: '② ';} */
/* .exam_article .body .exam_article_ul li:nth-of-type(3) span::before{content: '③ ';} */
/* .exam_article .body .exam_article_ul li:nth-of-type(4) span::before{content: '④ ';} */
/* .exam_article .body .exam_article_ul li:nth-of-type(5) span::before{content: '⑤ ';} */
.exam_article .body .exam_article_ul li:nth-of-type(1) span::before{content: '1 ';}
.exam_article .body .exam_article_ul li:nth-of-type(2) span::before{content: '2 ';}
.exam_article .body .exam_article_ul li:nth-of-type(3) span::before{content: '3 ';}
.exam_article .body .exam_article_ul li:nth-of-type(4) span::before{content: '4 ';}
.exam_article .body .exam_article_ul li:nth-of-type(5) span::before{content: '5 ';}

.exam_footer{text-align: center; margin-top: 8rem;}
.exam_footer .btn{background-color: var(--point3); margin: 0 auto;}
.exam_footer .btn.next span{position: relative;}
.exam_footer .btn.next span::after{position: absolute; content: ''; width: 2.1rem; height: 1.5rem; top: calc(50% - 0.75rem); right: -4rem; background-image: url('/images/sub/icon_arrow_right.png'); background-size: cover;}
.exam_footer .exam_footer_lastTip{font-size: 2.1rem; line-height: 1.5; color: #333333; /* font-weight: lighter; */ margin: 5rem auto 0;}
.exam_footer .exam_footer_lastTip .d60225{color: #d60225;}

.checkIn{position: relative; display: inline-block; vertical-align: top;}
.checkIn.answer::before{position: absolute;content: '✔';top: 0; left: -2rem;font-size: 2rem;line-height: 2.2rem;color: red;}

.checkIn input[type=radio]{display: none; position: absolute; left:0; top:0;}
.checkIn input[type=radio]+label{position: relative; display: inline-block; vertical-align: middle; padding-left: 2.75rem; font-size: 1.8rem; line-height: 2.2rem; color: #4d5357; font-weight: 500; cursor: pointer;}
.checkIn input[type=radio]+label:before,
.checkIn input[type=radio]+label:after{position:absolute; left: 0; top:0;  width: 2.2rem; height: 2.2rem; display: inline-block; vertical-align: top; content: ""; font-size:0; line-height:0; box-sizing: border-box; background-color: #fff; border: 0.3rem solid #b3bec2;}

.checkIn input[type=radio]+label:before{border-radius: 50%;}
.checkIn input[type=radio]+label:after{width: 1rem; height: 1rem; left: calc(1.1rem - 0.5rem); top: calc(1.1rem - 0.5rem); background-color: transparent; border-radius: 50%; border: none; transition: all ease 0.3s;}
.checkIn input[type=radio]:checked+label:before{border-color:var(--point2);}
.checkIn input[type=radio]:checked+label:after{opacity: 1; background-color: var(--point2);}


/* 1101 mypage */
#myPageTab{display: flex; margin: 0 auto 6rem;}
#myPageTab li{width: calc(25%); display: flex;}
#myPageTab li a{width: 100%; height: auto; display: flex; align-items: center; justify-content: center; font-size: 2rem; line-height: 1; color: #333; font-weight: 500; text-align: center; background-color: #f3f5f8; border: 1px solid #ddd; border-right: none; padding: 2rem 0.5rem; transition: all ease 0.3s;}
#myPageTab li:last-child a{border-right: 1px solid #ddd;}
#myPageTab li:is(.active, :hover) a{color: #fff; font-weight: 550; background-color: var(--point); border-color: var(--point);}
/* #myPageTab li:is(.active, :hover) + li:hover a{border-left-color: #ddd;} */

/* 1102 myexam */
.myExamList{}
.myExamList + .myExamList{margin-top: 8rem;}
.myExamList > .title{font-size: 2.8rem; line-height: 1; color: #1b1b1b; font-weight: 550; margin-bottom: 4rem;}
.myExamList > .title span{display: inline-block; vertical-align: bottom; font-size: 2rem; line-height: 2.8rem;}

.myExamTableArea{position: relative;}
.myExamTableArea::before{position: absolute; content: ''; width: 100%; height: 3px; bottom: calc(100% - 2px); left: 0; background-color: #111;}
.myExamTableArea table{width: 100%; border-collapse: initial; background-color: #ddd;}
.myExamTableArea > table{width: 100%; }
.myExamTableArea table td{text-align: center; background-color: #fff;}
.myExamTableArea table thead td{font-size: 1.7rem; line-height: 2.5rem; color: #333333; font-weight: bold; background-color: #fafbfc; padding: 2rem 1rem;}

.myExamTableArea table tbody td{font-size: 1.6rem; line-height: 2rem; color: #666666; padding: 1rem;}

.myExamTableArea table tbody td a{font-size: 1.6rem; line-height: 2rem; color: #111; font-weight: 550; transition: all ease 0.3s;}
.myExamTableArea table tbody td a:hover{color: var(--point2); }
.myExamTableArea table tbody td.fail{color: #d60225; font-weight: 500;}
.myExamTableArea table tbody td.success{color: var(--point3); font-weight: 500;}

.myExamTableArea table tbody td.notPd{padding: 0;}
.myExamTableArea table tbody td.notPd table{border-collapse: initial;}

.myExamTableArea table tbody td.bgs{cursor: pointer;}
.myExamTableArea table tbody td.point,
.myExamTableArea table tbody td.point+td,
.myExamTableArea table tbody td.point+td+td,
.myExamTableArea table tbody td.point+td+td+td,
.myExamTableArea table tbody td.point+td+td+td+td{background-color: rgba(206,233,252,1);}

.myExamList .exam_contents{margin-top: 10rem;}
.myExamList .exam_contents > .title{font-size: 4rem; line-height: 1; color: #333333; font-weight: bold; text-align: center; margin-bottom: 4rem;}

.myExamList_check_footer{display: flex; justify-content: center; margin: 6rem auto 0;}

/* 1104 mydraw */
.mydrawArea{background-color: #f3f5f8; border-radius: 3rem; border: 1px solid #ddd; padding: 6rem 4rem; margin: 0 auto 6rem; overflow: hidden;}
.mydrawArea > ul{}
.mydrawArea > ul li{position: relative; font-size: 1.8rem; line-height: 2.6rem; color: #333; font-weight: 500; padding-left: 1rem;}
.mydrawArea > ul li + li{margin-top: 0.5rem;}
.mydrawArea > ul li::before{position: absolute; content: ''; width: 0.5rem; height: 0.5rem; top: calc(1.3rem - 0.25rem); left: 0; background-color: #333; border-radius: 50%;}

.mydrawbtn{display: flex; justify-content: center; margin: 6rem auto 0;}
.mydrawbtn .btn{background-color: var(--point3);}


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

}
@media only screen and (max-width : 1200px){


}
@media only screen and (max-width : 1024px){
    .exam_article .head .title{padding: 1.5rem 6rem 1.5rem 2rem;}
    .exam_article .body{padding: 4rem 2.5rem;}


}
@media only screen and (max-width : 840px){
	.exam_article .body .quiz-description{font-size:2rem;}

	.exam_article .body .quiz-description .btn-description{width:18rem; height:4rem; margin-left:-9rem; font-size:2rem;}
}
@media only screen and (max-width : 768px){
    .myExamTableArea{padding: 0 0 3rem; overflow-x: auto; overflow-y: hidden;}
    .myExamTableArea::-webkit-scrollbar{width: 100%; height: 3px;}/* 스크롤바의 너비 */
    .myExamTableArea::-webkit-scrollbar-thumb{height: 100%; background-color:var(--point); border-radius: 1rem;}  /* 스크롤바의 길이 & 색상 */
    .myExamTableArea::-webkit-scrollbar-track{background-color: rgba(0,0,0,0.1);}/*스크롤바 뒷 배경 색상*/
    .myExamTableArea table{min-width: 640px;}


}
@media only screen and (max-width : 640px){
    .exam_article .head .num{font-size: 20px;}
    .exam_article .head .title{font-size: 20px;}
    .exam_article .body .exam_article_ul li span{padding-left: 20px;}
    .exam_article .body .exam_article_ul li span::before{width: 16px; height: 16px; top: calc(12px - 8px); font-size: 16px; line-height: 1; box-sizing: border-box;}

    .checkIn.answer::before{top: 0; left: -14px;font-size: 18px;line-height: 24px;}
    .checkIn input[type=radio]+label{font-size: 16px; line-height: 24px;}

    .checkIn input[type=radio]+label{padding-left: 20px;}
    .checkIn input[type=radio]+label:before,
    .checkIn input[type=radio]+label:after{width: 16px; height: 16px; top: 4px; border: 1px solid #b3bec2;}
    .checkIn input[type=radio]+label:after{width: 8px; height: 8px; left: calc(8px - 4px); top: calc(8px); border: none;}




}
@media only screen and (max-width : 480px){

}