@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Serif+Text:ital@0;1&family=Noto+Sans+KR:wght@100..900&family=Roboto+Slab:wght@100..900&display=swap');
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;}
html {font-family: "Noto Sans KR", sans-serif; }
/*-------------------------------*/
/*             layer             */
/*-------------------------------*/
.splashImgBox {
	position: fixed;
	z-index: 999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
}
.splashImgBox img {
	max-width: 45%;
	-webkit-animation: linear 1s forwards 0s splash;
	-moz-animation: linear 1s forwards 0s splash;
	animation: linear 1s forwards 0s splash;
}
@-webkit-keyframes splash {
 	0%   { opacity: 0; }
 	90%  { opacity: 0.5; }
 	100% { opacity: 1; transform: scale(1.2);}
}
@-moz-keyframes splash {
 	0%   { opacity: 0; }
 	90%  { opacity: 0.5; }
 	100% { opacity: 1; transform: scale(1.2); }
}
@-o-keyframes splash {
 	0%   { opacity: 0; }
 	90%  { opacity: 0.5; }
 	100% { opacity: 1; transform: scale(1.2); }
}
@keyframes splash {
 	0%   { opacity: 0; }
 	90%  { opacity: 0.5; }
 	100% { opacity: 1; transform: scale(1.2); }
}
.layerOn {
	height: 100vh;
	overflow: hidden;
}
.attendanceNoticeLayer,
.attendanceNoticeInLayer,
.assignmentAskLayer,
.recommendLayer {
	position: fixed;
    z-index: 999;
    top: 50%;
    right: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 120px);
    background-color: #f1f1f1;
	/* border: 1px solid #5d5d5d; */
	box-shadow: 0 0 5px 5px rgba(0,0,0,0.3);
	transform: translateY(-50%);
}

.attendanceNoticeInLayer,
.assignmentAskLayer,
.recommendLayer {
    top: -90%;
}

.assignmentAskLayer,
.recommendLayer {
	height: auto;
	max-height: calc(100vh - 120px);
}



.attendanceNoticeInLayer.on,
.assignmentAskLayer.on,
.recommendLayer.on {
    top: 50%;
    transition:  all 0.5s;
}
.attendanceNoticeTitle,
.assignmentAskTitle,
.recommendTitle {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 62px;
	padding:  0 10px;
	font-size: 18px;
	color: #fff;
	background-color: #565a5e;
}
.assignmentAskTitle,
.recommendTitle {
	height: 42px;
}

.layerContentBox {
	position: relative;
	display: block;
	width: 100%;
	height: calc(100% - 104px);
	overflow: auto;
}

.attendanceNoticeTitle ul.checkList {
    margin-left: auto;
    margin-right: 0;
}

.attendanceNoticeTitle ul.checkList input[type="radio"] + label {
	color: #fff;
	background-color: #aaa;
	border: none;
}

.attendanceNoticeTitle ul.checkList input[type="radio"]:checked + label {
	background-color: #000;
	border: none;
}

.layerNoticeBox,
.layerAssignmentBox {
	position: relative;
	display: block;
	margin: 10px 0;
	padding: 10px;
	background-color: #fff;
	border-top: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
}
.attendanceNoticeInLayer .layerNoticeBox,
.assignmentAskLayer .layerAssignmentBox,
.recommendLayer, .layerNoticeBox {
    margin: 0;
}

.layerNoticeContentBox {
    position: relative;
    display: block;
    margin: 0 5px 10px;
    padding: 10px;
    font-size: 14px;
    background-color: #f0f0f0;
    border-radius: 10px;
    box-sizing: border-box;
}
.attendanceNoticeInTitle,
.assignmentLayerTitle {
	display: flex;
	align-items: center;
	height: 32px;
	/* margin-bottom: 10px; */
	font-size: 15px;
	font-weight: bold;
}
.layerNoticeBox:nth-child(1) .attendanceNoticeInTitle {
	margin-bottom: 10px;
}
.selectedStudentBox {
	position: relative;
	display: flex;
	align-items: center;
	height: 32px;
	margin-left: auto;
	padding: 0 30px;
	font-size: 13px;
	color: #fff;
	background-color: #515151;
	border-radius: 42px;
}
.attendanceDateBox {
	position: relative;
	display: grid;
	grid-template-columns: 48% 4% 48%;
	margin-bottom: 10px;
}

.mobileInputBox {
	position: relative;
	height: 42px;
	padding: 0 10px;
	background-color: #fff;
	border: 1px solid #dedede;
	border-radius: 5px;
	box-sizing: border-box;
}
.attendanceReasonBox .mobileInputBox {
	width: 100%;
}

.mobileTextareaBox {
	position: relative;
	min-height: 42px;
	padding: 0 10px;
	background-color: #fff;
	border: 1px solid #dedede;
	border-radius: 5px;
	box-sizing: border-box;
}
.layerAssignmentBox .mobileTextareaBox {
	width: 100%;
}

ul.checksList {
	position: relative;
	display: flex;
	flex-direction: column;
}
ul.checksList li {
	display: flex;
	align-items: flex-start;
	margin: 5px 0;
}
.attendanceCheckBox {
	position: relative;
	margin-bottom: 10px;
	padding: 5px;
	background-color: #f9f9f9;
	border: 1px solid #dedede;
	border-radius: 10px;
}
.excuseBox {
    background-color: #f7fff6;
}
.excuseBox ul.checksList label span {
    color: #6b9e3e;
}
.excuseBox ul.checksList .excuseCheckBox {
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
    color: #6b9e3e;
}

.excuseBox .checks input[type="checkbox"] + label {
    border: 1px solid #6b9e3e;
}

.excuseBox .checks input[type="checkbox"]:checked + label:before {
    color: #6b9e3e;
    border-color: #6b9e3e;
}
.excuseBox .checks input[type="checkbox"]:checked + label span {
    color: #6b9e3e;
}

.excuseBox ul.checksList .excuseNumBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 24px;
    margin: 0 auto;
    padding: 0 20px;
    font-size: 14px;
    color: #fff;
    background-color: #6b9e3e;
    border-radius: 42px;
}

.attendanceDateBox .dateBox {
	position: relative;
	width: 100%;
    height: 42px;
    padding: 0 10px;
    background-color: #f0f0f0;
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
}

.attendanceDateBox span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}

.attendanceReasonBox {
	position: relative;
	display: block;
	margin: 0 -10px;
	padding: 10px 10px 0;
	border-top: 1px solid #dedede;
	box-sizing: border-box;
}

.mobileBtnBottomBox {
	position: relative;
	display: flex;
	justify-content: center;
	min-height: 42px;
	margin: 15px 10px 0 10px;
}
.mobileBtnBottomBox button {
	margin: 0 2px;
}
.reasonBtn {
	padding: 0 30px;
	font-size: 14px;
	color: #fff;
	background-color: #1273d7;
	border-radius: 42px;
}

ul.layerNoticeList {
	position: relative;
	display: block;
}
ul.layerNoticeList li {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 42px;
	margin: 2px 0;
}
.noticeTitle {
	position: relative;
	display: flex;
	align-items: center;
	width: calc(100% - 120px);
	height: 42px;
}
a.layerNoticeLink {
	position: relative;
    display: block;
    max-width: 100%;
    padding: 0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	text-decoration: underline;
	text-underline-position: under;
    box-sizing: border-box;
}
.noticeDate {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 110px;
	height: 32px;
	margin-left: auto;
	font-size: 14px;
	color: #2d2d2d;
	background-color: #f0f0f0;
	border-radius: 42px;
}

dl.layerInfoList,
dl.pointInfoList,
dl.tableInfoList,
dl.scoreInfoList,
dl.tuitionInfoList,
dl.scheduleInfoList,
dl.onlineReservationInfoList {
	position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    min-height: 42px;
	font-size: 14px;
}
/*
.pointPopup dl.pointInfoList {
	width: auto;
	margin: 10px;
	border: 1px solid #dedede;
	border-radius: 10px;
}
*/
dl.pointInfoList,
dl.tableInfoList,
dl.scoreInfoList,
dl.tuitionInfoList,
dl.scheduleInfoList,
dl.onlineReservationInfoList {
	padding: 10px;
	box-sizing: border-box;
}
dl.layerInfoList dt,
dl.pointInfoList  dt,
dl.tableInfoList dt,
dl.scoreInfoList dt,
dl.tuitionInfoList dt,
dl.scheduleInfoList dt,
dl.onlineReservationInfoList dt {
	position: relative;
	display: flex;
	flex-shrink: 0;
	justify-content: flex-end;
	align-items: center;
	width: 130px;
	height: 42px;
	padding-right: 10px;
	box-sizing: border-box;
}
dl.scoreInfoList dt,
dl.scheduleInfoList dt,
dl.onlineReservationInfoList dt {
	justify-content: center;
	width: 80px;
	text-align: center;
}
	dl.scheduleInfoList dt {
		height: 32px;
		width: 120px;
	}
dl.pointInfoList  dt,
dl.tableInfoList dt {
	width: 80px;
}
dl.tuitionInfoList dt {
	justify-content: center;
}
.mytuitionPaymentPopup dl.tuitionInfoList dt {
	width: 120px;
}
dl.layerInfoList dd,
dl.pointInfoList  dd,
dl.scoreInfoList dd,
dl.tuitionInfoList dd,
dl.scheduleInfoList dd,
dl.onlineReservationInfoList dd {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: calc(100% - 135px);
	min-height: 32px;
    background-color: #f0f0f0;
    border-radius: 100px;
}
dl.pointInfoList  dd,
dl.tableInfoList dd,
dl.scheduleInfoList dd {
	width: calc(100% - 125px);
}

dl.scoreInfoList dd,
dl.scheduleInfoList dd {
	width: calc(100% - 120px);
	
	margin: 3px 0;
	padding: 5px 10px;
	box-sizing: border-box;
}
dl.scheduleInfoList dd {
	
}
dl.tuitionInfoList dd {
	padding: 5px 10px;
}
.mytuitionPaymentPopup dl.tuitionInfoList dd {
	width: calc(100% - 120px);
}
dl.tuitionInfoList dd .selectBox {
	width: 100%;
}

dl.onlineReservationInfoList dd {
	width: calc(100% - 80px);
	min-height: 42px;
	margin: 3px 0;
	padding: 5px 10px;
	border-radius: 10px;
	box-sizing: border-box;
}

.mynoticeViewPopup dl.tableInfoList dd {
	osition: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% - 85px);
    height: 32px;
    padding: 0 15px;
    background-color: #f0f0f0;
    border-radius: 42px;
}
dl.layerInfoList dd span,
dl.pointInfoList  dd span,
dl.tableInfoList dd span {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 32px;
	padding: 0 15px;
	background-color: #f0f0f0;
	border-radius: 42px;
}
.mynoticeViewPopup dl.tableInfoList dd span {
	padding: 0;
}

.assignmentViewPopup dl.tableInfoList {
	border: 1px solid #dedede;
	border-radius: 10px;
}

.assignmentViewPopup dl.tableInfoList dd {
	min-height: 42px;
	margin: 5px 0;
}

.layerCloseBox {
	position: relative;
	display: flex;
	width: 100%;
	height: 42px;
	margin-top: auto;
}
ul.layerCloseList {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 42px;
	background-color: #fff;
}
ul.layerCloseList li {
	position: relative;
	display: flex;
	height: 42px;
}
.attendanceNoticeInLayer ul.layerCloseList li,
.assignmentAskLayer ul.layerCloseList li,
.recommendLayer ul.layerCloseList li {
    width: 100% !important;
}
ul.layerCloseList li:first-child {
	width: calc(100% - 120px);
}
ul.layerCloseList li:last-child {
	width: 120px;
}

ul.layerCloseList input[type="checkbox"] {  /* 실제 체크박스는 화면에서 숨김 */
  position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip:rect(0,0,0,0);
   border: 0;
}
ul.layerCloseList input[type="checkbox"] + label {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    min-width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 10px 0 22px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background: #9d9d9d;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
ul.layerCloseList input[type="checkbox"]:checked + label {
    background-color: #545454;
}

.layerCloseBtn {
	position: relative;
	width: 100%;
	height: 42px;
	font-weight: bold;
	color: #fff;
	background-color: #639df3;
}

.assignmentViewPopup ul.assignInfoList .selectBox .icoArrow span {
	background-color: transparent;
}

.printBtn,
.assignmentLink,
.checkBtn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 32px;
	margin: 5px;
	padding: 0 20px;
	font-size: 14px;
	color: #fff;
	background-color: #363d43;
	border: none;
	border-radius: 52px;
}

