html {
	/*
	min-height: 100%;
	height: 100%;
	*/
}

body {
	font-size: 12px;
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
}

body.home {
	background: #f1f0eb;
}

body.ie8.setting {
	background: #555;
}

body.ios {
	height: auto;
	overflow-y: auto;
}

*:focus {
    outline: none;
}

p, dl, ul {
	margin: 0;
}

div, a, span, img {
	-ms-interpolation-mode: bicubic;
}

a:link, a:visited, a:hover, a:active { color: #000; text-decoration:none;}

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-button { height: 1px; }
::-webkit-scrollbar-track {
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ccc;
}

.right {
	text-align: right;
}

.blind {
	text-indent: -99999em;
	display: none;
}

.hide {
	display: none;
	visibility: hidden;
}

.undraggable {
    -webkit-user-select: none;
	-moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */
    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    -moz-user-drag: none;
    -ms-user-drag: none;
    user-drag: none;
}

@-webkit-keyframes showLoading {
   0% { -webkit-transform: rotateZ(0deg); }
   100% { -webkit-transform: rotateZ(36000deg); }
}

@-moz-keyframes showLoading {
   0% { -moz-transform: rotateZ(0deg); }
   100% { -moz-transform: rotateZ(36000deg); }
}

@-ms-keyframes showLoading {
   0% { -ms-transform: rotateZ(0deg); }
   100% { -ms-transform: rotateZ(36000deg); }
}

@-o-keyframes showLoading {
   0% { -o-transform: rotateZ(0deg); }
   100% { -o-transform: rotateZ(36000deg); }
}

@keyframes showLoading {
   0% { transform: rotateZ(0deg); }
   100% { transform: rotateZ(36000deg); }
}

.dimmed {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10;
	background: #000;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); /* IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); /* IE 7 and olders */
	opacity: 0.7;
}

.dimmed.sub {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 7;
	background: #000;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); /* IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); /* IE 7 and olders */
	opacity: 0.7;
}

.dimmed.order-handle {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 7;
	background: #000;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); /* IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); /* IE 7 and olders */
	opacity: 0.4;
}

.dimmed.order-handle.footer {
	position: fixed;
	width: 100%;
	height: 180px;
	top: inherit;
	bottom: 0;
	left: 0;
	z-index: 10;
	background: #000;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); /* IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); /* IE 7 and olders */
	opacity: 0.4;
}

.dimmed.find-password {
	z-index: 19;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85); /* IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85); /* IE 7 and olders */
	opacity: 0.85;
}

.popup.old-ie {
	position: absolute;
	left: 75px;
	top: 200px;
	width: 800px;
	height: 250px;
	z-index: 90;
}

.popup.old-ie .btn-download-chrome-for-old-ie { cursor:pointer;display:block;position:absolute;top:127px;left:19px;width:271px;height:104px;background-position:0 -260px;}
.popup.old-ie .btn-download-ie11-for-old-ie { cursor:pointer;display:block;position:absolute;top:127px;left:290px;width:271px;height:104px;background-position:-280px -260px;}
.popup.old-ie .btn-close { cursor:pointer;display:block;position:absolute;top:194px;left:690px;width:111px;height:54px;background-position:-560px -260px;}

.close {
    position: absolute;
    top: -16px;
    right: -16px;
}

.tutorial {
	position: absolute;
	cursor: pointer;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10;
	background: #000;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); /* IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); /* IE 7 and olders */
	opacity: 0.7;
}

label {
	cursor: pointer;
}

/*
input[type='radio'] {
	cursor: pointer;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 0 5px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-transition: border .2s linear;
	-moz-transition: border .2s linear;
	-ms-transition: border .2s linear;
	-o-transition: border .2s linear;
	transition: border .2s linear;
	vertical-align: middle;
}
*/

input[type=radio]:not(old) {
	width: 0;
	height: 18px;
	margin: 0;
	padding: 0;
	opacity: 0;
}

input[type=radio]:not(old) + label {
	display: inline-block;
	padding-left: 22px;
	background: url(/assets/img/sp/img_radio_unchecked_18.png?v=1661943444) no-repeat;
	line-height: 18px;
}

input[type=radio]:not(old):checked + label {
	background-image: url(/assets/img/sp/img_radio_checked_18.png?v=1661943444);
}

input[type='text'], input[type='password'], input[type='email'] {
	height: 32px;
    line-height: 32px \0/IE8;
	padding: 0 5px 0 5px;
	border: none;
	border-radius: 3px;
	background: #fff;
}

select {
	height: 34px;
	padding: 5px;
	border: none;
	border-radius: 3px;
	background: #fff;
}

/*
input[type="checkbox"] {
	cursor: pointer;
	width: 16px;
	height: 16px;
	padding: 0;
	margin-right: 5px;
	background: #fff;
	border: none;
	border-radius: 3px;
	vertical-align: middle;
}
*/

input[type=checkbox]:not(old) {
	width: 0;
	height: 18px;
	margin: 0;
	padding: 0;
	opacity: 0;
}

input[type=checkbox]:not(old) + label {
	display: inline-block;
	padding-left: 22px;
	background: url(/assets/img/sp/img_checkbox_unchecked_18.png?v=1661943444) no-repeat;
	line-height: 18px;
}

input[type=checkbox]:not(old):checked + label {
	background-image: url(/assets/img/sp/img_checkbox_checked_18.png?v=1661943444);
}

button.mini {
	height: 16px;
	margin-left: 5px;
	padding: 2px;
	border: 1px solid #808080;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

span.smaller {
	font-size: smaller;
}

span.larger {
	font-size: larger;
}

input.span1 {
	width: 50px;
}

input.span2 {
	width: 80px;
}

input.span3 {
	width: 120px;
}

input.span4 {
	width: 180px;
}

input.span5 {
	width: 250px;
}

input.login-id {
	width: 180px;
	border: 2px solid #e2dfd8;
	border-radius: 4px;
	box-shadow: none;
	-webkit-transition: border .2s linear;
	-moz-transition: border .2s linear;
	-ms-transition: border .2s linear;
	-o-transition: border .2s linear;
	transition: border .2s linear;
}

input.login-pw {
    width: 130px;
	border: 2px solid #e2dfd8;
	border-radius: 4px;
	box-shadow: none;
	-webkit-transition: border .2s linear;
	-moz-transition: border .2s linear;
	-ms-transition: border .2s linear;
	-o-transition: border .2s linear;
	transition: border .2s linear;
}

.top-links {
	position: relative;
	display: none;
	height: 100px;
	background: #f8f8f5;
	overflow: hidden;
}

.top-links ul.links {
	position: relative;
	display: block;
	width: 960px;
	height: 100px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

.top-links ul.links li {
	cursor: pointer;
	float: left;
	width: 880px;
	height: 100px;
	margin: 0 40px;
}

@-webkit-keyframes animateEvent2017New {
   0% { background-position: 0 0; }
   100% { background-position: 0 -140px; }
}

@-moz-keyframes animateEvent2017New {
   0% { background-position: 0 0; }
   100% { background-position: 0 -140px; }
}

@-ms-keyframes animateEvent2017New {
   0% { background-position: 0 0; }
   100% { background-position: 0 -140px; }
}

@-o-keyframes animateEvent2017New {
   0% { background-position: 0 0; }
   100% { background-position: 0 -140px; }
}

@keyframes animateEvent2017New {
   0% { background-position: 0 0; }
   100% { background-position: 0 -140px; }
}

.popup-layer {
	position: fixed;
	display: none;
	top: 50%;
	left: 50%;
	z-index: 11;
}

.popup-layer .layer { cursor: pointer; }

.popup-layer .close {
	position: absolute;
	top: 0;
	right: -30px;
}

.popup-layer .close a.btn-close {
	cursor: pointer;
	width: 25px;
	height: 25px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -170px -420px no-repeat;
}

.popup-layer .close a.btn-close:hover { background-position: -200px -420px; }

.bottom-layer {
	position: fixed;
	display: none;
	bottom: 80px;
	right: 250px;
	z-index: 11;
}

@media screen and (min-width: 1200px) {
	.bottom-layer {
		right: initial;
		left: 50%;
		margin-left: 480px;
	}
}

.bottom-layer .layer {
	cursor: pointer;
	position: absolute;
	bottom: -300px;
	left: 0;
}

.bottom-layer .layer img { display: block; }

.banner-quiz {
	position: relative;
	height: 60px;
}

.banner-quiz .pattern {
	height: 60px;
	background: url(/assets/img/quiz/miraen_pattern.png?v=1661943444);
}

.banner-quiz .pattern span.text {
	position: absolute;
	display: block;
	left: 50%;
	width: 360px;
	height: 40px;
	margin: 10px 0 10px 8px;
	background: url(/assets/img/quiz/miraen_textbanner_normal.png?v=1661943444);
}

.banner-quiz .desc {
	cursor: pointer;
	position: absolute;
	display: block;
	top: 60px;
	width: 100%;
	height: 0;
	overflow-y: hidden;
	background: #565d7a;
	-webkit-transition: height .2s ease-out;
	-moz-transition: height .2s ease-out;
	-ms-transition: height .2s ease-out;
	-o-transition: height .2s ease-out;
	transition: height .2s ease-out;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.banner-quiz .desc span.text {
	position: absolute;
	display: none;
	left: 50%;
	width: 556px;
	height: 130px;
	margin-left: -200px;
	background: url(/assets/img/quiz/december/miraen_event_textbanner_hover.png?v=1661943444);
}

.banner-quiz .quiz-launcher {
	cursor: pointer;
	position: absolute;
	top: -10px;
	left: 50%;
	margin-left: 340px;
	-webkit-transition: margin-left .3s ease-out, margin-top .1s ease-in-out;
	-moz-transition: margin-left .3s ease-out, margin-top .1s ease-in-out;
	-ms-transition: margin-left .3s ease-out, margin-top .1s ease-in-out;
	-o-transition: margin-left .3s ease-out, margin-top .1s ease-in-out;
	transition: margin-left .3s ease-out, margin-top .1s ease-in-out;
	z-index: 5;
}

.banner-quiz.hover .quiz-launcher { margin-top: 100px; }

.banner-quiz .quiz-launcher span.circle {
	display: block;
	display: none\9;
    width: 200px;
    height: 200px;
    border-radius: 200px;
    background: #fff;
    opacity: 0.0;
    margin-left: -21px;
    margin-top: -80px;
	-webkit-transition: -webkit-transform,opacity .1s ease-in-out;
	-moz-transition: -moz-transform,opacity .1s ease-in-out;
	-ms-transition: -ms-transform,opacity .1s ease-in-out;
	-o-transition: -o-transform,opacity .1s ease-in-out;
	transition: transform,opacity .1s ease-in-out;
	-webkit-transform-origin: bottom center;
	-moz-transform-origin: bottom center;
	-ms-transform-origin: bottom center;
	-o-transform-origin: bottom center;
	transform-origin: bottom center;
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
}

.banner-quiz .quiz-launcher a.btn-quiz-launcher {
	position: absolute;
	display: block;
	top: -80px;
	margin-top: 5px;
	-webkit-transition: -webkit-transform .1s ease-in-out;
	-moz-transition: -moz-transform .1s ease-in-out;
	-ms-transition: -ms-transform .1s ease-in-out;
	-o-transition: -o-transform .1s ease-in-out;
	transition: transform .1s ease-in-out;
	-webkit-transform-origin: bottom center;
	-moz-transform-origin: bottom center;
	-ms-transform-origin: bottom center;
	-o-transform-origin: bottom center;
	transform-origin: bottom center;
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	-ms-transform: scale(0.6);
	-o-transform: scale(0.6);
	transform: scale(0.6);
}

.banner-quiz .quiz-launcher a.btn-quiz-launcher span.image {
	display: block;
	width: 158px;
	height: 207px;
	background: url(/assets/img/quiz/miraen_object_normal.png?v=1661943444);
}

.banner-quiz .quiz-launcher a.btn-quiz-launcher span.text {
	display: none;
	width: 158px;
	height: 34px;
	background: url(/assets/img/quiz/miraen_object_text.png?v=1661943444);
}

@-webkit-keyframes vibrateRocket {
0%, 100% { margin-top: 3px; }
15% { margin-top: 0px; }
65% { margin-top: 6px; }
}

@-moz-keyframes vibrateRocket {
0%, 100% { margin-top: 3px; }
15% { margin-top: 0px; }
65% { margin-top: 6px; }
}

@-ms-keyframes vibrateRocket {
0%, 100% { margin-top: 3px; }
15% { margin-top: 0px; }
65% { margin-top: 6px; }
}

@-o-keyframes vibrateRocket {
0%, 100% { margin-top: 3px; }
15% { margin-top: 0px; }
65% { margin-top: 6px; }
}

@keyframes vibrateRocket {
0%, 100% { margin-top: 3px; }
15% { margin-top: 0px; }
65% { margin-top: 6px; }
}

@-webkit-keyframes vibrateRocketPopup {
0%, 100% { margin-left: 18px; }
50% { margin-left: 23px; }
}

@-moz-keyframes vibrateRocketPopup {
0%, 100% { margin-left: 18px; }
50% { margin-left: 23px; }
}

@-ms-keyframes vibrateRocketPopup {
0%, 100% { margin-left: 18px; }
50% { margin-left: 23px; }
}

@-o-keyframes vibrateRocketPopup {
0%, 100% { margin-left: 18px; }
50% { margin-left: 23px; }
}

@keyframes vibrateRocketPopup {
0%, 100% { margin-left: 18px; }
50% { margin-left: 23px; }
}

@-webkit-keyframes launchRocket {
0%,5%,10%,15%,98% { background: url(/assets/img/quiz/miraen_object_active.png?v=1661943444); }
4%,9%,14%,100% { background: url(/assets/img/quiz/miraen_object_normal.png?v=1661943444); }
}

@-moz-keyframes launchRocket {
0%,5%,10%,15%,98% { background: url(/assets/img/quiz/miraen_object_active.png?v=1661943444); }
4%,9%,14%,100% { background: url(/assets/img/quiz/miraen_object_normal.png?v=1661943444); }
}

@-ms-keyframes launchRocket {
0%,5%,10%,15%,98% { background: url(/assets/img/quiz/miraen_object_active.png?v=1661943444); }
4%,9%,14%,100% { background: url(/assets/img/quiz/miraen_object_normal.png?v=1661943444); }
}

@-o-keyframes launchRocket {
0%,5%,10%,15%,98% { background: url(/assets/img/quiz/miraen_object_active.png?v=1661943444); }
4%,9%,14%,100% { background: url(/assets/img/quiz/miraen_object_normal.png?v=1661943444); }
}

@keyframes launchRocket {
0%,5%,10%,15%,98% { background: url(/assets/img/quiz/miraen_object_active.png?v=1661943444); }
4%,9%,14%,100% { background: url(/assets/img/quiz/miraen_object_normal.png?v=1661943444); }
}

.banner-quiz.hover .desc { height: 130px; }
.banner-quiz.popup .desc, .banner-quiz.loading .desc { display: none; }

.banner-quiz .quiz-launcher:hover span.circle,
.banner-quiz.popup .quiz-launcher span.circle { opacity: 0.2; }
.banner-quiz.loading .quiz-launcher span.circle { opacity: 0.0; }

.banner-quiz.hover .quiz-launcher span.circle,
.banner-quiz.popup .quiz-launcher span.circle,
.banner-quiz.loading .quiz-launcher span.circle {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

.banner-quiz.hover .quiz-launcher a.btn-quiz-launcher,
.banner-quiz.popup .quiz-launcher a.btn-quiz-launcher,
.banner-quiz.loading .quiz-launcher a.btn-quiz-launcher {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-animation-name: vibrateRocket;
	-webkit-animation-duration: 1.2s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-name: vibrateRocket;
	-moz-animation-duration: 1.2s;
	-moz-animation-iteration-count: infinite;
	-ms-animation-name: vibrateRocket;
	-ms-animation-duration: 1.2s;
	-ms-animation-iteration-count: infinite;
	-o-animation-name: vibrateRocket;
	-o-animation-duration: 1.2s;
	-o-animation-iteration-count: infinite;
	animation-name: vibrateRocket;
	animation-duration: 1.2s;
	animation-iteration-count: infinite;
}

.banner-quiz.popup .quiz-launcher,
.banner-quiz.loading .quiz-launcher { z-index: 15; }
.banner-quiz.loading .quiz-launcher { margin-left: -80px; }

.banner-quiz.popup .quiz-launcher { top: 40px; }

.banner-quiz.hover .quiz-launcher a.btn-quiz-launcher span.image,
.banner-quiz.popup .quiz-launcher a.btn-quiz-launcher span.image,
.banner-quiz.loading .quiz-launcher a.btn-quiz-launcher span.image {
	-webkit-animation-name: launchRocket;
	-webkit-animation-duration: .6s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-name: launchRocket;
	-moz-animation-duration: .6s;
	-moz-animation-iteration-count: infinite;
	-ms-animation-name: launchRocket;
	-ms-animation-duration: .6s;
	-ms-animation-iteration-count: infinite;
	-o-animation-name: launchRocket;
	-o-animation-duration: .6s;
	-o-animation-iteration-count: infinite;
	animation-name: launchRocket;
	animation-duration: .6s;
	animation-iteration-count: infinite;
}

.banner-quiz.hover .quiz-launcher a.btn-quiz-launcher span.text,
.banner-quiz.popup .quiz-launcher a.btn-quiz-launcher span.text { display: block; }
.banner-quiz.loading .quiz-launcher a.btn-quiz-launcher span.text { display: none; }

.banner-quiz .quiz-guide {
	position: absolute;
	display: none;
	top: -100px;
	width: 100%;
	z-index: 11;
}

.banner-quiz.popup .quiz-guide { display: block; }
.banner-quiz .dimmed { display: none; }
.banner-quiz.popup .dimmed,
.banner-quiz.loading .dimmed { display: block; }

.banner-quiz .quiz-guide .body {
	position: absolute;
	top: 40px;
	left: 50%;
	display: block;
	width: 916px;
	height: 602px;
	margin-left: -458px;
	background: url(/assets/img/quiz/miraen_popup.png?v=1661943444);
}

.banner-quiz .quiz-guide .popup {
	position: absolute;
	top: 110px;
	left: 50%;
	display: block;
	width: 330px;
	height: 40px;
	margin-left: 83px;
	background: url(/assets/img/quiz/miraen_textbanner_normal.png?v=1661943444);
	-webkit-animation-name: vibrateRocketPopup;
	-webkit-animation-duration: .8s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-name: vibrateRocketPopup;
	-moz-animation-duration: .8s;
	-moz-animation-iteration-count: infinite;
	-ms-animation-name: vibrateRocketPopup;
	-ms-animation-duration: .8s;
	-ms-animation-iteration-count: infinite;
	-o-animation-name: vibrateRocketPopup;
	-o-animation-duration: .8s;
	-o-animation-iteration-count: infinite;
	animation-name: vibrateRocketPopup;
	animation-duration: .8s;
	animation-iteration-count: infinite;
	z-index: 1;
}

.banner-quiz .quiz-guide .close {
	position: absolute;
	top: 560px;
	left: 50%;
	margin-left: 460px;
}

.banner-quiz .quiz-guide .close a.btn-close {
	display: block;
	width: 66px;
	height: 66px;
	opacity: 0.4;
	background: url(/assets/img/sp/sp_board_buttons.png?v=1661943444) -530px -80px no-repeat;
}

.banner-quiz .quiz-guide .close a.btn-close:hover { opacity: 1.0; }

.banner-quiz .quiz-loading {
	position: absolute;
	display: none;
	top: 0;
	width: 100%;
	z-index: 11;
}

.banner-quiz .quiz-loading .loader {
	position: absolute;
	top: 240px;
	left: 50%;
	margin-left: -70px;
	color: #fff;
	font-size: 18px;
}

.banner-quiz .quiz-loading .loader span.dot {
	margin-left: 4px;
	font-weight: bold;
	letter-spacing: 4px;
}

.banner-quiz .quiz-loading .title {
	position: absolute;
	top: 420px;
	width: 100%;
	text-align: center;
	color: #fff150;
	font-size: 14px;
}

.banner-quiz .quiz-loading .title p span {
	display: inline-block;
	width: 90px;
	height: 24px;
}

.banner-quiz .quiz-loading .title p span.brand-miraen { width: 151px; background: url(/assets/img/quiz/miraen_logo.png?v=1661943444); }
.banner-quiz .quiz-loading .title p span.brand-class123 { background: url(/assets/img/quiz/class123_logo.png?v=1661943444); width: 101px; }
.banner-quiz .quiz-loading .title p span.plus { width: 60px; line-height: 24px; vertical-align: top; }
.banner-quiz .quiz-loading .title p.quiz-desc { margin-top: 20px; line-height: 26px; }

.banner-quiz.loading .quiz-loading { display: block; }

.banner-quiz .preloader {
	position: absolute;
	visibility: hidden;
	z-index: 1;
}

.banner-quiz .preloader .sprite { background: url(/assets/img/sp/sp_quiz.png?v=1661943444); }
.banner-quiz .preloader .sprite-group { background: url(/assets/img/sp/sp_quiz_group.png?v=1661943444); }
.banner-quiz .preloader .popup { background: url(/assets/img/quiz/december/miraen_event_popup.png?v=1661943444); }
.banner-quiz .preloader .loader { background: url(/assets/img/quiz/miraen_loading_01.png?v=1661943444); }

.banner-quiz.entered { height: 0; }
.banner-quiz.entered .pattern,
.banner-quiz.entered .desc { display: none; }

.container {
	position: relative;
	width: 960px;
	min-height: 100%;
	margin: 0 auto;
	background-position: initial initial;
	background-repeat: initial initial;
	background-position: initial initial;
	background-repeat: initial initial;
}

.container .login-form {
	position: absolute;
	width: 960px;
	height: 600px;
	top: 280px;
	margin: 0 auto auto;
}

.container .login-form div {
	margin-left: auto;
	margin-right: auto;
}

.container .login-form .input-form {
	width: 252px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.container .login-form .input-form p {
	margin: 5px 0 5px 0;
}

.container .login-form .input-form label {
	vertical-align: top;
}

.gnb-bg {
	background: #fff;
	height: 60px;
}

.container .gnb {
	top: 0px;
	width: 960px;
	height: 60px;
	line-height: 49px;
	text-align: right;
	font-size: 13px;
}

.container.gnb {
	height: 60px;
	min-height: 60px;
	margin: -60px auto 0 auto;
}

.container .gnb .logo div {
    cursor: pointer;
    position: absolute;
    top: 15px;
    left: 10px;
    width: 126px;
    height: 30px;
    background: url(/assets/img/sp/sp_layout.png?v=1661943444) -450px -170px no-repeat;
}

.container .gnb .outlink {
    position: absolute;
    left: 230px;
    height: 50px;
    z-index: 9;
}

.container .gnb ul.anchor-list { display: none; }

.login-container .outlink a, .container .gnb .outlink a {
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
	padding-left: 10px;
	padding-right: 12px;
	border-radius: 15px;
	line-height: 24px;
	background: #ffed1e;
	color: #d87629;
	vertical-align: middle;
	behavior: url(/assets/css/PIE.htc);
}

.login-container .gnb .outlink a {
	background: #7ea7e2;
	color: #fff;
}

.login-container .gnb .outlink a.facebook,
.container .gnb .outlink a.facebook {
    min-width: 104px;
}

.container .gnb .outlink a.help {
    min-width: 26px;
}

.login-container .gnb .outlink a.uservoice,
.container .gnb .outlink a.uservoice {
    min-width: 48px;
}

.container .gnb .btn-area-login {
	position: absolute;
	right: 50px;
	top: 15px;
	z-index: 9;
	line-height: 34px;
	padding: 3px;
}

button.btn-login, button.btn-login-open {
	display: block;
	height: 34px;
	width: 100px;
	border: 0;
	font-weight: bold;
}

button.btn-login-open {
	background: #fff150;
	color: #7b340f;
}

button.btn-login-open.open {
}

button.btn-login {
	color: #fff;
	text-align: center;
	border-radius: 5px;
	margin-bottom: 3px;
}

button.btn-login.parent { border-bottom: none; }

button.btn-login.student { background: #2ebca0; }
button.btn-login.parent { background: #ff4a4a; }
button.btn-login.teacher { background: #856343; }

button:hover.btn-login { background: #fff; color: #333; }
button.btn-login.student:hover { background: #3acca8; }
button.btn-login.parent:hover { background: #ff5b50; }
button.btn-login.teacher:hover { background: #a57a48; }

button.btn-login-valid {
	background: #fff;
	color: #000;
	box-shadow: 0 0 3px #1e7aff;
	/*background-position: 0 -460px;*/
}

.container.home {
	margin-bottom: 100px;
}

.container.home .add-class {
	position: relative;
	top: 8px;
	left: 472px;
	min-width: 960px;
}

.container.home .add-class .btn-archive-list, .container.home .add-class .btn-course-copy, .container.home .add-class .btn-bulk-input {
	float: left;
	margin-right: 20px;
	margin-top: 2px;
	color: #ef5d68;
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
}

.container > .close { display: none; }

.container.home div.home {
	margin-bottom: 0px;
}

.container.home .home { position: relative; background: #f1f0eb; }
.container.home .home .class-list {
	position: relative;
	width: 990px;
	margin-top: 10px;
	margin-bottom: 80px;
}

.container.home .home .class-list ul { display: block; padding-left: 0; }
.container.home .home .class-list ul.course-list { padding-bottom: 80px; overflow-y: auto; }

.container.home .home .class-list p.section-title {
	height: 28px;
	line-height: 28px;
	padding: 0 15px;
	color: #7f4500;
	font-size: 15px;
	font-weight: bold;
}

.container.home .home .class-list div.menu {
	position: absolute;
	top: 5px;
	right: 50px;
}

.container.home .home .class-list div.menu a {
	cursor: pointer;
	line-height: 16px;
	margin: 0 10px;
	padding: 0 2px;
	color: #777;
	font-size: 12px;
	font-weight: normal;
	border-bottom: 1px solid #aaa;
}

.container.home .home .class-list div.menu a:hover { color: #000; border-bottom-color: #555;}

.container.home .home .class-list div.menu a.btn-change-class-order { display: none; }

.container.home .home .class-list li.class-item {
	float: left;
	position: relative;
	width: 300px;
	height: 141px;
	line-height: 14px;
	margin: 3px 7px 12px 7px;
	list-style: none;
	background: #fff;
	border-radius: 10px;
}

.container.home .home .class-list li.class-item.dummy {
	border: 1px solid rgba(0, 0, 0, 0);
	visibility: hidden;
	height: 80px;
}

.container.home .home .class-list li.class-item.add-new {
	cursor: pointer;
	background: #e7e6e1;
	color: #464646;
}

.container.home .home .class-list li.class-item.add-new a.ico-add {
	display: block;
	font-size: 18px;
	line-height: 141px;
	opacity: 0.5;
}

.container.home .home .class-list li.class-item.add-new a.ico-add span {
	display: inline-block;
	margin-right: 5px;
	width: 16px;
	height: 16px;
	background:url(/assets/img/sp/sp_layout.png?v=1661943444) -100px -260px no-repeat;
	vertical-align: middle;
}

.container.home .home .class-list li.class-item .class-info {
	width: 100%;
	text-align: center;
}

.container.home .home .class-list li.class-item .class-info .class-name {
	width: 290px;
	line-height: 23px;
	margin: 0 5px;
	padding: 58px 0;
	font-size: 18px;
	font-weight: normal;
	color: #19c1a7;
}

.container.home .home .class-list li.class-item .class-info .class-name span.name {
	display: inline-block;
	max-width: 260px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: middle;
}

.container.home .home .class-list li.class-item .class-info .class-name span.message-info {
	display: inline-block;
	margin-top: -5px;
	background: #ffce38;
	color: #fff;
	font-size: 12px;
	min-width: 19px;
	line-height: 19px;
	border-radius: 19px;
	vertical-align: top;
}

.container.home .home .class-list li.class-item .class-info .class-name.no-message span.name { max-width: 290px; }
.container.home .home .class-list li.class-item .class-info .class-name.no-message span.message-info { display: none; }

.container.home .home .class-list li.class-item .cover,
.container.home .home .class-list li.class-item .order-handle { display: none; }

.ios .container.home .home .class-list li.class-item .cover,
.container.home .home .class-list li.class-item.demo-class .cover,
.container.home .home .class-list li.class-item:hover .cover { display: block; }

.container.home .home .class-list li.class-item .cover a.btn-launch {
	cursor: pointer;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 296px;
	height: 137px;
    line-height: 137px;
	background: #ffe141;
	border: 2px solid #ffce38;
	border-radius: 10px;
	color: #93610a;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
}

.ios .container.home .home .class-list li.class-item .cover a.btn-launch { background: #fff; }
.ios .container.home .home .class-list li.class-item .cover a.btn-launch:hover { background: #ffe141; }

.container.home .home .class-list li.class-item .cover a.btn-launch span.class-name {
	position: absolute;
	top: 42px;
	left: 0;
	width: 100%;
    line-height: 25px;
	font-size: 14px;
	opacity: 0.8;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.home .home .class-list li.class-item .cover a.btn-launch span.text {
	display: inline-block;
    line-height: 25px;
	margin-top: 72px;
}

.container.home .home .class-list li.class-item a.btn-archive {
	cursor: pointer;
	position: absolute;
	top: 10px;
	right: 6px;
	color: #333;
	opacity: 0.5;
}

.container.home .home .class-list li.class-item a.btn-archive span.ico {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 3px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -290px -30px no-repeat;
	vertical-align: baseline;
}

.container.home .home .class-list li.class-item a.btn-archive:hover {
	opacity: 1.0;
}

.container.home .home .class-list li.class-item.demo-class .cover a.btn-launch {
	background: #fff;
    -webkit-transition: border-color .1s ease-out;
    -moz-transition: border-color .1s ease-out;
    -ms-transition: border-color .1s ease-out;
    -o-transition: border-color .1s ease-out;
    transition: border-color .1s ease-out;
}

.container.home .home .class-list li.class-item.demo-class .cover a.btn-launch span.class-name {
	color: #19c1a7;
	font-size: 18px;
    -webkit-transition: color .1s ease-out;
    -moz-transition: color .1s ease-out;
    -ms-transition: color .1s ease-out;
    -o-transition: color .1s ease-out;
    transition: color .1s ease-out;
}

.container.home .home .class-list li.class-item.demo-class .cover a.btn-launch span.text {
	margin-top: 77px;
	padding: 0px 15px;
	border-radius: 20px;
	background: #ffce38;
	color: #fff;
	font-size: 14px;
    -webkit-transition: background-color .1s ease-out;
    -moz-transition: background-color .1s ease-out;
    -ms-transition: background-color .1s ease-out;
    -o-transition: background-color .1s ease-out;
    transition: background-color .1s ease-out;
}

.container.home .home .class-list li.class-item.demo-class:hover .cover a.btn-launch { border-color: #bc9176; }
.container.home .home .class-list li.class-item.demo-class:hover .cover a.btn-launch span.class-name { color: #7d563d; }
.container.home .home .class-list li.class-item.demo-class:hover .cover a.btn-launch span.text { background: #bc9176; }

.container.home .home .class-list li.class-item.demo-class a.btn-archive { display: none; }
.container.home .home .class-list li.class-item.demo-class:hover a.btn-archive { display: block; }

.container.home .home .class-list li.class-item .cover a.btn-add-new-student,
.container.home .home .class-list li.class-item .cover a.btn-add-new-card { border-color: #f94759; color: #f94759; background: #fff; }

.container.home .home .class-list li.class-item.add-new:hover { background: #fff; }
.container.home .home .class-list li.class-item.add-new:hover a.ico-add {opacity:1.0;}

.container.home .home .class-list li.class-item .status-class {
	width: 100%;
	height: 40px;
	line-height: 40px;
	border-top: 1px solid #f5f2ec;
}

.container.home .home .class-list li.class-item .status-class a { cursor: pointer; display: inline-block; height: 40px; }
.container.home .home .class-list li.class-item .status-class a:hover { background: #f5f2ec; }

.container.home .home .class-list li.class-item .status-class a.message-info {
	width: 78px;
	padding-left: 12px;
}

.container.home .home .class-list li.class-item .status-class a.message-info span.ico {
	width: 24px;
	height: 24px;
	border-radius: 24px;
	background: #ffce38;
}
.container.home .home .class-list li.class-item .status-class a.message-info span.ico span { display: inline-block; width: 14px; height: 12px; margin: 6px 5px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -310px -80px no-repeat; }

.container.home .home .class-list li.class-item .status-class a.message-info span.count {
	color: #e02c2c;
	font-size: 12px;
	font-weight: bold;
	border-bottom: 1px solid #e02c2c;
}

.container.home .home .class-list li.class-item .status-class a.message-info.no-message span.ico { background: #d0d0d0; }
.container.home .home .class-list li.class-item .status-class a.message-info.no-message span.count { color: #a3a3a3; border-bottom-color: #a3a3a3; }

.container.home .home .class-list li.class-item .status-class a.account-info { position: relative; width: 207px; color: #464646; }
.container.home .home .class-list li.class-item .status-class a.account-info span.ico { display: inline-block; width: 23px; height: 19px; margin: 0 5px 4px 5px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -370px -70px no-repeat; }

@-webkit-keyframes blinkNoAccountsIcon {
0%, 10%, 21%, 30%, 41%, 90% { opacity: 1; }
11%, 20%, 31%, 40%, 91%, 100% { opacity: 0.7; }
}

@-moz-keyframes blinkNoAccountsIcon {
0%, 10%, 21%, 30%, 41%, 90% { opacity: 1; }
11%, 20%, 31%, 40%, 91%, 100% { opacity: 0.7; }
}

@-ms-keyframes blinkNoAccountsIcon {
0%, 10%, 21%, 30%, 41%, 90% { opacity: 1; }
11%, 20%, 31%, 40%, 91%, 100% { opacity: 0.7; }
}

@keyframes blinkNoAccountsIcon {
0%, 10%, 21%, 30%, 41%, 90% { opacity: 1; }
11%, 20%, 31%, 40%, 91%, 100% { opacity: 0.7; }
}

.container.home .home .class-list li.class-item .status-class a.account-info.no-parent span.circle {
	display: inline-block;
	width: 21px;
	height: 21px;
	border: 1px dashed #b7b7b7;
	border-radius: 11px;
	background: #fff;
	margin: 0 7px 1px 6px;
	vertical-align: middle;
	-webkit-animation-name: blinkNoAccountsIcon;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-name: blinkNoAccountsIcon;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: infinite;
	animation-name: blinkNoAccountsIcon;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

.container.home .home .class-list li.class-item .status-class a.account-info.no-parent span.ico { background-position: -200px -130px; width: 13px; height: 13px; margin: 4px; vertical-align: top; }

.container.home .home .class-list li.class-item .status-class a.account-info.no-parent span.text {
	position: absolute;
	top: 9px;
	width: 162px;
	padding: 1px 8px;
	height: 21px;
	line-height: 21px;
	background: #ffde38;
	color: #7f4500;
	white-space: nowrap;
}

.container.home .home .class-list li.class-item .status-class a.account-info.no-parent span.text:after {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 222, 56, 0);
    border-right-color: #ffde38;
    border-width: 3px;
    margin-top: -3px;
}

.container.home .home .class-list li.class-item .status-class a.account-info.no-parent span.text:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 222, 56, 0);
    border-right-color: #ffde38;
    border-width: 4px;
    margin-top: -4px;
}

.container.home .home .class-list li.class-item .status-class a.account-info span.count { margin-right: 5px; color: #11bbb5; }

.container.home .home .class-list li.class-item.not-owner.shared .status-class { color: #999; background: #f5f4f1; border-radius: 0 0 8px 8px; text-align: center; }
.container.home .home .class-list li.class-item.not-owner.shared.hover .status-class { border-radius: 0; }

.container.home .home .class-list li.class-item.not-owner.shared .status-class a.message-info,
.container.home .home .class-list li.class-item.not-owner.shared .status-class a.account-info { display: none; }

.container.home .home .class-list li.class-item .status-class span.shared-message { display: none; }
.container.home .home .class-list li.class-item.not-owner.shared .status-class span.shared-message { display: block; }

.container.home .home .class-list li.class-item .order-handle {
	cursor: pointer;
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	width: 294px;
	height: 135px;
    line-height: 135px;
	background: #fff;
	border: 3px solid #ddd4d0;
	border-radius: 10px;
	color: #93610a;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    -webkit-transition: border-color .1s ease-out;
    -moz-transition: border-color .1s ease-out;
    -ms-transition: border-color .1s ease-out;
    -o-transition: border-color .1s ease-out;
    transition: border-color .1s ease-out;
}

.container.home .home .class-list li.class-item .order-handle span.class-name {
	position: absolute;
	top: 55px;
	left: 0;
	width: 100%;
    line-height: 25px;
	font-size: 14px;
	opacity: 0.8;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}

.container.home .home .class-list li.class-item .order-handle span.tip {
	position: absolute;
	bottom: 8px;
	left: 5%;
	width: 90%;
    line-height: 18px;
	font-size: 13px;
	opacity: 0;
    -webkit-transition: opacity .1s ease-out;
    -moz-transition: opacity .1s ease-out;
    -ms-transition: opacity .1s ease-out;
    -o-transition: opacity .1s ease-out;
    transition: opacity .1s ease-out;
}

.container.home .home .class-list li.class-item.demo-class .cover,
.container.home .home .class-list li.class-item:hover .cover { display: block; }

.container.home .home .class-list.change-order-mode ul.course-list {
	position: absolute;
	padding-bottom: 180px;
	z-index: 8;
}

.container.home .home .class-list.change-order-mode li.class-item .cover,
.container.home .home .class-list.change-order-mode li.class-item:hover .cover { display: none; }

.container.home .home .class-list.change-order-mode li.class-item .order-handle { display: block; }

.container.home .home .class-list.change-order-mode li.class-item:hover .order-handle { border-color: #ffce38; }
.container.home .home .class-list.change-order-mode li.class-item:hover .order-handle span.class-name { top: 38px; color: #7f4500; }
.container.home .home .class-list.change-order-mode li.class-item:hover .order-handle span.tip { opacity: 0.7; }

.container.home .home .class-list a.btn-quit-order-mode {
	cursor: pointer;
	position: absolute;
	display: none;
	top: 0;
	right: 60px;
	width: 25px;
	height: 25px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -170px -420px no-repeat;
	z-index: 10;
}

.container.home .home .class-list.change-order-mode a.btn-quit-order-mode { display: block; }

.container.home .home .class-list .class-menu {
	height: 0;
	border-top: 1px solid transparent;
	overflow-y: hidden;
    -webkit-transition: height .2s ease-out .2s;
    -moz-transition: height .2s ease-out .2s;
    -ms-transition: height .2s ease-out .2s;
    -o-transition: height .2s ease-out .2s;
    transition: height .2s ease-out .2s;
}

.container.home .home .class-list .class-setting {
	height: 0;
	overflow-y: hidden;
    -webkit-transition: height .2s ease-out .4s;
    -moz-transition: height .2s ease-out .4s;
    -ms-transition: height .2s ease-out .4s;
    -o-transition: height .2s ease-out .4s;
    transition: height .2s ease-out .4s;
}

.container.home .home .class-list li.hover.class-item .class-menu { border-color: #f5f2ec; height: 180px; }
.container.home .home .class-list li.hover.class-item.owner .class-setting { height: 80px; }

.container.home .home .class-list .class-menu ul {
	font-size: 13px;
	margin: 4px;
}

.container.home .home .class-list .class-menu li {
	list-style: none;
	float: left;
	cursor: pointer;
	display: block;
	width: 95px;
	height: 65px;
	padding: 7px 0 13px 0;
	text-align: center;
}

.container.home .home .class-list .class-menu li p.title { color: #646464; }
.container.home .home .class-list .class-menu li:hover p.title { color: #000; }
.container.home .home .class-list .class-menu p.title a {
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	margin: 0 auto 5px auto;
    -webkit-transition: background .1s ease-in-out;
    -moz-transition: background .1s ease-in-out;
    -ms-transition: background .1s ease-in-out;
    -o-transition: background .1s ease-in-out;
    transition: background .1s ease-in-out;
}

.container.home .home .class-list .class-menu li:hover p.title a { background: #ffde38; }

.container.home .home .class-list .class-menu li p.title span.ico { display: block; width: 50px; height: 50px; margin: 0 auto; background-image: url(/assets/img/sp/sp_layout.png?v=1661943444); background-repeat: no-repeat; }
.container.home .home .class-list .class-menu li p.title a.class-board span.ico { background-position: -230px -280px; }
.container.home .home .class-list .class-menu li p.title a.class-report span.ico { background-position: -170px -330px; }
.container.home .home .class-list .class-menu li p.title a.history-manager span.ico { background-position: -110px -330px; }
.container.home .home .class-list .class-menu li p.title a.bulk-input span.ico { background-position: -290px -280px; }
.container.home .home .class-list .class-menu li p.title a.public-note span.ico { background-position: -120px -270px; }
.container.home .home .class-list .class-menu li p.title a.chalkboard span.ico { background-position: -350px -350px; }
.container.home .home .class-list li.class-item.owner .class-menu li:hover p.title a.class-board span.ico { background-position: -290px -340px; }
.container.home .home .class-list .class-menu li:hover p.title a.class-report span.ico { background-position: -390px -170px; }
.container.home .home .class-list .class-menu li:hover p.title a.history-manager span.ico { background-position: -390px -110px; }
.container.home .home .class-list .class-menu li:hover p.title a.bulk-input span.ico { background-position: -390px 0; }
.container.home .home .class-list .class-menu li:hover p.title a.public-note span.ico { background-position: -230px -340px; }
.container.home .home .class-list .class-menu li:hover p.title a.chalkboard span.ico { background-position: 0 -410px; }
.container.home .home .class-list .class-menu li p.title span.ico-new {display: inline-block;margin:0 0 0 4px;vertical-align: text-top; width: 12px; height: 12px; background:url(/assets/img/sp/sp_layout.png?v=1661943444) -250px -120px no-repeat;}

@-webkit-keyframes blinkClassMenu {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}

@-moz-keyframes blinkClassMenu {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}

@-ms-keyframes blinkClassMenu {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}

@keyframes blinkClassMenu {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}

.container.home .home .class-list .class-menu li p.title a.class-board.blink {
	background: #ffde38;
	-webkit-animation-name: blinkClassMenu;
	-webkit-animation-duration: .7s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-name: blinkClassMenu;
	-moz-animation-duration: .7s;
	-moz-animation-iteration-count: infinite;
	animation-name: blinkClassMenu;
	animation-duration: .7s;
	animation-iteration-count: infinite;
}

.container.home .home .class-list .class-menu li:hover p.title a.class-board.blink {
	-webkit-animation: none;
	-moz-animation: none;
	animation: none;
}

.container.home .home .class-list .class-menu li p.title a.class-board.blink span.ico { background-position: -290px -340px; }

.container.home .home .class-list li.class-item.not-owner .class-menu li.only-owner { opacity: 0.5; }
.container.home .home .class-list li.class-item.not-owner .class-menu li:hover.only-owner p.title { color: #646464; }
.container.home .home .class-list li.class-item.not-owner .class-menu li:hover.only-owner p.title a { background: inherit; }

.container.home .home .class-list .class-setting { background: #f5f2ec;	border-radius: 0 0 10px 10px; overflow: hidden; }
.container.home .home .class-list .class-setting p.title { line-height: 24px; padding: 5px 10px 2px 10px; color: #434343; font-size: 13px; font-weight: bold; }
.container.home .home .class-list .class-setting p.title span.ico {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 5px;
	margin-bottom: 2px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -200px -90px no-repeat;
	vertical-align: middle;
}

.container.home .home .class-list .class-setting ol { padding: 0 0 0 20px; }
.container.home .home .class-list .class-setting li {
	cursor: pointer;
	float: left;
	min-width: 123px;
	padding: 0 5px;
	border-radius: 2px;
	line-height: 22px;
	color: #464646;
	list-style-type: disc;
	list-style-position: inside;
	font-size: 12px;
	font-weight: normal;
}

.container.home .home .class-list .class-setting li:hover { background: #e7e6e1; color: #464646; }

.container.home .home .class-list p.section-desc span.ico.favorite {
    display: inline-block;
	width: 18px;
	height: 18px;
	margin: 1px 3px 0 3px;
	padding: 0;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -70px -240px no-repeat;
	vertical-align: bottom;
}

.container.home .home .class-list p.section-desc {
	display: none;
	line-height: 18px;
	color: #9c938b;
	padding: 5px 21px;
}

.container.home .home .class-list.favorite { margin-bottom : 10px; }
.container.home .home .class-list.favorite.desc p.section-desc { display: block; }
.container.home .home .class-list.favorite li.class-item .class-info a.btn-favorite { display: inline-block; }


.container.home .home .contents-footer {
    position: fixed;
	display: block;
    bottom: 175px;
    left: 0;
	width: 100%;
	height: 110px;
    z-index: 9;
}

.container.home .home .contents-list {
	display: block;
	width: 950px;
	height: 70px;
	line-height: 70px;
	margin: 0 auto;
    padding: 20px 0;
    background: #f1f0eb;
	color: #6d655e;
	font-size: 18px;
	overflow: hidden;
}

.container.home .home .contents-list li {
	cursor: pointer;
	float: left;
	width: 310px;
	height: 70px;
	border-right: 1px solid #bfbeba;
	text-align: center;
	list-style: none;
}

.container.home .home .contents-list li:first-child span.text { margin-left: 10px; }
.container.home .home .contents-list li:last-child { border-right: none; }

.container.home .home .contents-list li span.icon {
	display: inline-block;
	width: 70px;
	height: 54px;
	margin: 8px 0;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) no-repeat;
	vertical-align: middle;
}

.container.home .home .contents-list li.quick-guide-content span.icon { background-position: -450px -370px; }
.container.home .home .contents-list li.teaching-guide-content span.icon { background-position: -450px -310px; }
.container.home .home .contents-list li.resources-content span.icon { background-position: -440px -250px; }

.container.home .home .contents-list li span.text { margin-right: 10px; }

.container.home .home .side-menu {
	width: 180px;
	float: left;
}

.container.home .home .side-menu .teacher-info {
	cursor: pointer;
	width: 180px;
	text-align: center;
}

.container.home .home .side-menu .teacher-info .ico-teacher {display:inline-block;width:70px;height:70px;margin:0 55px 5px 55px;background:url(/assets/img/sp/sp_layout.png?v=1661943444) 0 -140px no-repeat;}

.container.home .home .side-menu .teacher-info .username {
	font-size: 14px;
	font-weight: bold;
	color: #7b340f;
}

.container.home .home .side-menu .menu {
	margin-top: 10px;
}

.container.home .home .side-menu .menu a {cursor:pointer;display:none;width:180px;text-align:center;color:#464646;font-weight:bold;}
.container.home .home .side-menu .menu a:hover {color:#ffcd34;}
.container.home .home .side-menu .menu a.btn-add-class span {display:block;width:27px;height:27px;margin:15px auto 5px auto;background:url(/assets/img/sp/sp_layout.png?v=1661943444) -140px -110px no-repeat;}
.container.home .home .side-menu .menu a:hover.btn-add-class span {background-position:-170px -110px;}
.container.home .home .side-menu .menu a.btn-class123-guide {color:#2aaf9e;}
.container.home .home .side-menu .menu a:hover.btn-class123-guide {color:#ffcd34;}
.container.home .home .side-menu .menu a.btn-class123-guide span {display:block;width:27px;height:27px;padding-right:3px;margin:15px auto 5px auto;background:url(/assets/img/sp/sp_layout.png?v=1661943444) -200px -200px no-repeat;}
.container.home .home .side-menu .menu a:hover.btn-class123-guide span {background-position:-40px -220px;}
.container.home .home .side-menu .menu a.btn-100percent-usage {color:#2aaf9e;}
.container.home .home .side-menu .menu a:hover.btn-100percent-usage {color:#ffcd34;}
.container.home .home .side-menu .menu a.btn-100percent-usage span {display:block;width:29px;height:29px;margin:15px auto 5px auto;background:url(/assets/img/sp/sp_layout.png?v=1661943444) -200px -230px no-repeat;}
.container.home .home .side-menu .menu a:hover.btn-100percent-usage span {background-position:-250px 0;}


.container.home .home li .my-class div.btn-edit {
	position: absolute;
	top: 10px;
	right: 10px;
}

.container.home .home li .my-class div.btn-archive {
	position: absolute;
	top: 10px;
	left: 10px;
}

.container.home .home li .my-class div.classname {
	position: absolute;
	bottom: 15px;
	left: 20px;
	width: 182px;
	padding: 5px;
	text-align: center;
	font-size: 15px;
	font-weight: bolder;
	border-radius: 15px;
    z-index: 9;
}

.container.home .home li .my-class div.classname span {
    display: inline-block;
    background: rgba(255, 255, 255, 0.85);
    background: #ffffff \0/IE8;
    padding: 5px 10px;
    border-radius: 10px;
    behavior: url(/assets/css/PIE.htc);
}

.container.home .home li .my-class div.classname.uneditabled {
	top: 100px;
}

.container.home .home li.course-event {
	cursor: pointer;
	display: block;
	position: relative;
	border: 1px solid #888;
	border-radius: 3px;
	width: 230px;
	height: 184px;
	behavior: url(/assets/css/PIE.htc);
	overflow: hidden;
}

.container.home .home li.course-event .event-item-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.3;
}

.container.home .home li.course-event .event-item {
    width: 100%;
    height: 100%;

    -webkit-transition-property: all;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

.container.home .home li.course-event .event-item.top {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

.container.home .home li.course-event .event-item.bottom {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.container.home .home li.course-event .event-item.left {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.container.home .home li.course-event .event-item.right {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.container.home .home li.course-event .event-item.top.on,
.container.home .home li.course-event .event-item.bottom.on {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.container.home .home li.course-event .event-item.left.on,
.container.home .home li.course-event .event-item.right.on {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.container.home .home li.course-event .close-area {
    position:absolute;top:162px;width:220px;height:24px;background:rgba(0, 0, 0, 0.3);color:#fff;padding-right:10px;line-height:24px;cursor:pointer;text-align:right;
}

.container.home .home .add-class-form {
	position: absolute;
	top: 150px;
	left: 294px;
	width: 412px;
	z-index: 20;
	background: #fff;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}

.container.home .home .add-class-form.copy {
    width: 406px;
    padding-bottom: 5px;
}

.container.home .home .add-class-form dl.title {
	line-height: 40px;
	margin-bottom: 3px;
	padding: 5px 0 0 18px;
	border-bottom: 1px solid #e0e0e0;
	color: #00ba96;
	font-size: 15px;
	text-align: left;
}

.container.home .home .add-class-form dt input {
	float: left;
	width: 131px;
	height: 40px;
	line-height: 40px;
	margin: 5px 2px;
	background: #fff;
	font-size: 14px;
	text-align: center;
	box-shadow: none;
}

.container.home .home .add-class-form dd input {
	width: 234px;
	height: 40px;
	line-height: 40px;
	margin: 5px 2px;
	padding: 0 10px;
	background: #f5f5f5;
	font-size: 14px;
	text-align: left;
}

.container.home .home .add-class-form.copy dd input {
    width: 229px;
}

.container.home .home .add-class-form dd select {
	width: 254px;
	height: 40px;
	line-height: 40px;
	margin: 5px 2px;
	padding: 5px 10px;
	background: #f5f5f5;
	font-size: 14px;
	text-align: center;
}

.container.home .home .add-class-form.copy dd select {
    width: 241px;
}

.container.home .home .add-class-form .close {
	position: absolute;
	top: -5px;
	right: -30px;
}

.container.home .home .add-class-form.copy {
	top: 80px;
	left: 575px;
}

.container.home .home .add-class-form .copy-class-form {
	display: none;
}

.container.home .home .add-class-form.copy .copy-class-form {
	display: block;
	margin: 2px 2px 5px 2px;
	border-radius: 3px;
	background: #ffd51e;
	padding: 3px;
}

.container.home .home .add-class-form dl.title {
}

.container.home .home .add-class-form.copy dl.title {
	display: block;
	margin: 2px;
	padding: 7px;
	font-weight: bold;
	background: #ddd;
	border-radius: 3px;
}

.container.home .home .add-class-form .copy-class-form dl {
	line-height: 20px;
	padding: 2px 5px;
	font-weight: bold;
}

.container.home .home .add-class-form .copy-class-form dl.desc {
	color: #888;
	font-weight: normal;
}

.container.home .home .add-class-form .copy-class-form select.wide {
	width: 230px;
	background: #fff;
}

.container.home .home .setup-class-form {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
}

.container.home .home .bulk-input-class-form {
	position: absolute;
	top: 100px;
	left: 345px;
	width: 252px;
	/*height: 167px;*/
	z-index: 20;
	background: #b3b3b3;
	border: 1px solid #888;
	border-radius: 4px;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
	padding: 3px;
	behavior: url(/assets/css/PIE.htc);
}

.container.home .home .bulk-input-class-form dl {
	margin-bottom: 3px;
}

.container.home .home .bulk-input-class-form .close {
	position: absolute;
	top: -14px;
	right: -14px;
}

.container.home .home .bulk-input-class-form .select-class-form {
	display: block;
	margin: 2px 2px 5px 2px;
	border: 1px solid #888;
	border-radius: 3px;
	background: #ffd51e;
	padding: 3px;
}

.container.home .home .bulk-input-class-form .select-class-form dl {
	line-height: 20px;
	padding: 2px 5px;
	font-weight: bold;
}

.container.home .home .bulk-input-class-form .select-class-form dl.desc {
	color: #888;
	font-weight: normal;
}

.container.home .home .bulk-input-class-form .select-class-form select.wide {
	width: 230px;
}

/* class@home */
.btn-class {position:relative;}

/* add-class-form@home */
a.btn-register-class {cursor:pointer;display:block;overflow:hidden;position:relative;height:60px;line-height:60px;margin-top:5px;background:#e8e8e8;color:#333;font-size:16px;text-align: center;}
a.btn-register-class.valid {background:#ffce38;color:#7d563d;}
a.btn-register-class.valid:hover {background:#ffde38;}

.container.home .home .add-class-form dd input.count { width: 30px; line-height: 24px; margin-right: 4px; margin-bottom: 10px; display: inline-block; color: #7d563d; background: #dddbd1; }

.add-class-form.copy a.btn-register-class { height: 52px; }


/* setup@home */
.container .setup {
	width: 100%;
}

.container .setup > .tab {
	height: 34px;
	padding: 0 10px;
	background: #e8e5dc;
}

.container.report.on-board > .report {
	margin-bottom: 0;
}

.container.report.on-board.gender > .report {
	background: none;
}

.container.report.on-board .setup {
	padding: 0 0 20px 0;
}

.container.report.on-board .setup > .tab {
	padding-top: 10px;
	border-radius: 10px 10px 0 0;
}

.container.report.on-board > .close {
	position: fixed;
	top: 12px;
	right: 50%;
	margin-right: -470px;
	padding: 4px;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.1);
}

.container.report.on-board > .close a.btn-close {
	display: block;
	width: 16px;
	height: 16px;
	background-position: -180px -270px;
}

.container.report.on-board > a.btn-top {
	display: none;
}

.container.report.on-board .tab a.tab-setup._tab-setup-class-info,
.container.report.on-board .tab a.tab-setup._tab-setup-class-share-info { display: none; }

.container .setup .footer {
	min-height: 30px;
	margin-top: 10px;
	text-align: right;
}

.container .setup .body-section {
	position: relative;
	margin: 0 20px;
	padding: 18px 0;
	border-radius: 0 10px 10px 10px;
	font-size: 13px;
}

.container .setup .body-section.class-info,
.container .setup .body-section.class-share-info {
	margin-top: 10px;
	border-radius: 10px;
	background: #fff;
}

.container .setup .body-section.class-info dl {
	clear: both;
	height: 40px;
	line-height: 36px;
}

.container .setup .body-section.class-info dt {
	float: left;
	width: 200px;
	text-align: right;
	margin: 0 20px 0 120px;
	font-size: 14px;
	font-weight: bold;
	border-bottom: 1px solid #fff;
}

.container .setup .body-section.class-info dd {
	float: left;
	border-bottom: 1px solid #fff;
}

.container .setup .body-section.class-info dd label {
	margin-right: 10px;
}

.ie8 .container .setup .body-section.class-info dd label {
	padding-left: 4px;
}

.container .setup .body-section.class-info .share-parents-info {
	position: relative;
	width: 640px;
	margin: 30px auto 5px auto;
	padding: 5px 0;
	border: 2px solid #ddd;
	border-radius: 6px;
	color: #7f4500;
	text-align: center;
}

.container .setup .body-section.class-info .share-parents-info dt {
	padding-left: 0;
	width: 160px;
}

.container .setup .body-section.class-info .share-parents-info dl { height: 30px; line-height: 30px; }

.container .setup .body-section.class-info .share-parents-info .section-title {
	width: 350px;
	margin: -15px auto 10px auto;
	background: #fff;
	text-align: center;
	line-height: 20px;
	font-weight: bold;
}

.container .setup .body-section.class-info .share-parents-info .section-title span.text {
	padding: 0 10px 0 20px;
	background: #fff;
}

.container .setup .body-section.class-info .share-parents-info .section-title a.more-info {
	position: relative;
	padding-right: 10px;
	background: #fff;
}

.container .setup .body-section.class-info .share-parents-info .section-title a.more-info span.ico {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 1px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -530px -110px no-repeat;
	vertical-align: top;
}

.container .setup .body-section.class-info .share-parents-info .section-title a:hover.more-info span.ico {
	background-position: -510px -110px;
}

.container .setup .body-section.class-info .share-parents-info ul {
	display: inline-block;
	min-width: 260px;
    line-height: 36px;
	padding: 0;
    list-style: none;
    text-align: left;
}

.container .setup .body-section.class-info .share-parents-info ul li p { padding-left: 30px; }
.container .setup .body-section.class-info .share-parents-info ul li label { color: #555; }
.container .setup .body-section.class-info .share-parents-info ul li p label { margin-right: 30px; }
.container .setup .body-section.class-info .share-parents-info ul li.depth2 {
	display: none;
	line-height: 24px;
	margin-bottom: 20px;
}

.container .setup .body-section.class-info .share-parents-info ul li.depth2.open { display: block; }

.container .setup .body-section.class-info a.btn-download-parents-code {
	float: right;
	height: 18px;
	line-height: 18px;
	margin-right: 140px;
	padding: 0 3px;
	border-bottom: 1px solid #beab9e;
	border-radius: 0;
	background: none;
	font-size: 13px;
}

.container .setup .body-section.class-info .share-parents-info .section-title a.more-info span.desc {
	position: absolute;
	display: none;
	top: -16px;
	left: 27px;
	width: 360px;
	padding: 5px 8px;
	border: 2px solid #ffba44;
	border-radius: 5px;
	background: #fff;
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
	text-align: left;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.container .setup .body-section.class-info .share-parents-info .section-title a:hover.more-info span.desc {
	display: block;
	visibility: visible !important;
}

.container .setup .body-section.class-info .share-parents-info .section-title a.more-info span.desc:after {
    position: absolute;
    top: 50%;
    right: 100%;
    border: 2px solid transparent;
    content: " ";
    height: 0;
    width: 0;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 5px;
    margin-top: -5px;
}

.container .setup .body-section.class-info .share-parents-info .section-title a.more-info span.desc:before {
    position: absolute;
    top: 50%;
    right: 100%;
    border: 2px solid transparent;
    content: " ";
    height: 0;
    width: 0;
    pointer-events: none;
    border-color: rgba(255, 186, 68, 0);
    border-right-color: #ffba44;
    border-width: 8px;
    margin-top: -8px;
}

.container .setup .body-section.class-share-info p { line-height: 24px; }
.container .setup .body-section.class-share-info dt {
	display: inline-block;
	width: 200px;
	text-align: right;
	line-height: 35px;
	margin: 0 20px;
	font-weight: bold;
	border-bottom: 1px solid #fff;
	vertical-align: top;
}

.container .setup .body-section.class-share-info dd { display: inline-block; border-bottom: none; }
.container .setup .body-section.class-share-info input { display: inline-block; width: 440px; }
.container .setup .body-section.class-share-info a { height: 25px; line-height: 25px; vertical-align: top; border-top-color: #fff; }
.container .setup .body-section.class-share-info p.desc { color: #7f4500; }

.container .setup .body-section.class-share-info dl.class-share-form { height: 56px; padding: 0 0 16px 0; border-radius: 4px; }
.container .setup .body-section.class-share-info dl.class-share-status,
.container .setup .body-section.class-share-info dl.class-share-list { display: inline-block; height: auto; margin-top: 5px; }
.container .setup .body-section.class-share-info dl ul,
.container .setup .body-section.class-share-info dl ul { list-style: none; padding: 3px; }
.container .setup .body-section.class-share-info dl li { line-height: 30px; }
.container .setup .body-section.class-share-info dl ul span.name { color: #333; font-weight: bold; }
.container .setup .body-section.class-share-info dl ul span.email { color: #888; letter-spacing: 0; margin-left: 10px; }
.container .setup .body-section.class-share-info dl ul a.btn-share-disconnect { cursor: pointer; display: none; line-height: 30px; color: #7f4500; font-weight: bold; border-bottom: 1px solid #7f4500; margin-left: 10px; }
.container .setup .body-section.class-share-info dl ul a.btn-share-disconnect.owner { display: inline; }

.container.not-owner .setup .body-section.class-share-info dl.class-share-form { display: none; }
.container.owner .setup .body-section.class-share-info dl.class-share-status { display: none; }

.container .setup a._editable {
	display: inline-block;
	width: 238px;
	height: 34px;
	line-height: 32px;
	border: 1px solid #808080;
	border-radius: 3px;
	padding: 0 5px 0 5px;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
	background: #e8e8e8;
	color: #000;
}

.container .setup select {
	width: 250px;
	height: 34px;
	border: none;
	background: #eee;
	box-shadow: none;
	-webkit-box-shadow: none;
}

.container .setup input[type='text'] {
	display: block;
	border: none;
	background: #eee;
	width: 238px;
	height: 34px;
	box-shadow: none;
	-webkit-box-shadow: none;
}

.container .setup ul.desc {
	color: #a99a8a;
	list-style: disc;
	font-size: 12px;
	font-weight: normal;
	line-height: 16px;
	padding-left: 15px;
	margin-top: 8px;
}

.container .setup .add-students ul.desc { width: 185px; }
.container .setup .manage-students ul.desc { width: 640px; }

.container .setup .body-section.class-info .class-img-selector {
	width: 350px;
}

.container .setup .body-section.class-info .class-img-selector .label {
	display: block;
	margin: 10px auto;
	text-align: center;
	font-weight: bold;
}

.container .setup .body-section.class-info .class-img-selector .btn {
	margin: 46px 11px 46px 11px;
	float: left;
}

.container .setup .body-section.class-info .bg-class {
	width: 226px;
	height: 135px;
	border: 1px solid #888;
	border-radius: 0;
	margin: 0 11px 0 11px;
	float: left;
	overflow: hidden;
}

.container .setup .body-section.students-info {
	padding: 0 0 10px 0;
	font-size: 15px;
	font-weight: bold;
}

.container .setup .body-section.students-info .add-students {
	display: inline-block;
	margin-left: 15px;
	vertical-align: top;
}

.container .setup .body-section.students-info .label {
	line-height: 48px;
	padding: 0 10px;
	color: #7f4500;
	font-size: 16px;
}

.container .setup .body-section.students-info .label.student-archive { padding: 0 10px; color: #9c938b; font-size: 13px; }
.container .setup .body-section.students-info div:hover.label.student-archive { color: #515151; }

.container .setup .body-section.activity-cards .tab {
	display: inline-block;
	width: 180px;
	vertical-align: top;
}

.container .setup .body-section.students-info .manage-students {
	display: block;
	vertical-align: top;
	margin-top: 3px;
}

.container .setup .body-section.students-info .manage-students .form-area {
	padding: 12px 8px;
	border: none;
	border-radius: 6px;
	background: #fff;
}

.container .setup .body-section.students-info .manage-students .form-area.manage p.tabs {
	padding: 2px 12px;
}

.container .setup .body-section.students-info .manage-students .form-area.manage p.tabs span.title {
	margin-right: 20px;
	line-height: 18px;
	color: #3a3939;
	font-size: 13px;
	font-weight: bold;
}

.container .setup .body-section.students-info .manage-students .form-area.manage p.tabs label {
	margin-right: 20px;
	color: #9c938b;
	font-size: 13px;
	font-weight: normal;
}

.ie8 .container .setup .body-section.students-info .manage-students .form-area.manage p.tabs label {
	padding-left: 4px;
}

.container .setup .body-section.students-info .manage-students .form-area.manage p.tabs a {
	cursor: pointer;
	display: inline-block;
	min-width: 80px;
	height: 26px;
	line-height: 26px;
	margin: 0 5px;
	padding: 0 10px;
	border: 1px solid #d6d6d6;
	border-radius: 26px;
	color: #555;
	font-size: 13px;
	text-align: center;
}

.container .setup .body-section.students-info .manage-students .form-area.manage p.tabs a:hover {
	color: #7f4500;
	background: #ffde38;
	border-color: #ffde38;
}

.container .setup .body-section.students-info .manage-students .form-area.manage p.tabs span.right { float: right; }
.container .setup .body-section.students-info .manage-students .form-area.manage p.tabs span.right label { margin-right: 10px; }

.container .setup .body-section.students-info .manage-students .form-area.manage p.tabs a.tab:hover,
.container .setup .body-section.students-info .manage-students .form-area.manage p.tabs a.tab.selected {
	color: #515151;
}

.container .setup .body-section.students-info .manage-students .form-area.manage p.tabs a.tab:hover span.ico,
.container .setup .body-section.students-info .manage-students .form-area.manage p.tabs a.tab.selected span.ico {
	background-position: -510px -90px;
}

.container .setup .body-section.students-info .manage-students .item-area {
	display: inline-block;
	min-height: 200px;
	padding-left: 12px;
	margin-top: 16px;
}

.container.on-board .setup .body-section.students-info .manage-students .item-area {
	overflow-y: scroll;
}

.container .setup .body-section .form-area .import-form  {
	position: absolute;
	top: 48px;
	left: 462px;
	color: #333;
	font-size: 13px;
	font-weight: normal;
	width: 350px;
	border: 1px solid #ffde38;
	background: #fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.container .setup .body-section .form-area .import-form  p.title {
	padding-left: 12px;
	line-height: 40px;
	border-bottom: 1px solid #ddd;
	font-size: 14px;
	color: #27bc97;
}

.container .setup .body-section .form-area .import-form  ul.class-list {
	list-style: none;
	padding: 0;
	max-height: 180px;
	overflow-y: scroll;
}

.container .setup .body-section .form-area .import-form  ul.class-list li {
	cursor: pointer;
	position: relative;
	line-height: 40px;
	padding-left: 10px;
}

.container .setup .body-section .form-area .import-form  ul.class-list li span.text {
	display: block;
	width: 200px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container .setup .body-section .form-area .import-form  ul.class-list li:nth-child(odd) { background: #f8f8f8; }

.container .setup .body-section .form-area .import-form  ul.class-list li:hover {
	background: #ddd;
	font-weight: bold;
}

.container .setup .body-section .form-area .import-form  ul.class-list li a {
	position: absolute;
	top: 0;
	right: 0;
    display: none;
    width: 120px;
    height: 26px;
    line-height: 26px;
    margin: 7px 5px;
    padding: 0 10px;
    border-radius: 26px;
    background: #fff;
    color: #555;
    font-size: 13px;
    text-align: center;
}

.container .setup .body-section .form-area .import-form  ul.class-list li:hover a {
	display: block;
}

.container .setup .body-section.students-info .manage-students .tabs a:hover { color: #000; border-bottom-color: #787772; }

.container .setup .body-section.students-info .manage-students .bg-avatar {
	cursor: pointer;
	position: relative;
	float: left;
	margin: 5px 4px;
	display: block;
	width: 100px;
	height: 150px;
}

.container .setup .body-section.students-info .manage-students .bg-avatar.disabled, .container .setup .body-section.students-info .manage-students .bg-avatar.disabled img {
	-ms-filter: grayscale(100%) brightness(80%) progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* IE 7 and olders */
	-moz-filter: grayscale(100%) brightness(80%);
	-webkit-filter: grayscale(100%) brightness(80%);
	-o-filter: grayscale(100%) brightness(80%);
	filter: gray brightness(80%) progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* IE 8 */
	opacity: 0.5;
}

.container .setup .body-section.students-info .manage-students .circle {
	display: block;
	width: 100px;
	height: 100px;
	background: #f0eee4;
	border-radius: 100px;
	overflow: hidden;
}

.container .setup .body-section.students-info .manage-students .circle img.image {
	margin-top: -5px;
	margin-left: -5px;
}

.container .setup .body-section.students-info .manage-students.avatar .circle img.image {
	margin-top: -20px;
}

.container .setup .body-section.students-info .manage-students .circle a.avatar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
	border-radius: 100px;
	background: #000;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE 7 and olders */
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE 8 */
	background: rgba(0, 0, 0, 0);
    -webkit-transition: background .1s ease-in-out;
    -moz-transition: background .1s ease-in-out;
    -ms-transition: background .1s ease-in-out;
    -o-transition: background .1s ease-in-out;
    transition: background .1s ease-in-out;
	z-index: 9;
}

.container .setup .body-section.students-info .manage-students .bg-avatar:hover .circle a.avatar {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); /* IE 7 and olders */
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70); /* IE 8 */
	background: rgba(0, 0, 0, 0.7);
}

.container .setup .body-section.students-info .manage-students .circle a.avatar span.ico {
	display: none;
	width: 24px;
	height: 24px;
	margin: 28px 38px 7px 38px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -550px -90px no-repeat;
}

.container .setup .body-section.students-info .manage-students .circle a.avatar span.text {
	display: none;
	color: #fff;
	font-size: 13px;
	text-align: center;
	line-height: 12px;
}

.container .setup .body-section.students-info .manage-students .bg-avatar:hover .circle a.avatar span {
	display: block;
}

.container .setup .body-section.students-info .manage-students .bg-avatar .circle.uploading a.avatar {
	display: none;
}

.container .setup .body-section.students-info .manage-students .circle input[type=file] {
	display: none;
}

.container .setup .body-section.students-info .manage-students .bg-avatar.add-student .circle a.avatar span,
.container .setup .body-section.students-info .manage-students .bg-avatar.print-student .circle a.avatar span {
	display: block;
}

.container .setup .body-section.students-info .manage-students .bg-avatar.add-student .circle a.avatar span.ico {
	background-position: -450px -90px;
}

.container .setup .body-section.students-info .manage-students .bg-avatar.print-student .circle a.avatar span.ico {
	width: 26px;
	background-position: -150px 0;
}

.container .setup .body-section.students-info .manage-students .bg-avatar.add-student .circle a.avatar span.text,
.container .setup .body-section.students-info .manage-students .bg-avatar.print-student .circle a.avatar span.text {
	color: #515151;
}

.container .setup .body-section.students-info .manage-students .bg-avatar.add-student:hover .circle a.avatar span {
	background-position: -480px -90px;
}

.container .setup .body-section.students-info .manage-students .bg-avatar.print-student:hover .circle a.avatar span {
	background-position: -180px 0;
}

.container .setup .body-section.students-info .manage-students .bg-avatar.add-student:hover .circle a.avatar span.text,
.container .setup .body-section.students-info .manage-students .bg-avatar.print-student:hover .circle a.avatar span.text {
	color: #fff;
}

.container .setup .body-section.students-info .manage-students .circle canvas {
	position: absolute;
	top: -5px;
	left: -5px;
	-webkit-filter: brightness(0.5);
	-moz-filter: brightness(0.5);
	-ms-filter: brightness(0.5);
	-o-filter: brightness(0.5);
	filter: brightness(0.5);
	z-index: 2;
}

.container .setup .body-section.students-info .manage-students .circle canvas,
.container .setup .body-section.students-info .manage-students .circle img.uploading,
.container .setup .body-section.students-info .manage-students .circle.uploading img.image {
	display: none;
}

.container .setup .body-section.students-info .manage-students .circle span.progress {
	position: absolute;
	display: none;
	top: 0;
	width: 100%;
	height: 100%;
	background: #f0eee4;
	opacity: 0.5;
    -webkit-transition: height .1s;
    -moz-transition: height .1s;
    -ms-transition: height .1s;
    -o-transition: height .1s;
    transition: height .1s;
    z-index: 5;
}

.container .setup .body-section.students-info .manage-students .circle span.uploading {
	position: absolute;
	display: none;
	top: 41px;
	left: 41px;
	width: 18px;
	height: 18px;
	background: url(/assets/img/img_loading_18.png?v=1661943444) 0 0 no-repeat;
	-webkit-animation: showLoading 80s linear infinite;
	-moz-animation: showLoading 80s linear infinite;
	-ms-animation: showLoading 80s linear infinite;
	-o-animation: showLoading 80s linear infinite;
	animation: showLoading 80s linear infinite;
	z-index: 6;
}

.container .setup .body-section.students-info .manage-students .circle.uploading canvas,
.container .setup .body-section.students-info .manage-students .circle.uploading span.progress {
	display: block;
}

.container .setup .body-section.students-info .manage-students .circle.uploading span.uploading {
	display: block;
}

.container .setup .body-section.students-info .manage-students .circle span.drag-guide {
	position: absolute;
	display: block;
	top: -1px;
	left: -1px;
	width: 90px;
	height: 90px;
	border: 6px solid transparent;
	border-radius: 100px;
	font-weight: normal;
	text-align: center;
	-webkit-transition: all .1s;
	-moz-transition: all .1s;
	-ms-transition: all .1s;
	-o-transition: all .1s;
	transition: all .1s;
	z-index: 1;
}

.container .setup .body-section.students-info .manage-students.avatar .circle span.drag-guide,
.container .setup .body-section.students-info .manage-students .circle.uploading span.drag-guide {
	display: none;
}

.container .setup .body-section.students-info .manage-students .circle span.drag-guide span.text {
	display: none;
	color: #aaa;
	font-size: 12px;
	line-height: 15px;
	padding: 2px 5px;
	margin: 14px 0 5px 0;
	border-bottom: 1px solid #ccc;
}

.container .setup .body-section.students-info .manage-students .circle span.drag-guide span.desc {
	display: none;
	color: #bbb;
	font-size: 11px;
	line-height: 12px;
}

.container .setup .body-section.students-info .manage-students .circle.no-image span.drag-guide span.text {
	display: inline-block;
}

.container .setup .body-section.students-info .manage-students .circle.no-image span.drag-guide span.desc {
	display: block;
}

.container .setup .body-section.students-info .manage-students .circle.dragging span.drag-guide {
	border-style: dotted;
	border-color: #d0ccc4;
	background: rgba(80, 152, 224, 0);
}

.container .setup .body-section.students-info .manage-students .circle.dragging.hover span.drag-guide {
	border-color: #5098e1;
	background: rgba(80, 152, 224, 0.4);
}

.container .setup .body-section.students-info .manage-students .circle.dragging.hover span.drag-guide span {
	color: #5098e1;
}

.container .setup .body-section.students-info .manage-students .circle.dragging.hover span.drag-guide span.text {
	border-bottom-color: #5098e1;
}

.ie8 .container .setup .body-section.students-info .manage-students .circle.no-image span.drag-guide span.text,
.ie9 .container .setup .body-section.students-info .manage-students .circle.no-image span.drag-guide span.text {
	border-bottom: none;
	margin: 35px 0;
}

.ie8 .container .setup .body-section.students-info .manage-students .circle.no-image span.drag-guide span.desc,
.ie9 .container .setup .body-section.students-info .manage-students .circle.no-image span.drag-guide span.desc {
	display: none;
}

.container .setup .body-section.students-info .manage-students .circle span.gender {
	position: absolute;
	bottom: -30px;
	width: 100%;
	height: 25px;
	line-height: 25px;
	text-align: center;
	font-size: 12px;
	opacity: 0.9;
	-webkit-transition: all .1s;
	-moz-transition: all .1s;
	-ms-transition: all .1s;
	-o-transition: all .1s;
	transition: all .1s;
}

.container .setup .body-section.students-info .manage-students.show-gender .circle span.gender {
	bottom: 0;
	display: none;
}

.container .setup .body-section.students-info .manage-students.show-gender .circle span.drag-guide span.text {
	margin-top: 8px;
	margin-bottom: 3px;
}

.container .setup .body-section.students-info .manage-students.show-gender .circle span.drag-guide.no-gender span.text {
	margin-top: 14px;
	margin-bottom: 5px;
}

.container .setup .body-section.students-info .manage-students.show-gender .circle span.gender.male {
	display: block;
	background: #65d709;
	background: #d0d0d0;
	color: #000;
}

.container .setup .body-section.students-info .manage-students.show-gender .circle span.gender.female {
	display: block;
	background: #ffce38;
	background: #808080;
	color: #000;
	color: #fff;
}

.container .setup .body-section.students-info .manage-students .close {
	position: absolute;
	display: none;
	top: 5px;
	right: 7px;
	z-index: 10;
}

.container .setup .body-section.students-info .manage-students .bg-avatar:hover .close {
	display: block;
}

.container .setup .body-section.students-info .manage-students .bg-avatar.disabled .close { display: none; }
.container .setup .body-section.students-info .manage-students .bg-avatar.disabled .circle a.avatar { display: none; }

.container .setup .body-section.students-info .manage-students .name {
	text-align: center;
	line-height: 16px;
	margin-top: 7px;
}

.container .setup .body-section.students-info .manage-students .name p {
	cursor: pointer;
	color: #000;
	font-size: 13px;
	font-weight: normal;
	border: none;
	display: block;
	display: -webkit-box;
	width: 100px;
	max-height: 48px;
	overflow-y: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-bottom: 2px;
}

.container .setup .body-section.students-info .manage-students .name span.num {
	margin-right: 3px;
	/*color: #b37a36;*/
	font-weight: bold;
	font-family: 'Open Sans', Helvetica, Arial, tahoma, verdana, arial, sans-serif;
	letter-spacing: 0em;
}

.container .setup .body-section.students-info .manage-students .bg-avatar:hover .name p span.name {
	text-decoration: underline;
}

.container .setup .body-section .archive {
	position: absolute;
	top: 0;
	right: 18px;
	font-weight: normal;
}

.container .setup .body-section.activity-cards .archive { top: 18px; }

.container .setup .body-section .archive .label {
	cursor: pointer;
}

.container .setup .body-section.activity-cards {
	font-size: 15px;
	font-weight: bold;
}

.container .setup .body-section .form-area.cards {
	display: inline-block;
	width: 720px;
	background: #fff;
}

.container .setup .body-section.activity-cards .manage-cards .cards .buttons {
	height: 36px;
	text-align: right;
}

.container .setup .body-section.activity-cards .manage-cards .cards .buttons a {
	cursor: pointer;
	display: inline-block;
	min-width: 80px;
	height: 26px;
	line-height: 26px;
	margin: 0 5px;
	padding: 0 10px;
	border: 1px solid #d6d6d6;
	border-radius: 26px;
	color: #555;
	font-size: 13px;
	font-weight: normal;
	text-align: center;
}

.container .setup .body-section.activity-cards .manage-cards .cards .buttons a:hover {
	color: #7f4500;
	background: #ffde38;
	border-color: #ffde38;
}

.container .setup .body-section.activity-cards .manage-cards .cards .buttons a.tab:hover,
.container .setup .body-section.activity-cards .manage-cards .cards .buttons a.tab.selected {
	color: #515151;
}

.container .setup .body-section.activity-cards .manage-cards .cards .buttons a.tab:hover span.ico,
.container .setup .body-section.activity-cards .manage-cards .cards .buttons a.tab.selected span.ico {
	background-position: -510px -90px;
}

.container .setup .body-section.activity-cards .manage-cards .item-area {
	min-height: 242px;
	border: none;
	margin: 0 9px;
	padding: 3px 3px 10px 3px;
	background: #fff;
    -webkit-transition: height .3s ease-in-out;
    -moz-transition: height .3s ease-in-out;
    -ms-transition: height .3s ease-in-out;
    -o-transition: height .3s ease-in-out;
    transition: height .3s ease-in-out;
    overflow-y: auto;
}

.container .setup .body-section.activity-cards .manage-cards .tab .tab-item {
	margin-left: 5px;
	text-align: left;
}

.container .setup .body-section.activity-cards .manage-cards .tab .buttons {
	height: 30px;
	margin-right: 15px;
	text-align: right;
}

.container .setup .body-section.activity-cards .manage-cards .tab input[type='checkbox'] {
	vertical-align: middle;
	margin: 3px;
}

.container .setup .body-section.activity-cards .manage-cards .tab label {
	cursor: pointer;
	font-size: 12px;
}

.container .setup .body-section.activity-cards .manage-cards .item-area .guide {
	width: 690px;
	height: 40px;
	font-size: 14px;
	color: #888;
	line-height: 40px;
	margin: 8px;
	padding-left: 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	vertical-align: top;
 	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.container .setup .body-section.activity-cards .manage-cards .item-area .text-guide {
	vertical-align: top;
}

.container .setup .body-section.activity-cards .manage-cards .item-area .link-guide {
	margin-left: 10px;
	background: #50C70E;
	border-radius: 7px;
	padding: 5px 10px 5px 10px;
	vertical-align: top;
	font-size: 13px;
	color: #fff;
}

.container .setup .body-section.activity-cards .manage-cards .item-area .card {
	position: relative;
	cursor: pointer;
	display: block;
	float: left;
	width: 330px;
	height: 50px;
	line-height: 50px;
	margin: 7px 8px;
	border-radius: 6px;
}

.container .setup .body-section.activity-cards .manage-cards .item-area .card img {
	margin: 9px;
	vertical-align: middle;
}

.container .setup .body-section.activity-cards .manage-cards .item-area .card span.text {
	display: inline-block;
	max-width: 260px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	font-weight: normal;
	vertical-align: top;
}

@-webkit-keyframes hideEffectOnSetup {
   0% { -webkit-transform: scale(1); }
   60%, 100% { -webkit-transform: scale(.1); }
}

@-moz-keyframes hideEffectOnSetup {
   0% { -moz-transform: scale(1); }
   60%, 100% { -moz-transform: scale(.1); }
}

@-ms-keyframes hideEffectOnSetup {
   0% { -ms-transform: scale(1); }
   60%, 100% { -ms-transform: scale(.1); }
}

@-o-keyframes hideEffectOnSetup {
   0% { -o-transform: scale(1); }
   60%, 100% { -o-transform: scale(.1); }
}

@keyframes hideEffectOnSetup {
   0% { transform: scale(1); }
   60%, 100% { transform: scale(.1); }
}

.container .setup .body-section.students-info .manage-students .item-area.hide-effect,
.container .setup .body-section.activity-cards .manage-cards .item-area.hide-effect { overflow-y: visible; }

.container .setup .body-section.students-info .manage-students .item-area .bg-avatar.hide-effect,
.container .setup .body-section.activity-cards .manage-cards .item-area .card.hide-effect {
	-webkit-transform-origin: top left;
	-moz-transform-origin: top left;
	-ms-transform-origin: top left;
	-o-transform-origin: top left;
	transform-origin: top left;
	-webkit-animation: hideEffectOnSetup .5s linear 1;
	-moz-animation: hideEffectOnSetup .5s linear 1;
	-ms-animation: hideEffectOnSetup .5s linear 1;
	-o-animation: hideEffectOnSetup .5s linear 1;
	animation: hideEffectOnSetup .5s linear 1;
}
/*
.container .setup .body-section.activity-cards .manage-cards .item-area .card.wow { background: #5098e1; }
.container .setup .body-section.activity-cards .manage-cards .item-area .card.nono { background: #f14c31; }
*/
.container .setup .body-section.activity-cards .manage-cards .item-area .card.wow { background: #cae0f6; }
.container .setup .body-section.activity-cards .manage-cards .item-area .card.nono { background: #fbc9c1; }

.container .setup .body-section.activity-cards .manage-cards .item-area a.btn-add-own-card {
	position: relative;
	cursor: pointer;
	display: block;
	float: left;
	width: 328px;
	height: 48px;
	line-height: 48px;
	margin: 7px 8px;
	border: 2px solid transparent;
	border-radius: 6px;
	text-align: center;
	font-weight: normal;
	opacity: 0.7;
}

.container .setup .body-section.activity-cards .manage-cards .item-area a.btn-add-own-card.wow { color: #5098e1; border-color: #5098e1; }
.container .setup .body-section.activity-cards .manage-cards .item-area a.btn-add-own-card.nono { color: #f14c31; border-color: #f14c31; }
.container .setup .body-section.activity-cards .manage-cards .item-area a:hover.btn-add-own-card { opacity: 1.0; }

.container .setup .body-section.activity-cards .manage-cards .item-area a.btn-add-own-card span.ico {
	display: inline-block;
	width: 19px;
	height: 19px;
	margin: 14px 8px 15px 0;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -490px -150px no-repeat;
	vertical-align: top;
	opacity: 0.7;
}

.container .setup .body-section.activity-cards .manage-cards .item-area a.btn-add-own-card span.text { margin-right: 10px; }

.container .setup .body-section.activity-cards .manage-cards .item-area .card .close { top: -20px; right: -8px; }
.container .setup .body-section.activity-cards .manage-cards .item-area .card p.desc {
	display: inline-block;
	margin-top: 44px;
	padding: 7px;
	line-height: 16px;
	border: none;
	background: transparent;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	resize: none;
	overflow: hidden;
	letter-spacing: 0;
}

.container .setup .body-section.activity-cards .manage-cards .item-area .card textarea {
	margin: 25px 8px 0 6px;
	padding: 4px;
	font-size: 13px;
	font-weight: bold;
	width: 100px;
	height: 88px;
	border: 1px solid #888;
	background: #fff;
	color: #333;
	resize: none;
}

.container .setup .body-section.activity-cards .manage-cards .item-area .card .category-image {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	width: 263px;
	height: 44px;
	padding: 0 2px 0 8px;
	line-height: 42px;
	font-size: 13px;
	color: #333;
	background: #fff;
}

.container .setup .body-section.activity-cards .manage-cards .item-area .card .category-image img {
	vertical-align: middle;
	margin-right: 5px;
}

.container .setup .body-section.activity-cards .manage-cards .item-area .card .category-image span.ico.recommended {display:inline-block;vertical-align:middle;width:14px;height:19px;margin-left:7px;background:url(/assets/img/sp/sp_layout.png?v=1661943444) -40px -270px no-repeat;}

.container .setup .body-section.activity-cards .manage-cards .item-area .card .hit-area {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    border-radius: 6px;
    opacity: 0;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE 7 and olders */
}

.container .setup .body-section.activity-cards .manage-cards .item-area .card .hit-area span.category {
	display: inline-block;
	min-width: 32px;
	height: 32px;
	line-height: 32px;
	margin: 9px;
	padding: 0 8px;
	background: #fff;
	border-radius: 32px;
	color: #84b7ea;
	font-size: 13px;
	text-align: center;
}

.container .setup .body-section.activity-cards .manage-cards .item-area .card.wow .hit-area span.category { color: #5098e1; }
.container .setup .body-section.activity-cards .manage-cards .item-area .card.nono .hit-area span.category { color: #f14c31; }

.container .setup .body-section.activity-cards .manage-cards .item-area .card .hit-area a.btn-setting {
	position: absolute;
	display: none;
	top: 13px;
	right: 10px;
	line-height: 24px;
	color: #fff;
	font-size: 14px;
}

.container .setup .body-section.activity-cards .manage-cards .item-area .card .hit-area a.btn-setting span.ico {
	width: 24px;
	height: 24px;
	margin-left: 10px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -550px -90px no-repeat;
	vertical-align: top;
}

.container .setup .body-section.activity-cards .manage-cards .item-area .card:hover.wow .hit-area { background: #84b7ea; }
.container .setup .body-section.activity-cards .manage-cards .item-area .card:hover.nono .hit-area { background: #f5816e; }

.container .setup .body-section.activity-cards .manage-cards .item-area .card:hover .hit-area {
	opacity: 0.95;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95); /* IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95); /* IE 7 and olders */
}

.container .setup .body-section.activity-cards .manage-cards .item-area .card:hover .hit-area a.btn-setting {
	display: block;
}

.container .setup .body-section.activity-cards .manage-cards .item-area .card.disabled {
    position:relative;
	-moz-filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%) progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* IE 7 and olders */
	opacity: 0.5;
}

.container .setup .body-section.activity-cards .manage-cards .item-area .card.disabled img,
.container .setup .body-section.activity-cards .manage-cards .item-area .card.disabled div {
    filter: gray progid:DXImageTransform.Microsoft.Alpha(Opacity=70); /* IE 8 */
}

.container .setup .body-section.activity-cards .manage-cards .item-area .card.disabled .close {
	display: none;
}

.container .setup .body-section.activity-cards .label {
	line-height: 36px;
	padding: 0 10px;
	color: #7f4500;
	font-size: 16px;
}

.container .setup .body-section.activity-cards .label.feedback-archive { padding: 0 10px; color: #9c938b; font-size: 13px; }
.container .setup .body-section.activity-cards div:hover.label.feedback-archive { color: #515151; }

.container .setup .body-section.students-info .label.student-archive.hide-effect,
.container .setup .body-section.activity-cards .label.feedback-archive.hide-effect {
	color: #000;
	-webkit-filter: brightness(0.7);
	-moz-filter: brightness(0.7);
	-ms-filter: brightness(0.7);
	-o-filter: brightness(0.7);
	filter: brightness(0.7);
}

/* feedback-quick-setup@home */
.container .feedback-quick-setup {
	position: fixed;
	top: 45px;
	left: 50%;
	width: 800px;
	height: 480px;
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	-o-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	background: #fff;
	border-radius: 4px;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
	overflow: hidden;
	z-index: 30;
}

.container .feedback-quick-setup .header {
	width: 800px;
	height: 50px;
	background: #ffde38;
}

.container .feedback-quick-setup .header .title {
	width: 165px;
	height: 50px;
	float: left;
	color: #7f4500;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	line-height: 50px;
}

.container .feedback-quick-setup .header .tab {
	position: relative;
	top: 20px;
	float: left;
	text-align: center;
	vertical-align: bottom;
}

.container .feedback-quick-setup .header .tab .tab-item {
	float: left;
}

.container .feedback-quick-setup .desc {
	display: inline-block;
	background: #f0eee4;
	padding: 10px;
	border-radius: 5px;
	width: 760px;
	margin: 5px 10px 5px 10px;
}

.container .feedback-quick-setup .form-area {
	margin: 0 0 10px 6px;
	font-size: 13px;
}

.container .feedback-quick-setup .form-area .card {
	float: left;
	background: #f2f2f2;
	padding: 2px;
	border-radius: 5px;
	width: 379px;
	margin: 5px;
}

.container .feedback-quick-setup .form-area .title {
	width: 363px;
	float: left;
	font-weight: bold;
	padding: 2px 15px 2px 5px;
	margin: 5px;
}

.container .feedback-quick-setup .form-area .title-good-card {
	color: #ff0000;
}

.container .feedback-quick-setup .form-area .title-bad-card {
	color: #0000ff;
}

.container .feedback-quick-setup .body.import-cards .form-area div {
	width: 775px;
}

.container .feedback-quick-setup .form-area ul {
	padding: 0;
	height: 220px;
	overflow-y: scroll;
	overflow-x: hidden;
	margin: 3px;
}

.container .feedback-quick-setup .form-area label {
	cursor: pointer;
}

.container .feedback-quick-setup .form-area dl.selected {
	background: #ddd;
	margin: 0 5px 0 0;
}

.container .feedback-quick-setup .form-area dd {
	line-height: 30px;
	margin-left: 10px;
}

.container .feedback-quick-setup .form-area dd img {
	vertical-align: middle;
	margin-right: 5px;
	margin-bottom: 2px;
}

.container .feedback-quick-setup .form-area dd input {
	vertical-align: middle;
	margin-right: 5px;
	cursor: pointer;
}

.container .feedback-quick-setup .form-area dd span {
	font-weight: bold;
	margin-right: 3px;
}

.container .feedback-quick-setup .footer {
	position: absolute;
	top: 430px;
	right: 9px;
	height: 50px;
	width: 415px
}

/* feedback-recommend-setup@home */
.container .feedback-recommend-setup {
	position: fixed;
	top: 25px;
	left: 50%;
	width: 810px;
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	-o-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	background: #fff;
	border: 5px solid #aaa;
	border-radius: 10px;
	padding: 10px;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
	z-index: 30;
	font-size: 13px;
}

.container .feedback-recommend-setup .header {
	margin-bottom: 5px;
	color: #27bc97;
	border-bottom: 1px solid #ccc;
}

.container .feedback-recommend-setup .header .title {
	font-size: 13px;
	padding: 8px;
	font-weight: bold;
}

.container .feedback-recommend-setup .desc {
	display: inline-block;
	background: #f2f2f2;
	padding: 10px;
	border-radius: 5px;
	width: 772px;
	margin: 5px 10px 5px 10px;
}

.container .feedback-recommend-setup .form-area {
	margin: 0 0 10px 6px;
	font-size: 13px;
}

.container .feedback-recommend-setup .form-area .card {
	float: left;
	background: #f2f2f2;
	padding: 2px;
	border-radius: 5px;
	width: 385px;
	margin: 5px;
}

.container .feedback-recommend-setup .form-area .title {
	width: 363px;
	float: left;
	font-weight: bold;
	padding: 2px 15px 2px 5px;
	margin: 5px;
}

.container .feedback-recommend-setup .form-area .title-good-card {
	color: #5098e1;
}

.container .feedback-recommend-setup .form-area .title-bad-card {
	color: #f14c31;
}

.container .feedback-recommend-setup .body.import-cards .form-area div {
	width: 775px;
}

.container .feedback-recommend-setup .form-area ul {
	padding: 0;
	height: 220px;
	overflow-y: scroll;
	overflow-x: hidden;
	margin: 3px;
}

.container .feedback-recommend-setup .form-area label {
	cursor: pointer;
}

.container .feedback-recommend-setup .form-area dl.selected {
	background: #ddd;
	margin: 0 5px 0 0;
}

.container .feedback-recommend-setup .form-area dd {
	line-height: 32px;
	margin-left: 5px;
}

.container .feedback-recommend-setup .form-area dd img {
	vertical-align: middle;
	margin-right: 5px;
	margin-bottom: 2px;
}

.container .feedback-recommend-setup .form-area dd input {
	vertical-align: middle;
	margin-right: 5px;
	cursor: pointer;
}

.container .feedback-recommend-setup .form-area dd span {
	font-weight: bold;
	margin-right: 3px;
}

.container .feedback-recommend-setup .footer {
	text-align: right;
	height: 36px;
}

/* sub-setup@home */
.container .sub-setup {
	position: fixed;
	top: 5%;
	left: 50%;
	width: 760px;
	height: 90%;
	margin-left: -380px;
	color: #606060;
	z-index: 30;
}

.container .sub-setup .wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 760px;
	max-height: 100%;
	margin: -15px;
	background: #fff;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
	z-index: 1;
	font-size: 13px;
	overflow-x: hidden;
	overflow-y: auto;
}

.container .sub-setup.restore-course {
	top: 150px;
	left: 340px;
	margin-top: 0;
	margin-bottom: 0;
}

.container .sub-setup.add-member {
	width: 400px;
	margin-left: -200px;
}

.container .sub-setup.add-member .wrapper {
	width: 400px;
	overflow-y: hidden;
}

.container .sub-setup.edit-member {
	width: 600px;
	margin-left: -300px;
}

.container .sub-setup.edit-member .wrapper {
	width: 600px;
}

.container .sub-setup label {
	cursor: pointer;
	display: inline-block;
}

.container .sub-setup .header {
	color: #27bc97;
	margin-bottom: 5px;
	border-bottom: 1px solid #ddd;
}

.container .sub-setup .header.recommend { color: #547ed8; }

.container .sub-setup .header .title {
	line-height: 40px;
	padding: 5px 0 0 18px;
	font-size: 15px;
}

.container .sub-setup .body {
	margin: 0 0 6px 6px;
}

.container .sub-setup .body p {
	line-height: 40px;
	padding-left: 18px;
	padding-right: 10px;
}

.container .sub-setup .body.edit-default-avatar-kind p { text-align: center; line-height: 24px; }
.container .sub-setup .body.edit-default-avatar-kind p.desc { clear: both; font-weight: normal; font-size: 13px; color: #ef5d68; }

.container .sub-setup .body.edit-default-avatar-kind ul { list-style: none; width: 660px; margin: 0 auto; padding: 0; }
.container .sub-setup .body.edit-default-avatar-kind li { cursor: pointer; float: left; width: 270px; padding: 15px; margin: 15px; border-radius: 6px; text-align: center; }
.container .sub-setup .body.edit-default-avatar-kind li:hover { background: #fdda19; }
.container .sub-setup .body.edit-default-avatar-kind li.selected,
.container .sub-setup .body.edit-default-avatar-kind li:hover.selected { background: #eee; }
.container .sub-setup .body.edit-default-avatar-kind li a.button { font-family: 'Open Sans', Helvetica, Arial, tahoma, verdana, arial, sans-serif; letter-spacing: 0em; }

.container .sub-setup .body p.form-desc {
	color: #888;
	padding-left: 190px;
}

.container .sub-setup .body p.buttons {
	padding: 0;
	text-align: right;
}

.container .sub-setup .body p.buttons a.full {
	cursor: pointer;
	display: block;
	height: 60px;
	line-height: 60px;
	margin-top: 20px;
	background: #ffce38;
	color: #7f4500;
	font-size: 15px;
	text-align: center;
}

.container .sub-setup .body p.buttons a.full:hover {
	background: #ffde38;
}

.container .sub-setup .body p.buttons a.full.disabled {
	background: #ccc;
	color: #515151;
}

.container .sub-setup .body p input {
	margin: 3px;
	vertical-align: middle;
}

.container .sub-setup .body p input[type='text'] {
	width: 558px;
	background: #eee;
	border: none;
	box-shadow: none;
	-webkit-box-shadow: none;
}

.container .sub-setup .body.add-feedback p input[type='text'],
.container .sub-setup .body.edit-feedback p input[type='text'] { width: 528px; }

.container .sub-setup .body.add-feedback span.sample {
	color: #999;
	font-style: italic;
}

.container .sub-setup .body.add-feedback a.btn-show-examples {
	cursor: pointer;
	display: inline-block;
	min-width: 80px;
	height: 26px;
	line-height: 26px;
	margin: 0 25px 0 10px;
	padding: 0 10px;
	border: 1px solid #d6d6d6;
	border-radius: 26px;
	color: #555;
	font-size: 13px;
	text-align: center;
}

.container .sub-setup .body.add-feedback a.btn-show-examples:hover {
	color: #fff;
	background: #999;
	border-color: #999;
}

.container .sub-setup .body.add-feedback .samples {
	position: absolute;
	display: none;
	bottom: 80px;
	right: 135px;
	width: 400px;
	height: 270px;
	border: 1px solid #ffde38;
	background: #fff;
	box-shadow: 0 0 7px rgba(0, 0, 0 ,0.2);
}

.container .sub-setup .body.add-feedback .samples p.sample-title {
	line-height: 32px;
	padding-left: 12px;
	border-bottom: 1px solid #e6e6e6;
	color: #27bc97;
}

.container .sub-setup .body.add-feedback .samples .close {
	top: 8px;
	right: 8px;
}

.container .sub-setup .body.add-feedback .samples .close a.btn-close {
	width: 18px;
	height: 18px;
	background-position: -260px -160px;
}

.container .sub-setup .body.add-feedback .samples .close a.btn-close:hover { background-position:-230px -180px; }

.container .sub-setup .body p span.title {
	display: inline-block;
	width: 140px;
	margin: 0 10px;
	vertical-align: top;
}

.container .sub-setup .body p label { margin: 9px 5px 9px 0; padding-right: 5px; font-weight: normal; letter-spacing: 0; }
.container .sub-setup .body p label.tab {
	cursor: pointer;
	line-height: 28px;
	display: inline-block;
	background: #ccc;
	margin: 3px 0 0 3px;
	padding: 0 20px;
}

.container .sub-setup .body p label:hover.tab { background: #fdda19; }

.container .sub-setup .body p label.tab.selected,
.container .sub-setup .body p label:hover.tab.selected { cursor: normal; background: #eee; }

.container .sub-setup .add-feedback ul.category-list,
.container .sub-setup .edit-feedback ul.category-list {
	height: 140px;
	margin-top: -35px;
	padding-left: 183px;
}

.container .sub-setup .add-feedback ul.category-list li,
.container .sub-setup .edit-feedback ul.category-list li {
	line-height: 32px;
	width: 70px;
	padding: 5px;
	border: 2px solid #ddd;
	border-radius: 8px;
	margin: 3px;
	float: left;
	list-style: none;
	cursor: pointer;
}

.container .sub-setup .add-feedback ul.category-list li.selected,
.container .sub-setup .edit-feedback ul.category-list li.selected {
	background: #ddd;
}

.container .sub-setup .add-feedback ul.category-list li img,
.container .sub-setup .edit-feedback ul.category-list li img {
	vertical-align: middle;
	margin-right: 5px;
}

.container .sub-setup .add-feedback ul.sample-list {
	height: 238px;
	padding-left: 0;
	overflow-y: scroll;
}

.container .sub-setup .add-feedback ul.sample-list li {
	cursor: pointer;
	list-style: none;
	line-height: 32px;
	padding-left: 18px;
}

.container .sub-setup .add-feedback ul.sample-list li img { vertical-align: middle; margin: 4px 0; }
.container .sub-setup .add-feedback ul.sample-list li span.category { margin: 0 5px; font-weight: bold; }
.container .sub-setup .add-feedback ul.sample-list li:hover { background: #eee; }

.container .sub-setup .print-label ul {
	display: inline-block;
	width: 565px;
	margin: 5px 5px 5px 176px;
	padding: 0;
	border-radius: 5px;
	min-height: 100px;
}

.container .sub-setup .print-label li {
	display: inline-block;
	width: 126px;
	list-style: none;
	background: #f2f2f2;
	border: none;
	margin: 1px 4px;
	padding: 3px;
	font-weight: normal;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container .sub-setup .print-label li:hover { background: #ffde38; }
.container .sub-setup .print-label li.empty {
	width: 220px;
}

.container .sub-setup .print-label label {
	display: inline-block;
	font-weight: normal;
	vertical-align: top;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container .sub-setup .print-label li label {
	max-width: 130px;
}

.container .sub-setup .print-label .desc {
	font-weight: normal;
	color: #888;
}

.container .sub-setup .print-label .desc.label {
	display: block;
	width: 120px;
	line-height: 15px;
	margin: -8px 0 0 40px;
	padding: 17px 0;
	border: 1px solid #bbb;
	text-align: center;
	font-size: 12px;
	letter-spacing: 0;
	vertical-align: top;
}

.container .sub-setup .print-label .desc.label span.size-title { display: block; margin-bottom: 5px; font-size: 11px; font-weight: bold; }
.container .sub-setup .print-label .desc.label span.size { display: block; font-weight: normal; }

.container .sub-setup .restore-course li {
}

.container .sub-setup ul.genders,
.container .sub-setup ul.archived {
	display: inline-block;
	margin: 0 0 10px 10px;
	width: 574px;
	border-radius: 5px;
	padding: 0 5px;
	overflow-y: auto;
}

.container .sub-setup ul.genders,
.container.home .sub-setup ul.archived {
	width: 724px;
}

.container .sub-setup ul.archived li {
	cursor: pointer;
	display: inline-block;
	width: 260px;
	width: 254px \0/IE8;
	height: 38px;
	line-height: 38px;
	margin: 1px 3px;
	padding-left: 10px;
	border: 1px dashed #c1bdb2;
	border-radius: 4px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	background: #fff;
	color: #9c938b;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.container.home .sub-setup ul.archived li {
	width: 336px;
	width: 330px \0/IE8;
}

.container .sub-setup ul.archived li.empty {
	cursor: default;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
}

.container .sub-setup ul.archived li a.btn-delete {
	cursor: pointer;
	float: right;
	display: block;
	height: 38px;
	line-height: 38px;
	margin: 0 10px 0 5px;
	padding: 0;
	color: #69583f;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}

.container .sub-setup ul.archived li a.btn-delete span.ico {
	opacity: 0.4;
	width: 15px;
	height: 15px;
	margin-right: 3px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -350px -50px no-repeat;
	vertical-align: text-top;
}

.container .sub-setup ul.archived li a.btn-delete span.text {display:none;}

.container .sub-setup ul.archived li a.btn-restore {
	min-width: 0;
	height: 38px;
	line-height: 38px;
	padding: 0;
	margin: 0 5px;
	background: none;
	color: #69583f;
}

.container .sub-setup ul.archived li a.btn-restore span.ico {
	opacity: 0.4;
	background-position: -90px -430px;
}

.container .sub-setup ul.archived li a.btn-restore span.text { display: none; }

.container .sub-setup ul.archived li.hover { border: 1px solid #a19d92; box-shadow: 0 0 1px rgba(0, 0, 0, 0.4); }
.container .sub-setup ul.archived li.hover span.title { color: #69583f; }
.container .sub-setup ul.archived li.hover a.btn-restore span.ico { opacity: 1.0; }
.container .sub-setup ul.archived li.hover a.btn-restore span.text { display: inline; }

.container .sub-setup ul.archived li.hover.delete { border: 1px solid #f9f9f9; background: #f9f9f9; box-shadow: none; }
.container .sub-setup ul.archived li.hover.delete span.title { opacity: 0.5; }
.container .sub-setup ul.archived li.hover.delete a.btn-restore span.ico { opacity: 0.4; }
.container .sub-setup ul.archived li.hover.delete a.btn-restore span.text { display: none; }
.container .sub-setup ul.archived li.hover.delete a.btn-delete span.ico { opacity: 1.0; }
.container .sub-setup ul.archived li.hover.delete a.btn-delete span.text { display: inline; }

.container .sub-setup .body.add-member .form-area.add {
	width: 296px;
	margin: 10px auto;
}

.container .sub-setup .body.add-member .form-area.textarea.add {
	height: 220px;
	overflow-x: hidden;
	overflow-y: scroll;
}

@media screen and (min-height: 560px) {
	.container .sub-setup .body.add-member .form-area.textarea.add { height: 320px; }
}

@media screen and (min-height: 660px) {
	.container .sub-setup .body.add-member .form-area.textarea.add { height: 420px; }
}

@media screen and (min-height: 760px) {
	.container .sub-setup .body.add-member .form-area.textarea.add { height: 520px; }
}

@media screen and (min-height: 860px) {
	.container .sub-setup .body.add-member .form-area.textarea.add { height: 620px; }
}

.container .sub-setup .body.add-member textarea {
	width: 274px;
	height: 3000px;
    line-height: 30px;
	padding: 0 10px;
	border: none;
    border-radius: 6px;
    background: url(/assets/img/bg/bg-textarea-30.png?v=1661943444);
    font-size: 14px;
	overflow: hidden;
	resize: none;
}

.container .sub-setup .body.add-member ul.desc {
	color: #a99a8a;
	list-style: none;
	font-size: 13px;
	font-weight: normal;
	line-height: 21px;
	padding-left: 15px;
	margin-top: 8px;
}

.container .sub-setup .body.add-member .buttons { text-align: center; }

.container .sub-setup .body.add-member a.btn-add-students {
	cursor: pointer;
	display: block;
	width: 100%;
	height: 60px;
	line-height: 60px;
	padding: 0;
	margin-top: 10px;
	margin-bottom: 0;
	border: none;
	border-radius: 0;
	background: #f5f5f5;
	color: #333;
}

.container .sub-setup .body.add-member a.btn-add-students:hover {
	background: #ffde38;
	color: #7f4500;
}

.container .sub-setup .body.edit-member p input[type='text'].member-name { width: 264px; }
.container .sub-setup .body.edit-member p input[type='text'].course-number { width: 104px; }
.container .sub-setup .body.edit-member p span.title { text-align: center; width: 80px; margin: 0; }

.container .sub-setup .body.edit-member .hide-form {
	position: absolute;
	top: -35px;
	right: 16px;
}

.container .sub-setup .body.edit-member .hide-form a.btn-hide {
	cursor: pointer;
	padding: 0 2px;
	color: #9c938b;
	font-size: 13px;
    border-bottom: 1px solid #ccc;
}

.container .sub-setup .body.edit-member .hide-form a.btn-hide:hover {
	color: #515151;
    border-bottom-color: #9c938b;
}

.container .sub-setup .body.edit-member .image-form {
	min-height: 125px;
	margin: 0 10px 5px 10px;
	border-bottom: 1px solid #eee;
}

.container .sub-setup .body.edit-member .image-form dl {
	float: left;
	width: 290px;
	height: 100px;
	margin: 10px 0;
}

.container .sub-setup .body.edit-member .image-form dl dt {
	float: left;
	width: 140px;
	margin: 0 10px;
}

.container .sub-setup .body.edit-member .image-form dl dt span.title {
	display: block;
	line-height: 36px;
	padding: 0 2px;
	font-size: 13px;
	font-weight: bold;
}

.container .sub-setup .body.edit-member .image-form dl dt a.btn-change {
	cursor: pointer;
	position: relative;
	display: inline-block;
	line-height: 24px;
	padding: 0 12px;
	border: 1px solid #c1bdb2;
	border-radius: 4px;
	font-size: 12px;
	letter-spacing: 0;
	overflow: hidden;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

.container .sub-setup .body.edit-member .image-form dl dt a:hover.btn-change {
	background: #c1bdb2;
	color: #fff;
}

.container .sub-setup .body.edit-member .image-form dl dt a.btn-change input[type=file] {
	cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    font-size: 20px;
    direction: ltr;
}

.container .sub-setup .body.edit-member .image-form dl dd {
	float: left;
}

.container .sub-setup .body.edit-member .image-form dl.photo-form dd {
	position: relative;
}

.container .sub-setup .body.edit-member .image-form dl .circle {
	position: relative;
	display: block;
	width: 100px;
	height: 100px;
	background: #f0eee4;
	border-radius: 100px;
	overflow: hidden;
}

.container .sub-setup .body.edit-member .image-form dl .circle canvas {
	position: absolute;
	top: -5px;
	left: -5px;
	-webkit-filter: brightness(0.5);
	-moz-filter: brightness(0.5);
	-ms-filter: brightness(0.5);
	-o-filter: brightness(0.5);
	filter: brightness(0.5);
}

.container .sub-setup .body.edit-member .image-form dl .circle img.image {
	margin-top: -5px;
	margin-left: -5px;
}

.container .sub-setup .body.edit-member .image-form dl .circle canvas,
.container .sub-setup .body.edit-member .image-form dl .circle img.uploading,
.container .sub-setup .body.edit-member .image-form dl .circle.uploading img.image {
	display: none;
}

.container .sub-setup .body.edit-member .image-form dl .circle span.progress {
	position: absolute;
	display: none;
	top: 0;
	width: 100%;
	height: 100%;
	background: #f0eee4;
	opacity: 0.5;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* IE 7 and olders */
    -webkit-transition: height .1s;
    -moz-transition: height .1s;
    -ms-transition: height .1s;
    -o-transition: height .1s;
    transition: height .1s;
    z-index: 2;
}

.container .sub-setup .body.edit-member .image-form dl .circle span.uploading {
	position: absolute;
	display: none;
	top: 41px;
	left: 41px;
	width: 18px;
	height: 18px;
	background: url(/assets/img/img_loading_18.png?v=1661943444) 0 0 no-repeat;
	-webkit-animation: showLoading 80s linear infinite;
	-moz-animation: showLoading 80s linear infinite;
	-ms-animation: showLoading 80s linear infinite;
	-o-animation: showLoading 80s linear infinite;
	animation: showLoading 80s linear infinite;
	z-index: 3;
}

.container .sub-setup .body.edit-member .image-form dl .circle.uploading canvas,
.container .sub-setup .body.edit-member .image-form dl .circle.uploading span.progress {
	display: block;
}

.container .sub-setup .body.edit-member .image-form dl .circle.uploading span.uploading {
	display: block;
}

.container .sub-setup .body.edit-member .image-form dl.avatar-form .circle img.image {
	margin-top: -20px;
}

.container .sub-setup .body.edit-member .image-form dl.photo-form .circle span.drag-guide {
	position: absolute;
	display: block;
	top: -1px;
	left: -1px;
	width: 90px;
	height: 90px;
	border: 6px solid transparent;
	border-radius: 100px;
	font-weight: normal;
	text-align: center;
	-webkit-transition: all .1s;
	-moz-transition: all .1s;
	-ms-transition: all .1s;
	-o-transition: all .1s;
	transition: all .1s;
	z-index: 1;
}

.container .sub-setup .body.edit-member .image-form dl.photo-form .circle.uploading span.drag-guide {
	display: none;
}

.container .sub-setup .body.edit-member .image-form dl.photo-form .circle span.drag-guide span.text {
	display: none;
	color: #aaa;
	font-size: 12px;
	line-height: 15px;
	padding: 2px 5px;
	margin: 14px 0 5px 0;
	border-bottom: 1px solid #ccc;
}

.container .sub-setup .body.edit-member .image-form dl.photo-form .circle span.drag-guide span.desc {
	display: none;
	color: #bbb;
	font-size: 11px;
	line-height: 12px;
}

.container .sub-setup .body.edit-member .image-form dl.photo-form .circle.no-image span.drag-guide span.text {
	display: inline-block;
}

.container .sub-setup .body.edit-member .image-form dl.photo-form .circle.no-image span.drag-guide span.desc {
	display: block;
}

.ie8 .container .sub-setup .body.edit-member .image-form dl.photo-form .circle.no-image span.drag-guide span.text,
.ie9 .container .sub-setup .body.edit-member .image-form dl.photo-form .circle.no-image span.drag-guide span.text {
	border-bottom: none;
	margin: 35px 0;
}

.ie8 .container .sub-setup .body.edit-member .image-form dl.photo-form .circle.no-image span.drag-guide span.desc,
.ie9 .container .sub-setup .body.edit-member .image-form dl.photo-form .circle.no-image span.drag-guide span.desc {
	display: none;
}

.container .sub-setup .body.edit-member .image-form dl.photo-form .circle.dragging span.drag-guide {
	border-style: dotted;
	border-color: #d0ccc4;
	background: rgba(80, 152, 224, 0);
}

.container .sub-setup .body.edit-member .image-form dl.photo-form .circle.dragging.hover span.drag-guide {
	border-color: #5098e1;
	background: rgba(80, 152, 224, 0.4);
}

.container .sub-setup .body.edit-member .image-form dl.photo-form .circle.dragging.hover span.drag-guide span {
	color: #5098e1;
}

.container .sub-setup .body.edit-member .image-form dl.photo-form dd a.btn-delete {
	cursor: pointer;
	position: absolute;
	top: 5px;
	left: 75px;
	display: block;
	width: 18px;
	height: 18px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -260px -160px no-repeat;
	z-index: 1;
}

.container .sub-setup .body.edit-member .image-form dl.photo-form dd a.btn-delete:hover {
	background-position: -230px -180px;
}

.container .sub-setup .body.edit-member .change-avatar-form {
	display: none;
	width: 545px;
	margin-left: -5px;
}

.container .sub-setup .body.edit-member .change-avatar-form p { padding-left: 10px; }

.container .sub-setup ul.genders li {
	cursor: pointer;
	position: relative;
	display: inline-block;
	width: 335px;
	width: 329px \0/IE8;
	height: 38px;
	line-height: 38px;
	margin: 1px 3px;
	padding-left: 10px;
	border: 1px solid #c1bdb2;
	border-radius: 4px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	background: #fff;
	color: #9c938b;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.container .sub-setup ul.genders li.unspecified { border-color: #f1ede2; }

.container .sub-setup ul.genders li span.info {
	position: absolute;
	top: 0;
	right: 0;
}

.container .sub-setup ul.genders li span.info label {
	padding-right: 12px;
}

.container .sub-setup ul.genders li:hover { border: 1px solid #a19d92; box-shadow: 0 0 1px rgba(0, 0, 0, 0.4); }
.container .sub-setup ul.genders li:hover span.name { color: #69583f; }

.container .sub-setup .edit-member-gender a.btn-set-all {
	float: right;
	cursor: pointer;
	display: inline-block;
	line-height: 24px;
	margin: 0 5px;
	padding: 2px 10px;
	border-radius: 4px;
	background: #ffde38;
	color: #7f4500;
}

.container .sub-setup .edit-member-gender span.gender-count {
	margin-right: 15px;
	color: #9c938b;
	font-weight: normal;
}

.container .sub-setup .edit-member-gender span.gender-count span.ico {
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 3px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -200px -130px no-repeat;
	vertical-align: middle;
}

.container .sub-setup .edit-member-gender span.gender-count span.count { margin: 0 5px; color: #de6517; font-weight: bold; }

.container .sub-setup .restore-feedback li.wow { border-color: #5098e1; }
.container .sub-setup .restore-feedback li.nono { border-color: #f14c31; }
.container .sub-setup .restore-feedback li.wow.hover { border-color: #5098e1; box-shadow: 0 0 1px rgba(80, 152, 225, 0.7); }
.container .sub-setup .restore-feedback li.nono.hover { border-color: #f14c31; box-shadow: 0 0 1px rgba(241, 76, 49, 0.7); }

.container .sub-setup .restore-feedback li.wow span.title,
.container .sub-setup .restore-feedback li.wow.hover span.title { color: #5098e1; }
.container .sub-setup .restore-feedback li.nono span.title,
.container .sub-setup .restore-feedback li.nono.hover span.title { color: #f14c31; }

.container .sub-setup .edit-member ul {
	margin: -6px 5px 5px 13px;
	background: #eee;
	width: 554px;
	height: 200px;
	overflow-y: scroll;
	padding: 5px;
}

.container .sub-setup .edit-member li {
	list-style: none;
	margin-left: 0;
	float: left;
	width: 72px;
	margin: 2px;
}

.container .sub-setup .edit-member li a {
	cursor: pointer;
}

.container .sub-setup .edit-member li.selected {
	background: #ccc;
	border-radius: 5px;
}

.container .sub-setup .close {
	position: absolute;
	top: -22px;
	right: -16px;
	z-index: 2;
}

.container .sub-setup .close a.btn-close {cursor:pointer;display:inline-block;overflow:hidden;position:relative;width:25px;height:25px;background:url(/assets/img/sp/sp_layout.png?v=1661943444) -170px -420px no-repeat;}
.container .sub-setup .close a:hover.btn-close {background-position: -200px -420px;}

.container > .popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 10;
}

.container > .popup.photo {
	top: inherit;
	bottom: 0;
	left: inherit;
	right: 0;
}

.container > .popup > .wrapper {
	position: absolute;
	top: 50px;
	left: 50%;
	width: 600px;
	height: 450px;
	line-height: 1.6em;
	margin-left: -300px;
	padding: 30px 0px;
	background: #fff;
	border-radius: 12px;
	color: #515151;
	font-size: 18px;
	text-align: center;
	box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
}

.container > .popup.photo > .wrapper {
	top: inherit;
	bottom: 0;
	left: inherit;
	right: 70px;
	width: 400px;
	height: 400px;
	margin-left: 0;
	padding: 0;
}

.container > .popup.photo > .wrapper > .img-wrapper {
	position: relative;
	width: 400px;
	height: 400px;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
}

.container > .popup.stamp > .wrapper p.title span { display: block; }
.container > .popup.stamp > .wrapper p.title span.desc { font-size: 15px; }
.container > .popup.stamp > .wrapper p.title span.title { font-size: 20px; }
.container > .popup.stamp > .wrapper a.btn-open-recommendation-panel {
	cursor: pointer;
	display: inline-block;
	line-height: 50px;
	margin: 30px auto;
	padding: 0 30px;
	background: #05baab;
	border-radius: 6px;
	color: #fff;
}

.container > .popup > .wrapper .close {
	position: absolute;
	top: 0px;
	right: -30px;
}

.container > .popup > .wrapper a.btn-close {
	display: block;
	width: 25px;
	height: 25px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -170px -420px no-repeat;
}

@-webkit-keyframes showPhotoProfilePopup {
   0%, 18% { left: 0; }
   20%, 38% { left: -400px; }
   40%, 58% { left: -800px; }
   60%, 78% { left: -1200px; }
   80%, 98% { left: -1600px; }
   100% { left: -2000px; }
}

@-moz-keyframes showPhotoProfilePopup {
   0%, 18% { left: 0; }
   20%, 38% { left: -400px; }
   40%, 58% { left: -800px; }
   60%, 78% { left: -1200px; }
   80%, 98% { left: -1600px; }
   100% { left: -2000px; }
}

@-ms-keyframes showPhotoProfilePopup {
   0%, 18% { left: 0; }
   20%, 38% { left: -400px; }
   40%, 58% { left: -800px; }
   60%, 78% { left: -1200px; }
   80%, 98% { left: -1600px; }
   100% { left: -2000px; }
}

@-o-keyframes showPhotoProfilePopup {
   0%, 18% { left: 0; }
   20%, 38% { left: -400px; }
   40%, 58% { left: -800px; }
   60%, 78% { left: -1200px; }
   80%, 98% { left: -1600px; }
   100% { left: -2000px; }
}

@keyframes showPhotoProfilePopup {
   0%, 22% { left: 0; }
   25%, 47% { left: -400px; }
   50%, 72% { left: -800px; }
   75%, 97% { left: -1200px; }
   100% { left: -1600px; }
}

.container > .popup.photo > .wrapper .images {
	position: absolute;
	top: 0;
	left: 0;
	width: 2000px;
	height: 400px;
	-webkit-animation: showPhotoProfilePopup 14s linear infinite;
	-moz-animation: showPhotoProfilePopup 14s linear infinite;
	-ms-animation: showPhotoProfilePopup 14s linear infinite;
	-o-animation: showPhotoProfilePopup 14s linear infinite;
	animation: showPhotoProfilePopup 14s linear infinite;
}

.container > .popup.photo > .wrapper .images img { float: left; }

a.tab-setup {
	cursor: pointer;
	float: left;
	display: block;
	width: 235px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #9c938b;
	font-size: 13px;
	border-bottom: 4px solid transparent;
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}

a:hover.tab-setup {
	border-bottom-color: #c3bcb4;
	color: #918f8a;
	font-size: 15px;
}

a.tab-setup.step {
    cursor: default;
    position: relative;
    background: #aaa;
    color: #fff;
    border-bottom: none;
}

a.tab-setup.selected, a:hover.tab-setup.selected {
	border-bottom-color: #9c938b;
	color: #3a3939;
	font-size: 15px;
	font-weight: bold;
}

a.tab-setup.step.selected, a:hover.tab-setup.step.selected {
	background: #fff150;
	color: #7f4500;
}

a.tab-setup.step:after {
	position: absolute;
    left: 100%;
    top: 50%;
    border: 15px solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(160, 160, 160, 0);
    border-left-color: #aaa;
    border-width: 15px;
    margin-top: -15px;
    z-index: 1;
}

a.tab-setup.step.selected:after {
    border-color: rgba(255, 241, 80, 0);
    border-left-color: #fff150;
}

a.tab-setup.step:first-child {
	border-radius: 4px 0 0 4px;
}

a.tab-setup.step:last-child {
	border-radius: 0 4px 4px 0;
}

a.tab-setup.step:last-child:after {
	display: none;
}

.setup a.btn-next-step.disabled {
    cursor: default;
	-moz-filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%) progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* IE 7 and olders */
	opacity: 0.5;
}

.setup a.btn-next-step.blink { background-color: #ffde38; }
.setup a.btn-next-step.blink.disabled { background-color: #fff150; }

a.tab-add-a-good-card, a.tab-add-a-bad-card {
	cursor: pointer;
	display: block;
	height: 48px;
	line-height: 49px;
	padding-left: 10px;
	font-size: 14px;
	font-weight: normal;
	text-align: left;
	overflow: hidden;
}

a.tab-add-a-good-card span.ico, a.tab-add-a-bad-card span.ico {
	display: none;
	width: 18px;
	height: 18px;
	margin-left: 8px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -200px -240px no-repeat;
	vertical-align: text-top;
}

a:hover.tab-add-a-good-card, a:hover.tab-add-a-bad-card,
a.tab-add-a-good-card.selected, a.tab-add-a-bad-card.selected {
	font-weight: bold;
}

a:hover.tab-add-a-good-card span.ico, a:hover.tab-add-a-bad-card span.ico,
a.tab-add-a-good-card.selected span.ico, a.tab-add-a-bad-card.selected span.ico {
	display: inline-block;
}

a.tab-edit-default-card-set,
a.tab-import-cards {cursor:pointer;display:block;overflow:hidden;position:relative;padding:0 10px;border-radius:3px 3px 0 0; margin: 0 1px;height:30px;line-height:30px;background:#f2f2f2;}
a.tab-edit-default-card-set.selected,
a.tab-import-cards.selected {background:#fff;}

a.btn-next-step, a.btn-prev-step, a.btn-save, a.btn-save-and-close, a.btn-cancel, a.btn-import {cursor: pointer; display: inline-block; width: 160px; padding: 0 20px; height: 32px; line-height: 32px; background: #ffde38; border-radius: 5px; font-size: 15px; text-align: center; color: #7d563d; font-weight: bold; }
a:hover.btn-next-step, a:hover.btn-prev-step, a:hover.btn-save, a:hover.btn-save-and-close, a:hover.btn-cancel, a:hover.btn-import {background:#fff150;}
a:active.btn-next-step, a:active.btn-prev-step, a:active.btn-save, a:active.btn-save-and-close, a:active.btn-cancel, a:active.btn-import {background:#ffce38;}

.container .setup a.btn-next-step, .container .setup a.btn-prev-step,
.container .setup a.btn-save, .container .setup a.btn-save-and-close { border-top-color: #f0eee4; }

a.btn-add-students {cursor: pointer; display: inline-block; width: 160px; padding: 0 20px; height: 32px; line-height: 32px; margin-bottom: 2px; background: #fff150; border-radius: 5px; border-top: 2px solid #fff; border-bottom: 3px solid #fdda19; font-size: 15px; text-align: center; color: #7d563d; -webkit-transition: border .1s ease-in-out; -moz-transition: border .1s ease-in-out; -ms-transition: border .1s ease-in-out; -o-transition: border .1s ease-in-out; transition: border .1s ease-in-out; }
a:hover.btn-add-students {border-bottom-width: 5px; border-top-width: 0px;}
a:active.btn-add-students {border-bottom-width: 1px; border-top-width: 4px;}

a.btn-close {cursor:pointer;display:inline-block;overflow:hidden;position:relative;width:18px;height:18px;background:url(/assets/img/sp/sp_layout.png?v=1661943444) -260px -160px no-repeat;}
a:hover.btn-close {background-position: -230px -180px;}

a.btn-close-layer {cursor:pointer;display:inline-block;overflow:hidden;position:relative;width:25px;height:25px;background:url(/assets/img/sp/sp_layout.png?v=1661943444) -170px -420px no-repeat;}
a:hover.btn-close-layer {background-position: -200px -420px;}

.container .feedback-quick-setup .footer a.btn-save, .container .feedback-recommend-setup .footer a.btn-save,
.container .feedback-quick-setup .footer a.btn-save-and-close, .container .feedback-recommend-setup .footer a.btn-save-and-close {
	margin-right: 5px;
	display: block;
	float: right;
}

.container .setup .footer .step a.btn-next-step {
	display: block;
	width: 100%;
	height: 60px;
	line-height: 60px;
	padding: 0;
	border-radius: 0;
	font-size: 16px;
	font-weight: normal;
}

span.ico-close {display:inline-block;vertical-align:middle;width:14px;height:14px;border-radius:14px;margin-right:2px;background:url(/assets/img/sp/sp_layout.png?v=1661943444) -262px -162px no-repeat;}

.bg-bad-card.editable-form {cursor:pointer;}
.bg-good-card.editable-form {cursor:pointer;}

/* report */
.container.report { margin-top: 20px; }

.container.report .download-parents-code {
	position: relative;
	margin-left: 780px;
}

.container.report .frame {
	position: relative;
	width: 960px;
	height:auto !important;
	height:100%;
	min-height:100%;
}

.container.report div.report {
	display: inline-block;
}

.container.report .report-tab {
	margin: -10px 0 0 10px;
}

.container.report .report-tab .tab {
	position: relative;
	float: left;
}

.container.report .report .body {
	position: relative;
	margin: 0 auto;
	background: #fff;
}

.container.report .report .body .write-school-newsletter.input-form > .close,
.container.report .report .body > .close {
	position: absolute;
	top: -5px;
	right: -30px;
}

.container.report .report .body .write-school-newsletter.input-form > .close a.btn-close,
.container.report .report .body > .close a.btn-close {
	cursor: pointer;
	display: inline-block;
	overflow: hidden;
	position: relative;
	width: 25px;
	height: 25px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -170px -420px no-repeat;
}

.container.report .report .body.auto-scroll { padding-bottom: 10px; }
.container.report .report .body.auto-scroll.floating { padding-top: 48px; }

.container.report .report .body .top-navigator {
	position: relative;
	margin: 0;
/*	height: 45px;*/
	width: 960px;
	background: #fff;
}

.container.report .report .body.auto-scroll .top-navigator {
	top: 0;
	height: 95px;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    -ms-transition: background .3s ease-in-out;
    -o-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
	z-index: 5;
}

.container.report .report .body.auto-scroll.floating .top-navigator {
	position: fixed;
	height: 45px;
}

.container.report .report .body .page-title,
.container.report .report .body .page-header {
	line-height: 45px;
	font-size: 15px;
	font-weight: normal;
	color: #27bc97;
}

.container.report .report .body .page-title {
	border-bottom: 1px solid #f1efe7;
}

.container.report .report .body .page-header {
	position: absolute;
	left: 30px;
}

.container.report .report .body.auto-scroll.floating .top-navigator .page-title {
	display: none;
}

.container.report .report .body .page-title a,
.container.report .report .body .page-header a {
	vertical-align: top;
}

.container.report .report .body .page-title > a { padding-left: 18px; }
.container.report .report .body .page-title > a:hover { color: #27bc97; }
.container.report .report .body .page-header a { cursor: pointer; }

.container.report a.howto-video {
	position: relative;
	cursor: pointer;
	display: inline-block;
	font-size: 10px;
	color: #e59100;
	margin-left: 5px;
}

.container.report a.howto-video span.icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -310px -50px no-repeat;
	vertical-align: middle;
	margin: 3px 3px 5px 0;
}

.container.report a:hover.howto-video span.icon { background-position: -330px -50px; }

.container.report .board .panel a.btn-change-order {
	cursor: pointer;
	display: inline-block;
	font-size: 12px;
	line-height: 14px;
	margin: 10px 5px;
	border-bottom: 1px solid #aaa;
	color: #999;
}

.container.report .board .panel a.howto-video { display: block; margin: 10px; }

.container.report .report .body .page-title a.howto-video span.text { display: inline-block; color: #9c938b; letter-spacing: -0.01em; }
.container.report .report .body .page-title a:hover.howto-video span.text { display: inline-block; color: #e59100; }

.container.report .report .body .page-header .member {
	vertical-align: middle;
	display: inline-block;
	margin-left: 10px;
	font-size: 12px;
	max-width: 200px;
	border-radius: 3px;
	padding: 2px 5px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.report .report .body .page-header .member span {
	background: #ffde38;
	padding: 2px 5px;
	border: 2px solid #ffce38;
	border-radius: 4px;
}

.container.report .report .body .page-header .member .header {
	background: #fff;
	padding: 3px 7px;
	border-radius: 7px;
	border: 2px solid #ccc;
	color: #888;
}

.container.report .report .body .page-header .selectbox {
	cursor: pointer;
	vertical-align: middle;
	display: inline-block;
	background: #fff;
	box-shadow: none;
	border: 1px solid #e8e4dc;
	margin-left: 10px;
	height: 24px;
	font-size: 12px;
	border-radius: 3px;
	padding: 2px 5px;
}

.container.report .report .body .page-header .selectbox .text {
	position: relative;
	display: block;
	line-height: 24px;
	width: 156px;
	height: 24px;
	padding-right: 14px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.report .report .body .page-header .selectbox .arrow {
	position: absolute;
	right: -4px;
	top: 0px;
	width: 8px;
	height: 6px;
	margin: 9px 8px;
	background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -130px -110px no-repeat;
	opacity: 0.5;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* IE 7 and olders */
}

.container.report .report .body .page-header .selectbox .arrow.opened {
	background-position: -160px -110px;
}

.container.report .report .body .page-header div.selectbox ul {
	position: absolute;
	top: 42px;
	left: 32px;
	padding: 8px;
	display: none;
	list-style: none;
	line-height: 24px;
	background: #f8f7f2;
	border-radius: 4px;
	border: 2px solid #d1cfc8;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
	max-height: 286px;
	overflow-y: scroll;
}

.container.report .report .body .page-header .selectbox ul li {
	width: 140px;
	padding: 0 3px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.report .report .body .page-header .selectbox ul li.selected {
	background: #eee;
}

.container.report .report .body .page-header .selectbox ul li.archived {
	color: #aaa;
	font-weight: normal;
}

.container.report .report .body .page-header .selectbox ul li:hover {
	background: #ddd;
}

.container.report .report .body .page-header a.info {
	cursor: pointer;
	position: relative;
	display: inline-block;
	margin-left: 5px;
}

.container.report .report .body .page-header a.info span.icon {
	display: inline-block;
	width: 21px;
	height: 21px;
	background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -170px -150px no-repeat;
	vertical-align: middle;
	opacity: 0.5;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}

.container.report .report .body .page-header a:hover.info span.icon {
	background-position: 0 -180px;
	opacity: 1.0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.container.report .report .body .page-header a.info span.desc {
	position: absolute;
	display: none;
	top: 0;
	left: 25px;
	width: 230px;
	padding: 5px 8px;
	border: 2px solid #ffba44;
	border-radius: 5px;
	background: #fff;
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.container.report .report .body .page-header a:hover.info span.desc {
	display: block;
}

.container.report .report .body .page-header a:hover.info span.desc span {
	color: #ff5f5f;
	font-weight: bold;
}

.container.report .report .body .search-condition, .container.report .report .body .download-parent-student-code {
	position: absolute;
    display: inline-block;
    top: 0;
	right: 24px;
}

.container.report .report .body .search-condition button.search {
	height: 35px;
	border: 1px solid #888;
	border-radius: 5px;
	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
	background: #fff;
	font-weight: bold;
	margin: 5px 2px 5px 2px;
	padding: 5px 15px 5px 15px;
}

button.btn-go-next {
	border: none;
	width: 12px;
	height: 16px;
	background: url(/assets/img/sp/sp_report.png?v=1661943444) -880px -80px no-repeat;
	margin: 3px 10px 0 10px;
}

button.btn-go-prev {
	border: none;
	width: 12px;
	height: 16px;
	background: url(/assets/img/sp/sp_report.png?v=1661943444) -900px -80px no-repeat;
	margin: 3px 10px 0 10px;
}

.container.report .report .body .search-condition .duration {
	position: relative;
    display: inline-block;
    line-height: 33px;
    vertical-align: middle;
    height: 35px;
    background: url(/assets/img/sp/img_report_cal.png?v=1661943444) 12px 9px no-repeat;
    padding-left: 42px;
    padding-right: 38px;
    font-weight: bold;
    margin: 5px 2px 5px 2px;
    width: 205px;
    color: #5f5853;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0;
}

.container.report .report .body .search-condition .duration .arrow {
    position: absolute;
    right: 6px;
    top: 5px;
    width: 8px;
    height: 6px;
    margin: 9px 8px;
    background:url(/assets/img/sp/sp_detail_report.png?v=1661943444) -130px -110px no-repeat;
    opacity: 0.5;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}

.container.report .report .body .search-condition .duration .arrow.opened {
    background-position:-160px -110px;
}

.container.report .report .body .search-condition button.selected {
	background: #ffd51e;
}

.container.report .report .body .search-condition .monthly {
	position: relative;
	display: inline-block;
	line-height: 33px;
	vertical-align: middle;
	height: 35px;
	font-weight: bold;
	margin: 5px 2px 5px 2px;
	width: 185px;
	color: #5f5853;
	font-size: 12px;
	text-align: center;
	letter-spacing: 0;
}

.container.report .report .body .search-condition .monthly .text {
	margin: 0 10px;
}

.container.report .report .body .search-condition .monthly a.arrow {
	cursor: pointer;
	font-weight: bold;
	padding: 3px 7px;
	border-radius: 3px;
}

.container.report .report .body .search-condition .monthly a:hover.arrow {
	background: #8f877e;
	color: #fff;
}

.container.report .report .body .search-condition .monthly a.arrow.disabled {
	cursor: default;
	color: #aaa;
}

.container.report .report .body .search-condition .monthly a:hover.arrow.disabled {
	background: none;
	color: #aaa;
}

.container.report .report .body .total-score-board-desc {
	width: 760px;
	margin: 0 auto;
	font-size: 12px;
	font-weight:normal;
	line-height: 30px;
}

.container.report .report .body .total-score-board {
	width: 761px;
	height: 140px;
	margin: 10px auto;
	font-size: 16px;
	font-weight: normal;
	text-align: center;
	color: #888;
	border: 3px solid #19cac4;
	border-radius: 10px;
	-webkit-transition: border .1s ease-out;
	-moz-transition: border .1s ease-out;
	-ms-transition: border .1s ease-out;
	-o-transition: border .1s ease-out;
	transition: border .1s ease-out;
}

.container.report .report .body .total-score-board.link {
	cursor: pointer;
}

.container.report .report .body .total-score-board.member {
	height: 160px;
}

.container.report .report .body .total-score-board .golden-eggs {
	float: left;
	width: 140px;
	height: 100px;
	color: #fff;
	padding: 15px 0 25px 0;
	font-weight: bold;
	background: #19cac4;
	-webkit-transition: all .1s ease-out;
	-moz-transition: all .1s ease-out;
	-ms-transition: all .1s ease-out;
	-o-transition: all .1s ease-out;
	transition: all .1s ease-out;
}

.container.report .report .body .total-score-board .member-info {
	position: relative;
	float: left;
	width: 140px;
	height: 160px;
	color: #fff;
	padding: 0;
	font-weight: bold;
	background: #19cac4;
	overflow: hidden;
}

.container.report .report .body .total-score-board:hover.link { border-color: #ffce38; }
.container.report .report .body .total-score-board:hover.link .golden-eggs { background: #ffce38; color: #8b501b; }


.container.report .report .body .total-score-board .member-info .avatar-image {
	position: absolute;
	left: 15px;
	top: -10px;
}

.container.report .report .body .total-score-board.photo .member-info .avatar-image {
	top: 5px;
	width: 110px;
	height: 110px;
	border-radius: 110px;
	overflow: hidden;
}

.container.report .report .body .total-score-board .member-info .text {
	margin-top: 125px;
	line-height: 16px;
}

.container.report .report .body .total-score-board .member-info .text span {
	display: inline-block;
	font-size: smaller;
	width: 140px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.report .report .body .total-score-board .golden-eggs .class-score {font-size:30px;color:#5e2903;width:80px;height:60px;padding-top:35px;padding-right:2px;margin:0 auto;background:url(/assets/img/sp/sp_detail_report.png?v=1661943444) 0 -80px no-repeat}

.container.report .report .body .total-score-board .summary {
	position: relative;
	float: left;
	width: 620px;
	height: 120px;
	padding: 10px 0;
	border-radius: 0 10px 10px 0;
	background: #fff;
}

.container.report .report .body .total-score-board.member .summary {
	padding: 20px 0;
}

.container.report .report .body .total-score-board .equation {
	margin:10px 0 10px 84px;
	height:72px;
}

.container.report .report .body .total-score-board .positive, .container.report .report .body .total-score-board .negative {width:125px;height:50px;margin:11px 0;float:left;}
.container.report .report .body .total-score-board .minus, .container.report .report .body .total-score-board .equal {width:20px;height:20px;font-weight:bold;margin:26px 10px 26px 0;float:left;}
.container.report .report .body .total-score-board .sum {width:165px;float:left;}

.container.report .report .body .total-score-board p {text-align:left;color:#000;}
.container.report .report .body .total-score-board p.icon {display:inline-block;float:left;margin-right:5px;margin-bottom:10px;width:50px;height:50px;background-image:url(/assets/img/sp/sp_detail_report.png?v=1661943444);background-repeat:no-repeat;}
.container.report .report .body .total-score-board .positive p.icon {background-position:-140px 0;}
.container.report .report .body .total-score-board .negative p.icon {background-position:0 0;}
.container.report .report .body .total-score-board .sum p.icon {width:72px;height:72px;background-position:-60px 0;}

.container.report .report .body .total-score-board p.score {
	padding-top: 2px;
	font-size: 24px;
	font-weight: bold;
}

.container.report .report .body .total-score-board p.text {
	font-size: 14px;
	line-height: 14px;
}

.container.report .report .body .total-score-board .positive p.score {color:#176fc7;}
.container.report .report .body .total-score-board .negative p.score {color:#f14c31;}
.container.report .report .body .total-score-board .sum p.score {color:#3b9032;padding-top:8px;font-size:30px;}

.container.report .report .body .total-score-board .summary .best {font-size:14px;font-weight:normal;color:#000;}
.container.report .report .body .total-score-board .summary .best span {display:inline-block;width:53px;height:24px;color:#fff;padding-left:27px;line-height:24px;text-align:left;background:url(/assets/img/sp/sp_detail_report.png?v=1661943444) -90px -80px no-repeat}

.container.report .report .body .total-score-board a.more {
	position: absolute;
	display: none;
	cursor: pointer;
	bottom: 7px;
	right: 8px;
	font-size: 12px;
}

.container.report .report .body .total-score-board a.more span.icon {display:inline-block;margin-right:2px;width:12px;height:12px;vertical-align: bottom;background:url(/assets/img/sp/sp_detail_report.png?v=1661943444) -180px -100px no-repeat}
.container.report .report .body .total-score-board:hover.link a.more span.icon {background-position:-140px -60px;}

.container.report .report .body .total-attendance-board {
	cursor: pointer;
	width: 761px;
	height: 80px;
	margin: 10px auto;
	font-size: 16px;
	font-weight: normal;
	text-align: center;
	color: #888;
	border: 3px solid #b7b4a7;
	border-radius: 10px;
	-webkit-transition: border .1s ease-out;
	-moz-transition: border .1s ease-out;
	-ms-transition: border .1s ease-out;
	-o-transition: border .1s ease-out;
	transition: border .1s ease-out;
}

.container.report .report .body .total-attendance-board .title {
	float: left;
	width: 140px;
	height: 80px;
	line-height: 80px;
	color: #fff;
	font-weight: bold;
	background: #b7b4a7;
	-webkit-transition: all .1s ease-out;
	-moz-transition: all .1s ease-out;
	-ms-transition: all .1s ease-out;
	-o-transition: all .1s ease-out;
	transition: all .1s ease-out;
}

.container.report .report .body .total-attendance-board:hover { border-color: #ffce38; }
.container.report .report .body .total-attendance-board:hover .title { background: #ffce38; color: #8b501b; }

.container.report .report .body .total-attendance-board .summary {
	position: relative;
	float: left;
	width: 620px;
	height: 60px;
	padding: 10px 0;
	border-radius: 0 10px 10px 0;
	background: #fff;
}

.container.report .report .body .total-attendance-board .equation {
	margin:0 0 10px 84px;
	height:72px;
}

.container.report .report .body .total-attendance-board .absence,
.container.report .report .body .total-attendance-board .lateness,
.container.report .report .body .total-attendance-board .earlyleave {width:155px;height:50px;margin:5px 0;float:left;}

.container.report .report .body .total-attendance-board p {text-align:left;color:#000;}
.container.report .report .body .total-attendance-board p.icon {display:inline-block;float:left;margin-right:5px;width:50px;height:50px;background-image:url(/assets/img/sp/sp_detail_report.png?v=1661943444);background-repeat:no-repeat;}
.container.report .report .body .total-attendance-board .absence p.icon {background-position:-100px -200px;}
.container.report .report .body .total-attendance-board .lateness p.icon {background-position:-160px -210px;}
.container.report .report .body .total-attendance-board .earlyleave p.icon {background-position:-220px -210px;}

.container.report .report .body .total-attendance-board p.score {
	padding-top: 2px;
	font-size: 24px;
	font-weight: bold;
}

.container.report .report .body .total-attendance-board p.text {
	font-size: 14px;
}

.container.report .report .body .total-attendance-board .absence p.score {color:#ff4359;}
.container.report .report .body .total-attendance-board .lateness p.score {color:#ffc001;}
.container.report .report .body .total-attendance-board .earlyleave p.score {color:#84b3ec;}
.container.report .report .body .total-attendance-board .sum p.score {color:#3b9032;padding-top:8px;font-size:30px;}

.container.report .report .body .total-attendance-board a.more {
	position: absolute;
	cursor: pointer;
	bottom: 7px;
	right: 8px;
	font-size: 12px;
}

.container.report .report .body .total-attendance-board a.more span.icon {display:inline-block;margin-right:2px;width:12px;height:12px;vertical-align: bottom;background:url(/assets/img/sp/sp_detail_report.png?v=1661943444) -180px -100px no-repeat}
.container.report .report .body .total-attendance-board:hover.link a.more span.icon {background-position:-140px -60px;}

.container.report .report .body .tab-logo {
	margin-top: -78px;
	margin-left: 7px;
}

.container.report .report .body .class-data-open-status {
	position: relative;
	width: 700px;
	margin: 5px auto 25px auto;
	text-align: center;
}

.container.report .report .body .class-data-open-status p.message {
	width: 100%;
	line-height: 1.6em;
	margin: 20px 0 10px 0;
	font-size: 18px;
	text-align: center;
}

.container.report .report .body .class-data-open-status a.btn-go-to-the-class-info {
	cursor: pointer;
	color: #888;
	text-decoration: underline;
}

.container.report .report .body .class-data-open-status a.btn-download-parents-code {
    display: block;
    margin: 20px auto;
    width: 300px;
    height: 45px;
    line-height: 45px;
    font-size: 15px;
}

.container.report .report .body .download-history-excel {
	margin-top: -42px;
	margin-left: 547px;
	height: 45px;
	width: 200px;
}

.container.report .report .body .receive-letter,
.container.report .report .body .write-school-newsletter {
	margin-bottom: 5px;
	padding: 0 0 15px 0;
	font-size: 13px;
}

.container.report .report .body .write-school-newsletter.input-form {
	margin-bottom: 10px;
	padding-bottom: 0;
}

.container.report .report .body .write-school-newsletter.input-form.multi {
	position: absolute;
	top: 0;
	background: #fff;
    color: #9c938b;
    font-size: 12px;
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2);
	z-index: 11;
}

.container.report .report .body .write-school-newsletter.message-alert,
.container.report .report .body .write-school-newsletter.reply-form {
	position: fixed;
	background: #fff;
	padding: 20px 12px;
	border: 2px solid #ddd;
	border-radius: 6px;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
	z-index: 11;
}

.container.report .report .body .write-school-newsletter.message-alert {
	top: 320px;
	margin-left: 30px;
	width: 500px;
	height: 70px;
	padding: 15px 20px;
}

.container.report .report .body .write-school-newsletter .close { display: none; }
.container.report .report .body .write-school-newsletter.input-form.multi .close,
.container.report .report .body .write-school-newsletter.reply-form .close { display: block; }

.container.report .report .body .receive-letter .setting textarea,
.container.report .report .body .write-school-newsletter textarea {
	width: 554px;
	height: 110px;
	padding: 10px;
	margin: 12px 12px 0 12px;
	background: #f0eee4;
	border: none;
	resize: none;
}

.container.report .report .body .receive-letter .setting textarea { width: 380px; height: 50px; }
.container.report .report .body .write-school-newsletter textarea:disabled { height: 50px; background: #eee; }

.container.report .report .body .receive-letter.type-guide,
.container.report .report .body .write-school-newsletter.type-guide { line-height: 20px; color: #888; }

/*
.container.report .report .body .write-school-newsletter a { float: right; display: inline-block; }
.container.report .report .body .write-school-newsletter a.btn-ok { margin-top: -10px; }
.container.report .report .body .write-school-newsletter a.btn-send { margin-right: 5px; }
*/

.container.report .report .body .write-school-newsletter p.form-title {
	margin-bottom: 10px;
	color: #7f4500;
	font-size: 12px;
}

.container.report .report .body .write-school-newsletter.input-form.multi p.form-title { margin: 5px; font-size: 14px; font-weight: bold; }

.container.report .report .body .write-school-newsletter p.form-title span.text { font-size: 15px; font-weight: bold; margin-right: 15px; }

.container.report .report .body .write-school-newsletter p.button label {
	display: inline-block;
	height: 24px;
	margin-top: 2px;
}

.container.report .report .body .write-school-newsletter.input-form.multi > p.button input { margin-left: 16px; }
.container.report .report .body .write-school-newsletter.input-form.multi > div { margin: 0 12px; }
.container.report .report .body .write-school-newsletter.input-form.multi > div.close { margin: 0; }

.container.report .report .body .write-school-newsletter label.disabled input { opacity: 0.5; }
.container.report .report .body .write-school-newsletter label.disabled span.text { color: #aaa; }

.container.report .report .body .write-school-newsletter label span.icon { display: inline-block; width: 13px; height: 12px; margin: 0 2px 2px 5px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) no-repeat; vertical-align: middle; }
.container.report .report .body .write-school-newsletter label span.icon.student { background-position: -410px -410px; }
.container.report .report .body .write-school-newsletter label span.icon.parents { background-position: -370px -410px; }
.container.report .report .body .write-school-newsletter label.disabled span.icon.student { background-position: -390px -410px; }
.container.report .report .body .write-school-newsletter label.disabled span.icon.parents { background-position: -350px -410px; }

.container.report .report .body .write-school-newsletter p.button a.btn-attach-files { cursor: pointer; position: relative; line-height: 32px; color: #a9610d; float: none; margin-left: 15px; }
.container.report .report .body .write-school-newsletter p.button a.btn-attach-files span.ico { display: inline-block; width: 14px; height: 18px; margin-right: 3px; margin-bottom: 2px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -40px -250px no-repeat; vertical-align: middle; }
.container.report .report .body .write-school-newsletter p.button a.btn-attach-files span.filename { color: #000; font-size: 12px; margin-left: 3px; }
.container.report .report .body .write-school-newsletter p.button a.btn-attach-files input {
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	width: 100%;
	direction: ltr;
}

.container.report .report .body .write-school-newsletter p.button a.btn-detach { display: none; margin-left: 5px; }
.container.report .report .body .write-school-newsletter p.button a.btn-detach span.ico { width: 13px; height: 13px; background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -110px -110px no-repeat; }
.container.report .report .body .write-school-newsletter p.button a:hover.btn-detach span.ico { background-position: 0 -60px; }

.container.report .report .body .write-school-newsletter .attachments {
	position: relative;
	display: none;
	width: 570px;
	font-size: 12px;
	line-height: 24px;
	border-top: 1px solid #ddd;
}

.container.report .report .body .write-school-newsletter .attachments.open { display: inline-block; margin-bottom: -3px; }

.container.report .report .body .write-school-newsletter .attachments > div {
	float: left;
	margin: 5px 9px 0 9px;
}

.container.report .report .body .write-school-newsletter .attachments .file-attachments {
	float: none;
	min-height: 80px;
	padding-bottom: 3px;
}

.container.report .report .body .write-school-newsletter .attachments p { display: block; font-size: 12px; color: #9c938b; }
.container.report .report .body .write-school-newsletter .attachments p.files {
	display: inline-block;
	width: 170px;
	line-height: 18px;
	vertical-align: top;
}

.container.report .report .body .write-school-newsletter .attachments p span { margin: 0 3px; font-weight: normal; }
.container.report .report .body .write-school-newsletter .attachments p span.title { font-weight: bold; line-height: 24px; }
.container.report .report .body .write-school-newsletter .attachments p span.size { color: #de6517; }
.container.report .report .body .write-school-newsletter .attachments p span.available { color: #999; }

.container.report .report .body .write-school-newsletter .attachments ul {
	display: none;
	list-style: none;
	padding: 5px 0;
	font-weight: normal;
}

.container.report .report .body .write-school-newsletter .attachments ul.attachment-files { width: 532px; min-height: 30px; }
.container.report .report .body .write-school-newsletter .attachments ul li span.icon-file { display: inline-block; width: 14px; height: 18px; margin-left: 2px; margin-right: 3px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -40px -250px no-repeat; vertical-align: text-bottom; }

.container.report .report .body .write-school-newsletter .attachments ul.attachment-files li.uploading span.icon-file {
	width: 18px;
	height: 18px;
	margin-left: 0;
	margin-right: 1px;
	background: url(/assets/img/img_loading_18.png?v=1661943444) 0 0 no-repeat;
	-webkit-animation: showLoading 80s linear infinite;
	-moz-animation: showLoading 80s linear infinite;
	-ms-animation: showLoading 80s linear infinite;
	-o-animation: showLoading 80s linear infinite;
	animation: showLoading 80s linear infinite;
}

.container.report .report .body .write-school-newsletter .attachments ul.attachment-files a.btn-delete { float: right; display: inline-block; margin-left: 3px; }
.container.report .report .body .write-school-newsletter .attachments ul.attachment-files a.btn-delete span.ico { width: 14px; height: 14px; margin-right: 0; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -280px -100px no-repeat; vertical-align: text-bottom; }

.container.report .report .body .write-school-newsletter .attachments ul.attachment-files li { position: relative; }

.container.report .report .body .write-school-newsletter .attachments ul.attachment-files li .progress {
	position: absolute;
	display: none;
	top: 10px;
	right: 70px;
	width: 60px;
	height: 6px;
	border-radius: 3px;
	background: #e0ddd4;
	overflow: hidden;
	z-index: 2;
}

.container.report .report .body .write-school-newsletter .attachments ul.attachment-files li .progress .progress-bar {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: #ffce38;
	overflow: hidden;
	-webkit-transition: background .2s ease-out;
	-moz-transition: background .2s ease-out;
	-ms-transition: background .2s ease-out;
	-o-transition: background .2s ease-out;
	transition: background .2s ease-out;
}

.container.report .report .body .write-school-newsletter .attachments ul.attachment-files li span.name {
	display: inline-block;
	width: 450px;
	height: 18px;
	color: #a9610d;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.report .report .body .write-school-newsletter .attachments ul.attachment-files li span.size { float: right; margin: 0 3px; font-weight: normal; }
.container.report .report .body .write-school-newsletter .attachments ul.attachment-images { width: 550px; min-height: 88px; }

.container.report .report .body .write-school-newsletter .attachments ul.attachment-images a.btn-delete { cursor: pointer; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -280px -100px no-repeat; z-index: 2; }
.container.report .report .body .write-school-newsletter .attachments ul.attachment-images li.uploading a.btn-delete { display: none; }

.container.report .report .body .write-school-newsletter .attachments ul.attachment-images li {
	position: relative;
	display: inline-block;
	margin: 0 2px;
	width: 80px;
	height: 80px;
	border-radius: 4px;
	background: #f0eee4;
	overflow: hidden;
}

.container.report .report .body .write-school-newsletter .attachments ul.attachment-images li .fileinfo {
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	width: 70px;
	padding: 30px 5px;
	line-height: 20px;
	text-align: center;
	background: #333\9;
	background: rgba(0, 0, 0, 0.7);
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	color: #fff;
	letter-spacing: 0;
	z-index: 1;
}

.container.report .report .body .write-school-newsletter .attachments ul.attachment-images li a.bg-ani { display: none; }
.container.report .report .body .write-school-newsletter .attachments ul.attachment-images li a.bg-ani span.gif {
	margin-right: 1px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	font-family: 'Open Sans', Helvetica, Arial, tahoma, verdana, arial, sans-serif; letter-spacing: 0em;
}

.container.report .report .body .write-school-newsletter .attachments ul.attachment-images li .fileinfo span.icon-file {
	display: none;
	width: 18px;
	height: 18px;
	margin: 0 auto 2px auto;
	background: url(/assets/img/img_loading_18.png?v=1661943444) 0 0 no-repeat;
	-webkit-animation: showLoading 80s linear infinite;
	-moz-animation: showLoading 80s linear infinite;
	-ms-animation: showLoading 80s linear infinite;
	-o-animation: showLoading 80s linear infinite;
	animation: showLoading 80s linear infinite;
}

.container.report .report .body .write-school-newsletter .attachments ul.attachment-images li .progress {
	position: absolute;
	display: none;
	bottom: 10px;
	left: 8px;
	width: 60px;
	height: 6px;
	margin: 0;
	border-radius: 3px;
	background: #e0ddd4;
	overflow: hidden;
	z-index: 2;
}

.container.report .report .body .write-school-newsletter .attachments ul.attachment-images li .progress .progress-bar {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: #ffce38;
	overflow: hidden;
	-webkit-transition: background .2s ease-out;
	-moz-transition: background .2s ease-out;
	-ms-transition: background .2s ease-out;
	-o-transition: background .2s ease-out;
	transition: background .2s ease-out;
}

.container.report .report .body .write-school-newsletter .attachments ul.attachment-images li:hover .fileinfo { display: block; }

.container.report .report .body .write-school-newsletter .attachments ul.attachment-images li.no-preview .fileinfo { display: block; background: none; color: #7f4500; }
.container.report .report .body .write-school-newsletter .attachments ul.attachment-images li.uploading .fileinfo { display: block; background: #fff; opacity: 0.9; color: #7f4500; padding: 20px 5px; }
.container.report .report .body .write-school-newsletter .attachments ul.attachment-images li.uploading .fileinfo span.icon-file { display: block; }

.container.report .report .body .write-school-newsletter .attachments ul.attachment-images li .fileinfo span.name {
	display: block;
	width: 70px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.report .report .body .write-school-newsletter .attachments ul.attachment-images li .fileinfo span.size {
	display: none;
	width: 70px;
}

.container.report .report .body .write-school-newsletter .attachments ul.attachment-images li img.loading { margin: 20px; }

.container.report .report .body .write-school-newsletter .attachments .progress {
	position: relative;
	display: block;
	width: 550px;
	height: 20px;
	margin: 5px 8px 10px 8px;
	padding: 0 2px;
	border-radius: 4px;
	background: #e0ddd4;
	overflow: hidden;
}

.container.report .report .body .write-school-newsletter .attachments .progress .progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: #ffce38;
	color: #7f4500;
	overflow: hidden;
	-webkit-transition: background .2s ease-out;
	-moz-transition: background .2s ease-out;
	-ms-transition: background .2s ease-out;
	-o-transition: background .2s ease-out;
	transition: background .2s ease-out;
}

.container.report .report .body .write-school-newsletter .attachments .progress .text {
	display: block;
	width: 100%;
	font-size: 11px;
	font-family: arial;
	letter-spacing: 0;
	line-height: 20px;
	text-align: center;
}

.container.report .report .body .write-school-newsletter .attachments .progress .progress-bar.encoding { background: #06c793; color: #fff; }
.container.report .report .body .write-school-newsletter .attachments .progress .progress-bar.success { background: #2b96db; color: #fff; }
.container.report .report .body .write-school-newsletter .attachments .progress .progress-bar.error { background: #db2c49; color: #fff; }

.container.report .report .body .write-school-newsletter.input-form.multi .receivers ul {
	display: inline-block;
	width: 560px;
	margin-left: 7px;
	margin-top: 3px;
}

.container.report .report .body .write-school-newsletter.input-form.multi .receivers ul li {
	float: left;
	cursor: pointer;
	width: 270px;
	line-height: 24px;
}

.container.report .report .body .write-school-newsletter.input-form.multi .receivers ul li.checked { font-weight: bold; color: #000; }
.container.report .report .body .write-school-newsletter.input-form.multi .receivers ul li.disabled { opacity: 0.4; }
.container.report .report .body .write-school-newsletter.input-form.multi .receivers ul li.uncheckable { cursor: default; }
.container.report .report .body .write-school-newsletter.input-form.multi .receivers.folded ul li.uncheckable { display: none; }

.container.report .report .body .write-school-newsletter.input-form.multi .receivers ul li span.ico {
	display: none;
	width: 13px;
	height: 12px;
	margin: 0 2px 2px 2px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) no-repeat;
	vertical-align: middle;
}

.container.report .report .body .write-school-newsletter.input-form.multi .receivers ul.parents li span.ico.parents { display: inline-block; background-position: -350px -410px; }
.container.report .report .body .write-school-newsletter.input-form.multi .receivers ul.parents li span.ico.parents.connected { background-position: -370px -410px; }
.container.report .report .body .write-school-newsletter.input-form.multi .receivers ul.student li span.ico.student { display: inline-block; background-position: -390px -410px; }
.container.report .report .body .write-school-newsletter.input-form.multi .receivers ul.student li span.ico.student.connected { background-position: -410px -410px; }

.container.report .report .body .write-school-newsletter.input-form.multi .receivers label {
	height: 18px;
	vertical-align: middle;
}

.container.report .report .body .write-school-newsletter.input-form.multi .receivers input[type=checkbox]:not(old):disabled + label { background: url(/assets/img/sp/img_checkbox_unchecked_18.png?v=1661943444) no-repeat; opacity: 0.4; }
.container.report .report .body .write-school-newsletter.input-form.multi .receivers ul li.disabled input[type=checkbox]:not(old):disabled + label { opacity: 1.0; }

.container.report .report .body .write-school-newsletter.input-form.multi .receivers a.btn-unfold { display: none; }
.container.report .report .body .write-school-newsletter.input-form.multi .receivers.folded a.btn-unfold {
	cursor: pointer;
	display: block;
	width: 100%;
	line-height: 32px;
	text-align: center;
	margin-top: 10px;
	border-top: 1px dashed #eee;
	text-decoration: underline;
}

.container.report .report .body .write-school-newsletter .receiver-selector {
	border-bottom: 1px solid #eee;
    padding: 5px;
    margin-bottom: 2px;
}

.container.report .report .body .write-school-newsletter .receiver-selector span.title {
	margin-right: 20px;
}

.container.report .report .body .no-account-guide {
	position: absolute;
	top: 60px;
	left: 32px;
	width: 598px;
	background: #fff;
	text-align: center;
	z-index: 20;
}

.container.report .report .body .no-account-guide .banner {
	width: 220px;
	height: 240px;
	margin: 30px auto;
	background: url(/assets/img/sp/img_account_none.png?v=1661943444) no-repeat;
}

.container.report .report .body .no-account-guide p.message {
	margin: 10px 0;
	color: #7f4500;
	font-size: 15px;
}

.container.report .report .body .no-account-guide p.desc {
	color: #888;
	font-size: 13px;
	line-height: 24px;
}

.container.report .report .body .no-account-guide a.btn-download-parents-code {
    display: block;
    height: 54px;
    line-height: 54px;
	margin: 30px 0 0 0;
    border-radius: 0;
    font-size: 15px;
}

.container.report .report .body .receive-letter .setting {
	position: fixed;
	display: none;
	background: #fff;
	width: 454px;
	margin: -14px 0 0 90px;
	text-align: left;
	z-index: 11;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}

.container.report .report .body .receive-letter .setting ul { padding: 15px; }
.container.report .report .body .receive-letter .setting ul li:first-child { margin-bottom: 15px; }
.container.report .report .body .receive-letter .setting ul p.item-title { font-weight: bold; }

.container.report .report .body .receive-letter .setting a.info {
	cursor: pointer;
	position: relative;
	display: inline-block;
	margin-left: 5px;
}

.container.report .report .body .receive-letter .setting a.info span.icon {
	display: inline-block;
	width: 21px;
	height: 21px;
	background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -170px -150px no-repeat;
	vertical-align: middle;
	opacity: 0.5;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}

.container.report .report .body .receive-letter .setting a:hover.info span.icon {
	background-position: 0 -180px;
	opacity: 1.0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.container.report .report .body .receive-letter .setting a.info span.desc {
	position: absolute;
	display: none;
	top: -7px;
	left: 27px;
	width: 330px;
	padding: 5px 8px;
	border: 2px solid #ffde38;
	border-radius: 5px;
	background: #fff;
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
	text-align: left;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.container.report .report .body .receive-letter .setting a.info span.desc:after {
    right: 100%;
    top: 50%;
    border: 2px solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 5px;
    margin-top: -5px;
}

.container.report .report .body .receive-letter .setting a.info span.desc:before {
    right: 100%;
    top: 50%;
    border: 2px solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 222, 56, 0);
    border-right-color: #ffde38;
    border-width: 8px;
    margin-top: -8px;
}

.container.report .report .body .receive-letter .setting a:hover.info span.desc {
	display: block;
	visibility: visible !important;
}

.container.report .report .body .receive-letter .setting .close {
	top: 0;
	right: -30px;
}

.container.report .report .body .receive-letter .setting .close a.btn-close {
	cursor: pointer;
	width: 25px;
	height: 25px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -170px -420px no-repeat;
}

.container.report .report .body .write-school-newsletter .notice_message {
    display: none;
    background-color: #eee;
    line-height: 1.2em;
    padding: 8px 10px;
    border-radius: 5px;
    margin: 2px 0 6px 0;
    font-size: 12px;
    color: #f14c31;
    letter-spacing: -0.02em;
}

.container.report .report .body .check-parent-student-registration {
	min-height: 500px;
}

.container.report .report .body .check-parent-student-registration p {
	line-height: 24px;
}

.container.report .report .body .check-parent-student-registration p.filter {
	color: #888;
	font-size: 13px;
	text-align: right;
	margin: 0 auto;
	width: 900px;
}

.container.report .report .body .check-parent-student-registration p.filter label {
	margin-right: 20px;
}

.container.report .report .body .check-parent-student-registration ul {
	display: block;
	width: 890px;
	margin: 0 auto;
	padding-left: 0;
}

.container.report .report .body .check-parent-student-registration dl.header {
	background: #8f877e;
	color: #fff;
	font-weight: bold;
}

.container.report .report .body .check-parent-student-registration dl {
	background: #f7f5ee;
	min-height: 25px;
	padding: 1px 0;
	display: inline-block !important;
}

.container.report .report .body .check-parent-student-registration dl:nth-child(even) { background: transparent; }

.container.report .report .body .check-parent-student-registration dd {
	text-align: center;
	line-height: 25px;
	float: left;
	margin: 0;
}

.container.report .report .body .check-parent-student-registration dd a {
	color: #8f877e;
	cursor: pointer;
	text-decoration: underline;
}

.container.report .report .body .check-parent-student-registration dd a:hover {	color: #db2649; }

.container.report .report .body .check-parent-student-registration dd.parent a { letter-spacing: -0.01em; }

.container.report .report .body .check-parent-student-registration dd a.btn-invite {
	display: inline-block;
	height: 18px;
	line-height: 18px;
	padding: 0 5px;
	border: 1px solid #66605a;
	border-radius: 2px;
	text-decoration: none;
	color: #66605a;
	opacity: 0.5;
}

.container.report .report .body .check-parent-student-registration dd a.btn-invite:hover { opacity: 1.0; }

.container.report .report .body .layer-parent-student-registration a.edit {
	cursor: pointer;
	display: inline-block;
	height: 20px;
	line-height: 20px;
	margin: 0 5px;
	padding: 0 4px 0 3px;
	border: 1px solid #8f877e;
	border-radius: 2px;
	text-decoration: none;
	color: #8f877e;
	font-size: 12px;
	background: #fff;
}

.container.report .report .body .layer-parent-student-registration a.edit:hover {
	background: #8f877e;
	color: #fff;
}

.container.report .report .body .check-parent-student-registration dd.name {
	clear: both;
	width: 215px;
}

.container.report .report .body .check-parent-student-registration dd.student {
	width: 190px;
}

.container.report .report .body .check-parent-student-registration dd.parent {
	width: 305px;
}

.container.report .report .body .check-parent-student-registration dd.code {
	width: 90px;
}

.container.report .report .body .check-parent-student-registration dd.preview {
    width: 90px;
    height: 100%;
}

.ico-check-parents-registration-not-yet {
	display: inline-block;
	width: 14px;
	height: 14px;
	vertical-align: middle;
	border: 1px solid #bbb;
	border-radius: 14px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -262px -162px no-repeat;
}

.container.report .report .body .layer-parent-student-registration {
	position: fixed;
	z-index: 11;
	top: 50%;
	left: 50%;
	width: 570px;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background: #fff;
	border: 5px solid #aaa;
	border-radius: 10px;
	padding: 10px;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}

.container.report .report .body .layer-parent-student-registration .title {
	padding: 8px;
	font-weight: bold;
	color: #27bc97;
	border-bottom: 1px solid #ccc;
}

.container.report .report .body .layer-parent-student-registration .form {
	padding: 8px;
	line-height: 20px;
}

.container.report .report .body .layer-parent-student-registration .form.step1 {
	border-bottom: 1px dotted #aaa;
}

.container.report .report .body .layer-parent-student-registration .form.step2 {
	position: relative;
}

.container.report .report .body .layer-parent-student-registration .form.step2.has-id {
	min-height: 250px;
}

.container.report .report .body .layer-parent-student-registration .form.header {
	padding: 0 8px;
	border-bottom: 1px dotted #aaa;
}

.container.report .report .body .layer-parent-student-registration .form.action {
	padding: 0;
}

.container.report .report .body .layer-parent-student-registration .form .center {
	margin-left: 30px;
}

.container.report .report .body .layer-parent-student-registration .form p {
	line-height: 24px;
	margin-bottom: 2px;
}

.container.report .report .body .layer-parent-student-registration .form.step2 p.subtitle {
	color: #27bc97;
	font-weight: bold;
	margin-bottom: 8px;
}

.container.report .report .body .layer-parent-student-registration .form ol {
	padding-left: 20px;
}

.container.report .report .body .layer-parent-student-registration .form ol li {
	margin-bottom: 10px;
}

.container.report .report .body .layer-parent-student-registration .form ol li.code {
	list-style: none;
	font-weight: bold;
	line-height: 32px;
	margin: 15px 0;
}

.container.report .report .body .layer-parent-student-registration .form ol li.code span.email {
	display: inline-block;
	padding: 0 10px;
	background: #f0eee4;
	border-radius: 4px;
	margin-left: 10px;
}

.container.report .report .body .layer-parent-student-registration .form.step2 img.snapshot {
	position: absolute;
	bottom: 0;
	right: -15px;
}

.container.report .report .body .layer-parent-student-registration .form span { font-weight: bold; }
.container.report .report .body .layer-parent-student-registration .form span.name { color: #2694db; }
.container.report .report .body .layer-parent-student-registration .form span.id { color : #db2649; }
.container.report .report .body .layer-parent-student-registration .form span.desc { font-weight: normal; color : #aaa; margin-left: 5px; }
.container.report .report .body .layer-parent-student-registration .form span.section { display: inline-block; width: 65px; }
.container.report .report .body .layer-parent-student-registration .form span.relationship { width: 75px; display: inline-block; }
.container.report .report .body .layer-parent-student-registration .form span.relationship.invite { color: #999; }
.container.report .report .body .layer-parent-student-registration .form span.email { font-weight: normal; color : #db2649; letter-spacing: -0.01em; vertical-align: middle; }
.container.report .report .body .layer-parent-student-registration .form span.create-datetime { font-weight: normal; color: #aaa; font-size: 12px; margin-left: 75px; }
.container.report .report .body .layer-parent-student-registration .form label { margin: 0 10px; }
.container.report .report .body .layer-parent-student-registration .form input[type=text], .container.report .report .body .layer-parent-student-registration .form input[type=password] { width: 90px; background: #f0eee4; }
.container.report .report .body .layer-parent-student-registration .form input[type=text].email { width: 545px; }

.container.report .report .body .layer-parent-student-registration .form a.action {
	cursor: pointer;
	width: 550px;
	background: #db2649;
	color: #fff;
	font-weight: bold;
	text-align: center;
	display: inline-block;
	padding: 10px;
	border-radius: 5px;
	margin-top: 10px;
}

.container.report .report .body .check-wow-together {
	min-height: 500px;
	text-align: center;
}

.container.report .report .body .check-wow-together p {
	line-height: 24px;
}

.container.report .report .body .check-wow-together ul.desc {
	text-align: left;
	width: 680px;
	margin: 5px auto;
	background: #fff;
	padding: 10px 30px;
	border-radius: 10px;
	line-height: 24px;
}

.container.report .report .body .check-wow-together ul.desc span {
	color: #ff5f5f;
	font-weight: bold;
}

.container.report .report .body .check-wow-together ul.desc.icons {
	width: 730px;
	height: 24px;
	line-height: 20px;
	padding: 5px 10px;
	background: #f6f6f6;
	list-style: none;
}

.container.report .report .body .check-wow-together ul.desc.icons li {
	margin: 2px 10px 2px 0;
	float: left;
}

.container.report .report .body .check-wow-together p.summary {
	display: inline-block;
	border-radius: 8px;
	width: 740px;
	margin: 18px 8px 8px 8px;
	text-align: left;
	font-weight: bold;
}

.container.report .report .body .check-wow-together p.summary span.count {
	display: inline-block;
	width: 50px;
	color: #ff5f5f;
}

.container.report .report .body .check-wow-together ul.setting {
	width: 540px;
	height: 30px;
	margin: 10px auto;
	padding: 10px 30px;
	background: #f8f7f2;
	border-radius: 10px;
	line-height: 28px;
	list-style: none;
	text-align: left;
}

.container.report .report .body .check-wow-together ul.setting li {
	float: left;
	margin-right: 20px;
}

.container.report .report .body .check-wow-together ul.setting li.title { font-weight: bold; }

.container.report .report .body .check-wow-together ul.list {
	display: block;
	width: 890px;
	margin: 0 auto;
	padding-left: 0;
}

.container.report .report .body .check-wow-together dl {
	background: #fff;
	min-height: 25px;
	padding: 1px 0;
	display: inline-block !important;
	height: 60px;
	overflow-y: hidden;
}

.container.report .report .body .check-wow-together dl.header {
	height: 50px;
	background: #8f877e;
	color: #fff;
	font-weight: bold;
}

.container.report .report .body .check-wow-together dl:nth-child(even) { background: #f6f6f6; }

.container.report .report .body .check-wow-together dd {
	text-align: center;
	float: left;
	margin: 0;
	line-height: 60px;
	font-size: 13px;
}

.container.report .report .body .check-wow-together dd.student {
	clear: both;
	width: 275px;
	text-align: left;
}

.container.report .report .body .check-wow-together dd.student img {
	margin-top: -10px;
	line-height: 50px;
	vertical-align: top;
}

.container.report .report .body .check-wow-together dd.used { width: 150px; }
.container.report .report .body .check-wow-together dd.button { width: 150px; }

.container.report .report .body .check-wow-together dd.received { width: 175px; line-height: 20px; margin-top: 10px; }
.container.report .report .body .check-wow-together dd.received span { color: #ff5f5f; font-size: 14px; font-weight: bold; }
.container.report .report .body .check-wow-together dd.received span.detail { color: #f79f09; font-size: 12px; font-weight: normal; margin-top: 0; }
.container.report .report .body .check-wow-together dd.received span.zero,
.container.report .report .body .check-wow-together dd.received span.zero span.detail { color: #ccc; font-weight: normal; }
.container.report .report .body .check-wow-together dl.header dd.received { margin-top: 0px; }

.container.report .report .body .check-wow-together dd.used span { color: #ff5f5f; font-weight: bold; }
.container.report .report .body .check-wow-together dd.used span.zero { color: #ccc; font-weight: normal; }

.container.report .report .body .check-wow-together dl.header dd {
	text-align: center;
	line-height: 50px;
	font-size: 12px;
}

.container.report .report .body .check-wow-together dl.header dd.received { line-height: 25px; }
.container.report .report .body .check-wow-together dl.header dd.received p.icons {
	height: 20px;
	padding: 2px;
	margin: 0 auto;
	line-height: 20px;
}

.container.report .report .body .check-wow-together ul.desc.icons span,
.container.report .report .body .check-wow-together dl.header dd.received p.icons span {
	cursor: pointer;
	display: inline-block;
	margin: 0 4px;
	width: 20px;
	height: 20px;
	vertical-align: top;
	background:url(/assets/img/sp/sp_wow_together.png?v=1661943444) -100px -60px no-repeat;
}

.container.report .report .body .check-wow-together ul.desc.icons span.positiveness,
.container.report .report .body .check-wow-together dl.header dd.received p.icons span.positiveness { background-position: -100px -30px; }

.container.report .report .body .check-wow-together ul.desc.icons span.volunteer,
.container.report .report .body .check-wow-together dl.header dd.received p.icons span.volunteer { background-position: -100px 0px; }

.container.report .report .body .check-wow-together ul.desc.icons span.etc,
.container.report .report .body .check-wow-together dl.header dd.received p.icons span.etc { background-position: 0 -100px; }

.container.report .report .body .check-wow-together.disabled p.summary,
.container.report .report .body .check-wow-together.disabled ul.icons,
.container.report .report .body .check-wow-together.disabled ul.list {
	opacity: 0.5;
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-ms-filter: grayscale(1);
	-o-filter: grayscale(1);
	filter: grayscale(1);
}

.container.report .report .body .check-wow-together.disabled ul.list a.btn-give-wow-together { cursor: default; background: #ffde38 !important; }

.container.report .report .body .give-wow-together {
	position: fixed;
	z-index: 20;
	top: 150px;
	width: 100%;
	left: 0;
}

.container.report .report .body .give-wow-together .layer {
	position: relative;
	margin: 0 auto;
	width: 520px;
	padding: 20px;
	font-size: 13px;
	text-align: center;
	background: #fff;
	border: 5px solid #aaa;
	border-radius: 10px;
	padding: 10px;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}

.container.report .report .body .give-wow-together p { margin-bottom: 10px; }

.container.report .report .body .give-wow-together p.title {
	padding: 8px;
	font-weight: bold;
	color: #27bc97;
	border-bottom: 1px solid #ccc;
}

.container.report .report .body .give-wow-together p.subject { clear: both; font-weight: bold; }
.container.report .report .body .give-wow-together p.summary { padding: 10px 0; margin: 10px 80px; border-radius: 6px; background: #eee; }
.container.report .report .body .give-wow-together p.received-wows { padding: 5px 0; height: 48px; line-height: 48px; width: 250px; font-weight: bold; float: left; }
.container.report .report .body .give-wow-together p span.num { color: #ff5f5f; }

.container.report .report .body .give-wow-together hr.line { border: none; border-bottom: 1px dotted #aaa; margin-bottom: 15px; }

.container.report .report .body .give-wow-together ul { padding: 5px 0; }
.container.report .report .body .give-wow-together ul.received-wows { list-style: none; height: 48px; }
.container.report .report .body .give-wow-together ul.received-wows li.icon { float: left; display: block; width: 48px; height: 48px; border-radius: 24px; margin: 0 5px; background: #eee; }
.container.report .report .body .give-wow-together ul.received-wows li.icon.kindness { background: url(/assets/img/sp/sp_wow_together.png?v=1661943444) 0 -50px no-repeat; }
.container.report .report .body .give-wow-together ul.received-wows li.icon.positiveness { background: url(/assets/img/sp/sp_wow_together.png?v=1661943444) -50px 0 no-repeat; }
.container.report .report .body .give-wow-together ul.received-wows li.icon.volunteer { background: url(/assets/img/sp/sp_wow_together.png?v=1661943444) 0 0 no-repeat; }
.container.report .report .body .give-wow-together ul.received-wows li.icon.etc { background: url(/assets/img/sp/sp_wow_together.png?v=1661943444) -50px -50px no-repeat; }

.container.report .report .body .give-wow-together ul.wow-types { list-style: none; padding: 0; height: 115px; }
.container.report .report .body .give-wow-together ul.wow-types li { cursor: pointer; width: 120px; padding: 10px 0; margin: 0 5px; border-radius: 10px; text-align: center; float: left; line-height: 16px; }
.container.report .report .body .give-wow-together ul.wow-types li span.icon { display: block; width: 48px; height: 48px; margin: 5px auto; background: #eee; }
.container.report .report .body .give-wow-together ul.wow-types li.kindness span.icon { background: url(/assets/img/sp/sp_wow_together.png?v=1661943444) 0 -50px no-repeat; }
.container.report .report .body .give-wow-together ul.wow-types li.positiveness span.icon { background: url(/assets/img/sp/sp_wow_together.png?v=1661943444) -50px 0 no-repeat; }
.container.report .report .body .give-wow-together ul.wow-types li.volunteer span.icon { background: url(/assets/img/sp/sp_wow_together.png?v=1661943444) 0 0 no-repeat; }
.container.report .report .body .give-wow-together ul.wow-types li.etc span.icon { background: url(/assets/img/sp/sp_wow_together.png?v=1661943444) -50px -50px no-repeat; }

.container.report .report .body .give-wow-together p.buttons { margin-bottom: 0; }
.container.report .report .body .give-wow-together p.buttons a {
	cursor: pointer;
	width: 500px;
	background: #ccc;
	color: #fff;
	font-weight: bold;
	text-align: center;
	display: inline-block;
	padding: 10px;
	border-radius: 5px;
	margin-top: 10px;
}

.container.report .report .body .give-wow-together ul.wow-types li.selected,
.container.report .report .body .give-wow-together ul.wow-types li:hover { background: #fff150; }
.container.report .report .body .give-wow-together p.buttons a.selected { background: #db2649; }

.container.report .report .body .give-wow-together a.info {
	cursor: pointer;
	position: relative;
	display: inline-block;
	margin-left: 5px;
}

.container.report .report .body .give-wow-together a.info span.icon {
	display: inline-block;
	width: 21px;
	height: 21px;
	background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -170px -150px no-repeat;
	vertical-align: middle;
	opacity: 0.5;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}

.container.report .report .body .give-wow-together a:hover.info span.icon {
	background-position: 0 -180px;
	opacity: 1.0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.container.report .report .body .give-wow-together a.info span.desc {
	position: absolute;
	top: -25px;
	left: 27px;
	width: 330px;
	padding: 5px 8px;
	border: 2px solid #ffde38;
	border-radius: 5px;
	background: #fff;
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
	text-align: left;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.container.report .report .body .give-wow-together a.info span.desc:after {
    right: 100%;
    top: 50%;
    border: 2px solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 5px;
    margin-top: -5px;
}

.container.report .report .body .give-wow-together a.info span.desc:before {
    right: 100%;
    top: 50%;
    border: 2px solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 222, 56, 0);
    border-right-color: #ffde38;
    border-width: 8px;
    margin-top: -8px;
}
.container.report .report .body .give-wow-together a:hover.info span.desc {
	display: block;
	visibility: visible !important;
}

.container.report .report .body .top-navigator .message-type li {
	cursor: pointer;
    list-style: none;
    float: left;
    width: 150px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    margin-right: 10px;
    background: #bdbdbd;
    color: #fff;
    border-radius: 5px 5px 0 0;
}

.container.report .report .body .top-navigator .message-type ul {
	height: 32px;
	margin-top: 10px;
}

.container.report .report .body .top-navigator .message-type li.selected {
	background: #FFD51E;
	color: #000;
}

.container.report .report .body .top-navigator .download-parent-student-code {
	height: 44px;
	margin-left: 330px;
	z-index: 1;
}

.container.report .report .body .contents {
	width: 643px;
	margin: 0 auto;
}

.container.report .report .body.left .contents {
	float: left;
}

.container.report .report .body .contents.detail-report {
	width: 760px;
	margin: 10px auto;
	background: #fff;
	color: #888;
	border: 3px solid #fff;
	border-radius: 10px;
}

/* for print */
.container.report .report .body .contents.detail-report .class {
	font-size: 16px;
	font-weight: bold;
}

.container.report .report .body .contents.detail-report .class .name { color: #000; margin: 0 5px; }
.container.report .report .body .contents.detail-report .class .duration { font-size: smaller; color: #de6517; }
.container.report .report .body .contents.detail-report .class .logo { }
.container.report .report .body .contents.detail-report .class .logo img { vertical-align: middle; }

.container.report .report .body .contents.detail-report.desc {
	border-top: 3px dotted #19cac4;
	border-radius: 0 0 0 0;
	padding-top: 10px;
	font-size: 14px;
	font-weight: bold;
}

.container.report .report .body .contents.detail-report.desc .more-info { color: #000; }
.container.report .report .body .contents.detail-report.desc ol { margin: 5px 0; }
.container.report .report .body .contents.detail-report.desc li {
	display: list-item;
	border: none;
	width: inherit;
	margin: 0;
	font-size: 13px;
	letter-spacing: 0;
}

.container.report .report .body .contents.detail-report.desc span.link { color: #de6517; text-decoration: underline; }
.container.report .report .body .contents.detail-report.desc li.no-order { list-style-type: disc; font-weight: normal; }

.container.report .report .body .contents .position {
	width: 294px;
	float: left;
	margin: 0 0 0 10px;
}

.container.report .report .body .contents .best-card {
	width: 450px;
	float: left;
	margin: 5px 0;
}

.container.report .report .body .contents ul,dl,dd {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.container.report .report .body .contents.detail-report li {
	clear: both;
	display: inline-block;
	width: 721px;
	margin: 0 20px;
	padding: 3px 0;
	font-size: 12px;
	border-bottom: 2px solid #f0eee4;
}

.container.report .report .body .contents.detail-report .attendance-list li {
	cursor: pointer;
	display: none;
	position: relative;
	width: 680px;
	padding: 5px 0;
	border-bottom: none;
	border-radius: 4px;
}

.container.report .report .body .contents.detail-report .attendance-list li.date { display: inline-block; }

.container.report .report .body .contents.detail-report .attendance-list li:nth-child(even).list { background: #f6f6f6; }

.container.report .report .body .contents.detail-report .attendance-list li.header {
	cursor: default;
	background: #8f877e;
	color: #fff;
	font-weight: bold;
	text-align: center;
}

.container.report .report .body .contents.detail-report .attendance-list li.list dd { line-height: 16px; }

.container.report .report .body .contents.detail-report .attendance-list li.list dd.date span.icon {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -140px -110px no-repeat;
	margin-left: 5px;
	vertical-align: middle;
}

.container.report .report .body .contents.detail-report .attendance-list li.list dd.date span.desc {
	position: absolute;
	display: none;
	top: 2px;
	left: 112px;
	padding: 4px 8px;
	border-radius: 5px;
	border: 2px solid #ffce38;
	background: #fff;
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
	text-align: left;
	z-index: 1;
}

.container.report .report .body .contents.detail-report .attendance-list li.list dd.date span.desc:after {
    top: 11px;
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 4px;
	margin-top: -2px;
}

.container.report .report .body .contents.detail-report .attendance-list li.list dd.date span.desc:before {
    top: 11px;
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #ffce38;
    border-width: 6px;
    margin-top: -4px;
}


.container.report .report .body .contents.detail-report .attendance-list li.list dd.date span.icon-save {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -60px -180px no-repeat;
    vertical-align: middle;
    margin-right: 5px;
    visibility: hidden;
}

.container.report .report .body .contents.detail-report .attendance-list li.list dd.date span.icon-save.saved { visibility: visible; }

.container.report .report .body .contents.detail-report .attendance-list li.list dd.absence span,
.container.report .report .body .contents.detail-report .attendance-list li.list dd.lateness span,
.container.report .report .body .contents.detail-report .attendance-list li.list dd.earlyleave span { color: #ccc; font-size: 13px; }

.container.report .report .body .contents.detail-report .attendance-list li.list dd.absence span.count,
.container.report .report .body .contents.detail-report .attendance-list li.list dd.lateness span.count,
.container.report .report .body .contents.detail-report .attendance-list li.list dd.earlyleave span.count { font-weight: bold; }

.container.report .report .body .contents.detail-report .attendance-list li.list dd.absence span.count { color: #ff4359; }
.container.report .report .body .contents.detail-report .attendance-list li.list dd.lateness span.count { color: #ffba44; }
.container.report .report .body .contents.detail-report .attendance-list li.list dd.earlyleave span.count { color: #84b3ec; }

.container.report .report .body .contents.detail-report .attendance-list a.btn-unfold {
	cursor: pointer;
	display: inline-block;
	padding: 0;
	width: 80px;
	height: 20px;
	line-height: 20px;
	vertical-align: top;
	background: #fff150;
	border-radius: 5px;
	border-top: 2px solid #fff;
	border-bottom: 1px solid #fdda19;
	margin-left: 5px;
	font-size: 12px;
	text-align: center;
	color: #7d563d;
	-webkit-transition: border .1s ease-in-out;
	-moz-transition: border .1s ease-in-out;
	-ms-transition: border .1s ease-in-out;
	-o-transition: border .1s ease-in-out;
	transition:border .1s ease-in-out;
}

.container.report .report .body .contents.detail-report .attendance-list a:hover.btn-unfold {border-top-width:0px;border-bottom-width:3px;}
.container.report .report .body .contents.detail-report .attendance-list a:active.btn-unfold {border-top-width:3px;border-bottom-width:0px;}

.container.report .report .body .contents.detail-report .attendance-list li:hover.list { background: #fff150; }
.container.report .report .body .contents.detail-report .attendance-list li:hover.list.date,
.container.report .report .body .contents.detail-report .attendance-list li:hover.list.header { background: none; }
.container.report .report .body .contents.detail-report .attendance-list li:nth-child(even):hover.list.date,
.container.report .report .body .contents.detail-report .attendance-list li:nth-child(even):hover.list.header { background: #f6f6f6; }

.container.report .report .body .contents.detail-report .attendance-list li:hover.list dd.date span.icon { background-position: -40px -60px; }
.container.report .report .body .contents.detail-report .attendance-list li:hover.list dd.date span.desc { display: block; }

.container.report .report .body .contents.detail-report .attendance-list.unfolded a.btn-unfold { display: none; }
.container.report .report .body .contents.detail-report .attendance-list.unfolded li { display: inline-block; }

.container.report .report .body .contents.detail-report .attendance-list ul.list { margin-top: 5px; }

.container.report .report .body .contents.detail-report .attendance-list ul.list li {
	clear: none;
	float: left;
	width: auto;
	display: block;
	font-size: 12px;
	font-weight: normal;
	margin: 2px;
	padding: 2px 10px;
}

.container.report .report .body .attendance-edit-form {
	position: absolute;
	z-index: 20;
	top: 30px;
	width: 100%;
	left: 0;
	margin-bottom: 80px;
}

.container.report .report .body .attendance-edit-form .layer {
	position: relative;
	margin: 0 auto;
	width: 600px;
	padding: 20px;
	font-size: 13px;
	text-align: center;
	background: #fff;
	border: 5px solid #aaa;
	border-radius: 10px;
	padding: 10px;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}

.container.report .report .body .attendance-edit-form p.title {
	line-height: 20px;
	height: 20px;
	margin-bottom: 5px;
	padding: 2px 8px;
	color: #27bc97;
	font-weight: bold;
}

.container.report .report .body .attendance-edit-form ul.students {
	list-style: none;
	display: inline-block;
	padding: 3px 0;
	border-top: 1px solid #ccc;
}

.container.report .report .body .attendance-edit-form ul.students li { cursor: pointer; float: left; margin: 0 5px; line-height: 24px; }
.container.report .report .body .attendance-edit-form ul.students li:nth-child(4n+1),
.container.report .report .body .attendance-edit-form ul.students li:nth-child(4n+2) { background: #f6f6f6; }
.container.report .report .body .attendance-edit-form ul.students li:hover,
.container.report .report .body .attendance-edit-form ul.students li:hover:nth-child(4n+1),
.container.report .report .body .attendance-edit-form ul.students li:hover:nth-child(4n+2) { background: #e4e4e4; }
.container.report .report .body .attendance-edit-form ul.students li dd.name {
	width: 200px;
	padding-left: 10px;
	float: left;
	text-align: left;
}

.container.report .report .body .attendance-edit-form ul.students li dd.status {
	float: left;
	display: inline-block;
	padding: 0;
	width: 80px;
	height: 23px;
	line-height: 23px;
	vertical-align: top;
	font-size: 13px;
	text-align: center;
	color: #7d563d;
}

.container.report .report .body .attendance-edit-form ul.students li dd.status span.icon {
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 5px;
	border-radius: 12px;
	vertical-align: middle;
}

.container.report .report .body .attendance-edit-form ul.students li dd.status.lateness span.icon { background: #fff150; }
.container.report .report .body .attendance-edit-form ul.students li dd.status.presence span.icon { background: #06c793; }
.container.report .report .body .attendance-edit-form ul.students li dd.status.absence span.icon { background: #ff4359; }
.container.report .report .body .attendance-edit-form ul.students li dd.status.earlyleave span.icon { background: #84b3ec; }

.container.report .report .body .attendance-edit-form ul.students li:nth-child(4n+1) dd.status,
.container.report .report .body .attendance-edit-form ul.students li:nth-child(4n+2) dd.status { border-top-color: #f6f6f6; }

.container.report .report .body .attendance-edit-form ul.students li dd:hover.status {border-top-width:0px;border-bottom-width:3px;}
.container.report .report .body .attendance-edit-form ul.students li dd:active.status {border-top-width:3px;border-bottom-width:0px;}

.container.report .report .body .attendance-edit-form p.memo {
	display: block;
	width: 590px;
	margin: 5px;
	padding: 3px 0;
}

.container.report .report .body .attendance-edit-form p.memo span.title {
	display: block;
	margin: 8px 12px 2px 12px;
	text-align: left;
	color: #ad9061;
}

.container.report .report .body .attendance-edit-form p.memo textarea {
	width: 550px;
	margin: 5px 0;
	padding: 10px;
	background: #f0eee4;
	border: none;
	border-radius: 4px;
	font-size: 12px;
	resize: none;
}

.container.report .report .body .attendance-edit-form .buttons { display: inline-block; margin-top: 5px; }
.container.report .report .body .attendance-edit-form .buttons a { width: 79px; float: left; margin: 0 3px; }
.container.report .report .body .attendance-edit-form .buttons span.desc {
	float: left;
	width: 330px;
	line-height: 36px;
	text-align: left;
	font-size: 12px;
	color: #888;
}

.container.report .report .body .contents.detail-report li:last-child {
	border-bottom: none;
}

.container.report .report .body .contents.detail-report li .btns { text-align: right; }
.container.report .report .body .contents.detail-report li .btns a { cursor: pointer; width: 600px; display: inline-block; }

.container.report .report .body .contents.index li {
	display: block;
	height: 24px;
}

.container.report .report .body .contents.detail-report.index li { cursor: pointer; }
.container.report .report .body .contents.detail-report.index li:hover { background: #f8f7f2; }

.container.report .report .body .contents.index li dl.archived a {
	color: #aaa;
}

.container.report .report .body .contents.no-data li {
	border-bottom: none;
}

.container.report .report .body .contents.detail-report select {
	width: 200px;
	height: 24px;
	padding: 2px 5px;
	border-radius: 4px;
	border: 1px solid #ccc;
	color: #555;
	font-size: 11px;
	box-shadow: none;
}

.container.report .report .body .contents.detail-report select.chart {
	width: 240px;
}

.container.report .report .body .contents.detail-report dd {
	float: left;
	width: 80px;
	line-height: 24px;
	text-align: center;
}

.container.report .report .body .contents.detail-report ul.attendance-list dd {
	float: none;
	display: inline-block;
}

.container.report .report .body .contents.detail-report dd.name {width: 200px;text-align:left;padding:0 5px;}
.container.report .report .body .contents.detail-report li:hover dd.name a { text-decoration: underline; }
.container.report .report .body .contents.detail-report dd.positive {font-size:16px;font-weight:bold;color:#176fc7;}
.container.report .report .body .contents.detail-report dd.negative {font-size:16px;font-weight:bold;color:#f14c31;}
.container.report .report .body .contents.detail-report dd.sum {font-size:16px;font-weight:bold;color:#3b9032;}
.container.report .report .body .contents.detail-report dd.best {width: 260px;text-align:left;padding:0 5px;}
.container.report .report .body .contents.detail-report dd.date {width: 138px;padding:0; }
.container.report .report .body .contents.detail-report dd.absence,
.container.report .report .body .contents.detail-report dd.lateness,
.container.report .report .body .contents.detail-report dd.earlyleave {width: 159px;padding:0 4px;}

.container.report .report .body .contents.detail-report p.memo {
	display: none;
	margin: 5px 10px 5px 100px;
	padding: 3px 5px;
	border-bottom: 1px dashed #ad9061;
	color: #ad9061;
}

.container.report .report .body .contents.detail-report li:hover p.memo {
	background: #ffce38;
	border-bottom-color: #7f4500;
	color: #7f4500;
}

.container.report .report .body .contents.detail-report ul.attendance-list.memo p.memo { display: inline-block; }

.container.report .report .body .contents.detail-report li.date span.show-memo {
	display: none;
	float: right;
    font-size: 12px;
    font-weight: normal;
    margin: 3px 5px 0 0;
}

.container.report .report .body .contents.detail-report ul.attendance-list.unfolded span.show-memo { display: inline; }

.container.report .report .body .contents.detail-report li.header dd.name {padding:0 10px 0 0;}
.container.report .report .body .contents.detail-report li.header dd span.icon {display:inline-block;width:24px;height:24px;background-image:url(/assets/img/sp/sp_detail_report.png?v=1661943444)}
.container.report .report .body .contents.detail-report li.header dd.positive span.icon {background-position:-90px -130px;}
.container.report .report .body .contents.detail-report li.header dd.negative span.icon {background-position:-160px -120px;}
.container.report .report .body .contents.detail-report li.header dd.sum span.icon {background-position:-120px -130px;}
.container.report .report .body .contents.detail-report li.header dd.best {text-align: center;}
.container.report .report .body .contents.detail-report li.header dd.best span {display:inline-block;width:53px;height:24px;color:#fff;padding-left:27px;line-height:24px;text-align:left;background:url(/assets/img/sp/sp_detail_report.png?v=1661943444) -90px -80px no-repeat;}

.container.report .report .body .contents.detail-report li.header dd.date { line-height: 24px; }
.container.report .report .body .contents.detail-report li.header dd.absence span.icon {display:inline-block;width:24px;height:24px;background:url(/assets/img/sp/sp_detail_report.png?v=1661943444) -260px -90px;margin-right:5px;vertical-align:middle;}
.container.report .report .body .contents.detail-report li.header dd.lateness span.icon {display:inline-block;width:24px;height:24px;background:url(/assets/img/sp/sp_detail_report.png?v=1661943444) -260px -120px;margin-right:5px;vertical-align:middle;}
.container.report .report .body .contents.detail-report li.header dd.earlyleave span.icon {display:inline-block;width:24px;height:24px;background:url(/assets/img/sp/sp_detail_report.png?v=1661943444) -30px -180px;margin-right:5px;vertical-align:middle;}

.container.report .report .body .contents.detail-report li.header p.section-title {
	font-size: 13px;
	font-weight: bold;
	color: #000;
	line-height: 24px;
}

.container.report .report .body .contents.detail-report li.header span.only-has-memo {
	float: right;
    font-size: 12px;
    font-weight: normal;
    margin: 3px 5px 0 0;
}

.container.report .report .body .contents.position {
	min-height: 145px;
}

.container.report .report .body .contents .position li {
	width: 254px;
}

.container.report .report .body .contents .position li.position {
	position: relative;
}

.container.report .report .body .contents .position dl {
	margin-left: 7px;
}

.container.report .report .body .contents .position dl dd {
	margin: 43px 0;
	color: #000;
}

.container.report .report .body .contents .position dl dd.lower { background: #ff8168; border-radius: 12px 0 0 12px; }
.container.report .report .body .contents .position dl dd.middle { background: #e2f324; }
.container.report .report .body .contents .position dl dd.upper { background: #52c5e2; border-radius: 0 12px 12px 0; }

.container.report .report .body .contents .position .pin { position: absolute; display: none; width: 24px; margin-left: -12px; height: 36px; background-image: url(/assets/img/sp/sp_detail_report.png?v=1661943444); background-repeat: no-repeat; }
.container.report .report .body .contents .position .pin.positive { top: 7px; background-position: -120px -160px; }
.container.report .report .body .contents .position .pin.negative { top: 73px; background-position: -90px -160px; }
.container.report .report .body .contents .position .pin.lower { display: block; left: 47px; }
.container.report .report .body .contents .position .pin.middle { display: block; left: 127px; }
.container.report .report .body .contents .position .pin.upper { display: block; left: 207px; }

.container.report .report .body .contents .best-card li {
	width: 410px;
}

.container.report .report .body .contents.position li.header a.info {
	cursor: pointer;
	position: relative;
	display: inline-block;
	margin-left: 5px;
}

.container.report .report .body .contents.position li.header a.info span.icon {
	display: inline-block;
	width: 21px;
	height: 21px;
	background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -170px -150px no-repeat;
	vertical-align: middle;
	opacity: 0.5;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}

.container.report .report .body .contents.position li.header a:hover.info span.icon {
	background-position: 0 -180px;
	opacity: 1.0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.container.report .report .body .contents.position li.header a.info span.desc {
	position: absolute;
	display: none;
	top: 0;
	left: 25px;
	width: 230px;
	padding: 5px 8px;
	border: 2px solid #ffba44;
	border-radius: 5px;
	background: #fff;
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.container.report .report .body .contents.position li.header a:hover.info span.desc {
	display: block;
}

.container.report .report .body .contents .best-card li dl {
	width: 410px;
	height: 40px;
	margin: 5px 0 5px 0;
	padding: 0;
	border: none;
}

.container.report .report .body .contents .best-card li dl.no-data {
	border: 2px dotted #aaa;
	width: 406px;
	height: 36px;
	line-height: 36px;
	border-radius: 6px;
	color: #888;
	text-align: center;
}

.container.report .report .body .contents .best-card li dl dd.card {
	width: 367px;
	padding-right: 3px;
	border-radius: 0 6px 6px 0;
	text-align: left;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.report .report .body .contents .best-card li dl dd.card .icon {
	float: left;
	height: 32px;
	margin: 4px 8px 4px 4px;
}

.container.report .report .body .contents .best-card li dl dd.card .text {
	display: inline;
	font-size: 14px;
	line-height: 40px;
	font-weight: bold;
	margin-right: 3px;
}

.container.report .report .body .contents .best-card li dl dd.card .desc {
	cursor: pointer;
	display: inline;
	color: #333;
	font-size: 14px;
	line-height: 40px;
}

.container.report .report .body .contents .best-card li dl.positive dd.card { background: #d8e4f0; }
.container.report .report .body .contents .best-card li dl.negative dd.card { background: #ffe6e2; }
.container.report .report .body .contents .best-card li dl.positive dd.card .text { color: #176cc2; }
.container.report .report .body .contents .best-card li dl.negative dd.card .text { color: #f14c31; }

.container.report .report .body .contents .best-card li dl dd.score {
	width: 40px;
	height: 24px;
	padding: 8px 0;
	border-radius: 6px 0 0 6px;
}

.container.report .report .body .contents .best-card li dl dd.score .icon { margin:0 auto;width:24px;height:24px;background-image:url(/assets/img/sp/sp_detail_report.png?v=1661943444);background-repeat:no-repeat;}
.container.report .report .body .contents .best-card li dl.positive dd.score .icon { background-position: -90px -130px; }
.container.report .report .body .contents .best-card li dl.negative dd.score .icon { background-position: -160px -120px; }

.container.report .report .body .contents .best-card li dl.positive dd.score { background: #5098e1; }
.container.report .report .body .contents .best-card li dl.negative dd.score { background: #f14c31; }

.container.report .report .body .contents.detail-report li .pie-list {
	margin: 10px 0;
	width: 48%;
	float: left;
}

.container.report .report .body .contents.detail-report li .pie-list.positive {
	margin-right: 2%;
}

.container.report .report .body .contents.detail-report li .pie-list.negative {
	margin-left: 2%;
}

.container.report .report .body .contents.detail-report li .pie-list li {
	width: 100%;
	height: 80px;
	margin: 0 0 10px 0;
	padding: 0;
	border: none;
}

.container.report .report .body .contents.detail-report li .card-list {
	margin: 10px 0 0 0;
	width: 48%;
	float: left;
}

.container.report .report .body .contents.detail-report li .card-list.positive {
	margin-right: 2%;
}

.container.report .report .body .contents.detail-report li .card-list.negative {
	margin-left: 2%;
}

.container.report .report .body .contents.detail-report li .card-list li {
	width: 100%;
	height: 80px;
	margin: 0 0 10px 0;
	padding: 0;
	border: none;
}

.container.report .report .body .contents.detail-report li .card-list li.detail { cursor: pointer; }

.container.report .report .body .contents.detail-report li .card-list li.no-data {
	cursor: default;
	height: 76px;
	line-height: 76px;
	border: 2px dotted #aaa;
	border-radius: 6px;
	color: #888;
	text-align: center;
}

.container.report .report .body .contents.detail-report li .card-list li.fold {
	display: none;
}

.container.report .report .body .contents.detail-report li .card-list dd.card {
	width: 269px;
	padding: 8px;
	border-radius: 6px 0 0 6px;
	text-align: left;
}

.container.report .report .body .contents.detail-report li .card-list dd.card .icon {
	float: left;
	height: 64px;
	margin-right: 8px;
}

.container.report .report .body .contents.detail-report li .card-list dd.card .text {
	font-size: 14px;
	font-weight: bold;
}

.container.report .report .body .contents.detail-report li .card-list dd.card .desc {
	color: #333;
	line-height: 20px;
}

.container.report .report .body .contents.detail-report li .card-list.positive dd.card { background: #d8e4f0; }
.container.report .report .body .contents.detail-report li .card-list.negative dd.card { background: #ffe6e2; }
.container.report .report .body .contents.detail-report li .card-list.positive dd.card .text { color: #176cc2; }
.container.report .report .body .contents.detail-report li .card-list.negative dd.card .text { color: #f14c31; }

.container.report .report .body .contents.detail-report li .card-list dd.score {
	width: 60px;
	height: 44px;
	padding: 18px 0;
	border-radius: 0 6px 6px 0;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
}

.container.report .report .body .contents.detail-report li .card-list dd.hover {
	display: none;
	width: 110px;
	height: 44px;
	padding: 18px 0;
	border-radius: 0 6px 6px 0;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}


#report_card li.list { position: relative; margin-bottom: 10px; }

.container.report .report .body .contents.detail-report li .card-list dd.score .icon { margin:0 auto;width:24px;height:24px;background-image:url(/assets/img/sp/sp_detail_report.png?v=1661943444);background-repeat:no-repeat;}
.container.report .report .body .contents.detail-report li .card-list dd.hover .icon { margin:0 auto;width:28px;height:28px;background:url(/assets/img/sp/sp_detail_report.png?v=1661943444) -260px -150px no-repeat;}

.container.report .report .body .contents.detail-report li .card-list.positive dd.score .icon { background-position: -90px -130px; }
.container.report .report .body .contents.detail-report li .card-list.negative dd.score .icon { background-position: -160px -120px; }

.container.report .report .body .contents.detail-report li .card-list.positive dd.score,
.container.report .report .body .contents.detail-report li .card-list.positive dd.hover { background: #5098e1; }

.container.report .report .body .contents.detail-report li .card-list.negative dd.score,
.container.report .report .body .contents.detail-report li .card-list.negative dd.hover { background: #f14c31; }

.container.report .report .body .contents.detail-report li .card-list li:hover.detail dd.card { width: 219px; }
.container.report .report .body .contents.detail-report li .card-list li:hover.detail dd.score { display: none; }
.container.report .report .body .contents.detail-report li .card-list li:hover.detail dd.hover { display: block; }

.container.report .report .body .contents.detail-report li .card-detail {
	position: absolute;
	display: none;
	width: 200px;
	top: 0;
	padding: 10px;
	border-radius: 6px;
	border: 2px solid #888;
	background: #fff;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.container.report .report .body .contents.detail-report li .card-detail ul {
	max-height: 250px;
	overflow-y: scroll;
}

.container.report .report .body .contents.detail-report li .card-detail li {
	width: 180px;
	height: 24px;
	line-height: 24px;
	margin: inherit;
	padding: inherit;
	border-bottom: 1px dotted #ddd;
}

.container.report .report .body .contents.detail-report li .card-detail li span.name {
	float: left;
	display: inline-block;
	width: 140px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.report .report .body .contents.detail-report li .card-detail li span.count {
	display: inline-block;
	width: 40px;
	color: #de6517;
	font-weight: bold;
	text-align: right;
}

.container.report .report .body .contents.detail-report li .card-detail.positive { border-color: #5098e1; }
.container.report .report .body .contents.detail-report li .card-detail.positive li span.count { color: #5098e1; }

.container.report .report .body .contents.detail-report li .card-detail.negative { border-color: #f14c31; }
.container.report .report .body .contents.detail-report li .card-detail.negative li span.count { color: #f14c31; }

.container.report .report .body .contents.detail-report li .card-detail a.btn-close { border: 2px solid #bbb; border-radius: 18px; }

.container.report .report .body .contents.detail-report li .memo-list {
	margin: 10px 0;
}

.container.report .report .body .contents.detail-report li .memo-list li {
	margin: 10px 0;
	width: 100%;
	min-height: 100px;
	margin: 0 0 10px 0;
	padding: 0;
	border: none;
}

.container.report .report .body .contents.detail-report li .memo-list li.fold {
	display: none;
}

.container.report .report .body .contents.detail-report li .memo-list dd.student {
	position: relative;
	width: 100%;
	height: 30px;
	color: #fff;
	border-radius: 6px 6px 0 0;
	font-size: 16px;
	font-weight: bold;
	line-height: 30px;
}

.container.report .report .body .contents.detail-report li .memo-list dd.student .icon { position:absolute; left:-8px; top:-8px; margin:0 auto;width:24px;height:24px;background-image:url(/assets/img/sp/sp_detail_report.png?v=1661943444);background-repeat:no-repeat;}
.container.report .report .body .contents.detail-report li .memo-list dd.student .name { font-size:13px; text-align: left; margin-left: 27px;}
.container.report .report .body .contents.detail-report li .memo-list dd.student .name a { color: #fff; margin-left: 3px; }
.container.report .report .body .contents.detail-report li .memo-list dd.student .name a.link { cursor: pointer; }
.container.report .report .body .contents.detail-report li .memo-list dd.student .name a:hover.link { color: #ffba44; }
.container.report .report .body .contents.detail-report li .memo-list dd.student .date { position: absolute; top: 0; right: 10px; font-size: 11px; }

.container.report .report .body .contents.detail-report li .memo-list .positive dd.student .icon { background-position: -90px -130px; }
.container.report .report .body .contents.detail-report li .memo-list .negative dd.student .icon { background-position: -160px -120px; }

.container.report .report .body .contents.detail-report li .memo-list .positive dd.student { background: #5098e1; }
.container.report .report .body .contents.detail-report li .memo-list .negative dd.student { background: #f14c31; }

.container.report .report .body .contents.detail-report li .memo-list dd.memo {
	position: relative;
	width: 100%;
	border-radius: 0 0 6px 6px;
	text-align: left;
	padding: 3px 0;
}

.container.report .report .body .contents.detail-report li .memo-list dd.memo .icon {	float: left; width: 80px; margin: 5px 0 5px 7px; text-align: center; }
.container.report .report .body .contents.detail-report li .memo-list dd.memo .icon img { display: block; margin: 0 auto; }
.container.report .report .body .contents.detail-report li .memo-list dd.memo .category { color: #333; }
.container.report .report .body .contents.detail-report li .memo-list dd.memo .text { font-size: 13px; font-weight: bold; }
.container.report .report .body .contents.detail-report li .memo-list dd.memo .date { position:absolute; right: 12px; top: 5px; font-size: 12px; }
.container.report .report .body .contents.detail-report li .memo-list dd.memo .desc { color: #333; line-height: 20px; display: inline-block; width: 620px; }
.container.report .report .body .contents.detail-report li .memo-list dd.memo .desc.fold { display: none; }
.container.report .report .body .contents.detail-report li .memo-list dd.memo .datetime { font-size: 10px; color: #888; }
.container.report .report .body .contents.detail-report li .memo-list dd.memo .datetime a.btn-delete { display: inline-block; cursor: pointer; width: 13px; height: 13px; background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -110px -110px no-repeat; vertical-align: text-bottom; margin-left: 1px; }
.container.report .report .body .contents.detail-report li .memo-list dd.memo .datetime a:hover.btn-delete { background-position:0 -60px; }
.container.report .report .body .contents.detail-report li .memo-list dd.memo a.btn-memo { cursor: pointer; display: inline-block; width: 10px; height: 10px; background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -140px -110px no-repeat; margin-left: 2px;}
.container.report .report .body .contents.detail-report li .memo-list dd.memo a:hover.btn-memo { background-position: -40px -60px; }

.container.report .report .body .contents.detail-report li .memo-list dd.memo .comment { padding-left: 80px; }
.container.report .report .body .contents.detail-report li .memo-list dd.memo .comment .option { line-height: 20px; }
.container.report .report .body .contents.detail-report li .memo-list dd.memo .comment .option .important_block {	margin-left: 5px; }
.container.report .report .body .contents.detail-report li .memo-list dd.memo .comment .option .letters {	font-size: 11px; float: right; margin-right: 140px; }

.container.report .report .body .contents.detail-report li .memo-list dd.memo textarea.comment_form {
	width: 498px;
	resize: none;
	background-color: #fff;
	border: none;
	border-radius: 4px;
}

.container.report .report .body .contents.detail-report li .memo-list dd.memo button.btn_save_comment {
	width: 60px;
	height: 48px;
	background: #27bc97;
	border-radius: 5px;
	border: none;
	border-bottom: 2px solid #158f71;
	font-size: 13px;
	margin-left: 1px;
	text-align: center;
	color: #fff;
}

.container.report .report .body .contents.detail-report li .memo-list dd.memo button.btn_cancel_comment {
	width: 60px;
	height: 48px;
	background: #f94759;
	border-radius: 5px;
	border: none;
	border-bottom: 2px solid #db2134;
	font-size: 13px;
	text-align: center;
	color: #fff;
}

.container.report .report .body .contents.detail-report li .memo-list .positive dd.memo { background: #d8e4f0; }
.container.report .report .body .contents.detail-report li .memo-list .negative dd.memo { background: #ffe6e2; }
.container.report .report .body .contents.detail-report li .memo-list .positive dd.memo .text { color: #176cc2; }
.container.report .report .body .contents.detail-report li .memo-list .negative dd.memo .text { color: #f14c31; }

.container.report .report .body .contents.no-data {
	padding: 20px 0;
	text-align: center;
}

.container.report .report .body .contents.no-data span.icon {
	display: inline-block;
	width: 90px;
	height: 90px;
	background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) 0 -210px no-repeat;
	margin-bottom: 10px;
}

.container.report .report .body .contents.detail-report .memo-list.no-data {
	padding: 10px 0;
	text-align: center;
}

.container.report .report .body .contents.detail-report .memo-list.no-data li {
	margin: 0;
	line-height: 24px;
	min-height: 0;
}

.container.report .report .body .contents.detail-report .memo-list.no-data span.icon {
	display: inline-block;
	width: 90px;
	height: 90px;
	background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) 0 -210px no-repeat;
	margin-bottom: 10px;
}

.container.report .report .body .contents.detail-report li .history-list {
	margin: 10px 0;
}

.container.report .report .body .contents.detail-report li .btn-delete-history {
	text-align: right;
	margin: 5px;
}

.container.report .report .body .contents.detail-report li .btn-delete-history a.btn-delete {
	cursor: pointer;
}

.container.report .report .body .contents.detail-report li .btn-delete-history a.btn-delete span {
	display: inline-block;
	width: 15px;
	height: 15px;
	vertical-align: top;
	background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -90px -110px no-repeat;
}

.container.report .report .body .contents.detail-report li .btn-delete-history a:hover.btn-delete {
	color: #000;
}

.container.report .report .body .contents.detail-report li .btn-delete-history a:hover.btn-delete span {
	background-position:-20px -60px;
}

.container.report .report .body .contents.detail-report li .history-list li {
	width: 100%;
	margin: 0 0 10px 0;
	padding: 0;
	border: none;
}

.container.report .report .body .contents.detail-report li .history-list li.fold {
	display: none;
}

.container.report .report .body .contents.detail-report .attendance-list {
	width: 720px;
	margin: 0 20px;
}

.container.report .report .body .contents.detail-report .attendance-list li.date,
.container.report .report .body .contents.detail-report li .history-list li.date {
	color: #7d563d;
	font-weight: bold;
	padding: 5px 0;
	margin: 10px 0 5px 0;
	border-radius: 6px;
}

.container.report .report .body .contents.detail-report .attendance-list li.date {
	cursor: default;
	border: none;
	line-height: 24px;
	font-size: 13px;
}

.container.report .report .body .contents.detail-report .attendance-list li.date span.icon,
.container.report .report .body .contents.detail-report li .history-list li.date span.icon {
	display: inline-block;
	vertical-align: middle;
	width: 16px;
	height: 18px;
	margin: 0 7px;
	background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -180px -80px no-repeat;
}

.container.report .report .body .contents.detail-report li .history-list dd.student {
	position: relative;
	width: 100%;
	height: 30px;
	color: #fff;
	border-radius: 6px 6px 0 0;
	font-size: 16px;
	font-weight: bold;
	line-height: 30px;
}

.container.report .report .body .contents.detail-report li .history-list dd.student .icon { position:absolute; left:-8px; top:-8px; margin:0 auto;width:24px;height:24px;background-image:url(/assets/img/sp/sp_detail_report.png?v=1661943444);background-repeat:no-repeat;}
.container.report .report .body .contents.detail-report li .history-list dd.student .name { font-size:13px; text-align: left; margin-left:15px;}
.container.report .report .body .contents.detail-report li .history-list dd.student .name label { height: 18px; margin-top: 6px; }
.container.report .report .body .contents.detail-report li .history-list dd.student .name a { color: #fff; margin-left: 3px; vertical-align: top; }
.container.report .report .body .contents.detail-report li .history-list dd.student .name a.link { cursor: pointer; }
.container.report .report .body .contents.detail-report li .history-list dd.student .name a:hover.link { color: #ffba44; }
.container.report .report .body .contents.detail-report li .history-list dd.student .date { position: absolute; top: 0; right: 10px; font-size: 11px; }
.container.report .report .body .contents.detail-report li .history-list dd.student .date a.btn-delete { display: inline-block; cursor: pointer; width: 15px; height: 15px; background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -150px -150px no-repeat; vertical-align: text-bottom; margin-left: 5px; }
.container.report .report .body .contents.detail-report li .history-list dd.student .date a:hover.btn-delete { background-position:-20px -60px; }

.container.report .report .body .contents.detail-report li .history-list .positive dd.student .icon { background-position: -90px -130px; }
.container.report .report .body .contents.detail-report li .history-list .negative dd.student .icon { background-position: -160px -120px; }

.container.report .report .body .contents.detail-report li .history-list .positive dd.student { background: #5098e1; }
.container.report .report .body .contents.detail-report li .history-list .negative dd.student { background: #f14c31; }

.container.report .report .body .contents.detail-report li .history-list dd.memo {
	position: relative;
	width: 100%;
	border-radius: 0 0 6px 6px;
	text-align: left;
	padding: 3px 0;
}

.container.report .report .body .contents.detail-report li .history-list dd.memo .icon { float: left; width: 80px; margin: 2px 0 0 7px; text-align: center; }
.container.report .report .body .contents.detail-report li .history-list dd.memo.no-memo .icon { margin: 0 0 0 7px; }
.container.report .report .body .contents.detail-report li .history-list dd.memo.no-memo .icon .category { display: none; }
.container.report .report .body .contents.detail-report li .history-list dd.memo .icon img { display: block; margin: 0 auto; }
.container.report .report .body .contents.detail-report li .history-list dd.memo .category { color: #333; }
.container.report .report .body .contents.detail-report li .history-list dd.memo .text { font-size: 13px; font-weight: bold; }
.container.report .report .body .contents.detail-report li .history-list dd.memo .desc { color: #333; line-height: 20px; display: inline-block; width: 620px; }
.container.report .report .body .contents.detail-report li .history-list dd.memo .desc.fold { display: none; }
.container.report .report .body .contents.detail-report li .history-list dd.memo.no-memo .desc { margin-bottom: 0; }
.container.report .report .body .contents.detail-report li .history-list dd.memo .datetime { font-size: 10px; color: #888; }
.container.report .report .body .contents.detail-report li .history-list dd.memo .datetime a.btn-delete { display: inline-block; cursor: pointer; width: 13px; height: 13px; background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -110px -110px no-repeat; vertical-align: text-bottom; margin-left: 1px; }
.container.report .report .body .contents.detail-report li .history-list dd.memo .datetime a:hover.btn-delete { background-position:0 -60px; }
.container.report .report .body .contents.detail-report li .history-list dd.memo a.btn-memo { cursor: pointer; display: inline-block; width: 10px; height: 10px; background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -140px -110px no-repeat; margin-left: 2px;}
.container.report .report .body .contents.detail-report li .history-list dd.memo a:hover.btn-memo { background-position: -40px -60px; }
.container.report .report .body .contents.detail-report li .history-list dd.memo span.teacher-name { float: right; margin-right: 10px; font-weight: normal; font-size: 12px; }
.container.report .report .body .contents.detail-report li .history-list dd.memo .comment { padding-left: 80px; }
.container.report .report .body .contents.detail-report li .history-list dd.memo .comment .option { line-height: 20px; }
.container.report .report .body .contents.detail-report li .history-list dd.memo .comment .option .important_block {	margin-left: 5px; }
.container.report .report .body .contents.detail-report li .history-list dd.memo .comment .option .letters {	font-size: 11px; float: right; margin-right: 140px; }

.container.report .report .body .contents.detail-report li .history-list dd.memo textarea.comment_form {
	width: 467px;
	resize: none;
	background-color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 12px;
	padding: 5px;
	height: 42px;
}

.container.report .report .body .contents.detail-report li .history-list dd.memo button.btn_save_comment {
	width: 60px;
	height: 52px;
	background: #27bc97;
	border-radius: 5px;
	border: none;
	border-bottom: 2px solid #158f71;
	font-size: 13px;
	margin-left: 1px;
	text-align: center;
	color: #fff;
}

.container.report .report .body .contents.detail-report li .history-list dd.memo button:hover.btn_save_comment { background: #2dd6ac; border-bottom: 2px solid #1dc299; }

.container.report .report .body .contents.detail-report li .history-list dd.memo button.btn_cancel_comment {
	width: 80px;
	height: 52px;
	background: #e02b3d;
	border-radius: 5px;
	border: none;
	border-bottom: 2px solid #a81928;
	font-size: 13px;
	text-align: center;
	color: #fff;
}

.container.report .report .body .contents.detail-report li .history-list dd.memo button:hover.btn_cancel_comment { background: #f94759; border-bottom: 2px solid #db2134; }

.container.report .report .body .contents.detail-report li .history-list .positive dd.memo { background: #d8e4f0; }
.container.report .report .body .contents.detail-report li .history-list .negative dd.memo { background: #ffe6e2; }
.container.report .report .body .contents.detail-report li .history-list .positive dd.memo .text { color: #176cc2; }
.container.report .report .body .contents.detail-report li .history-list .negative dd.memo .text { color: #f14c31; }

.container.report .report .body .contents.detail-report li .history-list .history-tip { position: relative; display: none; background: #f0eee4; font-size: 13px; padding: 10px; margin-top: 2px; }
.container.report .report .body .contents.detail-report li .history-list .history-tip.reset-dates { margin-top: 10px; border-radius: 6px 6px 0 0; }
.container.report .report .body .contents.detail-report li .history-list .history-tip.delete-all { margin-bottom: 10px; border-radius: 0 0 6px 6px; }
.container.report .report .body .contents.detail-report li .history-list .history-tip.delete-all span.warning { color: #f03849; font-weight: bold; }
.container.report .report .body .contents.detail-report li .history-list .history-tip.multi-select { display: block; background: none; color: #333; }

.container.report.owner .report .body .contents.detail-report li .history-list .history-tip.reset-dates,
.container.report.owner .report .body .contents.detail-report li .history-list .history-tip.delete-all { display: block; }

.container.report .report .body .contents.detail-report li .history-list .history-tip p { width: 500px; margin: 5px 0 5px 30px; line-height: 20px; color: #333; }
.container.report .report .body .contents.detail-report li .history-list .history-tip p.title { width: 700px; margin-bottom: 10px; color: #ad9061; font-weight: bold; border-radius: 6px 6px 0 0; }

.container.report .report .body .contents.detail-report li .history-list .history-tip p span.icon { display: inline-block; width: 24px; height: 24px; line-height: 24px; margin-left: -30px; margin-right: 5px; border-radius: 12px; background: #fff; color: #ad9061; vertical-align: middle; text-align: center; font-weight: bold;}
.container.report .report .body .contents.detail-report li .history-list .history-tip p.title span.icon { background: #ad9061; color: #fff; }

.container.report .report .body .contents.detail-report li .history-list .history-tip.multi-select p { margin-left: 5px; width: 700px; }
.container.report .report .body .contents.detail-report li .history-list .history-tip.multi-select p.title { color: #000; margin-bottom: 5px; }
.container.report .report .body .contents.detail-report li .history-list .history-tip.multi-select span.tip { color: #f03849; }

.container.report .report .body .contents.detail-report li .history-list .history-tip a {
	cursor: pointer;
	position: absolute;
	bottom: 12px;
	right: 12px;
	display: inline-block;
	margin-left: 5px;
	min-width: 135px;
	height: 36px;
	line-height: 36px;
	vertical-align: middle;
	padding: 2px 10px;
	border-radius: 5px;
	border-top: 3px solid #f0eee4;
	border-bottom: 2px solid #937442;
	text-align: center;
	color: #fff;
	background: #ad9061;
	font-size: 12px;
	font-weight: normal;
	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-ms-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}

.container.report .report .body .contents.detail-report li .history-list .history-tip a:hover {border-top-width:0px;border-bottom-width:5px;}
.container.report .report .body .contents.detail-report li .history-list .history-tip a:active {border-top-width:4px;border-bottom-width:1px;}

.container.report .report .body .contents.detail-report li .history-list .history-tip a:hover.brown-yellow,
.container.report .report .body .contents.detail-report li .history-list .history-tip a:active.brown-yellow {background:#27bc97;border-bottom-color:#158f71;}
.container.report .report .body .contents.detail-report li .history-list .history-tip a:hover.brown-red,
.container.report .report .body .contents.detail-report li .history-list .history-tip a:active.brown-red {background:#f03849;border-bottom-color:#c82333;}

.container.report .board .panel {
	float: left;
	width: 180px;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	margin-right: 15px;
}

.container.report .board .panel ul.board-list {
	width: 180px;
	padding: 0;
	background: #f1f0eb;
	border-radius: 6px 6px 0 0;
}

.container.report .board .panel ul.board-list li {
	cursor: pointer;
	display: block;
	width: 150px;
	line-height: 18px;
	margin: 0 8px;
	padding: 7px;
	background: #f1f0eb;
	color: #7f4500;
	font-size: 13px;
	font-weight: normal;
	word-wrap: break-word;
}

.container.report .board .panel ul.board-list li:first-child {
	border-bottom: 1px solid #d0ccc0;
	line-height: 26px;
	margin: 3px 8px;
}

.container.report .board .panel ul.board-list li:hover { background: #f0eee4; }

.container.report .board .panel ul.board-list li.selected,
.container.report .board .panel ul.board-list li:hover.selected { color: #000; font-weight: bold; }

.container.report .board .panel ul.board-list li span.count-article { color: #d86b00; font-size: 11px; font-weight: normal; margin-left: 3px; }
.container.report .board .panel ul.board-list li span.icon-new-comment { display: inline-block; width: 12px; height: 12px; margin-left: 3px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -290px -40px no-repeat; vertical-align: middle;}
.container.report .board .panel ul.board-list li span.icon-secret { display: inline-block; width: 18px; height: 18px; margin-left: 3px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -280px -10px no-repeat; vertical-align: middle; }

.container.report .board .panel a.btn-add-new-board {
	cursor: pointer;
	display: block;
	width: 150px;
	height: 28px;
	line-height: 28px;
	padding: 9px 15px;
	border-radius: 0 0 6px 6px;
	background: #e8e5de;
	font-size: 16px;
	font-weight: bold;
	color: #675f58;
	text-align: center;
	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-ms-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}

.container.report .board .panel a:hover.btn-add-new-board { background: #d1cfc8; }

.container.report .board .panel a.btn-add-new-board span.ico {
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
	margin-right: 8px;
	width: 19px;
	height: 19px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -490px -150px no-repeat;
	vertical-align: text-bottom;
}

.container.report .board .panel a.btn-write-article {
	margin-top: 20px;
}

.container.report .board .accounts-status {
	display: none;
	width: 160px;
	padding: 20px 10px 10px 10px;
	background: #f0eee4;
	border-radius: 6px;
	color: #777;
	text-align: center;
	line-height: 18px;
}

.container.report .board .accounts-status.show.dim {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.container.report .board .accounts-status.show.auto {
	clear: both;
	float: left;
	position: relative;
	display: block;
}

.container.report .board .panel.dim { visibility: hidden; }
.container.report .board .panel.auto { visibility: visible; }

@media screen and (min-width: 1380px) {
	.container.report .board .accounts-status.show.dim,
	.container.report .board .accounts-status.show.auto {
		clear: none;
		float: none;
		position: absolute;
		top: 0;
		left: 970px;
	}

	.container.report .board .accounts-status .close { display: none; }

	.container.report .board .panel { visibility: visible !important; }
}

.container.report .board.wizard .accounts-status.show { display: none; }

.container.report .board .accounts-status .close {
	top: 5px;
	right: 5px;
}

.container.report .board .accounts-status .title {
	font-size: 13px;
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	padding-bottom: 5px;
	margin-bottom: 8px;
}

.container.report .board .accounts-status .circles-wrp {
	position: relative;
	display: block;
	width: 120px;
	height: 120px;
	margin: 15px auto;
	background: #fff;
	border-radius: 60px;
}

.container.report .board .accounts-status .circles-text {
	position: absolute;
	top: 0px;
	left: 0px;
	text-align: center;
	width: 100%;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: -0.01em;
	font-weight: bold;
	color: #000;
	margin-top: 44px;
}

.container.report .board .accounts-status .circles-text span.percentage {
	display: block;
	color: #de6517;
	font-family: arial;
	font-size: 14px;
	letter-spacing: 0;
	font-weight: normal;
}

.container.report .board .accounts-status a.btn-download-parents-code {
	display: block;
	width: 160px;
	padding: 0;
	font-size: 13px;
}

.container.report .board .body {
	position: absolute;
	top: 0;
	left: 195px;
	width: 760px;
	margin: 0 auto;
}

.container.report .board.wizard .panel { display: none; }
.container.report .board.wizard .body { float: none; width: 625px; }

/* board guide */
.container.report .board .body .board-wizard {
	position: relative;
	display: block;
	width: 720px;
}

.container.report .board .body .board-wizard .banner {
	width: 400px;
	height: 300px;
	margin: 40px auto;
	background: url(/assets/img/sp/img_board_wizard_main2.png?v=1661943444) no-repeat;
}

.container.report .board .body .board-wizard p span.text {
	display: inline-block;
	height: 90px;
	line-height: 1.6em;
	color: #7f4500;
	font-size: 20px;
	font-weight: bold;
	vertical-align: bottom;
}

.container.report .board .body .board-wizard p a.btn-start-board {
	cursor: pointer;
	display: inline-block;
	width: 280px;
	height: 90px;
	line-height: 90px;
	margin-left: 50px;
	background: #ffce38;
	border-radius: 8px;
	color: #7f4500;
	font-size: 24px;
	font-weight: normal;
	text-align: center;
}

.container.report .board .body .board-wizard p a.btn-start-board:hover { background: #ffde38; }

/* common.board-title */
.container.report .board .body .board-title {
	position: relative;
	display: block;
	width: 736px;
	margin-top: 3px;
	padding: 0 10px;
	height: 40px;
	line-height: 30px;
	border-bottom: 1px solid #d0cdbf;
	color: #7f4500;
	font-size: 15px;
	font-weight: bold;
}

.container.report .board .body .board-title span.title {
	display: inline-block;
	max-width: 320px;
	height: 30px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: middle;
}

.container.report .board .body .board-title.for-article span.title { max-width: 600px; }

.container.report .board .body .board-title span.icon-board { display: inline-block; width: 16px; height: 18px; margin-right: 7px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -180px -240px no-repeat; vertical-align: text-top; }
.container.report .board .body .board-title span.icon-new { display: inline-block; width: 14px; height: 18px; margin-top: -30px; margin-left: 7px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -160px -240px no-repeat; vertical-align: middle; }
.container.report .board .body .board-title span.icon-new-comment { display: inline-block; width: 12px; height: 12px; margin-top: -30px; margin-left: 7px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -290px -40px no-repeat; vertical-align: middle; }
.container.report .board .body .board-title a.btn-setting-board {
	cursor: pointer;
	color: #888;
	font-size: 12px;
	margin-left: 5px;
	vertical-align: super;
}
.container.report .board .body .board-title a.btn-setting-board span.ico { display: inline-block; width: 16px; height: 16px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -200px -90px no-repeat; vertical-align: middle; margin-bottom: 2px; margin-right: 2px; }
.container.report .board .body .board-title a:hover.btn-setting-board { color: #ffba44; }
.container.report .board .body .board-title a:hover.btn-setting-board span.ico { background-position: -120px -110px; }
.container.report .board .body .board-title a.btn-setting-board.hidden { visibility: hidden; }

.container.report .board .body .board-title .sorting-option {
	cursor: pointer;
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 2;
	color: #555;
	font-size: 12px;
	font-weight: normal;
	text-align: center;
}

.container.report .board .body .board-title .sorting-option ul.options {
	display: block;
	list-style: none;
	padding: 0;
}

.container.report .board .body .board-title .sorting-option ul.options li {
	float: left;
	padding: 2px 13px 0 11px;
	margin-left: 2px;
	height: 30px;
	line-height: 30px;
	border: none;
	border-bottom: 4px solid transparent;
}

.container.report .board .body .board-title .sorting-option ul.options li:hover,
.container.report .board .body .board-title .sorting-option ul.options li.selected {
	border-bottom-color: #9c938b;
}

.container.report .board .body .board-title .sorting-option ul.options li.selected { color: #000; font-weight: bold; }

.container.report .board .body .board-title .sorting-option span.icon-sorting {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 5px;
	background-image: url(/assets/img/sp/sp_layout.png?v=1661943444);
	vertical-align: middle;
}

.container.report .board .body .board-title .sorting-option span.icon-sorting.recent { background-position: -110px -240px; }
.container.report .board .body .board-title .sorting-option span.icon-sorting.newcomment { background-position: -320px -30px; }
.container.report .board .body .board-title .sorting-option span.icon-sorting.important { background-position: -70px -240px; }
.container.report .board .body .board-title .sorting-option span.icon-sorting.image { background-position: -90px -240px; }

.container.report .board .body .board-title .sorting-option span.icon-arrow {
	position: absolute;
	display: block;
	top: 2px;
	right: 3px;
	width: 8px;
	height: 6px;
	margin: 9px 8px;
	background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -130px -110px no-repeat;
}

.container.report .board .body .board-title div:hover.sorting-option span.icon-arrow { background-position: -160px -110px; }
.container.report .board .body .board-title.for-article .sorting-option { display: none; }


/* board setting */
.container.report .board .body .board-create-wizard,
.container.report .board .body .board-setting {
	position: absolute;
	z-index: 20;
	top: 10px;
	width: 100%;
	left: -95px;
}

@media screen and (min-height: 650px) {
	.container.report .board .body .board-create-wizard,
	.container.report .board .body .board-setting {
		position: fixed;
		top: 50px;
		left: 0;
	}
}

@media screen and (min-height: 750px) {
	.container.report .board .body .board-create-wizard,
	.container.report .board .body .board-setting {
		position: fixed;
		top: 150px;
		left: 0;
	}
}

.container.report .board .body .board-create-wizard {
	height: 540px;
}

.container.report .board .body .board-create-wizard .layer,
.container.report .board .body .board-setting .layer {
	position: relative;
	margin: 0 auto;
	width: 494px;
	font-size: 14px;
	text-align: center;
	background: #fff;
	border-radius: 10px;
	padding: 10px 15px;
}

.container.report .board .body .board-setting .layer {
	position: relative;
}

.container.report .board .body .board-create-wizard .layer {
	position: absolute;
	left: 50%;
	height: 100%;
	margin-left: -282px;
	z-index: 3;
}

.container.report .board .body .board-create-wizard .shadow {
	position: absolute;
	left: 50%;
	width: 524px;
	height: 100%;
	margin: 11px 0;
	border-radius: 8px;
}

.container.report .board .body .board-create-wizard .shadow.shadow1 { background: #748bdb; z-index: 1; }
.container.report .board .body .board-create-wizard .shadow.shadow2 { background: #8299e5; z-index: 2; }
.container.report .board .body .board-create-wizard.first .shadow.shadow1 { display: none; }

.container.report .board .body .board-create-wizard.step1 .layer { margin-left: -282px; }
.container.report .board .body .board-create-wizard.step1 .shadow.shadow1 { margin-left: -242px; }
.container.report .board .body .board-create-wizard.step1 .shadow.shadow2 { margin-left: -262px; }

.container.report .board .body .board-create-wizard.step2 .layer { margin-left: -262px; }
.container.report .board .body .board-create-wizard.step2 .shadow.shadow1 { margin-left: -242px; }
.container.report .board .body .board-create-wizard.step2 .shadow.shadow2 { margin-left: -282px; }

.container.report .board .body .board-create-wizard.step3 .layer { margin-left: -242px; }
.container.report .board .body .board-create-wizard.step3 .shadow.shadow1 { margin-left: -282px; }
.container.report .board .body .board-create-wizard.step3 .shadow.shadow2 { margin-left: -262px; }

.container.report .board .body .board-create-wizard .layer > p.title,
.container.report .board .body .board-setting p.title {
	position: relative;
	line-height: 32px;
	padding: 8px;
	color: #414141;
	font-size: 15px;
	font-weight: bold;
	text-align: left;
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
}

.container.report .board .body .board-create-wizard .layer > p.title {
	margin-bottom: 40px;
}

.container.report .board .body .board-create-wizard .layer > p.title span.step {
	position: absolute;
	top: 13px;
	right: 8px;
	line-height: 22px;
	padding: 0 8px;
	border-radius: 22px;
	background: #4e6edb;
	color: #fff;
	font-size: 13px;
	font-weight: normal;
}

.container.report .board .body .board-setting dl { clear: both; line-height: 40px; }
.container.report .board .body .board-setting dt {
	float: left;
	width: 120px;
	text-align: center;
	font-weight: bold;
}

.container.report .board .body .board-setting dd { text-align: left; }
.container.report .board .body .board-setting dd input.wide { width: 280px; background: #f0eee4; }
.container.report .board .body .board-setting dd input[type="checkbox"],
.container.report .board .body .board-setting dd input[type="radio"] { margin-left: 0; }
.container.report .board .body .board-setting dd label { margin-right: 10px; padding-right: 10px; }
.container.report .board .body .board-setting dd label.disabled {
	opacity: 0.5;
}

.container.report .board .body .board-setting dd p.desc {
	line-height: 10px;
	margin-left: 120px;
	margin-bottom: 10px;
	color: #888;
	font-size: 12px;
}

.container.report .board .body .board-create-wizard .section {
	display: none;
	padding: 0 15px;
}

.container.report .board .body .board-create-wizard.step1 .section.step1,
.container.report .board .body .board-create-wizard.step2 .section.step2,
.container.report .board .body .board-create-wizard.step3 .section.step3 {
	display: block;
}

.container.report .board .body .board-create-wizard .section.step3 {
	padding-top: 135px;
}

.container.report .board .body .board-create-wizard .section > p.title {
	color: #424242;
	font-size: 12px;
	font-weight: bold;
	text-align: left;
}

.container.report .board .body .board-create-wizard .section > p.desc {
	line-height: 40px;
	color: #4e70db;
	font-size: 20px;
	text-align: left;
}

.container.report .board .body .board-create-wizard .section p input[type=text] {
	width: 430px;
	margin: 20px 0;
	padding: 9px 15px;
	font-size: 18px;
	border: 1px solid #ccc;
	border-radius: 6px;
	text-align: left;
}

.container.report .board .body .board-create-wizard.step1 .section dl.options dd {
	display: inline-block;
}

.container.report .board .body .board-create-wizard .section dl.options input[type=checkbox]:not(old) {
	height: 28px;
}

.container.report .board .body .board-create-wizard .section.step1 dl.options input[type=checkbox]:not(old) + label {
	display: block;
	margin: 0 22px;
	padding-left: 0;
	background: none;
}

.container.report .board .body .board-create-wizard .section.step1 dl.options input[type=checkbox]:not(old) + label > span.ico,
.container.report .board .body .board-create-wizard .section.step2 dl.options input[type=checkbox]:not(old) + label {
	display: inline-block;
	line-height: 28px;
	background: url(/assets/img/sp/img_checkbox_unchecked_28.png?v=1661943444) no-repeat;
}

.container.report .board .body .board-create-wizard .section.step1 dl.options input[type=checkbox]:not(old) + label > span.ico {
	width: 28px;
	padding-top: 28px;
}

.container.report .board .body .board-create-wizard .section.step2 dl.options input[type=checkbox]:not(old) + label {
	padding-left: 33px;
}

.container.report .board .body .board-create-wizard .section.step1 dl.options input[type=checkbox]:not(old):checked + label > span.ico,
.container.report .board .body .board-create-wizard .section.step2 dl.options input[type=checkbox]:not(old):checked + label {
	background-image: url(/assets/img/sp/img_checkbox_checked_28.png?v=1661943444);
}

.container.report .board .body .board-create-wizard .section dl.options span.circle {
	display: block;
	width: 110px;
	height: 110px;
	margin: 17px 2px;
	border: 2px solid #d6d6d6;
	border-radius: 100%;
}

.container.report .board .body .board-create-wizard .section dl.options span.circle.student { background: url(/assets/img/sp/img_board_wizard_student.png?v=1661943444); }
.container.report .board .body .board-create-wizard .section dl.options span.circle.parents { background: url(/assets/img/sp/img_board_wizard_parents.png?v=1661943444); }

.container.report .board .body .board-create-wizard .section.step2 dl.options span.circle,
.container.report .board .body .board-create-wizard .section dl.options input[type=checkbox]:not(old):checked + label > span.circle {
	border: 4px solid #ffce38;
}

.container.report .board .body .board-create-wizard .section dl.options input[type=checkbox]:not(old):checked + label > span.circle {
	margin: 15px 0;
}

.container.report .board .body .board-create-wizard .section.step2 dl.options dd {
	clear: both;
	margin-top: 10px;
}

.container.report .board .body .board-create-wizard .section.step2.target1 dl.options dd {
	margin-top: 75px;
}

.container.report .board .body .board-create-wizard .section.step2 dl.options span.circle,
.container.report .board .body .board-create-wizard .section.step2 dl.options .auths {
	float: left;
}

.container.report .board .body .board-create-wizard .section.step2 dl.options .auths {
	width: 320px;
	height: 60px;
	margin: 45px 9px;
	text-align: left;
}

.container.report .board .body .board-create-wizard .section.step2 dl.options .auths > p.title {
	color: #424242;
	font-size: 16px;
	font-weight: bold;
}

.container.report .board .body .board-create-wizard .section.step2 dl.options .auths ul {
	padding: 0;
}

.container.report .board .body .board-create-wizard .section.step2 dl.options .auths ul li {
	float: left;
	list-style: none;
	padding-right: 15px;
	margin-right: 5px;
}

.container.report .board .body .board-create-wizard .section dl.options input[type=checkbox]:not(old):disabled + label {
	cursor: default;
	opacity: 0.5;
}

.container.report .board .body .board-create-wizard .section dl.options input[type=checkbox]:not(old) + label > span.text {
	font-size: 16px;
	font-weight: bold;
}

.container.report .board .body .board-create-wizard .section dl.no-options {
	margin-top: 30px;
}

.container.report .board .body .board-create-wizard .section dl.no-options p.line {
	border-top: 1px solid #ddd;
	margin: 0 80px 10px 80px;
}

.container.report .board .body .board-create-wizard .section dl.no-options p.line span.text {
	display: block;
	line-height: 20px;
	margin: -10px 120px 0 120px;
	padding: 0 10px;
	background: #fff;
	color: #515151;
	font-size: 13px;
}

.container.report .board .body .board-create-wizard p.buttons,
.container.report .board .body .board-setting p.buttons {
	height: 32px;
	padding: 8px 0 8px 8px;
}

.container.report .board .body .board-create-wizard p.buttons {
	position: absolute;
	bottom: 20px;
	width: 474px;
	height: 40px;
}

.container.report .board .body .board-setting p.buttons a.btn-delete {
	cursor: pointer;
	display: none;
	float: left;
	font-size: 13px;
	text-decoration: underline;
	line-height: 52px;
}

.container.report .board .body .board-setting.update p.buttons a.btn-delete { display: block; }

.container.report .board .body .board-create-wizard p.buttons a,
.container.report .board .body .board-setting p.buttons a.btn-confirm {
	cursor: pointer;
	float: right;
	min-width: 100px;
	text-align: center;
	border-radius: 5px;
}

.container.report .board .body .board-create-wizard p.buttons a {
	line-height: 48px;
	font-size: 16px;
}

.container.report .board .body .board-setting p.buttons a.btn-confirm {
	line-height: 40px;
	background: #ffce38;
	color: #7f4500;
	font-size: 14px;
	font-weight: bold;
}

.container.report .board .body .board-create-wizard p.buttons a.btn-next {
	float: right;
	min-width: 150px;
	background: #ffce38;
	color: #303030;
}

.container.report .board .body .board-create-wizard p.buttons a.btn-next:hover { background: #ffde38; }

.container.report .board .body .board-create-wizard p.buttons a.btn-next span {
	margin: 0 5px;
	color: #7f4500;
	font-size: 13px;
	letter-spacing: 0;
	vertical-align: bottom;
}

.container.report .board .body .board-create-wizard p.buttons a.btn-prev {
	float: left;
	background: #ddd;
	color: #303030;
}

.container.report .board .body .board-create-wizard p.buttons a.btn-prev:hover { background: #eee; }
.container.report .board .body .board-create-wizard.step1 p.buttons a.btn-prev { display: none; }

.container.report .board .body .board-create-wizard .layer a.btn-cancel-create-board {
	cursor: pointer;
	position: absolute;
	bottom: -24px;
	left: 10px;
	color: #ccc;
	font-size: 14px;
	border-bottom: 1px solid #ccc;
}

.container.report .board .body .board-create-wizard .layer a.btn-cancel-create-board:hover {
	color: #fff;
	border-bottom-color: #fff;
}

/* common.copy-article-form */
.container.report .board .body .copy-article-form {
	position: absolute;
	top: 0;
	margin-left: 18px;
	z-index: 90;
	background: #fff;
	padding: 10px;
	border-radius: 6px;
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
}

.container.report .board .body .copy-article-form .layer {
	padding: 5px 15px;
	width: 500px;
	background: #f0eee4;
	border: 3px solid #f0eee4;
	border-radius: 4px;
	margin-bottom: 5px;
}

.container.report .board .body .copy-article-form .layer.source { border: 3px solid #ffce38; margin-bottom: 20px; color: #7f4500; font-size: 13px; font-weight: bold; }

.container.report .board .body .copy-article-form .layer span.section {
	color: #a19891;
	font-weight: bold;
	margin-right: 15px;
	line-height: 28px;
}

.container.report .board .body .copy-article-form .ico-copy { position: absolute; top: 44px; left: 265px; width: 34px; height: 40px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -350px 0 no-repeat; }

.container.report .board .body .copy-article-form .layer .course {
	cursor: pointer;
	border: 2px solid #a19891;
	border-radius: 4px;
	background: #fff;
	overflow: hidden;
	margin-bottom: 5px;
}

.container.report .board .body .copy-article-form .layer .course p.course-title {
	padding: 2px 10px;
	font-size: 13px;
	font-weight: bold;
	line-height: 24px;
	background: #a19891;
	color: #fff;
}

.container.report .board .body .copy-article-form .layer .course p.course-title span.ico { display: inline-block; width: 20px; height: 20px; margin-right: 5px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -320px 0 no-repeat; vertical-align: middle; }
.container.report .board .body .copy-article-form .layer .course p.course-title span.ico-arrow { float: right; display: inline-block; width: 12px; height: 8px; margin-top: 8px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -280px 0 no-repeat; vertical-align: middle; }

.container.report .board .body .copy-article-form .layer .course ul {
	display: none;
	padding: 0;
	list-style: none;
}

.container.report .board .body .copy-article-form .layer .course ul li {
	background: #fff;
	color: #66625e;
	padding: 3px 15px 5px 15px;
	border-bottom: 2px solid #f0eee4;
}

.container.report .board .body .copy-article-form .layer .course ul li:hover { background: #f0eee4; }
.container.report .board .body .copy-article-form .layer .course ul li.selected,
.container.report .board .body .copy-article-form .layer .course ul li:hover.selected { background: #fff150; }

.container.report .board .body .copy-article-form .layer .course ul li p.title {
	max-width: 600px;
	color: #7f4500;
	font-size: 13px;
	font-weight: bold;
	line-height: 28px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: middle;
}

.container.report .board .body .copy-article-form .layer .course ul li p.title span.ico { display: inline-block; width: 16px; height: 18px; margin-right: 7px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -180px -240px no-repeat; vertical-align: middle; }

.container.report .board .body .copy-article-form .layer .course ul li p.auth { line-height: 24px; padding-left: 20px; }

.container.report .board .body .copy-article-form .layer .course ul li p.auth span.ico { display: inline-block; width: 16px; height: 16px; margin-right: 3px; vertical-align: middle; background-image: url(/assets/img/sp/sp_layout.png?v=1661943444); }
.container.report .board .body .copy-article-form .layer .course ul li p.auth span.ico.auth-read { background-position: -80px -260px; }
.container.report .board .body .copy-article-form .layer .course ul li p.auth span.ico.auth-write { background-position: -380px -430px; }
.container.report .board .body .copy-article-form .layer .course ul li p.auth span.ico.auth-reply { background-position: -60px -260px; }
.container.report .board .body .copy-article-form .layer .course ul li p.auth span.ico.auth-secret { width: 18px; height: 18px; background-position: -280px -10px; }

.container.report .board .body .copy-article-form .layer .course.open ul { display: block; }
.container.report .board .body .copy-article-form .layer .course.open p.course-title { padding-bottom: 4px; }
.container.report .board .body .copy-article-form .layer .course.open p.course-title span.ico-arrow { background-position: -300px 0; }

.container.report .board .body .copy-article-form p.buttons { text-align: right; }
.container.report .board .body .copy-article-form p.buttons a {
	cursor: pointer;
	display: inline-block;
	width: 100px;
	height: 32px;
	line-height: 32px;
	border: none;
	border-radius: 5px;
	padding: 0;
	font-size: 13px;
	text-align: center;
}

.container.report .board .body .copy-article-form p.buttons a.btn-cancel {
	background: #c0c0c0;
	color: #fff;
	font-weight: normal;
	margin-right: 3px;
}

.container.report .board .body .copy-article-form p.buttons a.btn-confirm {
	background: #ffce38;
	color: #7f4500;
	font-weight: bold;
}

.container.report .board .body .copy-article-form p.buttons a.btn-confirm.disabled { cursor: default; background: #888; color: #fff; }

.container.report .board .body .change-order-form {
	position: fixed;
	top: 30px;
	margin-left: 18px;
	z-index: 90;
	background: #fff;
	padding: 10px;
	border-radius: 6px;
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
}

.container.report .board .body .change-order-form p.desc {
	padding: 10px 5px 5px 5px;
	color: #aaa;
}

.container.report .board .body .change-order-form ul.board-list {
	display: none;
	width: 380px;
	margin: 5px;
	padding: 5px;
	list-style: none;
	border-radius: 5px;
	background: #f8f7f2;
}

.container.report .board .body .change-order-form ul.board-list li {
	cursor: pointer;
	display: block;
	line-height: 18px;
	margin: 0px;
	padding: 7px;
	background: #f8f7f2;
	color: #7f4500;
	font-size: 13px;
	font-weight: normal;
}

.container.report .board .body .change-order-form ul.board-list li:hover { background: #fff150; }

.container.report .board .body .change-order-form ul.board-list li span.count-article { color: #d86b00; font-size: 11px; font-weight: normal; margin-left: 3px; }
.container.report .board .body .change-order-form ul.board-list li span.icon-new-comment { display: inline-block; width: 12px; height: 12px; margin-left: 3px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -290px -40px no-repeat; vertical-align: middle;}
.container.report .board .body .change-order-form ul.board-list li span.icon-secret { display: inline-block; width: 18px; height: 18px; margin-left: 3px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -280px -10px no-repeat; vertical-align: middle; }

.container.report .board .body .change-order-form p.buttons { margin: 10px 5px 0 0; text-align: right; }
.container.report .board .body .change-order-form p.buttons a {
	cursor: pointer;
	display: inline-block;
	width: 100px;
	height: 32px;
	line-height: 32px;
	border: none;
	border-radius: 5px;
	padding: 0;
	font-size: 13px;
	text-align: center;
}

.container.report .board .body .change-order-form p.buttons a.btn-cancel {
	background: #c0c0c0;
	color: #fff;
	font-weight: normal;
	margin-right: 3px;
}

.container.report .board .body .change-order-form p.buttons a.btn-confirm {
	background: #ffce38;
	color: #7f4500;
	font-weight: bold;
}


/* common.article-title */
.container.report .board .body .article-title {
	position: relative;
	padding-left: 30px;
	color: #000;
	font-size: 13px;
	font-weight: bold;
	line-height: 18px;
}

.container.report .board .body .article-title a.btn-important {
	cursor: pointer;
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: -2px 3px 0 -20px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -70px -240px no-repeat;
	vertical-align: middle;
}

.container.report .board .body .article-title a.btn-important.selected,
.container.report .board .body .article-title a:hover.btn-important { background-position: -250px -180px; }
.container.report .board .body .article-title a:hover.btn-important.selected { background-position: -70px -240px; }

.container.report .board .body .article-title .title-bar {
	display: inline-block;
	margin-left: 3px;
	vertical-align: top;
}

.container.report .board .body .article-title p.board-name {
	max-width: 600px;
	color: #999;
	font-size: 12px;
	font-weight: normal;
	margin-bottom: 3px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: middle;
}

.container.report .board .body .article-title span.icon-type { display: inline-block; width: 16px; height: 16px; margin: 0 3px 0 2px; background-image: url(/assets/img/sp/sp_layout.png?v=1661943444); vertical-align: middle; }
.container.report .board .body .article-title span.icon-type.mission { background-position: -170px -170px; }
.container.report .board .body .article-title span.icon-type.ask { background-position: -200px -200px; }

.container.report .board .body .article-title span.count-comment { color: #27bc97; font-size: 11px; margin-left: 3px; }
.container.report .board .body .article-title span.icon-new { display: inline-block; width: 14px; height: 18px; margin-left: 3px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -160px -240px no-repeat; vertical-align: middle; }
.container.report .board .body .article-title span.icon-new-comment { display: inline-block; width: 12px; height: 12px; margin-left: 3px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -290px -40px no-repeat; vertical-align: middle; }
.container.report .board .body .article-title span.icon-attachment { display: inline-block; width: 14px; height: 18px; margin-left: 3px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -40px -250px no-repeat; vertical-align: middle; }
.container.report .board .body .article-title span.icon-secret { display: inline-block; width: 18px; height: 18px; margin-left: 3px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -280px -10px no-repeat; vertical-align: middle; }

.container.report .board .body .article-title a.btn-like { font-size: 11px; }
.container.report .board .body .article-title a.btn-like span.ico {
	cursor: default;
	width: 12px;
	height: 11px;
	margin: 0 1px 0 4px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -260px -430px no-repeat;
	vertical-align: text-top;
}

.container.report .board .body .article-title a.btn-like span.count {
	font-weight: bold;
	color: #f7b018;
	vertical-align: top;
}

.container.report .board .body .article-title .action-option {
	cursor: pointer;
	position: absolute;
	top: -3px;
	right: 5px;
	z-index: 1;
	font-size: 12px;
	font-weight: normal;
	text-align: left;
	color: #66625e;
}

.container.report .board .body .article-title .action-option .button {
	float: right;
	display: block;
	width: 17px;
	height: 3px;
	margin: 10px 4px;
	line-height: 30px;
	border-radius: 4px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -60px -100px no-repeat;
}

.container.report .board .body .article-title .action-option ul.actions {
	display: none;
	list-style: none;
	padding: 0;
	margin-top: 20px;
	background: #fff;
	border: 2px solid #d0cdbf;
	border-radius: 4px;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
}

.container.report .board .body .article-title div:hover.action-option ul.actions { display: block; }

.container.report .board .body .article-title .action-option ul.actions li {
	padding: 0 20px 0 10px;
	min-width: 80px;
	height: 30px;
	line-height: 30px;
}

.container.report .board .body .article-title .action-option ul.actions li:hover { background: #f7f5f1; color: #000; }
.container.report .board .body .article-title .action-option ul.actions li.btn-delete { border-top: 2px solid #f0eee4; }
.container.report .board .body .article-title .action-option ul.actions li.btn-print { display: none; }
.container.report .board .body .article .article-title .action-option ul.actions li.btn-print { display: block; }

/* common.article-info */
.container.report .board .body .article-info {
	margin: 0 0 15px 4px;
	padding-left: 30px;
	line-height: 18px;
	color: #aaa;
	font-size: 12px;
	font-weight: normal;
}

.container.report .board .body .article .article-info { margin-top: 3px; }

.container.report .board .body .article-info span.article-writer {
	margin-right: 7px;
	padding-right: 7px;
	border-right: 1px solid #ccc;
}

.container.report .board .body .article-info span.ico {
	display: inline-block;
	width: 13px;
	height: 12px;
	margin-right: 3px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) no-repeat;
	vertical-align: text-top;
}

.container.report .board .body .article-info span.ico.parents { background-position: -370px -410px; }
.container.report .board .body .article-info span.ico.student { background-position: -410px -410px; }

.container.report .board .body .article-form {
	position: relative;
	display: block;
	width: 736px;
	margin-top: 2px;
	margin-bottom: 30px;
	padding: 0 10px;
	border: 2px solid #d0cdbf;
	border-radius: 6px;
	color: #9c938b;
}

.container.report .board .body .article-form input[type="radio"],
.container.report .board .body .article-form input[type="checkbox"] {
	margin-left: 5px;
}

.container.report .board .body .article-form .banner.board-3types {
	position: absolute;
	display: none;
	top: 30px;
	right: -15px;
	background: #fff;
	border: 1px solid #d0cdbf;
	z-index: 1;
	padding: 3px 12px;
	border-radius: 6px;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
}

.container.report .board .body .article-form .banner.board-3types p { line-height: 27px; }
.container.report .board .body .article-form .banner.board-3types p.title { line-height: 32px; font-weight: bold; font-size: 13px; color: #7f4500; border-bottom: 1px solid #f0eee4; margin-bottom: 2px; }
.container.report .board .body .article-form .banner.board-3types span.icon-board { display: inline-block; width: 16px; height: 18px; margin-right: 7px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -180px -240px no-repeat; vertical-align: text-top; }

.container.report .board .body .article-form .banner.board-3types p a { color: #666; font-weight: bold; margin-right: 5px; }
.container.report .board .body .article-form .banner.board-3types p a span.ico { display: inline-block; width: 16px; height: 16px; margin-right: 3px; background-image: url(/assets/img/sp/sp_layout.png?v=1661943444); vertical-align: middle; }
.container.report .board .body .article-form .banner.board-3types p a.normal span.ico { background-position: -270px -120px; }
.container.report .board .body .article-form .banner.board-3types p a.mission span.ico { background-position: -170px -170px; }
.container.report .board .body .article-form .banner.board-3types p a.ask span.ico { background-position: -200px -200px; }
.container.report .board .body .article-form .banner.board-3types .close { top: 9px; right: 9px; }

.container.report .board .body .article-form .select-box {
	cursor: pointer;
	position: relative;
	display: inline-block;
	font-size: 12px;
	font-weight: normal;
	text-align: left;
	color: #66625e;
	-moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */
    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

.container.report .board .body .article-form .board-select { width: 100%; }
.container.report .board .body .article-form .type-select,
.container.report .board .body .article-form .quiz-type-select { width: 138px; }

.container.report .board .body .article-form .write-form .section.lined .select-box { vertical-align: middle; }
.container.report .board .body .article-form .write-form .section.lined .select-box a { line-height: 12px; height: 12px; }

.container.report .board .body .article-form .select-box a.selected {
	display: block;
	height: 16px;
	line-height: 16px;
	padding: 8px 30px 8px 10px;
	background: #f0eee4;
	border-radius: 4px;
	color: #66625e;
	font-weight: bold;
	font-size: 13px;
}

.container.report .board .body .article-form .select-box a.selected span.text {
	display: inline-block;
	max-width: 600px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: top;
}

.container.report .board .body .article-form .board-select a.selected {
	margin: 7px 0;
    background: none;
    border-bottom: 2px solid #D0CDBF;
    border-radius: 0;
}

.container.report .board .body .article-form .quiz-type-select a.selected { height: 12px; line-height: 12px; margin: 2px 0; }

.container.report .board .body .article-form .select-box ul.option-list {
	position: absolute;
	display: none;
	list-style: none;
	width: 100%;
	max-height: 200px;
	overflow-y: auto;
	padding: 0;
	margin-top: -5px;
	background: #fff;
	border: 2px solid #d0cdbf;
	border-radius: 4px;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
	z-index: 1;
}

.container.report .board .body .article-form .select-box.open ul.option-list { display: block; }

.container.report .board .body .article-form .select-box ul.option-list li { padding: 3px 8px; border-bottom: 2px solid #f0eee4; }
.container.report .board .body .article-form .board-select ul.option-list li { padding: 1px 3px 8px 13px; border-bottom: 2px solid #f0eee4; }

.container.report .board .body .article-form .type-select a.selected span.icon,
.container.report .board .body .article-form .type-select ul.option-list li span.icon { display: inline-block; width: 16px; height: 16px; margin-right: 3px; background-image: url(/assets/img/sp/sp_layout.png?v=1661943444); vertical-align: middle; }
.container.report .board .body .article-form .type-select a.selected.normal span.icon,
.container.report .board .body .article-form .type-select ul.option-list li.normal span.icon { background-position: -270px -120px; }
.container.report .board .body .article-form .type-select a.selected.mission span.icon,
.container.report .board .body .article-form .type-select ul.option-list li.mission span.icon { background-position: -170px -170px; }
.container.report .board .body .article-form .type-select a.selected.ask span.icon,
.container.report .board .body .article-form .type-select ul.option-list li.ask span.icon { background-position: -200px -200px; }

.container.report .board .body .article-form .time-select ul.option-list li { line-height: 18px; }

.container.report .board .body .article-form .select-box ul.option-list li p.title {
	max-width: 600px;
	height: 30px;
	line-height: 30px;
	font-weight: bold;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: middle;
}

.container.report .board .body .article-form .select-box ul.option-list li p.auth {
	height: 20px;
	line-height: 20px;
	font-weight: normal;
}

.container.report .board .body .article-form .select-box ul.option-list li p.auth span.ico { display: inline-block; width: 16px; height: 16px; margin-right: 3px; vertical-align: middle; background-image: url(/assets/img/sp/sp_layout.png?v=1661943444); }
.container.report .board .body .article-form .select-box ul.option-list li p.auth span.ico.auth-read { background-position: -80px -260px; }
.container.report .board .body .article-form .select-box ul.option-list li p.auth span.ico.auth-write { background-position: -380px -430px; }
.container.report .board .body .article-form .select-box ul.option-list li p.auth span.ico.auth-reply { background-position: -60px -260px; }
.container.report .board .body .article-form .select-box ul.option-list li p.auth span.ico.auth-secret { width: 18px; height: 18px; background-position: -280px -10px; }

.container.report .board .body .article-form .select-box ul.option-list li:hover { background: #f7f5f1; color: #000; }
.container.report .board .body .article-form .select-box ul.option-list li.selected { background: #f0eee4; }

.container.report .board .body .article-form .select-box span.icon-arrow {
	position: absolute;
	display: block;
	top: 4px;
	right: 0;
	width: 8px;
	height: 6px;
	margin: 9px 8px;
	background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -130px -110px no-repeat;
}

.container.report .board .body .article-form .board-select span.icon-arrow { top: 11px; right: 6px; }
.container.report .board .body .article-form .write-form .section.lined span.icon-arrow { top: 2px; }

.container.report .board .body .article-form .select-box.open span.icon-arrow { background-position: -160px -110px; }

.container.report .board .body .article-form .select-box.disabled { cursor: default; }
.container.report .board .body .article-form .select-box.disabled span.icon-arrow { display: none; }

.container.report .board .body .article-form .write-form { margin-top: 2px; margin-bottom: 3px; }
.container.report .board .body .article-form .write-form .section { position: relative; margin-bottom: 4px; }
.container.report .board .body .article-form .write-form .section.lined { border: 1px solid #d8d5c7; border-radius: 4px; margin-top: 5px; margin-bottom: 8px; }
.container.report .board .body .article-form .write-form .section.textform { margin-bottom: 0; }

.container.report .board .body .article-form .write-form .section input.titled { width: 570px; margin-left: 3px; }
.container.report .board .body .article-form .write-form .section input.subtitled { width: 560px; font-size: 12px; background: none; border: 1px solid #e0ddcf; height: 23px; line-height: 23px; margin: 3px 0; }
.container.report .board .body .article-form .write-form .section input.time { width: 20px; font-size: 12px; color: #9c938b; text-align: center; background: none; border: 1px solid #e0ddcf; height: 23px; line-height: 23px; margin: 3px 5px; padding: 0 3px; }

.container.report .board .body .article-form .write-form .section div,
.container.report .board .body .article-form .write-form .section p { line-height: 32px; }

.container.report .board .body .article-form .write-form .section p.section-title {
	padding-left: 8px;
	font-size: 11px;
	font-weight: bold;
	padding-top: 3px;
	background: #f5f3ef;
	color: #66625e;
}

.container.report .board .body .article-form .write-form .section p.section-lined {
	line-height: 32px;
	background: #f5f3ef;
	margin: 3px 5px 0 5px;
	border-radius: 4px;
}

.container.report .board .body .article-form .write-form .section p.section-header { line-height: 20px; margin-top: 4px; }
.container.report .board .body .article-form .write-form .section p.section-header span { display: inline-block; }
.container.report .board .body .article-form .write-form .section p.section-header span.correct-answer { width: 60px; margin-left: 12px; text-align: center; }
.container.report .board .body .article-form .write-form .section p.section-header span.text { margin-left: 5px; }

.container.report .board .body .article-form .write-form .section ul.sub-section {
	list-style: none;
	padding-left: 20px;
}

.container.report .board .body .article-form .write-form .section ul.sub-section li { height: 32px; }
.container.report .board .body .article-form .write-form .section ul.sub-section a.btn-delete-answer-option { margin-left: 10px; }
.container.report .board .body .article-form .write-form .section ul.sub-section a.btn-delete-answer-option span.ico { width: 13px; height: 13px; background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -110px -110px no-repeat; }
.container.report .board .body .article-form .write-form .section ul.sub-section a:hover.btn-delete-answer-option span.ico { background-position: 0 -60px; }
.container.report .board .body .article-form .write-form .section a.btn-add-new-answer { cursor: pointer; display: inline-block; width: 582px; height: 24px; margin: 0 0 4px 92px; line-height: 24px; text-align: center; background: #d0cdbf; border-radius: 4px; color: #6d655e; }
.container.report .board .body .article-form .write-form .section a:hover.btn-add-new-answer { background: #b6b4a8; }
.container.report .board .body .article-form .write-form .section .overlay-quiz {
	position: absolute;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	background: rgba(248, 247, 242, 0.4);
}

.container.report .board .body .article-form .write-form .section div span.title,
.container.report .board .body .article-form .write-form .section p span.title {
    display: inline-block;
    width: 120px;
    margin-right: 3px;
    padding: 0 10px;
    font-weight: bold;
}

.container.report .board .body .article-form .write-form .section p.comment-desc { display: none; margin-left: 150px; color: red; }
.container.report .board .body .article-form .write-form .section .set-expiry-date { display: inline-block; }

.container.report .board .body .article-form .write-form .section .expiry-date {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	background: url(/assets/img/sp/img_report_cal.png?v=1661943444) 0 4px no-repeat;
	font-weight: bold;
	margin: 0 2px;
	font-size: 12px;
	cursor: pointer;
	text-align: center;
	letter-spacing: 0;
}

.container.report .board .body .article-form .write-form .section .expiry-date span.date { display: inline-block; padding-left: 22px; padding-right: 8px; }
.container.report .board .body .article-form .write-form .section .expiry-date-form {
	position: absolute;
	background: #fff;
	z-index: 1;
	border: 1px solid #d0cdbf;
	border-radius: 6px;
	left: -5px;
	top: 24px;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
	line-height: 30px;
}

.container.report .board .body .article-form .write-form .section .expiry-date-form .ui-datepicker { padding: 5px; font-size: 13px; }
.container.report .board .body .article-form .write-form .section .expiry-date-form .ui-datepicker thead { border:none; background: #f0eee4; }

.container.report .board .body .article-form .write-form .section .expiry-date-form .ui-datepicker .ui-datepicker-prev,
.container.report .board .body .article-form .write-form .section .expiry-date-form .ui-datepicker .ui-datepicker-next {
	-moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */
    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

.container.report .board .body .article-form .write-form .section .expiry-date-form .ui-datepicker .ui-datepicker-prev { width: 18px; height: 18px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -60px -220px no-repeat; }
.container.report .board .body .article-form .write-form .section .expiry-date-form .ui-datepicker .ui-datepicker-prev-hover { background-position: -40px -220px; }
.container.report .board .body .article-form .write-form .section .expiry-date-form .ui-datepicker .ui-datepicker-prev-hover.ui-state-disabled { background-position: -60px -220px; }
.container.report .board .body .article-form .write-form .section .expiry-date-form .ui-datepicker .ui-datepicker-next { width: 18px; height: 18px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -200px -240px no-repeat; }
.container.report .board .body .article-form .write-form .section .expiry-date-form .ui-datepicker .ui-datepicker-next-hover { background-position: -200px -220px; }
.container.report .board .body .article-form .write-form .section .expiry-date-form .ui-datepicker .ui-datepicker-next-hover.ui-state-disabled { background-position: -200px -240px; }
.container.report .board .body .article-form .write-form .section .expiry-date-form .ui-datepicker a.ui-state-disabled { opacity: 0.5; }
.container.report .board .body .article-form .write-form .section .expiry-date-form .ui-datepicker .ui-state-disabled span { color: #d0cdbf !important; }
.container.report .board .body .article-form .write-form .section .expiry-date-form .ui-datepicker .ui-datepicker-title { height: 24px; line-height: 18px; font-weight: bold; color: #654d39; }
.container.report .board .body .article-form .write-form .section .expiry-date-form .ui-datepicker .ui-state-active { background: #ffce38; color: #654d39; }
.container.report .board .body .article-form .write-form .section .expiry-date-form .ui-datepicker td a { color: #9c938b; }

.container.report .board .body .article-form .write-form .section p input.checkbox { cursor: pointer; margin-right: 4px; }
.container.report .board .body .article-form .write-form .section.comment-setting p span.title { width: 200px; }

.container.report .board .body .article-form .write-form input.form {
	width: 716px;
	background: #f0eee4;
	border: none;
	border-radius: 4px;
	box-shadow: none;
	font-size: 13px;
	padding: 0 10px;
}

.container.report .board .body .article-form .write-form textarea.form {
	width: 716px;
	height: 300px;
	background: #f0eee4;
	border: none;
	border-radius: 4px 4px 0 0;
	box-shadow: none;
	font-size: 13px;
	line-height: 21px;
	padding: 8px 10px;
	resize: none;
}

.container.report .board .body .article-form .write-form label {
	color: #9c938b;
	font-size: 12px;
	margin-right: 5px;
	padding-right: 10px;
	-moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */
    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

.container.report .board .body .article-form .write-form label.order { display: inline-block; width: 40px; margin-right: 0; padding-right: 5px; }
.container.report .board .body .article-form .write-form label.order span { color: #7f4500; }
.container.report .board .body .article-form .write-form label.right { float: right; margin-top: 7px; }

.container.report .board .body .article-form .write-form .attachments {
	position: relative;
	display: none;
	width: 732px;
	font-size: 12px;
	line-height: 24px;
	background: #f8f7f2;
	border: 2px dashed #f8f7f2;
	border-bottom: none;
}

.container.report .board .body .article-form .write-form .attachments.open { display: inline-block; margin-bottom: -3px; }

.container.report .board .body .article-form .write-form .attachments > div {
	float: left;
	margin: 5px 9px 0 9px;
}

.container.report .board .body .article-form .write-form .attachments .file-attachments {
	float: none;
	width: 716px;
	min-height: 80px;
	padding-bottom: 3px;
	border-bottom: 1px solid #d0cdbf;
}

.container.report .board .body .article-form .write-form .attachments p { display: block; font-size: 12px; color: #9c938b; }
.container.report .board .body .article-form .write-form .attachments p.files {
	display: inline-block;
	width: 170px;
	line-height: 18px;
	vertical-align: top;
}

.container.report .board .body .article-form .write-form .attachments p span { margin: 0 3px; font-weight: normal; }
.container.report .board .body .article-form .write-form .attachments p span.title { font-weight: bold; line-height: 24px; }
.container.report .board .body .article-form .write-form .attachments p span.size { color: #de6517; }
.container.report .board .body .article-form .write-form .attachments p span.available { color: #999; }

.container.report .board .body .article-form .write-form .attachments ul {
	display: inline-block;
	list-style: none;
	padding: 5px 0;
	font-weight: normal;
}

.container.report .board .body .article-form .write-form .attachments ul.attachment-files { position: relative; width: 532px; min-height: 100px; }
.container.report .board .body .article-form .write-form .attachments ul li span.icon-file { display: inline-block; width: 14px; height: 18px; margin-left: 2px; margin-right: 3px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -40px -250px no-repeat; vertical-align: text-bottom; }

.container.report .board .body .article-form .write-form .attachments ul.attachment-files li.uploading span.icon-file {
	width: 18px;
	height: 18px;
	margin-left: 0;
	margin-right: 1px;
	background: url(/assets/img/img_loading_18.png?v=1661943444) 0 0 no-repeat;
	-webkit-animation: showLoading 80s linear infinite;
	-moz-animation: showLoading 80s linear infinite;
	-ms-animation: showLoading 80s linear infinite;
	-o-animation: showLoading 80s linear infinite;
	animation: showLoading 80s linear infinite;
}

.container.report .board .body .article-form .write-form .attachments ul.attachment-files a.btn-delete { float: right; display: inline-block; margin-left: 3px; }
.container.report .board .body .article-form .write-form .attachments ul.attachment-files a.btn-delete span.ico { width: 14px; height: 14px; margin-right: 0; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -280px -100px no-repeat; vertical-align: text-bottom; }

.container.report .board .body .article-form .write-form .attachments ul.attachment-files li { position: relative; }

.container.report .board .body .article-form .write-form .attachments ul.attachment-files li .progress {
	position: absolute;
	display: none;
	top: 10px;
	right: 70px;
	width: 60px;
	height: 6px;
	border-radius: 3px;
	background: #e0ddd4;
	overflow: hidden;
	z-index: 2;
}

.container.report .board .body .article-form .write-form .attachments ul.attachment-files li .progress .progress-bar {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: #ffce38;
	overflow: hidden;
	-webkit-transition: background .2s ease-out;
	-moz-transition: background .2s ease-out;
	-ms-transition: background .2s ease-out;
	-o-transition: background .2s ease-out;
	transition: background .2s ease-out;
}

.container.report .board .body .article-form .write-form .attachments ul.attachment-files li span.name {
	display: inline-block;
	width: 450px;
	height: 18px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.report .board .body .article-form .write-form .attachments ul.attachment-files li span.size { float: right; margin: 0 3px; font-weight: normal; }
.container.report .board .body .article-form .write-form .attachments ul.attachment-video { width: 107px; }
.container.report .board .body .article-form .write-form .attachments ul.attachment-images { position: relative; width: 588px; min-height: 88px; }

.container.report .board .body .article-form .write-form .attachments ul.attachment-video a.btn-delete,
.container.report .board .body .article-form .write-form .attachments ul.attachment-images a.btn-delete { cursor: pointer; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -280px -100px no-repeat; z-index: 2; }

.container.report .board .body .article-form .write-form .attachments ul.attachment-video li.thumbnail,
.container.report .board .body .article-form .write-form .attachments ul.attachment-images li.thumbnail {
	position: relative;
	display: inline-block;
	margin: 0 2px;
	width: 80px;
	height: 80px;
	border-radius: 4px;
	background: #f0eee4;
	overflow: hidden;
}

.container.report .board .body .article-form .write-form .attachments ul.attachment-video li.dummy,
.container.report .board .body .article-form .write-form .attachments ul.attachment-images li.dummy {
	background: none;
	width: 78px;
	height: 78px;
	border: 1px dashed #ccc;
}

.container.report .board .body .article-form .write-form .attachments ul.attachment-video li.thumbnail .fileinfo,
.container.report .board .body .article-form .write-form .attachments ul.attachment-images li.thumbnail .fileinfo {
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	width: 70px;
	padding: 30px 5px;
	line-height: 20px;
	text-align: center;
	background: #333\9;
	background: rgba(0, 0, 0, 0.7);
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	color: #fff;
	letter-spacing: 0;
	z-index: 1;
}

.container.report .board .body .article-form .write-form .attachments ul.attachment-video li.thumbnail a.bg-ani,
.container.report .board .body .article-form .write-form .attachments ul.attachment-images li.thumbnail a.bg-ani {
	position: absolute;
	display: none;
	top: 22px;
	left: 22px;
	width: 36px;
	height: 36px;
	line-height: 36px;
	border-radius: 36px;
	background: #333\9;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0.7;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	text-align: center;
}

.container.report .board .body .article-form .write-form .attachments ul.attachment-video li.thumbnail a.bg-ani { display: block; }

@-webkit-keyframes showEncoding {
   0%, 100% { opacity: 0.7; }
   50% { opacity: 0.2; }
}

@-moz-keyframes showEncoding {
   0%, 100% { opacity: 0.7; }
   50% { opacity: 0.2; }
}

@-ms-keyframes showEncoding {
   0%, 100% { opacity: 0.7; }
   50% { opacity: 0.2; }
}

@-o-keyframes showEncoding {
   0%, 100% { opacity: 0.7; }
   50% { opacity: 0.2; }
}

@keyframes showEncoding {
   0%, 100% { opacity: 0.7; }
   50% { opacity: 0.2; }
}


.container.report .board .body .article-form .write-form .attachments ul.attachment-video li.thumbnail.encoding a.bg-ani {
	margin-top: -8px;
	-webkit-animation: showEncoding .8s linear infinite;
	-moz-animation: showEncoding .8s linear infinite;
	-ms-animation: showEncoding .8s linear infinite;
	-o-animation: showEncoding .8s linear infinite;
	animation: showEncoding .8s linear infinite;
}

.container.report .board .body .article-form .write-form .attachments ul.attachment-video li.thumbnail.encoding a.bg-ani span.encoding { display: block; }

.container.report .board .body .article-form .write-form .attachments ul.attachment-images li.thumbnail a.bg-ani span.gif {
	margin-right: 1px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	font-family: 'Open Sans', Helvetica, Arial, tahoma, verdana, arial, sans-serif; letter-spacing: 0em;
}

.container.report .board .body .article-form .write-form .attachments ul.attachment-video li.thumbnail a.bg-ani span.video {
	display: inline-block;
	width: 14px;
	height: 18px;
	margin: 9px 9px 9px 11px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -350px -80px no-repeat;
	vertical-align: top;
}

.container.report .board .body .article-form .write-form .attachments ul.attachment-video li.thumbnail a.bg-ani span.encoding {
	position: absolute;
	display: none;
	top: 30px;
	left: -22px;
	width: 80px;
	color: #555;
	font-family: arial;
	text-align: center;
	letter-spacing: 0;
}

.container.report .board .body .article-form .write-form .attachments ul.attachment-video li.thumbnail .fileinfo span.icon-file,
.container.report .board .body .article-form .write-form .attachments ul.attachment-images li.thumbnail .fileinfo span.icon-file {
	display: none;
	width: 18px;
	height: 18px;
	margin: 0 auto 2px auto;
	background: url(/assets/img/img_loading_18.png?v=1661943444) 0 0 no-repeat;
	-webkit-animation: showLoading 80s linear infinite;
	-moz-animation: showLoading 80s linear infinite;
	-ms-animation: showLoading 80s linear infinite;
	-o-animation: showLoading 80s linear infinite;
	animation: showLoading 80s linear infinite;
}

.container.report .board .body .article-form .write-form .attachments ul.attachment-video li.thumbnail .progress,
.container.report .board .body .article-form .write-form .attachments ul.attachment-images li.thumbnail .progress {
	position: absolute;
	display: none;
	bottom: 10px;
	left: 8px;
	width: 60px;
	height: 6px;
	margin: 0;
	border-radius: 3px;
	background: #e0ddd4;
	overflow: hidden;
	z-index: 2;
}

.container.report .board .body .article-form .write-form .attachments ul.attachment-video li.thumbnail .progress .progress-bar,
.container.report .board .body .article-form .write-form .attachments ul.attachment-images li.thumbnail .progress .progress-bar {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: #ffce38;
	overflow: hidden;
	-webkit-transition: background .2s ease-out;
	-moz-transition: background .2s ease-out;
	-ms-transition: background .2s ease-out;
	-o-transition: background .2s ease-out;
	transition: background .2s ease-out;
}

.container.report .board .body .article-form .write-form .attachments ul.attachment-video li:hover.thumbnail .fileinfo,
.container.report .board .body .article-form .write-form .attachments ul.attachment-images li:hover.thumbnail .fileinfo { display: block; }

.container.report .board .body .article-form .write-form .attachments ul.attachment-video li.thumbnail.no-preview .fileinfo,
.container.report .board .body .article-form .write-form .attachments ul.attachment-images li.thumbnail.no-preview .fileinfo { display: block; background: none; color: #7f4500; }

.container.report .board .body .article-form .write-form .attachments ul.attachment-video li.thumbnail.uploading .fileinfo,
.container.report .board .body .article-form .write-form .attachments ul.attachment-images li.thumbnail.uploading .fileinfo { display: block; background: #fff; opacity: 0.9; color: #7f4500; padding: 20px 5px; }

.container.report .board .body .article-form .write-form .attachments ul.attachment-video li.thumbnail.uploading .fileinfo span.icon-file,
.container.report .board .body .article-form .write-form .attachments ul.attachment-images li.thumbnail.uploading .fileinfo span.icon-file { display: block; }

.container.report .board .body .article-form .write-form .attachments ul.attachment-video li.thumbnail .fileinfo span.name,
.container.report .board .body .article-form .write-form .attachments ul.attachment-images li.thumbnail .fileinfo span.name {
	display: block;
	width: 70px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.report .board .body .article-form .write-form .attachments ul.attachment-video li.thumbnail .fileinfo span.size,
.container.report .board .body .article-form .write-form .attachments ul.attachment-images li.thumbnail .fileinfo span.size {
	display: none;
	width: 70px;
}

.container.report .board .body .article-form .write-form .attachments ul.attachment-video li.thumbnail img.loading,
.container.report .board .body .article-form .write-form .attachments ul.attachment-images li.thumbnail img.loading { margin: 20px; }

.container.report .board .body .article-form .write-form .attachments .progress {
	position: relative;
	display: block;
	width: 100%;
	height: 20px;
	margin: 0 -2px;
	padding: 0 2px;
	background: #e0ddd4;
	overflow: hidden;
}

.container.report .board .body .article-form .write-form .attachments .progress .progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: #ffce38;
	color: #7f4500;
	overflow: hidden;
	-webkit-transition: background .2s ease-out;
	-moz-transition: background .2s ease-out;
	-ms-transition: background .2s ease-out;
	-o-transition: background .2s ease-out;
	transition: background .2s ease-out;
}

.container.report .board .body .article-form .write-form .attachments .progress .text {
	display: block;
	width: 736px;
	font-size: 11px;
	font-family: arial;
	letter-spacing: 0;
	line-height: 20px;
	text-align: center;
}

.container.report .board .body .article-form .write-form .attachments .progress .progress-bar.encoding { background: #06c793; color: #fff; }
.container.report .board .body .article-form .write-form .attachments .progress .progress-bar.success { background: #2b96db; color: #fff; }
.container.report .board .body .article-form .write-form .attachments .progress .progress-bar.error { background: #db2c49; color: #fff; }

.container.report .board .body .article-form .write-form .attachments .drag-overlay {
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: rgba(255, 255, 255, 0.9);
	z-index: 3;
}

.container.report .board .body .article-form .write-form .attachments .drag-overlay .drop-guide {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
	text-align: center;
	line-height: 1.6em;
	color: #6d655e;
	font-size: 16px;
	font-weight: bold;
	-webkit-transition: color .2s ease-in;
	-moz-transition: color .2s ease-in;
	-ms-transition: color .2s ease-in;
	-o-transition: color .2s ease-in;
	transition: color .2s ease-in;
}

.container.report .board .body .article-form .write-form .attachments .drag-overlay .drop-guide span.ico {
	display: block;
	width: 132px;
	height: 81px;
	margin: 0 auto 10px auto;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -450px 0 no-repeat;
	opacity: 0.6;
}

.container.report .board .body .article-form .write-form p.buttons {
	height: 32px;
}

.container.report .board .body .article-form .write-form a.btn-attachment {
	cursor: pointer;
	position: relative;
	display: block;
	margin-bottom: 5px;
	padding: 10px 0;
	overflow: hidden;
	background: #f0eee4;
	border: 2px dashed #f0eee4;
	border-top: none;
	margin-top: 3px;
	border-radius: 0 0 4px 4px;
	text-align: center;
}

.container.report .board .body .article-form .write-form a.btn-attachment span.btn {
	display: inline-block;
	height: 40px;
	line-height: 24px;
	text-align: left;
	color: #6d655e;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: -0.02em;
}

.ie8 .container.report .board .body .article-form .write-form a.btn-attachment span.btn,
.ie9 .container.report .board .body .article-form .write-form a.btn-attachment span.btn { line-height: 40px; }

.container.report .board .body .article-form .write-form a.btn-attachment span.ico {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 9px 9px 7px 0;
	vertical-align: top;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -450px -90px no-repeat;
}

.container.report .board .body .article-form .write-form a.btn-attachment span.desc {
	display: block;
	line-height: 18px;
	color: #a39077;
	font-size: 11px;
	font-weight: normal;
}

.ie8 .container.report .board .body .article-form .write-form a.btn-attachment span.desc,
.ie9 .container.report .board .body .article-form .write-form a.btn-attachment span.desc { display: none; }

.container.report .board .body .article-form .write-form a:hover.btn-attachment { background-color: #d0cdbf; border-color: #d0cdbf; color: #000; }

.container.report .board .body .article-form .write-form .attachments.dragging,
.container.report .board .body .article-form .write-form a.btn-attachment.dragging {
	border-color: #b2b0a3;
	-webkit-transition: border-color,background-color .2s ease-in;
	-moz-transition: border-color,background-color .2s ease-in;
	-ms-transition: border-color,background-color .2s ease-in;
	-o-transition: border-color,background-color .2s ease-in;
	transition: border-color,background-color .2s ease-in;
}

.container.report .board .body .article-form .write-form .attachments.dragging { display: inline-block; }
.container.report .board .body .article-form .write-form .attachments.dragging .drag-overlay { display: block; }

.container.report .board .body .article-form .write-form a.btn-attachment.dragging { background-color: #b2b0a3; color: #fff; }
.container.report .board .body .article-form .write-form a.btn-attachment.dragging span.btn { color: #fff; }
.container.report .board .body .article-form .write-form a.btn-attachment.dragging span.desc { color: #fff150; }
.container.report .board .body .article-form .write-form a.btn-attachment.dragging span.ico { background-position: -480px -90px; }


.container.report .board .body .article-form .write-form .attachments.hover,
.container.report .board .body .article-form .write-form a.btn-attachment.hover { border-color: #5098e1; }

.container.report .board .body .article-form .write-form .attachments.hover { background-color: #fff; }
.container.report .board .body .article-form .write-form a.btn-attachment.hover { background-color: #5098e1; }

.container.report .board .body .article-form .write-form .attachments.hover .drag-overlay .drop-guide { color: #5098e1; }
.container.report .board .body .article-form .write-form .attachments.hover .drag-overlay .drop-guide span.ico { opacity: 1; }

.container.report .board .body .article-form .write-form a.btn-attachment input {
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	opacity: 0;
	-ms-filter: 'alpha(opacity=0)';
	font-size: 200px;
	direction: ltr;
}

.container.report .board .body .article-form .write-form p.buttons { clear: both; text-align: right; padding: 3px 0; margin-bottom: 5px; }
.container.report .board .body .article-form .write-form p.buttons a {
	cursor: pointer;
	display: inline-block;
	width: 100px;
	height: 32px;
	line-height: 32px;
	border: none;
	border-radius: 5px;
	padding: 0;
	font-size: 13px;
	text-align: center;
}

.container.report .board .body .article-form .write-form p.buttons a.btn-cancel {
	background: #c0c0c0;
	color: #555;
	font-weight: normal;
	margin-right: 3px;
}

.container.report .board .body .article-form .write-form p.buttons a.btn-confirm {
	background: #ffce38;
	color: #7f4500;
	font-weight: bold;
}

.container.report .board .body .article-form .write-form p.buttons a:hover.btn-cancel { background: #c9c9c9; }
.container.report .board .body .article-form .write-form p.buttons a:hover.btn-confirm { background: #ffde38; }
.container.report .board .body .article-form .write-form p.buttons a.btn-cancel.disabled { cursor: default; background: #ddd; color: #fff; }
.container.report .board .body .article-form .write-form p.buttons a.btn-confirm.disabled { cursor: default; background: #888; color: #fff; }

.container.report .board .body .comment-info {
	margin: 10px 10px 0 10px;
	padding: 7px 20px 0 20px;
	border-radius: 6px 6px 0 0;
	background: #f0eee4;
	text-align: left;
	font-size: 13px;
	line-height: 24px;
}

.container.report .board .body .comment-info p.title {
	font-weight: bold;
	color: #7f4500;
	margin-bottom: 5px;
}

.container.report .board .body .comment-info p.title span.icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 3px;
	background-image: url(/assets/img/sp/sp_layout.png?v=1661943444);
	vertical-align: middle;
}

.container.report .board .body .comment-info.mission p.title span.icon { background-position: -170px -170px; }
.container.report .board .body .comment-info.ask p.title span.icon { background-position: -200px -200px; }

.container.report .board .body .comment-info.ask p.subtitle { padding: 0 10px; }
.container.report .board .body .comment-info.ask p.subtitle span.date { float: right; }
.container.report .board .body .comment-info.ask p.subtitle b { color: #d86b00; }

.container.report .board .body .comment-info p.title span.date { margin-left: 20px; font-weight: normal; color: #d86b00; }
.container.report .board .body .comment-info p.status { position: relative; width: 700px; height: 24px; margin-top: 2px; background: #f8f7f2; overflow: hidden; border-radius: 4px; }
.container.report .board .body .comment-info p.status span { position: absolute; z-index: 2; color: #7f4500; }
.container.report .board .body .comment-info p.status span.title { left: 10px; }
.container.report .board .body .comment-info p.status span.value { right: 10px; }
.container.report .board .body .comment-info p.status span.progress { height: 24px; z-index: 1; }
.container.report .board .body .comment-info p.status.no-response { margin-top: 12px; border-radius: 0; }
.container.report .board .body .comment-info p.status.answer { background-color: #fff8a3; }
.container.report .board .body .comment-info p.desc { text-align: right; color: #888; font-size: 12px; }

.container.report .board .body .comment-info .progress {
	width: 0;
	margin-top: -26px;
	overflow: hidden;
	-webkit-transition: width .3s ease-out;
	-moz-transition: width .3s ease-out;
	-ms-transition: width .3s ease-out;
	-o-transition: width .3s ease-out;
	transition: width .3s ease-out;
}
.container.report .board .body .comment-info .progress p span { color: #fff; }
.container.report .board .body .comment-info .progress p.status.upper { background: #f88383; }
.container.report .board .body .comment-info .progress p.status.lower { background: #9cc740; }
.container.report .board .body .comment-info .progress p.status.num-1 { background-color: #F88383; }
.container.report .board .body .comment-info .progress p.status.num-2 { background-color: #9cc740; }
.container.report .board .body .comment-info .progress p.status.num-3 { background-color: #4dcad2; }
.container.report .board .body .comment-info .progress p.status.num-4 { background-color: #ffce64; }
.container.report .board .body .comment-info .progress p.status.num-5 { background-color: #f4a87e; }
.container.report .board .body .comment-info .progress p.status.num-6 { background-color: #d896f3; }
.container.report .board .body .comment-info .progress p.status.num-7 { background-color: #47dab2; }
.container.report .board .body .comment-info .progress p.status.num-8 { background-color: #f39233; }
.container.report .board .body .comment-info .progress p.status.num-9 { background-color: #c78b62; }
.container.report .board .body .comment-info .progress p.status.no-response { background: #d0cdbf; margin-top: 2px; }
.container.report .board .body .comment-info .progress p.status.no-response span { color: #6d655e; }

.container.report .board .body .more-info {
	position: relative;
	margin: 0 10px 10px 10px;
	background: #f0eee4;
	border-radius: 0 0 6px 6px;
	padding: 0;
}

.container.report .board .body .more-info ul.list {
	display: none;
	list-style: none;
	line-height: 28px;
	margin: 0 15px;
	padding: 0;
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
}

.container.report .board .body .more-info.open ul.list { display: inline-block; }

.container.report .board .body .more-info ul.list li { padding: 0 12px; }
.container.report .board .body .more-info ul.list li.disabled { color: #ca9; }
.container.report .board .body .more-info ul.list li:nth-child(even)  { background-color: #f6f6f6; }
.container.report .board .body .more-info ul.list li.header { background: #79736d; font-weight: bold; color: #fff; }
.container.report .board .body .more-info ul.list li span { display: inline-block; width: 50px; text-align: center; }
.container.report .board .body .more-info ul.list li span.name { width: 585px; text-align: left; }
.container.report .board .body .more-info ul.list li span.correct span.ico { width: 16px; height: 16px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -230px -260px no-repeat; vertical-align: middle; margin-bottom: 2px; }

.container.report .board .body .more-info input.open-result {
	float: left;
	margin-left: 20px;
}

.container.report .board .body .more-info label.open-result {
	float: left;
	margin-top: 9px;
}

.container.report .board .body .more-info a.btn-more-info {
	cursor: pointer;
	display: block;
	line-height: 40px;
	border-radius: 0 0 4px 4px;
	color: #6d655e;
	font-weight: bold;
	text-align: right;
	padding-right: 20px;
	text-decoration: underline;
}

.container.report .board .body .more-info a:hover.btn-more-info { color: #000; }

.container.report .board .body .more-info a.btn-more-info.open-more-info { display: block; }
.container.report .board .body .more-info.open a.btn-more-info.open-more-info { display: none; }
.container.report .board .body .more-info a.btn-more-info.close-more-info { display: none; }
.container.report .board .body .more-info.open a.btn-more-info.close-more-info { display: block; }

/* for article list */
.container.report .board .body .article-list { position: relative; }
.container.report .board .body .article-list ul.title-list {
	list-style: none;
	padding: 0;
	margin: 0 8px;
}

.container.report .board .body .article-list ul.title-list li.title {
	cursor: pointer;
	position: relative;
	min-height: 100px;
	padding-top: 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid #f0eee4;
}

.container.report .board .body .article-list ul.title-list li:hover.title {	background: #f0eee4; }
.container.report .board .body .article-list ul.title-list li.title.secret .article-title { color: #999; }
.container.report .board .body .article-list ul.title-list li.title.secret .article-title p.board-name { color: #ccc; }

.container.report .board .body .article-list ul.title-list li.title.secret .article-body { color: #bbb; }

.container.report .board .body .article-list .article-info { margin-bottom: 0px; }

.container.report .board .body .article-list .article-body {
	display: block;
	display: -webkit-box;
	max-height: 4.5em;
	line-height: 18px;
	margin: 5px 0;
	padding-left: 35px;
	color: #333;
	font-size: 12px;
	font-weight: normal;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.container.report .board .body .article-list .article-thumbnails {
	position: absolute;
	top: 30px;
	right: 5px;
}

.container.report .board .body .article-list .article-thumbnails ul.thumnail-list {
	list-style: none;
	padding: 0;
}

.container.report .board .body .article-list .article-thumbnails ul.thumnail-list li.thumbnail {
	position: relative;
	float: left;
	margin: 0 2px;
	width: 80px;
	height: 80px;
	border-radius: 4px;
	overflow: hidden;
}

.container.report .board .body .article-list .article-thumbnails ul.thumnail-list li.thumbnail a.bg-count {
	position: absolute;
	display: block;
	top: 0;
	width: 70px;
	height: 40px;
	line-height: 20px;
	padding: 20px 5px;
	border-radius: 4px;
	color: #fff;
	text-align: center;
	font-weight: bold;
	background: #333\9;
	background: rgba(0, 0, 0, 0.5);
}

.container.report .board .body .article-list .article-thumbnails ul.thumnail-list li.thumbnail a.bg-ani {
	position: absolute;
	top: 22px;
	left: 22px;
	display: block;
	width: 35px;
	height: 36px;
	border-radius: 36px;
	opacity: 0.7;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    background: #333\9;
	background: rgba(0, 0, 0, 0.7);
	line-height: 36px;
	text-align: center;
}

.container.report .board .body .article-list .article-thumbnails ul.thumnail-list li.thumbnail a.bg-ani span.gif {
	margin-right: 1px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	font-family: 'Open Sans', Helvetica, Arial, tahoma, verdana, arial, sans-serif; letter-spacing: 0em;
}

.container.report .board .body .article-list .article-thumbnails ul.thumnail-list li.thumbnail a.bg-ani span.video {
	display: inline-block;
	width: 14px;
	height: 18px;
	margin: -2px 0 0 2px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -350px -80px no-repeat;
	vertical-align: middle;
}

.container.report .board .body .article-list .article-thumbnails ul.thumnail-list li.thumbnail a.bg-count span.num { display: block; font-size: 15px; font-family: 'Open Sans', Helvetica, Arial, tahoma, verdana, arial, sans-serif; }
.container.report .board .body .article-list .article-thumbnails ul.thumnail-list li.thumbnail:hover a.bg-count { background: #333\9; background: rgba(0, 0, 0, 0.7); }

.container.report .board .body .article-list .article-thumbnails ul.thumnail-list li.thumbnail a.bg-count span.icon-image {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 3px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -230px -240px no-repeat;
	vertical-align: middle;
}

/* image list */
.container.report .board .body .article-list ul.image-list { display: inline-block; list-style: none; padding-left: 30px; margin-bottom: 7px; }
.container.report .board .body .article-list ul.image-list li.image {
	cursor: pointer;
	position: relative;
	float: left;
	margin: 0 1px 2px 1px;
	width: 140px;
	height: 140px;
	border: 1px solid #ddd;
}

.container.report .board .body .article-list ul.image-list li.image.date {
	clear: both;
	width: 100%;
	height: 20px;
	line-height: 20px;
	margin: 0;
	padding: 10px 0;
	font-size: 13px;
	font-weight: bold;
	text-align: left;
	border: none;
}

.container.report .board .body .article-list ul.image-list li.image .title {
	display: table;
	position: absolute;
	top: 0;
	width: 130px;
	height: 130px;
	opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	line-height: 20px;
	padding: 5px;
	color: #fff;
	text-align: center;
	font-weight: bold;
	background: #333\9;
	background: rgba(0, 0, 0, 0.7);
	-webkit-transition: opacity .1s ease-in-out;
	-moz-transition: opacity .1s ease-in-out;
	-ms-transition: opacity .1s ease-in-out;
	-o-transition: opacity .1s ease-in-out;
	transition: opacity .1s ease-in-out;
}

.container.report .board .body .article-list ul.image-list li.image a.bg-ani {
	position: absolute;
	top: 44px;
	left: 44px;
	display: block;
	width: 50px;
	height: 52px;
	border-radius: 52px;
	opacity: 0.7;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	background: #333\9;
	background: rgba(0, 0, 0, 0.7);
	line-height: 52px;
	text-align: center;
}

.container.report .board .body .article-list ul.image-list li.image a.bg-ani span.gif {
	margin-right: 2px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	font-family: 'Open Sans', Helvetica, Arial, tahoma, verdana, arial, sans-serif; letter-spacing: 0em;
}

.container.report .board .body .article-list ul.image-list li.image a.bg-ani span.video {
	display: inline-block;
	width: 14px;
	height: 18px;
	margin: -2px 0 0 2px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -350px -80px no-repeat;
	vertical-align: middle;
}

.container.report .board .body .article-list ul.image-list li.image:hover .title {
	opacity: 1.0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.container.report .board .body .article-list ul.image-list li.image .title a { display: table-cell; vertical-align: middle; color: #fff; }

.container.report .board .body .article-list-navigation { margin: 30px 0; text-align: center; }
.container.report .board .body .article-list-navigation ul { list-style: none; padding: 0; }
.container.report .board .body .article-list-navigation li {
	cursor: pointer;
	display: inline-block;
	padding: 2px 1px;
	margin: 0 6px;
	text-align: center;
	font-size: 13px;
	min-width: 8px;
}

.container.report .board .body .article-list-navigation li.selected { font-weight: bold; border-bottom: 1px solid #000; }
.container.report .board .body .article-list-navigation li.disabled { color: #ccc; }
.container.report .board .body .article-list-navigation li.prev { margin-right: 30px; }
.container.report .board .body .article-list-navigation li.next { margin-left: 30px; }
.container.report .board .body .article-list-navigation li:hover { color: #ffce38; border-bottom-color: #ffce38; }

.container.report .board .body .article-list-navigation a.btn-more {
	cursor: pointer;
	display: block;
	width: 720px;
	line-height: 32px;
	margin-left: 30px;
	border-radius: 4px;
	background: #f0eee4;
	color: #66625e;
}

.container.report .board .body .article-search-result {
	position: relative;
	margin: 10px;
	padding: 10px 20px;
	border-radius: 4px;
	background: #f0eee4;
	color: #7f4500;
	font-size: 13px;
}

.container.report .board .body .article-search-result a.btn-close {
	cursor: pointer;
	position: absolute;
    display: block;
    top: 13px;
    right: 13px;
    width: 8px;
    height: 8px;
    background: url(/assets/img/sp/sp_layout.png?v=1661943444) -290px -30px;
}

.container.report .board .body .article-search-result span.keyword {
	margin: 0 3px;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 0;
}

.container.report .board .panel .article-search { margin-top: 3px; }
.container.report .board .body .article-search { text-align: center; margin-bottom: 30px; }

.container.report .board .article-search select {
	min-width: 100px;
	background: #f0eee4;
	font-size: 12px;
}

.container.report .board .article-search input {
	width: 110px;
	margin: 0 2px;
	background: #f0eee4;
	border: 1px solid #f0eee4;
	font-size: 12px;
}

.container.report .board .panel .article-search input { height: 26px; }
.container.report .board .body .article-search input { width: 200px; }

.container.report .board .article-search a.btn-search {
	cursor: pointer;
	display: inline-block;
	width: 40px;
	height: 34px;
	line-height: 34px;
	padding: 0 5px;
	background: #9c938b;
	border-radius: 2px;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	vertical-align: top;
}

.container.report .board .panel .article-search a.btn-search { height: 28px; line-height: 28px; }
.container.report .board .body .article-search a.btn-search { min-width: 30px; padding: 0 10px; }

.container.report .board .body .article-list .no-article { text-align: center; }
.container.report .board .body .article-list .no-article p { margin: 30px 0; line-height: 20px; }
.container.report .board .body .article-list .no-article span.ico {
	display: block;
	width: 100px;
	height: 100px;
	margin: 10px auto;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) 0 -300px no-repeat;
}

.container.report .board .body .article-list .no-article span.important {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: 0 1px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -70px -240px no-repeat;
	vertical-align: text-bottom;
}

.container.report .board .body .article-list .no-article a.btn-write-article {
	font-size: 15px;
	height: 36px;
	line-height: 36px;
	padding: 0;
}

.container.report .board .body .article-list.view ul.title-list li.title { min-height: 0; }
.container.report .board .body .article-list.view ul.title-list li.title.selected { background: #f8f7f2; }

.container.report .board .body .article-list.view ul.title-list li.title .article-body,
.container.report .board .body .article-list.view ul.title-list li.title .action-option,
.container.report .board .body .article-list.view ul.title-list li.title .article-thumbnails { display:none; }

/* for article view */
.container.report .board .body .article {
	margin: 12px 0 2px 0;
}

.container.report .board .body .article .article-title { font-size: 14px; }

.container.report .board .body .article .article-body {
	margin: 5px 0 15px 0;
	padding: 0 28px;
	color: #333;
	font-size: 13px;
	font-weight: normal;
	line-height: 21px;
}

.container.report .board .body .article .article-body-preview {
    cursor: pointer;
	margin: 5px 0;
	padding: 0 28px;
	color: #333;
	font-size: 13px;
	font-weight: normal;
}

.container.report .board .body .article .article-body-preview .link-preview {
	cursor: pointer;
    margin-top: 10px;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
	-webkit-transition: border .1s ease-in-out;
	-moz-transition: border .1s ease-in-out;
	-ms-transition: border .1s ease-in-out;
	-o-transition: border .1s ease-in-out;
	transition: border .1s ease-in-out;
}

.container.report .board .body .article .article-body-preview .link-preview .thumbnail {
	position: relative;
	min-height: 80px;
	border-bottom: 1px solid #e6e6e6;
	-webkit-transition: border .1s ease-in-out;
	-moz-transition: border .1s ease-in-out;
	-ms-transition: border .1s ease-in-out;
	-o-transition: border .1s ease-in-out;
	transition: border .1s ease-in-out;
}

.container.report .board .body .article .article-body-preview .link-preview .thumbnail img { width: 100%; vertical-align: top; }

.container.report .board .body .article .article-body-preview .link-preview a.btn-play {
	cursor: pointer;
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	width: 66px;
	height: 40px;
	margin-top: -20px;
	margin-left: -33px;
	border-radius: 6px;
	background: #333\9;
	background: rgba(0, 0, 0, 0.7);
}

.container.report .board .body .article .article-body-preview .link-preview a.btn-play span.ico {
	display: block;
	width: 14px;
	height: 18px;
	margin: 11px 26px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -350px -80px no-repeat;
}

.container.report .board .body .article .article-body-preview .link-preview a.btn-play:hover { background: #ffce38; }

.container.report .board .body .article .article-body-preview .link-preview .text { padding: 10px 15px; line-height: 18px; font-size: 12px; }

.container.report .board .body .article .article-body-preview .link-preview .title {
	display: block;
	display: -webkit-box;
	max-height: 48px;
	line-height: 24px;
	color: #000;
	font-size: 14px;
	font-weight: bold;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}

.container.report .board .body .article .article-body-preview .link-preview .description {
	color: #888;
	display: block;
	display: -webkit-box;
	max-height: 36px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}

.container.report .board .body .article .article-body-preview .link-preview .url {
	margin-top: 5px;
	color: #bbb;
	letter-spacing: -0.01em;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.report .board .body .article .article-body-preview .link-preview:hover,
.container.report .board .body .article .article-body-preview .link-preview:hover .thumbnail { border-color: #c6c6c6; }

.container.report .board .body .article .article-attachment { padding: 0 20px; }
.container.report .board .body .article .article-attachment ul.attachment-files {
	padding: 5px 12px;
	list-style: none;
	margin: 11px;
	line-height: 24px;
	border: 1px solid #ddd;
}

.container.report .board .body .article .article-attachment ul.attachment-files { color: #7f4500; }
.container.report .board .body .article .article-attachment ul.attachment-files span.ico { display: inline-block; width: 14px; height: 18px; margin-right: 3px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -40px -250px no-repeat; vertical-align: middle; }
.container.report .board .body .article .article-attachment ul.attachment-files a.btn-download { cursor: pointer; color: #999; text-decoration: underline; margin-left: 5px; }
.container.report .board .body .article .article-attachment ul.attachment-files a:hover.btn-download { color: #555; }

.container.report .board .body .article .article-attachment ul.attachment-images { display: inline-block; list-style: none; padding-left: 0; margin-bottom: 7px; }
.container.report .board .body .article .article-attachment ul.attachment-images li.thumbnail {
	position: relative;
	cursor: pointer;
	float: left;
	margin: 0 1px;
	width: 140px;
	height: 140px;
	border: 1px solid #ddd;
}

.container.report .board .body .article .article-attachment ul.attachment-images li.thumbnail.others { display: none; }
.container.report .board .body .article .article-attachment ul.attachment-images.no-more li.thumbnail.others { display: list-item; }

.container.report .board .body .article .article-attachment ul.attachment-images li.thumbnail a.bg-count {
	position: absolute;
	display: block;
	top: 0;
	width: 130px;
	height: 40px;
	line-height: 20px;
	padding: 50px 5px;
	color: #fff;
	text-align: center;
	font-weight: bold;
	background: #333\9;
	background: rgba(0, 0, 0, 0.5);
}

.container.report .board .body .article .article-attachment ul.attachment-images.no-more li.thumbnail a.bg-count { display: none; }

.container.report .board .body .article .article-attachment ul.attachment-images li.thumbnail a.bg-count span.num { display: block; font-size: 15px; font-family: 'Open Sans', Helvetica, Arial, tahoma, verdana, arial, sans-serif; letter-spacing: 0em; }
.container.report .board .body .article .article-attachment ul.attachment-images li.thumbnail:hover a.bg-count { background: #333\9; background: rgba(0, 0, 0, 0.7); }

.container.report .board .body .article .article-attachment ul.attachment-images li.thumbnail a.bg-ani {
	position: absolute;
	top: 44px;
	left: 44px;
	display: block;
	width: 50px;
	height: 52px;
	border-radius: 52px;
	opacity: 0.7;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	background: #333\9;
	background: rgba(0, 0, 0, 0.7);
	line-height: 52px;
	text-align: center;
}

.container.report .board .body .article .article-attachment ul.attachment-images li.thumbnail a.bg-ani span.gif {
	margin-right: 2px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	font-family: 'Open Sans', Helvetica, Arial, tahoma, verdana, arial, sans-serif; letter-spacing: 0em;
}

.container.report .board .body .article .article-attachment ul.attachment-images li.thumbnail a.bg-ani span.video {
	display: inline-block;
	width: 14px;
	height: 18px;
	margin-left: 4px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -350px -80px no-repeat;
	vertical-align: middle;
}

.container.report .board .body .article .article-navigation {
	border-top: 2px solid #f0eee4;
}

.container.report .board .body .article .article-status {
	text-align: right;
	margin: 0 10px;
	padding: 10px 10px 0 10px;
	border-top: 1px solid #f0eee4;
}

.container.report .board .body .article .article-status a.btn-show-who-read {
	cursor: pointer;
	position: relative;
	float: left;
	color: #79736d;
	font-size: 13px;
}

.container.report .board .body .article .article-status a.btn-show-who-read ul.reader-list {
	position: absolute;
	top: 24px;
	left: 0;
	width: 240px;
	padding: 8px 12px;
	line-height: 18px;
	background: #fff;
	list-style: none;
	border-radius: 4px;
	border: 1px solid #c7bf93;
	font-size: 13px;
	text-align: left;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
	z-index: 1;
}

.container.report .board .body .article .article-status a.btn-show-who-read ul.reader-list:after {
    left: 20px;
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
    border-width: 6px;
	margin-left: 0;
}

.container.report .board .body .article .article-status a.btn-show-who-read ul.reader-list:before {
    left: 20px;
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(199, 191, 147, 0);
    border-bottom-color: #c7bf93;
    border-width: 7px;
    margin-left: -1px;
}

.container.report .board .body .article .article-status a.btn-show-who-read ul.reader-list li.header {
	padding-bottom: 5px;
	margin-bottom: 8px;
	border-bottom: 1px solid #e0ddd4;
	color: #b38a39;
}

.container.report .board .body .article .article-status a.btn-show-who-read ul.reader-list li.header a.btn-close {
	position: absolute;
	top: 6px;
	right: 6px;
}

.container.report .board .body .article .article-status a.btn-show-who-read ul.reader-list li span.name {
	display: inline-block;
	width: 200px;
	margin-right: 5px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.report .board .body .article .article-status a.btn-show-who-read ul.reader-list li span.ico {
	display: inline-block;
	width: 13px;
	height: 12px;
	margin : 2px 3px 0 0;
	vertical-align: top;
}

.container.report .board .body .article .article-status a.btn-show-who-read ul.reader-list li span.ico.parents { background: url(/assets/img/sp/sp_layout.png?v=1661943444) -350px -410px no-repeat; }
.container.report .board .body .article .article-status a.btn-show-who-read ul.reader-list li span.ico.parents.read { background: url(/assets/img/sp/sp_layout.png?v=1661943444) -370px -410px no-repeat; }
.container.report .board .body .article .article-status a.btn-show-who-read ul.reader-list li span.ico.student { background: url(/assets/img/sp/sp_layout.png?v=1661943444) -390px -410px no-repeat; }
.container.report .board .body .article .article-status a.btn-show-who-read ul.reader-list li span.ico.student.read { background: url(/assets/img/sp/sp_layout.png?v=1661943444) -410px -410px no-repeat; }

.container.report .board .body .article .article-status a.btn-show-who-read ul.reader-list li.disabled { color: #ccc; }
.container.report .board .body .article a.btn-like,
.container.report .board .body .article a.btn-like-list {
	cursor: pointer;
	position: relative;
}

.container.report .board .body .article .article-status a.btn-like,
.container.report .board .body .article .article-status a.btn-like-list {
	color: #79736d;
	font-size: 13px;
}

.container.report .board .body .article .article-status a.btn-show-who-read:hover,
.container.report .board .body .article .article-status a.btn-like:hover span.text {
	border-bottom: 1px solid #9c938b;
}

.container.report .board .body .article a.btn-like span.desc {
	position: absolute;
	display: none;
	right: 100%;
	top: -8px;
	margin-right: 8px;
	padding: 5px 12px;
	line-height: 1.8em;
	border-radius: 4px;
	background: #fff150;
	color: #7f4500;
	font-size: 12px;
	white-space: nowrap;
	z-index: 1;
}

.container.report .board .body .article a.btn-like span.desc:after {
    left: 100%;
    top: 12px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 241, 80, 0);
    border-left-color: #fff150;
    border-width: 4px;
    margin-right: -4px;
}

.container.report .board .body .article a.btn-like span.desc:before {
    left: 100%;
    top: 12px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-width: 5px;
    margin-right: -5px;
}

.container.report .board .body .article a.btn-like-list span.ico {
	width: 16px;
	height: 14px;
	margin: 0;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -280px -430px no-repeat;
	vertical-align: text-bottom;
}

.container.report .board .body .article a.btn-like span.dot { margin: 0 3px; }
.container.report .board .body .article a.btn-like-list span.count { font-weight: bold; color: #f7b018; }

.container.report .board .body .article a.btn-like-list span.ico,
.container.report .board .body .article a.btn-like span.dot,
.container.report .board .body .article a.btn-like-list span.count,
.container.report .board .body .article a.btn-like span.text.like-cancel,
.container.report .board .body .article a.btn-like.i-liked span.text.like { display: none; }

.container.report .board .body .article a:hover.btn-like span.desc { display: block; }
.container.report .board .body .article a:hover.liked.btn-like span.desc,
.container.report .board .body .article a:hover.i-liked.btn-like span.desc { display: none; }

.container.report .board .body .article a.btn-like-list.liked span.ico { display: inline-block; }
.container.report .board .body .article a.btn-like.liked span.dot,
.container.report .board .body .article a.btn-like-list.liked span.count,
.container.report .board .body .article a.btn-like.i-liked span.text.like-cancel { display: inline; }

.container.report .board .body .article a.btn-like-list ul.likes-list {
	position: absolute;
	top: 24px;
	right: -13px;
	width: 300px;
	padding: 8px 12px;
	line-height: 18px;
	background: #fff;
	list-style: none;
	border-radius: 4px;
	border: 1px solid #c7bf93;
	font-size: 13px;
	text-align: left;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
	z-index: 1;
}

.container.report .board .body .article a.btn-like-list ul.likes-list:after {
    right: 9px;
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
    border-width: 6px;
	margin-right: 0;
}

.container.report .board .body .article a.btn-like-list ul.likes-list:before {
    right: 9px;
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(199, 191, 147, 0);
    border-bottom-color: #c7bf93;
    border-width: 7px;
    margin-right: -1px;
}

.container.report .board .body .article a.btn-like-list ul.likes-list li {
	position: relative;
}

.container.report .board .body .article a.btn-like-list ul.likes-list li.header {
	padding-bottom: 5px;
	margin-bottom: 8px;
	border-bottom: 1px solid #e0ddd4;
	color: #b38a39;
}

.container.report .board .body .article a.btn-like-list ul.likes-list li.header a.btn-close {
	position: absolute;
	top: -1px;
	right: -6px;
}

.container.report .board .body .article a.btn-like-list ul.likes-list li p {
	width: 170px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.report .board .body .article a.btn-like-list ul.likes-list li span.ico {
	display: inline-block;
	width: 13px;
	height: 12px;
	margin : 2px 3px 0 0;
	vertical-align: text-top;
}

.container.report .board .body .article a.btn-like-list ul.likes-list li span.ico.teacher { background: url(/assets/img/sp/sp_layout.png?v=1661943444) -360px -430px no-repeat; }
.container.report .board .body .article a.btn-like-list ul.likes-list li span.ico.parents { background: url(/assets/img/sp/sp_layout.png?v=1661943444) -370px -410px no-repeat; margin-top: 1px; }
.container.report .board .body .article a.btn-like-list ul.likes-list li span.ico.student { background: url(/assets/img/sp/sp_layout.png?v=1661943444) -410px -410px no-repeat; }

.container.report .board .body .article a.btn-like-list ul.likes-list li span.relation {
	font-size: 12px;
	margin-left: 2px;
	color: #aaa;
}

.container.report .board .body .article a.btn-like-list ul.likes-list li span.date {
	position: absolute;
	top: 0;
	right: 0;
	color: #7f4500;
	font-size: 12px;
	letter-spacing: 0;
}

.container.report .board .body .article .article-comment {
	margin: 10px;
	padding: 15px 30px;
	border-radius: 6px;
	background: #f0eee4;
	text-align: left;
	font-size: 13px;
	font-weight: bold;
}

.container.report .board .body .article .article-comment a.summary { line-height: 24px; margin-left: 10px; }
.container.report .board .body .article .article-comment label.push-setting {
	float: right;
	line-height: 24px;
	color: #79736d;
	font-weight: normal;
}

.container.report .board .body .article .article-comment label.push-setting input {
	cursor: pointer;
	width: 16px;
	height: 16px;
	margin: 0 5px 0 0;
}

.container.report .board .body .article .article-comment span.count-comment { color: #27bc97; font-size: 11px; }
.container.report .board .body .article .article-comment span.is-open-comment { float: right; color: #d86b00; font-size: 12px; line-height: 18px; margin-left: 10px; margin-top: 3px; border-bottom: 1px solid #d86b00; }

.container.report .board .body .article .article-comment ul.comment-list { list-style: none; padding: 0; }
.container.report .board .body .article .article-comment ul.comment-list li.comment {
	padding: 8px 10px;
	border-top: 1px solid #d0cdbf;
	font-weight: normal;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment p { line-height: 20px; }
.container.report .board .body .article .article-comment ul.comment-list li.comment p.comment-writer { font-weight: bold; line-height: 24px; }
.container.report .board .body .article .article-comment ul.comment-list li.comment p.comment-writer.teacher { color: #a9610d; }

.container.report .board .body .article .article-comment ul.comment-list li.comment p.comment-writer a.btn-reply-to-the-writer { cursor: pointer; }
.container.report .board .body .article .article-comment ul.comment-list li.comment p.comment-writer a.btn-reply-to-the-writer:hover { border-bottom: 1px solid #000; }
.container.report .board .body .article .article-comment ul.comment-list li.comment p.comment-writer.teacher a.btn-reply-to-the-writer:hover { color: #a9610d; border-bottom-color: #a9610d; }

.container.report .board .body .article .article-comment ul.comment-list li.comment p.comment-writer span.relation { font-size: 12px; font-weight: normal; }
.container.report .board .body .article .article-comment ul.comment-list li.comment p.comment-writer span.comment-info {
	margin-left: 5px;
	color: #999;
	font-size: 12px;
	font-weight: normal;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment p.comment-writer span.icon-new-comment {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 3px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -290px -40px no-repeat;
	vertical-align: middle;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment p.comment-body { margin-bottom: 3px; }

.container.report .board .body .article .article-comment ul.comment-list li.comment p.attachment-files a { color: #7f4500; }
.container.report .board .body .article .article-comment ul.comment-list li.comment p.attachment-files span.ico { display: inline-block; width: 14px; height: 18px; margin-right: 3px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -40px -250px no-repeat; vertical-align: middle; }

.container.report .board .body .article .article-comment ul.comment-list li.comment p.attachment-images { position: relative; }

.container.report .board .body .article .article-comment ul.comment-list li.comment a.thumbnail { cursor: pointer; }
.container.report .board .body .article .article-comment ul.comment-list li.comment span.bg-anigif {
	cursor: pointer;
	position: absolute;
	display: block;
	top: 14px;
	left: 14px;
	width: 50px;
	height: 52px;
	border-radius: 52px;
	opacity: 0.7;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    background: #333\9;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	font-family: 'Open Sans', Helvetica, Arial, tahoma, verdana, arial, sans-serif; letter-spacing: 0em;
	text-align: center;
	line-height: 52px;
	padding-right: 2px;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment a.btn-delete-comment {
	cursor: pointer;
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 5px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -290px -30px;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment ul.replies {
	list-style: none;
	padding: 0;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment ul.replies li.comment,
.container.report .board .body .article .article-comment ul.comment-list li:first-child.comment { border-top: none; }

.container.report .board .body .article .article-comment ul.comment-list li.comment ul.replies li.comment {
	position: relative;
	padding: 5px 10px 5px 40px;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment span.ico.reply {
	position: absolute;
	display: none;
	top: 5px;
	left: 18px;
	width: 18px;
	height: 18px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -320px -30px;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment ul.replies li.comment a.btn-reply { display: none; }
.container.report .board .body .article .article-comment ul.comment-list li.comment ul.replies li.comment span.ico.reply { display: block; }

.container.report .board .body .article .article-comment ul.comment-list li.comment .reply-form textarea.input-form {
	width: 512px;
	height: 40px;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment .reply-form a.btn-write-comment {
    width: 80px;
    line-height: 50px;
    font-size: 12px;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment .reply-form a.btn-write-reply:hover { background: #4d4945; }

.container.report .board .body .article .article-comment ul.comment-list li.comment .reply-form {
	position: relative;
	margin: 0;
	padding: 0 8px 0 20px;
	border-top: none;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment .reply-form span.ico.reply {
	display: block;
	top: 0;
	left: 0;
	background-position: -340px -430px;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview {
	cursor: pointer;
    margin: 5px 0;
    border-radius: 2px;
	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-ms-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview .thumbnail {
	position: relative;
	display: inline-block;
	width: 100px;
	height: 100px;
	overflow: hidden;
	border: 1px solid #d6d6d6;
	-webkit-transition: border .1s ease-in-out;
	-moz-transition: border .1s ease-in-out;
	-ms-transition: border .1s ease-in-out;
	-o-transition: border .1s ease-in-out;
	transition: border .1s ease-in-out;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview .thumbnail img {
	vertical-align: top;
	margin: 50px 0 0 50px;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview .thumbnail.is-video { width: 200px; height: 200px; }
.container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview .thumbnail.is-video img { margin: 100px 0 0 100px; }

.ie8 .container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview .thumbnail img,
.ie8 .container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview .thumbnail.is-video img { margin: 0; }

.container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview a.btn-play {
	cursor: pointer;
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	width: 66px;
	height: 40px;
	margin-top: -20px;
	margin-left: -33px;
	border-radius: 6px;
	background: #333\9;
	background: rgba(0, 0, 0, 0.7);
}

.container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview a.btn-play span.ico {
	display: block;
	width: 14px;
	height: 18px;
	margin: 11px 26px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -350px -80px no-repeat;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview a.btn-play:hover { background: #ffce38; }

.container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview .text {
	padding: 10px 15px;
	line-height: 18px;
	font-size: 12px;
	vertical-align: top;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview .text.has-thumbnail {
	display: inline-block;
	width: 520px;
	margin-left: -2px;
	height: 82px;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview .text.has-thumbnail.is-video {
	width: 420px;
	height: 182px;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview .title {
	line-height: 24px;
	color: #000;
	font-size: 14px;
	font-weight: bold;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview .text.has-thumbnail.is-video .title {
	display: block;
	display: -webkit-box;
	max-height: 48px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview .description {
	color: #777;
	display: block;
	display: -webkit-box;
	max-height: 36px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview .url {
	margin-top: 5px;
	color: #a6a6a6;
	letter-spacing: -0.01em;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview:hover,
.container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview:hover .thumbnail { border-color: #a6a6a6; }
.container.report .board .body .article .article-comment ul.comment-list li.comment .comment-link-preview .link-preview:hover .text { background: #fff; }

.container.report .board .body .article .article-comment ul.comment-list li.comment a.btn-reply { cursor: pointer; }

.container.report .board .body .article .article-comment ul.comment-list li.comment a:hover.btn-reply span.text,
.container.report .board .body .article .article-comment ul.comment-list li.comment a:hover.btn-like span.text {
	border-bottom: 1px solid #9c938b;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment a.btn-reply,
.container.report .board .body .article .article-comment ul.comment-list li.comment a.btn-like {
	color: #9c938b;
	font-size: 12px;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment a.btn-like span.desc { display: none; }

.container.report .board .body .article .article-comment ul.comment-list li.comment p.comment-body span.nametag {
	margin-right: 3px;
	padding: 3px 4px;
	background-color: #fff;
	border-radius: 4px;
	color: #666;
	font-size: 13px;
	font-weight: bold;
}

.container.report .board .body .article .article-comment ul.comment-list li.comment p.comment-action { margin-top: -3px; }
.container.report .board .body .article .article-comment ul.comment-list li.comment p.comment-action span.dot { margin: 0 3px; }

.container.report .board .body .article .comment-form {
	position: relative;
	margin: 10px 0 0 0;
	padding: 10px 0;
	border-top: 1px solid #d0cdbf;
}

.container.report .board .body .article .comment-form p.attach-files {
	line-height: 24px;
	text-align: left;
	color: #7f4500;
	font-size: 13px;
	font-weight: normal;
}

.container.report .board .body .article .comment-form p.attach-files a.upload-progress {
	overflow: hidden;
	display: none;
	width: 100%;
	height: 16px;
	margin: 5px 0 0 0;
	background: #d0cdbf;
	border-radius: 4px;
	text-align: left;
	vertical-align: middle;
}

.container.report .board .body .article .comment-form p.attach-files a.upload-progress span {
	overflow-x: hidden;
	display: inline-block;
	width: 0;
	color: #fff;
	font-size: 11px;
	line-height: 16px;
	text-align: center;
	letter-spacing: 0;
	background: #27bc97;
	vertical-align: top;
}

.container.report .board .body .article .comment-form p.attach-files a.btn-attach-files { cursor: pointer; position: relative; line-height: 32px; color: #a9610d; }
.container.report .board .body .article .comment-form p.attach-files a.btn-attach-files span.ico { display: inline-block; width: 14px; height: 18px; margin-right: 3px; margin-bottom: 2px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -40px -250px no-repeat; vertical-align: middle; }
.container.report .board .body .article .comment-form p.attach-files a.btn-attach-files span.filename { color: #000; font-size: 12px; margin-left: 3px; }
.container.report .board .body .article .comment-form p.attach-files a.btn-attach-files input {
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	width: 100px;
	direction: ltr;
}
.container.report .board .body .article .comment-form p.attach-files a.btn-detach { display: none; margin-left: 5px; }
.container.report .board .body .article .comment-form p.attach-files a.btn-detach span.ico { width: 13px; height: 13px; background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -110px -110px no-repeat; }
.container.report .board .body .article .comment-form p.attach-files a:hover.btn-detach span.ico { background-position: 0 -60px; }

.container.report .board .body .article .comment-form .attach-images {
	position: relative;
	display: none;
	margin: 0 2px;
	width: 80px;
	height: 80px;
	border-radius: 4px;
	background: #f0eee4;
	overflow: hidden;
}

.container.report .board .body .article .comment-form .attach-images a.btn-detach {
	cursor: pointer;
	position: absolute;
	top: 3px;
	right: 3px;
	width: 14px;
	height: 14px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -280px -100px no-repeat;
	z-index: 2;
}

.container.report .board .body .article .comment-form textarea.input-form {
	width: 542px;
	height: 50px;
	padding: 10px;
	border: none;
	border-radius: 4px;
	resize: none;
}

.container.report .board .body .article .comment-form a.btn-write-comment {
	cursor: pointer;
	display: inline-block;
	width: 100px;
	line-height: 62px;
	padding: 5px;
	margin-left: 8px;
	border-radius: 4px;
	background: #79736d;
	color: #fff;
	font-size: 13px;
	text-align: center;
}

.container.report .board .body .article .comment-form a:hover.btn-write-comment { background: #4d4945; }

.container.report .board .body .article .buttons { display: inline-block; width: 100%; border-bottom: 2px solid #d0cdbf; margin-top: 50px; padding-bottom: 3px; }
.container.report .board .body .article .buttons a.btn-list,
.container.report .board .body .article .buttons a.btn-write {
	cursor: pointer;
	display: inline-block;
	height: 24px;
	line-height: 24px;
	padding: 5px 20px;
	margin: 5px 1px;
	border: none;
	color: #7f4500;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
}

.container.report .board .body .article .buttons a.btn-write {
	float: right;
	border-radius: 4px;
	background: #ffce38;
}
.container.report .board .body .article .buttons a:hover.btn-write { background: #ffde38; }
.container.report .board .body .article .buttons a.btn-write span.ico {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -270px -30px no-repeat;
	vertical-align: middle;
}

.container.report .board .body .article .buttons a.btn-list { float: left; }
.container.report .board .body .article .buttons a.btn-list span.circle {
	display: inline-block;
	padding: 0px 8px 1px 6px;
	border-radius: 20px;
	background: #ffce38;
	margin-right: 5px;
}
.container.report .board .body .article .buttons a:hover.btn-list span.circle { background: #ffde38; }
.container.report .board .body .article .buttons a.btn-list span.ico {
	display: inline-block;
	width: 10px;
	height: 14px;
	margin: 0;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -300px -20px no-repeat;
	vertical-align: middle;
}


/* photo slider */
#board_photo_slider {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	top: 0;
	left: 0;
	line-height: 100%;
	z-index: 12;
}

#board_photo_slider_ie8 {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.85;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
	top: 0;
	left: 0;
	z-index: 11;
}

#board_photo_slider img {
	position: absolute;
	max-width: 80%;
	max-height: 80%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 1;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

#board_photo_slider img.loading {
	opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

@-webkit-keyframes showLoadingCentered {
   0% { -webkit-transform: translate(-35px, -35px) rotateZ(0deg); }
   100% { -webkit-transform: translate(-35px, -35px) rotateZ(36000deg); }
}

@-moz-keyframes showLoadingCentered {
   0% { -moz-transform: translate(-35px, -35px) rotateZ(0deg); }
   100% { -moz-transform: translate(-35px, -35px) rotateZ(36000deg); }
}

@-ms-keyframes showLoadingCentered {
   0% { -ms-transform: translate(-35px, -35px) rotateZ(0deg); }
   100% { -ms-transform: translate(-35px, -35px) rotateZ(36000deg); }
}

@-o-keyframes showLoadingCentered {
   0% { -o-transform: translate(-35px, -35px) rotateZ(0deg); }
   100% { -o-transform: translate(-35px, -35px) rotateZ(36000deg); }
}

@keyframes showLoadingCentered {
   0% { transform: translate(-35px, -35px) rotateZ(0deg); }
   100% { transform: translate(-35px, -35px) rotateZ(36000deg); }
}

#board_photo_slider span.image-loading-progress {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70px;
	height: 70px;
	background: url(/assets/img/img_loading_70.png?v=1661943444) no-repeat;
	-webkit-animation: showLoadingCentered 80s linear infinite;
	-moz-animation: showLoadingCentered 80s linear infinite;
	-ms-animation: showLoadingCentered 80s linear infinite;
	-o-animation: showLoadingCentered 80s linear infinite;
	animation: showLoadingCentered 80s linear infinite;
}

#board_photo_slider .download {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	background: rgba(0, 0, 0, 0);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

#board_photo_slider .download a {
	cursor: pointer;
	position: absolute;
	display: none;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: #b68143;
	width: 140px;
	height: 40px;
	line-height: 40px;
	border-radius: 40px;
	background: #333\9;
	background: rgba(0, 0, 0, 0.7);
	text-align: center;
	font-size: 16px;
	font-weight: bold;
    -webkit-transition: background .1s ease-in-out;
    -moz-transition: background .1s ease-in-out;
    -ms-transition: background .1s ease-in-out;
    -o-transition: background .1s ease-in-out;
    transition: background .1s ease-in-out;
}

#board_photo_slider div:hover.download a { display: block; }
#board_photo_slider .download a span.ico { display: inline-block; width: 14px; height: 18px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -40px -250px no-repeat; }
#board_photo_slider .download a:hover { color: #fff; background: #111\9; background: rgba(0, 0, 0, 0.9); }
#board_photo_slider .download a:hover span.ico { -webkit-filter: brightness(10); -ms-filter: brightness(10); filter: brightness(10); }

#board_photo_slider p.title,
#board_photo_slider p.board-title {
	position: absolute;
	display: none;
	width: 90%;
	margin: 0 5%;
	line-height: 19px;
	text-align: center;
	color: #fff;
	font-size: 16px;
	text-shadow: 0 0 2px #000;
	z-index: 90;
}

#board_photo_slider p.title { bottom: 4%; }
#board_photo_slider p.board-title { top: 4%; color: #999; font-size: 13px; }

#board_photo_slider p.title span.date {
	display: none;
	font-family: 'Open Sans', Helvetica, Arial, tahoma, verdana, arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #fff150;
	letter-spacing: 0em;
}

#board_photo_slider p.title span.writer {
	display: none;
	font-size: 14px;
	font-weight: bold;
	color: #ffce38;
	margin: 3px 0 7px 0;
}

#board_photo_slider a.btn {
	cursor: pointer;
	position: absolute;
	display: block;
	top: 50%;
	width: 32px;
	height: 32px;
	background-image: url(/assets/img/sp/sp_layout.png?v=1661943444);
	z-index: 1;
}

#board_photo_slider a.btn.prev { left: 5%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-position: -300px -100px; }
#board_photo_slider a.btn.next { right: 5%; -webkit-transform: translate(50%, -50%); -moz-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); -o-transform: translate(50%, -50%); transform: translate(50%, -50%); background-position: -280px -140px; }
#board_photo_slider a.btn.close { width: 28px; height: 28px; top: 5%; right: 5%; -webkit-transform: translate(50%, -50%); -moz-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); -o-transform: translate(50%, -50%); transform: translate(50%, -50%); background-position: -200px -170px; }


#board_photo_slider a:hover.btn.prev { background-position: -340px -100px; }
#board_photo_slider a:hover.btn.next { background-position: -320px -140px; }
#board_photo_slider a:hover.btn.close { background-position: -250px -90px; }

#board_photo_slider a.btn.prev.disable,
#board_photo_slider a:hover.btn.prev.disable {
	cursor: default;
	opacity: 0.5;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
	background-position: -300px -100px;
}
#board_photo_slider a.btn.next.disable,
#board_photo_slider a:hover.btn.next.disable {
	cursor: default;
	opacity: 0.5;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
	background-position: -280px -140px;
}

@media screen and (min-height: 280px) {
	#board_photo_slider p.title { display: block; -webkit-transform: translate(0, 9px); -moz-transform: translate(0, 9px); -ms-transform: translate(0, 9px); -o-transform: translate(0, 9px); transform: translate(0, 9px); }
}

@media screen and (min-height: 480px) {
	#board_photo_slider p.title { -webkit-transform: translate(0, 19px); -moz-transform: translate(0, 19px); -ms-transform: translate(0, 19px); -o-transform: translate(0, 19px); transform: translate(0, 19px); }
	#board_photo_slider p.title span.date, #board_photo_slider p.title span.writer { display: block; }
}

@media screen and (min-height: 280px) {
	#board_photo_slider p.board-title { display: block; -webkit-transform: translate(0, -9px); -moz-transform: translate(0, -9px); -ms-transform: translate(0, -9px); -o-transform: translate(0, -9px); transform: translate(0, -9px); }
}

@media screen and (min-height: 480px) {
	#board_photo_slider p.board-title { -webkit-transform: translate(0, -19px); -moz-transform: translate(0, -19px); -ms-transform: translate(0, -19px); -o-transform: translate(0, -19px); transform: translate(0, -19px); }
}

#board_video_player_content {
	position: absolute;
	display: none;
	top: 50%;
	left: 50%;
	width: 100%;
	max-width: 640px;
	max-height: 640px;
}

#btn_top {
	cursor: pointer;
	position: fixed;
	bottom: 56px;
	left: 50%;
	margin-left: 460px;
	width: 40px;
	height: 40px;
	background: #fff;
	text-align: center;
	font-weight: bold;
	color: #9c938b;
	font-family: 'Open Sans', Helvetica, Arial, tahoma, verdana, arial, sans-serif;
}

@media screen and (min-width: 1040px) {
	#btn_top { margin-left: 480px; }
}

#btn_top span.ico {
	display: block;
	width: 12px;
	height: 8px;
	margin: 8px auto 2px auto;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -300px -10px no-repeat;
}

@-webkit-keyframes showFixedHeader {
0% { top: -60px; }
100% { top: 0; }
}

@-moz-keyframes showFixedHeader {
0% { top: -60px; }
100% { top: 0; }
}

@-ms-keyframes showFixedHeader {
0% { top: -60px; }
100% { top: 0; }
}

@keyframes showFixedHeader {
0% { top: -60px; }
100% { top: 0; }
}

#board_fixed_header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 60px;
	background: #fff;
	border-bottom: 2px solid #ccc;
	margin-left: 12px;
	z-index: 10;
	box-shadow: 0 3px 0 rgba(128, 128, 128, 0.1);
	-webkit-animation-name: showFixedHeader;
	-webkit-animation-duration: .3s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in-out;
	-moz-animation-name: showFixedHeader;
	-moz-animation-duration: .3s;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: ease-in-out;
	animation-name: showFixedHeader;
	animation-duration: .3s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
}

#board_fixed_header .wrapper {
	width: 948px;
	height: 100%;
	margin: 0 auto;
}

#board_fixed_header .buttons {
	float: left;
	width: 144px;
	padding: 6px 15px 6px 3px;
	margin-top: 12px;
	line-height: 24px;
	font-size: 13px;
	font-weight: bold;
	color: #7f4500;
}

#board_fixed_header .buttons a.btn-list {
	cursor: pointer;
	display: block;
	text-align: center;
}

#board_fixed_header .buttons a.btn-list { float: left; }
#board_fixed_header .buttons a.btn-list span.circle {
	display: inline-block;
	padding: 0px 8px 1px 6px;
	border-radius: 20px;
	background: #ffce38;
	margin-right: 5px;
}
#board_fixed_header .buttons a:hover.btn-list span.circle { background: #ffde38; }
#board_fixed_header .buttons a.btn-list span.ico {
	display: inline-block;
	width: 10px;
	height: 14px;
	margin: 0;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -300px -20px no-repeat;
	vertical-align: middle;
}

#board_fixed_header .article-title {
	float: left;
	position: relative;
	width: 730px;
	margin-top: 14px;
	padding-left: 50px;
	color: #000;
	font-size: 14px;
	font-weight: bold;
	line-height: 16px;
}

#board_fixed_header .article-title a.btn-important {
	cursor: pointer;
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: -2px 3px 0 -20px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -70px -240px no-repeat;
	vertical-align: top;
}

#board_fixed_header .article-title a.btn-important.selected,
#board_fixed_header .article-title a:hover.btn-important { background-position: -250px -180px; }

#board_fixed_header .article-title .title-bar { display: inline-block; }
#board_fixed_header .article-title p.board-name { display: none; }
#board_fixed_header .article-title span.count-comment { color: #27bc97; font-size: 11px; margin-left: 3px; }
#board_fixed_header .article-title span.icon-new { display: inline-block; width: 14px; height: 18px; margin-left: 3px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -160px -240px no-repeat; vertical-align: middle; }
#board_fixed_header .article-title span.icon-new-comment { display: inline-block; width: 12px; height: 12px; margin-left: 3px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -290px -40px no-repeat; vertical-align: middle; }
#board_fixed_header .article-title span.icon-attachment { display: inline-block; width: 14px; height: 18px; margin-left: 3px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -40px -250px no-repeat; vertical-align: middle; }
#board_fixed_header .article-title span.icon-secret { display: inline-block; width: 18px; height: 18px; margin-left: 3px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -280px -10px no-repeat; vertical-align: middle; }

#board_fixed_header .article-title a.btn-like { position: relative; }
#board_fixed_header .article-title a.btn-like span.ico {
	cursor: default;
	width: 12px;
	height: 11px;
    margin: 0 1px 0 4px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -260px -430px no-repeat;
    vertical-align: middle;
}

#board_fixed_header .article-title a.btn-like span.count {
	color: #f7b018;
	font-size: 12px;
	font-weight: bold;
	vertical-align: top;
}

#board_fixed_header .article-title .action-option {
	cursor: pointer;
	position: absolute;
	top: 6px;
	right: 5px;
	z-index: 1;
	font-size: 12px;
	font-weight: normal;
	text-align: left;
	color: #66625e;
}

#board_fixed_header .article-title .action-option .button {
	float: right;
	display: block;
	width: 17px;
	height: 3px;
	margin: 10px 4px;
	line-height: 30px;
	border-radius: 4px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -60px -100px no-repeat;
}

#board_fixed_header .article-title .action-option ul.actions {
	display: none;
	list-style: none;
	padding: 0;
	margin-top: 20px;
	background: #fff;
	border: 2px solid #d0cdbf;
	border-radius: 4px;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
}

#board_fixed_header .article-title div:hover.action-option ul.actions { display: block; }

#board_fixed_header .article-title .action-option ul.actions li {
	padding: 0 20px 0 10px;
    min-width: 80px;
	height: 30px;
	line-height: 30px;
}

#board_fixed_header .article-title .action-option ul.actions li:hover { background: #f7f5f1; color: #000; }
#board_fixed_header .article-title .action-option ul.actions li.btn-delete { border-top: 2px solid #f0eee4; }

#board_fixed_header .board-title {
	float: left;
	padding-left: 54px;
	line-height: 18px;
	color: #b38a39;
	font-size: 12px;
	font-weight: bold;
}

.container.report div.password-form {
	z-index: 11;
	background: #fff;
	position: fixed;
	margin-left: 300px;
	top: 200px;
	border-radius: 20px;
	border: 5px solid #888;
	width: 370px;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.container.report div.password-form ul,dl,dd {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.container.report div.password-form ul {
	margin: 10px;
	padding: 10px;
	background: #eee;
	border-radius: 5px;
}

.container.report div.password-form dt {
	float: left;
	width: 177px;
	text-align: center;
	line-height: 34px;
}

.container.report div.password-form dd input[type=password] { width: 138px; }

.container.report div.password-form dl p.warning {
	color: #f14c31;
	background: #ddd;
	padding: .5em 1em;
	margin: 0 0 .8em 0;
	border-radius: 4px;
	font-size: 12px;
	font-weight: bold;
}

.container.report div.password-form input[type=submit] {
	cursor: pointer;
	display: inline-block;
	width: 350px;
	border-radius: 6px;
	background: #f94759;
	margin: 0 10px 10px 10px;
	line-height: 40px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	border: none;
	border-bottom: 3px solid #db2134;
	border-top: 2px solid #fff;
	-webkit-transition: border .1s ease-in-out;
	-moz-transition: border .1s ease-in-out;
	-ms-transition: border .1s ease-in-out;
	-o-transition: border .1s ease-in-out;
	transition: border .1s ease-in-out;
}

.container.report div.password-form input[type=submit]:hover {border-top-width:0px;border-bottom-width:5px;}
.container.report div.password-form input[type=submit]:active {border-top-width:4px;border-bottom-width:1px;}

.overlay_history {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 658px;
    height: 24px;
    line-height: 22px;
    -webkit-border-radius : 6px;
    border-radius : 6px;
    z-index: 91;
    background-color: #ffffff;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    -ms-transition: background .3s ease-in-out;
    -o-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.overlay_history li {
	list-style: none;
}

.overlay_history dd.student {
	position: relative;
	width: 100%;
	height: 30px;
	color: #fff;
	border-radius: 6px 6px 0 0;
	font-size: 16px;
	font-weight: bold;
	line-height: 30px;
}

.overlay_history dd.student .icon { position:absolute; left:-8px; top:-8px; margin:0 auto;width:24px;height:24px;background-image:url(/assets/img/sp/sp_detail_report.png?v=1661943444);background-repeat:no-repeat;}
.overlay_history dd.student .name { font-size:13px; text-align: left; margin-left: 34px;}
.overlay_history dd.student .name input[type='checkbox'] { display: none; }
.overlay_history dd.student .name a { color: #fff; }
.overlay_history dd.student .date { position: absolute; top: 0; right: 32px; font-size: 11px; }
.overlay_history dd.student .date a.btn-delete { display: none; }

.overlay_history .positive dd.student .icon { background-position: -90px -130px; }
.overlay_history .negative dd.student .icon { background-position: -160px -120px; }

.overlay_history .positive dd.student { background: #5098e1; }
.overlay_history .negative dd.student { background: #f14c31; }

.overlay_history dd.memo {
	position: relative;
	width: 100%;
	border-radius: 0 0 6px 6px;
	text-align: left;
	padding: 3px 0;
}

.overlay_history dd.memo .icon { float: left; width: 80px; margin: 2px 0 0 7px; text-align: center; }
.overlay_history dd.memo.no-memo .icon { margin: 0 0 0 7px; }
.overlay_history dd.memo.no-memo .icon .category { display: none; }
.overlay_history dd.memo .icon img { display: block; margin: 0 auto; }
.overlay_history dd.memo .category { color: #333; }
.overlay_history dd.memo .text { font-size: 13px; font-weight: bold; }
.overlay_history dd.memo .desc { color: #333; line-height: 20px; display: inline-block; width: 620px; }
.overlay_history dd.memo.no-memo .desc { margin-bottom: 0; }
.overlay_history dd.memo .datetime { font-size: 10px; color: #888; }
.overlay_history dd.memo .datetime a.btn-delete { display: none; }
.overlay_history dd.memo a.btn-memo { display: none; }

.overlay_history .positive dd.memo .text { color: #176cc2; }
.overlay_history .negative dd.memo .text { color: #f14c31; }

.container.report .report .body .contents.no-panel { width: 920px; }

.container.report .report .body .contents .section {
	width: 603px;
	margin: 0 20px 30px 20px;
}

.container.report .report .body .contents .section.private {
	width: 579px;
	padding: 12px;
	background: #fff;
}

.container.report .report .body .page-title .page-tab {
	line-height: 54px;
	margin-bottom: -1px;
}

.container.report.setup .report .body .page-title .page-tab {
	border-top: 1px solid #e0e0e0;
	background: #f2f2f2;
}

.container.report .report .body .page-title .page-tab a {
	cursor: pointer;
	display: inline-block;
	min-width: 160px;
	height: 54px;
	line-height: 54px;
	border-bottom: 4px solid transparent;
	text-align: center;
	color: #555;
	font-size: 14px;
	font-weight: normal;
}

.container.report .report .body .page-title .page-tab a:hover { border-bottom-color: #9c938b; }
.container.report .report .body .page-title .page-tab.step a {
	cursor: default;
	color: #aaa;
}

.container.report .report .body .page-title .page-tab.step a:hover { border-bottom-color: transparent; }

.container.report .report .body .page-title .page-tab a.selected { cursor: pointer; border-bottom-color: #9c938b; color: #000; font-weight: bold; }

.container.report .report .body .page-title .page-tab a.disabled span.ico.disabled {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 0 1px 5px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -90px -410px no-repeat;
}

.container.report .report .body .page-title .page-tab a span.ico.new {
	display: inline-block;
	width: 14px;
	height: 18px;
	margin: -7px 0 0 2px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -160px -240px no-repeat;
}

.container.report .report .body .page-title .page-tab a span.sharing-info {
	display: none;
	min-width: 19px;
	height: 19px;
	line-height: 20px;
	margin-left: 5px;
	border-radius: 19px;
	background: #ffc107;
	color: #fff;
	font-size: 12px;
	font-family: 'Open Sans', Helvetica, Arial, tahoma, verdana, arial, sans-serif;
	letter-spacing: 0em;
}

.container.report .report .body .page-title .page-tab a span.sharing-info.shared { display: inline-block; }

.container.report .report .body .contents .section .title {
	height: 52px;
	margin-bottom: 3px;
}

.container.report .report .body .contents .section ul.setting {
	display: none;
	width: 400px;
	height: 56px;
	margin: 25px auto 40px auto;
	padding: 10px 30px;
	background: #f8f7f2;
	border-radius: 10px;
	line-height: 28px;
	list-style: none;
	text-align: left;
}

.container.report .report .body .contents .section ul.setting li {
	float: left;
	margin-right: 20px;
}

.container.report .report .body .contents .section ul.setting li.title {
	clear: both;
	font-weight: bold;
}

.container.report .report .body .contents .section ul.section-desc {
	display: none;
	width: 420px;
	margin: 25px auto;
	line-height: 24px;
	list-style: disc;
}

.container.report .report .body .contents .section .score-board {
	width: 194px;
	height: 52px;
	margin-left: 272px;
	line-height: 52px;
	font-weight: bold;
}

.container.report .report .body .contents .section .score-board dt {
	margin-left: 20px;
	width: 70px;
	float: left;
	font-size: 16px;
	text-align: center;
}

.container.report .report .body .contents .section .score-board dd {
	display: inline-block;
	margin-left: 0px;
	width: 84px;
	text-align: right;
	font-size: 20px;
}

.container.report .report .body .contents .section .score-board p {
	margin-left: 30px;
	width: 134px;
	font-size: 16px;
	text-align: center;
}

.container.report .report .body .contents .section .title-board {
	width: 194px;
	height: 52px;
	margin-left: 272px;
	line-height: 52px;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
}

.container.report .report .body .contents .section.private .title-board {
	color: #2694db;
}

.container.report .report .body .contents .section.public .title-board {
	color: #db2649;
}

.container.report .report .body .contents .section.athome ul.setting,
.container.report .report .body .contents .section.athome ul.section-desc { display: block; }

.container.report .report .body .contents .section.athome.disabled .item-list {
	opacity: 0.5;
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-ms-filter: grayscale(1);
	-o-filter: grayscale(1);
	filter: grayscale(1);
}

.container.report .report .body .contents .section.athome .item-list ul {
    padding: 10px;
}

.container.report .report .body .contents .section.athome .item-list li.date {
    list-style: none;
    margin-top: 20px;
    margin-bottom: 30px;
}

.container.report .report .body .contents .section.athome .item-list p.date span {
	display: inline-block;
    text-align: center;
    border: 2px solid #ddd;
    border-radius: 20px;
    padding: 5px 15px;
    font-weight: bold;
    background: #fff;
}

.container.report .report .body .contents .section.athome .item-list dl.activity {
	position: relative;
    line-height: 22px;
    margin-left: 20px;
    margin-bottom: 15px;
    padding: 5px;
    border-radius: 5px;
    background: #fff;
}

.container.report .report .body .contents .section.athome .item-list dl.activity dt {
    width: 54px;
    text-align: right;
    float: left;
    color: #888;
    margin-right: 20px;
    line-height: 30px;
}

.container.report .report .body .contents .section.athome .item-list dl.activity a.student {
    font-size: 13px;
    color: #0c8199;
}

.container.report .report .body .contents .section.athome .item-list a.apply-card {
	position: absolute;
	top: 2px;
	right: 5px;
    display: block;
}

.container.report .report .body .contents .section.athome .item-list a.apply-card.disabled {
    cursor : default;
    background: #efefef;
    color: #888;
    border-bottom-color: #dedede;
}

.container.report .report .body .contents .section.athome .item-list dl.message {
    border-top: 1px solid #ddd9c5;
    padding-top: 2px;
}

.container.report .report .body .contents .section.athome .item-list dl.message dt {
    width: 50px;
    height: 22px;
    float: left;
    color: #333;
    line-height: 22px;
    text-align: center;
    background: #f0eee4;
    border-radius: 3px;
    margin: 1px;
}

.container.report .report .body .contents .section.athome .item-list dl.activity dd {
    color: #888;
    line-height: 30px;
    margin-left: 8px;
}

.container.report .report .body .contents .section.athome .item-list dl.message dd {
    color: #555;
    padding-left: 20px;
    margin-left: 40px;
    line-height: 1.4;
    padding-top: 4px;
    min-height: 22px;
}

.container.report .report .body .contents .section.athome .item-list dl.message dd.what {
    color: #f66;
}

.container.report .report .body .contents .section.athome .item-list dl.activity a {
    font-weight: bold;
}

.container.report .report .body .contents .section.athome.disabled .item-list dl.activity a {
	cursor: default;
	background: #ffde38 !important;
}

.popup-athome-notice {
	position: absolute;
	width: 704px;
	background: #eee;
	border: 2px solid #888;
	border-radius: 4px;
	padding: 15px;
	left: -5px;
	top: 95px;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
	font-size: 13px;
	line-height: 20px;
	z-index: 10;
}

#thanks_help_layer {
	width: 684px;
	left: 46px;
}

#public_help_layer {
	left: 110px;
}

.popup-athome-notice a {
	color: #f66;
	font-weight: bold;
	text-decoration: underline;
}

.popup-athome-notice .exit {
	margin-top: 10px;
	float: right;
	color: #555;
}

.container.report .report .body .contents .section .item-area .message {
	width: 575px;
	border-radius: 4px;
	margin: 3px 1px 19px 1px;
	background: #fff;
	border: 1px solid #e5e2d9;
}

.container.report .report .body .contents .section .item-area .message.schedule {
    background-color: #fff8a7;
    border: 1px solid #fff8a7;
}

.container.report .report .body .contents .section .item-area .message.selected {
	border-width: 2px;
	border-color: #9c9489;
	margin: 2px 0 18px 0;
}

.container.report .report .body .contents .section .item-area .message.temporary {
    background-color: #f5f4f0;
    border: 1px dashed #c79c6d;
}

.container.report .report .body .contents .section .item-area .message .header {
	position: relative;
}

.container.report .report .body .contents .section .item-area .message .subject {
	margin: 14px 16px 0 16px;
	padding-bottom: 3px;
	font-size: 13px;
}

.container.report .report .body .contents .section .item-area .message .subject .desc {
	color: #bbb4ae;
	font-size: 11px;
	margin-right: 5px;
	vertical-align: middle;
	letter-spacing: 0;
}

.container.report .report .body .contents .section .item-area .message.schedule .subject .desc {
    color: #6F3D01;
}

.container.report .report .body .contents .section .item-area .message .subject .desc .schedule {
    border-radius: 4px;
    padding: 1px 5px;
    background-color: #7f4500;
    color: #fff;
}

.container.report .report .body .contents .section .item-area .message .subject .desc .temporary {
    border-radius: 4px;
    padding: 1px 5px;
    margin-right: 5px;
    background-color: #cccccc;
    color: #575757;
}

.container.report .report .body .contents .section .item-area .message .name {
	display: inline-block;
	max-width: 150px;
	margin: 0 3px 0 0;
	color: #151515;
	font-weight: bold;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: middle;
}

.container.report .report .body .contents .section .item-area .message .relation { color: #707070; vertical-align: middle; }

.container.report .report .body .contents .section .item-area .message span.ico.is-new {
	display: inline-block;
	width: 14px;
	height: 18px;
	margin: -2px 0 0 3px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -160px -240px no-repeat;
	vertical-align: top;
}

.container.report .report .body .contents .section .item-area .message .subject .sub {
	font-size: 11px;
	color: #bbb4ae;
	letter-spacing: -0.03em;
	line-height: 24px;
}

.container.report .report .body .contents .section .item-area .message.schedule .subject .sub {
    color: #6F3D01;
}

.container.report .report .body .contents .section .item-area .message .header .action {
	position: absolute;
	top: 2px;
	right: 6px;
	line-height: 20px;
}

.container.report .report .body .contents .section .item-area .message .header .status { margin-left: 8px; }
.container.report .report .body .contents .section .item-area .message .header .status.nopointer { cursor: default; }

.container.report .report .body .contents .section .item-area .message .header .status span.ico {
	width: 16px;
	height: 15px;
	margin-top: -2px;
	margin-right: 0;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -430px -330px no-repeat;
}

.container.report .report .body .contents .section .item-area .message .header .status.read span.ico { background-position: -430px -310px; }

.container.report .report .body .contents .section .item-area .message .header div.status {
	position: absolute;
	cursor: pointer;
	top: 2px;
	right: 153px;
	min-width: 82px;
}

.container.report .report .body .contents .section .item-area .message .header div.status.disabled {
    cursor: default;
    color: #6C6C6C;
}

.container.report .report .body .contents .section .item-area .message .header div.status.parent {
	right: 305px;
}

.container.report .report .body .contents .section .item-area .message .header .status-list {
	position: absolute;
	cursor: pointer;
	top: 27px;
	right: 9px;
	width: 240px;
	background: #fff;
	border: 1px solid #ccc;
	padding: 5px;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
	z-index: 10;
}

.container.report .report .body .contents .section .item-area .message .header .status-list.parent {
	right: 262px;
}

.container.report .report .body .contents .section .item-area .message .header .status-list .renotify_area {
    text-align: right;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-right: 5px;
}

.container.report .report .body .contents .section .item-area .message .header .status-list .renotify_area .renotify_button {
    display: inline-block;
    background-color: #fff;
    border: 1px solid #ffcf1a;
    color: #606060;
    border-radius: 30px;
    padding: 0 12px;
    line-height: 24px;
    cursor: pointer;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

.container.report .report .body .contents .section .item-area .message .header .status-list .renotify_area .renotify_button:hover {
    background: #ffde38;
    color: #7f4500;
}

.container.report .report .body .contents .section .item-area .message .header .status-list .renotify_area .renotify_button.disabled {
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    cursor: not-allowed;
}

.container.report .report .body .contents .section .item-area .message .header .status-list .renotify_area .renotify_button.disabled:hover {
    background: #fff;
    color: #606060;
}

.container.report .report .body .contents .section .item-area .message .header .status-list ul {
	padding: 0;
	list-style: none;
	height: 150px;
	overflow-y: scroll;
	line-height: 20px;
}

.container.report .report .body .contents .section .item-area .message .header .status-list ul span.status {
	display: inline-block;
	min-width: 50px;
}

.container.report .report .body .contents .section .item-area .message .header .status.read {
	color: #27bc97;
	background: #fff;
}

.container.report .report .body .contents .section .item-area .message .header .status.unregistered {
	color: #ff5f5f;
	background: #fff;
}

.container.report .report .body .contents .section .item-area .message .header .status .count {
	color: #de6517;
	margin-right: 2px;
	letter-spacing: 0;
}

.container.report .report .body .contents .section .item-area .message .header .action a {
	cursor: pointer;
	float: left;
	line-height: 15px;
	border-radius: 30px;
	margin: 0 3px;
	vertical-align: middle;
}

.container.report .report .body .contents .section .item-area .message .msgbody textarea {
	width: 535px;
	max-width: 535px;
	min-height: 120px;
	margin: 9px 9px 3px 9px;
	padding: 5px 11px;
	font-size: 13px;
	line-height: 180%;
	border: none;
	border-radius: 6px;
	resize: none;
}

.container.report .report .body .contents .section .item-area .message .msgbody textarea.update {
    background-color: #fff4b9;
}

a.autolink {
    text-shadow: none;
    border-bottom: 1px solid #bbb;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    padding: 1px 3px 2px 3px;
}

a.autolink:hover {
    background-color: #aaa;
    color: #fff;
    border-bottom: 1px solid #aaa;
}

.container.report .report .body .contents .section .item-area .message p label { margin-left: 15px; }
.container.report .report .body .contents .section .item-area .message .form-action {
    display: none;
    width: 100%;
    margin-top: 5px 0 0 0;
}

.container.report .report .body .contents .section .item-area .message .form-action.update {
	width: 555px;
	padding: 10px;
	text-align: right;
}

.container.report .report .body .contents .section .item-area .message .form-action .comment,
.container.report .report .body .contents .section .item-area .message .form-action .update,
.container.report .report .body .contents .section .item-area .message .form-action .cancel {
    cursor: pointer;
    padding: 8px 0;
    background: #eee;
    border-radius: 3px;
    text-align: center;
    width: 100px;
    display: inline-block;
}

.container.report .report .body .contents .section .item-area .message .form-action .cancel {
    margin-right: 10px;
}

.container.report .report .body .contents .section .item-area .message .msgbody .textarea {
	border: none;
	width: 535px;
	max-width: 535px;
	min-height: 50px;
	font-size: 13px;
	line-height: 180%;
	padding: 10px 20px 20px 15px;
	letter-spacing: normal;
}

.container.report .report .body .contents .section .item-area .message .msgbody .textarea u {
    text-decoration: none;
    padding-bottom: 0px;
    border-bottom: 1px solid;
}

.container.report .report .body .contents .section .item-area .message .reply .info {
	cursor: pointer;
	height: 32px;
	line-height: 32px;
	background: #e5e2d9;
	text-align: center;
	color: #333;
}

.container.report .report .body .contents .section .item-area .message .reply.replied .info { background: #f5f2e9; }

.container.report .report .body .contents .section .item-area .message .reply .info span.status { position: absolute; left: 45px; color: #888; }
.container.report .report .body .contents .section .item-area .message .reply .info a.btn-reply {
	display: block;
	background: #ffde38;
	color: #7f4500;
	font-weight: bold;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments .file-item {
	position: relative;
	display: inline-block;
	margin-right: 3px;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments .file-item a.file {
    background-color: #fcf6d6;
    border: 1px solid #dbcd74;
    padding: 10px;
    border-radius: 6px;
    display: inline-block;
    background: #fcf6d6 url(/assets/img/announcement/img-file-01.png?v=1661943444) no-repeat 6px 8px;
    padding-left: 24px;
    margin-right: 5px;
    max-width: 220px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments .file-item a.file.link {
    background: #fcf6d6 url(/assets/img/announcement/img_url_link.png?v=1661943444) no-repeat 6px 8px;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments .file-item a.btn-delete {
	cursor: pointer;
	position: absolute;
	top: -5px;
	right: -2px;
	width: 14px;
	height: 14px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -280px -100px no-repeat;
	z-index: 2;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments .file-item a.btn-delete { display: none; }
.container.report .report .body .contents .section.private .item-area .message .msgbody .attachments.open .file-item a.btn-delete { display: block; }

.container.report .report .body .contents .section .item-area .message .msgbody p a.btn-attach-files { cursor: pointer; position: relative; line-height: 32px; color: #a9610d; float: none; margin-left: 15px; }
.container.report .report .body .contents .section .item-area .message .msgbody p a.btn-attach-files span.ico { display: inline-block; width: 14px; height: 18px; margin-right: 3px; margin-bottom: 2px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -40px -250px no-repeat; vertical-align: middle; }
.container.report .report .body .contents .section .item-area .message .msgbody p a.btn-attach-files span.filename { color: #000; font-size: 12px; margin-left: 3px; }
.container.report .report .body .contents .section .item-area .message .msgbody p a.btn-attach-files input {
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	width: 100%;
	direction: ltr;
}

.container.report .report .body .contents .section .item-area .message .msgbody p.button a.btn-detach { display: none; margin-left: 5px; }
.container.report .report .body .contents .section .item-area .message .msgbody p.button a.btn-detach span.ico { width: 13px; height: 13px; background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -110px -110px no-repeat; }
.container.report .report .body .contents .section .item-area .message .msgbody p.button a:hover.btn-detach span.ico { background-position: 0 -60px; }

.container.report .report .body .contents .section .item-area .message .msgbody .attachments {
	width: 565px;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments.open {
	position: relative;
	display: block;
	font-size: 12px;
	margin: 5px 0;
	padding-top: 5px;
	border-top: 1px solid #ddd;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments > div {
/*
	float: left;
	margin: 5px 9px 0 9px;
*/
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments .file-attachments {
	float: none;
	display: none;
	line-height: 24px;
	padding-bottom: 3px;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments.open .file-attachments {
	display: block;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments p { display: block; font-size: 12px; color: #9c938b; }
.container.report .report .body .contents .section .item-area .message .msgbody .attachments p.files {
	display: inline-block;
	width: 170px;
	line-height: 18px;
	vertical-align: top;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments p span { margin: 0 3px; font-weight: normal; }
.container.report .report .body .contents .section .item-area .message .msgbody .attachments p span.title { font-weight: bold; line-height: 24px; }
.container.report .report .body .contents .section .item-area .message .msgbody .attachments p span.size { color: #de6517; }
.container.report .report .body .contents .section .item-area .message .msgbody .attachments p span.available { color: #999; }

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul {
	display: none;
	list-style: none;
	padding: 5px 0;
	font-weight: normal;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-files { width: 532px; min-height: 30px; }
.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul li span.icon-file {
	display: inline-block;
	width: 14px;
	height: 18px;
	margin-left: 2px;
	margin-right: 3px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -40px -250px no-repeat;
	vertical-align: middle;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-files li.uploading span.icon-file {
	width: 18px;
	height: 18px;
	margin-left: 0;
	margin-right: 1px;
	background: url(/assets/img/img_loading_18.png?v=1661943444) 0 0 no-repeat;
	-webkit-animation: showLoading 80s linear infinite;
	-moz-animation: showLoading 80s linear infinite;
	-ms-animation: showLoading 80s linear infinite;
	-o-animation: showLoading 80s linear infinite;
	animation: showLoading 80s linear infinite;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-files a.btn-delete { float: right; display: inline-block; margin-left: 3px; }
.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-files a.btn-delete span.ico { width: 14px; height: 14px; margin-right: 0; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -280px -100px no-repeat; vertical-align: text-bottom; }

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-files li { position: relative; }

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-files li .progress {
	position: absolute;
	display: none;
	top: 10px;
	right: 70px;
	width: 60px;
	height: 6px;
	border-radius: 3px;
	background: #e0ddd4;
	overflow: hidden;
	z-index: 2;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-files li .progress .progress-bar {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: #ffce38;
	overflow: hidden;
	-webkit-transition: background .2s ease-out;
	-moz-transition: background .2s ease-out;
	-ms-transition: background .2s ease-out;
	-o-transition: background .2s ease-out;
	transition: background .2s ease-out;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-files li span.name {
	display: inline-block;
	width: 450px;
	height: 18px;
	line-height: 18px;
	color: #a9610d;
	font-weight: normal;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-files li span.size { float: right; margin: 0 3px; font-weight: normal; }
.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-images { width: 550px; min-height: 88px; }

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-images a.btn-delete { cursor: pointer; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -280px -100px no-repeat; z-index: 2; }
.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-images li.uploading a.btn-delete { display: none; }

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-images li {
	position: relative;
	display: inline-block;
	margin: 0 2px;
	width: 80px;
	height: 80px;
	border-radius: 4px;
	background: #f0eee4;
	overflow: hidden;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-images li .fileinfo {
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	width: 70px;
	padding: 30px 5px;
	line-height: 20px;
	text-align: center;
	background: #333\9;
	background: rgba(0, 0, 0, 0.7);
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	color: #fff;
	letter-spacing: 0;
	z-index: 1;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-images li a.bg-ani { display: none; }
.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-images li a.bg-ani span.gif {
	margin-right: 1px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	font-family: 'Open Sans', Helvetica, Arial, tahoma, verdana, arial, sans-serif;
	letter-spacing: 0em;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-images li .fileinfo span.icon-file {
	display: none;
	width: 18px;
	height: 18px;
	margin: 0 auto 2px auto;
	background: url(/assets/img/img_loading_18.png?v=1661943444) 0 0 no-repeat;
	-webkit-animation: showLoading 80s linear infinite;
	-moz-animation: showLoading 80s linear infinite;
	-ms-animation: showLoading 80s linear infinite;
	-o-animation: showLoading 80s linear infinite;
	animation: showLoading 80s linear infinite;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-images li .progress {
	position: absolute;
	display: none;
	bottom: 10px;
	left: 8px;
	width: 60px;
	height: 6px;
	margin: 0;
	border-radius: 3px;
	background: #e0ddd4;
	overflow: hidden;
	z-index: 2;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-images li .progress .progress-bar {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: #ffce38;
	overflow: hidden;
	-webkit-transition: background .2s ease-out;
	-moz-transition: background .2s ease-out;
	-ms-transition: background .2s ease-out;
	-o-transition: background .2s ease-out;
	transition: background .2s ease-out;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-images li:hover .fileinfo { display: block; }
.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-images li.no-preview .fileinfo { display: block; background: none; color: #7f4500; }
.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-images li.uploading .fileinfo { display: block; background: #fff; opacity: 0.9; color: #7f4500; padding: 20px 5px; }
.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-images li.uploading .fileinfo span.icon-file { display: block; }

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-images li .fileinfo span.name {
	display: block;
	width: 70px;
	color: #fff;
	font-weight: normal;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-images li .fileinfo span.size {
	display: none;
	width: 70px;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments ul.attachment-images li img.loading { margin: 20px; }

.container.report .report .body .contents .section .item-area .message .msgbody .attachments .progress {
	position: relative;
	display: none;
	width: 550px;
	height: 20px;
	margin: 5px 8px 10px 8px;
	padding: 0 2px;
	border-radius: 4px;
	background: #e0ddd4;
	overflow: hidden;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments .progress .progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: #ffce38;
	color: #7f4500;
	overflow: hidden;
	-webkit-transition: background .2s ease-out;
	-moz-transition: background .2s ease-out;
	-ms-transition: background .2s ease-out;
	-o-transition: background .2s ease-out;
	transition: background .2s ease-out;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments .progress .text {
	display: block;
	width: 100%;
	font-size: 11px;
	font-family: arial;
	letter-spacing: 0;
	line-height: 20px;
	text-align: center;
}

.container.report .report .body .contents .section .item-area .message .msgbody .attachments .progress .progress-bar.encoding { background: #06c793; color: #fff; }
.container.report .report .body .contents .section .item-area .message .msgbody .attachments .progress .progress-bar.success { background: #2b96db; color: #fff; }
.container.report .report .body .contents .section .item-area .message .msgbody .attachments .progress .progress-bar.error { background: #db2c49; color: #fff; }


.container.report .report .body .contents .section .item-area .message .comments .info {
	cursor: pointer;
	line-height: 32px;
	background: #f1f0eb;
	text-align: center;
	font-weight: bold;
}

.container.report .report .body .contents .section .item-area .message .comments .info span { font-weight: normal; }

.container.report .report .body .contents .section .item-area .message .comments .info .count {
	position: relative;
	padding-top: 3px;
	color: #7f4500;
	font-size: 11px;
}

.container.report .report .body .contents .section .item-area .message .comments .info .count .exists { color: #ff5f5f; }

.container.report .report .body .contents .section .item-area .message .comments .text {
    padding: 0 15px 15px 15px;
    background: #f1f0eb;
}

.container.report .report .body .contents .section .item-area .message .comments .text ul {
	padding-left: 5px;
	padding-right: 5px;
}

.container.report .report .body .contents .section .item-area .message .comments .text li {
	position: relative;
	list-style: none;
	border-bottom: 1px solid #fff;
	padding: 8px 5px 4px 5px;
}

.container.report .report .body .contents .section .item-area .message .comments .text li:first-child {
    padding-top: 4px;
}

.container.report .report .body .contents .section .item-area .message .comments .text li:last-child {
    border-bottom: 0px solid #e5e2d9;
}

.container.report .report .body .contents .section .item-area .message .comments .text .writer {
    font-weight: bold;
}

.container.report .report .body .contents .section .item-area .message .comments .text .date {
    margin-left: 5px;
	padding-top: 5px;
	color: #9c938c;
	font-size: 11px;
	letter-spacing: 0;
}

.container.report .report .body .contents .section .item-area .message .comments .text .delete {
    cursor: pointer;
    position: absolute;
    top: 6px;
    right: 0;
}

.container.report .report .body .contents .section .item-area .message .comments .text .delete span.ico {
    width: 18px;
    height: 18px;
    background: url(/assets/img/sp/sp_layout.png?v=1661943444) -260px -160px no-repeat;
}

.container.report .report .body .contents .section .item-area .message .comments .text p.comment { padding: 8px 0; }
.container.report .report .body .contents .section .item-area .message .comments .text p span { vertical-align: middle; }

.container.report .report .body .contents .section .item-area .message .comments .text textarea {
    border: 1px solid #e5e2d9;
    resize: none;
    background-color: #fff;
    width: 390px;
    height: 48px;
    margin-left: 3px;
    padding: 8px 10px;
    border-radius: 4px;
}


.container.report .report .body .contents .section .item-area .message .comments .text a.comment {
	width: 110px;
	height: 64px;
	line-height: 64px;
	margin-left: 10px;
	padding: 0;
	background: #9c938c;
	color: #fff;
	font-size: 12px;
}

.container.report .report .body .contents .section .item-area .message .comments .text textarea.disabled { background-color: #e2e2e2; }

.important_block .checkbox,
#only_has_memo_checkbox {
    height: 14px;
}

.important_block .label,
#only_has_memo_checkbox_label {
    cursor: pointer;
    vertical-align:1px;
    margin-left: 2px;
}

.important_block .label span.important {
    font-weight: bold;
    color: #c00;
}

.container.report .report .body .contents .section.history .item-list dl.activity textarea.comment_form {
	width: 488px;
	resize: none;
	border: 1px solid #ddd;
	background-color: #fff;
	margin-bottom: 4px;
	border-radius : 4px;
}

.container.report .report .body .contents .section.history .item-list dl.activity button.btn_save_comment {
	width: 80px;
	height: 48px;
	background-color: #ffd51e;
	border: 1px solid #ccc;
	color: #666;
	border-radius: 4px;
	box-shadow: inset -1px -1px 1px #ffaa00;
}

.container.report .report .body .contents .section.history .item-list dl.activity .comment p.datetime {
	letter-spacing: 0;
	font-size: 10px;
	color: #888;
}

.container.report .report .body .contents .section.history .item-list dl.activity .comment p.text {
	font-size: 12px;
	color: #000;
}

.container.report .report .body .contents .section .btn-more { margin-top: 15px; }

.container.report .report .body .contents .section .sub-section-title {
	line-height: 30px;
	color: #7f4500;
	font-size: 13px;
}

.container.report .report .body .contents .section .item-area {
	display: inline-block;
}

.container.report .report .body .contents .section .item-area p.no-item {
	display: block;
	width: 679px;
	height: 150px;
	line-height: 150px;
	color: #999;
	font-size: 13px;
	text-align: center;
}

.container.report .report .body .contents .section .item-area .card {
	position: relative;
	float: left;
	margin: 17px 16px 3px 5px;
	display: block;
	width: 126px;
	height: 135px;
}

.container.report .report .body .contents .section .item-area .card p.desc {
	display: inline-block;
	width: 102px;
	height: 90px;
	margin: 58px 8px 0 6px;
	padding: 4px;
	font-size: 13px;
	font-weight: bold;
	border: none;
	background: transparent;
	color: #fff;
	resize: none;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

.container.report .report .body .contents .section .item-area .card .score {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 16px;
	height: 34px;
	background: #ffd51e;
	border-radius: 20px;
	padding: 0 10px;
	line-height: 32px;
	text-align: center;
	padding-right: 10px;
	font-size: 15px;
	font-weight: bold;
	color: #333;
	box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
	behavior: url(/assets/css/PIE.htc);
}

.container.report .report .body .contents .section .item-area .card .category-image {
	position: absolute;
	cursor: pointer;
	top: 17px;
	left: 7px;
	font-size: 13px;
	color: #333;
}

.container.report .report .body .contents .section .item-area .card .category-image img {
	vertical-align: middle;
	margin-right: 5px;
}

.container.report .report .body .contents .controller {
	text-align: center;
	width: 320px;
	margin: 10px auto;
}

.container.report .report .body .contents .controller a {
	cursor: pointer;
	display: inline-block;
	width: 260px;
	margin: 10px auto;
	padding: 20px;
	border-radius: 5px;
	border-top: 2px solid #f0eee4;
	border-bottom: 3px solid #fdda19;
	text-align: center;
	color: #7d563d;
	background: #fff150;
	font-size: 18px;
	font-weight: bold;
}
.container.report .report .body .contents .controller a:hover { border-top-width: 0px; border-bottom-width: 5px; }
.container.report .report .body .contents .controller a:active { border-top-width: 4px; border-bottom-width: 1px; }

.container.report .report .body .contents .controller p {
	display: inline-block;
	width: 320px;
	line-height: 24px;
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: -0.02em;
}

.container.report .report .body .contents .controller p.desc {
	font-size: 12px;
	font-weight: normal;
	color: #464646;
}

.container.report .report .body .contents .controller span.value {
	color: #de6517;
}

.container.report .report .body .contents .basic-guide {
	width: 350px;
	padding: 10px;
	border-radius: 8px;
	background: #fff;
	margin: 10px auto;
}

.container.report .report .body .contents .basic-guide p {
	display: inline-block;
	width: 340px;
	line-height: 24px;
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0;
	color: #7d563d;
	background: #f0eee4;
	border-radius: 4px;
	padding-left: 10px;
}

.container.report .report .body .contents .basic-guide ul {
	margin: 10px 0;
}

.container.report .report .body .contents .basic-guide dt {
	display: inline-block;
	width: 100px;
	line-height: 24px;
	font-weight: bold;
	letter-spacing: 0;
	text-align: center;
	text-decoration: underline;
}

.container.report .report .body .contents .basic-guide dd {
	display: inline-block;
	width: 245px;
	line-height: 24px;
	letter-spacing: 0;
}

.container.report .report .body .contents .excel-tip {
	clear: both;
	display: block;
	width: 670px;
	padding: 3px 10px;
	margin: 10px auto;
	background: #fff;
	border-radius: 8px;
}

.container.report .report .body .contents .excel-tip p {
	line-height: 24px;
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0;
	padding: 2px 8px 2px 12px;
	color: #7d563d;
	border-bottom: 3px solid #f0eee4;
}

.container.report .report .body .contents .excel-tip ol {
	padding: 5px 5px 5px 30px;
	line-height: 21px;
	margin: 0;
}

.container.report .report .body .contents .today-summary {
	background: #fff;
	width: 700px;
	margin: 10px auto;
	padding: 10px;
	text-align: center;
	border-radius: 6px;
	letter-spacing: -0.02em;
}

.container.report .report .body .contents .today-summary p.title, .container.report .report .body .contents .today-summary p.desc {
	color: #464646;
}

.container.report .report .body .contents .today-summary p.title {font-size:15px;}
.container.report .report .body .contents .today-summary p.title span.number {font-family:arial;font-weight:bold;color:#1870c8;font-size:22px;margin-right:1px;}

.container.report .report .body .contents .today-summary p.desc {font-size:13px;}
.container.report .report .body .contents .today-summary p.desc span.number {font-family:arial;font-weight:bold;color:#f14c31;font-size:16px;margin-right:1px;}

.container.report .report .body .contents .today-summary .positive-students {
	width: 380px;
	margin: 0 auto;
	padding: 10px;
}

.container.report .report .body .contents .today-summary .score {width: 320px;margin: 20px 0 20px 60px;}
.container.report .report .body .contents .today-summary .score .percent {float:left;display:inline-block;width:52px;height:60px;}
.container.report .report .body .contents .today-summary .score .p0 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) 0 -60px no-repeat}

.container.report .report .body .contents .today-summary .score.grade0 .p25 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -240px -70px no-repeat}
.container.report .report .body .contents .today-summary .score.grade0 .p50 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -240px -140px no-repeat}
.container.report .report .body .contents .today-summary .score.grade0 .p75 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) 0 -270px no-repeat}
.container.report .report .body .contents .today-summary .score.grade0 .p100 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -120px -210px no-repeat}

.container.report .report .body .contents .today-summary .score.grade1 .p25 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -120px -140px no-repeat}
.container.report .report .body .contents .today-summary .score.grade1 .p50 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -180px -140px no-repeat}
.container.report .report .body .contents .today-summary .score.grade1 .p75 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -60px -200px no-repeat}
.container.report .report .body .contents .today-summary .score.grade1 .p100 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -240px 0 no-repeat}

.container.report .report .body .contents .today-summary .score.grade2 .p25 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -180px -210px no-repeat}
.container.report .report .body .contents .today-summary .score.grade2 .p50 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -240px -210px no-repeat}
.container.report .report .body .contents .today-summary .score.grade2 .p75 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -60px -270px no-repeat}
.container.report .report .body .contents .today-summary .score.grade2 .p100 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -300px 0 no-repeat}

.container.report .report .body .contents .today-summary .score.grade3 .p25 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -60px -130px no-repeat}
.container.report .report .body .contents .today-summary .score.grade3 .p50 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -180px 0 no-repeat}
.container.report .report .body .contents .today-summary .score.grade3 .p75 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -180px -70px no-repeat}
.container.report .report .body .contents .today-summary .score.grade3 .p100 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) 0 -200px no-repeat}

.container.report .report .body .contents .today-summary .score.grade4 .p25 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -60px -60px no-repeat}
.container.report .report .body .contents .today-summary .score.grade4 .p50 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -120px 0 no-repeat}
.container.report .report .body .contents .today-summary .score.grade4 .p75 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) 0 -130px no-repeat}
.container.report .report .body .contents .today-summary .score.grade4 .p100 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -120px -70px no-repeat}

.container.report .report .body .contents .today-summary .score .text {
	line-height: 60px;
	font-size: 16px;
	font-weight: bold;
	color: #777;
}

.container.report .report .body .contents .today-summary .score-board {
	width: 390px;
	height: 50px;
	margin: 10px auto;
	padding: 10px;
	text-align: left;
	line-height: 24px;
}

.container.report .report .body .contents .today-summary .score-board .positive, .container.report .report .body .contents .today-summary .score-board .negative {
	width: 180px;
	float: left;
}

.container.report .report .body .contents .today-summary .score-board .positive {margin-left:30px;}

.container.report .report .body .contents .today-summary .score-board .ico {float:left;display:block;width:50px;height:50px;margin-right:10px;}
.container.report .report .body .contents .today-summary .score-board .positive .ico {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -60px 0 no-repeat;}
.container.report .report .body .contents .today-summary .score-board .negative .ico {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) 0 0 no-repeat;}

.container.report .report .body .contents .today-summary .score-board .title {font-weight:bold;font-size:13px;}
.container.report .report .body .contents .today-summary .score-board .number {font-weight:bold;font-size:22px;font-family:arial;}
.container.report .report .body .contents .today-summary .score-board .positive .number {color:#1870c8;}
.container.report .report .body .contents .today-summary .score-board .negative .number {color:#f14c31;}

.container.report .report .body .contents .today-summary .student-list .btn {
	cursor: pointer;
	width: 640px;
	margin: 10px auto 0 auto;
	padding: 10px 10px 0 10px;
}

.container.report .report .body .contents .today-summary .student-list .list {
	display: none;
	width: 640px;
	margin: 10px auto;
}

.container.report .report .body .contents .today-summary .student-list.open .list {
	display: inline-block
}

.container.report .report .body .contents .today-summary .student-list div:hover.btn {
	font-weight: bold;
}

.container.report .report .body .contents .today-summary .student-list.open .btn {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 2px solid #e0e0e0;
}

.container.report .report .body .contents .today-summary .student-list .btn span.ico {
	display: inline-block;
	width: 8px;
    height: 6px;
    background: url(/assets/img/sp/sp_detail_report.png?v=1661943444) -130px -110px no-repeat;
    margin-left: 5px;
    margin-right: 0;
}

.container.report .report .body .contents .today-summary .student-list.open .btn span.ico { background-position: -160px -110px; }

.container.report .report .body .contents .today-summary .student-list .list .positive, .container.report .report .body .contents .today-summary .student-list .list .no-positive {
	float: left;
	width: 320px;
	text-align: left
}

.container.report .report .body .contents .today-summary .student-list .list .section {width:60px;float:left;margin:0;}
.container.report .report .body .contents .today-summary .student-list .list .ico {width:52px;height:60px;margin-right:8px;display:inline-block;vertical-align:top;}
.container.report .report .body .contents .today-summary .student-list .list .positive .ico {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -120px -70px no-repeat;}
.container.report .report .body .contents .today-summary .student-list .list .no-positive .ico {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) 0 -60px no-repeat;}
.container.report .report .body .contents .today-summary .student-list .list .title {font-size:13px;font-weight:bold;color:#464646;}

.container.report .report .body .contents .today-summary .student-list .list ul {float:left;display:inline-block;width:250px;list-style:none;margin-top:10px;padding:0;line-height:24px;}
.container.report .report .body .contents .today-summary .student-list .list ul li {
	float: left;
	font-size: 12px;
	font-weight: normal;
	margin: 2px 5px;
	background: #f0eee4;
	padding: 0px 5px;
	border-radius: 4px;
}

.container.report .report .body .contents .today-summary .student-list .list ul li a {cursor:pointer;}
.container.report .report .body .contents .today-summary .student-list .list ul li a:hover {text-decoration:underline;color:#158f71;}

.container.report .report .body .contents .history-summary {
	width: 750px;
	margin: 10px auto;
	padding: 10px;
	letter-spacing: -0.02em;
}

.container.report .report .body .contents .history-summary .yesterday, .container.report .report .body .contents .history-summary .today-lastweek {
	display: inline-block;

	margin: 0 10px 10px 10px;
	float: left;
}

.container.report .report .body .contents .history-summary .yesterday {	width: 330px; }
.container.report .report .body .contents .history-summary .today-lastweek { width: 380px; }

.container.report .report .body .contents .history-summary ul {list-style:none;padding-left:0;}
.container.report .report .body .contents .history-summary ul li {float:left;line-height:30px;margin:0 5px;}

.container.report .report .body .contents .history-summary .title {font-size:15px;font-weight:bold;color:#464646;}
.container.report .report .body .contents .history-summary .score {width:130px;text-align:center;line-height:24px;}

.container.report .report .body .contents .history-summary .score .percent {float:left;display:inline-block;width:26px;height:30px;}
.container.report .report .body .contents .history-summary .score .p0 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -300px -70px no-repeat}

.container.report .report .body .contents .history-summary .score.grade0 .p25 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -150px -280px no-repeat}
.container.report .report .body .contents .history-summary .score.grade0 .p50 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -180px -280px no-repeat}
.container.report .report .body .contents .history-summary .score.grade0 .p75 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -210px -280px no-repeat}
.container.report .report .body .contents .history-summary .score.grade0 .p100 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -240px -280px no-repeat}

.container.report .report .body .contents .history-summary .score.grade1 .p25 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -330px -230px no-repeat}
.container.report .report .body .contents .history-summary .score.grade1 .p50 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -300px -270px no-repeat}
.container.report .report .body .contents .history-summary .score.grade1 .p75 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -330px -270px no-repeat}
.container.report .report .body .contents .history-summary .score.grade1 .p100 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -120px -280px no-repeat}

.container.report .report .body .contents .history-summary .score.grade2 .p25 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -270px -280px no-repeat}
.container.report .report .body .contents .history-summary .score.grade2 .p50 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) 0 -340px no-repeat}
.container.report .report .body .contents .history-summary .score.grade2 .p75 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -300px -310px no-repeat}
.container.report .report .body .contents .history-summary .score.grade2 .p100 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -330px -310px no-repeat}

.container.report .report .body .contents .history-summary .score.grade3 .p25 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -330px -150px no-repeat}
.container.report .report .body .contents .history-summary .score.grade3 .p50 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -300px -190px no-repeat}
.container.report .report .body .contents .history-summary .score.grade3 .p75 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -330px -190px no-repeat}
.container.report .report .body .contents .history-summary .score.grade3 .p100 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -300px -230px no-repeat}

.container.report .report .body .contents .history-summary .score.grade4 .p25 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -330px -70px no-repeat}
.container.report .report .body .contents .history-summary .score.grade4 .p50 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -300px -110px no-repeat}
.container.report .report .body .contents .history-summary .score.grade4 .p75 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -330px -110px no-repeat}
.container.report .report .body .contents .history-summary .score.grade4 .p100 {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -300px -150px no-repeat}

.container.report .report .body .contents .history-summary .score .text {font-weight:bold;margin:0 5px;}

.container.report .report .body .contents .history-summary .score-board {line-height:24px;margin-top:3px;}
.container.report .report .body .contents .history-summary .score-board .ico {float:left;display:block;width:24px;height:24px;margin-right:5px;}
.container.report .report .body .contents .history-summary .score-board.positive .ico {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -150px -320px no-repeat;}
.container.report .report .body .contents .history-summary .score-board.negative .ico {background:url(/assets/img/sp/sp_report_today.png?v=1661943444) -120px -320px no-repeat;}

.container.report .report .body .contents .history-summary .score-board .number {font-weight:bold;font-size:13px;font-family:arial;}
.container.report .report .body .contents .history-summary .score-board.positive .number {color:#1870c8;}
.container.report .report .body .contents .history-summary .score-board.negative .number {color:#f14c31;}

.container.report .report .panel {
	float: left;
	width: 268px;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	margin-left: 20px;
	text-align: right;
}

.container.report .report .panel .accounts-status {
	cursor: pointer;
	display: block;
	width: 266px;
	border-radius: 6px;
	margin-bottom: 28px;
	color: #777;
	text-align: center;
	line-height: 18px;
}

.container.report .report .panel .accounts-status .title {
	font-size: 12px;
	margin: 10px 10px 0 0;
	text-align: right;
}

.container.report .report .panel .accounts-status .menu { text-align: center; }
.container.report .report .panel .accounts-status .item { display: inline-block; }

.container.report .report .panel .accounts-status .circles-wrp {
	position: relative;
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 20px 15px 10px 15px;
	background: #fff;
	border-radius: 100px;
}

.container.report .report .panel .accounts-status .circles-text {
	position: absolute;
	top: 0px;
	left: 0px;
	text-align: center;
	width: 100%;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: -0.01em;
	font-weight: bold;
	color: #000;
	margin-top: 34px;
}

.container.report .report .panel .accounts-status .circles-text span.percentage {
	display: block;
	color: #de6517;
	font-family: arial;
	font-size: 12px;
	letter-spacing: 0;
	font-weight: normal;
}

.container.report .report .panel .accounts-status a.btn-go-account-info {
	display: inline-block;
	line-height: 12px;
	padding: 2px;
	border-bottom: 1px solid #7d563d;
	color: #7d563d;
	font-size: 12px;
}

.container.report .report .panel .accounts-status:hover a.btn-go-account-info { background: #ffde38; border-color: #ffde38; }

.container.report .report .panel p { text-align: right; }
.container.report .report .panel p.sorting-option { margin: 3px 0 10px 0; font-size: 11px; text-align: left; }

.container.report .report .panel select {
	cursor: pointer;
	width: 260px;
	height: 24px;
	line-height: 24px;
	padding: 2px;
	margin-left: 6px;
	border-radius: 4px;
	border: 1px solid #ddd9c5;
	color: #555;
}

.container.report .report .panel input[type="checkbox"] {
	margin-right: 3px;
	vertical-align: middle;
}

.container.report .report .panel dl {
	cursor: pointer;
	position: relative;
	display: inline-block;
	line-height: 20px;
	background: #fff;
	margin-top: -2px;
	padding: 3px 1px 2px 1px;
	border-radius: 3px;
}

.container.report .report .panel dt.status {
	float: left;
	width: 34px;
	text-align: left;
}

.container.report .report .panel dt.status span.ico { display: inline-block; width: 13px; height: 12px; margin: 0 2px 2px 2px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) no-repeat; vertical-align: middle; }
.container.report .report .panel dt.status span.ico.student { background-position: -390px -410px; }
.container.report .report .panel dt.status span.ico.parents { background-position: -350px -410px; }
.container.report .report .panel dt.status span.ico.student.connected { background-position: -410px -410px; }
.container.report .report .panel dt.status span.ico.parents.connected { background-position: -370px -410px; }

.container.report .report .panel dt.name {
	float: left;
	width: 170px;
	text-align: left;
	padding-left: 5px;
}

.container.report .report .panel dd {
	float: left;
	display: inline-block;
	width: 37px;
	height: 17px;
	padding: 0 5px 0 0;
	margin: 0 7px 0 0;
	color: #7f4500;
	font-size: 11px;
	font-family: 'Open Sans', Helvetica, Arial, tahoma, verdana, arial, sans-serif;
	text-align: right;
}

.container.report .report .panel dl.total {
	line-height: 26px;
	padding: 0;
	background: #f0eee4;
	border-radius: 5px;
	font-weight: normal;
	text-align: left;
}

.container.report .report .panel dl.total.selected,
.container.report .report .panel dl.selected { background: #ffde38; font-weight: bold; }
.container.report .report .panel dl.selected:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 237, 56, 0);
    border-right-color: #ffde38;
    border-width: 6px;
    margin-top: -6px;
}

.container.report .report .panel dl.disabled { color: #ca9; }
.container.report .report .panel dl.disabled dt { font-weight: normal; }

.container.report .report .panel dl:hover,
.container.report .report .panel dl:hover.selected { background: #fff150; }
.container.report .report .panel dl:hover.selected:before {
    border-color: rgba(255, 241, 80, 0);
    border-right-color: #fff150;
}

.container.report .report .panel dl:hover.disabled { background: #f0eee4; }
.container.report .report .panel dl:hover.disabled:before {
    border-color: rgba(240, 238, 228, 0);
    border-right-color: #f0eee4;
}

.container.report .report .panel dl:hover dt.status span.ico,
.container.report .report .panel dl.selected dt.status span.ico {
	opacity: 0.5;
	-webkit-filter: brightness(0.5);
	-moz-filter: brightness(0.5);
	-ms-filter: brightness(0.5);
	-o-filter: brightness(0.5);
	filter: brightness(0.5);
}

.container.report .report .panel dl:hover dt.status span.ico.connected,
.container.report .report .panel dl.selected dt.status span.ico.connected {
	opacity: 1.0;
	-webkit-filter: none;
	-moz-filter: none;
	-ms-filter: none;
	-o-filter: none;
	filter: none;
}

.container.report .report .panel dl.total dt {
	float: left;
	width: 187px;
	line-height: 32px;
	padding-left: 12px;
	color: #000;
	font-size: 14px;
}

.container.report .report .panel dl.total dd {
	float: left;
	width: 55px;
	line-height: 32px;
	padding-right: 5px;
	color: #000;
}

.container.report .report .panel p.btn-write a.btn-write-messages {
	cursor: pointer;
	line-height: 28px;
	margin-right: 5px;
	background: transparent;
	border-bottom: 1px solid #888;
	color: #888;
}

.container.report .report .panel p.btn-write a.btn-write-messages:hover { color: #333; }

a.btn-download-parents-code,
a.btn-print-detail-report,
a.btn-export-detail-report,
a.btn-write-school-newsletter {
	cursor: pointer;
	position: relative;
	display: inline-block;
	height: 30px;
	line-height: 30px;
	margin: 5px 3px;
	padding: 2px 10px;
	background: #ffde38;
	border-radius: 5px;
	color: #7d563d;
	font-size: 13px;
	text-align: center;
	vertical-align: top;
}

a.btn-apply-wow-card-from-parent-wow {
	cursor: pointer;
	display: block;
	height: 24px;
	line-height: 24px;
	padding: 2px 10px;
	border-radius: 5px;
	text-align: center;
	color: #7d563d;
	background: #ffde38;
	font-size: 12px;
	font-weight: normal;
}

a.btn-write-school-newsletter {
	display: block;
	width: 578px;
	height: 40px;
	line-height: 40px;
	margin: 15px 0;
	padding: 0;
	font-size: 15px;
}

a.btn-give-wow-together {
	cursor: pointer;
	display: inline-block;
	width: 140px;
	height: 32px;
	line-height: 32px;
	margin-top: 12px;
	padding: 0;
	background: #ffde38;
	border-radius: 5px;
	color: #7d563d;
	font-size: 13px;
	text-align: center;
	vertical-align: top;
}

a.btn-ok {
	cursor: pointer;
	display: block;
	height: 54px;
	line-height: 54px;
	padding: 0;
	background: #ffde38;
	color: #7d563d;
	font-size: 15px;
	text-align: center;
	vertical-align: top;
}

a:hover.btn-ok,
a:hover.btn-download-parents-code,
a:hover.btn-print-detail-report,
a:hover.btn-write-school-newsletter,
a:hover.btn-give-wow-together,
a:hover.btn-apply-wow-card-from-parent-wow { background: #fff150; }

a:active.btn-ok,
a:active.btn-download-parents-code,
a:active.btn-print-detail-report,
a:active.btn-write-school-newsletter,
a:active.btn-give-wow-together,
a:active.btn-apply-wow-card-from-parent-wow { background: #ffce38; }

a.btn-download-history-excel {cursor:pointer;display:inline-block;padding:0 20px;position:relative;width:190px;height:32px;line-height:32px;vertical-align:top;float:right;margin-bottom:2px;background:#fff150;border-radius:5px;border-top:2px solid #f0eee4;border-bottom:3px solid #fdda19;font-size:15px;text-align:center;color:#7d563d;-webkit-transition:border .1s ease-in-out;-moz-transition:border .1s ease-in-out;-ms-transition:border .1s ease-in-out;-o-transition:border .1s ease-in-out;transition:border .1s ease-in-out;}
a.btn-go-to-download-history-excel {cursor:pointer;display:inline-block;margin-left:5px;height:24px;line-height:24px;vertical-align:middle;padding:2px 10px;border-radius:5px;border-top:1px solid #fff;border-bottom:2px solid #fdda19;text-align:center;color:#7d563d;background:#fff150;font-size:12px;font-weight:normal;-webkit-transition:border .1s ease-in-out;-moz-transition:border .1s ease-in-out;-ms-transition:border .1s ease-in-out;-o-transition:border .1s ease-in-out;transition:border .1s ease-in-out;}
a.btn-open-class-today-details {cursor:pointer;display:inline-block;min-width: 280px;height:24px;line-height:24px;vertical-align:middle;padding:2px 10px;border-radius:5px;border-top:1px solid #fff;border-bottom:2px solid #fdda19;text-align:center;color:#7d563d;background:#fff150;font-size:12px;font-weight:normal;-webkit-transition:border .1s ease-in-out;-moz-transition:border .1s ease-in-out;-ms-transition:border .1s ease-in-out;-o-transition:border .1s ease-in-out;transition:border .1s ease-in-out;}
a.btn-share-class {cursor:pointer;display:inline-block;margin-left:5px;height:24px;line-height:24px;vertical-align:middle;padding:2px 10px;border-radius:5px;border-top:1px solid #f0eee4;border-bottom:2px solid #fdda19;text-align:center;color:#7d563d;background:#fff150;font-size:12px;font-weight:normal;-webkit-transition:border .1s ease-in-out;-moz-transition:border .1s ease-in-out;-ms-transition:border .1s ease-in-out;-o-transition:border .1s ease-in-out;transition:border .1s ease-in-out;}
a.btn-share-class.disabled {cursor:default;border-bottom-color:#bbb;color:#333;background:#ccc;}
a.btn-send {
	cursor: pointer;
	display: block;
	height: 54px;
	line-height: 54px;
	text-align: center;
	color: #7d563d;
	background: #ffce38;
	font-size: 15px;
}

a.btn-setting-letter {cursor:pointer;display:inline-block;height:24px;line-height:24px;margin-top:10px;padding:2px 10px;border-radius:5px;border-top:3px solid #fff;border-bottom:0px solid #fdda19;text-align:center;color:#7d563d;background:#fff150;font-size:14px;font-weight:bold;}

a:hover.btn-download-history-excel {border-top-width:0px;border-bottom-width:5px;}
a:hover.btn-go-to-download-history-excel {border-top-width:0px;border-bottom-width:3px;}
a:hover.btn-apply-wow-card-from-parent-wow {border-top-width:0px;border-bottom-width:3px;}
a:hover.btn-send { background: #ffde38; }
a:hover.btn-ok {border-top-width:0px;border-bottom-width:3px;}
a:hover.btn-open-class-today-details {border-top-width:0px;border-bottom-width:3px;}
a:hover.btn-share-class {border-top-width:0px;border-bottom-width:3px;}
a:hover.btn-setting-letter {border-top-width:0px;border-bottom-width:3px;}

a:active.btn-download-history-excel {border-top-width:4px;border-bottom-width:1px;}
a:active.btn-go-to-download-history-excel {border-top-width:3px;border-bottom-width:0px;}
a:active.btn-apply-wow-card-from-parent-wow {border-top-width:2px;border-bottom-width:1px;}
a:active.btn-send { background: #fff150; }
a:active.btn-ok {border-top-width:2px;border-bottom-width:1px;}
a:active.btn-open-class-today-details {border-top-width:3px;border-bottom-width:0px;}
a:active.btn-share-class {border-top-width:3px;border-bottom-width:0px;}
a:active.btn-setting-letter {border-top-width:2px;border-bottom-width:1px;}

a.btn-delete-message span.ico {cursor:pointer;display:inline-block;width:16px;height:16px;background:url(/assets/img/sp/sp_layout.png?v=1661943444) -180px -270px no-repeat;}
a.btn-modify-message span.ico {cursor:pointer;display:inline-block;width:16px;height:16px;background:url(/assets/img/sp/sp_layout.png?v=1661943444) -60px -280px no-repeat;}

a.btn-history-more {cursor:pointer;display:block;height:32px;line-height:32px;background:#eee;text-align: center;border-radius:4px;}
a:hover.btn-history-more {background: #ddd;}

.btn-check-parents-registration {
	width: 440px;
	margin: 0 auto;
}

.btn-check-parents-registration p {
	display: inline-block;
	border-radius: 8px;
	width: 180px;
	margin: 8px;
	padding: 8px;
	background: #f7f5ee;
	text-align: center;
	font-weight: bold;
}

.btn-check-parents-registration span.section {
	display: inline-block;
	width: 50px;
	color: #555;
}

.btn-check-parents-registration span.number {
	display: inline-block;
	width: 50px;
	color: #ff5f5f;
}

span.img-archive {
	position: relative;
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: 0 7px 3px 0;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -250px -140px no-repeat;
	opacity: 0.6;
	vertical-align: middle;
	overflow: hidden;
}

.container .setup .body-section div:hover.label span.img-archive { opacity: 1.0; }

@-webkit-keyframes newComment {
	0% { -webkit-transform: rotate(0); top: -5px;}
	3%, 9% { -webkit-transform: rotate(15deg); top: -3px;}
	6%, 12% { -webkit-transform: rotate(-15deg); top: -7px;}
	15%, 100% { -webkit-transform: rotate(0); top: -5px;}
}

@keyframes newComment {
	0% { transform: rotate(0); top: -5px;}
	3%, 9% { transform: rotate(15deg); top: -3px;}
	6%, 12% { transform: rotate(-15deg); top: -7px;}
	15%, 100% { transform: rotate(0); top: -5px;}
}

@-ms-keyframes newComment {
	0% { -ms-transform: rotate(0); top: -5px;}
	3%, 9% { -ms-transform: rotate(15deg); top: -3px;}
	6%, 12% { -ms-transform: rotate(-15deg); top: -7px;}
	15%, 100% { -ms-transform: rotate(0); top: -5px;}
}

.new-comment {
	-webkit-animation-name: newComment;
	-webkit-animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;
	animation-name: newComment;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

.img-new-comment {display:inline-block;overflow:hidden;position:absolute;width:28px;height:28px;background:url(/assets/img/sp/sp_report.png?v=1661943444) -920px -80px no-repeat;margin-left:5px}

.login-container .bg {
	position: relative;
	width: 960px;
	height: 2746px;
}

.login-container .bg .video {
	position: absolute;
	top: 193px;
	left: 50px;
	width: 560px;
	height: 314px;
	overflow: hidden;
}

.login-container .bg .sign-up-links {
	position: absolute;
	top: 60px;
	left: 636px;
	width: 272px;
	line-height: 0;
}

.login-container .bg .sign-up-links a {
	cursor: pointer;
	display: inline-block;
	width: 270px;
	margin-bottom: 20px;
}

.login-container .bg .sign-up-links a.teacher {
	height: 111px;
}

.login-container .bg .sign-up-links a.parent {
	height: 90px;
	margin-top: 20px;
}

.login-container .bg .sign-up-links a.student {
	height: 90px;
	margin-top: 20px;
}

.login-container .bg .sign-up-links a.mobile-app-for-teacher {
	width: 136px;
	height: 48px;
	margin-top: 18px;
	float: left;
}

.login-container .bg .bottom-links {
	position: absolute;
	top: 2515px;
	left: 57px;
}

.login-container .bg .bottom-links a {
	cursor: pointer;
	display: inline-block;
	position: absolute;
}

.login-container .bg .bottom-links a.toothless-tiger {
	width: 200px;
	height: 60px;
	top: 68px;
	left: 25px;
}

.login-container .bg .bottom-links a.class123-goes {
	width: 200px;
	height: 60px;
	top: 138px;
	left: 25px;
}

.login-container .bg .bottom-links a.press {
	width: 230px;
	height: 200px;
	top: 16px;
	left: 275px;
}

.login-container .bg .bottom-links a.facebook {
	width: 135px;
	height: 60px;
	top: 70px;
	left: 700px;
}

.login-container .bg .bottom-links a.download {
	width: 135px;
	height: 200px;
	top: 16px;
	left: 535px;
}

.login-container .bg .bottom-links a.blog {
	width: 135px;
	height: 60px;
	top: 148px;
	left: 700px;
}

.login-container .bg .story {
	position: absolute;
	top: 540px;
}

.service-footer {
	position: relative;
	display: none;
	width: 100%;
	height: 50px;
	background: #fff;
	text-align: center;
	padding: 10px 0;
	min-width: 960px;
}

.service-footer.intro {
	display: inline-block;
	background: #333;
}

body.guide .service-footer,
body.home .service-footer {
	display: block;
	position: fixed;
	bottom: 0;
	z-index: 9;
}

.service-footer a {
	color: #fff;
	font-weight: normal;
}

.service-footer p {
	color: #567;
	line-height: 20px;
}

.service-footer .company-info {
	position: absolute;
	width: 720px;
	left: 50%;
	top: 15px;
	margin-left: -270px;
	line-height: 20px;
	text-align: left;
}

.service-footer .company-info .company { width: 400px; text-align: left; }
.service-footer .company-info .company a { margin: 0 40px 0 1px; color: #999; }

.service-footer .company-info .copyright { width: 400px; color: #c6c6c6; line-height: 16px; margin: 3px 0; text-align: left; }

.service-footer .company-info .guide-contents {
	position: absolute;
	display: none;
	top: 7px;
	right: 0;
	font-size: 13px;
}

.service-footer .company-info .guide-contents a.btn-support {
	cursor: pointer;
	line-height: 28px;
	color: #464646;
}

.service-footer .company-info .guide-contents a.btn-support span.ico {
	display: inline-block;
	width: 28px;
	height: 28px;
	margin-left: 10px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -90px 0 no-repeat;
}

.service-footer .company-info .guide-contents.open a.btn-support span.ico ,
.service-footer .company-info .guide-contents a.btn-support:hover span.ico  {
	background-position: -120px 0;
}

.service-footer .company-info .guide-contents ul {
	position: absolute;
	display: none;
	bottom: 30px;
	right: 0;
	min-width: 200px;
	padding: 0;
	list-style: none;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 4px 4px 0 rgba(0, 0, 0, 0.05);
}

.service-footer .company-info .guide-contents.open ul { display: block; }

.service-footer .company-info .guide-contents ul li {
	cursor: pointer;
	height: 36px;
	line-height: 36px;
	background: #fff;
}

.service-footer .company-info .guide-contents ul li:hover { background: #fff69c; }
.service-footer .company-info .guide-contents ul li a {
	display: block;
	width: 200px;
	height: 36px;
	padding: 0 15px;
	color: #464646;
}

.service-footer.intro .links ul li.company a { color: #888; }
.service-footer.intro .links ul li.contents { display: none; }

.service-footer a span.section { color: #ccc; margin-right: 5px; }

.service-footer .lang {
 	position: absolute;
 	left: 50%;
 	top: 14px;
 	line-height: 34px;
 	margin-left: -450px;
 	padding: 3px;
}

.service-footer .lang p {
	color: #669cd3;
 	text-align: left;
 	line-height: 12px;
}

.service-footer .lang select {
	color: #000;
	font-size: 12px;
	height: 24px;
	border: 1px solid #fff;
	width: 120px;
	box-shadow: none;
	background: #f1f0eb;
	padding: 0;
	margin-bottom: 5px;
}

body.guide .service-footer .company-info .guide-contents,
body.home .service-footer .company-info .guide-contents { display: block; }
body.guide .service-footer .lang p,
body.home .service-footer .lang p { color: #999; padding-left: 2px; }

@-webkit-keyframes turnoffGnb {
	0% { background: #fff150; }
	100% { background: #222; }
}

@keyframes turnoffGnb {
	0% { background: #fff150; }
	100% { background: #222; }
}

@-webkit-keyframes turnoffBody {
	0% { background: #fff; }
	100% { background: #000; }
}

@keyframes turnoffBody {
	0% { background: #fff; }
	100% { background: #000; }
}

body.boarding {
	background: #000;
	-webkit-animation-name: turnoffBody;
	-webkit-animation-duration: .5s;
	-webkit-animation-iteration-count: 1;
	animation-name: turnoffBody;
    animation-duration: .5s;
    animation-iteration-count: 1;
}

.boarding .gnb-bg {
	background: #000;
	-webkit-animation-name: turnoffGnb;
	-webkit-animation-duration: .5s;
	-webkit-animation-iteration-count: 1;
	animation-name: turnoffGnb;
    animation-duration: .5s;
    animation-iteration-count: 1;
}

.boarding .logo, .boarding .open-menu-profile {
	display: none;
}

.boarding .service-footer {
	margin-top: 80px;
	height: 0px;
	padding: 0px;
	overflow-y: hidden;
}

.boarding .container {
	width: 100%;
}

.boarding .gnb {
	width: 100%;
	text-align: center;
}

/* quick-guide@home */

.container.home .quick-guide-open {
	position: absolute;
	top: 72px;
	left: 15px;
}

.container .quick-guide {
	position: fixed;
	top: 50px;
	left: 50%;
	margin-left: -390px;
	width: 780px;
	height: 550px;
	background: #fff;
	border: 1px solid #333;
	border-radius: 5px;
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
	z-index: 30;
}

.container .quick-guide .close {
	position: absolute;
	top: -32px;
	right: -40px;
	background: #333\9;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 14px;
}

.container .quick-guide .body {
	width: 780px;
	height: 550px;
	position: absolute;
	top: 0;
	left: 0;
}

.container .quick-guide .body .download {
	position: absolute;
	display: block;
	width: 780px;
	height: 550px;
	top: 50%;
	left: 50%;
	background: rgba(0, 0, 0, 0);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.container .quick-guide .body .download a {
	cursor: pointer;
	position: absolute;
	display: none;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: #b68143;
	width: 180px;
	height: 40px;
	line-height: 40px;
	border-radius: 40px;
	background: #333\9;
	background: rgba(0, 0, 0, 0.7);
	text-align: center;
	font-size: 16px;
	font-weight: bold;
    -webkit-transition: background .1s ease-in-out;
    -moz-transition: background .1s ease-in-out;
    -ms-transition: background .1s ease-in-out;
    -o-transition: background .1s ease-in-out;
    transition: background .1s ease-in-out;
}

.container .quick-guide .body div:hover.download a { display: block; }
.container .quick-guide .body .download a span.ico { display: inline-block; width: 14px; height: 18px; background: url(/assets/img/sp/sp_layout.png?v=1661943444) -40px -250px no-repeat; }
.container .quick-guide .body .download a:hover { color: #fff; background: #111\9; background: rgba(0, 0, 0, 0.9); }
.container .quick-guide .body .download a:hover span.ico { -webkit-filter: brightness(10); -ms-filter: brightness(10); filter: brightness(10); }

.container .quick-guide .body a.btn-download-ios { cursor: pointer; display: inline-block; width: 124px; height: 40px; margin: 0 15px 0 0; background: url(/assets/img/sp/sp_login.png?v=1661943444) -90px 0 no-repeat; }
.container .quick-guide .body a.btn-download-android { cursor: pointer; display: inline-block; width: 124px; height: 40px; margin: 0 15px 0 0; background: url(/assets/img/sp/sp_login.png?v=1661943444) -90px -50px no-repeat; }

.container .quick-guide .footer {
}

.container .quick-guide .footer a {
	position: absolute;
	top: 500px;
}

.container .quick-guide .footer a.btn-prev-page {cursor:pointer;top:259px;left:-50px;display:block;width:32px;height:32px;background:url(/assets/img/sp/sp_layout.png?v=1661943444) -300px -100px no-repeat;}
.container .quick-guide .footer a:hover.btn-prev-page {background-position:-340px -100px;}
.container .quick-guide .footer a.btn-next-page {cursor:pointer;top:259px;right:-50px;display:block;width:32px;height:32px;background:url(/assets/img/sp/sp_layout.png?v=1661943444) -280px -140px no-repeat;}
.container .quick-guide .footer a:hover.btn-next-page {background-position:-320px -140px;}
.container .quick-guide a.btn-exit {cursor:pointer;right:15px;display:block;width:28px;height:28px;background:url(/assets/img/sp/sp_layout.png?v=1661943444) -200px -170px no-repeat;}
.container .quick-guide a:hover.btn-exit { background-position: -250px -90px; }

.container .quick-guide.download-pdf {
	width: 670px;
	height: 380px;
	margin-left: -350px;
	padding: 15px;
}

.container .quick-guide.download-pdf.teacher-seminar { padding-bottom: 180px; }

.container .quick-guide.download-pdf .header {
	color: #27bc97;
	margin-bottom: 5px;
	border-bottom: 1px solid #ccc;
}

.container .quick-guide.download-pdf .header .title {
	font-size: 13px;
	padding: 8px;
	font-weight: bold;
}

.container .quick-guide.download-pdf .body {
	width: auto;
	height: auto;
	position: relative;
	padding: 20px;
}

.container .quick-guide.download-pdf .body .group {
	width: 100%;
	margin-bottom: 40px;
}

.container .quick-guide.download-pdf .body .group p {
	font-size: 14px;
	line-height: 48px;
}

.container .quick-guide.download-pdf .body .group span.title-icon {
	display: inline-block;
	width: 48px;
	height: 48px;
	margin-right: 10px;
	vertical-align: middle;
}

.container .quick-guide.download-pdf .body .group span.text {
	display: inline-block;
	width: 400px;
}

.container .quick-guide.download-pdf .body .group.teacher span.title-icon { background: url(/assets/img/ico/img-icon-teacher-48.png?v=1661943444) no-repeat; }
.container .quick-guide.download-pdf .body .group.student span.title-icon { background: url(/assets/img/ico/img-icon-student-48.png?v=1661943444) no-repeat; }
.container .quick-guide.download-pdf .body .group.parents span.title-icon { background: url(/assets/img/ico/img-icon-parents-48.png?v=1661943444) no-repeat; }

.container .quick-guide.download-pdf .body .group a {
	display: inline-block;
	width: 124px;
	line-height: 14px;
	padding: 10px 20px;
	border-radius: 4px;
	color: #fff;
	font-size: 14px;
	text-align: center;
}

.container .quick-guide.download-pdf .body .group.teacher a { background: #ffde38; color: #7f4500; }
.container .quick-guide.download-pdf .body .group.student a { background: #2ebca0; }
.container .quick-guide.download-pdf .body .group.parents a { background: #ff4a4a; }

.container .quick-guide.download-pdf .body .group.teacher a.support-teacher-seminar {
	width: 634px;
	height: 80px;
	padding: 0;
	background: url(/assets/img/event/img-banner-program01.png?v=1661943444) 0 0 no-repeat;
}

.container .quick-guide.download-app {
	width: 670px;
	height: 123px;
	margin-left: -350px;
	padding: 15px;
}

.container .quick-guide.download-app .header {
	color: #27bc97;
	margin-bottom: 5px;
	border-bottom: 1px solid #ccc;
}

.container .quick-guide.download-app .header .title {
	font-size: 13px;
	padding: 8px;
	font-weight: bold;
}

.container .quick-guide.download-app .body {
	width: auto;
	height: auto;
	position: relative;
	padding: 20px;
}

.container .quick-guide.download-app .body .group {
	width: 100%;
	margin-bottom: 40px;
}

.container .quick-guide.download-app .body .group p {
	font-size: 14px;
	line-height: 48px;
}

.container .quick-guide.download-app .body .group span.title-icon {
	display: inline-block;
	width: 48px;
	height: 48px;
	margin-right: 10px;
	vertical-align: middle;
}

.container .quick-guide.download-app .body .group span.text {
	display: inline-block;
	width: 280px;
}

.container .quick-guide.download-app .body .group.teacher span.title-icon { background: url(/assets/img/ico/img-icon-teacher-48.png?v=1661943444) no-repeat; }

.container .quick-guide.download-app .body .group a { border: 1px solid #ccc; border-radius: 6px; vertical-align : top; }

.container.home .event {
	z-index: 15;
}

.container.home .mobile-wrapper .info {
	margin-top: 30px;
	margin-left: 50px;
}

.container.home .mobile-wrapper.parent .info {
	width: 525px;
	height: 500px;
}

.container.home .mobile-wrapper.student .info {
	width: 525px;
	height: 500px;
}

.container.home .mobile-wrapper .info .btn-link-goole-play {
	cursor: pointer;
	position: absolute;
	display: block;
	width: 179px;
	height: 53px;
	top: 361px;
	left: 276px;
}

.container.home .mobile-wrapper .info .btn-link-ios-app-store {
	cursor: pointer;
	position: absolute;
	display: block;
	width: 179px;
	height: 53px;
	top: 361px;
	left: 85px;
}

.container.home .mobile-wrapper .mobile {
	position: absolute;
	top: 10px;
	left: 570px;
	width: 389px;
	height: 583px;
	padding-top: 41px;
	padding-left: 15px;
	background: url(/assets/img/bg/bg-mobile-phone.png?v=1661943444) no-repeat;
}

.container.home .mobile-wrapper .mobile .btn-start-on-pc {
    cursor: pointer;
    display: inline-block;
	position: absolute;
	background: #fff;
	opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	top: 504px;
	left: 65px;
	width: 271px;
	height: 42px;
	z-index: 90;
}

div.placeholder {
    display: none;
    position: absolute;
    top: 5px;
    left: 10px;
    width: 180px;
    line-height: 24px;
    cursor:text;
    text-align: left;
    color: #999;
}

div.password.placeholder {
    width: 130px;
}

div.placeholder.subtitled { left: 155px; }
.comment-form div.placeholder { top: 10px; left: 40px; }

.container .term {
	margin: 20px;
	background: #fff;
	padding: 20px;
	line-height: 20px;
	border: 1px solid #888;
	border-radius: 10px;
}

.container .term h3 {
	margin-left: 10px;
}

.container .term p {
	margin-left: 20px;
}

.container .guide {
	margin: 20px;
	padding: 20px;
	line-height: 24px;
}

.container.home .guide {
	position: absolute;
	top: 0;
	left: 45px;
	z-index: 1000;
}

.container.home .guide a.btn-close {cursor:pointer;display:block;position:absolute;top:40px;right:40px;width:28px;height:28px;background:url(/assets/img/sp/sp_layout.png?v=1661943444) -250px -60px no-repeat;}

.container .guide p { margin: 0 50px; }

.container .guide ol { margin: 0; padding: 40px 0 0 0; }
.container .guide ol li { list-style: none; }
.container .guide ol li.title { font-size: 20px; font-weight: bold; line-height: 27px; margin-bottom: 10px; }

.container .guide ol.section1 { background: #fbf178; border-radius: 30px 30px 0 0; }
.container .guide ol.section2 { background: #eade54; }
.container .guide ol.section3 { background: #fbf178; }
.container .guide ol.section4 { background: #eade54; padding-bottom: 50px; border-radius: 0 0 30px 30px; }

.container .guide ol.section1 li.title { color: #f93348; }
.container .guide ol.section2 li.title { color: #a55e3d; }
.container .guide ol.section3 li.title { color: #00c6a3; }
.container .guide ol.section4 li.title { color: #a68c12; }

.container .guide ol li.title span.icon { display: inline-block; float: left; margin-left: 50px; width: 54px; height: 54px; margin-right: 12px; background-image: url(/assets/img/sp/sp_guide_images.png?v=1661943444); }

.container .guide ol.section1 li.title span.icon { background-position: -80px 0; }
.container .guide ol.section2 li.title span.icon { background-position: 0 -10px; }
.container .guide ol.section3 li.title span.icon { background-position: 0 -70px; }
.container .guide ol.section4 li.title span.icon { background-position: -60px -60px; }

.container .guide ol li.title a.btn-video {
	cursor: pointer;
	position: absolute;
	right: 65px;
	overflow: hidden;
	margin-left: 10px;
	margin-top: -3px;
	padding: 2px 8px;
	width: 74px;
	height: 24px;
	line-height: 24px;
	border-radius: 30px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	color: #fff;
	-webkit-transition: border 0.1s ease-in-out;
	transition: border 0.1s ease-in-out;
}

.container .guide ol.section1 li.title a.btn-video { background: #f93348; border: 2px solid #f93348; }
.container .guide ol.section2 li.title a.btn-video { background: #a55e3d; border: 2px solid #a55e3d; }
.container .guide ol.section3 li.title a.btn-video { background: #00c6a3; border: 2px solid #00c6a3; }
.container .guide ol.section4 li.title a.btn-video { background: #a68c12; border: 2px solid #a68c12; }

.container .guide ol.section1 li.title a:hover.btn-video { background: #fff; color: #f93348; }
.container .guide ol.section2 li.title a:hover.btn-video { background: #fff; color: #a55e3d; }
.container .guide ol.section3 li.title a:hover.btn-video { background: #fff; color: #00c6a3; }
.container .guide ol.section4 li.title a:hover.btn-video { background: #fff; color: #a68c12; }

.container .guide ol li.item { cursor: pointer; }
.container .guide ol li.item:first-child { clear: both; }
.container .guide ol.section1 li.item:nth-child(odd) { background: #fff759; }
.container .guide ol.section2 li.item:nth-child(odd) { background: #f1e668; }
.container .guide ol.section3 li.item:nth-child(odd) { background: #fff759; }
.container .guide ol.section4 li.item:nth-child(odd) { background: #f1e668; }
.container .guide ol li.item p.title { font-size: 18px; font-weight: bold; color: #272727; line-height: 26px; padding: 17px 0; }
.container .guide ol li.item p.title span.icon { cursor: pointer; float: right; margin-top: 10px; width: 12px; height: 8px; background: url(/assets/img/sp/sp_guide_images.png?v=1661943444) -40px 0 no-repeat; }
.container .guide ol li:hover.item p.title span.icon { background-position: -60px 0; }
.container .guide ol li.unfold.item p.title span.icon { background-position: -20px 0; }
.container .guide ol li:hover.unfold.item p.title span.icon { background-position: 0 0; }

.container .guide ol li.item .desc {
	display: block;
	width: 100%;
	height: 0;
	overflow: hidden;
}

.container .guide ol li.unfold.item .desc { height: 100%; padding-bottom: 20px; }
.container .guide ol li.unfold.item .desc.image { height: 320px; }
.container .guide ol li.unfold.item .desc img { height: 200px; margin: 10px 0; border-radius: 20px; }


.container .guide ol li.item .desc p { font-size: 14px; font-weight: normal; color: #272727; }

.login-container .sign-up-form .email-domain-overlay {
    display: none;
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    border-radius: 9px;
    z-index: 30;
    opacity: 0.7;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}

.login-container .sign-up-form .email-domain-select {
    display: none;
    position:absolute;
    top: 95px;
    right: 32px;
    z-index: 31;
}

.popup.old-ie {
	position: absolute;
	left: 75px;
	top: 200px;
	width: 800px;
	height: 250px;
	z-index: 90;
}

.popup.old-ie .btn-download-chrome-for-old-ie { cursor:pointer;display:block;position:absolute;top:127px;left:19px;width:271px;height:104px;background-position:0 -260px;background-repeat:no-repeat;}
.popup.old-ie .btn-download-ie10-for-old-ie { cursor:pointer;display:block;position:absolute;top:127px;left:290px;width:271px;height:104px;background-position:-280px -260px;background-repeat:no-repeat;}
.popup.old-ie .btn-close { cursor:pointer;display:block;position:absolute;top:194px;left:690px;width:271px;height:104px;background-position:-560px -260px;background-repeat:no-repeat;}

.close {
    position: absolute;
    top: -10px;
    right: -10px;
}

.dimmed-for-process {
	z-index: 95;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* IE 8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* IE 7 and olders */
	opacity: 0.8;
	display: none;
}

.api-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 96;
	display: none;
}

.api-loading img {
	-webkit-animation: showLoading 80s linear infinite;
	-moz-animation: showLoading 80s linear infinite;
	-ms-animation: showLoading 80s linear infinite;
	-o-animation: showLoading 80s linear infinite;
	animation: showLoading 80s linear infinite;
}

.processing {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 96;
	width: 120px;
	height: 150px;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	margin-top: -85px;
	background: #000;
	border-radius: 10px;
	padding: 10px;
	display: none;
}

.processing.done {
	background: #fff;
}

.processing .image {
	width: 120px;
	height: 130px;
	background: url(/assets/img/sp/sp_effect_stopwatch_turtle.png?v=1661943444) no-repeat;
	background-position-x: -120px;
	background-position-y: 0;
}

.processing .text {
	width: 120px;
	text-align: center;
	line-height: 20px;
	font-size: 14px;
	font-weight: bold;
	color: #ffd51e;
}

.processing.done .text {
	color: #000;
}

.processing-buttons {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 96;
	width: 120px;
	margin-left: -70px;
	margin-top: -35px;
	display: none;
}

.processing-buttons a {
    cursor: pointer;
	width: 120px;
	height: 20px;
	line-height: 20px;
	display: block;
	padding: 5px 10px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	margin-top: 5px;
}

.processing-buttons a.restart {
	background: #ffd51e;
}

.processing-buttons a.exit {
	background: #ffa51e;
}

#file-download-complete {
    position: fixed;
    display: none;
    left: 80px;
    bottom: 10px;
    opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

#file-download-complete.on {
	display: block;
    opacity: 0.8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

    -webkit-animation-name: file-download-complete-effect;
    -webkit-animation-duration: 0.9s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0.6s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: file-download-complete-effect;
    -moz-animation-duration: 0.9s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-delay: 0.6s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-fill-mode: forwards;

    -ms-animation-name: file-download-complete-effect;
    -ms-animation-duration: 0.9s;
    -ms-animation-timing-function: ease-in-out;
    -ms-animation-delay: 0.6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-fill-mode: forwards;

    -o-animation-name: file-download-complete-effect;
    -o-animation-duration: 0.9s;
    -o-animation-timing-function: ease-in-out;
    -o-animation-delay: 0.6s;
    -o-animation-iteration-count: infinite;
    -o-animation-fill-mode: forwards;

    -webkit-animation-name: file-download-complete-effect;
    -webkit-animation-duration: 0.9s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0.6s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-fill-mode: forwards;

    animation-name: file-download-complete-effect;
    animation-duration: 0.9s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.6s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

@-webkit-keyframes file-download-complete-effect {
    0% { bottom: 10px; }
    50% { bottom: 30px; }
    100% { bottom: 10px; }
}

@-moz-keyframes file-download-complete-effect {
    0% { bottom: 10px; }
    50% { bottom: 30px; }
    100% { bottom: 10px; }
}

@-ms-keyframes file-download-complete-effect {
    0% { bottom: 10px; }
    50% { bottom: 30px; }
    100% { bottom: 10px; }
}

@-o-keyframes file-download-complete-effect {
    0% { bottom: 10px; }
    50% { bottom: 30px; }
    100% { bottom: 10px; }
}

@keyframes file-download-complete-effect {
    0% { bottom: 10px; }
    50% { bottom: 30px; }
    100% { bottom: 10px; }
}

.login-container .gnb {
	height: 60px;
	background: #dcebc2;
}

.login-container .top-animation {
	height: 395px;
	background: url(/assets/img/home/img-main-board-pattern.jpg?v=1661943444) repeat-x;
}

.login-container .center-area {
	position: relative;
	width: 960px;
	margin: 0 auto;
}

.login-container .top-animation .center-area .left-side {
	position: absolute;
	top: 90px;
	left: -325px;
	width: 325px;
	height: 214px;
	background: url(/assets/img/home/img-main-board-drawing01.png?v=1661943444);
}

.login-container .top-animation .center-area .right-side {
	position: absolute;
	top: 90px;
	right: -324px;
	width: 324px;
	height: 214px;
	background: url(/assets/img/home/img-main-board-drawing02.png?v=1661943444);
}

.login-container .top-animation .center-area .animation {
	position: absolute;
	top: 45px;
	left: 5px;
	width: 500px;
	height: 284px;
	z-index: 1;
}

.login-container.screen2 .top-animation .center-area .animation { background: url(/assets/img/home/img-tv-animation02.png?v=1661943444); }
.login-container.screen3 .top-animation .center-area .animation { background: url(/assets/img/home/img-tv-animation03.png?v=1661943444); }
.login-container.screen4 .top-animation .center-area .animation { background: url(/assets/img/quiz/december/img-tv-animation.png?v=1661943444); }

@-webkit-keyframes animateScreen1 {
   0% { background-position-y: 0px; }
   100% { background-position-y: -568px; }
}

@-moz-keyframes animateScreen1 {
   0% { background-position-y: 0px; }
   100% { background-position-y: -568px; }
}

@-ms-keyframes animateScreen1 {
   0% { background-position-y: 0px; }
   100% { background-position-y: -568px; }
}

@keyframes animateScreen1 {
   0% { background-position-y: 0px; }
   100% { background-position-y: -568px; }
}

.login-container.screen1 .top-animation .center-area .animation {
	background: url(/assets/img/home/img-tv-animation01.png?v=1661943444) 0 0 no-repeat;
	-webkit-animation: animateScreen1 .5s steps(2) infinite;
	-moz-animation: animateScreen1 .5s steps(2) infinite;
	-ms-animation: animateScreen1 .5s steps(2) infinite;
	-o-animation: animateScreen1 .5s steps(2) infinite;
	animation: animateScreen1 .5s steps(2) infinite;
}

.login-container .top-animation .center-area .frame {
	position: absolute;
	top: 45px;
	left: 5px;
	width: 500px;
	height: 284px;
	background: url(/assets/img/home/img-tv-frame.png?v=1661943444);
	z-index: 2;
}

.login-container .top-animation .center-area .text {
	position: absolute;
	top: 60px;
	left: 540px;
	color: #fff;
	font-size: 20px;
	z-index: 1;
}

.login-container .top-animation .center-area .text span.title {
	display: block;
	color: #e5e377;
	letter-spacing: -0.01em;
	font-size: 33px;
	font-weight: bold;
	margin: 2px 0 20px 0px;
}

.login-container .top-animation .center-area .text a.btn-start {
	cursor: pointer;
	position: absolute;
	display: inline-block;
	top: 120px;
	min-width: 200px;
	height: 54px;
	line-height: 54px;
	margin-left: -7px;
	background: #27bc97;
	border-radius: 5px;
	border-bottom: 4px solid #158f71;
	border-top: 3px solid #186748;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: #fff;
	-webkit-transition: border 0.1s ease-in-out;
	-moz-transition: border 0.1s ease-in-out;
	-ms-transition: border 0.1s ease-in-out;
	-o-transition: border 0.1s ease-in-out;
	transition: border 0.1s ease-in-out;
}

.login-container .top-animation .center-area .text a:hover.btn-start { border-bottom-width: 7px; border-top-width: 0px; }
.login-container .top-animation .center-area .text a:active.btn-start { border-bottom-width: 1px; border-top-width: 6px; }

.login-container .top-animation .center-area .teacher-animation {
	position: absolute;
	top: 175px;
	left: 660px;
	width: 276px;
	height: 326px;
	background: url(/assets/img/home/img-main-illust-teacher.png?v=1661943444) no-repeat;
}

.login-container .top-animation .center-area .sign-up-buttons {
	position: absolute;
	top: 242px;
	left: 533px;
	width: 200px;
	z-index: 11;
}

.login-container .top-animation .center-area .sign-up-buttons a.btn-back {
	cursor: pointer;
	position: absolute;
	display: block;
	top: -40px;
	left: 86px;
	width: 28px;
	height: 28px;
	background: url(/assets/img/sp/sp_login.png?v=1661943444) 0 0 no-repeat;
}

.login-container .top-animation .center-area .sign-up-buttons a.btn-back:hover {
	background-position: -30px 0;
}

.login-container .top-animation .center-area .sign-up-buttons button {
	width: 200px;
	height: 34px;
	margin-bottom: 3px;
	border: none;
	border-radius: 5px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
}

.login-container .top-animation .center-area .sign-up-buttons button.btn-sign-up.student { background: #2ebca0; }
.login-container .top-animation .center-area .sign-up-buttons button.btn-sign-up.parent { background: #ff4a4a; }
.login-container .top-animation .center-area .sign-up-buttons button.btn-sign-up.teacher { background: #856343; }
.login-container .top-animation .center-area .sign-up-buttons button.btn-sign-up.oldteacher { background: #856343; }

.login-container .top-animation .center-area .sign-up-buttons button.btn-sign-up.student:hover { background: #3acca8; }
.login-container .top-animation .center-area .sign-up-buttons button.btn-sign-up.parent:hover { background: #ff5b50; }
.login-container .top-animation .center-area .sign-up-buttons button.btn-sign-up.teacher:hover { background: #a57a48; }
.login-container .top-animation .center-area .sign-up-buttons button.btn-sign-up.oldteacher:hover { background: #a57a48; }

.login-container .students-animation {
	height: 480px;
	background: url(/assets/img/home/bg-students.png?v=1661943444) repeat-x;
}

.login-container .students-animation .center-area .students {
	position: absolute;
	top: -20px;
	left: -25px;
	width: 1010px;
	height: 392px;
	background: url(/assets/img/home/img-main-illust-student.png?v=1661943444);
}

.login-container .students-animation .center-area .comment {
	position: absolute;
	opacity: 0;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	min-width: 280px;
	height: 32px;
	line-height: 32px;
	padding: 0 10px;
	border-radius: 32px;
	border: 1px solid #777;
	background: #fff;
	font-size: 14px;
	font-weight: normal;
	font-style: italic;
	letter-spacing: -0.01em;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
	margin-top: 10px;
	-webkit-transition: all .1s ease-out;
	-moz-transition: all .1s ease-out;
	-ms-transition: all .1s ease-out;
	-o-transition: all .1s ease-out;
	transition: all .1s ease-out;
}

.login-container .students-animation .center-area .comment:after {
    left: 50%;
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #fff;
    border-width: 6px;
    margin-bottom: -6px;
}

.login-container .students-animation .center-area .comment:before {
    left: 50%;
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(112, 112, 112, 0);
    border-top-color: #999;
    border-width: 8px;
    margin-bottom: -7px;
    margin-left: -2px;
}

.login-container .students-animation .center-area .comment.left:before,
.login-container .students-animation .center-area .comment.left:after { left: 45px; }

.login-container .students-animation .center-area .comment.right:before,
.login-container .students-animation .center-area .comment.right:after { left: 255px; }

.login-container.screen1 .students-animation .center-area .comment.screen1,
.login-container.screen2 .students-animation .center-area .comment.screen2,
.login-container.screen3 .students-animation .center-area .comment.screen3 {
	opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	margin-top: 0;
}

.login-container.screen1 .students-animation .center-area .comment.screen1.comment1 { top: 60px; left: 5px; }
.login-container.screen1 .students-animation .center-area .comment.screen1.comment2 { top: 95px; left: 385px; }
.login-container.screen1 .students-animation .center-area .comment.screen1.comment3 { top: 0px; left: 540px; }

.login-container.screen2 .students-animation .center-area .comment.screen2.comment1 { top: -65px; left: 65px; }
.login-container.screen2 .students-animation .center-area .comment.screen2.comment2 { top: 90px; left: 260px; }
.login-container.screen2 .students-animation .center-area .comment.screen2.comment3 { top: 130px; left: 610px; }

.login-container.screen3 .students-animation .center-area .comment.screen3.comment1 { top: 55px; left: 100px; }
.login-container.screen3 .students-animation .center-area .comment.screen3.comment2 { top: -55px; left: 345px; }
.login-container.screen3 .students-animation .center-area .comment.screen3.comment3 { top: 115px; left: 490px; }

.login-container .features-animation {
	height: 630px;
	background: #fff;
}

.login-container .features-animation .center-area a {
	cursor: pointer;
	position: absolute;
	display: block;
	top: 275px;
	width: 24px;
	height: 34px;
	z-index: 1;
}

.login-container .features-animation .center-area a.btn-previous { left: 0; background: url(/assets/img/sp/sp_login.png?v=1661943444) 0 -30px; }
.login-container .features-animation .center-area a:hover.btn-previous { background: url(/assets/img/sp/sp_login.png?v=1661943444) -30px -30px; }
.login-container .features-animation .center-area a.btn-next { right: 0; background: url(/assets/img/sp/sp_login.png?v=1661943444) -60px 0; }
.login-container .features-animation .center-area a:hover.btn-next {background: url(/assets/img/sp/sp_login.png?v=1661943444) 0 -70px; }


@-webkit-keyframes animateFeatureImage1 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}

@-webkit-keyframes animateFeatureImage2 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}

@-webkit-keyframes animateFeatureImage3 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}

@-webkit-keyframes animateFeatureImage4 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}


@-moz-keyframes animateFeatureImage1 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}

@-moz-keyframes animateFeatureImage2 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}

@-moz-keyframes animateFeatureImage3 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}

@-moz-keyframes animateFeatureImage4 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}


@-ms-keyframes animateFeatureImage1 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}

@-ms-keyframes animateFeatureImage2 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}

@-ms-keyframes animateFeatureImage3 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}

@-ms-keyframes animateFeatureImage4 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}


@-o-keyframes animateFeatureImage1 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}

@-o-keyframes animateFeatureImage2 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}

@-o-keyframes animateFeatureImage3 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}

@-o-keyframes animateFeatureImage4 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}


@keyframes animateFeatureImage1 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}

@keyframes animateFeatureImage2 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}

@keyframes animateFeatureImage3 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}

@keyframes animateFeatureImage4 {
   0% { margin-top: 30px; opacity: 0.5; }
   15%, 100% { margin-top: 0; opacity: 1; }
}


.login-container .features-animation .center-area .feature {
	position: absolute;
	top: 20px;
	left: 48px;
	width: 420px;
	height: 440px;
	z-index: 2;
}

.login-container.feature1 .features-animation .center-area .feature { background: url(/assets/img/home/img-monitor-01.png?v=1661943444); -webkit-animation: animateFeatureImage1 5s; -moz-animation: animateFeatureImage1 5s; -ms-animation: animateFeatureImage1 5s; -o-animation: animateFeatureImage1 5s; animation: animateFeatureImage1 5s; }
.login-container.feature2 .features-animation .center-area .feature { background: url(/assets/img/home/img-monitor-02.png?v=1661943444); -webkit-animation: animateFeatureImage2 5s; -moz-animation: animateFeatureImage2 5s; -ms-animation: animateFeatureImage2 5s; -o-animation: animateFeatureImage2 5s; animation: animateFeatureImage2 5s; }
.login-container.feature3 .features-animation .center-area .feature { background: url(/assets/img/home/img-monitor-03.png?v=1661943444); -webkit-animation: animateFeatureImage3 5s; -moz-animation: animateFeatureImage3 5s; -ms-animation: animateFeatureImage3 5s; -o-animation: animateFeatureImage3 5s; animation: animateFeatureImage3 5s; }
.login-container.feature4 .features-animation .center-area .feature { background: url(/assets/img/home/img-monitor-04.png?v=1661943444); -webkit-animation: animateFeatureImage4 5s; -moz-animation: animateFeatureImage4 5s; -ms-animation: animateFeatureImage4 5s; -o-animation: animateFeatureImage4 5s; animation: animateFeatureImage4 5s; }

.login-container .features-animation .center-area .monitor {
	position: absolute;
	top: 20px;
	left: 48px;
	width: 420px;
	height: 440px;
	background: url(/assets/img/home/img-monitor-frame.png?v=1661943444);
	z-index: 1;
}

@-webkit-keyframes animateFeatureText1 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}

@-webkit-keyframes animateFeatureText2 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}

@-webkit-keyframes animateFeatureText3 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}

@-webkit-keyframes animateFeatureText4 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}


@-moz-keyframes animateFeatureText1 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}

@-moz-keyframes animateFeatureText2 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}

@-moz-keyframes animateFeatureText3 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}

@-moz-keyframes animateFeatureText4 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}


@-ms-keyframes animateFeatureText1 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}

@-ms-keyframes animateFeatureText2 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}

@-ms-keyframes animateFeatureText3 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}

@-ms-keyframes animateFeatureText4 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}


@-o-keyframes animateFeatureText1 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}

@-o-keyframes animateFeatureText2 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}

@-o-keyframes animateFeatureText3 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}

@-o-keyframes animateFeatureText4 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}


@keyframes animateFeatureText1 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}

@keyframes animateFeatureText2 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}

@keyframes animateFeatureText3 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}

@keyframes animateFeatureText4 {
   0% { margin-left: 200px; opacity: 0.2; }
   15%, 100% { margin-left: 0; opacity: 1; }
}


.login-container .features-animation .center-area .feature-text {
	position: absolute;
	top: 170px;
	left: 490px;
	z-index: 1;
	white-space: nowrap;
}

.login-container.feature1 .features-animation .center-area .feature-text { -webkit-animation: animateFeatureText1 5s ease-out; -moz-animation: animateFeatureText1 5s ease-out; -ms-animation: animateFeatureText1 5s ease-out; -o-animation: animateFeatureText1 5s ease-out; animation: animateFeatureText1 5s ease-out; }
.login-container.feature2 .features-animation .center-area .feature-text { -webkit-animation: animateFeatureText2 5s ease-out; -moz-animation: animateFeatureText2 5s ease-out; -ms-animation: animateFeatureText2 5s ease-out; -o-animation: animateFeatureText2 5s ease-out; animation: animateFeatureText2 5s ease-out; }
.login-container.feature3 .features-animation .center-area .feature-text { -webkit-animation: animateFeatureText3 5s ease-out; -moz-animation: animateFeatureText3 5s ease-out; -ms-animation: animateFeatureText3 5s ease-out; -o-animation: animateFeatureText3 5s ease-out; animation: animateFeatureText3 5s ease-out; }
.login-container.feature4 .features-animation .center-area .feature-text { -webkit-animation: animateFeatureText4 5s ease-out; -moz-animation: animateFeatureText4 5s ease-out; -ms-animation: animateFeatureText4 5s ease-out; -o-animation: animateFeatureText4 5s ease-out; animation: animateFeatureText4 5s ease-out; }

.login-container .features-animation .center-area .feature-text p.title {
	color: #000;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 40px;
}

.login-container .features-animation .center-area .feature-text p.desc {
	color: #777;
	font-size: 15px;
	line-height: 28px;
}

.login-container .features-animation .center-area ul.navigator {
	position: absolute;
	display: block;
	top: 500px;
	left: 0;
	width: 960px;
	height: 130px;
	padding: 0;
	border-top: 1px solid #c2c2c2;
	list-style: none;
	z-index: 1;
}

.login-container .features-animation .center-area ul.navigator li {
	cursor: pointer;
	float: left;
	display: block;
	width: 240px;
	margin-top: -13px;
	color: #777;
	font-size: 18px;
	line-height: 28px;
	text-align: center;
}

.login-container .features-animation .center-area ul.navigator li span.icon {
	display: block;
	width: 26px;
	height: 26px;
	margin: 0 auto 20px auto;
	background: url(/assets/img/sp/sp_login.png?v=1661943444) -60px -40px no-repeat;
}

.login-container .features-animation .center-area ul.navigator li:hover,
.login-container.feature1 .features-animation .center-area ul.navigator li.feature1,
.login-container.feature2 .features-animation .center-area ul.navigator li.feature2,
.login-container.feature3 .features-animation .center-area ul.navigator li.feature3,
.login-container.feature4 .features-animation .center-area ul.navigator li.feature4 { font-size: 20px; font-weight: bold; }

.login-container.feature1 .features-animation .center-area ul.navigator li.feature1,
.login-container.feature2 .features-animation .center-area ul.navigator li.feature2,
.login-container.feature3 .features-animation .center-area ul.navigator li.feature3,
.login-container.feature4 .features-animation .center-area ul.navigator li.feature4 { color: #ffce38; }

.login-container .features-animation .center-area ul.navigator li:hover span.icon { background-position: -30px -70px; }

.login-container.feature1 .features-animation .center-area ul.navigator li.feature1 span.icon,
.login-container.feature2 .features-animation .center-area ul.navigator li.feature2 span.icon,
.login-container.feature3 .features-animation .center-area ul.navigator li.feature3 span.icon,
.login-container.feature4 .features-animation .center-area ul.navigator li.feature4 span.icon,
.login-container.feature1 .features-animation .center-area ul.navigator li.feature1:hover span.icon,
.login-container.feature2 .features-animation .center-area ul.navigator li.feature2:hover span.icon,
.login-container.feature3 .features-animation .center-area ul.navigator li.feature3:hover span.icon,
.login-container.feature4 .features-animation .center-area ul.navigator li.feature4:hover span.icon { background-position: -60px -70px; }

.login-container .video-animation {
	position: relative;
	height: 330px;
	background: #fff;
}

.login-container .video-animation .center-area iframe { display: block; margin: 0 auto; padding: 30px 0 25px 0; }
.login-container .video-animation .center-area p { text-align: center; font-size: 18px; }

.login-container .video-animation .center-area .video-snapshot {
	display: block;
	width: 320px;
	height: 180px;
	margin: 20px auto;
	background: url(/assets/img/home/img-video-snapshot-new.jpg?v=1661943444) no-repeat;
}


.login-container .video-animation .center-area .video-snapshot a.btn-play {
	cursor: pointer;
	display: inline-block;
	width: 66px;
	height: 40px;
	border-radius: 6px;
	margin: 70px 127px;
	background: #333\9;
	background: rgba(0, 0, 0, 0.7);
}

.login-container .video-animation .center-area .video-snapshot a.btn-play:hover { background: #ffce38; }

.login-container .video-animation .center-area .video-snapshot a.btn-play span.ico {
	display: block;
	width: 14px;
	height: 18px;
	margin: 11px 26px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -350px -80px no-repeat;
}

.login-container .video-animation .center-area p a.btn-play { cursor: pointer; }
.login-container .video-animation .center-area p a.btn-play:hover { border-bottom: 1px solid #000; }

.login-container .video-animation .video-player {
	position: fixed;
	display: none;
	top: 50%;
	left: 50%;
	width: 640px;
	height: 360px;
	padding: 10px;
	margin-top: -190px;
	margin-left: -330px;
	border-radius: 8px;
	background: #fff;
	z-index: 11;
}

.login-container .video-animation .video-player a.btn-close {
	position: absolute;
	top: -8px;
	right: -8px;
}

.login-container .mobile-animation {
	height: 400px;
	background: #dcebc2;
}

.login-container .mobile-animation .center-area .app {
	position: absolute;
	display: block;
	top: 55px;
	left: 100px;
	width: 230px;
	height: 345px;
	background: url(/assets/img/home/img-phone-fullsize-230.png?v=1661943444) no-repeat;
}

.login-container .mobile-animation .center-area .app-text {
	position: absolute;
	display: block;
	top: 100px;
	left: 430px;
}

.login-container .mobile-animation .center-area .app-text p.title { font-size: 27px; }
.login-container .mobile-animation .center-area .app-text p.desc { margin-top: 40px; font-size: 18px; font-weight: bold; }
.login-container .mobile-animation .center-area .app-text a.btn-download-ios { cursor: pointer; display: inline-block; width: 124px; height: 40px; margin: 20px 15px 0 0; background: url(/assets/img/sp/sp_login.png?v=1661943444) -90px 0 no-repeat; }
.login-container .mobile-animation .center-area .app-text a.btn-download-android { cursor: pointer; display: inline-block; width: 124px; height: 40px; margin: 20px 15px 0 0; background: url(/assets/img/sp/sp_login.png?v=1661943444) -90px -50px no-repeat; }
.login-container .mobile-animation .center-area .app-text a.btn-link-download { cursor: pointer; line-height: 120px; margin-right: 20px; border-bottom: 1px solid #a6be7c; color: #798e54; font-size: 15px; }

.login-container .recommendation {
	background: #edc62b;
}

.login-container .recommendation .center-area {
	padding-bottom: 40px;
}

.login-container .recommendation .center-area p.title {
	padding-top: 40px;
	line-height: 80px;
	color: #7f4500;
	font-size: 32px;
	text-align: center;
}

.login-container .recommendation .center-area p.title span.quote:first-child { background: url(/assets/img/sp/sp_login.png?v=1661943444) 0 -110px no-repeat; }
.login-container .recommendation .center-area p.title span.quote:last-child { background: url(/assets/img/sp/sp_login.png?v=1661943444) -30px -100px no-repeat; }

.login-container .recommendation .center-area ul {
	width: 960px;
	padding: 0;
	list-style: none;
}

.login-container .recommendation .center-area ul li {
	cursor: pointer;
	position: relative;
	display: inline-block;
	width: 400px;
	height: 300px;
	margin: 10px 0;
	padding: 0 25px;
	vertical-align: top;
}

.login-container .recommendation .center-area ul li span.face {
	display: block;
	width: 140px;
	height: 140px;
	margin: 8px auto;
}

.login-container .recommendation .center-area ul li span.face.bushey { background: url(/assets/img/home/img-teacher-erikabushey-140.png?v=1661943444); }
.login-container .recommendation .center-area ul li span.face.suhokim { background: url(/assets/img/home/img-teacher-kim-140.png?v=1661943444); }
.login-container .recommendation .center-area ul li span.face.gmitro { background: url(/assets/img/home/img-teacher-mariagmitro-140.png?v=1661943444); }
.login-container .recommendation .center-area ul li span.face.kang { background: url(/assets/img/home/img-teacher-kang-140.png?v=1661943444); }
.login-container .recommendation .center-area ul li span.face.huynh { background: url(/assets/img/home/img-teacher-vincenthuynh-140.png?v=1661943444); }
.login-container .recommendation .center-area ul li span.face.steers { background: url(/assets/img/home/img-teacher-suzettesteers-140.png?v=1661943444); }
.login-container .recommendation .center-area ul li span.face.xiong { background: url(/assets/img/home/img-teacher-cathyxiong-140.png?v=1661943444); }

.login-container .recommendation .center-area ul li p.comment {
	text-align: center;
	line-height: 24px;
	color: #7f4500;
	font-size: 18px;
	font-weight: normal;
	font-style: italic;
	letter-spacing: -0.01em;
}

.login-container .recommendation .center-area ul li .desc {
	display: block;
	margin: 10px 0 20px 0;
	color: #7f4500;
	text-align: center;
	letter-spacing: 0;
}

.login-container .recommendation .center-area ul li .desc p.name {
	line-height: 30px;
	font-size: 18px;
	font-weight: bold;
}

.login-container .recommendation .center-area ul li .desc p.role,
.login-container .recommendation .center-area ul li .desc p.state,
.login-container .recommendation .center-area ul li .desc p.school {
	font-size: 13px;
	line-height: 20px;
}

.login-container .recommendation .center-area ul li p.words {
	display: none;
	line-height: 28px;
	color: #7f4500;
	font-size: 15px;
	font-style: italic;
	letter-spacing: 0;
}

.login-container .recommendation .center-area ul li:hover {
	border-radius: 12px;
	background: #ffdf60;
}

.login-container .recommendation .center-area ul li:hover span.face {
	display: inline-block;
	margin: none;
	margin: 30px 15px 0 15px;
	width: 64px;
	height: 64px;
	vertical-align: top;
}

.login-container .recommendation .center-area ul li:hover span.face.bushey { background: url(/assets/img/home/img-teacher-erikabushey-64.png?v=1661943444); }
.login-container .recommendation .center-area ul li:hover span.face.suhokim { background: url(/assets/img/home/img-teacher-kim-64.png?v=1661943444); }
.login-container .recommendation .center-area ul li:hover span.face.gmitro { background: url(/assets/img/home/img-teacher-mariagmitro-64.png?v=1661943444); }
.login-container .recommendation .center-area ul li:hover span.face.kang { background: url(/assets/img/home/img-teacher-kang-64.png?v=1661943444); }
.login-container .recommendation .center-area ul li:hover span.face.huynh { background: url(/assets/img/home/img-teacher-vincenthuynh-64.png?v=1661943444); }
.login-container .recommendation .center-area ul li:hover span.face.steers { background: url(/assets/img/home/img-teacher-suzettesteers-64.png?v=1661943444); }
.login-container .recommendation .center-area ul li:hover span.face.xiong { background: url(/assets/img/home/img-teacher-cathyxiong-64.png?v=1661943444); }

.login-container .recommendation .center-area ul li:hover .desc {
	display: inline-block;
	max-width: 300px;
	margin-top: 60px;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	transform: translate(0, -50%);
	text-align: left;
	letter-spacing: 0;
}

.login-container .recommendation .center-area ul li:hover p.comment { display: none; }
.login-container .recommendation .center-area ul li:hover p.words { display: block; padding: 0 20px; }

.login-container .login-footer {
	height: 200px;
	background: #fcf7da;
}

.login-container .login-footer .center-area {
	position:relative;
	width: 960px;
	height: 200px;
	margin: 0 auto;
}

.login-container .login-footer .lang {
	position: absolute;
	top: 24px;
	right: 24px;
 	line-height: 34px;
 	padding: 3px;
}

.login-container .login-footer .lang span {
	color: #373423;
}

.login-container .login-footer .lang select {
	cursor: pointer;
	width: 140px;
	height: 32px;
	margin: 0 5px;
	border: 1px solid #ccc;
	background: #f8f7e2;
	color: #000;
	font-size: 12px;
	box-shadow: none;
}

.login-container .login-footer  a {
	cursor: pointer;
	color: #797166;
	font-size: 13px;
	font-weight: bold;
}

.login-container .login-footer p {
	color: #644b37;
	font-size: 15px;
	font-weight: bold;
	line-height: 32px;
}

.login-container .login-footer .copyright {
	position: absolute;
	bottom: 20px;
	right: 24px;
 	line-height: 30px;
 	color: #b3aba9;
}

.login-container .login-footer ul { list-style: none; }

.login-container .login-footer ul.links > li {
	float: left;
	width: 140px;
	margin: 20px 15px;
}

.login-container .login-footer ul.links ul {
	padding-left: 10px;
}

.login-container .login-footer ul.links ul li {
	line-height: 25px;
}

.login-container .login-footer .email-form {
	position: fixed;
	display: none;
	bottom: 10%;
	left: 50%;
	margin-left: -220px;
	margin-bottom: -50px;
	width: 420px;
	border-radius: 8px;
	background: #f0eee4;
	z-index: 11;
	border: 9px solid #fff;
	padding: 10px;
}

.login-container .login-footer .email-form input.email {
	width: 240px;
	height: 44px;
	line-height: 44px;
	color: #7f4500;
	font-size: 21px;
	font-family: 'Open Sans', Helvetica, Arial, tahoma, verdana, arial, sans-serif;
	letter-spacing: 0em;
	text-align: center;
}

.login-container .login-footer .email-form a { color: #7f4500; }

.login-container .login-footer .email-form a.btn-copy-clipboard {
	float: none;
	display: inline-block;
	width: 157px;
	height: 42px;
	line-height: 42px;
	border-radius: 4px;
	border: 1px solid rgba(127, 69, 0, 0.4);
	background: #f0eee4;
	text-align: center;
	vertical-align: top;
}

.login-container .login-footer .email-form a.btn-send-email {
	display: block;
	line-height: 44px;
	margin-top: 20px;
	background: #ffce38;
	text-align: center;
}

.login-container .login-footer .email-form a.btn-send-email:hover { background: #ffde38; }

.login-container .login-footer .email-form a.btn-close {
	position: absolute;
	top: -17px;
	right: -17px;
}

.login-container .gnb {
	top: 0px;
	width: 100%;
	height: 60px;
	line-height: 49px;
	text-align: right;
	font-size: 13px;
}

.login-container .gnb .logo div {
	cursor: pointer;
    position: absolute;
    width: 126px;
    margin-top: 17px;
    height: 30px;
    background: url(/assets/img/sp/sp_layout.png?v=1661943444) -430px -430px no-repeat;
}

.login-container .gnb .outlink {
    position: absolute;
    left: 230px;
    height: 50px;
    z-index: 9;
}

.login-container.login .gnb {
	height: 64px;
	margin-top: -5px;
	line-height: 69px;
}

.login-container.login .gnb .logo {
	height: 74px;
	background-position: 0 -220px;
}

.login-container.login .outlink a, .login-container .gnb .outlink a {
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
	padding-left: 10px;
	padding-right: 12px;
	border-radius: 15px;
	line-height: 24px;
	background: #ffed1e;
	color: #d87629;
	vertical-align: middle;
	behavior: url(/assets/css/PIE.htc);
}

.login-container.login .gnb .outlink a {
	background: #7ea7e2;
	color: #fff;
}

.login-container.login .gnb .outlink a.facebook,
.login-container .gnb .outlink a.facebook {
    min-width: 104px;
}

.login-container .gnb .outlink a.help {
    min-width: 26px;
}

.login-container.login .gnb .outlink a.uservoice,
.login-container .gnb .outlink a.uservoice {
    min-width: 48px;
}

.login-container .gnb .btn-area-login {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 9;
	height: 40px;
	line-height: 40px;
	padding: 0;
}

.login-container .gnb button.btn-login,
.login-container .gnb button.btn-login-open {
	display: block;
	border: 0;
	padding: 0;
	font-weight: bold;
	font-size: 14px;
}

.login-container .gnb button.btn-login-open {
	height: 60px;
	line-height: 60px;
	background: #dcebc2;
	color: #504d3a;
}

.login-container .gnb button:hover.btn-login-open,
.login-container .gnb button.btn-login-open.open {
	background: #94b365;
	color: #dcebc2;
}

.login-container .gnb button.btn-login {
	text-align: center;
	border-radius: 5px;
	margin-top: 3px;
}

.login-container .gnb .btn-area-login button { width: 100px; }
.login-container .gnb .btn-area-login button.btn-login { color: #fff; }

.login-container .gnb button.btn-login-valid {
	background: #fff;
	color: #000;
	box-shadow: 0 0 3px #1e7aff;
	/*background-position: 0 -460px;*/
}

.login-container .sign-up-form {
	z-index: 20;
	position: absolute;
	top: 195px;
	left: 50%;
	width: 450px;
	height: 360px;
	background: #fff8a3;
	border-radius: 10px;
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
	behavior: url(/assets/css/PIE.htc);
}

.login-container .sign-up-form .form {
	position: absolute;
	top: 12px;
	left: 5px;
	width: 440px;
	height: 300px;
}

.login-container .sign-up-form .form .title {
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 13px;
	color: #915802;
}

.login-container .sign-up-form .form ul {
	padding: 10px 10px 10px 20px;
	background: #fffde0;
	border-radius: 5px;
}

.login-container .sign-up-form .form dl {
	line-height: 40px;
}

.login-container .sign-up-form .form dt {
	float: left;
	width: 200px;
	text-align: center;
	font-weight: bold;
}

.login-container .sign-up-form .form dt.option {
    color: #888;
}

.login-container .sign-up-form .form dd .sign-up {
	width: 190px;
	border: 2px solid #e2dfd8;
	border-radius: 4px;
	box-shadow: none;
	-webkit-transition: border .2s linear;
	-moz-transition: border .2s linear;
	-ms-transition: border .2s linear;
	-o-transition: border .2s linear;
	transition: border .2s linear;
}

.login-container .sign-up-form .form dl.agree-checkbox {
	line-height: 24px;
}

.login-container .sign-up-form .form dl.agree-checkbox a {
	font-weight: bold;
	text-decoration: underline;
}

.login-container .sign-up-form .form dl.agree-checkbox dd {
	margin-left: 0;
	margin-right: 10px;
	text-align: right;
}

.login-container .sign-up-form .btn-sign-up {
	cursor: pointer;
	display: block;
	position: absolute;
	top: 283px;
	right: 15px;
	width: 410px;
	height: 55px;
	border-radius: 10px;
	border: none;
	background: #ffce38;
	border-bottom: 3px solid #edb91b;
	color: #915802;
	font-size: 18px;
	font-weight: bold;
}

.login-container .sign-up-form .close {
	position: absolute;
	top: 10px;
	right: 10px;
}

.login-container .find-password-form {
	z-index: 20;
	position: absolute;
	top: 100px;
	left: 50%;
	margin-left: -310px;
	width: 620px;
	background: #fff;
	border-radius: 20px;
	border: 10px solid #c2c2c2;
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
	behavior: url(/assets/css/PIE.htc);
}

.login-container .find-password-form .form {
	text-align: center;
	padding: 20px;
}

.login-container .find-password-form .form .desc {
	font-size: 15px;
	line-height: 24px;
	font-weight: bold;
	color: #555;
	margin-bottom: 20px;
	margin-top: 20px;
}

.login-container .find-password-form .form span.title {
	margin-right: 10px;
}

.login-container .find-password-form .form input.email {
	width: 320px;
	background: #f0eee4;
}

.login-container .find-password-form .form input.password { background: #f0eee4; }

.login-container .find-password-form .form .find-email {
	margin-top: 10px;
	text-align: center;
	color: #ff5f5f;
	line-height: 16px;
	letter-spacing: 0;
}

.login-container .find-password-form button.btn-find-password,
.login-container .find-password-form button.btn-go-back-to-the-main,
.login-container .find-password-form button.btn-reset-password {
	cursor: pointer;
	position:relative;
	display: block;
	min-width: 200px;
	height: 55px;
	line-height: 50px;
	margin: 20px auto;
	padding: 0 20px;
	background: #27bc97;
	border-radius: 5px;
	border: none;
	border-bottom: 3px solid #158f71;
	border-top: 2px solid #fff;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	color: #fff;
	-webkit-transition: border 0.1s ease-in-out;
	-moz-transition: border 0.1s ease-in-out;
	-ms-transition: border 0.1s ease-in-out;
	-o-transition: border 0.1s ease-in-out;
	transition: border 0.1s ease-in-out;
}

.login-container .find-password-form button:hover.btn-find-password,
.login-container .find-password-form button:hover.btn-go-back-to-the-main,
.login-container .find-password-form button:hover.btn-reset-password {border-bottom-width:5px;border-top-width:0px;}
.login-container .find-password-form button:active.btn-find-password,
.login-container .find-password-form button:active.btn-go-back-to-the-main,
.login-container .find-password-form button:active.btn-reset-password {border-bottom-width:1px;border-top-width:4px;}

.login-container .find-password-form .close {
	position: absolute;
	top: 10px;
	right: 10px;
}

.container.guide .faq ul {
	list-style: none;
	padding: 0;
}

.container.guide .faq .top-navigation {
	margin: 24px 0;
}

.container.guide .faq .top-navigation a {
	cursor: pointer;
	display: inline-block;
	width: 288px;
	line-height: 48px;
	color: #7f4500;
	font-size: 14px;
}

.container.guide .faq .top-navigation a span.ico {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-right: 5px;
	vertical-align: middle;
}

.container.guide .faq .top-navigation a.teacher span.ico { background: url(/assets/img/ico/img-icon-teacher-24.png?v=1661943444); }
.container.guide .faq .top-navigation a.student span.ico { background: url(/assets/img/ico/img-icon-student-24.png?v=1661943444); }
.container.guide .faq .top-navigation a.parents span.ico { background: url(/assets/img/ico/img-icon-parents-24.png?v=1661943444); }

.container.guide .faq .top-navigation a:hover { font-weight: bold; }
.container.guide .faq .top-navigation a.selected {
	width: 372px;
	font-size: 18px;
	font-weight: bold;
}

.container.guide .faq .top-navigation a.selected span.ico {
	width: 48px;
	height: 48px;
	margin-right: 10px;
}

.container.guide .faq .top-navigation a.selected.teacher span.ico { background: url(/assets/img/ico/img-icon-teacher-48.png?v=1661943444); }
.container.guide .faq .top-navigation a.selected.student span.ico { background: url(/assets/img/ico/img-icon-student-48.png?v=1661943444); }
.container.guide .faq .top-navigation a.selected.parents span.ico { background: url(/assets/img/ico/img-icon-parents-48.png?v=1661943444); }

.container.guide .faq .category-area {
	position: fixed;
	width: 200px;
}

.container.guide .faq .category-area li {
	cursor: pointer;
	line-height: 32px;
	color: #606060;
	font-size: 14px;
	font-weight: bold;
	-webkit-transition: margin 0.1s ease-in-out;
	-moz-transition: margin 0.1s ease-in-out;
	-ms-transition: margin 0.1s ease-in-out;
	-o-transition: margin 0.1s ease-in-out;
	transition: margin 0.1s ease-in-out;
}

.container.guide .faq .category-area li.total {
	border-bottom: 3px solid #ffde38;
	margin-bottom: 20px;
}

.container.guide .faq .category-area li.selected {
	cursor: default;
	color: #7f4500;
	font-size: 16px;
}

.container.guide .faq .category-area li:hover { color: #000; margin-left: 3px; }
.container.guide .faq .category-area li.selected:hover { color: #7f4500; margin-left: 0; }

.container.guide .faq .category-area .search-box {
	position: relative;
	width: 132px;
	margin-top: 30px;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding-right: 30px;
}

.container.guide .faq .category-area .search-box a.icon {
	cursor: pointer;
    position: absolute;
	top: 8px;
	right: 8px;
	width: 14px;
	height: 14px;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -430px -410px no-repeat;
}

.container.guide .faq .item-area {
	width: 690px;
	margin: 0 0 120px 270px;
}

.container.guide .faq .item-area p.page-title {
	line-height: 32px;
	margin-bottom: 10px;
	color: #7f4500;
	font-size: 15px;
	font-weight: bold;
}

.container.guide .faq .item-area li {
	border: 1px solid #dbd4c4;
	border-radius: 5px;
	margin-bottom: 15px;
	overflow: hidden;
}

.container.guide .faq .item-area li.open { border-color: #bbb4a4; }
.container.guide .faq .item-area li:hover {	border-color: #bbb4a4; }
.container.guide .faq .item-area li.linked { border-color: #fb949e; box-shadow: 0 0 3px #fee3e6; }
.container.guide .faq .item-area li.linked p.answer { background: #fee3e6; }

.container.guide .faq .item-area li p {
	line-height: 16px;
	padding: 12px 16px;
	color: #808080;
}

.container.guide .faq .item-area li p a.autolink {
	cursor: pointer;
	color: #f94759;
    text-shadow: none;
    border-bottom: 1px solid #f94759;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    padding: 1px 3px 1px 1px;
}

.container.guide .faq .item-area li p a.autolink:hover {
    background-color: #f94759;
    color: #fff;
    border-bottom: 1px solid #f94759;
}

.container.guide .faq .item-area li p span.searched {
	padding: 2px 1px;
	margin: 0 1px;
	color: #000;
	background-color: #ffce38;
}

.container.guide .faq .item-area li p.question {
	cursor: pointer;
	position: relative;
	font-size: 14px;
}

.container.guide .faq .item-area li p.question span.icon {
	position: absolute;
	top: 17px;
	right: 17px;
	display: block;
	width: 12px;
	height: 8px;
	opacity: 0.5;
	background: url(/assets/img/sp/sp_layout.png?v=1661943444) -270px -50px no-repeat;
}

.container.guide .faq .item-area li:hover p.question span.icon { opacity: 1.0; }
.container.guide .faq .item-area li.open p.question span.icon {
	opacity: 1.0;
	background-position: -300px -10px;
}

.container.guide .faq .item-area li p.answer {
	display: none;
	padding-left: 24px;
	background: #f1f0eb;
	line-height: 21px;
}

.container.guide .faq .item-area li.open p.answer { display: block; }

/* add by hsjang */
.ui-widget-content {
	max-height: 300px;
	overflow-x: hidden;
	overflow-y: auto;
}