@charset "UTF-8";

body { background-color: #fafafa; }

.maxWidth { width: 980px; }

#warp { padding-left: 250px; padding-bottom: 40px; transition: all .3s cubic-bezier(.215,.61,.355,1); min-width: 1230px; }
#warp footer { left: 0px; height: 40px; padding: 0; z-index: 10; background-color: #fff; border-top: 1px solid #ccc; }
#warp footer .footerCopy { padding: 0; text-align: center; }

header { border-bottom: 0; background-color: #fff; height: 5.1rem; min-width: 400px;  }
header:after { content: ''; clear: both; }
header { left: 250px; }
header h1 { margin: 0; height: 5rem; padding: 0.7rem 0 0.9rem; text-indent: 0; line-height: 5rem; width: unset; }
header h1 img { height: 3.3rem; vertical-align: top; margin-top: 0.1rem; }
header h1 span {
	font-size: 1.6rem; font-weight: 400; line-height: 3.4rem; display: inline-block;
	vertical-align: top; padding-left: 0.8rem; color: #434556;
}

.settingContent { display: none; }

.sideNavigation {
	position: fixed; left: 0; top: 0; bottom: 0; width: 250px; z-index:100;
	background: #fff; border-right: 1px solid rgba(0,0,0,.07); overflow-y: auto;
	transition: all .3s cubic-bezier(.215,.61,.355,1);
}

#warp.navHide { padding-left: 0; min-width: 980px; }
#warp.navHide header { left:0; }
#warp.navHide .sideNavigation { left: -250px; }

.sideNavigation h1 { background-color: #474ee1; padding: 1.2rem 14rem 1.2rem 2.5rem; height: 5.1rem; cursor:pointer; }

.sideNavigation li { border-bottom: 1px solid rgba(0,0,0,.07); position: relative; }
.sideNavigation li.active:after { content:''; position: absolute; left: 0; top: 0; bottom: -1px; width: 0.5rem; background-color: #ffd257; border-right: 1px solid #b2b4c4; }
.sideNavigation li a { display: block; }
.sideNavigation li a span {
	position: relative; display: block; padding-left: 7rem; font-size: 1.4rem;
	text-align: left; line-height: 4.5rem; color: #666; font-weight: 400;
}
.sideNavigation li a img { position: absolute; left: 2rem; top: 50%; transform: translateY(-50%); width: 3.6rem; }
.sideNavigation li.active span { color: #474ee1; font-weight: 500; }
.sideNavigation li a .badge {
	background-color: #f24f2a; position: absolute; right: 1.5rem; top:50%; transform: translateY(-50%);
	color: #fff; border-radius: 50px; padding: 0 0.8rem; line-height: 2.2rem; height: 2.2rem; font-size: 1.2rem;
}
.sideNavigation li a .badge font { position: relative; top: -0.05rem; font-weight: 400; }
.sideNavigation li.grayscale * {color:#999;}

.navToggle { float: left; width: 5.1rem; height: 5rem; padding: 0.7rem;  }
.gnb { height: 5rem; float: right; }
.gnb > ul { font-size: 0; }
.gnb > ul > li { width: 5.1rem; height: 5.1rem; display: inline-block; border-left: 1px solid #ccc; vertical-align: top; }
.gnb > ul > li > a, .gnb > ul > li > button { display: block; padding: 1rem; font-size: 2rem; text-align: center; color: #5c5f77; }
.gnb > ul > li > a > i, .gnb > ul > li > button > i { height: 3rem; line-height: 3rem; width: 3rem; margin-top: 2px; }

.settingBtn { position: relative; }
.settingContent {
	position: absolute; top:100%; right: -4rem; width: 22rem;
	background-color: #fff; border-radius: 0.3rem; margin-top: 1rem;
	box-shadow: 0 3px 6px 0 rgba(0,0,0,.16);
}
.settingContent:after {
	content: ''; border-color: #fccf38;
	width: 0; height: 0; border-style: solid; position: absolute; margin: 5px;
	border-width: 0 5px 5px 5px;
	border-left-color: transparent; border-right-color: transparent; border-top-color: transparent;
	top: -5px; left: 14.6rem; margin-top: 0; margin-bottom: 0;
}

.settingContent h3 { font-size: 1.5rem; padding: 1rem 1.5rem 0.7rem; background-color: #fccf38; border-radius: 0.3rem 0.3rem 0 0; border-bottom: 1px solid #f8bc06; }
.settingContent h3 strong { font-weight: 400; }
.settingContent h3 span { font-size: 1.3rem; padding-left: 0.2rem; }
.settingContent ul { padding: 0.7rem 0 1rem; }
.settingContent ul li a { position: relative; display: block; padding: 0.6rem 1.5rem; color: #555; font-size: 1.3rem;  }
.settingContent ul li a * { font-weight: 400; }
.settingContent ul li a i { position: absolute; right: 1.5rem; top: 50%; transform:translateY(-50%); color: #474ee1; font-size: 1.5rem; }
.settingContent ul li a:hover { color: #474ee1; }

.mfp-with-modal .mfp-content { overflow-x: auto }
#responsibility-modal { width: 900px; max-width: 900px; }
#responsibility-modal .basicResponsibility { padding: 1.5rem 2rem 2rem 1rem; border-top: 1px dashed #ccc; margin-top: 2rem;}
#responsibility-modal .sectionWarp > .inner { padding: 2rem 2rem 1.5rem; }
#responsibility-modal .gridWarp { margin-top: 0; }
#responsibility-modal .gridWarp > ul { margin: 0; }
#responsibility-modal .gridWarp > ul > li { padding-left: 0; }
#responsibility-modal .gridWarp > ul > li .customCheckbox { padding-left: 22px; }
#responsibility-modal .gridWarp.grid_9 > ul > li { width: 11.111%; }
#responsibility-modal .gridWarp.grid_10 > ul > li { width: 9.8%; }
#responsibility-modal .gridWarp.grid_6 > ul > li:nth-child( n + 7) { padding-top: 0.5rem;  }
#responsibility-modal .gridWarp.grid_9 > ul > li:nth-child( n + 10) { padding-top: 0.5rem;  }


.topContainer { background: #474ee1; padding-top: 5.1rem; }
.positionWarp { position: relative; }

.tabContainer { background: #474ee1; }
.tabContainer .maxWidth .inner {
	background-color: #fff; border-radius: 0.5rem 0.5rem 0 0; overflow: hidden;
    padding: 4rem 4rem; border: 1px solid #3439ab; border-bottom: 0;
}

.topContainer .maxWidth { padding-top: 5rem; }

.summery { position: relative; }
.summery .backBtn, .summery .mealBtn { position: absolute; left: 0; bottom: 12px; }
.summery .backBtn button { color: #fff; font-size: 1.4rem; font-weight: 400; }
.summery .backBtn button:hover { color: #f7bd0a; }
.summery .backBtn button i { font-size: 2.8rem; position: relative; top: 0.45rem; }

.searchContainer, .divisionContainer { background-color: #fff; border-radius: 0.5rem 0.5rem 0 0; overflow: hidden; padding: 4rem 4rem; border: 1px solid #3439ab; border-bottom: 0; }
.searchContainer.gridWarp > ul { margin-left: -1.5rem; }
.searchContainer.gridWarp > ul > li { padding-left: 1.5rem; }
.searchContainer.gridWarp > ul > li > .inner.customSelect { width: 100%; margin: 0 !important; }
.searchContainer.gridWarp > ul > li > .inner input {
	width: 100%; border: 1px solid #bbb; background-color: #fff;
	border-radius: 0.2rem; font-weight: 400;
}


.divisionContainer > ul > li { display: inline-block; vertical-align: middle; margin-right: 2rem; }
.divisionContainer > ul > li input { border: 1px solid #bbb; background-color: #fff; border-radius: 0.2rem; font-weight: 400; vertical-align: middle; }
.divisionContainer > ul > li em { color: #666; }
.divisionContainer > ul > li input.writeDatepicker { width:200px;}
.divisionContainer strong { display: block; font-size: 1.4rem; font-weight: 400; padding: 0 0.8rem 0.4rem; color: #474ee1; }

.ui-datepicker .ui-datepicker-title * { font-weight: 400; }

.searchInput {
	position: relative; padding-right: 8rem; margin: auto; margin-top: 1.5rem;
	border: 2px solid #474ee1; border-radius: 0.2rem;  overflow: hidden;
}

.searchInput input { width: 100%; background-color: #fff; }
.searchInput button {
	position: absolute; right: 0; top: 0; background-color: #474ee1;
	color: #fff; height: 100%; width: 8rem; text-align: center; font-size: 1.8rem;
}

/* Score Search */
.searchScore {position:absolute;margin-top:1.5rem;}
.searchScore .customSelect {width:276px;}
.searchScore .customSelect select {padding-top:1.3rem;}
.searchInput.dormitory {margin-left:34%;}

.pageArea { padding: 4rem 1rem 2rem; }
.pageBtn li.active button { background-color: #f7bd0a; }

.studentBoard tbody tr td { font-size: 1.3rem; color: #666; }
.studentBoard tbody tr td:first-child { font-weight: 400; color: #333; font-size: 1.4rem; }

.attendanceTable { padding: 4rem 4rem 4rem; background-color: #fff; border-radius: 0 0 0.5rem 0.5rem; border: 1px solid #e5e5e5; border-top: 1px dashed #ccc; }
.attendanceTable > .inner table { width: 100%; border-top: 2px solid #434653; border-bottom: 1px solid #aaa; }
.attendanceTable > .inner table thead th { padding: 1.2rem 0 1rem; border-bottom: 1px solid #e6e6e6; font-weight: 400; }
.attendanceTable > .inner table thead th:nth-child(n+2) { border-left: 1px solid #e6e6e6; }
.attendanceTable > .inner table tbody th, .attendanceTable table tbody td { border-top: 1px solid #ddd; }
.attendanceTable > .inner table tbody th a { font-weight: 400; font-size: 1.4rem; }
.attendanceTable > .inner table tbody a:hover { background-color: #f8f8f8; }
.attendanceTable > .inner table tbody td { border-left: 1px solid #e6e6e6; }
.attendanceTable > .inner table .checkPop { display: block; width: 100%; height: 4.5rem; line-height: 4.5rem; color: #333; text-align: center; font-weight: 400; position: relative; }
.attendanceTable > .inner table td.red .checkPop { color: #f24f2a; }
.attendanceTable > .inner table td.red ~ td .checkPop:after { content: ''; height: 3px; width: calc(100% + 2px); position: absolute; top: 50%; left: -1px; transform: tarnslateY(-50%);  background-color: #f24f2a; }
.attendanceTable > .inner table td.orange .checkPop { color: #f24f2a; }
.attendanceTable > .inner table td.blue .checkPop { color: #474ee1; }
.attendanceTable > .inner table td.black .checkPop { color: #333333; }
.attendanceTable > .inner table td.green .checkPop { color: #007130; }
.attendanceTable > .inner table td.green ~ td .checkPop:after { content: ''; height: 3px; width: calc(100% + 2px); position: absolute; top: 50%; left: -1px; transform: tarnslateY(-50%);  background-color: #007130; }

.infoContainer { padding-bottom: 6rem; }
.infoContainer > .maxWidth > .inner { padding: 4rem 4rem 4rem; background-color: #fff; border-radius: 0 0 0.5rem 0.5rem; border: 1px solid #e5e5e5; border-top: 1px dashed #ccc; }


.sectionWarp { margin-top: 3rem; }
.sectionWarp:first-child { margin: 0; }
.sectionWarp > .inner { position: relative; border-radius: 0.4rem; border: 1px solid #ccc; padding: 2rem; }
.sectionWarp > .inner > h4 {
	position: absolute; top: 0; left: 0.5rem; transform: translateY(-50%); background-color: #fff;
	font-weight: 400; padding: 0.5rem 0.3rem 0.5rem; color: #474ee1;
}
.sectionWarp > .inner > h4 label {
	font-weight: 400; color: #474ee1; cursor: pointer; margin-left:5px; margin-right: 5px;
}

.textareaWarp { position: relative; }
.textareaWarp > .inner { padding: 0; overflow: hidden; }
.textareaWarp textarea { width: 100%; background-color: #fff; padding: 1.5rem 2rem; }
.textareaWarp .commentCounter { position: absolute; right: 0; text-align: right; font-size: 1.2rem; padding: 0.2rem; color: #888; }

.insertWarp > ul > li > .inner { padding: 0.2rem 0; }
.insertWarp > ul > li > .inner * { vertical-align: middle; }

.studentBtn { font-size: 1.4rem; line-height: 3.8rem;  margin-top: 2rem; border-color: #474ee1; color: #474ee1; }

.insertDivision { border-bottom: 1px dashed #ccc; padding-bottom: 1rem; margin-bottom: 1rem; }
.customCheckbox { padding: 5px 5px 5px 25px; }
.customCheckbox i { background-color: #474ee1; }

.customRadio { padding: 5px 5px 5px 25px; }
.customRadio i { background-color: #474ee1; }


.btnGroup { max-width: 40rem; text-align: center; font-size: 0; text-align: center; margin: auto; margin-top: 2.5rem; }
.btnGroup button, .btnGroup a { display: inline-block; width: calc(50% - 0.6rem); vertical-align: middle; font-size: 1.5rem; margin: 0 0.3rem; }

.imageWarp { font-size: 0; margin-bottom: 3rem;  }
.imageWarp .customFile { width: 12rem; display: inline-block; margin-right: 1.5rem; }
.imageWarp .inputImageWarp { width: 12rem; border-radius: 0.5rem; border: 1px solid #ccc; overflow: hidden;  }

.white-popup-block h3 { border-bottom: 2px solid #ededed; padding-bottom: 1rem; font-weight: 400; color: #666; }
.white-popup-block h3 i { color: #474ee1; font-size: 2rem; position: relative; top: 1px; padding-right: 0.5rem; }

.modalStyle { background-color: #fff; padding: 3rem; border-radius: 0.5rem; max-width: 600px; margin: auto; }
.modalStyle .gridWarp { margin-top: 3rem; }
.modalStyle .gridWarp > ul > li { vertical-align: top; }
.modalStyle .gridWarp > ul > li > .inner > .sectionWarp > .inner { padding: 0; }
.modalStyle .gridWarp > ul > li > .inner > .sectionWarp > .inner > ul { height: 40rem; overflow-y: scroll; padding: 2rem 0; }
.modalStyle .gridWarp > ul > li > .inner > .sectionWarp > .inner > ul > li { padding: 0.5rem 2rem; position: relative;   }
.modalStyle .gridWarp > ul > li > .inner > .sectionWarp > .inner > ul > li + li { border-top: 1px solid #ededed; }
.modalStyle .classChoice button { padding: 5px 5px 5px 0; }
.modalStyle .classChoice button i { color: #ccc; position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); }
.modalStyle .classChoice .active button { color: #03f; font-weight:400; }


/*  student */

.studentInfo { position: relative;  padding-left: 200px; }
.studentInfo .studentImageWarp { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 160px; border: 2px solid #cecece; border-radius: 100px; overflow: hidden; }
.studentInfo dl dt { font-size: 2.3rem; font-weight: 500; margin-bottom: 1rem; }
.studentInfo dl dd * { display: inline-block; font-size: 1.4rem; padding: 0; }
.studentInfo dl dd strong { width: 45px; }
.studentInfo dl dd i { padding: 0 1rem; color: #ccc; }

.studentBox .inner { border: 1px solid #cecece; border-radius: 0.3rem; padding-top: 1.5rem; position: relative; }
.studentBox .inner dl { height: 21.3rem; }
.studentBox .inner dl dt {
	font-size: 1.7rem; font-weight: 400; padding: 0rem 2rem; line-height: 2.8rem; height: 3.8rem;
	padding-bottom: 1rem; border-bottom: 2px solid #474ee1;
}
.studentBox .inner dl dt em { font-size: 1.4rem; padding-left: 1rem; }
.studentBox .inner dl dt em font { font-weight: 400; }
.studentBox .inner dl dt em i { padding: 0 0.5rem; color: #ccc; }
.studentBox .inner dl dd { padding: 0 1.5rem; line-height: 3.5em; height: 3.5rem; overflow: hidden; }
.studentBox .inner dl dd + dd { border-top: 1px solid #dedede;  }
.studentBox .inner dl dd em { display:block; width:300px; float: left; line-height: 3.4rem; height: 3.4rem; vertical-align: middle; font-size: 1.4rem; color: #23208c; font-weight:300; }
.studentBox .inner dl dd em strong { color: #ff4600; font-weight:400; }
.studentBox .inner dl dd span { float: right; line-height: 3.4rem; height: 3.4rem; vertical-align: middle; font-size: 1.3rem; color: #888; }
.studentBox .inner .noneData { height: 17.5rem; padding: 4.2rem 0; }
.studentBox .inner .noneData i { color: #c9ccd5; display: block; font-size: 5rem; text-align: center; display: block;  }
.studentBox .inner .noneData span { float: none; display: block; text-align: center; }
.studentBox .inner .moreBtn {
	border: 1px solid #bfbfbf; background: #fff; font-size: 1.2rem; line-height: 2.8rem; height: 3rem;
	font-weight: 400; width: 7rem; display: block; text-align: center; position: absolute; top: 1.2rem; right: 1.2rem;
}
.studentBox .inner .moreBtn:hover { background-color: #f8f8f8; }



/* list */

.commentWarp > li { position: relative; padding: 0 2rem 1rem 0.5rem; min-height: 100px; }
.commentWarp > li .commentImageWarp {
	width: 6.5rem; position: absolute; top: 0; left: 0;
	border: 1px solid #cecece; overflow: hidden; border-radius: 20rem;
}

.commentWarp > li + li { border-top: 1px solid #ccc; padding-top: 2rem; }
.commentWarp > li + li .commentImageWarp { top: 2rem; }

.commentWarp > li .commentImg { padding: 0.5rem 0 0.5rem; }
.commentWarp > li .commentImg .zoom-gallery img { height: 65px; }
.commentWarp > li .commentImg .writeImage img { height: 65px; cursor: pointer; }

.commentWarp > li .commentUser { font-size: 1.5rem; vertical-align: middle; padding-bottom: 0.6rem; display: block; }
.commentWarp > li .commentUser * { vertical-align: middle; }
.commentWarp > li .commentUser i { color: #f24f2a; font-size: 1.8rem; padding-right: 0.5rem }
.commentWarp > li .commentUser em { color: #474ee1; font-weight: 500; }
.commentWarp > li .commentUser font { font-weight: 500; color: #333; }
.commentWarp > li .commentUser em.text { color: #ff4600; font-weight: 500; }

.commentWarp > li .commentText { font-weight: 400; color: #5e6279; font-size: 1.4rem; padding-bottom: 0.5rem; padding-left: 0.1rem;}

.commentWrite { font-size: 1.3rem; color: #999; display: block; font-weight: 400; padding-top: 0.3rem; }
.commentWrite strong { font-weight: 400; color:#777; }
.commentWrite > font { padding-left: 1.5rem; }
.commentWrite * { vertical-align: middle; }

/*
.commentEdit { font-size: 0; margin-left: 1rem; }
.commentEdit * { display: inline-block; vertical-align: middle; color: #555; line-height: 2.2rem; }
.commentEdit a,
.commentEdit button {
	border: 1px solid #ccc; font-size: 1.2rem;
	padding: 0 1rem; border-radius: 10rem; margin: 0 0.3rem;
}

/*
.commentWrite .commentEdit a *,
.commentWrite .commentEdit button * { vertical-align: top; }
*/
.commentWriter {position:relative; }
.commentEdit {position:absolute; right:0; bottom:0;}
.commentEdit a,
.commentEdit button {
	display: inline-block; vertical-align: middle; color: #555; line-height: 2.2rem;
	border: 1px solid #ccc; font-size: 1.2rem;
	padding: 0 1rem; border-radius: 10rem; margin: 0 0 0 0.1rem;
}
.commentEdit a.comment font {color:#03f;}
.commentEdit a.delete font {color:#f30;}

.noData { height: 17.5rem; padding: 4.2rem 0; }
.noData i { color: #c9ccd5; display: block; font-size: 5rem; text-align: center; display: block; }
.noData span { float: none; display: block; text-align: center; color: #666; margin-top: 10px; font-size: 1.4rem; }

.commentBtn {
	font-size: 1.3rem; font-weight: 300; width: 5.3rem; padding: 0.3rem 0 0.1rem; font-weight: 400;
	display: block; text-align: center;
}

.commentInner { border-top:1px dashed #d5d5d5; margin-top:1rem; }
.commentInner li { position: relative; padding:0.8rem 0.1rem 0.8rem 0.7rem; margin-left:1.5rem; border-bottom: 1px dashed #ddd;  }
.commentInner li:last-child {border-bottom:0;}
.commentInner > li > i { position: absolute; left: 0; top: 1.8rem;  color: #999;}

.commentInner li.commentStd { position: relative; padding:0.7rem 0.1rem 0.7rem 0.7rem; }
.commentStd .stdName { color: #fe6305; font-weight: 400; font-size:1.4rem; }
.commentStd .stdName a {color: #fe6305; font-weight: 400; }
.commentStd .commentEdit {bottom:0.5rem;}

.commentReply .stdName {font-size:1.4rem; vertical-align:middle; padding-bottom:0.5rem; display:block;}
.commentReply .stdName em { color:#fe6305; font-weight:400; font-size:1.4rem;}
.commentReply .stdName em.reply {color:#474ee1; font-weight:400; font-size:1.3rem;}
.commentReply .stdName strong {color:#999; font-weight:400; font-size:1.3rem;}

#comment-modal { width: 492px; }
#comment-modal .imageWarp .customFile:last-child { margin: 0; }
#comment-modal h4 { font-size: 1.5rem; }
#comment-modal h4 strong { font-size: 1.6rem; font-weight: 400; color:#454545; }
#comment-modal .textareaWarp { margin-top: 2rem;  }

#tabs .commentInner li { padding-top: 2rem; padding-bottom: 2rem }
#tabs .commentInner li:first-child { border: 0; padding-top: 0; margin-top: 0; }
#tabs .commentInner li:first-child > i { top: 0.2rem; }
#tabs .commentInner > li > i { top: 2.3rem; }

/* meal */
.mealBtn { font-size: 0; }
.mealBtn a {
	line-height: 3rem; display: inline-block; border: 1px solid #fff;
	font-size: 2rem; width: 3.5rem; text-align: center; color: rgba(255,255,255,0.5);
}
.mealBtn a.listType { border-radius: 0.3rem 0 0 0.3rem; }
.mealBtn a.calType { border-radius: 0 0.3rem 0.3rem 0; border-left: 0; }
.mealBtn a.active { background-color: #fff; color: #383b76; }
.mealBtn a:hover { color: rgba(255,255,255,1); }
.mealBtn a.active:hover { color: #383b76; }

.fc .fc-toolbar { position: relative;  display: block; text-align: center;}
.fc .fc-toolbar.fc-header-toolbar { margin-bottom: 1.5rem; }
.fc-toolbar-title { font-weight: 500; }
.fc .fc-toolbar .fc-toolbar-chunk:first-child { position: absolute; left: 0; top: 50%; transform:translateY(-50%); }
.fc .fc-toolbar .fc-toolbar-chunk:last-child { position: absolute; right: 0; top: 50%; transform:translateY(-50%); }
.fc .fc-toolbar .fc-toolbar-chunk button{ font-size: 1.3rem; line-height: 3.3rem; height: 3.5rem; padding: 0 1rem; }
.fc-daygrid-block-event .fc-event-time, .fc-daygrid-block-event .fc-event-title { padding: 1px 5px; }

.popper, .tooltip {
  z-index: 9999; background: #FFC107;
  color: black; width: 15rem; font-size: 1.3rem;
  border-radius: 0.3rem; box-shadow: 0 0 2px rgba(0,0,0,0.5);
  padding: 1rem; text-align: center;
}

.popper .popper__arrow, .tooltip .tooltip-arrow { width: 0; height: 0; border-style: solid; position: absolute; margin: 5px; }
.tooltip .tooltip-arrow, .popper .popper__arrow { border-color: #FFC107; }
.popper[x-placement^="top"], .tooltip[x-placement^="top"] { margin-bottom: 5px; }
.popper[x-placement^="top"] .popper__arrow,
.tooltip[x-placement^="top"] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent;
  bottom: -5px; left: calc(50% - 5px); margin-top: 0; margin-bottom: 0;
}
.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"] {
  margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow,
.popper[x-placement^="bottom"] .popper__arrow {
  border-width: 0 5px 5px 5px;
  border-left-color: transparent; border-right-color: transparent; border-top-color: transparent;
  top: -5px; left: calc(50% - 5px); margin-top: 0; margin-bottom: 0;
}
.tooltip[x-placement^="right"],
.popper[x-placement^="right"] {
  margin-left: 5px;
}
.popper[x-placement^="right"] .popper__arrow,
.tooltip[x-placement^="right"] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent;
  left: -5px; top: calc(50% - 5px); margin-left: 0; margin-right: 0;
}
.popper[x-placement^="left"],
.tooltip[x-placement^="left"] {
  margin-right: 5px;
}
.popper[x-placement^="left"] .popper__arrow,
.tooltip[x-placement^="left"] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent;
  right: -5px; top: calc(50% - 5px); margin-left: 0; margin-right: 0;
}

#ui-datepicker-div {background-color:#fff;border:1px solid #ccc;border-radius:3px;padding:5px;margin-top:3px;}
#ui-datepicker-div .ui-datepicker-current {font-size:0.8em;}
#ui-datepicker-div .ui-datepicker-close {font-size:0.8em;}

.commentWarp > li.moreLoading, .moreLoading {position:relative;width:100%;padding:30px 20px 50px 0;text-align:center;}
.commentWarp > li.moreLoading img, .moreLoading img {width:40px;}

.commentWarp > li.writeMore {display:block; width:100%; margin:10px 0 0 0; padding:0; text-align:center; position:relative;}
.commentWarp > li.writeMore a {background:#eee; display:block; width:100%; line-height:4rem; font-size:1.4rem; font-weight:400; }

.calendarContainer { padding: 2.5rem 4rem 2rem;  }
.calendarContainer h3 { font-weight: 400; }
.calendarContainer h3 i { color: #474ee1; }

/* calendar */
.monthBox { text-align: center; padding: 0 2rem 2rem; }
.monthBox button, #tbCalendarYM { display: inline-block; vertical-align: middle; }
#tbCalendarYM { margin: 0 15px; font-size: 2.6rem; font-weight: 500; }
.monthBox button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #aaa; font-size: 0; color: #aaa; font-size:1.6rem; }
.monthBox button:hover { border: 1px solid #333; color: #333; }
.monthRight { padding-left: 2px; }
.monthLeft { padding-right: 2px; }

.calendarBox { position: relative; }
.calendarBox table{ width: 100%; border-top: 2px solid #666; table-layout:fixed; }
.calendarBox thead th { text-align: center; border: 1px solid #d5d5d5; height: 45px; background-color:#f5f5f5; }
.calendarBox thead th font { font-size: 1.4rem; font-weight: 600; }
.calendarBox th { padding: 15px; }
.calendarBox td { border-bottom: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; vertical-align:top; }
.calendarBox td font { font-weight: 500; }
.calendarBox td .inner { min-height: 100px; padding: 10px; }
.calendarBox tr td:last-child { border-right: 1px solid #d5d5d5; }
.calendarBox tr:last-child td { border-bottom: 0; }

.mealContent {display:block;width:100%;margin-top:6px;}
.mealContent span {display:block;}
.mealContent span * {display:inline-block;vertical-align:middle;}
.mealContent span.red {color:#f24f2a; }
.mealContent span.blue {color:#474ee1;}
.mealContent span.black {color:#333333;}
.mealContent span strong {font-size:1.4rem;font-weight:500;padding-right:7px;}
.mealContent span em {font-size:1.4rem;font-weight:500;}

.sat { color:#3961d1; }
.sun { color:#f23b3b; }
.hand, .pointer {cursor:pointer;}

.mealWritePop { position: relative; width:450px; padding: 20px 20px 30px 20px; }
.mealWritePop h3 { position: relative; padding: 0; display: inline-block; margin-bottom: 5px; }
.mealWritePop h3 span { position: relative; z-index: 1; font-size: 1.8rem; font-weight: 500; color:#000; }
.mealWritePop h3:after { content: ''; position: absolute; bottom: -2%; left: 0; width: 100%; height: 20%; background-color: #899fe2; opacity: 0.6; }
.mealWritePop .persons .inner {padding-bottom:10px;}
.mealWritePop .sectionWarp .inner h4 {font-size:1.4rem;}
.mealWritePop ul li {padding:3px 0;}
.mealWritePop .customCheckbox { display:inline-block; margin-right:20px; }
.mealWritePop input.dataInput, 
.mealWritePop input.dateInput { width:150px; border-bottom: 1px solid #bbb; background-color: #fff; border-radius: 0.2rem; font-weight: 400; vertical-align: middle; text-align:center; font-size:1.4rem; padding-top:3px; padding-bottom:3px; }
.mealWritePop input.dataInput { border: 1px solid #bbb; text-align:right; padding-right:10px; width:100px; padding-top:3px; padding-bottom:3px; margin-bottom:4px; }
.mealWritePop input.onlyOne { border:0; text-align:left; padding:0; width:100%; }
.mealWritePop ul li.warning {color:#f30; font-weight:300; }
.mealWritePop #dateModify {display:none;}

.btnGroup3 { max-width: 50rem; text-align: center; font-size: 0; text-align: center; margin: auto; margin-top: 3.5rem; }
.btnGroup3 button, .btnGroup3 a { display: inline-block; width: calc(25% - 0.6rem); vertical-align: middle; font-size: 1.5rem; margin: 0 0.8rem; line-height: 3.6rem; }

.basicBtn.grayBtn { color: #fff; border: 1px solid #666; background-color: #777;}
.basicBtn.grayBtn:hover { background-color:#555; color:#fff; }

.commentWarp.mealViewWarp > li { position: relative; padding: 1.5rem 2rem 1rem 0.3rem; min-height: 100px; }
.commentWarp.mealViewWarp em.mealName {color:#ff4600;font-weight:500;font-size:1.5rem;}
.commentWarp.mealViewWarp em.red {color:#f24f2a;font-weight:500;font-size:1.5rem;}
.commentWarp.mealViewWarp em.blue {color:#474ee1;font-weight:500;font-size:1.5rem;}
.commentWarp.mealViewWarp em.black {color:#333333;font-weight:500;font-size:1.5rem;}

.mealTotal {position: relative; background-color:#f3f5fc; border-radius: 0.4rem; border: 1px solid #ccc; padding: 1.5rem 2rem; margin:1.5rem 0 0.5rem 0;}
.mealTotal em.red {color:#f24f2a;font-weight:500;font-size:1.5rem;}
.mealTotal em.blue {color:#474ee1;font-weight:500;font-size:1.5rem;}
.mealTotal em.black {color:#333333;font-weight:500;font-size:1.5rem;}
.mealTotal i { display:inline-block; padding: 0 1.5rem; color: #999; }

.infoContainer .maxWidth .myList {padding-top:2.5rem;}

.myComment {clear:both; border-top:1px solid #ccc;}
.myComment > li { position: relative; padding: 1.2rem 0.5em 0.5rem 0.5rem; min-height: 100px; }
.myComment > li + li { padding-top:1.2rem; }
.myComment > li .commentWrite > font {padding-left:0}

.mybtnGroup { clear:both; width:100%; text-align: center; font-size: 0; text-align: center; margin: auto; margin-top: 0; height:50px; }
.mybtnGroup button { display: inline-block; width: calc(13%); line-height:3.5rem; vertical-align: middle; font-size: 1.3rem; margin: 0 0.3rem; float:left; background-color:#587ecf; border:0; }
.mybtnGroup button.cancelBtn {background-color:#999;}
.mybtnGroup button.delBtn {background-color:#fd7b06;}

.myCheckbox {position:absolute; z-index:999; top:9px; left:5px;}

.commentParent {display:block; font-size:1.5rem; vertical-align:middle; padding-bottom:0.6rem; color:#333;}
.replyBox {position:relative; padding-left:3.5rem; border-top:1px dashed #ccc; font-size:1.5rem; vertical-align:middle; padding-bottom:0.6rem; display:block;}
.replyBox i.replyIcon {position:absolute; left:8px; top:1.5rem; color:#999;}
.replyBox .replyText {font-size:1.5rem; padding:1rem 0 0.5rem 0; font-weight:400; color:#666;}
.replyBox .myCheckbox {top:5px;left:10px;}

.commentMan { font-size: 1.3rem; color: #999; display: block; padding-bottom:0.7rem; }
.commentMan strong { font-weight: 300; color:#777; padding-left: 1.2rem; }
.commentMan > font { }
.commentMan * { vertical-align: middle; }

.myWrite .commentEdit {bottom:10px;}
.myWrite li {padding-left:30px;}

.writeSelection {display:none;}

h3.studentName { margin-bottom:6px; padding-bottom:6px; font-weight:300; color:#000; font-size:1.6rem; }
h3.studentName strong { font-size:1.7rem; font-weight:500; color:#474ee1; }

.statsContainer { padding:2.5rem 4rem; }
.statsContainer #sdate, .statsContainer #edate { text-align:center; }

.sectionWarp .statsWrap > ul { margin-left:0rem; }
.sectionWarp .statsWrap > ul > li { padding:0.5rem 0 0 0; width:auto; }
.sectionWarp .statsWrap > ul > li * { display:inline-block; vertical-align: middle; border-bottom:1px solid transparent; }
.sectionWarp .statsWrap > ul > li > span { width:32px; color:#000; font-weight:300; font-size:1.4rem; letter-spacing:-0.1em; }
.sectionWarp .statsWrap > ul > li > span.meal { width:45px; }
.sectionWarp .statsWrap > ul > li > em { width:40px; color:#f30; font-weight:400; font-size:1.4rem; letter-spacing:-0.05em; }
.sectionWarp .statsWrap > ul > li.active * { font-weight:600; color:#f30; }
.sectionWarp > .inner.statsSub .statsWrap > ul > li:hover { cursor:pointer; }
.sectionWarp > .inner.statsSub .statsWrap > ul > li:hover span { font-weight:600; color:#f30; }
.sectionWarp > .inner.statsSub .statsWrap > ul > li:hover em { font-weight:600; color:#f30; }

.sectionWarp > .inner.statsTotal { background-color:#ffefee; padding-top:1.5rem; padding-bottom:1.3rem; }
.sectionWarp > .inner.statsTotal .statsWrap > ul > li {padding-top:0;}
.sectionWarp > .inner.statsSub { padding-top:1.8rem; padding-bottom:1.3rem; }

.statsBox {display:none; border: 1px solid #d5d5d5; border-radius:5px; margin-top:1.5rem;}
.statsBoard { width:100%; text-align:center; border-collapse:collapse; border-spacing:0; margin-top:30; }
.statsBoard th { padding: 1rem 0.2rem; border-bottom: 1px solid #d5d5d5; font-size:1.3rem; font-weight: 400; background-color:#f5f5f5; }
.statsBoard td { padding: 1rem 0.2rem; font-size: 1.3rem; }
.statsBoard tr + tr { border-top: 1px dashed #d5d5d5; }
.statsBoard tbody tr td { font-size: 1.3rem; color: #333; font-weight:300; }
.statsBoard tbody tr td.sName,
.statsBoard tbody tr td.sContent { color:#333; font-weight:400; }
.statsBoard tbody tr td.sContent { text-align:center; }
.statsBoard tbody tr td.sContent p { text-align:center; max-width:450px; color:#333; font-weight:400; }
.statsBoard tbody tr td.sContent.mealText p { max-width:400px; }
.statsBoard tbody tr td.sNumber { color:#f30; font-weight:400; }
.statsBoard tbody tr:hover td { background-color: #f8f8f8; color:#ff4600; }
.statsBoard tbody tr:hover td.sName { color:#ff4600; }
.statsBoard tbody tr:hover td.sContent p { color:#ff4600; }
.statsBoard tbody tr td.noneData { height: 6rem; padding: 4.2rem 0; text-align:center; }

.myList.statsGroup .mybtnGroup {border-bottom:1px solid #ddd;}
.mybtnGroup button.excelBtn {width:150px;}

.sortBox {display:inline-block;vertical-align:middle;width:14px;line-height:0;margin:0 0 0 5px;padding:0;}
.sortBox img {float:left;width:14px;margin-bottom:2px;}