.printBtn:hover,
.assignmentLink:hover,
.checkBtn:hover {
	color: #fff;
	background-color: #606a72;
}

.printBtn:active,
.assignmentLink:active,
.checkBtn:active {
	color: #fff;
	transform: scale(0.98);
	transition: all 0.3s;
}

.tableContentInBox {
	position: relative;
	display: block;
	min-height: 360px;
	padding: 10px;
	background-color: #fffef5;
    border: 1px solid #dedede;
	overflow: auto;
	box-sizing: border-box;

}
.tableContentInBox img,
.tableContentInBox video,
.tableContentInBox iframe {
	max-width:  100% !important;
}


@media all and (max-width: 460px) {
	.attendanceNoticeTitle {
        font-size: 15px;
    }
	/*
	.attendanceDateBox {
        flex-direction: column;
		justify-content: center;
    }
	*/
	/*
	.attendanceDateBox span {
        display: flex;
        align-items: center;
        width: 100%;
		margin: 5px 0;
        padding-right: 0;
        box-sizing: border-box;
    }
	*/
}

.childLayer {
	position: fixed;
	z-index: 30;
	/* top: 50%; */
	bottom: 100px;
	right: 10px;
	width: 44px;
	min-height: 100px;
	/* transform: translateY(-50%); */
}

.childLayer ul.checkList {
	flex-direction: column;
	margin: 0;
}
.childLayer ul.checkList input[type="radio"] + label {
	height: auto;
	min-height: 45px;
	line-height: 1.2;
	padding: 10px 15px;
	background-color: rgba(255,255,255,0.7);
}
.childLayer ul.checkList li:first-child input[type="radio"] + label {
	border-radius: 42px 42px 0 0;
}
.childLayer ul.checkList li:last-child input[type="radio"] + label {
	border-radius: 0 0 42px 42px;
}
.childLayer ul.checkList input[type="radio"]:checked + label {
	background-color: rgb(95,98,112,0.7);
}

/*-------------------------------*/
/*             login             */
/*-------------------------------*/
.mobileLoginBox,
.mobileKeypaddBox {
	position: relative;
	display: block;
	width: 100%;
	height: 100vh;
	background-color: #fff;
	font-size: 16px;
}
.mobileLoginTitle,
.mobileKeypaddTitle {
	position: relative;
	display: flex;
	justify-content: center;
    align-items: center;
	width: 100%;
    height: 52px;
    padding: 0 15px;
	font-size: 16px;
	color: #fff;
	background-color: #3a3e51;
	box-sizing: border-box;
}
.mobileKeypaddTitle {
	height: 7vh;
	font-size: 3.5vh;
}
.mobileLoginContentBox,
.mobileKeypaddContentBox {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: calc(100vh - 52px);
	/* padding: 15px; */
	box-sizing: border-box;
}
@media all and (min-width: 768px) {
	.mobileKeypaddContentBox {
		justify-content: flex-start;
	}
}
.mobileLogoBox {
	position: relative;
	display: block;
	max-height: 52px;
	margin-bottom: 20px;
}
.mobileLogoBox img {
	max-width: 220px;
	max-height: 72px;
}

ul.mobileLoginInputBox {
	position: relative;
    display: flex;
    flex-direction: column;
	align-items: center;
    width: 280px;
	margin: 10px 0;
}
ul.mobileLoginInputBox li {
    position: relative;
	width: 100%;
    margin: 5px 0;
}
ul.mobileLoginInputBox li input {
    position: relative;
    display: flex;
    width: 100%;
    height: 42px;
    padding: 0 10px;
	background-color: #f4f9ff;
    border-radius: 42px;
}
ul.mobileLoginInputBox li:first-child:before {
    position: absolute;
    z-index: 10;
    top: 10px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 22px;
    font-size: 16px;
    color: #5d5d5d;
    content: "\e912";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
ul.mobileLoginInputBox li:last-child:before {
    position: absolute;
    z-index: 10;
    top: 10px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 22px;
    font-size: 16px;
    color: #5d5d5d;
    content: "\e914";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
ul.mobileLoginInputBox input[type="text"],
ul.mobileLoginInputBox input[type="password"] {
    text-indent: 42px;
}
.loginMiddleBox {
    position: relative;
    display: flex;
    align-items: center;
    width: 280px;
    height: 42px;
}
.loginMiddleBox .checks input[type="checkbox"] + label {
	padding: 0 10px 0 32px;
}
.loginMiddleBox .checks input[type="checkbox"]:checked + label {
	color: #1d82d0;
}
.loginMiddleBox .checks input[type="checkbox"] + label:before {
	width: 24px;
	font-size: 14px;
}
a.idPassFindBtn {
    position: relative;
    display: flex;
    flex-shrink: 0;
    margin-left: auto;
	font-size: 14px;
    text-decoration: underline;
	text-underline-position: under;
}

.loginBtnBox {
    padding: 20px 0 0;
}
.loginBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 280px;
    height: 52px;
    margin: 0;
    font-size: 16px;
    color: #fff;
    background-color: #3a3e51;
    border: none;
    border-radius: 52px;
}
.loginBtn:hover {
	background-color: #62677b;
}
.loginBtn:active {
	background-color: #3a3d49;
}

.joinGuideBox {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 280px;
	min-height: 100px;
	margin: 40px 20px 20px;
	padding: 20px;
	background-color: #f9f9f9;
	border: 1px solid #dedede;
	border-radius: 10px;
}
.joinGuideTitle {
	position: relative;
	display: flex;
	justify-content: center;
	line-height: 1.5;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}
.mobileJoinBtn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 42px;
	margin: 15px auto;
	font-size: 16px;
	color: #fff;
	background-color: #4b90c6;
	border: none;
	border-radius: 42px;
}
.mobileJoinBtn:hover {
	background-color: #66a3d2;
}
.mobileJoinBtn:active {
	background-color: #2778b7;
}
.joinGuideEx {
	line-height: 1.5;
	text-align: center;
}

@media all and (min-width: 460px) {
	ul.mobileLoginInputBox,
	.loginMiddleBox,
	.joinGuideBox {
		width: 400px;
	}
}

/*-------------------------------*/
/*            keypadd            */
/*-------------------------------*/
.mobileKeypaddBox {
	position: relative;
	min-width: 320px;
	background-color: #45699c;
	overflow: hidden;
}
.mobileKeypaddBox .mobileKeypaddInputBox {
	width: 100%;
	/* max-width: 300px; */
	margin-bottom: 10px;
}
.mobileKeypaddBox .keypaddInputTitle {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 52px;
	font-size: 18px;
	color: #fff;
}
@media all and (min-width: 460px) {
	.mobileKeypaddBox .keypaddInputTitle {
		font-size: 4vw;
		height: 10vw;
	}
}
@media all and (min-width: 768px) {
	.mobileKeypaddBox .keypaddInputTitle {
		font-size: 32px;
		height: 62px;
	}
}
.mobileKeypaddBox .mobileKeypaddInputBox input {
	position: relative;
    display: flex;
    width: 100%;
    height: 52px;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
    padding: 0 10px;
    background-color: #fff;
	border: none;
    border-radius: 5px;
	letter-spacing: 1rem;
	font-family: 'Roboto', sans-serif;
}
.mobileKeypaddBox .mobileKeypaddContentBox {
	padding: 10px;
	height: calc(100vh - 72px);
}
@media all and (min-width: 460px) {
	.mobileKeypaddBox .mobileKeypaddContentBox {
        padding: 30px;
        height: calc(100vh - 72px);
    }
}
.keypaddSelectLayer {
	position: absolute;
	z-index: 20;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: rgba(0,149,255, .95);
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(0,0,0,.5);
}
.keypaddSelectTitle {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 52px;
	font-size: 18px;
	color: #fff;
}
.keypaddSelectLayer ul.checkList input[type="radio"] + label {
	min-width: 72px;
	height: 52px;
	padding: 0 20px;
	font-size: 15px;
}

.keypaddBottomBtnBox {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 50px 0 0;
}
.keypaddCloseBtn {
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 52px;
    margin: 0;
    font-size: 16px;
    color: #fff;
    background-color: #3a3e51;
    border: none;
    border-radius: 52px;
}
.keypaddCloseBtn:active {
	transform: scale(0.95);
}
.keypaddMiddleBox {
	position: relative;
	width: 100%;
	/* max-width: 300px; */
}
.keypaddRadioBox,
.keypaddBtnBox {
	position: relative;
	display: flex;
    justify-content: center;
	width: 100%;
	/* max-width: 500px; */
	padding: 50px 0 0;
	box-sizing: border-box;
}
.keypaddRadioBox ul.checkList {
	width: 100%;
	margin: 0;
}
.keypaddRadioBox ul.checkList li {
	width: 50%;
}
.keypaddRadioBox ul.checkList input[type="radio"] + label {
	width: 100%;
	max-width: 300px;
	height: 52px;
	font-size: 15px;
}
.keypaddRadioBox ul.checkList input[type="radio"]:checked + label {
	background-color: #3a3e51;
    border: 1px solid #3a3e51;
}
.keypaddRadioBox ul.checkList li:first-child input[type="radio"] + label {
	border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.keypaddRadioBox ul.checkList li:last-child input[type="radio"] + label {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
ul.keypaddBtnList {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(20%, auto));
	gap: 4px;
	padding: 5px;
	border: 5px solid #fff;
	border-radius: 10px;
	box-sizing: border-box;
}
ul.keypaddBtnList li {
	aspect-ratio: 1 / 0.4;
}
.keypaddBtn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.4;
	font-size: 4vh;
	font-weight: bold;
	color: #45699c;
	background-color: #fff;
	/* border: none; */
	font-family: 'Roboto', sans-serif;
}
/*
@media(hover: hover) and (pointer: fine) {
	.keypaddBtn:active {
        background-color: #f0f0f0;
        transform: scale(0.9);
        transition: all 0.3s;
    }
}
*/
.keypaddBtn:active {
    background-color: #f0f0f0;
    transform: scale(0.9);
    transition: all 0.3s;
}
.keypaddBtn span {
	display: block;
	text-indent: -9999px;
}
.keypaddBtn span:before {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	font-size: 5vh;
	color: #45699c;
	text-indent: 0;
	transform: translateY(-50%);
	content: "\e92e";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}

.attendanceCheckBtn {
	position: relative;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
	width: 100%;
    /* max-width: 200px; */
    height: 42px;
    padding: 10px 20px;
    font-size: 14px;
    color: #fff;
    background-color: #3a3e51;
    border: none;
    border-radius: 100px;
	box-shadow: none;
}
.attendanceCheckBtn:active {
	transform: scale(0.95);
}

@media all and (min-width: 460px) {
	.attendanceCheckBtn {
		font-size: 3vw;
		height: 9vw;
	}
}
@media all and (min-width: 768px) {
	.attendanceCheckBtn {
		font-size: 26px;
		height: 62px;
	}
}

.keypaddLayer {
	position: absolute;
	z-index: 50;
	top: 50%;
	left: 50%;
	display: flex;
	flex-direction: column;
	width: calc(100% - 60px);
	max-width: 400px;
	min-height: 150px;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	border-radius: 10px;
	transform: translate(-50%, -50%);
}
@media all and (min-width: 768px) {
	.keypaddLayer {
		min-height: 200px;
	}
}
.keypaddLayerTitle {
	position: relative;
	display: flex;
	align-items: center;
	height: 52px;
	padding: 0 20px;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	background-color: #3a3e51;
	border-radius: 9px 9px 0 0;
}
.keypaddLayerContentBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
	padding: 15px;
	box-sizing: border-box;
}
.keypaddContentInBox {
	font-size: 16px;
	font-weight: bold;
}
@media all and (min-width: 460px) {
	.keypaddContentInBox {
        font-size: 3vw;
    }
}
@media all and (min-width: 768px) {
	.keypaddContentInBox {
        font-size: 24px;
    }
}

