@charset "utf-8";

.login {
    position:relative;
    width:100%;
    max-width:450px;
    margin:0 auto;
}
.login .login__title {
    font-size:20px;
    text-align:center;
    color:#222;
    font-weight:500;
}
.login .login__content {
    position:relative;
    margin-top:1rem;
}
.login .login__frmbox {
    position:relative;
    width:100%;
}
.login .login__frmbox + .login__frmbox {
    margin-top:0.5rem;
}
.login .login__btnbox {margin-top:0.5rem}
.login .btn {
    width:100%;
    height:2.5rem;
    line-height:2.5rem;
}
.login .login__btnbox__ul {
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;    
    align-items:center;
    width:100%;
    margin-top:0.5rem;
}
.login .login__btnbox__ul li {width:50%;}
.login .login__btnbox__ul li:nth-child(1) {padding-right:5px}
.login .login__btnbox__ul li:nth-child(2) {padding-left:5px}

.join {
    position:relative;
    width:100%;
    max-width:500px;
    margin:0 auto;
}
.join .join__frmbox {width:100%;}
.join .join__frmbox + .join__frmbox {margin-top:0.55rem}
.join .join__frmbox .join__label {
    display:block;
    position:relative;
    width:100%;
    font-size:0.65rem;
    color:#000;
    font-weight:500;
    margin-bottom:5px;
}
.join .join__cont.cont--btnbox {
    display:flex;
    flex-wrap:wrap;
    width:100%;
}
.join .join__cont + .join__cont {margin-top:0.5rem}
.join .join__cont.cont--btnbox .frminput {
    width:calc(80% - 5px);
    margin-right:5px;
}
.join .join__cont.cont--btnbox .btn {
    width:20%;
    padding-left:0;
    padding-right:0;
}
.join .join__btnbox {
    position:relative;
    width:100%;
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    margin-top:0.9rem;
}
.join .join__btnbox .btn {width:calc(50% - 5px);}
.join .join__btnbox .btn:last-child {margin-left:auto;}
.join .join__agreebox {    
    position:relative;
    padding-top:1rem;
    margin-top:1rem;
    border-top:1px solid #ddd;
    font-size:0.7rem;
}
.join .agreebox__all {margin-bottom:0.8rem}
.join .agreebox__check {
    position:relative;
    display:flex;
    flex-wrap:wrap;
    width:100%;
    flex-direction:row;
    align-items:center;
}
.join .agreebox__check .md-checkbox {width:80%}
.join .agreebox__check .btn {    
    font-size:0.6rem;
    padding:5px 10px;
    line-height:normal;
    height:auto;
    width:20%;
}
.join .agreebox__check ~ .agreebox__check {margin-top:0.4rem}


