@charset "utf-8";
@import url("table.css");

html, body {width: 100%; height: 100%;}
body{
	font-size: 14px; font-family: 'ngb', sans-serif; color: #4e5a73; background: #f5f5f5;
	-webkit-text-size-adjust:none;
}
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, input, table, tr, th, td{margin:0;padding:0}
table {border-collapse: collapse; table-layout: fixed;}
table th {font-weight: normal;}
li {list-style: none;}
img {border: none;}
a {text-decoration: none; color: #4e5a73;}
fieldset {border:none;}
caption, legend {visibility:hidden; height: 0;font-size: 0;}
i, em {font-style: normal;}
select, input, textarea {font-family: 'ngb'; color: #4e5a73; font-size: 18px; border-radius: 0; -webkit-appearance:none;}
button {font-family: 'ngb';}
textarea {border: 0;}

select {
	box-sizing: border-box; height: 38px; margin: 0px; padding: 0 20px 0 7px; border: 1px solid #cee6e3;
	background: #fff url('../../images/mobile/common/arr_select.png') right 0 no-repeat; background-size: contain;
}

select.popType {	
	border: none;
	background: #fff url('../../images/mobile/common/arr_select1.png') right center no-repeat; background-size: contain;
}



input.text {box-sizing: border-box; width:100%; height: 38px; padding: 0 6px; line-height: 38px; border: 1px solid #cee6e3;}
textarea {box-sizing: border-box; width:100%; height: 190px; padding: 0 6px; line-height: 1.6; border: 1px solid #cee6e3; font-size: 12px;}
.rdo {position: relative; outline: none; width: 23px; height: 22px; border: none; border-radius: 50%; background: url('../../images/mobile/common/rdo_off.png') 0 0 no-repeat; background-size: contain;}
.rdo:checked {background-image: url('../../images/mobile/common/rdo_on.png');}

.chk {width: 18px; height: 18px; outline: none; margin: 0 3px; border: none; background: url('../../images/mobile/common/chk_off.png') 0 0 no-repeat; background-size: contain;}
.chk:checked {background-image: url('../../images/mobile/common/chk_on.png');}

.chk.white {background-image: url('../../images/mobile/common/chk1_off.png');}
.chk.white:checked {background-image: url('../../images/mobile/common/chk1_on.png');}

/* align */
.fl_l {float: left;}
.fl_r {float: right;}

.btnForm .fl_l {margin: 0 3px 0 0;}
.btnForm .fl_r {margin: 0 0 0 3px;}

/* button */
.button {
	box-sizing: border-box; box-shadow: 0 1px 0 0 #e5e8ed; border: none;
	width: 100%; height: 38px; line-height: 38px; background: #38ae53; color: #fff; font-size: 11px; text-align: center;
}
.find {
	background-image: url('../../images/mobile/common/find.png') !important; 
	background-repeat: no-repeat !important; 
	background-position: 50% 50% !important; 
	background-size: 16px 16px !important; 
}

.bgGray {background: #666;}
.bgRed {background: #c84623;}
.bgBlue {background: #8a9ab4;}
.bgMint {background: #54a6a3;}
.bgWhite {background: #fff; border: 1px solid #38ae53; color: #38ae53;}

.button.mail {
	background-image: url('../../images/mobile/common/ico_msg.png');
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 39px 39px;
}
.button.phone {
	background-image: url('../../images/mobile/common/ico_phone.png');
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 39px 39px;
}

/* 버튼 사이즈 */
.small {height: 34px; line-height: 34px; font-size: 12px;}
.large {height: 52px; line-height: 52px; font-size: 16px;}

.txtGr {color: #38ae53 !important;} /* 텍스트컬러: 그린 */
.txtRed {color: #c84623 !important;} /* 텍스트컬러: 레드 */
.txtMint {color: #54a6a3 !important;} /* 텍스트컬러: 민트 */
.txtBlue {color: #8a9ab4 !important;} /* 텍스트컬러: 블루 */

.autoH {display: -webkit-flex;}
.autoCenter {margin: auto; width: 100%;}

/* 메뉴아이콘 */
.info1 a {background-image: url('../../images/mobile/common/ico_menu1.png');}
.info2 a {background-image: url('../../images/mobile/common/ico_menu2.png');}
.info3 a {background-image: url('../../images/mobile/common/ico_menu3.png');}
.info4 a {background-image: url('../../images/mobile/common/ico_menu4.png');}
.info5 a {background-image: url('../../images/mobile/common/ico_menu5.png');}
.info6 a {background-image: url('../../images/mobile/common/ico_menu6.png');}
.info7 a {background-image: url('../../images/mobile/common/ico_menu7.png');}
.info8 a {background-image: url('../../images/mobile/common/ico_menu8.png');}
.info9 a {background-image: url('../../images/mobile/common/ico_menu9.png');}
.info10 a {background-image: url('../../images/mobile/common/ico_menu10.png');}
.info11 a {background-image: url('../../images/mobile/common/ico_menu11.png');}
.info12 a {background-image: url('../../images/mobile/common/ico_menu12.png');}
.info13 a {background-image: url('../../images/mobile/common/ico_menu13.png');}

/* 페이지 상단 영역 */
.headBox {padding: 16px; background: #fff;}
.headBox .tblForm {margin: 0;}
.headBox .tblForm th {}
.headBox .tblForm th label {color: #38ae53;}
.headBox .tblForm th label.addType {line-height: 0.8;}
.headBox .tblForm th label.addType i {font-size: 9px; color: #9c9c9c;}
.headBox .account {font-size: 9px; letter-spacing: -1px;}

/* side menu */
.dim {display: none; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 110; width: 100%; min-height: 600px; background: rgba(0,0,0,0.8);}
#sideMenu {position: absolute; right: -254px; width: 254px; min-height: 600px; background: #394264; box-shadow: -3px 0 4px 0 rgba(0,0,0, 0.4); -webkit-transition: 1s}
#sideMenu header * {vertical-align: middle;}
#sideMenu header {position: relative; height: 60px; background: #38ae53;}
#sideMenu header h1,
#sideMenu header i {display: inline-block;}
#sideMenu header h1 {width: 66px; height: 59px;}
#sideMenu header h1 img {width: 100%; height: 100%; vertical-align: top;}
#sideMenu header .user {padding: 0 0 0 6px; font-size: 18px; color: #fff;}
#sideMenu header .option {position: absolute; top: 20px; right: 6px;}
#sideMenu header .option a {
	position: relative; display: inline-block; width: 22px; height: 22px;
	background: url() center center no-repeat; background-size: contain;
}
#sideMenu header .option a.setting {background-image: url('../../images/mobile/common/ico_menu8.png');}
#sideMenu header .option a.sideClose {background-image: url('../../images/mobile/common/ico_close.png'); margin: 0 0 0 10px;}
#sideMenu header .option a.sideClose:after {content: ''; display: block; position: absolute; top: 4px; left: -9px; width: 1px; height: 14px; background: #fff; opacity: 0.6;}

#sideMenu dl {}
#sideMenu dl dt {height: 50px; line-height: 50px; background-color: #2d3654; color: #1aa8ab; font-size: 18px; font-family: 'ng'; text-align: center;}
#sideMenu dl dd {height: 52px; line-height: 52px; border-bottom: 1px solid #222942;}
#sideMenu dl dd a {
	display: block; padding: 0 0 0 74px; color: #fff; font-size: 18px;
	background-size: 18px 18px;
	background-position: 25px center;
	background-repeat: no-repeat;
}
#sideMenu dl dd a.on {background-color: #414c73;}

/* //side menu */

/* layout */
	
	#wrapper {height: 100%;}
	#header {
		box-sizing: border-box;
		position: relative; z-index: 100; width: 100%; height: 59px; background: #6a7fa1;
		display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center;
	}
	#header span {font-size: 22px; color: #fff; font-family: 'ng'; letter-spacing: -1px;}
	#header a.prev {
		display: block; overflow: hidden; position: absolute; top: 50%; left: 11px; margin: -11px 0 0 0; width: 14px; height: 22px; 
		font-size: 0; text-indent: -1000px;;
		background: url('../../images/mobile/common/header_prev.png') 0 0 no-repeat; background-size: cover;
	}

	#header a.sideMenu {
		display: block; overflow: hidden; position: absolute; top: 50%; right: 11px; margin: -7px 0 0 0; width: 19px; height: 15px; 
		font-size: 0; text-indent: -1000px;;
		background: url('../../images/mobile/common/header_menu.png') 0 0 no-repeat; background-size: cover;
	}

	#container {min-height: 100%; margin: -59px 0 -34px 0;}
	#content {position: relative; padding: 59px 0 34px 0;}
	#footer {height: 34px; color: #a5988c; font-size: 8px; background: #f5f5f5; display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center;}
	/* //layout */

	/* 서브페이지 */
	#wrapper.sub #header {background: #38ae53;}
	#wrapper.sub .headBox .account {font-size: 12px;}
	#wrapper.sub .headBox .find {background-color: #98a7bd;}

	.cntBox {box-sizing: border-box; padding: 12px 16px; border-top: 1px solid #38ae53;}
	.cntBox:nth-of-type(1) {border-top: none;}
	.cntBox.white {background: #fff;}
/* //layout */

/* loading */
#loading {
	background-color: #38ae53;
	background-image: url('../../images/mobile/loading_logo.png'), url('../../images/mobile/loading_copy.png');
	background-position: center center, center bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: 146px  133px, 152px  15px;
}
/* //loading */

/* loginPage */
#loginPage {background: #38ae53;}
#loginPage h1 {
	overflow: hidden; height: 180px; font-size: 0; text-indent: -1000px;
	background: url('../../images/mobile/logo365.png') center center no-repeat;
	background-size: 117px 106px;
}
#loginPage #footer {margin: 12px 0 0 0; background: none; color: #fff;}

#loginFiled {margin: 0 23px 0 23px; background-color: #fff;}
#loginFiled h2 {
	height: 42px;
	border-bottom: 1px solid #cee6e3;
	background: url('../../images/mobile/login_stit.png') 18px 16px no-repeat;
	background-size: 40px 13px; font-size: 0;
}
#loginFiled section {padding: 18px;}
#loginFiled .logInput {
	display: block; box-sizing: border-box; margin: 10px 0 0 0; padding: 0 10px;
	width: 100%; height: 40px; line-height: 40px; border: 1px solid #a5b1c6;
}
#loginFiled .logInput:first-child {margin-top: 0;}

.chkArea * {vertical-align: middle;}
.chkArea {margin: 10px 0 0 0;}
.chkArea label {padding: 0 20px 0 0; font-size: 12px;}
.chkArea label:first-child {padding-right: 0;}


#loginFiled input[type="button"][value="로그인"] {
	width: 100%; height: 46px; margin: 12px 0 0 0; font-size: 12px;
	border: none; background: #6a7fa1; color: #fff;
}

#loginFiled p {margin: 6px 0 0 0; text-align: center; font-size: 10px;}
#loginFiled p i {color: #75c84b;}

.loginService {margin: 16px 23px 0 23px;}
.loginService:after {content: ''; display: block; height: 0; clear: both; visibility: hidden; font-size: 0;}
.loginService a {box-sizing: border-box; width: 49%; height: 36px; line-height: 36px; border: 1px solid #fff; text-align: center; color: #fff; font-size: 12px; display: block;}
.loginService a:nth-of-type(1) {float: left;}
.loginService a:nth-of-type(2) {float: right;}
/* //loginPage */


/* 회원가입 */
.guideTxt {padding: 11px 0; color: #38ae53; font-family: 'ng'; text-align: center; background-color: #fff;}
.memberType li {
	position: relative; box-sizing: border-box;  display: -webkit-box; -webkit-box-align: center;
	height: 60px; padding: 0 0 0 24px; border-bottom: 1px solid #eaeaea;
}
.memberType li label * {vertical-align: middle;}
.memberType li label {font-size: 16px;}
.memberType li label .ico {display: inline-block; width: 38px; height: 38px; margin: 0 8px 0 0;}
.memberType li .rdo {position: absolute; top: 18px; right: 24px;}

.agreeArea {padding: 10px 23px; background: #dcdcdc;}
.agreeArea ul {}
.agreeArea ul li {padding: 6px 0; text-align: right;}
.agreeArea ul li:after {content: ''; display: block; clear: both; height: 0; visibility: hidden;}
.agreeArea ul li span * {vertical-align: middle;}
.agreeArea ul li span {float: left; padding: 6px 0 0 0; letter-spacing: -1px; font-size: 12px;}
.agreeArea ul li > a {
	display: inline-block; width: 116px; height: 30px; line-height: 30px;
	background: #fff; font-size: 12px; text-align: center;
}
.agreeArea + .btnForm {border-top: none;}
/* //회원가입 */

/* student: main */
.coinArea * {vertical-align: middle;}
.coinArea {overflow: hidden; padding: 9px 16px;}
.coinArea .sort {line-height: 38px;}
.coinArea .sort label {padding: 0 6px 0 22px;}
.coinArea .sort label:first-child {padding-left: 0;}

.descArea {position: relative; display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center; height: 60px; padding: 0 16px; background-color: #fff; }
.descArea span {display: inline-block; color: #38ae53; font-size: 16px; text-align: center;}
.descArea i {color: #6a7fa1;}
.descArea .date {display: block; font-size: 12px; color: #6a7fa1; text-align: center; margin: 3px 0 3px 0;}

.descArea .phone,
.descArea .counsel {position: absolute; top: 9px; line-height: 40px;}
.descArea .phone {left: 9px; width: 12%; background-image: url('../../images/mobile/common/ico_phone.png'); background-size: 39px 39px; background-position: center center; background-repeat: no-repeat;}
.descArea .counsel {right: 11px; width: 22%;}

.teacherList {overflow: hidden; padding: 8px;}
.teacherList:after {content: ''; display: block; clear: both; height: 0; visibility: hidden;}
.teacherList li {float: left; box-sizing: border-box; width: 50%; padding: 2px; }
.teacherList li a {
	display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: end;
	height: 145px; padding-right: 18px; background-color: #38ae53; font-size: 18px; text-align: right; color: #fff;
	background-size: 27px 27px;
	background-position: 14px center;
	background-repeat: no-repeat;
}

/* 고유번호 입력*/
.uniqueCode {text-align: center; }
.uniqueCode .date {color: #54a6a3; font-weight: normal; line-height: 1.8;}
.uniqueCode label {display: block;}
.uniqueCode .text {width: 80%; margin: 13px 0;}
.uniqueCode p {font-size: 18px;}
.cntBox + .myList {border-top: 1px solid #38ae53;}

/* 출근현황 */
.attendance {display: table; width: 100%; margin: 6px 0 0 0;}
.attendance:after {content: ''; display: block; clear: both; height: 0; font-size: 0; visibility: hidden;}
.attendance li {box-sizing: border-box; display: table-cell; height: 50px; border-left: 1px solid #f5f5f5; padding: 0 9px 0 9px; text-align: right; vertical-align: middle; background: #ddd ;}
.attendance li strong {float: left; font-weight: normal;}
.attendance li:nth-of-type(1) {border-left: 0;}
.attendance li.attend strong {color: #38ae53;}
.attendance li.late strong {color: #6a7fa1;}
.attendance li.absence strong {color: #ca4c46;}
.attendance li.leave strong {color: #9969b9;}

/* teacher */
.funcArea {height: 68px; padding: 0 16px; display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: justify;}
.funcArea button {display: block;}

.groupWrap {width: 80%;}
.groupWrap .groupLabel{display: block; margin: 0 0 14px 0; text-align: center;}
.groupWrap select {width: 100%;}
.groupWrap .account {text-align: center;}

.timeWrap {text-align: center;}
.timeWrap .box label {display: inline-block; width: 60px; text-align: left;}
.timeWrap .box span {padding: 0 4px 0 0;}
.timeWrap .account {margin: 24px 0 0 0;}

.box {margin: 8px 0;}
.boxLine {margin-top: 14px; padding-top: 14px; border-top: 1px solid #dcdcdc;}
.addMember a {display: block; width: 100%; height: 60px; line-height: 60px; margin: 10px 0; font-size: 14px;}
.box .find {width: 100%; height: 50px;}

.addBox {width: 40%; margin: 0 0 0 0;}
.addBox select {width: 100%; margin: 0 0 0 12px;}

/* 수납대상 */
.descArea * {vertical-align: middle;}
.descArea.datePicker div {}
.descArea.datePicker label {padding: 0 4px 0 0;}
.descArea.datePicker .find {margin: 0 0 0 28px;}

.targetChoice {margin: 0 0 10px 0; text-align: right;}
.targetChoice label {float: left; line-height: 32px;}
.targetChoice select {height: 32px; font-size: 14px;}

.targetLoad {margin: 8px 0 0 0; text-align: right;}
.targetLoad button {width: auto;}

/* 서브메인 */
.subMain .grBtn * {vertical-align: middle;}
.subMain .grBtn {display: block; width: 100%; height: 94px; line-height: 94px; margin: 5px 0; font-size: 18px;}
.subMain .grBtn i {display: inline-block; width: 27px; height: 27px; margin: 0 6px 0 0;}
.subMain .grBtn i img {width: 27px; height: 27px; vertical-align: top;}

.messageArea {
	display: -webkit-box; -webkit-box-align:center; -webkit-box-pack: center;
	position: relative; height: 46px; padding: 0 16px; background-color: #525252;
}
.messageArea span {color: #fff;}
.messageArea .step {position: absolute; top: 16px; left: 11px;}
.messageArea mark {display: inline-block; width: 14px; height: 14px; background: #666; border-radius: 50%;}
.messageArea mark.on {background-color: #29a244;}

.dateArea {margin: 14px 0; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; text-align: center;}
.dateArea span {padding: 0 8px 0 0;}
.receiveList .stit {color: #38ae53; font-weight: normal;}
.receiveList ul {margin: 12px 0 0 0;}
.receiveList ul li {height: 38px; line-height: 38px; margin: 0 0 1px 0; padding: 0 0 0 17px;background-color: #f5f5f5;}

.bell {height: 58px; display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: justify; padding: 0 16px;}
.bell li {box-sizing: border-box; width: 49%; height: 38px; padding: 0 8px; background: #fff; display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: justify;}
.bell li span {display: block; font-size: 12px;}
.bell li em {display: block; color: #38ae53;}

/* 메인리스트:와이드 타입 */
.mainList {width: 100%; margin: auto;}
.mainList li {margin: 5px 0;}
.mainList li.first {margin-top: 0;}
.mainList li a {
	display: -webkit-box; -webkit-box-align: center;  -webkit-box-pack: center;
	height: 94px; font-size: 18px; background-image: none;
}
.mainList li a.small {height: 60px;}
.mainList li a span {
	display: inline-block; 
	padding: 0 0 0 32px;
	background-size: 27px 27px;
	background-repeat: no-repeat;
	background-position: 0 6px;	
}

.mainList .info1 a span {background-image: url('../../images/mobile/common/ico_menu1.png');}
.mainList .info2 a span {background-image: url('../../images/mobile/common/ico_menu2.png');}
.mainList .info3 a span {background-image: url('../../images/mobile/common/ico_menu3.png');}
.mainList .info4 a span {background-image: url('../../images/mobile/common/ico_menu4.png');}
.mainList .info5 a span {background-image: url('../../images/mobile/common/ico_menu5.png');}
.mainList .info6 a span {background-image: url('../../images/mobile/common/ico_menu6.png');}
.mainList .info7 a span {background-image: url('../../images/mobile/common/ico_menu7.png');}
.mainList .info8 a span {background-image: url('../../images/mobile/common/ico_menu8.png');}
.mainList .info9 a span {background-image: url('../../images/mobile/common/ico_menu9.png');}
.mainList .info10 a span {background-image: url('../../images/mobile/common/ico_menu10.png');}
.mainList .info11 a span {background-image: url('../../images/mobile/common/ico_menu11.png');}
.mainList .info12 a span {background-image: url('../../images/mobile/common/ico_menu12.png');}
.mainList .info13 a span {background-image: url('../../images/mobile/common/ico_menu13.png');}

/* 메인리스트: 스퀘어 타입 */
.squareList li {float: left; box-sizing: border-box; width: 50%; padding: 3px;}
.squareList li:nth-child(odd) {padding-left: 0;}
.squareList li:nth-child(even) {padding-right: 0;}
.squareList li a {
	display: -webkit-box; -webkit-box-align:center; -webkit-box-pack:end;
	box-sizing: border-box; height: 146px; padding: 0 18px 0 0; font-size: 18px;
	background-repeat: no-repeat;
	background-position: 22px center;
	background-size: 27px 27px;
}
.squareList li a.small {height: 70px;}

.boxMem {padding:20px 0; background-color:#f9f9f9; border:1px solid #dbdbdb;}
.boxMem table {margin:0 auto;}
.boxMem table th {padding-right:10px;}
.boxMem table td {padding:4px;}
.boxMem .bottom {padding-top:20px; margin-top:20px; border-top:1px solid #dbdbdb; text-align:center;}
.boxMem table p.comment {margin-top:3px;}

.joinEnd {padding-top:164px; background-image:url(../images/img/img_join_end.png); background-repeat:no-repeat; background-position:center 36px;}
.joinEnd h3 {margin-bottom:20px !important; background:none !important; text-align:center;}
.joinEnd p {margin:10px 0; text-align:center; font-size:13px; line-height:150%;}
.joinEnd p strong {color:#333;}
.joinEnd .bottom {margin-top:40px;}
.joinEnd .btnBig {width:160px;}