/****************B2B Header********************/

.grouplogo {margin-right:auto;display: inline-block;width:auto;max-width:240px;height: 40px;font-size: 24px;line-height:40px; font-weight:500;color: var(--lightblack);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.grouplogo a img {width:auto;height: 40px;}
.grouplogo a {display:flex;width:inherit;flex-start;align-items: center;gap:4px}
.grouplogo a em {display:inline-block;width:32px;height:32px;background:url(../img/schlogo_icon.svg) no-repeat;background-size:32px 32px;}
.topsub_navi.b2b {display: flex;gap: 0px;align-items: center;justify-content: flex-start;flex-shrink: 0;position: relative;}
.topsub_navi.b2b li {flex:1;}
.topsub_navi.b2b li a {display: flex;width:90px;flex-direction: column;gap: 0px;align-items: center;justify-content: center;font-size: 12px;color: var(--darkgray);font-weight:400;}
.topsub_navi.b2b li:last-child a {width:70px;}
.topsub_navi.b2b .icon {flex-shrink: 0;width: 40px;height: 40px;}
.topsub_navi.b2b .icon.class {background:url(../img/ico_myclass.svg) no-repeat top left;background-size:40px 40px;}
.topsub_navi.b2b .icon.library {background:url(../img/ico_library.svg) no-repeat top left;background-size:40px 40px;}
.topsub_navi.b2b .icon.learning {background:url(../img/ico_learning.svg) no-repeat top left;background-size:40px 40px;}
.topsub_navi.b2b .icon.test {background:url(../img/ico_test.svg) no-repeat top left;background-size:40px 40px;}
.topsub_navi.b2b .icon.search {background:url(../img/ico_search.svg) no-repeat top left;background-size:40px 40px;}
.topsub_navi.b2b li:hover a {color: var(--lightblue);font-weight:500;}
.topsub_navi.b2b li:hover .icon.class {background:url(../img/ico_myclass_on.svg) no-repeat top left;background-size:40px 40px;}
.topsub_navi.b2b li:hover .icon.library {background:url(../img/ico_library_on.svg) no-repeat top left;background-size:40px 40px;}
.topsub_navi.b2b li:hover .icon.learning {background:url(../img/ico_learning_on.svg) no-repeat top left;background-size:40px 40px;}
.topsub_navi.b2b li:hover .icon.test {background:url(../img/ico_test_on.svg) no-repeat top left;background-size:40px 40px;}
.topsub_navi.b2b li:hover .icon.search {background:url(../img/ico_search_on.svg) no-repeat top left;background-size:40px 40px;}


/*top 네이게이션 메뉴 활성화-헤더인클루드용*/
.header_include.library .topsub_navi.b2b .icon.class {background:url(../img/ico_myclass_on.svg) no-repeat top left;}
.header_include.library .topsub_navi.b2b li:nth-child(1) a {color: var(--lightblue);font-weight:600;}

.header_include.library .topsub_navi.b2b .icon.library {background:url(../img/ico_library_on.svg) no-repeat top left;}
.header_include.library .topsub_navi.b2b li:nth-child(2) a {color: var(--lightblue);font-weight:600;}

.header_include.learning .topsub_navi.b2b .icon.learning {background:url(../img/ico_learning_on.svg) no-repeat top left;}
.header_include.learning .topsub_navi.b2b li:nth-child(3) a {color: var(--lightblue);font-weight:600;}

.header_include.readingtest .topsub_navi.b2b .icon.test {background:url(../img/ico_test_on.svg) no-repeat top left;}
.header_include.readingtest .topsub_navi.b2b li:nth-child(4) a {color: var(--lightblue);font-weight:600;}

.header_include.search .topsub_navi.b2b .icon.search {background:url(../img/ico_search_on.svg) no-repeat top left;}
.header_include.search .topsub_navi.b2b li:nth-child(5) a {color: var(--lightblue);font-weight:600;}

/*top 네이게이션 메뉴 활성화-전체인클루드용*/
.topsub_navi.b2b li.active .icon.class {background:url(../img/ico_myclass_on.svg) no-repeat top left;background-size:40px 40px;}
.topsub_navi.b2b li.active a {color: var(--lightblue);font-weight:600;}

.topsub_navi.b2b li.active .icon.library {background:url(../img/ico_library_on.svg) no-repeat top left;background-size:40px 40px;}
.topsub_navi.b2b li.active a {color: var(--lightblue);font-weight:600;}

.topsub_navi.b2b li.active .icon.learning {background:url(../img/ico_learning_on.svg) no-repeat top left;background-size:40px 40px;}
.topsub_navi.b2b li.active a {color: var(--lightblue);font-weight:600;}

.topsub_navi.b2b li.active .icon.test {background:url(../img/ico_test_on.svg) no-repeat top left;background-size:40px 40px;}
.topsub_navi.b2b li.active a {color: var(--lightblue);font-weight:600;}

.topsub_navi.b2b li.active .icon.search {background:url(../img/ico_search_on.svg) no-repeat top left;background-size:40px 40px;}
.topsub_navi.b2b li.active a {color: var(--lightblue);font-weight:600;}

/****로그인****/
.login_title {margin:20px auto 50px;font-size:26px;font-weight: 500;}
.login_type {display:flex;flex-direction: column; justify-content: center;align-items: center;gap:40px;}
.login_type .gologin {display:flex;justify-content: space-around;align-items: center;width:60%;height:120px;border-radius: var(--roundm);color:#fff;font-size: 24px;font-weight: 400;cursor:pointer}
.login_type .gologin.b2c {background:var(--lightblue)}
.login_type .gologin.b2b {background:var(--darkblue)}
.login_type .gologin .type_icon {width:40px;height:40px;background: var(--white);border-radius: 50%;}
.login_type .gologin .type_icon img {width:inherit;height:inherit;}
.login_type .gologin .type_txt {}
.b2blogin_btnarea {display: block;margin-top: 30px;}
.btn_bluetxt {display: inline-block;padding:.5em 1.5em;font-size:24px;font-weight: 500;color:var(--lightblue);border:1px solid var(--lightblue);border-radius: var(--roundl)}

.info_set.b2b {margin-bottom:8px;}
.info_set.b2b label {font-size:0;line-height: 1;text-indent: -999}
.info_set.b2b input::placeholder {color:var(--darkgray);font-weight: 400;opacity: .8}

/****MY클래스 목록****/
.classlist_box {width:90%;margin:0 auto;}
.classlist_box .table-row.thead .cell {color:var(--darkblack);font-weight: 500;}
.classlist_box .table-row .cell, .classlist_box .table-row .cell a {color:var(--lightgray);font-weight:300;}
.classlist_box .table-row.active .cell, .classlist_box .table-row.active .cell a {color:var(--darkblack);font-weight:400;}
.classlist_box .table-row .cell em, .classlist_box .table-row.active .cell em, .classlist_box .table-row.last .cell em {display:none;opacity: 0}
.classlist_box .table-row .cell:nth-child(1) {position: relative;padding-left:36px;flex:2;text-align: left}
.classlist_box .table-row .cell:nth-child(1) .class_no {position: absolute;top:0;left:0;width:36px;}
.classlist_box .table-row .cell:nth-child(2) {flex:1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.classlist_box .table-row .cell:nth-child(3) {flex:.5;}
.classlist_box .table-row .cell:nth-child(4) {flex:1;}
.classlist_box .table-row .cell:nth-child(5) {flex:.75;}
.classlist_box .table-row.thead .cell:nth-child(1) {text-align:center}
.classlist_box .table-row .cell.merge {flex:1;}
.classlist_box .table-row .cell .blue {color:var(--darkblue);font-weight:400;}
.classlist_box .table-row .cell .icon_q {display:inlie-block;padding:0 .5em; font-weight: 500; color:var(--white);background:var(--lightgray);border-radius: var(--roundall);}
.classlist_box .table-row .cell .results {position: relative;display: inline-block}
.classlist_box .table-row .cell .results span {position: absolute;top:0;left:18px;padding:.5em .75em;background:var(--red);color:var(--white);font-size:.75em;line-height:1; border-radius: var(--roundm)}

.btn_mediumgray {display:flex;padding:.75em .5em .75em 1.75em;justify-content: center;align-items: center;background:var(--mediumgray);border-radius: var(--roundxs);font-size:20px;line-height: 1; font-weight:300;color:var(--white);letter-spacing: -0.025em;gap:1.5em;transition: .3s}}

.boxl_white.classlist {padding: 40px 0;}
.boxl_white.classlist .sub_tit {display:flex;justify-content: flex-start;align-items:center;gap:16px;width:90%;margin:0 auto 16px;color:var(--darkblue);}
.boxl_white.classlist .sub_tit .icoback {width:36px;height:36px;}
.boxl_white.classlist .sub_tit .icoback img {width:inherit;height:inherit;}

.b2bsub_desc { }
.b2bsub_desc ul li {padding-left:20px;margin-bottom:12px;background:url(../img/bullet_circle24.svg) no-repeat top left;text-align: left;}
.b2bsub_desc ul li .boldred {font-weight:500;color:var(--red);}
.b2bsub_desc ul li .red {color:var(--red);}
.b2bsub_desc ul li .boldblue {font-weight:500;color:var(--lightblue);}
.b2bsub_desc ul li .blue {color:var(--lightblue);}
.b2bsub_desc.center ul {display: inline-block;margin:0 auto;}

/****MY클래스 정보****/
.boxl_white.classinfo {padding: 0;width:100%}
.boxl_white.classinfo .sub_tit {display:flex;padding-left:0;justify-content: flex-start;align-items:center;gap:16px;width:100%;margin:0 auto 16px;color:var(--darkblue);}
.boxl_white.classinfo .sub_tit .icoback {width:36px;height:36px;}
.boxl_white.classinfo .sub_tit .icoback img {width:inherit;height:inherit;}
.classinfo_box {margin:40px auto 60px;padding:25px 30px;width:70%;background:var(--gloudygray);border-radius: var(--roundm);}
.classinfo_box > ul {margin:6px 0;display:flex;width:100%;justify-content: space-around;align-items: center}
.classinfo_box > ul > li:nth-child(1) {width:180px;text-align: center;}
.classinfo_box > ul > li:nth-child(2) {padding-left: 48px; flex-grow: 1; text-align:left}
.classinfo_box > ul > li span {display:flex;width:100%;height:40px;justify-content: center;align-items: center;border-radius: var(--roundl);background:var(--white);}
.classinfo_box .teacher {display: flex;justify-content:flex-start;align-items: center;gap:24px;}
.classinfo_box .teacher .teacher_pic {width:80px;height:80px;}
.classinfo_box .teacher .teacher_pic img {width:inherit;height: inherit;border-radius: var(--roundall);object-fit: cover;}
.classinfo_box .teacher .teacher_name {font-size: 24px;font-weight: 500;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.classinfo_box.student {margin:40px auto 30px;}

/*클래스게시판목록*/
.class_bdlist {width:95%;margin:0 auto;}
.class_bdlist .table-row .cell {line-height:120%;}
.class_bdlist .table-row .cell em, .class_bdlist .table-row.active .cell em, .class_bdlist .table-row.last .cell em {display:none;opacity: 0;}
.class_bdlist .table-row .cell:nth-child(1) {position: relative;padding-left:36px;flex:2;text-align: left}
.class_bdlist .table-row .cell:nth-child(1) .class_no {position: absolute;top:0;left:0;width:36px;}
.class_bdlist .table-row .cell:nth-child(2) {flex:1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.class_bdlist .table-row .cell:nth-child(3) {flex:1;font-size:.9em}
.class_bdlist .table-row .cell:nth-child(4) {flex:.4;}
.class_bdlist .table-row.thead .cell:nth-child(1) {text-align:center}
.class_bdlist .table-row.thead .cell:nth-child(3) {font-size:16px}
.bdicon_nt {display: inline-block;margin-right: 8px;padding:.2em .75em;background:var(--lightblue);font-size: 12px;line-height: 1;color:var(--white)}
.bdicon_re {display: inline-block;margin-right: 8px;padding:.2em .75em;background:var(--lightgray);font-size: 12px;line-height: 1;color:var(--white);border-radius: var(--roundxs);border-top-left-radius: 0}
.class_addarea .sub_desc .boldblack {font-weight:700;}
.class_addarea .sub_desc .red {color:var(--red);}

.bdlist_btarea {display: flex;justify-content:center;align-items: center;}
.bdlist_btarea li:nth-child(1) {flex-grow: 1}
.bdlist_btarea .class_bdbtn {width:100px;}
.bdbtn_blue {display: inline-block;padding: .25em 1.5em; background: var(--darkblue);color:var(--white);border-radius: var(--roundl);}
.bdbtn_gray {display: inline-block;padding: .25em 1.5em; background: var(--darkgray);color:var(--white);border-radius: var(--roundl);}

.bdlist_searcharea {width:95%;margin:30px auto;}
.searcharea_box {display:flex;justify-content: center;align-items: center;gap:12px;}
.searcharea_box .checkbox_set {margin-bottom:0 ;}
.searcharea_box .checkbox_set input[type=checkbox] + label {padding-left: 24px;display: inline-block;cursor: pointer;cursor: pointer;background: url(../img/form_check.svg) no-repeat top left;background-size: 20px 20px;font-size:14px;}
.searcharea_box .checkbox_set input[type=checkbox]:checked + label {background: url(../img/form_check_on.svg) no-repeat top left;background-size: 20px 20px;}
.search_set {display: flex;justify-content: flex-start;align-items: center;gap:4px;}
.search_set input.searchbox {padding:0 12px;width:240px;height:28px;border:1px solid var(--silvergray);border-radius: var(--roundxxs);font-weight: 300;font-size:16px;}
.search_set .btn_search {width:28px;height:28px;display: flex;justify-content: center;align-items:center;background:var(--lightgray);border-radius: var(--roundxxs);}
.search_set .btn_search img {width:16px;height:16px;}

/*클래스게시판읽기*/
.class_bdview .table-row .cell.merge {flex:1;padding:20px 25px;line-height: 150%;text-align: left;}
.class_bdview .table-row .cell.attach {flex:1;padding:0 12px;text-align: left;}
.class_bdview .sub_tit_small, .class_bdlist .sub_tit_small {display: flex;justify-content: flex-start;align-items: center;gap:4px;}
.sub_tit_small .icon {display: inline-block;width:32px;height:32px;}
.sub_tit_small .icon img {width:inherit;height: inherit}
.sub_tit_small em {display: inline-block;padding-left:4px;font-size:16px;color:var(--lightgray);font-style:normal;font-weight: 300}
.class_bdview .table-row .cell:nth-child(1) {flex-grow: 1;text-align: left}
.class_bdview .table-row .cell:nth-child(2) {width:240px;text-align: right}
.class_bdview .table-row .cell:nth-child(3) {width:240px;text-align: right}
.class_bdview .table-row .cell.title {font-size: 18px;font-weight: 500;}
.bdicon_gray {display: inline-block;margin-left: 16px;margin-right: 8px;padding:.2em .75em;background:var(--lightgray);font-size: 12px;line-height: 1;color:var(--white);}

/*클래스게시판읽기 - 코멘트*/
.class_bdcomment {margin:20px 0;}
.class_bdcomment .sub_tit_small {padding-bottom: 4px; border-bottom: 1px solid var(--silvergray);}
.comment_list {margin-bottom: 20px;}
.comment_item {padding: 12px 0;border-bottom: 1px solid var(--silvergray);}
.comment_item.fromT {padding-left: 36px;background: var(--gloudygray)}
.comment_info {display: flex;justify-content: space-between;align-items: center;padding:0 12px;width:100%;gap:4px;}
.comment_info strong {flex-grow:1;text-align: left}
.comment_info .commentDate {width:200px;}
.btnCommentMod {width:80px;height:32px;display: flex;justify-content: center;align-items: center;border:1px solid var(--darkblue);border-radius:var(--roundxxs);color:var(--darkblue);}
.comment_content {padding:12px 12px;text-align: left}
.comment_empty {padding: 20px 0;border-bottom: 1px solid var(--silvergray);color:var(--puregray);}
.comment_write {display: flex;justify-content: space-between;gap:12px;}
.comment_write textarea {flex-grow: 1;padding:12px;height:100px;border:1px solid var(--mediumgray);border-radius:var(--roundxxs);font-size: 16px;line-height: 1.5em;font-weight: 400;resize: none; }
.btnComment {display: flex;justify-content: center;align-items: center; width:80px;border:1px solid var(--darkblue);border-radius:var(--roundxxs);color:var(--darkblue);}


/*클래스게시판쓰기*/
.class_bdwrite {width:95%;margin:0 auto;}
.class_bdwrite.addform {width:70%;margin:0 auto;}
.class_bdwrite .table_box {padding:1em 0}
.class_bdwrite.addform .table_box {padding:1.5em 0;border:0;background: var(--gloudygray)}
.class_bdwrite .table-row {padding: .5em 2em;}
.class_bdwrite .table-row .cell:nth-child(1) {width:120px;}
.class_bdwrite .table-row .cell:nth-child(2) {flex:1;text-align: left;}
.class_bdwrite input[type=text] {border-radius: var(--roundxxs);height:48px;font-size: 16px;}
.class_bdwrite input[type=checkbox] + label {padding-left: 24px;display: inline-block;cursor: pointer;cursor: pointer;background: url(../img/form_check.svg) no-repeat top left;background-size: 20px 20px;font-size:14px;}
.class_bdwrite input[type=checkbox]:checked + label {background: url(../img/form_check_on.svg) no-repeat top left;background-size: 20px 20px;}
.class_bdwrite input.name {width:25%;}
.class_bdwrite input.title {width:95%}
.class_bdwrite textarea.type {width:95%;height:300px;padding:.5em 1em;font-size: 16px;line-height: 150%; overflow-y: auto;border: 2px solid var(--silvergray);background:var(--white);border-radius: var(--roundxxs);}

/****학생회원***.info_set.row 는 B2B용*****/
.info_set.row {display: flex;flex-direction: row;justify-content: flex-start;align-items: center;gap:8px}
.info_set.row .infolabel {width:160px;}
.info_set.row .infolabel .red, .info_set.row .info_tit .red {color:var(--red);}
.info_set.row input[type=text], .info_set.row input[type=password], .age_select {width:320px}
.info_set.row .btn_roundgray {width:160px}
.info_set.row .infotxt {color:var(--puregray)}
.info_set.row .infotxt, .info_set.pop .infotxt {flex: 1;font-size:14px;line-height: 120%; text-align: left}
.info_set.row .info_tit  {width:150px;}
.password_pop {margin:-18px auto 30px;padding:16px 30px 8px;background: var(--gloudygray);}
.info_set.pop {display: flex;margin-bottom: 8px;flex-direction: row;justify-content: flex-start;align-items: center;gap:8px}
.info_set.pop .infolabel {width:120px;}
.info_set.pop input[type=password] {padding: 6px 12px;width:240px;height:48px;}
.info_set.row .half{display: flex;flex-direction: row;justify-content: flex-start;align-items: center;gap:8px} 

/****비번입력팝업******/
.pop_layer {position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);padding:48px;width:480px;z-index: 20;opacity:0;transition: .5s;visibility: hidden;background:var(--white);border:2px solid var(--silvergray);border-radius: var(--roundl);}
.pop_layer.active {opacity: 1; visibility: visible;}
.pop_txt {margin-bottom:16px;text-align: center}
.pop_pw {display: flex;width:100%;justify-content: center;align-items: center;gap:4px}
.pop_pw input[type=password] {flex:1}
.pop_btn {display:flex;width:80px;height:60px;justify-content: center;align-items: center;background:var(--darkblue);border-radius: var(--roundxs);font-size:20px;line-height: 1; font-weight:300;color:var(--white);letter-spacing: -0.025em;gap:1.5em;transition: .3s}
.pop_btn:hover {background:var(--darkblue-hover)}
.overlay_dark {position: fixed;width: 100%;height: 100vh;top: 0;left: 0;opacity: 0;transition: .5s;visibility: hidden;background: rgb(0, 0, 0, .4)}
.overlay_dark.active {opacity: 1;visibility: visible;}