@charset "UTF-8";
@import url(_variables.css);
@import url(_reset.css);
@import url(_font.css);

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-touch-callout:none;
}

html,body,div,span,object,h1,h2,h3,h4,h5,h6,p,a,abbr,address,cite,em,img,strong,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,section,summary,audio,video {
	border:0;
	vertical-align:baseline;
	font-family:var(--f_nsN);
}

html, body {margin:0;padding:0;font-size:62.5%;color:var(--gray_90);font-family:var(--f_nsN);}
em {font-style:normal;}
p {font-size:1.5rem;line-height:1.5;font-weight:300;}

body.mobile {overflow-y:scroll;height:100%;touch-action: auto;}

/* screen reader only*/
.sr-only {overflow:hidden;position:absolute;border:0;width:.1rem;height:.1rem;clip:rect(.1rem, .1rem, .1rem, .1rem);clip-path:inset(50%);}

/* display */
.dis_block{display:block!important}
.dis_flex{display:flex!important}
.dis_inblock{display:inline-block!important}
.dis_inflex{display:inline-flex!important}

/* align */
.flex-col{flex-direction:column!important}
.flex-row{flex-direction:row!important}
.fx_wrap_w{flex-wrap:wrap!important;}
.fx_wrap_nw{flex-wrap:nowrap!important;}
.fx_align_c{align-items:center!important}
.fx_align_l{align-items:flex-start!important}
.fx_align_r{align-items:flex-end!important}
.fx_valign_c{justify-content:center!important}
.fx_valign_l{justify-content:flex-start!important}
.fx_valign_r{justify-content:flex-end!important}
.fx_valign_bw{justify-content:space-between!important}
/* aling 초기화 */
.flex_wrap_int {flex-wrap:initial!important;}

/* gap */
.gap0{gap:0!important}
.gap10{gap:10px!important}
.gap20{gap:20px!important}
.gap30{gap:30px!important}
.gap40{gap:40px!important}
.gap50{gap:50px!important}
.gap60{gap:60px!important}
.gap70{gap:70px!important}
.gap80{gap:80px!important}
.gap90{gap:90px!important}

/* margin */
.mauto {margin:0 auto !important}
.mt_10 {margin-top:10px !important}
.mt_20 {margin-top:20px !important}
.mt_30 {margin-top:30px !important}
.mt_40 {margin-top:40px !important}
.mt_50 {margin-top:50px !important}
.mt_60 {margin-top:60px !important}

.mb_10 {margin-bottom:10px !important}
.mb_20 {margin-bottom:20px !important}
.mb_30 {margin-bottom:30px !important}
.mb_40 {margin-bottom:40px !important}
.mb_50 {margin-bottom:50px !important}
.mb_60 {margin-bottom:60px !important}

.ml_20 {margin-left:20px !important}
.ml_10 {margin-left:10px !important}
.ml_30 {margin-left:30px !important}
.ml_40 {margin-left:40px !important}
.ml_50 {margin-left:50px !important}
.ml_60 {margin-left:60px !important}


/* 텍스트 컬러 */
.tt_blue {color:var(--blue_70) !important}
.tt_pink {color:var(--pink_70) !important}
.tt_green {color:var(--green_70) !important}
.tt_yellow {color:var(--yellow_70) !important}
.tt_gray {color:var(--gray_80) !important}
.tt_gray_70 {color:var(--gray_70) !important}
.tt_purple {color:var(--purple_70) !important}

/* text align */
.tx_left {text-align:left !important}
.tx_right {text-align:right !important}
.tx_center {text-align:center !important}

/* 스크롤 디자인 커스텀 */
*::-webkit-scrollbar {width:6px;}   
*::-webkit-scrollbar-thumb {border-radius:6px;background:var(--gray_50);}

::placeholder {color:var(--gray_70);font-weight:300}

/* input - Default*/
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {opacity:0;cursor:pointer;}

input[type="file"] {cursor: pointer;}

label {font-size:1.6rem;font-weight:700;color:var(--gray_90);cursor:pointer;}

