@charset "UTF-8";
@import url(main.css);
@import url(intro.css);

/* 공통*/
footer {width: 100%; text-align: center; font-size: 1.5rem; background:var(--bg_body);}
.con_wrap {width: 100%;}
.block{display: block;}
.txt_blue{color:var(--c_blue);}

/* nav*/

/*.gnb {background: #fff; border-bottom: 0.1rem solid #6DA9E0; font-family:var(--f_prt); font-weight: 900;}
.gnb ul {display:flex; flex-direction: row; justify-content: center; align-items: center; padding: 2.4rem 0; gap: 5rem;}
.gnb ul li a {display: flex;flex-direction: row; align-items: center; padding: 0; gap: 0.4rem; color:#cacaca;font-size:2rem;font-weight:800; transition: var(--ani_time);}

.gnb ul li:hover a,
.gnb ul li:focus a,
.gnb ul li.gnb_on a {color:#333;}
*/

/* 20230807 수정 */
.gnb {font-family:var(--f_prt);height:100%;}
.gnb ul {display:flex; flex-direction: row; justify-content: center; align-items: center;height:100%;}
.gnb ul li{height:100%;}
.gnb ul > li > a {position: relative;display: flex;flex-direction: row; align-items: center; padding: 0; gap: 0.4rem; height:100%; padding:.6rem 4.6rem;color:#fff;font-size:2rem;font-weight:500; transition: var(--ani_time);}
.gnb ul > li > a:before {content: '';display: inline-block;color: #b1b2b4; position: absolute; top: 29px; left: -1px; width: 2px; height: 3px; border-top: 3px solid #486EF3; border-bottom: 3px solid #486EF3 ;}
.gnb ul > li:first-child > a:before {display: none;}

/* nav on*/
.gnb ul li:hover a,
.gnb ul li:focus a,
.gnb ul li.gnb_on a {font-weight:700;background:#2962FF;}

.gnb ul li .menu_ico {width:2.8rem; height:2.8rem; transition: var(--ani_time);}
.gnb ul li .menu_ico.num1 {background: url('../images/common/ico_menu_s_01.svg') no-repeat 50%;}
.gnb ul li .menu_ico.num2 {background: url('../images/common/ico_menu_s_02.svg') no-repeat 50%;}
.gnb ul li .menu_ico.num3 {background: url('../images/common/ico_menu_s_03.svg') no-repeat 50%;}
.gnb ul li .menu_ico.num4 {background: url('../images/common/ico_menu_s_04.svg') no-repeat 50%;}

/*.gnb ul li:hover .menu_ico.num1,
.gnb ul li:focus .menu_ico.num1,
.gnb ul li.gnb_on .menu_ico.num1 {background: url('../images/common/ico_menu_s_01_on.svg') no-repeat 50%;}

.gnb ul li:hover .menu_ico.num2,
.gnb ul li:focus .menu_ico.num2,
.gnb ul li.gnb_on .menu_ico.num2 {background: url('../images/common/ico_menu_s_02_on.svg') no-repeat 50%;}

.gnb ul li:hover .menu_ico.num3,
.gnb ul li:focus .menu_ico.num3,
.gnb ul li.gnb_on .menu_ico.num3 {background: url('../images/common/ico_menu_s_03_on.svg') no-repeat 50%;}

.gnb ul li:hover .menu_ico.num4,
.gnb ul li:focus .menu_ico.num4,
.gnb ul li.gnb_on .menu_ico.num4 {background: url('../images/common/ico_menu_s_04_on.svg') no-repeat 50%;}
*/

/* header */
.header.main {z-index:1;position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:70px;padding:0 6rem;gap:0;isolation:isolate;background:var(--c_blue_3);}
.header.main h1 {width:32rem;height: 4rem;}

.member {display: flex;flex-direction: row;align-items: center;padding: 0;gap:1.5rem;font-size:1.6rem}
.member .name {color:#fff;display: flex;flex-direction: row;align-items: center;padding: 0;gap: 0.4rem;}
.member .name span {font-weight: 600;}
.member .name i {width: 2.4rem;height: 2.4rem; background: url('../images/common/arrow_circle_white.svg') no-repeat;}
/*.member .level{display:flex;align-items:center;gap:1rem;}*/
.member .level{position:absolute;right:60px;top:130px;display:flex;align-items:center;gap:1rem;}/* 20230807 수정 */
.member .level button.btn{height: 4.6rem;}
.member button.btn {font-family: var(--f_prt); font-weight: 800; display: flex;flex-direction: row; align-items: center;}
.member button.btn i {width: 2rem;height: 2rem; margin-left: 0.4rem; background: url('../images/common/plus.svg') no-repeat; background-size:100%;}
.member button.btn:hover {background:#fff;}
.member button.btn:hover i {transform: rotate(180deg);-webkit-transform: rotate(180deg); transition: all var(--ani_time) ease;-webkit-transition: all var(--ani_time) ease;}

/*subvisual*/
#exam .sub-visual{background:linear-gradient(0deg, rgba(174,217,255,0) 0%, rgba(174,217,255,0.35) 60%, rgba(174,217,255,0.8) 85%, rgba(174,217,255,0.9) 100%), url(../images/common/subvisual_bg_01.svg) no-repeat -25rem -4rem;background-blend-mode: color-burn;}
#result .sub-visual{background:linear-gradient(0deg, rgba(174,217,255,0) 0%, rgba(174,217,255,0.35) 60%, rgba(174,217,255,0.8) 85%, rgba(174,217,255,0.9) 100%), url(../images/common/subvisual_bg_02.svg) no-repeat 0 -8rem;background-blend-mode: color-burn;}
#myclass .sub-visual{background:linear-gradient(0deg, rgba(174,217,255,0) 0%, rgba(174,217,255,0.35) 60%, rgba(174,217,255,0.8) 85%, rgba(174,217,255,0.9) 100%), url(../images/common/subvisual_bg_03.svg) no-repeat -16rem -7rem;background-blend-mode: color-burn;}
#classwrap .sub-visual{background:linear-gradient(0deg, rgba(174,217,255,0) 0%, rgba(174,217,255,0.35) 60%, rgba(174,217,255,0.8) 85%, rgba(174,217,255,0.9) 100%), url(../images/common/subvisual_bg_04.svg) no-repeat -13rem -16rem;background-blend-mode: color-burn;}
#stat_adm .sub-visual{background:linear-gradient(0deg, rgba(174,217,255,0) 0%, rgba(174,217,255,0.35) 60%, rgba(174,217,255,0.8) 85%, rgba(174,217,255,0.9) 100%), url(../images/common/subvisual_bg_01.svg) no-repeat -25rem -4rem;background-blend-mode: color-burn;}
#manage .sub-visual{background:linear-gradient(0deg, rgba(174,217,255,0) 0%, rgba(174,217,255,0.35) 60%, rgba(174,217,255,0.8) 85%, rgba(174,217,255,0.9) 100%), url(../images/common/subvisual_bg_03.svg) no-repeat -16rem -7rem;background-blend-mode: color-burn;}
#chart .sub-visual{background:linear-gradient(0deg, rgba(174,217,255,0) 0%, rgba(174,217,255,0.35) 60%, rgba(174,217,255,0.8) 85%, rgba(174,217,255,0.9) 100%), url(../images/common/subvisual_bg_05.svg) no-repeat -28rem -7rem;background-blend-mode: color-burn;}
.sub-visual .wrap{display: flex;flex-direction: column;gap: 2rem;padding: 4rem 6rem;}

/* 컨텐츠 시작*/
.layout {display: flex; flex-direction: column; gap: 2rem; width: 100%; max-width: initial; font-family: var(--f_prt);}
.container {display: flex; flex-direction: column; align-items: center;gap: 3rem; padding:0rem 6rem 4rem 6rem;}

@media only screen and (max-width:1700px){
    #exam .sub-visual, #manage .sub-visual, #chart .sub-visual{background-size:120%;}
    #result .sub-visual, #myclass .sub-visual, #classwrap .sub-visual, #stat_adm .sub-visual{background-size:110%;}
	.header.main{padding:2rem 3rem;}
	.header.main{padding:0rem 3rem;}
    .sub-visual .wrap{padding:4rem 3rem;}
	.container{padding:0rem 3rem 4rem;}
	.member .level{right:3rem;}
}
@media only screen and (max-width:1400px){
    #exam .sub-visual,#result .sub-visual, #myclass .sub-visual, #classwrap .sub-visual,#stat_adm .sub-visual, #stat_adm .sub-visual, #manage .sub-visual, #chart .sub-visual{background-size:100%;background-position: 0rem 0rem;}
	.header.main h1{width:10rem;}
	.gnb {position:absolute;left:0;top:7rem;width:100%;background:#70A5FD;}
	.gnb ul li a{font-size:1.8rem;}
	.member .level{top:19rem;}
    .layout{padding-top:7rem;}
    #stat_adm.layout{padding-top:0;}
	.container{padding:0rem 3rem 4rem;}

}


/* location*/
.lct_box {font-family: var(--f_prt); width:100%; height:6.8rem; display: flex; flex-direction: row; align-items: center; gap:1.2rem;}
.lct_box .location {width: 27.5rem; height: 4.6rem;display: flex;align-items: center; padding:.8rem 0.4rem 0.6rem; gap: 3rem;}
.lct_box .location li {position:relative; line-height:1;font-size:1.5rem}
.lct_box .location li:not(:last-child)::before {content: ''; position: absolute; width: 1rem;height: 1rem; border-color: #777; right: -1.5rem; top:calc(50% - .5rem); 
    border-right-width: 0.1rem;border-bottom-width: 0.1rem;border-right-style: solid;border-bottom-style: solid; transform: rotate(315deg);}

.title {display: flex;align-items: center; font-family:var(--f_eli); font-size:3.2rem; line-height: 4.5rem; letter-spacing: -0.01em; color: var(--c_blue_3);}
/* .title::before {content: ''; display: block; width:4.8rem;height:4.8rem;background-repeat:no-repeat;background-position:50% 50%;background-size:100% auto;}
.title.num1::before {background-image: url('../images/common/ico_tit_01.svg');}
.title.num2::before {background-image: url('../images/common/ico_tit_02.svg');}
.title.num3::before {background-image: url('../images/common/ico_tit_03.svg');}
.title.num4::before {background-image: url('../images/common/ico_tit_04.svg');} */

/* top_box*/
.top_box {width: 100%; display: flex; gap: 2rem;}
.top_box .inner {display: flex; justify-content: center;width: 100%; padding:3.5rem 5rem; gap:4rem; border-radius: .8rem; border: 0.1rem solid #fff; background: rgba(255, 255, 255, 0.7);backdrop-filter: blur(10px);box-shadow: 10px 10px 40px 0px rgba(53, 73, 141, 0.2);}
.top_box .std {display: inline-flex; align-items: center;padding: 0; gap: 1rem;}
.top_box .std .btn_group {display: flex; align-items: center; gap: 1rem;}
.top_box .std .btn_group .count_txt_input {width: 5.3rem; height: 3.6rem; padding: 0; border: 0.2rem solid #E2E2E2; border-radius:.4rem; font-size: 1.7rem; font-weight: 800; text-align: center; font-family: var(--f_prt);}
.top_box .std .btn_group button.circle_btn {width:  3.6rem; height:  3.6rem;}

.top_box .file {display: inline-flex;align-items: center; padding: 0; gap: 1rem;}
.top_box .inner .item h3 {line-height:1;font-size: 1.8rem; margin-bottom:0;transform: skew(-0.001deg);}

/* top_box icon */
.ico_32 {display: block; width: 6rem; height: 6.7rem; text-indent:-999px;overflow:hidden;}
.ico_32.student {background: url('../images/common/ico_student.png') no-repeat 50%;}
.ico_32.excel {background: url('../images/common/ico_excel.svg') no-repeat 50%;}
.ico_32.admin {background: url('../images/common/ico_admin.svg') no-repeat 50%;background-size: contain;}
.ico_32.stat {background: url('../images/common/ico_stat.png') no-repeat 50%;}

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

/* exam - 학생목록*/
.std_list {width:100%; position: relative;}
.std_list h3 {margin:0; line-height:5rem; font-size:2.2rem; font-weight: 800; font-family:var(--f_prt); color: #555;}
.std_list .table_wrap { margin-top: 2rem;}
.std_list thead tr th {font-weight: 700;font-size: 1.6rem;}
.std_list tbody tr td {text-align: center;}
.std_list thead tr th, .std_list tbody tr td {width:4.5%;}
.std_list thead tr:nth-child(1) th:first-child {border-radius: 1rem 0 0 0;}
.std_list thead tr:nth-child(1) th:last-child {border-radius: 0 1rem 0 0 ;}
.std_list tbody tr td .input_txt {display: none;}
.std_list tbody tr input, .std_list tbody tr select {width:7rem; height: 4rem;border-radius: 0.8rem; border: 0.1rem solid var(--c_blue_1); text-align: center; font-size:1.6rem; font-weight:400; font-family:var(--f_prt); color: #555; }
.std_list tbody tr .input_name {width:14rem;}

/* exam - 학생목록 button icon*/
.std_list .test_learn {color:var(--c_blue); font-size:1.8rem; font-weight: 700;}
.std_list .test_miss {color: #AFAFAF; font-size:1.8rem; font-weight: 700;}


/* footer -공통*/
footer .main_ft {padding: 5vh 0;}
footer p{font-size:1.5rem}

/* modal 공통규격*/
body:has(.modal.active) #fullpage{height:100vh;overflow:hidden;transform:initial !important;}

.modal {z-index: 100; position: fixed; display: none; justify-content: center; align-items: center;width: 100%; height: auto; min-height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.8);}
.modal .pop-test-wrap {width:100%; max-width:120rem;height:86rem;border-radius:0.8rem;border:0.3rem solid var(--c_blue);overflow-y:scroll; -webkit-animation:pop-show .5s;animation:pop-show .5s;background: #fff;}
.modal .pop-test-wrap .popupwrap {border-radius:0; border:none;}
.modal__wrap {position: relative;}

#test01.modal .pop-test-wrap,
#test02.modal .pop-test-wrap,
#test03.modal .pop-test-wrap {max-width: 155rem; height: auto; border-radius:0; border:none; overflow-y: inherit;}

@keyframes pop-show {
    0% {-webkit-transform: scale(.7); transform: scale(.7)}
    40% {-webkit-transform: scale(1.05); transform: scale(1.05)}
    90% {-webkit-transform: scale(.99); transform: scale(.99)}
    100% {-webkit-transform: scale(1); transform: scale(1)}
}

.modal table thead tr th {font-family: var(--f_prt); font-weight: 600;}
.modal table tbody tr td {font-family: var(--f_prt); font-weight: 400; font-size: 1.6rem; letter-spacing: -.05rem;}

/* modal type02 :: 일괄인쇄 팝업창*/
.modal__wrap.type02 {width:56rem; height:34%; overflow-y: visible;}
.mini_pop {width: 100%; padding: 4rem; border: 0.3rem solid var(--c_blue); border-radius: 0.8rem; font-size: 1.6rem; -webkit-animation:pop-show .5s;animation:pop-show .5s; background-color: #fff;}
.mini_pop .inner {display: flex; flex-direction: column; gap: 3rem; text-align: center;}

.mini_pop h4 {display: flex; align-items: center;  gap: 1rem; font-size: 2rem; font-weight: 800;color:var(--c_blue);}
.mini_pop h4:before {content: ""; display: block; width: 6rem; height: 6.7rem; background: url('../images/common/ico_ask.png') no-repeat;}

.mini_pop .btn_wrap {display: flex; justify-content: center; gap: 1rem;}
.mini_pop .btn_wrap .item {display: flex;}
.mini_pop .btn_wrap .item.num1 {width:30%;}
.mini_pop .btn_wrap .item.num2 {width:70%; flex-wrap: wrap; gap: 1rem;}
.mini_pop .btn_wrap .item.num1 input[type="checkbox"] + label {width:100%; line-height: 6.5rem;}
.mini_pop .btn_wrap .item.num2 input[type="checkbox"] + label {width:calc(50% - 1rem);}

.mini_pop .btn_wrap .item label:before {display: none;}
.mini_pop .btn_wrap .item input[type="checkbox"] + label {padding: 1.2rem 1.6rem; border: 0.1rem solid #CACACA; border-radius: 0.4rem; color: #757575; cursor: pointer;background: #fff;}
.mini_pop .btn_wrap .item input[type="checkbox"] + label::after {display: none;}
.mini_pop .btn_wrap .item input[type="checkbox"]:checked + label {color: #fff; border: 0.1rem solid var(--c_blue); background:var(--c_blue);}

.mini_pop a.btn {display: inline-block;}
.mini_pop .bn_close2 {position: absolute;right: 2rem; top: 2rem;}

/* 학급정보*/
#class_info .modal__wrap.type03 {width:42rem; height:34%; overflow-y: visible;}
#class_info .mini_pop h4:before {background: url(../images/contents/ico_tit06.svg) no-repeat;}
#class_info_check .mini_pop h4:before {background: url(../images/contents/ico_tit06.svg) no-repeat;}
#class_info .mini_pop p {text-align:left; margin: 1.5rem 0 0; letter-spacing: -0.05rem; line-height: 2.3rem;}

/* 학급통계다운*/
#class_down .modal__wrap.type03 {width:42rem; height:34%; overflow-y: visible;}
#class_down .mini_pop h4:before {background: url(../images/contents/ico_tit02.svg) no-repeat;}
#class_down_check .mini_pop h4:before {background: url(../images/contents/ico_tit08.svg) no-repeat;}
#class_down .mini_pop p {text-align:left; margin: 1.5rem 0 0; letter-spacing: -0.05rem; line-height: 2.3rem;}

#result_down .modal__wrap.type03 {width:42rem; height:34%; overflow-y: visible;}
#result_down .mini_pop h4:before {background: url(../images/contents/ico_tit02.svg) no-repeat;}
#result_down_check .mini_pop h4:before {background: url(../images/contents/ico_tit08.svg) no-repeat;}
#result_down .mini_pop p {text-align:left; margin: 1.5rem 0 0; letter-spacing: -0.05rem; line-height: 2.3rem;}

#result_down #step_confirm{display:flex;flex-wrap: wrap;align-items:center;gap:20px;}
#result_down #step_confirm button.confirm{display:flex;align-items:center;gap:5px;font-size: 1.5rem;font-weight: bold;}
#result_down #step_confirm button.confirm::before{content:'';display:block;width:30px;height:30px;background:url('../images/contents/confirm.svg') no-repeat;}
#result_down #step_confirm button.confirm.on::before{background:url('../images/contents/confirm_on.svg');}

/* 학급추가, 파일업로드 */
.modal__wrap.type03 {width:42rem; height:34%; overflow-y: visible;}
#class_add .mini_pop h4:before {background: url(../images/contents/ico_tit06.png) no-repeat;}
#class_edit .mini_pop h4:before {background: url(../images/contents/ico_tit06.png) no-repeat;}

#class_add .input_wrap,
#file_upload .input_wrap{display:flex;flex-direction: column; gap: 2rem;}

#class_add .input_wrap input,
#file_upload .input_wrap input {width:100%; height:4rem;line-height: 3.5rem; padding:0.4rem 1.2rem;border-radius: 0.4rem;border:0.1rem solid #E2E2E2; color:#757575; font-family:var(--f_prt);}

#class_add .input_wrap dl {display:flex; align-items: center; }
#class_add .input_wrap dl dt {display: block; flex: 0 0 7rem; height: auto; text-align: left; font-weight: 800; color: #333; letter-spacing: 0.01rem;}
#class_add .input_wrap dl dd {flex:0 0 calc(100% - 7rem);}

#class_edit .input_wrap dl {display:flex; align-items: center; }
#class_edit .input_wrap dl dt {display: block; flex: 0 0 7rem; height: auto; text-align: left; font-weight: 800; color: #333; letter-spacing: 0.01rem;}
#class_edit .input_wrap dl dd {flex:0 0 calc(100% - 7rem);}

#class_add .mini_pop p,
#file_upload .mini_pop p {text-align:left; margin: 1.5rem 0 0; letter-spacing: -0.05rem; line-height: 2.3rem;}

#file_upload .mini_pop h4:before {background: url('../images/common/ico_excel.svg') no-repeat;}

/* 진단하기__modal*/
.test__intro .intro__wrap .bn_close {position: absolute; right:3rem; top: 3rem;}
.test__intro .intro__wrap {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between;  padding: 10rem 5rem 7rem 5rem; background:linear-gradient(180deg, rgba(138,200,255,0.1) 0%, rgba(138,200,255,0.31) 38%, rgba(138,200,255,0.6) 80%, rgba(138,200,255,1) 100%), url('../images/common/test_bg.svg') 0 -110px no-repeat; background-blend-mode: color-burn;}
.test__intro .intro__wrap .con_wrap {position:relative;display:flex;flex-direction: column;align-items: center;gap:1rem;}
.test__intro .intro__wrap .con_wrap h2 {font-family:var(--f_eli)!important;font-weight: 800; font-size: 8rem; line-height: 1; letter-spacing: -0.01em; color:#343A40;}
/* .test__intro .intro__wrap .con_wrap .brand-name{padding-bottom:2rem;font-weight: 800; font-size: 3rem; line-height: 1; letter-spacing: -0.01em; color: #545454;} */
.test__intro .intro__wrap .con_wrap .brand-name{display: block;width: 11.2rem;height: 3.2rem;margin: auto;text-indent: -999px;overflow: hidden;background:url(../images/common/logo_blue.svg) no-repeat;background-repeat: no-repeat;}
.test__intro .intro__wrap .con_wrap p{padding-left:.6rem;}

.test__intro .test_intro_hd {width: 95%; justify-content: space-between; margin: auto; }
.test__intro .test_intro_hd h2{display:flex; flex-direction:row; gap: 1rem;}
.test__intro .test_intro_hd .sub_txt {margin:1rem 0 4rem; font-size: 2.3rem; font-family: var(--f_prt); font-weight: 700; letter-spacing: -0.01em;}
.test__intro .test_intro_hd .title_cover {display: flex; align-items: center; gap: 1.5rem; font-family: var(--f_prt);}
.test__intro .test_intro_hd .btn_wrap {display:flex; gap: 1rem;}
.test__intro .test_intro_hd .btn_wrap .btn {text-align: center; padding:2rem 8rem;font-weight: 800; font-size: 2.1rem; font-family: var(--f_prt);}

.test__intro .test_intro_hd .test_check{position:absolute;right:0;bottom:0;}
.test__intro .test_intro_hd .test_check ul {display:flex; gap: 6rem;}
.test__intro .test_intro_hd .test_check li {position:relative;display: flex; flex-direction: column; justify-content: flex-end; align-items: center;gap:1rem;font-size:2rem; color: #757575;}
.test__intro .test_intro_hd .test_check li strong {color: #333333;}
.test__intro .test_intro_hd .test_check ul li i {display:block; width: 6.5rem; height: 6.5rem;}
.test__intro .test_intro_hd .test_check ul li i.num1 {background: url('../images/common/ico_img01.png') no-repeat;}
.test__intro .test_intro_hd .test_check ul li i.num2 {background: url('../images/common/ico_img02.png') no-repeat 50%;}
.test__intro .test_intro_hd .test_check ul li span{display: flex;flex-direction: column;align-items: center;gap: 0.5rem;}

.test__intro .test_exp h3 {position:relative;display: block; width:30rem;height: 100%;padding:4.5rem 0 0 13rem;color: #fff;font-family: var(--f_eli);font-size:2.6rem;line-height:1.5;background: #2936A3;}
.test__intro .test_exp h3 span {display:block;color:#F5E97E;}
.test__intro .test_exp h3::before {content: ''; position:absolute; left:0;bottom:0;display: block; width: 20.4rem; height: 20rem; background: url('../images/common/test_intro_img02.png') no-repeat;}
.test__intro .test_exp {font-family: var(--f_prt);}
.test__intro .test_exp .checklist {display: flex; align-items: flex-end; justify-content: space-between; width: 100%; height: 28.8rem; margin-top: 5rem;border-radius: 1rem;overflow: hidden; background:#fff;box-shadow: 10px 10px 40px 0px rgba(53, 73, 141, 0.2);}
.test__intro .test_exp .box_item {flex-grow: 1; position: relative; height: 29rem; padding:5rem; font-size: 1.5rem;}
.test__intro .test_exp .box_item:not(:first-child)::before{content: '';display: inline-block;position: absolute;top:5rem;left:0;width:1px;height:65%;background: #D3E0FF;}
.test__intro .test_exp .box_item>p{display: flex;align-items: center;gap: 1rem;font-size: 1.8rem;font-weight: 700;}

.test__intro .test_exp .box_item.num2 {display: flex; flex-direction: column; justify-content: space-between;align-items: flex-start; gap: 3rem;}
.test__intro .test_exp .box_item.num2 ul {width:100%; display: flex; justify-content: space-between; align-items: center;}
.test__intro .test_exp .box_item.num2 ul li img{width:100%;height:auto;}
.test__intro .test_exp .box_item.num2 ul li p {color:#fff;}
.test__intro .test_exp .box_item.num2 ul li:nth-child(2){padding: 2rem;border: var(--line_blue) solid 3px;border-radius: 1rem;}
.test__intro .test_exp .box_item.num2 ul li .row_item {display: inline-flex; justify-content: space-between; color:#444; gap: 1.2rem;;}
.test__intro .test_exp .box_item.num2 ul li .row_item .txt_blue{color: var(--c_blue_3);font-size: 1.6rem;font-weight:700;}
.test__intro .test_exp .box_item.num2 ul li .row_item.num1 {margin-bottom:2rem;}
.test__intro .test_exp .box_item.num2 ul li .row_item{display:flex;align-items:center;}
.test__intro .test_exp .box_item.num2 ul li .row_item dd{display: flex;flex-direction:row;align-items: center;gap:1rem;width:10rem;}
.test__intro .test_exp .box_item.num2 ul li .row_item dd i {display: block; width: 2.5rem; height: 2.5rem;}
.test__intro .test_exp .box_item.num2 ul li .row_item dd i.prev {background:url('../images/common/ico_key01.svg') no-repeat 50%;}
.test__intro .test_exp .box_item.num2 ul li .row_item dd i.next {background:url('../images/common/ico_key02.svg') no-repeat 50%;}
.test__intro .test_exp .box_item.num2 ul li .row_item dd i.top {background:url('../images/common/ico_key03.svg') no-repeat 50%;}
.test__intro .test_exp .box_item.num2 ul li .row_item dd i.foot {background:url('../images/common/ico_key04.svg') no-repeat 50%;}

.test__intro .test_exp .box_item.num3 {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; width:26rem; gap: 1rem; isolation: isolate;}
.test__intro .test_exp .box_item.num3 .col_item {width: 100%;}
.test__intro .test_exp .box_item.num3 .col_item .sub_title {display: flex;flex-direction: row;align-items: center;margin-bottom: 1.5rem; color:var(--c_blue); gap: 0.4rem;}
.test__intro .test_exp .box_item.num3 .col_item .sub_title span {font-weight: 900;font-size: 1.6rem;line-height: 1.8rem;}
.test__intro .test_exp .box_item.num3 .col_item .sub_title i {display:block;width:3.2rem;height:3.2rem;background: url(../images/common/ico_img03.png) no-repeat;background-size: 100%;}
.test__intro .test_exp .box_item.num3 .col_item .chart_wrap {display: flex; flex-direction: column; gap: 2rem; align-items: flex-start;}
.test__intro .test_exp .box_item.num3 .col_item .chart_wrap .chart_bar {width: 100%; background: #E2E2E2; border-radius: 1.5rem; overflow:hidden;}
.test__intro .test_exp .box_item.num3 .col_item .chart_wrap .chart_bar .percent {display: block; width:40%; height: 1.5rem; border-radius: 1.5rem; background: var(--c_blue);}
.test__intro .test_exp .box_item.num3 .col_item .chart_wrap .count_wrap {display: flex; align-items: center; gap: 1rem; color:#fff; font-size:1.5rem; line-height: 2.5rem; color: #AFAFAF;}
.test__intro .test_exp .box_item.num3 .col_item .chart_wrap .count_wrap .circle {width:2.4rem; height:2.4rem;background: var(--c_blue);border-radius: 5rem;color:#FFF;text-align: center; font-weight: 800;}

.test__intro .test_exp .box_item.num4 {display: flex; flex-direction: column; align-items: center;justify-content: space-between;}


.test__intro #step_confirm{display:flex;align-items:center;gap:20px;}
.test__intro #step_confirm button.confirm{display:flex;align-items:center;gap:5px;font-size: 1.5rem;font-weight: bold;}
.test__intro #step_confirm button.confirm::before{content:'';display:block;width:30px;height:30px;background:url('../images/contents/confirm.svg') no-repeat;}
.test__intro #step_confirm button.confirm.on::before{background:url('../images/contents/confirm_on.svg');}


/* 진단하기 문제 시작*/
.test__start {padding: 3.5rem 4.5rem; font-family: var(--f_prt);background:linear-gradient(180deg, rgba(138,200,255,0.1) 0%, rgba(138,200,255,0.31) 38%, rgba(138,200,255,0.6) 80%, rgba(138,200,255,1) 100%), url('../images/common/test_bg.svg') 0 -125px no-repeat; background-blend-mode: color-burn;}
.test__wrap{position: relative;display: flex;flex-direction: column;align-items: center;width: 100%;}
.test__start .start__hd {position: relative; width: 100%; min-height: 7.2rem; display: flex; justify-content: space-between; margin-bottom:2rem;}
.test__start .start__hd .start__title {display: flex;align-items: center; gap: 1rem;}
.test__start .start__hd h2 {display:flex;align-items:center;gap:.6rem;font-weight: 800; font-size: 3.6rem; line-height: 4.1rem; color:var(--c_gray_80)}
.test__start .start__hd h2 a {color:var(--c_gray_80);}
.test__start .start__hd .sub_txt {color:var(--c_gray_80);font-size: 2rem;font-weight:500;}
.test__start .start__hd .bn_close {position:absolute;right:0;top:0rem;}
.test__start .start__hd .btn.blue2 {position:relative;right:9rem;top:0rem;padding: 2.3rem 4.2rem;font-family: var(--f_eli);font-size: 2.4rem;border-radius:5rem;}
/* 문제 유형 선택 버튼*/
.test__start .start__con {position:relative;width:80%;height: 63rem;display:flex; flex-direction: column; align-items: flex-start; padding: 2.5rem 3rem; background: #FFF; border-radius: 0.8rem; box-shadow: 10px 10px 40px 0px rgba(53, 73, 141, 0.2);}
.test__start .start__con .tabmenu {display: flex; justify-content: center; gap: 1rem;}
.test__start .start__con  .btn_group {display: flex; justify-content: center; flex-wrap:wrap; gap: 1rem;}
.test__start .start__con .select.type03{width:50%;}
.test__start .start__con .select.type03.on .lists{z-index:100}

.test__start .start__con .sound_title_box .bn_tab{display:flex;align-items:center;justify-content:space-between;width:calc(25% - 10px);word-break:keep-all;border-color:#AFAFAF;color:#757575;}
.test__start .start__con .sound_title_box .bn_tab.on{color:var(--c_blue);border-color:var(--c_blue);}
.test__start .start__con .sound_title_box .bn_tab::after{content:"";display:block;width:3.2rem;height:3.2rem;background:url(../images/common/ico_speaker_off.svg) no-repeat;}
.test__start .start__con .sound_title_box .bn_tab.on::after{background-image:url(../images/common/ico_speaker_on.svg);}


/* 문제 출제 박스*/
.start__con .quest_wrap {position: relative; display: flex; justify-content: center; align-items: center; padding:3rem 0; font-family: var(--f_prt); font-weight: 800;}
.start__con .slide_box {z-index: 10;display: flex; flex-direction: column; gap: 1rem; width: 100%; margin: auto;}
.quest-box {width:100%; text-align: center; margin:0 auto;}
.quest-box.number {gap: 1rem; font-size: 3rem; line-height: 3.4rem;}
.quest_num {display: inline-flex; gap: 1rem; line-height: 5rem; margin: 0 auto;}
.quest_num span {font-weight: 800; font-size: 3rem; color: var(--c_blue);}
.circle {display: block;border: 0.1rem solid var(--c_blue); border-radius: 10rem; text-align: center; color: var(--c_blue); background:var(--c_blue_1);}
.circle.type02 {width: 5rem;height: 5rem; font-size: 2.5rem !important;}
.circle.type03 {width: 3rem;height: 3rem;}
.quest-box ul li {display: flex;align-items: center;justify-content: center;width:100%;min-height: calc(100vh - 520px);}

.quest_item.single {font-size: 28rem; line-height: 1.4;word-break: keep-all; font-family:var(--f_nnB)}
.quest_item.ready {color:#EDEDED;}

#fluency .quest_item.single {font-size: 12rem;padding-bottom: 5rem;}

#writing .start__con .slide_box {gap:5rem}

/*유창성 긴문장*/
.con_wrap:has(#category_btn9.on) ~ .con_wrap .quest_item.single, .con_wrap:has(#category_btn10.on) ~ .con_wrap .quest_item.single{font-size: 7rem;}

/* 정답 표기 버튼*/
.test__start .answer_box {position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
.test__start .answer_box li:first-child {margin-bottom:15.5rem;}

/* 슬라이드 버튼   background-repeat:no-repeat;background-position:50% 50%;background-size:100% auto;*/
.slide_btn_box {position: absolute;display: inline-flex; justify-content: space-between; top:50%; width: 100%; height: 10.2rem; transform:translateY(-50%);z-index: 10;}
.start__con .slide_btn_box {position: absolute;display: inline-flex; justify-content: space-between; top:50%; width: 132%; height: 10.2rem; transform:translateY(-50%);}
.arr-btn.big {position: absolute; display: block; width:10rem; height:10rem; overflow:hidden; border-radius: 10rem; transition: var(--ani_time);background-repeat:no-repeat;background-color:#fff;box-shadow: 1px 1px 15px 0px rgba(53, 73, 141, 0.3);}
.arr-btn.big.prev {left: 0; background-image:url(../images/common/prev_big_gray.svg);background-position:45% 50%;}
.arr-btn.big.next {right: 0; background-image:url(../images/common/next_big_gray.svg);background-position:55% 50%;}

/* 슬라이드 버튼 hover PC에서만 작동 */
@media (hover: hover) and (pointer: fine) {
	.arr-btn.big:hover {background-color:var(--c_blue);}
    .arr-btn.big:hover.prev{background-image:url(../images/common/prev_big.svg);}
    .arr-btn.big:hover.next{background-image:url(../images/common/next_big\.svg)}
} 

/* 진행단계 그래프*/
.test__start .test__wrap .stage_nav {display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-top:2rem; }
.test__start .test__wrap .stage_nav .frame {display: flex;}
.test__start .test__wrap .stage_nav .frame.num1 {width:calc(100% - 25rem);}
.test__start .test__wrap .stage_nav .frame.num2 {position: relative; display: flex; align-items: center; gap: 2rem;width:auto;}
.test__start .test__wrap .grap__wrap {width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;}
.test__start .test__wrap .grap__wrap .sub_title {display:inline-flex;width:11rem;}
.test__start .test__wrap .grap__wrap .sub_title i {display: block; width: 4rem;height: 4rem;background: url(../images/common/ico_img03.png) no-repeat; background-size: contain;}
.test__start .test__wrap .grap__wrap .sub_title span {line-height: 4rem; font-size:1.8rem; color: var(--c_blue); font-weight: 800;}
.test__start .test__wrap .grap__wrap .chart_wrap {display: flex; flex-direction: row; gap: 2rem; align-items: center; width:calc(100% - 11rem);}
.test__start .test__wrap .grap__wrap .chart_wrap .chart_bar {width:calc(100% - 6.6rem); border-radius: 1.5rem; overflow:hidden; background: #ddd;}
.test__start .test__wrap .grap__wrap .chart_wrap .chart_bar .progress_percent {display: block; width:0%; height: 1.5rem; border-radius: 1.5rem; background: var(--c_blue);}
.test__start .test__wrap .grap__wrap .chart_wrap .count_wrap {display: flex; align-items: center; gap: 1rem; width:auto; font-size: 1.6rem; color:#000;}
.test__start .test__wrap .grap__wrap .chart_wrap .count_wrap span {color:#AFAFAF;font-weight: 800;}
.test__start .test__wrap .grap__wrap .chart_wrap .count_wrap .circle.type01 {width:2.4rem; height:2.4rem; text-align:center; line-height:2.4rem; border-radius:10rem; color:#FFF; background:var(--c_blue);}
.test__start .test__wrap .grap__wrap.off {display: none;}
.test__start .test__wrap .stage__wrap.on{width:100%;} 

/* 문제 저장, 진행단계 활성화 버튼 등*/
.test__start .test__wrap .btn.stage {display:block; padding:0;background: initial;}
.test__start .test__wrap .btn.stage i {display:block; width:14.6rem; height:11.8rem; background: url(../images/common/stage_btn_img.svg) no-repeat 50%;}
.test__start .test__wrap .btn.stage.on > i {width:11.8rem; background: url(../images/common/stage_btn_img_on.svg)no-repeat 50%;}
.test__start .test__wrap .btn.save {color:#fff; transition: var(--ani_time); background: var(--c_blue); }
.test__start .test__wrap .btn.save:hover {background: var(--c_blue_m);}
.test__start .test__wrap .btn.record {background: #333;}
.test__start .test__wrap .btn.record:hover {background: #555;}
.test__start .test__wrap .time_label {font-weight: 800; font-size: 2rem; color: #1F1F1F;}

/* 진행단계 네비게이션 활성화 박스*/
.test__start .test__wrap .stage__wrap .table_wrap {display: none; font-size:1.6rem;}
.test__start .test__wrap .stage__wrap.on {display:block;width:100%;}
.test__start .test__wrap .stage__wrap.on .table_wrap {display:block;}
.test__start .test__wrap .stage__wrap.on .table_wrap{position:relative;display:block;width:100%;overflow-x:auto;-ms-overflow-style:0;min-height:.01%;width:100%;height:auto;margin:.8rem 0;overflow-x:auto;overflow-y:hidden;box-sizing:border-box;}
.test__start .test__wrap .stage__wrap.on .table_wrap table{width:120rem;}
.test__start .test__wrap .stage__wrap.on th, .test__start .start__con .frame .stage__wrap td {width:1%; min-width: 5.7rem;}
.test__start .test__wrap .stage__wrap.on .thead.type02 th {border-width: .1rem .1rem .1rem 0; border-style: solid; border-color: #E3EEF3; color: var(--c_blue); background: #F7FAFD; }
.test__start .test__wrap .stage__wrap.on .tbody.type02 td {border-width: 0 .1rem .1rem 0; border-style: solid; border-color: #E3EEF3; background: #FFFFFF; }
.test__start .test__wrap .stage__wrap.on .thead.type02 th:last-child {border-right:none;}
.test__start .test__wrap .stage__wrap.on .tbody.type02 td:last-child {border-right:none;}
.test__start .test__wrap .stage__wrap.on .tablewrap{margin:0;}
.test__start .test__wrap .stage__wrap.on .td_lst li b{min-height:3rem; cursor: pointer;color: var(--c_lightblue_1);border-color: rgba(200, 224, 244, 0.5);background: var(--c_blue)}
.test__start .test__wrap .stage__wrap.on .td_lst li span, .td_lst li b{min-height:4rem;padding-top:.5rem;padding-bottom:.5rem;border-color: rgba(191, 200, 221, 0.5);background:#fff;}


/* 진단하기 - 읽기 별도 스타일*/
#reading .test__start .start__con .stage_nav .frame.num1 {width:calc(100% - 28rem);}

/* 진단하기 - 쓰기 별도 스타일*/
#writing .test__start .start__con .stage_nav .frame.num1 {width:calc(100% - 40rem);}
#writing .quest-box.number {position: relative; display: flex; align-items: center; justify-content: center;font-size: 3rem; line-height: 3.4rem;}
#writing .quest-box .quest_btn {position: absolute;width: 23rem; right: 0; }
#writing .quest-box .quest_btn .at-once {display: flex; float: right; align-items: center; flex-direction: row-reverse; gap: 0.5rem; color: #333; font-size: 2rem; font-weight: 800; cursor: pointer;}
#writing .quest-box .quest_btn .at-once::before {content: ""; display: block; width: 3.2rem; height: 3.2rem; background: url(../images/common/ico_speaker.svg) no-repeat; background-size: 100%; background-position: 50%;}

.quest_item.group {display: flex;justify-content: center;align-items: center;}
.unit {display: flex; align-items: center;width:40rem; height:35rem; padding:6rem; border: 0.1rem solid #CACACA; border-radius: 0.4rem; }
.unit:after {content:"";display:block; width: 100%; height: 24rem; margin:0 auto;}
.unit::after {background: url(../images/common/play_off.svg) no-repeat;background-size: 100%; background-position: 50%;}
.unit.on {border: 0.1rem solid var(--c_blue); border-radius: 0.4rem; background: #F7FAFD;}
.unit.on::after {background: url(../images/common/play_on.svg) no-repeat;background-size: 100%; background-position: 50%;}

@media only screen and (max-width:1800px){
    .test__intro .test_exp .checklist{flex-wrap:wrap;height:auto;overflow: initial;}
    .test__intro .test_exp h3{padding:2rem 0rem 2rem 16rem;width:100%;height: auto;border-radius: 1rem 1rem 0rem;}
    .test__intro .test_exp h3::before{width: 18.4rem;height: 17rem;background-size: contain;}
    .test__intro .test_exp h3 span{display:inline; padding-left: 1rem;}
    .test__intro .test_exp .box_item.num3 {width:calc(100% - 91rem);}
}

@media only screen and (max-width:1520px){
	#fluency .quest_item.single {font-size: 12rem;}
}

@media only screen and (max-width:1400px){
	.test__intro .intro__wrap {height: 75rem; overflow-y: scroll;}
    .test__intro .test_exp .box_item{height: auto;padding: 4rem;}
    /* .test__intro .test_exp .box_item.num2 {width:100%;}
    .test__intro .test_exp .box_item.num2::after{content: '';display: inline-block;position: absolute;bottom:0;width:92%;height:1px;;background: #D3E0FF;}
    .test__intro .test_exp .box_item.num3 {width:calc(100% - 48.5rem);} */
	#fluency .start__con .slide_box {gap: 0.5rem;}
	#fluency .quest_item.single {font-size: 10rem;}
    .con_wrap:has(#category_btn9.on) ~ .con_wrap .quest_item.single, .con_wrap:has(#category_btn10.on) ~ .con_wrap .quest_item.single{font-size: 6rem;}

}

@media only screen and (max-width:1200px){
    .test__intro .test_intro_hd .test_check{position:static;margin-bottom:2rem;}
    .test__intro .test_exp .box_item.num2 {width:100%;}
    .test__intro .test_exp .box_item.num2::after{content: '';display: inline-block;position: absolute;bottom:0;width:92%;height:1px;;background: #D3E0FF;}
    .test__intro .test_exp .box_item.num3 {width:calc(100% - 48.5rem);} 
    .test__start{padding: 2.5rem 3.5rem;}
    .test__start .start__hd .btn.blue2{padding: 1.8rem 3.6rem;font-size: 2rem;}
    .test__start .start__con .stage_nav .frame.num1{width:calc(100% - 28rem);}
    .test__start .start__con .stage_nav .frame.num2{width:auto;}
    .quest_item.single{font-size:22rem;line-height:1.2;}
    .test__start .test__wrap .btn.stage i{width:10rem;background-size: contain;}
    .test__start .test__wrap .btn.stage.on > i{width:8rem;background-size: contain;}
    .arr-btn.big{width:6rem;height:6rem;background-size:2rem;}
    .mark.big{width:6rem;height:6rem;background-size:100%;}
	.mark.big:hover {width:6rem;height:6rem;background-size:100%;}
    .test__start .answer_box li:first-child{margin-bottom:12.2rem;}
    .test__start .slide_btn_box{height:6rem;}
    .test__start .table_wrap ul{width:57rem;}
	#writing .test__start .start__con .stage_nav .frame.num1 {width: calc(100% - 35rem);}
	#reading .test__start .start__con .stage_nav .frame.num1 {width: calc(100% - 22rem);}
	.unit {width: 30rem; height: 24rem; padding: 2rem 4rem;}
	.unit:after {height: 20rem;}
}

@media only screen and (max-width:1000px){
    .test__intro .test_exp .box_item {padding: 3rem;}
    .test__intro .test_exp .box_item.num2 ul{flex-wrap:wrap;gap: 2rem;}
    /* .test__intro .test_exp .box_item.num2 ul li:first-child{width:100%;}
    .test__intro .test_exp .box_item.num2 ul li:first-child .txt_green span{display:inline;}
    .test__intro .test_exp .box_item.num2 ul li{width:17rem;} */
    .test__intro .test_exp .box_item.num3{width:calc(100% - 25.5rem);}
    .test__start .start__con .table_wrap ul{width:36rem;}

	#writing .quest-box .quest_btn .at-once {font-size: 1.7rem;}
	#writing .quest-box .quest_btn .at-once::before {width: 2.5rem;height: 2.5rem;}
}

/* 쓰기 일괄작업 */
.popupwrap.all-pop {height:100%;padding:9rem 6rem 10rem;}
.all-pop .title_wrap {display:flex;flex-direction:column;gap:2rem;}
.all-pop .title_wrap h1 {display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1rem;margin:0;}
.all-pop .title_wrap h1::before {display:none;}
.all-pop .title_wrap h1 .badge.big {font-size:3rem;}
.all-pop .title_wrap h1 .badge.small {border:.1rem solid var(--c_blue);background:#fff;color: var(--c_blue);}
.all-pop .title_wrap .inner {display:flex;align-items:center;justify-content:space-between;}

.all-pop .wa_result {-webkit-appearance:auto;appearance:auto;min-width:6rem;min-height:3rem;padding:.8rem;border:1px solid var(--line_gray);border-radius:.3rem;font-size:1.5rem;}


/* result 컨텐츠 시작*/
.top_box .inner h3 {font-weight: 800; font-size: 1.8rem; line-height: 120%; color: var(--c_gray_80); margin-bottom:2rem;}
.top_box .inner h3 span{font-weight: 400;}
.top_box .inner.type02{width:calc(100% - 30rem);}
.top_box .inner.type03{width:46rem;}/* 그래프 wrap*/

.top_box .inner.type02 .group_box {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1rem;width:13rem; padding: 0; }
.top_box .inner.type02 .group_box .item {display: flex; width:100%;}
.top_box .inner.type02 .group_box .item .level{width:100%}
.top_box .inner.type02 .group_box .item.num2 {display: flex; flex-direction: column; align-items: flex-start; gap: 2rem;font-weight: 800; color: var(--c_blue);}
.top_box .inner.type02 .group_box .item.num2 ul li:first-child {margin-bottom:1rem; font-size: 1.8rem; font-weight: 600; color: var(--c_gray_80);}
.top_box .inner.type02 .group_box .item.num2 ul li:last-child {font-size: 2.4rem;}

.top_box .inner.type02 .report_box {display: flex;justify-content: center; gap: 2rem; padding:0.5rem 0; width:calc(100% - 14rem);}
.top_box .inner.type02 .report_box .item {display: flex;flex-direction:column;align-items:center;justify-content:center; width:calc(33.3% - 1rem);padding:2.8rem 0; border-radius: .8rem;font-size: 1.6rem;text-shadow: 1px 1px 1px rgb(0 0 0 / 10%);}
.top_box .inner.type02 .report_box .item.num1 {background:linear-gradient(0deg, rgba(229,187,64,0.85) 0%, rgba(229,187,64,1) 25%, rgba(229,187,64,1) 75%, rgba(229,187,64,0.85) 100%); color: #fff;}
.top_box .inner.type02 .report_box .item.num2 {background:linear-gradient(0deg, rgba(212,124,102,0.85) 0%, rgba(212,124,102,1) 25%, rgba(212,124,102,1) 75%, rgba(212,124,102,0.85) 100%); color: #fff;}
.top_box .inner.type02 .report_box .item.num3 {background:linear-gradient(0deg, rgba(82,176,108,0.85) 0%, rgba(82,176,108,1) 25%, rgba(82,176,108,1) 75%, rgba(82,176,108,0.85) 100%); color: #fff;}
.top_box .inner.type02 .report_box .item.num4 {background:linear-gradient(0deg, rgba(13,175,166,0.85) 0%, rgba(13,175,166,1) 25%, rgba(13,175,166,1) 75%, rgba(13,175,166,0.85) 100%); color: #fff;}
.top_box .inner.type02 .report_box .item.num5 {background:linear-gradient(0deg, rgba(0,156,215,0.85) 0%, rgba(0,156,215,1) 25%, rgba(0,156,215,1) 75%, rgba(0,156,215,0.85) 100%); color: #fff;}
.top_box .inner.type02 .report_box .item.num6 {background:linear-gradient(0deg, rgba(132,103,217,0.85) 0%, rgba(132,103,217,1) 25%, rgba(132,103,217,1) 75%, rgba(132,103,217,0.85) 100%); color: #fff;}

.top_box .inner.type02 .report_box .item b,
.top_box .inner.type02 .report_box .item span:not(:last-child) {font-weight: 800; margin-bottom:1rem;}
.top_box .inner.type02 .report_box .item span:last-child {font-weight: 400; font-size: 1.6rem; color: #fff;}

.top_box .inner.type02 .report_box .item .per {position:relative;display:flex;flex-direction:row;align-items:center;gap:1rem;padding-left:3.6rem;margin-top: 1.5rem;font-size: 3.2rem;line-height:1;text-shadow: 2px 1px 4px rgb(0 0 0 / 20%);}
.top_box .inner.type02 .report_box .item .per::before {content:"";position:absolute;left:0;top:50%;display: block; width:3.4rem; height: 3.7rem;margin-top:-.2rem;transform:translateY(-50%);background:url(../images/common/ico_per.svg) no-repeat;}


.top_box .inner.type03 .info_wrap {width:calc(100% - 20rem);}
.top_box .inner.type03 .info_wrap ul {display: flex; flex-direction: column; gap: 1rem;}
.top_box .inner.type03 .info_wrap ul .item {display: flex;justify-content: flex-start; gap:1rem;}
.top_box .inner.type03 .info_wrap ul .item span {font-weight: 400; font-size: 1.5rem; color: #545454;}
.top_box .inner.type03 .info_wrap ul .item span:nth-child(3) {right:-2.5rem; }

.top_box .inner.type03 .info_wrap ul .item i {display: block;width: 1.8rem;height: 1.8rem;border-radius: 5rem;overflow: hidden;}
.top_box .inner.type03 .info_wrap ul .item.num1 i {background: var(--c_blue);}
/*.top_box .inner.type03 .info_wrap ul .item.num2 i {background: #F0F6FC;}*/
.top_box .inner.type03 .info_wrap ul .item.num2 i {background: #FFF;}
.top_box .inner.type03 .info_wrap ul .item.num3 i {background: #929EA9;}
.top_box .inner.type03 .info_wrap ul .item.num4 i {background: #eee;}

.std_list .btn_group {z-index:10;position:absolute;right:0;top:1%;display:flex;gap:2rem;margin-top: 0.1rem;}
.std_list .btn_group ul {display:flex;gap:2rem;}
.std_list .btn_group ul li {display:flex;align-items:center;font-size: 1.6rem;color:#767676;}
.std_list .btn_group ul li label {display:flex;align-items:center;gap:1rem;cursor: pointer;}


#result .std_list .btn_group ul li label::before {cursor: pointer;} /* 학생개별 진단결과 학급마감 checkbox*/
#result .std_list .th_yellow_1, #result .std_list table thead .th_pink_1, #result .std_list table thead .th_mint_1  {width:7%; padding: 2rem .5rem;}
#result .std_list .th_inner,
#result .std_list .td_inner {display:flex;align-items:center;justify-content:center;}
#result .std_list .th_inner label,
#result .std_list .td_inner label {display:flex;align-items:center;gap:1rem;}
#result .std_list .td_inner i {cursor: pointer;}
#result .table_wrap tbody .select.type02 strong {height: 3.8rem; display: block; line-height: 5.5rem;}
#result .table_wrap tbody .select.type02 strong a {display: inline-block;}

/* 진단결과 프린트 페이지*/
@media print {
    #print_container .top_box{margin-bottom:2rem;}
    #print_container .top_box .inner{padding: 3rem 3.5rem;}
    #print_container .top_box .inner.type02 {flex-direction: column;gap: 1rem;width: calc(100% - 20rem);}
    #print_container .top_box .inner.type02 .group_box{width: 100%;}
    #print_container .top_box .inner.type02 .group_box .item.num2{flex-direction: row;align-items: center;}
    #print_container .top_box .inner.type02 .report_box{flex-wrap: wrap;gap: 1.5rem;width: 100%;}
    #print_container .top_box .inner.type02 .report_box .item{width:calc(33.33% - 1.5rem);}
    #print_container .top_box .inner.type03{flex-direction: column;align-items: center;width: 30rem;}
    #print_container .top_box .inner.type03 .info_wrap{width: 100%;}
    #print_container .top_box .inner.type03 .chart_wrap{width: 90%;}
    #print_container .top_box .inner.type02 .report_box .item{padding: 2rem 0;}
    #print_container .std_list .th_inner{display: flex;align-items: center;justify-content: center;}
    #print_container table thead th span.step_tit{flex-direction: column;align-items: center;}
}

/* 진단결과 하단 프린트용 그래프 숨김처리 */
#multi_chart_container {position: absolute; text-indent: -99999px; left: -100%;top: -100%;}

/* 나의학급 */
#myclass .std_list .btn_group {display: flex; gap: 5rem; top: 1%; margin-top: 0.1rem;}
#myclass .std_list .btn_group ul {align-items: center; gap: 1rem;}
#myclass .std_list .btn_group ul li {font-size: 1.6rem;}
#myclass .std_list .btn_group ul li label {display: flex; gap: 1rem; cursor: pointer;}
#myclass .std_list .btn_group ul li label::before {top: 1.4rem; left: -2.6rem; cursor: pointer;}
#myclass .th_inner label {display: flex; justify-content: center; gap: 1rem;}
#myclass .td_inner label {display: flex; align-items: center;justify-content: center; gap: 2rem;}
#myclass .td_inner label .state {margin:0;}

#myclass .std_list .btn_group ul li a {display: flex; align-items: center; gap: 0.5rem; padding: .8rem 1.2rem;}
#myclass .std_list .btn_group ul li a:after {content: ''; display: block; width: 2.5rem; height: 2.5rem; background:url('../images/common/ico_download_blue.svg') no-repeat 50%; background-size: 100%;}

/* 결과 popup 공통규격 */
.popupwrap{position:relative;display:flex;flex-direction:column;gap:2rem;width:100%;margin:0 auto;padding:9rem 6rem 15rem;border-radius:.8rem;border:.3rem solid var(--c_blue);background:#fff;}
.popupwrap *{font-size:1.6rem;letter-spacing: -.05rem;}
.popupwrap .bn_close{position:absolute;right:6rem;top:4rem;}

.popupwrap .language_select#select{float: right;width: 50rem;height: 4.8rem;}

/* 진단결과 popup */
.result-pop h1{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;margin-bottom:5rem;color:#343A40;font-family: var(--f_eli);font-size:3.6rem;font-weight:900;}
.result-pop h1::before{content:"";display:block;width:16rem;height:5rem;background:url(../images/common/logo_blue.svg) no-repeat 50%;background-size: contain;}
.result-pop section{width:100%;;border-radius:1rem;border:0.1rem solid var(--line_blue);overflow:hidden;}
.result-pop section h2{display:flex;align-items:center;gap:1rem;padding:1.5rem 3.2rem;font-size:2rem;font-weight:700;color:#444444;background:linear-gradient(90deg, rgba(229,238,255,1) 0%, rgba(229,238,255,0.5) 100%);}

.result-pop section h2.accordion {position:relative; cursor: pointer;}
.result-pop section h2.accordion:after {content: "";position:absolute;display: block;right:4rem;top:30%;width:3rem;height:3rem;transition: all var(--ani_time) ease; -webkit-transition: all var(--ani_time) ease;background: url(../images/common/arrow_under_gray.svg) no-repeat; background-position: 50%; background-size: 100%; }
.result-pop section h2.accordion.on:after {transform: rotate(180deg);-webkit-transform: rotate(180deg);}
 
.result-pop section h2::before,
.plan-popup section.con2 h2::before {content:"";display:block;width:5.3rem;height:5.3rem;background:url('../images/contents/ico_tit01.png') no-repeat;}

.result-pop section .wrapper{padding:5rem 4rem}

.result-pop section.con2 h2::before,
.plan-popup section.con2 h2::before {background-image:url('../images/contents/ico_tit02.png');}
.result-pop section.con3 h2::before{background-image:url('../images/contents/ico_tit03.png');}
.result-pop section.con4 h2::before{background-image:url('../images/contents/ico_tit04.png');}

.result-pop section.con1 .wrapper {display:flex;gap:4rem;position:relative;}
/*.result-pop section.con1 .wrapper::before{content:"";position:absolute;left:4rem;top:50%;display:block;width:9rem;height:9rem;transform:translateY(-50%);background:url(../images/contents/img_titico.svg)}*/
.result-pop section.con1 .wrapper dl{display:flex;flex-wrap:wrap;}
.result-pop section.con1 .wrapper dl dd{display:flex;gap:1rem;margin:0;padding:1rem 2rem 0 0;}
.result-pop section.con1 .wrapper dl dd.wide{width:100%;}
.result-pop section.con1 .wrapper dl:last-child{gap:1.6rem;flex-wrap:nowrap;width:100%;}
.result-pop section.con1 .wrapper dl:last-child dd{flex-direction:column;flex-basis:100%;align-items:center;padding:1.8rem;border:0.1rem solid var(--line_gray);border-radius:.4em;color:#333;}
.result-pop section.con1 .wrapper dl:last-child dd span.date{padding:.8rem}

.result-pop section.con2 .wrapper,
.result-pop section.con4 .wrapper{display:flex;gap:2rem;justify-content: space-between;}

.plan-popup section.con2 .wrapper article .chart_wrap,
.result-pop section.con2 .wrapper article .chart_wrap {width:45rem; padding:2rem;}

.plan-popup section.con2 article h3,
.result-pop section.con2 article h3,
.result-pop section.con4 article h3{display:inline-block;padding:1rem 1.6rem;color:#fff;border-radius:10rem;font-size:1.5rem;background:var(--c_mint_m);}

.plan-popup section.con2 article:last-child h3,
.result-pop section.con2 article:last-child h3,
.result-pop section.con4 article:last-child h3{background:var(--c_blue_m)}

.result-pop section.con4 article{width: 100%;}
.result-pop section.con4 article p{margin:1rem .8rem 0;line-height:1.5;color:#757575; min-height: 4.5rem;}
.result-pop section.con4 .res_text_table td:nth-child(2), .result-pop section.con4 .res_text_table_eng td:nth-child(2), .result-pop section.con4 .res_text_table_chn td:nth-child(2), 
.result-pop section.con4 .res_text_table_vnm td:nth-child(2), .result-pop section.con4 .res_text_table_rus td:nth-child(2){text-align:left;}

.result-pop section.con4 .tbl_basic td p{ margin: initial !important;min-height: initial !important;}
.result-pop .etcwrap select#select{width: 30rem;}
.result-pop .etcwrap p{flex-grow: 1;}

.result-pop button.confirm {display: block;width: 3rem;height: 3rem;margin: auto;line-height: 0.3rem;text-indent: -999px;overflow: hidden;background:url('../images/contents/confirm.svg') no-repeat; background-size:100%;}
.result-pop button.confirm.on {background:url(../images/contents/confirm_on.svg) no-repeat; background-size:100%;}
.result-pop button.confirm.chkall{display:inline-block;}

.result-pop .select.type04

@media only screen and (max-width:1100px){
    .result-pop section.con2 .wrapper article .chart_wrap {width:38rem;}
}

/* 진단결과 - 결과안내 코멘트 테이블 추가 */
#comment, #comment_area {display:flex; flex-direction: column; justify-content: space-between; gap: 2rem;}
#comment .wrapper, #comment_area .wrapper {padding:0;}

#comment .wrapper table td {padding: 2.5rem 1rem;}
#comment .wrapper table td div {width:100%; margin: 0 auto 2rem; padding:.7rem 0; border-radius: 0.5rem; border: 0.1rem solid #ddd; font-size: 1.4rem; font-weight: 500;}
#comment .wrapper table td div:last-child {margin-bottom:0;}
#comment .wrapper table td div.step1 {color: var(--c_blue_m); border-color: var(--c_blue); background: var(--c_blue_1);}
#comment .wrapper table td div.step2 {color: var(--c_mint_m); border-color: var(--c_mint);}



#comment_area .wrapper table th {border-color: #D0D7E0; color: #FFF; background: #929EA9;}
#comment_area .wrapper table .th-2depth {background: #7e8993;}
#comment_area .wrapper table td {border-top: 0.1rem solid #E3EEF3;}

#comment_area .wrapper table .bdr-round-top {border-radius: 1rem 0 0 0;}
#comment_area .wrapper table .bdr-round-bot {border-radius: 0 0 0 1rem; border-bottom: 0;}


/*  누가 popup */
#nuga .pop-test-wrap {max-width: 153rem;}
/*.nuga-pop {max-width:153rem;}*/
.nuga-pop .badge.small{padding: 1rem 0.7rem;border-radius: 0;border-bottom: 0.2rem solid var(--line_blue);font-size: 2.8rem;color: var(--c_blue);background:none;}
.nuga-pop h1{display:flex;align-items:center;gap:0.5em;font-size:2.4rem;color:#545454;}
.nuga-pop h1::before{content:"";display:block;width:5.3rem;height:5.4rem;background:url('../images/contents/img_titico2.svg') no-repeat;}
.nuga-pop h2{margin:3rem 1rem 1rem;font-size:2.4rem;color:#545454;}

.nuga-pop h1 .student_number,
.nuga-pop h1 .student_name {font-size: 2.4rem; color: #545454;}

.nuga-pop .con1{display:flex;justify-content:space-between;gap:1rem;padding:5rem;border:0.1rem solid var(--line_blue);border-radius:1rem;}
.nuga-pop .con1 article{display:flex;flex-direction:column;justify-content:flex-start;}
.nuga-pop .con1 article h3{position:relative;text-align:center;}
.nuga-pop .con1 article h3 span{z-index:10;position:relative;display:inline-block;margin:0 auto 2rem;padding:1.2rem 2.8rem;color:#fff;border-radius:6rem;background:var(--c_blue);}
.nuga-pop .con1 article h3::before{z-index:0;content:"";display:block;position:absolute;top:2rem;left:0;width:100%;height:3rem;border:0.1rem solid var(--c_blue);border-bottom:0;}
.nuga-pop .con1 article:nth-child(4) .td_lst li b{display: inline-flex; min-height: 5.7rem;align-items: center;justify-content: center;}
.nuga-pop .con1 article:nth-child(5) .td_lst li:first-child span{width: 29.7rem;position: absolute;top: 39.7rem;}

.nuga-pop button.confirm {display: block;width: 3rem;height: 3rem;margin: auto;line-height: 0.3rem;text-indent: -999px;overflow: hidden;background:url('../images/contents/confirm.svg') no-repeat; background-size:100%;}
.nuga-pop button.confirm.on {background:url(../images/contents/confirm_on.svg) no-repeat; background-size:100%;}
.nuga-pop button.confirm.chkall{display:inline-block;}

.nuga-pop .hd_wrap{position: relative;}
.nuga-pop .hd_wrap .btn_group{z-index:10;position:absolute;right:0;bottom:1%;display:flex;gap:1rem;margin-top: 0.1rem;}

.nuga-pop .table_wrap table tbody tr td:nth-child(5) .downwrap{justify-content: flex-start;}
.nuga-pop .table_wrap table tbody tr td:nth-child(5) button.confirm{margin:0;}

/* 성장기록 popup*/
.grow-pop .etcwrap select#select{width: 30rem;}
.grow-pop .etcwrap p{flex-grow: 1;}
.grow-pop section.con1 .wrapper dl {display:flex;flex-wrap:wrap;align-content:flex-start;gap:0.5rem;width: 20%;}
.grow-pop section.con1 .wrapper #step_result_box {justify-content:flex-start;}
.grow-pop section.con1 .wrapper #step_result_box dd {flex-basis:initial;min-width:18rem;}
.grow-pop section.con1 .wrapper #step_result_box dd p {display:flex;gap:0.5rem;font-weight:800;color:var(--c_blue);}
.grow-pop section.con1 .wrapper #step_result_box dd p:before {content:'검사일';display:block;color:#555;font-weight:500;}
.grow-pop section.con5 h2::before {background-image: url(../images/contents/ico_tit05.png);}
.grow-pop section.con6 h2::before {background-image: url(../images/contents/ico_tit07.png);}
.grow-pop section.con6 table .txout {justify-content:center;line-height:1;}
.grow-pop section.con6 table .txout .state {margin:0;}
.grow-pop section.con6 table thead tr th,
.grow-pop section.con6 table tbody tr td {width:initial;}
.grow-pop section.con6 table tbody .total {border-top:0.2rem solid #D3DBED;background:#E6EAF3;}
.grow-pop section.con6 table tbody .total td {border-left:.1rem solid #D3DBED;border-bottom:.1rem solid #D3DBED;font-weight:800;}
.grow-pop section.con6 table tbody .total td:first-child {border-left:none;}
.grow-pop section.con6 table tbody .total .txout {color:#677480;}

.grow-pop .con7 .chart_wrap canvas{height:450px !important;}

.comment_wrap {font-family:var(--f_prt);line-height:2;color:#555;font-weight:300;}

/* 개별화 popup  */
.myclass-pop .con1 {flex-direction: column; width: 100%; padding: 0; border-radius: 1rem; border: 0.1rem solid var(--line_gray); overflow: hidden;}
.myclass-pop section h2 {display: flex; align-items: center; gap: 1rem; margin:0; padding: 2rem 3.2rem; font-size: 2rem; font-weight: 700; color: #545454; background: #f6f6f6;}
.myclass-pop section h2::before {content: ""; display: block; width: 3.2rem; height: 3.2rem;background-image: url('../images/contents/ico_tit02.png');}
.myclass-pop section .wrapper {padding: 5rem 4rem;}

.myclass-pop .wrapper table tr {background: #fff}
.myclass-pop .wrapper table tr td:not(:last-child) {border-right: 0.1rem solid #E3EEF3;}

/* 계획 popup*/
.plan-popup section.con1 {padding: 0; border: 0; border-radius:0;}
.plan-popup section.con2 {width: 100%; border-radius: 1rem; border: 0.1rem solid var(--line_blue); overflow: hidden;}
.plan-popup section.con2 h2{display:flex;align-items:center;gap:1rem;padding:2rem 3.2rem;margin:0;font-size:2rem;font-weight:700;color:#545454;background:linear-gradient(90deg, rgba(229,238,255,1) 0%, rgba(229,238,255,0.5) 100%);}
.plan-popup section.con2 .wrapper {display:flex;gap:4rem;justify-content: space-between; padding: 5rem 4rem;}
.plan-popup section.con2 .wrapper article .chart_wrap canvas {width:50rem; height:50rem;}
.plan-popup section.con3 h2 {margin: 3rem 1rem;}
.plan-popup section.con3 table td:first-child,
.plan-popup section.con3 table td:last-child {border-left: 0.1rem solid #E3EEF3;}
.plan-popup section.con3 table td.line {border-left:none;}

.plan-popup section.con4 h2 {margin: 3rem 1rem;}
.plan-popup section.con4 table .txout {justify-content:center;line-height:1;}
.plan-popup section.con4 table .txout .state {margin:0;}
.plan-popup section.con4 table thead tr th,
.plan-popup section.con4 table tbody tr td {width:initial;}
.plan-popup section.con4 table tbody .total {border-top:0.2rem solid #cad5da;background:#f0f4f8;}
.plan-popup section.con4 table tbody .total td {border-left:.1rem solid #cad5da;border-bottom:.1rem solid #cad5da;font-weight:800;}
.plan-popup section.con4 table tbody .total td:first-child {border-left:none;}
.plan-popup section.con4 table tbody .total .txout {color:#677480;}

@media only screen and (max-width:1530px){
    .nuga-pop{max-width:140rem}
}
@media only screen and (max-width:1390px){
    /* .nuga-pop{max-width:120rem}
    .nuga-pop .con1{flex-wrap:wrap;justify-content: flex-start;}
    .nuga-pop .con1 article:nth-of-type(1),
    .nuga-pop .con1 article:nth-of-type(2) {width:100%;} */
}
@media only screen and (max-width:1199px){
    .popupwrap{padding-left:4rem;padding-right:4rem;}
    .popupwrap .bn_close{right:4rem;}    

	.plan-popup section.con2 .wrapper {flex-direction: column; align-items: center;}

	.table_hd li:nth-child(1) {width: calc(100% - 77.6%);}
	.table_hd li:nth-child(2) {width: 21.1%;}
	.table_hd li:nth-child(3) {width: 26.9%;}
}
@media only screen and (max-width:1000px){
    .nuga-pop{max-width:87rem}
    .nuga-pop .con1{flex-wrap:wrap;justify-content: flex-start;}
    .nuga-pop .con1 article:nth-of-type(1),
    .nuga-pop .con1 article:nth-of-type(2) {width:100%;}
    .nuga-pop .con1 .td_lst li{width:100%;}
    .nuga-pop .con1 article:nth-of-type(3),
    .nuga-pop .con1 article:nth-of-type(4) {width:calc(50% - 6px);}

	.plan-popup {max-width: 87rem;}
	.table_hd li:nth-child(1) {width: calc(100% - 77.5%);}
	.table_hd li:nth-child(2) {width: 21.3%;}
	.table_hd li:nth-child(3) {width: 26.8%;}
}

/* 학습하기 영상 popup*/
#study-vod2 .start__hd {line-height: 7.2rem;}
#study-vod2 .start__con {width:100%;}
#study-vod2 .start__con .slide_btn_box{width:100%;}

.video {width:100%; height:auto;margin: 0 auto; padding:0;}
.video .btn-play {display: block; width: 10rem; height: 10rem; margin:0 auto; border-radius: 10rem; border: 0.1rem solid #fff; background: url('../images/common/bn_vod_play.svg') no-repeat 50%;}
.video iframe {width:100%; min-height: 58.1rem;}


/* 학습하기 음성 popup */
#study-vod1 .pop-test-wrap {height:auto;overflow-y:auto;}
#study-vod1 .quest_wrap {display:none;}
#study-vod1 .start__hd {line-height: 7.2rem;}
#study-vod1 .start__con {width:100%;}
#study-vod1 .start__con .slide_btn_box{width:100%;}

.voice .start__hd {padding-right:10rem;}
.voice .start__con {padding:6rem 5rem;}
.voice .count_wrap {display:flex;align-items:center;gap:.5rem;}
.voice .count_wrap span {font-size:2rem;font-weight:800;color:var(--c_gray_80)}
.voice .count_wrap .count_tt2 {font-weight:100;font-size:1.5rem;}

.voice-slide-wrap {padding:0 3rem;}
.voice-slide-wrap .voice_slide .slide-item {display:block;max-width:1270px;}

.voice-slide-wrap .voice_slide .slide-item .btn_group{justify-content: flex-start;padding-left: 1rem;}
.voice-slide-wrap .voice_slide .bn_tab{display:flex;align-items:center;justify-content:space-between;width:calc(25% - 10px);min-width: 305px;word-break:keep-all;border-color:#AFAFAF;color:#757575;padding:3rem;font-size:2.5rem;}
.voice-slide-wrap .voice_slide .bn_tab.on{color:var(--c_blue);border-color:var(--c_blue);}
.voice-slide-wrap .voice_slide .bn_tab::after{content:"";display:block;width:3.2rem;height:3.2rem;background:url(../images/common/ico_speaker_off.svg) no-repeat;}
.voice-slide-wrap .voice_slide .bn_tab.on::after{background-image:url(../images/common/ico_speaker_on.svg);}

.voice-slide-wrap .slide_btn_box {left:0;}
.voice-slide-wrap .slide_btn_box .arr-btn.big.prev {left:-3rem;}
.voice-slide-wrap .slide_btn_box .arr-btn.big.next {right:-3rem;}


/*익힘자료*/
#learning.modal .pop-test-wrap{height: auto; overflow: hidden;}
#learning.modal .pop-test-wrap .test__start{padding: 4.5rem}
#learning.modal .pop-test-wrap .test__start .start__con{width: 100%;}
#learning.modal .pop-test-wrap .test__start .start__con .btn_group.learning_btn{justify-content: flex-start;}
#learning.modal .pop-test-wrap .test__start .start__con .btn_group.learning_btn .btn.white.bt_down{justify-content: space-between;width: calc(25% - 10px);}
#learning.modal .pop-test-wrap .test__start .start__hd .bn_close{top:-1rem}
#learning.modal .pop-test-wrap .test__start .test__wrap{gap: 2rem;}

@media only screen and (max-width:1440px){
	.voice-slide-wrap .voice_slide .slide-item {max-width: 1180px;}
}
@media only screen and (max-width:1366px){
	.voice-slide-wrap .voice_slide .slide-item {max-width: 1110px;}
}
@media only screen and (max-width:1280px){
	.voice-slide-wrap .voice_slide .slide-item {max-width: 1022px;}
}
@media only screen and (max-width:1242px){
	.voice-slide-wrap .voice_slide .slide-item {max-width: 980px;}
}
@media only screen and (max-width:1200px){
	.voice-slide-wrap .voice_slide .slide-item {max-width: 943px;}
}
@media only screen and (max-width:1170px){
	.voice-slide-wrap .voice_slide .slide-item {max-width: 914px;}
}
@media only screen and (max-width:1125px){
	.voice-slide-wrap .voice_slide .slide-item {max-width: 874px;}
}
@media only screen and (max-width:1080px){
	.voice-slide-wrap .voice_slide .slide-item {max-width: 828px;}
}
@media only screen and (max-width:1024px){
	.voice-slide-wrap .voice_slide .slide-item {max-width: 773px;}
}
@media only screen and (max-width:1000px){
	.voice-slide-wrap .voice_slide .slide-item {max-width: 748px;}
}

/* 타이틀 badge */
.bg-gray {background: #929EA9;}
.bg-bluegra{background:linear-gradient(180deg, rgba(138,200,255,0.1) 0%, rgba(138,200,255,0.31) 38%, rgba(138,200,255,0.6) 80%, rgba(138,200,255,1) 100%)}
.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; color:#fff; background-color:var(--c_blue);}
.badge.big {border-radius: 0.8rem; padding:0rem .6rem .6rem .6rem; 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:#ECF2FF;}

/* 우리학급현황 */
#classwrap .inner{flex-direction:column;justify-content:space-between;align-items:flex-start;/*width:auto;*/gap:1.5rem}
#classwrap .inner:first-child .info_wrap{display:flex;gap:4rem;width:100%;}
#classwrap .inner{width:calc(80% - 42rem);flex-grow: 1;}
#classwrap .inner.type02{width:22%;}
#classwrap .inner.type03{width:38rem;}
#classwrap .inner.type03 .info_wrap{display:flex;align-items:center;justify-content:space-between;width:100%;}
#classwrap .inner h3{margin-bottom:0;}
#classwrap .inner .info_wrap .graph{display:flex;flex-wrap: wrap;gap: 2rem;width: 66rem;}
#classwrap .inner .info_wrap .graphwrap{display:flex;gap:2rem}
#classwrap .inner .info_wrap .graphwrap b{display:flex;justify-content:center;align-items:center;width:3.6rem;height:3.6rem;font-size:1.5rem;border-radius:4rem;}
#classwrap .inner .tbl_graph{width: calc(100% - 58.5rem);}
/* 컬러별적용 */
#classwrap .inner .info_wrap .graphwrap .step1{color:var(--c_yellow_1)}
#classwrap .inner .info_wrap .graphwrap .step2{color:var(--c_pink_1)}
#classwrap .inner .info_wrap .graphwrap .step3{color:var(--c_green_1)}
#classwrap .inner .info_wrap .graphwrap .step4{color:var(--c_mint_1)}
#classwrap .inner .info_wrap .graphwrap .step5{color:var(--c_lightblue_1)}
#classwrap .inner .info_wrap .graphwrap .step6{color:var(--c_purple_1)}
#classwrap .inner .info_wrap .graphwrap .step1 b{background:var(--c_yellow)}
#classwrap .inner .info_wrap .graphwrap .step2 b{background:var(--c_pink)}
#classwrap .inner .info_wrap .graphwrap .step3 b{background:var(--c_green)}
#classwrap .inner .info_wrap .graphwrap .step4 b{background:var(--c_mint)}
#classwrap .inner .info_wrap .graphwrap .step5 b{background:var(--c_lightblue)}
#classwrap .inner .info_wrap .graphwrap .step6 b{background:var(--c_purple)}
#classwrap .inner .info_wrap .graphwrap .step1 .chart-skills span{border-color:var(--c_yellow)}
#classwrap .inner .info_wrap .graphwrap .step2 .chart-skills span{border-color:var(--c_pink)}
#classwrap .inner .info_wrap .graphwrap .step3 .chart-skills span{border-color:var(--c_green)}
#classwrap .inner .info_wrap .graphwrap .step4 .chart-skills span{border-color:var(--c_mint)}
#classwrap .inner .info_wrap .graphwrap .step5 .chart-skills span{border-color:var(--c_lightblue)}
#classwrap .inner .info_wrap .graphwrap .step6 .chart-skills span{border-color:var(--c_purple)}

#classwrap .tabs {position: relative;}
#classwrap .tabs .btn_group {z-index: 10; position: absolute; right: 0;}

#classwrap .table_wrap .state.tx.study {background-color:var(--c_blue_1);color:var(--c_blue);border-color:var(--c_blue);font-weight:800;}
#classwrap .table_wrap .state.tx.study:hover {background-color:var(--c_blue);color:#fff;}


.chart-skills {position:relative;width: 17.5rem;height:8.7rem;margin: 0 auto; padding: 0;overflow:hidden;}
.chart-skills *,
.chart-skills::before {box-sizing: border-box;}
.chart-skills::before {content: '';position: absolute;width: inherit; height: inherit;border: 4.5rem solid rgba(211, 211, 211, .3);border-bottom: none;border-top-left-radius: 17.5rem; border-top-right-radius: 17.5rem;}
.chart-skills span {display:inline-block;z-index: 4;position: absolute;top: 100%;left: 0;width: inherit;height: inherit;border: 4.5rem solid;border-top: none;border-bottom-left-radius: 17.5rem;border-bottom-right-radius: 17.5rem;transform-origin: 50% 0;border-color: green;font-size:0!important;}
.chart-skills span {animation-duration:.5s;animation-timing-function:linear;animation-iteration-count:1;animation-fill-mode:forwards;}

.chart-skills span.per10 {animation-name:chartAni1}
.chart-skills span.per20 {animation-name:chartAni2}
.chart-skills span.per30 {animation-name:chartAni3}
.chart-skills span.per40 {animation-name:chartAni4}
.chart-skills span.per50 {animation-name:chartAni5}
.chart-skills span.per60 {animation-name:chartAni6}
.chart-skills span.per70 {animation-name:chartAni7}
.chart-skills span.per80 {animation-name:chartAni8}
.chart-skills span.per90 {animation-name:chartAni9}
.chart-skills span.per100 {animation-name:chartAni10}


@keyframes chartAni1{
    0%{transform: rotateZ(0);}
    26%{transform: rotateZ(20deg)}
    100%{transform: rotateZ(20deg)}
}
@keyframes chartAni2{
    0%{transform: rotateZ(0);}
    26%{transform: rotateZ(20deg);}
    30%{transform: rotateZ(30deg);}
    100%{transform: rotateZ(30deg);}
}
@keyframes chartAni3{
    0%{transform: rotateZ(0);}
    30%{transform: rotateZ(30deg)}
    60%{transform: rotateZ(40deg)}
    100%{transform: rotateZ(40deg)}
}
@keyframes chartAni4{
    0%{transform: rotateZ(0);}
    30%{transform: rotateZ(30deg)}
    60%{transform: rotateZ(50deg)}
    100%{transform: rotateZ(60deg)}
}
@keyframes chartAni5{
    0%{transform: rotateZ(0);}
    30%{transform: rotateZ(50deg)}
    60%{transform: rotateZ(70deg)}
    100%{transform: rotateZ(90deg)}
}
@keyframes chartAni6{
    0%{transform: rotateZ(0);}
    30%{transform: rotateZ(50deg)}
    60%{transform: rotateZ(100deg)}
    100%{transform: rotateZ(120deg)}
}
@keyframes chartAni7{
    0%{transform: rotateZ(0);}
    30%{transform: rotateZ(50deg)}
    60%{transform: rotateZ(120deg)}
    100%{transform: rotateZ(150deg)}
}
@keyframes chartAni8{
    0%{transform: rotateZ(0);}
    30%{transform: rotateZ(50deg)}
    60%{transform: rotateZ(140deg)}
    100%{transform: rotateZ(160deg)}
}
@keyframes chartAni9{
    0%{transform: rotateZ(0);}
    30%{transform: rotateZ(50deg)}
    60%{transform: rotateZ(150deg)}
    100%{transform: rotateZ(170deg)}
}
@keyframes chartAni10{
    0%{transform: rotateZ(0);}
    30%{transform: rotateZ(50deg)}
    60%{transform: rotateZ(150deg)}
    100%{transform: rotateZ(180deg)}
}

/* 그래프테이블 */
.tbl_graph{width:calc(100% - 56.5rem); border-collapse: separate; border-spacing:0.2rem 0.2rem}
.tbl_graph thead th,
.tbl_graph tbody th,
.tbl_graph tbody td{padding:.6rem;font-size:1.6rem;line-height: 1.5;border: none;border-radius:.4rem !important;}
.tbl_graph thead th{color:#757575;border: none;background:#fff;}
.tbl_graph tbody tr:nth-child(1) th, .tbl_graph tbody tr:nth-child(1) td{background:var(--c_yellow_bg);border:1px solid var(--c_yellow_2)}
.tbl_graph tbody tr:nth-child(2) th, .tbl_graph tbody tr:nth-child(2) td{background:var(--c_pink_bg);border:1px solid var(--c_pink_2)}
.tbl_graph tbody tr:nth-child(3) th, .tbl_graph tbody tr:nth-child(3) td{background:var(--c_green_bg);border:1px solid var(--c_green_2)}
.tbl_graph tbody tr:nth-child(4) th, .tbl_graph tbody tr:nth-child(4) td{background:var(--c_mint_bg);border:1px solid var(--c_mint_2)}
.tbl_graph tbody tr:nth-child(5) th, .tbl_graph tbody tr:nth-child(5) td{background:var(--c_lightblue_bg);border:1px solid var(--c_lightblue_2)}
.tbl_graph tbody tr:nth-child(6) th, .tbl_graph tbody tr:nth-child(6) td{background:var(--c_purple_bg);border:1px solid var(--c_purple_2)}
.tbl_graph tbody td{border-radius:.4rem;}
.tbl_graph tbody .step1{color:var(--c_yellow)}
.tbl_graph tbody .step2{color:var(--c_pink)}
.tbl_graph tbody .step3{color:var(--c_green)}
.tbl_graph tbody .step4{color:var(--c_mint)}
.tbl_graph tbody .step5{color:var(--c_lightblue)}
.tbl_graph tbody .step6{color:var(--c_purple)}
/* .tbl_graph tbody .test-end{color:var(--c_blue)} */
.tbl_graph tbody tr:nth-child(1) td .test-end{font-weight: 700;color:var(--c_yellow)}
.tbl_graph tbody tr:nth-child(2) td .test-end{font-weight: 700;color:var(--c_pink)}
.tbl_graph tbody tr:nth-child(3) td .test-end{font-weight: 700;color:var(--c_green)}
.tbl_graph tbody tr:nth-child(4) td .test-end{font-weight: 700;color:var(--c_mint)}
.tbl_graph tbody tr:nth-child(5) td .test-end{font-weight: 700;color:var(--c_lightblue)}
.tbl_graph tbody tr:nth-child(6) td .test-end{font-weight: 700;color:var(--c_purple)}

/* 미해득 막대그래프 */
.missgraph{display:flex;flex-direction:column;gap:1rem;width:100%;}
.missgraph li{display:flex;align-items:center;font-size:1.5rem;}
.missgraph li b{width:4rem;color:var(--c_gray_60);}
.missgraph li .linewrap{width:calc(100% - 12rem);padding:1rem;border:0.1rem solid #e2e2e2;background:#ffffff;}
.missgraph li .graph_line{display:block;height:1.4rem;font-size:0!important;background:#929EA9}
/*.missgraph li .graph_line.w0{width:0%;}
.missgraph li .graph_line.w10{width:10%;}
.missgraph li .graph_line.w20{width:20%;}
.missgraph li .graph_line.w30{width:30%;}
.missgraph li .graph_line.w40{width:40%;}
.missgraph li .graph_line.w50{width:50%;}
.missgraph li .graph_line.w60{width:60%;}
.missgraph li .graph_line.w70{width:70%;}
.missgraph li .graph_line.w80{width:80%;}
.missgraph li .graph_line.w90{width:90%;}
.missgraph li .graph_line.w100{width:10%;}*/
.missgraph li em{display:flex;gap:1rem;justify-content:flex-end;width:12rem;font-style: normal;color:#929EA9}
.missgraph li em span{color:#545454}

/* 학교통계 popup */
.report-pop .calwrap {position: relative; display: flex;align-items: center; gap: 3rem;}
.report-pop .calwrap h2 {display: flex; align-items: center; gap: 1.5rem; font-size: 2.4rem; font-weight: 700; color: var(--c_blue); font-family: var(--f_prt);}
.report-pop .calwrap h2::before {content: "";display: block; width: 4.8rem; height: 4.8rem; background: url('../images/contents/img_titico3.svg') no-repeat;}
.report-pop .calwrap .calender {display: flex; align-items: center; gap: 1rem; color: #757575;}
/*.report-pop .calwrap .calender .line-box {display: flex;justify-content: flex-start;align-items: center;gap: 1rem;width: 16rem;height: 4.5rem;padding: 0 1rem;border: 1px solid #E2E2E2;border-radius: 4px;}
.report-pop .calwrap .calender .line-box::before {content: "";display: block; width: 3rem; height: 2rem;background: url(../images/common/ico_calendar_s.svg) no-repeat;}*/
.report-pop .calwrap .calender .line-box input {width: 16rem; height: 4.5rem; padding: 0 1rem; border: 0.1rem solid #E2E2E2; border-radius: 0.4rem;font-family: var(--f_prt); text-align: left; color: #757575; background: #FFF;}
.report-pop .calwrap .etcwrap {position: absolute; right: 0; top: 30%;}

.report-pop section .wrapper {display: flex; gap: 4rem; padding:5rem 4rem;}
.report-pop section.con1 .wrapper {position: relative; flex-direction: column; padding-left:4rem;}
.report-pop section.con1 .wrapper::before {display: none;}
.report-pop section.con1 h2::before {background: url('../images/contents/ico_tit08.svg') no-repeat;}

.report-pop section.con1 .graphwrap {position: relative; display:flex; justify-content:center;align-items:center; gap:2rem; width:40%; height:26rem; padding:2rem; border:0.1rem solid #E2E2E2; border-radius: 1.2rem;}
.report-pop section.con1 .graphwrap .chart-skills {width:22.5rem; height:11rem;}
.report-pop section.con1 .graphwrap .chart-skills::before {border: 5.5rem solid rgba(211, 211, 211, .3); border-bottom: none;}
.report-pop section.con1 .graphwrap .chart-skills span {border: 5.5rem solid; border-top: none;}

.report-pop section.con1 .graphwrap .step1 {color: var(--c_yellow);}
.report-pop section.con1 .graphwrap .step2 {color: var(--c_pink);}
.report-pop section.con1 .graphwrap .step3 {color: var(--c_mint);}

.report-pop section.con1 .graphwrap b {position:absolute; left: 3rem; top: 3rem; display: flex; justify-content: center; align-items: center; width: 5rem; height: 5rem; border-radius: 4rem; font-size: 1.5rem; font-weight: 800;}
.report-pop section.con1 .graphwrap .step1 b {color:var(--c_yellow_m); background: var(--c_yellow_1);}
.report-pop section.con1 .graphwrap .step2 b {background: var(--c_pink_1);}
.report-pop section.con1 .graphwrap .step3 b {background: var(--c_mint_1);}

.report-pop section.con1 .graphwrap .step1 .chart-skills span {border-color: var(--c_yellow);}
.report-pop section.con1 .graphwrap .step2 .chart-skills span {border-color: var(--c_pink);}
.report-pop section.con1 .graphwrap .step3 .chart-skills span {border-color: var(--c_mint);}

.report-pop section.con1 .step-item {display: flex; padding: 4rem 0 0; gap: 4rem;}
.report-pop section.con1 .step-item .tbl_graph {width: calc(100% - 40%);}
.report-pop section.con1 .step-item .tbl_graph thead th,
.report-pop section.con1 .step-item .tbl_graph tbody th,
.report-pop section.con1 .step-item .tbl_graph tbody td {padding: 0.7rem 0.7rem;}
.report-pop section.con1 .step-item .tbl_graph tbody tr:nth-child(even) {background: #fff;}
.report-pop section.con1 .step-item .tbl_graph tbody td:nth-child(3) {color: var(--c_blue);}

.report-pop section.con1 .step-item .tbl_graph tbody th {font-weight: 800;}
.report-pop section.con1 .step-item.num1 .tbl_graph tbody th {color:var(--c_yellow_m);}
.report-pop section.con1 .step-item.num2 .tbl_graph tbody th {color:var(--c_pink_m);}
.report-pop section.con1 .step-item.num3 .tbl_graph tbody th {color:var(--c_mint_m);}

.report-pop section.con2 h2::before {background: url('../images/contents/ico_tit09.svg') no-repeat;}
.report-pop section.con2 .wrapper {align-items: center;}
.report-pop section.con2 .wrapper .inner {display: flex; flex-direction: column; align-items: flex-start; gap: 3rem;}
.report-pop section.con2 .wrapper .inner h3 {padding: 1rem 2rem; border-radius:10rem; font-size: 1.6rem; font-weight: 800; color:#838E99; background: #F6F6F6;}

.report-pop section.con2 .wrapper .inner.type02 {width: 40rem;}
.report-pop section.con2 .wrapper .inner.type02 .info_wrap {display: flex; align-items: center; justify-content: space-between; width: 100%; padding:4rem 5rem;border: 0.1rem solid #E2E2E2; border-radius: 1.2rem;}
.report-pop section.con2 .wrapper .inner.type02 .info_wrap ul {display: flex; flex-direction: column; gap: 1rem;}
.report-pop section.con2 .wrapper .inner.type02 .info_wrap ul .item {display: flex; justify-content: flex-start; gap: 1rem;}

.report-pop section.con2 .wrapper .inner.type02 .info_wrap ul .item i {display: block; width: 1.8rem; height: 1.8rem; border-radius: 5rem; overflow: hidden;}
.report-pop section.con2 .wrapper .inner.type02 .info_wrap ul .item.num1 i {background: var(--c_blue);}
.report-pop section.con2 .wrapper .inner.type02 .info_wrap ul .item.num2 i {background: #F0F6FC;}
.report-pop section.con2 .wrapper .inner.type02 .info_wrap ul .item.num3 i {background: #929EA9;}
.report-pop section.con2 .wrapper .inner.type02 .info_wrap ul .item.num4 i {background: #eee;}
.report-pop section.con2 .wrapper .inner.type02 .info_wrap ul .item span {font-weight: 400; font-size: 1.5rem; color: #545454;}

.report-pop section.con2 .wrapper .inner.type03 {width: calc(100% - 40rem);}
.report-pop section.con2 .wrapper .inner.type03 .missgraph li .linewrap {width: calc(100% - 14rem);}
.report-pop section.con2 .wrapper .inner.type03 .missgraph li .graph_line {height: 2.6rem;}
.report-pop section.con2 .wrapper .inner.type03 .missgraph li em {width: 10rem;}

.report-pop section.con3 h2::before {background: url(../images/contents/ico_tit10.svg) no-repeat;}

@media only screen and (max-width:1800px){
    #classwrap .top_box{flex-wrap:wrap;}    
    #classwrap .top_box .inner:first-child{width:100%;}
    #classwrap .top_box .inner.type02{width:calc(100% - 40rem);}
    #classwrap .inner:first-child .info_wrap{justify-content: space-between;}
    #classwrap .tbl_graph{width: calc(100% - 117.5rem);}
}
@media only screen and (max-width:1500px){
    #result .top_box .inner{padding: 3rem 3.5rem;}
    #result .top_box .inner.type02{width: calc(100% - 20rem);}
    #result .top_box .inner.type02 .report_box{gap:1.5rem;}
    #result .top_box .inner.type02 .report_box .item .per{font-size: 2.8rem;}
    /* #result .top_box .inner.type02 .report_box .item .per::before{display: none;}
    #result .top_box .inner.type02 .report_box .item .per{padding-left:0;} */
}
@media only screen and (max-width:1400px){
    /* #result .top_box{flex-direction:column;} 
    #result .top_box .inner.type02,
    #result .top_box .inner.type03{width:100%;}*/

    #result .top_box .inner.type02{flex-direction:column;gap: 1rem;}
    #result .top_box .inner.type02 .group_box, #result .top_box .inner.type02 .report_box{width:100%;}
    #result .top_box .inner.type02 .group_box .item.num2{flex-direction: row;align-items: center;}
}

@media only screen and (max-width:1279px){
    /* .top_box{flex-direction:column;} 

    .top_box .inner.type02,
    .top_box .inner.type03{width:100%;}
    .top_box .inner.type02 .report_box .item .per{font-size:2rem;}
   
    #result .top_box .inner.type02,
    #result .top_box .inner.type03{width:100%;} */

    #exam .top_box .inner{flex-direction:column;align-items:center;gap:1rem;}
    #exam .top_box .inner .item h3{width:16rem;}
    #exam .top_box .inner .item .btn{width:16rem;}
    #exam .top_box .inner .item .btn_group{width:33.2rem;justify-content:space-between;}

    #result .top_box .inner.type03 .info_wrap{width:calc(100% - 17rem);}
    #result .top_box .inner.type03 .chart_wrap{width:49%;}

    #classwrap .top_box{flex-direction:row;}
}
@media only screen and (max-width:1189px){
    #result .top_box .inner.type02 .report_box{flex-wrap: wrap;}
    #result .top_box .inner.type02 .report_box .item{width:calc(33.33% - 1.5rem);}
    #result .top_box .inner.type03{flex-direction: column;align-items: center;width: 30rem;}
    #result .top_box .inner.type03 .info_wrap{width:100%;}
    #result .top_box .inner.type03 .chart_wrap{width:90%;}
    #result .top_box .inner.type02 .report_box .item{padding: 2rem 0;}
}

@media only screen and (max-width:1023px){
    #classwrap .inner:first-child .info_wrap{flex-direction:column;}
    #classwrap .inner .info_wrap .graphwrap,
    #classwrap .inner .tbl_graph{width:100%;}
    #classwrap .inner .info_wrap .graph{width: 100%;justify-content: center;}
    #classwrap .inner .info_wrap .graphwrap{justify-content:center;width:30%;}
    #classwrap .top_box .inner.type02{width:calc(100% - 32rem);}
}


/*로그인 팝업*/
#login .mini_pop h4:before {background: url('../images/contents/ico_tit07.svg') no-repeat;}
#login .input_wrap {display: flex; flex-direction: column; gap: 2rem;}
#login .input_wrap dl {display: flex; align-items: center;}
#login .input_wrap dt {display: block; flex: 0 0 7rem; height: auto; text-align: left; font-weight: 800; color: #333; letter-spacing: 0.01rem;}
#login .input_wrap dd {flex: 0 0 calc(100% - 7rem);}
#login .flex_wrap {display: flex; flex-direction: column; gap: 1.5rem;}
#login .txt-info {text-align:center;}

/*경고창*/
.type04 .mini_pop {border: 0.3rem solid #ED562F; padding: 4rem 6rem;}
.type04 .mini_pop h4 {flex-direction: column;  font-weight: 800; font-size: 2rem; font-family: var(--f_prt); color: #1F1F1F;}
.type04 .mini_pop .intro__txt {margin-top: 1rem; line-height: 2.2rem; font-size: 1.6rem; font-weight: 400; color: #555;}
.type04 .mini_pop .intro__txt span {display: block;}

/*경고창 개별*/
#test_alert.modal {z-index:110;}

#del .mini_pop h4:before,
#alert .mini_pop h4:before,
#test_uncomplete .mini_pop h4:before,
#test_finish .mini_pop h4:before,
#test_save .mini_pop h4:before,
#test_timeout .mini_pop h4:before,
#class_delete .mini_pop h4:before{background: url('../images/common/ico_alert01.svg') no-repeat 50%;}

#cancel .mini_pop h4:before,
#test_alert .mini_pop h4:before {background: url('../images/common/ico_alert02.svg') no-repeat 50%;}

/*수정사항 일괄저장, 학생인원추가 팝업*/
#all_write_save .type04 .mini_pop, #all_save .type04 .mini_pop,
#add_std .type04 .mini_pop {border: 0.3rem solid var(--c_blue); padding: 4rem 6rem;}

#all_save .type04 .mini_pop h4:before {background: url('../images/common/ico_ask.png') no-repeat 50%;}
#add_std .type04 .mini_pop h4:before {background: url('../images/common/ico_student.png') no-repeat 50%;}

/*누가관리 - 기록 팝업*/
#nuga_write .modal__wrap.type03 {width: 60rem;}
#nuga_write .mini_pop input[type='text'] {width: 100%;}
#nuga_write .mini_pop h4:before {background:url('../images/contents/ico_tit05.png') no-repeat 50%;}

/* 인력매칭 팝업 */
#matching .modal__wrap.type03 {width: 65rem;}
#matching .mini_pop h4:before {background:url('../images/contents/ico_tit11.svg') no-repeat 50%;}
#matching .input_wrap {display: flex; justify-content: space-between; gap: 1.5rem;}
#matching .input_wrap .group {width:100%;}
#matching .input_wrap .group h5 {display: inline-block;padding: 1rem 3rem; margin-bottom: 1rem; border-radius: 2rem 0;font-size: 1.7rem; text-align: center;background: var(--c_blue); color: #fff;}
#matching .input_wrap .group:last-child > h5 {background: var(--c_mint);}
#matching .input_wrap .group ul {height: 14rem; padding: 2rem 1rem;border: 0.1rem solid #EDEDED;border-radius: 1rem 0 0 1rem;overflow-y: scroll;}
#matching .input_wrap ul li {display: flex;align-items: center; gap: 1rem;padding: 1rem;text-align: left;}


/* 진단결과, 개별화지도계획, 누가, 성장기록 출력 결과(인쇄) */
.printout {width:100rem; padding:4rem; border:0;}
.printout #print_container,
.printout #print_container2,
.printout .pop-test-wrap,
.printout .popupwrap {border:0;}

.printout .bn_close {display:none;}

.printout .popupwrap {padding: 3rem 5rem;}
.grow-pop.printout .popupwrap {gap:1rem;}

.printout h1 {margin-bottom:1.5rem;}

.printout section {margin-bottom:1rem}
.printout section.con1 .wrapper {padding: 3rem 4rem;}

.grow-pop.printout,
.nuga-popup.printout{padding:0;}

.grow-pop.printout section.con2 .wrapper,
.result-pop.printout section.con2 .wrapper,
.plan-popup.printout section.con2 .wrapper {display: flex; align-items: center; gap: 1rem;}

.grow-pop.printout section.con2 .wrapper .chart_wrap,
.result-pop.printout section.con2 .wrapper .chart_wrap,
.plan-popup.printout section.con2 .wrapper .chart_wrap {width:100%;}

.grow-pop.printout section.con2 .wrapper .chart_wrap img,
.result-pop.printout section.con2 .wrapper .chart_wrap img,
.plan-popup.printout section.con2 .wrapper .chart_wrap img {width:100%;}


@media print {
	.printout,
	.popupwrap {border:0;}
	.result-pop.printout table td, .plan-popup.printout table td {font-family: var(--f_prt); width:8%;}
	
	.result-pop.printout section.con4,
	.plan-popup.printout section.con3 {page-break-after:always}

	.grow-pop.printout section, 
	.result-pop.printout section, 
	.nuga-popup.printout section {page-break-inside:avoid; page-break-after:auto}

	.result-pop.printout section.con2 .table_wrap .score,
	.plan-popup.printout section.con2 .table_wrap .score {font-weight:600; color:var(--c_blue_m);}
	.result-pop.printout section.con2 .table_wrap .score.miss,
	.plan-popup.printout section.con2 .table_wrap .score.miss {color:var(--c_pink_m);}
	
	.result-pop.printout .scroll-top, 
	.nuga-popup.printout .scroll-top,
	.plan-popup.printout .scroll-top {display:none;}
}

/* 학습단계 설정 팝업 */
#add_plan .modal__wrap.type03 {width: 80rem;}
#add_plan .mini_pop h4:before {background:url(../images/contents/ico_tit12.svg) no-repeat 50%;}
#add_plan .mini_pop h4 #setting_area {display: flex; gap:.5rem;}
#add_plan .mini_pop h4 #setting_area:before {content: "["; display: block;}
#add_plan .mini_pop h4 #setting_area:after {content: "]"; display: block;}

#add_plan .select_wrap {display: flex; align-items: center; gap: 1rem;}
#add_plan .select_wrap h5 {width: calc(100% - 50rem); font-size: 1.7rem; line-height: 4.8rem;border-radius:0 3rem 3rem 0;color: #fff; background:var(--c_blue);}

/* 팝업 - 맨위로(top) 이동 버튼 */
.scroll-top {position: absolute; bottom: 2rem; right: 6rem;width: 6rem; height: 6rem; border-radius:6rem; background: #8f8f8f url('../images/common/arrow_under_w.svg') no-repeat 50%; transition: var(--ani_time); transform: rotate(180deg);-webkit-transform: rotate(180deg);}
.scroll-top:hover {background-color: #525252;}

/* select 타입별*/
/* 공통*/
.select {position: relative; margin: auto; border: none; border-radius: .4rem;}
.select .lay {width: 100%;}
.select .lay strong {display: block; width: 100%; height: 100%;}
.select .lay a {display: block; position: relative; width: 100%; font-size: 1.6rem; font-weight:700;}
.select .lay a::after {content: ""; display: block; position: absolute; transform: rotate(0deg); -webkit-transform: rotate(0deg); transition: all var(--ani_time) ease; -webkit-transition: all var(--ani_time) ease;}
.select.on .lists {display: block; position: absolute; width: 100%; z-index: 10; border: 0.1rem solid #E3EEF3; 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(--c_blue_1);}
.select .lists ul li .multi2{position:absolute;right:20px;top:50%;margin-top:-10px;text-indent: 0;padding-left: 0;width: auto;color: #767676;background: none;border: 1px solid #ddd;padding: .3rem .4rem;border-radius: .2rem;font-size: 1.2rem;}

/* select type01 :: 사용영역(헤더)*/
.select.type01 {width: 24rem; height: 4.8rem; background:#f3f5f8; border: 1px solid #c3ccdf}
.select.type01 .lay {height: 4.8rem; border: none; background: transparent; border-radius:0; border-radius: .4rem;}
.select.type01 .lay a {display:flex;align-items:center;height: 4.8rem; line-height:1; padding: 0 2rem; color:#646d7b;}
.select.type01 .lay a::after {right: 1.5rem; top: 1rem; width: 2.4rem; height: 2.4rem;background: url('../images/common/arrow_under_gray.svg') no-repeat 50%;}
.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: .3rem;}

/*  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/arrow_down.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: 4.8rem;}
.select.type03 .lay {height: 4.8rem; border: 0.1rem solid var(--c_blue); border-radius: .4rem;}
.select.type03 .lay a {height: 4.8rem; line-height: 4.8rem; padding: 0 2rem; color: var(--c_blue);word-break:keep-all;}
.select.type03 .lay a::after {right: 1.5rem; top: 1rem; width: 2.4rem; height: 2.4rem; background: url('../images/common/arrow_under_blue02.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: .3rem;}
.select.type03 .lists ul li a {font-size: 1.5rem; padding-left: 2rem;}

/* select type04 :: 사용영역(나의학급>계획>학습단계설정)*/
.select.type04 {width:50rem; height: 4.8rem;}
.select.type04 .lay {height: 4.8rem; border: 0.1rem solid #929EA9; border-radius: 0.4rem;}
.select.type04 .lay a {height: 4.8rem; line-height: 4.8rem; padding: 0 2rem; color: #333;}
.select.type04 .lay a::after {right: 1.5rem; top: 1rem; width: 2.4rem; height: 2.4rem; background: url('../images/common/arrow_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.4rem;}
.select.type04 .lists ul li a {font-size: 1.5rem; padding-left: 2rem;}

/* 관리자 - 지원청관리*/
#manage.container, #stat_adm.container {min-height: 69rem;}
#manage .top_box .inner, #stat_adm .top_box .inner {align-items: center;justify-content: space-between;}
#manage .top_box .inner h3, #stat_adm .top_box .inner h3 {margin:0;color:#444;}
#manage .top_box .select_wrap {width: 35rem; z-index: 100;}
#manage .top_box .select_wrap .select.type03.on .lists {max-height: 40rem;}

#manage .top_box .status {display: flex;align-items: center;gap: 1rem;}
#manage .top_box .status h4 {font-size: 1.6rem;}
#manage .top_box .status .badge.round {justify-content: center; min-width: 8rem; color: var(--c_blue_m);border: 0.1rem solid var(--c_blue);background: var(--c_blue_1);}

/* 관리자 - 회원수정 모달창 */
#member_mdf .modal__wrap.type02 {width: 65rem;}
#member_mdf .mini_pop {padding: 5rem;}
#member_mdf .mini_pop h4:before {background: url('../images/contents/ico_tit12.svg') no-repeat;}

#member_mdf .input_wrap {display: flex; flex-direction: column; gap: 2rem;}
#member_mdf .input_wrap dl {display: flex; align-items: center;}
#member_mdf .input_wrap dl dt {display: block; flex: 0 0 8rem; height: auto; text-align: left; font-weight: 800; color: #333; letter-spacing: 0.01rem;}
#member_mdf .input_wrap dl dd {width:100%;}
#member_mdf .input_wrap input {width: 100%; height: 4rem; line-height: 3.5rem; padding: 0.4rem 1.2rem; border-radius: 0.4rem; border: 0.1rem solid #E2E2E2; color: #757575; font-family: var(--f_prt);}

#member_mdf .input_wrap dl.dl_st {min-height: 4rem;}
#member_mdf .input_wrap dl.dl_st dd {max-width: 9.5rem; text-align: left;}
#member_mdf .input_wrap dl.dl_st dd input {max-width: 9.5rem;}

#member_mdf .input_wrap dl.dl_st:last-child dd:last-child {max-width:17rem;} /*권한지정:: 한글교육 업무담당자 길이에 맞춤*/

#member_mdf .input_disabled {color: #757575; border: 1px solid #CACACA; background: #F6F6F6;}


/* 관리자 - 통계*/
#stat_adm .top_box .select_wrap {width: 25rem; z-index: 100;}

#stat_adm .tabs {position: relative;}
#stat_adm .tabs .btn_group {z-index: 10; position: absolute; right: 0; top: 0.9rem;}

#stat_adm .tabs .tab-body thead tr:nth-child(2) th {width:4%;}
#stat_adm .tabs .tab-body tbody tr td {width:4%;}
#stat_adm .tabs .tab-body tbody .total-wrap {background: var(--c_blue_1);}
#stat_adm .tabs .tab-body tbody .total-wrap td {color: var(--c_blue);font-weight: 600;}

#stat_adm .not-test td {font-weight: 800;}

/* new select */
.new_select {position: relative; height: 4.8rem;}
.new_select:after {content: ""; display: block; position: absolute; top: 25%; right: 2rem;width: 2.4rem; height: 2.4rem;background: url('../images/common/arrow_under_blue02.svg') no-repeat; pointer-events: none;}
.new_select select {width: 100%; height: 4.8rem; padding: 0 2rem; line-height: 4.8rem; border: 0.1rem solid var(--c_blue); border-radius: 0.4rem; color: var(--c_blue); font-family: var(--f_prt); font-size: 1.5rem; font-weight: 800; } 
.new_select select option {color:#333;}
.new_select select .option {line-height: 4.8rem;}
.new_select select a {line-height: 4.8rem;}


/* 통계 */
.chartwrap .chart-container{width:100%;/*height:800px;*/padding:40px;border: 1px solid #ddd;border-radius: 4px;}
/*.allschool .chart-container{height:1200px}*/

#chart .tab-body-chart{position:relative;padding-top:20px;}
#chart .tab-body-chart .select{display:flex;gap:4px;}
#chart .tab-body-chart .select .lay {width:auto;}
#chart .tab-body-chart .select .lay a{padding-right:50px;}
#chart .tab-body-chart .selectarea{position:absolute;top:-60px;right:0;width:auto;display:flex;gap:8px;}

#chart .col2{display:flex;gap:20px;flex-wrap:wrap}
#chart .col2 .top_box{width:calc(50% - 20px);}
#chart .col2 .top_box:nth-last-of-type(even){width:50%}
#chart .col2 .top_box .inner{display:flex;flex-direction:column;align-items:center;gap:3rem;padding:0;}
#chart .col2 .top_box .inner .titwrap{display:flex;flex-direction:row;justify-content:space-between;width:100%;padding:2.4rem 3rem;border-bottom:1px solid #EDEDED;}
#chart .col2 .top_box .inner .titwrap h3{margin:0;}
#chart .col2 .top_box .inner .chart-container{width:100%;height:320px;padding:0 5rem 4rem}
#chart .col2 .top_box:first-child .inner .chart-container{width:auto;}

.downwrap{display:flex;justify-content:center;}
.downwrap .state.download_ppt, .downwrap .state.download_pdf{margin:0 4px;}


@media only screen and (max-width:1400px){
	#chart .tab-body-chart .selectarea{position:static;margin:1rem 0 2rem;}
	#chart .tab-body-chart .select .lay{width:100%;}
}

/* 교육지원청 회원목록 팝업*/
#member_list .pop-test-wrap {max-width:153rem;height:auto;}


/* 그래프 자세히보기 팝업*/
.graph-popup {max-width:120rem;height:auto;}
/*.graph-popup.popupwrap{display:flex;flex-direction:column;gap:5rem;}*/
.graph-popup.popupwrap h1{display:flex;gap:2rem;align-items:center;justify-content:center;margin-bottom:7rem;}
.graph-popup.popupwrap h1 *{color:var(--c_blue);font-family:var(--f_prt);font-size:3.6rem;font-weight:900;}
.graph-popup.popupwrap h1 span:last-child{font-weight:400;}
.graph-popup .titwrap{display:flex;justify-content:space-between;padding:0;}
.graph-popup .titwrap h3{font-size:2.4rem;color:var(--c_blue);}
.graph-popup .inner{display:flex;justify-content:center;align-items:center;padding:6rem;border:1px solid #EDEDED;}
.graph-popup .chart-container{margin:0 auto;}
.graph-popup.popupwrap .bn_close{right:5rem;top:3rem;}


/*로그인*/
.login_wrap {display: flex;flex-direction: column;align-items: center;justify-content: center;padding:12vw 6vw;font-size: 1.8rem;font-weight: 400;line-height: 1.4;}
.login_wrap .logo.type1{width: 19rem;cursor: pointer;}
.login_wrap .logo.type1 img{height: auto;max-width: 100%;}

.login_wrap .form_wrap{display: flex;flex-direction: column;padding: 5rem 7rem;border: 8px solid var(--c_blue_1);border-radius: 1.8rem;}
.login_wrap .form_wrap .field{display:flex;flex-direction:column;gap:1rem; width: 60rem;}
.login_wrap .form_wrap .field:not(:last-child) {margin-bottom: 2rem;}
.login_wrap .form_wrap .field .btn:not(:last-child) {margin-bottom: 1rem;}
.login_wrap .form_wrap .field .is-grouped{display: flex;flex-direction: row;}
.login_wrap .form_wrap .field .is-grouped .is-expanded{flex-grow: 1;}
.login_wrap .form_wrap .field > div *{height: 3.125em;}

.login_wrap h1 {margin:0;font-size:5rem;font-family:var(--f_eli);color:var(--c_gray_80);}
.login_wrap .page-title{display: flex;flex-direction: column;align-items: center;gap: 1rem;padding-bottom: 8rem;}
.login_wrap label{font-weight: 800;}
.login_wrap .btn{height: 3.125em;}
.login_wrap .btn_wrap{display: flex; gap: 1rem;}
.login_wrap .btn_wrap *{flex-grow:1;}


/*테이블 색상*/
#exam .std_list td:nth-child(5), 
#exam .std_list td:nth-child(6), 
#exam .std_list td:nth-child(7){background: var(--c_yellow_bg)}
#exam .std_list td:nth-child(8), 
#exam .std_list td:nth-child(9), 
#exam .std_list td:nth-child(10){background: var(--c_pink_bg)}
#exam .std_list td:nth-child(11), 
#exam .std_list td:nth-child(12), 
#exam .std_list td:nth-child(13){background: var(--c_green_bg)}
#exam .std_list td:nth-child(14), 
#exam .std_list td:nth-child(15), 
#exam .std_list td:nth-child(16){background: var(--c_mint_bg)}
#exam .std_list td:nth-child(17), 
#exam .std_list td:nth-child(18), 
#exam .std_list td:nth-child(19){background: var(--c_lightblue_bg)}
#exam .std_list td:nth-child(20), 
#exam .std_list td:nth-child(21), 
#exam .std_list td:nth-child(22){background: var(--c_purple_bg)}

#result .std_list td:nth-child(3){background: var(--c_yellow_bg)}
#result .std_list td:nth-child(4){background: var(--c_pink_bg)}
#result .std_list td:nth-child(5){background: var(--c_green_bg)}
#result .std_list td:nth-child(6){background: var(--c_mint_bg)}
#result .std_list td:nth-child(7){background: var(--c_lightblue_bg)}
#result .std_list td:nth-child(8){background: var(--c_purple_bg)}

/*이용약관, 개인정보처리방침 팝업창*/
.policy_modal .type03 .mini_pop h4:before {background: url('../images/common/ico_ask.svg') no-repeat 50%;}
.policy_modal .type03 {width:35%}
.policy_modal .type03 .mini_pop .intro__txt {margin-top: 1rem; line-height: 2.2rem; font-size: 1.6rem; font-weight: 400; color: #555;}