/* 공통 css */
#wrap{
	height: 100%;
	/* min-width: 360px; */
	margin: 0 auto;
}
#wrap img{vertical-align: middle;}

#header{
	width: 100%; height: 94px;
	border-top: 2px solid #00349b;
	position: fixed; z-index: 100;
	top: 0;
	background: url(../img/header_bg.png) repeat-x;
	color: #ffffff;
}
	#header .top h1{
		line-height: 90px;
		font-size: 14px;
		font-weight: bold;
		font-family: '굴림', Gulim;
		text-align: center;
	}
	#header .top .btn1{
		height: 90px; line-height: 90px;
		position: absolute;
		top: 0; left: 17px;
		text-align: center;
		cursor: pointer;
	}
	#header .top .btn2{
		height: 90px; line-height: 90px;
		position: absolute;
		top: 0; right: 17px;
		text-align: center;
		cursor: pointer;
	}
	#navi{
		width: 20%; height: 100%;
		position: fixed; z-index: 150;
		top: 0; left: -20%;
		background-color: #1c57cb;
		transition: all .5s;
	}
	#navi.on{left:0;}
	@media screen and (max-width: 1000px) {
		#navi{
			width: 40%;
			left: -40%;
		}
	}
	@media screen and (max-width: 500px) {
		#navi{
			width: 80%;
			left: -80%;
		}
	}
	#navi ul li a{
		height: 69px; line-height: 69px;
		padding-left: 20px;
		border-top: 1px solid #0f4cc4;
		clear: both; display: block;
		background-color: #1c57cb;
		color: #dfeaff;
		font-size: 14px;
		font-weight: bold;
	}
	#navi ul li.call a{
		height: 136px; line-height: 136px;
	}
	#navi ul li.close_btn{
		height: 69px; line-height: 69px;
	}
	#navi ul li.close_btn span{
		margin-right: 20px;
		float: right; 
		cursor: pointer;
	}
	
#section{/* min-width: 360px; */	margin: 92px auto 0;}
.sub_header{
	width: 100%; height: 43px; line-height: 43px;
	border-bottom: 2px solid #0f2f6e;
	position: relative;
	background-color: #1c57cb;
}
.sub_header h2{
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
	font-family: '나눔고딕', Nanum Gothic;
	text-align: center;
}
.sub_header .prev a{
	width: 10%; height: 43px;
	border-right: 1px solid #194fb8;
	position: absolute;
	left: 0;
	background: url(../img/sub_arrow_prev_on.png) no-repeat 85% center;
}
.sub_header .next a{
	width: 10%; height: 43px;
	border-left: 1px solid #194fb8;
	position: absolute;
	right: 0;
	background: url(../img/sub_arrow_next_off.png) no-repeat 15% center;
}
.sub_header .next.sub_close_btn a{
	background: url(../img/sub_close_btn.png) no-repeat 15% center;
}

#footer{
	width: 100%; height: 168px;
	padding-top: 23px;
	padding-bottom: 50px;
	background-color: #1d1d1d;
}
#footer p{
	line-height: 140%;
	color: #bcbcbc;
	font-size: 11px;
	text-align: center;
}
#footer .btn a{
	width: 119px; height: 30px; line-height: 30px;
	margin: 15px auto 0;
	border: 1px solid #0f2c65;
	border-radius: 2px;
	display: block;
	background-color: #11347a;
	color: #ffffff;
	font-family: '나눔고딕', Nanum Gothic;
}






/* 페이지 css */

/* main */
.main_box{
	width: 100%; height: 412px; 
	overflow: hidden;
}
.main_left{
	width: 50%; height: auto;
	float: left;
}

.main_left ul li a{
	height: 69px; line-height: 69px;
	padding-left: 17px;
	border-top: 1px solid #0f4cc4;
	display: block;
	background-color: #1c57cb;
}
.main_left ul li.call a{
	height: 136px; line-height: 136px;
}
.main_right{
	width: 50%; height: 100%;
	float: right;
	background: url(../img/main_bg2.png) no-repeat;
	background-size: cover;
}


