/* common */
* {box-sizing: border-box;}
body {width:100%; min-height:100%; font-size:16px; line-height:1.5;min-width:350px;}
body, header, footer, button, input, select, option {font-family: 'SUIT', sans-serif;}
body {background-image:url('/file/class/images/myclass/body_bg.jpg'); background-size: cover; background-repeat: no-repeat; background-position: top center; background-attachment: fixed;}
input[type="date"]::-webkit-calendar-picker-indicator {background:url('/class/images/calendar.gif')no-repeat right center;  cursor:pointer; }
input[type="datetime-local"] {}
input[type="datetime-local"]::-webkit-calendar-picker-indicator {background:url('/class/images/calendar.gif')no-repeat right center;  cursor:pointer; }
input[type='date']::before { content: attr(data-placeholder); width: 100%;}
input[type='date']:focus::before,
input[type='date']:valid::before {display: none;}
input {outline:none;}
select {outline:none;}
.pc-n {display:none;}
.caption {width:100%; background:#f6f6f6; font-size:18px; padding:10px; font-weight:600; margin-bottom:10px;}
.body_none {background-image:none;}
.clearfix::after {content: ""; display: table; clear: both;}
.mt3 {margin-top:3px !important;}
.mt5 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt20 {margin-top:20px !important;}
.mt30 {margin-top:30px !important;}
.mt40 {margin-top:40px !important;}
.mt50 {margin-top:50px !important;}
.mt60 {margin-top:60px !important;}
.mt100 {margin-top:100px !important;}
.mtb5 {margin:5px 0 !important;}
.mb10 {margin-bottom:10px !important;}
.mb20 {margin-bottom:20px !important;}
.mb30 {margin-bottom:30px !important;}
.mb40 {margin-bottom:40px !important;}
.ml10 {margin-left:10px !important;}
.ml20 {margin-left:20px !important;}
.ml40 {margin-left:40px !important;}
.mr5 {margin-right:5px !important;}
.w10 {width:100px;}
.t-c {text-align:center !important;}
.line13 {line-height:1.3;}
.ta-f {table-layout:fixed;}
.ta100 {width:100%;}
.hidden {visibility: hidden;}
.t-l {text-align:left !important;}
.sub_wrap{background:hsla(0, 100%, 100%, .8); width:100%; height:auto;}
.sub_content {padding:20px;}
.sub_dv {border-bottom:1px dotted #ddd; width:100%;}
.sub_dv > h2 {font-size:24px; font-weight:700; color:#333; padding-bottom:10px;}
.sub_dv > h4 {font-size: max(1.3rem, 1.3vw); font-weight:700; color:#fff; padding-bottom:5px;}
.sub_dv > span {color:#fff; padding-bottom:10px;}
.sub_select {height:35px; padding:0px 30px; font-size:15px; font-weight:500; color:#333; border:1px solid #ddd; outline:none;}
.overflow-x{ overflow-x:auto; width:100%;}
.t_thd {overflow-x:auto; width:100%; min-width:800px;}
.t_th01 {color:#333; font-size:15px; font-weight:700; width:110px; height:22px; line-height:22px; background:#f6f6f6; padding:6px 10px; text-align:center; vertical-align:middle;}
.t_th02 {color:#333; font-size:15px; font-weight:700; width:350px; height:22px; line-height:22px; background:#f6f6f6; border:1px solid #d1d1d1; padding:6px 10px; text-align:left; vertical-align:middle;}
.t_td02 {color:#333; font-size:15px; font-weight:500; padding:6px 8px; border:1px solid #d1d1d1; background:#fff; text-align:left;  vertical-align:middle;}
.t_td02 > textarea {outline:none; border:1px solid #ccc;}
.t_td02 input {outline:none; border:1px solid #ccc; padding:5px 2px;}
.t_td02 select {outline:none; border:1px solid #ccc; padding:5px 2px;}

.ver-m {vertical-align:middle;}
.ver-t {vertical-align:text-top;}
.subject_name {margin-top:10px;}
.subject_name > h1 {text-align:center; font-size:26px; font-weight:600; color:#333;}
.date {background:#f1f1f1;  border-radius:10px; border:none; padding:6px 10px;}
.vertop {vertical-align: text-top;}

.img100 img { display: block; width: 100%; }

/* 테이블관련 */
.common_table{width:100%; min-width:800px;}
.common_table > thead {overflow-x: scroll;}
.common_table > tbody {overflow-x:auto;}
.common_table > thead > tr > th {padding:5px 0; background:#fff; color:#000; font-weight:600;}
.common_table > tbody > tr > td {border:1px solid #909090; padding:10px; margin-top:5px; text-align:center; border-right:none; border-left:none;}
.sub_table {width:100%; min-width:1280px;}
.sub_table > thead > tr > th {padding:7px 20px; background:#fff; font-size:15px; font-weight:600; color:#333;}
.sub_table > tbody > tr > td {padding:15px 20px; font-size:14px; font-weight:600; color:#333; text-align:center;}
.gray_table {width:100%; }
.gray_table > thead > tr > th {padding:7px 20px; background:#f6f6f6; font-size:15px; font-weight:600; color:#333;}
.gray_table > tbody > tr > td {padding:15px 20px; font-size:14px; font-weight:600; color:#333; text-align:center;}
.gray_table input[type="text"] {padding:5px; border-radius:5px; border:1px solid #505050;}
.border_table select {padding: 5px; border-radius:10px; border:1px solid #505050; outline:none;}
.border_table {width:100%;}
.border_table > thead > tr > th {padding:7px 20px; background:#f6f6f6; font-size:15px; font-weight:600; color:#333; border:1px solid #f6f6f6;}
.border_table > tbody > tr > td {padding:15px 20px; font-size:14px; font-weight:600; color:#333; text-align:center; border:1px solid #f6f6f6;}
.border_table input[type="text"] {padding:5px; border-radius:5px; border:1px solid #505050;}
.border_table select {padding: 5px; border-radius:10px; border:1px solid #505050; outline:none;}
.lecture_table {width:100%;}
.lecture_table > thead > tr > th {padding:5px 10px; background:#f6f6f6; font-size:15px; font-weight:600; color:#333; border:1px solid #f6f6f6;}
.lecture_table > tbody > tr > td {padding:5px 10px; font-size:12px; font-weight:500; color:#333; text-align:center; border:1px solid #f6f6f6;}
.lecture_table > tbody > tr > td > div {text-align:left;}
.lecture_table > tbody > tr > td{vertical-align:middle;}
.lecture_table input[type="text"] {padding:5px; border-radius:5px; border:1px solid #505050;}
.lecture_table select {padding: 5px; border-radius:10px; border:1px solid #505050; outline:none;}
.answer_table {width:100%; border-collapse: separate; border-spacing: 8px;}
.answer_table tbody{margin-top: 1em;}
.answer_table > thead > tr > th {padding:7px 20px; border-bottom:1px solid #f3f3f3; font-size:15px; font-weight:700;}
.answer_table > tbody > tr > td {border:1px solid #ddd; padding:5px 5px; font-size:14px; font-weight:600; color:#333; text-align:center;}
.answer_table > tbody > tr > td:nth-child(odd) {background:#eff6ff; width: 30%;}
.answer_table input[type="text"] {padding:5px; border-radius:5px; border:1px solid #505050;}
.answer-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 !important;
    text-align: center;
    background-color: #fff !important;
    width: 20%; /* 5개씩 배치하기 위함 */
    transition: all 0.2s;
}

/* 질문 번호 영역 (상단) */
.answer-card .q-num {
    background-color: #eff6ff; /* 연한 회색 */
    border-bottom: 1px solid #e2e8f0;
    padding: 5px 0;
    font-size: 12px;
    font-weight: bold;
    border-radius: 8px 8px 0 0;
}

/* 답안 표시 영역 (하단) */
.answer-card .q-ans {
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
    color: #1e293b;
    min-height: 40px;
}




.cm_table {width:100%;}
.cm_table > thead > tr > th {background:#f9f9f9; font-size:14px; font-weight:600; color:#333; padding:8px 8px; border-top:2px solid #333; border-bottom:2px solid #333;}
.cm_table > tbody > tr > td {font-size:15px; font-weight:600; color:#767676; text-align:center; padding:10px 8px; border-bottom:1px solid #ddd;}
.cm_table > tbody > tr > td > label {margin:0 10px;}
.print_table {width:100%;}
.print_table > caption {background:#f9f9f9; border:1px solid #ddd; padding: 6px 10px; font-size: 15px; font-weight:700;}
.print_table > tbody > tr > th {background:#f9f9f9; font-size:14px; font-weight:700; color:#333; padding:8px 8px; border:1px solid #ddd; width:140px; vertical-align:middle;}
.print_table > tbody > tr > td {font-size:15px; font-weight:600; padding:10px 8px; border:1px solid #ddd; vertical-align:middle;}
.print_table > tbody > tr > td > label {margin:0 10px;}

/* A4 */
.paper {width:100%; max-width:1100px; border:1px solid #ddd; box-sizing:border-box; padding:20px; margin:20px 0;}

/* popup */
.bit{background:#000000; width:5px; height:29px; margin-right:10px;}
.pop_wrap{width:100%; height:100%; overflow:hidden; overflow-y:auto;}
.pop_title > div > h1 {font-size:22px; font-weight:600;}
.pop_title > div > h2 {font-size:20px; font-weight:700; color: #fff; margin-left: 1.2em;}

/* 텍스트 overflow */
.over {width:70%; min-width:200px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.over2 {width:600px; max-width:600px; text-align:left !important; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.over3  {width:300px; max-width:300px; text-align:left !important; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

/* 위치관련 */
.d-f {display:flex !important; align-items:center !important;}
.d-f-s {display:flex !important; align-items:center !important; justify-content:space-between !important; position: sticky; width: 100%; top: 0; background: #fff; padding: 15px 20px;}
.d-f-c {display:flex; align-items:center; justify-content:center; gap:15px;}
.float-l{float:left;}
.float-r{float:right;}
.d-f-g {display:flex !important; align-items:center !important; gap:15px;}
/* 폰트관련 */
.f-b {font-weight:bold;}
.fc-b {color:#0070c0 !important;}
.fc-bb {color:blue !important;}
.fc-r {color:red !important; vertical-align:top;}    
.fc-a {color:#008ed2 !important;}
.fc-g {color:#7f7f7f !important;}
.f-w {font-weight:800;}
.ex {display:inline-block; font-size:13px; color:#606060;}

/* 표시관련 */
.green {font-size:14px; background:#3cb526; padding:2px 4px; color:#fff;}
.red {font-size:14px; background:#d9534f; padding:2px 4px; color:#fff;}
.gray {font-size:14px; background:#999999; padding:2px 4px; color:#fff;}
.blue {font-size:14px; background:#0574eb; padding:2px 4px; color:#fff;}

/* 버튼관련 */
.navbtn {background:#ffcb37; padding:8px 10px;  font-weight:600; border:none; border-radius:5px; cursor:pointer; }
.classbtn {background:#ffcb37; padding:8px 15px;  font-weight:bold; border:none; border-radius:5px; cursor:pointer; z-index:99; }
.workbtn {background:#5bc0de; padding:8px 15px;  font-weight:bold; border:none; border-radius:5px; cursor:pointer; color:#fff;}
.okbtn {background:#0574eb; padding:8px 15px;  font-weight:bold; border:none; border-radius:5px; cursor:pointer; color:#fff; }
.subbtn {background:#0574eb; padding:5px 10px;  font-weight:bold; border:none; border-radius:5px; cursor:pointer; color:#fff; }
.pop_btn {cursor:pointer; background:#0574eb; font-size:16px; border:none; padding:10px 25px; color:#fff;}
.exam_btn {background:#02141e; padding:1.2em 3.5em;  font-weight: bold; border:none; border-radius:5px; cursor:pointer; color:#fff; font-size: 1.1em;}
/* .exam_btn:hover {background: #9AE4FF; font-weight: bold;} */
.close_btn  {cursor:pointer; background:#ffffff; font-size:16px; border:1px solid #333; padding:10px 25px;}
.pop_btn:hover {background:#167ff0; transition:.2s}
.close_btn:hover {border:1px solid #0574eb; color:#0574eb; transition:.2s}
.question_li{background: #f8f9fa;}

/* container */
.container {padding-left: 370px;}
.sub_container {padding-left:4em;}

/* index */
.login_wrap{display:flex; justify-content:center; align-items:center; flex-direction:column; width:100%;}
.login_content {margin-top:50px; max-width:1280px;}
.login_top {margin-bottom:50px;}
.login_top > ul {display:flex; align-items:center;}
.login_top > ul > li:nth-child(2) {padding:0px 15px;}
.login_top > ul > li > a { color:#fff; font-size:30px; font-weight:600;}
.login_top > ul > li > span:before {content:''; position:absolute; top:53px; width:1px; background:#fff; height:36px; display:block;}
.login_box {width:100%; max-width:1280px; background:rgb(0, 0, 0, 0.5); box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; }
.box_content {width:100%; height:auto; padding:50px 0 0;display:flex; align-items:center; justify-content:center; gap:50px;}
.login_part1 {width:25%; padding:30px; background:rgba(35,92,159,0.8); height:400px;}
.login_part1  h1 {font-size:24px; font-weight:bold; color:#fff; padding-bottom:30px;}
.login_Tab{display: flex; justify-content: center; padding-bottom: 10px; }
.login_Tab li{margin: 5px 20px; color: #fff; float: left; font-size: 1rem;}
.login_Tab li a{display: inline-block; padding: 7px 12px;}
.star{color: #ff9c00; font-weight: 700;}
.part1_content {display:flex; flex-direction:column; height:230px; justify-content: center; }
.part1_content > label {margin-bottom:10px; width:100%;}
.part1_content > label > input {width:100%; height:42px; outline:none;}
.part1_content > p {text-align:left; font-size:16px; color:#fff; padding:20px 0px;}
.IDPW input{background: transparent; color: #fff; border: none; padding: 5px 10px;font-weight: 500; font-size : 0.9rem;}
.part1_content2{justify-content: space-evenly;}
.part1_content2 a{color: #1c4b6c !important; text-align: center;}
.sub_part1, .sub_part2{width: 100%; gap: 5px;}
.sub_part1{display: flex; justify-content: center;}
.sub_part1 a{width: 48%;}
.sub_part1 a{background: rgba(256, 256, 256, 0.7); font-weight: 700 !important; padding: 15px 0 !important; height: 100px; display: flex; align-items: center; justify-content: center; }
.sub_part1 a:nth-child(1) { background: #fff; }
.sub_part2{text-align: center; padding-top: 20px;}
.sub_part2 input{background: transparent; color: #fff; border: none; padding: 8px 10px;font-weight: 500; font-size : 0.9rem;}
.box_content button {width:100%; height:42px; cursor:pointer; background:none; border:1px solid #fff; color:#fff; font-size:16px; font-weight:600; margin-top:3px;}
.part2 {background:rgba(0,66,105,0.7) !important;}
.part2 a {display:flex; justify-content:center; color:#fff;  font-weight:600; padding: 15px 0;}
.login_idpw {width:100%; margin:30px 0;}
.login_idpw > ul {display:flex; justify-content:center; gap:20px;}
.login_idpw > ul > li > a {color:#fff; font-weight:bold; font-size:16px;}

/* 인증서 등록 */
.secu_wrap {display:flex; justify-content:center; align-items:center; flex-direction:column; width:80%; margin:0 auto;}
.secu_table > tbody > tr > td {padding:15px;}
.secu_table > tbody > tr > td > button {margin-left:20px;}
.secu_btn {background:#0574eb; padding:8px 0px; width:100px; font-weight:bold; border:none; border-radius:5px; cursor:pointer; color:#fff;}

/* nav */
nav{position:fixed; height:100%; top:0; left:0; width:350px; transition: .3s; flex-shrink: 0; min-height:100vh; background:hsla(211, 100%, 50%, 0.7); padding:15px; display:block; overflow:auto; transition: transform 0.3s ease-in-out;}
.nav_top {display:flex; align-items:center; gap:5px;}
.nav_top > button:nth-child(1) {border:none; background:none; cursor:pointer; transition: .3s; }
.nav_top > a:nth-child(2) { display:block;width:30%;}
.nav_top > a img { display: block; }
.nav_top > a:nth-child(3) {color:#fff; margin-left:35px;}
.scrollarea {margin-top:2em;display:flex;flex-direction:column;justify-content:space-between;height:calc(100% - 4em);}
.scrollarea .menu ul + ul { border-top: 1px solid #ffffff50; padding-top: .8em; }
.menu {display:flex; flex-direction:column; gap:1em; }
.menu > ul {display: flex; gap: 4%; flex-wrap:wrap; }
.menu > ul > li { margin: .3em 0; min-width: 30%}
.menu > ul > li > a {display:flex; flex-direction:column; justify-content:center; gap:.5em; border-radius:1em; height:auto; padding:.8em .5em; color:#fff; text-align:center; background: hsla(0deg, 0%, 0%, .2); font-size: 100%;}
.menu > ul > li > a > i {font-size:120%; color: hsla(0deg, 0%, 0%, .2);}
.menu > ul:nth-child(4) { border-top: 2px solid hsl(211deg 100% 69.83%); padding-top: 15px; }
.menu > ul > li:hover > a {background:#4b51be;}
.menu > ul > li:hover > a > i {color:#fff;}
.menu-bottom { margin-top: 1em; }
.menu-bottom ul { border: 1px solid #fff; background: hsla(0deg, 0%, 0%, .2); color: #fff; }
.menu-bottom a {display: flex; justify-content: center; align-items: center; gap: 10px; padding: 1em;}
.hamburger { display: none; cursor: pointer; font-size:24px; padding:15px; color:#fff; margin-top:7px;}
.nav_hidden {display: none;}

/* scrollbar */
::-webkit-scrollbar { width:5px;height:5px; }
::-webkit-scrollbar-track { background: #888; }
::-webkit-scrollbar-thumb { background: #444; border-radius:5px; }

/* header */
header{width:100%;margin-bottom: 1em;}
.page-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; row-gap: 20px; gap: 20px; }
.course-select { display: flex; gap: 20px; }
.course-select select { font-size: 16px; color: #fff; font-weight: 700; background: hsla(194, 100%, 62%, .6) !important; border: none; padding: 5px 40px; border-radius: 5px;}
.course-select select option { background: #fff; color: #000; }
.page {display:flex; align-items:center; gap:17px;}
.page > li {display:flex; align-items:center; }
.page > li > a {font-size:16px; font-weight:600; color:#fff; display:flex;}
.page > li > button {background:none; border:none; cursor:pointer;}
.page > li > button > i {font-size:18px; color:#fff; padding-right:5px;}
.r-row > a::after {content:''; display:inline-block; width:8px; height:8px;border-right: 1px solid #fff; border-top:1px solid #fff;transform-origin: right bottom; transform: rotate(45deg); margin-top:10px; }
.page > li > strong { font-size:20px; font-weight:600; color:#fff;}
.sub_header {width:100%; margin-top:10px;}
.sub_header > ul {display:flex}
.sub_header > ul > li {color:#fff; font-weight:600;}
.sub_header > ul > li:first-child::before {display:none;}
.sub_header > ul > li::before {content:''; display:inline-block; width:1px; height:12px; background:#fff; margin:0 5px;}
.header_attend {margin-top:15px; border-bottom:1px dotted #ddd; padding-bottom:10px;}
.header_attend > span {font-weight:700; background:#fff; border:1px solid #c00000; color:#c00000; padding:5px 15px; border-radius:3px;}
.header_attend > span::before {content:''; display:inline-block; background:url('/class/images/myclass/important.png')no-repeat; width:19px; height:11px;}

/* intro */
.common_wrap {padding: 35px; height:auto; width:100%;}
/* .common {display:flex; justify-content:space-between; gap:3em;} */
.common{text-align: center;}
.check_box{margin: 0 40%; padding: 1.2em 0; background: rgba(255, 255, 255, 0.7);} 
.check_box h2{font-size: 1.6em; font-weight: bold;}
.list_wrap {width:100%; display:flex; flex-direction:column; gap:1em;}
.notice_box {width:100%; min-width:330px; height:300px; min-height:260px; display:flex; flex-direction:column; padding:1.5em 1em; background-color:hsla(211, 100%, 50%, 0.7);}
.notice_box > div {width:100%;}
.notice_tab > ul {display:flex; justify-content:center;}
.notice_tab > ul > li {padding-bottom:5px; width:33.333%; text-align:center; border-bottom:2px solid #fff;}
.notice_tab > ul > li > a {color:#fff; font-weight:600;}
#tab_active {border-bottom:4px solid #ffcb37 !important;}
.notice_body {flex:1;}
.notice_body > ul {display:flex; flex-direction:column; height:100%;}
.notice_body > ul > li {display:flex; min-height: 2em; height: calc(100% / 5); border-bottom: 1px solid rgba(209, 209, 209, .3);}
.notice_body > ul > li > a {display:flex; width:100%; align-items: center;}
.notice_body {display: none;}
.notice_body.active {display: block;}
.notice_title > p {font-size: 1em; color:#fff; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.notice_date {display:flex; flex-direction:column; margin-left:auto; padding-left:10px; line-height:1.5; text-align:right;}
.notice_date > small {color:#fff; font-size:13px;}
.attend_box {max-width:28%; min-width:330px; height:300px; min-height:260px; display:flex; flex-direction:column;}
.attend_box > div > ul > li {background:#fff; padding:10px 15px; border-radius:15px; margin-bottom:20px; min-height:80px;}
.attend_box > div > ul > li:nth-child(3) {background:hsla(194, 100%, 62%, .6)!important;}
.attend_dv {display:flex; justify-content:space-between; align-items:center;}
.attend_dv > div > i {font-size:20px;}
.attend_dv > div > p {font-size:16px; font-weight:bold;}
.attend_dv > div > p > strong {font-size:35px; font-weight:bold;}
.attend_dv > div > p > span {font-size:16px; color:#111; font-weight:500; padding-left:10px;}
.continue > li > span {display:inline-block; font-size:18px; font-weight:800; color:#fff; margin-bottom:10px;}
.continue > li > a {color:#fff; font-weight:600;}

/* 수강과목 */
.list_box {width:100%; height:auto; background:#f3f3f3; padding:1em; margin-bottom:50px;}
.list_top {border-bottom:1px solid #333; display:flex; justify-content:space-between;}
.list_top  > ul {gap:20px; margin-bottom:10px;}
.list_top  > ul > li {}
.list_top  > ul > li > a {font-size:18px; font-weight:600; }
.list_option > select {height:30px; padding:0px 15px; font-size:15px; font-weight:500; color:#333; border:1px solid #ddd;}
.list_option > select > option {font-size:15px; font-weight:500;}

/* 수강리스트 */
.list_section {margin:20px 0 30px 0;}
.list1 {display:flex; justify-content:space-between; align-items:end;}
.list1_1 > div > a {color:#4c52bf; font-size:18px; font-weight:800;}
.list1_1 > div:nth-child(2) {margin-top:2px;}
.list1_1 > div > p {color:#505050; font-weight:600; font-size:16px;}
.list1_1 > div > p > span {color:#000; font-weight:600; font-size:16px;}
.list1_2 > a {display:inline-flex; flex-direction:column; align-items:center; padding:3px 0;min-width:4.3em; font-size:12px; color:#fff; background:#235c9f; border-radius:5px;}
.list1_2 > a > span {font-size:14px; font-weight:bold;}
.list1_2 > a > span > small {font-size:12px;}
.list2 > div {display:flex;align-items:center; height:35px; margin-top:10px; }
.list2  > div > ul {display:flex; width:50%; background:#fff;}
.list2  > div > ul > li {font-size:13px; font-weight:700; padding:5px;}
.list2  > div > ul > li:nth-child(1) {width:80px; background:#ddd; text-align:center;}
.list3 > div {display:flex; gap:5px;}
.list3 > div > ul { display: flex; width: 100%; text-align: center; gap: 5px; flex-wrap: wrap; }
.list3 > div > ul > li {width:100%; height:55px; background:#fff; border-radius:3px; flex: 1; }
.list3 > div > ul:nth-child(2) > li {cursor:pointer;}
.list3 > div > ul > li > a {font-size:12px;}
.list3 > div > ul > li > a > div {margin-top:5px;}
.list3 > div > ul > li > a > div > span {font-weight:900;}

/* myclass */
.myclass_wrap {width:100%;}
.myclass_content {width:100%;}
.myclass_top {width:100%;  background:hsla(0, 0%, 0%, .5);}
.myclass_top > div {display:flex; justify-content: space-between; align-items:center; padding:2em;}
.myclass_top > div h1 {font-size:24px; color:#fff; font-weight:700; }
.attend_chk {width: 100%; background: #fff; display:flex; justify-content:space-between; align-items:center;}
.progress-wrap {flex: 1; display:flex; align-items: center;}
.attend_chk > div > p {font-size:15px; font-weight:bold; padding:10px; }
.progress-container { position: relative; width:40%;}
.continue { padding: 10px; }
#progress {width:100%; border-radius:10px;}
#progress::-webkit-progress-bar { background:#ddd; border-radius:10px;}
#progress::-webkit-progress-value { border-radius:10px; background: #0574eb;}
.progress-text { position: absolute; top:50%; right:2px; transform: translate(-50%, -50%); font-weight: bold; color: #998E8C;}
.myclass_body {height:auto; background:#f3f3f3; padding:0 2em 2em; margin-bottom:50px;}
.class_top > div > h1 {font-size:18px; font-weight:600;}
.class_content {margin-top:30px;}
.class_box {background:#fff; display:flex; justify-content:space-between; align-items:center; padding:1em; margin-bottom:10px;}
.cc_t > div > strong {font-size:18px; font-weight:800;}
.cc_t > div > span {font-size:15px; font-weight:500; color:#707070; padding-left:10px}
.cc_t > div > ul {display:flex; gap:15px;}
.cc_t > div > ul > li  {font-weight:bold; }

/* sub_common */
/* .sub_common {padding:0 4em;} */

/* grade */
.grade-wrap {background:hsla(0, 100%, 100%, .8); width:100%; height:auto;}
.grade-content {padding:20px;}
.grade-pointer {display:flex; justify-content:space-between; align-items:center;}
.grade-pointer >  div > p {font-size:16px; font-weight:600;}
.grade-pointer >  div > p > span {color:#0574eb;}
.grade-ex > ol > li {font-size:16px; color:#333; font-weight:600; line-height:2;}
.grade-ex > ol > li > span {font-size:16px; color:#333; font-weight:800;}
.grade-date {width:100%;  background:#ffcb37; text-align:center;}
.grade-date > h1 {font-size:16px; color:#000; font-weight:600; padding:10px 0;}

/* objection */
.objection_table > tbody > tr > td > textarea {width:100%; height:300px; outline:none;}

/* grade_eva */
.eva_title {width:100%;}
.eva_title > h1 {font-size:17px; font-weight:600;}
.eva_content {padding:20px;}

/* sabok_application */
.signature {margin-top:70px;}
.signature > ul {text-align:right;}
.signature > ul > li {line-height:2; font-size:16px; font-weight:500;}
.signature > ul > li > span {display:inline-block; width:50px;}

/* 증명사진 */
.profile_box {width:138px; height:168px; margin:0 auto;}
.profile_box img {width:100%; height:100%;  object-fit: cover;}

/* modify */
.wrap {background:#fff; width:100%; height:auto;}
.informationbox > h1 {display:inline-block; font-weight:600; font-size:20px; color:#333;}
.information_table > tbody > tr > td {padding:15px;}
.information_table > tbody > tr > td > label > input[type="text"] {height:35px; width:90%;}
.information_table > tbody > tr > td > label > input[type="radio"] {width:15px; height:15px;}
.information_table > tbody > tr > td > select {padding:5px 15px; border:1px solid #ccc; font-size:16px;}
.information_table > tbody > tr > td > select > option {font-size:16px;}
.address > input {margin-bottom:5px;}

/* lecture_plan */
.lecture_common {width:100%;}
.lecture_common > h4 {font-size:18px; font-weight:700; color:#333;}
.lecture_common > h4::before {content:''; display:inline-block; width:10px; height:10px; border-radius:50%; background:#333; margin-right:5px; margin-bottom:1px;}
.lecture_common > p {padding:3px 0;}
.professor_box {display:flex; gap:20px;}
.professor_box > img {height:100%;}
.professor_box > div > h1 {font-size:16px; font-weight:600;}
.professor_box > div > div > p  {font-size:16px; font-weight:600; padding-top:15px;}
.lecture_active{background-color: #007bff;}


/* notice */
.notice-wrap {background:hsla(0, 100%, 100%, 1); width:100%; height:auto;}
.community-box {width:100%; height:auto; background:#fff; padding:20px;}
.lnb-notice > ul {display:flex; border-bottom:2px solid #acacac; font-size:max(1rem, 1vw);}
.lnb-notice > ul > li {font-weight:600; width:33.333%;}
.lnb-notice > ul > li > a {display:inline-block; position:relative; width:100%; text-align:center; padding: calc(17 / 22* 1em) calc(28 / 22* 1em); color:#acacac;}
#lnb-active {color:#333;}
#lnb-active::after {content:""; display:block; position:absolute; width:100%; left:0; bottom:-2px; width:100%; height:2px; background-color:#000;}
.search-wrap {display:flex; justify-content:space-between; align-items:center;}
.sub-tab {margin:30px 0;flex:1;}
.sub-tab-ul {display:flex; gap:1%;}
.sub-tab-ul > li > a {padding:.8em; font-size:100%; display:block; white-space:nowrap; color:#111; font-weight:500;}
.sub-tab-ul > li > a:hover {background:#dfe3eb; border-radius:12px;}
#tab-active {color:#fff; background:#0574eb; border-radius:12px;}
.search-s {position:relative;}
.search-s input {background:#dfe3eb; border:none; height:30px; padding:0px 10px; border-radius:15px;}
.search-s button {background:none; border:none;}
.search-s > form > button {position:absolute; top:7px; right:5px;}
.list-wrap {width:100%;}
.list-wrap > ul {border-top:1px solid #acacac; padding-top: calc(max(1rem, 0.8334vw)*(20 / 16));}
.list-wrap > ul > li {display:flex; justify-content:space-between; align-items:center;}
.list-wrap > ul > li > a:hover {background:#dfe3eb; border-radius:10px;}
.list-wrap > ul > li > a {padding:12px 5px; width:100%; display:flex; justify-content:space-between; align-items:center; gap:2.4rem;}
.list-con {display:flex; align-items:center;}
.list-con > span {display:block; width:8rem; color:#767676; font-weight:600; font-size:13px;}
.list-con > p {display:block; color:#111; font-weight:600; font-size: max(.9rem, .9vw);}
.icon-attach {display:inline-block; width:1.2rem; height:1.2rem; vertical-align:middle; background-image:url('/class/images/icon-file.png'); background-repeat:no-repeat;  background-size:1.2rem 1.2rem; background-position:center; margin-left:5px;}
.notice-day {display:block;}
.notice-day > span {display:inline-block; color:#767676; width:6rem; font-size:13px;}

/* notice_view */
.notice-view > p {font-size:15px; line-height:1.7;}
.view-file > h2 {color:#111; font-size:20px; font-weight:600; margin-bottom:10px;}
.download-wrap > a {display:flex; justify-content:space-between; width:100%; padding:10px 10px; background:#dfe3eb; border-radius:10px;}
.download-wrap > a > span {font-size:15px; font-weight:600; color:#4d4d4d;}

/* qna_view */
.view-segment {padding-bottom:15px; border-bottom:2px solid #333;}
.community-title {font-size:20px; font-weight:600; line-height:1.5;}
.comm-small > small {color:#666; font-weight:500;}
.comm-small > small::after {content:''; display:inline-block; width:1px; height:1em; background-color:#888; margin: -2px 8px;}
.comm-small > small:last-child::after {content:none;}
.answerArea {border:1px solid #ddd; margin-top:50px; padding:20px;}
.answerArea > div:nth-child(1) {padding-bottom:20px; border-bottom:1px solid #ddd;}
.comm-answer {font-size:16px; font-weight:500; line-height:2;}


/* pagination */
.pagination {text-align:center; display:flex; justify-content:center; align-items:center; margin:30px 0;}
.pagination a { display: inline-block; padding: 7px 15px; margin: 0 5px; text-decoration: none;color: #fff; border: 1px solid #ddd;}
.pagination a.active { background-color: #0574eb; color: #fff; border:1px solid #0574ed;}
.pagination a:hover { background-color: #ddd;}
#prev, #next { font-weight: bold;}

.paging_align { display: flex; gap: 15px; justify-content: center; margin: 10px 0 50px; }
.paging_align li strong { display: block; background: #fff; width: 24px; height: 24px; border-radius: 50%; text-align: center; line-height: 24px; }

/* exam_paper */
.exam-wrap {width:100%; height:auto; min-width:1280px;}
.exam-content > header {background:#02141e; display:flex; justify-content:space-around; align-items:center; padding:20px;}
.exam-content > header > div > h1 {color:#fff; font-size:24px; font-weight:600;}
.exam-content > header > div > p {color:#fff; font-size:15px; font-weight:600;}
.exam-paper-wrap {width:100%; display:flex;  align-items:center;}
.exam-paper-wrap > div {padding:20px 30px; margin-bottom:30px;}
/* .answer-wrap { height: 100%; } */
.exam-l {height:100%; overflow-y:auto; background:#fff; width:50%;}
.question {margin-bottom:30px;}
.question > li:hover{background: #3b94fa; color: #fff; font-weight: 600;}
.question > p {color:#000; font-size:16px; font-weight:500; margin-bottom: 10px;}
.question > p > span {font-size:14px; color:#fff; background: #3b94fa; padding: 5px; font-weight: bold;}
.question > ol {margin-top:10px;}
.question > ol > li {font-size:15px; padding:8px 0;}
.question > ol > li > label > input {margin:0; vertical-align:middle; margin-bottom:4px;}
.subjective {outline:none; height:35px; width:50%; margin-top:10px; border:1px solid #dadada; border-radius:5px;}
.exam-r {position: fixed; height:calc(100vh - 30px); top:140px; right:36px; border-radius:5px; padding: .5em !important;}
.exam-r.fixedTop { top: 50%; transform:translateY(-50%);}
.exam-r td { padding: .3em; }
.exam-r table + table { margin-top: 1em; }
.exam-r button { margin-top: 1.5em; }
.remaining-time {background:#02141e;}
.remaining-time > p {padding:10px; text-align:center; color:#fff; font-size:18px;}
.answer-content {width:100%; padding: 0 1em; margin-top: 30px;}
.answer-content > h1 {padding:5px 0; font-size:16px; text-align:center;}


/* class_view */
.class-wrap {background:hsla(0, 100%, 100%, 1); max-width:1280px; margin:0 auto; /*height:750px*/;}
.class-content {padding:20px; border: 1px solid #a9a9a9; box-sizing: border-box; position: relative;}
.hamburger-btn {display: none;}
.class-top {display: flex; justify-content: space-between; padding: 0 10px 15px; flex-wrap: wrap;}
.class-title-left {font-size: 25px; font-weight: 700;}
.class-title-right { display: flex; gap: 10px; align-items: center; }
.class-title-right p { font-size: 20px; font-weight: 700; }
.class-title-right p:after { content: '|'; font-size: 25px; color: #dadada; margin-left: 7px; }
.class-tab {width:100%; height:55px; line-height:54px; /* border:1px solid #ddd; */ background: #0574eb; border-radius:15px; color: #fff; padding: 0 40px;}
.class-tab > ul {display:flex; justify-content:space-between;}
.class-tab > ul > li {width:14.2857%; text-align:center;}
.class-tab > ul > li:hover {background:#78baff; border-radius:12px;}
.class-tab > ul > li > a {display:inline-block; width:100%; height:100%; font-size:20px; font-weight: 700;}
.tab-active {color:#fff; background:#78baff; border-radius:12px;}
.viewNav {border:1px solid #ddd; font-weight:600;}
.navdv {width:100%; height:50px; display:flex; justify-content:space-between; align-items:center; padding:0px 20px;}
.navdv > ul {display:flex; justify-content:space-between; align-items:center; text-align:center;}
.navdv > ul > li {width:100px;}
.navdv > ul > li:hover{color:#0574eb; font-weight:bold;}
.navdv .img100 { width: 200px; }
.viewpagination {display:flex; gap:10px;}
.viewpagination_top { display:flex; gap:10px; justify-content: space-between; position: absolute; left: 0; right: 0; transform: translateY(6px); padding: 0 30px; pointer-events: none; } 
.viewpagination_top button { background: none; font-size: 2rem; color: #fff; border: none;  pointer-events: auto; font-weight: bold;}
.viewprevBtn {cursor:pointer; width:60px; height:30px; border:1px solid #ddd; background:#fff; color:#0574eb; } 
.viewnextBtn {cursor:pointer; width:60px; height:30px; border:1px solid #0574eb; background:#0574eb; color:#fff;}

/* 들어가기 */
.viewcontent {/*min-height:325px;*/ height:600px; overflow-y:auto; position:relative; /* background-image: url('/file/class/images/myclass/class_bg.png'); background-size: 30%; background-repeat: no-repeat; background-position: right 30px bottom 30px; */}
.viewContent.course_intro { padding: 3vh; }
.viewbox {overflow-y:auto; padding: 2vh;}
.topic {display: flex;  flex-direction: column; place-items:baseline;  gap: 20px;}
.topic > h1 { font-size:25px; font-weight:600; background: #0574eb; color: #fff; padding: 3px 30px; border-radius: 30px; }
.topic > h2 { font-size:40px; font-weight:600; color:#000; word-break: keep-all; max-width: 700px;}
.topic span { color: #0574eb; font-weight: 700; }
.professor {display: flex;  margin:60px 0 10px;}
.professor > h1 {color:#000; font-size:25px; font-weight:600; display:flex; align-items:center;}
.professor-img .img100 { width: 190px; height: 210px; margin: 0 auto; }
.class-profile {min-width:420px; max-width:500px; border:1px solid #ddd; height:500px; display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background-color:white; z-index:999; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);}
.profile-detail > h1 {font-size:18px; font-weight:700; padding:20px 0px 5px 0;}
.profile-title {position:fixed; top:0; display:flex; justify-content:space-between;}
/* 학습목표 */
.Viewobjectives > div > h1 {display: inline-block; font-size:18px; font-weight:700; background: #0574eb; color: #fff; padding: 10px 25px; border-radius: 10px 10px 0 0;}
.Viewobjectives > div > ul {line-height:2; border: 1px solid #dadada; padding: 10px 20px; margin-bottom: 20px;}
.Viewobjectives > div > ul > li > span {display:inline-block; font-weight:600;}
.objectives-2 {/*margin-top:30px;*/}
.class_intro_bg { position: absolute; bottom: 0; right: 0; }
.class_intro_bg img { width: 100%; }

/* 사전학습 */
.videobox {padding:20px; width:100%; /*height:500px;*/ }
/* .viewvideo {height:550px;} */
.pre-learning {display: flex; align-items: end; height: 540px; background: #fff; width: 17%;}
.pre-learning .img100 { display: block; width: 200px; padding-left: 20px; }
.op-1 > h1 {font-size:19px; font-weight:600; line-height:1.5;}
.op-1 > span {font-size:16px; font-weight:600; color:#707070;}
.op-1 > p {font-size:16px; font-weight:600; color:#d50000; padding:20px 0;}
.op-2 > textarea {width:100%; outline:none; resize:none; height:100px; margin:20px 0;}
.op-2 > button {display:block; margin:0 auto;}

/* 학습하기 */
.learningbox{padding:20px; width:100%;}
.learning {width:80%;}
.learningtable {height: 540px; background: #fff; width: 20%;border: 1px solid #ddd; margin-left: 10px;}
.learningtable > h1 {font-weight:700; background: #dadada; font-size:18px; padding: 10px;} 
.learningtable > ol {padding: 10px;}
.learningtable > ol > li {padding:10px;}
.learningtable > ol > li:hover {color:#0574eb; font-weight:bold;}
.plyr--video {width:80%}

/* 평가하기 사지선다*/
.quizbox {padding:30px 20px 20px 20px;}
.quiz-number {display:flex; justify-content:center; align-items:center;}
.quiz-number > h1 {display:inline-block; width:30px; height:30px; line-height:30px; background:#0574eb; color:#fff; font-size:16px; font-weight:700; text-align:center; border-radius:50%;}
.quiz-content {padding:20px 0; text-align:center;}
.quiz-content > h1 {font-size:19px; font-weight:700; }
.quiz-choice > ol > li {border:1px solid #ddd; border-radius:15px;  margin:10px 0;}
.quiz-choice > ol > li > button {color:#333; width:100%; background:none; border:none; text-align:left; padding:20px; cursor:pointer; font-size:16px; font-weight:600;}
.quiz-choice > ol > li > button:hover {background:#dfe3eb; border-radius:15px;}
.qch-active {background:#0574eb !important; color:#fff !important; border-radius:15px;}
.feedback {position:absolute; bottom:50%; right:0; background: rgba(0, 0, 0, 0.8); width:100%; padding:30px 20px;}
.feedback > ul {color:#fff;}
.feedback > ul > li:nth-child(1) {font-size:15px; font-weight:600;}
.feedback > ul > li:nth-child(2) {line-height:1.5;}
.feedback > button {float:right;}
.quiz-ox {display:flex; gap:80px; justify-content:center; align-items:center;}
.quiz-ox > button {background:none; border:none; cursor:pointer;}
.quiz-ox > button:hover > img {transform:scale(1.1); transition: .9s ease;}
/* 정리하기 */
.viewfinish > div > p {border: 1px solid #dadada; padding: 15px 20px;}

/* 차시예고 */
.warning {display:flex; flex-direction:column; gap:25px;}
.warning > div {padding:40px; text-align:center;}
.warning > div > h1 {font-size:23px; font-weight:700;}
.warning > div > span  {font-size:20px; line-height:2;}
.outro1 {box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
.outro1 > div {width:32px; height:32px; border-radius:50%; background:#0574eb; display:flex; justify-content:center; align-items:center; margin:0 auto; animation: shake 0.7s infinite ease-in-out; }
.outro1 > div > div {width:16px; height:10px; border:3px solid #fff; margin-bottom:4px; border-top:0; border-right:0; transform:rotate(-45deg); transform-origin:25% 25%; margin:0;}
.outro1 > div > div > span {opacity:0;}
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-3px);
    }
    75% {
        transform: translateX(3px);
    }
}
/* class푸터 */
.note-wrap {min-width:420px; max-width:500px; border:1px solid #ddd; height:400px; display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background-color:white; z-index:999; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);}
.note-wrap textarea {width:100%; height:200px; outline:none; resize:none;}
.map-wrap {min-width:420px; max-width:500px; border:1px solid #ddd; height:400px; display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background-color:white; z-index:999; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);}
.map-content {width:100%; padding: 15px 20px;}
.map-content > dl > dd {background:#333; padding:5px; font-size:18px; font-weight:600; color:#fff;}
.map-content > dl > dt {padding:8px; font-size:16px; border:1px solid #ddd; border-bottom:none;}
.map-content > dl > dt:last-child {border-bottom:1px solid #ddd;}
.qna-wrap { min-width:420px; max-width:500px; border:1px solid #ddd; height:400px; display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background-color:white; z-index:999; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); }
.qna-wrap textarea {width:100%; height:200px; outline:none; resize:none;}

/* childcare_pledge */
.pledge-wrap {width:100%;}
.pledge-wrap > h1 {font-size:28px; font-weight:600; text-align:center; padding-top:30px;}
.pledgebox1 {margin:70px 0;}
.pledgebox1 > ul > li {font-size:18px; font-weight:600; text-align:left; line-height:2;}
.pledgebox2 {margin:150px 0;}
.pledgebox2 > p {font-size:18px; font-weight:600; text-align:center;}
.pledgebox3 {margin:80px 0;}
.pledgebox3 > p {font-size:18px; font-weight:600; text-align:center;}

/* lifepledge */
.lifepledge {width:100%}
.lifepledge > ul > li{font-size:16px; line-height:3;}
.lifepledgebox2 {margin:100px 0;}
.lifepledgebox2 > p {font-size:18px; font-weight:600; text-align:center;}

.popup{width:100%; height:100%; position: fixed; background:rgba(0,0,0,0.6);}
.pop-content{width:100%; display:flex; align-items:center; justify-content:center;  height:100vh;}	
.pop-top {width:100%;background:#333; padding:5px; display: flex; justify-content: space-between;}
.pop-top > span {color:#fff;}
.pop_img { width: 100%; }

.play_btn_new { z-index: 999; position: absolute; transform: translate(490px, -100px); }
.play_btn_new .viewnextBtn { width: 200px; height: 200px; border-radius: 10px; font-size: 100px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); background: #fff; border: 2px solid #0574eb; color: #0574eb; font-weight: 800; }

/* 신규사이트 팝업 */
.popup_screen{background: rgba(0, 0, 0, 0.7); position: fixed; z-index:990; width: 100%; height:100%; top:0; left:0;}

#popup{min-width: 350px; position: fixed; z-index:992; top:30%; left:50%; transform: translate(-50%, -50%); background: #f4f4f4; font-size:20px;}


.exam_popup{min-width: 350px; position: fixed; z-index:991; top:70%; left:50%; transform: translate(-50%, -50%); background: #f4f4f4; font-size:20px;}
.urgent{background: #ffffff; padding: 10px 5px !important; border-radius: 10px;}
.exam_popup_content span{font-size: 1.8em; font-weight: bold; color: red;}
.exam_popup h3{ text-align: center;}
.exam_popup_title{margin-bottom: 10px; padding: 20px; background: #114087; text-align: center;}
.exam_popup_title > h1{font-size: 1.3em; font-weight: bold; color: #fff}
.exam_popup_content{ line-height: 1.5; padding: 20px 30px; text-align: center;}
.exam_popup_content > p{padding: 5px 0;margin-top: 3%; line-height: 1.3; font-weight: bold; font-size: 1em;}
.page{margin-bottom: 4%; margin-top: 4%; width: 100%; text-align: center;}
.exam_popup_content strong { color: red; }
.exam_popup_content a{text-align: center;}
.exam_popup_content a img{opacity: 1;}
.exam_popup_content a img:hover{opacity: 0.7;}
.exam_box{padding-top: 10px; width: 60%;}
.exam_popup_content img{width: 90%;}
.exam_footer{ display: flex; background: #323232; padding: 20px; justify-content: center; gap: 1%; }
.exam_footer button {font-size: .7em; padding: 7px 5px; border: 3px solid #fff; display: block; background: #fff; }
.exam_footer button:hover{background: #888; color: #fff; font-weight: bold; cursor: pointer;}
.btn_goMain a { display:inline-block; padding: 20px; background: #4D49FC; margin: 20px 0; color: #fff; }


/* 쪽지 시험 */
.paper_popup{min-width: 450px; position: fixed; z-index:991; top:50%; left:50%; transform: translate(-50%, -50%);  font-size:20px; border-radius: 10px}
.paper_popup_content span{font-size: 1em; font-weight: bold; color: red;}
.paper_popup h3{ text-align: center;}
.paper_popup_title{padding: 20px; background: #00008B; text-align: center; border-radius: 10px 10px 0 0;}
.paper_popup_title > h1{font-size: 1em; font-weight: bold; color: #fff; }
.paper_popup_content{ line-height: 1.5; padding: 1.2em 1.5em; text-align: left; background: #fff;}
.paper_popup_content2{ line-height: 1.5; padding: 5px 30px; text-align: center; background: #e2e8f0; border-radius: 8px; border: 1px solid #dadada; margin: 1em 0;}
.paper_popup_content > p{padding: 5px 0;margin-top: 1%; line-height: 1.3; font-weight: 500; font-size: 0.9em;}
.paper_popup_content2 > p{padding: 5px 0;margin-top: 1%; line-height: 1.3; font-weight: 500; font-size: 0.9em; }
.paper_popup_content strong { color: red; }
.paper_box{padding-top: 10px; width: 60%;}
.paper_popup_content img{width: 90%;}
.paper_footer{ display: flex; background: #e2e8f0; padding: 20px; justify-content: center; gap: 1%; border-radius: 0 0 10px 10px;}
.paper_footer button {font-size: .9em; padding: 1em 2em; color: #fff; display: block; background: #2563eb; border-radius: 8px; font-weight: bold; border: none;}
.paper_footer button:hover{background: #00008B; color: #fff; font-weight: bold; cursor: pointer; transition-duration: 0.3s;}
.btn_goMain a { display:inline-block; padding: 20px; background: #4D49FC; margin: 20px 0; color: #fff; }

/* 팝업 */
.popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 998;
        }

        /* 팝업 컨테이너 */
        .popup-content {
            max-width: 450px; /* PC에서의 최대 너비 */
			min-width: 400px;
			position: fixed;
			z-index: 999;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
            background-color: #fff;
        }

        /* 상단 버튼 영역 */
        .popup-header {
            background-color: #f4f4f4;
            padding: 10px 15px;
            display: flex;
            justify-content: flex-end; /* 오른쪽 정렬 */
            border-bottom: 1px solid #ddd;
        }

        .close-btn {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            cursor: pointer;
            background: none;
            border: none;
            outline: none;
            display: flex;
            align-items: center;
			padding: 0.3rem 0.5rem;
			background: #333;
			color: #fff;
        }

        .close-btn:hover {
            background: #ccc;
			color: #333;
        }

        /* 이미지 영역 (반응형) */
        .popup-body img {
            width: 100%;
            height: auto;
            display: block; /* 이미지 하단 공백 제거 */
        }

	.download-area {
    padding: 20px  0; /* 아래쪽 여백을 주어 버튼 배치 */
    text-align: center;
    background-color: #fff; /* 이미지 아래 배경색 */
}

.download-btn {
    display: inline-block;
    padding: 25px 40px;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    text-decoration: none; /* 밑줄 제거 */
    border: 2px solid #333; /* 검정색 테두리 */
    background-color: #fff;
    transition: all 0.2s ease;
	background: url(https://img.hunet.co.kr/event/2024/05/02_wf/ic_download_gray.svg) no-repeat right 20px center;
	background-size: 20px;
}

.download-btn:hover {
    background-color: #333;
    color: #fff;
}

        /* 팝업 숨기기 클래스 */
        .hidden {
            display: none;
        }

/* 시험창 화면 */
.q-header{
	display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 0.8rem;
}

.object{
	background: #e0f2fe;
	color: #0284c7 !important;
	padding: 4px 10px;
	border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

.object2{
	background: #cfffe5;
	color: #3c694d !important;
	padding: 4px 10px;
	border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

.question li {
  background: #fff;
    border: 1px solid #e3e3e3; /* 기본 테두리 */
    border-radius: 12px; /* 카드 형태의 둥근 모서리 */
    margin-bottom: 12px;
    transition: all 0.2s ease;
    overflow: hidden;
}

.question li:hover {
	border-color: #3b94fa; 
    background: #eff6ff;
	font-weight: 600;
}
.question > p {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 18px;
    line-height: 1.6;
}

.question input[type="radio"] {
    display: none;
}

.question label{
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
    margin: 0;
    transition: all 0.2s ease;
}

#question label {
   display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
    margin: 0;
    transition: all 0.2s ease;
}

.question .q-item-num {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    background-color: #f1f3f5; /* 기본 번호 배경 */
    color: #868e96; /* 기본 번호 색상 */
    border-radius: 50%;
    font-size: 14px;
    font-weight: 800;
    margin-right: 15px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.question .q-item-text {
    font-size: 16px;
    color: #333;
    line-height: 1.5;
}

/* [Checked 효과] 선택되었을 때 스타일 변경 (핵심) */
.question input[type="radio"]:checked + label {
    background-color: #eff6ff; /* 선택 시 연한 파란 배경 */
}

.question input[type="radio"]:checked + label .q-item-text {
    color: #0056d2; /* 선택 시 텍스트 진한 파란색 */
    font-weight: 600;
}

/* 선택된 리스트 항목 테두리 강조 */
.question input[type="radio"]:checked ~ label, 
.question li:has(input:checked) {
    border-color: #3b94fa;
	background: #eff6ff;
}






@media print {
	@page {
		margin:0;
		padding:0;	
	}
	.paper {width:100%; height:100%; margin:0 auto; padding:5px; box-shadow:none; border:none; display:block;}
	.pop_title {display:none !important;}
 }

@media screen and (max-width:1920px){
.exam-r{overflow-y: auto;}

.exam-r::-webkit-scrollbar {
    width: 10px;
}
.exam-r::-webkit-scrollbar-thumb {
    background-color: #f1f1f1;
    border-radius: 10px;
}

}


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

	.container {padding-left:0;} /*nav 로드 때문에 포함은 시켰음*/
	.sub_container {padding-left:0;}
	nav {display: none;}
	.hamburger {display:block; position:absolute; top:0px;}
	header {width:auto; margin: 20px 45px;}
	nav {position:fixed; z-index:1001; top:0px; background:#0574eb; height:100%; overflow-y:auto};
	.container {padding-right:0;}
	.common_wrap {padding:0px 15px;}
	.common {flex-direction: column; gap:5em;}
	.attend_box {max-width:100%; min-width:100%;}
	.notice_box {width:auto;}
	.list_box {width:auto;}
   .play_btn_new { display: none; }

	/* myclass */
	/* .attend_chk {flex-direction:column;}
	.attend_chk > div {width:100%;} */
	.page-wrap { margin-top: 20px; }

	/* sub_common */
	.sub_common {padding:0 .4em;}


	/* 학습하기 */
	.learning {width:100%;}

	/* 쪽지시험 */
    .pop_wrap{width: 100%;} 

	.answer-wrap{display: none;}
    .check_box{margin: 0 20%;}

}


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

/*index*/
.box_content {flex-direction:column;}
.login_part1 {width:80%;}

/* sub_common */
.sub_common > div > header {margin-left:0 !important;}

/* 인증서 등록 */
.secu_wrap {width:90%; margin:0 auto;}

/* class_view */
.viewcontent { height: auto; }

/* class_view > 들어가기 */
.topic > h1 { font-size: 20px; }
.topic > h2 { font-size: 25px; max-width: 400px; }
.professor > h1 { font-size: 20px; }

.pre-learning { display: none; }
.learningtable > ol > li { padding: 0; }
.list3 > div > ul  { gap: none;}
.list3 > div > ul > li { flex: none; width: 8.5%; }

}


@media screen and (max-width:768px){
	/* common */
	.common_wrap {padding:0 10px;}
	.mo-b {display:block;}
	.mo-n {display:none;}
	.mobile-n {display:none;}
	.list3 > div {flex-direction:column;}
	.list2  > div {flex-direction:column; height:auto; gap:10px;}
	.list2  > div > ul {width:100%;}

	/* 인증서 등록 */
	.secu_table > tbody > tr > td > button {margin-left:0px; margin-top:5px;}

	/* myclas */
	.class_box{flex-direction:column; gap:10px;}
	.cc_t {width:100%;}
	.cc_t > div > ul {flex-direction:column; gap:10px;}
	.myclass_top > div {flex-direction:column; gap:20px;}
	.viewcontent { height: auto; } /* 25.08.19 추가 */
	.class-tab { padding: 0; }

	/* header */
	.page > li > a {font-size:14px;}
	.page > li > strong {font-size:14px;}
	.page > li > button > i {font-size:14px;}
	.hamburger {margin-top:4px;}
	.r-row > a::after {margin-top:7px;}


	/* grade */
	.grade-date > h1 {font-size:14px; color:#000; font-weight:600; padding:10px 0;}

	/* notice */
	.search-wrap {flex-direction:column;}
	.sub-tab-ul {display:flex; gap:1px;}
	.sub-tab-ul > li > a {padding:3px 7px;}

	/* noteice */
	.list-con > span {display:none;}
	.list-wrap > ul > li > a {display:inline-block;}


	/* class_view */
	.class-content {padding:10px;}
	.class-tab {border:none; border-bottom:1px solid #333; border-radius:0px; background: #fff;}
	.class-tab ul { display: none; /* 모바일에서는 탭 메뉴 숨김 */}
	.hamburger-btn { display: block; /* 모바일에서는 햄버거 버튼 보임 */ font-size: 24px; background: none; border: none; cursor: pointer;}
	.class-tab ul.show { width:100%; display: block; list-style: none;padding: 0; position:relative; z-index:1000; background:#0574eb; border:1px solid #ddd; border-radius:15px}
	.class-tab ul li {width:100%;}
	.navdv > ul {display:none;}
	.plyr { width: 100%; }

	/* 들어가기 */
	.viewContent.course_intro { padding: 25px; }
	.topic > h1 { font-size: 16px; }
	.topic > h2 { font-size: 18px; padding: 0; }
	.professor > h1 { font-size: 16px; }
	.class_intro_bg { display:none; }

	/* 사전학습 */
	.viewvideo {height:auto;}
	.learningtable {display:none;}
	
	/* LMS 팝업 */
	.pop-box { width: 80%; }
	.pop-img img { width: 100% !important; height: auto !important; }

	/* 쪽지시험 */
    .pop_wrap{width: 90%;} 

}

@media screen and (max-width: 550px) {
.exam_popup{top: 50%;}
.exam_popup_content > p {font-size: 0.8em;}
.exam_popup_title > h1{font-size: 1em; }
.exam_popup_content a{font-size: 0.8em; }
}