/*-------------------------------*/
/*             header            */
/*-------------------------------*/
.topBox {
  position: sticky;
  z-index: 50;
  top: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 52px;
  background-color: #2168b3;
  border: 1px solid #dedede;
  border-top: none;
  border-radius: 0 0 0px 0px;
}
.topBox ul.checkList {
	margin-right: 10px;
}
.topBox ul.checkList input[type="radio"] + label {
	padding: 0 5px;
}
.topBox ul.checkList li:nth-child(2) input[type="radio"] + label {
	border-top-left-radius: 42px;
	border-bottom-left-radius: 42px;
}
.topBox ul.checkList li:last-child input[type="radio"] + label {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 42px;
	border-bottom-right-radius: 42px;
}
.logoBox {
	position: relative;
	display: flex;
	align-items: center;
	width: 40%;
	height: 42px;
	padding: 0 5px;
}
.logoBox img {
	max-width: 90%;
	max-height: 32px;
	margin: 0 auto;
}
.logoTitle {
	position: relative;
	display: flex;
	align-items: center;
	width: 40%;
	height: 42px;
	padding: 0 5px;
}
.logoTitle img {
	max-width: 90%;
	max-height: 32px;
	margin: 0 10px;
}
.loginType {
	display: flex;
	z-index: 10;
	flex-shrink: 0;
	align-items: center;
	height: 32px;
	margin-left: auto;
	margin-right: 10px;
	padding: 0 20px;
	font-size: 13px;
	background-color: #19518b;
  color: #fff;
	border-radius: 32px;
  border: 1px solid rgba(0, 0, 0, .1);
}
.childName {
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #5f6270;
    height: 32px;
    margin-left: -30px;
    padding: 0 20px 0 30px;
    font-size: 12px;
    border-radius: 32px;
}
.topPointBox {
	position: fixed;
	z-index: 20;
	top: 55px;
	right: 0;
    /* right: -160px; */
	display: flex;
	justify-content: center;
	align-items: center;
	/* width: 100%; */
	/* margin-left: auto; */
	/* margin: 0 10px; */
	padding: 0 10px;
	border: 1px solid #dedede;
	border-right: none;
	background-color: rgba(255,255,255,0.5);
	border-radius: 32px 0 0 32px;
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
	transition:  all 0.3s;
}
/*
.topPointBox:hover {
	right: 0;
	transition:  all 0.3s;
}
*/
.topPointBox.on {
	right: 0;
	-webkit-animation: linear 0.8s forwards 0s topPoint;
	-moz-animation: linear 0.8s forwards 0s topPoint;
	animation: linear 0.8s forwards 0s topPoint;
}
@-webkit-keyframes topPoint {
 0%   { right: -160px;}
 100% { right: 0; }
}
@-moz-keyframes topPoint {
 0%   { right: -160px;}
 100% { right: 0; }
}
@-o-keyframes topPoint {
 0%   { right: -160px;}
 100% { right: 0; }
}
@keyframes topPoint {
 0%   { right: -160px;}
 100% { right: 0; }
}
.topPointBtn {
	align-items: center;
	padding: 0 0 0 24px;
}
.topPointBtn:before {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 23px;
	height: 23px;
	font-size: 16px;
	color: #44a9ff;
	transform: translateY(-50%);
	content: "\e915";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}
/*
.topPointBtn:after {
	position: absolute;
	z-index: 10;
	top: 50%;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 24px;
	font-size: 14px;
	color: #000;
	transform: translateY(-50%);
	content: "\e90d";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}
*/
.topPointBtn span {
	position: relative;
	font-size: 14px;
	font-weight: bold;
	color: #000;
}
.topPointBtn:active {
	transform: scale(0.98);
	transition:  all 0.3s;
}

@media all and (max-width: 460px) {
	.logoBox {
        width: 50%;
    }
	ul.checkList {
		/* margin-left: auto; */
		/* margin-right: 10px; */
	}
	/*
	.topPointBox {
		display: none;
	}
	*/
}