/* m_login */
#m_login_wrap{
	width: auto; height: 100%;
	/* min-width: 320px; */ min-height: 440px;
	padding: 10px;
	margin: 90px auto 0;
}
	#m_login_wrap .logo{
		margin: 17px auto 55px; 
		text-align: center;
	}
	.m_login_box{
		height: 100%;
		margin: 0 auto 22px;
	}
	.m_login_box input{margin: 0; padding: 0; border: 0;}
	.m_login_box>.tit{margin-bottom: 16px;}
	.m_login_box .txt{
		width: 80%;
		margin-bottom: 13px;
		float: left;
	}
	.m_login_box .txt input{
		width: 96%; height: 31px; line-height: 31px;
		padding-left: 1%;
		margin-bottom: 4px;
		border: 1px solid #d2d2d2;
		font-family: '굴림', Gulim;
		vertical-align: middle;
	}
	.m_login_box .txt .last input{margin-bottom: 0;}
	.m_login_box .btn1{
		width: 20%;
		margin-bottom: 13px;
		float: right;
	}
	.m_login_box .btn1 a{
		width: 100%; height: 70px; line-height: 70px;
		display: block;
		background-color: #1c57cb;
		color: #ffffff;
		font-size: 14px;
		text-align: center;
		font-family: '나눔고딕', Nanum Gothic;
		cursor: pointer;
	}
	
	.m_login_box .seek{
		clear: both;
		color: #363636;
	}
	.m_login_box .seek label,
	.m_login_box .seek input,
	.m_login_box .seek span,
	.m_login_box .seek span a{font-family: '나눔고딕', Nanum Gothic; vertical-align: middle;}
	.m_login_box .seek .checkbox02{
		float: left;
	}
	.m_login_box .seek .btn_box{
		float: right;
	}
	
	.m_login_txt{
		padding: 13px;
		margin-bottom: 20px;
		border: 1px solid #d3dbec;
		border-radius: 2px;
		background-color: #ecf1fb;
		color: #536f99;
		text-align: justify;
	}
	
/* 본인인증/아이핀 */
	#m_login_wrap2{
	width: auto;
	/* min-width: 320px; */ min-height: 100px;
	padding: 10px;
	margin: 0px auto 0;
	}

	.m_login_box2{
		height: 100%;
		margin: 0 auto;
	}
	.m_login_box2 .btn1{
		width: 100%;
		margin-bottom: 5px;
		float: right;
	} 
	.m_login_box2 .btn1 a{
		width: 100%; height: 50px; line-height: 50px;
		display: block;
		background-color: #1c57cb;
		color: #ffffff;
		font-size: 14px;
		text-align: center;
		font-family: '나눔고딕', Nanum Gothic;
		cursor: pointer;
	}