/* input 기본 */
input[type="tel"],
input[type="password"] {padding:1.2rem;margin:0;border:.1rem solid var(--gray_60);border-radius:.6rem;font-size:1.6rem;font-weight:400;line-height:1.2;color:var(--gray_60);font-family:var(--f_nsN);background:#FFF;}

input:disabled
input[type="tel"]:disabled,
input[type="password"]:disabled {border:none;background:transparent;}

input[type="time"] {padding:1rem;border:1px solid var(--gray_40);border-radius:0.6em;color:var(--gray_90);font-size:1.6rem;font-family:var(--f_nsN);background:url('../images/common/ico_time_gray.svg') calc(100% - 14px) center no-repeat;}

input,
form input,
input[type="text"] {padding:1.2rem;margin:0;border:.1rem solid var(--gray_60);border-radius:.6rem;font-size:1.6rem;font-weight:300;line-height:1.2;color:var(--gray_90);font-family:var(--f_nsN);background-color:#fff;}
input:disabled
input[type="text"]:disabled,
input[type="text"].disabled {border:1px solid var(--gray_40);background:var(--gray_30);}
input[type="text"].no-line {border:none;}
input[type="text"].no-line:disabled {border:none;background:var(--gray_20);}

/* select 스타일 리셋*/
select {-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer;}
select::-ms-expand {display:none;}
select:hover, select:focus, select:active {outline:none;}
select {padding:1.2rem 4rem 1.2rem 1.2rem;margin:0;border:1px solid var(--gray_40);border-radius:.6rem;color:var(--gray_90);font-size:1.6rem;font-weight:600;font-family:var(--f_nsN);
background:#fff url('../images/common/arr_under_gray.svg') calc(100% - 8px) center no-repeat;}
select:hover, .select:hover {border-color:#888;}
select:focus, .select:focus {border-color:#aaa;box-shadow:0 0 1px 3px rgba(59, 153, 252, .7);box-shadow:0 0 0 3px -moz-mac-focusring;color:#222;outline:none;}
select:disabled, .select:disabled, .select.disabled{opacity:0.5;pointer-events:none;}
select.no-line, .select.no-line {border:none;}

/* input - Default*/
input[type="checkbox"] {display: none;}
input[type="checkbox"] + label::before {content: '';display: block;width: 1.6rem;height: 1.6rem;cursor: pointer;background: url('../images/common/checkbox.svg') no-repeat;}
input[type="checkbox"]:checked + label::before {content:''; background: url('../images/common/checkbox_on.svg') no-repeat;}
input[type="file"] {cursor: pointer;}
input[type="radio"] {position: absolute; width: 0.1rem; height: 0.1rem; padding: 0; margin: -0.1rem; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
input[type="radio"] + label {display: inline-block; position: relative; padding-left:2.5rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
input[type="radio"] + label:before {content: ''; position:absolute; left: 0; top:0; width:1.6rem; height:1.6rem; text-align: center; background:url('../images/common/checkbox.svg') no-repeat;}
input[type="radio"]:checked + label:after {content: ''; position: absolute; top: 0; left:0; width:1.6rem; height:1.6rem;background:url('../images/common/checkbox_on.svg') no-repeat;}

.accgrap{display:block}

/* BUTTON */
a {text-decoration: none;color: #333;}
button {border:0;font-family:var(--f_nsN);cursor:pointer;transition:var(--ani_time);background:none;}

.btn {display:inline-flex;align-items:center;justify-content:center;min-width:7rem;padding:1rem 1.2rem;border-radius:.6rem;color:#fff;font-size:1.4rem;font-weight:500;letter-spacing:-0.01em;font-family:var(--f_nsN);transition:var(--ani_time);background:var(--blue_70);cursor:pointer;}
.btn:hover {background: var(--blue_80);}
.btn:has(i) {gap:.5rem;}

/* 버튼 컬러 */
.btn.orange {border: .1rem solid var(--orange_60); background: var(--orange_60);}
.btn.orange:hover {border: .1rem solid var(--orange_70); background:var(--orange_70);}

.btn.pink {border: .1rem solid var(--pink_60); background:var(--pink_60);}
.btn.pink:hover {border: .1rem solid var(--pink_70); background:var(--pink_70);}

.btn.gray {background:var(--gray_70) !important;}
.btn.gray:hover {background:var(--gray_80) !important;}

/* btn-outline */
.btn.white {border:.1rem solid var(--blue_70);color:var(--blue_70);background:#fff;}
.btn.white:hover {background:var(--blue_20);}
/* btn-outline >> 다운로드버튼*/
.btn.white.bt_down {display: flex;align-items: center; gap: 1rem;padding:1.75rem !important;}
.btn.white.bt_down:after {content: '';display: block;width: 2.5rem;height: 2.5rem;background: url('../images/common/ico_download_blue.svg') no-repeat 50%;background-size: 100%;}
.btn.white.bt_down.sm {padding:1.3rem 1.6rem !important;}

.btn.white.bt_pin {display: flex;align-items: center; gap: 1rem;padding:1.75rem !important;}
.btn.white.bt_pin:after {content: '';display: block;width: 2.5rem;height: 2.5rem;background: url('../images/common/ico_pin_blue.svg') no-repeat 50%;background-size: 100%;}

.btn.line-bk {border:.1rem solid var(--gray_50);color:var(--gray_80);background:none;}
.btn.line-bk:hover {background:var(--gray_20);}

/* 텍스트 버튼 */
.tx-btn {font-size:1.5rem;font-weight:500;color:#757575;transition:var(--ani_time);}
.tx-btn:hover {color:var(--gray_80);}
.tx-btn.white {color:#fff;}
.tx-btn.white:hover {color:#fff;}

.btn.event {width: 44rem;height: 5rem;line-height: 1.2;text-align: center;font-size: 2.2rem;background: #FF1286;} /*이벤트용 버튼*/
.btn.event:hover {background:#d51774}

/* 버튼 사이즈 */
.btn.sm {font-size:1.4rem;padding:.8rem 1rem;}
.btn.big {font-size:1.6rem;padding:1.3rem 1.2rem;max-height:4.8rem;min-width:9rem;}

/* tab 버튼*/
.bn_tab {padding: 1.6rem 2rem; font-weight: 800; font-size: 1.6rem;}
.bn_tab.on {display: flex; gap: .5rem; background: var(--c_blue_1);}
.bn_tab.on::after {content:"";display:block;width: 1.6rem;height: 1.6rem;background:url('../images/common/arrow_under_blue.svg') no-repeat;}

/* 팝업 닫기버튼 */
.bn_close {width:7.2rem;height:7.2rem;border-radius:20rem;background:#F6F6F6 url('../images/common/ico_close_bk.svg') no-repeat 50% 50%;}
.bn_close:hover {background-color: #ededed;}
.bn_close.bk {background:var(--gray_100) url('../images/common/ico_close_w.svg') no-repeat 50% 50%; transition: var(--ani_time);}
.bn_close.bk:hover {background-color:var(--gray_110);}
.bn_close2 {width: 4rem; height: 4rem; background: url('../images/common/btn_ico_d.svg') no-repeat;}

/* 프린트/저장버튼그룹 */
.etcwrap{display:flex;gap:1.5rem;justify-content:flex-start;align-items:center;margin-top:2rem;}
.etcwrap button{display:flex;align-items:center;gap:.2rem;color:var(--gray_80);font-weight:800;}
.etcwrap button::before{content:"";display:block;width:1.8rem;height:1.8rem;background:url('../images/common/ico_print.svg') no-repeat;transition:var(--ani_time);}
.etcwrap button:hover {color:var(--blue_70)}
.etcwrap button:hover::before {background-image:url('../images/common/ico_print_blue.svg')}
.etcwrap button.send::before {background-image:url('../images/common/ico_send.svg');}
.etcwrap p {color:var(--gray_80);}
.etcwrap p > span {font-weight:800;}

/* TABLE */
table {display:table;width:100%;font-weight:400;background:#fff;}
table caption {overflow:hidden;position:absolute;border:0;width:.1rem;height:.1rem;clip:rect(.1rem, .1rem, .1rem, .1rem);clip-path:inset(50%);}
table th {padding:1.8rem 1rem;border-width:0 .1rem .1rem 0;border-style:solid;text-align:center;letter-spacing:-0.05em;}
table th, table td {border-left:.1rem solid var(--gray_30);border-bottom:.1rem solid var(--gray_30);margin-left:-.1rem;vertical-align:middle;word-wrap:break-word;word-break:keep-all;color:#757575;font-size:1.6rem;}
table td {padding:.8rem;}
table thead th {border-color:var(--gray_20);color:#FFF;background:var(--gray_60);}
table tbody th {border-color:var(--gray_30);color:#FFF;}
table th:first-child, table td:first-child {border-left:none;}
table th:last-child, table td:last-child {border-right:none;}
table thead tr:nth-child(1) th:first-child {border-radius:1rem 0 0 0;}
table thead tr:nth-child(1) th:last-child {border-radius:0 1rem 0 0;}
table th, table td img {vertical-align:middle}
table.center tbody tr td{text-align:center;}
table.center tbody tr td > * {vertical-align:middle;}
table thead th span.step_tit {display:flex;justify-content:center;align-items:center;gap:.5rem;line-height:2.5rem;}
table.even-bg tbody tr:nth-child(even) {background:var(--gray_10);}

/* 테이블 바디*/
table tbody tr td {font-weight:400;color:var(--gray_80);line-height:1.5}
thead tr th, tbody tr td {width:5%;}
thead tr th {font-weight:700;font-size:1.6rem;}

.table_wrap {margin-top:2rem;border-radius:1.07rem;border:1px solid var(--gray_40);}
.tbl_basic {border-radius:1.07rem;}
.tbl_basic thead th {border-color:var(--c_white);border-bottom-color:var(--gray_40);color:var(--gray_80);background:var(--gray_20);}
.tbl_basic thead th.type02 {font-weight:600;}
.tbl_basic tbody tr:nth-child(odd) {background:#fff;}
.tbl_basic tbody tr:nth-child(even) {background:#FCFCFC;}
.tbl_basic tbody tr td {line-height:3.5;border-left:.1rem dashed var(--gray_40);border-bottom:.1rem solid var(--gray_40);}
.tbl_basic tbody tr td:nth-of-type(1) {border-left:0;}
.tbl_basic tbody tr:last-child td {border-bottom: 0;}
.tbl_basic tbody tr:last-child td:first-of-type {border-radius:0 0 0 1rem;}
.tbl_basic tbody tr:last-child td:last-of-type {border-radius:0 0 1rem 0;}

/*테이블 헤더 스타일*/
.th_yellow.type01 {background:var(--yellow_60);color:var(--c_white);border:none;}
.th_pink.type01 {background:var(--pink_60);color:var(--c_white);border:none;}
.th_mint.type01 {background:var(--green_60);color:var(--c_white);border:none;}

.th_blue.line.type01 {background:var(--blue_20);color:var(--blue_70);border:1px solid var(--blue_40);border-top:none}
.th_blue.line-right {border-right:1px solid var(--blue_40);}

.th_yellow.type02 {background:var(--yellow_10);border-width:.1rem .1rem .1rem 0;border-style:solid;border-color:var(--yellow_30);color:var(--yellow_70);}
.th_pink.type02 {background:var(--pink_10);border-width:.1rem .1rem .1rem 0;border-style:solid;border-color:var(--pink_30);color:var(--pink_70);}
.th_mint.type02 {background:var(--green_10);border-width:.1rem .1rem .1rem 0;border-style:solid;border-color:var(--green_30);color:var(--green_70);}

.td_pink {color:var(--pink_70);font-weight:800;}
.td_yellow {color:var(--yellow_70);font-weight:800;}
.td_mint {color:var(--green_70);font-weight:800;}

.tbl_basic .th_deep {background:var(--gray_60);color:var(--c_white);}
.tbl_basic .th_deep_m {background:var(--gray_70);color:var(--c_white);}

.table_wrap{position:relative;width:100%;}
.table_wrap .table-icon{display:block;opacity:1;}

.td_lst{display:flex;}
.td_lst li{display:flex;flex-direction: column;text-align: center;max-width:100%;}
.td_lst li span,
.td_lst li b{min-height:7rem;min-width:6.6rem;padding:1.6rem 2rem;border:.1rem solid #E3EEF3;border-left:0;border-top:0;}
.td_lst li:first-child span,
.td_lst li:first-child b{border-left:.1rem solid #E3EEF3;}
.td_lst li b{font-size:1.5rem;font-weight:400;line-height:1.5;color:var(--c_blue);border-top:.1rem solid #E3EEF3;background:#F7FAFD;}

/* 커스텀 테이블 */
.table_ul {width:100%;}
.table_ul strong{padding:2rem;}

.table_hd {display:flex;font-family:var(--f_nsN);font-weight:400;}
.table_hd li {padding:1.8rem 0;border-right:1px solid var(--gray_20);text-align:center;color:#FFF;background:var(--gray_60);}
.table_hd li:nth-child(1) {width:calc(100% - 85%);border-radius:1rem 0 0 0;}
.table_hd li:nth-child(2) {width:21%;}
.table_hd li:nth-child(3) {width:32%}
.table_hd li:nth-child(4) {width:55%}
.table_hd li:nth-child(5) {width:calc(100% - 86%);border-radius:0 1rem 0 0;border:0;}

.table_ul .depth1{display:flex;border-bottom: 1px solid var(--gray_30);}
.table_ul .depth1 .num{display:flex;align-items:center;justify-content:center;padding:1rem;width:12%;}
.table_ul .depth2{display:flex;flex-direction:column;}
.table_ul .depth2 strong{display:flex;align-items:center;width:20.1%;border-left:1px solid var(--gray_30);border-right:1px solid var(--gray_30);font-weight:500;}
.table_ul .depth3 strong{width:31.5%;border:none;}
.table_ul .depth2 li{display:flex;}
.table_ul .depth1,
.table_ul .depth2,
.table_ul .depth3 {width:100%; font-family:var(--f_nsN);}
.table_ul .depth3 li{position:relative;display:flex;align-items:center;gap:.2rem;border-top:1px solid var(--gray_30);line-height:1.2;}
.table_ul .depth3 li:first-child{border:0;}
.table_ul .depth3 ul{display:flex;flex-direction:column;gap:1rem;width:54.4%;padding:2rem;border-left:1px solid var(--gray_30);border-right:1px solid var(--gray_30);color:var(--gray_70);}
.table_ul .depth3 ul li {border:0;}


/* pc 최소사이즈 1280 기준 1220*/
@media only screen and (max-width:1279px){
	table thead th span.step_tit{flex-direction:column;align-items:center;}
}

/* 공통 아이콘*/
.mark.small {display: block; width:2.5rem; height:2.5rem; margin: auto;font-size:0;}
.small.sun {background:url('../images/common/sun_small.svg') no-repeat 50%;}
.small.moon {background:url('../images/common/moon_small.svg') no-repeat 50%;}

.mark.big {display: block; width: 11rem; height: 11rem;}
.big.sun {background:url('../images/common/sun_big.svg') no-repeat 50%;}
.big.moon {background:url('../images/common/moon_big.svg') no-repeat 50%;}

.big.sun:hover,
.big.sun:active,
.big.sun.on {background:url('../images/common/sun_big_on.svg') no-repeat 50%;}

.big.moon:hover,
.big.moon:active,
.big.moon.on {background:url('../images/common/moon_big_on.svg') no-repeat 50%;}

/* icon */
.ico {display:block;width:2.4rem;height:2.4rem;background-repeat:no-repeat;background-position:50%;overflow:hidden;}
.ico.sm {width:1.8rem; height:1.8rem;}
.ico.big {width:3.2rem; height:3.2rem;}

.ico.icon01 {background-image:url('../images/common/ico_tit01.svg');}/*책가방*/
.ico.icon02 {background-image:url('../images/common/ico_tit02.svg');}/*책*/
.ico.icon03 {background-image:url('../images/common/ico_tit03.svg');}/*메달*/
.ico.icon04 {background-image:url('../images/common/ico_tit04.svg');}/*말풍선*/
.ico.icon05 {background-image:url('../images/common/ico_tit05.svg');}/*쓰기*/
.ico.icon06 {background-image:url('../images/common/ico_tit06.svg');}/*상장*/
.ico.icon07 {background-image:url('../images/common/ico_tit07.svg');}/*목록*/
.ico.icon08 {background-image:url('../images/common/ico_tit08.svg');}/*현황*/
.ico.icon09 {background-image:url('../images/common/ico_tit09.svg');}/*설정*/
.ico.icon10 {background-image:url('../images/common/ico_tit10.svg');}/*클립보드*/
.ico.icon11 {background-image:url('../images/common/ico_tit11.svg');}/*그래프*/
.ico.icon12 {background-image:url('../images/common/ico_tit12.svg');}/*원그래프*/
.ico.icon13 {background-image:url('../images/common/ico_tit13.svg');}/*학사모*/
.ico.icon14 {background-image:url('../images/common/ico_tit14.svg');}/*학생추가*/
.ico.icon15 {background-image:url('../images/common/ico_tit15.svg');}/*학교*/
.ico.icon16 {background-image:url('../images/common/ico_tit16.svg');}/*요약*/

.ico.home {background-image:url('../images/common/home.svg');}
.ico.home.wht {background-image:url('../images/common/home_white.svg');}

.ico.down {background-image:url('../images/common/ico_download.svg');}
.ico.down.blu {background-image:url('../images/common/ico_download_blue.svg');}
.ico.down.wht {background-image:url('../images/common/ico_download_white.svg');}

.ico.print {background-image:url('../images/common/ico_print.svg');}
.ico.print.blu {background-image:url('../images/common/ico_print_blue.svg');}
.ico.print.wht {background-image:url('../images/common/ico_print_white.svg');}

.ico.save2 {background-image:url('../images/common/ico_save.svg');}
.ico.save2.blu {background-image:url('../images/common/ico_save_blue.svg');}
.ico.save2.wht {background-image:url('../images/common/ico_save_white.svg');}

.ico.info {background-image:url('../images/common/ico_info_yl.svg');}
.ico.info.gr {background-image:url('../images/common/ico_info_gr.svg');}


/* top_box icon */
.ico_32 {display:block;width:3.2rem;height:3.2rem;text-indent:-999px;overflow:hidden;}
.ico_32.student {background: url('../images/common/ico_student.svg') no-repeat 50%;}
.ico_32.excel {background: url('../images/common/ico_excel.svg') no-repeat 50%;}
.ico_32.admin {mask:url('../images/common/ico_admin.svg') no-repeat 50%;-webkit-mask:url('../images/common/ico_admin.svg') no-repeat 50%; background:var(--blue_80)}

.ico_66 {display:block;width:6.6rem;height:6.6rem;text-indent:-999px;overflow:hidden;background-repeat:no-repeat;background-position:50%;background-size:100%;}
.ico_66.minus {background-image: url('../images/common/ico_minus.svg');}
.ico_66.plus {background-image: url('../images/common/ico_plus.svg');}

/* stat ico 32px*/
.state {display:block;width:3.2rem;height:3.2rem;margin:auto;background-repeat:no-repeat;text-indent:-999px;overflow:hidden;}
.state.test {background-image: url('../images/common/ico_test.svg');}/* 검사시작 */
.state.test_no {background-image: url('../images/common/ico_test_no.svg');}/* 미검사 */
.state.learn {background-image: url('../images/common/ico_learn.svg');}/* 해득 */
.state.miss {background-image: url('../images/common/ico_miss.svg');}/* 미해득 */
.state.more {background-image: url('../images/common/ico_more.svg');}/* 보충 */
.state.finish {background-image: url('../images/common/ico_finish.svg');}/* 해득완료, 해당없음 */
.state.basket {background-image: url('../images/common/ico_basket.svg');} /* 삭제 */
.state.download {background-image: url('../images/common/ico_download.svg')} /* 다운로드 */
.state.modify {background-image: url('../images/common/ico_modify.svg')} /* 수정 */
.state.save {background-image: url('../images/common/ico_save_big.svg')} /* 기록 */
.state.download_ppt {background-image: url('../images/common/ico_ppt.svg')} /* 다운로드 ppt*/
.state.download_ppt_off {background-image: url('../images/common/ico_ppt_off.svg')} /* 다운로드 ppt - 비활성 */
.state.download_pdf {background-image: url('../images/common/ico_pdf.svg')} /* 다운로드 pdf*/
.state.download_pdf_off {background-image: url('../images/common/ico_pdf_off.svg')} /* 다운로드 - 비활성 pdf*/

.state.plan {background-image:url('../images/common/ico_plan.svg')} /* 계획 */
.state.match {background-image:url('../images/common/ico_match.svg')} /* 인력매칭 */
.state.nuga {background-image:url('../images/common/ico_nuga.svg')} /* 누가 관리 */
.state.setup {background-image:url('../images/common/ico_setup.svg')} /* 설정 */

button,
button.state {transition:var(--ani_time)}
button.state.setup:hover {background-image:url('../images/common/ico_setup_ov.svg')}
button.state.plan:hover {background-image:url('../images/common/ico_plan_ov.svg')}
button.state.nuga:hover {background-image:url('../images/common/ico_nuga_ov.svg')}
button.state.test:hover,
button:hover .state.test {background-image: url('../images/common/ico_test_ov.svg');}
button.state.basket:hover,
button:hover .state.basket {background-image: url('../images/common/ico_basket_ov.svg');}

/* stat 텍스트 */
.state.tx{width:7.8rem;height:3.5rem;border:.1rem solid;padding:.8rem;font-size:1.5rem;line-height: 1;border-radius:.4rem;font-style:normal;text-indent:0;overflow:hidden;text-align:center;}
.state.tx.more{width:auto;background-color:var(--c_blue_1);color:var(--c_blue);border-color:var(--c_blue); display: inline-block;}/* 보충 텍스트형 */
.state.tx.end{background-color:#f6f6f6;color:#afafaf;border-color:#f6f6f6}/* 완료 텍스트형 */
.state.tx.ing{background-color:var(--c_blue_1);color:var(--c_blue);border-color:var(--c_blue_1)}/* 학습중 텍스트형 */
.state.tx.study{background-color:var(--gray_10);color:var(--gray_80);border-color:var(--gray_50)}/* 학습하기 텍스트형 */
.state.tx.end2{background-color:#F6F6F6;color:#757575;border-color:#E2E2E2} /* 마감 텍스트형 */
.state.tx.ing2{background-color:var(--c_pink_1);color:var(--c_pink_m);border-color:var(--c_pink)} /* 진행중 텍스트형 */
.state.tx.data_no{background-color:var(--gray_10);color:var(--gray_50);border-color:var(--gray_30)}/* 자료없음 텍스트형 */

button.state.tx.study:hover,
button.state.tx.study:focus,
button.state.tx.study:active {background-color:var(--blue_10);color:var(--blue_70);border-color:var(--blue_50);}

/* 진단 상태 아이콘 + 텍스트 노출 */
.txout{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:1.5rem;}
.txout.ing_no{color:var(--gray_70)}
.txout.ing_learn{color:var(--pink_60)}/* 해득 */
.txout.ing_miss{color:var(--blue_60)}/* 미해득 */
.txout.ing_more {color:var(--green_60)}/* 보충 */
.txout.ing_finish {color:var(--blue_70)}/* 보충 */

.txout .state {margin:0}

/* 다문화 여부 아이콘*/
.multi {display:block; width:2rem; height:2rem;margin:0 auto;text-indent:-999px;overflow:hidden;}
.multi.ico_x {background: url(../images/common/ico_x.svg) no-repeat;}
.multi.ico_o {background: url(../images/common/ico_o.svg) no-repeat;}
.multi.ico_x2 {background: url(../images/common/ico_x.svg) no-repeat;}
.multi.ico_o2 {background: url(../images/common/ico_o2.svg) no-repeat;}

/* n차 진단*/
.step{display:inline-block;border: .1rem solid;padding:.8rem;font-size:1.5rem;border-radius:.6rem;}
.step.sp1{background-color:var(--pink_10);color:var(--pink_70);border-color:var(--pink_30)}
.step.sp2{background-color:var(--yellow_10);color:var(--yellow_70);border-color:var(--yellow_30)}
.step.sp3{background-color:var(--green_10);color:var(--green_70);border-color:var(--green_30)}

/* n차 진단 - icon*/
.icon.step-img {display:inline-flex;justify-content:center;align-items:center;width:5.7rem;height:2.2rem;border-radius:2rem;font-style:normal;background:var(--c_white);}
.icon.step-img > span {font-size:1.2rem;text-transform:uppercase;}
.th_yellow.type01 .icon.step-img > span {color:var(--yellow_60)}
.th_pink.type01 .icon.step-img > span {color:var(--pink_60)}
.th_mint.type01 .icon.step-img > span {color:var(--green_60)}


/* tab */
.tabs {width:100%}
.tabs .tab-header-wrap {position:relative;margin-bottom:3rem;}
.tabs .tab-header {position:relative;display:flex;align-items:center;gap:1rem;}
.tabs .tab-header::after{z-index:0;content:"";position:absolute;left:0;bottom:0;display:block;width:100%;height:.2rem;background:var(--blue_80);}
.tabs .tab-header > button {position:relative;padding:2.2rem 4.2rem;font-size:1.6rem;font-weight:500;color:#fff;border-top-left-radius:1rem;border-top-right-radius:1rem;border:.2rem solid var(--blue_80);border-bottom:0;background-color:var(--blue_80);cursor:pointer;}
.tabs .tab-header > button.active {z-index:10;color:var(--blue_80);border-color:var(--blue_80);font-weight:800;background:#fff;}
.tabs .tab-header > button.active::before {content:'';position:absolute;top:-10px;left:50%;transform:translateX(-50%);display:inline-block;width:20px;height:20px;background:url('../images/common/tab_active.svg') no-repeat 50%;}
.tabs .tab-body{padding:0;font-size:1.5rem}

.tabs.type02 .tab-header > button {border: .2rem solid #E2E2E2; border-bottom:0; color: #AFAFAF; background:#fff; }
.tabs.type02 .tab-header > button.active {color:var(--blue_80); border-color: var(--blue_80); background:#fff}

/* tab chart */
.tabs-chart {width:100%}
.tabs-chart .tab-header-chart {position:relative;display:flex;align-items:center;gap:1rem;}
.tabs-chart .tab-header-chart::after{display:none;}
.tabs-chart .tab-header-chart > button {position:relative;padding:2.2rem 4.2rem;font-size:1.6rem;font-weight:800;color:var(--gray_80);border-top-left-radius:1rem;border-top-right-radius:1rem;border:.2rem solid #fff;border-bottom:0;cursor: pointer;background-color:#fff;}
.tabs-chart .tab-header-chart > button.active {z-index:10;color:var(--blue_80);border-color:transparent;background:#fff;}
.tabs-chart .tab-body-chart{padding:0;font-size:1.5rem;display:none;}
.tabs-chart .tab-body-chart.active{display:block;}
.tabs-chart.type02 .tab-header-chart > button {border: .2rem solid #E2E2E2; border-bottom:0; color: #AFAFAF; background:#fff; }
.tabs-chart.type02 .tab-header-chart > button.active {color:var(--blue_80); border-color: var(--blue_80); background:#fff}

/* 탭인탭 */
.tabintab.tabs {padding-top:3rem;}
.tabintab.tabs .tab-header{display:flex;justify-content:center;gap:.8rem;}
.tabintab.tabs .tab-header::after{display:none}
.tabintab.tabs .tab-header > button {position:relative;display:flex;align-items:center;gap:2.7rem;padding:1.6rem;font-size:1.6rem;font-weight:800;color:var(--blue_80);border-radius:.4rem;border:.1rem solid var(--blue_80);cursor: pointer;background-color:var(--bg_body);}
.tabintab.tabs .tab-header > button.active {z-index:10;gap:2.4rem;color:#fff;border-color:var(--blue_80);background:var(--blue_80);}
.tabintab.tabs .tab-header > button::after{content:"";display:block;width:14px;height:4px;border-radius:20rem;background:var(--blue_80);}
.tabintab.tabs .tab-header > button.active::after{width:18px;height:18px;background:transparent url('../images/common/arrow_under_w.svg') no-repeat;background-size:100% auto;}
.tabintab.tabs .tab-body{padding:3rem 0 0;font-size:1.5rem;display:none;}
.tabintab.tabs .tab-body.active{display:block;}


/* ul */
.list_1st{margin-left:1rem;line-height:1.2;}
.list_1st li{position:relative;padding:.4rem .4rem .4rem 1rem;text-align:left;font-size:1.5rem;font-weight:300;}
.list_1st li::before{content:"";position:absolute;left:0;top:50%;display:block;width:.3rem;height:.3rem;border-radius:4rem;transform:translateY(-50%);background:var(--blue_80);}


/*select 스타일 리셋*/
select {cursor:pointer;appearance:none;-moz-appearance:none;-webkit-appearance:none;}
select::-ms-expand {display:none;}
select:hover, select:focus, select:active {outline:none;}
/* select 타입별*/
/* 공통*/
.select {position:relative;margin:auto;border:none;border-radius:.6rem;}
.select .lay {width:100%;}
.select .lay strong {display:block;width:100%;height:100%;}
.select .lay a {position:relative;display:block;width:100%;font-size:1.6rem;font-weight:700;}
.select .lay a::after {content:"";position:absolute;display:block;transform:rotate(0deg);-webkit-transform:rotate(0deg);transition:all var(--ani_time) ease;-webkit-transition:all var(--ani_time) ease;}
.select.on .lists {z-index:10;position:absolute;display:block;width:100%;border:0.1rem solid var(--gray_40);overflow-y:scroll;}
.select .lists {display:none;background:#fff;}
.select .lists ul li {position:relative;text-align:center;}
.select .lists ul li a {display:block;height:4.8rem;line-height:4.8rem;text-align:left;}
.select .lists ul li:hover {background:var(--blue_10);}
.select .lists ul li:hover a {color:var(--blue_70);}
.select .lists ul li .multi2 {position:absolute;right:20px;top:41%;width:auto;margin-top:-10px;padding:.6rem .8rem;border-radius:.2rem;border:1px solid #ddd;color:var(--gray_90);font-size:1.3rem;font-weight:500;font-family:var(--f_nsN);text-indent:0;background:#fff;}
.select .lists ul li .multi2:hover {color:var(--pink_70);border-color:var(--pink_70);background-color:var(--pink_10)}
/* select type01 :: 사용영역(헤더)*/
.select.type01 {width:24rem;height:4.8rem;background:#fff;}
.select.type01 .lay {height:100%;border-radius:.6rem;}
.select.type01 .lay a {display:flex;align-items:center;height:4.8rem;line-height:1;padding:0 2rem;color:var(--blue_70);}
.select.type01 .lay a::after {right:1.5rem;top:1rem;width:2.4rem;height:2.4rem;background-image:url('../images/common/arr_under_blue.svg');background-position:50%;background-repeat:no-repeat;}
.select.type01 .lists ul li a {padding-left: 2rem;}
.select.type01.on .lay a::after {transform:rotate(180deg);-webkit-transform:rotate(180deg);}
.select.type01.on .lists {max-height:20rem;border-radius:.6rem;top:47px;}
/*  select type02 :: 사용영역(학생목록)*/
.select.type02 {width: 7rem; height: 4rem;}
.select.type02 .lay {height: 4rem; border: 0;background-color: #fff; border-radius: 0.8rem; border: 0.1rem solid #E3EEF3;}
.select.type02 .lay a {height: 4rem; line-height: 4rem; padding: 0.9rem 0 0;}
.select.type02 .lay a::after {right: .4rem; top: 0.8rem; width: 2rem; height: 2rem;background: url('../images/common/arr_under_gray.svg') no-repeat 50%;}
.select.type02.on .lay a::after {transform: rotate(180deg);-webkit-transform: rotate(180deg);}
.select.type02.on .lists {border-radius: 0.8rem; height: 8.2rem; overflow: hidden;}
.select.type02 .lists ul li a {height: 4rem; border-top: 0.1rem dotted #E3EEF3; padding: 0.9rem 0 0 0;}
.select.type02 .lists ul li:first-child a {border-top:none;}
.select.type02 i {margin: 0 2rem;}
/*  select type03 :: 사용영역(진단결과)*/
.select.type03 {width:100%; height:5rem;}
.select.type03 .lay {height:5rem; border: 0.1rem solid var(--blue_60); border-radius: .6rem;}
.select.type03 .lay a {height:5rem;line-height:4.7rem; padding: 0 2rem; color:var(--blue_70);word-break:keep-all;font-family: var(--f_nsN);}
.select.type03 .lay a::after {right: 1.5rem; top: 1rem; width: 2.4rem; height: 2.4rem; background: url('../images/common/arr_under_blue.svg') no-repeat;}
.select.type03.on .lay a::after {transform: rotate(180deg);-webkit-transform: rotate(180deg);}
.select.type03.on .lists {max-height: 20rem; border-radius: .6rem;}
.select.type03 .lists ul li a {font-size: 1.5rem; padding-left: 2rem;font-family: var(--f_nsN);}
/* select type04 :: 사용영역(나의학급>계획>학습단계설정)*/
.select.type04 {width:50rem;height:4.8rem;}
.select.type04 .lay {height:4.8rem;border:0.1rem solid var(--gray_40);border-radius: 0.6rem;}
.select.type04 .lay a {height:4.8rem;line-height:4.8rem;padding:0 2rem;color:var(--gray_90);}
.select.type04 .lay a::after {right: 1.5rem; top: 1rem; width: 2.4rem; height: 2.4rem; background: url('../images/common/arr_under_gray.svg') no-repeat;}
.select.type04.on .lay a::after {transform: rotate(180deg);-webkit-transform: rotate(180deg);}
.select.type04.on .lists {max-height: 20rem; border-radius: 0.6rem;}
.select.type04 .lists ul li a {font-size: 1.5rem; padding-left: 2rem;}
.select.type04 .lists ul li:hover {background:#fff;}
.select.type04 .lists ul li:hover a {color:var(--blue_80);}

/* 타이틀 badge */
.bg-gray {background: #929EA9;}
.bg-green {background:var(--green_60);}
.tx-gray {color:#929EA9;}
.tx-blue {color:var(--c_blue);}
.badge{display:flex;align-items:center;}
.badge.small {border-radius: 0.8rem; padding: 0.7rem; font-size: 2rem; line-height: 2.3rem; font-weight: 700; background-color:#fff;}
.badge.big {border-radius: 0.8rem; padding: 1rem; font-size: 5.8rem; line-height: 1; font-weight: 700; color:#fff; background:var(--c_blue);}
.badge.round {border-radius: 2rem; padding: 0.8rem 1.2rem; font-size:1.6rem;font-weight:800; color:var(--c_deepblue); background:var(--c_skyblue);}