@charset "utf-8";

/* ------------------------------
         base Start
   ------------------------------ */
/*폰트 : 나눔고딕*/
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
 
/*폰트 : 본고딕*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

* { margin: 0; padding: 0; -webkit-text-size-adjust: none; }
*:focus { outline: none; }
html, body { width: 100%; height: 100%; font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif; font-size: 14px; color: #424242; line-height: 20px; -webkit-overflow-scrolling: touch; }
h1, h2, h3, h4, h5, h6 { font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif; font-size: 100%; font-weight: normal; }
fieldset,img { border: 0 none; }
dl,ul,ol,menu,li { list-style: none; }
img,input,select,textarea,button,label { font-size: 100%; vertical-align: middle; }
textarea { resize: none; }
label, button { border: 0 none; background-color: transparent; cursor: pointer; }
address,caption,cite,code,dfn,em,var { font-style: normal; font-weight: normal; }
caption,legend { display: none; }
table { table-layout: fixed; border-collapse: collapse; font-size: 14px; }
th,td { word-break: break-all; vertical-align: middle; }
input, textarea { vertical-align: middle; IME-MODE: auto; }
a { color: #676767; cursor: pointer; }
a:link { color: #676767; text-decoration: none ; }
a:visited { color: #676767; text-decoration: none; }
a:active { color: #676767; text-decoration: none; }
a:hover { color: #676767; text-decoration: none; }
/* ios input 기본 스타일 초기화 */
input[type="submit"], input[type="button"], textarea, button { -webkit-appearance: none; }
input[type="submit"], input[type="button"], input[type="text"], input[type="password"], textarea, button, select { -webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; border-radius:0; -webkit-appearance:none; -moz-appearance:none; }
/* select{-webkit-appearance:menulist-text} */
select { -webkit-appearance: text; }
button { font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif; font-size: inherit; }
input[type="text"], input[type="password"], textarea {
	padding: 5px;
	line-height: 100%;
	background: #fff;
	border: solid 1px #c9c9c9;
}
input {
	padding: 5px;
	line-height: 100%;
	font: 15px 'Noto Sans KR', 'Nanum Gothic', sans-serif;
	background: #fff;
}


/* ------------------------------
         common Start
   ------------------------------ */
body {
	line-height: 140%;
	font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif;
	font-size: 14px;
	color: #000;
}
/*link*/
a { color: #666; }
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;}
.mt15 {margin-top:15px!important;}
.mt20 {margin-top:20px!important;}
.mt30 {margin-top:30px!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;}
.mr_no{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;}

.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;}
.pl_no{padding-left:0 !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;}

/* vertical-align */
.vMid {vertical-align:middle;}
.vTop {vertical-align:top;}
.vam_p1{vertical-align:1px;}
.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 */
.bld {font-weight:bold;}
.bld1 {font-weight:100;}
.bld2 {font-weight:200;}
.bld3 {font-weight:300;}
.bld4 {font-weight:400;}
.bld5 {font-weight:500;}
.bld6 {font-weight:600;}
.bld7 {font-weight:700;}
.bld8 {font-weight:800;}
.bldNormal {font-weight:normal;}