.memo {
	width: 100%;
	background-color: #dff6e8;
	/* border: 3px double #c8e9d4; */
	margin-bottom: 30px;
    padding: 1rem;
}
/* .memo ul{margin-left: 1rem;} */
.memo ul li {
	line-height: 30px;
    /* list-style: circle; */
}
.memo ul li:last-child {
	margin-bottom: 0px;
}
.memo ul li .bi-check2-circle{margin-right:.5rem;color:#0b5138;}
.memo p {
	padding: 0px 20px;
	line-height: 30px;
	text-align: justify;
}

.memo_mini {
	display: inline-block;
	width: 200px;
	background: #008E63;
	text-align: center;
	margin-left: 15px;
	border-radius: 5px;
}

.memo_mini div {
	position: relative;
	display: inline-block;
}

.memo_mini .memo_mini_text {
  display: flex;
  padding: 3px 0px;
  cursor: pointer;
  text-align: center;
  color: #fff;
}


.red {color: #ff4d4d;}
.bold {	font-weight: 600;}
.fff{color: #fff;}
.txt_bg{background:#34b782;padding: 2px 3px;}

/* 나의강의실 */
.system_info_body:has(.ot_table1) li .sub-title::before{top:4px}
.system_info_head2{margin-top: 7rem;}

.ot_table1,
.ot_table2,
.ot_table3,
.ot_table4{border: 1px solid #1d976c;text-align: center;margin-top: 1rem;border-radius: .6rem;overflow: hidden;background: #f6fdf7;}
.ot_table1 th,
.ot_table2 th,
.ot_table3 th,
.ot_table4 th{padding: .5rem;background-color: #1D976C;color: #fff;font-weight: 400;vertical-align: middle;}
.ot_table1 td:last-child,
.ot_table2 td:last-child,
.ot_table3 td:last-child,
.ot_table4 td:last-child{border-right: 0;}
.ot_table2 td,
.ot_table3 td,
.ot_table4 td{padding: .5rem;vertical-align: middle;border-right: solid 1px #1d976c;border-bottom: solid 1px #1d976c;word-break: keep-all;text-align: left;}
.ot_table2 tr:last-child td,
.ot_table3 tr:last-child td,
.ot_table4 tr:last-child td{border-bottom: 0;}
.ot_table2 td:first-child,
.ot_table3 td:first-child,
.ot_table4 td:first-child{text-align: center;}
.ot_table3 td li, 
.ot_table4 td li{margin-top: 0;padding-left: .5rem;}
.ot_table3 td li::before, 
.ot_table4 td li::before{content: '-';margin-left: -.5rem;margin-right: .2rem;}

.ot_table1 td{padding: .5rem;vertical-align: middle;border-right: solid 1px #1d976c;border-bottom: solid 1px #1d976c;}
.ot_table1 .b_bt, 
.ot_table4 .b_bt{border-bottom: 0;}

.ot_table2 th{width: 23%;}
.ot_table2 th:nth-child(1){width: 8%;}
.ot_table2 tr:last-child td:nth-child(2){text-align: center;}

.ot_table3 th{width: 25%;}
.ot_table3 th:nth-child(1){width: 9%;}

.ot_table4 th:nth-child(4){width: 18%;}
.ot_table4 th:nth-child(5){width: 14%;}
.ot_table_mb_br{display: none;}
.system_info_body .acc_red{color: #f42929;}

/* 나의 학사활동 */
.record_des_box{width: 100%;/*border: 3px double #d5d5d5;*/padding: 1rem;margin-bottom: 1rem;background-color: #dff6e8;}
/* .record_des_box ul{margin-left: 1rem;} */
.record_des_box li{word-break: keep-all;}
.record_des_box li i{margin-right:.5rem;color: #0b5138;}

.bo_record_tab_wr{display: flex;margin-bottom: .5rem;}
.bo_record_tab2{display: flex;justify-content: flex-end;width: 100%;gap: 1%;}
.bo_record_tab2 li{display: flex;}
.bo_record_tab2 li a{color: inherit;padding: .5rem 1rem;color: #1D976C;border: solid 1px #1D976C;}
.bo_record_tab2 li .active{background-color: #1D976C;color:#fff;}

.bo_grades{overflow: auto;width: 100%;}
.bo_grades table{ border: 1px solid #dededf;height: 100%;width: 100%;table-layout: auto;border-collapse: collapse;border-spacing: 1px;text-align: center;margin-bottom: .5rem;}
.bo_grades th:first-child{width: 5%;}
.bo_grades th:nth-child(n+3):nth-child(-n+4){width: 16%;}
.bo_grades th:nth-child(n+5){width: 8%;}
.bo_grades th {border: 1px solid #d6d6d6;background-color: #fbfbfb;color: #4d4d4d;padding: .5rem;}
.bo_grades td {border: 1px solid #d6d6d6;color: #000000;padding: .5rem;color: #8f8f8f;}
.bo_grades li{text-align: right;}

/* 반응형 */
@media screen and (min-width:961px) and (max-width:1279px) {
    .bo_grades th{padding: .2rem;}
}
@media screen and (max-width:800px) {
.bo_grades table thead{display: none;}
} 
@media screen and (max-width:390px) { 
    .bo_record_tab2{gap:3%}
    .bo_record_tab2 li a{padding: .3rem .5rem;}
    .system_info_body li:has([class^="ot_table"]){overflow: scroll;}
    .ot_table_mb_br{display: block;}
}
@media screen and (max-width:320px) { 
    .memo{padding: .8rem .5rem;}
}