@font-face{
	font-family:"Nanum Barun Gothic";src:url('../font/NanumBarunGothic.woff');
}

*{
	margin:0; padding:0;
	font-family:"Nanum Barun Gothic";	
	line-height: 24px;
}

/*
html {
		min-width: 1400px;
	overflow-x: auto;
overflow-y: scroll;
}
*/
/* 190428 toggle menu */
html, body{
    height:100%;
    width: 100%;
}

a {
    color:inherit;
    text-decoration: none;
}

a:hover{
	color:inherit;
    text-decoration: none;
}

.padding-zero{
	padding:0;
}


.margin-zero{
	margin:0;
}

.vspace_13px{
	height:13px;
}

.vspace_20px{
	height:20px;
}

.vspace_30px{
	height:30px;
}

.vspace_40px{
	height:40px;
}

.vspace_50px{
	height:50px;
}

.vspace_60px{
	height:60px;
}

.vspace_70px{
	height:70px;
}

.vspace_80px{
	height:80px;
}

.vspace_90px{
	height:90px;
}

.vspace_100px{
	height:100px;
}


input[type=button] {-webkit-appearance:none; outline: none;}
select {outline: none;}

.menu_box1 {
	background-color: white; border-bottom: 1px solid #999; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999; line-height: 50px; padding-left: 15px;
}
.menu_box2 {
	background-color: white; border-left: 1px solid #999; border-right: 1px solid #999; line-height: 50px; padding: 0 10px; 
}
.menu_box3 {
	background-color: white; border-bottom: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999; line-height: 25px; padding-left: 15px; padding-top: 5px; padding-bottom: 5px;font-size: 13px; color: #888;
}
.menu_txt {
	border-bottom: 1px solid #999; cursor: pointer;
}