/*border*/
.border_bt_none{
	border-bottom: none!important;
}
.boder_lt_none{
	border-left: none!important;
}
/* font color */
.red{color: red!important;}
.green{color: #82b118!important;}
.mint{color: #2cafb6!important;}
.red2{color: #e2605b!important;}
.purple{color: #a380b6!important;}
.brown{color: #9d7b60!important;}

/*text-indent*/
.text_indent10{
	text-indent: -10px;
	margin-left: 10px;
}
.text_indent16{
	text-indent: -16px;
	margin-left: 16px;
}

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

/**input**/
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);
}

/* 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; }

/* 모바일 수평 스크롤 금지 */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}
::-webkit-scrollbar { display: none; }

/*표시*/
.float_l{position:relative; float:left;}
.float_r{position:relative; float:right !important;}
.in_bl{display:inline-block;}
.di_bl{display:block;}
.cboth{clear:both;}

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

/*button*/
.btn_lecture{
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -18px;
	font-family: 'Noto Sans KR';
	font-size: 16px;
	font-weight: 500;
}
.btn_white{
	width: 95%;
	margin: 0 auto;
	padding: 12px;
	border: 1px solid #cfcfcf;
	color: #787b82;
	text-align: center;
	background: #fff;
}
.btn_write_grey{
	width: 95%;
	margin: 0 auto;
	padding: 12px;
	border: 1px solid #787b82;
	color: #fff;
	text-align: center;
	background: #787b82;
}
.flat_red{
	color: #fff !important;
	background: #e1534e !important;
}
.flat_grey{
	color: #fff !important;
	background: #787b82 !important;
}
.flat_mint{
	color: #fff !important;
	background: #2cafb6 !important;
}
.flat_blue{
	color: #fff !important;
	background: #367cd1 !important;
}
a.flat_red {
	color: #fff;
}
.sm_r{
	padding: 2px 6px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
}
.sm{
	padding: 2px 6px;
}
.mid{
	padding: 10px 15px;
}
.mid_r{
	padding: 11px 15px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
}


/* ---------------------------------
    모바일 img
--------------------------------- */
img {
    width: 100%;
}

/*레이아웃*/
html { 
	overflow-y: scroll; 
}
body {
	position: relative;
	margin: 0 auto !important;
	min-width: 320px;
	/* max-width: 760px; */
	max-width: 500px;
	background: #e9ebed;
	overflow-x: hidden;
}


/******************************
	헤더영역:header
******************************/
#header_wrap {
	position: relative;
	width: 100%;
	height: 70px;
	background: #fff;
}

/* logo */
.logo_group {
	width: 100%;
	padding: 20px 5%;
	line-height: 30px;
	box-sizing: border-box;
}
.logo_group:after { 
	content: "";
	display: block;
	clear: both;
}
h1.logo { 
	float: left; 
	line-height: 1;
}
h1.logo a { display: inline-block; }
h1.logo a img { 
	width: auto;
	max-height: 29px;
}
.logo_group p{
	display: inline-block;
	font-size: 15px;
	color: #999;
	margin-top: 5px;
	font-weight:600;
}
.login_group{
	float: right;
}
.btn_login a{
	display: inline-block;
	width: 75px;
	line-height: 30px;
	font-size: 1.75ex;
	font-weight: 700;
	color: #fff;
	background: #464d56;
	border-radius: 4px;
	text-align: center;
}
.btn_logout a{
	display: inline-block;
	width: 75px;
	padding: 7px 0;
	text-align: center;
	color: #5d5d5d;
	border: 1px solid #464d56;
	background: #fff;
	font-weight:600;
}

/*gnb*/
.main_gnb_group,
.gnb_group {
	padding-left: 20px;
	overflow-x: scroll;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}
.main_gnb_group { 
	background: #fff; 
	border-top: solid 1px #dfdfdf;
}
.gnb_group {
	background: #464d56;
}
.main_gnb_group a,
.gnb_group a {
	display: inline-block;
	margin-right: 18px;
	height: 50px;
	line-height: 48.5px;
	font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif;
	font-weight: 700;
	letter-spacing: -0.7px;
}
.main_gnb_group a { 
	font-size: 16px;
	color: #1d1d1d;
}
.gnb_group a {
	font-size: 16px;
	color: #b1b3b6;
}
a.gnb_menu_on {
	color: #fff;
}


/******************************
	푸터영역:footer
******************************/
#footer_wrap {
	padding: 30px 0 50px;
	width: 100%;
	/* background: #282a2c; */
}

/* footer btn */
.footer_btn_group a { 
	display: inline-block;
	padding: 0 15px;
	height: 32px;
	max-width: 210px;
	line-height: 32px;
	font-size: 13px;
	color: #909090;
	border: solid 1px #ccc;
	letter-spacing: -0.5px;
}
.telephone {
	margin-left: 2px;
}
.bar:before {
	content: "";
	display: inline-block;
	clear: both;
	position: relative; top: 0.5px;
	margin: 0 0 0 6px;
	width: 0px; height: 11px;
    background: #777;
}
.footer_info {
	margin-top: 27px;
	padding: 0 3%;
	line-height: 1.5;
	font-size: 11.5px;
	color: #909090;
	letter-spacing: -0.4px;
}


/******************************
	전체메뉴
******************************/
.btn_all_menu a{
	position: absolute;
	top: 10px;
	right: 15px;
	width: 1.5rem;
	padding: 10px;
}

.all_menu{
	position: absolute;
	width: 100%;
	background: #fff;
	z-index: 9999;
 	display: none;  
}
.all_menu a{
	display: block;
	width: 100%;
	font-family: 'Noto Sans KR','Nanum Gothic', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 63px;
	color: #fff;
	padding-left:40px;
}
.all_menu a span{
	display: inline-block;
	width: 25px;
	margin-right: 10px;
}
.all_menu a.menu4 span{
	width: 27px;
}
.all_menu a.menu6 span{
	width: 20px;
}
a.menu1{
	background: #e2605b;
}
a.menu2{
	background: #90c31f;
}
a.menu3{
	background: #9266a9;
}
a.menu4{
	background: #ad8770;
}
a.menu5{
	background: #2cafb6;
}
a.menu6{
	background: #717375;
}

/******************************
	학습하기/상단바로가기
******************************/
.btn_group{
	position: fixed;
	bottom: 10px;
	right: 13px;
	z-index: 999;
}
.btn_group a{
	display: block;
	margin-bottom: 7px;
	width: 3.4rem;
}