/* m_notice */
.m_bullet_box{width: 100%; height: auto; margin-bottom: 100px;}
.m_bullet_list{margin-bottom: 12px;}
	.m_bullet_list ul li{
		line-height: 160%;
		padding: 15px 5%;
		border-bottom: 1px dashed #cfcfcf;
		background-color: #ffffff;
		color: #545454;
		font-size: 12px;
		font-weight: bold;
	}
	.m_bullet_list ul li.last{border-bottom: 1px solid #b0b0b0;}
	.m_bullet_list ul li span{display: block;}
	.m_bullet_list ul li span.days{
		color: #b6b6b6;
		font-weight: normal;
	}
	.m_bullet_list .con{
		line-height: 150%;
		padding: 15px 5% 40px;
		color: #545454;
		background-color: #ffffff;
	}
	.m_bullet_list .con .emp1{color: #0091bb; font-weight: bold;}
	.m_bullet_list .con_btn a{
		height: 33px; line-height: 33px;
		display: block;
		background-color: #787878;
		color: #ffffff;
		font-weight: bold;
		text-align: center;
	}

/* m_myclass */
.m_myclass_box{margin-bottom: 100px;}
	.m_myclass_box .tit{
		height: 44px; line-height: 44px;
		margin-bottom: 17px;
		border-bottom: 1px solid #bfbfbf;
		background-color: #ffffff;
		color: #2d2d2d;
		font-size: 13px;
		text-align: center;
	}
	.m_myclass_box .tit .emp1{color: #1c57cb; font-weight: bold;}
	.m_myclass_box .tit .emp2{color: #c02828; font-weight: bold;}
	
	.m_myclass_box .careful{
		line-height: 150%;
		padding: 23px 0;
		margin-bottom: 13px;
		border-radius: 2px;
		background: url(../img/myclass_careful_bg.jpg) repeat;
		color: #ffffff;
		text-align: center;
	}
	.m_myclass_box .careful p:first-child{margin-bottom: 10px;}
	.m_myclass_box .careful .emp3{color: #ffc001;}
	
	.m_myclass_box .list{
		line-height: 150%;
		margin-bottom: 30px;
		border: 1px solid #bebebe;
		border-radius: 2px;
		background-color: #ffffff;
	}
	.m_myclass_box .list .info:after{content: ''; display: block; clear: both;}
	.m_myclass_box .list .info .con{
		width: 90%;
		min-height: 105px;
		float: left;
	}
	.m_myclass_box .list .info .con .txt{
		padding: 16px 8px 0;
	}
	.m_myclass_box .list .info .con .emp1{
		color: #194bae;
		font-size: 14px;
		font-weight: bold;
	}
	.m_myclass_box .list .info .con .emp2{
		margin-bottom: 10px;
		color: #7b7b7b;
		font-size: 11px;
	}
	.m_myclass_box .list .info .con .emp3{
		color: #1c57cb;
		font-size: 14px;
		font-weight: bold;
	}
	.m_myclass_box .list .info .con ul:after{content: ''; display: block; clear: both;}
	.m_myclass_box .list .info .con ul li{
		height: 26px; line-height: 26px;
		padding: 0 5px;
		border: 1px solid #b8b8b8;
		border-right: 0;
		float: left;
		background-color: #fafafa;
		
	}
	.m_myclass_box .list .info .con ul li.first{
		border-top-left-radius: 2px;
		border-bottom-left-radius: 2px;
	}
	.m_myclass_box .list .info .con ul li.last{
		border-right: 1px solid #b8b8b8;
		border-top-right-radius: 2px;
		border-bottom-right-radius: 2px;
	}
	
	.m_myclass_box .list .info .btn{
		width: 10%; height: 100%;
		min-width: 32px; min-height: 105px;
		float: right;
		background: url(../img/myclass_icon2.png) no-repeat 50% 50% #6b92dd;
		text-align: center;
		cursor: pointer;
	}
	.m_myclass_box .list .info .btn.on{
		-o-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		background-color: #999999;
	}
	
	@media screen and (max-width:400px) {
		.m_myclass_box .list .info .con{
			width: 325px;
		}
		.m_myclass_box .list .info .btn{
			width: 32px;
		}
	}
	
	.m_myclass_box .list .list_con{border-top: 1px solid #b8b8b8;}
	.m_myclass_box .list .list_con li{
		padding: 16px 10px 16px 0px;
		border-bottom: 1px dashed #cfcfcf;
	}
	.m_myclass_box .list .list_con li.last{border-bottom: 0;}
	.m_myclass_box .list .list_con li table{width: 100%;}
	.m_myclass_box .list .list_con li .num{
		width: 10%;
		min-width: 40px;
		padding-right: 10px;
		border-right: 1px solid #dedede;
		color: #7b7b7b;
		font-size: 11px;
	}
	.m_myclass_box .list .list_con li .num .emp1{
		color: #183c83; 
		font-size: 15px; 
		font-weight: bold;
	}
	.m_myclass_box .list .list_con li .num .emp2{
		color: #c02828; 
		font-size: 13px; 
		font-weight: bold;
	}
	.m_myclass_box .list .list_con li .txt{
		width: 83%;
		padding-left: 2%;
	}
	.m_myclass_box .list .list_con li .txt>span{
		display: block;
		color: #3d3d3d;
		font-size: 14px;
		font-weight: bold;
	}
	.m_myclass_box .list .list_con li .txt>span.days{
		color: #7b7b7b;
		font-size: 11px;
		font-weight: normal;
	}
	.m_myclass_box .list .list_con li .btn{
		width: 1%;
	}
	
	.m_myclass_box .play_box{margin: 0 auto 12px; text-align: center;}
	.m_myclass_box .play_box .img img{width: 100%;}
	.m_myclass_box .play_box .p_control{
		clear: both;
		margin: 0 auto;
	}
	.m_myclass_box .play_box .p_control ul{width: 100%;}
	.m_myclass_box .play_box .p_control ul:after{content: ''; display: block; clear: both;}
	.m_myclass_box .play_box .p_control ul li{
		height: 44px; line-height: 44px;
		border-bottom: 1px solid #4f4f4f;
		background-color: #4b4b4b;
		float: left;
	}
	.m_myclass_box .play_box .p_control ul li.prev{width: 10%;}
	.m_myclass_box .play_box .p_control ul li.next{width: 10%; float: right;}
	.m_myclass_box .play_box .p_control ul li.btn{width: 80%;}
	.m_myclass_box .play_box .p_control ul li.prev p{border-right: 1px solid #5d5d5d;}
	.m_myclass_box .play_box .p_control ul li.next p{border-left: 1px solid #5d5d5d;}
	.m_myclass_box .play_box .p_control .count{
		height: 30px; line-height: 30px;
		background-color: #3b3b3b;
		color: #ffffff;
		text-align: center;
	}
	.m_myclass_box .play_box .p_control .count .emp{
		color: #efd826;
		font-size: 16px;
		font-weight: bold;
	}
	
	
	.m_myclass_box .con_box1{
		padding: 15px 10px;
		margin-bottom: 12px;
		border: 1px solid #d8d8d8;
		border-radius: 2px;
		background-color: #ffffff;
	}
	.m_myclass_box .con_box1 dl dt{
		padding-bottom: 13px;
		margin-bottom: 13px;
		border-bottom: 1px dashed #cfcfcf;
		color: #5073ba;
		font-size: 13px;
		font-weight: bold;
	}
	.m_myclass_box .con_box1 dl dd{
		line-height: 160%;
		color: #545454;
		font-size: 11px;
	}
	
/* captcha */
.m_cap_box{
	line-height: 160%;
	border: 1px solid #7c99d2;
	background-color: #ffffff;
}
	.m_cap_box .tit{
		height: 25px; line-height: 25px;
		padding: 18px 3%;
		margin-bottom: 14px;
		border-bottom: 1px solid #7c99d2;
		color: #42619f;
		font-size: 14px;
		
	}
	.m_cap_box .tit span{font-weight: bold;}
	.m_cap_box .tit span.btn{float: right;}
	.m_cap_box .tit span.btn a{
		width: 73px; height: 23px; line-height: 23px;
		border: 1px solid #7b9bdb;
		display: block;
		color: #7b9bdb;
		font-size: 12px;
		text-align: center;
	}
	.m_cap_box .con .top{
		padding-bottom: 13px;
		margin-bottom: 15px;
		border-bottom: 1px dashed #cfcfcf;
		color: #545454;
		text-align: center;
	}
	.m_cap_box .con .bottom{
		text-align: center;
	}
	.m_cap_box .con .bottom .b_box{
		margin: 2%;
		padding: 24px 2% 34px;
		border: 1px solid #d5d8dd;
	}
	.m_cap_box .con .bottom .b_box .btn{
		padding-bottom: 21px;
		margin-bottom: 12px;
		border-bottom: 1px solid #7b9bdb;
	}
	.m_cap_box .con .bottom .b_box .btn .img{margin-bottom: 12px;}
	.m_cap_box .con .bottom .b_box .send_box{
		color: #7b9bdb;
		font-weight: bold;
	}
	.m_cap_box .con .bottom .b_box .send_box p{margin-bottom: 8px;}
	.m_cap_box .con .bottom .b_box .send_box input{
		border: 0; padding: 0; margin: 0;
		width: 48%; height: 29px; line-height: 29px;
		padding-left: 2%;
		border: 1px solid #d5d5d5;
	}
	.m_cap_box .con .bottom .b_box .send_box .btn2 a{
		width: 50%; height: 31px; line-height: 31px;
		margin: 0 auto;
		background-color: #1c57cb;
		display: block;
		color: #ffffff;
		font-size: 13px;
		font-family: '나눔고딕', Nanum Gothic;
	}