/*-------------------------------*/
/*            section            */
/*-------------------------------*/
.wrapper {
	position: relative;
	display: flex;
	height: 100%;
	margin-top: auto;
	padding-bottom: 62px;
	/* border-radius: 32px 32px 0 0; */
}
ul.mobileMainList {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 5px 10px;
}
ul.mobileMainList li {
	padding: 5px 0;
}
.mobileMainBtn {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 72px;
	margin: 0;
	padding: 15px 0;
	background-color: #fff;
	border: 1px solid #dedede;
	border-radius: 15px;
	box-sizing: border-box;
}
.mobileMainBtn:hover {
	border: 1px solid #d9d9d9;
	background-color: rgba(245,245,245,0.05);
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.mobileMainBtn:active {
	background-color: rgba(0, 139, 235, 0.05);
	transform: scale(0.98);
	transition:  all 0.3s;
	border-radius: 10px;
}
.mobileMainBtn.on {
	border: 1px solid #44a9ff;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	-webkit-animation: linear 1.2s infinite 0s alarmCheck;
	-moz-animation: linear 1.2s infinite 0s alarmCheck;
	animation: linear 1.2s infinite 0s alarmCheck;
}

@-webkit-keyframes alarmCheck {
 0%   { background-color: #fff; border: 1px solid #dedede; box-shadow: none; }
 100% { background-color: #ddf2ff;  border: 1px solid #44a9ff; box-shadow: 0 0 5px rgba(0,0,0,0.3); }
}
@-moz-keyframes alarmCheck {
 0%   { background-color: #fff; border: 1px solid #dedede; box-shadow: none; }
 100% { background-color: #ddf2ff;  border: 1px solid #44a9ff; box-shadow: 0 0 5px rgba(0,0,0,0.3); }
}
@-o-keyframes alarmCheck {
 0%   { background-color: #fff; border: 1px solid #dedede; box-shadow: none; }
 100% { background-color: #ddf2ff;  border: 1px solid #44a9ff; box-shadow: 0 0 5px rgba(0,0,0,0.3); }
}
@keyframes alarmCheck {
 0%   { background-color: #fff; border: 1px solid #dedede; box-shadow: none; }
 100% { background-color: #ddf2ff;  border: 1px solid #44a9ff; box-shadow: 0 0 5px rgba(0,0,0,0.3); }
}
.mainBtnIcon01,
.mainBtnIcon02,
.mainBtnIcon03,
.mainBtnIcon04,
.mainBtnIcon05,
.mainBtnIcon06,
.mainBtnIcon07,
.mainBtnIcon08,
.mainBtnIcon09,
.mainBtnIcon10,
.mainBtnIcon11,
.mainBtnIcon12,
.mainBtnIcon13,
.mainBtnIcon14,
.mainBtnIcon15 {
	position: relative;
	width: 62px;
	height: 72px;
}
.mainBtnIcon01:before,
.mainBtnIcon02:before,
.mainBtnIcon03:before,
.mainBtnIcon04:before,
.mainBtnIcon05:before,
.mainBtnIcon06:before,
.mainBtnIcon07:before,
.mainBtnIcon08:before,
.mainBtnIcon09:before,
.mainBtnIcon10:before,
.mainBtnIcon11:before,
.mainBtnIcon12:before,
.mainBtnIcon13:before,
.mainBtnIcon14:before,
.mainBtnIcon15:before {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 62px;
	height: 72px;
	font-size: 32px;
	color: #44a9ff;
	transform: translateY(-50%);
	content: "\e900";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}
.mainBtnIcon02:before {
	font-size: 30px;
	content: "\e90a";
}
.mainBtnIcon03:before {
	font-size: 26px;
	content: "\e906";
}
.mainBtnIcon04:before {
	font-size: 26px;
	content: "\e905";
}
.mainBtnIcon05:before {
	font-size: 26px;
	content: "\e90c";
}
.mainBtnIcon06:before {
	font-size: 24px;
	content: "\e904";
}
.mainBtnIcon07:before {
	font-size: 24px;
	content: "\e90b";
}
.mainBtnIcon08:before {
	font-size: 26px;
	content: "\e903";
}
.mainBtnIcon09:before {
	font-size: 26px;
	content: "\e924";
}
.mainBtnIcon10:before {
	font-size: 24px;
	content: "\e928";
}
.mainBtnIcon11:before {
	font-size: 24px;
	content: "\e929";
}
.mainBtnIcon12:before {
	font-size: 30px;
	content: "\e92c";
}
.mainBtnIcon13:before {
	font-size: 24px;
	content: "\e92d";
}
.mainBtnIcon14:before {
	font-size: 24px;
	content: "\e930";
}
.mainBtnIcon15:before {
	font-size: 24px;
	content: "";
}
.mainBtnIcon01 span,
.mainBtnIcon02 span,
.mainBtnIcon03 span,
.mainBtnIcon04 span,
.mainBtnIcon05 span,
.mainBtnIcon06 span,
.mainBtnIcon07 span,
.mainBtnIcon08 span,
.mainBtnIcon09 span,
.mainBtnIcon10 span,
.mainBtnIcon11 span,
.mainBtnIcon12 span,
.mainBtnIcon13 span,
.mainBtnIcon14 span,
.mainBtnIcon15 span {
	display: block;
	text-indent: -9999px;
}

.mainBtnEx {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: calc(100% - 165px);
}
.btnEx01 {
	position: relative;
	font-size: 20px;
	font-weight: bold;
	color: #5d5d5d;
}
.btnEx02 {
	position: relative;
	display: flex;
	line-height: 1.3;
	font-size: 13px;
	text-align: left;
	/* font-weight: bold; */
	color: #126fbf;
}

.updateBox {
	position: relative;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 32px;
	margin-left: auto;
	margin-right: 10px;
	padding: 10px;
}
.updateBox:before {
	position: absolute;
	z-index: 10;
	top: 50%;
	right: 0;
	width: 32px;
	height: 24px;
	font-size: 18px;
	color: #9d9d9d;
	transform: translateY(-50%);
	content: "\e90d";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}
.updateBox span {
	display: block;
	text-indent: -9999px;
}
.updateBox.on {
	background-color: #f0f0f0;
	border-radius: 32px;
}
.updateBox.on:before {
	content: "";
}

@media all and (max-width: 460px) {
        .btnEx01 {
        font-size: 16px;
    }
}

/*-------------------------------*/
/*             footer            */
/*-------------------------------*/
.footBox {
	position: fixed;
	z-index: 20;
	bottom: 0;
	display: flex;
	align-items: center;
	width: 100%;
	height: 62px;
	background-color: #2c3033;
	border-bottom: none;
	border-radius: 24px 24px 0 0;
}

ul.footerBtnList {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20%, auto));
	width: 100%;
	height: 62px;
}
ul.footerBtnList li {
	display: flex;
	justify-content: center;

}
.mobileBottomBtn {
	position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
	background-color: transparent;
	border: none;
}
.mobileBottomBtn:hover {
	background-color: rgba(245, 245, 245, 0.05);
}
.mobileBottomBtn:active {
	background-color: rgba(0, 139, 235, 0.05);
	transform: scale(0.97);
	transition: all 0.3s;
}
.bottomBtnIcon01,
.bottomBtnIcon02,
.bottomBtnIcon03,
.bottomBtnIcon04,
.bottomBtnIcon05 {
	position: relative;
	width: 100%;
	height: 36px;
}
.bottomBtnIcon01:before,
.bottomBtnIcon02:before,
.bottomBtnIcon03:before,
.bottomBtnIcon04:before,
.bottomBtnIcon05:before {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 36px;
	font-size: 22px;
	color: #b0b0b0;
	transform: translateY(-50%);
	content: "\e908";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}
.bottomBtnIcon02:before {
	content: "\e909";
}
.bottomBtnIcon03:before {
	font-size: 28px;
	content: "\e902";
}
.bottomBtnIcon04:before {
	content: "\e90c";
}
.bottomBtnIcon05:before {
	content: "\e90f";
}
.bottomBtnIcon01 span,
.bottomBtnIcon02 span,
.bottomBtnIcon03 span,
.bottomBtnIcon04 span,
.bottomBtnIcon05 span {
	display: block;
	text-indent: -9999px;
}
.bottmBtnEx {
	position: relative;
	display: flex;
	align-items: center;
	height: 20px;
    font-size: 13px;
	color: #b0b0b0;
}

ul.footerBtnList .on.mobileBottomBtn {
	background-color: #3479c2;
}
ul.footerBtnList .on .btnIcon:before {
	color: #fff;
}
ul.footerBtnList .on:first-child .mobileBottomBtn {
	border-radius: 24px 0 0 0;
}
ul.footerBtnList .on:last-child .mobileBottomBtn {
	border-radius: 0 24px 0 0;
}
ul.footerBtnList .on .bottmBtnEx {
	color: #fff;
}


/*-------------------------------*/
/*            sideNav            */
/*-------------------------------*/
.sideNavBox {
	position: fixed;
    z-index: 999;
    top: 0;
    bottom: 0;
    width: 80%;
    margin-left: -100%;
    background-color: #fff;
    box-shadow: 3px 0 3px 0 rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
}
.sideNavBox.on {
    margin-left: 0;
    transition: all 0.3s;
}
.navTopBox {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    background-color: #2f2f30;
}
.navLogoBox {
	position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 30px 0 10px;
    background-color: #fff;
    border-radius: 0 52px 52px 0;
    box-sizing: border-box;
}
.navLogoBox img {
	max-width: 110px;
    max-height: 32px;
}
.navCloseBtn {
	position: absolute;
    right: 0;
    display: flex;
    width: 52px;
    height: 52px;
    background-color: transparent;
    border: none;
}
.navCloseBtn span {
	display: block;
	text-indent: -9999px;
}
.navCloseBtn:before {
	position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    font-size: 24px;
    color: #fff;
    content: "\e910";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

ul.sideNavList {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
	height: calc(100vh - 73px);
    margin: 10px 0;
	overflow: auto;
}
ul.sideNavList li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-height: 52px;
    transition: all 0.3s;
}
ul.sideNavList li:hover {
	background-color: #f9f9f9;
}
ul.sideNavList a {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    min-height: 52px;
    /* padding-left: 62px; */
	padding-left: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #5d5d5d;
}
ul.sideNavList a:active {
	transform: scale(0.97);
	transition: all 0.3s;
}
a.depth01 {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 62px;
	box-sizing: border-box;
}
.depth01.on {
    color: #fff;
    background-color: #4d5053 !important;
}
a.depth01 .depthTitle {
    font-size: 15px;
}
a.depth01 .depthEx {
	display: flex;
    flex-wrap: wrap;
    width: calc(100% - 52px);
    line-height: 1.3;
    font-size: 12px;
	font-weight: normal;
	color: #6dbcff;
}
a.depth01:after {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 100%;
    font-size: 14px;
    color: #2d2d2d;
    content: "\e90d";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    transition: all 0.3s;
}
a.depth01.on:after {
	color: #fff;
}

/*
.sideNav01:before,
.sideNav02:before,
.sideNav03:before,
.sideNav04:before,
.sideNav05:before,
.sideNav06:before,
.sideNav07:before,
.sideNav08:before,
.sideNav09:before,
.sideNav10:before {
	position: absolute;
	z-index: 20;
	top: 50%;
	left: 10px;
	width: 38px;
	height: 38px;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	font-size: 20px;
    color: #2d2d2d;
	background-color: #f0f0f0;
	border-radius: 50%;
	transform: translateY(-50%);
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.sideNav01:before {
	content: "\e909";
}
.sideNav02:before {
	content: "\e902";
}
.sideNav03:before {
	content: "\e90c";
}
.sideNav04:before {
	content: "\e904";
}
.sideNav05:before {
	content: "\e905";
}
.sideNav06:before {
	content: "\e90b";
}
.sideNav07:before {
	content: "";
}
.sideNav08:before {
	content: "";
}
.sideNav09:before {
	content: "";
}
.sideNav10:before {
	content: "";
}
*/

/*-------------------------------*/
/*            subPage            */
/*-------------------------------*/
.goTopBtn {
	position: fixed;
	z-index: 20;
	right: 15px;
	bottom: 20px;
	width: 42px;
	height: 42px;
	background-color: rgba(255,255,255, 0.8);
	border: none;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	border-radius: 50%;
	display: none;
	transition: all 0.3s;
}
.goTopBtn:active {
	transform: scale(0.9);
	transition: all 0.3s;
}
.goTopBtn span {
	display: block;
	text-indent: -9999px;
}
.goTopBtn:before {
	position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    font-size: 42px;
    color: #5d5d5d;
    content: "\e91b";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
a.backBtn,
a.homeBtn {
	position: relative;
	display: flex;
	width: 42px;
	height: 42px;
}
a.backBtn:hover,
a.homeBtn:hover {
	background-color: #f9f9f9;
	border-radius: 10px;
}
a.backBtn:active,
a.homeBtn:active,
.searchTopBtn:active {
	transform: scale(0.9);
	transition: all 0.3s;
}
a.backBtn span,
a.homeBtn span {
	display: block;
	text-indent: -9999px;
}
a.backBtn:before,
a.homeBtn:before  {
	position: absolute;
	top: 0;
	left: 0;
	width: 42px;
	height: 42px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 22px;
	color: #ffffff;
	content: "";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
a.backBtn:before {
	content: "\e917";
}
a.homeBtn:before {
	content: "\e920";
}

.searchTopBtn {
	position: fixed;
	z-index: 20;
	top: 80px;
	right: 15px;
	width: 42px;
	height: 42px;
	background-color: rgba(100, 216, 255, 0.9);
	border: none;
	border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.searchTopBtn:hover {
	background-color: #3bb6df;
}
.searchTopBtn span,
.writeBtn span {
	display: block;
	text-indent: -9999px;
}
.searchTopBtn:before  {
	position: absolute;
	top: 0;
	left: 0;
	width: 42px;
	height: 42px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 22px;
	color: #fff;
	content: "\e91e";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.searchTopBtn.active {
	top: 56px;
}

.mobileSubTitle {
  position: relative;
  display: flex;
  align-items: center;
  height: 32px;
  margin: 0 auto;
  padding: 0 15px;
  font-size: 16px;
  color: #fff;
  background-color: #19518b;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 42px;
  box-sizing: border-box;
  font-weight: 400;
}
.mobileSubTitle strong {
	margin-right: 10px;
}

.subWrapper {
  position: relative;
  display: block;
  min-height: calc(100vh - 68px);
  background-color: #fff;
  border: 1px solid #dedede;
  border-radius: 14px 14px 0 0;
  width: calc(100% - 16px);
  margin: 0 auto;
  margin-top: 15px;
}
.popupWrapper {
	position: relative;
	display: block;
	height: 100vh;
	background-color: #fff;
}
.assignmentViewPopup .subWrapper {
	padding-top: 20px;
}
.portfolioViewPopup .subWrapper img,
.portfolioViewPopup .subWrapper video,
.portfolioViewPopup .subWrapper iframe {
	width: 100% !important;
	max-width: 100% !important;
}
.subSearchTopBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 42px;
	margin: 10px 10px 0;
	padding: 0 5px 0 15px;
	background-color: #f9f9f9;
	border-radius: 100px;
	box-sizing: border-box;
	overflow: hidden;
	transition: all 0.3s;
}

.mynoticePopup .subSearchTopBox,
.counselPopup .subSearchTopBox,
.liveAlarmPopup .subSearchTopBox {
	justify-content: flex-start;
	height: 0;
	margin: 0;
	background-color: transparent;
	border-radius: 0
}

.classTestPopup .subSearchTopBox {
    justify-content: center;
}

.subSearchTopBox.on {
	position: sticky;
	z-index: 20;
	top: 53px;
	height: 52px;
	margin: 10px 0 0;
}
.subSearchTopBox.on.active {
	background-color: rgba(255,255,255,0.8);
	border-bottom: 1px solid #dedede;
}
.searchCloseBtn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 42px;
	height: 42px;
	background-color: transparent;
	border: none;
}
.searchCloseBtn span {
	display: block;
	text-indent: -9999px;
}
.searchCloseBtn:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 42px;
	height: 42px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	color: #5d5d5d;
	content: "\e910";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.monthPointTitle {
	font-size: 18px;
	display: none;
}
.mobileSearchBox {
	position: relative;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: auto;
}
.mynoticePopup .mobileSearchBox,
.counselPopup .mobileSearchBox,
.liveAlarmPopup .mobileSearchBox {
	width: calc(100% - 42px);
}
.classTestPopup .mobileSearchBox {
    margin-left: 0 !important;
}
.mynoticePopup .mobileSearchBox .selectBox,
.counselPopup .mobileSearchBox .selectBox {
	display: none;
}
.searchBtn {
	position: relative;
	/* right: 5px; */
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    min-width: 80px;
    height: 32px;
    padding: 0 10px;
    font-size: 14px;
    color: #fff;
    background-color: #5f6271;
    border: none;
    border-radius: 100px;
}

.mynoticePopup .searchBtn,
.counselPopup .searchBtn,
.liveAlarmPopup .searchBtn {
	position: absolute;
	right: 5px;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    min-width: 0;
    width: 32px;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    color: #fff;
	background-color: transparent;
    /* background-color: #5f6271; */
    border: none;
    border-radius: 100px;
}
.mynoticePopup .searchBtn span,
.counselPopup .searchBtn span,
.liveAlarmPopup .searchBtn span {
	display: block;
	text-indent: -9999px;
}
.mynoticePopup .searchBtn:before,
.counselPopup .searchBtn:before,
.liveAlarmPopup .searchBtn:before {
	position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    font-size: 20px;
    color: #5d5d5d;
    content: "\e91e";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.mynoticePopup .searchBtn:active,
.counselPopup .searchBtn:active,
.liveAlarmPopup .searchBtn:active {
	transform: scale(0.9);
	transition:  all 0.3s;
}

.mobilePointBox,
.mobileTuitionBox,
.mobileScheduleBox {
	position: relative;
	display: block;
	margin: 15px;
	background-color: #fff;
	border: 1px solid #dedede;
	border-radius: 15px;
	box-sizing: border-box;
}
.mytuitionPopup .mobileTuitionBox {
	border: 3px solid #585c60;
}
.pointTitle,
.tuitionTitle,
.scheduleTitle,
.mysmsTitle {
	display: flex;
	align-items: center;
	height: 42px;
	padding-left: 20px;
	font-size: 18px;
	background-color: #f9f9f9;
	border-bottom: 1px solid #dedede;
	border-radius: 14px 14px 0 0;
}
.mytuitionPopup .tuitionTitle {
	color: #fff;
	background-color: #585c60;
	border-radius: 11px 11px 0 0;
}
.scheduleTitle {
	align-items: baseline;
	padding: 8px 5px 5px 20px;
}
.tuitionTitle,
.scheduleTitle {
	font-size: 15px;
	font-weight: bold;
	color: #000;
}
.mysmsTitle {
	font-size: 15px;
	color: #000;
}

.pointListBox,
.tableContentBox,
.tuitionListBox,
.scheduleListBox {
	position: relative;
	display: block;
	margin-top: 15px;
	padding: 15px;
	border-top: 1px solid #dedede;
	box-sizing: border-box;
}

.mytuitionPopup .tableContentBox {
	padding: 10px 0 10px;
}

.mysmsBox {
	position: relative;
	display: block;
	line-height: 1.8;
	padding: 10px;
	font-size: 14px;
	box-sizing: border-box;
}

.tableContentBox {
	font-size: 14px;
}

.tableContentBox img,
.tableContentBox video,
.tableContentBox iframe {
	max-width: 100% !important;
}

.assignmentViewPopup .tableContentBox {
    margin-top: 0;
}

.assignmentAskLayer .tableContentBox {
	background-color: #fff;
}

.myscoreViewPopup .tableContentBox img,
.myscoreViewPopup .tableContentBox video,
.myscoreViewPopup .tableContentBox iframe
{
	max-width: 100%;
}

ul.pointList {
	position: relative;
	display: block;
	font-size: 14px;
}
ul.pointList li {
	margin: 3px 0;
	padding: 5px 10px;
	box-sizing: border-box;
}
ul.pointList li:nth-child(even) {
	background-color: #f9f9f9;
	border-radius: 10px;
}
.pointListTop {
	position: relative;
	display: flex;
	align-items: center;
	font-size: 12px;
	color: #5d5d5d
}
.pointListTop .plusPointBox {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 16px;
	margin-right: 2px;
	padding: 0 7px;
	color: #269bff;
	border: 1px solid #269bff;
	border-radius: 10px;
}
.pointListTop .minusPointBox {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 16px;
	margin-right: 2px;
	padding: 0 7px;
	color: #ff7272;
	border: 1px solid #ff7272;
	border-radius: 10px;
}
.pointDate {
	font-size: 12px;
	color: #000;
	margin-left: auto;
}
.pointListBottom {
	line-height: 1.3;
	margin-bottom: 2px;
	font-size: 13px;
    color: #2d2d2d;
}

.tableListBox {
	position: relative;
	display: block;
	/* margin-top: 15px; */
	padding: 15px;
	box-sizing: border-box;
}

ul.tableList {
	position: relative;
	display: flex;
	flex-direction: column;
	font-size: 14px;
}
.assignmentViewPopup ul.tableList {
	/* max-height: 225px; */
	margin: 10px 0 0;
	/* overflow: auto; */
}
ul.tableList li {
	margin: 5px 0;
	padding: 5px 15px;
	/* background-color: #f9f9f9; */
	border: 1px solid #dedede;
	border-radius: 10px;
	box-sizing: border-box;
}
.portfolioPopup ul.tableList li {
	padding: 15px;
	/* border: none; */
}
.assignmentPopup .tableListBox ul.tableList li,
.assignmentViewPopup .tableContentBox ul.tableList li {
	padding: 5px 10px;
}

ul.tableList li:active {
	transform: scale(0.98);
	transition:  all 0.3s;
}
/*
.portfolioPopup ul.tableList li:nth-child(even) {
	background-color: #f9f9f9;
}
*/
ul.tableList li.unCheckedLink {
	background-color: #ffefef;
	border: 1px solid #ffc3c3;
}

ul.tableList li.answeredLink {
	background-color: #eff8ff;
	border: 1px solid #78b7e4;
}

ul.tableList li:hover {
	background-color: rgba(0,0,0,0.05);
	border-radius: 10px;
}
ul.tableList li a {
	font-size: 14px;
}
.assignmentPopup ul.tableList li a {
	font-size: 13px;
}
.portfolioPopup ul.tableList li a {
	display: flex;
}

.tableListTop {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 22px;
}
.uncheckedIcon,
.checkedIcon,
.answeredIcon,
.unansweredIcon {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: auto;
	height: 22px;
	/* margin-right: 5px;
	padding: 2px 10px; */
	color: #fff;
	font-size: 12px;
	border-radius: 42px;
}
.assignmentPopup .uncheckedIcon,
.assignmentPopup .checkedIcon {
	font-size: 11px;
}
.uncheckedIcon {
	color: #ff7272;
	padding: 0 5px;
    background-color: #ffd0bc;
}
.answeredIcon {
	color: #2c83c1;
	padding: 0 10px;
    background-color: #bfe2ff;
}
.checkedIcon,
.unansweredIcon {
	color: #5d5d5d;
	/* background-color: #269bff; */
}
.portfolioPopup .uncheckedIcon,
.portfolioPopup .checkedIcon {
    width: 60px;
}
.portfolioPopup .checkedIcon {
    justify-content: flex-start;
}
.assignmentViewPopup .uncheckedIcon,
.assignmentViewPopup .checkedIcon {
	margin-left: auto;
}
.tableTitle {
	display: inline-block;
	/* width: calc(100% - 74px); */
	font-size: 15px;
	font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.assignmentViewPopup .tableTitle {
	width: calc(100% - 42px);
	text-decoration: underline;
	text-underline-position: under;
}
.assignmentViewPopup .tableTitle:active {
	transform: scale(0.98);
}
.assignmentDeleteBtn {
	position: relative;
	margin-left: auto;
	width: 42px;
	height: 42px;
	background-color: transparent;
	border: none;
}
.assignmentDeleteBtn:hover {
	background-color: #f0f0f0;
	border-radius: 50%;
}
.assignmentDeleteBtn:active {
	transform: scale(0.9);
}
.assignmentDeleteBtn span {
	display: inline-block;
	text-indent: -9999px;
}
.assignmentDeleteBtn:before {
	position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    font-size: 20px;
    color: #5d5d5d;
    content: "\e911";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.mobileWriteBtn {
	padding: 0 30px;
    font-size: 14px;
    color: #fff;
    background-color: #556270;
    border-radius: 42px;
}
.mobileCancelBtn {
	padding: 0 30px;
    font-size: 14px;
    color: #fff;
    background-color: #b3b5b7;
    border-radius: 42px;
}
.mynoticePopup .textInput,
.counselPopup .textInput,
.liveAlarmPopup .textInput {
    width: 100%;
	height: 42px;
	padding: 0 35px 0 15px;
	border-radius: 52px;
}
.tableListBottom {
	display: flex;
	align-items: center;
	font-size: 13px;
	color: #5d5d5d;
}

.mynoticePopup .tableListBottom,
.counselPopup .tableListBottom {
	margin-top: 5px;
}

.tableDate {
	margin-left: auto;
}

.subTableTitle {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 42px;
  margin: 10px 10px 0;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 400;
  color: #1c1c1c;
  background-color: #ededed;
  border-radius: 6px;
  letter-spacing: 0;
}
.assignmentViewPopup .subTableTitle {
	margin-top: 20px;
}
.assignmentViewPopup .tableContentBox .subTableTitle {
	margin: 0;
}

.attendanceNoticePopup .subTableTitle {
    padding-right: 10px;
    font-weight: normal;
}
/*
.mytuitionPopup .subTableTitle {
	margin-top: 0;
}
*/

.fileNumBox {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 28px;
	margin-left: 10px;
	padding: 0 20px;
	font-size: 14px;
	color: #fff;
	background-color: #4596e7;
	border-radius: 42px;
}

.pageBox .selectBox {
        display: none;
    }

.tableViewBox {
  position: relative;
  display: block;
  margin: 3px 10px;
  background-color: #fff;
  /* border: 1px solid #dedede; */
  border-radius: 15px;
  box-sizing: border-box;
}
.portfolioViewPopup .tableViewBox {
	margin: 0 15px 15px;
}
.assignmentViewPopup .tableViewBox {
	border: none;
}

.assignmentListBox {
	position: relative;
	display: block;
	padding: 10px 12px;
	background-color: #fff;
	border: 1px solid #dedede;
	border-radius: 15px;
	box-sizing: border-box;
	/* max-height: 310px;
	overflow: auto; */
}
ul.assignmentList {
	position: relative;
	display: block;
}
ul.assignmentList li {
	display: flex;
	align-items: center;
	height: 42px;
	padding: 0 5px 0 10px;
}
ul.assignmentList li:nth-child(even) {
	background-color: #f9f9f9;
}

.assignmentUploadBox {
	position: relative;
	display: flex;
	align-items: center;
	height: 42px;
	margin: 10px 0;
	border: 1px solid #dedede;
	border-radius: 42px;
}
.assignmentUploadBox .uploadBtn {
	position: relative;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 50%;
	height: 34px;
	margin-right: 5px;
	font-size: 14px;
	color: #fff;
	background-color: #363d43;
	border: none;
	border-radius: 52px;
}
.assignmentUploadBox .uploadBtn:hover {
	background-color: #606a72;
}
.assignmentUploadBox .uploadBtn:active {
	transform: scale(0.95);
	transition: all 0.3s;
}
.assignmentUploadBox .selectBox {
	width: 50%;
	min-width: auto;
	margin-left: 5px;
}
.assignmentUploadBox .selectBox .select {
	width: 100%;
}

.onlineAssignment {
	position: relative;
	display: block;
	max-width: 100%;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	box-sizing: border-box;
}

.downloadLink {
    position: relative;
    display: block;
    max-width: 100%;
    margin: 5px 0;
	padding: 0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: underline !important;
    text-underline-position: under;
    box-sizing: border-box;
}

.assignLink {
	position: relative;
    display: block;
    max-width: 100%;
    margin: 5px 0;
	padding: 8px 15px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: underline !important;
    text-underline-position: under;
	background-color: #f0f0f0;
	border-radius: 32px;
    box-sizing: border-box;
}

.tableImgBox {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 40%;
	max-width: 200px;
	line-height: 1.2;
	color: #5d5d5d;
    aspect-ratio: 1 / 0.9;
	box-sizing: border-box;
	background-color: #dedede;
	overflow: hidden;
}
.tableImgBox.videoOn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	font-size: 52px;
	color: #fff;
	text-shadow: 0 0 10px rgba(0,0,0,0.5);
	background: url("../images/img_video.png") no-repeat center center;
	background-size: cover;
	content:"";
	/* content: "\e91c"; */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.tableImgBox.textOn {
    padding: 10px;
    box-sizing: border-box;
}
.tableImgBox.textOn:after {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	font-size: 22px;
	color: #dedede;
	background-color: #f0f0f0;
	background: url("../images/img_content.png") no-repeat center center;
	background-size: cover;
	content:"";
	/* content: "\e91d"; */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.tableImgBox img {
	max-width: 150%;
	max-height: 150%;
}
.textEx {
	z-index: 10;
}

.tableImgExBox {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: auto;
	margin-left: 15px;
}

.subUpdateBox {
	position: relative;
	display: block;
	padding: 5px 15px;
	text-align: right;
	font-size: 15px;
	box-sizing: border-box;
}

.tableViewImgBox {
	position: relative;
	display: block;
	margin: 15px 15px 0;
}
.tableViewImgBox img,
.tableViewImgBox video,
.tableViewImgBox iframe {
	max-width: 100% !important;
}
.tableViewContentBox {
	position: relative;
	display: block;
	margin: 15px;
	padding: 15px;
	font-size: 14px;
	background-color: #f9f9f9;
	box-sizing: border-box;
}

.assignmentPopup .tableLink,
.assignmentViewPopup .tableLink {
    display: flex;
	align-items: center;
}
.assignmentAnswerBox {
	position: relative;
	display: block;
	padding: 10px;
	background-color: #fffef2;
	border: 1px solid #dedede;
	border-radius: 10px;
}
.tableListLeft {
    display: flex;
    flex-direction: column;
	width: calc(100% - 100px);
}
.tableListLeftBottom {
    padding: 5px;
    font-size: 12px;
    color: #5d5d5d;
    background-color: #f5f5f5;
    border-radius: 10px;
}
.unCheckedLink .tableListLeftBottom {
    background-color: #f6e0e0;
}
.onlineAssignmentBox {
	position: relative;
	display: flex;
	flex-direction: column;
}
.tableListRight {
    display: flex;
	flex-shrink: 0;
    flex-direction: column;
    margin-left: auto;
	width: 100px;
}
.dueDate {
	text-align: right;
	font-weight: bold;
}
.checkPeriod {
	position: relative;
	display: flex;
	margin-left: auto;
}
.checkLeftDate,
.checkPassedDate {
    display: inline-flex;
    align-items: center;
    height: 22px;
    font-size: 12px;
	margin-left: auto;
}
.checkLeftDate {
    color: #269bff;
}
.checkPassedDate {
    color: #ff7272;
}

.onlineAssignmentName {
	position: relative;
	display: flex;
	align-items: center;
	height: 32px;
	padding: 0 20px;
	font-size: 14px;
	color: #1fa3da;
	background-color: #fff;
	border: 1px solid #1fa3da;
	border-radius: 52px;
}
.topQuickNav {
	position: fixed;
	z-index: 20;
	top: 32px;
	right: 0;
	left: 0;
	height: 62px;
	padding: 20px 15px 0;
	background-color: rgba(240,240,240,0.9);
	border: 1px solid #dedede;
	border-top: none;
	border-radius: 0 0 15px 15px;
	box-shadow: 0 5px 5px rgba(0,0,0,0.1);
}
ul.mobileTopNavList {
	position: relative;
    width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20%, auto));
}
ul.mobileTopNavList li a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 42px;
}
.navbar-nav {
	margin: 0;
}
.tabAnchor {
	position: absolute;
	top: -28px;
}

.checkedTask {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: auto;
	font-size: 11px;
}
.myScore {
	font-weight: bold;
	color: #000;
}
.myGuide {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 22px;
    margin-left: auto;
    padding: 2px 7px;
    font-size: 12px;
    color: #1fa3da;
    background-color: #dcf5ff;
    border-radius: 22px;
}

ul.assignInfoList,
ul.attendanceInfoList {
	position: relative;
    display: flex;
	flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    min-height: 42px;
    font-size: 14px;
	border: 1px solid #dedede;
    border-radius: 10px;
	box-sizing: border-box;
}
ul.attendanceInfoList {
    border: none;
}
ul.assignInfoList li,
ul.attendanceInfoList li {
	display: flex;
	width: 100%;
	padding: 5px;
	border-bottom: 1px solid #dedede;
	box-sizing: border-box;
}
ul.attendanceInfoList li {
    border-bottom: none;
}
ul.assignInfoList li:last-child {
	border-bottom: none;
}

.assignInfoBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 42px;
	box-sizing: border-box;
}
.assignTitle {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 70px;
	height: 32px;
	text-align: right;
	font-weight: bold;
	margin-right: 10px;
	font-size: 14px;
	color: #2d2d2d;
	border-radius: 100px;

}
.assignContent {
	position: relative;
    display: block;
    width: calc(100% - 80px);
    min-height: 32px;
	margin-left: auto;
	box-sizing: border-box;
}
.assignContent span {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 36px;
	padding: 0 15px;
	font-size: 14px;
	background-color: #f0f0f0;
    border-radius: 100px;
	box-sizing: border-box;
}
.assignContent2 {
	position: relative;
    display: flex;
	align-items: center;
    width: calc(100% - 70px);
    min-height: 32px;
	margin-left: auto;
	padding: 0 10px;
	background-color: #f0f0f0;
    border-radius: 100px;
	box-sizing: border-box;
}
.tableBox {
	position: relative;
	display: block;
}
.popupBoxHideContentBox {
	position: absolute;
    z-index: 15;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    background-color: #fff;
	padding: 20px;
    border: 1px solid #acacac;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.popupBoxHideContentBox span {
    display: block;
    line-height: 1.5;
    padding: 20px 0;
    font-size: 18px;
    color: #5d5d5d;
    margin: 0 auto;
}

.taskCheckBtn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 42px;
	padding: 0 25px;
	font-size: 14px;
	color: #fff;
	background-color: #363d43;
	border: none;
	border-radius: 100px;
}

.tabLink {
	position: relative;
	display: flex;
	align-items: center;
	height: 42px;
	font-size: 14px;
	border-bottom: 3px solid transparent;
}
.tabLink.active {
	color: #0e91e4;
	border-bottom: 3px solid #0e91e4;
}

.attendanceTitle {
    font-size: 18px;
    display: none;
}
.attendanceNoticeBtn {
    position: relative;
    /* right: 5px; */
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    min-width: 100%;
    height: 42px;
    margin-left: auto;
    padding: 0 20px;
    font-size: 14px;
    color: #fff;
    background-color: #5f6271;
    border: none;
    border-radius: 100px;
}
.attendanceNoticeBtn:hover {
    background-color: #8a8d99;
}
.attendanceNoticeBtn:active {
    transform: scale(0.98);
}

.mobileAttendanceBox {
	position: relative;
	display: block;
	margin: 15px;
	background-color: #fff;
	border: 1px solid #dedede;
	border-radius: 15px;
	box-sizing: border-box;
}
.mobileAttendanceTitle {
	display: flex;
	align-items: center;
	height: 42px;
	padding-left: 20px;
	font-size: 18px;
	background-color: #f9f9f9;
	border-bottom: 1px solid #dedede;
	border-radius: 14px 14px 0 0;
}

 .attendanceNoticePopup .subTableTitle {
    padding: 10px;
}
.attendanceInfoBox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}
.attendanceInfoDate {
    position: relative;
    display: flex;
    padding: 5px 0;
    font-size: 16px;
    font-weight: bold;
}
.attendanceContent {
    position: relative;
    display: block;
    padding: 5px 10px;
    background-color: #f0f0f0;
    border-radius: 10px;
    box-sizing: border-box;
}
.attendanceInBox {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 5px 0;
    box-sizing: border-box;
}
.attendanceChecked,
.absenceChecked,
.lateChecked,
.leaveChecked {
    position: relative;
    display: inline-flex;
    height: 20px;
    margin-left: 5px;
    padding: 0 10px;
    font-size: 11px;
    color: #269bff;
    background-color: #fff;
    border: 1px solid #269bff;
    border-radius: 32px;
}
.absenceChecked {
    color: #ff7272;
    border: 1px solid #ff7272;
}
.lateChecked {
    color: #e1a92a;
    border: 1px solid #e1a92a;
}
.leaveChecked {
    color: #8f2ae1;
    border: 1px solid #8f2ae1;
}

.assessmentScore {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    margin: 0 3px;
    font-size: 12px;
    color: #58c0ff;
    background-color: #fff;
    border: 2px solid #58c0ff;
    border-radius: 50%;
}

.attendanceResultBox {
    position: relative;
    display: block;
    width: 100%;
}
.attendanceResultInBox {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 5px 0;
}
.scoreBox {
    position: relative;
    display: block;
    padding: 2px 10px;
    background-color: #fff;
    border-radius: 52px;
}
.scoreBox span {
    margin: 0 3px;
}
.attendanceResultTitle {
    margin-right: 5px;
}

.attendanceCheckListBox,
.timeScheduleListBox {
    position: relative;
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 5px 0;
    text-align: center;
    white-space: nowrap;
    overflow: auto;
    background-color: #f9f9f9;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    box-sizing: border-box;
}

.timeScheduleListBox {
	margin-bottom: 0;
}

/*
.attendanceCheckListBox ul.checkList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20%, auto));
}

.attendanceCheckListBox ul.checkList li {
    margin-left: -1px;
}
*/
.timeScheduleListBox ul.checkList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(33%, auto));
}
.attendanceCheckListBox ul.checkList input[type="radio"] + label,
.timeScheduleListBox ul.checkList input[type="radio"] + label {
    width: 100%;
	font-size: 14px;
}

.timeScheduleListBox ul.checkList .timeScheduleTitle {
	position: relative;
    display: block;
    max-width: 100%;
    padding: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.mobileClassTestBox,
.mobileScoreTableBox {
	position: relative;
	display: flex;
	margin: 15px;
	padding: 3px;
	/* background-color: #fff; */
	background: linear-gradient(135deg, #01e3fd, #1ca3cd, #5ce0ff, #a4e3ff);
	/* border: 1px solid #dedede; */
	border-radius: 15px;
	box-sizing: border-box;
}
.mobileClassTestInBox,
.mobileScoreTableInBox {
	display: flex;
	background-color: #fff;
	border-radius: 14px;
}
.mobileScoreTableInBox {
	border-radius: 13px;
}
.mobileScoreTableInBox {
	padding: 10px;
	box-sizing: border-box;
}
.mobileClassTestTitle {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 90px;
	padding: 5px;
	text-align: center;
	font-size: 14px;
    font-weight: bold;
	/* background-color: #f9f9f9; */
	background: linear-gradient(135deg, #00e6ff, #1ca3cd);
	border-radius: 14px 0 0 14px;
	box-sizing: border-box;
}

.classTestPopup .mobileClassTestBox .tableBox {
	width: calc(100% - 90px);
	height: 105px;
	margin: 5px;
    padding: 0;
    box-sizing: border-box;
	overflow: auto;
}
.mobileScoreTableInBox .tableBox td {
	border-bottom: 1px solid #fff;
}
.mobileScoreTableInBox .tableBox td:first-child {
	font-weight: bold;
	background-color: #c6f5ff;
}

.tableBox table {
    table-layout: fixed;
}

.tableBox th {
    padding: 5px 2px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background-color: #81a1d5;
    box-sizing: border-box;
}
.tableBox th:first-child {
    border-radius: 42px 0 0 42px;
}
.tableBox th:last-child {
    border-radius: 0 42px  42px 0;
}
.mobileScoreTableInBox .tableBox th:first-child {
    border-radius: 10px 0 0 0;
}
.mobileScoreTableInBox .tableBox th:last-child {
    border-radius: 0 10px  0 0;
}
.mobileClassTestInBox .tableBox th {
	position: sticky;
	z-index: 20;
	top: 0;
	font-size: 12px;
	color: #fff;
    background-color: #16b0d6;
}
.mobileScoreTableInBox .tableBox th {
	position: relative;
	font-size: 14px;
	color: #fff;
    background-color: #16b0d6;
}
.mobileClassTestInBox .tableBox th:first-child {
	border-radius: 0 0 0 10px;
}
.mobileClassTestInBox .tableBox th:last-child {
	border-radius: 0 10px  0 0;
}

.tableBox td {
    padding: 5px;
    text-align: center;
    font-size: 14px;
    color: #2d2d2d;
    box-sizing: border-box;
}
.mobileClassTestInBox .tableBox td {
	font-size: 12px;
}
.tableBox tbody > tr:nth-child(even) > td {
    padding: 5px;
    text-align: center;
    color: #2d2d2d;
    background-color: #f0f0f0;
    box-sizing: border-box;
}

.mobileClassTestBox .tableBox tbody > tr:nth-child(even) > td {
	background-color: #e9f8ff;
}
.fp-viewing-firstPage .headerBox
.classTestTitle {
    position: relative;
    display: block;
    max-width: 100%;
    padding: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.writeBtn {
    position: fixed;
    z-index: 20;
    bottom: 80px;
    right: 15px;
    width: 42px;
    height: 42px;
    font-size: 12px;
    color: #fff;
    background-color: #555d63;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.writeBtn:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    color: #fff;
    content: "\e92b";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.writeBtn:active {
	transform: scale(0.95);
}

.fileIcon {
    position: relative;
    display: flex;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: #917aa8;
    border-radius: 50%;
}
.fileIcon span {
    display: inline-block;
    text-indent: -9999px;
}
.fileIcon:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #fff;
    content: "\e927";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.filebox {
	width: 100%;
}

.filebox .upload-name {
    display: inline-flex;
    width: 100%;
	height: 40px;
    padding: 0 95px 0 10px;
	font-size: 14px;
    color: #9d9d9d;
	/* vertical-align: middle; */
	background-color: transparent;
    border: none;
	border-radius: 42px;
}

.filebox label {
	position: absolute;
	top: 3px;
	right: 3px;
    display: inline-flex;
	align-items: center;
	height: 35px;
    margin-left: 10px;
    padding: 2px 20px 0;
	font-size: 14px;
    color: #fff;
    /* vertical-align: middle; */
    background-color: #1face5;
	border-radius: 42px;
	cursor: pointer;
}

.filebox input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}

.subCounselTitle {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 32px;
    margin: 0;
    padding: 5px 5px 5px 32px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #4dc3ff;
    border-radius: 100px;
}
.subCounselTitle:before {
    position: absolute;
    top: 8px;
    left: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    font-size: 12px;
    color: #4dc3ff;
    background-color: #fff;
    border-radius: 50%;
    content: "\e907";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.answerStart {
    position: relative;
    display: inline-flex;
    margin-left: auto;
    padding: 5px 10px;
    font-size: 12px;
    color: #ff3000 ;
    background-color: #fff;
    /* border: 2px solid #ff3000; */
    border-radius: 42px;
}
.answerEnd {
    position: relative;
    display: inline-flex;
    margin-left: auto;
    padding: 5px 10px;
    font-size: 12px;
    color: #4dc3ff;
    background-color: #fff;
    /* border: 2px solid #fff; */
    border-radius: 42px;
}

.tableCounselInBox {
    display: block;
    margin-top: 20px;
}

ul.contentList {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
	padding: 10px;
    box-sizing: border-box;
}
ul.contentList li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 24px;
    padding: 10px 5px 0;
    font-size: 14px;
    font-weight: bold;
    color: #505050;
    border-top: 1px solid #dbdbdb;
}
ul.contentList dt {
	position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 24px;
    padding: 10px 5px 0;
    font-size: 14px;
    font-weight: bold;
    color: #505050;
    border-top: 1px solid #dbdbdb;
}

ul.contentList dd {
	position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 32px;
    padding: 5px 0 10px;
    box-sizing: border-box;
}

ul.contentList dd:last-child {
	border-bottom: 1px solid #dbdbdb;
}

ul.contentList li .mobileInputBox {
    width: 100%;
}

.contentTitle {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 24px;
    padding: 0 5px;
    font-size: 14px;
    font-weight: bold;
    color: #505050;
}
.contentListBox {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 32px;
    padding: 5px 0 10px;
    box-sizing: border-box;
}

.contentListBox .selectBox {
    width: 100%;
}
.counselTitleRightBox {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.counselTitleRightBox span {
    position: relative;
    display: flex;
    align-items: center;
    height: 22px;
    margin-left: 5px;
    padding: 0 10px;
    color: #fff;
    background-color: #54b0ff;
    border-radius: 42px;
}

ul.newTeacherList {
	position: relative;
	display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
}

ul.newTeacherList li {
	position: relative;
	display: flex;
	margin: 10px 0;
	padding: 0 10px;
	text-align: center;
    border-top: none;
	box-sizing: border-box;
}

ul.newTeacherList li span.newImgBox {
	position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 140px;
    line-height: 1.2;
    color: #5d5d5d;
    background-color: #dedede;
    border-radius: 50%;
    aspect-ratio: 1;
    box-sizing: border-box;
    overflow: hidden;

}
ul.newTeacherList li span.newImgBox img {
	max-width: 150%;
    max-height: 150%;
}

ul.newTeacherList.checks input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;

	margin: -1px;
	overflow: hidden;
	clip:rect(0,0,0,0);
	border: 0;
}
ul.newTeacherList.checks input[type="radio"] + label {
    position: relative;
	display: flex;
    flex-direction: column;
	margin-right: 5px;
	padding-left: 27px;
	font-weight: 400;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
ul.newTeacherList.checks input[type="radio"] + label:before {
	content: '';
	position: absolute;
	left: -1px;
	top: 0;
	width: 24px;
	height: 24px;
	text-align: center;
	background: #fafafa;
	border: 1px solid #cacece;
	border-radius: 100%;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.05),
	inset 0px -15px 10px -12px rgba(0,0,0,0.05);
}
ul.newTeacherList.checks input[type="radio"] + label:active:before,
ul.newTeacherList.checks input[type="radio"]:checked + label:active:before {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
ul.newTeacherList.checks input[type="radio"]:checked + label:before {
	background: #E9ECEE;
	border-color: #adb8c0;
}
ul.newTeacherList.checks input[type="radio"]:checked + label:after {
	content: '';
	position: absolute;
	top: 5px;
	left: 4px;
	width: 14px;
	height: 14px;
	background: #99a1a7;
	border-radius: 100%;
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
}
.newTeacherCheckBox {
    margin-top: 10px;
}

.uploadBtn {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    min-width: 80px;
    height: 32px;
    padding: 0 20px;
    font-size: 14px;
    color: #fff;
    background-color: #5f6271;
    border: none;
    border-radius: 100px;
}

.uploadBtn:active {
	transform: scale(0.95);
}

.mobileBottomBtnBox {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 10px 0 20px;
}
.mobileBottomBtnBox button {
    margin: 0 2px;
}

.sendBtn {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    min-width: 80px;
    height: 32px;
    padding: 0 20px;
    font-size: 14px;
    color: #fff;
    background-color: #5f6271;
    border: none;
    border-radius: 100px;
}

.sendBtn:active {
	transform: scale(0.9);
}

.cancelBtn {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    min-width: 80px;
    height: 32px;
    padding: 0 20px;
    font-size: 14px;
    color: #fff;
    background-color: #b9bac2;
    border: none;
    border-radius: 100px;
}
.cancelBtn:active {
	transform: scale(0.9);
}

ul.scoreTableList,
ul.tuitionTableList,
ul.scheduleTableList,
ul.mysmsTableList,
ul.onlineReservationList {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
}
.mytuitionPopup ul.tuitionTableList {
	padding-top: 5px;
}
ul.scoreTableList li,
ul.tuitionTableList li,
ul.scheduleTableList li,
ul.mysmsTableList li,
ul.onlineReservationList li {
	margin: 5px 0;
	border: 1px solid #dedede;
	border-radius: 10px;

}
ul.scoreTableList li:nth-child(even),
ul.mysmsTableList li:nth-child(even),
.mytuitionPopup ul.tuitionTableList li:nth-child(even),
ul.onlineReservationList li:nth-child(even) {
	background-color: #f3fdff;
	border: 1px solid #22a3cf;
}
ul.scoreTableList li:nth-child(even) dd,
ul.mysmsTableList li:nth-child(even) dd,
.mytuitionPopup ul.tuitionTableList li:nth-child(even) dd,
ul.onlineReservationList li:nth-child(even) dd {
	background-color: #d7f4fa;
}
ul.mysmsTableList li:nth-child(even) .mysmsTitle {
	background-color: #e6feff;
	border-bottom: 1px solid #22a3cf;
}
dl.scoreList,
dl.tuitionList {
	position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
	font-size: 14px;
    background-color: #fff;
    border: 1px solid #dedede;
	border-top: 2px solid #4596e7;
    border-bottom: none;
    box-sizing: border-box;
}
dl.tuitionList {
	border-top: 1px solid #dedede;
}
dl.scoreList dt,
dl.tuitionList dt {
	position: relative;
    display: flex;
    flex-shrink: 0;
	justify-content: center;
    align-items: center;
    width: 80px;
    min-height: 32px;
    padding: 5px;
    font-weight: bold;
    color: #2d2d2d;
    background-color: #f5fbff;
    border-bottom: 1px solid #dedede;
}
dl.scoreList dd,
dl.tuitionList dd {
	position: relative;
    display: flex;
    flex-grow: 1;
    align-items: center;
    width: calc(100% - 80px);
    min-height: 52px;
    padding: 5px;
    border-bottom: 1px solid #dedede;
    box-sizing: border-box;
}
.scoreTitle {
	position: relative;
    display: block;
    max-width: 100%;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	text-decoration: underline;
	text-underline-position: under;
    box-sizing: border-box;
}
.reservationTitle {
	position: relative;
    display: block;
    max-width: 100%;
    padding: 0;
	text-decoration: underline;
	text-underline-position: under;
    box-sizing: border-box;
}
.myscorePopup a.tableLink {
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    padding: 0 25px;
    font-size: 14px;
    color: #fff;
    background-color: #363d43;
    border: none;
    border-radius: 52px;
}

.tableChartBox {
	position: relative;
	display: block;
	padding: 10px;
	box-sizing: border-box;
}

a.tuitionPayLink {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    padding: 0 25px;
    font-size: 14px;
    color: #fff;
    background-color: #363d43;
    border: none;
    /* border-radius: 52px; */
}
a.tuitionPayLink:active {
	transform: scale(0.98);
}

.tuitionTableBox {
	position: relative;
	display: block;
	padding: 10px;
	box-sizing: border-box;
}
.tuitionTableBox table {
	table-layout: fixed;
}

.tuitionTableBox th {
	position: relative;
	padding: 7px 3px;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	background-color: #3eaae1;
	/*
	border-top: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
	*/
}
.tuitionTableBox td {
	position: relative;
	height: 32px;
	padding: 5px 3px;
	text-align: right;
	font-size: 12px;
	font-weight: bold;
	background-color: #fff;
	border-bottom: 1px solid #dedede;
}
.tuitionTableBox td:first-child {
	text-align: center;
}
.tuitionTableTitle {
	position: relative;
    display: block;
    width: 100%;
    padding: 0;
	text-align: left;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.tuitionTableBox .checks input[type="checkbox"] + label {
	min-width: 21px;
	height: 22px;
	padding: 0;
	background-color: transparent;
	border: none;
	box-shadow: none;
	text-indent: -9999px;
}
.tuitionTableBox .checks input[type="checkbox"] + label:before {
	content: '';
    display: inline-block;
    width: 21px;
    height: 21px;
    line-height: 21px;
    margin: 0 5px 0 0;
    text-align: center;
    vertical-align: middle;
    background: #fafafa;
    border: 1px solid #cacece;
    border-radius: 3px;
    box-shadow: 0px 1px 2px rgb(0,0,0,0.05), inset 0px -15px 10px -12px rgb(0,0,0,0.05);
    -webkit-appearance: checkbox;
    cursor: pointer;
}
.tuitionTableBox .checks input[type="checkbox"]:checked + label:before {
	content: '\e907';
	font-size: 14px;
    color: #1d82d0;
    /* text-shadow: 1px 1px #fff; */
	text-indent: 0;
    background: #fff;
    border-color: #1d82d0;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
    font-family: 'icomoon' !important;
    /* font-family: 'fontAwesome'; */
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    cursor: pointer;
}

.paymentBtn {
	position: relative;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    min-width: 80px;
    height: 32px;
    padding: 0 20px;
    font-size: 14px;
    color: #fff;
    background-color: #5f6271;
    border: none;
    border-radius: 100px;
}
.paymentBtn:active {
	transform: scale(0.9);
}

.askBtn {
	position: relative;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    min-width: 80px;
    height: 32px;
    padding: 0 20px;
    font-size: 14px;
    color: #fff;
    background-color: #5f6271;
    border: none;
    border-radius: 100px;
}

.onlineReservationTitle {
	position: relative;
	display: block;
	padding-left: 25px;
	font-weight: normal;
}
.onlineReservationTitle:before {
	position: absolute;
	z-index: 20;
    top: 50%;
    left: -13px;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    font-size: 16px;
    color: #e73b00;
    border-radius: 50%;
    transform: translate(0, -50%);
    content: "\e905";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
	-webkit-animation: linear 1.2s infinite 0s alarmBox;
	-moz-animation: linear 1.2s infinite 0s alarmBox;
	animation: linear 1.2s infinite 0s alarmBox;
}
@-webkit-keyframes alarmBox {
 	0%   { opacity: 0; }
 	90%  { opacity: 0.5; }
 	100% { opacity: 1;}
}
@-moz-keyframes alarmBox {
 	0%   { opacity: 0; }
 	90%  { opacity: 0.5; }
 	100% { opacity: 1; }
}
@-o-keyframes alarmBox {
 	0%   { opacity: 0; }
 	90%  { opacity: 0.5; }
 	100% { opacity: 1; }
}
@keyframes alarmBox {
 	0%   { opacity: 0; }
 	90%  { opacity: 0.5; }
 	100% { opacity: 1; }
}
.onlineReservationTitle:after {
	position: absolute;
	z-index: 10;
    top: 50%;
    left: -13px;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background-color: #fff;
    border-radius: 50%;
    transform: translate(0, -50%);
    content: "";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

/* 240709 실시간 알림 */
.alarmListBox {
  position: relative;
  display: block;
  min-height: 10px;
  margin: 15px;
}
.alarmListDateBox {
	position: relative;
	display: grid;
	grid-template-columns: 100%;
	gap: 10px 0;
}
/*
.alarmListInBox {
  position: relative;
  display: block;
  margin: 20px 80px 20px 0;
}
.alarmListInBox:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: "";
}
*/
.alarmListInBox {
	position: relative;
    display: flex;
    padding: 5px;
    background-color: #7ec4ff;
    /* border: 1px solid #6ab3f1; */
    border-radius: 20px 10px 10px 20px;
}
.alarmListBox .alarmListInBox:nth-child(2n) {
	background-color: #4ba6f2;
    /* border: 1px solid #3993de; */
}
.alarmListInBox.unChecked,
.alarmListInBox.unChecked:nth-child(2n) {
	background-color: #f0f0f0;
    /* border: 1px solid #dedede; */
}
.alarmListInBox.unChecked:before {
	position: absolute;
    z-index: 30;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 64px;
    line-height: 64px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #ff9595;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 19px 10px 10px 19px;
    content: "미확인";
}
.alarmListInBox.unChecked:after {
	position: absolute;
    z-index: 30;
    top: 50%;
    left: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 20px;
    color: #ff9595;
	transform: translate(40px, -55%);
    content: "\e92a";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
	-webkit-animation: linear 1s infinite 0s clickBox;
	-moz-animation: linear 1s infinite 0s clickBox;
	animation: linear 1s infinite 0s clickBox;
}
@-webkit-keyframes clickBox {
 	0%   { transform: translate(40px, -55%) scale(1.0); }
 	90%  { transform: translate(40px, -55%) scale(1.2); }
 	100% { transform: translate(40px, -55%) scale(1.0); }
}
@-moz-keyframes clickBox {
 	0%   { transform: translate(40px, -55%) scale(1.0); }
 	90%  { transform: translate(40px, -55%) scale(1.2); }
 	100% { transform: translate(40px, -55%) scale(1.0); }
}
@-o-keyframes clickBox {
 	0%   { transform: translate(40px, -55%) scale(1.0); }
 	90%  { transform: translate(40px, -55%) scale(1.2); }
 	100% { transform: translate(40px, -55%) scale(1.0); }
}
@keyframes clickBox {
 	0%   { transform: translate(40px, -55%) scale(1.0); }
 	90%  { transform: translate(40px, -55%) scale(1.2); }
 	100% { transform: translate(40px, -55%) scale(1.0); }
}
.alarmIcon {
  position: absolute;
  top: 0;
  left: -36px;
  width: 32px;
  height: 32px;
}
.alarmIcon img {
  width: 32px;
}
.alarmContentBox {
  position: relative;
  display: block;
  width: calc(100% - 100px);
  min-height: 55px;
  padding: 10px;
  text-align: left;
  font-size: 12px;
  color: #2d2d2d;
  background-color: #fff;
  border-radius: 14px 10px 10px 14px;
}

.alarmContent {
  position: relative;
  display: block;
}
.alarmListInBox.unChecked {
	cursor: pointer;
}
.alarmListInBox.unChecked .alarmContent {
	position: relative;
    display: -webkit-box;
    height: 32px;
    min-height: 32px;
    line-height: 1.5;
    text-align: left;
    color: #9d9d9d;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
	box-sizing: border-box;
}
.alarmInMore {
    position: relative;
    display: block;
	width: 100%;
	cursor: pointer;
}
.alarmContentBox a {
  color: #fff;
}
/*
.alarmListInBox:nth-child(2n-1) .alarmContentBox {
  color: #fff;
  background-color: #04c1bc;
}
.alarmListInBox:nth-child(2n-1) .alarmContentBox.unChecked {
  color: #9d9d9d;
  background-color: #f0f0f0;
}
*/

.alarmTime {
  position: absolute;
  right: 10px;
  bottom: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 79px;
  line-height: 1.3;
  font-size: 12px;
  text-align: left;
  color: #e5f3ff;
}
.alarmListInBox.unChecked .alarmTime {
	color: #b4b4b4;
}
.alarmDate {
  position: relative;
  display: block;
  height: 24px;
  line-height: 24px;
  margin: 40px 0 15px;
  text-align: center;
  font-size: 14px;
  color: #9d9d9d;
}
.replyBox {
    position: absolute;
    z-index: 10;
    top: 0;
    right: -98px;
    color: #fff;
}

.replyName {
    position: relative;
    display: block;
    width: 72px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}
.alarmListInBox.unChecked .replyName {
	color: #9d9d9d;
}




@media all and (min-width: 360px) {
	.monthPointTitle {
        display: inline-block;
    }
	.mobileSearchBox {
		margin-left: auto;
    }
	.mynoticePopup .mobileSearchBox,
    .counselPopup .mobileSearchBox,
	.liveAlarmPopup .mobileSearchBox {
		margin-left: 0;
	}
	.pointTitle {
		display: none;
	}
	ul.pointList {
        font-size: 15px;
    }
	/*
	.pointListTop {
        font-size: 14px;
    }
	*/
	/*
	.pointDate {
        font-size: 14px;
    }
	*/
    /*
    .pointListBottom {
        font-size: 13px;
    }
    */
	.mynoticePopup .textInput,
    .counselPopup .textInput,
	liveAlarmPopup .textInput {
        width: 100%;
    }
}
@media all and (min-width: 460px) {
    .mynoticePopup .mobileSearchBox .selectBox,
    .conselPopup .mobileSearchBox .selectBox {
		min-width: auto;
        display: inline-block;
    }
	.pageBox .selectBox {
        display: inline-block;
    }
    .attendanceInfoBox {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .attendanceInfoDate {
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        width: 100px;
        margin-right: 10px;
    }
    .attendanceContent {
        width: 100%;
    }
}

@media all and (min-width: 500px) {
    .attendanceTitle {
       display: inline-block;
    }
    .mobileAttendanceTitle {
        display: none;
    }
    .attendanceNoticeBtn {
        min-width: 80px;
    }
}

@media all and (min-width: 620px) {
	dl.pointInfoList,
	dl.tableInfoList {
		display: grid;
		grid-template-columns: 75px auto 75px auto;
	}
	dl.pointInfoList dd,
	dl.tableInfoList dd  {
		width: 100%;
	}
	.portfolioPopup ul.tableList {
        display: grid;
        grid-template-columns: repeat(2, minmax(45%, auto));
        gap: 15px;
    }
	.portfolioPopup ul.tableList li {
		margin: 0;
	}
    /*
	.portfolioPopup ul.tableList li:nth-child(even) {
        background-color: transparent;
    }
	.portfolioPopup ul.tableList li:nth-child(4n-3) {
		border-right: none;
		border-radius: 10px 0 0 10px;
    }
	.portfolioPopup ul.tableList li:nth-child(4n-2) {
		border-left: none;
		border-radius: 0 10px 10px 0;
    }
	.portfolioPopup ul.tableList li:nth-child(4n-1) {
        background-color: #f9f9f9;
		border-right: none;
		border-radius: 10px 0 0 10px;
    }
	.portfolioPopup ul.tableList li:nth-child(4n) {
        background-color: #f9f9f9;
		border-left: none;
		border-radius: 0 10px 10px 0;
    }
    */
	.tableAssignmentBox {
		position: relative;
		display: flex;
		align-items: center;
	}
	.assignmentListBox {
		width: calc(100% - 300px);
	}
	.assignmentUploadBox {
		flex-direction: column;
		width: 280px;
		margin-left: auto;
	}
	.assignmentUploadBox .uploadBtn {
		width: 100%;
	}
	.assignmentUploadBox .selectBox {
		width: 100%;
		margin-left: 0;
		margin-top: 10px;
	}
	.filebox label {
        position: absolute;
        top: 2px;
    }
}

/* 240809 학생설문조사 */

a.pollJoinLink,
a.rejoinLink {
	position: relative;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    min-width: 80px;
    height: 32px;
    padding: 0 20px;
    font-size: 13px;
    color: #0080ff;
    background-color: #fff;
    border: 1px solid #4fa2e8;
    border-radius: 100px;
}
a.rejoinLink {
	color: #4CAF50;
    border: 1px solid #4CAF50;
}
a.pollJoinLink:active,
a.rejoinLink:active {
	transform: scale(0.95);
}

/*-------------------------------*/
/*      responsive table         */
/*-------------------------------*/
#no-more-tables table > thead > tr > th {
	text-align: center;
	color: #2d2d2d;
    background-color: #f0f0f0;
	border-top: 2px solid #2d2d2d;
	borer-bottom: 1px solid #dedede;
}

.table-condensed thead>tr>th,
.table-condensed tbody>tr>th,
.table-condensed tfoot>tr>th,
.table-condensed thead>tr>td,
.table-condensed tbody>tr>td,
.table-condensed tfoot>tr>td {
	padding: 10px;
	vertical-align: middle;
}

.table-condensed tbody>tr>td {
	text-align: center;
	/* border-left: 1px solid #ddd; */
}
/*
.table-condensed tbody>tr>td:last-child {
	border-right: 1px solid #ddd;
}
*/
.table-condensed tbody>tr>td:first-child {
	text-align: left;
}

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
	background-color: transparent;
}
.table-striped>tbody>tr:nth-child(even)>td,
.table-striped>tbody>tr:nth-child(even)>th {
	background-color: #f9f9f9;
}

.table thead>tr>th,
.table tbody>tr>th,
.table tfoot>tr>th,
.table thead>tr>td,
.table tbody>tr>td,
.table tfoot>tr>td {
	border-top: none;
	border-bottom: 1px solid #ddd;
}

.table tfoot>tr>td {
	text-align: right;
	background-color: #f1fbff;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-radius: 0 0 20px 20px;
}

#no-more-tables .table {
	margin-bottom: 0;
	font-size: 14px;
}


@media only screen and (max-width: 800px) {
	#no-more-tables thead tr {
		position: relative;
		top: 0;
		left: 0;
	}
	#no-more-tables thead tr th {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	/*
	#no-more-tables table thead tr th:first-child {
		position: relative;
		top: 0;
		left: 0;
		text-align: left;
		background-color: #ededed;
		border: none;
		border-left: none;
		border-radius: 0;
	}
	*/
	#no-more-tables tr {
		margin-top: -1px;
		border: 1px solid #ddd;
	}
	#no-more-tables td {
		padding-left: 100px;
	}
	#no-more-tables td:before {
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		width: 85px;
		height: 100%;
		padding: 0 10px;
		background-color: #fff;
		border-right:  1px solid #ddd;
	}
	#no-more-tables tbody tr:nth-child(even) td:before {
		background-color: #f9f9f9;
	}
	#no-more-tables tfoot td {
		width: 100%;
	}
	#no-more-tables tfoot td:before {
		background-color: #f9fdff;
	}
}







/* 20250313 키패드 수정 상단 값과 중복일 수 있지만 유지보수를 위해 추가로 작성해 적용 함. */
.mobileKeypaddBox {
  position: relative;
  min-width: 320px;
  background-color: #45699c;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mobileKeypaddTitle {
  height: 50px;
  font-size: 22px !important;
  /* margin-bottom: 23px; */
  order: 1;
}
.mobileKeypaddBox .mobileKeypaddInputBox {
  width: 100%;
  /* max-width: 300px; */
  margin-bottom: 10px;
  padding: 0 10px;
  order: 2;
}

.padd-btn {
  display: flex;
  flex-direction: column;
  order: 2;
}
.keypaddMiddleBox {
  position: relative;
  width: 100%;
  /* max-width: 300px; */
  padding: 0 10px;
  order: 1;
}

.mobileKeypaddBox .mobileKeypaddContentBox {
  padding: 10px;
  height: auto;
  order: 2;
}


/* 가로모드일 경우 */

@media only screen and (orientation: landscape) and (min-width: 768px) {
  .padd-btn {
    display: flex;
    flex-direction: row;
    order: 2;
  }
  .mobileKeypaddBox .mobileKeypaddInputBox {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    padding: 0 20px;
}
.mobileKeypaddBox .mobileKeypaddContentBox {
  padding: 0px 15px 15px 15px;
  height: 100%;
  align-items: flex-start;
}
.keypaddMiddleBox {
  width: 50%;
}
.mobileKeypaddBox .mobileKeypaddContentBox {
  padding: 15px;
  height: auto;
  width: 50%;
}

.mobileKeypaddBox .keypaddInputTitle {
  font-size: 18px;
  height: 62px;
}
.attendanceCheckBtn {
  font-size: 26px;
  height: 100%;
  border-radius: 10px;
}
.mobileKeypaddBox .keypaddInputTitle {
  font-size: 18px;
  height: 62px;
  width: 100%;
}

.mobileKeypaddBox .mobileKeypaddInputBox input {
  position: relative;
  display: flex;
  width: 90%;
  height: 40px;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  padding: 0 10px;
  border-radius: 5px;
}
ul.keypaddBtnList {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(20%, auto));
  gap: 2px;
  padding: 2px;
  border: 3px solid #fff;
  border-radius: 10px;
  box-sizing: border-box;
}
}






/* 메인 레이어 */
.m-main-layer-box {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 53px);
    width: 95%;
    height: 277px;
    background: rgba(0,0,0, .8);
    border-radius: 16px;
    z-index: 9999;
}
.m-main-layer-box .inner-box {
    overflow: hidden;
    height: 100%;
}
.inner-box-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px 6px 16px;
}
.inner-box-header h2 {
    color: #6bb3ff;
    font-size: 20px;
    font-weight: 400;
}
.inner-box-header .btn {
    padding: 1px 15px;
    font-size: 26px;
    font-weight: 600;
    border: 0;
    border-radius: 8px;
    color: #fff;
    line-height: 1;
}
.btn-layer-box-close {
    background: #44a9ff;
    font-size: 20px !important;
}
/* .btn-layer-box-close:before {content: "\ea0f";} */

/* .btn-layer-box-plus {background: #44a9ff;} */
/* .btn-layer-box-plus:before { content: "\ea0a";} */

.inner-box-body {height: 100%;}

.layer-box-body {height: 100%;}
.layer-box-list {
    padding: 10px 16px 10px 16px;
    height: 75%;
    overflow: auto;
    width: 100%;
}
.layer-box-list .list-item { color: #f5f5f5; font-size: 16px; margin-bottom: 20px;}
.layer-box-list .list-item h3 {
    font-weight: 600;
    color: #fff;
    font-size: 18px;
}
.layer-box-list .list-item ul {}
.layer-box-list .list-item li {}


/* //메인 레이어 */