@charset "utf-8";

/* boonsoo 230105 */
/*-------------------------------*/
/*            Loading            */
/*-------------------------------*/
.loadingBg {
	position:fixed;
	z-index: 9999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .6);
	display: none;
}
.subNavList li:nth-child(even) {
	background-color: #63687f;
}

.loadingBox {
	position: absolute;
	z-index: 20;
	top: 50%;
	left: 50%;
	width: 100px;
	min-height: 100px;
	margin-top: -50px;
	margin-left: -50px;
	border-top: 7px solid transparent;
	border-right: 7px solid #fff;
	border-bottom: 7px solid #fff;
	border-left: 7px solid #fff;
	border-radius: 50%;
	-webkit-animation: linear 0.8s infinite 0s loadingBox;
	-moz-animation: linear 0.8s infinite 0s loadingBox;
	animation: linear 0.8s infinite 0s loadingBox;
}
@-webkit-keyframes loadingBox {
 0%   { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}
@-moz-keyframes loadingBox {
 0%   { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}
@-o-keyframes loadingBox {
 0%   { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}
@keyframes loadingBox {
 0%   { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}
.loadingBox span {
	display: block;
	text-indent: -9999px;
}
.loadingImgBox {
    position: absolute;
    z-index: 30;
    top: 50%;
    left: 50%;
    width: 50px;
    min-height: 50px;
    margin-top: -25px;
    margin-left: -25px;
}
.loadingImgBox img {
    width: 50px;
}
.loadingTextBox {
    position: absolute;
    z-index: 30;
    top: 50%;
    left: 50%;
    width: 100px;
    margin-top: 75px;
    margin-left: -35px;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
}

/* ------------------------- */
/*        common             */
/* ------------------------- */

/* ------------------------- */
/*      popup layer          */
/* ------------------------- */
.overlay {
	position: fixed;
	z-index: 100;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,0.6);
	display: none;
}
.popupLayer {
	position: fixed;
	z-index: 110;
	top: 50%;
	left: 50%;
	width: 500px;
	min-height: 600px;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0,0,0,0.8);
	transform: translate(-50%, -50%);
	overflow: hidden;
	display: none;
}

.pointLayer {
	min-height: 200px;
}

.layerHeader {
	position: relative;
	display: flex;
	align-items: center;
	height: 52px;
	padding: 0 5px 0 15px;
	font-size: 16px;
	font-weight: bold;
	color: #000;
	background-color: #fff;
	border-bottom: 1px solid #dedede;
	box-sizing: border-box;
}

.popupLayerTitle {
    position: relative;
    display: flex;
    align-items: center;
	width: 100%;
    height: 42px;
	padding-left: 15px;
    font-size: 15px;
    font-weight: bold;
    color: #000;
    background-color: #f9f9f9;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom: 1px solid #dedede;
	box-sizing: border-box;
}

.layerCloseBtn {
	position: relative;
	display: flex;
	width: 42px;
	height: 42px;
	margin-left: auto;
	background-color: transparent;
	border: none;
}
.associatedSearchLayer .layerCloseBtn {
	position: absolute;
	z-index: 10;
	top: 5px;
	right: 5px;
	width: 24px;
	height: 24px;
}
.layerCloseBtn span {
	display: block;
	text-indent: -9999px;
}
.layerCloseBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 42px;
	height: 42px;
	font-size: 18px;
	color: #5d5d5d;
	content: "\e914";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}
.associatedSearchLayer .layerCloseBtn:before {
	width: 24px;
	height: 24px;
	font-size: 14px;
	color: #9d9d9d;
}

.popupLayerInputBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 32px;
	margin: 15px;
	box-sizing: border-box;
}

.popupLayerInputBox input,
.popupLayerInputBox select,
.popupLayerInputBox button {
	margin: 0 5px;
}

.layerContent {
	position: relative;
	display: block;
	width: 100%;
	height: calc(100% - 52px);
	overflow: auto;
	box-sizing: border-box;
}

.contentBottomBtnBox .layerContent,
.popupLogin .layerContent {
	height: auto;
}

.layerContent p {
	line-height: 1.5;
	padding: 20px;
	font-size: 15px;
	box-sizing: border-box;
}

.contentBottomBtnBox .layerContent p,
.popupLogin .layerContent p {
	text-align: center;
}

.modifyAskPopupLayer {
	position: fixed;
	z-index: 50;
	right: 30px;
	bottom: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 200px;
	min-height: 50px;
	line-height: 1.5;
	padding: 10px;
	font-size: 15px;
	color: #fff;
	background-color: #5f6271;
	border-radius: 15px;
	box-shadow:  1px 25px 15px -15px rgba(0,0,0,0.7);
}
.recentInquiryListPopupLayer {
	position: absolute;
    z-index: 90;
    top: 45px;
    left: 0;
    width: 400px;
    min-height: 50px;
    padding: 0;
    background-color: #fff7f7;
    border: 1px solid #3d474f;
    box-shadow: 3px 3px 5px rgb(0,0,0,0.2);
    box-sizing: border-box;
}
.recentInquiryTitle {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 28px;
    padding-left: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #757da1;
    border-bottom: 1px solid #3d474f;
    box-sizing: border-box;
}
.inquiryCloseBtn {
	position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
}
.inquiryCloseBtn span {
    display: block;
    text-indent: -9999px;
}
.inquiryCloseBtn:before {
	position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    font-size: 18px;
    color: #fff;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.modifyCloseBtn,
.counselCloseBtn {
	position: absolute;
    z-index: 10;
    top: -22px;
    right: -22px;
    width: 28px;
    height: 28px;
	background-color: #40424a;
	border-radius: 50%;
}
.modifyCloseBtn span,
.counselCloseBtn span {
	display: block;
	text-indent: -9999px;
}
.modifyCloseBtn:before,
.counselCloseBtn:before {
	position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    font-size: 18px;
    color: #fff;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.popupLayerContentBox {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
.modifyAskPopupLayer .popupLayerContentBox {
	display: block;
	text-align: center;
}
.popupLayerContentBox a {
	position: relative;
	display: flex;
	/* justify-content: center; */
	width: 100%;
	padding: 3px 0;
}
.layerViewBtn {
	flex-grow: 1;
	height: 32px;
    margin: 0 3px;
    padding: 0 15px;
    color: #fff;
    background-color: #40424a;
    border: none;
}
.associatedSearchLayer {
	position: absolute;
    z-index: 80;
    top: 34px;
    left: 0;
    min-width: 280px;
    min-height: 50px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.05);
    border-radius: 10px;
    box-sizing: border-box;
}
ul.searchLayerList {
	position: relative;
	display: block;
}
ul.searchLayerList li {
	padding: 5px;
	box-sizing: border-box;
}
ul.searchLayerList li:hover {
	background-color: #f0f0f0;
    border-radius: 0;
}

ul.popupLayerList {
	position: absolute;
    z-index: 9999;
    top: 50%;
    left: 50%;
    display: flex;
    flex-wrap: wrap;
    width: 1080px;
    transform: translate(-50%, -50%);
}
ul.popupLayerList li {
	display: flex;
	flex-shrink: 0;
	width: 360px;
	padding: 2px;
	box-sizing: border-box;
}

.onlinePopupLayer {
	position:relative;
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	width: 100%;
	min-height:350px;
	background-color: #fff;
	border:1px solid #000;
	box-shadow:#666 0px 0px 10px;
}
.onlineContentBox {
	position: relative;
	display: block;
	width: 100%;
	height: 308px;
	color: #fff;
	background-color: #363c3e;
}
/*
.blueBox .onlineContentBox {
	background-color: #20bbc5;
	color: #fff;
}
.darkBox .onlineContentBox {
	background-color: #363c3e;
	color: #fff;
}
.greenBox .onlineContentBox {
	background-color: #3c9060;
	color: #fff;
}
*/
.onlineContentInBox {
	line-height: 1.5;
	padding: 10px;
	text-align: left;
}
.onlineContentInBox img {
	max-width: 100%;
	border: 3px solid #fff;
}
/*
.popupImgBox .onlineContentInBox {
	padding: 0;
}
*/
.onlineBottomBox {
	position: relative;
	display: flex;
	align-items: center;
	height: 42px;
	border-top: 1px solid #dedede;
}
.mainPopupLayer .onlineBottomBox {
    background-color: #181d3d;
    border-top: 1px solid #404983;
}
.onlineCloseBtn {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 30px;
    height: 32px;
    margin: 0 5px;
    margin-left: auto;
    font-size: 12px;
    color: #fff;
    background-color: #0b0f29;
    border: none;
    border-radius: 42px;
}
.studentPopupLayer {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100px;
    padding: 10px 0 0;
    background-color: #fff;
    border: 1px solid #000;
    box-shadow: 3px 3px 5px rgb(0 0 0 / 10%);
    box-sizing: border-box;
}

.studentLayerCloseBtn {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
}

.studentPopupTitle {
	position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 28px;
    padding-left: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #000;
    background-color: #f9f9f9;
    border-bottom: 1px  solid #acacac;
	box-sizing: border-box;
}
.studentLayerCloseBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 28px;
    font-size: 18px;
    color: #000;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.studentLayerCloseBtn span {
	display: block;
	text-indent: -9999px;
}
ul.studentMenuList {
	position: relative;
	display: block;
	margin-top: 18px;
}
ul.studentMenuList li {
	position: relative;
	border-bottom: 1px solid #dedede;
}
ul.studentMenuList li:hover {
	background-color: #e8f7ff;
}
ul.studentMenuList li:last-child {
	border-bottom: none;
}
ul.studentMenuList li a {
	display: block;
	padding: 5px 10px;
	text-align: left;
}

.pointPopupLayer {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 180px;
	min-height: 180px;
    padding: 0;
    background-color: #4f5b60;
    border: 1px solid #000;
    box-shadow: 3px 3px 5px rgb(0 0 0 / 20%);
    box-sizing: border-box;
}
.pointLayerCloseBtn {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
}
.pointLayerCloseBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 28px;
    font-size: 18px;
    color: #fff;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.pointLayerCloseBtn span {
	display: block;
	text-indent: -9999px;
}

.pointPopupTitle {
	position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 28px;
    padding-left: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #31424a;
    border-bottom: 1px  solid #000;
	box-sizing: border-box;
}

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

.pointLayerBox select {
	width: 100%;
	height: 32px;

}

.pointRepeatBox {
	position: relative;
	display: block;
	text-align: center;
	margin-bottom: 5px;
	font-size: 12px;
	color: #fff;
}

.pointRepeatBox .selectBox {
	width: calc(100% - 60px);
}

.pointTextareaBox {
	position: relative;
    display: block;
	width: 100%;
    height: 62px;
    margin: 0 auto;
	padding: 5px;
    text-align: left;
    color: #000;
    background-color: #e6fbff;
    border: 1px solid #acacac;
	border-radius: 5px;
	box-sizing: border-box;
}

.pointCotentBox {
	margin-bottom: 5px;
}
.pointCotentBox textarea::placeholder {
	line-height: 48px;
    font-size: 12px;
    color: #acacac;
}
.pointCotentBox textarea:-ms-input-placeholder {
	line-height: 48px;
    font-size: 12px;
    color: #acacac !important;
}
.pointItemBox {
	position: relative;
	display: block;
	text-align: center;
}
.vocabPopupLayer {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 250px;
	min-height: 180px;
    padding: 0;
    background-color: #f5fbff;
    border: 1px solid #3d474f;
    box-shadow: 3px 3px 5px rgb(0 0 0 / 20%);
    box-sizing: border-box;
}
.vocabLayerCloseBtn {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
}
.vocabLayerCloseBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 28px;
    font-size: 18px;
    color: #fff;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.vocabLayerCloseBtn span {
	display: block;
	text-indent: -9999px;
}
.vocabPopupTitle {
	position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 28px;
    padding-left: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #2877af;
    border-bottom: 1px  solid #3d474f;
	box-sizing: border-box;
}
.vocabLayerBox {
	position: relative;
	display: block;
	padding: 10px;
	box-sizing: border-box;
}
.vocabListTable {
	position: relative;
	display: block;
	border-top: 2px solid #266896;
	border-right: 1px solid #acacac;
	border-left: 1px solid #acacac;
}
.vocabListTable td {
	height: 28px;
	padding: 2px 5px;
	text-align: center;
	font-size: 12px;
	color: #000;
	background-color: #fff;
	border-bottom: 1px solid #acacac;
}
.vocabListTable table > tbody > tr:nth-child(even) > td {
	background-color: #f0f0f0;
}

.writtenPopupLayer {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 350px;
	height: 250px;
    padding: 0;
    background-color: #fcf2ff;
    border: 1px solid #3d474f;
    box-shadow: 3px 3px 5px rgb(0 0 0 / 20%);
    box-sizing: border-box;
}
.writtenLayerCloseBtn {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
}
.writtenLayerCloseBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 28px;
    font-size: 18px;
    color: #fff;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.writtenLayerCloseBtn span {
	display: block;
	text-indent: -9999px;
}

.writtenPopupTitle {
	position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 28px;
    padding-left: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #7037af;
    border-bottom: 1px  solid #3d474f;
	box-sizing: border-box;
}

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

.writtenContentBox {
	position: relative;
	display: block;
	padding: 10px;
	height: 200px;
	line-height: 1.5;
	font-size: 13px;
	color: #2d2d2d;
	background-color: #fffef5;
	border: 1px solid #acacac;
	overflow-y: auto;
}

.taskScorePopupLayer {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 350px;
	height: 250px;
    padding: 0;
    background-color: #f3fffe;
    border: 1px solid #3d474f;
    box-shadow: 3px 3px 5px rgb(0 0 0 / 20%);
    box-sizing: border-box;
}
.taskScoreLayerCloseBtn {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
}
.taskScoreLayerCloseBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 28px;
    font-size: 18px;
    color: #fff;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.taskScoreLayerCloseBtn span {
	display: block;
	text-indent: -9999px;
}
.taskScorePopupTitle {
	position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 28px;
    padding-left: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #1a998c;
    border-bottom: 1px  solid #3d474f;
	box-sizing: border-box;
}
.taskScoreLayerBox {
	position: relative;
	display: block;
	padding: 10px;
	box-sizing: border-box;
}
.taskScoreListTable {
	position: relative;
	display: block;
	max-height: 200px;
	line-height: 1.5;
	font-size: 13px;
	color: #2d2d2d;
	background-color: #fff;
	border-top: 2px solid #000;
	border-bottom: 1px solid #acacac;
	overflow-y: auto;
}
.taskScoreListTable td {
	padding: 3px;
	border-bottom: 1px solid #acacac;
}
.taskScoreListTable td:last-child {
	text-align: center;
}
.taskScoreListTable > table > tbody > tr:nth-child(even) > td {
	background-color: #f9f9f9;
}
.taskScoreListTable > table > tbody > tr:last-child > td {
	border-bottom: none;
}
.taskScoreBtn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 28px;
	color: #fff;
	background-color: #269b8f;
	border: 1px solid #218479;
	border-radius: 5px;
}

.messagePopupLayer {
	position: absolute;
	z-index: 100;
	top: -1px;
	left: 0;
	width: 197px;
	min-height: 218px;
	background-color: #596675;
	border: 1px solid #2d2d2d;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.messagePopupTitle {
	position: relative;
	display: flex;
	align-items: center;
	height: 32px;
	padding: 0 10px;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	background-color: #33383e;
	border-bottom: 1px solid #858e98;
	box-sizing: border-box;
}
.messagePopupContent {
	position: relative;
	display: block;
	width: 100%;
	max-height: 152px;
	padding: 10px;
	line-height: 1.5;
	font-size: 13px;
	color: #f9f9f9;
	box-sizing: border-box;
	overflow: auto;
}
.messageCheckBtn {
	position: absolute;
	z-index: 10;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 197px;
	height: 32px;
	font-size: 14px;
	color: #fff;
	background-color: #275083;
	border-top: 1px solid #1b467b;
}

.myNoticePopupLayer {
	position: absolute;
	z-index: 100;
	top: 0;
	right: 0;
	left: 0;
	height: 165px;
	background-color: #fff;
	border: 1px solid #000;
	box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
}
.myNoticeTitle {
	position: relative;
    display: flex;
	justify-content: center;
    align-items: center;
    width: 100%;
    height: 28px;
    padding-left: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #6b46af;
    border-bottom: 1px solid #3d474f;
    box-sizing: border-box;
}
.myNoticeLayerCloseBtn {
	position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 24px;
    height: 28px;
}
.myNoticeLayerCloseBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 28px;
    font-size: 18px;
    color: #fff;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.myNoticeLayerCloseBtn span {
	display: block;
	text-indent: -9999px;
}
.myNoticePopupTableBox {
	position: relative;
	display: block;
	max-height: 103px;
	padding: 5px;
	box-sizing: border-box;
}
.myNoticeTable {
	position: relative;
	display: block;
	max-height: 124px;
	overflow: auto;
	border: 1px solid #dedede;
	box-sizing: border-box;
}
.myNoticeTable td {
	height: 32px;
	line-height: 1.5;
	padding: 5px;
	border-bottom: 1px solid #dedede;
	box-sizing: border-box;
}
.myNoticeTable tr:last-child > td {
	border-bottom: none;
}
.myNoticeTable > table > tbody > tr:nth-child(even) > td {
    background-color: #f9f5ff;
}
.myNoticeViewBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 28px;
    color: #fff;
    background-color: #6b46af;
    border: 1px solid #432f68;
    border-radius: 5px;
}

/* 230426 레이어 팝업 추가 */
.finishPopupLayer {
	position: absolute;
	z-index: 100;
	top: 50%;
	left: 50%;
	width: 450px;
	min-height: 180px;
	background-color: #fff;
	border: 1px solid #2d2d2d;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.finishCloseBtn {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
}
.finishCloseBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 28px;
    font-size: 18px;
    color: #fff;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.finishCloseBtn span {
	display: block;
	text-indent: -9999px;
}
.finishPopupTitle {
	position: relative;
	display: flex;
	align-items: center;
	height: 32px;
	padding: 0 10px;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	background-color: #747ba0;
	border-bottom: 1px solid #3f4251;
	box-sizing: border-box;
}
.finishPopupContent {
	position: relative;
	display: block;
	width: 100%;
	min-height: 100px;
	padding: 10px;
	line-height: 1.5;
	box-sizing: border-box;
}
.finishPopupTopBox,
.finishPopupMiddleBox,
.finishPopupBottomBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 42px;
}
.finishPopupTopBox {
	background-color: #f9f9f9;
	border: 1px solid #dedede;
}
.finishPopupMiddleBox {
	border-bottom: 1px dashed #dedede;
}
.manageTypeBox {
	position: relative;
	display: flex;
	align-items: center;
	height: 42px;
	padding: 0 10px;
	/*
	background-color: #f9f9f9;
	border: 1px solid #dedede;
	*/
}
.finishCheckBtn,
.reservationCheckBtn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 120px;
	height: 32px;
	font-size: 12px;
	color: #fff;
	background-color: #275083;
	border: none;
	border-radius: 42px;
}

.checkedClassPopupLayer {
	position: absolute;
	z-index: 100;
	top: 50%;
	left: 50%;
	width: 300px;
	min-height: 150px;
	background-color: #fff;
	border: 1px solid #2d2d2d;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.checkedClassCloseBtn {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
}
.checkedClassCloseBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 28px;
    font-size: 18px;
    color: #fff;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.checkedClassCloseBtn span {
	display: block;
	text-indent: -9999px;
}
.checkedClassPopupTitle {
	position: relative;
	display: flex;
	align-items: center;
	height: 32px;
	padding: 0 10px;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	background-color: #747ba0;
	border-bottom: 1px solid #3f4251;
	box-sizing: border-box;
}
.checkedClassPopupContent {
	position: relative;
	display: flex;
	width: 100%;
	min-height: 100px;
	padding: 10px;
	line-height: 1.5;
	box-sizing: border-box;
}
.checkedScrollBox {
	position: relative;
	display: block;
	width: 120px;
	height: 160px;
	border: 1px solid #acacac;
}
.checkedScrollBox ul.subSearchInList {
	padding: 0;
}
.checkedScrollBox ul.subSearchInList li {
	margin: 0;
	padding: 5px 0;
}
.checkedScrollBox ul.subSearchInList li:nth-child(even) {
	background-color: #f0f0f0;
}

.registrationListPopup ul.subSearchInList li {
	display: flex;
	justify-content: center;
}
.subSearchRightBox ul.subSearchInList.checks li:first-child {
	justify-content: center;
}
.checkedRightBox {
	position: relative;
	display: flex;
	width: calc(100% - 130px);
	margin-left: auto;
}

ul.checkedRightList {
	position: relative;
	display: flex;
	flex-wrap: wrap;
}
ul.checkedRightList li {
	display: flex;
	align-items: center;
	margin: 3px 0;
}
.classCopyCheckBtn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 150px;
	height: 32px;
	font-size: 12px;
	color: #fff;
	background-color: #275083;
	border-radius: 42px;
}

.resultBox {
	position: relative;
	display: flex;
	margin: 0 auto;
}

.mainPopupLayer {
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    width: 835px;
    /* height: calc(100vh - 40px); */
    height: 827px;
	max-height: calc(100vh - 100px);
    background-color: #181d3d;
    box-shadow: 0 0 10px 10px rgba(0,0,0,0.2);
    transform: translate(-50%, -50%);
}
.mainPopupTopBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    margin: 5px 5px 0 5px;
    padding: 0 5px;
    color: #fff;
    background-color: #323b6d;
    border: 1px solid #747ba0;
    box-sizing: border-box;
    box-shadow: 0 0 3px 3px rgba(0,0,0,0.1) inset;
}
.mainPopupTopTitle {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 110px;
    height: 38px;
    margin-left: -5px;
    padding: 0 10px;
    color: #fff;
    background-color: #747ba0;
    border-right: 1px solid #acacac;
}
.mainPopupContentBox {
    position: relative;
    display: block;
    height: calc(100% - 90px);
    /* padding: 5px; */
    box-sizing: border-box;
}
.mainPopupContentInBox {
    position: relative;
    display: block;
    height: 100%;
    /* background-color: #9d9d9d; */
}
ul.mainPopupList {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(45%, auto));
    /* gap: 5px; */
    margin: 5px 0;
}
ul.mainPopupList li {
    padding: 0;
    box-sizing: border-box;
}
ul.mainPopupList li:nth-child(4n),
ul.mainPopupList li:nth-child(4n-1) {
    background-color: #323b6d;
}
ul.mainPopupList li:nth-child(4n-2),
ul.mainPopupList li:nth-child(4n-3) {
    background-color: #2b2e3f;
}

ul.mainPopupList li:nth-child(2n) {
    padding: 0 5px 5px 2px;
}
ul.mainPopupList li:nth-child(2n-1) {
    padding: 0 2px 5px 5px;
}

.mainPopupListTitle,
.mainRollingListTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 10px;
    font-size: 14px;
    color: #f0f0f0;
    box-sizing: border-box;
}
.mainRollingListTitle {
    font-size: 16px;
}
.mainPopupTableBox,
.mainPopupTableBox2,
.mainPopupTableBox3 {
    position: relative;
    display: block;
    height: 141px;
    padding: 5px;
    /* background-color: #4c4d59; */
    background-color: rgba(77,76,89,0.5);
    border: 2px solid #7d7f9d;
}
.mainPopupTableBox2 {
    height: 109px;
}
.mainPopupTableBox3 {
    height: 79px;
    /* background-color: #323232; */
        background-color: rgb(24 29 61);
    border: 2px solid #fed030;
}
.mainPopupTableInBox {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.mainPopupTable,
.mainPopupTable2 {
    position: relative;
    display: block;
    font-size: 14px;
    color: #fff;
}
.mainPopupTable table,
.mainPopupTable2 table {
    table-layout: fixed;
}
.mainPopupTable th,
.mainPopupTable2 th {
    position: sticky;
    z-index: 10;
    top: 0;
    height: 32px;
    text-align: center;
    /* background-color: #36393c; */
    background-color: rgb(8 22 63 / 50%);
    border-top: 1px solid #7f818c;
    border-bottom: 1px solid #7f818c;
}
.mainPopupTable td,
.mainPopupTable2 td {
    height: 31px;
    padding: 0 3px;
    text-align: center;
    border-bottom: 1px solid #7f818c;
}
.mainPopupTable td.ellipsis,
.mainPopupTable2 td.ellipsis {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mainPopupTable2 tr:first-child td {
    border-top: 1px solid #7f818c;
}
.mainPopupTable table > tbody > tr:nth-child(even) > td,
.mainPopupTable2 table > tbody > tr:nth-child(even) > td,
.mainPopupTable3 table > tbody > tr:nth-child(even) > td {
    /* background-color: #42474c; */
    background-color: rgba(66,71,76,0.5);
}
.mainTableTitleBox {
    position: relative;
    display: flex;
    height: 28px;
}
.mainPopupInTableTitle {
    display: block;
    width: 230px;
    height: 16px;
    padding: 0;
    text-align: left;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    transform: translate(5px, 5px);
}
.mainPopupTable2 .mainPopupInTableTitle {
    width: 270px;
}
.rollList {
    position: relative;
    height: 141px;
    margin: 0;
    padding: 0;
    /* background-color: #505863; */
    background-color: rgb(12 15 77);
    border: 2px solid #737cb5;
    overflow: hidden;
    box-sizing: border-box;
}

ul.ticker2 {
    position: relative;
    display: block;
    /* margin: 0 5px; */
    border-top: 1px solid #737b87;
}

ul.ticker2 li {
    position: relative;
    height: 46px;
    padding: 0 !important;
    border: 0px solid #737b87;
    border-bottom: 1px solid #737b87;
}
ul.ticker2 li:nth-child(odd) {
    background-color: rgba(102,111,124,0.5);
}
ul.ticker2 li:nth-child(even) {
    background-color: #1d2545;
}

.rollList .iconBox {
    position: relative;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    text-align: center;
    vertical-align: top;
    border-radius: 50%;
    overflow: hidden;
}

.rollList .iconBox img {
    display: block;
    max-width: 150%;
    max-height: 150%;
    margin: 0 auto;
    background-color: #85929d;
    border-radius: 50%;
}

.rollList .rollListTable {
	border-collapse:collapse;
}

.rollList .rollListTable td {
	height:44px;
    line-height: 1.3;
	padding-left: 3px;
	font-size:12px;
    color: #fff;
	text-align:left;
    background-color: transparent;
    background-image: none !important;
    border: 0px solid #dedede;
}

.rollList .rollListTable td:first-child {
    width: 42px !important;
}
.rollList .DB.TAL {
    position: relative;
    display: -webkit-box !important;
    width: 210px;
    text-align: left;
    font-size: 12px;
    overflow: hidden;
    word-break: break-all;
    font-weight: normal;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    line-height: 1.5em;
    min-height: 1em;
    box-sizing: border-box;
}
.moreBtn {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    font-size: 12px;
    color: #fff;
}

.mainNoticePopupLayer {
    position: absolute;
    z-index: 60;
    top: 50%;
    right: 50px;
    width: 550px;
    height: 350px;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: 0 20px 10px -15px rgba(0,0,0,0.7);
    transform: translate(0, -50%);
}
.mainNoticePopupTitle {
    osition: relative;
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 10px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #38455f;
    border-bottom: 1px solid #373b42;
    box-sizing: border-box;
}
.mainNoticeCloseBtn {
	position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
}
.mainNoticeCloseBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    font-size: 24px;
    color: #fff;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.mainNoticeCloseBtn span {
	display: block;
	text-indent: -9999px;
}
.mainNoticeContentBox {
    position: relative;
    display: block;
    height: 307px;
    padding: 15px 5px;
    box-sizing: border-box;
}
.mainNoticeContentInBox {
    position: relative;
    display: block;
    height: 100%;
    line-height: 1.5;
    padding: 0 10px;
    color: #000;
    overflow: hidden;
}

/* layout */
.wrapper {
	position: relative;
	display: block;
	min-width: 100%;
	height: calc(100vh - 24px);
}

/*
@media screen and (max-width: 1270px) {
	.wrapper {
		min-width: 1270px;
		overflow: auto;
	}
}
*/
/*
.fixContent {
	position: fixed;
	display:block;
	z-index: 10;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	min-width:1400px;
	background-color: #f0f0f0;
    zoom: 1;
	overflow:hidden;
}
*/
.learnpiaFrame {
	width: calc(100% - 160px);
    height: calc(100vh - 97px);
    margin: 0px 0px 0px 160px;
    background-color: #fff;
    overflow: auto;
	transition: all 0.3s;
}
@media screen and (max-width: 1440px) {
	.learnpiaFrame {
		width: calc(100% - 50px);
		margin: 0px 0px 0px 50px;
		transition: all 0.3s;
	}
}

/* Top Layout */
.headerBox {
	position: relative;
	display: flex;
	width: 100%;
	height: 60px;
	box-sizing: border-box;
}
@media screen and (max-width: 1270px) {
	.headerBox {
		width: 1270px;
	}
}
.topWrapper {
	position:fixed;
	z-index: 20;
	top: 0;
	right: 0;
	left: 0;
	/* min-width:768px; */
	height:60px;
	border-top: 3px solid #ff4a03;
}
.indexPopup .topWrapper {
    border-top: 3px solid #ff03ba;
}
.topTextBox {
    position: absolute;
    z-index: 30;
    top: -3px;
    left: 50%;
    display: flex;
    align-items: center;
    height: 18px;
    padding: 0 15px;
    font-size: 11px;
    color: #fff;
    background-color: rgb(38 146 196);
    border-radius: 0 0 5px 5px;
    transform: translateX(-50%);
}
@media screen and (max-width: 1270px) {
	.topWrapper {
	min-width:1248px;
	}
}
.topBox {
	position:relative;
	display:flex;
	height:60px;
	margin:0 auto;
	background-color: #5f6271;
	box-shadow: 0 5px 10px rgba(0,0,0,0.3);
	box-sizing: border-box;
}

.topLinkBox {
	position: relative;
	display: flex;
	width: calc(100% - 160px);
	/* min-width: 1180px; */
	height: 60px;
	margin-left: 160px;
    background-color: #323b6d  !important;
	border-bottom: 1px solid #3b3e4e;
	transition: all 0.3s;
}
.indexPopup .topLinkBox {
    background-color: #004583;
    border-bottom: 1px solid #002b52;
}
.topLinkBox.on {
	width: calc(100% - 50px);
	margin-left: 50px;
	transition: all 0.3s;
}

@media screen and (max-width: 1440px) {
	.topLinkBox {
		width: calc(100% - 50px);
		margin-left: 50px;
		transition: all 0.3s;
	}
}
@media screen and (max-width: 1270px) {
	.topLinkBox {
		min-width: 1200px;
	}
}
/*
@media screen and (max-width: 980px) {
	.topLinkBox {
		width: calc(100% - 50px);
		margin-left: 50px;
		transition: all 0.3s;
	}
}
@media screen and (max-width: 767px) {
	.topLinkBox {
		width: 100%;
		margin-left: 0;
		transition: all 0.3s;
	}
}
*/

.topNavBox {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 60px;
	/* margin-left: 10px; */
}

@media screen and (max-width: 1440px) {
	.topNavBox {
		margin-left: 0;
		transition: all 0.3s;
	}
}
@media screen and (max-width: 1270px) {
	.topNavBox {
		min-width: 1180px;
	}
}
/*
@media screen and (max-width: 980px) {
	.topNavBox {
		margin-left: 10px;
		transition: all 0.3s;
	}
}

@media screen and (max-width: 767px) {
	.topNavBox {
		display: none;
	}
}
*/

.topNavListBox {
    position: relative;
    display: flex;
    align-items: center;
    max-width: calc(100% - 60px);
    overflow-x: auto;
}
.topNavListBox.scrollbar-inner > .scroll-element .scroll-bar {
        background-color: #02b0ff;
}
ul.topNavList {
	position: relative;
	display: flex;
	height: 60px;
}
.topNavListBox ul.topNavList {
    min-width: 500px;
}
ul.topNavList li {
	position: relative;
	display: flex;
	align-items: center;
	height: 60px;
	padding: 0 2px;
	box-sizing: border-box;
}
.topNavListBox ul.topNavList li {
    flex-shrink: 0;
}

a.topNavLink:link, a.topNavLink:visited, a.topNavLink:active {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    width: 100%;
    height: 32px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    color: #e7e8ef;
    background-color: #222a57;
    border-radius: 22px;
    box-sizing: border-box;
}
.topNavListBox ul.topNavList a.topNavLink:link,
.topNavListBox ul.topNavList a.topNavLink:visited,
.topNavListBox ul.topNavList a.topNavLink:active {
    width: auto;
    height: 26px;
}
a.topNavLink:hover {
	color: #ffdc36;
	background-color: #494c58;
}
.indexPopup a.topNavLink:hover {
	background-color: #262933;
}
.sideNavBottomBox {
	display: none;
}

@media screen and (max-width: 767px) {
	.sideNavBottomBox {
		position: absolute;
		z-index: 220;
		bottom: 0;
		left: 0;
		width: 220px;
		height: 165px;
		padding: 10px;
		background-color: #7980a3;
    	border-top: 1px solid #7f849b;
		box-sizing: border-box;
		display: block;
	}

	ul.navBottomBtnList {
		position: relative;
		display: flex;
		flex-wrap: wrap;
	}

	ul.navBottomBtnList li {
		width: 100%;
		margin: 3px 0;
	}

	.sideNavBottomBox a.topNavLink:link,
	.sideNavBottomBox a.topNavLink:visited,
	.sideNavBottomBox a.topNavLink:active {
		position: relative;
		display: flex;
		flex-shrink: 0;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 42px;
		font-size: 16px;
		font-weight: bold;
		color: #5f6271;
		background-color: #f9f9f9;
		border: 1px solid #dedede;
		border-radius: 42px;
		font-family: 'Roboto',sans-serif;
	}

	.sideNavBottomBox a.topNavLink:hover {
		box-shadow: 0 0 10px rgba(0,0,0,0.3);
	}
}

.topInfoBox, .topInfoSearchBox {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    min-width: 200px;
    height: 42px;
    margin-right: 10px;
    margin-left: auto;
    padding: 0;
    font-size: 15px;
    color: #fff;
    background-color: #222a57;
    border-radius: 52px;
}
.topInfoSearchBox {
    min-width: 46px;
    background-color: transparent;
}
/*
@media screen and (max-width: 1270px) {
	.topInfoBox {
		margin-left: 10px !important;
	}
}
*/

.companyInfoBox .topInfoBox {
	flex-shrink: 1;
	flex-direction: column;
	width: 185px;
	min-width: auto;
	height: auto;
	min-height: 42px;
	margin-bottom: 5px;
	padding: 10px 0;
	color: #9d9d9d;
	background-color: #f9f9f9;
	border: 1px solid #dedede;
    border-radius: 10px;
	box-sizing: border-box;
}

@media screen and (min-width: 768px) {
	.companyInfoBox .topInfoBox {
		display: none;
	}
}
.newSearchBtnBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    margin-left: 7px;
}
.newSearchBtn {
    position: relative;
    top: 50%;
    width: 32px;
    height: 32px;
    transform: translate(0, -50%);
}
.newSearchBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    font-size: 16px;
    color: #fff;
    background-color: #2692c4;
    border-radius: 50%;
    content: "\e90f";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.newSearchBtn span,
.newSearchCloseBtn span,
.newSearchTopBtn span {
    display: block;
    text-indent: -9999px;
}

.newSearchInputBox {
    position: absolute;
    z-index: 10;
    top: 38px;
    /* right: 0; */
    left: 0;
    width: 300px;
    height: 42px;
    padding: 5px;
    /* text-align: center; */
    background-color: rgba(0,0,0, 0.6);
    display: none;
}
.topInfoSearchBox .newSearchInputBox {
     right: 0;
     left: auto;
}

.newSearchCloseBtn {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 50%;
    width: 42px;
    height: 42px;
    transform: translate(110px,0);
}
.newSearchCloseBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 18px;
    color: #fff;
    background-color: transparent;
    content: "\e915";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.newSearchTopInput {
    position: relative;
    display: inline-block;
    width: 250px;
    min-width: 150px;
    height: 32px;
    margin: 0 auto;
    padding: 0 42px 0 20px;
    border: 1px solid #fff;
    border-radius: 42px;
    box-sizing: border-box;
}
.newSearchTopBtn {
    position: absolute;
    z-index: 10;
    left: 50%;
    width: 32px;
    height: 32px;
    transform: translate(70px, 0);
}
.newSearchTopBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    color: #2692c4;
    background-color: transparent;
    content: "\e90f";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

ul.topInfoList {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}
ul.topInfoList li {
	position: relative;
	display: flex;
	align-items: center;
	height: 30px;
	padding: 0 6px;
	/* border-right: 1px solid #fff; */
}
ul.topInfoList li:last-child {
	padding-right: 20px;
	border-right: none;
}
ul.topInfoList li span {
	padding-left: 22px;
}
ul.topInfoList li:nth-last-child(2) span {
	padding-left: 0;
}
ul.topInfoList li span:before {
	position: absolute;
	z-index: 10;
	top: -1px;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 35px;
	height: 32px;
	font-size: 15px;
	color: #fff;
	content: "";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}
ul.topInfoList li:nth-child(1) span {
	position: relative;
	display: flex;
    align-items: center;
    height: 32px;
    padding: 5px 20px 5px 32px;
	color: #5ed12f;
    background-color: rgba(0,0,0, .3);
    border-radius: 32px;
}
ul.topInfoList li:nth-child(1) span:before {
	color: #5ed12f;
	content: "\e922";
}
ul.topInfoList li strong {
	font-size: 11px;
    line-height: 1.3;
    text-align: center;
}
ul.topInfoList li:nth-child(1) span strong span {
	padding: 0
}
ul.topInfoList li:nth-child(2) span {
	position: relative;
	display: flex;
    align-items: center;
    height: 32px;
    margin-top: -1px;
    padding: 5px 20px 5px 32px;
	color: #ffd22d;
    background-color: rgba(0,0,0, .3);
    border-radius: 32px;
}
ul.topInfoList li:nth-child(2) span:before {
	color: #ffd22d;
	content: "\e905";
}
ul.topInfoList li:last-child span:before {
	color: #6ee4ff;
	content: "\e917";
}
ul.topInfoList li .icoArrow span {
    background-color: transparent;
}

a.topInfoLink:link,
a.topInfoLink:visited,
a.topInfoLink:active {
	font-weight: bold;
	color: #6ee4ff;
}
a.topInfoLink:hover {
	text-decoration: underline;
}

.topRightBox {
	position: relative;
	display: flex;
	align-items: center;
	height: 70px;
	margin-left: auto;
	margin-right: 20px;
}
@media screen and (max-width: 767px) {
	.topRightBox {
		margin-right: 10px;
	}
}
.timeExtensionBtn {
	position: relative;
	display: flex;
	width: 52px;
	height: 52px;
	background-color: #75798c;
	border: none;
	border-radius: 50%;
	box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.timeExtensionBtn span {
	display: block;
	text-indent: -9999px;
}
.timeExtensionBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 52px;
	height: 52px;
	font-size: 32px;
	color: #fff;
	content: "\e909";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}
.messageLayerPopup {
	position: absolute;
	z-index: 30;
	top: 35px;
	left: 0;
	width: 225px;
	min-height: 100px;
	padding: 15px;
	font-size: 13px;
	background: #2354af;
	border-radius: 10px;
	box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
	box-sizing: border-box;
}
.messageLayerPopup:before {
	position: absolute;
	z-index: 30;
    top: -25px;
    left: 50px;
	width: 5px;
	height: 5px;
	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 15px solid #4486ff;
	border-left: 10px solid transparent;
	content:"";
}
.messageLayerTitle {
	position: relative;
	display: flex;
	align-items: center;
	height: 32px;
	margin: -15px -15px 10px;
	padding-left: 10px;
	color: #fff;
	background-color: #4486ff;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.messageContent {
	line-height: 1.5;
}
.messageArrived {
	font-weight: bold;
	color: #ffe000;
}


/* Aside layout */
.sideNavBox {
	position:fixed;
	z-index:200;
	top:3px;
	left:0;
	bottom:0;
	display: flex;
	flex-direction: column;
	width:160px;
	background-color:#fff;
	box-sizing: border-box;
	/* overflow: hidden; */
	transition: all 0.3s;
}

.sideNavBox.on {
	width: 50px;
	/* overflow: hidden; */
	transition: all 0.3s;
}
@media screen and (max-width: 767px) {
	.sideNavBox.active {
		width: 160px;
		margin-left: 0;
		transition: all 0.3s;
		box-shadow: 5px 0 5px rgba(0,0,0,0.05);
	}
}


.sideNavBox.on:hover {
	width:160px;
	transition: all 0.3s;
}

@media screen and (max-width: 1440px) {
	.sideNavBox {
		width: 50px;
		/* overflow: hidden; */
		transition: all 0.3s;
	}
    .sideNavBox .depth01:after {
        left: -200px;
    }
	.sideNavBox:hover {
		width:160px;
		transition: all 0.3s;
	}
    .sideNavBox:hover .depth01:after {
         left: auto;
    }
}
/*
@media screen and (max-width: 1270px) {
	.sideNavBox {
		width: 220px;
		transition: all 0.3s;
	}
	.sideNavBox:hover {
		width:220px;
		transition: all 0.3s;
	}
}
@media screen and (max-width: 980px) {
	.sideNavBox {
		width: 50px;
		overflow: hidden;
		transition: all 0.3s;
	}
	.sideNavBox:hover {
		width:220px;
		transition: all 0.3s;
	}

}
@media screen and (max-width: 767px) {
	.sideNavBox {
		width: 220px;
		margin-left: -220px;
		transition: all 0.3s;
	}
	.sideNavBox.on {
		margin-left: -220px;
	}
	.sideNavBox.on.active {
		margin-left: 0;
	}
}
*/

.logoBox, .MlogoBox {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 160px;
    height: 60px;
    background-color: #323b6d !important;
    border-right: 1px solid #222a57;
    border-bottom: 1px solid #222a57;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    transition: all 0.3s;
}
.MlogoBox {
	position: absolute;
	z-index: 10;
    top: 50%;
    left: 50%;
    width: 170px;
    height: 43px;
    background-color: transparent;
    border: none;
    box-shadow: 0 0 0;
	transform: translate(-50%, -50%);
    display: none;
}
.logoBox.on {
	width: 50px;
	overflow: hidden;
	transition: all 0.3s;
}

@media screen and (max-width: 1440px) {
	.logoBox {
		width: 50px;
	}
	.logoBox:hover {
		width: 220px;
	}
}
/*
@media screen and (max-width: 1270px) {
	.logoBox {
		width: 220px;
	}
}
@media screen and (max-width: 980px) {
	.logoBox {
		width: 50px;
	}
	.logoBox:hover {
		width: 220px;
	}
}
@media screen and (max-width: 767px) {
	.sideNavBox.active .logoBox {
		display: none;
	}
	.MlogoBox {
		display: block;
	}
}
*/

.sideNavBox.on:hover .logoBox.on {
	width: 220px;
}

@media screen and (max-width: 1440px) {
	.sideNavBox:hover .logoBox {
		width: 160px;
	}
}
@media screen and (max-width: 980px) {
	.sideNavBox:hover .logoBox {
		width: 160px;
	}
}

.logoBox.on:before {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	width: 33px;
	height: 38px;
	font-size: 32px;
	color: #fff;
	content: "\e908";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
	transform: translate(-50%, -50%);
	transition: all 0.3s;
}

@media screen and (max-width: 1440px) {
	.logoBox:before {
		position: absolute;
		z-index: 10;
		top: 50%;
		left: 50%;
		width: 33px;
		height: 38px;
		font-size: 32px;
		color: #fff;
		content: "\e908";
		font-family: 'icomoon' !important;
  		speak: none;
  		font-style: normal;
  		font-weight: normal;
  		font-variant: normal;
  		text-transform: none;
		transform: translate(-50%, -50%);
		transition: all 0.3s;
	}
}
/*
@media screen and (max-width: 1270px) {
	.logoBox:before {
		content: "";
	}
}
*/
@media screen and (max-width: 980px) {
	.logoBox:before {
		position: absolute;
		z-index: 10;
		top: 50%;
		left: 50%;
		width: 33px;
		height: 38px;
		font-size: 32px;
		color: #fff;
		content: "\e908";
		font-family: 'icomoon' !important;
  		speak: none;
  		font-style: normal;
  		font-weight: normal;
  		font-variant: normal;
  		text-transform: none;
		transform: translate(-50%, -50%);
		transition: all 0.3s;
	}
}

.sideNavBox.on:hover .logoBox.on:before {
	content: "";
}

@media screen and (max-width: 1440px) {
	.sideNavBox:hover .logoBox:before {
		content: "";
	}
}

a.logoLink:link,
a.logoLink:visited,
a.logoLink:hover,
a.logoLink:active {
	position: relative;
	display: flex;
	width: 169px;
	height: 60px;
}
a.logoLink span {
	display: block;
	text-indent: -9999px;
}
a.logoLink:before {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    width: 127px;
    height: 34px;
    font-size: 28px;
    color: #fff;
    content: "";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
    background: url("/contents/images/habitLogo.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.indexPopup a.logoLink:before {
    content: "\e92c";
}
.logoBox.on a.logoLink:before {
	content: "";
}
.indexPopup .logoBox.on a.logoLink:before {
    content: "";
}
@media screen and (max-width: 1440px) {
	.logoBox a.logoLink:before {
		content: "";
	}
    .indexPopup .logoBox a.logoLink:before {
        content: "";
    }
}
/*
@media screen and (max-width: 1270px) {
	.logoBox a.logoLink:before {
		content: "\e92c";
	}
}
*/
@media screen and (max-width: 980px) {
	.logoBox a.logoLink:before {
		content: "";
	}
    .indexPopup .logoBox a.logoLink:before {
        content: "";
    }
}

.sideNavBox.on:hover .logoBox.on a.logoLink:before {
	content: "\e901";
}
.indexPopup .sideNavBox.on:hover .logoBox.on a.logoLink:before {
    content: "\e92c";
}

@media screen and (max-width: 1440px) {
	.sideNavBox:hover .logoBox a.logoLink:before {
		content: "\e901";
	}
    .indexPopup .sideNavBox:hover .logoBox a.logoLink:before {
		content: "\e92c";
	}
}

.sideNavInBox {
    height: calc(100vh - 63px);
    background-color: #101f43 !important;
    /* border-right: 1px solid #dedede; */
}
.scroll-wrapper.sideNavInBox {
    overflow: visible !important;
}
@media screen and (max-width: 767px) {
	.sideNavBox.on .sideNavInBox {
		width: 220px;
		height: 100vh;
	}
}

.sideSlideBtn {
	position: fixed;
	z-index: 30;
	top: 17px;
	left: 240px;
    width: 32px;
	height: 32px;
	background-color: #696d82;
    border: 1px solid #565968;
	border-radius: 3px;
	transition: all 0.3s;
}
.sideSlideBtn:before {
	position: absolute;
	z-index: 30;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 32px;
	font-size: 18px;
	color: #fff;
	content: "\e910";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}
.sideSlideBtn.on {
	left: 65px;
	transform: rotate(180deg);
	transition: all 0.3s;
}

@media screen and (max-width: 1440px) {
	.sideSlideBtn {
		display: none;
	}
}
/*
@media screen and (max-width: 1270px) {
	.sideSlideBtn {
		left: 240px;
		transition: all 0.3s;
		display: block;
	}
	.sideSlideBtn.on {
		left: 65px;
		display: block;
	}
}
@media screen and (max-width: 980px) {
	.sideSlideBtn,
	.sideSlideBtn.on {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	.MsideSlideBtn {
		position: fixed;
		z-index: 200;
		top: 20px;
		left: 10px;
    	width: 32px;
		height: 30px;
		background-color: transparent;
		border: none;
		transition: all 0.3s;
		display: block;
	}
	.MsideSlideBtn.on {
		left: 230px;
	}
	.overlay.on {
		display: block;
	}
}
*/

.sideSlideBtn span {
	display: block;
	text-indent: -9999px;
}

.totalSlideBtn {
	position: fixed;
	z-index: 30;
	top: 62px;
	left: 159px;
    width: 32px;
	height: 32px;
	background-color: #696d82;
	border: 1px solid #565968;
	box-sizing: border-box;
	transition: all 0.3s;
}
.totalSlideBtn.on {
	left: 49px;
	transition: all 0.3s;
}
@media screen and (max-width: 1440px) {
	.totalSlideBtn {
		left: 50px;
		transition: all 0.3s;
	}
}
/*
@media screen and (max-width: 1270px) {
	.sideSlideBtn {
		left: 240px;
		transition: all 0.3s;
		display: block;
	}
	.sideSlideBtn.on {
		left: 65px;
		display: block;
	}
}
@media screen and (max-width: 980px) {
	.sideSlideBtn,
	.sideSlideBtn.on {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	.MsideSlideBtn {
		position: fixed;
		z-index: 200;
		top: 20px;
		left: 10px;
    	width: 32px;
		height: 30px;
		background-color: transparent;
		border: none;
		transition: all 0.3s;
		display: block;
	}
	.MsideSlideBtn.on {
		left: 230px;
	}
	.overlay.on {
		display: block;
	}
}
*/

.totalSlideBtn span {
	position: absolute;
    display: block;
    left: 5px;
    top: 45%;
    width: 19px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    visibility: visible;
    overflow: visible;
    text-indent: -9999px;
}
.totalSlideBtn.active span {
	background: transparent;
}

.totalSlideBtn span:before,
.totalSlideBtn span:after {
	display: block;
	content: '';
	width: 100%;
	height: 2px;
	position: absolute;
	background: #fff;
	border-radius: 1px;
	-webkit-transition: .2s ease;
    -moz-transition: .2s ease;
    -o-transition: .2s ease;
    transition: .2s ease;
}
.totalSlideBtn span:before {
	left: 0;
	top: 0;
	margin-top: -5px;
}
.totalSlideBtn.active span:before {
	top: 5px;
    transform: rotate(45deg);
}
.totalSlideBtn span:after {
	left: 0;
	bottom: 0;
	margin-bottom: -5px;
}
.totalSlideBtn.active span:after {
	top: 0;
	transform: rotate(-45deg);
}

.companyInfoBox {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 220px;
	height: 145px;
	padding: 0 15px;
	border-bottom: 1px solid #dedede;
	box-sizing: border-box;
	transition: all 0.3s;
}

@media screen and (max-width: 1440px) {
	.companyInfoBox {
		padding: 0 5px;
	}
}

.companyinfoInBox {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.sideNavBox.on .companyInfoBox {
	padding: 0 5px;
	transition: all 0.3s;
}
@media screen and (max-width: 767px) {
	.sideNavBox.active .companyInfoBox {
		height: 220px;
		padding: 0 15px;
	}
}

.companyIconBox,
.companyImgBox {
	position: relative;
	display: flex;
	flex-shrink: 0;
	width: 62px;
	height: 62px;
	background-color: #f0f0f0;
	border-radius: 50%;
	overflow: hidden;
	transition: all 0.3s;
}

@media screen and (max-width: 1440px) {
	.companyIconBox,
	.companyImgBox {
		width: 38px;
		height: 38px;
		transition: all 0.3s;
	}
}
@media screen and (max-width: 1270px) {
	.companyIconBox,
	.companyImgBox {
		width: 62px;
		height: 62px;
		transition: all 0.3s;
	}
}
@media screen and (max-width: 980px) {
	.companyIconBox,
	.companyImgBox {
		width: 38px;
		height: 38px;
		transition: all 0.3s;
	}
}

.mainIconBox .companyIconBox,
.mainIconBox .companyImgBox {
	width: 42px;
	height: 42px;
}

@media screen and (max-width: 479px) {
	.mainIconBox .companyIconBox,
	.mainIconBox .companyImgBox {
		width: 32px;
		height: 32px;
	}
}

.companyImgBox img {
	width: 100%;
}

.sideNavBox.on .companyIconBox,
.sideNavBox.on .companyImgBox {
	width: 38px;
	height: 38px;
	transition: all 0.3s;
}

.sideNavBox.on:hover .companyIconBox,
.sideNavBox.on:hover .companyImgBox {
	width: 62px;
	height: 62px;
	transition: all 0.3s;
}

@media screen and (max-width: 1440px) {
	.sideNavBox:hover .companyIconBox,
	.sideNavBox:hover .companyImgBox {
		width: 62px;
		height: 62px;
		transition: all 0.3s;
	}
}

@media screen and (max-width: 767px) {
	.sideNavBox.active .companyIconBox,
	.sideNavBox.active .companyImgBox {
		width: 62px;
		height: 62px;
		transition: all 0.3s;
	}
}

ul.companySelectList .companyIconBox {
	width: 28px;
	height: 28px;
}

.companyIconBox span {
	display: block;
	text-indent: -9999px;
}

.companyIconBox:before {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	width: 42px;
    height: 38px;
	font-size: 42px;
	color: #a1a1a1;
	transform: translate(-50%, -50%);
	content: "\ea26";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
	transition: all 0.3s;
}
.sideNavBox.on .companyIconBox:before {
	width: 26px;
    height: 20px;
	font-size: 28px;
	transition: all 0.3s;
}

ul.companySelectList .companyIconBox:before {
	width: 18px;
    height: 12px;
	font-size: 18px;
}

.mainIconBox .companyIconBox:before {
	font-size: 32px;
	transform: translate(-50%, -40%);
}

@media screen and (max-width: 767px) {
	.mainIconBox .companyIconBox:before {
		font-size: 24px;
		transform: translate(-50%, -30%);
	}
}

.companyInfoListBox {
	position: relative;
	display: flex;
	flex-direction: column;
	align-content: center;
	margin-left: 10px;
}

.companyInfoListBox span {
	margin: 4px 0;
}

.companyInfoListBox span:first-child {
	font-size: 16px;
	color: #009cff;
}

.companyInfoListBox span:last-child {
	color: #9d9d9d;
}

.companyinfoBtnBox {
	position: relative;
	display: flex;
	width: 100%;
	margin: -10px auto 0;
}

@media screen and (max-width: 1440px) {
	.companyinfoBtnBox {
		display: none;
	}
}
@media screen and (max-width: 1270px) {
	.companyinfoBtnBox {
		display: block;
	}
}
@media screen and (max-width: 980px) {
	.companyinfoBtnBox {
		display: none;
	}
}

.sideNavBox.on .companyinfoBtnBox {
	display: none;
}
.sideNavBox.on:hover .companyinfoBtnBox {
	display: block;
}
@media screen and (max-width: 1440px) {
	.sideNavBox:hover .companyinfoBtnBox {
		display: block;
	}
}
@media screen and (max-width: 1440px) {
	.sideNavBox.on .companyinfoBtnBox {
		display: none;
	}
}

@media screen and (max-width: 1270px) {
	.sideNavBox.on .companyinfoBtnBox {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	.sideNavBox.active .companyinfoBtnBox {
		margin-bottom: 5px;
		display: block;
	}
}


.logoutBtn {
	position: relative;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 150px;
	height: 45px;
	margin: 0 auto;
	color :#fff;
	background-color: #373a46;
	border: none;
	border-radius: 52px;
}

.logoutBtn:hover {
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

ul.navList {
	position:relative;
	display:flex;
	flex-direction: column;
	width:160px;
}
ul.navList>li.division::after {
    content: "구분";
    display: block;
    height: 24px;
    width: 100%;
    background: #5d6693;
    line-height: 24px;
    padding-left: 9px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.division-style {
  display: block;
    height: 24px;
    width: 100%;
    background: #5d6693;
    line-height: 24px;
    padding-left: 9px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

@media screen and (max-width: 1440px) {
	ul.navList {
		width: 50px;
	}
	.sideNavInBox:hover ul.navList {
		width: 160px;
	}

}
@media screen and (max-width: 767px) {
	ul.navList {
		padding-bottom: 100px;
		box-sizing: border-box;
	}
}

ul.navList li {
	position:relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	min-height: 28px;
	transition: all 0.3s;
}

ul.navList a {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    width: 100%;
    height: 32px;
    padding-left: 9px;
    font-weight: normal;
    color: #f3f3f3;
}

@media screen and (max-width: 1440px) {
	ul.navList a span {
		display: none;
	}
}

.sideNavBox.on ul.navList a span {
	display: none;
}
@media screen and (max-width: 1440px) {
	.sideNavBox.on ul.navList a span {
		display: none;
	}
}
/*
@media screen and (max-width: 1270px) {
	.sideNavBox ul.navList a span {
		display: block;
	}
}
@media screen and (max-width: 980px) {
	.sideNavBox ul.navList a span {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	.sideNavBox ul.navList a span {
		display: block;
	}
	.sideNavBox.on ul.navList a span {
		display: block;
	}
}
*/


ul.navList a:hover {
    display: flex;
    align-items: center;
    /* width: 220px; */
    color: #fff;
    background-color: #273b6b;
    text-decoration: none;
}
.sideNavBox.on ul.navList a:hover {
	color: #fff;
}

.sideNavBox.on ul.navList a:hover span {
	display: block;
	margin-left: 10px;
}

.sideNavBox.on:hover ul.navList a:hover span {
	margin-left: 0;
}

.sideNavBox.on:hover ul.navList a span {
	display: block;
}

@media screen and (max-width: 1440px) {
	.sideNavBox:hover ul.navList a span {
		display: block;
	}
}

ul.navList a.on {
	color: #fff;
}

.depth01 span {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.08px;
}
.depth01.on {
	background-color: #494b57 !important;
}

.depth01:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	font-size: 14px;
	color: #e2e2e2;
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
	transition: all 0.3s;
    display: none;
}
.depth01.on:before {
	color: #fff !important;
}

@media screen and (max-width: 1440px) {
	.depth01:before {
		width: 48px;
		font-size: 18px;
		transition: all 0.3s;
	}
}
/*
@media screen and (max-width: 1270px) {
	.depth01:before {
		font-size: 18px;
		transition: all 0.3s;
	}
}
*/
@media screen and (max-width: 980px) {
	.depth01:before {
		font-size: 24px;
		transition: all 0.3s;
	}
}

.sideNavBox.on .depth01:before {
	font-size: 24px;
	transition: all 0.3s;
}

.sideNavBox.on:hover .depth01:before {
	font-size: 18px;
	transition: all 0.3s;
}

@media screen and (max-width: 767px) {
	.sideNavBox.active .depth01:before {
		font-size: 18px;
		transition: all 0.3s;
	}
}


@media screen and (max-width: 1440px) {
	.sideNavBox:hover .depth01:before {
		width: 32px;
		font-size: 16px;
		transition: all 0.3s;
	}
}

.depth01:after {
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	font-size: 10px;
	color: #e2e2e2;
	content: "\e90c";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
	transition: all 0.3s;
    transform: rotate(-90deg);
}
ul.navList li.noSubMenu .depth01:after {
	content: "";
}
.depth01.on:after {
	transform: rotate(180deg);
	transition: all 0.3s;
}

.nav01:before {
	content: "\e91a";
}
.nav02:before {
	content: "\e918";
}
.nav04:before {
	content: "\e903";
}
.nav05:before {
	content: "\e91b";
}
.nav06:before {
	content: "\e919";
}
.nav07:before {
	content: "\e900";
}

ul.navList a:hover:before,
ul.navList a:hover:after {
	color: #fff;
}

ul.subNavList {
    /* position: relative; */
    position: absolute;
    z-index: 20;
    top: 0;
    left: 160px;
    width: 219px !important;
    /* max-height: 245px !important; */
    /* padding: 5px 0; */
    background-color: #273b6b;
    transition: all 0.3s;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
    display: none;
    max-height: 420px;
    overflow: auto;
}
@media screen and (max-width: 1440px) {
	ul.subNavList {
		left: 50px;
		transition: all 0.3s;
	}
    .sideNavBox:hover ul.subNavList {
        left: 160px;
		transition: all 0.3s;
    }
}
.sideMenu:hover {
    background-color: #273b6b;
}
.sideMenu.on ul.subNavList {
	display: block;
}
ul.subNavList li {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 34px;
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, .3);
}
ul.subNavList li:hover {
    /* color: #72fff8;
    background-color: #4e4e4e; */
}

ul.subNavList a {
	display: flex;
	align-items: center;
	width: calc(100% - 0px);
	height: 34px;
	/* margin-left: 10px; */
	padding-left: 18px;
	color: #ffffff;
	font-size: 15px;
	font-weight: 300 !important;
	border-radius: 0 0 0 0;
	border: 2px solid transparent;
	line-height: 1.5;
}
ul.subNavList a:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 18px;
	height: 34px;
	margin-left: 0;
	font-size: 13px;
	content: "·";
	transition: all 0.3s;
}
@media screen and (max-width: 1440px) {
	ul.subNavList a:before {
		width: 50px;
		transition: all 0.3s;
	}
}

@media screen and (max-width: 1440px) {
	.sideNavBox:hover ul.subNavList a:before {
		width: 18px;
		/* transition: all 0.3s; */
	}
}

ul.subNavList a:hover {
    font-weight: normal;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s;
    /* border: 2px solid #72fff8; */
    border-radius: 0px;
    width: calc(100% - 0px);
    background: #040f29;
}
ul.subNavList a:hover:before {
	color: #72fff8;
}

ul.subNavList a.on {
	width: 100%;
	font-weight: bold;
	color: #5d5d5d;
	background-color: #e9ecee;
}
ul.subNavList a.on:hover:before {
	color: #5d5d5d;
}

.sideMenu.lastSubMenu ul.subNavList {
    top: auto;
    bottom: 0;
}

.sideNavBox.on .depth02 span {
	display: none;
}
.sideNavBox.on:hover .depth02 span {
	display: block;
}

.sideNavBox.on:hover .depth02:hover span {
	margin-left: 0;
}

.subMenuIcon {
	margin: 0 5px;
	color:#f7c447;
	font-size: 12px;
}

.subMenuRightNum {
	position: relative;
	float:right;
	display: inline-block;
	margin: 0 25px;
	text-align: right;
	color:#eaeaea;
	font-size: 12px;
}

ul.subNavList .selected {
	position:relative;
	display:block;
	height:auto;
	background-color:#3e3d41;
	border-top:1px solid #42474d;
	border-bottom:1px solid #42474d !important;
}

/* ------------------------- */
/*          main             */
/* ------------------------- */
.mainContainer,
.subContainer {
	position:relative!important;
	display:block;
	/* left: 220px;
	width: calc(100% - 220px); */
	width: 100%;
	/* min-width: 1180px; */
	min-height: calc(100vh - 70px);
	background-color: #eaedef;
	transition: all 0.3s;
}

/*
.subContainer {
	min-width: 1220px;
}
*/

.mainContainer.on,
.subContainer.on {
	left: 50px;
	width: calc(100% - 50px);
	/* min-width: 804px; */
	box-sizing: border-box;
	transition: all 0.3s;
}

@media screen and (max-width: 1440px) {
	.mainContainer,
	.subContainer {
		/*
		left: 50px;
		width: calc(100% - 50px);
		*/
		width: 100%;
		transition: all 0.3s;
	}
}
@media screen and (max-width: 1270px) {
	.mainContainer,
	.subContainer {
		/* left: 50px; */
		/* min-width: 1220px; */
	}
}
/*
@media screen and (max-width: 980px) {
	.mainContainer {
		left: 50px;
		width: calc(100% - 50px);
		transition: all 0.3s;
	}
}
@media screen and (max-width: 767px) {
	.mainContainer,
	.subContainer {
		left: 0;
		width: 100%;
		transition: all 0.3s;
	}
	.mainContainer.on,
	.subContainer.on {
		left: 0;
		width: 100%;
		transition: all 0.3s;
	}
}
*/

.mainContent {
	position: relative;
	display: block;
	width: 100%;
	padding: 30px;
	box-sizing: border-box;
}
.noticeView .mainContent,
.subContainer.noticeList .mainContent {
	padding: 10px;
}
@media screen and (max-width: 767px) {
	.mainContent {
		padding: 10px;
	}
}
.mainContent.popupContent {
	padding: 0;
}

.mainTitle {
	position: relative;
	display: flex;
	align-items: center;
	height: 42px;
	font-size: 24px;
	font-weight: bold;
	color: #000;
	font-family: 'Roboto', sans-serif;
}

.mainContentBox100,
.popupContentBox100 {
	position: relative;
	display: flex;
	width: 100%;
	min-height: 50px;
}
.popupTextbookBottomInBox .popupContentBox100,
.vocabChangePopup .popupContentBox100,
.bookOrderListPopup .popupContentBox100 {
	flex-direction: column;
}
.campusInfo2 .popupContentBox100 {
	height: calc(100vh - 160px);
}
.noticeViewPopup  .popupContentBox100,
.noticeWritePopup .popupContentBox100 {
	flex-direction: column;
}
.popupContentBox80 {
	position: relative;
	display: block;
	width: 80%;
}
.popupContentBox70 {
	position: relative;
	display: block;
	width: 70%;
}
.popupContentBox60 {
	position: relative;
	display: block;
	width: 60%;
}

.mainContentBox50,
.popupContentBox50 {
	position: relative;
	display: block;
	width: 50%;
}

.popupContentBox40 {
	position: relative;
	display: block;
	width: 40%;
}

.popupContentBox30 {
	position: relative;
	display: block;
	width: 30%;
}

.popupContentBox20 {
	position: relative;
	display: block;
	width: 20%;
}
.studentCounsel .popupContentBox30 {
	display: flex;
}
.popupContentBox30.overBox {
	width: calc(30% - 280px);
}
.classAssessment .popupContentBox30,
.companyStudentPopup .popupContentBox30 {
	flex-grow: 1;
}
.popupContentBox30.fixedBox {
	width: 550px;
	flex-shrink: 0;
	flex-grow: 0;
}
.popupContentBox30 .classRightBox {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.popupContentBox30 .classRightBox .popupContentTable {
	width: 750px;
	background-color: #fff;
}
.popupContentBox30:hover .classRightBox {
	position: absolute;
	z-index: 50;
	top: 0;
	left: 0;
	width: 750px;
	overflow: visible;
}
.popupContentBox30:hover .classRightBox .popupContentTable {
	width: 750px;
	border-right: 1px solid #acacac;
	border-left: 1px solid #acacac;
}

.popupContentBox30 .receiptLeftBox {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.popupContentBox30 .receiptLeftBox .receiptInfoBox,
.popupContentBox30 .receiptLeftBox .popupContentTable {
	width: 1200px;
	background-color: #fff;
}
.popupContentBox30:hover .receiptLeftBox {
	position: absolute;
	z-index: 50;
	top: 0;
	right: 0;
	width: 1200px;
	height: 100%;
	background-color: #fff;
	overflow: visible;
}
.popupContentBox30:hover .receiptLeftBox .receiptInfoBox,
.popupContentBox30:hover .receiptLeftBox .popupContentTable {
	width: 1200px;
}
.popupContentBox30:hover .receiptLeftBox .popupContentTable {
	border-right: 1px solid #acacac;
	border-left: 1px solid #acacac;
}

/*
@media screen and (max-width: 1270px) {
	.mainContentBox100 {
		flex-wrap: wrap;
	}
	.mainContentBox100.MT30 {
		margin-top: 0 !important;
	}
	.mainContentBox50 {
		width: 100%;
	}
	.mainContentBox50.ML15 {
		margin-left: 0 !important;
		margin-bottom: 30px !important;
	}
	.mainContentBox50.MR15 {
		margin-right: 0 !important;
		margin-bottom: 30px !important;
	}

	.mainContentBox100:last-child .mainContentBox50.ML15 {
		margin-bottom: 0 !important;
	}
}
*/

@media screen and (max-width: 767px) {
	.mainContentBox50.ML15 {
		margin-left: 5px !important;
		margin-bottom: 10px !important;
	}
	.mainContentBox50.MR15 {
		margin-right: 5px !important;
		margin-bottom: 10px !important;
	}
	.mainContentBox100:last-child .mainContentBox50.ML15  {
		margin-bottom: 0 !important;
	}
}

.mainContentInBox,
.popupContentInBox {
	position: relative;
	display: block;
	width: 100%;
	min-height: 50px;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.testAllocationPopup .popupContentInBox {
	padding-bottom: 5px;
}
/*
.vocabMenuMakePopup .popupContentInBox {
	height: calc(100vh - 77px);
}
.vocabMenuMakePopup .vocabThirdCategory .popupContentInBox {
	height: calc(100vh - 100px);
}
*/
.companyRegisterPopup2,
.vocabFirstCategory,
.vocabSecondCategory,
.vocabThirdCategory {
	height: calc(100vh - 220px) !important;
}

.vocabFirstCategory .popupContentInBox,
.vocabSecondCategory .popupContentInBox,
.vocabThirdCategory .popupContentInBox,
.academyInfo .popupContentInBox,
.campusInfo .popupContentInBox,
.optionInfo .popupContentInBox,
.basicInfo .popupContentInBox,
.campusInfo2 .popupContentInBox,
.paymentInfo .popupContentInBox,
.serviceInfo .popupContentInBox,
.messageViewPopup .popupContentInBox,
.tabListBox .popupContentInBox,
.smsSend01 .popupContentInBox,
.smsSend02 .popupContentInBox,
.smsSend03 .popupContentInBox,
.onlineListBox .mainContentInBox {
	box-shadow: 0 0 0 rgba(0,0,0,0);
}

.onlineListBox .mainContentInBox {
	width: auto;
	border: 1px solid #dedede;
}

.classPopup .popupContentInBox,
.fileUploadPopup .popupContentInBox {
	padding: 15px;
	box-sizing: border-box;
}


.textbookPopup .popupContentInBox {
	height: calc(100vh - 72px);
}

.popupContentTextBox {
	position: relative;
	display: block;
	line-height: 1.5;
	padding: 10px;
	border: 1px solid #09adea;
	box-sizing: border-box;
}

.mainSubTitle, .popupSubTitle, .popupSubTitle2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 20px;
  font-size: 14px;
  color: #eeeff5;
  background-color: #323b6d;
  box-sizing: border-box;
}
.popupSubTitle2 {
	font-weight: bold;
	color: #2d2d2d;
	background-color: #f9f9f9;
	border-bottom: 1px solid #dedede;
}
.examMakePopup .popupSubTitle,
.mockTestSearchPopup .popupSubTitle {
	justify-content: center;
}

a.moreLink {
	position: relative;
	display: flex;
	margin-left: auto;
	width: 32px;
	height: 32px;
}
a.moreLink span {
	display: block;
	text-indent: -9999px;
}
a.moreLink:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	font-size: 18px;
	color: #a8abbe;
	content: "\e90d";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}
a.moreLink:hover:before {
	color: #fff;
}

.scrollbarBox {
	position: relative;
	display: block;
	height: 394px;
	overflow: auto;
}

.mainContentTable,
.subContentTable,
.popupContentTable,
.popupContentTable2 {
	position: relative;
	display: block;
	height: 222px;
	padding: 15px;
	box-sizing: border-box;
}
.monthMemberSearchPopup .popupContentTable,
.monthReservationSearchPopup .popupContentTable {
	padding: 0;
	background-color: #fff;
}
.subContentTable,
.popupContentTable,
.popupContentTable2 {
	height: auto;
}
.contentList .subContentTable,
/* .vocabList .subContentTable, */
.LCList .subContentTable,
.companyRegister .subContentTable,
.campusInfo2 .popupContentTable,
.paymentInfo .popupContentTable,
.mockTest .subContentTable,
.noticeList .subContentTable,
.paymentManage .subContentTable,
.classRightBox .popupContentTable,
.tabListBox .popupContentTable,
.tuitionModifyPopup .popupContentTable,
.textbookModifyPopup .popupContentTable,
.etcReceiptModifyPopup .popupContentTable,
.endCourseTopBox .popupContentTable,
.endCourseListBox .popupContentTable,
.taskBox .popupContentTable,
.classAssessment .popupContentTable,
.learnpiaBox .popupContentTable,
.companyStudentPopup .popupContentTable,
.textbookPopup .popupContentTable,
.classInfoScrollBox .popupContentTable,
.assignScrollBox .popupContentTable,
.testAllocationPopup .popupContentTable,
.classifiedSearchPopup .popupContentTable,
.teacherInfoPopup .popupContentTable,
.studentAttendancePopup .popupContentTable,
.classReportPopup .popupContentTable,
.contentSetMenuMakePopup .popupContentTable,
.retrySearchPopup .subContentTable {
	padding: 0;
}

.companyRegister .subContentTable th,
.campusInfo2 .popupContentTable th,
.paymentInfo .popupContentTable th,
.studentAttendancePopup .popupContentTable th,
.classReportPopup .popupContentTable th {
	position: sticky;
	z-index: 10;
	top: 0;
}
.studentAttendancePopup .popupContentTable th {
    width: 60px;
}
.classReportPopup .popupContentTable th {
    width: 200px;
}

.classReportPopup .popupContentTable th:first-child {
    width: 100px;
}

.studentAttendancePopup .popupContentTable th:first-child {
    width: 250px;
}
.studentAttendancePopup .popupContentTable th:last-child {
    width: 60px;
}
.studentAttendancePopup .popupContentTable td,
.classReportPopup .popupContentTable td {
    padding: 0;
    font-size: 11px;
}
.studentAttendancePopup .popupContentTable td span,
.classReportPopup .popupContentTable td span {
    display: inline-flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    min-height: 32px;
    padding: 0 3px;
    border-right: 1px solid #dedede;
}
.classReportPopup .popupContentTable td span {
    flex-grow: 0;
    min-height: 32px;
    padding: 0;
}
.studentAttendancePopup .popupContentTable td span:last-child,
.classReportPopup .popupContentTable td span:last-child {
    flex-wrap: wrap;
    flex-grow: 1;
    height: 100%;
    min-height: 32px;
    border-right: none;
}
.attendanceStudentInfo {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-width: 300px;
    height: 32px;
    padding: 0 10px;
}
.classReportPopup .attendanceStudentInfo {
    min-width: 100px;
}

.studentAttendancePopup .popupContentTable td .attendanceStudentInfo span,
.classReportPopup .popupContentTable td .attendanceStudentInfo span{
    flex-grow: 0;
    border-right: none;
}

.popupContentTable2 {
	padding: 0;
}
.popupContentTable2 span {
	display: block;
	width: 100%;
}

.pointLayer .popupContentTable {
	overflow: auto;
}

.examMakePopup .popupContentTable,
.examDetailViewPopup .popupContentTable {
	padding-top: 5px;
}

.campusInfo .popupContentTable {
	padding: 15px 10px;
}

.mainContentTable table,
.subContentTable table,
.popupContentTable table {
	position: relative;
	table-layout: fixed;
}
/*
@media screen and (max-width: 1270px) {
	.mainContentTable {
		height: auto;
	}
}
*/

.subContentTable thead,
.popupContentTable thead {
	background-color: #696d82;
}

.mainContentTable th,
.subContentTable th,
.popupContentTable th {
	position: relative;
	min-height: 32px;
	padding: 7px 0;
	text-align: center;
	color: #fefefe;
	background-color: #747ba0;
	box-sizing: border-box;
}
.mainContentTable th:first-child,
.subContentTable th:first-child,
.popupContentTable th:first-child {
	border-left: 1px solid #747ba0;
}
.mainContentTable th:last-child,
.subContentTable th:last-child,
.popupContentTable th:last-child {
	border-right: 1px solid #747ba0;
}
.contentList .subContentTable th,
.vocabList .subContentTable th,
.LCList .subContentTable th,
.noticeList .subContentTable th,
.paymentManage .subContentTable th,
.mockTestViewPopup .popupContentTable th,
.mockTest .subContentTable th,
.classRightBox .popupContentTable th,
.tabListBox .popupContentTable th,
.tuitionModifyPopup .popupContentTable th,
.textbookModifyPopup .popupContentTable th,
.etcReceiptModifyPopup .popupContentTable th,
.endCourseTopBox .popupContentTable th,
.endCourseListBox .popupContentTable th,
.classAssessment .popupContentTable th,
.learnpiaBox .popupContentTable th,
.companyStudentPopup .popupContentTable th,
.textbookPopup .popupContentTable th,
.popupClassInfoTopInBox .popupContentTable th,
.assignScrollBox .popupContentTable th,
.testAllocationPopup .popupContentTable th,
.classifiedSearchPopup .popupContentTable th,
.teacherInfoPopup .popupContentTable th,
.retrySearchPopup .subContentTable th {
	position: sticky;
	z-index: 1;
	top: 0;
}
.classRightBox .popupContentTable th,
.receiptLeftBox .popupContentTable th {
	height: 32px;
	font-size: 12px;
}

.teacherInfoPopup .infoBottomBox .popupContentTable th {
    background-color: #4878d7;
}

/*
.mockTestViewPopup .popupContentTable thead,
.mockTest .subContentTable thead {
	position: sticky;
	z-index: 20;
	top: 0;
	right: 0;
	left: 0;
}
*/

.mainContentTable th.essential,
.subContentTable th.essential,
.popupContentTable th.essential,
.popupLayoutTable th.essential {
	position: relative;
	color: #fff;
	background-color: #30344a;
}
.mainContentTable th.essential:before,
.subContentTable th.essential:before,
.popupContentTable th.essential:before,
.popupLayoutTable th.essential:before {
	position: absolute;
    z-index: 30;
    top: 20px;
    left: 50%;
    width: 80px;
    height: 32px;
	line-height: 32px;
    margin-left: -40px;
    padding: 0 5px;
	font-size: 14px;
	color: #0095ff;
    background-color: rgba(255,255,255,0.8);
    border: 1px solid #b9b9b9;
	border-radius: 3px;
    box-sizing: border-box;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
	content:"essential";
    display: none;
}
.popupLayoutTable th.essential:before {
	top: 50%;
	margin-top: 10px;
}
.mainContentTable th.essential:hover:before,
.subContentTable th.essential:hover:before,
.popupContentTable th.essential:hover:before,
.popupLayoutTable th.essential:hover:before {
	display: block;
}

/*
.mainContentTable th.essential .tooltipBox,
.subContentTable th.essential .tooltipBox,
.popupContentTable th.essential .tooltipBox,
.popupLayoutTable th.essential .tooltipBox {
	position: absolute;
    z-index: 30;
    bottom: 10px;
    left: 50%;
    width: 130px;
    height: 40px;
    margin-left: -65px;
    padding: 0 10px;
    background-color: #fff;
    border: 1px solid #b9b9b9;
    box-sizing: border-box;
}

.mainContentTable th.essential span,
.subContentTable th.essential span,
.popupContentTable th.essential span,
.popupLayoutTable th.essential span {
	position: absolute;
    z-index: 30;
    top: 20px;
    left: 50%;
    width: 100px;
    height: 32px;
	line-height: 32px;
    margin-left: -50px;
    padding: 0 5px;
	font-size: 11px;
	color: #2d2d2d;
    background-color: rgba(255,255,255,0.8);
    border: 1px solid #b9b9b9;
	border-radius: 3px;
    box-sizing: border-box;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
    display: none;
}
.mainContentTable th.essential:hover span,
.subContentTable th.essential:hover span,
.popupContentTable th.essential:hover span,
.popupLayoutTable th.essential:hover span {
	display: block;
}
*/

.subContentTable th,
.popupContentTable th {
	font-size: 14px;
	color: #f2f2f2;
	font-family: 'Roboto', sans-serif;
}

.subContentTable th > span,
.popupContentTable th > span {
	position: relative;
}

.popupContentTable.lineTable th {
	border-left: 1px solid #747ba0;
}

.mainContentTable td,
.subContentTable td,
.popupContentTable td,
.popupContentTable2 td {
	height: 32px;
	line-height: 1.2;
	padding: 5px;
	text-align: center;
	font-size: 13px;
	border-left: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
	box-sizing: border-box;
}

.vocabContentTable td {
	text-align: left;
}

.classReportPopup .popupContentTable thead > tr > td {
    background-color: #f5feff;
}
.classReportPopup .popupContentTable td {
    min-height: 32px;
}

.mainContentTable tbody > tr > td:last-child,
.subContentTable tbody > tr > td:last-child,
.popupContentTable tbody > tr > td:last-child,
.popupContentTable2 tbody > tr > td:last-child {
	border-right: 1px solid #dedede;
}

.popupContentTable.lineTable td {
	border-right: 1px solid #dedede;
}
.popupContentTable.lineTable td:first-child {
	border-left: 1px solid #dedede;
}

.popupContentTable .DF.AIC {
	justify-content: center;
}

.examMakePopup .popupContentTable td:first-child,
.examDetailViewPopup .popupContentTable td:first-child,
.vocabList .subContentTable td:nth-child(3),
.vocabList .subContentTable td:nth-child(4),
.contentList .subContentTable td:first-child,
.campusInfo .popupContentTable td:nth-child(2),
.popupTableBox .popupContentTable td:nth-child(3),
.contentSetMenuMakePopup .subContentTable td:nth-child(1),
.contentSetMenuMakePopup .subContentTable td:nth-child(2),
.contentSetMenuMakePopup .subContentTable td:nth-child(5),
.vocabFirstCategory .popupContentTable td:first-child,
.vocabSecondCategory .popupContentTable td:nth-child(1),
.vocabSecondCategory .popupContentTable td:nth-child(2),
.vocabThirdCategory .popupContentTable td:nth-child(1),
.vocabThirdCategory .popupContentTable td:nth-child(2),
.vocabThirdCategory .popupContentTable td:nth-child(3),
.mockTest .subContentTable td:first-child,
.LCList .subContentTable td:first-child,
.companyRegister .subContentTable td:first-child,
.campusInfo2 .popupContentTable td:nth-child(5),
.paymentInfo .popupContentTable td:nth-child(11),
.noticeList .subContentTable td:nth-child(1),
.messageListPopup .subContentTable td:nth-child(3) {
	text-align: left;
}

.mainContentTable tbody > tr:first-child td {
	border-top: 1px solid #dedede;
}

.clientManage td:nth-child(2),
.programUpdate td:nth-child(2),
.contentUpdate td:nth-child(2),
.technical td:nth-child(2),
.notice td:nth-child(1) {
	text-align: left;
}

.mainContentTable table > tbody > tr:nth-child(even) > td,
.subContentTable table > tbody > tr:nth-child(even) > td,
.popupContentTable table > tbody > tr:nth-child(even) > td {
	background-color: #f9f9f9;
}
.popupTableBox .popupContentTable table > tbody > tr:nth-child(odd) > td {
	background-color: #fff;
}
.popupTableBox .popupContentTable table > tbody > tr:nth-child(even) > td {
	background-color: #f9f9f9;
}

.mainContentTable tbody > tr:hover > td,
.subContentTable tbody > tr:hover > td,
.popupContentTable tbody > tr:hover > td {
	background-color: #f0f0f0 !important;
}

.mainContentTable tbody > tr.SelectTr > td,
.subContentTable tbody > tr.SelectTr > td,
.popupContentTable tbody > tr.SelectTr > td {
	background-color: #fff9d2 !important;
}

.popupContentTable tbody > tr:hover > td.BLblue {
    background-color:#d4e9ff !important;
}

.popupContentTable img {
	max-width: 80px;
}

.mainContentTable td a,
.subContentTable td a {
	font-size: 13px;
}

@media screen and (max-width: 767px) {
	.mainContentTable.student colgroup > col:last-child {
		width: 110px !important;
	}
	.mainContentTable.point colgroup > col:nth-child(3) {
		width: 100px !important;
	}
}

@media screen and (max-width: 479px) {
	.mainContentTable colgroup > col:first-child {
		width: 42px !important;
	}
	.mainContentTable.notice colgroup > col:last-child,
	.mainContentTable.archive colgroup > col:last-child,
	.mainContentTable.system colgroup > col:last-child {
		width: 70px !important;
	}
}

.ascendingOrder,
.descendingOrder,
.noneOrder {
    position: absolute;
    top: 50%;
    /* right: 15px; */
    right: -10px;
    width: 5px;
    height: 5px;
    transform: translate(0, -50%);
}
.ascendingOrder:before,
.descendingOrder:before,
.noneOrder:before {
    position: absolute;
    top: -5px;
    left: 0;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #fff;
    border-left: 5px solid transparent;
    content: "";
}
.descendingOrder:before {
    top: 0;
    border-top: 5px solid #fff;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
}
.noneOrder:before {
    top: -1px;
    border: 3px solid #f9f9f9;
    border-radius: 50%;
}
.ascendingOrder span,
.descendingOrder span,
.noneOrder span {
    display: block;
    text-indent: -9999px;
}

.pointLayer .popupContentTable {
	padding-top: 0;
}

.pointLayer .popupContentTable tr:first-child td {
	border-top: 1px solid #dedede;
}

.popupContentWriteTable {
	position: relative;
	display: block;
	padding: 15px;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
}

.academyInfo  .popupContentWriteTable {
	width: calc(100% - 150px);
}

.popupContentWriteTable table {
	table-layout: fixed;
}

.popupContentWriteTable th {
	height: 32px;
	padding: 5px 10px;
	font-weight: bold;
	color: #000;
	background-color: #f0f0f0;
	border-bottom: 1px solid #dedede;
}
.popupContentWriteTable td {
	height: 42px;
	padding: 3px 10px;
	font-weight: bold;
	color: #5d5d5d;
	border-bottom: 1px solid #dedede;
}
.popupContentWriteTable tr:first-child > th,
.popupContentWriteTable tr:first-child > td {
	border-top: 1px solid #dedede;
}

ul.subImgContentList,
ul.popupImgContentList {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(20%, auto));
    gap: 20px;
    width: 100%;
    max-height: calc(100vh - 124px);
    box-sizing: border-box;
}
ul.subImgContentList li:nth-child(4n),
ul.popupImgContentList li:nth-child(4n) {
    padding-right: 5px;
}
.videoImgBox {
    position: relative;
    display: block;
    width: 100%;
    height: calc(100vh/4) ;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.1);
    box-sizing: border-box;
}
.videoImgInBox {
    position: relative;
    display: flex;
	justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    overflow: hidden;
}
.videoImgInBox:before {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 42px;
    color: #3c93ef;
    text-shadow: 0 3px 3px rgba(0,0,0,0.2);
    content: "\e90f";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}
.videoImgInBox.stop span {
    position: absolute;
    z-index: 20;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    font-weight: bold;
    color: #e05400;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    font-family: 'Noto Sans KR', sans-serif;
}
.videoImgInBox.stop:before {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255,255,255,0.3);
    content: "";
}
.videoImgBox img {
    max-height: 150%;
}
.videoImgInBox.stop img {
    opacity: 0.5;
}
.videoTitleBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
}
a.videoImgLink:link,
a.videoImgLink:visited,
a.videoImgLink:hover,
a.videoImgLink:active {
    width: calc(100% - 65px);
    height: 42px;
}
.videoImgTitle {
    position: relative;
    display: inline-block;
    max-width: 100%;
    height: 42px;
    line-height: 42px;
    padding: 0;;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
.videoTitleBox .modifyBtn {
    margin-left: auto;
    font-size: 12px;
    border-radius: 32px;
    height: 24px;
}

.mainIconBox {
	position: relative;
	display: flex;
	justify-content: center;
}

.mainLinkBox,
.mainMessageBox,
.mainCounselBox {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.mainMessageBox,
.mainCounselBox {
	flex-direction: row;
	flex-wrap: wrap;
}

.mainTitleBox {
	position: relative;
	display: flex;
	width: 100%;
}
a.mainTitleLink:link,
a.mainTitleLink:visited,
a.mainTitleLink:active,
a.tableLink:link,
a.tableLink:visited,
a.tableLink:active {
	position: relative;
    display: block;
	max-width: 100%;
    padding: 0;;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
a.tableLink:link,
a.tableLink:visited,
a.tableLink:active {
	display: inline-block;
	max-width: calc(100% - 67px);
}
a.mainTitleLink:hover,
a.tableLink:hover {
	color: #00a2ff;
}

a.mainLink:link,
a.mainLink:visited,
a.mainLink:active {
	position: relative;
    display: block;
    width: 100%;
    padding: 0;;
    font-size: 13px;
    color: #9d9d9d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
a.mainLink:hover {
	color: #00a2ff;
}

.mainTitleBox span {
	display: flex;
	flex-shrink: 0;
}

.mainContentBox {
	position: relative;
    display: block;
    width: 100%;
    padding-top: 5px;
    font-size: 13px;
    color: #9d9d9d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.mainMessageBox strong {
	color: #000;
}
.point strong {
	font-size: 14px;
	color: #000;
}

.checkDateBox {
	position: relative;
	display: flex;
	flex-shrink: 0;
	flex-wrap: wrap;
	justify-content: center;
	width: 90px;
}

.point .checkDateBox,
.student .checkDateBox {
	width: 160px;
}

@media screen and (max-width: 767px) {
	.point .checkDateBox {
		flex-shrink: 1;
		width: 90px;
		margin-left: auto;
	}
	.student .checkDateBox {
		width: 95px;
	}
}
@media screen and (max-width: 479px) {
	.student .checkDateBox {
		width: 85px;
	}
}

.checkDateBox span {
	display: flex;
	flex-wrap: wrap;
	margin: 2px 0;
	text-align: center;
}

.checkDateBox strong {
	width: 100%;
}

.mainScheduleBox {
	font-family: 'Roboto', sans-serif;
}

.mainImgAllBox {
	position: relative;
	display: flex;
	justify-content: center;
    align-items: center;
	width: 58px;
	height: 58px;
}

.mainImgBox {
	position: relative;
	display: flex;
	justify-content: center;
    align-items: center;
	width: 45px;
	height: 45px;
	margin: 0 auto;
	border: 1px solid #dedede;
	border-radius: 2px;
	box-sizing: border-box;
    overflow: hidden;
}

.helperStatus .mainImgBox,
.chattingStatus .mainImgBox {
	display: flex;
	flex-shrink: 0;
	width: 58px;
	height: 58px;
	margin: 0;
	background-color: #e7e7e7;
	border-radius: 50%;
}

.chattingStatus .mainImgBox.on {
	position: absolute;
	z-index: 10;
	width: 38px;
	height: 38px;
}
.chattingStatus .mainImgBox.on:first-child {
	top: 0;
	left: 0;
}
.chattingStatus .mainImgBox.on:last-child {
	right: 0;
	bottom: 0;
}

.mainImgBox img {
	width: 100%;
}

.mainNumBox {
	position: absolute;
	z-index: 10;
	top: 5px;
	left: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0 5px;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
	background-color: #009cff;
	border-radius: 24px;
	transform: translate(10px, -10%);
	font-family: 'Roboto', sans-serif;
}

.joinBarBox {
	position: relative;
	display: flex;
    align-items: center;
}

.joinNumBox {
	display: flex;
	flex-shrink: 0;
	justify-content: flex-end;
	width: 50px;
	margin-right: 10px;
	font-size: 14px;
	font-weight: bold;
	color: #9d9d9d;
	font-family: 'Roboto', sans-serif;
}

.progress-container {
	display: inline-block;
	width: calc(100% - 32px);
}

.progress {
	height: 1.7rem;
	background-color: transparent;
	border-radius: 0;
}

.progress-bar {
	background-color: #dedede;
}

.progress.active .progress-bar {
    -webkit-transition: none !important;
    transition: none !important;
}

.statusOn,
.statusReady,
.statusConfirm,
.statusEnd {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-size: 13px;
	font-weight: bold;
	color: #000;
}
.statusOn {
	color: #00a7ff;
}
.statusReady {
	color: #5eaa0d;
}
.statusConfirm {
	color: #ffae00;
}
.statusEnd {
	color: #ff4800;
}

.mainDateBox,
.mainPriceBox {
	display: block;
	width: 100px;
	text-align: right;
	font-size: 15px;
	font-family: 'Roboto', sans-serif;
}

.mainHelperNumBox {
	font-family: 'Roboto', sans-serif;
}

a.helperLink:link,
a.helperLink:visited,
a.helperLink:hover,
a.helperLink:active,
a.chattingLink:link,
a.chattingLink:visited,
a.chattingLink:hover,
a.chattingLink:active {
	position: relative;
	display: flex;
	align-items: center;
}

.helperInfoBox {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	margin-left: 10px;
}

.helperInfoBox span:first-child {
	display: flex;
	flex-shrink: 0;
	width: 100%;
	margin-bottom: 5px;
	font-weight: bold;
}

.myIntroBox,
.myChattingBox {
	position: relative;
    display: -webkit-box;
    width: 100%;
    text-align: left;
    font-size: 13px;
    color: #9d9d9d;
    overflow: hidden;
    word-break: break-all;
    font-weight: normal;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    line-height: 1.5em;
    min-height: 1em;
    box-sizing: border-box;
}

.unReadChattingBox {
	position: relative;
	display: flex;
	align-items: center;
	height: 26px;
	margin-left: 10px;
	font-size: 14px;
	font-weight: bold;
}

.unReadChattingBox span,
.myUnReadChattingBox {
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 26px;
    height: 26px;
	margin-left: 5px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    background-color: #009cff;
    border-radius: 26px;
	box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.myUnReadChattingBox {
	display: inline-flex;
}

.myInfoBox {
	position: relative;
	display: flex;
	align-items: center;
}

.myInfoBox span {
	height: 20px;
	margin-bottom: 5px;
}

.myInfoBox span:nth-child(1) {
	position: relative;
    display: block;
	width: 150px;
	text-align: left;
  	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
    box-sizing: border-box;
}

.myInfoBox span:nth-child(2) {
	margin-left: 5px;
	font-size: 15px;
	font-weight: bold;
	color: #000;
}

.chattingTimeBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 32px;
	font-size: 15px;
	font-weight: bold;
	font-family: 'Roboto', sans-serif;
}

.chattingInfoBox {
	position: relative;
	margin: 0 auto;
}

/* ------------------------- */
/*            sub            */
/* ------------------------- */
.subSearchBox,
.popupSearchBox,
.popupSearchBottomBox {
	position: relative;
	display: flex;
	align-items: center;
	width: calc(100% - 30px);
	min-height: 50px;
	margin: 15px 15px 0;
	padding: 10px;
	background-color: #f9f9f9;
	border: 1px solid #dedede;
	box-sizing: border-box;
}
/*
.subSearchBox .Lblue {
	margin-top: 2px;
}
*/
.vocabChangePopup .popupSearchBox {
	flex-direction: column;
	align-items: flex-start;
}
.popupSearhTitle {
	position: relative;
	display: flex;
    align-items: center;
	padding-left: 20px;
    height: 32px;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Noto Sans KR', sans-serif;
}
.vocabChangePopup .popupSearhTitle {
	display: block;
	min-height: 22px;
	margin-bottom: 10px;

}
.popupSearhTitle:before {
	position: absolute;
    z-index: 10;
    top: 50%;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    height: 15px;
    border: 3px solid #666;
    border-radius: 50%;
    transform: translateY(-50%);
    content: "";
}
.vocabChangePopup .popupSearhTitle:before {
	top: 4px;
	transform: translateY(0);
}
.popupSearchTextBox {
	position: relative;
	display: flex;
	width: calc(100% - 30px);
	min-height: 42px;
	margin: -2px auto;
	background-color: #eefff6;
	border: 1px solid #dedede;
	border-radius: 0 0 15px 15px;
}
.popupSearchTextBox .popupSearchTextTitle {
	display: inline-flex;
	flex-shrink: 0;
	flex-grow: 1;
	align-items: center;
	max-width: 200px;
	min-height: 42px;
	padding: 0 20px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	background-color: #6a768f;
	border-radius: 0 0 0 14px;
}
.popupSearchTextBox .popupSearchTextEx {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
	padding: 10px;
	box-sizing: border-box;
}
.popupSearchTextBox .popupSearchTextEx span {
	padding: 0 5px;
}
.reservationPopup .popupSearchBox {
	align-items: center;
}
.popupSearchBottomBox {
	width: 100%;
	margin: 15px 0 0;
}
.popupSearchBottomBox span {
	flex-shrink: 0;
}
.studentReceive .popupSearchBottomBox {
	flex-direction: column;
}
.tuitionModifyPopup .popupSearchBox {
	flex-direction: column;
}
.textbookModifyPopup .popupSearchBox,
.etcReceiptModifyPopup .popupSearchBox {
	justify-content: center;
}
.paymentManage .subSearchBox {
	padding: 0;
}
.textbookListBox .subSearchBox {
	width: 100%;
	margin: 0 0 5px;
}
.endCourseModifyPopup .popupSearchBox {
	margin: 15px;
}
.companyStudentPopup .popupSearchBox {
	padding: 5px;
}
.assignClassPopup .popupSearchBox {
	justify-content: center;
}

ul.subSearchList,
ul.popupSearchList {
	position: relative;
	display: flex;
	width: 100%;
}
.bookOrderListPopup ul.popupSearchList,
.bookListPopup ul.popupSearchList {
	width: auto;
}

.monthMemberSearchPopup ul.subSearchList,
.monthReservationSearchPopup ul.subSearchList {
	flex-shrink: 0;
    width: 515px;
}
.textbookModifyPopup ul.popupSearchList {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(0,auto));
	/* justify-content: center; */
}
.registrationListPopup ul.subSearchList {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12%,auto));
}
.paymentManage ul.subSearchList,
.companyStudentPopup ul.popupSearchList,
.studentReservationModifyPopup ul.popupSearchList {
	justify-content: center;
}
.tuitionModifyPopup ul.popupSearchList,
.etcReceiptModifyPopup ul.popupSearchList,
.endCourseModifyPopup ul.popupSearchList,
.studentAttendancePopup ul.popupSearchList,
.classReportPopup ul.popupSearchList {
	justify-content: center;
	align-items: center;
}

ul.subSearchList li,
ul.popupSearchList li {
	position: relative;
	display: flex;
	/* flex-grow: 1;
	width: 10%; */
	margin-left: -1px;
}
.paymentManage ul.subSearchList li,
.companyStudentPopup ul.popupSearchList li,
.tuitionModifyPopup ul.popupSearchList li,
.etcReceiptModifyPopup ul.popupSearchList li,
.endCourseModifyPopup ul.popupSearchList li,
.studentReservationModifyPopup ul.popupSearchList li,
.searchListTopBox ul.popupSearchList li,
.searchListBottomBox ul.popupSearchList li {
	align-items: center;
}
.tuitionModifyPopup ul.popupSearchList li,
.etcReceiptModifyPopup ul.popupSearchList li,
.endCourseModifyPopup ul.popupSearchList > li,
.studentReservationModifyPopup ul.popupSearchList > li {
	margin: 0 5px;
}
.tuitionModifyPopup ul.popupSearchList li .selectBox {
	margin: 0 5px;
}
.tuitionModifyPopup ul.popupSearchList li span,
.etcReceiptModifyPopup ul.popupSearchList li span {
	margin: 0 5px;
}
.tuitionModifyPopup ul.popupSearchList li button {
	margin: 0 3px;
}
.tabTransfer ul.popupSearchList li {
	margin: 0 10px;
}
.registrationListPopup ul.subSearchList li {
	justify-content: flex-start;
}
ul.subSearchList li:first-child {
	flex-grow: 0;
	/* width: 140px;*/
}

.registrationListPopup ul.subSearchList li:first-child,
.paymentManage ul.subSearchList li:first-child,
.textbookListBox ul.subSearchList li:first-child,
.bookOrderListPopup ul.subSearchList li:first-child {
	width: auto;
}
.companyRegister ul.subSearchList li:nth-last-child(2) {
	align-items: center;
}

.textbookModifyPopup ul.popupSearchList li {
	align-items: center;
	margin: 0 10px;
}
.textbookModifyPopup ul.popupSearchList li span {
	margin-right: 10px;
}

.subSearchTitle input[type="checkbox"] + label,
.subSearchTitle input[type="checkbox"] + label:before,
ul.subSearchInList.checks input[type="checkbox"] + label,
ul.subSearchInList.checks input[type="checkbox"] + label:before,
ul.classInList.checks input[type="checkbox"] + label,
ul.classInList.checks input[type="checkbox"] + label:before,
.popupContentChecks.checks input[type="checkbox"] + label,
.popupContentChecks.checks input[type="checkbox"] + label:before {
	height: 24px;
    line-height: 24px;
	background-color: #fff;
}
.subSearchTitle input[type="checkbox"] + label,
.subSearchTitle input[type="checkbox"] + label:before {
	background-color: transparent;
}
.subSearchTitle input[type="checkbox"] + label:before,
ul.subSearchInList.checks input[type="checkbox"] + label:before,
ul.classInList.checks input[type="checkbox"] + label:before,
.popupContentChecks.checks input[type="checkbox"] + label:before {
	top: 0px;
	height: 22px;
}

.subSearchTitle .checks input[type="checkbox"]:checked + label:before,
ul.subSearchInList.checks input[type="checkbox"]:checked + label:before,
ul.classInList.checks input[type="checkbox"]:checked + label:before,
.popupContentChecks.checks input[type="checkbox"]:checked + label:before {
	background-color: #fff;
}
ul.subSearchList li:last-child ul.subSearchInList li {
	align-items: center;
}
ul.subSearchList li ul.checks li {
	width: auto;
}
ul.subSearchList > li:nth-child(even) > .subSearchInBox {
	background-color: #f9f9f9;
}
.vocabList ul.subSearchList li {
	flex-grow: 1;
	width: auto;
}
.vocabList ul.subSearchList li:first-child {
	margin-left: 0;
}
ul.subSearchList li.on {
	z-index: 10;
	border: 1px solid #ff6d1b;
}
.vocabList ul.subSearchInList {
	display: flex;
	flex-wrap: wrap;
}
.vocabList ul.subSearchInList li {
	position: relative;
    display: flex;
	flex-grow: 0;
    width: auto;
    margin: 3px 0;
}
ul.subSearchInList.paymentBox li,
ul.popupSearchInList.searchBox li {
	display: flex;
	align-items: baseline !important;
}

.subSearchInBox,
.popupSearchInBox {
	position: relative;
	display: block;
	width: 100%;
	background-color: #fff;
	border: 1px solid #dedede;
}
.endCourseModifyPopup .popupSearchInBox,
.studentReservationModifyPopup .popupSearchInBox {
	background-color: transparent;
	border: none;
}
.textbookModifyPopup .popupSearchInBox:first-child,
.etcReceiptModifyPopup .popupSearchInBox:first-child {
	width: calc(100% - 400px);
	padding: 10px;
	box-sizing: border-box;
}
.textbookModifyPopup .popupSearchInBox:last-child,
.etcReceiptModifyPopup .popupSearchInBox:last-child {
	width: 200px;
	/* margin-left: auto; */
	background-color: transparent;
	border: none;
}
.etcReceiptModifyPopup .popupSearchInBox:last-child {
	display: flex;
	align-items: center;
}
.vocabList .subSearchInBox ul.subSearchInList {
	flex-direction: row;
}
.vocabList ul.subSearchList li:last-child ul.subSearchInList {
	margin: 0 15px;
	padding-top: 0;
}
.subSearchTitle,
.popupSearchTitle {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 38px;
	padding: 0 10px;
	color: #5d5d5d;
	background-color: #f0f0f0;
	border-bottom: 1px solid #dedede;
	box-sizing: border-box;
	overflow: hidden;
}
.subSearchTitle span,
.popupSearchTitle span {
	display: flex;
	flex-shrink: 0;
}

ul.subSearchInList,
ul.popupSearchInList {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 5px;
	box-sizing: border-box;
}
.testTable ul.subSearchInList {
	padding: 0;
}
.searchListBottomBox ul.popupSearchInList {
	flex-direction: row;
}
.rowBox ul.subSearchInList {
	/* flex-direction: row; */
	flex-wrap: wrap;
}
.refundBankBox ul.popupSearchInList {
	flex-direction: row;
}
.refundBankBox ul.popupSearchInList li span {
	flex-shrink: 0;
}
ul.subSearchInList li,
ul.popupSearchInList li {
	width: 100%;
	margin: 2px 0;
}
.refundBankBox ul.popupSearchInList li {
	width: auto;
}
.rowBox ul.subSearchInList li {
	width: auto;
	margin: 2px;
}
.textInput {
	position: relative;
	display: block;
	width: 100%;
	padding: 0 10px;
	height: 32px;
	background-color: #fffef3;
	border: 1px solid #dedede;
	border-radius: 5px;
	box-sizing: border-box;
}
.textInput.W300P {
    width: 365px !important;
}
.inputDark {
    color: #fff;
    background-color: #181d3d;
    border: 1px solid #acacac;
}
.taskBottomBtnBox .textInput {
	width: 150px;
}
.textareaBox {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0 10px;
	background-color: #fffef3;
	border: 1px solid #dedede;
	border-radius: 5px;
	box-sizing: border-box;
}
.tabContentTable.checks .textareaBox {
	height: calc(100% - 18px);
}
.retrySearchPopup .textareaBox {
	padding: 10px;
}
.searchRadioBox {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0 10px;
}
.searchRadioBox label {
	margin-top:  -1px;
}
.checks .searchRadioBox label:nth-child(2) {
	border-radius: 10px 10px 0 0;
}
.checks .searchRadioBox label:last-child {
	border-radius: 0 0 10px 10px;
}
.subSearchBtn {
    height: 32px;
    margin: 0 auto;
    padding: 0 15px;
    color: #fff;
    background-color: #5f6271;
    border: none;
}
.bookOrderListPopup .subSearchBtn,
.bookListPopup .subSearchBtn {
	margin: 0;
}
.subSMSSendBtn {
	height: 32px;
    margin: 0 auto;
    padding: 0 25px;
    color: #fff;
    background-color: #c55731;
    border: none;
}
.retrySearchPopup .subSMSSendBtn {
	margin: 0;
}
.questionTypeBox,
.textbookTitlebox,
.classInfoTitleBox,
.classInfoMemoBox {
	position: relative;
    display: block;
    width: 100%;
    font-size: 13px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
.logViewBtn {
	height: 24px;
    padding: 0 7px;
    color: #5bacd6;
    background-color: #fff;
    border: 1px solid #5bacd6;
}

.searchViewBtn {
	min-width: 28px;
	height: 28px;
	color: #4fd9a0;
	background-color: #fff;
    border: 1px solid #4fd9a0;
	border-radius: 50%;
}
.searchViewBtn span {
	display: block;
	text-indent: -9999px;
}
.searchViewBtn:before {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 25px;
	height: 27px;
	font-size: 12px;
	color: #4fd9a0;
	content: "\e90f";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}
.iconViewBtn {
	display: inline-flex;
	min-width: 18px;
	height: 18px;
    margin-right: 5px;
	color: #fff;
	background-color: #39a6eb;
    border: none;
	border-radius: 50%;
}
.iconViewBtn span {
	display: block;
	text-indent: -9999px;
}
.iconViewBtn:before {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 18px;
	height: 20px;
	font-size: 10px;
	color: #fff;
	content: "\e90f";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}
.wishListBtn {
	min-width: 28px;
	height: 28px;
	color: #ff6b6b;
	background-color: #fff;
    border: 1px solid #ff6b6b;
	border-radius: 50%;
}
.wishListBtn span {
	display: block;
	text-indent: -9999px;
}
.wishListBtn:before {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 27px;
	height: 30px;
	font-size: 15px;
	color: #ff6b6b;
	content: "\e928";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}
.studentBtn {
	display: flex;
	min-width: auto;
	width: 24px;
    height: 24px;
	border: none;
}
.studentBtn:before {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	font-size: 24px;
	color: #ffcc00;
	content: "\e925";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.studentBtn span {
	display: block;
	text-indent: -9999px;
}
.tabResetBtn {
	position: relative;
	display: flex;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	background-color: #fff;
	border: 1px solid #acacac;
	border-radius: 50%;
}
.tabResetBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	font-size: 16px;
	color: #2d2d2d;
	content: "\e920";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.tabResetBtn span {
	display: block;
	text-indent: -9999px;
}
.searchModifyBtn {
	min-width: 28px;
	height: 28px;
	color: #ff6b6b;
	background-color: #fff;
    border: 1px solid #ff6b6b;
	border-radius: 50%;
}
.searchModifyBtn span {
	display: block;
	text-indent: -9999px;
}
.searchModifyBtn:before {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	font-size: 14px;
	color: #ff6b6b;
	content: "\e91e";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}

.voiceBtn {
	min-width: 28px;
	height: 28px;
	color: #d96bff;
	background-color: #fff;
    border: 1px solid #d96bff;
	border-radius: 50%;
}
.voiceBtn span {
	display: block;
	text-indent: -9999px;
}
.voiceBtn:before {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	font-size: 14px;
	color: #d96bff;
	content: "\e91f";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}

.realViewBtn,
.copiedAllocateBtn {
	height: 24px;
    padding: 0 7px;
    color: #fff;
    background-color: #b278ff;
    border: none
}
.testViewBtn {
	height: 24px;
    padding: 0 7px;
    color: #fff;
    background-color: #4f5b64;
    border: none
}
.wordSearchBtn {
	height: 32px;
    padding: 0 20px;
    color: #fff;
    background-color: #4f5b64;
    border: none
}
.applyCloseBtn {
	height: 32px;
    padding: 0 20px;
    color: #ff5c0c;
    background-color: #fff;
    border: 1px solid #ff5c0c;
}

.writeBtn {
	position: fixed;
	z-index: 30;
    right: 20px;
    bottom: 30px;
    min-width: 62px;
    height: 62px;
    font-size: 14px;
	color: #fff;
    background-color: #27b1f1;
    border: none;
    border-radius: 50%;
    box-shadow: 3px 3px 10px rgb(0,0,0,0.2);
    transition: all 0.3s;
    font-family: 'Roboto', sans-serif;
}
.writeBtn span {
	display: block;
	text-indent: -9999px;
}
.writeBtn:before {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 62px;
	height: 62px;
	font-size: 24px;
	color: #fff;
	content: "\e91d";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}
.wordRegiterBtn {
	position: fixed;
	z-index: 999;
    right: 20px;
    bottom: 30px;
    min-width: 62px;
    height: 62px;
    font-size: 14px;
	color: #fff;
    background-color: #27b1f1;
    border: none;
    border-radius: 50%;
    box-shadow: 3px 3px 10px rgb(0 0 0 / 20%);
    transition: all 0.3s;
    font-family: 'Roboto', sans-serif;
}

.alphabetSelectBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 32px;
	padding: 0 30px;
	background-color: #fffae4;
	border: 1px solid #dedede;
}
a.alphabetLink {
	position: relative;
	width: 12px;
	margin: 0 3px;
	padding: 0 2px;
	text-decoration: underline;
	box-sizing: border-box;
}
a.alphabetLink:after {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 50%;
	margin-left: 7px;
	color: #666;
	content: "/";
}
a.alphabetLink:last-child:after {
	content: "";
}
.listScrollBox {
	position: relative;
	display: block;
	height: 140px;
}
.monthMemberSearchPopup .listScrollBox,
.monthReservationSearchPopup .listScrollBox {
	height: 198px;
}
/*
.listScrollBox {
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: calc(100% - 37px);
}
*/
.categoryBox {
	/* width: 272px; */
	/* padding: 5px; */
	border: 1px solid #dedede;
	background-color: #e0f8ff;
	/* border-bottom: 1px solid #dedede; */
	box-sizing: border-box;
}
/*
.categoryBox .listScrollBox {
	height: 128px;
}
*/
.classifiedSearchPopup .listScrollBox {
	height: 94px;
    border: 1px solid #acacac;
}
.categoryBox .subCategoryInBox {
	width: 130px;
	/* margin-left: -1px; */
	border-right: 1px solid #dedede;
}
.categoryBox .subCategoryInBox:last-child {
	border-right: none;
}
.categoryBox .subCategoryInBox.on {
	z-index: 10;
	border: 1px solid #ff6d1b;
	box-sizing: border-box;
}
.subScrollBox {
	position: relative;
	display: block;
	margin: 15px;
	max-height: calc(100vh - 371px) !important;
}
.vocabList .subScrollBox {
	max-height: calc(100vh - 302px) !important;
}
.mockTest .subScrollBox {
	max-height: calc(100vh - 236px) !important;
}
.LCList .subScrollBox,
.companyRegister .subScrollBox {
	max-height: calc(100vh - 359px) !important;
}
.noticeList .subScrollBox {
	max-height: calc(100vh - 236px) !important;
}
.paymentManage .subScrollBox {
	max-height: calc(100vh - 295px) !important;
}
dl.classInListBox .subScrollBox {
	width: 100%;
	margin: 0;
	max-height: calc(100vh - 248px) !important;
}
.subScrollBox.taskScrollBox {
	width: 100%;
	margin: 0;
	height: calc(40vh - 83px) !important;
	overflow: auto;
}
.subScrollBox.taskScrollInBox {
	width: 100%;
	margin: 0;
	height: calc(40vh - 150px) !important;
	overflow: auto;
}
.subScrollBox.testScrollBox {
	/* width: 100%; */
	/* margin: 0; */
	max-height: calc(100vh - 149px) !important;
	overflow: auto;
}
.subScrollBox.testScrollInBox {
	/* width: 100%; */
	/* margin: 0; */
	max-height: calc(100vh - 159px) !important;
	overflow: auto;
}
.searchResultBox .subScrollBox {
    max-height: calc(100vh - 90px) !important;
}
.registrationListPopup .registerationListTable .subScrollBox {
	width: 100%;
	margin: 0;
	max-height: calc(100vh - 366px) !important;
    border-bottom: 1px solid #dedede;
}
.contentSetMenuMakePopup .subScrollBox {
	margin: 0;
}
ul.homeworkCheckBox {
	position: relative;
	display: flex;
	width: calc(100% - 400px);
	margin: 0;
	color: #000;
}
ul.homeworkCheckBox li {
	display: flex;
	justify-content: center;
	width: 50%;
}
ul.homeworkCheckBox label {
	font-size: 13px;
	font-weight: bold;
}

.checkTotal {
	position: relative;
	display: flex;
	margin: 0 5px;
	color: #000;
}
.checkTotal label {
	font-size: 13px;
	font-weight: bold;
}

.subSearchTitle .checks input[type="checkbox"] + label,
.popupContentChecks.checks input[type="checkbox"] + label,
.tabContentLeftBox .checks input[type="checkbox"] + label,
.textbookTable .checks input[type="checkbox"] + label,
.textbookTable2 .checks input[type="checkbox"] + label,
.textbookTitle .checks input[type="checkbox"] + label,
.textbookTable3 .checks input[type="checkbox"] + label,
.classInfoTable .checks input[type="checkbox"] + label,
.checkBoxLayer.checks input[type="checkbox"] + label,
dl.classInListBox dt .checks input[type="checkbox"] + label,
.registerationTable th .checks input[type="checkbox"] + label,
.vocabContentTable .checks input[type="checkbox"] + label,
.vocabContentTable th .checks input[type="checkbox"] + label,
.retrySearchPopup .subContentTable .checks input[type="checkbox"] + label {
	min-width: 21px;
	height: 22px;
	padding: 0;
	background-color: transparent;
	border: none;
	box-shadow: none;
	text-indent: -9999px;
}

dl.classInListBox dt .checks input[type="checkbox"] + label,
.registerationTable th .checks input[type="checkbox"] + label {
	text-indent: 20px;
}

.tabContentLeftBox .checkTotal.checks input[type="checkbox"] + label,
.tabContentLeftBox .checkList.checks input[type="checkbox"] + label,
.textbookTable .checkTotal.checks input[type="checkbox"] + label,
.textbookTable .checkList.checks input[type="checkbox"] + label,
.textbookTable2 .checkTotal.checks input[type="checkbox"] + label,
.textbookTable2 .checkList.checks input[type="checkbox"] + label,
.textbookTitle .checkTotal.checks input[type="checkbox"] + label,
.textbookTitle .checkList.checks input[type="checkbox"] + label,
.textbookTable3 .checkTotal.checks input[type="checkbox"] + label,
.textbookTable3 .checkList.checks input[type="checkbox"] + label,
.classInfoTable .checkTotal.checks input[type="checkbox"] + label,
.classInfoTable .checkList.checks input[type="checkbox"] + label
{
	padding: 0 0 0 25px;
	background-color: transparent;
}
.textbookTitle .checkTotal.checks input[type="checkbox"] + label {
	padding-left: 25px;
}
.textbookTable .checkTotal.checks input[type="checkbox"] + label,
.textbookTable2 .checkTotal.checks input[type="checkbox"] + label,
.textbookTable3 .checkTotal.checks input[type="checkbox"] + label,
.classInfoTable .checkTotal.checks input[type="checkbox"] + label {
	color: #fff;
}
.subSearchTitle .checks input[type="checkbox"] + label:before,
.popupContentChecks.checks input[type="checkbox"] + label:before,
.tabContentLeftBox .checks input[type="checkbox"] + label:before,
.textbookTable .checks input[type="checkbox"] + label:before,
.textbookTable2 .checks input[type="checkbox"] + label:before,
.textbookTitle .checks input[type="checkbox"] + label:before,
.textbookTable3 .checks input[type="checkbox"] + label:before,
.classInfoTable .checks input[type="checkbox"] + label:before,
.checkBoxLayer.checks input[type="checkbox"] + label:before,
dl.classInListBox dt .checks input[type="checkbox"] + label:before,
.registerationTable th .checks input[type="checkbox"] + label:before,
.vocabContentTable .checks input[type="checkbox"] + label:before,
.vocabContentTable th .checks input[type="checkbox"] + label:before,
.retrySearchPopup .subContentTable .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;
}
.tabContentLeftBox .checkTotal.checks input[type="checkbox"] + label:before,
.textbookTable .checkTotal.checks input[type="checkbox"] + label:before,
.textbookTable2 .checkTotal.checks input[type="checkbox"] + label:before,
.textbookTitle .checkTotal.checks input[type="checkbox"] + label:before,
.textbookTable3 .checkTotal.checks input[type="checkbox"] + label:before,
.classInfoTable .checkTotal.checks input[type="checkbox"] + label:before {
	top: -1px;
}
.subSearchTitle .checks input[type="checkbox"]:checked + label:before,
.popupContentChecks.checks input[type="checkbox"]:checked + label:before,
.tabContentLeftBox .checks input[type="checkbox"]:checked + label:before,
.textbookTable .checks input[type="checkbox"]:checked + label:before,
.textbookTable2 .checks input[type="checkbox"]:checked + label:before,
.textbookTitle .checks input[type="checkbox"]:checked + label:before,
.textbookTable3 .checks input[type="checkbox"]:checked + label:before,
.classInfoTable .checks input[type="checkbox"]:checked + label:before,
.checkBoxLayer.checks input[type="checkbox"]:checked + label:before,
dl.classInListBox dt .checks input[type="checkbox"]:checked + label:before,
.registerationTable th .checks input[type="checkbox"]:checked + label:before,
.vocabContentTable .checks input[type="checkbox"]:checked + label:before,
.vocabContentTable th .checks input[type="checkbox"]:checked + label:before,
.retrySearchPopup .subContentTable .checks input[type="checkbox"]:checked + label:before {
    /* content: '\2714'; */
    /* content: '\e90d'; */
    content: '\ea28';
	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;
}
.subSearchTitle .checks input[type="checkbox"] + label span,
.popupContentChecks.checks input[type="checkbox"] + label span,
.tabContentLeftBox .checks input[type="checkbox"] + label span,
.textbookTable .checks input[type="checkbox"] + label span,
.textbookTable2 .checks input[type="checkbox"] + label span,
.textbookTable3 .checks input[type="checkbox"] + label span,
.classInfoTable .checks input[type="checkbox"] + label span,
.checkBoxLayer.checks input[type="checkbox"] + label span,
.vocabContentTable .checks input[type="checkbox"] + label span,
.retrySearchPopup .subContentTable .checks input[type="checkbox"] + label span {
	display: block;
	text-indent: -9999px;
}

.tableLinkBox {
	position: relative;
	display: flex;
	align-items: center;
	height: 24px;
}
.pin {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 22px;
	height: 15px;
}
.pin span {
	display: block;
	text-indent: -9999px;
}
.pin:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 22px;
	height: 15px;
	font-size: 12px;
	color: #2f8dff;
	content: "\e921";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.newIcon {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 15px;
	padding: 0 10px;
	margin-left: 5px;
	font-size: 8px;
	color: #fff;
	background-color: #27b1f1;
	border-radius: 32px;
	font-family: 'Roboto', sans-serif;
}
ul.popupSearchRightList {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-left: 10px;
}
ul.popupSearchRightList li {
	display: flex;
	justify-content: center;
	margin: 3px 0;
}
.etcReceiptModifyPopup ul.popupSearchRightList li {
	align-items: center;
}
ul.popupSearchRightList li button {
	margin: 0 3px;
}

.classPopup {
	position: relative;
	display: block;
	min-width: 1370px;
	min-height: 100px;
	padding: 10px;
	box-sizing: border-box;
	overflow: hidden;
}

.topCloseBtn {
	position: absolute;
	z-index: 10;
	top: -10px;
	right: -10px;
	width: 30px;
	height: 30px;
	background-color: #35a1d8;
	border: none;
	border-radius: 50%;
	box-shadow: -2px 2px 3px rgba(0,0,0,0.3);
}
.topCloseBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	font-size: 14px;
	color: #fff;
	content: "\e90b";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
	transition: all 0.3s;
	transform: rotate(180deg);
}
.topCloseBtn.on:before {
	transform: rotate(0deg);
}

.topCloseBtn span {
	display: block;
	text-indent: -9999px;
}

.classTopInBox {
	position: relative;
    display: flex;
    width: 100%;
    height: 207px;
    background-color: #fff;
    box-sizing: border-box;
	transition: all 0.3s;
}
.classTopInBox.on {
    height: 32px;
    overflow: hidden;
    transition: all 0.3s;
}
.bottomContentBox {
	position: relative;
	display: block;
	transition: all 0.3s;
}
.classLoginBox {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 236px;
	background-color: #fbfbfb;
	border: 1px solid #dedede;
}
.classLoginTopBox {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
}
.loginInfoBox {
    position: relative;
    display: flex;
    width: 100%;
    height: 36px;
    box-sizing: border-box;
}
.loginInfoImgBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    font-size: 20px;
    color: #000;
    background-color: #fff;
    border: 1px solid #acacac;
	border-radius: 50%;
    overflow: hidden;
}
.loginInfoImgBox img {
	width: 36px;
}
.loginInfoNoimgBox {
	position: relative;
	width: 36px;
	height: 36px;
}
.loginInfoNoimgBox:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	font-size: 20px;
	color: #acacac;
	background-color: #fff;
	border: 1px solid #acacac;
	border-radius: 50%;
	content: "\ea26";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.loginInfoNoimgBox span {
    display: block;
    text-indent: -9999px;
}
.loginInfoTextBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 5px;
	font-size: 14px;
}
.loginInfoTextBox div {
	display: flex;
	align-items: baseline;
}
.loginMessageBox {
	position: relative;
	display: flex;
	align-items: center;
	height: 32px;
	font-size: 14px;
	color: #e44200;
	font-weight: bold;
	border-bottom: 1px dashed #acacac;
}
.messageNumBox {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 24px;
	height: 24px;
	font-size: 12px;
	font-weight: bold;
	color: #fff !important;
	background-color: #35a1d8;
	border-radius: 24px;
	font-family: 'Roboto', sans-serif;
}
.loginCampusBox {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 38px;
	color: #000;
}
.classMessageBtn,
.classCounselBtn,
.shortMemoBtn,
.classNoticeInputBtn,
.classNoticeViewBtn,
.checkedNoticeBtn,
.testPrintBtn,
.smsAllBtn,
.absenteeBtn,
.smsSendBtn,
.totalResetBtn,
.learnpiaAllocationBtn {
	position: relative;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	height: 24px;
	margin-left: 5px;
	padding: 4px 15px 0;
	font-size: 12px;
	color: #5d5d5d;
	background-color: #fff;
	border: 1px solid #acacac;
	border-radius: 24px;
	box-sizing: border-box;
}
.shortMemoBtn,
.smsAllBtn {
	display: inline-flex;
	align-items: center;
	padding: 0 15px;
}
.smsAllBtn {
	min-width: 115px;
	height: 28px;
	margin-left: 0;
	padding: 0 10px;
}
.absenteeBtn {
	padding: 0 15px;
	height: 28px;
	color: #fff;
	background-color: #e13030;
	border: none;
}
.classNoticeInputBtn,
.classNoticeViewBtn,
.totalResetBtn {
	flex-shrink: 0;
	align-items: center;
	height: 32px;
	padding: 0 15px;
}
.classCounselBtn,
.classMemeoBtn,
.checkedNoticeBtn,
.testPrintBtn {
	align-items: center;
	height: 32px;
	padding: 0 15px;
	color: #fff;
    background-color: #5f6271;
	border: none;
}
.smsSendBtn {
	width: 78px;
    height: 24px;
    margin-left: 0;
    padding: 0;
}
.totalResetBtn,
.learnpiaAllocationBtn {
	flex-shrink: 0;
	min-width: 50px;
	width: auto;
	height: 32px;
	padding: 0 20px;
	color: #336db6;
}

.quickMenuBox {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 234px;
	background-color: #fff;
}
.quickMenuTitle {
	position: relative;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	width: 100%;
	height: 31px;
	padding: 0 0 0 10px;
	font-size: 13px;
	font-weight: bold;
	color: #e44200;
	background-color: #fffea0;
	border-top: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
	box-sizing: border-box;
}

ul.quickMenuBtnList {
	position: relative;
	display: flex;
	flex-grow: 1;
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
}
ul.quickMenuBtnList li {
	position: relative;
	width: 50%;
	border-right: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
}
ul.quickMenuBtnList li:nth-child(2n) {
	border-right: none;
}
ul.quickMenuBtnList li:hover {
	background-color: #f9f9f9;
}
ul.quickMenuBtnList li:nth-last-child(1),
ul.quickMenuBtnList li:nth-last-child(2) {
	border-bottom: none;
}
ul.quickMenuBtnList li a {
	display: block;
	padding: 7px 5px;
	font-size: 12px;
}
ul.quickMenuBtnList li a:before {
	position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 28px;
    font-size: 11px;
    color: #363636;
    content: "\e912";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.quickPopupLayer {
	position: absolute;
	z-index: 50;
    top: 0;
    left: -1px;
	width: 270px;
	padding: 0;
	background-color: #fff;
	border: 1px solid #000;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
	box-sizing: border-box;
	display: none;
}

.quickPopupTitle {
	position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding-left: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
	background-color: #f9f9f9;
	border-bottom: 1px solid #acacac;
	box-sizing: border-box;
}

.classQuickCloseBtn {
	position: absolute;
	z-index: 10;
	top: 0;
    right: 0;
	width: 32px;
	height: 32px;
}
.classQuickCloseBtn span {
	display: block;
	text-indent: -9999px;
}
.classQuickCloseBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	font-size: 14px;
	color: #000;
	content: "\e915";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

ul.quickMenuList {
	position: relative;
	display: flex;
	flex-wrap: wrap;
}
ul.quickMenuList li {
	position: relative;
	flex-grow: 1;
	width: 50%;
	margin: -1px 0 0 -1px;
}
ul.quickMenuList li:hover {
	background-color: #f9f9f9;
}
ul.quickMenuList li a {
	display: block;
	padding: 7px 5px;
	font-size: 12px;
	border: 1px solid #acacac;
}
ul.quickMenuList li:nth-child(2n) a {
	border-right: none;
}
ul.quickMenuList li:last-child a {
	border-bottom: none;
}
ul.quickMenuList li a:before {
	position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 32px;
    font-size: 11px;
    color: #363636;
    content: "\e912";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.classInfoBox {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	width: 100%;
	background-color: #fff;
}
.classInfoBtnBox {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 10px;
}
.classInfoBtnBox button {
	margin: 0 3px;
}
.calendarBox {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 220px;
	box-sizing: border-box;
}

.calendarTopBox {
	position: relative;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	height: 32px;
	margin: 0 1px;
	background-color: #5f6271;
	border-bottom: 1px solid #dedede;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.monthPrevBtn,
.monthNextBtn {
	position: relative;
	display: flex;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
}

.monthPrevBtn:before,
.monthNextBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	font-size: 14px;
	color: #fff;
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.monthPrevBtn:before {
	content: "\e910";
}
.monthNextBtn:before {
	content: "\e912";
}

.monthPrevBtn span,
.monthNextBtn span {
	display: block;
	text-indent: -9999px;
}

.monthBox {
	position: relative;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	height: 28px;
	font-size: 15px;
	font-weight: bold;
	color: #fff;
}

.dateBox {
	position: relative;
	display: flex;
	align-items: center;
	height: 28px;
	margin-left: auto;
	font-size: 16px;
	font-weight: bold;
	color: #ffcc00;
}

.calendarTable {
	position: relative;
	display: block;
	font-family: 'Roboto', sans-serif;
}

.calendarTable th {
	height: 20px;
	text-align: center;
	font-weight: bold;
	font-size: 11px;
	color: #000;
	background-color: #fffad5;
	border-bottom: 1px solid #dedede;
}
.calendarTable td {
	height: 26px;
	text-align: center;
	font-size: 11px;
	color: #000;
	background-color: #fff;
	border-bottom: 1px solid #dedede;
}

.calendarTable td:nth-child(7n) {
	color: #2970c8;
}
.calendarTable td:nth-child(7n-6) {
	color: #d42828;
}

.todayBox {
	background-color: #fff0b2 !important;
}

.classDay {
	background-color: #edf7ff !important;
}

.classDay.on {
	background-color: #717983 !important;
}

.calendarTable td a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 23px;
	font-size: 11px;
	color: #000;
	font-family: 'Roboto', sans-serif;
}
.calendarTable td:nth-child(7n) a {
	color: #2970c8;
	font-family: 'Roboto', sans-serif;
}
.calendarTable td:nth-child(7n-6) a {
	color: #d42828;
	font-family: 'Roboto', sans-serif;
}

.classDay a {
	font-weight: normal !important;
	color: #000 !important;
}

.classDay.on a {
	color: #fff !important;
}

.classSelectBox {
	position: relative;
	display: flex;
	flex-shrink: 0;
	width: 300px;
	padding: 7px;
	background-color: #fbfbfb;
	border: 1px solid #dedede;
	box-sizing: border-box;
}

.classSelectInBox {
	width: 100%;
    height: 191px;
    margin: 0;
	border: 1px solid #acacac;
    overflow-x: hidden;
    overflow-y: auto;
}

ul.classSelectList {
}

ul.classSelectList li {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	height: 32px;
	padding: 0;
}

ul.classSelectList li a {
	color: #7d7d7d;
}

ul.classSelectList li a:hover {
	color: #0056b3;
}

ul.classSelectList li:nth-child(2n) {
	background-color: #f0f0f0;
}

ul.classSelectList li.selected {
	background-color: #aadeff;
}

a.clock:link,
a.clock:visited,
a.clock:hover,
a.clock:active {
	position: relative;
	width: 100%;
	display: block;
	height: 32px;
	line-height: 32px;
	padding-left: 32px;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;  /* 말줄임 적용 */
}

ul.classSelectList li.selected a {
	font-size: 13px;
	font-weight: bold;
	color: #000;
}

a.clock:before {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	font-size: 16px;
	color: #7d7d7d;
	content: "\e923";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

ul.classSelectList li.selected a.clock:before {
	color: #000;
}

a.noClock:link,
a.noClock:visited,
a.noClock:hover,
a.noClock:active {
	position: relative;
	width: 100%;
	display: block;
	height: 32px;
	line-height: 32px;
	padding-left: 32px;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;  /* 말줄임 적용 */
}

a.noClock:before {
	content: "";
}

.classSearchBox {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 42px;
	margin: 10px 0;
	background-color: #fff;
	border: 1px solid #acacac;
	border-radius: 36px;
}
.classSortingBox {
	width: 256px;
	height: 34px;
	background-color: #e4e4e4;
	border-right: 1px solid #acacac;
	border-top-left-radius: 36px;
	border-bottom-left-radius: 36px;
}
.searchBtnBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 10px;
    box-sizing: border-box;
}
.pointMinusBtn,
.pointPlusBtn {
	position: relative;
	display: flex;
	width: 28px;
	height: 28px;
	background-color: #ececec;
	border: 1px solid #acacac;
	box-sizing: border-box;
}
.pointMinusBtn:before,
.pointPlusBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	font-size: 12px;
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.pointMinusBtn:before {
	color: #ab2f2f;
	content: "\e924";
}
.pointPlusBtn:before {
	color: #5490bd;
	content: "\e90d";
}
.pointBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 28px;
    padding: 0 15px;
	font-size: 12px;
    border-top: 1px solid #acacac;
    border-bottom: 1px solid #acacac;
    box-sizing: border-box;
}

.saveMessageBox {
    position: relative;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    height: 40px;
    font-size: 14px;
    font-weight: bold;
    color: #ce3a3a;
}

.pointMinusBtn span,
.pointPlusBtn span {
	display: block;
	text-indent: -9999px;
}

.classResetBtn {
	position: relative;
	display: flex;
	flex-shrink: 0;
	width: 42px;
	height: 34px;
	margin-left: auto;
}
.classResetBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 42px;
	height: 34px;
	font-size: 20px;
	color: #2d2d2d;
	content: "\e920";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.classResetBtn span {
	display: block;
	text-indent: -9999px;
}

.classTabBox {
	position: relative;
	z-index: 10;
	display: flex;
	width: 100%;
	height: 38px;
	margin-bottom: -1px;
}

ul.tabs {
	position: relative;
	display: flex;
	margin-left: 1px;
}
ul.tabs li {
	margin-left: -1px;
}

a.tabBtn:link,
a.tabBtn:visited,
a.tabBtn:hover,
a.tabBtn:active {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 38px;
	padding: 0 15px;
    font-size: 13px;
    color: #9e9e9e;
	background-color: #fff;
	border: 1px solid #acacac;
	box-sizing: border-box;
}

a.tabSelected:link,
a.tabSelected:visited,
a.tabSelected:hover,
a.tabSelected:active {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 39px;
    font-size: 13px;
    font-weight: bold;
	color: #000;
    background-color: #f0f0f0;
	border: 1px solid #acacac;
	border-bottom: 1px solid #f0f0f0;
    box-sizing: border-box;
}

.classTabBtnBox {
	position: relative;
	display: flex;
	height: 34px;
	margin-left: auto;
}
.classTabBtnBox button {
	margin: 0 3px;
}

.goTopBtn {
    position: fixed;
    z-index: 20;
    top: 395px;
    right: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
    width: 32px;
	height: 32px;
    padding: 10px 0;
    background-color: rgba(255,255,255,.8);
    border: 1px solid #acacac;
    border-radius: 50%;
    color: #000;
    font-size: 15px;
}

.goBottomBtn {
    position: fixed;
    z-index: 20;
    top: 430px;
    right: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
    width: 32px;
	height: 32px;
    padding: 10px 0;
    background-color: rgba(255,255,255,.8);
    border: 1px solid #acacac;
    border-radius: 50%;
    color: #000;
    font-size: 15px;
}

.tabContentBox {
	position: relative;
	display: flex;
	width: 100%;
	height: calc( 100vh - 431px);
	font-size: 12px;
	overflow: hidden;
	transition: all 0.3s;
}
	.tabContentBox.on {
		height: calc( 100vh - 201px) !important;
		transition: all 0.3s;
	}
.tabContentInBox {
	position: relative;
	z-index: 5;
	display: flex;
	flex-grow: 1;
	width: 100%;
	background-color: #fff;
	border: 1px solid #acacac;
	overflow: auto;
	overflow-x: hidden;
	transition: all 0.3s;
}
.tabContentLeftBox {
	position: relative;
	display: block;
	width: 303px;
}
.tabContainer {
    position: relative;
    display: block;
    width: calc(100% - 400px);
}
.tabConttentLeftTopBox {
	position: relative;
	display: flex;
	align-items: center;
	width: 303px;
	height: 67px;
	background-color: #f0f0f0;
	border-bottom: 1px solid #acacac;
}
.tabContentLeftTable {
	position: relative;
	z-index: 10;
	display: block;
}
.tabContentLeftTable.on {
	margin-top: 56px;
}
.tabContentLeftTable td {
	height: 110px;
	padding: 3px;
	text-align: center;
	border-right: 1px solid #acacac;
	border-bottom: 1px solid #acacac;
	box-sizing: border-box;
}
.tabContentLeftTable table > tbody > tr:nth-child(even) > td,
.tabContentTable table > tbody > tr:nth-child(even) > td {
	background-color: #f9f9f9;
}
.tabContentLeftTable.checks input[type="checkbox"] + label:before {
	margin: 0;
}
.tabContentLeftTable label span {
	display: block;
	height: 0;
	text-indent: -9999px;
}
/*
.tabContentLeftTable tr:last-child td {
	border-bottom: none;
}
*/

.tatContentBtnBox {
	display: flex;
	flex-wrap: wrap;
	width: 99px;
	margin: 3px 0;
}
a.smallBtn:link,
a.smallBtn:visited,
a.smallBtn:hover,
a.smallBtn:active {
	display: inline-flex;
	width: 44px;
	height: 20px;
	margin: 2px;
	font-size: 12px;
	padding: 0;
}

a.mailBtn:link,
a.mailBtn:visited,
a.mailBtn:hover,
a.mailBtn:active {
	position: relative;
	display: flex;
	width: 100%;
	height: 20px;
}
a.mailBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: -10px;
	font-size: 16px;
	color: #2d2d2d;
	content: "\e922";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
a.mailBtn span {
	display: block;
	text-indent: -9999px;
}

.className {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 24px;
	font-size: 14px;
	color: #000;
	cursor: pointer;
}
.className:hover {
	text-decoration: underline;
}

.photoviewstudent {
	position: absolute;
	z-index: 40;
	top: -32px;
	left: 35px;
	width: 100px;
	height: 100px;
	background-color: #fff;
	border: 1px solid #acacac;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	overflow: hidden;
}
.photoviewstudent img {
	width: 100%;
}

.tabContentTopBox {
	position: relative;
	z-index: 20;
    display: flex;
	flex-grow: 1;
    align-items: center;
	width: calc(100% + 100px);
    height: 67px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #acacac;
}
.studentInBox {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 5px;
}
.pointInputBox,
.testInputBox {
	position: relative;
	display: block;
	width: 40px;
	height: 24px;
	margin: 0 auto;
	padding-left: 0;
	text-align: center;
	color: #000;
	background-color: #d7f1ff;
	border: 1px solid #acacac;
	font-family: 'Roboto', sans-serif;
}
.scoreInputBox {
	position: relative;
    display: block;
    width: 70px;
    height: 32px;
    margin: 0 auto;
    padding-left: 0;
    text-align: center;
	font-size: 18px;
    color: #000;
    background-color: #e4ffdc;
    border: 1px solid #acacac;
    font-family: 'Roboto', sans-serif;
}
.pointBtnBox {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: -1px;
}

.studentPointMinusBtn,
.studentPointPlusBtn {
	position: relative;
	display: flex;
	width: 21px;
	height: 21px;
	margin: 0 -1px;
	background-color: #fff;
	border: 1px solid #acacac;
	box-sizing: border-box;
}
.studentPointMinusBtn:before,
.studentPointPlusBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 21px;
	height: 21px;
	font-size: 10px;
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.studentPointMinusBtn:before {
	color: #ab2f2f;
	content: "\e924";
}
.studentPointPlusBtn:before {
	color: #5490bd;
	content: "\e90d";
}

.studentPointMinusBtn span,
.studentPointPlusBtn span {
	display: block;
	text-indent: -9999px;
}
.usageNumBox {
	position: relative;
	margin: 0 5px;
	font-size: 13px;
	font-weight: bold;
	color: #000;
}

.statusBox {
	position: relative;
	font-size: 13px;
	font-weight: bold;
	color: #ec3333;
}

.tabContentTable .checks input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip:rect(0,0,0,0);
	border: 0;
}
.tabContentTable .checks input[type="radio"] + label {
	position: relative;
	z-index: 20;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 45px;
	height: 32px;
	/* margin-right: -1px; */
	padding: 0 10px;
	text-align: center;
	font-size: 12px;
	color: #2d2d2d;
	background: #fafafa;
	border: 1px solid #929292;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.05),
	inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	-webkit-appearance: radio; /* 아이폰 iOS/사파리 배경 문제 해결 */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.tabContentTable .tabRadioBox.checks input[type="radio"] + label {
	min-width: 40px;
	height: 28px;
}
.tabContentTable .checks input[type="radio"] + label:first-child {
	border-top-left-radius: 32px;
	border-bottom-left-radius: 32px;
}
.tabContentTable .checks input[type="radio"]:checked + label {
	color: #fff;
	background-color: #5f6270;
    border: 1px solid #5f6271;
}
.tabContentTable .checks input[type="radio"] + label span {
	display: flex;
	flex-shrink: 0;
}
a.classBtn:link,
a.classBtn:visited,
a.classBtn:hover,
a.classBtn:active {
	position: relative;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	height: 24px;
	margin: 0 1px;
	padding: 0 8px;
	font-size: 12px;
	color: #727272;
	background-color: #fff;
	border: 1px solid #acacac;
	border-radius: 24px;
	box-sizing: border-box;
}
a.classBtn span {
	margin-left: 3px;
}
.tabStudentBtnBox {
	position: relative;
	display: flex;
	width: 100%;
}
.tabStudentBtn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 37px;
	margin-top: -1px;
	font-size: 12px;
	color: #000;
	border-top: 1px solid #acacac;
	border-bottom: 1px solid #acacac;
	box-sizing: border-box;
}
/*
.tabContentRightTable table > tbody > tr:first-child > td .tabStudentBtn:first-child {
	border-top: none;
}
.tabStudentBtn:last-child {
	border-bottom: none;
}
*/
.tabBtn01 {
	background-color: #eaffed;
}
.tabBtn02 {
	float: left;
	display: inline-flex;
	width: 50%;
	background-color: #dceafb;
	border-right: 1px solid #acacac;
	/* border-bottom: none; */
}
.tabBtn22 {
	float: left;
	display: inline-flex;
	width: 50%;
	background-color: #e8e2ff;
	/* border-bottom: none; */
}
.tabBtn03 {
	background-color: #fff6d2;
}
.tabBtn04 {
	color: #fff;
	background-color: #e13030;
}
.tabOn01 {
	position: fixed;
	z-index: 50;
	top: 394px;
	left: 36px;
}
.tabOn02 {
	position: fixed;
	z-index: 50;
	top: 394px;
    left: 336px;
    right: 51px;
	width: auto;
	height: 67px;
}
.tabOn03 {
	position: fixed;
	z-index: 40;
	top: 0;
	right: 0;
	height: 67px;
}
.on.tabOn01,
.on.tabOn02,
.on.tabOn03 {
	top: 219px;
}
ul.tabContentTopList {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	height: 67px;
}

ul.tabContentTopList li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 107px;
	margin: 0 auto;
	/* padding: 0 10px; */
}
.tabInputTopBox {
    position: relative;
    display: flex;
    padding-top: 0;
    padding-bottom: 2px;
}
.tabDeleteBtn {
	position: relative;
	display: flex;
	width: 24px;
	height: 24px;
	margin: 0 5px;
	background-color: #fff;
	border: 1px solid #acacac;
	border-radius: 24px;
}
.tabDeleteBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 22px;
	height: 22px;
	font-size: 12px;
	color: #2d2d2d;
	content: "\e926";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.tabDeleteBtn span {
	display: block;
	text-indent: -9999px;
}

.tabContentRightBox {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100px;
	margin-left: auto;
}

.tabContentRightTopBox {
	position: relative;
    display: flex;
	flex-shrink: 0;
    align-items: center;
    width: 100px;
    height: 67px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #acacac;
}

ul.tabCheckList {
	position: relative;
	display: block;
	padding: 2px 5px;
}
ul.tabCheckList li {
	position: relative;
	display: block;
	margin: 1px 0;
	padding: 3px;
	font-size: 12px;
	color: #fff;
	background-color: #33a8f1;
}

ul.tabCheckList .noCheck {
	background-color: #d33c4f;
}

.homeworkViewBtn,
.uploadBtn {
	position: relative;
    display: flex;
	flex-shrink: 0;
    justify-content: center;
    align-items: center;
    height: 30px;
    margin: 0 5px;
	padding: 0 15px;
	margin-left: auto;
    color: #fff;
    background-color: #2983e1;
    border: none;
}
.pointInBox {
	position: relative;
	display: flex;
	margin-left: 15px;
	font-size: 13px;
	font-weight: bold;
	color: #000;
}
.uploadBox {
    position: relative;
    float: right;
    margin-left: auto;
}
.scoreGradeBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    font-size: 14px;
    font-weight: bold;
    color: #2d2d2d;
}
.gradeInputBox {
    position: relative;
    display: block;
	width: calc(100% - 10px);
    height: 48px;
    margin: 0 auto 2px;
    padding: 5px;
    text-align: left !important;
    color: #000;
    background-color: #e4ffdc;
    border: 1px solid #acacac;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}
.tabContentTable td:nth-child(4) .gradeInputBox {
   background-color: #fff8f9;
}

.noLineTable td:nth-last-child(2) {
	border-right: none;
}
.noPaddingTable .tabRadioBox {
	justify-content: center;
}
.tabContentRightTable td {
	height: 110px;
	border-bottom: 1px solid #acacac;
}
.tabContentRightTable.on {
    margin-top: -11px;
}
.vocaScoreBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% - 10px);
    height: 24px;
	margin: 2px 5px;
    color: #000;
	background-color: #ffffa9;
	border: 1px solid #acacac;
}

.tabContentTable {
	position: relative;
	display: block;
}

.tabContentTable.on {
	margin-top: 56px;
}

.tabContentTable td {
    height: 110px;
    padding: 5px;
    text-align: center;
    border-right: 1px solid #acacac;
    border-bottom: 1px solid #acacac;
    box-sizing: border-box;
}
.learnpiaTable td:first-child {
	background-color: #fff9e2;
}
.learnpiaTable table > tbody > tr:nth-child(even) > td:first-child {
    background-color: #fffcca;
}
.learnpiaTable td:last-child {
	background-color: #ecfeff;
}
.learnpiaTable table > tbody > tr:nth-child(even) > td:last-child {
    background-color: #cefbff;
}
.tabContentInputBox {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    margin: 5px 0;
}
.tabInputBox {
    width: calc(100% - 64px);
}
.classInputBox {
    position: relative;
    display: inline-block;
    height: 32px;
    border: 1px solid #acacac;
    box-sizing: border-box;
}
.tabContentInputBox:first-child .tabInputBox {
    background-color: #ecfbff;
}
.tabRadioBox {
    position: relative;
    display: flex;
	justify-content: center;
    align-items: center;
    width: 100%;
    height: 30px;
}
ul.wrapBox {
	justify-content: center;
	flex-grow: 0;
	flex-wrap: wrap;
	min-width: 150px;
	height: auto;
}

ul.wrapBox li {
	display: flex;
	align-items: center;
	height: 32px;
}
.SboxTable {
    position: relative;
    display: flex;
    flex-shrink: 0;
    width: 130px;
    height: 95px;
}
.tabContentSboxTable {
	position: relative;
	display: block;
	width: 130px;
	height:95px;
	padding: 3px 0;
	background-color: #fff;
	border: 1px solid #acacac;
	box-sizing: border-box;
	overflow: auto;
}
.tabContentSboxTable th {
	height:16px;
	padding: 5px;
	text-align:left;
	font-size:12px;
	color:#5d5d5d;
	background:#f0f0f0;
}

.tabContentSboxTable td {
	position: relative;
	height:12px;
	padding: 2px;
	text-align:left;
	font-size:11px;
	color:#5d5d5d;
	border: none;
}

.tabContentSboxTable table > tbody > tr:nth-child(even) > td {
	background-color: #f9f9f9;
}

.tabContentSboxTable.on {
	position: absolute;
	z-index: 60;
	top: 0;
	left: 0;
	right: 0;
	min-height: 300px;
	border: 1px solid #5d5d5d;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
/*
.textareaBox {
	position: relative;
	width: 100%;
	padding: 7px;
	border: 1px solid #acacac;
	border-radius: 5px;
	box-sizing: border-box;
}
*/
.progressContentBox {
	position: relative;
	display: flex;
	width: 100%;
}
.progressContentBox .textareaBox {
	width: calc(100% - 100px);
	height: 98px;
}
.homeworkContentBox {
	position: relative;
	display: block;
	width: 100%;
	height: 90px;
	text-align: left;
	overflow: hidden;
}
ul.homeworkContentList {
	display: flex;
	flex-direction: column;
}
ul.homeworkContentList li {
	margin: 2px 0;
}

.tabInLinkBox {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 20px;
}
a.counselLink:link,
a.counselLink:visited,
a.counselLink:hover,
a.counselLink:active {
    position: relative;
    display: inline-block;
    width: 390px;
    padding-left: 5px;
	text-align: left;
    font-size: 13px;
    color: #020202;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

ul.tabCounselList {
	position: relative;
	display: flex;
	flex-direction: column;
}

ul.tabCounselList li {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 28px;
}

.tabChangeBtn {
	position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 24px;
    background-color: #fff;
    border: 1px solid #acacac;
}

.basicInputBox {
	position: relative;
    display: inline-block;
    height: 24px;
    margin: 0 5px;
    padding: 0 5px;
    padding-left: 0;
    text-align: center;
    color: #000;
    background-color: #f9f9f9;
    border: 1px solid #acacac;
    font-family: 'Roboto', sans-serif;
}

.tabPhotoBtn {
	position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 24px;
    background-color: #fff;
    border: 1px solid #acacac;
}
.tabInTable td {
    height: 42px;
    border: none;
    border-right: 1px solid #acacac;
    border-bottom: 1px solid #acacac;
}
.tabInTable td:last-child {
	border-right: none;
}
.tabInTable tbody > tr:last-child > td {
	height: 67px;
	background-color: #fff !important;
	border-bottom: none;
}
.tabInBox {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 24px;
    /* margin: 5px 0; */
}
.statusNumBox {
    position: relative;
    padding: 0 5px;
    text-align: left;
    font-size: 12px;
    font-weight: bold;
}
.uploadBox {
	position: relative;
	float: right;
	margin-left: auto;
}
.uploadBox strong {
	font-size: 18px;
	color: #d33c4f;
}
.noPaddingTable td {
    padding: 0;
}

#tab5 .noLineTable td:nth-child(1) {
	border-right: none;
}

#tab5 .noLineTable td:nth-last-child(2) {
    border-right: 1px solid #acacac;
}

.checkContentBox,
.learnpiaContentBox {
	position: relative;
	display: block;
	width: 100%;
	height: 90px;
	text-align: left;
	overflow: hidden;
}
ul.learnpiaContentList {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #fff;
	border-top: 1px solid #dedede;
	border-right: 1px solid #dedede;
	border-left: 1px solid #dedede;
}
ul.learnpiaContentList li {
	display: flex;
	align-items: center;
	height: 26px;
	margin: 1px 0;
	font-weight: bold;
	font-size: 14px;
	color: #000;
	border-bottom: 1px solid #dedede;
	box-sizing: border-box;
}
ul.learnpiaContentList li:nth-child(even) {
	background-color: #f9f9f9;
}
.achievementRateBox {
	position: relative;
	width: 100%;
	height: 26px;
	padding: 3px 5px;
	font-weight: bold;
	font-size: 14px;
	color: #000;
	/*
	background-color: #fff600;
	border-right: 1px solid #9d9d9d;
	border-bottom: 1px solid #acacac;
	*/
	box-sizing: border-box;
}
.learnpiaContentTable {
	position: relative;
	display: block;
	border-top: 1px solid #dedede;
	border-left: 1px solid #dedede;
}
.learnpiaContentTable td {
	height: 26px;
	padding: 3px;
	background-color: #fff;
	border-right: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
}
.learnpiaContentTable td:first-child,
.learnpiaContentTable td:last-child {
	background-color: #fff !important;
}

.learnpiaContentTable table > tbody > tr:nth-child(even) > td:first-child,
.learnpiaContentTable table > tbody > tr:nth-child(even) > td:last-child {
	background-color: #f9f9f9 !important;
}

/* ------------------------- */
/*           login           */
/* ------------------------- */
.loginWrapper {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #6870a1;
	/* background-color: #009ddc; */
}

/*
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.loginWrapper {
		background: linear-gradient(#a9e6ff, #009ddc);
	}
}*/ /* IE10 & IE11 */

/*
.loginWrapper:before {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 50%;
	width: 1600px;
	height: 1600px;
	background: radial-gradient(circle, #ccddff, #009ddc 60%, #009ddc );
	transform: translate(-50%, -50%);
	content: "";
}
*/

.loginPortalBox {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	display: flex;
	width: 900px;
	height: 320px;
	background-color: #374079;
	border-radius: 15px;
	box-shadow: 0 0 15px rgba(0,0,0,0.3);
	transform: translate(-50%, -50%);
}

.loginLeftBox {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 500px;
	height: 320px;
	padding: 30px;
	font-size: 16px;
	color: #b2b6cf;
	border-radius: 15px 0 0 15px;
	box-sizing: border-box;
	overflow: hidden;
}
.loginLeftBox:before {
	position: absolute;
	z-index: 0;
	top: -460px;
	left: -440px;
	width: 800px;
	height: 800px;
	background-color: rgb(44 53 107);
	border-radius: 50%;
	content: "";
}

.loginLogoBox {
	position: relative;
	width: 250px;
	height: 62px;
}

.loginLogoBox span {
	display: block;
	text-indent: -9999px;
}

.loginLogoBox:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 254px;
    height: 62px;
    font-size: 56px;
    color: #696d82;
    content: "";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    background: url("/contents/images/habitLogo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
@media screen and (max-width: 479px) {
	.loginLogoBox:before {
		font-size: 36px;
	}
}

.loginExBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 60px;
	font-size: 21px;
}

.loginBottomBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 42px;
	margin-top: 100px;
	font-size: 15px;
	color: #fff;
}

@media screen and (max-width: 767px) {
	.loginBottomBox {
    	transform: translate(-50%, 520%);
	}
}

@media screen and (max-width: 479px) {
	.loginBottomBox {
		font-size: 16px;
    	transform: translate(-50%, 450%);
	}
}

.loginBox {
	position: relative;
	width: 400px;
	height: 320px;
	margin-left: auto;
	padding: 30px 75px;
	background-color: #fff;
	border-radius: 0 15px 15px 0;
	box-sizing: border-box;
}

@media screen and (max-width: 767px) {
	.loginBox {
		width: calc(100% - 50px);
		height: 400px;
		padding: 30px;
	}
}

@media screen and (max-width: 479px) {
	.loginBox {
		width: calc(100% - 50px);
		height: 350px;
		padding: 30px 10px;
	}
}

.loginBox h1 {
	display: flex;
	height: 32px;
	background:transparent;
}
.loginBox h1 span {
	display:flex;
	align-items: flex-end;
	padding:0 0 10px 10px;
	font-size:15px;
	float:left;
	color:#a4a7b9;
	font-weight:normal;
	text-align: left;
}
.loginBox h1 span:first-child {
	padding: 0;
	font-size: 34px;
	color: #3a3e51;
	font-family: 'Lato thin', sans-serif;
}

ul.loginInputBox {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 10px 0;
}

@media screen and (max-width: 767px) {
	ul.loginInputBox {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 50px 0 10px;
	}
	.loginCheckBox {
    	position: relative;
    	width: 100%;
    	padding: 0 0 10px;
	}
}

@media screen and (max-width: 479px) {
	ul.loginInputBox {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 50px 0 10px;
	}
}

ul.loginInputBox li {
	position: relative;
	margin: 5px 0;
}

ul.loginInputBox 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;
    /* border-right: 1px solid #5d5d5d; */
    font-size: 16px;
    color: #5d5d5d;
    content: "\ea26";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

ul.loginInputBox 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;
    /* border-right: 1px solid #5d5d5d; */
    font-size: 16px;
    color: #5d5d5d;
    content: "\ea27";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

ul.loginInputBox li input {
	position: relative;
	display: flex;
	width: 100%;
	height: 42px;
	padding: 0 10px;
	border-radius: 42px;
}
ul.loginInputBox li input:focus {
	border-radius: 42px;
}

.loginInput {
	position: relative;
	display: flex;
	width: 100%;
	height: 52px;
	font-size: 14px;
	border-radius: 5px;
	text-indent: 5px;
	box-sizing: border-box;
}

.loginInput:focus {
	border-radius: 5px;
	box-shadow: 0 0 15px rgba(25,74,163,0.7);
}

.loginBtnBox {
	padding: 10px 100px;
}

.loginBtn {
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 52px;
    margin: 0;
    font-size: 16px;
    color: #fff ;
    background-color: #3a3e51;
    border: none;
    border-radius: 52px;
}

.loginInput,
.joinInput,
.joinInput2 {
	position: relative;
	display: flex;
	width: 100%;
	height: 52px;
	font-size: 14px;
	border-radius: 5px;
	box-sizing: border-box;
}

.joinInput2 {
	padding-right: 90px !important;
}

.loginInput:focus {
	border-radius: 5px;
	box-shadow: 0 0 15px rgba(25,74,163,0.7);
}

.loginInputBox input[type="text"],
.loginInputBox input[type="password"] {
	text-indent: 42px;
}
.loginInputBox input[type="text"]:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 42px;
	height: 42px;
	color: #5d5d5d;
    content: "\e90b";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.joinList input[type="text"],
.joinList input[type="password"] {
	padding-right: 90px;
}

.joinEnd .joinList input[type="text"],
.joinEnd .joinList input[type="password"] {
	padding-right: 10px;
}

.loginCheckBox {
	position: relative;
    width: 100%;
    padding: 0 0 10px;
}

@media screen and (max-width: 767px) {
	.loginCheckBox {
    	padding: 0 0 10px;
	}
}

@media screen and (max-width: 479px) {
	.loginCheckBox {
    	padding: 0 0 10px;
	}
}

.loginCheckBox label {
	color: #3a3e51;
}

.loginBtnBox {
	padding: 10px 0;
}

@media screen and (max-width: 767px) {
	.loginBtnBox {
    	padding: 0 0 10px;
	}
}

@media screen and (max-width: 479px) {
	.loginBtnBox {
    	padding: 0 0 10px;
	}
}

.loginBtn {
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 52px;
    margin: 0;
    font-size: 16px;
    color: #fff ;
    background-color: #2c356b;
    border: none;
    border-radius: 42px;
}
.loginBtn:hover,
.loginBtn:hover {
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.contentBottomBtnBox button:disabled {
    cursor: default !important;
    color: #acacac !important;
    background: #e5e5e5 !important;
}
.contentBottomBtnBox button:disabled:hover {
	box-shadow: 0 0 0;
}

ul.loginBottomBtnList {
	position: relative;
	display: flex;
	width: 100%;
}

ul.loginBottomBtnList li {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 42px;
}

a.loginLink:link,
a.loginLink:visited,
a.loginLink:active {
	position: relative;
	font-size: 16px;
	color: #b5d2ff;
	text-decoration: underline;
}

a.loginLink:hover {
	color: #fff;
}


/* ------------------------- */
/*           join            */
/* ------------------------- */
.joinContainer {
	position: relative;
	display: block;
	width: 500px;
	padding: 0;
	margin: 0 auto;
	box-sizing: border-box;
}

.joinContent {
	position: relative;
	display: block;
	width: 100%;
	padding: 50px 0;
	box-sizing: border-box;
}

.joinTopLogoBox {
	position: relative;
	display: block;
	margin: 0 auto 50px;
	text-align: center;
}

.joinTitle {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 52px;
	padding: 0 10px;
	font-size: 18px;
	color: #000;
	border-bottom: 1px solid #dedede;
	box-sizing: border-box;
}

.joinEnd .joinTitle {
	flex-direction: column;
	height: 82px;
	line-height: 1.5;
}

ul.joinList {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: 30px;
}
.joinEnd ul.joinList {
	margin-top: 10px;
}

ul.joinList li {
	position: relative;
	padding: 10px 30px;
	box-sizing: border-box;
}
/*
ul.joinList li:last-child {
	margin-top: 30px;
}
*/

.essentialBox {
	position: absolute;
	display: block;
	left: 0;
	text-indent: -9999px;
}
.essentialBox:before {
	position: absolute;
	z-index: 10;
	top: 22px;
	left: 15px;
	width: 5px;
	height: 5px;
	background-color: #ff5a00;
	border-radius: 50%;
	content: "";
}

.checkBox {
	position: absolute;
	display: block;
	top: 11px;
	right: 31px;
	width: 82px;
	height: 50px;
	background-color: #fff;
	border-left: 1px solid #dedede;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	text-indent: -9999px;
}
.checkBox:before {
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 82px;
	height: 52px;
	font-size: 18px;
	color: #dedede;
	text-indent: 0;
	content: "\e90c";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.checkBox.on:before  {
	color: #30bb57;
}
.checkBox.off:before {
	color: #ff5a00;
}

.doubleCheckBtn,
.addressSearchBtn,
.btnFile {
	position: absolute;
	z-index: 10;
	top: 11px;
	right: 31px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 82px;
	height: 50px;
	background-color: #384452;
    color: #fff;
	border: none;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	box-sizing: border-box;
}

dl.joinExList {
	position: relative;
	display: block;
	padding: 10px;
	box-sizing: border-box;
}
dl.joinExList dd {
	position: relative;
	padding: 5px 16px;
	box-sizing: border-box;
}
dl.joinExList dd:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 16px;
	height: 26px;
	font-size: 18px;
    content: "·";
}

.agreeTotal {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 42px;
	padding: 20px 67px 20px 40px;
	box-sizing: border-box;
}

.agreeTotal .checks {
	margin-left: auto;
}

.agreeTotal span {
	margin-left: -85px;
}

dl.agreeLinkListBox {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	margin: 0 30px;
	background-color: #f9f9f9;
	box-sizing: border-box;
}

.agreeLinkListBox label span {
	display: block;
	text-indent: -9999px;
}

dl.agreeLinkListBox dt {
	position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    width: 250px;
    height: 32px;
}

dl.agreeLinkListBox dd {
	position: relative;
	display: flex;
    flex-shrink: 0;
	justify-content: flex-end;
    align-items: center;
    width: calc(100% - 250px);
    height: 32px;
}

dl.agreeLinkListBox dd input[type="checkbox"] + label:before {
	margin-bottom: -15px;
}

.agreeBtn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 32px;
	background-color: transparent;
	border: none;
	text-decoration: underline;
}

.contentBottomBtnBox,
.layerBottomBtnBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 52px;
}

.pointLayer .layerBottomBtnBox {
	height: 32px;
}

.pointLayer .layerBottomBtnBox button {
	margin: 0 3px;
}


.nextBtn,
.emailCheckBtn,
.joinEndBtn,
.layerBottomCloseBtn {
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 52px;
    margin: 0;
    font-size: 16px;
    color: #fff ;
    background-color: #00baeb;
    border: none;
    border-radius: 5px;
}
.nextBtn:hover,
.emailCheckBtn:hover {
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.joinSubTitle {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 42px;
}

.businessCheckBox {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 24px;
}

.fileBox {
    position: relative;
    display: inline-block;
}
.fileBox .fileName {
    display:flex;
	align-items: center;
    width: 440px;
    height: 52px;
    padding-left:10px;
    background-color:#fff;
	border-radius: 5px;
}
.fileBox input[type="file"] {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0
}

.fileBox .btnFile {
	top: 1px;
    right: 0;
	cursor: pointer;
}

.fileSelectedBox {
	position: relative;
	display: flex;
	align-items: center;
	height: 32px;
	padding: 0 10px;
	background-color: #f9f9f9;
	border-radius: 5px;
	box-sizing: border-box;
}

.joinEndIconBox {
	position: relative;
	display: flex;
	width: 100%;
	height: 100px;
}
.joinEndIconBox span {
	display: block;
	text-indent: -9999px;
}
.joinEndIconBox:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100px;
	font-size: 42px;
	color: #14972d;
	text-indent: 0;
	content: "\e90c";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

input:disabled {
	background-color: #f9f9f9;
}

.topSearchBox {
	position: relative;
	display: flex;
	padding: 20px 20px 0;
}

.topSearchInputBox {
	position: relative;
    width: 250px;
    height: 32px;
    padding-right: 32px;
    border: 1px solid #dedede;
	border-left: none;
    box-sizing: border-box;

}

.topSearhBtn {
	position: relative;
	width: 42px;
	height: 32px;
	background-color: #00baeb;
	border: none;
}
.topSearhBtn span {
	display: block;
	text-indent: -9999px;
}

.topSearhBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 42px;
	height: 32px;
	font-size: 15px;
	color: #fff;
	content: "\e90f";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.tabInSelect {
    position: relative;
    display: inline-block;
    min-width: 50px;
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    text-align: left;
    font-size: 12px;
    color: #2d2d2d;
    background-color: #fff;
    border: 1px solid #dedede;
    cursor: pointer;
    box-sizing: border-box;
}

.topSearchBox .tabInSelect {
	border-right: none;
}

.popupModifyBtn,
.popupResetBtn,
.popupResetBtn2,
.popupPointAddBtn,
.popupSaveBtn,
.popupCancelBtn,
.popupDeleteBtn,
.popupSearchBtn,
.popupCloseBtn,
.popupAddBtn,
.otherExamBtn,
.examChangeBtn,
.subSearchBtn,
.paymentMakeBtn,
.uploadImgBtn,
.reservationBtn,
.sendBtn,
.checkBtn,
.calculateBtn,
.addBtn,
.batchBtn,
.promiseNoBtn,
.textbookAddBtn,
.receiptModifyBtn,
.receiptAddBtn,
.receiptdeleteBtn,
.refundBtn,
.transferBtn,
.receiveStatusBtn,
.outsiderReceiveBtn,
.manageBtn,
.taskBtn,
.infoModifyBtn,
.taskRegisterBtn,
.todayPointBtn,
.homeMessageBtn,
.progressCheckBtn,
.classInfoModifyBtn,
.textbookAllocationBtn2,
.classScheduleBtn,
.checkedSMSBtn,
.checkedNoticeBtn,
.dischargedViewBtn,
.checkedSMSBtn,
.printBtn,
.popupExcelBtn {
	position: relative;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    min-width: 80px;
    height: 32px;
	/* margin: 0 auto; */
    padding: 0 10px;
    font-size: 12px;
    color: #fff;
    background-color: #5f6271;
    border: none;
    border-radius: 42px;
}
.popupExcelBtn {
    background-color: #27b1f1;
}
.checkedSMSBtn {
	margin: 0 2px;
	padding: 0 15px;
	height: 28px;
	font-size: 12px;
	color: #fff;
	background-color: #27b1f1;
	border: none;
}
.popupResetBtn {
	display: inline-flex;
	margin: 0;
}
.popupResetBtn2,
.popupCloseBtn {
	min-width: 42px;
	height: 42px;
	background-color: transparent;
}
.popupResetBtn2 span,
.popupCloseBtn span {
	display: block;
	text-indent: -9999px;
}
.popupResetBtn2:before,
.popupCloseBtn:before {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 42px;
	height: 42px;
	font-size: 24px;
	color: #fff;
	content: "\e920";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.popupCloseBtn:before {
	content: "\e915";
}
.testAllocationPopup .popupCloseBtn {
	margin-left: auto;
}
.popupWriteBtn {
	position: fixed;
	right: 20px;
	bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 62px;
    height: 62px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #27b1f1;
    border: none;
    border-radius: 50%;
    box-shadow: 3px 3px 10px rgb(0, 0, 0, 0.2);
    transition: all 0.3s;
	font-family: 'Roboto', sans-serif;
}
.paymentMakeBtn,
.printBtn {
    background-color: #27b1f1;
}
.infoModifyBtn,
.taskRegisterBtn,
.todayPointBtn,
.homeMessageBtn {
	padding: 0 10px;
	font-size: 12px;
	background-color: #27b1f1;
}
.popupPointAddBtn {
	width: 120px;
	margin: 0 10px;
}
.popupCancelBtn {
	background-color: #acacac;
}
.popupDeleteBtn,
.outsiderReceiveBtn {
	background-color: #f77a00;
}
.popupMoveBtn {
	position: relative;
	display: flex;
    justify-content: center;
    align-items: center;
    width: 62px;
	min-width: 62px;
    height: 62px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #27b1f1;
    border: none;
    border-radius: 50%;
    box-shadow: 3px 3px 10px rgb(0, 0, 0, 0.2);
    transition: all 0.3s;
	font-family: 'Roboto', sans-serif;
	box-sizing: border-box;
}
.refundBtn {
	min-width: 60px;
    color: #994cff;
    background-color: #fff;
    border: 1px solid #994cff;
}
.popupMoveBtn span {
	display: block;
	text-indent: -9999px;
}
.popupMoveBtn:before {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 62px;
	height: 62px;
	font-size: 28px;
	content: "\e912";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.vocabSecondCategory .popupSearchBtn,
.vocabThirdCategory .popupSearchBtn {
	margin: 0;
}

.otherExamBtn {
	color: #e46d15;
	background-color: transparent;
	border: 1px solid #e46d15;
}
.examChangeBtn {
	color: #4fd638;
	background-color: transparent;
	border: 1px solid #4fd638;
}

.addBtn {
	min-width: 60px;
	color: #00baeb;
	background-color: #fff;
	border: 1px solid #00baeb;
}

.popupInput {
	position: relative;
	display: flex;
	width: 100%;
	height: 32px;
	font-size: 12px;
	border-radius: 3px;
	box-sizing: border-box;
}

.checks.clicks {
	display: flex;
}

.checks .popupInput {
	display: inline-flex;
	width: 200px;
}

.popupTextArea,
.subTextArea {
	position: relative;
    width: 100%;
    padding: 10px;
    border: 1px solid #dedede;
    border-radius: 5px;
    box-sizing: border-box;
}
textarea.popupTextArea::placeholder {
	line-height: 48px;
}

.popupBottomBtnBox,
.subBottomBtnBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
}
.sendEndLayer .popupBottomBtnBox {
	padding: 10px;
	background-color: #f9f9f9;
	border-top: 1px solid #ddd;
}
.messageLayerPopup .popupBottomBtnBox {
	padding: 10px 0 0;
}
.popupBottomBtnBox button,
.subBottomBtnBox button {
	margin: 0 2px;
}

.noticeViewPopup .popupBottomBtnBox,
.noticeView .popupBottomBtnBox {
	justify-content: flex-start;
}
.studentReceive .popupBottomBtnBox {
	padding: 10px 0 0;
}
.popupBottomRightBox,
.subBottomRightBox {
	margin-left: auto;
}

.tableBtnBox {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
.saveBtn,
.closeBtn,
.newBtn,
.modifyCacelBtn,
.registerBtn,
.makeBtn,
.sendBtn,
.calculateBtn,
.taskBtn {
	height: 32px;
	margin: 0 3px;
    padding: 0 15px;
    color: #fff;
    background-color: #00baeb;
    border: none;
}
.receiptPrintBtn,
.teacherLoginBtn {
    display: flex;
    flex-shrink: 0;
	height: 29px;
	margin: 0 3px;
    padding: 0 15px;
    color: #fff;
    background-color: #00baeb;
    border: none;
}
.teacherLoginBtn {
    margin: 0;
}
.closeBtn {
	background-color: #acacac;
}
.newBtn,
.modifyCacelBtn,
.taskBtn {
	color: #5d5d5d;
	background-color: #fff;
	border: 1px solid #acacac;
}
.receiptPrintBtn,
.teacherLoginBtn {
	padding: 0 25px;
	background-color: #2166c5;
}
.scriptImgBtn,
.voiceContentBtn,
.voiceAllBtn,
.imgSelectBtn,
.cancelBtn,
.makeCategroyBtn,
.selectedCopiedBtn,
.selectedExamAllocateBtn,
.randomRollbackBtn,
.counselRegisterBtn,
.receiptModifyBtn,
.receiptAddBtn,
.attendanceNoteBtn,
.receiveBtn,
.pointAddBtn,
.tuitionAddBtn,
.etcAddBtn,
.courseEndBtn,
.textbookAllocationBtn,
.allocationDeleteBtn,
.myContentSetBtn,
.detailBtn,
.timeSchedulePrintBtn,
.searchBtn,
.inputBtn {
	height: 32px;
	margin: 0 3px;
    padding: 0 20px;
    color: #fff;
    background-color: #33c1c5;
    border: none;
}
.allocationDeleteBtn {
	margin: 0 !important;
}
.counselRegisterBtn,
/* .attendanceNoteBtn, */
.receiveBtn,
.pointAddBtn,
.timeSchedulePrintBtn
/* .tuitionAddBtn, */
/* .etcAddBtn, */
/* .courseEndBtn */ {
	margin-left: auto;
}
.voiceContentBtn,
.cancelBtn,
.receiptModifyBtn,
.receiptAddBtn,
.myContentSetBtn,
.detailBtn {
	color: #5d5d5d;
	background-color: #fff;
	border: 1px solid #acacac;
}
.checkBtn,
.progressCheckBtn {
	height: 24px;
	margin: 0 3px;
    padding: 0 20px;
    color: #fff;
    background-color: #4486ff;
    border: none;
}
.progressCheckBtn {
	min-width: 60px;
	height: 20px;
	font-size: 12px;
}
.classTransferListBox .cancelBtn {
	height: 24px;
	margin: 0 3px;
    padding: 0 20px;
	color: #5d5d5d;
    background-color: #fff;
    border: 1px solid #acacac;
}
.inputBtn {
	color: #e7651c;
	background-color: #fff;
	border: 1px solid #e7651c;
}
.numberBox {
	display: flex;
	justify-content: center;
}
.prevNumBtn,
.nextNumBtn,
.classQuickMoreBtn {
	position: relative;
	width: 24px;
	min-width: 24px;
	height: 24px;
	background-color: transparent;
	border: none;
}
.classQuickMoreBtn {
	margin-left: auto;
}
.prevNumBtn span,
.nextNumBtn span,
.classQuickMoreBtn span {
	display: block;
	text-indent: -9999px;
}
.prevNumBtn:before,
.nextNumBtn:before,
.classQuickMoreBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	color: #2d2d2d;
	content: "\e910";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.nextNumBtn:before {
	content: "\e912";
}
.classQuickMoreBtn:before {
	content: "\e90d";
}
.textNumBox {
	width: 24px;
	height: 24px;
	background-color: transparent;
	border: none;
	color: #2d2d2d;
}
.searchNumBox {
	position: relative;
	display: inline-flex;
	font-size: 15px;
	color: #2f8dff;
}
.targetBox {
	position: relative;
	display: flex;
	align-items: center;
}
.selectTargetBox {
	position: relative;
	display: flex;
	flex-direction: column;
}
.selectTargetTopBox {
	position: relative;
	display: flex;
	align-items: center;
}
.selectTargetBottomBox {
	position: relative;
	margin: 5px 5px 0 5px;
	border: 1px solid #dedede;
}
.popupUseBox {
	position: relative;
	display: flex;
	align-items: center;
}
.subCommentTable {
	position: relative;
	display: block;
	padding: 10px;
	box-sizing: border-box;
}
.subCommentTable th {
    height: 32px;
    padding: 5px;
    text-align: center;
    background-color: #f9f9f9;
    border-bottom: 1px solid #dedede;
}
.subCommentTable td {
	height: 32px;
	padding: 5px;
	text-align: center;
	border-bottom: 1px solid #dedede;
	box-sizing: border-box;
}
.subCommentTable thead tr:first-child th,
.subCommentTable thead tr:first-child td {
    border-top: 2px solid #000;
}
.subCommentTable td:nth-child(2) {
	text-align: left;
}
.subAnswerBox,
.subEclipseBox {
	position: relative;
    display: block;
    max-width: 100%;
    padding: 0;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
.calendarDateBox {
	position: relative;
	display: flex;
	align-items: center;
	height: 30px;
	margin-left: auto;
	padding: 0 10px;
	font-weight: bold;
	color: #ffcc00;
	box-sizing: border-box;
}
.checkListBox {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 5px 5px 5px 0;
	box-sizing: border-box;
}

/* ------------------------- */
/*           popup           */
/* ------------------------- */
.popupWrapper {
	position: relative;
	display: block;
	width: 100%;
	height: calc(100vh - 17px);
	/* margin-top: -17px; */
}
.popupWrapper.academyInfo,
.popupWrapper.campusInfo,
.popupWrapper.optionInfo {
	height: 100vh;
}
.companyRegisterPopup2.popupWrapper,
.adminRegisterPopup.popupWrapper,
.companyRegisterPopup.popupWrapper,
.setMenuMakePopup.popupWrapper,
.contentSetMenuMakePopup.popupWrapper,
.vocabMenuMakePopup.popupWrapper,
.vocabFirstCategory.popupWrapper,
.gradeLevelMakePopup.popupWrapper,
.noticeViewPopup.popupWrapper,
.noticeWritePopup.popupWrapper,
.tabListBox.popupWrapper {
	height: auto;
}
.popupWrapper.mockTestViewPopup,
.popupWrapper.classPopup {
	overflow: hidden;
}
/*
.popupWrapper.companyStudentPopup {
	margin-top: -18px;
}
*/
.popupWrapper.classPopup {
	height: auto;
}
.popupWrapper.smsSend01,
.popupWrapper.smsSend02,
.popupWrapper.smsSend03 {
	height: calc(100vh - 136px);
}
.pcBox {
	min-width: 1180px;
}

.popupheaderBox {
	position: relative;
	display: block;
	height: 52px;
}

.popupTopBox {
	position: fixed;
	z-index: 50;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	align-items: center;
	width: 100%;
	height: 52px;
	color: #f9f9f9;
	background-color: #5f6271;
    border-bottom: 1px solid #3b3e4e;
	box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

.popupTopTitle {
	position: relative;
	display: flex;
	align-items: center;
  /* justify-content: space-between; */
	width: 100%;
	height: 42px;
	font-size: 16px;
	padding-left: 32px;
	color: #f9f9f9;
}
.popupTopTitle button {
  margin-left: auto;
  margin-right: 10px;

}
.popupTopTitle button.po-right {
  margin-left: auto;
  margin-right: 10px;

}

.popupTopTitle:before {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 16px;
	height: 16px;
	border: 3px solid #f9f9f9;
	border-radius: 50%;
	content: "";
	transform: translate(0, -50%);
	box-sizing: border-box;
}

.popupContainer {
	position: relative;
    display: block;
    /* min-width: 768px; */
    height: calc(100vh - 69px);
}
.mockTestViewPopup .popupContainer {
	height: calc(100vh - 60px);
	overflow: hidden;
}
.vocabFirstCategory .popupContainer,
.vocabSecondCategory .popupContainer,
.vocabThirdCategory .popupContainer {
	height: calc(100vh - 220px);
}

.companyRegisterPopup2 .popupContainer {
	height: calc(100vh - 255px);
}
.basicInfo .popupContainer,
.campusInfo2 .popupContainer,
.paymentInfo .popupContainer,
.serviceInfo .popupContainer,
.noticeWritePopup .popupContainer {
	height: calc(100vh - 150px);
}

.classPopup .popupContainer {
	height: calc(100vh - 89px);
}
.smsSend01 .popupContainer,
.smsSend02 .popupContainer,
.smsSend03 .popupContainer {
	height: auto;
}
.popupContent {
    position: relative;
    display: block;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.vocabFirstCategory .popupContent,
.vocabSecondCategory .popupContent,
.vocabThirdCategory .popupContent,
.academyInfo .popupContent,
.campusInfo .popupContent,
.optionInfo .popupContent,
.basicInfo .popupContent,
.campusInfo2 .popupContent,
.paymentInfo .popupContent,
.serviceInfo .popupContent,
.fileUploadPopup .popupContent {
	padding: 0;
}

.serviceInfo ul.checkList {
	padding: 5px;
}
.registerBox ul.checkList {
	justify-content: center;
	width: 100%;
}
.popupContentTopTitle ul.checkList {
	margin: 0;
	margin-left: auto;
}
.selectTargetBottomBox ul.checkList {
	flex-direction: column;
	margin: 5px 2px;
}
.selectTargetBottomBox ul.checkList li {
	margin: 2px 0;
}

.messageWritePopup ul.checkList,
.messageViewPopup ul.checkList {
	flex-wrap: wrap;
}
.messageWritePopup ul.checkList li,
.messageViewPopup ul.checkList li {
	margin: 2px;
}

.transferforClassBox ul.checkList {
	flex-wrap: wrap;
	justify-content: center;
	margin: 10px 5px;
}
.transferforClassBox ul.checkList li {
	margin: 2px 0;
}
ul.popupTeacherList {
	position: relative;
	display: flex;
}

ul.popupTeacherList li {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 3px;
	text-align: center;
}

ul.popupTeacherList li select {
	margin: 3px 0;
}

.stopStatusBox {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.classStartEndDateBox {
	position: relative;
	display: flex;
	align-items: center;
	height: 42px;
	margin-top: 5px;
}

.academyInfoBox {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 150px;
	padding: 15px;
	box-sizing: border-box;
}
.academyIconBox,
.academyImgBox {
	position: relative;
    display: flex;
    flex-shrink: 0;
    width: 120px;
    height: 90px;
    background-color: #f0f0f0;
	border: 1px solid #dedede;
    border-radius: 10px;
    overflow: hidden;
}
.academyIconBox span {
    display: block;
    text-indent: -9999px;
}
.academyIconBox:before {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 90px;
    font-size: 100px;
    color: #a1a1a1;
    transform: translate(-50%, -50%);
    content: "\ea26";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.academyImgBox img {
	width: 100%;
}

.flexBox {
	display: flex;
}


.subNavList li:nth-child(even) {
    background-color: #273b6b;
}
.studyPointModifyPopup .flexBox {
	align-items: center;
}

.academyImgChangeBtn,
.searchAddressBtn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 32px;
	margin-top: 5px;
	font-size: 12px;
	color: #fff;
	background-color: #5f6271;
    border: none;
    border-radius: 42px;
}
.searchAddressBtn {
	width: 90px;
	margin-top: 0;
	margin-left: 5px;
}

.popupInputBox {
	position: relative;
	display: flex;
}
.popupInputBox input {
	margin-right: 10px;
}
.realExamViewBtn,
.selectedAllocationBtn,
.randomRecallBtn,
.classInfoModifyBtn,
.textbookAllocationBtn2,
.classScheduleBtn {
	height: 24px;
    padding: 0 15px;
    color: #fff;
    background-color: #47a5ff;
    border: none;
}
.selectedAllocationBtn,
.randomRecallBtn {
	height: 32px;
}
.popupLayoutTopBox {
	position: relative;
	display: flex;
	width: 100%;
	height: 42px;
}
.popupLayoutTopBox div {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	height: 42px;
	background-color: #fffef6;
	border-left: 1px solid #dedede;
}
.popupLayoutTopBox div:last-child {
	border-right: 1px solid #dedede;
}
.popupLayoutTable,
.subLayoutTable {
	position: relative;
	display: block;
	padding: 15px;
	box-sizing: border-box;
}
.eVocaAddPopup .popupLayoutTable,
.basicInfo .popupLayoutTable,
.serviceInfo .popupLayoutTable,
.classInfoBox .popupLayoutTable,
.assignClassPopup .popupLayoutTable {
	padding: 0;
}
.companyStudentPopup .popupLayoutTable {
	padding: 5px;
}
.popupLayoutTable tr:first-child th,
.popupLayoutTable tr:first-child td,
.subLayoutTable tr:first-child th,
.subLayoutTable tr:first-child td {
	border-top: 1px solid #dedede;
}
.popupLayoutTable th,
.subLayoutTable th {
	height: 42px;
	padding: 5px;
	text-align: center;
	background-color: #f9f9f9;
	border-bottom: 1px solid #dedede;
}
.serviceInfo .popupLayoutTable th {
	vertical-align: top;
	padding-top: 20px;
}
.popupLayoutTable td,
.subLayoutTable td {
	height: 42px;
	padding: 5px;
	text-align: left;
	border-bottom: 1px solid #dedede;
	box-sizing: border-box;
}
.popupLayoutTable td:nth-child(2),
.popupLayoutTable td:nth-child(4),
.subLayoutTable td:nth-child(2),
.subLayoutTable td:nth-child(4){
	text-align: left;
}

.popupListBox .popupLayoutTable th,
.classInfoBox .popupLayoutTable th {
	height: 32px;
	font-size: 13px;
}
.assignClassPopup .popupLayoutTable th {
	height: 36px;
	font-size: 13px;
}
.popupClassInfoTopBox .popupLayoutTable th {
	height: 20px;
	padding: 0;
	font-size: 13px;
}
.popupListBox .popupLayoutTable td,
.classInfoBox .popupLayoutTable td,
.classInfoBox .popupLayoutTable td {
	height: 32px;
	font-size: 12px;
}
.popupClassInfoTopBox .popupLayoutTable td {
	height: 24px;
	font-size: 12px;
}
.assignClassPopup .popupLayoutTable td {
	height: 32px;
	font-size: 12px;
}

.setMenuMakePopup .popupLayoutTable td,
.lessonAutoMakePopup .popupLayoutTable td,
.academyInfo .popupLayoutTable td,
.campusInfo .popupLayoutTable td,
.optionInfo .popupLayoutTable td,
.eVocaAddPopup .popupLayoutTable td:nth-child(2),
.eVocaAddPopup .popupLayoutTable td:nth-child(3) {
	text-align: left;
}
.eVocaAddPopup .popupLayoutTable td:nth-child(4) {
	text-align: center;
}

.InputBox {
	position: relative;
	height: 32px;
	font-size: 12px;
}
.examMakePopup .InputBox {
	border: 1px solid #27b1f1;
}
.textBox {
	position: relative;
	display: block;
	width: 100%;
	max-height: 150px;
	line-height: 1.5;
	padding: 10px;
	text-align: left;
	font-size: 12px;
	border: 1px solid  #dedede;
	box-sizing: border-box;
	overflow: auto;
	letter-spacing: 0;
}
.addDeleteBtn,
.duplicateCheckBtn,
.fileSelectBtn,
.fileUploadBtn,
.viewCheckBtn,
.commentBtn,
.writeBtn2,
.reloadBtn,
.viewBtn,
.messageSaveBtn,
.messageReWriteBtn,
.issueManageBtn,
.learnpiaViewBtn,
.allocationDeleteBtn {
	height: 32px;
    margin: 0 auto;
    padding: 0 15px;
    color: #fff;
    background-color: #5f6271;
    border: none;
}
.writeBtn2 {
	background-color: #27b1f1;
}
.fileUploadBtn,
.viewCheckBtn {
	margin: 0;
}
.viewCheckBtn {
	height: 27px;
}
.selectBtn {
	min-width: 60px;
	margin: 0 auto;
    padding: 0 15px;
    color: #27b1f1;
    background-color: transparent;
    border: 1px solid #27b1f1;
}
.reloadBtn,
.viewBtn {
	height: 20px;
	color: #000;
	background-color: #fff;
	border: 1px solid #9d9d9d;
}
.learnpiaContentBox .viewBtn {
	margin: 0 5px;
}
.messageSaveBtn {
	height: 24px;
	color: #27b1f1;
	background-color: #fff;
	border: 1px solid #27b1f1;
}
.messageReWriteBtn {
	height: 48px;
	color: #fff;
	background-color: #27b1f1;
	border: 1px solid #27b1f1;
}
.scriptMainWordBox {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	line-height: 1.5;
	padding: 10px;
	margin-top: 10px;
	background-color: #f0f0f0;
	box-sizing: border-box;
}
.tableListTitle {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 32px;
	margin: 0 15px;
	padding: 0 10px;
	font-size: 14px;
	font-weight: bold;
	color: #2d2d2d;
	background-color: #f0f0f0;
	border: 1px solid #dedede;
	border-radius: 32px;
	box-sizing: border-box;
}
.titleBox {
	position: relative;
    display: block;
    max-width: 100%;
    padding: 0;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
.numBox {
	position: relative;
	display: inline-flex;
	color: #2773ff;
}
.viewModifyBtn,
.modifyBtn,
.deleteBtn,
.paymentBtn,
.receiptdeleteBtn {
	min-width: 60px;
	color: #ff5c0c;
    background-color: #fff;
    border: 1px solid #ff5c0c;
}
.modifyBtn {
	min-width: 60px;
	color: #c3820c;
    background-color: #fff;
    border: 1px solid #c3820c;
}
.noticeViewPopup .modifyBtn,
.noticeViewPopup .deleteBtn {
	height: 27px;
}
.popupBottomBtnBox .modifyBtn,
.popupBottomBtnBox .deleteBtn,
.subBottomBtnBox .modifyBtn,
.subBottomBtnBox .deleteBtn,
ul.popupSearchList .modifyBtn,
ul.popupSearchList .deleteBtn,
.etcReceiptModifyPopup .popupSearchInBox .modifyBtn,
.etcReceiptModifyPopup .popupSearchInBox .deleteBtn {
	height: 32px;
}

.listBtn {
	min-width: 60px;
	height: 27px;
    background-color: #fff;
}
.popupBottomBtnBox .listBtn {
	height: 32px;
}
.popupContentExBox {
	position: relative;
	display: block;
	line-height: 1.5;
	padding: 10px;
	color: #fff;
	background-color: #156dcb;
	border-radius: 10px;
	box-sizing: border-box;
}
.popupExamTopBox {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 42px;
	border-bottom: 1px solid #dedede;
}
.examRealViewPopup {
	background: url("../images/bg_logo_inverse.svg") repeat;
	background-size: 100px auto;
}
.popupExamTitle {
	position: relative;
	display: flex;
	align-items: center;
	height: 42px;
}
.popupExamNumBox {
	position: relative;
	display: inline-flex;
	justify-content: center;
    min-width: 60px;
	height: 28px;
	margin: -5px 10px 0 0;
    padding: 7px 10px;
    text-align: center;
    color: #fff;
    background-color: #b498db;
    border-radius: 32px;
	box-sizing: border-box;
}
.examLeftTimeBox {
	position: relative;
	display: flex;
	justify-content: center;
    min-width: 130px;
	height: 28px;
	margin-left: auto;
    padding: 4px 10px 0;
	font-weight: bold;
    color: #ff3000;
    background-color: #fff;
    border: 3px solid #ff3000;
    border-radius: 42px;
	box-sizing: border-box;
}
.textListBox {
	position: relative;
    display: block;
    margin: -1px auto 0;
    background-color: #f0f0f0;
    border: 1px solid #acacac;
}
.textListInBox {
    position: relative;
    padding: 15px;
    line-height: 1.5;
    text-align: left;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
.imgListBox {
	position: relative;
    display: block;
    margin: -1px auto 0;
    background-color: #fff;
    /* border: 1px solid #acacac; */
}
.imgListInBox {
    position: relative;
    padding: 15px;
    text-align: center;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.selectedBox {
    position: relative;
    display: block;
}

ul.answerList {
    position: relative;
    display: flex;
	flex-direction: column;
    margin: 10px 0;
}

ul.answerList li {
    position: relative;
    margin: 5px;
    text-align: left;
    font-size: 14px;
}

ul.answerList li .numberInBox {
    display: flex;
    align-items: center;
	padding: 0;
	font-size: 15px;
}

.numberInBox span:nth-child(1) {
    display: inline-block;
    /* min-width: 32px; */
}
.numberInBox span:nth-child(2) {
    display: inline-block;
	line-height: 1.3;
}
.numberInBox span:nth-child(3) {
    display: inline-block;
    min-width: 100px;
}
.numberInBox label span {
	position: absolute;
	top: 5px;
    /* left: -4px; */
}

.answerExBox {
	position: relative;
	display: inline-block;
	margin-left: 10px;
	padding: 3px 15px;
	color: #fff;
	background-color: #252d40;
	border-radius: 32px;
}

ul.answerList.checks input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
ul.answerList.checks input[type="checkbox"] + label {
    position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
    z-index: 10;
    width: 32px;
    height: 30px;
    margin: 0 5px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #252d40;
    cursor: pointer;
	background-color: transparent;
	border: none;
	font-family: 'Roboto', 'noto', sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
ul.answerList.checks input[type="checkbox"] + label:before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #fff;
    border: 1px solid #acacac;
    border-radius: 5px;
    box-shadow: 0px 1px 2px rgb(0 0 0 / 5%), inset 0px -15px 10px -12px rgb(0 0 0 / 5%);
}
ul.answerList.checks input[type="checkbox"]:checked + label {
	color: #fff;
}
ul.answerList.checks input[type="checkbox"]:checked + label:before {
    background: #252d40;
    border-color: #252d40;
	content:"";
}

ul.answerList.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.answerList.checks input[type="radio"] + label {
	position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    width: 24px;
	min-width: 24px;
    height: 24px;
    margin: 0 5px;
	padding: 0;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #252d40;
	background-color: transparent;
	border: none;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

ul.answerList.checks input[type="radio"] + label:before {
	content: '';
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	width: 24px;
	height: 24px;
	text-align: center;
	/* background: #fafafa; */
	border: 1px solid #acacac;
	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.answerList.checks input[type="radio"] + label:active:before,
ul.answerList.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.answerList.checks input[type="radio"]:checked + label {
	color: #fff;
}
ul.answerList.checks input[type="radio"]:checked + label:before {
	background: #252d40;
    border-color: #252d40;
    content: "";
}
ul.answerList.checks input[type="radio"]:checked + label:after {
	content: '';
	position: absolute;
	top: 5px;
	left: 4px;
	width: 14px;
	height: 14px;
	background: transparent;
	border-radius: 100%;
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
	display: none;
}

.contentList .checks input[type="radio"] + label {
	padding: 0 10px;
}

.contentListBox {
	position: relative;
	display: flex;
	width: 100%;
	min-height: 40px;
}
.optionInfo .contentListBox {
	height: auto;
}
.popupContentTopBox {
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 39px;
    margin: 0 auto;
    padding: 5px;
    font-size: 12px;
    text-align: left;
    background-color: #fff;
	border-top: 1px solid #d6d6d6;
    border-bottom: 1px solid #d6d6d6;
    box-shadow: #dedede 0 2px 5px;
}
ul.popupConentTabList {
	position: relative;
    display: inline-flex;
    width: auto;
    height: 32px;
    margin-top: 5px;
    padding-left: 0px !important;
    box-sizing: border-box;
}
ul.popupConentTabList li {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #2d2d2d;
    margin: 0px;
    /* margin-right: 2px; */
    margin-left: 2px;
}
ul.popupConentTabList a.tabBtn:link,
ul.popupConentTabList a.tabBtn:visited,
ul.popupConentTabList a.tabBtn:active {
    float: left;
    display: inline-block;
    min-width: 50px;
    height: 32px;
    line-height: 32px;
    /* margin: 0 10px; */
    padding: 0 7px;
    text-align: center;
    font-size: 13px;
    color: #34374b;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #b8bcd1;
    /* border-right: 1px solid #fff; */
    border-bottom: 3px solid #fff;
    /* border-left: 1px solid #fff; */
    font-family: 'Roboto', sans-serif;
    /* -webkit-border-top-left-radius: 5px; */
    -webkit-border-top-right-radius: 5px;
    /* -moz-border-radius-topleft: 5px; */
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
ul.popupConentTabList li:first-child a.tabBtn:link,
ul.popupConentTabList li:first-child a.tabBtn:visited,
ul.popupConentTabList li:first-child a.tabBtn:active
ul.popupConentTabList li:first-child a.tabBtn:hover {
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
}
ul.popupConentTabList a.tabSelected:link,
ul.popupConentTabList a.tabSelected:visited,
ul.popupConentTabList a.tabSelected:active {
    float: left;
    z-index: 10;
    display: inline-block;
    min-width: 50px;
    height: 32px;
    line-height: 32px;
    /* margin: 0 10px; */
    padding: 0 7px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    background-color: #747ba0 !important;
    border: 1px solid #747ba0;
    border-bottom: 3px solid #3f425b;
    font-family: 'Roboto', sans-serif;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
ul.popupConentTabList a.tabSelected:hover {
  height: 32px;
  line-height: 32px;
  color: #ffffff;
  background-color: #555a75 !important;
  border-bottom: 3px solid #464a63;
}

.tab_container {
	display: block;
	padding: 15px 10px 10px;
	box-sizing: border-box;
}
.vocabMenuMakePopup .tab_container {
	padding: 0 0 52px;
}
.tab_content {
	position: relative;
	padding: 0;
	background-color: #fff;
}

.popupFrame {
	width: 100%;
    height: calc(100vh - 232px);
    margin: 0px;
    background-color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
}

.vocabFirstCategory,
.vocabSecondCategory,
.vocabThirdCategory,
.academyInfo,
.campusInfo,
.optionInfo {
	background-color: #fff;
}

.topLogoBox {
    position: absolute;
	top: 0;
    right: 5px;
    display: inline-flex;
    align-items: center;
    width: 95px;
    height: 37px;
}
.topLogoBox span {
	display: block;
	text-indent: -9999px;
}
.topLogoBox:before {
	position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    width: 92px;
    height: 22px;
    font-size: 20px;
    color: #00baeb;
    content: "\e92c";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
}

.popupProgramManageBox {
	position: relative;
	display: flex;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
}
.popupProgramListBox {
	position: relative;
	height: calc(100vh - 115px);
	border: 1px solid #dedede;
}
.programRightBox .popupProgramListBox {
	width: 100%;
}
.popupProgramBox {
	position: relative;
	display: block;
	width: 100%;
	max-height: calc(100vh - 160px);
}
ul.programList {
	position: relative;
	display: block;
	padding: 10px;
	box-sizing: border-box;
	overflow: hidden;
}
ul.programList li {
	display: flex;
	align-items: center;
	min-height: 32px;
	box-sizing: border-box;
}
ul.programList li:nth-child(even) {
	background-color: #f0f7ff;
}
a.programLink:link,
a.programLink:visited,
a.programLink:hover,
a.programLink:active {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 32px;
	padding: 0 10px;
	box-sizing: border-box;
}
a.programLink.on {
	color: #fff;
	background-color: #0d6efd;
}

ul.programList.checks input[type="checkbox"] + label {
	margin: 3px;
}
.programRightBox {
	position: relative;
	display: flex;
	align-items: center;
}
.popupTableBox {
	position: relative;
    display: block;
    width: 100%;
    max-height: calc(100vh - 160px);
}

a.urlLink:link,
a.urlLink:visited,
a.urlLink:active {
    position: relative;
    display: block;
    max-width: 100%;
    padding: 0;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
.popupSearchTopBox,
.subSearchTopBox,
.subTitleTopBox {
	position: relative;
	display: flex;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
	height: 42px;
	margin: 0 15px;
	background-color: #f9f9f9;
	border: 1px solid #dedede;
	border-radius: 42px;
}
.smsSendPopup .subSearchTopBox {
	flex-grow: 0;
}
.textbookInBox .popupSearchTopBox,
.popupTextbookBottomInBox .popupSearchTopBox {
	flex-grow: 0;
}
/*
.vocabMenuMakePopup .vocabThirdCategory .popupSearchTopBox {
	position: fixed;
	left: -15px;
    right: -17px;
    bottom: 0;
	height: 52px;
	border-radius: 0;
}
*/

.todayMessagePopup .vocabThirdCategory .popupSearchTopBox {
	position: fixed;
	left: -15px;
    right: -17px;
    bottom: 0;
	height: 52px;
	border-radius: 0;
}

.subTitleTopBox {
	font-weight: bold;
	color: #27b1f1;
}
.examSearchAddPopup .popupSearchTopBox,
.eVocaAddPopup .popupSearchTopBox,
.tabTransfer .popupSearchTopBox,
.taskBox .popupSearchTopBox,
.classAssessment .popupSearchTopBox,
.learnpiaBox .popupSearchTopBox,
.textbookInBox .popupSearchTopBox {
	margin: 0;
}
.popupTextbookBottomInBox .popupSearchTopBox {
	margin: 0 10px;
}
.popupClassInfoTopBox .popupSearchTopBox {
	justify-content: flex-start;
}
.popupBottomRightBox {
	position: absolute;
	right: 10px;
}
.popupTopRightBox {
	position: relative;
	display: flex;
	margin-left: auto;
}
.popupScrollBox {
	position: relative;
	display: block;
	margin: 15px;
	max-height: calc(100vh - 393px) !important;
}
.examSearchAddPopup .popupScrollBox,
.mockTestSearchPopup .popupScrollBox {
	max-height: calc(100vh - 132px) !important;
}
.basicInfo .popupScrollBox {
	max-height: calc(100vh - 290px) !important;
}
.campusInfo2 .popupScrollBox {
	max-height: calc(100vh - 406px) !important;
}
.paymentInfo .popupScrollBox {
	max-height: calc(100vh - 410px) !important;
}
.serviceInfo .popupScrollBox {
	max-height: calc(100vh - 302px) !important;
}
/*
.tabListBox .popupScrollBox {
	margin: 0;
	max-height: calc(100vh - 460px) !important;
}
*/
.textbookListBox .popupScrollBox {
	margin: 0;
	max-height: calc(100vh - 630px) !important;
}
.tuitionModifyPopup .popupScrollBox {
	max-height: calc(100vh - 310px) !important;
}
.textbookModifyPopup .popupScrollBox {
	max-height: calc(100vh - 240px) !important;
}
.etcReceiptModifyPopup .popupScrollBox {
	max-height: calc(100vh - 240px) !important;
}
.classAssessment .popupScrollBox {
	margin: 0;
	max-height: calc(100vh - 637px) !important;
}
.learnpiabox .popupScrollBox {
	margin: 0;
	max-height: calc(100vh - 585px) !important;
}
.companyStudentPopup .popupScrollBox {
	margin: 0;
	max-height: calc(100vh - 460px) !important;
}
.classRightBox .popupScrollBox,
.receiptLeftBox .popupScrollBox {
	margin: 0;
	max-height: 129px !important;
}
.tuitionFees .popupScrollBox,
.etcPayment .popupScrollBox,
.attendance .popupScrollBox,
.studentRegistration .popupScrollBox,
.learningPoint .popupScrollBox {
	margin: 0;
	max-height: calc(100vh - 500px) !important;
}
.textbookListBox .popupScrollBox {
	margin: 0;
	max-height: calc(100vh - 530px) !important;
}
.popupListBox .popupScrollBox {
	margin: 0;
	max-height: calc(100vh - 610px) !important;
}
.endCourseTopBox .popupScrollBox {
	margin: 0;
	max-height: 100px !important;
}
.endCourseListBox .popupScrollBox {
	margin: 0;
	max-height: calc(100vh - 615px) !important;
}
.taskBox .popupScrollBox {
	margin: 0;
	max-height: calc(100vh - 510px) !important;
}
.classEvaluation .popupScrollBox {
    margin: 0;
    max-height: calc(100vh - 575px) !important;
}
.learnpia .popupScrollBox {
    margin: 0;
    max-height: calc(100vh - 545px) !important;
}
.counselContentPopupBox .popupScrollBox {
	margin: 0;
	max-height: 380px !important;
}
.mockTestViewPopup .popupScrollBox {
	margin: 0;
	max-height: calc(100vh - 424px) !important;
}
.textbookLeftBox.popupScrollBox {
	margin: 0;
	max-height: calc(50vh - 224px) !important;
}
.textbookRightBox.popupScrollBox {
	margin: 0;
	max-height: calc(50vh - 172px) !important;
}
.textbookBottomBox.popupScrollBox {
	margin: 0;
	max-height: calc(50vh - 194px) !important;
}
.popupNoteBox.popupScrollBox {
	margin: 0;
	max-height: 70px !important;
}
.classInfoScrollBox.popupScrollBox {
	max-height: 277px !important;
}
.classInfoTableBox.popupScrollBox {
	max-height: calc(100vh - 550px) !important;
}
.assignScrollBox.popupScrollBox {
	margin: 0;
	max-height: calc(100vh - 320px) !important;
}
.videoListPopup .popupScrollBox {
    margin: 0;
	max-height: calc(100vh - 226px) !important;
}
.classifiedSearchPopup .popupScrollBox {
    margin: 0;
	max-height: calc(100vh - 266px) !important;
}

.classifiedSearchPopup .popupContentBox50 .popupScrollBox {
    margin: 0;
	height: calc(50vh - 149px) !important;
}
.teacherInfoPopup .infoTopBox .popupScrollBox {
    display: block;
    width: 100%;
	height: 72px;
    margin: 0;
    margin-left: 10px;
    background-color: #fff;
    border: 1px solid #acacac;
}
.teacherInfoPopup .popupScrollBox {
    margin: 0;
    max-height: calc(30vh - 43px) !important;
}

.studentAttendancePopup .popupScrollBox {
    margin: 0;
    max-height: calc(100vh - 186px) !important;
}

.classReportPopup .popupScrollBox {
    margin: 0;
    max-height: calc(100vh - 154px) !important;
}

.noticeWritePopup .popupLayoutTable .popupScrollBox {
	max-height: 96px !important;
	overflow: auto;
}

.popupNoteContentBox {
	line-height: 1.5;
	font-size: 13px;
}
ul.popupTableBottomBox {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 52px;
	padding-left: 8%;
	background-color: #f0fcff;
	border-top: 1px solid #dedede;
	box-sizing: border-box;
}
ul.popupTableBottomBox li {
	display: flex;
	justify-content: center;
}
ul.popupTableBottomBox li:nth-child(1) {
	width: 7%;
}
ul.popupTableBottomBox li:nth-child(2) {
	width: 10%;
}
ul.popupTableBottomBox li:nth-child(3) {
	width: 8%;
}
.popupTableBottomBox span {
	position: relative;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	height: 32px;
	margin: 0 5px;
	padding: 0 20px;
	color: #fff;
	background-color: #272c3e;
	border: 1px solid #171a26;
	border-radius: 32px;
}
.examNumBox {
	position: relative;
	display: flex;
	align-items: center;
	height: 32px;
	padding: 0 20px;
	font-size: 18px;
	font-weight: bold;
	color: #00baeb;
	border: 1px solid #00baeb;
	border-radius: 32px;
}
.popupTitleBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 42px;
	font-size: 16px;
	color: #fff;
	background-color: #51575c;
}
ul.popupContentList,
ul.subContentList {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	border-bottom: 1px solid #dedede;
}
.optionInfo ul.popupContentList {
	flex-wrap: wrap;
	flex-direction: row;
	border-bottom: none;
}
.setMenuMakePopup ul.popupContentList {
	border-bottom: none;
}
.paymentInfo ul.popupContentList {
	display: inline-flex;
	width: auto;
	border-bottom: none;
}
.serviceInfo ul.popupContentList {
	flex-direction: column;
	border-bottom: none;
}
ul.popupContentList li {
	display: flex;
	justify-content: flex-start;
	width: auto;
	min-height: 32px;
	margin: 0 2px;
	padding: 5px 0;
}
ul.popupContentList li span {
	display: block;
	width: 100%;
}

.messageContentBox {
	position: relative;
	display: flex;
	width: 100%;
}

.contentAreaBox {
	position: relative;
	width: calc(100% - 120px);
	margin-right: 10px;
}
ul.contentCheckList {
	position: relative;
	display: flex;
	flex-direction: column;
}
ul.contentCheckList li {
	margin: 2px;
}
.commentTitleBox {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	line-height: 1.5;
}
.studentInfoBox,
.teacherInfoBox {
	position: relative;
	display: flex;
	width: 100%;
	padding: 10px;
	background-color: #f9f9f9;
	border: 1px solid #dedede;
    box-sizing: border-box;
}
.teacherInfoBox {
    display: flex;
    width: auto;
    margin: 15px 15px 0;
}
.studentImgBox,
.teacherImgBox {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100px;
}
.uploadImgBtn {
	position: relative;
	width: 100%;
	height: 32px;
	padding: 0 15px;
	color: #fff;
}
.studentImgInBox,
.teacherImgInBox {
	height: 80px;
	background-color: #fff;
	border: 1px solid #acacac;
	box-shadow: 5px 5px 0 0 rgba(0,0,0,0.1);
	overflow: hidden;
}
.studentImgInBox img,
.teacherImgInBox img {
	width: 100%;
}
.studentInfoInBox,
.teacherInfoInBox {
	position: relative;
	width: calc(100% - 100px);
	font-size: 12px;
}
.teacherInfoInBox {
    width: calc(100% - 100px);
}
.infoTopBox {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-left: 15px;
	box-sizing: border-box;
}
.teacherInfoPopup .infoTopBox {
    flex-direction: row;
}
ul.teacherLoginList {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    width: 170px;
    height: 72px;
}
ul.teacherLoginList li {
	display: flex;
}
ul.teacherLoginList li .selectBox {
    width: 100%;
}
ul.teacherClassList {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 68px;
    padding: 5px;
    box-sizing: border-box;
}
ul.teacherClassList li {
    margin: 6px 0;
    font-size: 15px;
}
ul.infoTopList {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
/*
ul.infoTopList.infoBottom {
	margin-top: 5px;
}
*/
ul.infoTopList li {
	display: flex;
	flex-shrink: 0;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
	height: 32px;
	margin: 2px 0 2px -1px;
	/* padding: 0 10px; */
	background-color: #fff;
	border: 1px solid #dedede;
}
/*
ul.infoTopList li:last-child {
	justify-content: flex-end;
	flex-grow: 0;
	margin-left: 10px;
	background-color: transparent;
	border: none;
}
*/
ul.infoTopList.infoBottom li {
	flex-grow: 0;
	padding: 0 15px;
}
ul.infoTopList.infoBottom li:nth-last-child(2) {
	flex-grow: 0;
	background-color: transparent;
	border: none;
}
ul.infoTopList.infoBottom li:last-child {
	flex-grow: 1;
	padding: 0;
	background-color: transparent;
	border: none;
}

.infoBottomBox {
	position: relative;
	display: flex;
	flex-direction: column;
	width: calc(100% - 20px);
	margin: 5px 10px 0 15px;
	padding-top: 5px;
	border-top: 1px dashed #acacac;
	box-sizing: border-box;
}
.teacherInfoPopup .infoBottomBox {
    width: calc(100% - 15px);
    margin: 10px 0 0 15px;
    padding-top: 10px;
}
ul.infoBottomList {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
ul.infoBottomList.infoBottom {
	margin-top: 5px;
}
ul.infoBottomList li {
	display: flex;
	flex-shrink: 0;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    height: 32px;
    margin: 2px 0 2px -1px;
	padding: 0 10px;
	background-color: #fff;
	border: 1px solid #dedede;
}
ul.infoBottomList.infoTop li {
	padding: 0;
}
ul.infoBottomList.infoTop li:first-child {
	flex-grow: 0;
	background-color: transparent;
	border: none;
}
ul.infoBottomList.infoTop li:last-child {
	justify-content: flex-start;
	padding-left: 10px;
}
.parentInfoTitle {
	position: relative;
	display: flex;
	align-items: center;
	height: 32px;
	padding: 0 15px;
	color: #fff;
	background-color: #757da1;
	border-top-left-radius: 32px;
	border-bottom-left-radius: 32px;
}

.classTopBtnBox {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 52px;
	/* margin-bottom: 5px; */
}
ul.classTopBtnList {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}
ul.classTopBtnList li {
	display: flex;
	flex-shrink: 0;
	flex-grow: 1;
	justify-content: center;
	width: 30%;
}
ul.classTopBtnList li:first-child {
	justify-content: flex-start;
}
ul.classTopBtnList li:last-child {
	justify-content: flex-end;
	align-items: center;
}
ul.classTopBtnList ul.checkList li {
    width: auto;
}

ul.checkList.checks.MT10 {
	margin-top: 0 !important;
}


.refresBtn,
.inquiryListBtn,
.studentInfoModifyBtn,
.childrenAddBtn,
.studentRegisterBtn,
.newClassAllocationBtn,
.staffMessageBtn,
.absenceBtn,
.counselBtn,
.tuitionBtn,
.notpaidBtn {
	flex-shrink: 0;
	height: 28px;
	margin: 0 2px;
	padding: 0 10px;
	background-color: #f0f0f0;
	border: 1px solid #acacac;
}
.transfertoBtn,
.studentEndBtn {
	flex-shrink: 0;
	height: 28px;
	margin: 0 2px;
	padding: 0 10px;
	color: #fff;
	background-color: #9744cd;
	border: none;
}
.refresBtn:hover,
.inquiryListBtn:hover,
.studentInfoModifyBtn:hover,
.childrenAddBtn:hover,
.studentRegisterBtn:hover,
.newClassAllocationBtn:hover,
.staffMessageBtn:hover,
.absenceBtn:hover,
.counselBtn:hover,
.tuitionBtn:hover,
.notpaidBtn:hover {
	color: #5d5d5d;
	background-color: #fff;
	border: 1px solid #acacac;
}

.transfertoBtn:hover,
.studentEndBtn:hover {
	color: #fff;
	background-color: #a755de;
}
.absenceBtn.on,
.counselBtn.on,
.tuitionBtn.on,
.notpaidBtn.on {
	color: #33c1c5;
	background-color: #fff;
	border: 1px solid #33c1c5;
}
.transfertoBtn.on,
.studentEndBtn.on {
	color: #efd3ff;
	background-color: #791cb7;
	border: none;
}
.classBottomBox {
	position: relative;
	display: flex;
	height: 42px;
    margin-bottom: 0 !important;
    background-color: #fff;
}
.classBottomBox .ML10 {
    margin-left: 5px !important;
}
.reservationBox {
	position: relative;
	display: flex;
    flex-shrink: 0;
	align-items: center;
	height: 32px;
	padding: 0 10px;
    font-size: 11px;
	color: #00baeb;
	background-color: #fff;
	border: 1px solid #acacac;
	border-radius: 3px;
}

.receiptInfoBox {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 37px;
	background-color: #f9f9f9;
	border: 1px solid #acacac;
	border-radius: 42px;
}
ul.receiptPriceList {
	position: absolute;
    top: 7px;
    margin-left: 10px;
    /* right: 10px; */
    display: flex;
}
.popupContentBox30:hover .receiptLeftBox ul.receiptPriceList {
    position: fixed;
    z-index: 10;
    top: 220px;
    left: 50%;
    transform: translateX(286px);
    /* background-color: rgba(255, 255, 255, 0.8); */
}
@media screen and (max-width: 1700px) {
	.popupContentBox30:hover .receiptLeftBox ul.receiptPriceList {
        position: absolute;
        z-index: 10;
        top: 7px;
        left: auto;
        right: 110px;
        transform: translateX(0);
    }
}
ul.receiptPriceList li {
	margin: 0 20px;
}
.receiptPrintBox {
	position: relative;
	display: flex;
	margin-left: auto;
}
/*
.popupContentBox30:hover .receiptLeftBox .receiptPrintBox {
	margin-left: 0;
}
*/
.receiptStatusTitle {
	position: relative;
	display: flex;
	align-items: center;
	height: 27px;
	padding: 0 20px;
	margin: 0 0 -10px 20px;
	font-weight: bold;
	color: #00baeb;
	background-color: #fff;
	border: 1px solid #acacac;
	border-bottom: none;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}
.tableTopBtnBox {
	position: relative;
	display: flex;
	width: 100%;
	margin-bottom: 5px;
}
.tuitionFees .tableTopBtnBox,
.etcPayment .tableTopBtnBox,
.endCourse .tableTopBtnBox,
.attendance .tableTopBtnBox {
	justify-content: flex-end;
}
.counselContentPopupBox {
	position: absolute;
	z-index: 50;
	bottom: 0;
	left: 50%;
	width: 450px;
	height: 400px;
	padding: 10px;
	margin-left: -250px;
	background-color: #fff;
	border: 1px solid #acacac;
	box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
	border-radius: 10px;
	box-sizing: border-box;
	/* overflow: hidden; */
}
.popupTableContentBox {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	height: 32px;
	margin: 10px 0;
}
.smsContentBox {
	position: relative;
	display: block;
}
.smsContentBox span {
	position: relative;
	display: block;
	text-align: left;
}
.refundBankBox {
	position: relative;
	display: block;
	margin-top: 10px;
	padding: 10px;
	background-color: #fff;
	border: 1px solid #acacac;
	box-sizing: border-box;
}
.refundTitle {
	position: absolute;
    z-index: 10;
    top: -12px;
    padding: 3px 15px;
    font-size: 12px;
	color: #ff3000;
    background-color: #fff;
    border: 1px solid #acacac;
    box-sizing: border-box;
    border-radius: 32px;
}
.textbookListBox,
.classTransferSearchBox {
	position: relative;
	display: block;
	width: 100%;
	min-width: 320px;
	padding: 5px;
	border: 1px solid #dedede;
	box-sizing: border-box;
}
.classTransferSearchBox {
	display: flex;
	min-width: 362px;
}

.transferforClassBox,
.classNameBox {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #fbfbfb;
	border: 1px solid #dedede;
	box-sizing: border-box;
}
.transferTitle,
.classNameTitle {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 32px;
	padding-left: 10px;
	font-weight: bold;
	font-size: 14px;
	background-color: #fff;
	border-bottom: 1px solid #dedede;
	box-sizing: border-box;
}

ul.classNameList,
ul.classNameList2 {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
}
ul.classNameList li {
	display: flex;
    flex-direction: column;
    width: 100%;
	border-bottom: 1px solid #dedede;
}
ul.classNameList2 li {
	margin: 3px 0;
}
ul.classNameList li:last-child {
	border-bottom: none;
}
ul.classNameList li span {
	padding: 10px;
	box-sizing: border-box;
}
.popupListBox {
	position: relative;
	display: flex;
	width: 100%;
}

ul.pointInfoList {
	position: relative;
	display: flex;
	align-items: center;
	height: 32px;
	padding: 0 20px;
	background-color: #fbfbfb;
	border: 1px solid #dedede;
	border-radius: 32px;
}
ul.pointInfoList li {
	margin: 0 10px;
}

a.topSearchLink:link,
a.topSearchLink:visited,
a.topSearchLink:active {
	font-size: 12px;
	text-decoration: underline;
}
a.topSearchLink:hover {
	color: #27b1f1;
}
.popupContentTitle {
	position: relative;
	display: block;
	padding: 5px;
	font-size: 13px;
	background-color: #fbfbfb;
	border: 1px solid #dedede;
	box-sizing: border-box;
}
.noEndBox,
.endBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	font-size: 12px;
}
.noEndBox {
	color: #ff3000;
	background-color: #fff;
	border: 1px solid #ff3000;
}
.endBox {
	color: #00baeb;
	background-color: #fff;
	border: 1px solid #00baeb;
}
.popupContentTopTitle {
	position: relative;
	display: flex;
	align-items: center;
	height: 32px;
	font-size: 16px;
	font-weight: bold;
	color: #2166c5;
}
.reservationPopup .popupContentTopTitle,
.studentAttendancePopup .popupContentTopTitle {
	justify-content: center;
}
.studentAttendancePopup .popupContentTopTitle span {
    margin: 0 10px;
}
.receiptListBox {
	position: relative;
	display: block;
	padding: 10px;
	box-sizing: border-box;
}
.registerBox {
	position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 10px;
    background-color: #fbfbfb;
    border: 1px solid #dedede;
    box-sizing: border-box;
}
.popupTextbookTopBox,
.popupTextbookBottomBox {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	height: calc(50vh - 35px);
	padding: 15px;
	box-sizing: border-box;
}
.popupTextbookBottomBox {
	padding-top: 0 !important;
}
.popupTextbookTopInBox,
.popupTextbookBottomInBox {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	border: 1px solid #dedede;
}
.popupTextbookTitle,
.popupClassInfoTitle {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 32px;
	font-weight: bold;
	color: #fff;
	background-color: #494b57;
	padding: 0 15px;
	box-sizing: border-box;
}
.textbookInBox {
	position: relative;
	display: flex;
	flex-direction: column;
	height: calc(50vh - 118px);
	padding: 10px;
	border: 1px solid #dedede;
	box-sizing: border-box;
}
.textbookTitle {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 32px;
	font-weight: bold;
	font-size: 14px;
	background-color: #f5feff;
	border-top: 1px solid #dedede;
}
.popupTextbookInBox .textbookTitle {
	justify-content: flex-start;
}
.popupTextbookInBox {
	position: relative;
	display: flex;
}
.textbookScrollBox {
	position: relative;
	display: block;
	width: 100%;
	height: calc(50vh - 226px);
	border: 1px solid #acacac;
}
.textbookScrollBox ul.subSearchInList {
	padding: 0;
}
.textbookScrollBox ul.subSearchInList li {
	margin: 0;
	padding: 5px 0;
}
.textbookScrollBox ul.subSearchInList li:nth-child(even) {
	background-color: #f0f0f0;
}

.popupClassInfoTopBox {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	min-height: 200px;
	padding: 15px;
	box-sizing: border-box;
}
.popupClassInfoBottomBox {

}
.popupClassInfoTopInBox {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	border: 1px solid #dedede;
}
ul.popupClassInfoBtnList,
ul.popupClassInfoBtnList2 {
	position: relative;
	display: flex;
	height: 24px;
	margin-left: auto;
}
ul.popupClassInfoBtnList2 {
	height: 32px;
}
ul.popupClassInfoBtnList li,
ul.popupClassInfoBtnList2 li {
	margin: 0 2px;
}
.classInfoBottomPriceBox {
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	min-height: 32px;
	margin: -16px 15px 0;
	padding: 5px 10px;
	font-size: 14px;
	font-weight: bold;
	color: #000;
	background-color: #f5feff;
	border: 1px solid #dedede;
}
.popupSearchLeftBox {
	position: relative;
	display: flex;
	align-items: center;
	width: 250px;
	height: 32px;
	margin-left: 5px;
	background-color: #fff;
	border: 1px solid #dedede;
	border-radius: 42px;
}
.popupSearchLeftBox span:last-child {
	margin-left: auto;
}
.popupBottomBox {
	flex-direction: column;
}
.classInfoTable {
	padding: 0;
}
ul.studentInfoList {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 200px;
	padding: 10px;
	background-color: #fff;
    border: 5px solid #43d5ff;
	box-sizing: border-box;
}
ul.studentInfoList li {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 5px 0;
	font-size: 15px;
}
.searchListTopBox {
	display: flex;
}
.searchListTopBox .popupSearchTitle,
.searchListBottomBox .popupSearchTitle {
	height: 24px;
}
.popupSearchListBox {
	position: relative;
	display: flex;
	flex-direction: column;
}
.popuSearchBtnBox {
	position: relative;
	display: flex;
	align-items: center;
}
.searchPrevBtn,
.searchNextBtn {
	min-width: 28px;
	height: 28px;
	color: #fff;
	background-color: #5f6271;
    border: none;
	border-radius: 50%;
}
.searchPrevBtn span,
.searchNextBtn span {
	display: block;
	text-indent: -9999px;
}
.searchPrevBtn:before,
.searchNextBtn:before {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 25px;
	height: 27px;
	font-size: 12px;
	color: #fff;
	content: "\e910";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}
.searchNextBtn:before {
	width: 30px;
	content: "\e912";
}
.calendarSelectBox {
	position: relative;
	margin-left: auto;
}
.calendarSelectBox .select {
	width: 100px;
	height: 43px;
}
.calendarNumBox {
    position: relative;
    display: flex;
	justify-content: center;
    padding: 0 20px;
    font-size: 42px;
    font-weight: bold;
    color: #000;
    font-family: 'Roboto', sans-serif;
}
.checkBoxLayer {
	position: absolute;
	z-index: 10;
	top: 5px;
	right: 5px;

}
.scheduleListTable {
	position: relative;
	max-width:100%;
	padding: 0;
	/* border-left: 1px solid #dedede;
	border-right: 1px solid #dedede; */
	box-sizing: border-box;
}
.scheduleListTable table {
	border-collapse: collapse;
}
.scheduleListTable th {
	position: relative;
	height: 24px;
	line-height: 24px;
	margin: 0;
    padding: 10px 5px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color:#2d2d2d;
	background: #f0f0f0;
	border-top: 1px solid #acacac;
	border-bottom: 1px solid #acacac;
	font-family: 'Roboto', sans-serif;
}
.scheduleListTable th:first-child {
	color: #ff3000;
}
.scheduleListTable th:last-child {
	color: #004c99;
}

.scheduleListTable td {
	position: relative;
	margin: 0;
	padding:10px 5px;
	height:110px;
	text-align:left;
	vertical-align:top;
	color: #000 !important;
	font-weight: bold;
	white-space:normal;
	background-color:#fff;
	border-bottom: 1px solid #dedede;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.scheduleListTable p {
	text-align:center;
}
.scheduleListTable span {
	font-size:15px;
}
.calendarNum {
	position: relative;
    z-index: 4;
    top: 0;
    left: 5px;
	display: inline-flex;
	margin-right: 5px;
    color: #000;
	font-family: 'Roboto', sans-serif;
}
.scheduleListTable td:first-child .calendarNum {
	color: #ff3000 !important;
}
.scheduleListTable td:last-child .calendarNum {
	color: #004c99 !important;
}
.scheduleListTable .dayBefore .calendarNum {
	position: relative;
	display: inline-block;
	width: 28px;
    height: 28px;
	line-height: 28px;
	text-align: center;
	color: #fff;
	background-color: #1b64b5;
	border-radius: 50%;
}
.scheduleListTable .myClassDay {
	background-color: #fffbe2;
}
.scheduleListTable .calendarMemo {
	position: relative;
	display: block;
	line-height: 1.3;
	margin: 3px 0;
	font-size: 1.2rem;
}
.calendarContentBox {
	display: block;
    width: 100%;
    height: 70px;
	margin: 0;
	background-color: #fff9cd;
	border: 1px solid #dedede;
	overflow: hidden;
}
ul.calendarReservationList {
	position: relative;
	padding: 5px;
	box-sizing: border-box;
}
ul.calendarReservationList li {
	margin: 3px 0;
	color: #5d5d5d;
	font-weight: normal;
}
.noticeRollingListBox {
	position: sticky;
	top: 63px;
	/* left: 190px; */
    left: 160px;
    display: flex;
    align-items: center;
	width: calc(100% - 160px);
	height: 32px;
	background-color: #323b6d;
	border-bottom: 1px solid #dedede;
	transition: all 0.3s;
}
@media screen and (max-width: 1440px) {
	.noticeRollingListBox {
		/* left: 82px;
		width: calc(100% - 82px); */
        left: 50px;
		width: calc(100% - 50px);
		transition: all 0.3s;
	}
}
/* Ticker */
.ticker {
	width: 100%;
	height: 32px;
	text-align:left;
	overflow: hidden;
	margin: 0;
	padding-left: 10px;
	list-style: none;
}
.ticker li {
	display:block;
	height: 32px;
	line-height: 32px;
	color: #f0f0f0;
}
.moreViewBtn {
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	width: 31px;
	height: 31px;
	background-color: #696d82;
	border: 1px solid #565968;
	box-sizing: border-box;
}
.moreViewBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	color: #fff;
	font-size: 16px;
	content: "\e90d";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.moreViewBtn span {
	display: block;
	text-indent: -9999px;
}
.devideCheckBox {
	position: relative;
	display: flex;
	height: 42px;
	margin: 0 10px;
	padding: 0 10px;
	background-color: #fff;
	border: 1px solid #dedede;
}
.devideCheckBox span {
	display: flex;
	flex-shrink: 0;
	align-items: center;
}
.registerationListBox {
	width: calc(100% - 30px);
	min-height: 100px;
	margin: 15px;
    box-sizing: border-box;
	overflow: auto;
}
.registrationListPopup .registerationListBox {
	height: calc(100vh - 366px);
}
ul.registerationList {
	display: flex;
	width: calc(100% - 30px);
}
ul.registerationList li {
	display: flex;
	flex-shrink: 0;
	min-width: 200px;
	margin-left: -1px;
	box-sizing: border-box;
}
ul.registerationList li:first-child {
	margin-left: 0;
}
.registerationListTable {
	display: block;
	width: calc(100% - 30px);
}
.registerationListTable tr {
    display: flex;
}
.registerationListTable td {
	float: left;
	min-width: 200px;
	margin-left: -1px;
	box-sizing: border-box;
}
.registerationListTable td:first-child {
	margin-left: 0;
}
.registerationTable {
    position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid #dedede;
    /* border-bottom: none; */
}
.registerationTable table {
    caption-side: top;
}

.registerationTable caption {
    position: sticky;
    z-index: 10;
    top: 1px;
    left: 0;
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #5f6271;
}
.registerationTable th {
    position: sticky;
    z-index: 5;
    top: 33px;
    /* display: flex; */
    /* align-items: center; */
    width: 100%;
    height: 32px;
    font-size: 14px;
    color: #000;
    background-color: #f9f9f9;
}
.registerationTable th .thBox {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 5px;
    border-bottom: 1px solid #dedede;
}
.registerationTable td {
	width: 100%;
    min-width: 10px;
    padding: 3px;
    border-bottom: 1px solid #dedede;
}
.registerationTable td:last-child {
    border-bottom: none;
}
.registerationTable table > tbody > tr:nth-child(even) > td {
    background-color: #f0f0f0;
}


/*
.registerationTable ul.classInList {
	display: flex;
}
*/
.classListBox {
	position: relative;
	display: block;
	width: 100%;
	min-height: 100px;
	/* border: 1px solid #dedede; */
}

.with-auto.registerationListTable td {
	min-width: max-content;
}
.with-auto .classListBox {
	position: relative;
	display: block;
	width: 100%;
	min-height: 100px;
	/* border: 1px solid #dedede; */
}


.classListTitle {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 32px;
	padding: 0 10px;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	background-color: #5f6271;
}
dl.classInListBox {
	position: relative;
	display: block;
	width: 100%;
}
dl.classInListBox strong {
	color: #000;
}
dl.classInListBox dt {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 32px;
	padding: 0 5px;
	font-size: 14px;
	color: #000;
	background-color: #f9f9f9;
	border-bottom: 1px solid #dedede;
}
dl.classInListBox dt span,
.registerationTable th span {
	margin-left: 5px;
}
dl.classInListBox dd {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 32px;
	padding: 0;
}
dl.classInListBox dd ul.checks li {
	min-width: 10px;
	padding: 1px 3px;
	border-bottom: 1px solid #dedede;
}
dl.classInListBox dd ul.checks li:last-child {
	border-bottom: none;
}
dl.classInListBox dd ul.checks li:nth-child(even) {
	background-color: #f0f0f0;
}

ul.taskInList {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
}
ul.taskInList li {
	display: flex;
	align-items: center;
	padding: 3px 0;
	border-bottom: 1px solid #dedede;
}
ul.taskInList li:first-child {
	border-top: 1px solid #dedede;
}
ul.taskInList li:nth-child(even) {
	background-color: #f9f9f9;
}
ul.taskInList li span {
	padding: 0 10px;
}
.classViewBtn {
	height: 28px;
	padding: 0 25px;
}
ul.taskInList li .classViewBtn {
	margin-left: auto;
}
.scoreBox {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 2px;
}
.taskInputBox {
	position: relative;
	display: flex;
}
ul.taskInputList {
	position: relative;
	display: flex;
	flex-shrink: 0;
	flex-direction: column;
	align-self: center;
	padding: 10px;
	box-sizing: border-box;
}
ul.taskInputList li {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	margin: 3px 0;
}
ul.taskInputList li span {
	display: flex;
	flex-shrink: 0;
}
.addFileBtn {
	height: 28px;
	padding: 0 20px;
	color: #fff;
	background-color: #5f6271;
	border: none;
}
.selectedFileDeleteBtn {
	height: 28px;
	padding: 0 20px;
	color: #fff;
	background-color: #d33c4f;
	border: none;
}
.taskUploadBox {
	position: relative;
	display: flex;
	width: 100%;
}
dl.taskUploadList {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-self: center;
	width: calc(100% - 10px);
	padding: 10px;
	border: 1px solid #dedede;
	background-color: #f9f9f9;
	box-sizing: border-box;
}
dl.taskUploadList dt {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 110px;
	text-align: center;
}
dl.taskUploadList dd {
	position: relative;
	display: flex;
	align-items: center;
	width: calc(100% - 110px);
	height: 90px;
	padding: 5px 0;
}
.taskSelect {
	width: calc(100% - 135px);
	min-width: 150px;
}
.taskSelectBtnBox {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-self: center;
	width: 135px;
	margin-left: 5px;
}
.taskSelectBtnBox button {
	margin: 2px 0;
}
/*
.taskContentAreaBox {
	position: relative;
	display: block;
	height: calc(100vh - 421px);
	margin: 10px;
}
*/
.taskContentAreaBox {
	position: relative;
	display: block;
	height: calc(60vh - 135px);
	margin: 10px;
}
.taskBottomBtnBox {
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65px;
    margin-top: -10px;
    box-sizing: border-box;
}
.taskBottomBtnBox button {
	margin: 0 2px;
}
.taskSaveBtn {
	height: 28px;
    padding: 0 20px;
	color: #fff;
    background-color: #5f6271;
	border: none;
}
.taskStudentViewBtn {
	height: 28px;
    padding: 0 20px;
}
.taskAddBtn {
	height: 28px;
	margin-right: -10px;
    padding: 0 20px;
    color: #49e0ff;
    background-color: transparent;
    border: 1px solid #49e0ff;
}
.taskDeleteBtn {
	height: 28px;
    padding: 0 20px;
	color: #ff5c0c;
    background-color: #fff;
    border: 1px solid #ff5c0c;
}
.popupTaskInputBox {
	position: relative;
	height: calc(40vh - 83px);
}
.selectSearchBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	height: 100%;
	padding: 10px;
	box-sizing: border-box;
}
.subSearchRightBox {
	position: relative;
	display: flex;
	min-width: 130px;
}

/* ------------------------- */
/*            SMS            */
/* ------------------------- */
.attendanceBox {
	position: relative;
	display: flex;
	width: 560px;
	min-height: 300px;
	margin: 20px auto;
}
.attendanceMessageBox {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-self: center;
	width: calc(100% - 193px);
	line-height: 1.5;
	padding: 20px;
	font-size: 16px;
	box-sizing: border-box;
}
.attendancePhoneBox {
	position: relative;
	display: block;
	width: 193px;
	height: 368px;
	background: url("../images/bg/bg_sms_phone.png") no-repeat center top;
}
ul.phoneInputList {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 145px;
	height: 220px;
	margin: 70px auto 0;
}
ul.phoneInputList li {
	position: relative;
	display: flex;
	width: 100%;
	padding: 0;
	box-sizing: border-box;
}
.textareaPhone {
	width: 100%;
	height: 88px;
	padding: 5px;
	background-color: transparent;
	border: none;
	overflow-y: scroll;
	box-sizing: border-box;
}
.sendNumBox {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
	background-color: #6f6f6f;
	box-sizing: border-box;
}
.sendNumBox span {
	position: relative;
	display: flex;
	flex-shrink: 0;
	height: 18px;
	font-size: 12px;
	color: #ffdd00;
}
.receiveNumBox {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
	background-color: #404040;
	box-sizing: border-box;
}
.receiveNumBox span {
	position: relative;
	display: flex;
	flex-shrink: 0;
	height: 18px;
	font-size: 12px;
	color: #5bf7ff;
}
.phoneInput {
	position: relative;
	display: flex;
	width: 100%;
	height: 20px;
	padding: 0 10px;
	color: #000;
	background-color: rgba(255,255,255, 0.8);
	border: 1px solid #acacac;
	border-radius: 3px;
	box-sizing: border-box;
}
ul.phoneList {
	display: flex;
	align-items: center;
	height: 36px;
	margin: 0 auto;
}
.smsSendContentBox ul.phoneList {
	height: 24px;
}
ul.phoneList li:first-child input[type="radio"] + label {
    border-top-left-radius: 32px;
    border-bottom-left-radius: 32px;
}
ul.phoneList li:last-child input[type="radio"] + label {
    border-top-right-radius: 32px;
    border-bottom-right-radius: 32px;
}
ul.phoneList.checks input[type="radio"] + label {
	height: 24px;
}
.smsSendContentBox ul.checks li {
	text-align: center;
}
.phoneBtnBox {
	position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 32px;
    margin: 10px 0;
}
.smsSendPhoneBottmBox .phoneBtnBox {
	height: 24px;
	margin: 12px 0;
}
.phoneBtnBox button {
	position: relative;
	margin: 0 2px;
}
.smsSendNewBtn,
.smsCancelNewBtn,
.smsResetNewBtn,
.smsSaveNewBtn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 65px;
	height: 32px;
	font-size: 13px;
	color: #fff;
	background: linear-gradient(rgba(64,64,64,1) 0%, rgba(43,43,43,1) 50%, rgba(31,31,31,1) 50%, rgba(31,31,31,1) 100%);
	border: 1px solid #000;
	border-radius: 5px;
}
.smsSendPhoneBottmBox .smsSendNewBtn,
.smsSendPhoneBottmBox .smsCancelNewBtn,
.smsSendPhoneBottmBox .smsResetNewBtn,
.smsSendPhoneBottmBox .smsSaveNewBtn {
	height: 24px;
}
.smsSendInBox {
	position: relative;
	display: flex;
	width: 100%;
	min-height: 300px;
	margin: 0 auto;
}
.smsSend02 .smsSendInBox {
	width: 100%;
	flex-direction: column;
}
.smsSendPhoneBox {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 270px;
	min-height: 100px;
}
.smsSendPhoneTopBox {
	position: relative;
	display: flex;
	width: 270px;
	min-height: 220px;
	background: url("../images/bg/sms_box_bg_new.png") no-repeat center top;
}
.smsSendPhoneContentBox {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 270px;
	min-height: 30px;
	background: url("../images/bg/sms_bg_new.png") repeat-y center top;
}
.smsSendPhoneBottmBox {
	position: relative;
	display: block;
	width: 270px;
	height: 48px;
	background: url("../images/bg/sms_bt_new.png") no-repeat center top;
}
ul.smsSendTopInputList {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 232px;
	margin: 47px auto 0;
}
ul.smsSendTopInputList li {
	position: relative;
	display: flex;
	width: 100%;
	margin: 0 auto;
}
ul.smsSendTopInputList li:first-child {
	height: 24px;
}
.smsByteCheckBox {
	position: relative;
	display: flex;
	align-items: center;
	height: 24px;
	margin: 0 auto;
}
.smsByteCheckBox span {
	font-size: 14px;
	padding: 0 1px;
}
.textareaPhone2 {
	width: 100%;
	height: 148px;
	margin-top: 1px;
	padding: 5px;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #70737a;
	overflow-y: scroll;
	box-sizing: border-box;
}
.smsSendContentBox {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 234px;
	margin: 0 auto;
	padding: 3px 0;
	border-top: 1px solid #bfbfcb;
	border-bottom: 1px solid #70737a;
	box-sizing: border-box;
}
/*
.smsSendContentBox:first-child {
	border-top: none;
}
*/
.phoneInputBox {
	position: relative;
	display: block;
	margin: 5px 10px;
}
.smsSendContentInBox {
	position: relative;
	display: flex;
	margin: 0 auto;
}
.smsSendContentInBox .selectBox {
	height: 24px;
}

.smsSendContentInBox .selectBox .icoArrow {
	top: 6px;
	height: 12px;
}
.smsSendContentInBox .selectBox .icoArrow:before {
	height: 12px;
}
ul.smsSendInputList {
	position: relative;
	display: flex;
	flex-direction: column;
}
ul.smsSendInputList li {
	margin: 2px 0;
}
.smsSendInputBox {
	position: relative;
	display: flex;
	height: 20px;
	margin: 0 10px;
	font-size: 12px;
	color: #fff;
	background-color: #636677;
	border: none;
	border-radius: 20px;
	box-shadow: inset 7px 7px 5px -5px rgba(57,57,65,1);
}
.smsSendInputBox span {
	display: flex;
	align-items: center;
	height: 20px;
	padding: 0 5px;
	font-size: 11px;
}
.smsInput {
	position: relative;
	display: block;
	width: 155px;
	height: 20px;
	padding: 0 5px;
	font-size: 12px;
	color: #fff;
	background-color: transparent;
	border: none;
}
ul.smsSendInputList li:first-child .smsInput {
	width: 35px;
}
.smsSend03 ul.smsSendInputList li:first-child .smsInput {
	width: 170px;
}
.smsAddBtn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 16px;
	margin: 2px;
	margin-left: auto;
	font-size: 11px;
	color: #000;
	background-color: #c2c3c7;
	border: none;
	border-radius: 16px;
	box-shadow: 0 0 2px 2px rgba(0,0,0,0.3);
}
ul.smsDirectoryList {
	position: relative;
	display: flex;
	/* flex-direction: column; */
	padding: 0 10px;
	box-sizing: border-box;
}
ul.smsDirectoryList li {
	width: 100%;
	margin: 2px 0;
}
.selectNumberBtn {
	position: relative;
	display: flex;
	align-items: center;
	height: 16px;
	font-size: 12px;
	font-weight: bold;
	color: #0556d2;
	text-decoration: underline;
}
.addFileBox {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 5px;
}
.smsSendMessageBox {
	position: relative;
	display: block;
	width: calc(100% - 290px);
	margin-left: auto;
	background-color: #fff;
}

ul.smsSendMessageList {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, auto));
	gap: 20px;
}
.smsSend02 ul.smsSendMessageList {
	margin-top: 20px;
	grid-template-columns: repeat(auto-fill, minmax(200px, auto));
}
.messageSampleBox {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 200px;
	min-height: 100px;
	margin: 0 auto;
	/* background: url("../images/bg/sms_message_bg.gif") no-repeat center top; */
	background-color: #edf3f7;
	border: 1px solid #d4d8dc;
	border-radius: 3px;
}
.textareaMessage {
	position: relative;
    width: 180px;
    height: 95px;
	margin: 10px auto;
	padding: 10px;
    font-size: 9pt;
	background: transparent;
	border: 1px solid #dedede;
    /* overflow: hidden; */
}
.smsLinkBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 32px;
	padding: 10px 0;
	background-color: #fff;
	border-top: 1px solid #d4d8dc;
	box-sizing: border-box;
}
a.smsLink:link,
a.smsLink:visited,
a.smsLink:hover,
a.smsLink:active {
	position: relative;
    display: block;
	max-width: 50px;
    padding: 0;;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
.smsSelectBtn,
.smsDeleteBtn {
	position: relative;
	display: flex;
	align-items: center;
	height: 20px;
	margin: 0 2px;
	padding: 0 12px;
	font-size: 12px;
	color: #9d9d9d;
	background-color: #fff;
	border: 1px solid #acacac;
	border-radius: 24px;
}
.questionViewBtn {
	height: 20px;
    padding: 0 15px;
    color: #27b1f1;
    background-color: transparent;
    border: 1px solid #27b1f1;
}
.allocationIcon {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 10px;
	font-size: 11px;
	color: #fff;
	background-color: #5f6271;
	border-radius: 20px;
}

.checks input.redOne[type="checkbox"] + label {
    background-color: #ffcccc !important;
}
.checks input.blueOne[type="checkbox"] + label {
    background-color: #ccfdff !important;
}
.checks input.greenOne[type="checkbox"] + label {
    background-color: #bfffb0 !important;
}
.checks input.orangeOne[type="checkbox"] + label {
    background-color: #ffe2b0 !important;
}
.checks input.silverOne[type="checkbox"] + label {
    color: #acacac;
    background-color: #f0f0f0 !important;
}

.checks input.redOne[type="checkbox"]:checked + label {
    border-color: #d01d1d;
}
.checks input.redOne[type="checkbox"]:checked + label:before {
    color: #d01d1d;
    border-color: #d01d1d;
}
.checks input.redOne[type="checkbox"]:checked + label span,
.checks input.redOne[type="checkbox"]:checked + label span strong {
    color: #d01d1d !important;
}

.checks input.blueOne[type="checkbox"]:checked + label {
    border-color: #234fb8;
}
.checks input.blueOne[type="checkbox"]:checked + label:before {
    color: #234fb8;
    border-color: #234fb8;
}
.checks input.blueOne[type="checkbox"]:checked + label span,
.checks input.blueOne[type="checkbox"]:checked + label span strong {
    color: #0b276b !important;
}

.checks input.greenOne[type="checkbox"]:checked + label {
    border-color: #28ba18;
}
.checks input.greenOne[type="checkbox"]:checked + label:before {
    color: #15730a;
    border-color: #28ba18;
}
.checks input.greenOne[type="checkbox"]:checked + label span,
.checks input.greenOne[type="checkbox"]:checked + label span strong {
    color: #15730a !important;
}

.checks input.orangeOne[type="checkbox"]:checked + label {
    border-color: #a9630a;
}
.checks input.orangeOne[type="checkbox"]:checked + label:before {
    color: #a9630a;
    border-color: #a9630a;
}
.checks input.orangeOne[type="checkbox"]:checked + label span,
.checks input.orangeOne[type="checkbox"]:checked + label span strong {
    color: #76460a !important;
}

.checks input.silverOne[type="checkbox"]:checked + label {
    border-color: #aaa;
}
.checks input.silverOne[type="checkbox"]:checked + label:before {
    color: #acacac;
    border-color: #aaa;
}
.checks input.silverOne[type="checkbox"]:checked + label span,
.checks input.silverOne[type="checkbox"]:checked + label span strong {
    color: #acacac !important;
}

.myMemoBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 38px;
    margin-left: auto;
    padding: 0 10px 0 20px;
    font-size: 16px;
    color: #fff;
    background-color: #46a8ff;
    border: none;
    border-radius: 42px 0 0 42px;
}
.myMemoPopupLayer {
    position: absolute;
    z-index: 60;
    top: 62px;
    right: 10px;
    width: 250px;
    min-height: 170px;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: 0 5px 5px 5px rgba(0,0,0,0.1);
    display: none;
}
.myMemoTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 10px;
    color: #fff;
    background-color: #7d8086;
    border-bottom: 1px solid #373b42;
    box-sizing: border-box;
}
.myMemoPopupCloseBtn {
	position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
}
.myMemoPopupCloseBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    font-size: 24px;
    color: #fff;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.myMemoPopupCloseBtn span {
	display: block;
	text-indent: -9999px;
}
.myMemoBox {
    position: relative;
    display: block;
    padding: 10px;
}
.myMemoPopupLayer textarea::placeholder {
    line-height: 75px;
    text-align: center;
}

.dateSearchBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 5px;
    background-color: #f9f9f9;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    box-sizing: border-box;
}
.enterSearchBtn {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    margin-left: auto;
    padding: 0 20px;
    color: #2d2d2d;
    background-color: #fff;
    border:1px solid #acacac;
    border-radius: 72px;
}

.myMemoListBox {
    position: relative;
    display: block;
    padding: 5px;
    box-sizing: border-box;
}
.myMemoListInBox {
    position: relative;
    display: block;
    max-height: calc(100vh - 300px);
    border: 1px solid #dedede;
    border-radius: 5px;
}
ul.myMemoList {
    position: relative;
    display: block;
}
ul.myMemoList li {
    padding: 5px;
    border-bottom: 1px dashed #dedede;
    box-sizing: border-box;
}
ul.myMemoList li:last-child {
    border-bottom: none;
}
.myMemoListTitle {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding: 0 10px;
    font-size: 14px;
    color: #000;
    background-color: #f0f0f0;
}
.myMemoContent {
    position: relative;
    display: block;
    padding: 5px;
}

.staffMessagePopupLayer {
    position: absolute;
    z-index: 60;
    right: 10px;
    bottom: 10px;
    width: 300px;
    min-height: 100px;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: 0 5px 5px 5px rgba(0,0,0,0.1);
}
.staffMessageTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 10px;
    color: #fff;
    background-color: #b083d2;
    border-bottom: 1px solid #6f5285;
    box-sizing: border-box;
}
.staffPopupCloseBtn {
	position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
}
.staffPopupCloseBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    font-size: 24px;
    color: #fff;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.staffPopupCloseBtn span {
	display: block;
	text-indent: -9999px;
}
.staffDateInfoBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #acacac;
}
.staffContentBox {
    position: relative;
    display: block;
    padding: 10px 5px;
    box-sizing: border-box;
}
.staffContentInBox {
    position: relative;
    display: block;
    height: 100px;
    line-height: 1.5;
    font-size: 12px;
}
.myMemoBox {
    position: relative;
    display: block;
    padding: 10px;
}
.myMemoPopupLayer textarea::placeholder {
    line-height: 75px;
    text-align: center;
}
.messageCloseBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 32px;
    font-size: 14px;
    color: #fff;
    background-color: #474a59;
    border: none;
    border-radius: 0;
}


/* ------------------------- */
/*          calendar         */
/* ------------------------- */
.newScheduleBox {
	position: relative;
	display: block;
}

.newScheduleInLine {
	position: relative;
	display: block;
	padding: 0;
	border: 2px dotted #252d40;
	-webkit-border-radius: 19px;
	-moz-border-radius: 19px;
	border-radius: 19px;
}

.newScheduleInBox {
	position: relative;
	display: block;
	padding: 5px 20px 20px;
	background-color: #fff;
	box-sizing: border-box;
}

.newScheduleTopBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.newSearchTopBox {
	position: relative;
    left: 50%;
	display: inline-flex;
    justify-content: center;
	align-items: center;
	margin: 10px;
	padding: 0 5px;
	height: 48px;
	background-color: #f0f0f0;
	border:1px solid #acacac;
	border-radius: 72px;
    transform: translate(-50%, 0);
}

.newSearchTopBox select {
	margin: 0 5px;
}

.newSearchTopBox a.btnBlue30:link, a.btnBlue30:visited, a.btnBlue30:active {
    position: relative;
    height: 30px;
    line-height: 30px;
    padding: 6px 20px;
    color: #fff;
    background-color: #2a3785;
    border: none;
    text-decoration: none;
    border-radius: 20px;
    cursor: pointer;
}

.newSearchTopInBox {
    position: relative;
    display: flex;
    align-items: center;
}

.newSearchLegendaryBox {
    display: flex;
    margin-left: auto;
}

.newHistoryPrevBtn {
	position: relative;
	display: flex;
	width: 36px;
	height: 36px;
	margin: 0;
	background-color: #5f6271;
	border: none;
	border-radius: 50%;
}
.newHistoryPrevBtn:before {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
    justify-content: center;
    align-items: center;
	width: 36px;
	height: 36px;
	font-size: 14px;
	color: #fff;
	content: "\e910";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.newHistoryNextBtn {
	position: relative;
	display: flex;
	width: 36px;
	height: 36px;
	margin: 0;
	background-color: #5f6271;
	border: none;
	border-radius: 50%;
}
.newHistoryNextBtn:before {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
    justify-content: center;
    align-items: center;
	width: 36px;
	height: 36px;
	font-size: 14px;
	color: #fff;
	content: "\e912";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.newHistoryPrevBtn span,
.newHistoryNextBtn span {
	position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

.holidaySetBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 38px;
    margin-left: auto;
    padding-left: 15px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #c18383;
    border: none;
    border-radius: 42px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
}
.holidaySetBtn:before {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 54px;
    height: 38px;
    font-size: 16px;
    color: #fff;
    content: "\e92b";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.scheduleModifyBtn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    margin: 0 3px;
    padding: 3px 10px;
    color: #fff;
    background-color: #3786b0;
    border: none;
    border-radius: 42px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
}
.scheduleModifyBtn span {
    font-size: 12px;
}

.holidayBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 26px;
    min-height: 26px;
    margin: 2px 0;
    padding: 3px 10px;
    color: #347432;
    background-color: #d2ebd4;
    border-radius: 24px;
}
.academyHolidayBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 26px;
    min-height: 26px;
    margin: 2px 0;
    padding: 3px 10px;
    color: #d34e4e;
    background-color: #ffcccc;
    border-radius: 24px;
}

.popupCheckTopBox{
    position: relative;
    display: block;
    min-height: 50px;
    margin: 10px;
    border: 3px solid #4d5053;
    border-top: none;
    border-radius: 5px 5px 20px 20px;
}

.checkListTitle {
    position: relative;
    display: flex;
    align-items: center;
    height: 28px;
    padding-left: 32px;
    font-size: 16px;
    color: #fff;
    background-color: #4d5053;
    border-radius: 2px 2px 0 0;
    box-sizing: border-box;
}
.checkListTitle:before {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 30px;
    font-size: 16px;
    color: #fff;
    /* background-color: #fff;
    border-radius: 50%; */
    content: "\e92a";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
ul.mypageCheckList  {
    position: relative;
    display: block;
    padding: 10px;
    background-color: #fff;
    border-radius: 0 0 20px 20px;
    box-sizing: border-box;
}
ul.mypageCheckList li {
    position: relative;
    display: flex;
    align-items: center;
    padding: 5px 10px 5px 15px;
    box-sizing: border-box;
}
ul.mypageCheckList li:before {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 5px;
    font-size: 18px;
    color: #000;
    transform: translate(0, -50%);
    content: "·";
}

/* ------------------------- */
/*           paging          */
/* ------------------------- */
.pagingBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 32px;
	margin: 10px 0 20px;
}
.smsSendMessageBox .pagingBox {
	margin: 20px 0;
}
.page-link {
	color: #5d5d5d;
	padding: 0.425rem 0.75rem;
	border: 1px solid #aaa;
}
.page-item.active .page-link {
	background-color: #0d6efd;
    border-color: #0d6efd;
}
.page-link:hover {
	border-color: #aaa;
}

.pagingList {
	position: relative;
	display: flex;
}

.pgPage {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	background: #fff;
	border: 1px solid #dedede;
	margin: 0 3px;
	padding-top: 3px;
	cursor: pointer;
	font-family: 'Roboto', sans-serif;
	box-sizing: border-box;
}

.pagingList a {
	color: #5d5d5d;
}

.pgStart, .pgPrev, .pgEnd, .pgNext {
	position: relative;
	width: 32px;
	height: 32px;
}

.pgStart:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	font-size: 12px;
	text-align: center;
	color: #000;
	text-indent: 0;
	content: "\e913";
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
}

.pgPrev:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	font-size: 12px;
	text-align: center;
	color: #000;
	text-indent: 0;
	content: "\e910";
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
}

.pgCurrent {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	font-size: 12px;
	font-weight: normal;
	color: #fff;
	background-color: #3c93ef;
	border: none;
	margin: 0 3px;
	padding-top: 3px;
	font-family: 'Roboto', sans-serif;
	box-sizing: border-box;
}

.pgNext:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	font-size: 12px;
	text-align: center;
	color: #000;
	text-indent: 0;
	content: "\e912";
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
}

.pgEnd:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	font-size: 12px;
	text-align: center;
	color: #000;
	text-indent: 0;
	content: "\e911";
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
}

/* datepicker */
.ui-datepicker {
	z-index: 9999 !important;
}

/*-------------------------------*/
/*              okr              */
/*-------------------------------*/
.filebox label {
	display: inline-block;
	width: 100%;
	padding: .75em .75em;
	color: #fff;
	background-color: #5bc0de;
	border-color: #46b8da;
	font-size: inherit;
	line-height: normal;
	vertical-align: middle;
	cursor: pointer;
	border-radius: 2rem;
	box-sizing: border-box;
}
.filebox input[type="file"] {
	/* 파일 필드 숨기기 */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}
textarea {
	resize: none;
}

.ticker1 li p {
	height: 60px;
	text-align: left;
	/* 한 줄 자르기 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* 여러 줄 자르기 추가 스타일 */
	white-space: normal;
	text-align: left;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* header */
.okrBox {
	position:relative;
	display: block;
}
.okrTop {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 42px;
	border-bottom: 1px solid #dedede;
}
.okrLogo {
	position: relative;
	display: flex;
	align-items: center;
	width: 188px;
	height: 42px;
	padding-left: 40px;
	background: url(../images/common/logo_print.png) no-repeat 2px 3px;
	background-size: auto 38px;
	font-size: 1rem;
	box-sizing: border-box;
}
.okrLogo span {
	position: relative;
	display: flex;
	align-items: center;
	height: 25px;
	padding: 0 15px;
	font-size: 0.9rem;
	font-weight: bold;
	color: #fff;
	background-color: #2b3887;
	border-radius: 48px;
}
.okrTopNotice {
	position: relative;
	display: flex;
	align-items: center;
	width: 60vw;
	height: 32px;
	color: #2d2d2d;
	background-color: #f0f0f0;
	border: 1px solid #dedede;
	border-radius: 48px;
	overflow: hidden;
	box-sizing: border-box;
}
ul.ticker {
	position: relative;
	display: block;
	height: 32px;
	box-sizing: border-box;
}
ul.ticker li {
	position: relative;
	display: block;
	height: 32px;
	line-height: 32px;
	/* padding-left: 32px; */
	text-align: left;
}
a.tickerBtn:before {
	position: absolute;
	z-index: 10;
	top: 13px;
	left: 13px;
	width: 5px;
	height: 5px;
	text-align: center;
	border: 3px solid #1B6CDF;
	border-radius: 50%;
	content: "";
}

.newIcon {
	position: relative;
	padding: 1px 10px;
	font-size: 0.65rem;
	color: #fff;
	background-color: #2b3887;
	border-radius: 32px;
}
/*
.loginBox {
	position: relative;
	display: flex;
	margin-left: auto;
	margin-right: 10px;
}
*/
.okrContainer {
	position: relative;
	display: flex;
    margin-bottom: 60px;
	border-bottom: 1px solid #dedede;
}
.okrLeftMenu {
	position:relative;
	width: 175px !important;
	background: url(../images/bg/bg_line.png) repeat #2D3239;
}
ul.okrMenuList {
	position: relative;
	display: block;
	margin: 20px 0;
	padding-left: 10px;
	box-sizing: border-box;
}
ul.okrMenuList li {
	position: relative;
	display: block;
	height: 32px;
	line-height: 32px;
	text-align: left;
	margin: 5px 0;
	padding: 3px 0;

}

a.okrMenuBtn:link,
a.okrMenuBtn:visited,
a.okrMenuBtn:active {
	position: relative;
	display: block;
	height: 32px;
	line-height: 32px;
	padding-right: 20px;
	text-align: right;
	font-weight: bold;
	color: #f9f9f9;
	background: url(../images/bg/bg_line.png) repeat #444B54;
	border: 1px solid #2A2F36;
	border-right: none;
	border-top-left-radius: 32px;
	border-bottom-left-radius: 32px;
	box-sizing: border-box;
}
a.okrMenuBtn:hover {
	color: #2d2d2d;
	background-color: #fff;
}
a.okrMenuBtn:before {
	position: absolute;
	z-index: 10;
	top: 13px;
	left: 17px;
	width: 5px;
	height: 5px;
	line-height: 32px;
	text-align: center;
	background-color: #fff;
	border-radius: 50%;
	content: "";
}
a.okrMenuBtn:hover:before {
	background-color: #2d2d2d;
}

ul.okrMenuList .on a.okrMenuBtn  {
    color: #2d2d2d;
    background-color: #fff;
}
ul.okrMenuList .on a.okrMenuBtn:before {
    background-color: #2d2d2d;
}

#okrsub.okrContainer {
	margin-bottom: 80px;
}

.okrContent {
	position: relative;
	flex-grow: 1;
	width: 100%;
	min-width: 1000px;
    margin-bottom: 10px;
	padding: 10px;
	box-sizing: border-box;
}
.okrContentMainDate {
	position: relative;
	display: block;
	height: 38px;
	line-height: 38px;
	padding-left: 38px;
	text-align: left;
	font-size: 1rem;
	color: #fff;
	background: url(../images/bg/bg_line.png) repeat #475A76;
	border-radius: 42px;
}
.okrContentMainDate:before {
	position: absolute;
	z-index: 10;
	top: 14px;
	left: 14px;
	width: 10px;
	height: 10px;
	line-height: 32px;
	text-align: center;
	background-color: #fff;
	border-radius: 50%;
	content: "";
}
.okrContentMainDate span {
	position: relative;
	float: right;
	height: 34px;
	line-height: 1.3;
	padding: 5px 0;
	margin-right: 20px;
	text-align: left;
	font-weight: bold;
	font-size: 0.75rem;
	color: #fff;
	box-sizing: border-box;
}
.okrContentMainTitle {
    position: relative;
    display: block;
	margin-top: 10px;
    padding: 5px 5px 15px 22px;
    text-align: left;
    font-size: 0.9rem;
	font-weight: bold;
    color: #000;
    background-color: #f0f0f0;
    border: 1px solid #acacac;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: #f0f0f0 3px 3px 3px;
}
.okrContentMainTitle:before {
	position: absolute;
	z-incex: 10;
	top: 8px;
	left: 10px;
	width: 6px;
	height: 15px;
	background-color: #5d5d5d;
	border-radius: 32px;
	content: "";
}
a.moreBtn:link,
a.moreBtn:visited,
a.moreBtn:hover,
a.moreBtn:active {
	position: absolute;
	z-index: 10;
	top: 6px;
	right: 20px;
	font-size: 0.7rem;
	color: #000;
}
a.moreBtn:before {
	position: absolute;
	z-index: 10;
	top: -1px;
	left: -12px;
	font-size: 0.85rem;
	content: "+";
}
.okrContentMainTableBox {
    position: relative;
    display: block;
    min-height: 365px;
    line-height: 1.5;
    margin-top: -10px;
    padding: 15px;
    text-align: left;
    font-size: 0.95rem;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 10px;
}
.okrContentMainTableBox2 {
    position: relative;
    display: block;
    min-height: 163px;
    line-height: 1.5;
    margin-top: -10px;
    padding: 15px;
    text-align: left;
    font-size: 0.95rem;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 10px;
}
.okrContentMainTableBox3 {
    position: relative;
    display: block;
    min-height: 163px;
    line-height: 1.5;
    margin-top: -10px;
    padding: 15px;
    text-align: left;
    font-size: 0.95rem;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 10px;
}
#okrsub .okrContentMainTableBox {
    margin-top: 15px;
}
.okrContentInBox {
	display: block;
	height: 333px;
    overflow-x: hidden;
	overflow-y: auto;
}
.okrContentInBox2 {
	display: block;
	height: 333px;
    overflow-x: hidden;
	overflow-y: auto;
}
.okrContentInBox3 {
	display: block;
	height: 130px;
    overflow-x: hidden;
	overflow-y: auto;
}
.okrContentInBoxOn {
	height: auto;
	transition: all 0.3s;
}
.okrMainTitle {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	height: 32px;
	border-bottom: 1px solid #acacac;
}
.okrTableTitle {
	display: flex;
}
.okrTableTitle:nth-child(1) {
    flex-grow: 1;
	justify-content: center;
}
.okrTableTitle:nth-child(2) {
    flex-shrink: 0;
	justify-content: center;
	width: 120px;
}
.okrTableTitle:nth-child(3) {
    flex-shrink: 0;
	justify-content: center;
	width: 120px;
}
.okrTableTitle:nth-child(4) {
    flex-shrink: 0;
	justify-content: center;
	width: 150px;
}
.okrTableTitle:nth-child(5) {
    flex-shrink: 0;
	justify-content: center;
	width: 100px;
}
.okrTableTitle:nth-child(6) {
    flex-shrink: 0;
	justify-content: center;
	width: 30px;
}
/*
.okrTableListBox {
	border-bottom: 1px solid #acacac;
}
*/
.okrTableListRootBox {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	padding: 10px 0;
	background-color: #f0f0f0;
	border-bottom: 1px solid #acacac;
}
.tableList {
	display: flex;
	align-items: center;
	font-size: 1rem;
}
.okrTableListRootBox .tableList:nth-child(1) {
    flex-shrink: 0;
	justify-content: center;
	width: 52px;
}
.okrTableListRootBox .tableList:nth-child(2) {
    flex-grow: 1;
}
.okrTableListRootBox .tableList:nth-child(3) {
    flex-shrink: 0;
	justify-content: center;
	width: 120px;
}
.okrTableListRootBox .tableList:nth-child(4) {
    flex-shrink: 0;
	justify-content: center;
	width: 120px;
}
.okrTableListRootBox .tableList:nth-child(5) {
    flex-shrink: 0;
	justify-content: center;
	width: 150px;
}
.okrTableListRootBox .tableList:nth-child(6) {
    flex-shrink: 0;
	justify-content: center;
	width: 100px;
}
.okrTableListRootBox .tableList:nth-child(7) {
    flex-shrink: 0;
	justify-content: center;
	width: 30px;
}
.moreDotBtnBox {
	position: relative;
}
a.okrContentMainBtn {
	position: relative;
	display: block;
	width: 32px;
	height: 32px;
}
.okrContentOpenBtn {
	position: relative;
	display: inline-block;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
	display: none;
}
.okrContentOpenBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 1.5rem;
	color: #2d2d2d;
	text-indent: 0;
	content:"\e90e";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.okrContentCloseBtn {
	position: relative;
	display: inline-block;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
}
.okrContentCloseBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 1.5rem;
	color: #2d2d2d;
	text-indent: 0;
	content:"\e90d";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.listIcon {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	color: #fff;
	background-color: #265746;
	border-radius: 50%;
}
.noteIcon {
	position: relative;
	/* display: flex; */
	justify-content: center;
	align-items: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	line-height: 28px;
	margin-left: 5px;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	color: #fff;
	background-color: #0774EE;
	border-radius: 50%;
	text-indent: -9999px;
	cursor: pointer;
}
.noteIcon:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	font-size: 1rem;
	color: #fff;
	text-indent: 0;
	content:"\e910";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.listContent {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	flex-direction: column;
	width: 100%;
	line-height: 1.2;
	margin-left: 10px;
	/* font-size: 0.85rem; */
	font-weight: bold;
}
.listContentText {
	position: relative;
	display: flex;
	margin-bottom: 5px;
}
.academyName {
	position: relative;
	display: flex;
	/* font-size: 0.75rem; */
	color: #acacac;
}
.neonBlue {
	font-weight: bold;
	color: #54DFC2;
}
.writeIcon01 {
	position: relative;
	/* display: flex; */
	justify-content: center;
	align-items: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	margin-left: 5px;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	color: #fff;
	background-color: #C691DC;
	border-radius: 50%;
	text-indent: -9999px;
	cursor: pointer;
}
.writeIcon01:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 1rem;
	color: #fff;
	text-indent: 0;
	content:"\e912";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.rewriteIcon01 {
	position: relative;
	/* display: flex; */
	justify-content: center;
	align-items: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	margin-left: 5px;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	color: #fff;
	background-color: #C691DC;
	border-radius: 50%;
	text-indent: -9999px;
	cursor: pointer;
}
.rewriteIcon01:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 1rem;
	color: #fff;
	text-indent: 0;
	content:"\e911";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.writeIcon02 {
	position: relative;
	/* display: flex; */
	justify-content: center;
	align-items: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	margin-left: 5px;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	color: #fff;
	background-color: #5EDC80;
	border-radius: 50%;
	text-indent: -9999px;
	cursor: pointer;
}
.writeIcon02:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 1rem;
	color: #fff;
	text-indent: 0;
	content:"\e912";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.rewriteIcon02 {
	position: relative;
	/* display: flex; */
	justify-content: center;
	align-items: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	margin-left: 5px;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	color: #fff;
	background-color: #5EDC80;
	border-radius: 50%;
	text-indent: -9999px;
	cursor: pointer;
}
.rewriteIcon02:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 1rem;
	color: #fff;
	text-indent: 0;
	content:"\e911";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.writeIcon03 {
	position: relative;
	/* display: flex; */
	justify-content: center;
	align-items: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	margin-left: 5px;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	color: #fff;
	background-color: #DCB65E;
	border-radius: 50%;
	text-indent: -9999px;
	cursor: pointer;
}
.writeIcon03:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 1rem;
	color: #fff;
	text-indent: 0;
	content:"\e90f";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.rewriteIcon03 {
	position: relative;
	/* display: flex; */
	justify-content: center;
	align-items: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	margin-left: 5px;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	color: #fff;
	background-color: #DCB65E;
	border-radius: 50%;
	text-indent: -9999px;
	cursor: pointer;
}
.rewriteIcon03:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 1rem;
	color: #fff;
	text-indent: 0;
	content:"\e911";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.okrTableListSubBox {
	border: 1px solid #acacac;
	border-top: none;
	/*
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
	*/
}
.okrTableListKeyBox {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	padding: 10px 0;
}
.tableKeyList {
	display: flex;
	align-items: center;
	font-size: 0.8rem;
}
.tableKeyList a.okrContentSubBtn {
	position: relative;
	display: block;
	width: 24px;
	height: 24px;
}
.tableKeyList .okrContentOpenBtn {
    width: 24px;
    height: 24px;
    display: block;

}
.tableKeyList .okrContentOpenBtn:before {
    width: 24px;
    height: 24px;
	font-size: 1.2rem;
    color: #0f74a9;
}
.tableKeyList .okrContentCloseBtn {
    width: 24px;
    height: 24px;
    display: none;
}
.tableKeyList .okrContentCloseBtn:before {
    width: 24px;
    height: 24px;
	font-size: 1.2rem;
    color: #0f74a9;
}
.okrTableListKeyBox .tableKeyList:nth-child(1) {
    flex-shrink: 0;
	justify-content: center;
	width: 60px;
}
.okrTableListKeyBox .tableKeyList:nth-child(2) {
    flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 65px;
}
.okrTableListKeyBox .tableKeyList:nth-child(3) {
    flex-grow: 1;
}
.okrTableListKeyBox .tableKeyList:nth-child(4) {
    flex-shrink: 0;
	justify-content: center;
	width: 80px;
}
.okrTableListKeyBox .tableKeyList:nth-child(5) {
    flex-shrink: 0;
	justify-content: center;
	width: 150px;
	padding: 0 10px;
	box-sizing: border-box;
}
.okrTableListKeyBox .tableKeyList:nth-child(6) {
    flex-shrink: 0;
	justify-content: center;
	width: 100px;
}
.okrTableListKeyBox .tableKeyList:nth-child(7) {
    flex-shrink: 0;
	justify-content: center;
	width: 30px;
}
.listKeyIcon {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	font-size: 0.85rem;
	font-weight: bold;
	color: #fff;
	background-color: #7EA4D6;
	border-radius: 50%;
	text-indent: -9999px;
}
.listKeyIcon:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	font-size: 1rem;
	color: #fff;
	text-indent: 0;
	content:"\e90c";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.listKeyContent {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	line-height: 1.2;
	margin-left: 10px;
	/* font-size: 0.75rem; */
	font-weight: bold;
}
.listKeyContentText {
	position: relative;
	display: flex;
	margin-bottom: 5px;
}
.listKeyContentExText {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.75rem;
	font-weight: normal;
	color: #5d5d5d;
}
.okrTableListKeySubBox {
    display: none;
}
.okrTableListInitiativeBox {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	padding: 10px 0;
	/* background-color: #ffffe7; */
	border-top: 1px solid #dedede;
}
.tableInitiativeList {
	display: flex;
	align-items: center;
	font-size: 0.7rem;
	/* flex-wrap: wrap; */
}
.okrTableListInitiativeBox .tableInitiativeList:nth-child(1) {
    flex-shrink: 0;
	justify-content: center;
	width: 70px;
}
.okrTableListInitiativeBox .tableInitiativeList:nth-child(2) {
    flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 60px;
}
.okrTableListInitiativeBox .tableInitiativeList:nth-child(3) {
    flex-grow: 1;
}
.okrTableListInitiativeBox .tableInitiativeList:nth-child(4) {
    flex-shrink: 0;
	justify-content: center;
	width: 270px;
	padding: 0 10px;
	box-sizing: border-box;
}
.okrTableListInitiativeBox .tableInitiativeList:nth-child(5) {
    flex-shrink: 0;
	justify-content: center;
	width: 100px;
}
.okrTableListInitiativeBox .tableInitiativeList:nth-child(6) {
    flex-shrink: 0;
	justify-content: center;
	width: 30px;
}
.listInitiativeIcon {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 0.85rem;
	font-weight: bold;
	color: #fff;
	background-color: #8EC8A6;
	border-radius: 50%;
}
.listInitiativeIcon:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 0.8rem;
	color: #fff;
	text-indent: 0;
	content:"\e90b";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.listInitiativeContent {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	width: 100%;
	line-height: 1.2;
	margin-left: 10px;
	font-size: 0.75rem;
	font-weight: bold;
}
.listInitiativeContentText {
	position: relative;
	display: flex;
	margin-bottom: 5px;
}
.listInitiativeExText {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.75rem;
	font-weight: normal;
	color: #5d5d5d;
}
.okrBarProgressBox {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
}
.okrBardate {
	display: flex;
	justify-content: flex-end;
}
.okrBarEx {
	display: flex;
}
.progressName {
	width: 100px;
}
.progressPercent {
	margin-left: auto;
}
/*
.pie-chart {
  position: relative;
  display:inline-flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  background: conic-gradient(#8b22ff 0% 25%, #ffc33b 25% 56%, #21f3d6 56% 100%);
  border-radius: 50%;
  transition: 0.3s;
}
span.center{
  background: #fff;
  display : flex;
  justify-content: center;
  position: absolute;
  top:50%;
  left:50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align:center;
  line-height: 50px;
  font-size:1rem;
  transform: translate(-50%, -50%);
  font-family: 'Roboto', sans-serif;
}
*/

.icon100pro {
	position: relative;
	width: 24px;
	height: 24px;
}
.icon100pro:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	font-size: 2rem;
	color: #FFA000;
	content:"\e92c";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.icon75pro {
	position: relative;
	width: 24px;
	height: 24px;
}
.icon75pro:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	font-size: 2rem;
	color: #8ECB02;
	content:"\e904";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.icon50pro {
	position: relative;
	width: 24px;
	height: 24px;
}
.icon50pro:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	font-size: 2rem;
	color: #8BD3CE;
	content:"\e903";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.icon30pro {
	position: relative;
	width: 24px;
	height: 24px;
}
.icon30pro:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	font-size: 2rem;
	color: #BBC0C5;
	content:"\e902";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.moreDotBtn {
	position: relative;
	display:block;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
}
.moreDotBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 20px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 1.5rem;
	color: #000;
	text-indent: 0;
	content:"\e905";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.moreShowLayerBox {
	position: absolute;
	z-index: 20;
	top: 0;
	right: 20px;
	display: none;
}
.okrTableListInitiativeBox .moreShowLayerBox {
	position: absolute;
	z-index: 20;
	top: -30px;
	right: 20px;
	display: none;
}
ul.moreShowLayer {
	position: relative;
	width: 120px;
	font-size: 0.85rem;
	color: #2d2d2d;
	background-color: #fff;
	border: 1px solid #acacac;
	border-radius: 10px;
	box-shadow: #acacac 2px 2px 5px;
}
ul.moreShowLayer li {
	position: relative;
	display: block;
	border-bottom: 1px solid #dedede;
}
ul.moreShowLayer li:hover {
	background-color: #f0f0f0;
}
ul.moreShowLayer li:first-child:hover {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
ul.moreShowLayer li:last-child:hover {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
ul.moreShowLayer li:last-child {
	border-bottom: none;
}
a.showLayerBtn:link,
a.showLayerBtn:visited,
a.showLayerBtn:active {
	position: relative;
	display: block;
	height: 32px;
	line-height: 32px;
	padding: 0 10px;
	text-align: left;
	font-size: 0.8rem;
	color: #5d5d5d;
}
.moreShowCloseBtn {
	position: absolute;
	z-index: 20;
	top: -15px;
	right: -15px;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	background-color: #2d2d2d;
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: #9d9d9d 0 0 10px;
	text-indent: -9999px;
	cursor: pointer;
}
.moreShowCloseBtn:before {
	position: absolute;
	z-index: 20;
	top: -3px;
	right: -3px;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	font-size: 0.85rem;
	color: #fff;
	text-indent: 0;
	content:"\e907";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.okrMainTable {
	position: relative;
	display: block;
}
.okrMainTable table {
	border-right: 1px solid #acacac;
}
.okrMainTable > table > thead > tr > th {
	position: relative;
	height: 32px;
	line-height: 32px;
	font-size: 0.85rem;
	color: #fff;
	background: url(../images/bg/bg_line.png) repeat #31435A;
}
.okrMainTable> table > thead > tr > th:nth-child(1) {
	width: 40%;
	text-align: center;
	border-top-left-radius: 16px;
}
.okrMainTable > table > thead > tr > th:nth-child(2) {
	width: 10%;
	text-align: center;
}
.okrMainTable > table > thead > tr > th:nth-child(3) {
	width: 10%;
	text-align: center;
}
.okrMainTable > table > thead > tr > th:nth-child(4) {
	width: 20%;
	text-align: center;
}
.okrMainTable th:nth-child(5) {
	width: 20%;
	text-align: center;
	border-top-right-radius: 16px;
}
.okrMainTable > table > tbody > tr > td {
	position: relative;
	height: 32px;
	line-height: 1.5;
	padding: 5px;
	font-size: 0.75rem;
	color: #2d2d2d;
	border-bottom: 1px solid #acacac;
	border-left: 1px solid #acacac;
}
.okrMainTable > table > tbody > tr > td:nth-child(1) {
	width: 40%;
	text-align: left;
}
.okrMainTable > table > tbody > tr > td:nth-child(2) {
	width: 10%;
	text-align: center;
}
.okrMainTable > table > tbody > tr > td:nth-child(3) {
	width: 10%;
	text-align: center;
}
.okrMainTable > table > tbody > tr > td:nth-child(4) {
	width: 20%;
	text-align: center;
}
.okrMainTable > table > tbody > tr > td:nth-child(5) {
	width: 20%;
	text-align: center;
	border-right: 1px solid #acacac;
}

.okrMainTable2 {
	position: relative;
	display: block;
}
.okrMainTable2 table {
	border-right: 1px solid #acacac;
}
.okrMainTable2 > table > thead > tr > th {
	position: relative;
	height: 32px;
	line-height: 32px;
	font-size: 0.85rem;
	color: #fff;
	background: url(../images/bg/bg_line.png) repeat #2F5529;
}
.okrMainTable2 > table > thead > tr > th:nth-child(1) {
	width: 40%;
	text-align: center;
	border-top-left-radius: 16px;
}
.okrMainTable2 > table > thead > tr > th:nth-child(2) {
	width: 10%;
	text-align: center;
}
.okrMainTable2 > table > thead > tr > th:nth-child(3) {
	width: 10%;
	text-align: center;
}
.okrMainTable2 > table > thead > tr > th:nth-child(4) {
	width: 20%;
	text-align: center;
	border-top-right-radius: 16px;
}
.okrMainTable2 > table > tbody > tr > td {
	position: relative;
	height: 32px;
	line-height: 1.5;
	padding: 5px;
	font-size: 0.75rem;
	color: #2d2d2d;
	border-bottom: 1px solid #acacac;
	border-left: 1px solid #acacac;
}
.okrMainTable2 > table > tbody > tr > td:nth-child(1) {
	width: 40%;
	text-align: left;
}
.okrMainTable2 > table > tbody > tr > td:nth-child(2) {
	width: 20%;
	text-align: center;
}
.okrMainTable2 > table > tbody > tr > td:nth-child(3) {
	width: 20%;
	text-align: center;
}
.okrMainTable2 > table > tbody > tr > td:nth-child(4) {
	width: 20%;
	text-align: center;
	border-right: 1px solid #acacac;
}

.okrMainTable3 {
	position: relative;
	display: block;
}
.okrMainTable3 table {
	border-right: 1px solid #acacac;
}
.okrMainTable3 > table > thead > tr > th {
	position: relative;
	height: 32px;
	line-height: 32px;
	font-size: 0.85rem;
	color: #fff;
	background: url(../images/bg/bg_line.png) repeat #936A4B;
}
.okrMainTable3 > table > thead > tr > th:nth-child(1) {
	width: 40%;
	text-align: center;
	border-top-left-radius: 16px;
}
.okrMainTable3 > table > thead > tr > th:nth-child(2) {
	width: 10%;
	text-align: center;
}
.okrMainTable3 > table > thead > tr > th:nth-child(3) {
	width: 10%;
	text-align: center;
}
.okrMainTable3 > table > thead > tr > th:nth-child(4) {
	width: 20%;
	text-align: center;
	border-top-right-radius: 16px;
}
.okrMainTable3 > table > tbody > tr > td {
	position: relative;
	height: 32px;
	line-height: 1.5;
	padding: 5px;
	font-size: 0.75rem;
	color: #2d2d2d;
	border-bottom: 1px solid #acacac;
	border-left: 1px solid #acacac;
}
.okrMainTable3 > table > tbody > tr > td:nth-child(1) {
	width: 50%;
	text-align: left;
}
.okrMainTable3 > table > tbody > tr > td:nth-child(2) {
	width: 10%;
	text-align: center;
}
.okrMainTable3 > table > tbody > tr > td:nth-child(3) {
	width: 15%;
	text-align: center;
}
.okrMainTable3 > table > tbody > tr > td:nth-child(4) {
	width: 25%;
	text-align: center;
	border-right: 1px solid #acacac;
}

/* pie chart 수정 */
.chart {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
}
.percent {
	height: 50px;
	line-height: 50px;
}
.chart canvas {
	width: 50px !important;
    height: 50px !important;
}

/* bar chart 적용 */
.meter {
	height: 20px;  /* Can be anything */
	position: relative;
	margin: 60px 0 20px 0; /* Just for demo spacing */
	background: #555;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	padding: 10px;
	-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
	-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
	box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
	display: block;
	height: 100%;
	-webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	-moz-border-radius-topright: 8px;
	-moz-border-radius-bottomright: 8px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-bottomleft: 20px;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	background-color: rgb(43,194,83);
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(43,194,83)),
	color-stop(1, rgb(84,240,84))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
-webkit-box-shadow:
inset 0 2px 9px  rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow:
inset 0 2px 9px  rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
box-shadow:
inset 0 2px 9px  rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent)
);
background-image:
-moz-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}

.animate > span:after {
	display: none;
}

@-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}

.orange > span {
background-color: #f1a165;
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
}

.red > span {
background-color: #f0a3a3;
background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}

.nostripes > span > span, .nostripes > span:after {
-webkit-animation: none;
background-image: none;
}

/* bar chart 수정 */
.progress {
	flex-grow: 1;
	border-radius: 0;
	width: 100%;
	background-color: #f0f0f0;
}
.progress-bar {
    color: #000;
	background-color: #FFA000;
}
.okrBarProgressBox .progress {
	height: 0.55rem;
}
.tableInitiativeList .okrBarProgressBox .progress {
	background-color: #dedede;
}

/* okr 페이지 */
.okrContentSearchBox {
	position: relative;
	display: flex;
	justify-content: flex-start;
    align-items: center;
	height: 56px;
	margin-bottom: 20px;
	padding-left: 42px;
	text-align: left;
	background: #fff;
	border: 1px solid #acacac;
	border-radius: 42px;
}
.okrContentSearchBox:before {
	position: absolute;
	z-index: 10;
	top: 25px;
	left: 18px;
	width: 7px;
	height: 7px;
	text-align: center;
	background-color: #2b3887;
	border-radius: 50%;
	content: "";
}
.okrSelectBox {
	height: 35px !important;
	margin: 0 5px;
}
.okrSearchBtn {
	position: relative;
	height: 32px;
	line-height: 32px;
	padding: 0 30px;
    font-size: 12px;
	color: #fff;
	background-color: #2b3887;
	border-radius: 42px;
	cursor: pointer;
}
.okrInquiryBtn {
	position: relative;
	height: 32px;
	line-height: 32px;
	margin-right: 15px;
	margin-left: auto;
	padding: 0 30px;
	color: #fff;
	background-color: #4A7BB1;
	border-radius: 42px;
	cursor: pointer;
}
/*
.textareaBox {
	position: absolute;
	top: 3px;
	right: 20px;
}
*/
.inputTextarea {
	width: 500px;
	height: 48px;
	line-height: 1.3;
	padding: 10px;
	background-color: #fffff0;
	border: 1px solid #dedede;
}
.inputTextarea::-webkit-input-placeholder {
   line-height: 26px;
}

.inputTextarea:-moz-placeholder { /* Firefox 18- */
   line-height: 26px;
}

.inputTextarea::-moz-placeholder {  /* Firefox 19+ */
   line-height: 26px;
}

.inputTextarea:-ms-input-placeholder {
   line-height: 26px;
}
.okrWriteBtn {
	position: fixed;
	z-index: 9999;
	right: 20px;
	bottom: 165px;
	width: 52px;
	height: 52px;
	color: #fff;
    background-color: #2b3887;
    border-radius: 50%;
	box-shadow: #acacac 0 0 10px;
	text-indent: -9999px;
	cursor: pointer;
}
.okrWriteBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 52px;
	height: 52px;
	line-height: 52px;
	text-align: center;
	font-size: 1.2rem;
	color: #fff;
	text-indent: 0;
	content:"\e908";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;

    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.okrBottomFixedBox {
	position: fixed;
	display: flex;
	z-index: 9999;
	right: 0;
	bottom: 0;
	left: 0;
	min-height: 71px;
	background-color: #fff;
	border-top: 1px solid #acacac;
	box-shadow: #dedede 0 -2px 5px;
}
.okrBottomFixedBox .okrTableListRootBox {
	width: 100%;
	padding: 10px 20px;
    background-color: #eaf8ff;
}

.okrBottomFixedBox .okrTableListRootBox .tableList:nth-child(1) {
	width: auto;
    flex-grow: 1;
}
.okrBottomFixedBox .okrTableListRootBox .tableList:nth-child(2) {
    flex-shrink: 0;
	justify-content: center;
	width: 120px;
}
.okrBottomFixedBox .okrTableListRootBox .tableList:nth-child(3) {
    flex-shrink: 0;
	justify-content: center;
	width: 120px;
}
.okrBottomFixedBox .okrTableListRootBox .tableList:nth-child(4) {
    flex-shrink: 0;
	justify-content: center;
	width: 150px;
}
.okrBottomFixedBox .okrTableListRootBox .tableList:nth-child(5) {
    flex-shrink: 0;
	justify-content: center;
	width: 100px;
}
.okrBottomFixedBox .okrTableListRootBox .tableList:nth-child(6) {
    flex-shrink: 0;
	justify-content: center;
	width: 30px;
}

.okrBottomFixedBox .okrTableListRootBox .tableList .listContent {
	text-align: left;
}

.okrBottomFixedBox .moreShowLayerBox {
	top: auto;
	right: 20px;
	bottom: 10px;
}

.bgLayer {
	position:fixed;
	z-index: 999999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0, 0.8);
	display: none;
}

.okrInputTableBox {
	position: fixed;
	z-index: 20;
	top: 50%;
	left: 50%;
	width: 700px;
	height: 550px;
	padding: 10px;
	background-color: #fff;
	border: 10px solid #3B4647;
	box-shadow: #000 0 0 10px;
	margin: -275px 0 0 -350px;
	box-sizing: border-box;
	display: none;
}
.okrNewBox {
	position: relative;
	display: block;
	top: auto;
	left: auto;
	width: auto;
	min-width: 768px;
	height: auto;
	padding: 10px;
	background-color: #fff;
	border: none;
	box-shadow: none;
	margin: 0;
	box-sizing: border-box;
}
.okrNewBox .okrInputCloseBtn {
	display: none;
}
.okrInputTableBox .okrInputTitle {
	position: relative;
	display: flex;
	align-items: center;
	height: 42px;
	font-size: 1rem;
	font-weight: bold;
	color: #2d2d2d;
	border-bottom: 1px solid #acacac;
	font-family: 'Lato', sans-serif;
}
.okrInputTableBox .okrInputTitle span {
	height: 42px;
	line-height: 42px;
	border-bottom: 3px solid #000;
}
.okrInputTableBox .okrInputTitle .okrInputEx {
	position: relative;
	height: 42px;
	line-height: 42px;
	margin-left: auto;
}
.okrInputTableBox .okrInputCloseBtn {
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	width: 42px;
	height: 42px;
	text-indent: -9999px;
	cursor: pointer;
}
.okrInputTable {
	position: relative;
	display: block;
	border-top: 1px solid #dedede;
}

.okrInputTable th {
    line-height: 1.3;
	padding: 5px 10px;
	font-size: 0.9rem;
	text-align: center;
	background-color: #f9f9f9;
	border-bottom: 1px solid #dedede;
}

.okrInputTable td {
	padding: 5px 10px;
	font-size: 0.9rem;
	text-align: left;
	background-color: #fff;
	border-bottom: 1px solid #dedede;
}

.okrInputSmallBox {
    display: inline-block;
	width: 50px;
	text-align: center;
}
.okrInputTableBox .okrInputCloseBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 42px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	font-size: 1.3rem;
	color: #2d2d2d;
	text-indent: 0;
	content:"\e903";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.okrInputTableBox .okrInputSubTitle {
	position: relative;
	display: block;
	margin: 20px 0 10px 0;
	text-align: left;
	font-size: 1rem;
	font-weight: bold;
}
.okrInputTableBox .okrInputSubTitle span {
	font-size: 0.75rem;
	color: #9d9d9d;
}
.okrInputTableBox .okrInputSubEx {
	position: relative;
	display: block;
	height: 32px;
	line-height: 32px;
	text-align: left;
	font-size: 0.8rem;
	color: #acacac;
}
.okrInputTableBox .okrInputBox {
	position: relative;
	display: block;
	text-align: left;
}
.okrInputTableBox .inputTextBox {
	position: relative;
	display: block;
	width: 100%;
	height: 42px;
	line-height: 42;
	padding: 5px;
	border: 1px solid #acacac;
	border-radius: 5px;
	box-sizing: border-box;
}
.okrInputTableBox .inputArea {
	position: relative;
    display: block;
    width: 100%;
    height: 140px;
    line-height: 1.5;
    padding: 5px;
    border: 1px solid #acacac;
    border-radius: 5px;
    box-sizing: border-box;
}
.inputArea::-webkit-input-placeholder {
   line-height: 132px;
}

.inputArea:-moz-placeholder { /* Firefox 18- */
   line-height: 132px;
}

.inputArea::-moz-placeholder {  /* Firefox 19+ */
   line-height: 132px;
}

.inputArea:-ms-input-placeholder {
   line-height: 132px;
}
.okrLayerBottomBox {
	position: relative;
	display: block;
}
.okrLayerBottomBox:after {
	display: block;
	visibility: hidden;
	clear: both;
	content: "";
}
.okrLayerLeftBox {
	position: relative;
	float: left;
	width: 40%;
	padding-right: 10px;
	box-sizing: border-box;
}
.okrLayerRightBox {
	position: relative;
	float: right;
	width: 60%;
	padding-left: 10px;
	box-sizing: border-box;
}
.okrInputTableBox .inputTextBox2 {
	position: relative;
	display: block;
	width: 100%;
	height: 32px;
	line-height: 32;
	padding: 5px;
	border: 1px solid #acacac;
	border-radius: 5px;
	box-sizing: border-box;
}
.okrInputTableBox .inputTextBox3 {
	position: relative;
	display: inline-block;
	width: 40%;
	height: 32px;
	line-height: 32;
	padding: 5px;
	border: 1px solid #acacac;
	border-radius: 5px;
	box-sizing: border-box;
}
.okrInputTableBox .inputTextBox4 {
	position: relative;
	float: right;
	display: inline-block;
	width: 57%;
	height: 32px;
	line-height: 32;
	margin-left: 10px;
	padding: 5px;
	border: 1px solid #acacac;
	border-radius: 5px;
	box-sizing: border-box;
}
.okrInputTableBox .okrNameSearchBtn {
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	width: 32px;
	height: 32px;
	line-height: 32;
	background: transparent;
	border: none;
	text-indent: -9999px;
	box-sizing: border-box;
	cursor: pointer;
}
.okrInputTableBox .okrNameSearchBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 1rem;
	color: #2d2d2d;
	text-indent: 0;
	content:"\e907";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.okrInputTableBox .okrCalendarSearchBtn {
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	width: 32px;
	height: 32px;
	line-height: 32;
	background: transparent;
	border: none;
	text-indent: -9999px;
	box-sizing: border-box;
	cursor: pointer;
}
.okrInputTableBox .okrCalendarSearchBtn:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 1.3rem;
	color: #2d2d2d;
	text-indent: 0;
	content:"\e906";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.okrInputTableBox .okrBottomBtnBox {
	position: relative;
	display: block;
	margin: 30px 0;
	text-align: center;
}
.okrInputTableBox .okrCancelBtn {
	position: relative;
	display: inline-block;
	padding: 5px 30px;
	font-size: 0.8rem;
	color: #2d2d2d;
	background-color: #fff;
	border: 1px solid #acacac;
	border-radius : 5px;
	cursor: pointer;
}
.okrInputTableBox .okrSendBtn {
	position: relative;
	display: inline-block;
	padding: 5px 30px;
	font-size: 0.8rem;
	color: #fff;
	background-color: #10858F;
	border: none;
	border-radius : 5px;
	cursor:pointer;
}

.okrMainBottomBox {
	position: relative;
	display: block;
}
.okrMainBottomList {
	position: relative;
	float: left;
	width: 50%;
	padding: 0;
	padding-left: 0;
	box-sizing: border-box;
}
.okrMainBottomList:nth-child(1) {
	padding-left: 0;
}
.okrMainBottomRightBox {
	position: relative;
	float: left;
	width: 50%;
	padding: 0 10px;
	padding-right: 0;
	box-sizing: border-box;
}
.okrMainBottomList2 {
	position: relative;
	display: block;
	padding: 0;
	padding-right: 0;
	box-sizing: border-box;
}

.iconBg01 {
	background-color: #B29292;
}
.iconBg02 {
	background-color: #B9BB6A;
}
.iconBg03 {
	background-color: #8BCD74;
}
.iconBg04 {
	background-color: #6AD49E;
}
.iconBg05 {
	background-color: #58BEDE;
}
.iconBg06 {
	background-color: #848ECF;
}
.iconBg07 {
	background-color: #D890DC;
}

.depth01 {
	padding-left: 0;
}
.depth02 {
	padding-left: 20px;
}
.depth03 {
	padding-left: 40px;
}

/* 저장중 팝업 */
.savingLayer {
	position: fixed;
	z-index: 99999999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	background-color: rgba(0,0,0, 0.8);
}
.savingLayerBox {
	position: relative;
	display: flex;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
}

.savingLogo {
	margin-bottom: 50px;
    margin-left: -100px;
}
.savingLogo .logoOKR {
    position: absolute;
    height: 85px;
    line-height: 85px;
    margin-left: 10px;
    font-size: 2.5rem;
    font-weight: bold;
    color: #ffe400;
    font-family: 'Roboto', sans-serif;
}
.savingText {
	font-size: 2.5rem;
	font-weight: bold;
	color: #fff;
	text-shadow: #000 0 0 5px;
	-webkit-animation-name:savingText;
    -webkit-animation-duration:1s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-name:savingText;
    -moz-animation-duration:1s;
    -moz-animation-iteration-count:infinite;
    -ms-animation-name:savingText;
    -ms-animation-duration:1s;
    -ms-animation-iteration-count:infinite;
    -o-animation-name:savingText;
    -o-animation-duration:1s;
    -o-animation-iteration-count:infinite;
    animation-name:savingText;
    animation-duration:1s;
    animation-iteration-count:infinite;
}
@-webkit-keyframes savingText {
	  0%   {color: red;}
    50%  {color: yellow;}
    100% {color: white;}
}
@-moz-keyframes savingText {
	0%   {color: red;}
    50%  {color: yellow;}
    100% {color: white;}
}
@-ms-keyframes savingText {
	0%   {color: red;}
    50%  {color: yellow;}
    100% {color: white;}
}
@-o-keyframes savingText {
	0%   {color: red;}
    50%  {color: yellow;}
    100% {color: white;}
}
@keyframes savingText {
	0%   {color: red;}
    50%  {color: yellow;}
    100% {color: white;}
}

/* okr view */
.okrViewTableBox {
	position: fixed;
	z-index: 20;
	top: 50%;
	left: 50%;
	width: 700px;
	height: 550px;
	padding: 10px;
	background-color: #fff;
	border: 10px solid #3B4647;
	box-shadow: #000 0 0 10px;
	margin: -275px 0 0 -350px;
	box-sizing: border-box;
	display: none;
}
.okrViewTableBox .okrViewTitle {
	position: relative;
	display: flex;
	align-items: center;
	height: 42px;
	font-size: 1rem;
	font-weight: bold;
	color: #2d2d2d;
	border-bottom: 1px solid #acacac;
	font-family: 'Lato', sans-serif;
}
.okrViewTableBox .okrViewTitle span {
	height: 42px;
	line-height: 42px;
	border-bottom: 3px solid #000;
}
.okrViewTableBox .okrViewTitle .okrViewEx {
	position: relative;
	height: 42px;
	line-height: 42px;
	font-size: 0.85rem;
	font-weight: normal;
	margin-left: 30px;
}

.okrViewBox {
    position: relative;
    display: block;
    top: auto;
    left: auto;
    width: auto;
	min-width: 1200px;
    height: auto;
    padding: 10px;
    background-color: #fff;
    border: none;
    box-shadow: none;
    margin: 0;
    box-sizing: border-box;
}

.okrViewListBox .okrTableListRootBox .tableList {
	display: flex;
    align-items: center;
    font-size: 1rem;
}
.okrViewListBox .okrTableListRootBox .tableList:nth-child(1) {
	flex-shrink: 1;
    flex-grow: 1;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	width: 100%;
}
.okrViewListBox .okrTableListRootBox .tableList:nth-child(2) {
    flex-shrink: 0;
	justify-content: center;
	width: 150px;
}
.okrViewListBox .okrTableListRootBox .tableList:nth-child(3) {
    flex-shrink: 0;
	justify-content: center;
	width: 100px;
}
.okrViewListBox .okrTableListRootBox .tableList:nth-child(4) {
    flex-shrink: 0;
	justify-content: center;
	width: 120px;
}

.okrViewListBox .listTopBox {
	position: relative;
	display: flex;
	flex-grow: 1;
	flex-direction: row;
	margin-bottom: 10px;
}
.okrViewListBox .listTopBox .listContent {
	align-items: center;
	flex-direction: row;
	text-align: left;
}
.okrViewListBox .listTopBox .listContent .listContentText {
	flex-direction: row;
}
.okrViewListBox .listBottomBox {
	position: relative;
	display: flex;
	flex-grow: 1;
	flex-direction: row;
    width: 80%;
	padding: 5px 20px;
	font-size: 0.9rem;
	background-color: #f9f9f9;
	border: 1px solid #acacac;
	border-radius: 48px;

}
.okrViewListBox .listBottomBox .objectiveTitleIcon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 38px;
    line-height: 38px;
	padding: 0 20px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #2d2d2d;
    border-radius: 42px;
}
.okrViewListBox .listBottomBox .objectiveListBox {
	position: relative;
	display: inline-flex;
    justify-content: space-evenly;
	flex-grow: 1;
}
.okrViewListBox .listBottomBox .objectiveListBox .objectvieList {
	display: flex;
	flex-direction: column;
	margin: 0 20px;
	text-align: left;
}
.objectvieList span:first-child {
	color: #9d9d9d;
}

.memoBtn {
	position: relative;
    justify-content: center;
    align-items: center;
    height: 32px;
    line-height: 32px;
	padding: 0 25px;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    background-color: #0774EE;
    border-radius: 48px;
    cursor: pointer;
}

.okrTopTitleBox {
	position: relative;
	display: flex;
	align-items: center;
	height: 52px;
	line-height: 52px;
	margin: 10px 0 0;
	text-align: left;
}
.okrTopContentBox {
	position: relative;
    display: block;
    min-height: 365px;
    line-height: 1.5;
    margin-top: -5px;
    padding: 15px;
    text-align: left;
    font-size: 0.95rem;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 10px;
}

.okrTopTitle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 30px 5px 40px;
	font-size: 1.1rem;
	color: #fff;
	background: url(../images/bg/bg_line.png) repeat #2D3239;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}
.okrTopTitle:before {
	position: absolute;
	z-index: 10;
	top: 23px;
	left: 16px;
	width: 6px;
	height: 6px;
	text-align: center;
	background-color: #fff;
	border-radius: 50%;
	content: "";
}

.keyResultAddBtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 32px;
	margin-left: 20px;
	padding: 0 30px;
	font-size: 0.9rem;
	font-weight: bold;
	color: #fff;
	background-color: #2b3887;
	border: none;
	border-radius: 42px;
	cursor: pointer;
}
.initiativeAddBtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 32px;
	margin-top: 5px;
	padding: 0 20px;
	font-size: 0.85rem;
	font-weight: bold;
	color: #fff;
	background-color: #0774EE;
	border: none;
	border-radius: 42px;
	cursor: pointer;
}

.okrTopContentBox .okrTableListSubBox {
	position: relative;
	width: 100%;
	border: none;
}
.okrTopContentBox .okrTableListKeyBox {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	padding: 10px 0;
	background-color: #fff;
	border-bottom: 1px solid #acacac;
}
.okrTopContentBox .tableKeyList {
	display: flex;
	align-items: center;
	font-size: 0.8rem;
}
.okrTopContentBox .tableKeyList a.okrContentSubBtn {
	position: relative;
	display: block;
	width: 24px;
	height: 24px;
}

ul.subNavList::-webkit-scrollbar-thumb {
	background: #13d1f1 !important;
}
.hot {
	border: 3px solid #ffffff;
}
.penBtn {
	position: relative;
	display: flex;
	width: 24px;
	height: 24px;
	margin: 0 5px;
	background-color: #fff;
	border: 1px solid #acacac;
	border-radius: 24px;
}

	.penBtn:before {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 22px;
		height: 22px;
		font-size: 12px;
		color: #2d2d2d;
		content: "\e91d";
		font-family: 'icomoon' !important;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
	}

	.penBtn span {
		display: block;
		text-indent: -9999px;
	}

.okrTopContentBox .tableKeyList .okrContentOpenBtn {
    width: 24px;
    height: 24px;
    display: block;

}
.okrTopContentBox .tableKeyList .okrContentOpenBtn:before {
    width: 24px;
    height: 24px;
	font-size: 1.2rem;
    color: #0f74a9;
}
.okrTopContentBox .tableKeyList .okrContentCloseBtn {
    width: 24px;
    height: 24px;
    display: none;
}
.okrTopContentBox .tableKeyList .okrContentCloseBtn:before {
    width: 24px;
    height: 24px;
	font-size: 1.2rem;
    color: #0f74a9;
}
.okrTopContentBox .okrTableListKeyBox .tableKeyList:nth-child(1) {
    flex-shrink: 0;
	justify-content: center;
	width: auto;
}
.okrTopContentBox .okrTableListKeyBox .tableKeyList:nth-child(2) {
    flex-shrink: 1;
	flex-grow: 1;
    justify-content: left;
    align-items: center;
    width: auto;
	padding: 0 20px;
	box-sizing: border-box;
}
.okrTopContentBox .okrTableListKeyBox .tableKeyList:nth-child(3) {
    flex-shrink: 0;
	justify-content: center;
	flex-direction: column;
	width: 120px;
}
.okrTopContentBox .okrTableListKeyBox .tableKeyList:nth-child(5) {
    flex-shrink: 0;
	justify-content: center;
	flex-direction: column;
	width: 150px;
	padding: 0 10px;
	box-sizing: border-box;
}

.okrTopContentBox .listKeyIcon {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	font-size: 0.85rem;
	font-weight: bold;
	color: #fff;
	background-color: #7EA4D6;
	border-radius: 50%;
	text-indent: -9999px;
}
.okrTopContentBox .listKeyIcon:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	font-size: 1rem;
	color: #fff;
	text-indent: 0;
	content:"\e90c";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.okrTopContentBox .listKeyContent {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	line-height: 1.2;
	margin-left: 10px;
	/* font-size: 0.75rem; */
	font-weight: bold;
}
.okrTopContentBox .listKeyContentText {
	position: relative;
	display: flex;
	margin-bottom: 5px;
}
.okrTopContentBox .listKeyContentExText {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.75rem;
	font-weight: normal;
	color: #5d5d5d;
}
.okrTopContentBox .okrTableListKeySubBox {
    display: block;
}
.okrTopContentBox .okrTableListInitiativeBox {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	padding: 10px 0;
	background-color: #ffffe7;
	border-top: none;
	border-bottom: 1px solid #dedede;
}
.okrTopContentBox .tableInitiativeList {
	display: flex;
	align-items: center;
	font-size: 0.7rem;
	/* flex-wrap: wrap; */
}
.okrTopContentBox .okrTableListInitiativeBox .tableInitiativeList:nth-child(1) {
    flex-shrink: 0;
	justify-content: center;
	width: 10px;
}
.okrTopContentBox .okrTableListInitiativeBox .tableInitiativeList:nth-child(2) {
    flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 40px;
}
.okrTopContentBox .okrTableListInitiativeBox .tableInitiativeList:nth-child(3) {
    flex-shrink: 0;
	justify-content: center;
	width: auto;
	padding: 0 10px;
	box-sizing: border-box;
}
.okrTopContentBox .okrTableListInitiativeBox .tableInitiativeList:nth-child(4) {
    flex-shrink: 1;
	flex-grow: 1;
    justify-content: center;
    width: auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.okrTopContentBox .okrTableListInitiativeBox .tableInitiativeList:nth-child(5) {
    flex-shrink: 0;
    justify-content: center;
    width: 120px;
}
.okrTopContentBox .okrTableListInitiativeBox .tableInitiativeList:nth-child(6) {
    flex-shrink: 0;
	justify-content: center;
	width: 80px;
}
.okrTopContentBox .okrTableListInitiativeBox .tableInitiativeList:nth-child(7) {
    flex-shrink: 0;
	justify-content: center;
	width: 150px;
}
.okrTopContentBox .listInitiativeIcon {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 0.85rem;
	font-weight: bold;
	color: #fff;
	background-color: #8EC8A6;
	border-radius: 50%;
}
.okrTopContentBox .listInitiativeIcon:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 0.8rem;
	color: #fff;
	text-indent: 0;
	content:"\e90b";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.okrTopContentBox .listInitiativeContent {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	width: 100%;
	line-height: 1.2;
	margin-left: 10px;
	font-size: 0.75rem;
	font-weight: bold;
}
.okrTopContentBox .listInitiativeContentText {
	position: relative;
	display: flex;
	margin-bottom: 5px;
}
.okrTopContentBox .listInitiativeExText {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.75rem;
	font-weight: normal;
	color: #5d5d5d;
}
.okrTopContentBox .okrBarProgressBox {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
}
.okrTopContentBox .okrBardate {
	display: flex;
	justify-content: flex-end;
}
.okrTopContentBox .okrBarEx {
	display: flex;
}
.okrTopContentBox .progressName {
	width: 100px;
}
.okrTopContentBox .progressPercent {
	margin-left: auto;
}

/* bar chart 수정 */
.okrTopContentBox .progress {
	flex-grow: 1;
	border-radius: 0;
	width: 100%;
	background-color: #f0f0f0;
}
.okrTopContentBox .progress-bar {
	background-color: #FFA000;
}
.okrTopContentBox .okrBarProgressBox .progress {
	height: 0.55rem;
}
.okrTopContentBox .tableInitiativeList .okrBarProgressBox .progress {
	background-color: #dedede;
}

.okrTeacherName {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 42px;
	padding: 0 20px;
	font-weight: bold;
	color: #fff;
	background-color: #B271D2;
	border-radius: 42px;
	border-top-right-radius: 0;
}
.tableInitiativeList .okrTeacherName {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 38px;
	padding: 0 15px;
	font-weight: bold;
	color: #fff;
	background-color: #59D580;
	border-radius: 42px;
	border-top-right-radius: 0;
}

.progressTopBox {
	position: relative;
	display: flex;
	width: 100%;
}
.progressTopBox span:first-child {
	padding: 2px;
}
.progressTopBox span:last-child {
	padding: 2px;
	margin-left: auto;
	font-weight: bold;
	font-family: "Roboto", sans-serif;
}

.progressBottomBox {
	position: relative;
	display: flex;
	width: 100%;
}
.progressBottomBox span:first-child {
	padding: 2px;
}
.progressBottomBox span:last-child {
	padding: 2px;
	margin-left: auto;
	font-weight: bold;
	color: #9d9d9d;
	font-family: "Roboto", sans-serif;
}


.okrBottomContentBox {
	position: relative;
    display: block;
    min-height: 200px;
    line-height: 1.5;
    margin-top: 10px;
    padding: 15px;
    text-align: left;
    font-size: 0.95rem;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 10px;
}
.okrNewBox .okrBottomContentBox {
    min-height: calc(100vh - 360px);
}
.okrContentTable {
	position: relative;
	display: block;
}
.okrContentTable table {
	border-top: 2px solid #2d2d2d;
	border-right: 1px solid #acacac;
}
.okrContentTable > table > tbody > tr > td {
	position:static;
	height: 32px;
	line-height: 1.5;
	padding: 5px;
	font-size: 0.75rem;
	color: #2d2d2d;
	border-bottom: 1px solid #acacac;
	border-left: 1px solid #acacac;
}
.okrContentTable > table > tbody > tr:nth-child(even) > td {
	background-color: #f9f9f9;
}
.okrContentTable > table > tbody > tr > td:nth-child(1) {
	/* width: 150px; */
	text-align: center;
}
.okrContentTable > table > tbody > tr > td:nth-child(2) {
	width: auto;
	text-align: left;
}
.okrContentTable > table > tbody > tr > td:nth-child(3) {
	/* width: 110px; */
	text-align: center;
}
.okrContentTable > table > tbody > tr > td:nth-child(4) {
	/* width: 120px; */
	text-align: center;
	border-right: 1px solid #acacac;
}
.okrContentTable > table > tbody > tr > td:nth-child(5) {
	/* width: 90px; */
	text-align: center;
	border-right: 1px solid #acacac;
}
.okrDeleteBtn {
	position: relative;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 20px;
    font-size: 0.7rem;
    font-weight: bold;
    color: #fff;
    background-color: #E63C04;
    border: none;
    border-radius: 42px;
    cursor: pointer;
}


.yellow {
	color: #FCFF00;
}

/* report */
.okrContentSubTitle {
    position: relative;
    display: block;
	margin-top: 10px;
    padding: 5px 5px 15px 22px;
    text-align: left;
    font-size: 0.9rem;
	font-weight: bold;
    color: #000;
    background-color: #f0f0f0;
    border: 1px solid #acacac;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: #f0f0f0 3px 3px 3px;
}
.okrContentSubTitle:before {
	position: absolute;
	z-incex: 10;
	top: 8px;
	left: 10px;
	width: 6px;
	height: 15px;
	background-color: #5d5d5d;
	border-radius: 32px;
	content: "";
}

.okrReportTable {
	position: relative;
	display:block;
}
.okrReportTable > table > thead > tr > th {
    position: relative;
    height: 32px;
    line-height: 1.3;
    font-size: 0.85rem;
    color: #fff;
    background: url(../images/bg/bg_line.png) repeat #31435A;
}
.okrReportTable > table > thead > tr > th:nth-child(1) {
	width: 80px;
	text-align: center;
	border-top-left-radius: 16px;
}
.okrReportTable > table > thead > tr > th:nth-child(2) {
	width: 200px;
	text-align: center;
}
.okrReportTable > table > thead > tr > th:nth-child(3) {
	width: auto;
	text-align: center;
}
.okrReportTable > table > thead > tr > th:nth-child(4) {
	width: 250px;
	text-align: center;
}
.okrReportTable > table > thead > tr > th:nth-child(5) {
	width: 100px;
	text-align: center;
}
.okrReportTable > table > thead > tr > th:nth-child(6) {
	width: 50px;
	text-align: center;
}
.okrReportTable > table > thead > tr > th:nth-child(7) {
	width: 120px;
	text-align: center;
}

.okrReportTable > table > tbody > tr > td {
    position: relative;
    height: 32px;
    line-height: 1.5;
    padding: 5px;
    font-size: 0.75rem;
    color: #2d2d2d;
    border-bottom: 1px solid #acacac;
}
.okrReportTable > table > tbody > tr > td:nth-child(1) {
	width: 80px;
	text-align: center;
}
.okrReportTable > table > tbody > tr > td:nth-child(2) {
	width: 200px;
	text-align: center;
}
.okrReportTable > table > tbody > tr > td:nth-child(3) {
	width: auto;
	text-align: left;
}
.okrReportTable > table > tbody > tr > td:nth-child(4) {
	width: 250px;
	text-align: center;
}
.okrReportTable > table > tbody > tr > td:nth-child(5) {
	width: 100px;
	text-align: center;
}
.okrReportTable > table > tbody > tr > td:nth-child(6) {
	width: 50px;
	text-align: center;
}
.okrReportTable > table > tbody > tr > td:nth-child(7) {
	width: 120px;
	text-align: center;
}

.viewIcon {
	position: relative;
	/* display: flex; */
	justify-content: center;
	align-items: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	margin-left: 5px;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	color: #fff;
	background-color: #4A7BB1;
	border-radius: 50%;
	text-indent: -9999px;
	cursor: pointer;
}
.viewIcon:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 1rem;
	color: #fff;
	text-indent: 0;
	content:"\e90a";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

/* report popup */
.okrReportBox {
	position: relative;
	display: block;
	top: auto;
	left: auto;
	width: auto;
	height: auto;
	padding: 10px;
	background-color: #fff;
	border: none;
	box-shadow: none;
	margin: 0;
	box-sizing: border-box;
}

.okrReportBox .okrInputTable {
	position: relative;
	display: block;
	border-top: 1px solid #dedede;
}

.okrReportBox .okrInputTable th {
	/* width: 150px; */
    line-height: 1.3;
	padding: 7px 10px;
	font-size: 1rem;
	text-align: center;
	background-color: #f9f9f9;
	border-bottom: 1px solid #dedede;
}

.okrReportBox .okrInputTable td {
	width: auto;
	padding: 5px 10px;
	font-size: 1rem;
	text-align: left;
	background-color: #fff;
	border-bottom: 1px solid #dedede;
}

.okrInputListBox {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	padding: 10px 0;
	background-color: #F1F3F4;
	border-top: 2px solid #5ABCDE;
}
.okrInputListBox .okrInputItems {
	display: flex;
	align-items: center;
	font-size: 0.8rem;
}
.okrInputListBox .okrInputItems:nth-child(1) {
    flex-shrink: 0;
	justify-content: center;
	width: 130px;
}
.okrInputListBox .okrInputItems:nth-child(2) {
    flex-shrink: 1;
	flex-grow: 1;
    justify-content: left;
    align-items: center;
    width: auto;
	padding: 0 20px;
	box-sizing: border-box;
}
.okrInputListBox .okrInputItems:nth-child(3) {
    flex-shrink: 0;
	justify-content: center;
	flex-direction: column;
	width: 120px;
}
.okrInputListBox .okrInputItems:nth-child(4) {
    flex-shrink: 0;
	justify-content: center;
	flex-direction: column;
	width: 120px;
	padding: 0 10px;
	box-sizing: border-box;
}

.replyBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 20px;
    font-size: 0.85rem;
    font-weight: bold;
    color: #fff;
    background-color: #0774EE;
    border: none;
    border-radius: 42px;
    cursor: pointer;
}

.filebox label {
	display: inline-block;
    padding: .5em 2.5em;
    color: #999;
    font-size: inherit;
    line-height: normal;
    vertical-align: middle;
    background-color: #fdfdfd;
    cursor: pointer;
    border: 1px solid #ebebeb;
    border-bottom-color: #e2e2e2;
    border-radius: 2em;
}
.filebox input[type="file"] { /* 파일 필드 숨기기 */
    position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip:rect(0,0,0,0);
	border: 0;
}

.filebox.bs3-success label {
  color: #fff;
  margin-bottom: 0;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.okrInputListBox .inputArea {
	position: relative;
    display: block;
    width: 100%;
    height: 60px;
    line-height: 1.5;
    padding: 5px;
    border: 1px solid #acacac;
    border-radius: 5px;
    box-sizing: border-box;
}
.inputArea::-webkit-input-placeholder {
   line-height: 48px;
}

.inputArea:-moz-placeholder { /* Firefox 18- */
   line-height: 48px;
}

.inputArea::-moz-placeholder {  /* Firefox 19+ */
   line-height: 48px;
}

.inputArea:-ms-input-placeholder {
   line-height: 48px;
}

.okrReportViewTable {
	position: relative;
	display: block;
	margin-top: 20px;
}
.okrReportViewTable table {
	border-top: 2px solid #2d2d2d;
}
.okrReportViewTable > table > tbody > tr > td {
	position:static;
	height: 32px;
	line-height: 1.5;
	padding: 5px;
	font-size: 0.75rem;
	color: #2d2d2d;
	border-bottom: 1px solid #acacac;
}
/*
.okrReportViewTable > table > tbody > tr:nth-child(even) > td {
	background-color: #f9f9f9;
}*/
.okrReportViewTable > table > tbody > tr > td:nth-child(1) {
	/* width: 150px; */
	text-align: center;
	background-color: #ECF0F0;
}
.okrReportViewTable > table > tbody > tr > td:nth-child(2) {
	width: auto;
	text-align: left;
}
.okrReportViewTable > table > tbody > tr > td:nth-child(3) {
	/*  width: 110px; */
	text-align: center;
}
.okrReportViewTable > table > tbody > tr > td:nth-child(4) {
	/*  width: 200px; */
	text-align: center;
}

.okrReportBox .okrModifyBtn {
	position: relative;
	display: inline-block;
	padding: 5px 30px;
	font-size: 0.8rem;
	color: #fff;
	background-color: #242F33;
	border: none;
	border-radius : 5px;
	cursor: pointer;
}
.okrReportBox .okrDeleteBtn {
	position: relative;
	display: inline-block;
	height: auto;
	padding: 5px 30px;
	font-size: 0.8rem;
	color: #fff;
	background-color: #BB3802;
	border: none;
	border-radius : 5px;
	cursor:pointer;
}

/* paging */
/*
.pageBox {
	position: relative;
	display: flex;
	justify-content: center;
	margin: 20px 0;
}
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 0;
  border-radius: 4px;
}

.pagination a {
  position: relative;
  float: left;
  padding:  12px 18px;
  margin-left: -1px;
  line-height: 1.428571429;
  text-decoration: none;
  color:#2d2d2d;
  background-color: #ffffff;
  border: 1px solid #acacac;
}

.pagination a:first-child {
  margin-left: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.pagination a:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.pagination a:hover,
.pagination span:hover,
.pagination a:focus {
  background-color: #eeeeee;
}

.pagination font {
  position: relative;
  float: left;
  display:inline-block;
  padding:  12px 18px;
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: #899298;
  border-color: #899298;
}

.pagination font:first-child {
  color: #2d2d2d;
  background-color: #fff;
  border-color: #acacac !important;
}

.pagination font:last-child {
  color: #2d2d2d;
  background-color: #fff;
  border-color: #acacac !important;
}
*/


/* 1on1 */
ul.okrOneonOnelist {
	width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	box-sizing: border-box;
}

ul.okrOneonOnelist .item {
    display: flex;
    flex-direction: column;
    flex: 1 1 30%;
    padding: 0 5px;
    box-sizing: border-box;
}

.okrOneonOneTable {
	position: relative;
	display:block;
	height: 365px;
	overflow-y: auto;
}
.okrOneonOneTable > table > thead > tr > th {
    position: relative;
    height: 32px;
    line-height: 1.3;
    font-size: 0.85rem;
    color: #fff;
    background: url(../images/bg/bg_line.png) repeat #31435A;
}
.okrOneonOneTable > table > thead > tr > th:nth-child(1) {
	width: 100px;
	text-align: center;
	border-top-left-radius: 16px;
}
.okrOneonOneTable > table > thead > tr > th:nth-child(2) {
	width: auto;
	text-align: center;
}
.okrOneonOneTable > table > thead > tr > th:nth-child(3) {
	width: 70px;
	text-align: center;
}
.okrOneonOneTable > table > thead > tr > th:nth-child(4) {
	width: 60px;
	text-align: center;
}

.okrOneonOneTable > table > tbody > tr > td {
    position: relative;
    height: 32px;
    line-height: 1.5;
    padding: 5px;
    font-size: 0.75rem;
    color: #2d2d2d;
    border-bottom: 1px solid #acacac;
}
.okrOneonOneTable > table > tbody > tr > td:nth-child(1) {
	width: 100px;
	text-align: center;
}
.okrOneonOneTable > table > tbody > tr > td:nth-child(2) {
	width: auto;
	text-align: center;
}
.okrOneonOneTable > table > tbody > tr > td:nth-child(3) {
	width: 70px;
	text-align: center;
}
.okrOneonOneTable > table > tbody > tr > td:nth-child(4) {
	width: 60px;
	text-align: center;
}

.confirmedStatus {
	position: relative;
	padding: 3px 10px;
	font-size: 0.7rem;
	color: #fff;
	background: #2F3544;
	border-radius: 32px;
}
.inquiryStatus {
	position: relative;
	padding: 3px 10px;
	font-size: 0.7rem;
	color: #fff;
	background: #449CE1;
	border-radius: 32px;
}
.cancelledStatus {
	position: relative;
	padding: 3px 10px;
	font-size: 0.7rem;
	color: #fff;
	background: #F34911;
	border-radius: 32px;
}

.okrContentOneonOneTitle {
	position: relative;
    display: block;
    margin-top: 10px;
    padding: 5px 5px 15px 22px;
    text-align: left;
    font-size: 0.9rem;
    font-weight: bold;
    color: #000;
    background-color: #f0f0f0;
    border: 1px solid #acacac;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: #f0f0f0 3px 3px 3px;
}
.okrContentOneonOneTitle:before {
	position: absolute;
	z-index: 10;
	top: 8px;
	left: 10px;
	width: 6px;
	height: 15px;
	background-color: #000;
	border-radius: 32px;
	content: "";
}

.oneTitle01 {
	background-color: #f0f6ff;
}
.oneTitle02 {
	background-color: #eefdff;
}
.oneTitle03 {
	background-color: #eafff4;
}

.okrContentOneonOneTableBox {
    position: relative;
    display: block;
    min-height: 365px;
    line-height: 1.5;
    margin-top: -10px;
    padding: 10px;
    text-align: left;
    font-size: 0.95rem;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 10px;
}

/* 1on1 popup */
ul.okrOneonOnePopuplist {
    display: flex;
    justify-content: space-between;
	box-sizing: border-box;
}

ul.okrOneonOnePopuplist .item {
    display: flex;
    flex-direction: column;
    flex: 1 1 45%;
    padding: 0 5px;
    box-sizing: border-box;
}

.okrContentOneonOnePopupItemBox {
    position: relative;
    display: flex;
    min-height: 190px;
    line-height: 1.5;
    margin-top: -10px;
    padding: 10px;
    text-align: left;
    font-size: 0.75rem;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 10px;
}

.okrContentOneonOnePopupTitle {
	position: relative;
    display: block;
    margin-top: 10px;
    padding: 5px 5px 15px 22px;
    text-align: left;
    font-size: 0.9rem;
    font-weight: bold;
    color: #000;
    background-color: #f0f0f0;
    border: 1px solid #acacac;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: #f0f0f0 3px 3px 3px;
}
.okrContentOneonOnePopupTitle:before {
	position: absolute;
	z-incex: 10;
	top: 8px;
	left: 10px;
	width: 6px;
	height: 15px;
	background-color: #000;
	border-radius: 32px;
	content: "";
}

.okrOneonOneList {
	position: relative;
	display: flex;
    flex: 1 1 40%;
    padding: 0 5px;
    box-sizing: border-box;
}
.okrOneonOneList:first-child {
	flex: 1 1 57%;
	margin: 0 5px;
	padding: 5px;
    background-color: #f9f9f9;
    border: 1px solid #acacac;
}
.okrOneonOneList:last-child {
	flex: 1 1 35%;
	padding: 5px;
    background-color: #f9f9f9;
    border: 1px solid #acacac;
}
.okrListItem {
	display: flex;
    flex-direction: column;
    flex: 1 1 33.3%;
    padding: 0 5px;
    box-sizing: border-box;
}
.okrListItem:last-child {
    flex-wrap: wrap;
	flex-direction: row;
	align-content: center;
}
.okrListItemTitle {
	position: relative;
	display: flex;
	margin-bottom: 5px;
	padding: 3px 10px;
	font-size: 0.75rem;
	color: #fff;
	background-color: #1F99C3;
	border-radius: 32px;
}
.okrListSelectedTitle {
	position: relative;
	display: flex;
	margin-bottom: 5px;
	padding: 3px 10px;
	font-size: 0.75rem;
	color: #fff;
	background-color: #DC801E;
	border-radius: 32px;
}
.okrOneonOneSelectBox {
	flex-grow: 1;
	width: 100%;
    height: 183px !important;
    padding-right: 0 !important;
}
.okrOneonOneSelectBox.selected {
    background-color: #f3fcff;
}

.okrOfficerSelectBtn {
	position: relative;
	display: flex;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 32px;
	margin: 2px 0;
	font-size: 0.8rem;
	color: #fff;
	background-color: #5595b0;
	border: none;
	border-radius : 32px;
	cursor: pointer;
}
.okrAllSelectBtn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	width: 100%;
	height: 32px;
	margin: 2px 0;
	font-size: 0.8rem;
	color: #fff;
	background-color: #607983;
	border: none;
	border-radius : 32px;
	cursor: pointer;
}

.okrOfficerDeleteBtn {
	position: relative;
	display: flex;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 32px;
	margin: 2px 0;
	font-size: 0.8rem;
	color: #fff;
	background-color: #a16f3a;
	border: none;
	border-radius : 32px;
	cursor: pointer;
}
.okrAllDeleteBtn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	width: 100%;
	height: 32px;
	margin: 2px 0;
	font-size: 0.8rem;
	color: #fff;
	background-color: #ac5b3c;
	border: none;
	border-radius : 32px;
	cursor: pointer;
}

.okrOneonOnePopupItem {
	position: relative;
	display: flex;
	flex-direction: column;
	/* flex-wrap: wrap; */
	align-items: center;
	align-content: center;
	width :100%;
}

.okrOneonOneItemList {
	display: flex;
	flex-grow: 1;
	align-items: center;
	width: 100%;
	margin: 3px 0;
	padding: 5px;
	background-color: #f9f9f9;
	border: 1px solid #acacac;
}
.okrOneonOneItemList:last-child {
	padding: 0;
	background-color: transparent;
	border: none;
}

.okrDateBtn {
    position: relative;
	margin: 0 3px;
    padding: 7px 20px;
    font-size: 0.8rem;
    color: #fff;
    background-color: #528156;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.okrMakeBtn {
    position: relative;
    display: flex;
    flex-shrink: 0;
	margin: 0 3px;
    padding: 7px 30px;
    font-size: 0.8rem;
    color: #fff;
    background-color: #5595b0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.okrOneonOnePopupTable {
	position: relative;
	display:block;
}
.okrOneonOnePopupTable > table > thead > tr > th {
    position: relative;
    height: 32px;
    line-height: 1.3;
    text-align: center;
    font-size: 0.85rem;
    color: #fff;
    background: url(../images/bg/bg_line.png) repeat #31435A;
}
.okrOneonOnePopupTable > table > thead > tr > th:nth-child(1) {
	width: auto;
	text-align: center;
}
.okrOneonOnePopupTable > table > thead > tr > th:nth-child(2) {
	width: 100px;
	text-align: center;
}
.okrOneonOnePopupTable > table > thead > tr > th:nth-child(3) {
	width: 70px;
	text-align: center;
}
.okrOneonOnePopupTable > table > thead > tr > th:nth-child(4) {
	width: 150px;
	text-align: center;
}

.okrOneonOnePopupTable > table > tbody > tr > td {
    position: relative;
    height: 32px;
    line-height: 1.5;
    padding: 5px;
    text-align: center;
    font-size: 0.75rem;
    color: #2d2d2d;
    border-bottom: 1px solid #acacac;
}
.okrOneonOnePopupTable > table > tbody > tr > td:nth-child(1) {
	width: auto;
	text-align: left;
}
.okrApplicantListBox .okrOneonOnePopupTable > table > tbody > tr > td:nth-child(1) {
    text-align: center;
}
.okrOneonOnePopupTable > table > tbody > tr > td:nth-child(2) {
	/* width: 100px; */
	text-align: center;
}
.okrOneonOnePopupTable > table > tbody > tr > td:nth-child(3) {
	/* width: 70px; */
	text-align: center;
}
.okrOneonOnePopupTable > table > tbody > tr > td:nth-child(4) {
	/* width: 150px; */
	text-align: center;
}

.okrOneonOnePopupTable > table > tbody > tr:nth-child(even) > td {
    background-color: #f9f9f9;
}

a.oneViewLink {
    text-decoration: underline;
}

.okrModifyBtn {
    position: relative;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    margin-left: 5px;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    background-color: #00ACFF;
    border-radius: 50%;
    text-indent: -9999px;
    cursor: pointer;
}
.okrModifyBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 1rem;
    color: #fff;
    text-indent: 0;
    content: "\e91e";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.okrhomeworkBtn {
    position: relative;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    margin-left: 5px;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    background-color: #0AA5E8;
    border-radius: 50%;
    text-indent: -9999px;
    cursor: pointer;
}
.okrhomeworkBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 1rem;
    color: #fff;
    text-indent: 0;
    content: "\e903";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.okrDeleteBtn2 {
    position: relative;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    margin-left: 5px;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    background-color: #F24C00;
    border-radius: 50%;
    text-indent: -9999px;
    cursor: pointer;
}
.okrDeleteBtn2:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 1rem;
    color: #fff;
    text-indent: 0;
    content: "\e926";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.okrOneonOneItemList .inputArea {
	position: relative;
    display: block;
    width: 100%;
    height: 60px;
    line-height: 1.3;
    padding: 5px;
	font-size: 0.85rem;
	background-color: #fffff0;
    border: 1px solid #acacac;
    border-radius: 5px;
    box-sizing: border-box;
}
.okrOneonOneItemList .inputArea::-webkit-input-placeholder {
   line-height: 50px;
}

.okrOneonOneItemList .inputArea:-moz-placeholder { /* Firefox 18- */
   line-height: 50px;
}

.okrOneonOneItemList .inputArea::-moz-placeholder {  /* Firefox 19+ */
   line-height: 50px;
}

.okrOneonOneItemList .inputArea:-ms-input-placeholder {
   line-height: 50px;
}

/* calendar */
.okrDateTableBox {
}

.okrDateBox {
	position: relative;
	display: flex;
    flex-direction: column;
	top: auto;
	left: auto;
	width: auto;
	min-width: 500px;
	height: 100vh;
	padding: 10px;
	background-color: #fff;
	border: none;
	box-shadow: none;
	margin: 0;
	box-sizing: border-box;
}

.okrDateTableBox .okrDateTitle {
	position: relative;
	display: flex;
	align-items: center;
	height: 42px;
	font-size: 1rem;
	font-weight: bold;
	color: #2d2d2d;
	border-bottom: 1px solid #acacac;
	font-family: 'Lato', sans-serif;
}
.okrDateTableBox .okrDateTitle span {
	height: 42px;
	line-height: 42px;
	border-bottom: 3px solid #000;
}
.dateTopBox {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 20px auto 0;
	padding: 5px 3px;
	font-size: 0.75rem;
	background-color: #f0f0f0;
	border: 1px solid #acacac;
	border-radius: 42px;
}
.presentYearMonth {
	position: relative;
	margin: 0 20px;
	font-size: 2rem;
	font-weight: bold;
	color: #262626;
	font-family: 'Roboto', sans-serif;
}

.btnPrev {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 35px;
	height: 35px;
    margin: 0 3px;
    font-size: 0.8rem;
    color: #fff;
    background-color: #5595b0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
.btnPrev:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	font-size: 1rem;
	color: #fff;
	text-indent: 0;
	content:"\e910";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.btnNext {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 35px;
	height: 35px;
    margin: 0 3px;
    font-size: 0.8rem;
    color: #fff;
    background-color: #5595b0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
.btnNext:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	font-size: 1rem;
	color: #fff;
	text-indent: 0;
	content:"\e912";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.btnPrev span,.btnNext span {
	position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

.okrTextInput {
	position: relative;
	width: 120px;
	height: 35px;
	line-height: 35px;
	text-indent: 5px;
	background-color: #FFFCCC;
	border: 1px solid #dedede;
	border-radius: 5px;
	box-sizing: border-box;
}
.okrDateInput {
	position: relative;
    height: 34px;
	background-color: #f1fbff;
	border: 1px solid #acacac;
	border-radius: 5px;
	box-sizing: border-box;
}
.okrOneonOneItemList .okrTextInput,
.okrOneonOneItemList .okrDateInput {
    display: flex;
    flex-grow: 1;
}
.okrTextInput.W30P {
    margin-right: 0 !important;
    flex-grow: 0;
    width: 40px !important;
    text-indent: 0 !important;
}

.dateSampleBox {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 10px;
}
.dateSampleBox span {
	margin: 0 5px;
}
.passedDateSample {
	position: relative;
	font-size: 0.85rem;
	padding-left: 22px;
}
.passedDateSample:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	border: 2px solid #dedede;
	border-radius: 50%;
	content: "";
}

.selectDateSample {
	position: relative;
	font-size: 0.85rem;
	padding-left: 22px;
}
.selectDateSample:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	border: 2px solid #1899C7;
	border-radius: 50%;
	content: "";
}

.todayDateSample {
	position: relative;
	font-size: 0.85rem;
	padding-left: 22px;
}
.todayDateSample:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	border: 2px solid #ED1C24;
	border-radius: 50%;
	content: "";
}
/* 달력 */
.scheduleDateBox {
	position: relative;
	display: flex;
	width: 100%;
	height: 32px;
	margin-top: 10px;
	background: linear-gradient(#f9f9f9, #f0f0f0);
	border: 1px solid #dcdcdc;
	border-radius: 5px;
}
.scheduleDateItems {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 14.2857%;
	height: 32px;
	color: #979eaa;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
}

.scheduleListTable {
	position: relative;
	margin-top: 10px;
}

.scheduleListTable td {
	position: relative;
	width: 14%;
	height: 52px;
	line-height: 52px;
	text-align: center;
}
.selectedDateBox {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 42px;
    margin-top: 20px;
    padding: 0 20px;
    font-size: 16px;
    color: #000;
    background-color: #eefbff;
    border: 1px solid #acacac;
    border-radius: 42px;
}
.selectedDateBox span {
    margin: 0 2px;
}
.okrDateBox .okrBottomBtnBox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px 0;
    margin-top: auto;
}
.okrDateBox .okrBottomBtnBox button {
    margin: 0 2px;
}
.okrDateBox .okrApplyBtn,
.okrDateBox .okrCancelBtn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    margin: 2px 0;
    padding: 0 30px;
    font-size: 0.8rem;
    color: #fff;
    background-color: #ac5b3c;
    border: none;
    border-radius: 42px;
    cursor: pointer;
}
.okrDateBox .okrApplyBtn {
    color: #fff;
    background-color: #3c72fc;
}
.okrDateBox .okrCancelBtn {
    color: #2d2d2d;
    background-color: #fff;
    border: 1px solid #acacac;
}

/* applicant list */
.okrApplicantListBox {
    position: relative;
	display: block;
	top: auto;
	left: auto;
	width: auto;
	min-width: 768px;
	height: auto;
	padding: 10px;
	background-color: #fff;
	border: none;
	box-shadow: none;
	margin: 0;
	box-sizing: border-box;
}
.okrTopSearchBox {
    position: relative;
    display: flex;
    height: 32px;
    margin-bottom: 10px;
}
.okrTopSearchLeftBox,
.okrTopSearchRightBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
}
.okrTopSearchRightBox {
    margin-left: auto;
}
.okrApplicantListBox .okrBottomContentBox {
    min-height: calc(100vh - 35px);
}
.okrApplicantListBox .okrOneonOnePopupTable table {
    table-layout: fixed;
}

.okrApplicantListBox .okrPrintBtn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    margin: 2px 0;
    padding: 0 30px;
    font-size: 0.8rem;
    color: #fff;
    background-color: #353946;
    border: none;
    border-radius: 42px;
    cursor: pointer;
}

/* 체크박스 버튼 교체 */
.scheduleListTable input[type="checkbox"] {  /* 실제 체크박스는 화면에서 숨김 */
  position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip:rect(0,0,0,0);
   border: 0
}
.scheduleListTable input[type="checkbox"] + label {
	position: relative;
    display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-weight: bold;
	font-size: 1rem;
	color: #1899C7;
	font-family: 'Open Sans', sans-serif;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.scheduleListTable input[type="checkbox"]:disabled + label {
	position: relative;
    display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 1rem;
	color: #dedede;
	font-family: 'Open Sans', sans-serif;
	cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.scheduleListTable input[type="checkbox"] + label:before {  /* 가짜 체크박스 */
	position: absolute;
	z-index: 10;
	top: 50%;
    left: 50%;
    width: 42px; /* 체크박스의 너비를 지정 */
    height: 42px; /* 체크박스의 높이를 지정 */
    line-height: 42px; /* 세로정렬을 위해 높이값과 일치 */
	margin-left: -21px;
	margin-top: -21px;
    text-align: center;
    vertical-align: middle;
    border: 2px solid #1899C7;
    border-radius : 42px;
    content: '';
}
.scheduleListTable input[type="checkbox"]:disabled + label:before {  /* 가짜 체크박스 */
	position: absolute;
	z-index: 10;
    display: flex;
    width: 42px; /* 체크박스의 너비를 지정 */
    height: 42px; /* 체크박스의 높이를 지정 */
    line-height: 42px; /* 세로정렬을 위해 높이값과 일치 */
    text-align: center;
    vertical-align: middle;
    border: 2px solid #dedede;
    border-radius : 42px;
    content: '';
}

.scheduleListTable input[type="checkbox"]:checked + label { /* 체크박스를 체크했을때 */
	position: relative;
	z-index: 20;
    display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 1rem;
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.scheduleListTable input[type="checkbox"]:checked + label:before {  /* 체크박스를 체크했을때 */
  z-index: -1;
  content: '';
  color: #fff;
  text-shadow: 1px 1px #fff;
  background: #1899C7;
  border-color: #1899C7;
}

.scheduleListTable .on input[type="checkbox"] + label {
	position: relative;
    display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-weight: bold;
	font-size: 1rem;
	color: #ED1C24;
	font-family: 'Open Sans', sans-serif;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.scheduleListTable .on input[type="checkbox"] + label:before {  /* 가짜 체크박스 */
	position: absolute;
	z-index: 10;
	top: 50%;
    left: 50%;
    width: 42px; /* 체크박스의 너비를 지정 */
    height: 42px; /* 체크박스의 높이를 지정 */
    line-height: 42px; /* 세로정렬을 위해 높이값과 일치 */
	margin-left: -21px;
	margin-top: -21px;
    text-align: center;
    vertical-align: middle;
    border: 2px solid #ED1C24;
    border-radius : 42px;
    content: '';
}

.scheduleListTable .on input[type="checkbox"]:checked + label { /* 체크박스를 체크했을때 */
	position: relative;
	z-index: 20;
    display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 1rem;
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.scheduleListTable .on input[type="checkbox"]:checked + label:before {  /* 체크박스를 체크했을때 */
  z-index: -1;
  content: '';
  color: #fff;
  text-shadow: 1px 1px #fff;
  background: #ED1C24;
  border-color: #ED1C24;
}

/* OKR House page */
.houseContent {
	min-width: 1210px;
	background-color: #feffea;
}
.okrContentSearchHouseBox {
	position: relative;
	z-index: 10;
	display: inline-flex;
	justify-content: center;
    align-items: center;
	height: 32px;
	padding: 0 10px 0 22px;
	text-align: left;
	background: url("../images/bg/bg_line.png") repeat #f0f0f0;
	border: 1px solid #acacac;
	border-radius: 42px;
}
.okrContentSearchHouseBox:before {
	position: absolute;
	z-index: 10;
	top: 12px;
	left: 12px;
	width: 7px;
	height: 7px;
	text-align: center;
	background-color: #2b3887;
	border-radius: 50%;
	content: "";
}

.okrSelectHouseBox {
	height: 24px !important;
	margin: 0 5px;
}
.okrSearchHouseBtn {
	position: relative;
	justify-content: center;
	align-items: center;
	height: 24px;
	margin: 0 3px;
	padding: 0 15px;
	color: #fff;
	background-color: #2b3887;
	border-radius: 42px;
	cursor: pointer;
}
.okrPeriodBtn {
	position: relative;
	height: 24px;
	margin: 0 3px;
	justify-content: center;
	align-items: center;
	padding: 0 15px;
	color: #fff;
	background-color: #4A7BB1;
	border-radius: 42px;
	cursor: pointer;
}
.okrPrintBtn {
	position: relative;
    display: flex;
    justify-content: center;
	align-items: center;
	height: 32px;
	margin: 0 3px;
    padding: 0 30px;
	color: #fff;
	background-color: #2D3239;
	border-radius: 42px;
	cursor: pointer;
}

.okrHouseBox {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 150px;
}
.okrHouseTitle {
	position: relative;
	justify-content: center;
	align-items: center;
	height: 32px;
	margin-top: 10px;
	font-size: 1.2rem;
	font-weight: bold;
	color: #2b3887;
}
.objectiveNum {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 28px;
	color: #fff;
	background-color: #2b3887;
	border-radius: 32px;
	font-family: 'Roboto', sans-serif;
}
.okrHouseRewriteIcon {
	position: relative;
	justify-content: center;
	align-items: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	margin-left: 5px;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	color: #fff;
	background-color: #0774EE;
	border-radius: 50%;
	text-indent: -9999px;
	cursor: pointer;
}
.okrHouseRewriteIcon:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 1rem;
	color: #fff;
	text-indent: 0;
	content:"\e911";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.okrHouseDate {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 250px;
	height: 32px;
	margin: 10px auto 0;
	padding: 0 20px;
	font-size: 0.9rem;
	font-weight: bold;
	color: #F34911;
	background-color: #f9f9f9;
	border: 1px solid #acacac;
	border-radius: 32px;
	font-family: 'Roboto', sans-serif;
}

.okrHouseSlogan {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 32px;
	margin-top: 10px;
	font-size: 1.4rem;
	font-weight: bold;
	color: #2d2d2d;
}

.houseBox {
	position: absolute;
	z-index: 0;
	left: 50%;
	display: flex;
	justify-content: center;
	width: 1200px;
	height: 180px;
	margin-top: -40px;
	margin-left: -600px;
}
.houseBox:before {
	position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    text-align: center;
    border-top: 0 solid transparent;
    border-right: 600px solid transparent;
    border-bottom: 180px solid #fff;
    border-left: 600px solid transparent;
    text-indent: 0;
    content: "";
}
.houseBox:after {
	position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 1200px;
    height: 181px;
	border-bottom: 2px solid #acacac;
	text-indent: 0;
    content: "";
}
.houseBox span {
	position: relative;
	width: 1200px;
	height: 180px;
	text-indent: -9999px;
}
.houseBox span:before {
	position: absolute;
    z-index: 0;
    top: -87px;
    left: 200px;
    width: 285px;
    height: 625px;
    border-left: 2px solid #acacac;
    text-indent: 0;
    -webkit-transform: rotate( 73.4deg );
    -ms-transform: rotate( 73.4deg );
    transform: rotate( 73.4deg );
    content: "";
}
.houseBox span:after {
	    position: absolute;
    z-index: 0;
    top: -87px;
    right: 198px;
    width: 285px;
    height: 625px;
    border-left: 2px solid #acacac;
    text-indent: 0;
    -webkit-transform: rotate( 106.6deg );
    -ms-transform: rotate( 106.6deg );
    transform: rotate( 106.6deg );
    content: "";
}

.okrHouseContentBox {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	width: 1100px;
	height: 595px;
	margin-top: -11px;
	padding: 10px;
	background-color: #fff;
	border: 2px solid #acacac;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	box-sizing: border-box;
}

.okrHouseContentTopTitle {
	position: relative;
    display: flex;
	width: 100%;
	height: 55px;
    padding: 5px 5px 15px 5px;
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
    color: #000;
    background-color: #f0f0f0;
    border: 1px solid #acacac;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: #f0f0f0 3px 3px 3px;
}

.okrHouseNum {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 18px;
	margin-right: 5px;
	font-size: 0.95rem;
	color: #fff;
	background-color: #2b3887;
	border-radius: 32px;
	font-family: 'Roboto', sans-serif;
}

.okrHouseInTitleBox {
	position: relative;
}

.okrHouseInTitle {
	position: relative;
    display: flex;
}

.okrHouseInEx {
	position: relative;
    display: flex;
	font-size: 0.8rem;
	color: #9d9d9d;
}

.okrHouseContentTopBox {
    position: relative;
    display: flex;
    min-height: 42px;
    line-height: 1.5;
    margin-top: -10px;
    padding: 10px;
    text-align: left;
    font-size: 0.95rem;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 10px;
}

.okrDashTable {
	position: relative;
	display:block;
	width: 100%;
	background-color: #f9f9f9;
	border-top: 1px solid #acacac;
    border-left: 1px solid #acacac;
}

.okrDashTable > table > tbody > tr > td {
    position: static;
	width: 25%;
    height: 32px;
    line-height: 1.5;
    padding: 5px;
    font-size: 0.75rem;
    color: #2d2d2d;
	border-right: 1px solid #acacac;
    border-bottom: 1px solid #acacac;
}

.dashListNum {
	position: relative;
	display: inline-block;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align:center;
	color: #fff;
	background-color: #000;
	border-radius: 50%;
	font-family: "Roboto", sans-serif;
}

ul.okrMiddlelist {
	width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	box-sizing: border-box;
}

ul.okrMiddlelist .item {
	position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 30%;
    padding: 0 5px;
    box-sizing: border-box;
}

ul.okrMiddlelist .item:first-child {
	padding-left: 0;
}
ul.okrMiddlelist .item:last-child {
	padding-right: 0;
}

.okrContentMiddleTitle {
	position: relative;
    display: flex;
    width: 100%;
    height: 55px;
	margin-top: 10px;
    padding: 5px 5px 15px 5px;
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
    color: #000;
	background-color: #eefdff;
    border: 1px solid #acacac;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: #f0f0f0 3px 3px 3px;
}

.okrContentMiddleBox {
    position: relative;
    display: block;
    height: 200px;
    margin-top: -10px;
    padding: 10px;
    text-align: left;
    font-size: 0.95rem;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 10px;
}
.item:nth-child(1) .okrContentMiddleBoxOn {
    position: absolute;
	z-index: 20;
	top: 65px;
	left: 0;
	right: 5px;
	height: auto;
	min-height: 300px;
}
.item:nth-child(2) .okrContentMiddleBoxOn {
    position: absolute;
	z-index: 20;
	top: 65px;
	left: 5px;
	right: 5px;
	height: auto;
	min-height: 300px;
}
.item:nth-child(3) .okrContentMiddleBoxOn {
    position: absolute;
	z-index: 20;
	top: 65px;
	left: 5px;
	right: 0;
	height: auto;
	min-height: 300px;
}
.okrContentMiddleBoxOn:after {
	display: block;
	visibility: hidden;
	clear:both;
	content: "";
}

ul.okrHouseMiddleInList {
	position: relative;
	display: block;
	height: 180px;
	padding-left: 20px;
	overflow-y: auto;
}
ul.okrHouseMiddleInList li {
	line-height:1.5;
	margin: 7px 0;
	font-size: 0.8rem;
	list-style : square !important;
}
.okrHouseOn {
	height: auto !important;
	overflow-y: visible !important;
}

.okrHouseMiddleTable {
	position: relative;
	display:block;
	height: 178px;
	overflow-y: auto;
	border-top: 1px solid #acacac;
}
.okrHouseMiddleTable > table > tbody > tr > th {
    position: relative;
	width: 12%;
    height: 32px;
	text-align: center;
    font-size: 1rem;
	font-weight: bold;
    color: #449CE1;
	border-bottom: 1px solid #acacac;
	font-family: 'Lato', sans-serif;
}
.okrHouseMiddleTable > table > tbody > tr > td {
    position: relative;
	width: 88%;
    height: 32px;
    line-height: 1.5;
    padding: 5px;
    font-size: 0.8rem;
    color: #2d2d2d;
    border-bottom: 1px solid #acacac;
}

.okrHouseContentBottomBox {
	position: relative;
}

.okrHouseContentBottomTitle {
	position: relative;
    display: flex;
	width: 100%;
	height: 55px;
	margin-top: 10px;
    padding: 5px 5px 15px 5px;
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
    color: #000;
    background-color: #e8ffde;
    border: 1px solid #acacac;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: #f0f0f0 3px 3px 3px;
}

.okrHouseContentBottomInBox {
    position: relative;
    display: flex;
    height: 160px;
    line-height: 1.5;
    margin-top: -10px;
    padding: 10px;
    text-align: left;
    font-size: 0.95rem;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 10px;
}

.okrHouseContentBottomInBoxOn {
    position: absolute;
	z-index: 9;
	top: 65px;
	left: 0;
	right: 5px;
	height: auto;
	min-height: 100px;
}

ul.okrHouseBottomInList {
	position: relative;
	display: block;
	width: 100%;
	height: 140px;
	padding-left: 20px;
	overflow-y: auto;
}
ul.okrHouseBottomInList li {
	line-height:1.5;
	margin: 7px 0;
	font-size: 0.8rem;
	list-style : square !important;
}

.okrHouseBottomOn {
	height: auto !important;
	overflow-y: visible !important;
}

/* OKR Main page */
.okrMain {
	min-width: 1200px;
}

.okrMain .okrSloganPeriodSection:first-child {
	margin-top: 0;
}

/* OKR okr page */
.sloganContent {
	min-width: 1240px;
}

.okrContentSearchOkrBox {
	position: relative;
	z-index: 10;
	display: inline-flex;
	justify-content: center;
    align-items: center;
	height: 32px;
	padding: 0 10px 0 22px;
	text-align: left;
	background: url("../images/bg/bg_line.png") repeat #f0f0f0;
	border: 1px solid #acacac;
	border-radius: 42px;
}
.okrContentSearchOkrBox:before {
	position: absolute;
	z-index: 10;
	top: 12px;
	left: 12px;
	width: 7px;
	height: 7px;
	text-align: center;
	background-color: #2b3887;
	border-radius: 50%;
	content: "";
}

.okrSloganBox {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100px;
}
.sloganHouseBox {
	position: absolute;
	z-index: 0;
	left: 50%;
	display: flex;
	justify-content: center;
	width: 1200px;
	height: 180px;
	margin-top: -40px;
	margin-left: -600px;
}
.sloganHouseBox:before {
	position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    text-align: center;
    border-top: 0 solid transparent;
    border-right: 600px solid transparent;
    border-bottom: 90px solid #4190e8;
    border-left: 600px solid transparent;
    text-indent: 0;
    content: "";
}
/*
.sloganHouseBox:after {
	position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 1200px;
    height: 181px;
	border-bottom: 2px solid #acacac;
	text-indent: 0;
    content: "";
}
*/
.sloganHouseBox span {
	position: relative;
	width: 1200px;
	height: 180px;
	text-indent: -9999px;
}
/*
.sloganHouseBox span:before {
	position: absolute;
    z-index: 0;
    top: -87px;
    left: 200px;
    width: 285px;
    height: 625px;
    border-left: 2px solid #acacac;
    text-indent: 0;
    -webkit-transform: rotate( 73.4deg );
    -ms-transform: rotate( 73.4deg );
    transform: rotate( 73.4deg );
    content: "";
}
.sloganHouseBox span:after {
	    position: absolute;
    z-index: 0;
    top: -87px;
    right: 198px;
    width: 285px;
    height: 625px;
    border-left: 2px solid #acacac;
    text-indent: 0;
    -webkit-transform: rotate( 106.6deg );
    -ms-transform: rotate( 106.6deg );
    transform: rotate( 106.6deg );
    content: "";
}
*/

.okrSloganTitle {
	position: relative;
	justify-content: center;
	align-items: center;
	height: 32px;
	margin-top: 10px;
	font-size: 1.2rem;
	font-weight: bold;
	color: #2b3887;
}

.sloganLine {
	color: #fff;
	border-bottom: 3px solid #fff;
}

.okrSloganContent {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1220px;
	height: 52px;
	margin: 8px auto 0;
	font-size: 1.4rem;
	font-weight: bold;
	color: #2d2d2d;
	background-color: #fff;
	border: 3px solid #4190e8;
	border-radius: 15px;
}

.okrSloganRewriteIcon {
	position: relative;
	justify-content: center;
	align-items: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	margin-left: 5px;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	color: #fff;
	background-color: #5ec5d0;
	border-radius: 50%;
	text-indent: -9999px;
	cursor: pointer;
}
.okrSloganRewriteIcon:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 1rem;
	color: #fff;
	text-indent: 0;
	content:"\e911";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.okrContentSloganPeriodTitle {
	position: relative;
	display: block;
	height: 32px;
	line-height: 32px;
	padding-left: 32px;
	text-align: left;
	font-size: 0.85rem;
	color: #2d2d2d;
	background-color: #f9f9f9;
	border: 1px solid #acacac;
	border-radius: 42px;
}
.okrContentSloganPeriodTitle:before {
	position: absolute;
	z-index: 10;
	top: 11px;
	left: 11px;
	width: 10px;
	height: 10px;
	line-height: 32px;
	text-align: center;
	background-color: #2d2d2d;
	border-radius: 50%;
	content: "";
}

.okrDateLeft {
	color: #36bfc5;
	font-weight: bold;
}

.okrSloganPeriodSection {
	margin-top: 20px;
}

.okrSloganPeriodBox {
}

ul.okrSloganPeriodList {
	width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	box-sizing: border-box;
}

ul.okrSloganPeriodList .item {
	position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 20%;
    padding: 0 5px;
    box-sizing: border-box;
}

ul.okrSloganPeriodList .item:first-child {
	padding-left: 0;
}
ul.okrSloganPeriodList .item:last-child {
	padding-right: 0;
}

.okrSloganPeriodTitle {
	position: relative;
    display: flex;
    width: 100%;
    height: 55px;
	margin-top: 10px;
    padding: 5px 5px 15px 5px;
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
    color: #000;
	background-color: #eefdff;
    border: 1px solid #acacac;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: #f0f0f0 3px 3px 3px;
}

.okrSloganPeriodListBox {
    position: relative;
    display: block;
    height: 150px;
    margin-top: -10px;
    padding: 10px;
    text-align: left;
    font-size: 0.95rem;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 10px;
    overflow-y: auto;
}
.okrSloganPeriodListBox p {
	font-size: 0.85rem;
	line-height: 1.5;
}
.item:nth-child(1) .okrSloganPeriodListBoxOn {
    position: absolute;
	z-index: 99;
	top: 65px;
	left: 0;
	right: 5px;
	height: auto;
	min-height: 150px;
}
.item:nth-child(2) .okrSloganPeriodListBoxOn {
    position: absolute;
	z-index: 99;
	top: 65px;
	left: 5px;
	right: 5px;
	height: auto;
	min-height: 150px;
}
.item:nth-child(3) .okrSloganPeriodListBoxOn {
    position: absolute;
	z-index: 99;
	top: 65px;
	left: 5px;
	right: 5px;
	height: auto;
	min-height: 150px;
}
.item:nth-child(4) .okrSloganPeriodListBoxOn {
    position: absolute;
	z-index: 99;
	top: 65px;
	left: 5px;
	right: 0;
	height: auto;
	min-height: 150px;
}
.okrSloganPeriodListBoxOn:after {
	display: block;
	visibility: hidden;
	clear:both;
	content: "";
}

ul.okrSloganPeriodInList {
	position: relative;
	display: block;
	height: 130px;
	padding-left: 20px;
	/* overflow-y: auto; */
}
ul.okrSloganPeriodInList li {
	line-height:1.5;
	margin: 7px 0;
	font-size: 0.8rem;
	list-style : disc !important;
}

.okrSloganOn {
	height: auto !important;
	overflow-y: visible !important;
}

.okrSloganPeriodTable {
	position: relative;
	display:block;
	height: 130px;
	overflow-y: auto;
	border-top: 1px solid #dedede;
}
.okrSloganPeriodTable > table > tbody > tr > td:first-child {
    position: relative;
	/* width: 88%; */
    height: 32px;
	text-align: left;
    font-size: 0.8rem;
    color: #2d2d2d;
	border-bottom: 1px solid #dedede;
}
.okrSloganPeriodTable > table > tbody > tr > td:last-child {
    position: relative;
	/* width: 12%; */
    height: 32px;
    line-height: 1.5;
    padding: 0 5px;
    font-size: 0.8rem;
    color: #2d2d2d;
    border-bottom: 1px solid #dedede;
	font-family: 'Lato', sans-serif;
}
.okrSloganPeriodTable > table > tbody > tr:nth-child(even) > td {
    background-color: #f9f9f9;
}

.okrSloganInTitleBox {
	position: relative;
	display: flex;
	align-items: center;
}

.okrSloganInTitle {
	position: relative;
    display: flex;
	margin-left: 10px;
}

.leaderBox {
	font-size: 0.8rem;
	border: 1px solid #dedede;
	border-radius: 10px;
	margin-bottom: 5px;
}
.leaderBox:last-child {
	margin-bottom: 0;
}
.leaderName {
	display: block;
	line-height: 1.5;
	padding: 5px;
	text-align: left;
	background-color: #fffcd7;
	border-bottom: 1px solid #dedede;
	border-top-left-radius: 9px;
	border-top-right-radius: 9px;
}
.teamName {
	display: block;
	line-height: 1.5;
	padding: 5px;
	text-align: left;
}

ul.okrSloganPointList {
	width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	box-sizing: border-box;
}

ul.okrSloganPointList .item {
	position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 40%;
    padding: 0 5px;
    box-sizing: border-box;
}

ul.okrSloganPointList .item:first-child {
	padding-left: 0;
}
ul.okrSloganPointList .item:last-child {
	padding-right: 0;
}

ul.okrSloganPointList .item:nth-child(1) .okrSloganPeriodListBoxOn {
    position: absolute;
	z-index: 10;
	top: 55px;
	left: 0;
	right: 5px;
	height: auto;
	min-height: 150px;
}
ul.okrSloganPointList .item:nth-child(2) .okrSloganPeriodListBoxOn {
    position: absolute;
	z-index: 10;
	top: 55px;
	left: 5px;
	right: 0;
	height: auto;
	min-height: 150px;
}


ul.okrSloganPointList .okrSloganPeriodTitle {
	position: relative;
    display: flex;
    width: 100%;
    height: 55px;
	margin-top: 0;
    padding: 5px 5px 15px 5px;
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
    color: #000;
	background-color: #f3f3f3;
    border: 1px solid #acacac;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: #f0f0f0 3px 3px 3px;
}
 ul.okrSloganPointList .okrSloganPeriodTitle:before {
	position: absolute;
    z-incex: 10;
    top: 12px;
    left: 10px;
    width: 6px;
    height: 20px;
    background-color: #000;
    border-radius: 32px;
    content: "";
}

ul.okrSloganPointList .okrSloganInTitle {
	position: relative;
    display: flex;
	margin-left: 20px;
}

/* OKR okr pie chart 수정 */
.okrSloganPeriodTable .chart {
	position: relative;
	display: inline-block;
	width: 35px;
	height: 35px;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
}
.okrSloganPeriodTable .percent {
	height: 35px;
	line-height: 35px;
	font-size: 0.6rem;
}
.okrSloganPeriodTable .chart canvas {
	width: 35px !important;
    height: 35px !important;
}

/* OKR report page */
.okrMain {
	min-width: 1200px;
}

.okrReportSection {
	margin-top: 20px;
}

.okrContentSearchReportBox {
	position: relative;
	z-index: 10;
	display: flex;
	justify-content: flex-start;
    align-items: center;
	width: 100%;
	height: 42px;
	padding: 0 10px 0 32px;
	text-align: left;
	background: url("../images/bg/bg_line.png") repeat #f0f0f0;
	border: 1px solid #acacac;
	border-radius: 42px;
}
.okrContentSearchReportBox:before {
	position: absolute;
	z-index: 10;
	top: 17px;
	left: 17px;
	width: 7px;
	height: 7px;
	text-align: center;
	background-color: #2b3887;
	border-radius: 50%;
	content: "";
}

.okrContentReportPeriodTitle {
	position: relative;
	display: block;
	height: 32px;
	line-height: 32px;
	padding-left: 32px;
	text-align: left;
	font-size: 0.85rem;
	color: #2d2d2d;
	background-color: #f9f9f9;
	border: 1px solid #acacac;
	border-radius: 42px;
}
.okrContentReportPeriodTitle:before {
	position: absolute;
	z-index: 10;
	top: 11px;
	left: 11px;
	width: 10px;
	height: 10px;
	line-height: 32px;
	text-align: center;
	background-color: #2d2d2d;
	border-radius: 50%;
	content: "";
}

.okrReportListBox {
	margin-top: 10px;
}
.okrReportListBox:first-child {
	margin-top: 0;
}

ul.okrReportList {
	width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	box-sizing: border-box;
}

ul.okrReportList .item {
	position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 30%;
    padding: 0 5px;
    box-sizing: border-box;
}

ul.okrReportList .item:first-child {
	padding-left: 0;
}
ul.okrReportList .item:last-child {
	padding-right: 0;
}

.okrMoreBtnBox {
	position: relative;
	margin-left: auto;
}

.okrMoreShowBtn {
    position: relative;
	width: 60px;
	height: 32px;
    margin: 0 5px;
    color: #2d2d2d;
    background-color: #fff;
	border: 1px solid #acacac;
    border-radius: 32px;
    cursor: pointer;
}
.okrMoreShowBtn:before {
	position: absolute;
    z-index: 10;
    top: 5px;
    left: 0px;
	width: 100%;
    font-size: 1.7rem;
    content: "+";
}
.okrMoreHideBtn {
    position: relative;
	width: 60px;
	height: 32px;
    margin: 0 5px;
	font-size: 2.2rem;
    color: #2d2d2d;
    background-color: #fff;
	border: 1px solid #acacac;
    border-radius: 32px;
    cursor: pointer;
	display: none;
}
.okrMoreHideBtn:before {
	position: absolute;
    z-index: 10;
    top: 3px;
    left: 0px;
	width: 100%;
	font-size: 2.3rem;
	content: "-";
}

.okrMoreShowBtn span, .okrMoreHideBtn span {
	position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

ul.okrReportBottomList {
	width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	box-sizing: border-box;
}

ul.okrReportBottomList .item {
	position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 30%;
    padding: 0 5px;
    box-sizing: border-box;
}

ul.okrReportBottomList .item:first-child {
	padding-left: 0;
}
ul.okrReportBottomList .item:last-child {
	padding-right: 0;
}

.okrReportTitle {
	position: relative;
    display: flex;
    width: 100%;
    height: 55px;
    padding: 5px 5px 15px 5px;
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
    color: #000;
	background-color: #fff9e7;
    border: 1px solid #acacac;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: #f0f0f0 3px 3px 3px;
}

.okrReportPlanTitle {
	position: relative;
    display: flex;
    width: 100%;
    height: 55px;
	margin-top: 10px;
    padding: 5px 5px 15px 15px;
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
    color: #000;
	background-color: #f9f9f9;
    border: 1px solid #acacac;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: #f0f0f0 3px 3px 3px;
}
.okrReportPlanTitle:before {
    position: absolute;
    z-index: 10;
    top: 14px;
    left: 10px;
    width: 6px;
    height: 16px;
    background-color: #000;
    border-radius: 32px;
    content: "";
}

.okrReportPlanTitle:first-child {
	margin-top: 0;
}

.okrReportRewriteIcon {
	position: relative;
	justify-content: center;
	align-items: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	margin-left: 5px;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	color: #fff;
	background-color: #e8bb56;
	border-radius: 50%;
	text-indent: -9999px;
	cursor: pointer;
}
.okrReportRewriteIcon:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 1rem;
	color: #fff;
	text-indent: 0;
	content:"\e911";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.okrReportInListBox {
    position: relative;
    display: block;
    height: 150px;
    margin-top: -10px;
    padding: 10px;
    text-align: left;
    font-size: 0.95rem;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 10px;
    overflow-y: auto;
}
.okrReportInListBox p {
	font-size: 0.85rem;
	line-height: 1.5;
}
.item:nth-child(1) .okrReportInListBoxOn {
    position: absolute;
	z-index: 99;
	top: 55px;
	left: 0;
	right: 5px;
	height: auto;
	min-height: 150px;
}
.item:nth-child(2) .okrReportInListBoxOn {
    position: absolute;
	z-index: 10;
	top: 55px;
	left: 5px;
	right: 5px;
	height: auto;
	min-height: 150px;
}
.item:nth-child(3) .okrReportInListBoxOn {
    position: absolute;
	z-index: 10;
	top: 55px;
	left: 5px;
	right: 0;
	height: auto;
	min-height: 150px;
}
.okrReportInListBoxOn:after {
	display: block;
	visibility: hidden;
	clear:both;
	content: "";
}

ul.okrReportBottomList .item:nth-child(1) .okrReportInListBoxOn {
    position: absolute;
	z-index: 10;
	top: 55px;
	left: 0;
	right: 5px;
	height: auto;
	min-height: 150px;
}
ul.okrReportBottomList .item:nth-child(2) .okrReportInListBoxOn {
    position: absolute;
	z-index: 10;
	top: 55px;
	left: 5px;
	right: 0;
	height: auto;
	min-height: 150px;
}

ol.okrReportInList {
	position: relative;
	display: block;
	height: 130px;
	padding-left: 20px;
	/* overflow-y: auto; */
}
ol.okrReportInList li {
	line-height:1.5;
	margin: 7px 0;
	font-size: 0.8rem;
	list-style : decimal !important;
}

.okrReportOn {
	height: auto !important;
	overflow-y: visible !important;
}

.okrReportListTable {
	position: relative;
	display:block;
	height: 130px;
	overflow-y: auto;
	border-top: 1px solid #dedede;
}
.okrReportListTable > table > tbody > tr > td:first-child {
    position: relative;
	/* width: 88%; */
    height: 32px;
	text-align: left;
    font-size: 0.8rem;
    color: #2d2d2d;
	border-bottom: 1px solid #dedede;
}
.okrReportListTable > table > tbody > tr > td:last-child {
    position: relative;
	/* width: 12%; */
    height: 32px;
    line-height: 1.5;
    padding: 0 5px;
    font-size: 0.8rem;
    color: #2d2d2d;
    border-bottom: 1px solid #dedede;
	font-family: 'Lato', sans-serif;
}
.okrReportListTable > table > tbody > tr:nth-child(even) > td {
    background-color: #f9f9f9;
}

.okrReportInTitleBox {
	position: relative;
	display: flex;
	align-items: center;
}

.okrReportInTitle {
	position: relative;
    display: flex;
	margin-left: 10px;
}

.okrAchievementLevelBox {
    position: relative;
    display: flex;
    min-height: 42px;
    line-height: 1.5;
    margin-top: 10px;
    padding: 10px 20px;
    text-align: left;
    font-size: 0.95rem;
    background-color: #fffed6;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 10px;
}

.runnerIcon {
	position: relative;
	width: 38px;
	height: 38px;
}
.runnerIcon:before {
    position: absolute;
    z-index: 10;
	display:flex;
	justify-content: center;
	align-items: center;
    width: 38px;
    height: 38px;
    font-size: 2.5rem;
    color: #2d2d2d;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.runnerIcon:last-child {
	margin-left: auto;
}

.achievementLineBox {
	position: relative;
	display: flex;
	flex-grow: 1;
	flex-wrap: wrap;
    justify-content: space-between;
	width: 100%;
	height: 38px;
	margin: 0 15px;
	box-sizing: border-box;
}
.achievementLineBox:before {
	position: absolute;
    z-index: 10;
	top: 18px;
	width: 100%;
	height: 3px;
	border-top: 3px solid #2d2d2d;
	content: "";
}

.achieveItems {
	position: relative;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 38px;
	height: 38px;
    padding-right: 5px;
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing: -0.2rem;
	background-color: #fff;
	border: 3px solid #000;
	border-radius: 50%;
	font-family: 'Roboto', sans-serif;
}

.achieveItems:first-child {
	margin-left: 20px;
}
.achieveItems:last-child {
	margin-right: 20px;
}

.achieveItems.on {
	color: #fff;
	background-color: #5ec5d0;
	border: 3px solid #4190e8;
}

.okrAchievementPlanBox {
	position: relative;
    display: flex;
	flex-direction: column;
	margin-top: 20px;
}
.okrAchievementPlanTitle {
    position: relative;
	z-index: 10;
    display: flex;
	justify-content: flex-start;
	align-items: center;
    height: 42px;
	margin: -1px;
    padding-left: 32px;
    font-size: 1rem;
	font-weight: bold;
    color: #2d2d2d;
    background-color: #efffea;
    border: 1px solid #acacac;
	border-radius: 42px;
	font-family: 'Roboto', sans-serif;
}
.okrAchievementPlanTitle:before {
    position: absolute;
    z-index: 10;
    top: 18px;
    left: 18px;
    width: 5px;
    height: 5px;
    background-color: #2d2d2d;
    border-radius: 50%;
    content: "";
}

.okrAchievementPlanTitle2 {
    position: relative;
	z-index: 10;
    display: flex;
	justify-content: flex-start;
	align-items: center;
    height: 42px;
	margin: -1px;
    padding-left: 32px;
    font-size: 1rem;
	font-weight: bold;
    color: #2d2d2d;
    background-color: #eaf8ff;
    border: 1px solid #acacac;
	border-radius: 42px;
	font-family: 'Roboto', sans-serif;
}
.okrAchievementPlanTitle2:before {
    position: absolute;
    z-index: 10;
    top: 18px;
    left: 18px;
    width: 5px;
    height: 5px;
    background-color: #2d2d2d;
    border-radius: 50%;
    content: "";
}

.okrAchievementPlanAreaBox {
	position: relative;
	margin-top: -41px;
	padding: 10px;
	padding-top: 52px;
	background-color: #f9f9f9;
	border: 1px solid #acacac;
    border-radius: 10px;
    border-top-left-radius: 22px;
	border-top-right-radius: 22px;
	box-sizing: border-box;
	overflow:visible !important;
	display: none;
}

.okrAchievementPlanAreaBox .inputArea {
	position: relative;
    display: block;
    width: 100%;
    height: 142px;
    line-height: 1.3;
    padding: 5px;
	font-size: 0.85rem;
	background-color: #fffff0;
    border: 1px solid #acacac;
    border-radius: 5px;
    box-sizing: border-box;
}
.okrAchievementPlanAreaBox .inputArea::-webkit-input-placeholder {
   line-height: 135px;
}

.okrAchievementPlanAreaBox .inputArea:-moz-placeholder { /* Firefox 18- */
   line-height: 135px;
}

.okrAchievementPlanAreaBox .inputArea::-moz-placeholder {  /* Firefox 19+ */
   line-height: 135px;
}

.okrAchievementPlanAreaBox .inputArea:-ms-input-placeholder {
   line-height: 135px;
}

.okrReportAreaTitle {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
        background: url(../images/bg/bg_line.png) repeat #31435A;
    border: none;
    border-radius: 42px;
    font-family: 'Roboto', sans-serif;
}

.okrSelectReportBox {
	height: 32px !important;
	margin: 0 5px;
	font-size: 0.85rem;
}

.okrSaveBtn {
    position: relative;
    justify-content: center;
    align-items: center;
    height: 32px;
    margin: 0 3px;
    padding: 0 20px;
	font-size: 0.85rem;
    color: #fff;
    background-color: #2D3239;
    border-radius: 42px;
    cursor: pointer;
}
.okrCommentTitle {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 42px;
	margin-top: 10px;
	padding-left: 10px;
	font-size: 1.2rem;
	font-weight: bold;
	color: #2d2d2d;
	background-color: #fff8e4;
	border: 1px solid #acacac;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	font-family: 'Roboto', sans-serif;
}
.okrCommentTable {
	position: relative;
	display: block;
	margin-top: -1px;
}
.okrCommentTable table {
	border-top: 1px solid #acacac;
	border-right: 1px solid #acacac;
}
.okrCommentTable > table > thead > tr > th {
	height: 32px;
	line-height: 32px;
	font-size: 0.85rem;
	text-align: center;
	color: #2d2d2d;
	background-color: #f9f9f9;
	border-bottom: 1px solid #acacac;
	border-left: 1px solid #acacac;
}
.okrCommentTable > table > thead > tr > th:nth-child(1) {
	width: 63%;
}
.okrCommentTable > table > thead > tr > th:nth-child(2) {
	width: 20%;
}
.okrCommentTable > table > thead > tr > th:nth-child(3) {
	width: 7%;
}
.okrCommentTable > table > thead > tr > th:nth-child(4) {
	width: 10%;
}

.okrCommentTable > table > tbody > tr > td {
	height: 32px;
	line-height: 1.3;
	padding: 5px;
	font-size: 0.75rem;
	text-align: center;
	color: #2d2d2d;
	background-color: #fff;
	border-bottom: 1px solid #acacac;
	border-left: 1px solid #acacac;
}
.okrCommentTable > table > tbody > tr > td:nth-child(1) {
	/* width: 63%; */
	text-align: left;
}
/*
.okrCommentTable > table > tbody > tr > td:nth-child(2) {
	width: 20%;
}
.okrCommentTable > table > tbody > tr > td:nth-child(3) {
	width: 7%;
}
.okrCommentTable > table > tbody > tr > td:nth-child(4) {
	width: 10%;
}
*/

.okrReportInputIcon {
    position: relative;
    justify-content: center;
    align-items: center;
    flex: 0 0 32px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    margin-left: 5px;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    background-color: #2D3239;
    border-radius: 50%;
    text-indent: -9999px;
    cursor: pointer;
}
.okrReportInputIcon:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 0.85rem;
    color: #fff;
    text-indent: 0;
    content: "\e908";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

/* OKR project page */
.okrProjectTopBox {
    position: relative;
    display: flex;
	justify-content: flex-start;
	align-items: center;
    height: 42px;
	margin: -1px;
    padding-left: 42px;
    font-size: 1.2rem;
	font-weight: bold;
    color: #2d2d2d;
    background-color: #f9f9f9;
    border: 1px solid #acacac;
	border-radius: 42px;
	font-family: 'Roboto', sans-serif;
}
.okrProjectTopBox:before {
    position: absolute;
    z-index: 10;
    top: 15px;
    left: 15px;
    width: 10px;
    height: 10px;
    line-height: 42px;
    text-align: center;
    background-color: #2d2d2d;
    border-radius: 50%;
    content: "";
}

.okrSelectProjectBox {
	height: 32px !important;
	margin: 0 5px;
	font-size: 0.85rem;
}

.okrSearchProjectBtn {
    position: relative;
    justify-content: center;
    align-items: center;
    height: 32px;
    margin: 0 3px;
    padding: 0 20px;
	font-size: 0.85rem;
    color: #fff;
    background-color: #2b3887;
    border-radius: 42px;
    cursor: pointer;
}

.okrProjectBtn {
    position: relative;
	justify-content: center;
    align-items: center;
    height: 32px;
    margin: 0 3px;
    padding: 0 20px;
	font-size: 0.85rem;
    color: #fff;
    background-color: #2D3239;
    border-radius: 42px;
    cursor: pointer;
}

.okrProjectContentBox {
	margin-top: 20px;
}

.okrProjectContentTopTitle {
	position: relative;
    display: flex;
	justify-content: center;
	align-items: center;
    height: 55px;
	margin-top: 10px;
    padding: 5px 5px 15px 5px;
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
    color: #000;
	background-color: #eff7ff;
    border: 1px solid #acacac;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: #f0f0f0 3px 3px 3px;
}

.okrProjectInTitleBox {
	position: relative;
	display: flex;
	align-items: center;
}

.okrProjectInTitle {
	position: relative;
    display: flex;
	margin-left: 10px;
}

.okrProjectRewriteIcon {
    position: relative;
    justify-content: center;
    align-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    margin-left: 5px;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    background-color: #83c745;
    border-radius: 50%;
    text-indent: -9999px;
    cursor: pointer;
}
.okrProjectRewriteIcon:before {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 1rem;
	color: #fff;
	text-indent: 0;
	content:"\e911";
	font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.okrProjectContentTopBox {
    position: relative;
    display: flex;
	justify-content: center;
	align-items: center;
    height: 52px;
    margin-top: -10px;
    padding: 10px;
    text-align: left;
    font-size: 0.95rem;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 10px;
}

.projectTopItem {
	font-size: 1rem;
	font-weight: bold;
	margin: 0 20px;
}

.okrProjectNum {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 18px;
	margin-right: 5px;
	font-size: 0.85rem;
	color: #fff;
	background-color: #2b3887;
	border-radius: 32px;
	font-family: 'Roboto', sans-serif;
}

.agendaListNum {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	color: #fff;
	background-color: #000;
	border-radius: 50%;
	font-family: "Roboto", sans-serif;
}


.okrProjectMiddleBox {
}

ul.okrProjectList {
	width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	box-sizing: border-box;
}

ul.okrProjectList .item {
	position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 30%;
    padding: 0 5px;
    box-sizing: border-box;
}

ul.okrProjectList .item:first-child {
	padding-left: 0;
}
ul.okrProjectList .item:last-child {
	padding-right: 0;
}

.okrProjectMiddleTitle {
	position: relative;
    display: flex;
	justify-content: center;
    width: 100%;
    height: 55px;
	margin-top: 10px;
    padding: 5px 5px 15px 5px;
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
    color: #000;
	background-color: #f0ffec;
    border: 1px solid #acacac;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: #f0f0f0 3px 3px 3px;
}

.okrProjectInTitleBox {
	position: relative;
	display: flex;
	align-items: center;
}

.okrProjectInTitle {
	position: relative;
    display: flex;
	margin-left: 10px;
}

.okrProjectInListBox {
    position: relative;
    display: block;
    height: 100px;
    margin-top: -10px;
    padding: 10px;
    text-align: left;
    font-size: 0.95rem;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 10px;
}
.okrProjectInListBox p {
	font-size: 0.85rem;
	line-height: 1.5;
}
.item:nth-child(1) .okrProjectInListBoxOn {
    position: absolute;
	z-index: 20;
	top: 65px;
	left: 0;
	right: 5px;
	height: auto;
	min-height: 100px;
}
.item:nth-child(2) .okrProjectInListBoxOn {
    position: absolute;
	z-index: 20;
	top: 65px;
	left: 5px;
	right: 0;
	height: auto;
	min-height: 100px;
}
.okrProjectInListBoxOn:after {
	display: block;
	visibility: hidden;
	clear:both;
	content: "";
}

ol.okrProjectInList {
	position: relative;
	display: block;
	height: 80px;
	padding-left: 20px;
	overflow-y: auto;
}
ol.okrProjectInList li {
	line-height:1.5;
	margin: 7px 0;
	font-size: 0.8rem;
	list-style : decimal !important;
}

.okrProjectOn {
	height: auto !important;
	overflow-y: visible !important;
}

.okrProjectContentBottomBox {
	position: relative;
}

.okrProjectContentBottomTitle {
	position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 55px;
    margin-top: 10px;
    padding: 5px 5px 15px 5px;
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
    color: #000;
    background-color: #fffaec;
    border: 1px solid #acacac;
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: #f0f0f0 3px 3px 3px;
}

.okrProjectInBottomBox {
    position: relative;
    display: flex;
    height: 100px;
    line-height: 1.5;
    margin-top: -10px;
    padding: 10px;
    text-align: left;
    font-size: 0.95rem;
    background-color: #fff;
    border: 1px solid #acacac;
    box-shadow: #f0f0f0 3px 3px 3px;
    border-radius: 10px;
}

ul.okrProjectBottomInList {
	position: relative;
	display: block;
	width: 100%;
	height: 80px;
	padding-left: 20px;
	overflow-y: auto;
}
ul.okrProjectBottomInList li {
	line-height:1.5;
	margin: 7px 0;
	font-size: 0.8rem;
	list-style : disc !important;
}

.okrProjectInBottomBoxOn {
    position: absolute;
	z-index: 20;
	top: 55px;
	left: 0;
	right: 0;
	height: auto;
	min-height: 100px;
}

.okrProjectBottomOn {
	height: auto !important;
	overflow-y: visible !important;
}

/* 라디오버튼 버튼 교체 */
ul.checkList input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip:rect(0,0,0,0);
	border: 0;
}
ul.checkList input[type="radio"] + label {
	position: relative;
	z-index: 20;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 45px;
	height: 32px;
	margin-right: -1px;
    margin-bottom: 0;
	padding: 0 10px;
	text-align: center;
	font-size: 12px;
	color: #2d2d2d;
	background: #fafafa;
	border: 1px solid #929292;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.05),
	inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    -webkit-appearance: radio; /* 아이폰 iOS/사파리 배경 문제 해결 */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
ul.checkList input[type="radio"] + label:first-child {
	border-top-left-radius: 32px;
	border-bottom-left-radius: 32px;
}
ul.checkList input[type="radio"]:checked + label {
	color: #fff;
	background-color: #5f6270;
    border: 1px solid #5f6271;
}
ul.checkList input[type="radio"]:checked + label .Lblue {
	color: #79e1ff !important;
}
ul.checkList input[type="radio"]:checked + label .red {
	color: #ffa8a8 !important;
}
ul.checkList input[type="radio"] + label.checksWide {
	width: 183px;
}
ul.checkList input[type="radio"] + label span {
	display: flex;
	flex-shrink: 0;
}

ul.checkList {
	display: inline-flex;
    margin: 0 5px;
}
.contentSetMenuMakePopup ul.checkList {
    display: flex;
    flex-wrap: wrap;
}
ul.checkList li {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.contentSetMenuMakePopup ul.checkList li {
    margin: 2px 0;
}

ul.checkList li:first-child input[type="radio"] + label {
	border-top-left-radius: 32px;
	border-bottom-left-radius: 32px;
}

ul.checkList li:last-child input[type="radio"] + label {
	border-top-right-radius: 32px;
	border-bottom-right-radius: 32px;
}

.DB {
	display: block !important;
}
.MR5 {
	margin-right: 5px !important;
}
.MR10 {
	margin-right: 10px !important;
}
.ML10 {
	margin-left: 10px !important;
}
.MB5 {
	margin-bottom: 5px !important;
}
.TAL {
	text-align: left !important;
}
.W33 {
	width: 33% !important;
}
.W50 {
	width: 50% !important;
}
.W100 {
	width: 100% !important;
}
.W100P {
    width: 100px !important;
}
.W200P {
    width: 200px !important;
}
.red {
	color: #ff3000 !important;
}
.blue {
	color: #004c99 !important;
}
.Lblue {
	color: #639bd5 !important;
}
.Dyellow {
    color: #ffa200 !important;
}
.grey {
	color: #B0B0B0 !important;
}
.B {
	font-weight: bold !important;
}

/* 검색결과 */
.searchResultTitle {
    position: relative;
    display: block;
    height: 32px;
    margin: 20px 0;
    text-align: center;
    font-size: 24px;
    color: #2d2d2d;
}
.searchResultInTitle {
    position: relative;
    display: block;
    height: 24px;
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #639bd5;
}
ul.searchResultList {
    position: relative;
    display: block;
    padding: 20px 30px;
    box-sizing: border-box;
}
ul.searchResultList li {
    position: relative;
    margin: 20px 0;
}

/* 240217 추가 */
ul.newSearchList li {
    position: relative;
    height: 32px;
    margin: 0;
    padding: 0 10px;
    border: 2px solid #46a8ff;
    border-radius: 42px;
    box-sizing: border-box;
}

ul.newSearchList li .textInput {
    height: 24px;
    border: none;
}
ul.newSearchList li .textInput:focus {
    border: none;
	box-shadow: 0 0 0 0 rgba(0,0,0,0);
}

ul.newSearchList li .subSearchBtn {
    min-width: 32px;
    height:  32px;
    margin-right: -10px;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    text-indent: -9999px;
}
ul.newSearchList li .subSearchBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    font-size: 16px;
    color: #46a8ff;
    text-indent: 0;
    content: "\e90f";
	font-family: 'icomoon' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
}

ul.newSearchList .associatedSearchLayer {
    top: 29px;
    left: 10px;
    min-width: 205px;
    padding: 0;
    border: 1px solid #9d9d9d;
    border-radius: 0;
}
.searchListBox .associatedSearchLayer {
    top: 29px;
    left: 0;
    padding: 0;
    border-radius: 0;
}

ul.newSearchList ul.searchLayerList,
.searchListBox ul.searchLayerList {
    min-width: 205px;
}
ul.newSearchList ul.searchLayerList li,
.searchListBox ul.searchLayerList li {
    width: 100%;
    border: none;
}
ul.newSearchList ul.searchLayerList li a,
.searchListBox ul.searchLayerList li a {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}
ul.newSearchList ul.searchLayerList li a span,
.searchListBox ul.searchLayerList li a span {
    margin-bottom: -2px;
    color: #46a8ff;
    font-weight: bold;
}
ul.newSearchList ul.searchLayerList li a:hover,
.searchListBox ul.searchLayerList li a:hover {
    color: #5d5d5d;
}

a.searchLink {
    width: 100%;
    white-space: nowrap;
    /*
    overflow: hidden;
    text-overflow: ellipsis;
    */
}

.classifiedSearchBtnBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 94px;
    margin: 0 20px;
}

ul.classifiedResultList {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 94px;
    font-size: 16px;
    color: #2d2d2d;
    font-weight: bold;
}
ul.classifiedResultList li {
    margin: 2px 0;
}
ul.classifiedResultList li span {
    display: inline-block;
    margin: 0 3px;
    padding: 3px 10px;
    font-size: 14px;
    font-weight: normal;
    color: #207ab9;
    background-color: #dbfeff;
    border-radius: 42px;
}

.searchListBox {
    position: relative;
}
.searchListBox .associatedSearchLayer {
    min-width: 340px;
}
.associatedSearchLayer .dateBox {
    height: 42px;
    padding: 0 10px;
    color: #9d9d9d;
    background-color: #f5fbff;
    border-bottom: 1px solid #dedede;
}
.associatedSearchLayer .dateBox .textInput {
    width: 90px;
    color: #5d5d5d;
    border: 1px solid #acacac;
}
.searchListBox .associatedSearchLayer .layerCloseBtn {
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
}
.searchListBox .associatedSearchLayer .layerCloseBtn:before {
    width: 42px;
    height: 42px;
    font-size: 18px;
    color: #2d2d2d;
}

.teacherInfoPopup .popupContentTopTitle {
    height: 42px;
}
/* 240317 추가 */
.studentCheckBox {
    position: relative;
    display: flex;
    width: 100%;
    max-height: 120px;
    overflow: hidden;
}
dl.studentCheckList {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
dl.studentCheckList dt {
    width: calc(100% - 100px);
    padding: 2px 0;
    text-align: left;
}
dl.studentCheckList dd {
    width: 100px;
    padding: 2px 0;
}

.manualBtnBox {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    margin-left: 7px;
}
.manualBtn {
    position: relative;
    top: 50%;
    width: 32px;
    height: 32px;
    transform: translate(0, -50%);
}
.manualBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    font-size: 18px;
    color: #fff;
    background-color: #872dc6;
    border-radius: 50%;
    content: "\e929";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.manualBtn span {
    display: block;
    text-indent: -9999px;
}

/* 240323 추가 */
.noticePopupLayer {
    position: absolute;
    z-index: 99;
    top: 330px;
    right: 25px;
    width: 410px;
    min-height: 32px;
    color: #fff;
    background-color: #000;
    box-shadow: 0 0 5px rgba(0,0,0,1);
    border-radius: 120px;
    box-sizing: border-box;

}
.noticePopupLayer.Bgred {
    background-color: #953535;
}
.noticePopupLayer.Bggreen {
    background-color: #489533;
}
.noticePopupLayer.Bgblue {
    background-color: #2a8098;
}
.noticePopupCloseBtn {
    position: absolute;
    z-index: 10;
    top: -35px;
    right: 0px;
    width: 32px;
    height: 32px;
}
.noticePopupCloseBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    font-size: 20px;
    color: #fff;
    background-color: #000;
    border-radius: 32px;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.noticePopupLayer.Bgred .noticePopupCloseBtn:before {
    background-color: #953535;
}
.noticePopupLayer.Bggreen .noticePopupCloseBtn:before {
    background-color: #489533;
}
.noticePopupLayer.Bgblue .noticePopupCloseBtn:before {
    background-color: #2a8098;
}
.noticePopupCloseBtn span {
    display: block;
    text-indent: -9999px;
}
.noticePopupContent {
    position: relative;
    display: block;
    min-height: 32px;
    padding: 10px 20px;
    box-sizing: border-box;
}

/* print */
@media print {
    .wordListTopBox {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 688px;
        height: 42px;
        margin: 0 auto 10px;
        font-size: 14px;
        font-weight: bold;
        color: #000;
        background-color: #f3f9ff;
        border: 2px solid #2d79c7;
        border-radius: 42px;
        overflow: hidden;
    }
    .wordListBtnBox {
        display: none;
    }
    .FSBK216B {
        line-height:24px;
        font-size:12px;
        color:#2d2d2d;
        font-weight:bold;
    }
    .FSBK214 {
        line-height:30px !important;
        padding-top:10px;
        font-size:12px;
    }

    .btnBlueS {
        position: relative;
        padding: 1px 10px 2px;
        font-size: 12px;
        color: #fff !important;
        background-color: #2b3887 !important;
        border: 1px solid #151f5c !important;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        behavior: url(../pie/PIE.htc);
        cursor: pointer;
    }
    .printBox2 { max-width:100%; min-height:10px; margin:0; }

    .printBox2 table {
        position:relative;
        table-layout: fixed;
        border-collapse: collapse;
        min-height:10px;
        top:0; bottom:0;
        /* border-top:1px solid #acacac;
        border-right:1px solid #acacac; */
    }
    .printBox2 td {
        line-height:18px;
        padding:0px 10px;
        font-size:12px;
        text-align: left;
        /* border-left:1px solid #acacac;
        border-bottom:1px solid #acacac; */
        border: 1px solid #acacac;
        word-break: break-word;
    }
    .printBox2 td:nth-child(2n-1) {
        background-color: #f9f9f9;
    }
    .printBox2 td:nth-child(2n-1) a {
        color: #208cdb;
        font-weight: bold;
    }
}

@media screen {
    .cetificate_box2 {
        position: relative;
        width: 718px;
        height: 908px;
        margin: 0 auto;
    }
    .wordListTopBox {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 52px;
        margin: 5px;
        font-size: 12px;
        font-weight: bold;
        border: 2px solid #2d79c7;
        border-radius: 42px;
    }
    .wordPrintBox {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 42px;
        background-color: #f9f9f9;
        border-bottom: 1px dotted #acacac;
        border-radius: 36px 36px 0 0;
    }
    .wordListBtnBox .btnBlueS {
        background-color: #3b98f2 !important;
        border: none !important;
    }
    .wordLineBox {
        position: relative;
        display: inline-flex;
        align-items: center;
        height: 32px;
        margin-left: 10px;
        padding: 0 20px;
        font-size: 14px;
        color: #1757a9;
        background-color: #e5fbff;
        border-radius: 32px;
    }
    .wordListTopTitle {
        display: flex;
        align-items: center;
        height: 32px;
        font-size: 16px;
        font-weight: bold;
    }
    .FSBK216B {
        line-height:24px;
        font-size:12px;
        color:#2d2d2d;
        font-weight:bold;
    }
    .FSBK214 {
        line-height:30px !important;
        padding-top:10px;
        font-size:12px;
    }

    .btnBlueS {
        position: relative;
        padding: 1px 10px 2px;
        font-size: 12px;
        color: #fff !important;
        background-color: #2b3887 !important;
        border: 1px solid #151f5c !important;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        behavior: url(../pie/PIE.htc);
        cursor: pointer;
    }
    .printBox2 { max-width:100%; min-height:10px; margin:0; }

    .printBox2 table {
        position:relative;
        table-layout: fixed;
        border-collapse: collapse;
        min-height:10px;
        top:0; bottom:0;
        border-top:1px solid #acacac;
        border-right:1px solid #acacac;
    }
    .printBox2 td {
        line-height:18px;
        padding:0px 10px;
        font-size:12px;
        text-align: left;
        border-left:1px solid #acacac;
        border-bottom:1px solid #acacac;
        border: 1px solid #acacac;
        word-break: break-word;
    }
    .printBox2 td:nth-child(2n-1) {
        background-color: #f9f9f9;
    }
    .printBox2 td:nth-child(2n-1) a {
        color: #208cdb;
        font-weight: bold;
    }
}

.searchDateBox {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.searchDateBox .selectBox {
	min-width: 50%;
}

.searchBtnAllBox {
	position: relative;
	display: flex;
	align-items: center;
	padding: 5px 20px;
}

.memberSearchPopup .popupContentTable {
	padding: 0;
}

.memberSearchPopup .popupContentBox80 {
	width: calc(100% - 200px);
}

.memberSearchPopup .popupContentBox20 {
	width: 200px;
}

.memberSearchPopup .popupMemberScrollBox {
	margin: 15px;
	overflow: auto;
}
.monthMemberSearchPopup .popupMemberScrollBox,
.monthReservationSearchPopup .popupMemberScrollBox {
	margin: 0;
	overflow: auto;
}

.memberSearchPopup .popupMemberScrollBox table,
.monthMemberSearchPopup .popupMemberScrollBox table,
.monthReservationSearchPopup .popupMemberScrollBox table {
	width: auto;
}

.memberSearchPopup .popupContentTable th,
.monthMemberSearchPopup .popupContentTable th,
.monthReservationSearchPopup .popupContentTable th {
	width: 90px !important;
	padding: 7px 10px !important;
	white-space: nowrap;
}
.memberSearchPopup .popupContentTable td,
.monthMemberSearchPopup .popupContentTable td,
.monthReservationSearchPopup .popupContentTable td {
	width: 90px !important;
	text-align: right;
	white-space: nowrap;
	box-sizing: border-box;
}

.memberSearchPopup .popupContentTable td:first-child,
.monthMemberSearchPopup .popupContentTable td:first-child,
.monthReservationSearchPopup .popupContentTable td:first-child {
	width: 120px !important;
	padding: 7px 10px !important;
	text-align: center;
}

.memberListBox {
	position: relative;
	padding: 15px 15px 0 0;
	box-sizing: border-box;
}
.memberListTitle {
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: bold;
}
.memberListBox .popupScrollBox {
	height: 159px;
	max-height: 159px !important;
	margin: 0;
}

.memberListBox .popupContentTable thead {
	position: sticky;
	top: 0;
}

.chartInBox {
	position: relative;
	display: block;
	margin: 5px 15px;
	padding: 15px;
	text-align: center;
	border: 1px solid #acacac;
	box-sizing: border-box;
}

.monthChartBox {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20%, auto));
	gap: 15px;
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
}
.monthChartBox .chartInBox {
	width: 100%;
	margin: 0;
}

/* tootip 수정 */
.tooltipNew {
    padding: 10px 20px;
    color: #ffffff;
    background: rgb(74, 82, 87, .95);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    border-radius: 15px;

}
.tooltipNew {
	line-height: 1.5;
}

.attendanceCheckLayer {
	position: absolute;
    z-index: 100;
	top: 0;
	left: 0;
	width: 288px;
    height: 136px;
    background-color: #fff;
    border: 1px solid #000;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}

.attendanceCheckTitle {
	position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding-left: 10px;
    font-size: 15px;
    color: #fff;
    background-color: #5e6470;
    border-bottom: 1px solid #3d474f;
    box-sizing: border-box;
}

.attendanceLayerCloseBtn {
	position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 24px;
    height: 32px;
}
.attendanceLayerCloseBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 32px;
    font-size: 20px;
    color: #fff;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}
.attendanceLayerCloseBtn span {
	display: block;
	text-indent: -9999px;
}
.attendanceCheckBox {
	position: relative;
	padding: 15px;
	box-sizing: border-box;
}

.attendanceCheckBox input {
	width: 100%;
	background-color: #ecfbff;
}

/* 교재주문내역 */
.sumBox {
	position: relative;
	display: block;
	min-width: 160px;
	margin-left: auto;
	padding: 0;
	background-color: #fff;
	border: 1px solid #ddd;
}
.sumBoxTitle {
	position: relative;
	display: flex;
	align-items: center;
	height: 38px;
	padding: 0 10px;
	font-weight: bold;
	background-color: #f0f0f0;
	border-bottom: 1px solid #ddd;
}
.sumInBox {
	height: 140px;
}
ul.sumList {
	position: relative;
	display: block;
	padding: 5px;
	font-size: 14px;
	box-sizing: border-box;
}
ul.sumList li {
	padding: 5px;
	text-align: right;
	box-sizing: border-box;
}
ul.sumList li:nth-child(even) {
	background-color: #f9f9f9;
}

.sumTotalBox {
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	height: 38px;
	padding: 10px;
	font-size: 14px;
	font-weight: bold;
	color: #000;
	background-color: #f6fffe;
	border-top: 1px solid #ddd;
}

.sendEndBtn {
	height: 24px;
	padding: 0 20px;
	color: #0092d6;
    border: 1px solid #0092d6;
}
.sendYetBtn {
	height: 24px;
	padding: 0 20px;
	color: #ff5c0c;
    background-color: #fff;
    border: 1px solid #ff5c0c;
}
.layerSendEndBtn {
	position: relative;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
	max-width: 150px;
    height: 38px;
    padding: 0 7px;
    color: #fff;
    background-color: #65697d;
    border: none;
    box-sizing: border-box;
}

.sendEndLayer {
	position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    min-width: 300px;
    min-height: 200px;
    background-color: #fff;
    border: 1px solid #2d2d2d;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.sendEndLayer .layerCloseBtn {
	position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
}
.sendEndLayer .layerCloseBtn:before {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 28px;
    font-size: 18px;
    color: #fff;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

.sendEndPopupTitle {
	position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #747ba0;
    border-bottom: 1px solid #3f4251;
    box-sizing: border-box;
}
.sendEndContentBox {
	max-height: 166px;
}

.sendEndContentBox ul.checks li {
	padding: 5px 0;
}

/* 재시관리 */
.retrySearchPopup ul.subSearchInList {
	justify-content: center;

}
.retrySearchPopup ul.subSearchInList li {
	justify-content: flex-start;
}
.downloadBtn {
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 24px;
	margin: 0 auto;
    font-size: 12px;
    color: #fff;
    background-color: #275083;
    border: none;
    border-radius: 42px;
}

button:active {
	box-shadow: inset 3px 3px 3px 0 rgba(0, 0, 0, .2);
	/*padding: 4px 10px 0px 10px;*/
}


/* 팀톡 알림 레이어 */
.teamtalk-alim-layer {
  position: absolute;
  z-index: 9999;
  background: #dcd7f5;
  width: calc(100% - 854px);
  min-width: 517px;
  height: 165px;
  max-height: 165px;
  top: 35px;
  left: 279px;
  padding: 7px;
  border-radius: 4px;
  border: 1px solid #7c6ec3;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, .1);
}
.teamtalk-alim-layer-body {
  background: #fff;
  border: 1px solid #5d4daf;
  border-radius: 3px;
  overflow: hidden;
}
ul.subSearchList.aaa {
	position: relative;
	display: flex;
	width: 100%;
}
.teamtalk-alim-layer-body h2 {
  position: relative;
  background: #5d4daf;
  padding: 5px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-family: 'noto sans kr';
  border: 0;
}
.teamtalk-alim-layer-close {
  position: absolute;
  font-size: 13px;
  background: #4d3f99;
  color: #fff;
  padding: 2px 16px;
  right: 0;
  top: 0;
}
.teamtalk-alim-layer-close:hover {color: #ffffff;background: #392d7b;}
.teamtalk-alim-layer-inner {max-height: 118px;}
.teamtalk-alim-layer-table {margin-bottom: 0;}
.teamtalk-alim-layer-table td {vertical-align: middle;}
.teamtalk-alim-layer-table td:nth-child(2) {text-align: left;}
.teamtalk-alim-view {font-size: 13px;border: 1px solid #d7d7d7;padding: 3px 10px;}
.teamtalk-alim-view:hover {background: #e7e3f9;border-color: #a095db;}
/* //팀톡 알림 레이어 */

/*  알림 레이어 */
.common-alim-layer {
  position: absolute;
  z-index: 9999;
  background: #c1e8e9;
  width: 580px;
  height: 141px;
  max-height: 121px;
  top: 126px;
  left: 434px;
  /* left: 50%; 크기에 따라 위치 고정해야 할 경우
  transform: translate(-54%, 1px); */
  padding: 7px;
  border-radius: 4px;
  border: 1px solid #5f9ea0;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, .1);
}
.common-alim-layer-body {
  background: #fff;
  border: 1px solid #4d8b8d;
  border-radius: 3px;
  overflow: hidden;
}
.common-alim-layer-body h2 {
  position: relative;
  background: #0c7e8b;
  padding: 5px 5px 5px 15px;
  text-align: left;
  color: #fff;
  font-size: 14px;
  font-family: 'noto sans kr';
  border: 0;
}
.common-alim-layer-close {
  position: absolute;
  font-size: 13px !important;
  background: #086f7b;
  color: #fff;
  padding: 2px 16px !important;
  right: 0;
  top: 0;
  border: 1px solid rgba(0,0,0, .1) !important;
  border-radius: 0;
}
.common-alim-layer-close:hover {color: #ffffff;background: #086f7b;}
.common-alim-layer-inner {max-height: 76px;}
.common-alim-layer-table {margin-bottom: 0;letter-spacing: 0;}
.common-alim-layer-table td {vertical-align: middle;}
.common-alim-layer-table td:nth-child(2) {text-align: left;}
.common-alim-view {font-size: 13px;border: 1px solid #d7d7d7;padding: 3px 10px;}
.common-alim-view:hover {background: #e7e3f9;border-color: #a095db;}

/*  알림 레이어 */


/* 출석체크 레이어 */

.joinCheckLayer {
  position: fixed;
  z-index: 9999999999999999;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: rgba(0,0,0,.8);
  padding: 10px;
}


.joinCheckLayer .checklayer-inner {
  max-width: 900px;
  margin: 0 auto;
  margin-top: 50px;
}

.checklayer-inner .logo {
  text-align: center;
  margin-bottom: 25px;
}
.checklayer-inner .logo img {
  width: 180px;
}
.checklayer-check {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #6f779d;
  border-radius: 4px 4px 0  0;
  min-height: 200px;
  padding: 25px 15px;
  /* margin-bottom: 5px; */
  background: #6f779d;
}
.checklayer-check h2 {
  font-size: 31px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 14px;
}
.checklayer-check .s-text {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #edff00;
}
.checklayer-check .input-group {
  width: 70%;
}
.checklayer-check .input-group .form-control {
  line-height: 59px !important;
  height: 50px;
  border-radius: 3px 0 0 3px;
  border: solid 1px #ddd;
  font-size: 18px;
}
.checklayer-check .input-group .btn {
  background: #262c47;
  border: 1px solid #262c47;
  color: #fff;
}
.checklayer-check .input-group .btn:hover {

}
.checklayer-rollingtable {
  height: 180px;
  border: 3px solid #8089b1;
  border-radius: 0 0 4px 4px;
  background: rgba(0,0,0, .1);
  overflow: hidden;
  margin-bottom: 10px;
}
.checklayer-rollingtable ul {}
.checklayer-rollingtable li {
  display: flex;
  align-items: center;
  padding: 0 15px 0 15px;
  height: 48px;
  border-bottom: 1px dotted rgba(255,255,255, .3);
  color: #fff;
  width: 100%;
}
.checklayer-rollingtable li:hover { background: rgba(0,0,0, .3);}

.checklayer-rollingtable li span {
  width: 100%;
  white-space: nowrap; /* 줄바꿈 방지 */
  overflow: hidden;   /* 넘치는 부분 숨기기 */
  text-overflow: ellipsis; /* 말줄임표(...) 표시 */
}

.checklayer-footer {

}
.checklayer-footer h3 {
  height: 41px;
  border: 3px solid #8089b1;
  border-radius: 4px;
  background: rgba(0,0,0, .1);
  color: #fff;
  font-size: 18px;
  font-weight: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.today-schd {
  padding: 16px;
  line-height: 2;
  letter-spacing: 0;
}
.today-schd li { line-height: 1.5; letter-spacing: 0; padding: 5px 0;}
.tomorrow-schd {
  padding: 16px;
  line-height: 2;
  letter-spacing: 0;}
  .tomorrow-schd li { line-height: 1.5; letter-spacing: 0; padding: 5px 0;}




@keyframes flowRolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateY(-100%);
    }
}


/* //출석체크 레이어 */

/* 현재학생관리 수정 부분 */

/* 첫 번째 dt와 마지막 dd는 항상 보이도록 설정 */
.classInListBox dt:not(:first-of-type), .classInListBox dd:not(:last-of-type) {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

/* 열렸을 때 중간 dt와 dd들이 보이도록 설정 */
.classInListBox.open dt:not(:first-of-type), .classInListBox.open dd:not(:last-of-type) {
  max-height: 50px;
}

.classInListBox dt:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toggle-btn {
  display: inline-flex;
  font-size: 8px;
  color: #fff;
  border: 1px solid #0088cb;
  background: #0088cb;
  height: 20px;
  width: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.arrow {
  display: inline-block;
  transition: transform 0.3s ease;
  margin: 0 !important;
}

.arrow.up {
  transform: rotate(180deg);
}

ul.subSearchList {
	display: flex;
	grid-template-columns: repeat(auto-fit, minmax(12%, auto));
}


#toggle-all-btn {
  display: inline-flex;
  font-size: 12px;
  color: #fff;
  border: 1px solid #0088cb;
  background: #0088cb;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 4px 8px;
}

.layertoggle-container {}
.registerationListBox.tabContentBox {}
.registerationListBox.tabContentBox.on {height: calc(100vh - 254px);transition: all 0.3s;}
.layertoggleBox {height: calc(100vh - 98px); padding: 0 !important;}
.layertoggleBox-Top {position: relative;width: 100%;height: 207px;background-color: #fff;box-sizing: border-box;transition: all 0.3s;}
.layertoggleBox-Bottom {
  height: calc(100% - 238px);
  /* border: 1px solid red; */
}
.layertoggleBox-Bottom .classTopBtnBox {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 52px;
  margin-bottom: 5px;
  margin-top: 0 !important;
  border-bottom: 1px solid #eee;
}


.layertoggleBox-ContentsBox {
  position: relative;
  display: block;
  transition: all 0.3s;
  width: calc(100% - 0px);
  height: calc(100% - 56px);
  /* border-bottom: 2px solid red; */
}


.layertoggleBox-Top.on {height: 15px;overflow: hidden;transition: all 0.3s;}
.layertoggleBox-Bottom.on {height: calc(100% - 30px);}
.layertoggleBox-ContentsBox.on {height: calc(100vh - 191px);transition: all 0.3s;}
.layertoggleBox-listTable.on {height: 100%;}



/* 높이 아래로 맞출 경우 */
.layertoggle-container.classPopup {height: calc(100vh - 26px);}
.layertoggle-container .classPopup .popupContainer {height: calc(100% - -11px);}
.layertoggle-container .popupContent {height: 100%;}
.layertoggle-container .registerationListTable {width: calc(100% - 10px)}
.layertoggle-container .layertoggleBox {height: calc(100vh - 61px);padding: 0;}

.layertoggle-container .layertoggleBox-Bottom.on {height: calc(100% - 15px);}
.layertoggle-container .layertoggleBox-ContentsBox.on {height: calc(100vh - 169px);transition: all 0.3s;}


/* 현재학생관리 수정 부분 */


/* print2 */
.printPage {
  position: relative;
  display: block;
  background: #fff;
  width: 100%;
}
.printPageContent {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;    height: 100%;
}
.printPageContentInBox {
  position: relative;
  display: block;
  width: 100%;
  min-height: 50px;
  background-color: #fff;
}
.printPageContent-Top {}
.printPageContent-Bottom {
  padding: 10px 10px 64px 10px;
  border: 1px solid #9db2cf;
}
.printPageContentSearchBox {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 10px;
  background-color: #fdfdfd;
  border: 1px solid #9db2cf;
  border-bottom: 0;
}

.adm01 ul.subSearchList {
  display: flex ;
}
.adm01 ul.subSearchListli:first-child {
  flex-grow: 0;
  width: auto;
}
.adm01 ul.subSearchList .selectBox {width: 100%;}
.adm01 .SearchBtn {
  padding: 10px 13px;
  font-size: 12px;
  color: #fff;
  background-color: #5f6271;
  border: none;
  border-radius: 3px;
  width: 100%;
  margin-top: 10px;
}
.printPageContent-table { margin-bottom: 20px;}
.tableheader {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #5d7aa1;
  border-bottom: 0;
  line-height: 1.5;
  font-size: 20px;
  background: #5d7aa1;
  color: #fff;
  padding: 9px 10px;
  gap: 19px;
}
.adm01-table {
  border-collapse: collapse;
}
.adm01-table thead {}
.adm01-table thead th {
  border: 1px solid #9db2cf;
  text-align: center;
  padding: 3px;
  font-size: 13px;
  font-weight: 400;
  color: #222;
  background: #dbe5f3;min-width: 70px;
}
.adm01-table thead td {
  border: 1px solid #9db2cf;
  text-align: center;
  padding: 3px;
  font-size: 13px;
  font-weight: 400;
  color: #222;
  background: #eef2f7;min-width: 50px;
}

.adm01-table tbody tr {}

.adm01-table tbody td {
  border: 1px solid #d7d7d7;
  vertical-align: middle;
  text-align: center;
  padding: 5px 5px;
  line-height: 1.5;
}
/* .adm01-table tbody td.on {background: #fff9cf;} */

.st01 {}
.st02 {
  display: block;
  font-size: 13px;
  border: 1px solid #f1883a;
  padding: 1px 5px;
  width: 100%;
  border-radius: 3px;
  color: #f1883a;
}
.st03 {
  display: block;
  font-size: 13px;
  border: 1px solid #ed1919;
  padding: 1px 5px;
  width: 100%;
  border-radius: 3px;
  color: #ed1919;
}

.btn-print {
  position: fixed;
  right: 5px;
  bottom: 5px;
  height: 65px;
  width: 65px;
  font-size: 18px !important;
  color: #ffffff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(95 98 113);
  border-radius: 50%;
}
/* print */
@media print {
  @page {margin:20px 20px}
  @page :first {margin:20px 20px}
  .body, html {background: #fff !important;}
  .PrintOut {display: none;}
  .printPageContent {padding: 0px;}
  .printPageContent-Bottom {padding: 0; border: 0;}
  .printPage {height: 100%;}
  .page-break {page-break-before: always;}
}