@charset "utf-8";

html, body { 
	width: 100%; 
}

/* ------------------------------
	common Start
------------------------------ */
.float_l { position: relative; float: left; }
.float_r { position: relative; float: right; }
.in_bl { display: inline-block; }
.di_bl { display: block; }
.cboth { clear: both; }

table { width: 100%; }

/* -------- customizing -------- */
/* link */
a { color: #444; }
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:active { text-decoration: none; }
a:hover { text-decoration: none; }

/*margin*/
.mt5 {margin-top:5px!important;}
.mt10 {margin-top:10px!important;}
.mt20 {margin-top:20px!important;}
.mt30 {margin-top:30px!important;}
.mt40 {margin-top:40px!important;}
.mt50 {margin-top:50px!important;}
.mt70 {margin-top:70px!important;}

.mb5 {margin-bottom:5px!important;}
.mb10 {margin-bottom:10px!important;}
.mb20 {margin-bottom:20px!important;}
.mb25 {margin-bottom:25px!important;}
.mb30 {margin-bottom:30px!important;}
.mb40 {margin-bottom:40px!important;}
.mb50 {margin-bottom:50px!important;}
.mb_no {margin-bottom:0 !important;}

.ml5 {margin-left:5px!important;}
.ml10 {margin-left:10px!important;}
.ml12 {margin-left:12px!important;}
.ml15 {margin-left:15px!important;}
.ml20 {margin-left:20px!important;}
.ml25 {margin-left:25px!important;}
.ml30 {margin-left:30px!important;}
.ml50 {margin-left:50px!important;}

.mr5 {margin-right:5px!important;}
.mr10 {margin-right:10px!important;}
.mr15 {margin-right:15px!important;}
.mr20 {margin-right:20px!important;}
.mr25 {margin-right:25px!important;}
.mr30 {margin-right:30px!important;}
.mr35{margin-right:35px!important;}
.mr40 {margin-right:40px!important;}
.mr45 {margin-right:45px!important;}
.mr50 {margin-right:50px!important;}

.no_margin{
	margin-top: 0!important; 
	margin-bottom: 0!important;
	margin-left: 0!important; 
	margin-right: 0!important;
}

/*padding*/
.pt5 {padding-top:5px!important;}
.pt10 {padding-top:10px!important;}
.pt15 {padding-top:15px!important;}
.pt20 {padding-top:20px!important;}
.pt30 {padding-top:30px!important;}
.pt40 {padding-top:40px!important;}
.pt50 {padding-top:50px!important;}

.pb5 {padding-bottom:5px!important;}
.pb10 {padding-bottom:10px!important;}
.pb20 {padding-bottom:20px!important;}
.pb30 {padding-bottom:30px!important;}

.pl5 {padding-left:5px!important;}
.pl10 {padding-left:10px!important;}
.pl12 {padding-left:12px!important;}
.pl15 {padding-left:15px!important;}
.pl20 {padding-left:20px!important;}
.pl25 {padding-left:25px!important;}
.pl30 {padding-left:30px!important;}
.pl40 {padding-left:40px!important;}
.pl50 {padding-left:50px!important;}

.pr5 {padding-right:5px!important;}
.pr10 {padding-right:10px!important;}
.pr15 {padding-right:15px!important;}
.pr20 {padding-right:20px!important;}
.pr25 {padding-right:25px!important;}
.pr30 {padding-right:30px!important;}

.ptb5{padding-top:5px !important;padding-bottom:5px !important;}
.ptb10{padding-top:10px !important;padding-bottom:10px !important;}
.ptb20{padding-top:20px !important;padding-bottom:20px !important;}

/*******************
	 vertical-align
********************/

.vMid {vertical-align:middle;}
.vTop {vertical-align:top;}
.vam1 {vertical-align:-1px;}
.vam2 {vertical-align:-2px;}
.vam3 {vertical-align:-3px;}
.vam4 {vertical-align:-4px;}
.vam5 {vertical-align:-5px;}

.delline {text-decoration:line-through;}
.underline {text-decoration:underline;}

/*align */
.align_l{text-align:left !important;}
.align_r{text-align:right !important;}
.align_c{text-align:center !important;}

/* ------------------------------
	font color
	 ------------------------------ */
.red{color:#f73838 !important;}
.blue{color:#235caa !important;}
.green{color:#91b12f !important;}
.mint{color:#0cd8c1 !important;}
.gray{color:#363636 !important;}


/*******************
	 font-size
********************/

.font12{font-size:12px!important;}
.font16{font-size:16px!important;}
.font17{font-size:17px!important;}
.font18{font-size:18px!important;}
.font20{font-size:20px!important;}


/*******************
	 font-weight
********************/

.bld {font-weight:bold};
.bld1 {font-weight:100!important;}
.bld2 {font-weight:200!important;}
.bld3 {font-weight:300!important;}
.bld4 {font-weight:400!important;}
.bld5 {font-weight:500!important;}
.bld6 {font-weight:600!important;}
.bld7 {font-weight:700!important;}
.bld8 {font-weight:800!important;}
.bldNormal {font-weight:normal;}


/*border*/
.line_gray{border:1px solid #ddd !important;}

/* float clearfix */
.clearfix{*zoom:1;}
.clearfix:after{content:""; display:block; clear:both;}


/**input**/
input{
	font-size: 14px;
}
input[type="button"]:focus, input[type="submit"]:focus,  input[type="image"]:focus{
	outline: none;
}
input[type="button"], input[type="submit"],  input[type="image"]{
	cursor:pointer;
}
input[type="button"], button{
	line-height:100%;
}
input[type="button"]:hover, input[type="submit"]:hover,  input[type="image"]:hover{
	opacity: 0.7;
	-moz-opacity: 0.7;
	-ms-filter: alpha(opacity=70);
	filter: alpha(opacity=70);
}
input[type="text"]{
	padding: 3px;
	border: 1px solid #d8d8d8;
}
input[type="password"]{
	padding: 3px;
	border: 1px solid #d8d8d8;
}
input[type="file"]{
	height: 24px;
	border: 1px solid #d8d8d8;
}
input.long_search_input{
	width:200px;
	border:1px solid #d8d8d8;
	border-radius:3px;
	-webkit- border-radius:3px;
	-moz- border-radius:3px;
	-o- border-radius:3px;
}
input.form_iput{
	width: 376px;
	height: 42px;
	padding-left: 15px;
	line-height: 42px;
	color: #c9c9c9;
}
textarea{
	border: 1px solid #d8d8d8;
}
/* Webkit */
input::-webkit-input-placeholder { font-size: 1em; line-height: 20px;}

/* Firefox 4-18 */
input:-moz-placeholder { font-size: 1em; line-height: 20px; }

/* Firefox 19+ */
input::-moz-placeholder { font-size: 1em; line-height: 20px; }

/*레이아웃*/


/* alt text */
.alt_txt{
	display:block;
	overflow:hidden;
	position:absolute;
	left:0;
	top:-5000px;
}

/*버튼스타일*/
.cursor_none:hover{
	cursor:unset;
	text-decoration: unset;
}


.btn{
	display:inline-block;
	cursor:pointer;
	text-align:center;
}
.flat_red{
	color:#fff;
	background:#a90b0b;
}
.flat_blue{
	color: #fff;
	background: #177cd8;	
}
.flat_navy{
	color: #fff;
	background: #244665;
}
.flat_orange{
	color: #fff;
	background: #f7941c;
}
.flat_grey{
	color: #fff;
	background: #666;
}
.flat_blue_grey{
	color: #fff;
	background: #5c7185;
}
.flat_green{
	color: #fff;
	background: #69b72f;
}
.line_grey{	
	border: 1px solid #b2b2b2;
	background: #f5f5f5;
}
.sm{
	padding: 10px 15px;
}
.mid{
	width: 80px;
	height: 39px;
}
.btn_flat_s_gray{
	background:#6d7c89;
	border-radius:3px;
	-webkit- border-radius:3px;
	-moz- border-radius:3px;
	-o- border-radius:3px;
	padding:11px 15px;
	font-size:13px;
	color:#fff;
	cursor:pointer;
}
.btn_flat_s_red{
	background:#ff4e4e;
	border-radius:3px;
	-webkit- border-radius:3px;
	-moz- border-radius:3px;
	-o- border-radius:3px;
	padding:11px 15px;
	font-size:13px;
	color:#fff;
	cursor:pointer;
}
.btn_flat_gray{
	background:#6d7c89;
	border-radius:3px;
	-webkit- border-radius:3px;
	-moz- border-radius:3px;
	-o- border-radius:3px;
	padding:16px 30px;
	font-size:16px;
	color:#fff;
	cursor:pointer;
}
.btn_flat_s_white{
	background: none;
	border: 1px solid #6d7c89;
	border-radius:3px;
	-webkit- border-radius:3px;
	-moz- border-radius:3px;
	-o- border-radius:3px;
	padding:11px 15px;
	font-size:13px;
	color:#6d7c89;
	cursor:pointer;
}

.btn_flat_line{
	display:inline-block;
	width:150px;
	height:40px;
	border:1px solid #000;
	text-align:center;
	line-height:40px;
	font-weight:700;
}
/*border*/
.line_bot1{
	border-bottom:1px solid #d8d8d8;
}

/**********************************
			버튼 스타일 추가
**********************************/

/* ------------------------------
	백그라운드color
------------------------------ */
.bg_red{background:#e43636 !important;}
.bg_navy{background:#48557c !important;}
.bg_magenta{background:#ff00ff !important;}
.bg_or{background:#f75e1a !important;}
.bg_yel{background:#fcc520 !important;}
.bg_mint{background:#199ab0 !important;}
.bg_white{background:#fff !important;}
.bg_green{background:#45b855 !important;}
.bg_purple{background:#7c007c !important;}
.bg_blue{background:#0188d4 !important;}
.bg_whiteblue{background:#5cafde !important;}
.bg_lightblue{background:#02b0f4 !important;}
.bg_darkblue{background:#006aad !important;}
.bg_whitegray{background:#c8c8c8 !important;}
.bg_gray{background:#595959 !important;}
.bg_darkgray{background:#3e3e3e !important;}

.color_white{color:#fff !important;}
.color_black{color:#000 !important;}
.color_red{color:#f73838 !important;}
.color_blue{color:#658cad !important;}
.color_darkblue{color:#006aad !important;}
.color_green{color:#91b12f !important;}
.color_mint{color:#0cd8c1 !important;}
.color_gray{color:#363636 !important;}

.radius03{border-radius:3px !important; -webkit- border-radius:3px; -moz- border-radius:3px; -o- border-radius:3px;}
.radius05{border-radius:5px !important; -webkit- border-radius:5px; -moz- border-radius:5px; -o- border-radius:5px;}
.radius08{border-radius:8px !important; -webkit- border-radius:8px; -moz- border-radius:8px; -o- border-radius:8px;}
.radius10{border-radius:10px !important; -webkit- border-radius:10px; -moz- border-radius:10px; -o- border-radius:10px;}

/* 2020-10-22 추가 */
.bg_red { background-color: #e81219 !important; }
.bg_redorange { background-color: #f3361f !important; }
.bg_orange { background-color: #f8671c !important; }
.bg_yellow { background-color: #fbce04 !important; }
.bg_lime { background-color: #c0d317 !important; }
.bg_yellowgreen { background-color: #71cc11 !important; }
.bg_green { background-color: #00b429 !important; }
.bg_mint { background-color: #10c0b1 !important; }
.bg_skyblue { background-color: #15b5e8 !important; }
.bg_blue { background-color: #2f77d3 !important; }
.bg_bluepurple { background-color: #5c58bc !important; }
.bg_purple { background-color: #b15fb7 !important; }
.bg_whitegray { color: #818182 !Important; background-color: #edeef1 !important; }
.bg_gray { background-color: #9e9fa5 !important; }
.bg_darkgray { background-color: #5a5b61 !important; }

/*버튼스타일*/
.btn_xsmall,
.btn_small,
.btn_mid,
.btn_wide { 
	display: inline-block;
	color: #fff;
	border-radius: 3px;
	letter-spacing: -0.4px;
	text-align: center;
	vertical-align: inherit;
	cursor: pointer;
}
.btn_xsmall {
	padding: 0 10px 2px;
	line-height: 24px;
	font-size: 0.79rem;
}
.btn_small { 
	padding: 0 15px;
	line-height: 32px;
	font-size: 0.87rem;
}
.btn_mid {
	padding: 0 25px;
	line-height: 35px;
	font-size: 0.95rem;
}
.btn_wide {
	padding: 0 50px;
	line-height: 49px;
	font-size: 1.02rem;
}
.btn_line_small {
	display: inline-block;
	padding: 0 15px;
	min-width: 40px;
	line-height: 34px;
	font-size: 0.95rem;
	border: solid 1px #ccc;
	text-align: center;
	vertical-align: inherit;
	cursor: pointer;
}

/* hover */
.btn_small:hover,
.btn_mid:hover,
.btn_wide:hover { text-decoration: underline; }




/**********************************
			header
**********************************/
#wrap
{
float: left;
width:100%;
}

#header{
	width: 100%;
}
.header_area{
	position: relative;
	width: 1200px;
	margin: 0 auto;
	height:100px;
}
.header_area:after{
	display: block;
	clear: both;
	content: "";
}
.logo{
	position: absolute;
	left: 0;
	top: 31px;
	/* 2020-09-28 수정 */
	top: 50%;
	margin-top: -25px;
}
/* 2020-09-28 추가 */
.header_area .logo a { 
	display: block;
	line-height: 50px; 
}
.top_menu_group{
	padding-top: 15px;
}
.top_menu_group:after{
	display: block;
	clear: both;
	content: "";
}
.top_menu{
	float: right;
	font-size:14px;
}
.top_menu a.top_m1:after,
.top_menu a.top_m2:after{
	display: inline-block;
	content: "";
	width: 1px;
	height: 10px;
	background: #d6d6d6;
	margin: 0 6px 0 10px;
}
.top_menu a:hover{
	color: #666;
}
/*로그인*/
.login_group{
	float:right;
	padding-top: 10px;
}
.login_group:after{
	display: block;
	clear: both;
	content: "";
}
.login_group .login,
.login_group .logout{
	float: right;
}
.login_group input[type="text"],
.login_group input[type="password"]{
	float: left;
	width: 130px;
	height: 25px;
	padding-left: 10px;
	margin-left: -1px;
}
.login_group .btn_login{
	width: 102px;
	height: 33px;
	line-height: 1;
	font-size: 15px;
	margin-left: 5px;
	background: #273244;
	color: #fff;
	letter-spacing: -1px;
}
/*logout*/
.login_group .logout span{
	float: left;
	display: inline-block;
	line-height: 28px;
}
.login_group .logout .icon{
	display: inline-block;
	width: 26px;
	height: 25px;
	margin-right: 5px;
}
.login_group .logout .name{
	font-weight: bold;
	color: #1d1d1d;
}
.login_group .logout .btn_logout{
	width: 102px;
	height: 31px;
	margin-left: 5px;
	background: #fff;
	border:1px solid #d6d6d6;
	color: #1d1d1d;
}
/*gnb*/
.gnb_wrap{
	background: #006ce4;
	/* border-top: 1px solid #d6d6d6;
	border-bottom: 1px solid #d6d6d6; */
}
.gnb_group{
	width: 1200px;
	margin: 0 auto;
}
.gnb_group:after{
	display: block;
	clear: both;
	content: "";
}
.gnb li { 
	float: left;
	width: 25%; 
}
.gnb li:after { 
	content: "";
	display: block;
	clear: both;
}
.gnb li a{
	/* float: left; */
	display: block;
	/* margin-right:136px; */
	line-height: 58px;
	font-size: 17px;
	color: #fff;
	letter-spacing: -0.5px;
	text-align: center;
	transition: .3s;
}
.gnb li.bg2 a {
	/* color: #ff8533; */
	color: #ff9950;
}
/*ie8_hack*/
@media \0screen {

	.gnb li a{margin-right:96px;letter-spacing:-1px;font-weight:600;}

}
.gnb li a:hover{
	color: #fff;
	background: #004694;
	/* background:url("/images/main_new/gnb_on_bg2.png") repeat-x 0 bottom; */
}
.gnb li.no_margin a{
	margin-right: 0;
}
.gnb li.bg2 a:hover{
	color: #ff8533;
	background:url("/images/main_new/gnb_on_bg2.png") repeat-x 0 bottom;
}



/**********************************
			하단 메뉴 영역
**********************************/
.bottom_util_wrap{
	width:100%;
	height:50px;
	line-height:50px;
	background: #fff;
	border-top: solid 1px #d8d8d8;
	/* border-bottom: solid 1px #ccc; */
	overflow:hidden;
}

.bottom_util{
	width:1200px;
	margin:auto;
}
.bottom_util .util_01:after,
.bottom_util .util_02:after,
.bottom_util .util_03:after{
	display: inline-block;
	content: "";
	width: 1px;
	height: 12px;
	background: #999;
	margin: 0 22px 0 23px;
}
.bottom_util li{
	float: left;
}
.bottom_util li a{
	font-size: 14px;
	color: #999;
}
.bottom_util li a:hover{
	color: #666;
}

/**********************************
			footer
**********************************/
.footer{
	float: left;
	width: 100%;
}
.footer_wrap{
	background: #f9f9f9;
}
.footer_group{
	position:relative;
	width: 1200px;
	height:100px;
	padding: 40px 0 80px;
	margin: 0 auto;
}
.footer_group:after{
	display: block;
	content: "";
	clear: both;
}
.footer_group h2{
	float: left;
	margin-right: 50px;
	opacity: 0.6;
}
.footer_group .address{
	float: left;
	font-weight: 400;
	font-size: 13px;
	color: #999;
}
/*관련사이트 영역*/
.logo_list{
	position:absolute;
	top:92px;
	right:0;
}
.logo_list li {
	float: left;
	margin-left: 40px;
}
.logo_list li a{
	display: inline-block;
	text-indent: -9999px;
	background: url(/images/comm/img_logo_list.png) no-repeat;
}
.logo_list li.logo_01 a{
	width: 113px;
	height: 67px;
	background-position: 0 0;
}
.logo_list li.logo_02 a{
	width: 166px;
	height: 67px;
	background-position: -113px 0;
}
.logo_list li.logo_03 a{
	width: 60px;
	height: 67px;
	background-position: -279px 0;
}

/**********************************
		빠른 메뉴 19.05.27
**********************************/
#quick_menu_layer {
	width: 160px;
	position:absolute;
	text-align: left;
	top:0px;
	right: 0;
}
.quick_menu {
	width: 160px;
	text-align: center;
}
.quick_menu h3 {
	padding: 15px 0;
	font-size: 18px;
	color: #ffffff;
	background: #49c3e8;
	line-height: 24px;
	cursor: default;
}
.quick_menu ul {
	/* padding: 8px 0; */
	background: #333;
}
.quick_menu ul li a {
	display: block;
	padding: 12px 0;
	font-size: 14px;
	color:#ffffff;
}
.quick_menu ul li a:hover {
	background: #1292b7;
}

/**********************************
		과제제출 파일 업로드 label
**********************************/
.work_file_wrap label {
	display: inline-block;
	width: 154px;
	height: 31px;
	padding: 5px 13px;
	color: #999;
	font-size: inherit;
	line-height: normal;
	vertical-align: middle;
	cursor: pointer;
	background: url("/images/button/btn_work_06.gif") no-repeat;
}
.work_file_wrap input[type="file"] {
	/* 파일 필드 숨기기 */
	position: absolute;
	width: 1px; 
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}
.work_file_wrap .upload-name {
	display: inline-block;
	width: 680px;
	margin-top: 7px;
	padding: 5px 13px; /* label의 패딩값과 일치 */
	font-size: inherit;
	line-height: normal;
	vertical-align: middle;
	background-color: #f5f5f5;
	border: 1px solid #ebebeb;
	border-bottom-color: #e2e2e2;
	border-radius: .25em;
	-webkit-appearance: none; /* 네이티브 외형 감추기 */
	-moz-appearance: none;
	appearance: none;
}


/* -------- player -------- */
#player { 
	margin: 0;
	padding: 0;
	background: #020202; 
}
#player *:focus { 
	outline: none;
	border: 0;
}
.player_speed { 
	position: absolute; /* left: 50%; */ top: 0; right: 16px;
	/* padding: 0 16px; */
	font-size: 0;
	text-align: center;
	/* transform: translateX(-50%); */
}
.player_speed:after { 
	content: "";
	display: block;
	clear: both;
}
.player_speed a { 
	/* float: left; */
	display: inline-block;
	width: 54px;
	line-height: 27px;
	font-family: arial, sans-serif;
	font-size: 11.4px;
	font-weight: 500;
	color: #fafafa;
	background: linear-gradient(145deg, #444, #222);
	border-left: solid 0.12em #616161; 
	border-radius: 0 0 4px 4px;
	box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
	text-shadow: 1px 1px 0 rgba(0,0,0,0.7);
	text-align: center;
}
.player_speed a:not(:first-child) { 
	margin-left: 3px;
}
.player_speed a:before { 
	content: "";
	display: inline-block;
	clear: both;
	margin: 0 5px 0 0;
	width: 4px; height: 4px;
	border: solid 2px #fff;
	border-radius: 5px;
	display: none;
}

/* 수강신청 리스트 */
table.bbs_list_card{
	border-top:2px solid #404653;
}
table.bbs_list_card th{
	padding:10px 0;
	text-align:center;
	font-weight:500;
	border-bottom:1px solid #404653;
}
table.bbs_list_card td{
	padding:10px 0;
	text-align:center;
	font-weight:500;
	border-bottom:1px solid #404653;
}