/* 190518 accordion menu */
.menu_background{
    display: none ;float: left; background-color: #000; width:30%; height:100%; opacity: 0.7;
}
#menu_wrapper {
	width:70%;
	height:100%;
	overflow: hidden;
	float: left;
}
#menu_sidebar{
    /*width:70%;*/
    width:100%;
    overflow-y: scroll;
    padding-right: 17px;
    box-sizing: content-box;
    
    -ms-overflow-style: none; 
    scrollbar-width: none; 
    
    height:100%;
    background-color: white;
    opacity: 1;
    float: left;
}
#menu_sidebar::-webkit-scrollbar {
	display:none;
}
button:focus {outline:0;}
.menu_accordion {
  background-color: #fff;
  color: #111;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: 17px;
  transition: 0.4s;
  height: 40px;
  padding-left: 15px;
  border-bottom: 2px solid #ddd;
}
.menu_noaccordion {
  background-color: #fff;
  color: #111;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: 17px;
  transition: 0.4s;
  height: 40px;
  padding-left: 15px;
  border-bottom: 2px solid #ddd;
}
.menu_noaccordion a{
	line-height: 40px;
	width: 100%; display: inline-block;
}
.menu_noaccordion:hover {
  background-color: #ccc;
}
.menu_active {
  background-color: #fff;
}
.menu_accordion:hover {
  background-color: #ccc;
}
.menu_panel {
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.menu_panel p {
  background-color: #eee;
  color: #111;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: 17px;
  height: 40px;
  margin: 0;
  padding-left: 15px;
  line-height: 40px;
  border-bottom: 2px solid #ddd;
}
.menu_panel p a{
	width: 100%; display: inline-block;
}
/* 190518 accordion menu */

/* 190520 pagination */
ul.pagination_cus {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination_cus li {display: inline;}

ul.pagination_cus li a {
    color: black;
    float: left;
    padding: 2px 10px;
	font-size: 13px;
    text-decoration: none;
    transition: background-color .3s;
}

ul.pagination_cus li a.active {
    background-color: #214882;
    color: white;
}

ul.pagination_cus li a:hover:not(.active) {background-color: #ddd;}



.previewBtn {margin-left: 6px;
	background-color: white; width: 80px; height: 40px; font-size: 13px; color: black; cursor: pointer; text-align: center; padding: 0; border: 1px solid black;
}
.detailBtn {
	background-color: #070449; width: 80px; height: 40px; font-size: 13px; color: white; cursor: pointer; text-align: center; padding: 0; border: 1px solid black;
}
.detailBtn2 {
	background-color: black; color: white; line-height: 40px; cursor: pointer;
}
.detailBtn3 {
	background-color: white; width: 80px; height: 40px; font-size: 13px; color: #070449; cursor: pointer; text-align: center; padding: 0; border: 1px solid black;
}

.subTitle {
	font-size: 18px; color: #000; font-weight: bold;
	margin-bottom: 15px;
}
.subTitle2 {
	font-size: 18px; color: #000; font-weight: bold;
	background-color: #ddd; height: 65px; text-align: left; line-height: 65px; padding-left: 12px; color: #666;
}

.mListRow {
	text-align: left; border-bottom: 1px solid #d9d9d9; padding: 8px 0; 
}
p.mListTitle {
	height: 25px; margin:0;display:inline-block; 
}
p.mListTitle a{
	color: #000; font-size: 13px; font-weight: bold;
}
p.mListDate {
	color: #666; font-size: 13px; margin-top: 2px; height: 25px; margin:0;
}
div.mCourseListTitle { 
	/*
	color: #666; font-size: 13px; font-weight: bold;
	padding-top: 5px; padding-left: 8px;
	height: 38px;
	*/
	color: #666; font-size: 13px; font-weight: bold;
	padding-left: 8px;

	/* 190519 css */
	height: 34px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2; 
	-webkit-box-orient: vertical;
	word-wrap:break-word; 
	line-height: 1.3em;
}

div.mCourseListTitle2 a{ 
	/*
	color: #666; font-size: 13px; font-weight: bold;
	padding-top: 5px; padding-left: 8px;
	height: 38px;
	*/
	color: #666; font-size: 13px; font-weight: bold;
	padding-left: 8px;

	/* 190519 css */
	height: 34px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2; 
	-webkit-box-orient: vertical;
	word-wrap:break-word; 
	line-height: 1.3em;
}

div.mCourseListIcon {
	padding-left: 8px;
}
div.mCourseListTitleImg {
	width: 100%; height: 80px; 
}
div.mMyCourseListTitle { 
	color: #000; font-size: 13px; font-weight: bold;
	width:70%; float: left; line-height: 30px; 
	text-overflow: ellipsis; overflow: hidden; word-wrap:break-word; line-height: 1.3em;
	padding: 5px 0;
}

/*
.iconR {	
	padding-left : 15px;
	padding-right : 15px;	
	background-color: #3ABA99;
	color: white;
	font-size: 13px;
	padding: 3px 10px;
	float: left;
	margin-right: 5px;
}
.iconC {
	padding-left : 15px;
	padding-right : 15px;	
	background-color: #070449;
	color: white;
	font-size: 13px;
	padding: 3px 10px;
	float: left;
	margin-right: 5px;
}
.iconM {
	padding-left : 15px;
	padding-right : 15px;	
	background-color: gray;
	color: white;
	font-size: 13px;
	padding: 3px 10px;
	float: left;
	margin-right: 5px;
}
*/
.iconR {	
	padding-left : 15px;
	padding-right : 15px;	
	background-color: #3ABA99;
	color: white;
	font-size: 12px;
	padding: 1px 3px;
	float: left;
	margin-right: 5px; line-height: 15px;
}
.iconC {
	padding-left : 15px;
	padding-right : 15px;	
	background-color: #070449;
	color: white;
	font-size: 12px;
	padding: 1px 3px;
	float: left;
	margin-right: 5px; line-height: 15px;
}
.iconM {
	padding-left : 15px;
	padding-right : 15px;	
	background-color: gray;
	color: white;
	font-size: 12px;
	padding: 1px 3px;
	float: left;
	margin-right: 5px; line-height: 15px;
}


.iconR2 {
	width: 22px;
	background-color: #3ABA99;
	color: white;
	font-size: 11px;
	padding: 3px 5px;
	float: left;
	margin-right: 5px;
}
.iconC2 {
	width: 56px;
	background-color: #070449;
	color: white;
	font-size: 11px;
	padding: 3px 5px;
	float: left;
	margin-right: 5px;
}
.iconM2 {
	width: 80px;
	background-color: gray;
	color: white;
	font-size: 11px;
	padding: 3px 5px;
	float: left;
	margin-right: 5px;
}
div.mMyCourseListTitle2left { 
	color: #000; font-size: 13px; font-weight: bold;
	width:10%; float: left; line-height: 30px; 
	text-overflow: ellipsis; overflow: hidden; word-wrap:break-word; line-height: 1.3em;
	height: 30px; line-height: 30px; text-align: center;
}
div.mMyCourseListTitle2right { 
	color: #000; font-size: 13px; font-weight: bold;
	width:10%; float: left; line-height: 30px; 
	text-overflow: ellipsis; overflow: hidden; word-wrap:break-word; line-height: 1.3em;
	width:90%; height: 30px; line-height: 30px; text-align: center;
}
div.mMyCourseListTitle2leftTxt { 
	color: #888; font-size: 13px; font-weight: normal;
	width:10%; float: left; 
	text-overflow: ellipsis; overflow: hidden; word-wrap:break-word; line-height: 1em;
	text-align: center; height: 25px; padding-top: 5px;
}
div.mMyCourseListTitle2rightTxt { 
	color: #888; font-size: 13px; font-weight: normal;
	width:90%; float: left; 
	text-overflow: ellipsis;  word-wrap:break-word; line-height: 1em;
	text-align: left; padding-top: 5px;
}

.courseDetailTxt {
	text-align: left; padding: 10px 10px; border-bottom: 1px solid #eee; font-size: 14px;
}

/*
.courseDetailTxtTitle {
	display: inline-block; width: 90px;
}
*/
.courseDetailTxtTitleLeftTxt  { 
	color: #000; font-size: 13px; font-weight: normal;
	width:20%; float: left; 
	text-overflow: ellipsis; overflow: hidden; word-wrap:break-word; 
	 text-align: center; 
}
.courseDetailTxtTitleRightTxt { 
	color: #888; font-size: 13px; font-weight: normal;
	width:80%; float: left; 
	text-overflow: ellipsis;  word-wrap:break-word;
	text-align: left; 
}

.courseDetailTxtTitle2 {
	color: #666; font-size: 14px; 
}

div.mMyCourselessonListTitle { 
	color: #666; font-size: 13px; font-weight: normal;
	width:70%; float: left; line-height: 30px; 
	text-overflow: ellipsis; overflow: hidden; word-wrap:break-word; line-height: 1.3em;
}

.table-custom3 {
	font-weight: normal;
	width: 100%;
	border-collapse: collapse;
}
.table-custom3 thead tr th{
	text-align: center;
	font-size: 13px;
	border-top: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
	border-right: 1px solid #d9d9d9;	
	color: #838383;
	font-weight: normal;
}
.table-custom3 thead tr th.first {
	border-left: 1px solid #d9d9d9;	
}
.table-custom3 thead tr th.selected{
	background-color: #858ba9;
	color: white;
	font-weight: normal;
}


/* 190518 css */
.mainNoticeDetail {
	text-align: left; border-bottom: 1px solid #e8e8e8; 

	/* 190519 css */
	height: 35px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1; 
	-webkit-box-orient: vertical;
	word-wrap:break-word; 
	line-height: 1.3em;
}
.mainNoticeDetail p a{
	font-size: 14px;
	color: #666;
}
.mainNoticeDetail p {
	font-size: 14px;
	color: #666;
}

h2 {
	font-size: 24px;
	font-weight: bold;
}
h3 {
	font-size: 18px;
}
/* 190518 css */

/* 190519 css */
dl { margin:0; }
dd { margin:0; }


footer > div {
	background-color: black;
	width: 100%;
	text-align: center;
	color: #999;
	padding: 10px 0;
	font-weight: normal;
	font-size: 13px; line-height: 18px;
}

footer .circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}
footer .circleBase.type1 {
    width: 70px;
    height: 70px;
    border: 2px solid #999;
    float: left; cursor: pointer;
}
footer .circleBase.type1 > div.txt {
    position: relative; top: 28px; font-size: 16px; font-weight: bold;
}
footer .circleBase.type1.last:after {
    clear: both;
}

footer .squareBase {
    border-radius: 10%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}
footer .squareBase.type1 {
    width: 70px;
    height: 30px;
    border: 2px solid #999;
    float: left; cursor: pointer;
    
}
footer .squareBase.type1 > div.txt {
    position: relative; top: 3px; font-size: 13px; font-weight: bold;-height: 24px;
}
footer .squareBase.type1.last:after {
    clear: both;
}