@charset "utf-8";

/* margin reset */
a {
	-webkit-tap-highlight-color: transparent;
}

.dev_none {
	display: none !important;
}

.wrapper {
	margin: 0 auto;
	max-width: 1280px;
	min-width: 320px;
}

.wrapper.cscenter {
	display: block;
	padding: 0px;
	padding-bottom: 104px;
	position: relative;
	box-sizing: border-box;
}

.wrapper>header {
	display: block;
	max-width: 1280px;
	min-width: 320px;
	width: 100%;
	height: 70px;
	line-height: 70px;
	position: fixed;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	text-align: center;
	z-index: 20;
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
}

.wrapper>header>h1 {
	line-height: 70px;
	height: 70px;
	display: inline-block;
	vertical-align: top;
	font-size: 21px;
	letter-spacing: -0.5px;
}

.wrapper.index>header>h1::before {
	content: 'Today Schedule';
}

.wrapper.timeline>header>h1::before {
	content: 'Daily Plan';
}

.wrapper.notice>header>h1::before, .wrapper.notice_view>header>h1::before
	{
	content: '공지사항';
}

.wrapper.faq>header>h1::before {
	content: '자주묻는질문';
}

.wrapper.inquiry>header>h1::before {
	content: '1:1문의';
}

.wrapper.setting>header>h1::before {
	content: '설정';
}

.wrapper.info>header>h1::before {
	content: '정보수정';
}

.wrapper.grading>header>h1::before {
	content: '채점하기';
}

.wrapper.textbook.list>header>h1::before {
	content: '교재 관리';
}

.wrapper.calendar>header>h1::before {
	content: '일일학습 내역';
}

.wrapper.study.history>header>h1::before {
	content: '일일학습 상세내역';
}

.wrapper.study.history_detail>header>h1::before {
	content: '일일학습 상세내역';
}

.wrapper.weekly>header>h1::before {
	content: '일일학습 계획';
}

.wrapper.schedule>header>h1::before {
	content: '정규학습 시간표';
}

.wrapper.schedule_daily>header>h1::before {
	content: '정규학습 시간표';
}

.wrapper.schedule_daily_sub>header>h1::before {
	content: '정규학습 상세 설정';
}

.wrapper.today>header>h1::before {
	content: 'Today Schedule';
}

.wrapper.checkin>header>h1::before {
	content: 'Today Check In';
}

.wrapper.less>header>h1::before {
	content: '덜한 과제 관리';
}

.wrapper.lecture.request>header>h1::before {
	content: '수업 예약하기';
}

.wrapper.lecture.teacher>header>h1::before {
	content: '수업 예약하기';
}

.wrapper.lecture.history>header>h1::before {
	content: '수업 내역';
}

.wrapper.lecture.history_view>header>h1::before {
	content: '수업 상세내역';
}

.wrapper.status.study>header>h1::before {
	content: '학습통계';
}

.wrapper.status.result>header>h1::before {
	content: '학습통계';
}

.wrapper.status.ranking>header>h1::before {
	content: '학습랭킹';
}

.wrapper.terms.privacy>header>h1::before {
	content: '개인정보처리방침';
}

.wrapper.terms.service>header>h1::before {
	content: '서비스이용약관';
}

.wrapper.group.list>header>h1::before {
	content: '학습그룹 관리';
}

.wrapper.group.detail>header>h1::before {
	content: '학습그룹 관리';
}

.wrapper>header>a {
	width: 60px;
	height: 60px;
	line-height: 60px;
	margin: 5px 0px;
	display: block;
	position: absolute;
	top: 0px;
	font-size: 28px;
	text-align: center;
	font-family: 'xeicon' !important;
}

.wrapper>header>a.history_back {
	left: 0px;
}

.wrapper>header>a.history_back::before {
	content: "\e93b";
}

.wrapper>header>a.btn_nav {
	right: 0px;
	font-size: 32px;
}

.wrapper>header>a.btn_nav::before {
	content: "\e91c";
}

.wrapper.index>header>a.history_back {
	display: none;
}

.wrapper>footer {
	display: none;
	max-width: 1280px;
	min-width: 320px;
	width: 100%;
	padding: 10px 0px 20px 0px;
	margin-top: 30px;
}

.wrapper>footer>nav {
	display: block;
	font-size: 0px;
	text-align: center;
}

.wrapper>footer>nav>a {
	display: inline-block;
	padding: 0px 15px;
	line-height: 40px;
	font-size: 13px;
}

.wrapper>footer>p.copyrights {
	display: block;
	font-size: 11px;
	line-height: 24px;
	text-align: center;
	color: #999;
	margin-top: 10px;
}

.wrapper.login>header, .wrapper.forget>header, .wrapper.join>header,
	.wrapper.learning>header {
	display: none;
}

.wrapper.index>header {
	background: transparent;
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0);
}

.wrapper.index>header>h1 {
	display: none;
}

.wrapper.index>header>a {
	color: #fff;
}

.wrapper.index>header.bg {
	background: #50CCC6;
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
}

.wrapper.index>header.bg>h1 {
	display: block;
	color: #fff;
}

/*.wrapper.login > footer { display:block; }*/
.wrapper.terms>footer {
	display: block;
	border-top: 0px solid #ddd;
	background: #ddd;
}

.wrapper.cscenter>footer {
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	display: block;
	border-top: 0px solid #ddd;
	background: #ddd;
}

.wrapper>section {
	display: block;
	padding: 0px;
	padding-top: 70px;
}

.wrapper>.screen_wrap {
	height: calc(100% - 70px);
	display: inline-block;
	width: 100%;
}

.wrapper>.screen_wrap .obj_screen_cnts_area {
	padding-bottom: 80px;
}

.wrapper>aside {
	display: none;
	position: fixed;
	right: 0px;
	background: #f2f2f2;
	top: 0px;
	bottom: 0px;
	width: 70%;
	max-width: 380px;
	z-index: 1000;
}

.wrapper>aside>header {
	display: block;
	padding: 20px 20px 15px 20px;
	position: relative;
}

.wrapper>aside>header>h2 {
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	height: 28px;
}

.wrapper>aside>header>h2>b {
	font-size: 20px;
	font-weight: 500;
}

.wrapper>aside>header>p {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	height: 20px;
	color: #999;
}

.wrapper>aside>header>.btn_nav {
	position: absolute;
	right: 0px;
	width: 60px;
	height: 60px;
	top: 5px;
}

.wrapper>aside>header>.btn_nav::before {
	font-family: 'xeicon' !important;
	content: "\e921";
	display: block;
	font-size: 30px;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
}

.wrapper>aside>header>.btns {
	display: block;
	margin-top: 0px;
	font-size: 0px;
	border: 1px solid #ddd;
	margin-top: 10px;
	background: #fff;
	border-radius: 5px;
}

.wrapper>aside>header>.btns>a {
	display: inline-block;
	padding: 0px 0px;
	width: 50%;
	height: 36px;
	line-height: 36px;
	font-size: 13px;
	text-align: center;
	color: #666;
	letter-spacing: -0.5px;
}

.wrapper>aside>header>.btns>a+a {
	margin-left: -1px;
	border-left: 1px solid #eee;
}

.wrapper>aside>header>.btns>a::before {
	display: inline-block;
	height: 36px;
	line-height: 36px;
	text-align: center;
	font-family: 'xeicon' !important;
	font-size: 16px;
	vertical-align: bottom;
	margin-right: 5px;
	color: #999;
}

.wrapper>aside>header>.btns>a.setting::before {
	content: "\e986";
}

.wrapper>aside>header>.btns>a.logout::before {
	content: "\e972";
}

.wrapper>aside>ul.summary {
	display: block;
	margin-top: 0px;
	font-size: 0px;
	background: #50CCC6;
	padding: 15px 0px;
}

.wrapper>aside>ul.summary>li {
	display: inline-block;
	width: 33.3333%;
	text-align: center;
	padding: 0px 0px;
}

.wrapper>aside>ul.summary>li+li {
	margin-left: -1px;
	border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.wrapper>aside>ul.summary>li>span {
	display: block;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.7);
	line-height: 18px;
	height: 18px;
	letter-spacing: -0.5px;
}

.wrapper>aside>ul.summary>li>strong {
	display: block;
	font-size: 26px;
	color: #fff;
	font-weight: 600;
	padding: 2px 0px;
	letter-spacing: -0.5px;
	line-height: 30px;
	height: 30px;
}

.wrapper>aside>ul.summary>li>em {
	display: block;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	line-height: 18px;
	height: 18px;
}

.wrapper>aside>ul.summary>li>em>b {
	font-size: 12px;
	font-weight: 500;
}

.wrapper>aside>nav {
	display: block;
	height: calc(100% - 231px);
	overflow: hidden;
	overflow-y: scroll;
}

.wrapper>aside>nav>ul {
	display: block;
}

.wrapper>aside>nav>ul>li {
	display: block;
	background: #fff;
	position: relative;
}

.wrapper>aside>nav>ul>li+li {
	border-top: 1px solid #eee;
}

.wrapper>aside>nav>ul>li>a {
	display: block;
	line-height: 56px;
	padding: 0px 20px;
	font-size: 16px;
	font-weight: 500;
	position: relative;
	z-index: 2;
	letter-spacing: -0.5px;
}

.wrapper>aside>nav>ul>li>a>i {
	display: inline-block;
	line-height: 56px;
	width: 30px;
	text-align: center;
	margin-right: 0px;
	text-align: left;
	font-size: 20px;
	color: #999;
	vertical-align: bottom;
}

.wrapper>aside>nav>ul>li>a>i::before {
	line-height: 56px;
	height: 56px;
	display: block;
}

.wrapper>aside>nav>ul>li.spl {
	font-size: 0px;
	margin-top: 20px;
	margin: 15px;
	border: 1px solid #ddd;
	overflow: hidden;
	border-radius: 10px;
}

.wrapper>aside>nav>ul>li.spl>a {
	display: inline-block;
	width: 50%;
	text-align: center;
	font-size: 14px;
	padding: 0px 0px;
	line-height: 46px;
}

.wrapper>aside>nav>ul>li.spl>a.full {
	width: 100%;
	border-bottom: 1px solid #ddd;
}

.wrapper>aside>nav>ul>li.spl>a+a {
	border-left: 1px solid #ddd;
	margin-left: -1px;
}

.wrapper>aside>nav>ul>li>dl {
	display: none;
	border-top: 1px solid #eee;
	background: #eee;
	padding: 10px 0px;
}

.wrapper>aside>nav>ul>li.subs:after {
	font-family: 'xeicon' !important;
	content: "\e942";
	vertical-align: middle;
	position: absolute;
	top: 0px;
	right: 15px;
	display: block;
	color: #999;
	font-size: 15px;
	height: 56px;
	line-height: 56px;
	z-index: 1;
}

.wrapper>aside>nav>ul>li.opened:after {
	content: "\e945";
}

.wrapper>aside>nav>ul>li.opened>dl {
	display: block;
}

.wrapper>aside>nav>ul>li>dl>dd {
	display: block;
}

.wrapper>aside>nav>ul>li>dl>dd>a {
	display: block;
	padding: 0px 30px 0px 50px;
	line-height: 38px;
	position: relative;
	font-size: 14px;
}

.wrapper>aside>nav>ul>li>dl>dd>a::before {
	position: absolute;
	top: 19px;
	left: 40px;
	background: #999;
	width: 2px;
	height: 2px;
	display: block;
	content: '';
}

.wrapper>aside>nav>a {
	display: block;
	width: 160px;
	text-align: center;
	background: #382063;
	color: #fff;
	line-height: 40px;
	border: 0px solid #ccc;
	margin: 30px auto 30px auto;
	border-radius: 5px;
}

.wrapper.login>section, .wrapper.forget>section, .wrapper.join>section {
	margin: 0 auto;
	max-width: 480px;
	padding: 0px;
}

.wrapper.learning>section {
	margin: 0 auto;
	padding: 0px;
	padding-top: 105px;
}

.wrapper.index>section {
	margin: 0 auto;
	padding: 0px;
}

.wrapper.login {
	background: url(../images/login_bg.jpg) no-repeat center center;
	background-size: cover;
	max-width: 100%;
	height: auto !important;
	position:relative;
}

.wrapper.login::before {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.7));
    content: '';
    z-index: 1;
}


.wrapper.login>section.login_box {
	position: relative;
	min-height: 100%;
	position: relative;
	z-index:2;
}

.login_box > hgroup { display: block; padding:100px 30px; margin:0 auto; }
.login_box > hgroup > h1 { display:block; font-size:0px; height:140px; background-image:url(../images/sco_bi_temp.png); background-position: center; background-repeat: no-repeat; background-size: contain; } 

/*.wrapper.login > section.login_box:before{content:''; background:#000; opacity:0.3; position:absolute; left:0; top:0; right:0; bottom:0;}*/
.wrapper.login>section>.visual {
	padding: 200px 50px 40px;
	position: relative;
}

.wrapper.login>section>.visual>h1 {
	position: absolute;
	width: 120px;
	height: 66px;
	background: url(../images/bi.png) transparent no-repeat center;
	background-size: cover;
	font-size: 0px;
	top: 50px;
	right: 50px;
}

.wrapper.login>section>.visual>h2 {
	font-size: 30px;
	color: #fff;
	font-family: "Pretendard";
	font-weight: 600;
}

.wrapper.login>section>.visual>p {
	font-size: 15px;
	color: #fff;
	font-family: "Pretendard";
	padding-top: 10px;
	line-height: 1.2;
}

.wrapper.login>section .login {
	padding: 0px 50px;
	position: relative;
}

.wrapper.login>section .login .field {
	background: rgba(255, 255, 255, 0.5);
	padding: 15px 15px 0 15px;
	border: 0px;
}

.wrapper.login>section .login .field::before {
	display: none;
}

.wrapper.login>section .login .field span {
	color: #666666;
	font-family: "Pretendard";
	font-size: 13px;
	display: block;
	font-weight: 600;
}

.wrapper.login>section .login .field input {
	padding: 0;
	height: 40px;
	line-height: 40px;
}

.wrapper.login>section .info a, .wrapper.login>section .info span {
	color: #fff;
}

.wrapper.login>section .copyrights {
	text-align: center;
	font-size: 13px;
	color: #fff;
	mix-blend-mode: soft-light;
	padding: 30px 0;
}

.wrapper.forget>section>.visual {
	padding: 110px 0px 60px 0px;
	position: relative;
	background: #ddd;
}

.wrapper.forget>section>.visual>h1 {
	position: absolute;
	top: 20px;
	left: 20px;
	height: 40px;
	width:150px;
	background: url(../images/sco_top_bi_temp.svg) transparent no-repeat center;
	background-size: contain;;
	font-size: 0px;
}

.wrapper.forget>section>.visual>h2 {
	text-align: center;
	font-size: 28px;
	font-weight: 500;
}

.wrapper.join>section>.visual {
	padding: 110px 0px 60px 0px;
	position: relative;
	background: #ddd;
}

.wrapper.join>section>.visual>h1 {
	position: absolute;
	top: 20px;
	left: 20px;
	height: 40px;
	width:150px;
	background: url(../images/sco_top_bi_temp.svg) transparent no-repeat center;
	background-size: contain;;
	font-size: 0px;
}

.wrapper.join>section>.visual>h2 {
	text-align: center;
	font-size: 28px;
	font-weight: 500;
}

.wrapper.login>section .membership {
	padding: 20px 50px;
}

.wrapper.login>section .membership>a {
	display: inline-block;
	line-height: 30px;
}

.wrapper.login>section .membership>a+a {
	float: right;
	text-decoration: underline;
}

.wrapper>section .field {
	border: 1px solid #ccc;
	border-radius: 5px;
	position: relative;
	overflow: hidden;
	background: #f8f8f8;
}

.wrapper>section .field+.field {
	margin-top: 10px;
}

.wrapper>section p.label {
	padding: 0px;
	margin: 0px;
	font-size: 13px;
	color: #999;
	padding-bottom: 5px;
	display: block;
}

.wrapper>section .field+p.label {
	margin-top: 20px;
}

.wrapper>section .spl+p.label {
	margin-top: 20px;
}

.wrapper>section .address+p.label {
	margin-top: 20px;
}

.wrapper>section p.label+.address {
	margin-top: 0px;
}

.wrapper>section .field::before {
	font-family: 'xeicon' !important;
	width: 50px;
	height: 26px;
	line-height: 26px;
	position: absolute;
	top: 11px;
	left: 0px;
	text-align: center;
	font-size: 26px;
	color: #999;
}

.wrapper>section .field.cert {
	display: none;
}

.wrapper>section .field.cert>.time {
	font-size: 13px;
	color: #999;
	display: inline-block;
	position: absolute;
	top: 11px;
	right: 85px;
	line-height: 26px;
}

.wrapper>section .field>input[type=text], .wrapper>section .field>input[type=password]
	{
	display: block;
	width: 100%;
	padding: 0px 15px;
	line-height: 48px;
	height: 48px;
	box-sizing: border-box;
}

.wrapper>section .field>input[type=text]:read-only {
	background: #F2F2F2;
}

.wrapper>section .field.select:after {
	font-family: FontAwesome;
	content: "\f107";
	vertical-align: middle;
	position: absolute;
	top: 0px;
	right: 10px;
	display: block;
	color: #999;
	font-size: 15px;
	height: 48px;
	line-height: 48px;
	z-index: 1;
}

.wrapper>section .field.select>select {
	display: block;
	width: 100%;
	padding: 0px 15px;
	line-height: 48px;
	height: 48px;
	box-sizing: border-box;
}

.wrapper>section .field>textarea {
	display: block;
	width: 100%;
	padding: 15px 15px;
	line-height: 20px;
	height: 200px;
	box-sizing: border-box;
	resize: none;
}

.wrapper>section .field.id>input, .wrapper>section .field.pw>input {
	padding-left: 50px;
}

.wrapper>section .field.id::before {
	content: "\e9f5";
}

.wrapper>section .field.pw::before {
	content: "\e966";
}

.wrapper>section .field>.radio {
	position: absolute;
	top: 7px;
	right: 7px;
	font-size: 0px;
}

.wrapper>section .field>.radio>label {
	padding: 0px 0px;
	height: 34px;
	color: #999;
	text-align: center;
	line-height: 34px;
	width: auto;
}

.wrapper>section .field>.radio>label>input[type=radio]+span {
	display: block;
	line-height: 34px;
	font-size: 14px;
	margin-left: 0px;
	background: #999;
	color: #fff;
	padding: 0px 20px;
}

.wrapper>section .field>.radio>label>input[type=radio]+span:before {
	display: none !important;
}

.wrapper>section .field>.radio>label>input[type=radio]:checked+span {
	background: #00090d;
}

.wrapper>section .field>button {
	position: absolute;
	top: 7px;
	right: 7px;
	font-size: 14px;
	padding: 0px 20px;
	height: 34px;
	color: #fff;
	text-align: center;
	line-height: 34px;
	display: block;
	background: #00090d;
}

.wrapper>section .field>button:disabled {
	background: #bbb;
}

.wrapper>section .spl {
	display: block;
	font-size: 0px;
	margin-top: 10px;
}

.wrapper>section .spl>.field {
	display: inline-block;
	width: calc(50% - 5px);
}

.wrapper>section .spl>.field+.field {
	margin-left: 6px;
	margin-top: 0px;
}

.wrapper>section .address {
	display: block;
	font-size: 0px;
	margin-top: 10px;
}

.wrapper>section .address+.field {
	margin-top: 10px;
}

.wrapper>section .info {
	margin-top: 10px;
	padding: 10px 0px;
	line-height: 20px;
	position: relative;
}

.wrapper>section .info>label+label {
	margin-left: 20px;
}

.wrapper>section .info>a {
	display: inline-block;
	line-height: 24px;
}

.wrapper>section .info>a.right {
	float: right;
}

.wrapper>section .btns {
	margin-top: 100px;
	font-size: 0px;
}

.wrapper>section .btns>button {
	display: inline-block;
	width: 70%;
	background: #50CCC6;
	color: #fff;
	height: 56px;
	line-height: 56px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}

.wrapper>section .btns>button.save {
	display: block;
	width: 100%;
}

.wrapper>section .btns>button.full {
	display: block;
	width: 100%;
}

.wrapper>section .btns>button.cancel {
	width: calc(30% - 10px);
	margin-right: 10px;
	background: #999;
	color: #fff;
}

.wrapper>section .btns>a {
	display: block;
	background: #50CCC6;
	color: #fff;
	width: 100%;
	height: 56px;
	line-height: 56px;
	border-radius: 5px;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	margin-top: 10px;
	letter-spacing: -1px;
}

.wrapper.forget>section .info {
	text-align: center;
	font-size: 0px;
	margin-top: 30px;
}

.wrapper.forget>section .info>a {
	display: inline-block;
	line-height: 24px;
	padding: 0px 20px;
	position: relative;
	font-size: 14px;
}

.wrapper.forget>section .info>a+a {
	margin-left: 2px;
}

.wrapper.forget>section .info>a+a::before {
	position: absolute;
	top: 5px;
	left: -2px;
	width: 2px;
	height: 14px;
	content: '';
	background: #ccc;
	display: block;
}

.wrapper.login>section .btns>a {
	display: block;
	background: #2E323B;
	color: #fff;
	width: 100%;
	height: 56px;
	line-height: 56px;
	border-radius: 5px;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	margin-top: 10px;
	letter-spacing: -1px;
}

.wrapper.login>section .btns>button {
	display: block;
	background: #26B7BC;
	color: #fff;
	width: 100%;
	height: 56px;
	line-height: 56px;
	border-radius: 5px;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
}

.wrapper.login>section .btns>a>b {
	font-weight: 600;
}

.tab_wrapper {
	display: block;
}

.tab_wrapper>ul.tab_menu {
	display: block;
	font-size: 0px;
}

.tab_wrapper>ul.tab_menu>li {
	display: inline-block;
	width: 50%;
}

.tab_wrapper>ul.tab_menu>li>a {
	line-height: 50px;
	text-align: center;
	display: block;
	font-size: 16px;
	background: #ddd;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	color: #999;
}

.tab_wrapper>ul.tab_menu>li.on>a {
	background: #f2f2f2;
	border-bottom: 1px solid transparent;
	color: #00090d;
	font-weight: 500;
}

.tab_wrapper>ul.tab_menu>li+li>a {
	border-left: 1px solid #ccc;
}

.tab_wrapper>.tab_div {
	display: block;
	padding: 30px 50px;
}

.tab_wrapper>.tab_div+.tab_div {
	display: none;
}

.step_wrapper {
	display: block;
}

.step_wrapper .step {
	display: block;
	font-size: 0px;
	background: #ccc;
}

.step_wrapper .step>span {
	line-height: 15px;
	width: 25%;
	position: relative;
	display: inline-block;
	font-size: 15px;
	text-align: center;
	padding: 10px 0px;
	color: #777;
}

.step_wrapper .step>span>i {
	display: block;
	margin: 0 auto;
	font-size: 10px;
	background: #f2f2f2;
	border-radius: 10px;
	width: 55px;
	color: #999;
	margin-bottom: 5px;
	line-height: 20px;
}

.step_wrapper .step>span.on {
	color: #111;
	font-weight: 500;
	background: #f2f2f2;
}

.step_wrapper .step>span.on>i {
	background: #50CCC6;
	color: #fff;
}

.step_wrapper .step_div {
	display: none;
	padding: 30px 50px;
}

.step_wrapper .step_div.on {
	display: block;
}

.step_wrapper .step_div>h3 {
	font-size: 20px;
	line-height: 24px;
	font-weight: 500;
	margin-bottom: 20px;
	letter-spacing: -0.5px;
}

.step_wrapper .step_div>.agree_box {
	margin-bottom: 20px;
}

.step_wrapper .step_div>.agree_box>label>span>b {
	font-weight: 400;
	color: #ec635d;
	margin-left: 5px;
}

.step_wrapper .step_div>.agree_box>.text_field {
	border: 1px solid #ddd;
	margin-top: 5px;
	overflow: hidden;
	overflow-y: scroll;
	height: 100px;
	font-size: 13px;
	padding: 10px;
	word-break: keep-all;
	background: #fff;
	line-height: 18px;
	color: #666;
}

.step_wrapper .step_div>label.all_agree {
	height: auto;
	word-break: keep-all;
}

.step_wrapper .step_div[data-step="complete"] {
	text-align: center;
	padding-top: 50px !important;
}

.step_wrapper .step_div[data-step="complete"]>h3 {
	font-size: 24px;
	line-height: 30px;
}

.step_wrapper .step_div[data-step="complete"]>h3::before {
	display: block;
	font-family: 'xeicon' !important;
	content: "\e928";
	font-size: 60px;
	line-height: 80px;
	color: #50CCC6;
	padding: 0px 0px;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	margin: 0 auto;
	border: 6px solid #50CCC6;
	margin-bottom: 20px;
}

.step_wrapper .step_div[data-step="complete"]>p {
	font-size: 16px;
	line-height: 23px;
	padding: 0px 0px;
	word-break: keep-all;
}

.step_wrapper .step_div[data-step="complete"]>p>b {
	font-weight: 500;
}

.step_wrapper .step_div[data-step="complete"]>p.ex {
	font-size: 14px;
	line-height: 20px;
	color: #777;
	margin-top: 10px;
}

.step_wrapper .step_div[data-step="complete"]>.btns {
	margin-top: 50px;
}

.container {
	padding-bottom: 80px;
}

.container.bpd {
	padding-bottom: 0px;
}

.today_visual {
	background: #50CCC6;
	padding: 90px 0px 60px 0px;
	margin-bottom: 30px;
}

.today_visual>h2 {
	font-size: 28px;
	text-align: center;
	color: #fff;
	line-height: 30px;
	font-weight: 500;
}

.today_visual>h2>em {
	display: inline-block;
	line-height: 30px;
	font-size: 22px;
	vertical-align: bottom;
}

.today_visual>p {
	font-size: 16px;
	text-align: center;
	color: #fff;
	line-height: 20px;
	margin-top: 5px;
}

.schedule_line {
	padding-bottom: 30px;
	position: relative;
}

dl.week_th {
	display: block;
	padding-left: 70px;
	font-size: 0px;
}

dl.week_th>dd {
	display: inline-block;
	width: calc(100%/ 7);
	line-height: 60px;
	height: 60px;
	text-align: center;
	color: #999;
}

dl.week_th>dd:nth-child(7n) {
	color: #369AFB;
}

dl.week_th>dd:nth-child(7n+1) {
	color: #FD5658;
}

.schedule_line>ul.line {
	padding-left: 70px;
	display: block;
	position: relative;
}

.schedule_line>ul.line>li {
	position: relative;
	height: 60px;
	border-bottom: 0px solid rgba(0, 0, 0, 0.05);
	box-sizing: border-box;
}

.schedule_line>ul.line.half>li {
	height: 30px;
}

.schedule_line>ul.line>li:after {
	display: block;
	height: 1px;
	background: rgba(0, 0, 0, 0.05);
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	content: '';
	z-index: 10;
}

.schedule_line>ul.line>li>i {
	position: absolute;
	width: 60px;
	font-size: 11px;
	color: #999;
	top: -10px;
	left: -60px;
	text-align: center;
	line-height: 20px;
}

.schedule_line>ul.line>li:last-child {
	position: relative;
	height: 1px;
	border-bottom: 0px solid rgba(0, 0, 0, 0.05);
	box-sizing: border-box;
}

.schedule_line>ul.mine {
	position: absolute;
	top: 0px;
	left: 70px;
	right: 0px;
	z-index: 9;
}

.schedule_line>ul.mine>li {
	position: absolute;
	right: 0px;
	left: 0px;
	overflow-y: auto;
	height:fit-content;
}

.schedule_line>ul.mine>li>a {
	display: block;
	padding: 15px;
	overflow: hidden;
	overflow-y: auto;
}

.schedule_line>ul.mine>li>a>i {
	display: inline-block;
	line-height: 18px;
	font-size: 10px;
	color: #fff;
	padding: 0px 5px;
	margin-left: -5px;
	transform: rotate(-5deg);
	letter-spacing: 1px;
}

.schedule_line>ul.mine>li>a>b {
	display: block;
	line-height: 18px;
	font-size: 12px;
	position: absolute;
	top: 15px;
	right: 15px;
	font-weight: 400;
	color: #888;
}

.schedule_line>ul.mine>li>a>span {
	display: block;
	line-height: 18px;
	font-size: 12px;
	position: absolute;
	top: 15px;
	right: 15px;
	font-weight: 400;
	color: #888;
}

.schedule_line>ul.mine>li>a>span>b {
	font-weight: 500;
	font-size: 13px;
	color: #666;
}

.schedule_line>ul.mine>li>a>p {
	display: block;
	line-height: 20px;
	font-size: 15px;
	color: #111;
}

.schedule_line>ul.mine>li>a>dl {
	display: block;
	margin-top: 10px;
}

.schedule_line>ul.mine>li>a>dl>dd {
	display: block;
	font-size: 0px;
	width: 100%;
}

.schedule_line>ul.mine>li>a>dl>dd>span {
	display: inline-block;
	min-width: 35px;
	vertical-align: bottom;
	font-size: 12px;
	line-height: 18px;
	color: #777;
	font-weight: 400;
}

.schedule_line>ul.mine>li>a>dl>dd>b {
	display: inline-block;
	vertical-align: bottom;
	font-size: 12px;
	line-height: 18px;
	color: #777;
	font-weight: 400;
}

.schedule_line>ul.mine>li>div {
	display: block;
	padding: 15px;
	overflow: hidden;
	overflow-y: auto;
}

.schedule_line>ul.mine>li>div>i {
	display: inline-block;
	line-height: 18px;
	font-size: 10px;
	color: #fff;
	padding: 0px 5px;
	margin-left: -5px;
	transform: rotate(-5deg);
	letter-spacing: 1px;
}

.schedule_line>ul.mine>li>div>b {
	display: block;
	line-height: 18px;
	font-size: 12px;
	position: absolute;
	top: 15px;
	right: 15px;
	font-weight: 400;
	color: #888;
}

.schedule_line>ul.mine>li>div>p {
	display: block;
	line-height: 20px;
	font-size: 15px;
	color: #111;
}

.schedule_line>ul.mine>li>div>dl {
	display: block;
	margin-top: 10px;
}

.schedule_line>ul.mine>li>div>dl>dd {
	display: block;
	font-size: 0px;
}

.schedule_line>ul.mine>li>div>dl>dd>span {
	display: inline-block;
	min-width: 50px;
	vertical-align: bottom;
	font-size: 12px;
	line-height: 18px;
	color: #777;
	font-weight: 400;
}

.schedule_line>ul.mine>li>div>dl>dd>b {
	display: inline-block;
	vertical-align: bottom;
	font-size: 12px;
	line-height: 18px;
	color: #777;
	font-weight: 400;
}

.schedule_line>ul.mine>li>div>a.btn {
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 11;
	font-size: 0px;
	text-align: center;
	color: #999;
	overflow: hidden;
}

.schedule_line>ul.mine>li>div>a.btn::before {
	display: block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-family: 'xeicon' !important;
	content: "\e94a";
	font-size: 20px;
}

.schedule_line>ul.mine[data-week] {
	left: 0px;
	margin-left: 70px;
	right: auto;
	width: calc(( 100% - 70px)/7);
}

.schedule_line>ul.mine[data-week='0'] {
	left: calc(( 100% - 70px)/7* 0);
}

.schedule_line>ul.mine[data-week='1'] {
	left: calc(( 100% - 70px)/7* 1);
}

.schedule_line>ul.mine[data-week='2'] {
	left: calc(( 100% - 70px)/7* 2);
}

.schedule_line>ul.mine[data-week='3'] {
	left: calc(( 100% - 70px)/7* 3);
}

.schedule_line>ul.mine[data-week='4'] {
	left: calc(( 100% - 70px)/7* 4);
}

.schedule_line>ul.mine[data-week='5'] {
	left: calc(( 100% - 70px)/7* 5);
}

.schedule_line>ul.mine[data-week='6'] {
	left: calc(( 100% - 70px)/7* 6);
}

.schedule_line>ul.mine[data-week]>li {
	margin: 0 2px;
	padding: 5px;
	display:flex;
}

.schedule_line>ul.mine[data-week]>li>a {
	padding: 0px;
	line-height: 30px;
}

.schedule_line>ul.mine[data-week]>li>a>i {
	display: block;
	line-height: 30px;
	text-align: center;
	font-size: 10px;
	color: #666;
	transform: rotate(0deg);
	padding: 0px;
	background: transparent !important;
	margin: 0;
}

.schedule_line>ul.mine>li[data-role='ON-A'] {
	background: rgba(207, 125, 154, 0.2);
}

.schedule_line>ul.mine>li[data-role='ON-A']>a>i, .schedule_line>ul.mine>li[data-role='ON-A']>div>i
	{
	background: rgba(207, 125, 154, 0.9);
}

.schedule_line>ul.mine>li[data-role='ON-L'] {
	background: rgba(0, 146, 114, 0.2);
}

.schedule_line>ul.mine>li[data-role='ON-L']>a>i, .schedule_line>ul.mine>li[data-role='ON-L']>div>i
	{
	background: rgba(0, 146, 114, 0.9);
}

.schedule_line>ul.mine>li[data-role='OFF-A'] {
	background: rgba(90, 197, 220, 0.2);
}

.schedule_line>ul.mine>li[data-role='OFF-A']>a>i, .schedule_line>ul.mine>li[data-role='OFF-A']>div>i
	{
	background: rgba(90, 197, 220, 0.9);
}

.schedule_line>ul.mine>li[data-role='OFF-L'] {
	background: rgba(202, 175, 0, 0.2);
}

.schedule_line>ul.mine>li[data-role='OFF-L']>a>i, .schedule_line>ul.mine>li[data-role='OFF-L']>div>i
	{
	background: rgba(202, 175, 0, 0.9);
}

.schedule_line>ul.mine>li[data-role='ETC'] {
	background: rgba(159, 162, 167, 0.2);
}

.schedule_line>ul.mine>li[data-role='ETC']>a>i, .schedule_line>ul.mine>li[data-role='ETC']>div>i
	{
	background: rgba(159, 162, 167, 0.9);
}

.schedule_line>ul.mine>li.pick[data-role='ON-A'] {
	border: 2px solid rgba(207, 125, 154, 1);
	box-sizing: border-box;
}

.schedule_line>ul.mine>li.pick[data-role='ON-L'] {
	border: 2px solid rgba(0, 146, 114, 1);
	box-sizing: border-box;
}

.schedule_line>ul.mine>li.pick[data-role='OFF-A'] {
	border: 2px solid rgba(90, 197, 220, 1);
	box-sizing: border-box;
}

.schedule_line>ul.mine>li.pick[data-role='OFF-L'] {
	border: 2px solid rgba(202, 175, 0, 1);
	box-sizing: border-box;
}

.schedule_line>ul.mine>li.pick[data-role='ETC'] {
	border: 2px solid rgba(159, 162, 167, 1);
	box-sizing: border-box;
}

.schedule_line>div.now {
	height: 2px;
	position: absolute;
	left: 70px;
	right: 0px;
	z-index: 11;
	background: #ec635d;
	margin-top: -1px;
}

.schedule_line>div.now>i {
	position: absolute;
	width: 60px;
	font-size: 11px;
	color: #999;
	top: -9px;
	left: -60px;
	text-align: center;
	line-height: 20px;
	background: #ec635d;
	color: #fff;
}

.groups.bwh {
	background: #fff;
}

.groups {
	padding: 15px;
}

.groups>ul {
	display: block;
}

.groups>ul>li {
	display: block;
	background: #fff;
}

.groups>ul>li+li {
	margin-top: 5px;
}

.groups>ul>li>a {
	display: block;
	padding: 15px;
	position: relative;
}

.groups>ul>li>a>i {
	display: inline-block;
	line-height: 20px;
	font-size: 11px;
	color: #fff;
	padding: 0px 5px;
	letter-spacing: 1px;
}

.groups>ul>li>a>b {
	display: block;
	line-height: 18px;
	font-size: 12px;
	position: absolute;
	top: 15px;
	right: 15px;
	font-weight: 400;
	color: #888;
}

.groups>ul>li>a>h4 {
	display: block;
	line-height: 22px;
	font-size: 16px;
	font-weight: 500;
	margin-top: 5px;
}

.groups>ul>li>a>span {
	display: block;
	line-height: 20px;
	font-size: 12px;
	position: absolute;
	top: 15px;
	right: 15px;
	font-weight: 400;
	color: #888;
}

.groups>ul>li>a>span>b {
	font-weight: 500;
	font-size: 13px;
	color: #666;
}

.groups>ul>li>a>p {
	display: block;
	line-height: 20px;
	font-size: 15px;
	color: #111;
}

.groups>ul>li>a>dl {
	display: block;
	margin-top: 10px;
	background: #f2f2f2;
	padding: 10px 15px;;
}

.groups>ul>li>a>dl>dd {
	display: block;
	font-size: 0px;
	position: relative;
}

.groups>ul>li>a>dl>dd+dd {
	border-top: 1px solid #fff;
}

.groups>ul>li>a>dl>dd>span {
	position: absolute;
	top: 0px;
	right: 0px;
	display: inline-block;
	min-width: 50px;
	vertical-align: bottom;
	font-size: 13px;
	line-height: 24px;
	color: #777;
	font-weight: 400;
}

.groups>ul>li>a>dl>dd>b {
	display: inline-block;
	vertical-align: bottom;
	font-size: 13px;
	line-height: 24px;
	color: #777;
	font-weight: 400;
}

.groups>ul>li>a>dl>dd>b>em {
	display: inline-block;
	vertical-align: bottom;
	font-size: 13px;
	line-height: 24px;
	color: #777;
	font-weight: 400;
	margin-left: 5px;
}

.groups>ul>li[data-role='ON-A']>a>i, .groups>ul>li[data-role='ON-A']>div>i
	{
	background: rgba(207, 125, 154, 0.9);
}

.groups>ul>li[data-role='ON-L']>a>i, .groups>ul>li[data-role='ON-L']>div>i
	{
	background: rgba(0, 146, 114, 0.9);
}

.groups>ul>li[data-role='OFF-A']>a>i, .groups>ul>li[data-role='OFF-A']>div>i
	{
	background: rgba(90, 197, 220, 0.9);
}

.groups>ul>li[data-role='OFF-L']>a>i, .groups>ul>li[data-role='OFF-L']>div>i
	{
	background: rgba(202, 175, 0, 0.9);
}

.groups>ul>li[data-role='ETC']>a>i, .groups>ul>li[data-role='ETC']>div>i
	{
	background: rgba(159, 162, 167, 0.9);
}

.container>ul.summary {
	display: block;
	margin-top: 0px;
	font-size: 0px;
	background: #382063;
	padding: 15px 0px;
}

.container>ul.summary>li {
	display: inline-block;
	width: 33.3333%;
	text-align: center;
	padding: 0px 0px;
}

.container>ul.summary>li+li {
	margin-left: -1px;
	border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.container>ul.summary>li>span {
	display: block;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	line-height: 18px;
	height: 18px;
	letter-spacing: -0.5px;
}

.container>ul.summary>li>strong {
	display: block;
	font-size: 26px;
	color: #fff;
	font-weight: 600;
	padding: 2px 0px;
	letter-spacing: -0.5px;
	line-height: 30px;
	height: 30px;
}

.container>ul.summary>li>em {
	display: block;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	line-height: 18px;
	height: 18px;
}

.container>ul.summary>li>em>b {
	font-size: 14px;
	font-weight: 500;
}

.container>.timeline {
	display: block;
	padding: 15px 15px;
}

.container>.timeline>ul {
	display: block;
}

.container>.timeline>ul>li {
	display: block;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.container>.timeline>ul>li+li {
	margin-top: -1px;
}

.container>.timeline>ul>li:first-child {
	border-top: 0px solid #fff;
}

.container>.timeline>ul>li:last-child {
	border-bottom: 0px solid #fff;
}

.container>.timeline>ul>li>div {
	display: block;
	background: #fff;
	padding: 15px;
	padding-left: 60px;
	position: relative;
}

.container>.timeline>ul>li>div.rest_time {
	background: #f8f8f8;
}

.container>.timeline>ul>li>div>em {
	position: absolute;
	line-height: 18px;
	font-size: 12px;
	top: 15px;
	left: 15px;
	font-weight: 500;
	color: #fff;
	background: #bbb;
	width: 36px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	text-align: center;
	border-radius: 3px;
}

.container>.timeline>ul>li>div>em[data-type='1'] {
	background: #50CCC6;
} /*진도*/
.container>.timeline>ul>li>div>em[data-type='4'] {
	background: #FD747A;
} /*복습*/
.container>.timeline>ul>li>div>em[data-type='7'] {
	background: #00CC66;
} /*필수*/
.container>.timeline>ul>li>div>em[data-type='16'] {
	background: #777;
} /*점검*/
.container>.timeline>ul>li>div>h5 {
	font-size: 1px;
	font-weight: 500;
	line-height: 20px;
	position: relative;
	margin-bottom: 5px;
	padding-right: 80px;
	word-break: keep-all;
}

.container>.timeline>ul>li:last-child>div>h5 {
	margin-bottom: 0px;
}

.container>.timeline>ul>li>div>h5>b {
	display: block;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	vertical-align: bottom;
}

.container>.timeline>ul>li>div>h5>span {
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	line-height: 20px;
	font-size: 12px;
	color: #666;
	font-weight: 400;
}

.container>.timeline>ul>li>div.rest_time>h5 {
	display: none;
}

.container>.timeline>ul>li>div>p {
	font-size: 0px;
	line-height: 20px;
	position: relative;
	color: #999;
}

.container>.timeline>ul>li>div>p>span {
	font-size: 13px;
	line-height: 20px;
	display: inline-block;
	vertical-align: bottom;
	position: relative;
	width: 100%;
}

.container>.timeline>ul>li>div>p>span+span {
	margin-left: 21px;
}

.container>.timeline>ul>li>div>p>span+span::before {
	display: block;
	position: absolute;
	height: 10px;
	width: 1px;
	top: 5px;
	left: -11px;
	content: '';
	background: #ddd;
}

.container>.timeline>ul>li>div>p>span>b {
	font-size: 13px;
	line-height: 20px;
	display: inline-block;
	vertical-align: bottom;
	font-weight: 400;
}

.container>.timeline>ul>li>div>p>b {
	font-weight: 500;
}

.container>.timeline>ul>li>div>.row_btns {
	
}

.container>.timeline>ul>li>div.opened::before {
	position: absolute;
	bottom: 0px;
	right: 0px;
	top: 0px;
	left: 0px;
	content: '';
	background: rgba(0, 0, 0, 0.7);
	z-index: 10;
}

.container>.timeline>ul>li>div>a.btn {
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 11;
	font-size: 0px;
	text-align: center;
	color: #999;
	overflow: hidden;
}

.container>.timeline>ul>li>div>a.btn::before {
	display: block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-family: 'xeicon' !important;
	content: "\e94a";
	font-size: 20px;
}

.container>.timeline>ul>li.placeholder {
	background: #eee7e3;
	box-sizing: border-box;
	position: relative;
}

.container>.timeline>ul>li.placeholder::before {
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	display: block;
	content: '';
	border: 2px dashed rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
}

.container>.timeline>ul>li.ui-sortable-helper {
	transform: scale(1.2);
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
}

.container>.timeline .btns {
	margin-top: 15px;
	position: relative;
	padding-right: 66px;
}

.container>.timeline .btns>p {
	padding: 5px 0px;
}

.container>.timeline .btns>p>span {
	font-size: 13px;
	color: #999;
	display: block;
	line-height: 16px;
}

.container>.timeline .btns>p>b {
	font-size: 24px;
	color: #FD747A;
	display: block;
	line-height: 30px;
	font-weight: 500;
}

.container>.timeline .btns>a {
	margin-top: 0px;
}

.container>.timeline .btns>a.add_btns {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 56px;
	height: 56px;
	background: #999;
	display: block;
	font-size: 0px;
	overflow: hidden;
}

.container>.timeline .btns>a.add_btns::before {
	display: block;
	width: 56px;
	height: 56px;
	line-height: 56px;
	font-family: 'xeicon' !important;
	content: "\e949";
	font-size: 26px;
}

.container>.timeline .btns>a.add_btns.opened {
	background: #00090d;
}

.container>.timeline .btns>a.add_btns.opened::before {
	content: "\e921";
}

.container>.timeline .btns>a.add_btns+div {
	display: none;
}

.container>.timeline .btns>a.add_btns.opened+div {
	display: block;
	position: absolute;
	bottom: 65px;
	right: 0px;
	background: #00090d;
	z-index: 19;
	border-radius: 5px;
}

.container>.timeline .btns>a.add_btns.opened+div:after, .container>.timeline .btns>a.add_btns.opened+div:before
	{
	bottom: -18px;
	margin-bottom: 0px;
	right: 28px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.container>.timeline .btns>a.add_btns.opened+div:after {
	border-color: transparent;
	border-top-color: #00090d;
	border-width: 10px;
	margin-right: -10px;
}

.container>.timeline .btns>a.add_btns.opened+div:before {
	border-color: transparent;
	border-top-color: #00090d;
	border-width: 10px;
	margin-right: -10px;
}

.container>.timeline .btns>a.add_btns.opened+div>a {
	display: block;
	line-height: 44px;
	font-size: 15px;
	padding: 0px 20px;
	color: #fff;
	text-align: right;
}

.container>.timeline .btns>a.add_btns.opened+div>a+a {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.tplan_btn {
	position: absolute;
	display:flex;
	height: auto !important;
	width: 100%;
	-webkit-box-shadow: 0px 3px 4px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 3px 4px 1px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 3px 4px 1px rgba(0, 0, 0, 0.1);
}

.tplan_btn>li {
	float: left;
	border-bottom: 0px !important;
	width: -webkit-calc(100%/ 4);
	width: -moz-calc(100%/ 4);
	width: calc(100%/ 4);
	text-align: center;
	display:flex !important;
	align-items:center;
	justify-content:center;
}

.tplan_btn>li>a {
	padding: 10px 0;
	display: inline-block;
	width: 100%;
}

.container>.subline {
	display: block;
	padding: 15px 15px;
}

.container>.subline>ul {
	display: block;
}

.container>.subline>ul>li {
	display: block;
	border: 1px solid #ddd;
	border-radius: 5px;
	overflow: hidden;
}

.container>.subline>ul>li+li {
	margin-top: 5px;
}

.container>.subline>ul>li>div {
	display: block;
	background: #fff;
	padding: 15px;
	padding-left: 30px;
	position: relative;
}

.container>.subline>ul>li>div.rest_time {
	background: #f8f8f8;
}

.container>.subline>ul>li>div>em {
	position: absolute;
	line-height: 18px;
	font-size: 12px;
	top: 0px;
	left: 0px;
	bottom: 0px;
	font-weight: 500;
	color: #999;
	background: #eee;
	width: 20px;
	text-align: center;
}

.container>.subline>ul>li>div>em::before {
	display: block;
	width: 20px;
	height: 75px;
	line-height: 75px;
	font-family: 'xeicon' !important;
	content: "\e949";
	font-size: 20px;
}

.container>.subline>ul>li>div>h5 {
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	position: relative;
	margin-bottom: 5px;
	padding-right: 80px;
	word-break: keep-all;
}

.container>.subline>ul>li>div>h5>b {
	display: block;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	vertical-align: bottom;
}

.container>.subline>ul>li>div>h5>span {
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	line-height: 20px;
	font-size: 12px;
	color: #666;
	font-weight: 400;
}

.container>.subline>ul>li>div.rest_time>h5 {
	display: none;
}

.container>.subline>ul>li>div>p {
	font-size: 0px;
	line-height: 20px;
	position: relative;
}

.container>.subline>ul>li>div>p>span {
	display: inline-block;
	font-size: 12px;
	line-height: 20px;
	color: #999;
	vertical-align: bottom;
}

.container>.subline>ul>li>div>p>span>b {
	font-weight: 500;
	line-height: 20px;
	display: inline-block;
	margin-left: 5px;
	vertical-align: bottom;
	font-size: 12px;
	color: #333;
}

.container>.subline>ul>li>div>p>span+span {
	margin-left: 15px;
}

.container>.subline>ul>li>div>.row_btns {
	
}

.container>.subline>ul>li>div.opened::before {
	position: absolute;
	bottom: 0px;
	right: 0px;
	top: 0px;
	left: 0px;
	content: '';
	background: rgba(0, 0, 0, 0.7);
	z-index: 10;
}

.container>.subline>ul>li>div>a.btn {
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 11;
	font-size: 0px;
	text-align: center;
	color: #999;
	overflow: hidden;
}

.container>.subline>ul>li>div>a.btn::before {
	display: block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-family: 'xeicon' !important;
	content: "\e921";
	font-size: 20px;
}

.container>.timeline>ul>li.placeholder {
	background: #eee7e3;
	box-sizing: border-box;
	position: relative;
}

.container>.timeline>ul>li.placeholder::before {
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	display: block;
	content: '';
	border: 2px dashed rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
}

.container>.timeline>ul>li.ui-sortable-helper {
	transform: scale(1.2);
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
}

.float_btns {
	position: fixed;
	bottom: 0px;
	padding: 15px;
	padding-right: 71px;
	background: #fff;
	z-index: 50;
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
	max-width: 1280px;
	min-width: 320px;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
}

.float_btns.fl {
	padding-right: 15px;
}

.float_btns>a {
	display: block;
	background: #50CCC6;
	color: #fff;
	width: 100%;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	margin-top: 0px;
	letter-spacing: -1px;
}

.float_btns>a>em {
	display: inline-block;
	font-size: 18px;
	font-weight: 400;
	height: 50px;
	line-height: 50px;
	vertical-align: bottom;
	margin-left: 10px;
}

.float_btns>a.purple {
	background: #d394f0;
}

.float_btns>a.navy {
	background: #382063;
}

.float_btns.flex {
	display: flex;
	justify-content: space-between;
	padding-right: 15px;
}

.float_btns .btn_group_add {
	width: calc(50% - 5px);
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 500;
	background: #50CCC6;
	color: #fff;
	display: inline-block;
}

.float_btns>a.add_btns {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 50px;
	height: 50px;
	background: #999;
	display: block;
	font-size: 0px;
	overflow: hidden;
}

.float_btns>a.add_btns {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 50px;
	height: 50px;
	background: #999;
	display: block;
	font-size: 0px;
	overflow: hidden;
}

.float_btns>a.add_btns::before {
	display: block;
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-family: 'xeicon' !important;
	content: "\e949";
	font-size: 26px;
}

.float_btns>a.add_btns.opened {
	background: #00090d;
}

.float_btns>a.add_btns.opened::before {
	content: "\e921";
}

.float_btns>a.add_btns+div {
	display: none;
}

.float_btns>a.add_btns.opened+div {
	display: block;
	position: absolute;
	bottom: 75px;
	right: 15px;
	background: #00090d;
	z-index: 19;
	border-radius: 5px;
}

.float_btns>a.add_btns.opened+div:after, .float_btns>a.add_btns.opened+div:before
	{
	bottom: -18px;
	margin-bottom: 0px;
	right: 25px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.float_btns>a.add_btns.opened+div:after {
	border-color: transparent;
	border-top-color: #00090d;
	border-width: 10px;
	margin-right: -10px;
}

.float_btns>a.add_btns.opened+div:before {
	border-color: transparent;
	border-top-color: #00090d;
	border-width: 10px;
	margin-right: -10px;
}

.float_btns>a.add_btns.opened+div>a {
	display: block;
	line-height: 44px;
	font-size: 14px;
	padding: 0px 20px;
	color: #fff;
	text-align: center;
}

.float_btns>a.add_btns.opened+div>a+a {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.float_btns>a.add_schedule {
	display: block;
	background: #d394f0;
	color: #fff;
	width: 100%;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	margin-top: 0px;
	letter-spacing: -1px;
}

.float_btns>a.add_schedule+div {
	display: none;
}

.float_btns>a.add_schedule.opened {
	background: #999;
}

.float_btns>a.add_schedule.opened+div {
	display: block;
	position: absolute;
	bottom: 65px;
	right: 0px;
	left: 0px;
	background: #fff;;
	z-index: 19;
	font-size: 0px;
	padding: 10px 15px;
	margin-left: -5px;
}

.float_btns>a.add_schedule.opened+div>a {
	display: inline-block;
	width: calc(20% - 5px);
	margin-left: 5px;
	line-height: 40px;
	height: 40px;
	font-size: 14px;
	padding: 0px 0px;
	color: #fff;
	text-align: center;
	background: #999;
	vertical-align: top;
	border-radius: 5px;
}

.float_btns>a.add_schedule.opened+div>a[data-role='ON-A'] {
	background: rgba(207, 125, 154, 0.6);
}

.float_btns>a.add_schedule.opened+div>a[data-role='ON-L'] {
	background: rgba(0, 146, 114, 0.6);
}

.float_btns>a.add_schedule.opened+div>a[data-role='OFF-A'] {
	background: rgba(90, 197, 220, 0.6);
}

.float_btns>a.add_schedule.opened+div>a[data-role='OFF-L'] {
	background: rgba(202, 175, 0, 0.6);
}

.float_btns>a.add_schedule.opened+div>a[data-role='ETC'] {
	background: rgba(159, 162, 167, 0.6);
}

.schedule_box>dl {
	display: block;
	padding-left: 70px;
	font-size: 0px;
}

.schedule_box>dl>dd {
	display: inline-block;
	width: calc(100%/ 7);
	line-height: 60px;
	height: 60px;
	text-align: center;
	color: #999;
}

.checkin_summary {
	display: block;
	padding: 15px;
	font-size: 0px;
}

.checkin_summary>.place {
	display: block;
	vertical-align: top;
	position: relative;
}

.checkin_summary>.place>i {
	display: inline-block;
	font-size: 12px;
	color: #fff;
	line-height: 16px;
	padding: 0px 5px;
	margin-left: -5px;
	transform: rotate(-5deg);
}

.checkin_summary>.place>h3 {
	display: block;
	font-size: 16px;
	color: #111;
	font-weight: 500;
	line-height: 20px;
	margin-top: 3px;
}

.checkin_summary>.place>p {
	display: block;
	font-size: 13px;
	color: #888;
	font-weight: 400;
	line-height: 16px;
	margin-top: 5px;
}

.checkin_summary>.place>p>span {
	display: inline-block;
	color: #999;
	line-height: 16px;
	font-size: 12px;
	vertical-align: bottom;
	margin-right: 5px;
}

.checkin_summary>.place>span {
	display: block;
	font-size: 13px;
	color: #888;
	font-weight: 400;
	line-height: 20px;
	margin-top: 0px;
	position: absolute;
	top: 0px;
	right: 0px;
	text-align: right;
}

.checkin_summary>.place>span>b {
	font-size: 14px;
	font-weight: 400;
	display: block;
	line-height: 20px;
	margin-top: 0px;
	color: #666;
}

.checkin_summary>.place>a {
	line-height: 38px;
	display: block;
	width: 90px;
	border-radius: 5px;
	text-align: center;
	color: #fff;
	font-size: 14px;
	position: absolute;
	top: 10px;
	right: 0px;
}

.checkin_summary>.place>a::before {
	content: '등원하기';
}

.checkin_summary>.place>a.checkin {
	background: rgba(0, 0, 0, 0.2) !important;
}

.checkin_summary>.place>a.checkin::before {
	content: '하원하기';
}

.checkin_summary>.place>a.setting {
	display: block;
	width: 40px;
	height: 40px;
	background: transparent !important;
	line-height: 40px;
	color: #666;
	font-size: 30px;
	position: absolute;
	top: 50%;
	margin-top: -20px;;
	right: 0px;
	font-family: 'xeicon' !important;
}

.checkin_summary>.place>a.setting::before {
	content: "\e986";
}

.checkin_summary>dl.spec {
	display: block;
	font-size: 0px;
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.checkin_summary>dl.spec>dd {
	display: inline-block;
	width: 33.3333%;
	vertical-align: top;
	line-height: 20px;
}

.checkin_summary>dl.spec>dd>i {
	display: block;
	vertical-align: top;
	line-height: 16px;
	min-width: 60px;
	color: #888;
	font-size: 12px;
	margin-bottom: 3px;
}

.checkin_summary>dl.spec>dd>span {
	display: block;
	vertical-align: top;
	line-height: 20px;
	min-width: 60px;
	font-size: 13px;
}

.checkin_summary>dl.spec>dd>span>b {
	font-weight: 500;
	font-size: 15px;
	line-height: 20px;
	display: inline-block;
	vertical-align: bottom;
}

.checkin_summary>dl.spec.rows>dd {
	width: auto;
	display: block;
}

.checkin_summary>dl.spec.rows>dd>i {
	display: inline-block;
	line-height: 20px;
	min-width: 60px;
	color: #888;
	font-size: 13px;
	margin-bottom: 3px;
}

.checkin_summary>dl.spec.rows>dd>span {
	float: right;
	text-align: right;
	display: inline-block;
	vertical-align: top;
	line-height: 20px;
	min-width: 60px;
	font-size: 13px;
}

.checkin_summary>dl.spec.rows>dd>span>b {
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	display: inline-block;
	vertical-align: bottom;
}

.checkin_summary[data-role='ON-A'] {
	background: rgba(207, 125, 154, 0.1);
}

.checkin_summary[data-role='ON-A']>.place>i {
	background: rgba(207, 125, 154, 0.9);
}

.checkin_summary[data-role='ON-A']>.place>a {
	background: rgba(207, 125, 154, 0.9);
}

.checkin_summary[data-role='ON-L'] {
	background: rgba(0, 146, 114, 0.1);
}

.checkin_summary[data-role='ON-L']>.place>i {
	background: rgba(0, 146, 114, 0.9);
}

.checkin_summary[data-role='ON-L']>.place>a {
	background: rgba(0, 146, 114, 0.9);
}

.checkin_summary[data-role='OFF-A'] {
	background: rgba(90, 197, 220, 0.1);
}

.checkin_summary[data-role='OFF-A']>.place>i {
	background: rgba(90, 197, 220, 0.9);
}

.checkin_summary[data-role='OFF-A']>.place>a {
	background: rgba(90, 197, 220, 0.9);
}

.checkin_summary[data-role='OFF-L'] {
	background: rgba(202, 175, 0, 0.1);
}

.checkin_summary[data-role='OFF-L']>.place>i {
	background: rgba(202, 175, 0, 0.9);
}

.checkin_summary[data-role='OFF-L']>.place>a {
	background: rgba(202, 175, 0, 0.9);
}

.checkin_summary[data-role='ETC'] {
	background: rgba(159, 162, 167, 0.1);
}

.checkin_summary[data-role='ETC']>.place>i {
	background: rgba(159, 162, 167, 0.9);
}

.checkin_summary[data-role='ETC']>.place>a {
	background: rgba(159, 162, 167, 0.9);
}

@media screen and (max-width: 480px) {
	.wrapper.login>section>.visual {
		padding: 200px 30px 40px;
	}
	.wrapper.login>section>.visual>h1 {
		right: 30px;
	}
	.wrapper.login>section .login {
		padding: 0px 30px;
	}
	.wrapper.join .step_wrapper .step_div {
		padding: 30px 30px;
	}
	.wrapper.forget .tab_wrapper>.tab_div {
		padding: 30px 30px;
	}
}

.screen .plan_detail {
	padding: 15px;
	background: #f2f2f2;
	position: relative;
	border-top: 1px solid #ddd;
	overflow: hidden;
}

.screen .plan_detail>em {
	position: absolute;
	top: 15px;
	right: 15px;
	display: block;
	line-height: 18px;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	background: #bbb;
	width: 36px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	text-align: center;
	border-radius: 3px;
}

.screen .plan_detail>em[data-type='1'] {
	background: #50CCC6;
}

.screen .plan_detail>em[data-type='4'] {
	background: #FD747A;
}

.screen .plan_detail>em[data-type='7'] {
	background: #00CC66;
}

.screen .plan_detail>h5 {
	font-size: 16px;
	font-weight: 500;
	line-height: 26px;
	position: relative;
	padding-right: 80px;
	word-break: keep-all;
}

.screen .plan_detail>span {
	display: inline-block;
	line-height: 18px;
	font-size: 13px;
	color: #666;
	font-weight: 400;
	width: calc(100% - 120px);
	text-align: right;
	float: right;
	padding-top: 5px;
}

.screen .plan_detail>p {
	font-size: 14px;
	line-height: 26px;
	position: relative;
	color: #999;
	display: inline-block;
}

.screen .plan_detail>p>b {
	font-weight: 500;
	font-size: 15px;
}

.screen .checkin_summary {
	display: block;
	padding: 15px;
	font-size: 0px;
}

.screen .checkin_summary>.place {
	display: block;
	vertical-align: top;
	position: relative;
}

.screen .checkin_summary>.place>p {
	display: block;
	font-size: 13px;
	color: #888;
	font-weight: 400;
	line-height: 20px;
	margin-top: 0px;
	position: absolute;
	top: 0px;
	right: 0px;
	text-align: right;
}

.screen .checkin_summary>.place>p>b {
	font-size: 14px;
	font-weight: 400;
	display: block;
	line-height: 20px;
	margin-top: 0px;
	color: #666;
}

.screen .checkin_summary>.place>a {
	line-height: 38px;
	background: rgba(0, 0, 0, 0.2);
	display: block;
	width: 90px;
	border-radius: 5px;
	text-align: center;
	color: #fff;
	font-size: 14px;
}

.screen .field {
	border: 1px solid #ccc;
	border-radius: 5px;
	position: relative;
	overflow: hidden;
	background: #f8f8f8;
}

.screen .field+.field {
	margin-top: 10px;
}

.screen .field::before {
	font-family: 'xeicon' !important;
	width: 50px;
	height: 26px;
	line-height: 26px;
	position: absolute;
	top: 11px;
	left: 0px;
	text-align: center;
	font-size: 26px;
	color: #999;
}

.screen .field.cert {
	display: none;
}

.screen .field.cert>.time {
	font-size: 13px;
	color: #999;
	display: inline-block;
	position: absolute;
	top: 11px;
	right: 85px;
	line-height: 26px;
}

.screen .field>input[type=text], .screen .field>input[type=password] {
	display: block;
	width: 100%;
	padding: 0px 15px;
	line-height: 48px;
	height: 48px;
	box-sizing: border-box;
}

.screen .field.select:after {
	font-family: FontAwesome;
	content: "\f107";
	vertical-align: middle;
	position: absolute;
	top: 0px;
	right: 10px;
	display: block;
	color: #999;
	font-size: 15px;
	height: 48px;
	line-height: 48px;
	z-index: 1;
}

.screen .field.select>select {
	display: block;
	width: 100%;
	padding: 0px 15px;
	line-height: 48px;
	height: 48px;
	box-sizing: border-box;
}

.screen .field.id>input, .screen .field.pw>input {
	padding-left: 50px;
}

.screen .field.id::before {
	content: "\e9f5";
}

.screen .field.pw::before {
	content: "\e966";
}

.screen .field>.radio {
	position: absolute;
	top: 7px;
	right: 7px;
	font-size: 0px;
}

.screen .field>.radio>label {
	padding: 0px 0px;
	height: 34px;
	color: #999;
	text-align: center;
	line-height: 34px;
	width: auto;
}

.screen .field>.radio>label>input[type=radio]+span {
	display: block;
	line-height: 34px;
	font-size: 14px;
	margin-left: 0px;
	background: #999;
	color: #fff;
	padding: 0px 20px;
}

.screen .field>.radio>label>input[type=radio]+span:before {
	display: none !important;
}

.screen .field>.radio>label>input[type=radio]:checked+span {
	background: #00090d;
}

.screen .field>button {
	position: absolute;
	top: 7px;
	right: 7px;
	font-size: 14px;
	padding: 0px 20px;
	height: 34px;
	color: #fff;
	text-align: center;
	line-height: 34px;
	display: block;
	background: #00090d;
}

.screen .rest_type .plan_set {
	background: #fff;
}

.screen .plan_set {
	padding: 15px;
	background: #f2f2f2;
}

.screen .plan_set .set_box .field_trans.select::after {
	color: #00090d;
	z-index: 1;
}

.screen .rest_time_set .plan_set {
	display: none;
}

.set_box {
	display: block;
	text-align: left;
	font-size: 0px;
}

.set_box.hide {
	display: none;
}

.set_box+.set_box {
	margin-top: 20px;
}

.set_box.bl {
	margin-top: 10px;
}

.set_box.dir {
	padding-top: 30px;
}

.set_box.dir .field_trans+p {
	margin-top: 30px;
}

.set_box.dir .field_trans_Wrap+p {
	margin-top: 30px;
}

.set_box.dir .field_trans+p>.ammount_type {
	font-size: 12px;
	font-weight: 400;
	float: right;
}

.set_box.dir .field_trans+p>.red {
	color: red;
	font-size: 12px;
	margin-left: 10px;
}

p.except_view {
	background: #bbb;
	color: #fff !important;
	width: 100%;
	margin-top: 5px;
	padding: 5px;
	box-sizing: border-box;
}

.set_box.dir .th {
	margin-bottom: 30px;
	margin-top: 30px;
	padding-left: 140px;
	position: relative;
}

.set_box.dir .th>.cover {
	position: absolute;;
	top: 0px;
	left: 0px;
	width: 120px;
	height: 152px;
	overflow: hidden;
	background: url(../images/no_img.gif) #f2f2f2 no-repeat center;
	background-size: contain;
}

.set_box.dir .th>.cover::before {
	position: absolute;
	top: 30px;
	left: 50%;
	line-height: 20px;
	width: 50px;
	margin-left: -25px;
	font-size: 14px;
	content: '표지';
	text-align: center;
	color: #bbb;
}

.set_box.dir .th>.cover>[type=file] {
	line-height: 152px;
	height: 152px;
	width: 120px;
	font-size: 152px;
	opacity: 0;
}

.set_box p {
	color: #bbb;
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 5px;
}

.set_box .field_trans {
	border-bottom: 1px solid #ccc;
	border-radius: 0px;
	position: relative;
	overflow: hidden;
	width: 110px;
	display: inline-block;
	position: relative;
	vertical-align: middle;
}

.set_box .field_trans.time {
	width: calc(50% - 15px);
}

.set_box .field_trans.select {
	width: calc(50% - 15px);
}

.set_box .field_trans.term {
	width: calc(50% - 15px);
}

.set_box .field_trans.select+.field_trans.term {
	margin-left: 30px;
	overflow: visible;
}
/* .set_box .field_trans.select + .field_trans.term::before { width:30px;display:block;line-height:40px;height:40px;font-size:18px;font-weight:500;content: '~';position: absolute;left:-30px;top:0px;text-align:center;} */
.set_box .field_trans.select+.field_trans.term::before {
	width: 30px;
	display: block;
	line-height: 40px;
	height: 40px;
	font-size: 18px;
	font-weight: 500;
	content: '';
	position: absolute;
	left: -30px;
	top: 0px;
	text-align: center;
}

.set_box .field_trans.split {
	width: 50%;
}

.set_box .field_trans.chkbox_tr {
	width: 100%;
	border: 0px;
}

.set_box .field_trans.split>em {
	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
	padding-right: 0px;
	font-size: 12px;
	line-height: 40px;
	color: #bbb;
}

.set_box .field_trans.date {
	width: 150px;
}

.set_box .field_trans.type {
	width: 200px
}

.set_box .field_trans.code {
	width: 50%;
}

.set_box .field_trans.tit {
	width: 100%;
}

.set_box .field_trans.input {
	width: calc(50% - 15px);
}

.set_box .field_txt.type2 {
	font-size: 15px;
}

.set_box .field_trans.checkbox {
	border-bottom: 0px;
	width: 100%;
}

.set_box .field_trans.checkbox>label {
	display: block;
}

.set_box .field_trans.checkbox>label:not(:last-child) {
	margin-bottom: 5px;
}

.set_box .field_trans.checkbox.row2>label {
	width: calc(50% - 22px);
	display: inline-block;
}

.set_box .field_trans.checkbox.row4>label {
	width: calc(( 100%/ 4)- 23px);
	display: inline-block;
}

.set_box .field_trans.checkbox.noMargin>label {
	margin-bottom: 0px !important;
}

/* 2022.11.29 추가 selet Box 값들 check Box로 변경 */
.set_box .field_trans.checkbox.row5>label {
	width: calc(( 100%/ 5)- 23px);
	display: inline-block;
}

.set_box.row_c2 {
	width: calc(50% - 2px);
	display: inline-block;
}
/* 끝 */

/* 2022.01.04 변경 */
.set_box .field_trans.dir {
	width: 100%;
}
/* 끝 */

/* 2022.08.02 추가 */
.btn_except {
	float: right;
	border-radius: 5px;
}

.btn_except_update {
	height: 40px;
	background: #382063;
	color: #fff;
	padding: 0 20px;
	font-size: 14px;
	float: left;
	border-radius: 5px;
}

.exceptClose {
	height: 40px;
	background: #c0c0c0;
	color: #fff;
	padding: 0 20px;
	font-size: 14px;
	float: left;
	border-radius: 5px;
}

.wr {
	width: calc(100% - 140px) !important;
}

.btn {
	font-size: 14px;
	border-radius: 5px;
	padding: 0 20px;
	display: inline-block;
}

.btn.sizeSSS {
	height: 25px;
	font-size: 13px;
}

.btn.sizeSS {
	height: 30px;
}

.btn.sizeM {
	height: 40px;
	line-height: 40px;
}

.btn.bgMain {
	background: #50CCC6;
	color: #fff;
}

.btn.bdMain {
	border: 1px solid #50CCC6;
	color: #50CCC6;
}

.btn.bdSub {
	border: 1px solid #c0c0c0;
	color: #c0c0c0;
}
/* 끝 */

/* 2022.12.13 추가 */
.btn_add_bookUnit {
	height: 40px;
	background: #382063;
	color: #fff;
	padding: 0 20px;
	font-size: 14px;
	float: right;
	border-radius: 5px;
}

.dv {
	width: calc(100% - 140px) !important;
}
/* 끝 */
.set_box .field_trans.date:after {
	font-family: 'xeicon' !important;
	content: "\e9a4";
	vertical-align: middle;
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	color: #bbb;
	font-size: 20px;
	height: 40px;
	line-height: 40px;
	z-index: 1;
}

.set_box .field_trans.time:after {
	font-family: 'xeicon' !important;
	content: "\ea2c";
	vertical-align: middle;
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	color: #bbb;
	font-size: 20px;
	height: 40px;
	line-height: 40px;
	z-index: 1;
}

.set_box .field_trans.term:after {
	font-family: 'xeicon' !important;
	content: "\ea2c";
	vertical-align: middle;
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	color: #bbb;
	font-size: 20px;
	height: 40px;
	line-height: 40px;
	z-index: 1;
}

.set_box .field_txt {
	width: auto;
	display: inline-block;
	position: relative;
	font-size: 24px;
	padding: 0px 0px;
	width: 30px;
	text-align: center;
	line-height: 40px;
	height: 40px;
	vertical-align: middle;
}

.set_box .field_exp {
	width: auto;
	display: inline-block;
	position: relative;
	font-size: 16px;
	padding: 0px 0px;
	line-height: 40px;
	height: 40px;
	vertical-align: middle;
	margin-left: 10px;
}

.set_box .field_trans.number {
	padding-right: 40px;
}

.set_box .field_trans>input[type=text] {
	display: block;
	width: 100%;
	padding: 0px 0px;
	line-height: 40px;
	height: 40px;
	box-sizing: border-box;
	text-align: left;
	font-size: 16px;
	font-weight: 400;
}

.set_box .field_trans>input[type=number] {
	display: block;
	width: 100%;
	padding: 0px 0px;
	line-height: 40px;
	height: 40px;
	box-sizing: border-box;
	text-align: center;
	font-size: 16px;
	font-weight: 400;
}

.set_box .field_trans>input[type=number].left {
	text-align: left;
}

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button
	{
	-webkit-appearance: none;
	margin: 0;
}

.set_box .field_trans>input[type=date] {
	display: block;
	width: 100%;
	padding: 0px 0px;
	line-height: 40px;
	height: 40px;
	box-sizing: border-box;
	text-align: left;
	font-size: 16px;
	font-weight: 400;
	position: relative;
	z-index: 2;
	background: white;
}

.set_box .field_trans>input[type="date"]::-webkit-calendar-picker-indicator {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; cursor: pointer;  color: transparent; background-size: auto; background-position: right;}

.set_box .field_trans>input[type=time] {
	display: block;
	width: 143%;
	padding: 0px 0px;
	line-height: 40px;
	height: 40px;
	box-sizing: border-box;
	text-align: left;
	font-size: 16px;
	font-weight: 400;
	position: relative;
	z-index: 2;
}

@media screen and (max-width:360px) {
	.set_box .term_pick.disabled .field_trans:after {
		display: none;
	}
	.set_box .field_trans.term:after {
		display: none;
	}
}

.set_box .term_pick.disabled .field_trans {
	background: #fff;
	border-bottom: 1px solid #fff;
}

.set_box .term_pick.disabled .field_trans>select {
	color: #ccc;
}

.set_box .term_pick.disabled .field_trans>input[type=time] {
	color: #ccc;
}

.set_box .term_pick.disabled .field_trans:after {
	color: #ddd;
}

.set_box .term_pick.disabled .field_trans.term+.field_trans.term::before
	{
	color: #ddd;
}

.field_trans_Wrap>.field_trans.select+.field_trans.select {
	margin-left: 20px;
}

.set_box .field_trans.select::after {
	font-family: FontAwesome;
	/* content: "\f107"; */
	vertical-align: middle;
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	color: #999;
	font-size: 15px;
	height: 40px;
	line-height: 40px;
	z-index: 1;
}

.set_box .field_trans.select>select {
	display: block;
	width: 100%;
	padding: 0px 0px;
	line-height: 40px;
	height: 40px;
	box-sizing: border-box;
	font-size: 16px;
	font-weight: 400;
	z-index: 2;
	position: relative;
	letter-spacing: -0.5px;
}

.set_box .field_trans>button {
	position: absolute;
	right: 5px;
	background: #fff;
	border: 1px solid #ddd;
	width: 40px;
	height: 24px;
	border-radius: 3px;
	font-family: 'xeicon' !important;
	font-size: 16px;
}

.set_box .field_trans>button[data-role="up"] {
	top: 5px;
}

.set_box .field_trans>button[data-role="up"]::before {
	content: "\e945";
}

.set_box .field_trans>button[data-role="down"] {
	bottom: 5px;
}

.set_box .field_trans>button[data-role="down"]::before {
	content: "\e942";
}

.set_box .chkbox_tb {
	max-height: 320px;
	overflow: hidden;
	overflow-y: auto;
	font-size: 0px;
	margin-left: -2px;
	margin-top: 13px;
}

.set_box .chkbox_tb>label {
	display: inline-block;
	width: calc(20% - 2px);
	line-height: 30px;
	height: 30px;
	vertical-align: top;
	padding: 0px;
	margin: 0px;
	margin-top: 2px;
	margin-left: 2px;
}

.set_box .chkbox_tb>label+label {
	margin-left: 2px;
}

.set_box .chkbox_tb>label>input[type=checkbox]+span {
	display: block;
	line-height: 30px;
	height: 30px;
	font-size: 13px;
	margin-left: 0px;
	background: #ddd;
	color: #999;
	padding: 0px 0px;
	position: relative;
	border-radius: 5px;
	text-align: center;
}

.set_box .chkbox_tb>label>input[type=checkbox]+span::before {
	display: none;
}

.set_box .chkbox_tb>label>input[type=checkbox]:checked+span {
	background: #999;
}

.set_box .chkbox_tb>label>input[type=checkbox]:checked+span::after {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	line-height: 30px;
	height: 30px;
	color: #fff;
	content: '제외'
}

.set_box .chkbox_tr {
	
}

.set_box .chkbox_tr>label {
	display: block;
	padding: 5px 0px;
	padding-left: 24px;
	height: 24px;
	line-height: 24px;
}

.set_box .chkbox_tr>label+label {
	margin-top: 0px;
}

.set_box .chkbox_tr>label>input[type=radio]+span {
	line-height: 24px;
	font-size: 15px;
}

.set_box .chkbox_tr>label>input[type=radio]+span>em {
	dipslay: inline-block;
	line-height: 24px;
	vertical-align: bottom;
	font-size: 14px;
	margin-left: 10px;
}

.set_box .chkbox_tr>label>input[type=radio]+span:before {
	width: 22px;
	height: 22px;
	top: 5px;
}

.set_box .chkbox_tr>label>input[type=radio]:checked+span:before {
	font-size: 22px;
	line-height: 22px;
}

.set_box .chkbox_tr.st2 label {
	float: left;
	width: calc(50% - 24px);
}

.set_box .chkbox_tr>.plan_set2 {
	background: #eee;
	margin-top: 15px;
}

.plan_set2 {
	padding: 15px;
	background: #fff;
}

.plan_set2.disabled {
	display: none;
}

.plan_set2>label {
	width: calc(50% - 30px);
	color: black;
}
/*
.plan_set2 > label:first-of-type{width:calc(30% - 14px);}
.plan_set2 > label:last-of-type{width:calc(40% - 30px);}
*/
.set_box .chkbox_tr>.plan_set2>.plan_set_box {
	background: #fff;
}

.plan_set2>.plan_set_box {
	background: #eee;
	margin-top: 15px;
	padding: 10px;
	line-height: 50px;
	height: 50px;
	text-align: center;
}

.plan_set2>.plan_set_box.disabled {
	display: none;
}

.plan_set2>.plan_set_box>.text_box {
	display: inline-block;
	padding-right: 10px;
}

.plan_set2>.plan_set_box>.field {
	display: inline-block;
	width: 50px;
	top: 10px;
}

.plan_set2>.plan_set_box>.field>input[type=text] {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	text-align: center;
}

.set_box.divide .field_trans.select {
	width: 100%;
	overflow: visible;
}

.set_box.divide .field_trans.select::after {
	display: none;
}

.set_box.divide .field_trans.select .select_box {
	width: 90px;
}

/* 2022-12-16 추가 */
.set_box.bkUnit .field_trans.select {
	width: 100%;
	overflow: visible;
}

.set_box.bkUnit .field_trans.select::after {
	display: none;
}

.set_box.bkUnit .field_trans.select .select_box {
	width: 90px;
}
/* end */
.set_box>.learning {
	width: 50%;
	display: inline-block;
}

.set_box>.learning>.field_trans.date {
	width: 95%;
}

.set_box>.learning.end.disabled>.field_trans.date>input {
	color: #ccc;
}

.screen .rest_box {
	margin-top: 15px;
}

.screen .rest_box>p {
	color: #999;
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 5px;
	padding: 0px 15px;
}

.screen .rest_box .set_box+.set_box {
	margin-top: 10px;
}

.screen .rest_type .plan_set {
	margin-top: 15px;
}

.screen .rest_type {
	display: block;
	background: #eee;
	padding: 15px;
}

.screen .rest_type>label {
	display: block;
	padding: 5px 0px;
	padding-left: 24px;
	height: 24px;
	line-height: 24px;
}

.screen .rest_type>label+label {
	margin-top: 0px;
}

.screen .rest_type>label>input[type=radio]+span {
	line-height: 24px;
	font-size: 15px;
}

.screen .rest_type>label>input[type=radio]+span:before {
	width: 22px;
	height: 22px;
	top: 5px;
}

.screen .rest_type>label>input[type=radio]:checked+span:before {
	font-size: 22px;
	line-height: 22px;
}
/* - 체크박스, 라디오버튼 CSS 설정 - */
.screen .grading {
	padding: 0px;
	width: 100%;
}

.screen .grading>.option {
	padding: 10px 15px;
	font-size: 0px;
	border-bottom: 1px solid #ddd;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	top: 69px;
	background: #f8f8f8;
	z-index: 19;
	max-width: 1280px;
	min-width: 320px;
	z-index: 8;
	box-sizing: border-box;
}

.screen .grading>.option>.chk {
	display: block;
	vertical-align: bottom;
	margin-left: -10px;
	margin-right: -10px;
}

.screen .grading>.option>.chk>label {
	padding: 0px 0px;
	color: #999;
	text-align: center;
	line-height: 40px;
	height: 40px;
	width: auto;
	min-width: 40px;
	overflow: visible;
}

.screen .grading>.option>.chk>label+label {
	margin-left: 0px;
}

.screen .grading>.option>.chk>label>input[type=radio]+span {
	display: block;
	line-height: 40px;
	font-size: 0px;
	margin-left: 0px;
	background: transparent;
	color: #bbb;
	padding: 0px 0px;
	position: relative;
	border-radius: 5px;
}

.screen .grading>.option>.chk>label>input[type=radio]+span::before {
	font-family: 'xeicon' !important;
	width: 100%;
	height: 40px;
	line-height: 40px;
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	font-size: 26px;
	border-radius: 5px;
	content: '';
}

.screen .grading>.option>.chk>label>input[type=radio][value=succ]+span::before
	{
	content: "\e9c6";
}

.screen .grading>.option>.chk>label>input[type=radio][value=fail]+span::before
	{
	content: "\e921";
}

.screen .grading>.option>.chk>label>input[type=radio][value=ahead]+span
	{
	font-size: 17px;
	color: #999;
	letter-spacing: -1px;
}

.screen .grading>.option>.chk>label>input[type=radio][value=ahead]+span::before
	{
	content: '';
}

.screen .grading>.option>.chk>label>input[type=radio][value=st_succ]+span
	{
	font-size: 17px;
	color: #999;
	letter-spacing: -1px;
}

.screen .grading>.option>.chk>label>input[type=radio][value=st_succ]+span::before
	{
	content: '';
}

.screen .grading>.option>.chk>label>input[type=radio][value=except]+span
	{
	font-size: 17px;
	color: #999;
	letter-spacing: -1px;
}

.screen .grading>.option>.chk>label>input[type=radio][value=except]+span::before
	{
	content: '';
}
/*.screen .grading > .option > .chk > label > input[type=radio][value=hold] + span { font-size:16px; }
.screen .grading > .option > .chk > label > input[type=radio][value=hold] + span::after { content:''; }*/
.screen .grading>.option>.chk>label>input[type=radio]+span:before {
	border: 0px solid #ddd;
	background: transparent;
}

.screen .grading>.option>.chk>label>input[type=radio]+span>em {
	position: absolute;
	top: -2px;
	right: -2px;
	background: #999;
	line-height: 18px;
	height: 18px;
	min-width: 14px;
	padding: 0 2px;
	font-size: 10px;
	display: block;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	opacity: 0.6;
}

.screen .grading>.option>.chk>label>input[type=radio]+span>em::before {
	content: attr(data-cnt);
}

.screen .grading>.option>.chk>label>input[type=radio]+span>em[data-cnt="0"]
	{
	display: none;
}

.screen .grading>.option>.chk>label>input[type=radio][value=succ]:checked+span,
	.screen .grading>.option>.chk>label>input[type=radio][value=succ]:checked+span::before
	{
	color: #19ce60 !important;
	font-weight: 600;
}

.screen .grading>.option>.chk>label>input[type=radio][value=fail]:checked+span,
	.screen .grading>.option>.chk>label>input[type=radio][value=fail]:checked+span::before
	{
	color: #FD747A !important;
	font-weight: 600;
}

.screen .grading>.option>.chk>label>input[type=radio][value=ahead]:checked+span,
	.screen .grading>.option>.chk>label>input[type=radio][value=ahead]:checked+span::before
	{
	color: #1a73e8 !important;
	font-weight: 500;
}

.screen .grading>.option>.chk>label>input[type=radio][value=st_succ]:checked+span,
	.screen .grading>.option>.chk>label>input[type=radio][value=st_succ]:checked+span::before
	{
	color: #1a73e8 !important;
	font-weight: 500;
}
/*.screen .grading > .option > .chk > label > input[type=radio][value=hold]:checked + span { color:#7e00e4;font-weight:500; }*/
.screen .grading>.option>.chk>label>input[type=radio][value=succ]:checked+span>em
	{
	background: #19ce60;
}

.screen .grading>.option>.chk>label>input[type=radio][value=fail]:checked+span>em
	{
	background: #FD747A;
}

.screen .grading>.option>.chk>label>input[type=radio][value=ahead]:checked+span>em
	{
	background: #1a73e8;
}

.screen .grading>.option>.chk>label>input[type=radio]:checked+span::after
	{
	box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.screen .grading>.option a.filter {
	position: absolute;
	width: 40px;
	height: 40px;
	padding: 0px;
	top: 10px;
	right: 5px;
	line-height: 40px;
}

.screen .grading>.option a.filter>span {
	display: none
}

.screen .grading>.option a.filter:before {
	font-family: 'xeicon' !important;
	width: 40px;
	height: 40px;
	line-height: 40px;
	display: block;
	content: "\eb38";
	font-size: 28px;
	text-align: center;
}

.screen .grading>.option a.filter>em {
	position: absolute;
	top: 0px;
	right: 0px;
	background: #FD747A;
	line-height: 20px;
	height: 20px;
	min-width: 16px;
	padding: 0 2px;
	font-size: 11px;
	display: block;
	text-align: center;
	border-radius: 50%;
	color: #fff;
}

.screen .grading>.option a.filter>em::before {
	content: attr(data-cnt);
}

.screen .grading>.option a.filter>em[data-cnt="0"] {
	display: none;
}

.screen .grading>.option .btn_right {
	position: absolute;
	width: auto;
	height: 40px;
	padding: 0px;
	top: 10px;
	right: 25px;
	line-height: 40px;
	font-size: 0px;
}

.screen .grading>.option .btn_right.st2 {
	right: 10px;
}

.screen .grading>.option .btn_right>button {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 5px;
	font-size: 15px;
	color: #999;
}

.screen .grading>.option .btn_right>label {
	padding: 0px 0px;
	color: #999;
	text-align: center;
	line-height: 40px;
	height: 40px;
	width: auto;
	min-width: 40px;
	overflow: visible;
}

.screen .grading>.option .btn_right>label+label {
	margin-left: 0px;
}

.screen .grading>.option .btn_right>label>input[type=radio]+span {
	display: block;
	line-height: 40px;
	font-size: 0px;
	margin-left: 0px;
	background: transparent;
	color: #bbb;
	padding: 0px 0px;
	position: relative;
	border-radius: 5px;
}

.screen .grading>.option .btn_right>label>input[type=radio][value=except]+span
	{
	font-size: 15px;
	color: #999;
	letter-spacing: -1px;
}

.screen .grading>.option .btn_right>label>input[type=radio][value=init]+span
	{
	font-size: 15px;
	color: #999;
	letter-spacing: -1px;
}

.screen .grading>.option .btn_right>label>input[type=radio]+span::before
	{
	content: '';
	border: 0px solid #ddd;
	background: transparent;
}

.screen .grading>.option .btn_right>label>input[type=radio]:checked+span,
	.screen .grading>.option .btn_right>label>input[type=radio]:checked+span::before
	{
	color: #7e00e4 !important;
	font-weight: 500;
	text-decoration: underline;
}

.screen .grading>.option .btn_right>label>input[type=radio]+span>em {
	position: absolute;
	top: -2px;
	right: -2px;
	background: #999;
	line-height: 18px;
	height: 18px;
	min-width: 14px;
	padding: 0 2px;
	font-size: 10px;
	display: block;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	opacity: 0.6;
}

.screen .grading>.option .btn_right>label>input[type=radio]+span>em::before
	{
	content: attr(data-cnt);
}

.screen .grading>.option .btn_right>label>input[type=radio]+span>em[data-cnt="0"]
	{
	display: none;
}

.screen .grading>.option .btn_right>button::after {
	width: 100%;
	height: 40px;
	line-height: 40px;
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	font-size: 26px;
	border-radius: 5px;
	content: '';
}

.screen .grading>.option .btn_right>button.selected {
	color: #7e00e4;
	font-weight: 500;
	text-decoration: underline;
}

.screen .grading>.option .btn_right>button>em {
	position: absolute;
	top: -2px;
	right: -2px;
	background: #999;
	line-height: 18px;
	height: 18px;
	min-width: 14px;
	padding: 0 2px;
	font-size: 10px;
	display: block;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	opacity: 0.6;
}

.screen .grading>.option .btn_right>button>em::before {
	content: attr(data-cnt);
}

.screen .grading>.option .btn_right>button>em[data-cnt="0"] {
	display: none;
}

.screen .grading>.option .btn_right>button.selected>em {
	background: #7e00e4;
}

/* 2023.01.26 추가_1 */
.screen .grading>.option>.grading_detail.type2 {
	overflow-x: auto;
}
/* end */
.screen .grading>.option>.grading_detail {
	display: none;
	font-size: 0px;
	margin-top: 5px;
	padding-top: 10px;
	border-top: 1px solid #eee;
}

.screen .grading>.option>.grading_detail.show {
	display: block;
}
/* .screen .grading > .option > .grading_detail > .opt_box { display:block;margin-left:-5px;font-size:0px;} */
/* .screen .grading > .option > .grading_detail > .opt_box > label {  padding:0px 0px; height:34px; color:#999; text-align:center; line-height:34px; width:calc( 25% - 5px );margin-left:5px !important;overflow: visible;} */
/* 2023.01.26 추가_2 */
.screen .grading>.option>.grading_detail>.opt_box {
	display: flex;
	font-size: 0px;
}

.screen .grading>.option>.grading_detail>.opt_box>label {
	padding: 0px 0px;
	height: 34px;
	color: #999;
	text-align: center;
	line-height: 34px;
	width: calc(100%/ 4);
	min-width: 100px;
}
/* end */
.screen .grading>.option>.grading_detail>.opt_box>label+label {
	margin-left: 5px;
}

.screen .grading>.option>.grading_detail>.opt_box>label>input[type=radio]+span
	{
	display: block;
	line-height: 34px;
	font-size: 13px;
	margin-left: 0px;
	background: #eee;;
	color: #bbb;
	padding: 0px 0px;
	position: relative;
	border-radius: 5px;
}

.screen .grading>.option>.grading_detail>.opt_box>label>input[type=radio]+span::after
	{
	width: 100%;
	height: 34px;
	line-height: 34px;
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	font-size: 26px;
	border-radius: 5px;
	content: '';
}

.screen .grading>.option>.grading_detail>.opt_box>label>input[type=radio]+span::before
	{
	display: none !important;
}

.screen .grading>.option>.grading_detail>.opt_box>label>input[type=radio]:checked+span
	{
	background: #666;
	color: #fff;
	font-weight: 500;
}

.screen .grading>.option>dl>dd {
	display: inline-block;
	width: 23%;
	margin-top: 10px;
	margin-left: 2%;
}

.screen .grading>.option>dl>dd>a {
	margin: 0px;
	display: block;
	line-height: 40px;
	text-align: center;
	background: #eee;
}

.screen .grading>.question {
	padding: 75px 15px 15px 15px;
	position: relative;
	margin-left: -2px;
	margin-top: -2px;
}

.screen .grading>.question.detail {
	padding-top: 125px;
}

.screen .grading>.question>p {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 5px;
	color: #999;
}

.screen .grading>.question>ul {
	display: block;
	font-size: 0px;
}

.screen .grading>.question>ul+p {
	margin-top: 15px;
}
/* .screen .grading > .question > ul > li { display:inline-block;width:calc((100% / 2) - 2px); margin-left:2px;margin-top:2px;vertical-align: bottom;} */
/* 2023.01.26 추가_3 */
.screen .grading>.question>ul>li {
	display: inline-block;
	width: calc(( 100%/ 5)- 2px);
	margin-left: 2px;
	margin-top: 2px;
	vertical-align: bottom;
}
/* end */
.screen .grading>.question>ul>li>a {
	display: block;
	background: #eee;
	padding: 7px;
	position: relative;
	box-sizing: border-box;
	border: 2px solid #eee;
	overflow: hidden;
}

.screen .grading>.question>ul>li>a::before {
	position: absolute;
	bottom: 7px;
	right: 7px;
	font-family: 'xeicon' !important;
	width: 15px;
	height: 15px;
	line-height: 15px;
	display: block;
	content: "";
	font-size: 15px;
	text-align: center;
}
/* .screen .grading > .question > ul > li > a::after {position: absolute;top:-14px;right:-14px;width:40px;height:20px;display:block;content: "";font-size:15px;text-align:center;background: transparent;z-index: 1;transform: rotate( 30deg );} */
.screen .grading>.question>ul>li>a>span {
	font-size: 12px;
	display: block;
	line-height: 15px;
	height: 15px;
	letter-spacing: -0.5px;
	font-weight: 300;
	z-index: 2;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.screen .grading>.question>ul>li>a>b {
	font-size: 13px;
	display: block;
	line-height: 15px;
	height: 15px;
	margin-top: 5px;
	color: #666 !important;
	font-weight: 400;
	letter-spacing: -0.5px;
	z-index: 2;
	position: relative;
}
/* .screen .grading > .question > ul > li > a > em { font-size:12px;display:block;line-height:15px;height:15px;color:#111 !important;font-weight:400;letter-spacing: -0.5px; z-index: 2;position: absolute;bottom:7px;right:25px;} */
/* 2023.01.26 추가_4 */
.screen .grading>.question>ul>li>a>em {
	font-size: 12px;
	display: block;
	line-height: 15px;
	height: 15px;
	color: #111 !important;
	font-weight: 400;
	letter-spacing: -0.5px;
	z-index: 2;
	position: absolute;
	top: 7px;
	right: 7px;
}
/* end */
.screen .grading>.question>ul>li>a[data-result] {
	border: 2px solid #ddd;
}

.screen .grading>.question>ul>li>a[data-result=succ] {
	background: #fff;
	color: #19ce60;
	border: 2px solid #19ce60;
}

.screen .grading>.question>ul>li>a[data-result=succ]::before {
	content: '\e9c6';
}

.screen .grading>.question>ul>li>a[data-result=succ]::after {
	background: #19ce60;
}

.screen .grading>.question>ul>li>a[data-result=fail] {
	background: #fff;
	color: #FD747A;
	border: 2px solid #FD747A;
}

.screen .grading>.question>ul>li>a[data-result=fail]::before {
	content: '\e921';
}

.screen .grading>.question>ul>li>a[data-result=fail]::after {
	background: #FD747A;
}

.screen .grading>.question>ul>li>a[data-result=ahead] {
	background: #fff;
	color: #1a73e8;
	border: 2px solid #1a73e8;
}

.screen .grading>.question>ul>li>a[data-result=ahead]::before {
	content: '\e920';
}

.screen .grading>.question>ul>li>a[data-result=ahead]::after {
	background: #1a73e8;
}

.screen .grading>.question>ul>li>a[data-result=st_succ] {
	background: #fff;
	color: #1a73e8;
	border: 2px solid #1a73e8;
}

.screen .grading>.question>ul>li>a[data-result=st_succ]::before {
	content: '\e920';
}

.screen .grading>.question>ul>li>a[data-result=st_succ]::after {
	background: #1a73e8;
}

.screen .grading>.question>ul>li>a[data-reason='8'] {
	background: #ddd !important;
	color: #999;
}

.screen .grading>.question>ul>li>a[data-init='except'] {
	background: #ddd !important;
	color: #999;
	border: 2px solid #999;
}

.screen .grading>.question>ul>li>a[data-init='except']::after {
	background: #999;
}

.screen .grading>.question>ul>li>a[data-init='giveup'] {
	background: #ddd !important;
	color: #999;
	border: 2px solid #999;
} /*1복습포기*/
.screen .grading>.question>ul>li>a[data-init='giveup']::after {
	background: #999;
}

/*
.screen .grading > .question > ul > li > a[data-reason='8'] { background: #ddd !important; color:#999; border:2px solid #999; }
.screen .grading > .question > ul > li > a[data-reason='8']::after { background: #999;}

.screen .grading > .question > ul > li > a[data-reason='16'] { background: #ddd !important; color:#999; border:2px solid #999; } //복습포기
.screen .grading > .question > ul > li > a[data-reason='16']::after { background: #999;}
*/
/*
.screen .grading > .question > ul > li > a[data-result=hold] { background: #ddd;color:#7e00e4; }
.screen .grading > .question > ul > li > a[data-result=hold]::before { content: '\ea3c';}
*/
.screen .grading>.question>ul>li>a.order::after {
	content: '\ea7f';
	transform: rotate(30deg);
}

@media screen and (max-width: 374px) {
	.screen .grading>.question>ul>li {
		width: calc(33.3333% - 2px);
	}
}

.screen .btns {
	margin-top: 0px;
	font-size: 0px;
	border-top: 1px solid #ccc;
	padding: 15px;
}

.screen .btns.no_line {
	border-top: 0px;
}

.screen .btns.gray {
	background: #f2f2f2;
}

.screen .btns>button {
	display: inline-block;
	width: 70%;
	background: #382063;
	color: #fff;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}

.screen .btns>button.wid100 {
	width: 100%;
}

.screen .btns>button.delete {
	width: calc(30% - 10px);
	margin-right: 10px;
	background: #999;
	color: #fff;
}

.screen .btns>button.etcDelete {
	width: calc(100%);
	margin-right: 10px;
	background: #999;
	color: #fff;
}

.screen .btns>a {
	display: block;
	background: #50CCC6;
	color: #fff;
	width: 100%;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	margin-top: 10px;
	letter-spacing: -1px;
}

.screen .float_btns {
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin-top: 0px;
	font-size: 0px;
	padding: 15px;
	background: #fff;
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
	transform: translateX(0%);
}

.screen .float_btns.gray {
	background: #f2f2f2;
}

.screen .float_btns>button {
	display: inline-block;
	width: 70%;
	background: #382063;
	color: #fff;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}

.screen .float_btns>button.delete {
	width: calc(30% - 10px);
	margin-right: 10px;
	background: #999;
	color: #fff;
}

.screen .float_btns>a {
	display: block;
	background: #50CCC6;
	color: #fff;
	width: 100%;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	margin-top: 10px;
	letter-spacing: -1px;
}

.schedule .fixed_btns {
	position: fixed;
	bottom: 0;
	padding: 15px;
	background: #fff;
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
	z-index: 10;
	width: 100%;
	max-width: 1280px;
	box-sizing: border-box;
}

.schedule .fixed_btns>button {
	display: inline-block;
	width: 100%;
	background: #382063;
	color: #fff;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}

.screen .fixed_btns {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 15px;
	background: #fff;
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
}

.screen .fixed_btns>button {
	display: inline-block;
	width: 100%;
	background: #382063;
	color: #fff;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}

.book_detail .float_btns {
	margin-top: 0px;
	font-size: 0px;
	padding: 15px;
	background: #fff;
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
}

.book_detail .float_btns>button {
	display: inline-block;
	width: 70%;
	background: #382063;
	color: #fff;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}

.book_detail .float_btns>button.delete {
	width: calc(30% - 10px);
	margin-right: 10px;
	background: #999;
	color: #fff;
}

.book_detail .float_btns.bt_3 {
	display: flex;
	justify-content: space-between;
}

.book_detail .float_btns.bt_3>button {
	width: calc(( 100%/ 3)- 10px) !important;
}

.book_detail .float_btns.bt_3>button.delete {
	margin-right: 0px;
}

.filter_wrap {
	position: fixed;
	top: 0px;
	left: 50%;
	bottom: 0px;
	width: 100%;
	padding: 0px;
	height: auto;
	background: rgba(0, 0, 0, 0.6);
	z-index: 999;
	display: none;
	max-width: 1280px;
	transform: translateX(-50%);
}

.filter_wrap>.sideup {
	background: #fff;
	display: block;
	width: 70%;
	position: absolute;
	right: 0px;
	top: 0px;
	bottom: 0px;
}

.filter_wrap>.sideup>header {
	display: block;
	padding: 5px 15px;
	line-height: 60px;
	height: 60px;
	position: relative;
	background: #f8f8f8;
}

.filter_wrap>.sideup>header>a {
	width: auto;
	height: 30px;
	line-height: 30px;
	position: absolute;
	display: block;
	top: 20px;
	font-size: 14px;
	text-align: center;
	text-decoration: underline;
}

.filter_wrap>.sideup>header>a.btn_filter {
	right: 0px;
	width: 60px;
	height: 60px;
	top: 5px;
	text-decoration: none;
}

.filter_wrap>.sideup>header>a.btn_filter::before {
	font-family: 'xeicon' !important;
	content: "\e921";
	display: block;
	font-size: 30px;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
}

.filter_wrap>.sideup>section {
	display: block;
	height: calc(100% - 70px);
	padding: 0px;
	position: relative;
	overflow: hidden;
	overflow-y: auto;
}

.filter_wrap>.sideup>section>.row_box {
	display: block;
	padding: 0px 0px;
	border-bottom: 1px solid #ddd;
}

.filter_wrap>.sideup>section>.row_box label {
	display: block;
	padding: 0px;
	padding-left: 15px;
	height: 46px;
	line-height: 46px;
	color: #999;
}

.filter_wrap>.sideup>section>.row_box label>input[type=checkbox]+span {
	display: block;
	line-height: 46px;
	font-size: 15px;
	margin-left: 0px;
}

.filter_wrap>.sideup>section>.row_box label>input[type=checkbox]+span>i
	{
	display: inline-block;
	line-height: 46px;
	font-size: 20px;
	vertical-align: bottom;
	margin-left: 5px;
}

.filter_wrap>.sideup>section>.row_box label>input[type=checkbox]+span>em
	{
	display: inline-block;
	line-height: 46px;
	font-size: 14px;
	vertical-align: bottom;
	margin-left: 10px;
}

.filter_wrap>.sideup>section>.row_box label>input[type=checkbox]+span:before
	{
	background: transparent;
	position: absolute;
	top: 0px;
	left: auto;
	right: 10px;
	width: 40px;
	height: 46px;
	border-radius: 0px;
	border: 0px solid #ccc;
	content: '';
}

.filter_wrap>.sideup>section>.row_box label>input[type=checkbox]:checked+span
	{
	color: #382063;
}

.filter_wrap>.sideup>section>.row_box label>input[type=checkbox]:checked+span:before
	{
	background: transparent;
	font-size: 22px;
	line-height: 46px;
	display: block;
	color: #382063;
	content: "\e928";
}

.filter_wrap>.sideup>section>.row_box>div {
	display: block;
	background: #f8f8f8;
	padding: 0px 0px 0px 15px;
}

.filter_wrap>.sideup>section>.row_box>div>label {
	height: 40px;
	line-height: 40px;
	padding-left: 10px;
}

.filter_wrap>.sideup>section>.row_box>div>label>input[type=checkbox]+span
	{
	line-height: 40px;
	font-size: 14px;
}

.filter_wrap>.sideup>section>.row_box>div>label>input[type=checkbox]+span::after
	{
	dipslay: block;
	position: absolute;
	top: 19px;
	left: 0px;
	content: '';
	width: 4px;
	height: 2px;
	background: #bbb;
}

.filter_wrap>.sideup>section>.row_box>div>label>input[type=checkbox]+span>em
	{
	line-height: 40px;
	font-size: 13px;
}

.filter_wrap>.sideup>section>.row_box>div>label>input[type=checkbox]+span:before
	{
	width: 40px;
	height: 40px;
}

.filter_wrap>.sideup>section>.row_box>div>label>input[type=checkbox]:checked+span:before
	{
	font-size: 18px;
	line-height: 40px;
	opacity: 0.4;
}

.filter_wrap>.sideup>section>.row_box>div>label>input[type=checkbox]:checked+span:after
	{
	background: #382063;
}

div.board>div.search {
	padding: 15px;
	background: #ccc;
}

div.board>div.search .field {
	border-radius: 25px;
}

div.board>div.search .field>input {
	padding: 0px 25px;
}

div.board>div.search button {
	background: #50CCC6;
	border-radius: 25px;
}

div.board>ul.list {
	background: #fff;
}

div.board>ul.list>li {
	border-bottom: 1px solid #ccc;
}

div.board>ul.list>li>a {
	display: block;
	padding: 20px 15px;
	position: relative;
}

div.board>ul.list>li>a>strong {
	display: block;
	margin-bottom: 0px;
	line-height: 22px;
	font-size: 15px;
	font-weight: 400;
	word-break: keep-all;
	position: relative;
}

div.board>ul.list>li>a>i {
	position: absolute;
	bottom: 20px;
	right: 15px;
	display: inline-block;
	float: right;
	margin-right: 0px;
	margin-top: 5px;
	width: auto;
	padding: 0px 10px;
	border-radius: 4px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	vertical-align: top;
	font-weight: 300;
	font-size: 12px;
	color: #fff;
	background: #111;
}

div.board>ul.list>li>a>span {
	display: block;
	color: #999;
	font-size: 13px;
	line-height: 20px;
}

div.board>ul.list[data-type=list]>li>a {
	position: relative;
}

div.board>ul.list[data-type=list]>li>a:after {
	position: absolute;
	right: 20px;
	bottom: 15px;
	display: none;
	content: '\e93e';
	font-family: 'xeicon';
	font-size: 16px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	color: #999;
}

div.board>ul.list[data-type=toggle]>li>a {
	position: relative;
}

div.board>ul.list[data-type=toggle]>li>a:after {
	position: absolute;
	right: 20px;
	top: 50%;
	margin-top: -10px;
	display: block;
	content: '\e941';
	font-family: 'xeicon';
	font-size: 16px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
}

div.board>ul.list[data-type=toggle]>li.opened>a:after {
	content: '\e944';
}

div.board>ul.list[data-type=toggle]>li.opened>a>strong {
	font-weight: 500;
}

div.board>ul.list[data-type=toggle]>li.opened>a+div.contents {
	display: block;
}

div.board>ul.list[data-type=lock]>li>a:after {
	content: '\e964';
}

div.board>ul.list>li>div.contents {
	display: none;
	padding: 15px 20px;
	margin: 0px 0px;
	border-top: 1px solid #eee;
	word-break: keep-all;
	background: #f8f8f8;
}

div.board>ul.list>li>div.contents>div.img {
	text-align: cetner;
}

div.board>ul.list>li>div.contents>div.img>img {
	max-width: 100%;
}

div.board>ul.list>li>div.contents>p {
	word-break: keep-all;
	font-weight: 300;
	line-height: 20px;
}

div.board>ul.list[data-type=toggle]>li.opened>a+div.contents+div.answer
	{
	display: block;
}

div.board>ul.list[data-type=toggle]>li>a>span.name {
	display: block;
	margin-bottom: 3px;
	font-size: 12px;
	line-height: 20px;
	color: #999;
}

div.board>ul.list[data-type=toggle]>li>a>i {
	color: #999;
}

div.board>ul.list[data-type=toggle]>li>a>i.finish {
	color: #ff7800;
}

div.board>ul.list>li>div.answer {
	display: none;
	padding: 15px 15px 15px 40px;
	border-top: 1px solid #ddd;
	background: #fff;
}

div.board>ul.list>li>div.answer>span.label {
	display: block;
	font-size: 12px;
	color: #999;
	line-height: 20px;
}

div.board>ul.list>li>div.answer>span.label>i {
	display: inline-block;
	margin-left: -25px;
	margin-right: 10px;
	width: 50px;
	border-radius: 5px;
	text-align: center;
	background: #ff7800;
	color: #fff;
	vertical-align: top;
}

div.board>ul.list>li>div.answer>span.label>b {
	float: right;
	font-weight: 500;
	color: #111;
	display: inline-block;
	font-size: 13px;
}

div.board>ul.list>li>div.answer>div {
	padding: 15px 0 0px 15px;
	border-left: 1px solid #ddd;
	word-break: keep-all;
}

div.board>ul.list>li>div.answer>div>div.img {
	margin-bottom: 10px;
	text-align: cetner;
}

div.board>ul.list>li>div.answer>div>div.img>img {
	max-width: 100%;
}

div.board>ul.list>li>div.answer>div>p {
	color: #333;
	word-break: keep-all;
}

div.board>ul.list>li>a>span.status {
	display: block;
	color: #999;
}

div.board>ul.list>li>a>span.status>i.labels {
	display: inline-block;
	margin-left: 0px;
	float: right;
	width: auto;
	padding: 0px 10px;
	border-radius: 4px;
	height: 20px;
	border: 0px solid #999;
	line-height: 20px;
	text-align: center;
	vertical-align: top;
	font-weight: 300;
	font-size: 12px;
	color: #fff;
	background: #111;
}

div.board>ul.list>li>a>span.status>i {
	color: #999;
}

div.board>ul.list>li>a>span.status>i.finish {
	color: #ff7800;
}

div.board>ul.list>li>a>span.status>i.confirmed {
	color: #ff7800;
}

div.board>ul.list>li.nodata>p {
	display: block;
	text-align: center;
	padding: 100px 0px;
}

div.board>.btns {
	display: block;
	padding: 15px 15px;
	margin: 0px;
	text-align: right;
}

div.board>.btns>a.back {
	display: inline-block;
	width: 70px;
	margin: 0 auto;
	border: 1px solid #ccc;
	color: #999;
	line-height: 40px;
	height: 40px;
	background: #fff;
	text-align: center;
	border-radius: 5px;
	font-size: 14px;
}

div.board>.btns>a.more {
	display: block;
	width: 40px;
	margin: 0 auto;
	border: 1px solid #ccc;
	color: #666;
	line-height: 40px;
	height: 40px;
	background: #fff;
	text-align: center;
	border-radius: 50%;;
	font-size: 15px;
}

div.board>.btns>a.more:before {
	content: '\e9c5';
	display: block;
	width: 40px;
	line-height: 40px;
	vertical-align: top;
	font-size: 20px;
	color: inherit;
	font-family: 'xeicon';
}

div.board>div.detail {
	display: block;
	background: #fff;
	border-bottom: 1px solid #ccc;
}

div.board>div.detail>div.tit {
	padding: 20px 15px;
	border-bottom: 1px solid #eee;
}

div.board>div.detail>div.tit>span.status {
	display: block;
	color: #999;
}

div.board>div.detail>div.tit>span.status>i.labels {
	display: inline-block;
	margin-left: 0px;
	float: right;
	width: auto;
	padding: 0px 10px;
	border-radius: 4px;
	height: 20px;
	border: 0px solid #999;
	line-height: 20px;
	text-align: center;
	vertical-align: top;
	font-weight: 300;
	font-size: 12px;
	color: #fff;
	background: #111;
}

div.board>div.detail>div.tit>span.status>i {
	color: #999;
}

div.board>div.detail>div.tit>span.status>i.finish {
	color: #ff7800;
}

div.board>div.detail>div.tit>span.status>i.confirmed {
	color: #ff7800;
}

div.board>div.detail>div.tit>strong {
	display: block;
	margin-bottom: 10px;
	line-height: 20px;
	font-size: 16px;
	font-weight: 500;
	word-break: keep-all;
}

div.board>div.detail>div.tit>strong>i {
	display: inline-block;
	margin-right: 5px;
	width: 70px;
	border-radius: 10px;
	height: 20px;
	line-height: 20px;
	vertical-align: top;
	font-weight: 300;
	font-size: 12px;
	color: #fff;
	text-align: center;
	background: #999;
}

div.board>div.detail>div.tit>span {
	display: block;
	color: #999;
	font-size: 13px;
	line-height: 17px;
}

div.board>div.detail>div.tit>span>i {
	float: right;
	display: inline-block;
	margin-right: 0px;
	width: auto;
	border-radius: 4px;
	height: 20px;
	padding: 0px 10px;
	line-height: 20px;
	vertical-align: top;
	font-weight: 300;
	font-size: 12px;
	color: #fff;
	text-align: center;
	background: #111;
}

div.board>div.detail>div.contents {
	padding: 20px 15px;
}

div.board>div.detail>div.contents>div.img {
	margin: 10px 0px;
	text-align: center;
}

div.board>div.detail>div.contents>div.img>img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

div.board>div.detail>div.contents>div.img>img+img {
	margin-top: 10px;
}

div.board>div.detail>div.contents>p {
	word-break: keep-all;
	line-height: 20px;
}

div.board>div.detail>div.contents>p.files {
	text-align: left;
	border-top: 1px solid #ddd;
	font-weight: 400;
	height: 32px;
	color: #666;
	line-height: 32px;
	padding: 10px 0px 0px 0px;
	background: #fff;
	white-space: nowrap;
	margin-top: 10px;
}

div.board>div.detail>div.contents>p.files>a {
	display: inline-block;
	border: 1px solid #999;
	line-height: 30px;
	padding: 0px 20px;
	border-radius: 5px;
}

div.board>div.detail>div.contents>p.files>a+a {
	margin-left: 5px;
}

div.board>div.detail>div.comment {
	padding: 20px 15px 30px;
	border-top: 1px solid #ccc;
	background: #eee;
}

div.board>div.detail>div.comment>div.img {
	margin: 10px 0;
	text-align: center;
}

div.board>div.detail>div.comment>div.img>img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

div.board>div.detail>div.comment>div.img>img+img {
	margin-top: 10px;
}

div.board>div.detail>div.comment>p {
	word-break: keep-all;
}

div.board>div.detail>div.comment>p.files {
	text-align: left;
	border-top: 1px solid #ddd;
	font-weight: 400;
	height: 32px;
	color: #666;
	line-height: 32px;
	padding: 10px 0px 0px 0px;
	white-space: nowrap;
	margin-top: 10px;
}

div.board>div.detail>div.comment>p.files>a {
	display: inline-block;
	border: 1px solid #999;
	line-height: 30px;
	padding: 0px 20px;
	border-radius: 5px;
}

div.board>div.detail>div.comment>p.files>a+a {
	margin-left: 5px;
}

div.board>div.regist {
	display: block;
	background: #fff;
	border-bottom: 1px solid #ccc;
	padding: 15px;
	height: calc(100vh - 180px);
}

div.textbooks {
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 65px !important;
	padding-bottom: 95px !important;
	position: relative;
}

div.textbooks.st2 {
	padding: 15px !important;
	min-height: 100% !important;
	box-sizing: border-box;
}

div.textbooks.grade {
	padding-bottom: 15px !important;
	position: relative;
}

div.textbooks.selecter {
	background: #f2f2f2;
	min-height: calc(100% - 160px);
}

div.textbooks.selecter.type2 {
	padding-top: 0 !important;
	padding-bottom: 15px !important;
	box-sizing: border-box;
	min-height: 100% !important;
}

div.filter {
	position: absolute;
	left: 0px;
	right: 0px;
	width: 100%;
	top: 70px;
	background: #fff;
	z-index: 19;
	height: 50px;
	max-width: 1280px;
	min-width: 320px;
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
}

div.filter.fixed {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	top: 70px;
	background: #fff;
	z-index: 19;
	height: 50px;
	max-width: 1280px;
	min-width: 320px;
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
}

div.filter>ul {
	display: block;
	font-size: 0px;
}

div.filter>ul>li {
	display: inline-block;
	width: calc(100%/ 7);
	vertical-align: top;
}

div.filter>ul>li>a {
	display: block;
	line-height: 50px;
	height: 50px;
	font-size: 16px;
	color: #999;
	text-align: center;
	position: relative;
	letter-spacing: -0.5px;
}

div.filter>ul>li>a.on {
	color: #111;
	font-weight: 500;
}

div.filter>ul>li>a.on::after {
	position: absolute;
	bottom: 10px;
	left: 50%;
	margin-left: -15px;
	width: 30px;
	height: 2px;
	background: #50CCC6;
	content: '';
}

div.filter>ul>li>a>em {
	position: absolute;
	top: 2px;
	right: 2px;
	background: #FD747A;
	line-height: 20px;
	height: 20px;
	min-width: 16px;
	padding: 0 2px;
	font-size: 11px;
	display: block;
	text-align: center;
	border-radius: 50%;
	color: #fff;
}

div.filter>ul>li>a>em::before {
	content: attr(data-cnt);
}

div.filter>ul>li>a>em[data-cnt="0"] {
	display: none;
}

div.filter2 {
	position: absolute;
	left: 0px;
	right: 0px;
	width: 100%;
	top: 120px;
	background: #fff;
	z-index: 19;
	max-width: 1280px;
	min-width: 320px;
	border-top: 1px solid #f2f2f2;
}

div.filter2 .select_box {
	width: 100%;
}

div.filter2 .select_box .sel {
	padding: 10px 0;
}

div.filter2 .select_box .sel:after {
	right: 10px;
}

div.filter2 .select_box .sel_list {
	top: 34px;
}

div.filter2.fixed {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	top: 120px;
	background: #fff;
	z-index: 19;
}

div.textbooks>ul.list {
	display: block;
}

div.textbooks>ul.list>li {
	display: block;
	background: #fff;
	position: relative;
}

div.textbooks>ul.list>li+li {
	border-top: 1px solid #ccc;
}

div.textbooks>ul.list>li>a {
	padding: 15px;
	padding-left: 130px;
	position: relative;
	display: block;
}

div.textbooks>ul.list>li>a>.thumb {
	display: block;
	position: absolute;
	left: 15px;
	top: calc(50% - 50px);
	width: 100px;
	height: 100px;
	padding: 10px 10px;
	background: #f4f4f4;
	border: 2px solid #f4f4f4;
	box-sizing: border-box;
}

div.textbooks>ul.list>li>a>.thumb>span {
	display: block;
	line-height: 16px;
	font-size: 14px;
	color: #999;
}

div.textbooks>ul.list>li>a>.thumb>p {
	display: block;
	line-height: 18px;
	height: 36px;
	overflow: hidden;
	word-break: keep-all;
	font-size: 16px;
	color: #111;
	letter-spacing: -0.5px;
	padding: 3px 0px;;
}

div.textbooks>ul.list>li>a>.thumb>b {
	display: block;
	line-height: 16px;
	font-size: 14px;
	color: #999;
	font-weight: 500;
}
/* div.textbooks > ul.list > li > a[data-sort=priority] > .thumb { border:2px solid #FD747A;} */
/* div.textbooks > ul.list > li > a[data-sort=priority]::before { display:block;position: absolute;top:10px;left:10px;width:12px;height:12px;font-size:10px;color:#fff;border-radius: 50%;background: #FD747A;content: '';z-index:1;} */
div.textbooks>ul.list>li>a>i {
	display: block;
	position: absolute;
	top: 15px;
	right: 15px;
	line-height: 20px;
	font-size: 12px;
	color: #fff;
	padding: 0px 8px;
	border-radius: 5px;
}

div.textbooks>ul.list>li>a>i.play {
	background: #50CCC6;
}

div.textbooks>ul.list>li>a>i.pause {
	background: #bbb;
}

div.textbooks>ul.list>li>a>label {
	width: 24px;
	line-height: 24px;
	height: 24px;
	padding-left: 24px;
	padding: 0px;
	position: absolute;
	top: 15px;
	right: 15px;
}

div.textbooks>ul.list>li>a>label>input[type=checkbox]+span {
	display: block;
	line-height: 24px;
	height: 24px;
	margin-left: 0px;
	vertical-align: bottom;
	background: transparent;
	width: 24px;
}

div.textbooks>ul.list>li>a>label>input[type=checkbox]+span:before {
	display: block;
	content: '';
	width: 20px;
	height: 20px;
	border-radius: 3px;
	background: #f8f8f8;
	border: 2px solid #ddd;
	vertical-align: bottom;
	top: 0px;
}

div.textbooks>ul.list>li>a>label>input[type=checkbox]+span:after {
	display: none;
}

div.textbooks>ul.list>li>a>label>input[type=checkbox]:checked+span {
	color: #00090d;
}

div.textbooks>ul.list>li>a>label>input[type=checkbox]:checked+span:before
	{
	font-size: 20px;
	line-height: 20px;
	background: #382063;
	border: 2px solid #382063;
	color: #fff;
	content: "\e928";
}

div.textbooks>ul.list>li>a>label {
	width: 24px;
	line-height: 24px;
	height: 24px;
	padding-left: 24px;
	padding: 0px;
	position: absolute;
	top: 15px;
	right: 15px;
}

div.textbooks>ul.list>li>a>label>input[type=radio]+span {
	display: block;
	line-height: 24px;
	height: 24px;
	margin-left: 0px;
	vertical-align: bottom;
	background: transparent;
	width: 24px;
}

div.textbooks>ul.list>li>a>label>input[type=radio]+span:before {
	display: block;
	content: '';
	width: 20px;
	height: 20px;
	background: #f8f8f8;
	border: 2px solid #ddd;
	vertical-align: bottom;
	top: 0px;
}

div.textbooks>ul.list>li>a>label>input[type=radio]+span:after {
	display: none;
}

div.textbooks>ul.list>li>a>label>input[type=radio]:checked+span {
	color: #00090d;
}

div.textbooks>ul.list>li>a>label>input[type=radio]:checked+span:before {
	font-size: 20px;
	line-height: 20px;
	background: #382063;
	border: 2px solid #382063;
	color: #fff;
	content: "\e928";
}

div.textbooks>ul.list>li>a>h4 {
	font-size: 0px;
	color: #999;
	line-height: 30px;
	letter-spacing: -0.5px;
	padding-top: 0px;
}

div.textbooks>ul.list>li>a>h4>em {
	display: inline-block;
	font-size: 16px;
	line-height: 30px;
	font-weight: 400;
	color: #999;
	vertical-align: bottom;
	min-width: 60px;
}

div.textbooks>ul.list>li>a>h4>b {
	display: inline-block;
	font-size: 20px;
	line-height: 30px;
	font-weight: 500;
	color: #111;
	vertical-align: bottom;
}

div.textbooks>ul.list>li>a>span {
	font-size: 0px;
	color: #999;
	line-height: 20px;
	margin-top: 5px;
	display: block;
}

div.textbooks>ul.list>li>a>span+span {
	margin-top: 0px;
}

div.textbooks>ul.list>li>a>span>em {
	display: inline-block;
	font-size: 12px;
	line-height: 20px;
	font-weight: 400;
	color: #999;
	vertical-align: bottom;
	width: 30%;
	min-width: 50px;
	max-width: 60px;
}

div.textbooks>ul.list>li>a>span>b {
	display: inline-block;
	font-size: 13px;
	line-height: 20px;
	font-weight: 500;
	color: #333;
	vertical-align: bottom;
}

div.textbooks>ul.list>li>a>span>b.cyan {
	font-weight: 500;
	color: #50CCC6;
	font-size: 14px;
}

@media screen and (max-width:338px) {
	div.textbooks>ul.list>li>a>span>b {
		font-size: 11px;
	}
	div.textbooks>ul.list>li label {
		top: 20px !important;
		right: 0px !important;
		width: 54px !important;
		height: 30px !important;
	}
	div.textbooks>ul.list>li label>span {
		width: 40px !important;
		height: 21px !important;
	}
	div.textbooks>ul.list>li label>span:after {
		left: 3px !important;
		top: 2px !important;
		width: 17px !important;
		height: 17px !important;
	}
	div.textbooks>ul.list>li label>input:checked+span:after {
		left: 21px !important;
	}
}

div.textbooks>ul.list>li>a>p {
	position: absolute;
	bottom: 15px;
	right: 15px;
	font-size: 0px;
	text-align: right;
}

div.textbooks>ul.list>li>a>p>span {
	font-size: 13px;
	color: #999;
	line-height: 24px;
	display: inline-block;
	position: relative;
}

div.textbooks>ul.list>li>a>p>span>b {
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	color: #50CCC6;
	vertical-align: bottom;
}

div.textbooks>ul.list>li>a>p>span+span {
	margin-left: 22px;
}

div.textbooks>ul.list>li>a>p>span+span::before {
	width: 2px;
	height: 12px;
	position: absolute;
	left: -12px;
	top: 6px;
	background: #ccc;
	content: '';
	display: block;
}

div.textbooks>ul.list>li label {
	display: block;
	position: absolute;
	top: 15px;
	right: 15px;
	width: 54px;
	height: 30px;
	padding: 0;
}

div.textbooks>ul.list>li label>input {
	display: none;
}

div.textbooks>ul.list>li label>input:checked+span {
	background-color: #382063;
}

div.textbooks>ul.list>li label>input:checked+span:before {
	content: none;
}

div.textbooks>ul.list>li label>input:checked+span:after {
	left: 27px;
}

div.textbooks>ul.list>li label>input:disabled+span:after {
	background: #ddd;
}

div.textbooks>ul.list>li label>span {
	position: absolute;
	left: 0;
	top: 0;
	width: 54px;
	height: 30px;
	padding: 0;
	background-color: #bbb;
	border-radius: 60px;
	cursor: pointer;
	transition: 0.2s;
	margin-left: 0px;
}

div.textbooks>ul.list>li label>span:after {
	display: block;
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #fff;
	transition: 0.1s ease-in;
}

div.textbooks>ul.list>li label>span:before {
	content: none;
}

div.textbooks>.btns {
	display: block;
	padding: 15px 0px 0px 0px;
	margin: 0px;
	text-align: right;
}

div.textbooks>.btns>a.back {
	display: inline-block;
	width: 70px;
	margin: 0 auto;
	border: 1px solid #ccc;
	color: #999;
	line-height: 40px;
	height: 40px;
	background: #fff;
	text-align: center;
	border-radius: 5px;
	font-size: 14px;
}

div.textbooks>.btns>a.more {
	display: block;
	width: 40px;
	margin: 0 auto;
	border: 1px solid #ccc;
	color: #666;
	line-height: 40px;
	height: 40px;
	background: #fff;
	text-align: center;
	border-radius: 50%;;
	font-size: 15px;
}

div.textbooks>.btns>a.more:before {
	content: '\e9c5';
	display: block;
	width: 40px;
	line-height: 40px;
	vertical-align: top;
	font-size: 20px;
	color: inherit;
	font-family: 'xeicon';
}

div.textbooks>.btns>a.add {
	position: fixed;
	bottom: 15px;
	left: 15px;
	display: block;
	width: 30px;
	margin: 0 auto;
	border: 1px solid #FD747A;
	color: #fff;
	line-height: 15px;
	height: 30px;
	padding: 10px;
	background: #FD747A;
	text-align: center;
	border-radius: 50%;;
	font-size: 13px;
	letter-spacing: 0px;
}

div.textbooks_box>h2 {
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
	margin-bottom: 10px;
	display: none;
}

div.textbooks_box>ul.list {
	display: block;
}

div.textbooks_box>ul.list>li {
	display: block;
	position: relative;
}

div.textbooks_box>ul.list>li+li {
	border-top: 0px solid #ccc;
	margin-top: 5px;
}

div.textbooks_box>ul.list>li>div {
	padding: 15px;
	padding-left: 150px;
	position: relative;
	display: block;
	background: #f8f8f8;
}

div.textbooks_box>ul.list>li>div>a>.thumb {
	display: block;
	position: absolute;
	left: 15px;
	top: 15px;
	width: 120px;
	height: 100px;
	padding: 10px 10px;
	background: #eee;
	border: 2px solid #eee;
	box-sizing: border-box;
}

div.textbooks_box>ul.list>li>div>a>.thumb>span {
	display: block;
	line-height: 16px;
	font-size: 14px;
	color: #999;
}

div.textbooks_box>ul.list>li>div>a>.thumb>p {
	display: block;
	line-height: 18px;
	height: 36px;
	overflow: hidden;
	word-break: keep-all;
	font-size: 16px;
	color: #111;
	letter-spacing: -0.5px;
	padding: 3px 0px;;
}

div.textbooks_box>ul.list>li>div>a>.thumb>b {
	display: inline-block;
	line-height: 16px;
	font-size: 14px;
	color: #999;
	font-weight: 500;
}

div.textbooks_box>ul.list>li>div[data-sort=priority]>a>.thumb {
	border: 2px solid #FD747A;
}

div.textbooks_box>ul.list>li>div[data-sort=priority]::before {
	display: block;
	position: absolute;
	top: 10px;
	left: 10px;
	width: 12px;
	height: 12px;
	font-size: 10px;
	color: #fff;
	border-radius: 50%;
	background: #FD747A;
	content: '';
	z-index: 1;
}

div.textbooks_box>ul.list>li>div>i {
	display: block;
	position: absolute;
	top: 15px;
	right: 15px;
	line-height: 20px;
	font-size: 12px;
	color: #fff;
	padding: 0px 8px;
	border-radius: 5px;
}

div.textbooks_box>ul.list>li>div>i.play {
	background: #50CCC6;
}

div.textbooks_box>ul.list>li>div>i.pause {
	background: #bbb;
}

div.textbooks_box>ul.list>li>div>label {
	display: block;
	position: absolute;
	top: 15px;
	right: 15px;
	width: 54px;
	height: 30px;
	padding: 0;
}

div.textbooks_box>ul.list>li>div>label>input {
	display: none;
}

div.textbooks_box>ul.list>li>div>label>input:checked+span {
	background-color: #382063;
}

div.textbooks_box>ul.list>li>div>label>input:checked+span:before {
	content: none;
}

div.textbooks_box>ul.list>li>div>label>input:checked+span:after {
	left: 27px;
}

div.textbooks_box>ul.list>li>div>label>input:disabled+span:after {
	background: #ddd;
}

div.textbooks_box>ul.list>li>div>label>span {
	position: absolute;
	left: 0;
	top: 0;
	width: 54px;
	height: 30px;
	padding: 0;
	background-color: #bbb;
	border-radius: 60px;
	cursor: pointer;
	transition: 0.2s;
	margin-left: 0px;
}

div.textbooks_box>ul.list>li>div>label>span:after {
	display: block;
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #fff;
	transition: 0.1s ease-in;
}

div.textbooks_box>ul.list>li>div>label>span:before {
	content: none;
}

/*
div.textbooks_box > ul.list > li > div > label { width:24px; line-height:24px;height:24px; padding-left:24px;padding:0px;position: absolute;top:15px;right:15px;}
div.textbooks_box > ul.list > li > div > label > input[type=checkbox] + span  {display:block; line-height:24px;height:24px;margin-left:0px; vertical-align: bottom;background: transparent;width:24px;}
div.textbooks_box > ul.list > li > div > label > input[type=checkbox] + span:before {display:block; content:'';width:20px;height:20px; border-radius: 3px;background: #f2f2f2; border: 2px solid #ddd; vertical-align: bottom; top:0px;}
div.textbooks_box > ul.list > li > div > label > input[type=checkbox] + span:after { display:none; }
div.textbooks_box > ul.list > li > div > label > input[type=checkbox]:checked + span  { color:#00090d; }
div.textbooks_box > ul.list > li > div > label > input[type=checkbox]:checked + span:before { font-size:20px;line-height:20px; background: #382063; border: 2px solid #382063;color:#fff; content: "\e928"; }

div.textbooks_box > ul.list > li > div > label { width:24px; line-height:24px;height:24px; padding-left:24px;padding:0px;position: absolute;top:15px;right:15px;}
div.textbooks_box > ul.list > li > div > label > input[type=radio] + span  {display:block; line-height:24px;height:24px;margin-left:0px; vertical-align: bottom;background: transparent;width:24px;}
div.textbooks_box > ul.list > li > div > label > input[type=radio] + span:before {display:block; content:'';width:20px;height:20px;background: #f8f8f8; border: 2px solid #ddd; vertical-align: bottom; top:0px;}
div.textbooks_box > ul.list > li > div > label > input[type=radio] + span:after { display:none; }
div.textbooks_box > ul.list > li > div > label > input[type=radio]:checked + span  { color:#00090d;  }
div.textbooks_box > ul.list > li > div > label > input[type=radio]:checked + span:before { font-size:20px;line-height:20px; background: #382063; border: 2px solid #382063;color:#fff; content: "\e928"; }
*/
div.textbooks_box>ul.list>li>div>a>p {
	font-size: 0px;
}

div.textbooks_box>ul.list>li>div>a>p>span {
	font-size: 0px;
	line-height: 16px;
	padding: 2px 0px;
	display: inline-block;
	position: relative;
	width: 100%;
}

div.textbooks_box>ul.list>li>div>a>p>span>em {
	font-size: 12px;
	font-weight: 400;
	color: #999;
	vertical-align: bottom;
	min-width: 55px;
	display: inline-block;
	width: 30%;
	min-width: 50px;
	max-width: 60px;
}
/* div.textbooks_box > ul.list > li > div > a > p > span > b { font-size: 12px;font-weight: 500;vertical-align: bottom;display:inline-block;} */
div.textbooks_box>ul.list>li>div>a>p>span>b {
	width: 70%;
	font-size: 12px;
	font-weight: 500;
	vertical-align: bottom;
	display: inline-block;
}

div.textbooks_box>ul.list>li>div>a>p>span+span {
	margin-left: 22px;
}

div.textbooks_box>ul.list>li>div>a>p>span+span::before {
	width: 2px;
	height: 12px;
	position: absolute;
	left: -12px;
	top: 6px;
	background: #ccc;
	content: '';
	display: block;
}

div.textbooks_box>ul.list>li>div>a.textbook_set {
	z-index: 2;
	position: absolute;
	bottom: 10px;
	right: 10px;
	display: block;
	font-size: 0px;
	width: 30px;
	height: 30px;
	overflow: hidden;
	text-align: center;
	color: #999;
}

div.textbooks_box>ul.list>li>div>a.textbook_set::before {
	display: block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-family: 'xeicon' !important;
	content: "\e94a";
	font-size: 20px;
}

.set_btn {
	position: absolute;
	background: #000;
	border-radius: 5px;
	right: 6px;
	bottom: -60px;
	display: none;
	z-index: 1;
}

.set_btn.on {
	display: inline-block;
}

.set_btn::before {
	content: "";
	width: 0px;
	height: 0px;
	border: 10px solid;
	display: inline-block;
	border-color: transparent;
	border-bottom-color: black;
	position: absolute;
	right: 9px;
	top: -20px;
}

.set_btn>li {
	padding: 10px 20px;
	text-align: right;
	cursor: pointer;
	color: #fff;
}

.set_btn>li:not(:last-child) {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

@media screen and (max-width:321px) {
	div.textbooks_box>ul.list>li>div>p>span>b {
		font-size: 11px;
	}
}

/*
div.textbooks_box > ul.list > li label {display:block; position:absolute; top:15px; right:15px; width:54px; height:30px; padding:0;}
div.textbooks_box > ul.list > li label > input {display:none;}
div.textbooks_box > ul.list > li label > input:checked + span {background-color:#382063;}
div.textbooks_box > ul.list > li label > input:checked + span:before {content:none;}
div.textbooks_box > ul.list > li label > input:checked + span:after {left:27px;}
div.textbooks_box > ul.list > li label > input:disabled + span:after {background:#ddd;}
div.textbooks_box > ul.list > li label > span {position:absolute; left:0; top:0; width:54px; height:30px; padding:0; background-color: #bbb; border-radius:60px; cursor:pointer; transition: 0.2s;margin-left:0px;}
div.textbooks_box > ul.list > li label > span:after {display:block; content:""; position:absolute; left:3px; top:3px; width: 24px; height: 24px; border-radius:50%; background-color:#fff; transition: 0.1s ease-in;}
div.textbooks_box > ul.list > li label > span:before {content:none;}
*/
ul.list>li.nodata {
	background: none !important;
	text-align: center;
	padding: 80px 0px;
}

ul.list>li.nodata>i {
	font-size: 60px;
	color: #666;
	margin-bottom: 5px;
	line-height: 60px;
}

ul.list>li.nodata>h2 {
	font-size: 15px;
	color: #666;
	line-height: 20px;
	font-weight: 400;
	margin: 0px;
	padding: 0px;
}

ul.list>li.nodata>p {
	font-size: 13px;
	color: #999;
	line-height: 18px;
	margin: 0px;
	padding: 0px;
}

ul.list>li.nodata>a {
	border: 2px solid #999;
	border-radius: 20px;
	line-height: 36px;
	display: inline-block;
	font-size: 14px;
	color: #999;
	margin: 0px;
	padding: 0px 30px;
	margin-top: 20px;
}

div.textbooks_box>.btns {
	display: block;
	padding: 15px 0px 0px 0px;
	margin: 0px;
	text-align: right;
}

div.textbooks_box>.btns>a.back {
	display: inline-block;
	width: 70px;
	margin: 0 auto;
	border: 1px solid #ccc;
	color: #999;
	line-height: 40px;
	height: 40px;
	background: #fff;
	text-align: center;
	border-radius: 5px;
	font-size: 14px;
}

div.textbooks_box>.btns>a.more {
	display: block;
	width: 40px;
	margin: 0 auto;
	border: 1px solid #ccc;
	color: #666;
	line-height: 40px;
	height: 40px;
	background: #fff;
	text-align: center;
	border-radius: 50%;;
	font-size: 15px;
}

div.textbooks_box>.btns>a.more:before {
	content: '\e9c5';
	display: block;
	width: 40px;
	line-height: 40px;
	vertical-align: top;
	font-size: 20px;
	color: inherit;
	font-family: 'xeicon';
}

div.textbooks_box>.btns>a.add {
	position: fixed;
	bottom: 15px;
	left: 15px;
	display: block;
	width: 30px;
	margin: 0 auto;
	border: 1px solid #FD747A;
	color: #fff;
	line-height: 15px;
	height: 30px;
	padding: 10px;
	background: #FD747A;
	text-align: center;
	border-radius: 50%;;
	font-size: 13px;
	letter-spacing: 0px;
}

div.set {
	display: block;
	padding: 0px;
}

div.set>dl>dt {
	padding: 0 15px;
	border-bottom: 1px solid #ddd;
	font-size: 13px;
	text-align: left;
	line-height: 30px;
	padding-top: 10px;
	color: #999;
}

div.set>dl>dd {
	position: relative;
	border-bottom: 1px solid #ddd;
	background: #fff;
}

div.set>dl>dd>div {
	padding: 12px 15px;
}

div.set>dl>dd strong {
	display: block;
	font-weight: 400;
	font-size: 15px;
	line-height: 22px;
}

div.set>dl>dd strong.id {
	letter-spacing: 1px;
	font-weight: 500;
	color: #382063;
}

div.set>dl>dd p {
	margin-top: 5px;
	color: #999;
	word-break: keep-all;
	font-size: 12px;
	line-height: 18px;
}

div.set>dl>dd .btns {
	display: block;
	position: absolute;
	top: 50%;
	right: 15px;
	height: 30px;
	margin-top: -15px;
	padding: 0;
	font-size: 0px;
}

div.set>dl>dd .btns>a {
	font-size: 13px;
	line-height: 30px;
	height: 30px;
	width: 65px;
	color: #666;
	border: 1px solid #999;
	background: #fff;
	display: inline-block;
	box-sizing: border-box;
	margin: 0px;
	border-radius: 3px;
}

div.set>dl>dd .btns>a+a {
	margin-left: 2px;
}

div.set>dl>dd label {
	display: block;
	position: absolute;
	top: 50%;
	right: 15px;
	width: 54px;
	height: 30px;
	margin-top: -15px;
	padding: 0;
}

div.set>dl>dd label>input {
	display: none;
}

div.set>dl>dd label>input:checked+span {
	background-color: #382063;
}

div.set>dl>dd label>input:checked+span:before {
	content: none;
}

div.set>dl>dd label>input:checked+span:after {
	left: 27px;
}

div.set>dl>dd label>input:disabled+span:after {
	background: #ddd;
}

div.set>dl>dd label>span {
	position: absolute;
	left: 0;
	top: 0;
	width: 54px;
	height: 30px;
	padding: 0;
	background-color: #bbb;
	border-radius: 60px;
	cursor: pointer;
	transition: 0.2s;
	margin-left: 0px;
}

div.set>dl>dd label>span:after {
	display: block;
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #fff;
	transition: 0.1s ease-in;
}

div.set>dl>dd label>span:before {
	content: none;
}

div.set>dl>dd span {
	position: absolute;
	right: 15px;
	top: 10px;
	text-align: right;
	word-break: keep-all;
	font-size: 14px;
	line-height: 22px;
}

div.set>dl>dd span>i {
	display: block;
	font-size: 13px;
	line-height: 20px;
}

div.set>dl>dd span>b {
	display: block;
	color: #999;
	font-size: 12px;
	line-height: 20px;
	font-weight: 300;
}

div.set>dl>dd>a {
	display: block;
	position: relative;
	padding: 12px 15px;
	line-height: 20px;
}

div.set>dl>dd>a:after {
	content: '\e93f';
	display: block;
	position: absolute;
	right: 15px;
	top: 50%;
	height: 30px;
	text-align: center;
	font-family: 'xeicon';
	font-size: 16px;
	line-height: 30px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	color: #999;
}

div.set>dl>dd>a>b {
	position: absolute;
	top: 12px;
	right: 40px;
	font-size: 16px;
	font-weight: 500;
	text-align: right;
	line-height: 20px;
}

/* .wrapper.learning { background: linear-gradient(#fff, #fff ); } */
.wrapper.learning.playing {
	background: transparent;
}

.wrapper.learning.pause {
	background: linear-gradient(#EEFD68, #FD747A);
}

.wrapper.learning.pause::before {
	display: block;
	position: absolute;
	top: 190px;
	background: #FD747A;
	left: 50%;
	font-size: 20px;
	line-height: 40px;
	content: '일시정지 중';
	color: #fff;
	display: inline-block;
	padding: 0px 15px;
	border-radius: 5px;
	transform: translateX(-50%);
}

.wrapper.learning.playing.break {
	background: linear-gradient(#EEFD68, #FD747A);
}

.wrapper.learning.playing.break::before {
	display: block;
	position: absolute;
	top: 190px;
	background: #FD747A;
	left: 50%;
	font-size: 20px;
	line-height: 40px;
	content: '쉬는시간';
	color: #fff;
	display: inline-block;
	padding: 0px 15px;
	border-radius: 5px;
	transform: translateX(-50%);
}

.learning_wrap {
	position: relative;
}

.learning_wrap>.timeline {
	position: absolute;
	top: -90px;
	left: 15px;
	display: inline-block;
	padding: 0px;
	z-index: 99;
	width: calc(100% - 30px);
}

.learning_wrap>.timeline>ul {
	display: none;
	border-top: 1px solid #ccc;
	padding: 0px;
	background: #fff;
	height: 350px;
	overflow: hidden;
	overflow-y: auto;
}

.learning_wrap>.timeline>ul>li {
	display: block;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.learning_wrap>.timeline>ul>li+li {
	margin-top: -1px;
}

.learning_wrap>.timeline>ul>li:first-child {
	border-top: 0px solid #fff;
}

.learning_wrap>.timeline>ul>li:last-child {
	border-bottom: 0px solid #fff;
}

.learning_wrap>.timeline>ul>li>div {
	display: block;
	padding: 15px;
	padding-left: 60px;
	position: relative;
}

.learning_wrap>.timeline>ul>li>div.rest_time {
	background: #f8f8f8;
}

.learning_wrap>.timeline>ul>li>div>em {
	position: absolute;
	line-height: 18px;
	font-size: 12px;
	top: 15px;
	left: 15px;
	font-weight: 500;
	color: #fff;
	background: #bbb;
	width: 36px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	text-align: center;
	border-radius: 3px;
}

.learning_wrap>.timeline>ul>li>div>em[data-type='1'] {
	background: #50CCC6;
}

.learning_wrap>.timeline>ul>li>div>em[data-type='4'] {
	background: #FD747A;
}

.learning_wrap>.timeline>ul>li>div>em[data-type='7'] {
	background: #00CC66;
}

.learning_wrap>.timeline>ul>li>div>h5 {
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	position: relative;
	margin-bottom: 5px;
	word-break: keep-all;
	overflow: hidden;
}

.learning_wrap>.timeline>ul>li>div>h5>b {
	display: inline-block;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	vertical-align: bottom;
	width: 100%;
}

.learning_wrap>.timeline>ul>li>div>h5>span {
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	line-height: 20px;
	font-size: 12px;
	color: #666;
	font-weight: 400;
}

.learning_wrap>.timeline>ul>li>div.rest_time>h5 {
	display: none;
}

.learning_wrap>.timeline>ul>li>div>p {
	font-size: 0px;
	line-height: 20px;
	position: relative;
	color: #999;
	display: inline-block;
	width: 100%;
}

.learning_wrap>.timeline>ul>li>div>p>.unit {
	display: inline-block;
	width: 100%;
}

.learning_wrap>.timeline>ul>li>div>p>.unit+span {
	margin-left: 0px;
}

.learning_wrap>.timeline>ul>li>div>p>.unit+span:before {
	display: none;
}

.learning_wrap>.timeline>ul>li>div>p>.unit>.remainTime {
	color: #00CC66;
	font-weight: bold;
}

.learning_wrap>.timeline>ul>li>div>p>span {
	font-size: 13px;
	line-height: 20px;
	display: inline-block;
	vertical-align: bottom;
	position: relative;
}

.learning_wrap>.timeline>ul>li>div>p>span+span {
	margin-left: 21px;
}

.learning_wrap>.timeline>ul>li>div>p>span+span::before {
	display: block;
	position: absolute;
	height: 10px;
	width: 1px;
	top: 5px;
	left: -11px;
	content: '';
	background: #ddd;
}

.learning_wrap>.timeline>ul>li>div>p>span>b {
	font-size: 13px;
	line-height: 20px;
	display: inline-block;
	vertical-align: bottom;
	font-weight: 400;
}

.learning_wrap>.timeline>ul>li>div>p>b {
	font-weight: 500;
}

.learning_wrap>.timeline>ul>li>div>.row_btns {
	
}

.learning_wrap>.timeline>ul>li>div.opened::before {
	position: absolute;
	bottom: 0px;
	right: 0px;
	top: 0px;
	left: 0px;
	content: '';
	background: rgba(0, 0, 0, 0.7);
	z-index: 10;
}

.learning_wrap>.timeline>ul>li>div>a.btn {
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 11;
	font-size: 0px;
	text-align: center;
	color: #999;
	overflow: hidden;
}

.learning_wrap>.timeline>ul>li>div>a.btn::before {
	display: block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-family: 'xeicon' !important;
	content: "\e94a";
	font-size: 20px;
}

.learning_wrap>.timeline>ul>li.finish {
	opacity: 0.4;
	background: #ddd;
}

.learning_wrap>.timeline>ul>li.finish>div {
	background: transparent;
}

.learning_wrap>.timeline>ul>li.ing {
	background: #EEFD68;
	padding: 5px;
}

.learning_wrap>.timeline>ul>li.ing>div {
	background: #fff;
	padding: 10px;
	padding-left: 55px;
}

.learning_wrap>.timeline>ul>li.ing>div>em {
	top: 10px;
	left: 10px;
}

.learning_wrap>.timeline>ul>li.ing>div>a.btn {
	bottom: 5px;
	right: 5px;
}

.learning_wrap>.timeline>a.now {
	display: block;
	background: #fff;
	padding: 15px;
	padding-left: 60px;
	position: relative;
	-webkit-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.learning_wrap>.timeline>a.now>em {
	position: absolute;
	line-height: 18px;
	font-size: 12px;
	top: 15px;
	left: 15px;
	font-weight: 500;
	color: #fff;
	background: #bbb;
	width: 36px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	text-align: center;
	border-radius: 3px;
}

.learning_wrap>.timeline>a.now>em[data-type='1'] {
	background: #50CCC6;
}

.learning_wrap>.timeline>a.now>em[data-type='4'] {
	background: #FD747A;
}

.learning_wrap>.timeline>a.now>em[data-type='7'] {
	background: #00CC66;
}

.learning_wrap>.timeline>a.now>h5 {
	font-size: 17px;
	font-weight: 500;
	line-height: 20px;
	margin-bottom: 5px;
	padding-right: 30px;
	word-break: keep-all;
	overflow: hidden;
}

.learning_wrap>.timeline>a.now>h5>b {
	display: inline-block;
	font-size: 17px;
	font-weight: 500;
	line-height: 20px;
	margin-right: 5px;
	vertical-align: bottom;
	width: 100%;
}

.learning_wrap>.timeline>a.now>h5>span {
	display: inline-block;
	line-height: 20px;
	font-size: 14px;
	color: #999;
	font-weight: 400;
	vertical-align: bottom;
}

.learning_wrap>.timeline>a.now>h5>i {
	position: absolute;
	top: 0px;
	right: 0px;
	display: inline-block;
	line-height: 20px;
	font-size: 14px;
	color: #999;
	font-weight: 400;
	vertical-align: bottom;
}

.learning_wrap>.timeline>a.now>p {
	font-size: 0px;
	line-height: 20px;
	position: relative;
	color: #999;
	display: inline-block;
	width: calc(100% - 20px);
}

.learning_wrap>.timeline>a.now>p>.unit {
	display: inline-block;
	width: 100%;
}

.learning_wrap>.timeline>a.now>p>.unit+span {
	margin-left: 0px;
}

.learning_wrap>.timeline>a.now>p>.unit+span:before {
	display: none;
}

.learning_wrap>.timeline>a.now>p>.unit>.remainTime {
	color: #00CC66;
	font-weight: bold;
}

.learning_wrap>.timeline>a.now>p  span {
	font-size: 13px;
	line-height: 20px;
	display: inline-block;
	vertical-align: bottom;
	position: relative;
}

.learning_wrap>.timeline>a.now>p  span+span {
	margin-left: 21px;
}

.learning_wrap>.timeline>a.now>p  span+span::before {
	display: block;
	position: absolute;
	height: 10px;
	width: 1px;
	top: 5px;
	left: -11px;
	content: '';
	background: #ddd;
}

.learning_wrap>.timeline>a.now>p  span>b {
	font-size: 13px;
	line-height: 20px;
	display: inline-block;
	vertical-align: bottom;
	font-weight: 400;
}

.learning_wrap>.timeline>a.now>p>b {
	font-weight: 500;
}

.learning_wrap>.timeline>a.now>.row_btns {
	
}

.learning_wrap>.timeline>a.now>a.btn {
	display: none;
}

.learning_wrap>.timeline>a.now:after {
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -10px;
	display: block;
	content: '\e941';
	font-family: 'xeicon';
	font-size: 16px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
}

.learning_wrap>.timeline>a.now.opened:after {
	content: '\e944';
}

.learning_wrap>.timeline>a.now.opened::before {
	background: #eee;
}

.learning_wrap>.timeline>a.now.opened+ul {
	display: block;
}

.learning_wrap>.timeline>a.now.opened+ul+ul {
	display: flex;
}

.learning_wrap>.timeline > .alarmBtn > .xi{
	position: absolute;
    z-index: 1;
    font-size: 1.5rem;
    color: #999;
    right: 55px;
    top: 35px;
}

.learning_wrap>.timeline > .alarmBtn > .xi > span{
	display:none;
	height: 15px;
    min-width: 15px;
    background: #ca312c;
    color: #fff;
    padding: 1px;
    border-radius: 50%;
    position: absolute;
    top: -8px;
    left: 11px;
    font-size: 11px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
}

.learning_wrap>.timeline > .alarmBtn > .xi > span.on{display:flex;}

.learning_wrap>.group_tit {
	display: block;
	position: fixed;
	bottom: 95px;
	left: 0px;
	right: 0px;
	text-align: center;
}

.learning_wrap>.group_tit>h3 {
	display: inline-block;
	font-size: 16px;
	line-height: 36px;
	padding: 0px 25px;
	color: #fff;
}

.learning_wrap>.group_tit>p {
	color: #fff;
	font-size: 13px;
	margin-top: 10px;
}

.learning_wrap>.timer {
	display: block;
	width: 300px;
	height: 300px;
	box-sizing: border-box;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-top: -50px;
}

.learning_wrap>.timer2 {
	display: flex;
	justify-content: center;
	position: fixed;
	bottom: 170px;
	left: 0px;
	right: 0px;
	text-align: center;
}

.learning_wrap>.timer2>div+div {
	margin-left: 30px;
}

.learning_wrap>.timer2>div>.t {
	font-size: 14px;
	margin-bottom: 3px;
	color: #999;
	display: block;
}

.learning_wrap>.timer2>div>.time {
	font-size: 22px;
	font-weight: 600;
}

@media screen and (max-width: 375px) {
	.learning_wrap>.timer {
		
	}
}

.learning_wrap>.timer>.outer_line {
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	border-radius: 50%;
	margin: 0 auto;
	background: conic-gradient(#26EAFA 0% 0%, #616CFA 0% 0%, #fff 0% 100%);
}

.learning_wrap>.timer>.outer_line>.circle_box {
	position: absolute;
	top: 4%;
	left: 4%;
	right: 4%;
	bottom: 4%;
	background: #F2F2F2;
	display: block;
	border-radius: 50%;
}

.learning_wrap>.timer>.outer_line>.circle_box>.inner_line {
	position: absolute;
	top: 4%;
	left: 4%;
	right: 4%;
	bottom: 4%;
	display: block;
	border-radius: 50%;
}

.learning_wrap>.timer>.outer_line>.circle_box>.inner_line>i {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	border-radius: 50%;
}

.learning_wrap>.timer>.outer_line>.circle_box>.inner_line>i::before {
	position: absolute;
	width: 4px;
	height: 5%;
	top: 0px;
	left: 50%;
	margin-left: -2px;
	background: #999;
	border-radius: 4px;
	content: '';
	background: #fff;
}

.learning_wrap>.timer>.outer_line>.circle_box>.inner_line>i.late::before
	{
	position: absolute;
	width: 4px;
	height: 5%;
	top: 0px;
	left: 50%;
	margin-left: -2px;
	background: #999;
	border-radius: 4px;
	content: '';
	background: linear-gradient(to top, orange, orange);
}

.learning_wrap>.timer>.outer_line>.circle_box>.inner_line>i.on::before {
	position: absolute;
	width: 4px;
	height: 5%;
	top: 0px;
	left: 50%;
	margin-left: -2px;
	background: #999;
	border-radius: 4px;
	content: '';
	background: linear-gradient(to top, rgba(38, 234, 250, 1),
		rgba(221, 251, 117, 1));
}

.learning_wrap>.timer>.outer_line>.circle_box>.inner_line>i.off::before
	{
	position: absolute;
	width: 4px;
	height: 5%;
	top: 0px;
	left: 50%;
	margin-left: -2px;
	background: #999;
	border-radius: 4px;
	content: '';
	background: linear-gradient(to top, #ccc, #e9e9e9);
}

.learning_wrap>.timer>.outer_line>.circle_box>.inner_line>i.break::before
	{
	position: absolute;
	width: 4px;
	height: 5%;
	top: 0px;
	left: 50%;
	margin-left: -2px;
	background: #999;
	border-radius: 4px;
	content: '';
	background: linear-gradient(to top, yellow, yellow);
}

.learning_wrap>.timer>.status {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -140px;
	margin-top: -80px;
	width: 280px;
	text-align: center;
}

.learning_wrap>.timer>.status>span {
	display: block;
	font-size: 22px;
	font-weight: 400;
	color: #fff;
	line-height: 30px;
	height: 30px;
	margin-bottom: 10px;
}

.learning_wrap>.timer>.status>p {
	display: block;
	font-size: 0px;
	color: #fff;
}

.learning_wrap>.timer>.status>p>b {
	display: inline-block;
	vertical-align: bottom;
	line-height: 70px;
	height: 70px;
	font-size: 45px;
	font-weight: 500;
	letter-spacing: -2px;
}

.learning_wrap>.timer>.status>.obj_pause_watch {
	color: #fff;
}

.learning_wrap>.timer>.status>.obj_pause_watch>b {
	display: inline-block;
	vertical-align: bottom;
	line-height: 70px;
	height: 70px;
	font-size: 50px;
	font-weight: 500;
	letter-spacing: -2px;
}

.learning_wrap>.timer>.status>p>i {
	display: inline-block;
	vertical-align: bottom;
	line-height: 65px;
	height: 70px;
	font-size: 40px;
	font-weight: 400;
	margin: 0px 10px;
}

.learning_wrap>.timer>.status>.obj_pause_watch>i {
	display: inline-block;
	vertical-align: bottom;
	line-height: 65px;
	height: 70px;
	font-size: 40px;
	font-weight: 400;
	margin: 0px 10px;
}

.learning_wrap>.timer>.status>dl {
	display: none;
	font-size: 0px;
	margin-top: 15px;
}

.learning_wrap>.timer>.status>dl>dd {
	display: inline-block;
	width: 80px;
	vertical-align: top;
	text-align: center;
}

.learning_wrap>.timer>.status>dl>dd+dd {
	border-left: 1px solid #ccc;
}

.learning_wrap>.timer>.status>dl>dd>span {
	display: block;
	font-size: 13px;
	line-height: 17px;
	margin-bottom: 3px;
	color: #999;
}

.learning_wrap>.timer>.status>dl>dd>b {
	display: block;
	font-size: 22px;
	line-height: 28px;
	font-weight: 500;
	letter-spacing: -1px;
	color: #382063;
}

.learning_wrap>.study_btns {
	margin-top: 0px;
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	padding: 0 20px;
	text-align: center;
	font-size: 0px;
	max-width: 1280px;
	box-sizing: border-box;
}

.learning_wrap>.study_btns>button {
	font-size: 0px;
	width: 60px;
	height: 60px;
	display: inline-block;
	vertical-align: bottom;
	color: #fff;
}

.learning_wrap>.study_btns>button::before {
	display: block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	font-family: 'xeicon';
	font-size: 45px;
}

/*
.learning_wrap>.study_btns>button+button {
	margin-left: 10px;
}
*/

.learning_wrap>.study_btns>button[data-role='play']::before {
	content: "\ea3e";
}

.learning_wrap>.study_btns>button[data-role='pause']::before {
	content: "\ea3b";
}

.learning_wrap>.study_btns>button[data-role='setting']::before {
	content: "\e986";
}
/* .learning_wrap > .study_btns > button[data-role='stop']{font-size:25px; font-weight:600; width:auto;} */
/* .learning_wrap > .study_btns > button[data-role='stop']::before { font-size:34px;content: "\e921"; } */
.learning_wrap>.study_btns> .btnSt1 {
	margin: 10px 0;
	background: #50CCC6;
	color: #fff !important;
	text-align: center;
	font-size: 15px;
	width: 100px;
	height: 40px;
	line-height: 40px;
	border-radius: 6px;
	padding: 0 1rem;
}

.btn_play[data-role='pause']{position:absolute; left:50%; tranSform: translAteX(-50%);}

.outingBtn,
.sleepBtn{float:left;}
.sleepBtn{margin:10px 0 10px 5px !important;}

.settingBtn,
.btn_cancel{float:right;}
.btn_cancel{margin:10px 0 10px 5px !important;}

.learning_wrap>.study_btns>button[data-role='finish'] {
	display: none;
	width: 160px;
	height: 50px;
	font-size: 34px;
	font-size: 15px;
	color: #fff !important;
	margin: 0 auto;
	border: 2px solid #fff;
	border-radius: 30px;
	margin-top: 20px;
}

.learning_wrap>.study_btns>button[data-role='grading'] {
	display: none;
	width: 160px;
	height: 50px;
	font-size: 34px;
	font-size: 15px;
	color: #FD747A !important;
	margin: 0 auto;
	border: 2px solid #FD747A;
	border-radius: 30px;
	margin-bottom: 20px;
}

.learning_wrap>.study_btns>button[data-role='setting'] {
	position: fixed;
	right: 20px;
}

.learning_wrap>.study_btns>button[data-role='grading'].show {
	display: block;
}

.learning_wrap>.study_btns>button[data-role='outing'] {
	position: fixed;
	right: 20px;
	bottom: 10px;
	background: #50CCC6;
	color: #fff !important;
	text-align: center;
	font-size: 18px;
	width: auto;
	height: 40px;
	line-height: 40px;
	border-radius: 6px;
	padding: 0 1rem;
}

.learning_wrap>.study_btns > .btnPop.view{display:flex;}
.learning_wrap>.study_btns > .btnPop{position:fixed; right:20px; bottom:65px; background:#000; display:none; flex-direction: column; border-radius: 10px;}
.learning_wrap>.study_btns > .btnPop::after{
	content: '';
    display: inline-block;
    width: 0px;
    height: 0px;
    position: absolute;
    border-bottom: 10px solid transparent;
    border-top: 10px solid #000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    left: 50%;
    transform:translateX(16%);
    bottom: -19px;
}
.learning_wrap>.study_btns > .btnPop > button{padding:0.5rem 1rem; color:#fff;}
.learning_wrap>.study_btns > .btnPop > button + button{border-top:1px solid #ddd;}

/* 다크모드 버튼 */
.learning_wrap .darkMode { position: absolute; display: inline-block; cursor: pointer; font-size: 1.8rem; right: 4.2%; top: -75%; width: 30px; height: 30px; background: #999; border-radius: 50%; /* bottom: 95px; */ }
.learning_wrap .darkMode.hide { display: none; }
.learning_wrap .darkMode > i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 25px; }

.add_form {
	padding: 15px;
	position: relative;
	z-index: 1;
}

.add_form>.progress {
	display: block;
	font-size: 0;
	position: fixed;
	top: 70px;
	left: 0px;
	right: 0px;
	height: 3px;
	background: #eee;
	z-index: 10;
}

.add_form>.progress>i {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	display: block;
	width: calc(100%/ 7);
	background: #FD747A;
}

.screenup>header .prev {
	display: none;
}

.add_form>.add_step {
	padding: 0px 0px 0px 0px;
	display: none;
}

.add_form>.add_step.show {
	display: block;
}

.add_step>div.tit {
	margin-bottom: 15px;
	position: relative;
}

.add_step>div.tit>h3 {
	display: block;
	font-size: 18px;
	margin-bottom: 4px;
	line-height: 30px;
	letter-spacing: -1px;
	color: #111;
	font-weight: 500;
}

.add_step>div.tit>p {
	display: block;
	font-size: 0px;
	min-height: 18px;
}

.add_step>div.tit>p>span {
	display: inline-block;
	font-size: 13px;
	color: #999;
	line-height: 18px;
	position: relative;
	letter-spacing: -0.5px;
	font-weight: 400;
}

.add_step>div.tit>p>span+span {
	margin-left: 20px;
}

.add_step>div.tit>p>span+span:before {
	font-family: 'xeicon' !important;
	content: "\e93f";
	vertical-align: middle;
	position: absolute;
	top: 0px;
	left: -20px;
	width: 20px;
	text-align: center;
	display: block;
	color: #bbb;
	font-size: 14px;
	height: 18px;
	line-height: 18px;
	z-index: 1;
}

.add_step>div.tit>a {
	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
	font-size: 15px;
	border: 0px solid #ccc;
	color: #50CCC6;
	font-weight: 400;
	background: transparent;
	line-height: 30px;
	padding: 0px;
	border-radius: 0px;
	text-decoration: underline;
}

.add_step>div.contents {
	display: block;
	padding: 0px 0px;
}

.add_step .groups {
	margin: 0px;
	padding: 0px;
}

.add_step .groups>ul>li {
	border: 1px solid #ccc;
}

div.groupTitWrap {
	display: block;
	position: relative;
}

div.groupTitWrap>i {
	display: inline-block;
	line-height: 20px;
	font-size: 11px;
	color: #fff;
	padding: 0px 5px;
	letter-spacing: 1px;
}

div.groupTitWrap>b {
	display: block;
	line-height: 18px;
	font-size: 12px;
	position: absolute;
	top: 15px;
	right: 15px;
	font-weight: 400;
	color: #888;
}

div.groupTitWrap>h4 {
	display: block;
	line-height: 25px;
	font-size: 20px;
	font-weight: 500
}

div.groupTitWrap>span {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: #888;
}

div.groupTitWrap>span>b {
	font-weight: 500;
	font-size: 15px;
	color: #666;
}

div.groupTitWrap>p {
	display: block;
	line-height: 20px;
	font-size: 13px;
	color: #999;
}

div.group_detail {
	display: block;
	padding: 15px;
	position: relative;
	background: #f2f2f2;
	margin-bottom: 30px;
}

div.group_detail.npd {
	padding: 0px;
	margin-bottom: 10px;
}

div.group_detail>h4 {
	display: block;
	line-height: 22px;
	font-size: 16px;
	font-weight: 500;
}

div.group_detail>div.add {
	position: absolute;
	top: 5px;
	right: 0px;
	line-height: 36px;
	background: #666;
	color: #fff;
	padding: 0px 15px;
	border-radius: 5px;
}

div.group_detail>div.add ul {
	position: absolute;
	top: 47px;
	right: 0px;
	background: black;
	width: 120px;
	z-index: 2;
	border-radius: 10px;
	display: none;
}

div.group_detail>div.add ul.on {
	display: inline-block;
}

div.group_detail>div.add ul::before {
	content: "";
	width: 0px;
	height: 0px;
	border: 10px solid;
	display: inline-block;
	border-color: transparent;
	border-bottom-color: black;
	position: absolute;
	right: 9px;
	top: -20px;
}

div.group_detail>div.add ul li {
	padding: 10px;
	text-align: right;
	cursor: pointer;
}

div.group_detail>div.add ul li:not(:last-child) {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

div.group_detail>a.group_set {
	position: absolute;
	top: 41px;
	right: 15px;
	display: block;
	padding: 0px 0px;
	width: 36px;
	height: 36px;
	line-height: 36px;
	font-size: 0px;
	overflow: hidden;;
	text-align: center;
	border: 1px solid #eee;
	border-radius: 5px;
	background-color: #f2f2f2;
}

div.group_detail>a.group_set::before {
	display: block;
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	font-family: 'xeicon' !important;
	font-size: 24px;
	vertical-align: bottom;
	margin-right: 5px;
	color: #999;
	content: "\e986";
}

div.group_detail[data-role='ON-A']>i, div.group_detail[data-role='ON-A']>i
	{
	background: rgba(207, 125, 154, 0.9);
}

div.group_detail[data-role='ON-L']>i, div.group_detail[data-role='ON-L']>i
	{
	background: rgba(0, 146, 114, 0.9);
}

div.group_detail[data-role='OFF-A']>i, div.group_detail[data-role='OFF-A']>i
	{
	background: rgba(90, 197, 220, 0.9);
}

div.group_detail[data-role='OFF-L']>i, div.group_detail[data-role='OFF-L']>i
	{
	background: rgba(202, 175, 0, 0.9);
}

div.group_detail[data-role='ETC']>i, div.group_detail[data-role='ETC']>i
	{
	background: rgba(159, 162, 167, 0.9);
}

div.group_detail>dl {
	display: block;
	margin-top: 10px;
	background: #fff;
	padding: 10px 15px;
}

div.group_detail>dl>dd {
	display: block;
	font-size: 0px;
	position: relative;
}

div.group_detail>dl>dd::after {
	content: "";
	display: block;
	clear: both;
}

div.group_detail>dl>dd+dd {
	border-top: 1px solid #eee;
}

div.group_detail>dl>dd>span {
	float: right;
	display: inline-block;
	vertical-align: bottom;
	font-size: 13px;
	line-height: 24px;
	color: #777;
	font-weight: 400;
}

div.group_detail>dl>dd>b {
	display: inline-block;
	vertical-align: bottom;
	font-size: 13px;
	line-height: 24px;
	color: #777;
	font-weight: 400;
}

div.group_detail>dl>dd>b>em {
	display: inline-block;
	vertical-align: bottom;
	font-size: 13px;
	line-height: 24px;
	color: #777;
	font-weight: 400;
	margin-left: 5px;
}

dd.no_bt {
	border-top: 0px !important;
}

dd.no_bt b {
	visibility: hidden;
}

.groups.n_pb {
	padding-bottom: 15px;
	background: #fff;
	box-sizing: border-box;
}

.groups .btn_save {
	width: 100% !important;
}

.groups div.textbooks_box>.add_textbook {
	padding: 10px 0px;
	padding-right: 100px;
	position: relative;
	min-height: 60px;
}

.groups div.textbooks_box>.add_textbook>h4 {
	display: block;
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
	letter-spacing: -0.5px;
	margin-bottom: 4px;
}

.groups div.textbooks_box>.add_textbook>p {
	line-height: 15px;
	color: #999;
	font-size: 13px;
}

.groups div.textbooks_box>.add_textbook>a {
	display: block;
	position: absolute;
	top: 10px;
	right: 0px;
	width: 85px;
	line-height: 18px;
	color: #fff;
	background: #333;
	text-align: center;
	padding: 12px 0px;
	border-radius: 5px;
	font-size: 14px;
}

.groups div.textbooks_box>.add_textbook>ul {
	position: absolute;
	top: 80px;
	right: 0px;
	background: black;
	width: 120px;
	z-index: 2;
	border-radius: 10px;
	display: none;
}

.groups div.textbooks_box>.add_textbook>ul.on {
	display: inline-block;
}

.groups div.textbooks_box>.add_textbook>ul::before {
	content: "";
	width: 0px;
	height: 0px;
	border: 10px solid;
	display: inline-block;
	border-color: transparent;
	border-bottom-color: black;
	position: absolute;
	right: 9px;
	top: -20px;
}

.groups div.textbooks_box>.add_textbook>ul li {
	padding: 10px;
	text-align: right;
	cursor: pointer;
	color: #fff;
}

.groups div.textbooks_box>.add_textbook>ul li:not(:last-child) {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.groups div.textbooks_box .statusOff {
	position: absolute;
	bottom: 15px;
	right: 20px;
	font-size: 14px;
	color: #999;
}

.add_step>div.textbooks_box {
	display: block;
}

.add_step>div.textbooks_box>.add_textbook {
	padding: 10px 0px;
	padding-right: 100px;
	position: relative;
	min-height: 75px;
}

.add_step>div.textbooks_box>.add_textbook:after {
	content: "";
	display: block;
	clear: both;
}

.add_step>div.textbooks_box>.add_textbook>h4 {
	display: block;
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
	letter-spacing: -0.5px;
	margin-bottom: 4px;
}

.add_step>div.textbooks_box>.add_textbook>p {
	line-height: 18px;
	color: #999;
	font-size: 13px;
}

.add_step>div.textbooks_box>.add_textbook>a {
	display: block;
	position: absolute;
	top: 10px;
	right: 0px;
	width: 85px;
	line-height: 18px;
	color: #fff;
	background: #333;
	text-align: center;
	padding: 12px 0px;
	border-radius: 5px;
	font-size: 14px;
}

.week_schedule {
	display: block;
	margin-top: 10px;
}

.week_schedule>div+div {
	margin-top: 10px;
}

.week_schedule>div {
	position: relative;
	padding-left: 50px;
}

.week_schedule>div>label {
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	padding: 0px 0px;
	height: 40px;
	color: #999;
	text-align: center;
	line-height: 40px;
	width: 40px;
}

.week_schedule>div>label>input[type=checkbox]+span {
	display: block;
	line-height: 36px;
	text-align: center;
	font-size: 15px;
	font-weight: 500;
	margin-left: 0px;
	background: #eee;
	color: #bbb;
	padding: 0px 0px;
	border: 2px solid #eee;
	border-radius: 50%;
}

.week_schedule>div>label>input[type=checkbox]+span:before {
	display: none !important;
}

.week_schedule>div>label>input[type=checkbox]:checked+span {
	background: #1890F1;
	border: 2px solid #1890F1;
	color: #fff;
}

.week_schedule>div .term_pick {
	display: block;
	line-height: 40px;
	padding-right: 50px;
	position: relative;
	font-size: 0px;
}

.week_schedule>div .term_pick+.term_pick {
	margin-top: 5px;
}

.week_schedule>div .term_pick>a {
	z-index: 3;
	position: absolute;
	top: 0px;
	right: 0px;
	line-height: 38px;
	height: 40px;
	overflow: hidden;
	background: #fff;
	color: #999;
	width: 40px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	font-size: 0px;
	text-align: center;
	border-radius: 5px;
}

.week_schedule>div .term_pick>a::before {
	font-family: 'xeicon' !important;
	content: "\e913";
	display: block;
	width: 40px;
	height: 40px;
	line-height: 38px;
	text-align: center;
	font-size: 16px;
}

.week_schedule>div .term_pick>a.minus::before {
	content: "\e91a";
}

.week_schedule>div .term_pick.disabled>a {
	border: 1px solid #eee;
	color: #ddd;
}

.week_schedule>div .term_pick.disabled::after {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background: rgba(0, 0, 0, 0);
	display: block;
	content: '';
	z-index: 4;
}

.week_schedule>div .date_rate {
	display: block;
	line-height: 40px;
	position: relative;
}

.week_schedule>div .date_rate b {
	display: inline-block;
}

.week_schedule>div .date_rate .data_ratio {
	margin-left: 5px;
	font-weight: 400;
}

.week_schedule>div .date_rate>.field_trans.select {
	width: auto;
	height: 40px;
	line-height: 40px;
	border-bottom: none;
	position: absolute;
	top: 0;
	right: 0;
	overflow: visible;
	font-weight: 600;
}

.week_schedule>div .date_rate>.field_trans.select::after {
	display: none;
}

.week_schedule>div .date_rate>.field_trans.select span {
	font-weight: 600;
}

.week_schedule>div .date_rate>.field_trans.select span::after {
	content: ":";
	padding-left: 5px;
}

.week_schedule>div .date_rate.disabled {
	border-bottom: none;
}

.week_schedule>div .date_rate.disabled:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.0)
}

.week_schedule>div .date_rate.disabled>b {
	color: #ddd;
}

.week_schedule>div .date_rate.disabled>.field_trans.select {
	color: #ddd;
}

.week_schedule>div .date_rate.disabled>.field_trans.select .select_box .sel:after
	{
	color: #ddd;
}

.week_schedule>div .date_rate .select_box .sel {
	padding: 5px 20px 5px 0;
	text-align: right;
}

.week_schedule>div .date_rate.disabled>.field_trans>.split>input {
	color: #ddd;
}

.field_trans.select.time .select_box {
	width: 110px;
}

.field_trans.select.term .select_box {
	width: 90px;
}

.field_trans.select.end .select_box {
	width: 110px;
}

.field_trans.select.time, .field_trans.select.term, .field_trans.select.end
	{
	display: none;
}

@media screen and (max-width:400px) {
	.week_schedule.type2>div .date_rate {
		line-height: 1.5;
		padding: 5px 0;
	}
	.week_schedule.type2>div .date_rate>.field_trans.select {
		position: static;
		height: auto;
		line-height: 0;
		width: 100%;
	}
	.week_schedule.type2>div .date_rate>.field_trans.select .sel {
		text-align: left;
	}
	.week_schedule.type2>div .date_rate>.field_trans.select .sel_list li {
		text-align: left;
	}
	.week_schedule.type2>div>label {
		top: 50%;
		margin-top: -20px;
	}
}

.add_step>ul.rows {
	display: block;
	box-sizing: border-box;
	background: #fff;
}

.add_step>ul.rows>li {
	display: block;;
	position: relative;
}

.add_step>ul.rows>li+li {
	border-top: 1px solid #eee;
}

.add_step>ul.rows>li>a {
	display: block;
	padding: 0px 0px;
	font-size: 15px;
	cursor: pointer;
	line-height: 50px;
}

.add_step>ul.rows>li>a::after {
	font-family: 'xeicon' !important;
	content: "\e907";
	vertical-align: middle;
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	color: #999;
	font-size: 16px;
	height: 50px;
	line-height: 50px;
	z-index: 1;
}

.add_step>ul.rows>li>a>span {
	display: inline-block;
	font-size: 14px;
	vertical-align: text-bottom;
}

.add_step>ul.rows>li>a>h4 {
	font-size: 18px;
	line-height: 22px;
}

.add_step>ul.rows>li>a>p {
	font-size: 15px;
	line-height: 20px;
}

.add_step>ul.box {
	display: block;
	box-sizing: border-box;
}

.add_step>ul.box>li {
	display: block;;
	position: relative;
}

.add_step>ul.box>li+li {
	margin-top: 10px;
}

.add_step>ul.box>li>a {
	display: block;
	padding: 15px 15px;
	font-size: 16px;
	cursor: pointer;
	line-height: 50px;
	border: 1px solid #ddd;
	background: #f8f8f8;
	border-radius: 5px;
}

.add_step>ul.box>li>a::after {
	font-family: 'xeicon' !important;
	content: "\e907";
	vertical-align: middle;
	position: absolute;
	top: 50%;
	margin-top: -25px;
	right: 15px;
	display: block;
	color: #999;
	font-size: 25px;
	height: 50px;
	line-height: 50px;
	z-index: 1;
}

.add_step>ul.box>li>a>span {
	display: inline-block;
	font-size: 14px;
	vertical-align: text-bottom;
}

.add_step>ul.box>li>a>h4 {
	font-size: 20px;
	line-height: 22px;
	color: #bbb;
}

.add_step>ul.box>li>a>p {
	font-size: 14px;
	line-height: 20px;
	margin-top: 5px;
}

.add_step>ul.books {
	display: block;
	font-size: 0px;
	text-align: left;
	margin-left: -2%;
	margin-top: -15px;
}

.add_step>ul.books>li {
	display: inline-block;
	width: 31.3333%;
	margin-left: 2%;
	position: relative;
	vertical-align: top;
	margin-top: 15px;
}

.add_step>ul.books>li>a {
	display: block;
	padding: 0px 0px;
	font-size: 16px;
	cursor: pointer;
	line-height: 50px;
}

.add_step>ul.books>li>a>i.thumb {
	display: block;
	padding-top: 135%;
	background-size: cover;
	border: 1px solid #ddd;
}

.add_step>ul.books>li>a>p {
	height: 18px;
	line-height: 18px;
	font-size: 15px;
	overflow: hidden;
	word-break: keep-all;
	text-align: center;
	margin-top: 8px;
	margin-bottom: 4px;
}

.add_step>ul.books>li>a>span {
	font-size: 13px;
	color: #999;
	line-height: 15px;
	text-align: center;
	display: block;
}

.textbooks>.topper {
	display: block;
	position: relative;
	margin-bottom: 10px;
}

.textbooks>.topper>p {
	display: block;
	line-height: 36px;
	color: #666;
}

.textbooks>.topper>p>b {
	font-weight: 500;
}

.textbooks>.topper>a {
	position: absolute;
	top: 0px;
	right: 0px;
	line-height: 36px;
	background: #666;
	color: #fff;
	padding: 0px 15px;
	border-radius: 5px;
}

.textbooks>ul.books {
	display: block;
	font-size: 0px;
}

.textbooks>ul.books>li {
	display: block;
}

.textbooks>ul.books>li+li {
	margin-top: 5px;
}

.textbooks>ul.books>li>div {
	display: block;
	padding: 25px 15px;
	font-size: 0px;
	padding-left: 130px;
	min-height: 110px;
	position: relative;
	background: #fff;
}

.textbooks>ul.books>li>div>i.thumb {
	position: absolute;
	top: 15px;
	left: 15px;
	width: 90px;
	height: 130px;
	display: block;
	background-size: cover;
	border: 1px solid #ddd;
	background-position: center;
	box-sizing: border-box;
}

.textbooks>ul.books>li>div>h4 {
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	margin-bottom: 10px;
}

.textbooks>ul.books>li>div>p {
	font-size: 0px;
}

.textbooks>ul.books>li>div>p>span {
	font-size: 0px;
	line-height: 16px;
	padding: 2px 0px;
	display: inline-block;
	position: relative;
}

.textbooks>ul.books>li>div>p>span>em {
	font-size: 13px;
	font-weight: 400;
	color: #999;
	vertical-align: bottom;
	min-width: 65px;
	display: inline-block;
}

.textbooks>ul.books>li>div>p>span>b {
	font-size: 13px;
	font-weight: 400;
	vertical-align: bottom;
	display: inline-block;
}

.textbooks>ul.books>li>div>p>span+span {
	margin-left: 22px;
}

.textbooks>ul.books>li>div>p>span+span::before {
	width: 2px;
	height: 12px;
	position: absolute;
	left: -12px;
	top: 6px;
	background: #ccc;
	content: '';
	display: block;
}

.textbooks>ul.books>li>div>label {
	width: 24px;
	line-height: 24px;
	height: 24px;
	padding-left: 24px;
	padding: 0px;
	position: absolute;
	top: 15px;
	right: 15px;
}

.textbooks>ul.books>li>div>label>input[type=checkbox]+span {
	display: block;
	line-height: 24px;
	height: 24px;
	margin-left: 0px;
	vertical-align: bottom;
	background: transparent;
	width: 24px;
}

.textbooks>ul.books>li>div>label>input[type=checkbox]+span:before {
	display: block;
	content: '';
	width: 20px;
	height: 20px;
	border-radius: 3px;
	background: #f8f8f8;
	border: 2px solid #ddd;
	vertical-align: bottom;
	top: 0px;
}

.textbooks>ul.books>li>div>label>input[type=checkbox]+span:after {
	display: none;
}

.textbooks>ul.books>li>div>label>input[type=checkbox]:checked+span {
	color: #00090d;
}

.textbooks>ul.books>li>div>label>input[type=checkbox]:checked+span:before
	{
	font-size: 20px;
	line-height: 20px;
	background: #382063;
	border: 2px solid #382063;
	color: #fff;
	content: "\e928";
}

.textbooks.selecter.type2>ul.books>li>div {
	padding: 15px 50px 15px 130px !important;
	min-height: 130px !important;
}

.add_form .btns {
	margin-top: 0px;
	font-size: 0px;
	border-top: 0px solid #ccc;
	padding: 15px 0px 0px 0px;
}

.add_form .btns>button {
	display: inline-block;
	width: 100%;
	background: #382063;
	color: #fff;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}

.add_form .btns>.btn_save {
	display: inline-block;
	width: 100%;
	background: #382063;
	color: #fff;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}

.add_form .btns>button.delete {
	width: calc(30% - 10px);
	margin-right: 10px;
	background: #999;
	color: #fff;
}

.add_form .btns>a {
	display: block;
	background: #50CCC6;
	color: #fff;
	width: 100%;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	margin-top: 10px;
	letter-spacing: -1px;
}

.add_form .btns>button.btn_rgst {
	width: calc(30% - 10px);
	margin-right: 10px;
	background: #999;
	color: #fff;
}

.add_form .btns>button.btn_next {
	width: 70%;
}

.add_form .textboox_list li {
	
}

.add_form .textboox_list li+li {
	display: block;
	border-bottom: 1px solid #D2D1D5;
	font-size: 0;
}

.add_form .textboox_list li:first-child {
	padding: 20px 0 5px 0;
}

.add_form .textboox_list li a {
	display: block;
}

.add_form .textboox_list li a::after {
	display: none;
}

.add_form .textboox_list li a .book_img {
	width: 120px;
	height: 168px;
	display: inline-block;
}

.add_form .textboox_list li a .book_img>img {
	width: 100%;
	height: 100%;
}

.add_form .textboox_list li a .book_txt {
	display: inline-block;
	width: calc(100% - 146px);
	margin-left: 20px;
}

.add_form .textboox_list li a .book_txt p {
	display: block;
	font-size: 18px;
	margin-top: 10px;
	width: 100%;
}

.add_form .textboox_list li a .book_txt span {
	display: block;
	font-size: 15px;
	color: #9E9E9E;
	margin-top: 20px;
}

.add_form .textboox_list li a .book_txt em {
	display: block;
	position: absolute;
	right: 0;
	bottom: 20px;
	font-size: 18px;
	color: #9E9E9E;
}

.add_form>.code_ex {
	display: block;
	position: relative;
}

.add_form>.code_ex>p {
	display: block;
	font-size: 18px;
	margin-top: 30px;
	margin-bottom: 30px;
}

.add_form>.code_ex>a {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	font-size: 0;
}

.add_form>.code_ex>a::after {
	content: '';
	width: 18px;
	height: 18px;
	display: block;;
	background: url(../images/icon_code_next.png) no-repeat;
	background-size: cover;
}

.add_form .code_i {
	border-bottom: 1px solid #E7E7E7;
}

.add_form .code_i>input[type=number] {
	width: 100%;
	font-size: 20px;
	height: 26px;
}

.add_form .code_i>input::placeholder {
	color: #C4C4C6;
}

.add_form>.textbook_neme {
	display: block;
	margin-top: 70px;
	border-bottom: 1px solid #E7E7E7;
}

.add_form>.textbook_neme>input[type=text] {
	width: 100%;
	font-size: 18px;
}

.day_choice {
	display: block;
	padding: 0px 0px;
	padding-top: 40px;
	padding-bottom: 20px;
}

.day_choice.npd {
	display: block;
	padding: 0px 0px;
}

.day_choice>p {
	display: block;
	font-size: 14px;
	color: #999;
	text-align: left;
	line-height: 20px;
	margin-bottom: 10px;
}

.week_selecter {
	display: block;
	text-align: center;
	font-size: 0px;
	margin-bottom: 20px;
}

.week_selecter.tmg {
	padding-top: 45px;
	margin-bottom: 0px;
	padding-bottom: 5px;
}

.week_selecter>div {
	width: calc(100%/ 7);
	display: inline-block;
	vertical-align: top;
}

.week_selecter>div>label {
	padding: 0px 0px;
	height: 40px;
	color: #999;
	text-align: center;
	line-height: 40px;
	width: 40px;
}

.week_selecter>div>label>input[type=checkbox]+span {
	display: block;
	line-height: 36px;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	margin-left: 0px;
	background: #eee;
	color: #bbb;
	padding: 0px 0px;
	border: 2px solid #eee;
	border-radius: 50%;
}

.week_selecter>div>label>input[type=checkbox]+span:before {
	display: none !important;
}

.week_selecter>div>label>input[type=checkbox]:checked+span {
	background: #1890F1;
	border: 2px solid #1890F1;
	color: #fff;
}

.week_selecter>div>select {
	display: none;
	line-height: 40px;
	height: 40px;
	text-align: center;
	width: 100%;
	font-size: 18px;
	font-weight: 500;
	margin-top: 5px;
}

.week_selecter>div.checked>select {
	display: block;
}

.week_selecter>div>p {
	line-height: 40px;
	height: 40px;
	text-align: center;
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	margin-top: 5px;
}

.day_choice>.user_set_box {
	width: 100%;
	margin-bottom: 20px;
}

.day_choice>.user_set_box, .day_choice>.set_box>.learning.end {
	display: none;
}

.day_choice>.user_set_box.view, .day_choice>.set_box>.learning.end.view
	{
	display: inline-block;
}

.add_form .radio {
	display: block;
	padding: 40px 0px;
}

.add_form .radio>label {
	padding: 0px 0px;
	height: 40px;
	color: #999;
	text-align: left;
	line-height: 40px;
	display: block;
}

.add_form .radio>label>input[type=radio]+span {
	display: block;
	line-height: 36px;
	font-size: 15px;
	font-weight: 500;
	margin-left: 32px;
	padding: 0px 0px;
}

.add_form .radio>label>input[type=radio]+span:before {
	width: 22px;
	height: 22px;
	line-height: 22px;
	border: 2px solid #ccc;
	vertical-align: top;
	margin-top: 5px;
}

.add_form .radio>label>input[type=radio]:checked+span:before {
	background: #1890F1;
	border: 2px solid #1890F1;
	color: #fff;
}

.book_view {
	display: block;
	padding: 15px;
	background: #f2f2f2;
}

.book_view>ul.tab_menu {
	display: block;
	font-size: 0px;
}

.book_view>ul.tab_menu>li {
	display: inline-block;
	width: 50%;
}

.book_view>ul.tab_menu>li>a {
	line-height: 50px;
	text-align: center;
	display: block;
	font-size: 16px;
	background: #ddd;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	color: #999;
}

.book_view>ul.tab_menu>li.on>a {
	background: #f2f2f2;
	border-bottom: 1px solid transparent;
	color: #00090d;
	font-weight: 500;
}

.book_view>ul.tab_menu>li+li>a {
	border-left: 1px solid #ccc;
}

.book_view.admin {
	display: block;
	padding: 15px;
	padding-bottom: 95px;
	background: #f2f2f2;
}

.book_view>div>ul {
	display: block;
	background: #fff;
	padding: 15px 15px;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

.book_view>div>ul>li {
	display: inline-block;
	margin-right: 10px;
}

.book_view>div>ul>li>a {
	display: block;
	font-size: 16px;
	cursor: pointer;
}

.book_view>div>ul>li.on>a {
	font-family: 'GmarketSansMedium';
}

.book_view>.book_info {
	display: block;
}

.book_view>.book_info+.book_info {
	margin-top: 25px;
}

.book_view>.book_info>p {
	display: block;
	padding: 5px 0px 15px 0px;
	font-size: 18px;
	position: relative;
}

.book_view>.book_info>p>a {
	display: block;
	position: absolute;
	top: 15px;
	right: 15px;
}

.book_view>.book_info>p>a::before {
	content: '\e986';
	display: inline-block;
	height: 20px;
	font-size: 20px;
	line-height: 20px;
	font-family: 'xeicon' !important;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #111;
	vertical-align: middle;
	font-weight: 400;
	margin-left: 10px;
}

.book_view>.book_info>div {
	display: block;
	background: #fff;
	padding: 0px 15px;
	position: relative;
}

.book_view>.book_info>div+div {
	margin-top: 5px;
}

.book_view>.book_info>div>span {
	display: inline-block;
	color: #BCBCBC;
	width: auto;
	font-size: 13px;
	line-height: 20px;
	padding: 15px 0px;
	vertical-align: top;
	position: absolute;
	top: 0px;
	left: 15px;
}

.book_view>.book_info>div>a {
	display: block;
	color: #1890F1;
	width: auto;
	font-size: 14px;
	padding: 15px 0px;
	vertical-align: top;
	position: absolute;
	top: 0px;
	left: 15px;
	text-decoration: underline;
}

.book_view>.book_info>div>p {
	display: block;
	font-size: 14px;
	text-align: right;
	padding: 15px 0px;
	position: relative;
	line-height: 20px;
}

.book_view>.book_info>div>p>span {
	display: block;
	font-size: 12px;
	color: #999;
	margin-top: 5px;
}

.book_view>.book_info>div>p>b {
	display: inline-block;
	color: #666;
	width: auto;
	font-size: 13px;
	font-weight: 400;
	padding: 5px 0px;
	line-height: 20px;
	vertical-align: top;
	position: absolute;
	top: 0px;
	left: 80px;
}

.book_view>.book_info>div>p+p {
	display: block;
}

.book_view>.book_info>div>p.bookmark::before {
	content: '\e928';
	display: block;
	height: 20px;
	font-size: 20px;
	line-height: 20px;
	position: absolute;
	top: 18px;
	left: 20px;
	font-family: 'xeicon' !important;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #333;
	vertical-align: middle;
	font-weight: 500;
}

.book_view>.book_info>div>p>a {
	display: block;
	cursor: pointer;
}

.book_view>.book_info>div>p>a>span {
	display: block;
	position: absolute;
	right: 50px;
	top: 20px;
}

/* 2023.01.11 추가 */
.book_info_etc {
	display: flex !important;
	justify-content: flex-end !important;
}

.book_info_etc>span {
	width: 30% !important;
}

.book_info_etc>span+p {
	width: 70% !important;
}
/* End */
@media screen and (max-width:321px) {
	.book_view>.book_info>div>p {
		font-size: 12px;
	}
}

.book_view>.book_info>div.detail {
	padding: 10px 15px;
}

.book_view>.book_info>div.detail>p {
	padding: 5px 0px;
}
/* .book_view > .book_info > div > p > a { display: block;position: absolute;right: 20px;top: 20px;cursor: pointer; }
.book_view > .book_info > div > p > a::after { content: '\e93e';display:inline-block;height:16px;font-size:16px;line-height:16px;font-family : 'xeicon' !important; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;text-align: center;color:#D6D6D6;vertical-align: middle;font-weight: 400;margin-left: 10px; } */
.book_view>.book_info>div>em {
	display: block;
	color: #BCBCBC;
	font-size: 16px;
	padding: 20px 0px;
	position: absolute;
	right: 40px;
	top: 0px;
}

.book_view>.book_info>div>em>a {
	display: inline-block;
}

.book_view>.book_info>div>em>a::after {
	content: '\e93e';
	display: inline-block;
	height: 16px;
	font-size: 16px;
	line-height: 16px;
	font-family: 'xeicon' !important;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #D6D6D6;
	vertical-align: middle;
	font-weight: 400;
	margin-left: 10px;
}

.book_view>.book_info>.data>ul {
	display: inline-block;
	width: calc(100% - 76px);
}

.book_view>.book_info>.data>ul>li {
	display: block;
}

.book_view>.book_info>.data>ul>li>a {
	display: block;
	font-size: 16px;
	padding: 20px 0px;
	position: relative;
}

.book_view>.book_info>.data>ul>li+li>a {
	border-top: 1px solid #ECF0F2;
}

.book_view>.book_info>.data>ul>li>a>em {
	display: block;
	position: absolute;
	top: 20px;
	right: 30px;
}

.book_view>.book_info>.data>ul>li>a::after {
	content: '\e93e';
	display: block;
	height: 16px;
	font-size: 16px;
	line-height: 16px;
	position: absolute;
	right: 0px;
	top: 20px;
	font-family: 'xeicon' !important;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #D6D6D6;
	vertical-align: middle;
	font-weight: 400;
}

.book_view>.book_info>.week {
	display: block;
	padding-bottom: 20px;
}

.book_view>.book_info>.week>p {
	display: block;
	font-size: 16px;
	color: #BCBCBC;
	width: 100%;
	padding: 20px 0 0 0;
}

.book_view>.book_info>.week>span {
	display: block;
	font-size: 16px;
	text-align: right;
	color: #BCBCBC;
	width: 100%;
	margin-bottom: 15px;
}

.book_view>.book_info>.week>span>a {
	display: block;
}

.book_view>.book_info>.week>span>a::after {
	content: '\e93e';
	display: inline-block;
	height: 16px;
	font-size: 16px;
	line-height: 16px;
	font-family: 'xeicon' !important;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #D6D6D6;
	vertical-align: middle;
	font-weight: 400;
	margin-left: 10px;
}

.book_view>.book_info>.week>ul {
	display: block;
	font-size: 0;
}

.book_view>.book_info>.week>ul>li {
	display: inline-block;
	width: calc(100%/ 7);
	font-size: 14px;
}

.book_view>.book_info>.week>ul>li>div {
	display: block;
	width: 36px;
	height: 36px;
	background: #F2F2F2;
	border: 1px solid transparent;
	border-radius: 50%;
	text-align: center;
	padding: 0;
	line-height: 36px;
	color: #D6D6D6;
	box-sizing: border-box;
	margin: 0 auto;
}

.book_view>.book_info>.week>ul>li.on>div {
	background: #1890F1;
	border: 1px solid #1890F1;
	color: #fff;
}

.book_view>.book_info>.week>ul>li.line>div {
	border: 1px solid #1890F1;
	color: #1890F1;
}

.book_view>.book_info>.week>div {
	display: block;
	box-sizing: border-box;
	font-size: 0;
	margin: 15px 0px;
}

.book_view>.book_info>.week>div>span {
	display: inline-block;
	width: calc(100%/ 7);
	text-align: center;
}

.book_view>.book_info>.week>div>span>label {
	display: none;
}

.book_view>.book_info>.week>div>span>input[type=number] {
	width: 36px;
	text-align: center;
	height: 40px;
	line-height: 40px;
}

.book_view>.book_info>.week>.plan {
	margin: 15px 0 0 0;
}

.book_view>.book_info>.week>.plan>p {
	display: block;
	position: relative;
}

.book_view>.book_info>.week>.plan>p+p {
	margin-top: 25px;
}

.book_view>.book_info>.week>.plan>p span {
	display: inline-block;
	color: #BCBCBC;
	font-size: 15px;
	width: 45px;
}

.book_view>.book_info>.week>.plan>p em {
	display: inline-block;
	font-size: 16px;
	margin-left: 10px;
}

.book_view>.book_info>.week>.plan>p em>a {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
}

.book_view>.book_info>.week>.plan>p em>a::after {
	content: '\e93e';
	display: inline-block;
	height: 16px;
	font-size: 16px;
	line-height: 16px;
	font-family: 'xeicon' !important;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #D6D6D6;
	vertical-align: middle;
	font-weight: 400;
	margin-left: 10px;
}

.book_view>.book_info>ul.summary {
	display: block;
	margin-top: 0px;
	font-size: 0px;
	background: #1890F1;
	padding: 15px 0px;
	margin-bottom: 5px;
}

.book_view>.book_info>ul.summary>li {
	display: inline-block;
	width: 33.3333%;
	text-align: center;
	padding: 0px 0px;
	margin: 0px;
}

.book_view>.book_info>ul.summary>li+li {
	margin-left: -1px;
	border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.book_view>.book_info>ul.summary>li>span {
	display: block;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	line-height: 18px;
	height: 18px;
	letter-spacing: -0.5px;
}

.book_view>.book_info>ul.summary>li>strong {
	display: block;
	font-size: 26px;
	color: #fff;
	font-weight: 600;
	padding: 2px 0px;
	letter-spacing: -0.5px;
	line-height: 30px;
	height: 30px;
}

.book_view>.book_info>ul.summary>li>em {
	display: block;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	line-height: 18px;
	height: 18px;
}

.book_view>.book_info>ul.summary>li>em>b {
	font-size: 12px;
	font-weight: 500;
}

.book_view>.book_info>.set_box {
	padding: 15px;
}

.book_view>.book_info>.set_box>p {
	font-size: 13px;
	text-align: left;
	padding: 0px;
}

.book_view>.book_info>.set_box .field_trans {
	width: 90px;
	height: 40px;
	border-bottom: none;
	position: absolute;
	top: 0;
	right: 0;
	text-align: right;
	line-height: 40px;
	font-weight: 600;
}

.book_view>.book_info>.set_box .field_trans span {
	font-weight: 600;
}

@media screen and (max-width:333px) {
	.book_view>.book_info>.set_box .field_trans {
		width: 50px;
		text-align: center;
	}
	.book_view>.book_info>.set_box .field_trans span {
		display: none;
	}
}

.cmtre_summary {
	display: block;
	padding: 15px;
	background: #f2f2f2;
}

.cmtre_summary>.cmtre_info {
	display: block;
}

.cmtre_summary>.cmtre_info+.cmtre_info {
	margin-top: 25px;
}

.cmtre_summary>.cmtre_info>p {
	display: block;
	padding: 5px 0px 15px 0px;
	font-size: 18px;
	position: relative;
}

.cmtre_summary>.cmtre_info>div {
	display: block;
	background: #fff;
	padding: 0px 15px;
	position: relative;
}

.cmtre_summary>.cmtre_info>div+div {
	margin-top: 5px;
}

.cmtre_summary>.cmtre_info>div>span {
	display: inline-block;
	color: #BCBCBC;
	width: auto;
	font-size: 13px;
	line-height: 20px;
	padding: 15px 0px;
	vertical-align: top;
	position: absolute;
	top: 0px;
	left: 15px;
}

.cmtre_summary>.cmtre_info>div>p {
	display: block;
	font-size: 14px;
	text-align: right;
	padding: 15px 0px;
	position: relative;
	line-height: 20px;
}

.cmtre_summary>.cmtre_info>div>p>b {
	display: inline-block;
	color: #666;
	width: auto;
	font-size: 13px;
	font-weight: 400;
	padding: 5px 0px;
	line-height: 20px;
	vertical-align: top;
	position: absolute;
	top: 0px;
	left: 80px;
}

.cmtre_summary>.cmtre_info>div.detail {
	padding: 10px 15px;
	overflow: hidden;
}

.cmtre_summary>.cmtre_info>div.detail>.title {
	padding-bottom: 10px;
	font-size: 16px;
}

.cmtre_summary>.cmtre_info>div.detail>.title span {
	color: #1890F1;
	padding-right: 10px;
}

.cmtre_summary>.cmtre_info>div.detail>.title p {
	display: inline-block;
	color: red;
	font-size: 16px;
}

.cmtre_summary>.cmtre_info>div.detail>p {
	padding: 5px 0px;
	display: inline-block;
	width: 48%;
	float: left;
}

.cmtre_summary>.cmtre_info>div.detail>p>b {
	left: 0px;
}

.cmtre_summary>.cmtre_info>div.detail>p:nth-of-type(2n) {
	margin-left: 4%;
}

.cmtre_summary>.cmtre_info>ul.summary {
	display: block;
	margin-top: 0px;
	font-size: 0px;
	background: #1890F1;
	padding: 15px 0px;
	margin-bottom: 5px;
}

.cmtre_summary>.cmtre_info>ul.summary>li {
	display: inline-block;
	width: 33.3333%;
	text-align: center;
	padding: 0px 0px;
	margin: 0px;
}

.cmtre_summary>.cmtre_info>ul.summary>li+li {
	margin-left: -1px;
	border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.cmtre_summary>.cmtre_info>ul.summary>li>span {
	display: block;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	line-height: 18px;
	height: 18px;
	letter-spacing: -0.5px;
}

.cmtre_summary>.cmtre_info>ul.summary>li>strong {
	display: block;
	font-size: 26px;
	color: #fff;
	font-weight: 600;
	padding: 2px 0px;
	letter-spacing: -0.5px;
	line-height: 30px;
	height: 30px;
}

.cmtre_summary>.cmtre_info>div .delayTime_box {
	display: block;
	font-size: 14px;
	text-align: right;
	padding: 15px 0px;
	position: relative;
	line-height: 20px;
}

.cmtre_summary>.cmtre_info>div .delayTime_box::after {
	font-family: "FontAwesome";
	content: "\f107";
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	font-size: 15px;
	height: 50px;
	line-height: 50px;
	color: #999;
}

.cmtre_summary>.cmtre_info>div .delayTime_box select {
	padding: 0 20px 0 10px;
}

.line2_item>span {
	position: static !important;
	padding: 15px 0px 10px 0px !important;
}

.line2_item>p {
	text-align: left !important;
	padding: 0px 0px 15px 0px !important;
}

.cmtre_summary>.cmtre_info>div.detail.type2 p {
	padding: 5px 0px;
	display: inline-block;
	width: 100%;
	padding-left: 80px;
	box-sizing: border-box;
}

.cmtre_summary>.cmtre_info>div.detail.type2 p>b {
	left: 0px;
}

.cmtre_summary>.cmtre_info>div.detail.type2 p:nth-of-type(2n) {
	margin-left: 0px;
}

/* 학습리포트 교재별 평가,분석데이터 관련 */
.set_lrnData {
	display: block;
	background: #fff;
	padding: 0px 15px;
	position: relative;
	border: 1px solid #999;
	border-radius: 5px;
	margin-top: 5px;
}

.set_lrnData.del {
	background: #bcbcbc;
}

.set_lrnData.del>span {
	color: black;
}

.set_lrnData>span {
	display: inline-block;
	color: #BCBCBC;
	width: auto;
	font-size: 13px;
	line-height: 20px;
	padding: 15px 0px;
	vertical-align: top;
	position: absolute;
	top: -10px;
	left: 15px;
}

.set_lrnData>p {
	display: block;
	font-size: 14px;
	text-align: right;
	padding: 15px 0px;
	position: relative;
	line-height: 20px;
}
/* End */
.daily_schedule {
	padding: 0px;
}

.daily {
	padding: 0px;
}

.date_roll {
	display: block;
	text-align: center;
	padding: 25px 0px;
	position: relative;
	font-size: 0px;
}

.date_roll>h4 {
	display: inline-block;
	font-size: 26px;
	line-height: 34px;
	font-weight: 600;
	color: #382063;
	vertical-align: bottom;
	padding: 0px 15px;
}

.date_roll>h4>em {
	font-size: 22px;
	color: #382063;
	display: inline-block;
	line-height: 34px;
	vertical-align: bottom;
	margin-left: 5px;
	font-weight: 400;
}

.date_roll>a {
	display: inline-block;
	width: 30px;
	height: 30px;
	font-size: 18px;
	margin-top: -15px;
	line-height: 30px;
	border: 2px solid #fff;
	color: #bbb;
	background: #fff;
	border-radius: 50%;
	font-family: 'xeicon' !important;
	text-align: center;
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
	vertical-align: bottom;
}

.date_roll>a.prev::before {
	content: "\e906";
}

.date_roll>a.next::before {
	content: "\e907";
}

.date_roll>p {
	text-align: center;
	font-size: 16px;
	color: #ccc;
	margin-top: 5px;
}

.date_roll>p>b {
	font-size: 18px;
	font-weight: 500;
	color: #999;
	margin: 0 3px;
}

.daily>.timeline {
	display: block;
	padding: 15px;
}

.daily>.timeline>ul {
	display: block;
}

.daily>.timeline>ul>li {
	display: block;
}

.daily>.timeline>ul>li+li {
	margin-top: 5px;
}

.daily>.timeline>ul>li>div {
	display: block;
	background: #fff;
	padding: 15px;
	padding-left: 60px;
	position: relative;
}

.daily>.timeline>ul>li>div.rest_time {
	background: #fff;
}

.daily>.timeline>ul>li>div>em {
	position: absolute;
	line-height: 18px;
	font-size: 12px;
	top: 15px;
	left: 15px;
	font-weight: 500;
	color: #fff;
	background: #bbb;
	width: 36px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	text-align: center;
	border-radius: 3px;
}

.daily>.timeline>ul>li>div>em[data-type='1'] {
	background: #50CCC6;
}

.daily>.timeline>ul>li>div>em[data-type='4'] {
	background: #FD747A;
}

.daily>.timeline>ul>li>div>h5 {
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	position: relative;
	margin-bottom: 5px;
	padding-right: 80px;
	word-break: keep-all;
}

.daily>.timeline>ul>li>div>h5>b {
	display: block;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	vertical-align: bottom;
}

.daily>.timeline>ul>li>div>h5>span {
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	line-height: 20px;
	font-size: 12px;
	color: #666;
	font-weight: 400;
}

.daily>.timeline>ul>li>div.rest_time>h5 {
	display: none;
}

.daily>.timeline>ul>li>div>p {
	font-size: 13px;
	line-height: 20px;
	position: relative;
	color: #999;
}

.daily>.timeline>ul>li>div>p>b {
	font-weight: 500;
}

.daily>.timeline>ul>li>div>.row_btns {
	
}

.daily>.timeline>ul>li>div.opened::before {
	position: absolute;
	bottom: 0px;
	right: 0px;
	top: 0px;
	left: 0px;
	content: '';
	background: rgba(0, 0, 0, 0.7);
	z-index: 10;
}

.daily>.timeline>ul>li>div>a.btn {
	display: none;
	width: 30px;
	height: 30px;
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 11;
	font-size: 0px;
	text-align: center;
	color: #999;
	overflow: hidden;
}

.daily>.timeline>ul>li>div>a.btn::before {
	display: block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-family: 'xeicon' !important;
	content: "\e94a";
	font-size: 20px;
}

.daily>.timeline>ul>li>div>dl {
	background: #eee;
	padding: 7px;
	margin-top: 10px;
	display: block;
}

.daily>.timeline>ul>li>div>dl>dd {
	display: block;
	line-height: 30px;
	position: relative;
	padding: 0px 5px;
}

.daily>.timeline>ul>li>div>dl>dd+dd {
	border-top: 1px solid #fff;;
}

.daily>.timeline>ul>li>div>dl>dd>span {
	position: absolute;
	top: 0px;
	left: 5px;
	line-height: 28px;
	font-size: 12px;
	color: #999;
}

.daily>.timeline>ul>li>div>dl>dd>b {
	display: block;
	font-size: 13px;
	text-align: right;
	font-weight: 500;
	line-height: 28px;
	position: relative;
}

.daily>.timeline>ul>li>div>dl>dd>b>i {
	position: absolute;
	font-size: 12px;
	line-height: 28px;
	top: 0px;
	left: 70px;
	font-weight: 400;
	color: #666;
}

.daily>.timeline>ul>li>div>dl>dd>b+b {
	margin-top: -5px;
}

.daily>.timeline>ul>li.placeholder {
	background: #eee7e3;
	box-sizing: border-box;
	position: relative;
}

.daily>.timeline>ul>li.placeholder::before {
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	display: block;
	content: '';
	border: 2px dashed rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
}

.daily>.timeline>ul>li.ui-sortable-helper {
	transform: scale(1.2);
}

/* 2022.08.19 report_parents */
.float_btns.flex {
	display: flex;
	justify-content: space-between;
}

.float_btns .btn_pop {
	width: calc(50% - 5px);
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 500;
	background: #50CCC6;
	color: #fff;
	display: inline-block;
}

.re_modal {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	display: none;
}

.re_modal>div {
	background: #fff;
	max-width: 90%;
	border-radius: 5px;
	width: 500px;
}

.re_modal>div>.head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #ccc;
	font-size: 20px;
}

.re_modal>div>.head>p {
	font-size: 18px;
}

.re_modal>div>.head a {
	font-weight: 500;
}

.re_modal>div>.body {
	padding: 15px;
}

.re_modal .body .field_trans.select {
	width: 100%;
	position: relative;
	border-bottom: 1px solid #ccc;
}

.re_modal .body .field_trans.select::after {
	font-family: FontAwesome;
	content: "\f107";
	vertical-align: middle;
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	color: #999;
	font-size: 15px;
	height: 40px;
	line-height: 40px;
	z-index: 1;
}

.re_modal .body .field_trans.select>select {
	display: block;
	width: 100%;
	padding: 0px 0px;
	line-height: 40px;
	height: 40px;
	box-sizing: border-box;
	font-size: 16px;
	font-weight: 400;
	z-index: 2;
	position: relative;
	letter-spacing: -0.5px;
}

.re_modal .body label:not(:first-child) {
	margin-left: 10px;
}

.re_modal .body button {
	width: 100%;
	text-align: center;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 500;
	background: #50CCC6;
	color: #fff;
	display: inline-block;
	margin-top: 20px;
}
/* @_END */

/* 2022.08.19 report_teachers */
header .st_num {
	background: #3366cc;
	color: #fff;
	border-radius: 5px;
	padding: 5px 10px;
	display: inline-block;
	line-height: 20px;
	margin-left: 15px;
}

.re_list strong {
	display: flex !important;
	justify-content: space-between;
}

.re_list strong:first-of-type {
	margin-bottom: 5px !important;
}

.re_list strong:not(:first-of-type) {
	font-size: 14px !important;
	margin-bottom: 3px !important;
}

.re_list strong:not(:nth-of-type(2))>span {
	max-width: 50%;
}

.re_list strong:nth-of-type(5)>span {
	max-width: 100% !important;
}

.re_list strong>span:first-child {
	color: #888;
}

.re_list strong>span.view_btn {
	color: #3366cc;
}

.re_list strong>span.tit {
	color: #00090d;
	position: relative;
}

.re_list strong>span.tit:after {
	content: '';
	width: 15px;
	height: 15px;
	border-radius: 50%;
	display: inline-block;
	position: absolute;
	top: 50%;
	right: -25px;
	transform: translateY(-50%);
}

.re_list strong>span.tit.a:after {
	background: #00090d;
}

.re_list strong>span.tit.b:after {
	background: #cc3333;
}

.re_list strong>span.tit.c:after {
	background: #33ffcc;
}

.re_list strong>span.tit.d:after {
	background: #cccccc;
}

.re_list strong>span.tit.e:after {
	background: #ffff80;
}

.type_d strong:not(:first-of-type) {
	color: #cccccc !important;
}

.type_d span.tit {
	color: #cccccc !important;
}

.type_d span:first-child {
	color: #cccccc !important;
}
/* @_END */
.calendars {
	padding: 0px 15px 15px 15px;
}

.calendars>.month {
	display: block;
	text-align: center;
	padding: 20px 0px;
}

.calendars>.month>h4 {
	display: block;
	font-size: 30px;
	line-height: 40px;
	font-weight: 600;
	position: relative;
	color: #382063;
}

.calendars>.month>h4>a {
	display: block;
	width: 30px;
	height: 30px;
	top: 50%;
	font-size: 18px;
	margin-top: -15px;
	line-height: 30px;
	position: absolute;
	border: 2px solid #fff;
	color: #bbb;
	background: #fff;
	border-radius: 50%;
	font-family: 'xeicon' !important;
	text-align: center;
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
}

.calendars>.month>h4>a.prev {
	left: 50%;
	margin-left: -120px;
}

.calendars>.month>h4>a.next {
	right: 50%;
	margin-right: -120px;
}

.calendars>.month>h4>a.prev::before {
	content: "\e906";
}

.calendars>.month>h4>a.next::before {
	content: "\e907";
}

.calendars>dl {
	display: block;
	font-size: 0;
}

.calendars>dl>dt {
	display: inline-block;
	font-size: 16px;
	width: calc(100%/ 7);
	text-align: center;
	line-height: 26px;
	vertical-align: top;
	box-sizing: border-box;
	border: 1px solid #f2f2f2;
	background: #fff;
	color: #666;
	border-radius: 5px;
	overflow: hidden;
}

.calendars>dl>dd {
	display: inline-block;
	font-size: 14px;
	width: calc(100%/ 7);
	text-align: center;
	vertical-align: top;
	box-sizing: border-box;
	border: 1px solid #f2f2f2;
	background: #fff;
	border-radius: 5px;
	overflow: hidden;
}

.calendars>dl>dd>a>div {
	height: 55px;
	position: relative;
	cursor: pointer;
	padding: 15px 0px;
}

.calendars>dl>dd>a>div>i {
	width: 8px;
	height: 8px;
	position: absolute;
	top: 5px;
	font-size: 0;
	border-radius: 50%;
	display: none;
}

.calendars>dl>dd>a>div>i:nth-child(1) {
	right: 5px;
}

.calendars>dl>dd>a>div>i:nth-child(2) {
	right: 14px;
}

.calendars>dl>dd>a>div>i:nth-child(3) {
	right: 23px;
}

.calendars>dl>dd>a>div>i.learning {
	background: #D394F0;
}

.calendars>dl>dd>a>div>i.intension {
	background: #5AE5DF;
}

.calendars>dl>dd>a>div>i.self {
	background: #BCBCBC;
}

.calendars>dl>dd>a>div>em.play {
	line-height: 40px;
	font-size: 30px;
	border-radius: 50%;
	display: block;
	text-align: center;
	color: #fff;
	display: block;
}

.calendars>dl>dd>a>div>p.percent {
	font-size: 13px;
	color: #aaa;
	margin-top: 10px;
	letter-spacing: -0.5px;
	font-weight: 500;
}

.calendars>dl>dd>a>div>p.f_time {
	font-size: 11px;
	color: #D394F0;
	margin-top: 3px;
}

.calendars>dl>dd>a>div>p.l_time {
	font-size: 10px;
	color: #A8A8AA;
	margin-top: 5px;
	display: none;
}

.calendars>dl>dd>a>div>p.day {
	text-align: center;
	font-size: 15px;
	color: #333;
	padding: 0px 6px;
}

.calendars>dl>dt:nth-child(7n) {
	color: #369AFB;
}

.calendars>dl>dt:nth-child(7n+1) {
	color: #FD5658;
}

.calendars>dl>dd:nth-child(7n)>a>div>p.day {
	color: #369AFB;
}

.calendars>dl>dd:nth-child(7n+1)>a>div>p.day {
	color: #FD5658;
}

.calendars>dl>dd.on>a>div {
	background: #50CCC6;
}

.calendars>dl>dd.on>a>div>p {
	color: #fff;
}

.calendars>dl>dd.on>a>div>i.learning {
	background: #fff;
}

.calendars>dl>dd.disabled>a>div {
	
}

.calendars>dl>dd.disabled>a>div>p {
	color: #ccc !important;
}

.calendars>dl>dd.disabled>a>div>i.learning {
	background: #fff;
}

.calendars>.color_info {
	display: block;
	overflow: hidden;
	padding: 15px 0px;
}

.calendars>.color_info ul {
	display: block;
	float: right;
}

.calendars>.color_info ul li {
	display: inline-block;
	font-size: 14px;
}

.calendars>.color_info ul li::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 0px solid #DDDEE1;
	box-sizing: border-box;
	vertical-align: middle;
	margin-right: 5px;
	margin-left: 10px;
	border-radius: 50%;
}

.calendars>.color_info ul li.learning::before {
	background: #D394F0;
	border: 0px solid transparent;
}

.calendars>.color_info ul li.intension::before {
	background: #5AE5DF;
}

.calendars>.color_info ul li.self::before {
	background: #BCBCBC;
}

.tips {
	display: block;
	background: #fff;
	padding: 15px;
	margin-top: 10px;
}

.tips>h4 {
	font-size: 18px;
	color: #bbb;
	line-height: 20px;
	margin-bottom: 10px;
	letter-spacing: -1px;
}

.tips>p {
	font-size: 13px;
	color: #999;
	padding: 2px 0px 2px 10px;
	line-height: 16px;
	position: relative;
}

.tips>p::before {
	position: absolute;
	width: 2px;
	height: 2px;
	background: #999;
	top: 10px;
	left: 0px;
	content: '';
	display: block;
}

.schedule>.container {
	padding-bottom: 0px;
}

div.container.weekly_plan {
	padding-top: 50px;
}

div.container.less_plan {
	padding-top: 50px;
}

div.container.request {
	padding-top: 50px;
}

div.container.daily_plan {
	padding-top: 80px;
	padding-bottom: 0px;
}

div.container.weekly_plan>.timeline>ul>li {
	display: block;
	border-top: 0px solid #ccc;
	border-bottom: 0px solid #ccc;
}

div.container.weekly_plan>.timeline>ul>li+li {
	margin-top: 5px;
}

div.container.weekly_plan>.timeline>ul>li>div.rest_time {
	background: #fff;
}

div.container>div.tab {
	position: fixed;
	width: 100%;
	top: 70px;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	z-index: 19;
	height: 50px;
	max-width: 1280px;
	min-width: 320px;
	-webkit-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
}

div.container>div.tab>ul {
	display: block;
	font-size: 0px;
}

div.container>div.tab>ul>li {
	display: inline-block;
	width: calc(100%/ 7);
	vertical-align: top;
}

div.container.request>div.tab>ul>li {
	width: calc(100%/ 7);
}

div.container>div.tab>ul>li>a {
	display: block;
	line-height: 50px;
	height: 50px;
	font-size: 16px;
	color: #bbb;
	text-align: center;
	position: relative;
	letter-spacing: -0.5px;
}

div.container>div.tab>ul>li>a.on {
	color: #111;
	font-weight: 500;
}

div.container>div.tab>ul>li>a.on::after {
	position: absolute;
	bottom: 10px;
	left: 50%;
	margin-left: -15px;
	width: 30px;
	height: 2px;
	background: #50CCC6;
	content: '';
}

div.container>div.tab>ul>li>a>em {
	position: absolute;
	top: 2px;
	right: 2px;
	background: #FD747A;
	line-height: 20px;
	height: 20px;
	min-width: 16px;
	padding: 0 2px;
	font-size: 11px;
	display: block;
	text-align: center;
	border-radius: 50%;
	color: #fff;
}

div.container>div.tab>ul>li>a>em::before {
	content: attr(data-cnt);
}

div.container>div.tab>ul>li>a>em[data-cnt="0"] {
	display: none;
}

.check_list {
	padding: 15px;
}

.check_list label {
	width: 24px;
	line-height: 24px;
	height: 24px;
	padding-left: 24px;
	padding: 0px;
}

.check_list label>input[type=checkbox]+span {
	display: block;
	line-height: 24px;
	height: 24px;
	margin-left: 0px;
	vertical-align: bottom;
}

.check_list label>input[type=checkbox]+span:before {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 3px;
	background: #f8f8f8;
	border: 2px solid #ddd;
	vertical-align: bottom;
	top: 0px;
}

.check_list label>input[type=checkbox]:checked+span {
	color: #00090d;
}

.check_list label>input[type=checkbox]:checked+span:before {
	font-size: 20px;
	line-height: 20px;
	background: #382063;
	border: 2px solid #382063;
	color: #fff;
	content: "\e928";
}

.check_list>.less_box {
	display: block;
	background: #fff;
	padding: 15px;
}

.check_list>.less_box+.less_box {
	margin-top: 5px;
}

.check_list>.less_box>h4 {
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
	position: relative;
	margin-bottom: 15px;
}

.check_list>.less_box>h4>label {
	position: absolute;
	top: 0px;
	right: 0px;
}

.check_list>.less_box>ul {
	display: block;
	border-top: 1px solid #111;
}

.check_list>.less_box>ul>li {
	display: block;
	margin-left: 0px;
	position: relative;
}

.check_list>.less_box>ul>li+li {
	border-top: 1px solid #ddd;
}

.check_list>.less_box>ul>li>a {
	display: block;
	color: #FD747A;
	padding: 12px 0px;
	position: relative;
	margin-right: 36px;
	font-size: 0px;
}

.check_list>.less_box>ul>li>a>span {
	display: inline-block;
	color: #5C5C5C;
	width: calc(100% - 50px);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: bottom;
	font-size: 14px;
	line-height: 20px;
}

.check_list>.less_box>ul>li>a>em {
	display: inline-block;
	color: #A8A8AA;
	width: 50px;
	margin-left: 0px;
	text-align: right;
	vertical-align: bottom;
	font-size: 16px;
	line-height: 20px;
}

.check_list>.less_box>ul>li>label {
	position: absolute;
	top: 10px;
	right: 0px;
}

.reserve_order {
	display: block;
	width: 100%;
	position: fixed;
	right: 0;
	left: 0;
	bottom: -180px;
	background: rgba(255, 255, 255, 1);
	border-top: 1px solid #A0A9B1;
	font-size: 0;
	box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
}

.reserve_order>a {
	display: block;
	width: 102px;
	height: 21px;
	border: 1px solid #A0A9B1;
	position: absolute;
	top: -23px;
	left: 50%;
	transform: translate(-50%, 0);
	background: rgba(255, 255, 255, 1);
	border-bottom: 1px solid transparent;
}

.reserve_order>a::before {
	display: block;
	position: absolute;
	top: 0px;
	left: 50%;
	font-family: 'xeicon' !important;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e946";
	color: #949494;
	font-size: 16px;
	text-align: center;
	line-height: 20px;
	transform: translate(-50%, 0);
}

div.textbooks.request {
	padding-bottom: 15px;
}

div.textbooks.request.order_on {
	padding-bottom: 195px;
}

div.textbooks.request.order_on+.reserve_order {
	bottom: -0px;
}

div.textbooks.request.order_on+.reserve_order>a::before {
	content: "\e943";
}

div.textbooks.teacher {
	padding: 15px !important;
}

.reserve_order>p {
	display: block;
	font-size: 16px;
	border-bottom: 1px solid #E1E1E1;
	padding: 15px;
	line-height: 20px;
	box-sizing: border-box;
}

.reserve_order>p>span {
	display: inline-block;
	float: right;
	font-size: 18px;
	font-weight: 500;
	color: #1DBCA4;
	line-height: 20px;
	vertical-align: bottom;
}

.reserve_order>span {
	display: inline-block;
	padding: 10px 15px;
	box-sizing: border-box;
	width: 50%;
	line-height: 20px;
	font-size: 14px;
	position: relative;
	color: #999;
}

.reserve_order>span+span {
	border-left: 1px solid #E1E1E1;
}

.reserve_order>span>em {
	display: inline-block;
	line-height: 20px;
	vertical-align: bottom;
	float: right;
	font-weight: 500;
	color: #666;
}

.reserve_order>.next_btn {
	display: block;
	background: #E9ECEF;
	padding: 15px;
	width: 100%;
	box-sizing: border-box;
}

.reserve_order>.next_btn>button {
	display: block;
	width: 100%;
	background: #50CCC6;
	color: #fff;
	height: 56px;
	border-radius: 5px;
	font-size: 18px;
}

.reserve_order>.choice_textbook {
	display: none;
	padding: 0px 20px;
}

.reserve_order>.choice_textbook.on {
	display: block;
}

.reserve_order>.choice_textbook>p {
	display: block;
	font-size: 18px;
	padding: 15px 0px;
	border-bottom: 1px solid #F3F3F3;
	position: relative;
}

.reserve_order>.choice_textbook>p>span {
	display: inline-block;
	width: 18px;
	height: 18px;
	position: absolute;
	top: 14px;
	right: 0px;
	cursor: pointer;
}

.reserve_order>.choice_textbook>p>span::after {
	display: block;
	height: 18px;
	font-size: 18px;
	line-height: 23px;
	font-family: 'xeicon' !important;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e9af";
	text-align: left;
	color: #111;
}

.reserve_order>.choice_textbook>span {
	display: block;
	padding: 15px 0px;
	position: relative;
	border-bottom: 1px solid #CFD3D7;
}

.reserve_order>.choice_textbook>span::after {
	content: '분';
	display: block;
	font-size: 18px;
	position: absolute;
	right: 0px;
	top: 22px;
}

.reserve_order>.choice_textbook>span>label {
	display: inline-block;
	font-size: 18px;
	color: #111;
	padding-left: 0px;
	width: calc(100% - 81px);
}

.reserve_order>.choice_textbook>span>label::after {
	display: inline-block;
	height: 19px;
	font-size: 19px;
	line-height: 17px;
	font-family: 'xeicon' !important;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e9a7";
	text-align: left;
	color: #1890F1;
	vertical-align: middle;
	margin-left: 5px;
	font-weight: 400;
}

.reserve_order>.choice_textbook>span>label.on+div {
	display: block;
}

.reserve_order>.choice_textbook>span>input[type=number] {
	display: inline-block;
	width: 60px;
	border: 1px solid #707070;
	height: 30px;
	box-sizing: border-box;
	text-align: center;
}

.reserve_order>.choice_textbook>span>div {
	display: none;
	position: absolute;
	bottom: -28px;
	left: -8px;
	background: #fff;
	padding: 10px;
	z-index: 1;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
}

.reserve_order>.choice_textbook>span>div>p {
	font-size: 13px;
}

.teacher>a.order_items {
	background: #fff;
	line-height: 30px;
	display: block;
	padding: 15px;
	font-size: 0px;
	padding-right: 50px;
	position: relative;
}

.teacher>a.order_items>h4 {
	font-size: 16px;
	display: inline-block;
	vertical-align: bottom;
	line-height: 30px;
}

.teacher>a.order_items>h4>b {
	font-size: 16px;
	display: inline-block;
	vertical-align: bottom;
	line-height: 30px;
	font-weight: 500;
	color: #50CCC6;
	margin-left: 5px;
}

.teacher>a.order_items>span {
	float: right;
	font-size: 14px;
	display: inline-block;
	vertical-align: bottom;
	line-height: 30px;
	color: #999;
}

.teacher>a.order_items>span>b {
	font-size: 14px;
	display: inline-block;
	vertical-align: bottom;
	line-height: 30px;
	font-weight: 500;
	color: #333;
	margin-left: 5px;
}

.teacher>a.order_items:after {
	font-family: 'xeicon' !important;
	content: "\e942";
	vertical-align: middle;
	position: absolute;
	top: 0px;
	right: 15px;
	display: block;
	color: #999;
	font-size: 20px;
	height: 60px;
	line-height: 60px;
	z-index: 1;
}

.teacher>a.order_items.opened:after {
	content: "\e945";
}

.teacher>a.order_items+ul.list {
	display: none;
}

.teacher>a.order_items.opened+ul.list {
	display: block;
	border-top: 1px solid #ccc;
}

.teacher>.teacher_list {
	display: block;
	margin-top: 25px;
}

.teacher>.teacher_list.nmg {
	margin-top: 0px;
}

.teacher>.teacher_list>p {
	display: block;
	color: #999;
	line-height: 20px;
	text-align: center;
	margin-bottom: 10px;
}

.teacher>.teacher_list>.teacher_box {
	display: block;
	padding: 15px;
	background: #fff;
	position: relative;
}

.teacher>.teacher_list>.teacher_box+.teacher_box {
	margin-top: 5px;
}

.teacher>.teacher_list>.teacher_box>.text {
	display: block;
	margin-right: 125px;
}

.teacher>.teacher_list>.teacher_box>.text>p {
	display: block;
	font-size: 13px;
	line-height: 17px;
	white-space: nowrap;
	overflow: hidden;
}

.teacher>.teacher_list>.teacher_box>.text>p.time {
	height: 40px;
	overflow: hidden;
	white-space: normal;
	word-break: keep-all;
	margin-bottom: 5px;
}

.teacher>.teacher_list>.teacher_box>.text>a.name {
	display: block;
	color: #1890F1;
	font-size: 18px;
	line-height: 28px;
	width: 100%;
	overflow: hidden
}

.teacher>.teacher_list>.teacher_box>.text>a.name>span {
	display: inline-block;
	vertical-align: bottom;
	font-size: 14px;
	line-height: 28px;
}

.teacher>.teacher_list>.teacher_box>.text>p.info {
	display: block;
	margin: 0px;
	padding: 0px;
	color: #999;
	line-height: 16px;
	font-size: 0px;
	margin-bottom: 5px;
}

.teacher>.teacher_list>.teacher_box>.text>p.info>span {
	display: inline-block;
	vertical-align: middle;
	line-height: 16px;
	font-size: 13px;
}

.teacher>.teacher_list>.teacher_box>.text>p.info>span+span::before {
	content: '';
	width: 1px;
	height: 12px;
	background: #E1E1E1;
	display: inline-block;
	vertical-align: middle;
	margin: 0px 10px;
}

.teacher>.teacher_list>.teacher_box>.text>p.appraisal::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	background: url(../images/icon_appraisal.png) no-repeat;
	background-size: cover;
	vertical-align: middle;
	margin-right: 5px;
}

.teacher>.teacher_list>.teacher_box>.text>p.appraisal>span {
	display: inline-block;
}

.teacher>.teacher_list>.teacher_box>.photo {
	position: absolute;
	top: 15px;
	right: 15px;
	display: block;
	width: 120px;
	height: 120px;
	background-size: cover;
}

.teacher>.teacher_list>.teacher_box>.photo>img {
	width: 100%;
	margin-top: 20px;
}

.teacher>.teacher_list>.teacher_box>.choice_time {
	display: block;
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #ddd;
	text-align: center;
}

.teacher>.teacher_list>.teacher_box>.choice_time>p {
	
}

.teacher>.teacher_list>.teacher_box>.choice_time>ul {
	display: block;
	font-size: 0;
	margin-left: -1%;
	margin-top: -4px
}

.teacher>.teacher_list>.teacher_box>.choice_time>ul li {
	display: inline-block;
	width: calc(15.5555% - 2px);
	font-size: 14px;
	border: 1px solid #50CCC6;
	line-height: 35px;
	margin-left: 1%;
	margin-top: 4px;
	background: #50CCC6;
	color: #fff;
}

.teacher>.teacher_list>.teacher_box>.choice_time>ul li.on {
	background: #50CCC6;
	color: #fff;
}

.teacher>.teacher_list>.teacher_box>.choice_time>ul li.disabled {
	color: #bbb;
	background: #eee;;
	border: 1px solid #ddd;
	cursor: default;
}

.teacher>.teacher_list>.teacher_box>button {
	display: block;
	border: 2px solid #50CCC6;
	width: 100%;
	height: 50px;
	border-radius: 5px;
	font-size: 16px;
	color: #50CCC6;
	margin-top: 15px;
}

.teacher>.teacher_list>.teacher_box>button.on {
	background: #1DBCA4;
	color: #fff;
}

.teacher>.teacher_list>.teacher_box>.comment {
	display: block;
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #ddd;
	text-align: left;
}

.teacher>.teacher_list>.teacher_box>.comment>h5 {
	font-size: 15px;
	color: #bbb;
	font-weight: 500;
	line-height: 20px;
	margin-bottom: 5px;
}

.teacher>.teacher_list>.teacher_box>.comment>p {
	font-size: 13px;
	line-height: 20px;
}

.star {
	clear: both;
	display: block;
	line-height: 20px;
	font-size: 0px;
	position: relative;
	white-space: nowrap;
	vertical-align: middle;
	padding-top: 5px;
}

.star>span {
	display: inline-block;
	line-height: 20px;
	font-size: 0px;
	position: relative;
	white-space: nowrap;
	vertical-align: bottom;
}

.star>b {
	display: inline-block;
	line-height: 20px;
	font-size: 16px;
	vertical-align: bottom;
	font-weight: 500;
	margin-left: 10px;
	color: #999;
}

.star>span>i {
	width: 20px;
	height: 20px;
	display: inline-block;
	font-family: 'xeicon' !important;
	font-size: 18px;
	color: #bbb;
	vertical-align: middle;
}

.star>span>i::before {
	content: "\ea16";
}

.star>span>em {
	display: block;
	white-space: nowrap;
	position: absolute;
	top: 0px;
	left: 0px;
	line-height: 20px;
	white-space: nowrap;
	overflow: hidden;
}

.star>span>em>i {
	width: 20px;
	height: 20px;
	display: inline-block;
	font-family: 'xeicon' !important;
	font-size: 18px;
	color: #fda94f;
}

.star>span>em>i::before {
	content: "\ea0f";
}

.teacher>.reserve_btn {
	display: block;
	background: #E9ECEF;
	height: 50px;
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	padding: 20px 25px;
	min-width: 320px;
}

.teacher>.reserve_btn>button {
	display: block;
	background: #C9C9C9;
	color: #fff;
	width: 100%;
	text-align: center;
	font-size: 18px;
	height: 50px;
	line-height: 50px;
	border-radius: 6px;
}

.teacher>.reserve_btn>button.on {
	background: #1DBCA4;
	color: #fff;
}

div.leture_history {
	padding: 15px;
	padding-bottom: 0px;
}

div.leture_history>ul.list {
	
}

div.leture_history>ul.list>li {
	background: #fff;
}

div.leture_history>ul.list>li+li {
	margin-top: 5px;
}

div.leture_history>ul.list>li>a {
	display: block;
	padding: 15px 15px;
	position: relative;
}

div.leture_history>ul.list>li>a>strong {
	display: block;
	margin-bottom: 0px;
	line-height: 22px;
	font-size: 15px;
	font-weight: 400;
	word-break: keep-all;
	position: relative;
	color: #999;
}

div.leture_history>ul.list>li>a>strong>span {
	display: inline-block;
	vertical-align: bottom;
	font-size: 13px;
	line-height: 22px;
}

div.leture_history>ul.list>li>a>i {
	position: absolute;
	top: 15px;
	right: 15px;
	display: inline-block;
	float: right;
	margin-right: 0px;
	margin-top: 0px;
	width: auto;
	padding: 0px 10px;
	border-radius: 4px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	vertical-align: top;
	font-weight: 300;
	font-size: 12px;
	color: #fff;
	background: #1890F1;
}

div.leture_history>ul.list>li>a>i.completed {
	background: #bbb;
}

div.leture_history>ul.list>li>a>span {
	display: block;
	color: #999;
	font-size: 13px;
	line-height: 20px;
}

div.leture_history>ul.list>li>a>span>b {
	display: inline-block;
	float: right;
	font-weight: 400;
	color: #999;
	font-size: 13px;
	line-height: 20px;
}

div.leture_history>.btns {
	display: block;
	padding: 15px 15px;
	margin: 0px;
	text-align: right;
}

div.leture_history>.btns>a.back {
	display: inline-block;
	width: 70px;
	margin: 0 auto;
	border: 1px solid #ccc;
	color: #999;
	line-height: 40px;
	height: 40px;
	background: #fff;
	text-align: center;
	border-radius: 5px;
	font-size: 14px;
}

div.leture_history>.btns>a.more {
	display: block;
	width: 40px;
	margin: 0 auto;
	border: 1px solid #ccc;
	color: #666;
	line-height: 40px;
	height: 40px;
	background: #fff;
	text-align: center;
	border-radius: 50%;;
	font-size: 15px;
}

div.leture_history>.btns>a.more:before {
	content: '\e9c5';
	display: block;
	width: 40px;
	line-height: 40px;
	vertical-align: top;
	font-size: 20px;
	color: inherit;
	font-family: 'xeicon';
}

div.leture_history .order_items {
	background: #fff;
	line-height: 30px;
	display: block;
	padding: 0px;
	font-size: 0px;
	padding-right: 0px;
	position: relative;
}

div.leture_history .order_items>h4 {
	font-size: 16px;
	display: inline-block;
	vertical-align: bottom;
	line-height: 30px;
}

div.leture_history .order_items>h4>b {
	font-size: 16px;
	display: inline-block;
	vertical-align: bottom;
	line-height: 30px;
	font-weight: 500;
	color: #50CCC6;
	margin-left: 5px;
}

div.leture_history .order_items>span {
	float: right;
	font-size: 14px;
	display: inline-block;
	vertical-align: bottom;
	line-height: 30px;
	color: #999;
}

div.leture_history .order_items>span>b {
	font-size: 14px;
	display: inline-block;
	vertical-align: bottom;
	line-height: 30px;
	font-weight: 500;
	color: #333;
	margin-left: 5px;
}

div.textbooks.teacher>ul.list>li+li {
	border-top: 1px solid #eee;
}

.teacher>div.order_tit {
	background: #fff;
	line-height: 30px;
	display: block;
	padding: 10px 15px;
	font-size: 0px;
	position: relative;
	border-bottom: 1px solid #ccc;
}

.teacher>div.order_tit.tmg {
	margin-top: 15px;
}

.teacher>div.order_tit>h4 {
	font-size: 16px;
	display: inline-block;
	vertical-align: bottom;
	line-height: 30px;
}

.teacher>div.order_tit>h4>b {
	font-size: 16px;
	display: inline-block;
	vertical-align: bottom;
	line-height: 30px;
	font-weight: 500;
	color: #50CCC6;
	margin-left: 5px;
}

.teacher>div.order_tit>span {
	float: right;
	font-size: 14px;
	display: inline-block;
	vertical-align: bottom;
	line-height: 30px;
	color: #999;
}

.teacher>div.order_tit>span>b {
	font-size: 14px;
	display: inline-block;
	vertical-align: bottom;
	line-height: 30px;
	font-weight: 500;
	color: #333;
	margin-left: 5px;
}

div.textbooks.teacher.detail {
	padding-bottom: 0px !important;
}

.teacher>.lecture_info {
	display: block;
	background: #fff;
}

.teacher>.lecture_info>dl {
	display: block;
	font-size: 0px;
}

.teacher>.lecture_info>dl>dd {
	display: block;
	position: relative;
	padding: 12px 15px;
}

.teacher>.lecture_info>dl>dd+dd {
	border-top: 1px solid #eee;
}

.teacher>.lecture_info>dl>dd>span {
	position: absolute;
	top: 12px;
	left: 15px;
	line-height: 20px;
	font-size: 13px;
	color: #999;
}

.teacher>.lecture_info>dl>dd>b {
	display: block;
	font-size: 14px;
	text-align: right;
	font-weight: 500;
	line-height: 20px;
}

.agreement {
	display: block;
	padding: 15px;
	box-sizing: border-box;
}

.agreement.show {
	display: block;
}

.agreement>div {
	font-size: 14px;
	margin-bottom: 20px;
}

.agreement>div>strong {
	display: block;
	margin-bottom: 10px;
	font-weight: 500;
	font-size: 15px;
}

.agreement>div>span {
	display: block;
	margin-bottom: 10px;
}

.agreement>div.list>p {
	padding-left: 20px;
	position: relative;
	margin-bottom: 5px;
	font-size: 13px;
	line-height: 16px;
}

.agreement>div.list>p::before {
	display: inline-block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
}

.agreement>div.list>p:nth-of-type(1)::before {
	content: '①'
}

.agreement>div.list>p:nth-of-type(2)::before {
	content: '②'
}

.agreement>div.list>p:nth-of-type(3)::before {
	content: '③'
}

.agreement>div.list>p:nth-of-type(4)::before {
	content: '④'
}

.agreement>div.list>p:nth-of-type(5)::before {
	content: '⑤'
}

.status {
	display: block;
}

.status ul.summary {
	margin-top: 0px;
	font-size: 0px;
	background: #1890F1;
	padding: 15px 0px;
}

.status ul.summary>li {
	display: inline-block;
	width: 33.3333%;
	text-align: center;
	padding: 0px 0px;
}

.status ul.summary>li+li {
	margin-left: -1px;
	border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.status ul.summary>li>span {
	display: block;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	line-height: 18px;
	height: 18px;
	letter-spacing: -0.5px;
}

.status ul.summary>li>strong {
	display: block;
	font-size: 26px;
	color: #fff;
	font-weight: 600;
	padding: 2px 0px;
	letter-spacing: -0.5px;
	line-height: 30px;
	height: 30px;
}

.status ul.summary>li>strong>i {
	display: inline-block;;
	font-size: 18px;
	line-height: 26px;
	vertical-align: bottom;
	font-weight: 400;;
}

.status ul.summary>li>em {
	display: block;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	line-height: 18px;
	height: 18px;
}

.status ul.summary>li>em>b {
	font-size: 14px;
	font-weight: 500;
}

.status .tab_Wrap {
	
}

.status .tab_Wrap ul {
	overflow: hidden;
}

.status .tab_Wrap ul li {
	float: left;
	text-align: center;
	padding: 15px 0;
	border-bottom: 1px solid #9E9E9E;
	box-sizing: border-box;
}

.status .tab_Wrap ul li.on {
	background: #1890F1;
	color: #fff;
	border-bottom: 1px solid #1890F1;
}

.status .tab_Wrap ul.box2 li {
	width: 50%;
}

.status .chartCont_wrap {
	padding: 15px;
	box-sizing: border-box;
}

.status .chartSch {
	paddgin: 0px;
	overflow: hidden;
	background: #ddd;
	padding: 10px;
	font-size: 0px;
	height: 38px;
}

.status .chartSch .chartSchBox {
	width: calc(( 100% - 40px)/2);
	display: inline-block;
}

.status .chartSch input[type='text'] {
	border: 1px solid #ddd;
	width: 100%;
	background: #fff;
	border-radius: 5px;
	line-height: 38px;
	padding: 0 10px;
	box-sizing: border-box;
	vertical-align: bottom;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
}

.status .chartSch span {
	display: inline-block;
	width: 40px;
	vertical-align: bottom;
	line-height: 38px;
	text-align: center;
	font-size: 15px;
}

.status .chartSchMonth {
	text-align: center;
	margin-top: 0px;
}

.status .chartSchMonth>.year {
	display: block;
	text-align: center;
	padding: 10px 0px;
}

.status .chartSchMonth>.year>h4 {
	display: block;
	font-size: 26px;
	line-height: 40px;
	font-weight: 600;
	position: relative;
	color: #382063;
}

.status .chartSchMonth>.year>h4>a {
	display: block;
	width: 30px;
	height: 30px;
	top: 50%;
	font-size: 18px;
	margin-top: -15px;
	line-height: 30px;
	position: absolute;
	border: 2px solid #fff;
	color: #bbb;
	background: #fff;
	border-radius: 50%;
	font-family: 'xeicon' !important;
	text-align: center;
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
}

.status .chartSchMonth>.year>h4>em {
	font-size: 22px;
	color: #382063;
	display: inline-block;
	line-height: 40px;
	vertical-align: bottom;
	margin-left: 5px;
	font-weight: 400;
}

.status .chartSchMonth>.year>h4>a.prev {
	left: 50%;
	margin-left: -90px;
}

.status .chartSchMonth>.year>h4>a.next {
	right: 50%;
	margin-right: -90px;
}

.status .chartSchMonth>.year>h4>a.prev::before {
	content: "\e906";
}

.status .chartSchMonth>.year>h4>a.next::before {
	content: "\e907";
}

.status .chartSchMonth_inner {
	display: inline-block;
}

.status .chartSchMonth_inner div {
	display: inline-block;
	font-size: 30px;
	margin: 0 15px;
}

.status .chartSchMonth_inner button {
	margin-top: 2px;
	border: 0;
	width: 30px;
	height: 30px;
	cursor: pointer;
}

.status .chartSchMonth_inner button i {
	font-size: 20px;
}

.status .chartTable {
	margin-top: 25px;
}

.status .chartTable .t {
	font-size: 14px;
	text-align: right;
	margin-bottom: 5px;
	line-height: 20px;
	color: #999;
}

.status .basicTbl {
	border-top: 2px solid #ccc;
	width: 100%;
	border-bottom: 1px solid #ddd;
}

.status .basicTbl thead th {
	line-height: 40px;
	text-align: center;
	font-weight: 500;
	background: #ddd;
	color: #666;
	font-size: 14px;
}

.status .basicTbl tbody th {
	
}

.status .basicTbl tbody td {
	border-top: 1px solid #ddd;
	text-align: center;
	vertical-align: middle;
	padding: 10px 0;
	font-size: 14px;
	background: #fff;
}

.status .basicTbl tbody td>span {
	font-size: 12px;
	color: #999;
}

.status .chartGraph_wrap {
	padding: 15px;
	background: #fff;
	margin-top: 15px;;
}

.status .chartGraph_wrap svg {
	width: 100%;
}

.status .barChart_wrap {
	background: #fff;
	padding: 25px 15px 25px 0px;
	position: relative;;
}

.status .barChart_wrap .chart_title {
	position: absolute;
	top: 15px;
	right: 15px;
	font-size: 14px;
	text-align: right;
	margin-bottom: 5px;
	color: #999;
	line-height: 16px;
}

.status .barChart {
	overflow: hidden;
}

.status .barChart+.barChart {
	margin-top: 5px;
}

.status .barChart .t {
	width: 70px;
	float: left;
	line-height: 26px;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
}

.status .barChart .barLine {
	height: 26px;
	width: calc(100% - 80px);
	float: right;
	position: relative;
	margin-top: 0px
}

.status .barChart .barLine .barBg {
	background: linear-gradient(to right, #ddd, #aaa);
	position: absolute;
	height: 26px;
}

.status .barChart .barLine .barBg .cnt {
	position: absolute;
	line-height: 26px;
	font-size: 14px;
	top: 0px;
	right: -30px
}

.status .barChart .barLine .barBg.me {
	background: linear-gradient(to right, #26EAFA, #616CFA);
}

.status .barChart .barLine .barBg.me .name {
	position: absolute;
	line-height: 26px;
	font-size: 14px;
	top: 0px;
	right: -65px
}

.status .barChart .barLine .barBg.me .cnt {
	right: 10px;
	color: #fff;
}

.status .barChart .barLine .barBg.me .name i {
	color: gold;
	margin-right: 5px;
	display: inline-block;
	line-height: 26px;
	vertical-align: bottom;
}

.status_wrap {
	display: block;
	padding: 15px;
}

.status>ul.tab_menu {
	display: block;
	font-size: 0px;
}

.status>ul.tab_menu>li {
	display: inline-block;
	width: 50%;
}

.status>ul.tab_menu>li>a {
	line-height: 50px;
	text-align: center;
	display: block;
	font-size: 16px;
	background: #ddd;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	color: #999;
}

.status>ul.tab_menu>li.on>a {
	background: #f2f2f2;
	border-bottom: 1px solid transparent;
	color: #00090d;
	font-weight: 500;
}

.status>ul.tab_menu>li+li>a {
	border-left: 1px solid #ccc;
}

.info_wrapper {
	padding: 15px;
}

.info_wrapper h3 {
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 10px;
	font-weight: 500;
}

.info_wrapper>.step_div {
	display: block;
}

.info_wrapper>.step_div+.step_div {
	margin-top: 35px;
}

/* 스크롤바 리뉴얼 */
.select_box {
	display: inline-block;
	position: relative;
}

.select_box .sel {
	position: relative;
	padding: 5px 10px 5px 0;
	font-size: 14px;
	cursor: pointer;
	text-align: left;
	font-weight: 400;
}

.select_box .sel:after {
	font-family: FontAwesome;
	content: "\f107";
	vertical-align: middle;
	position: absolute;
	height: 15px;
	top: calc(50% - 7.5px);
	right: 2px;
	color: #999;
	font-size: 15px;
	z-index: 1;
}

.select_box .sel.on:after {
	content: "\f106";
}

.select_box .sel_list {
	display: none;
	overflow-y: auto;
	position: absolute;
	top: 30px;
	left: 0;
	z-index: 10;
	border: 1px solid #ccc;
	width: 100%;
	max-height: 150px;
	background: #fff;
}

.select_box .sel_list::-webkit-scrollbar {
	width: 5px;
	height: 0;
}

.select_box .sel_list::-webkit-scrollbar-button:start:decrement,
	.select_box .sel_list::-webkit-scrollbar-button:end:increment {
	display: block;
	height: 0;
}

.select_box .sel_list::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, .05);
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.select_box .sel_list::-webkit-scrollbar-thumb {
	height: 50px;
	width: 50px;
	background: rgba(0, 0, 0, 0.2);
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.select_box .sel_list>li {
	box-sizing: border-box;
	padding: 0 1px;
	font-size: 12px;
	width: 100%;
	height: 35px;
	line-height: 35px;
	cursor: pointer;
	background: #fff;
	text-align: center;
}

.select_box .sel_list>li:hover {
	background-color: #ccc;
}

.select_box .sel_list>li.pick {
	background-color: #ccc;
}

@media screen and (max-width:370px) {
}

/* 2021.12.31 Leegeonju 추가 */
.group_set_btnbox {
	position: absolute;
	top: 87px;
	right: 0px;
	background: black;
	width: 120px;
	z-index: 2;
	border-radius: 10px;
	display: none;
}

.group_set_btnbox.view {
	display: inline-block;
}

.group_set_btnbox:before {
	content: "";
	width: 0px;
	height: 0px;
	border: 10px solid;
	display: inline-block;
	border-color: transparent;
	border-bottom-color: black;
	position: absolute;
	right: 24px;
	top: -20px;
}

.group_set_btnbox li {
	padding: 10px;
	text-align: center;
	color: #fff;
	cursor: pointer;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.group_set_btnbox li:last-child {
	border-bottom: 0px;
}

/* 2022.01.04 추가 */
.textbooks_box.sch>ul.list>li>div>.thumb {
	top: 50%;
	margin-top: -50px;
}

.textbooks_box.sch>ul.list>li>div>h4 {
	font-size: 0px;
	color: #999;
	line-height: 30px;
	letter-spacing: -0.5px;
	padding-top: 0px;
}

.textbooks_box.sch>ul.list>li>div>h4>em {
	display: inline-block;
	font-size: 16px;
	line-height: 30px;
	font-weight: 400;
	color: #999;
	vertical-align: bottom;
	min-width: 60px;
}

.textbooks_box.sch>ul.list>li>div>h4>b {
	display: inline-block;
	font-size: 20px;
	line-height: 30px;
	font-weight: 500;
	color: #111;
	vertical-align: bottom;
}

.textbooks_box.sch>ul.list>li>div>span {
	font-size: 0px;
	color: #999;
	line-height: 20px;
	margin-top: 5px;
	display: block;
}

.textbooks_box.sch>ul.list>li>div>span+span {
	margin-top: 0px;
}

.textbooks_box.sch>ul.list>li>div>span>em {
	display: inline-block;
	font-size: 12px;
	line-height: 20px;
	font-weight: 400;
	color: #999;
	vertical-align: bottom;
	width: 30%;
	min-width: 50px;
	max-width: 60px;
}

.textbooks_box.sch>ul.list>li>div>span>b {
	display: inline-block;
	font-size: 13px;
	line-height: 20px;
	font-weight: 500;
	color: #333;
	vertical-align: bottom;
}

.textbooks_box.sch>ul.list>li>div>a.delete {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

.container>.timeline>ul>li {
	position: relative;
}

.timeline_setbox.view {
	display: inline-block;
}

.timeline_setbox {
	display: none;
	position: absolute;
	border-radius: 5px;
	right: 10px;
	bottom: -65px;
	z-index: 15;
	background: #000;
}

.timeline_setbox::before {
	content: "";
	width: 0px;
	height: 0px;
	border: 10px solid;
	display: inline-block;
	border-color: transparent;
	border-bottom-color: #000;
	position: absolute;
	top: -20px;
	left: 67px;
}

.timeline_setbox li {
	padding: 10px 20px;
	text-align: right;
	cursor: pointer;
	color: #fff;
}

.timeline_setbox li:not(:last-child) {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* 2022.01.20 추가 */
.wrapper.playing.pause .renuwal_input.togglebtn {
	display: none;
}

.wrapper.playing.pause .learning_wrap .grading {
	display: none !important;
}

.wrapper.playing.break .renuwal_input.togglebtn {
	display: none;
}

.wrapper.playing.break .learning_wrap .grading {
	display: none !important;
}

.wrapper.playing .renuwal_input.togglebtn {
	display: block;
}

.renuwal_input.togglebtn {
	text-align: right;
	display: none;
	position: absolute;
	top: 14px;
	right: 20px;
	z-index: 10;
}

.renuwal_input.togglebtn label {
	border: 1px solid #d6d6d6;
	border-radius: 20px;
	background: #eee;
	width: 30px;
	height: 20px;
	position: relative;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}

.renuwal_input.togglebtn input:checked+label {
	background: #50CCC6;
}

.renuwal_input.togglebtn label:after {
	border: 1px solid #d6d6d6;
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	position: absolute;
	top: 50%;
	margin-top: -10px;
	transition: all 0.3s;
}

.renuwal_input.togglebtn input+label:after {
	left: 4px;
}

.renuwal_input.togglebtn input:checked+label:after {
	left: 26px;
}

.learning_wrap .grading {
	max-height: 400px;
	overflow-x: hidden;
	overflow-y: auto;
	background: #fff;
	display: none;
	width: 100%;
}

.learning_wrap .grading>.option {
	padding: 10px 15px;
	font-size: 0px;
	border-bottom: 1px solid #ddd;
	position: fixed;
	top: 103px;
	width: 100%;
	max-width: 1280px;
	background: #f8f8f8;
	z-index: 8;
	box-sizing: border-box;
}

.learning_wrap .grading>.option>.chk {
	display: block;
	vertical-align: bottom;
	margin-left: -10px;
	margin-right: -10px;
}

.learning_wrap .grading>.option>.chk>label {
	padding: 0px 0px;
	color: #999;
	text-align: center;
	line-height: 40px;
	height: 40px;
	min-width: 25px;
	width: auto;
	overflow: visible;
}

.learning_wrap .grading>.option>.chk>label.all {
	margin-left: 10px;
}

.learning_wrap .grading>.option>.chk>label+label {
	margin-left: 3px;
}

.learning_wrap .grading>.option>.chk>label>input[type=radio]+span {
	display: block;
	line-height: 40px;
	font-size: 0px;
	margin-left: 0px;
	background: transparent;
	color: #bbb;
	padding: 0px 0px;
	position: relative;
	border-radius: 5px;
}

.learning_wrap .grading>.option>.chk>label>input[type=radio]+span::before
	{
	font-family: 'xeicon' !important;
	width: 100%;
	height: 40px;
	line-height: 40px;
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	font-size: 20px;
	border-radius: 5px;
	content: '';
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][value=all]+span::before
	{
	content: "All";
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][id=succ1]+span
	{
	font-size: 15px;
	color: #999;
	letter-spacing: -1px;
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][id=succ1]+span::before
	{
	content: '';
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][id=succ2]+span::before
	{
	content: '\e9c6';
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][id=succ3]+span
	{
	font-size: 15px;
	color: #999;
	letter-spacing: -1px;
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][id=succ3]+span::before
	{
	content: '';
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][id=fail1]+span
	{
	font-size: 15px;
	color: #999;
	letter-spacing: -1px;
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][id=fail1]+span::before
	{
	content: '';
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][id=fail2]+span::before
	{
	content: '\e921';
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][value=ahead]+span
	{
	font-size: 15px;
	color: #999;
	letter-spacing: -1px;
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][value=ahead]+span::before
	{
	content: '';
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][value=except]+span
	{
	font-size: 15px;
	color: #999;
	letter-spacing: -1px;
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][value=except]+span::before
	{
	content: '';
}

.learning_wrap .grading>.option>.chk>label>input[type=radio]+span:before
	{
	border: 0px solid #ddd;
	background: transparent;
}

.learning_wrap .grading>.option>.chk>label>input[type=radio]+span>em {
	position: absolute;
	top: -2px;
	right: -2px;
	background: #999;
	line-height: 18px;
	height: 18px;
	min-width: 14px;
	padding: 0 2px;
	font-size: 10px;
	display: block;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	opacity: 0.6;
}

.learning_wrap .grading>.option>.chk>label>input[type=radio]+span>em::before
	{
	content: attr(data-cnt);
}

.learning_wrap .grading>.option>.chk>label>input[type=radio]+span>em[data-cnt="0"]
	{
	display: none;
}

.learning_wrap .grading>.option>.chk>.tip_btn {
	height: 40px;
	line-height: 40px;
	color: #fff;
	margin-left: 3px;
	min-width: 20px;
	font-weight: 500;
	position: relative;
	display: inline-block;
	text-align: center;
}

.learning_wrap .grading>.option>.chk>.tip_btn:before {
	content: '';
	width: 14px;
	height: 14px;
	background: #999;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][value=succ]:checked+span,
	.learning_wrap .grading>.option>.chk>label>input[type=radio][value=succ]:checked+span::before
	{
	color: #19ce60 !important;
	font-weight: 600;
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][value=fail]:checked+span,
	.learning_wrap .grading>.option>.chk>label>input[type=radio][value=fail]:checked+span::before
	{
	color: #FD747A !important;
	font-weight: 600;
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][value=ahead]:checked+span,
	.learning_wrap .grading>.option>.chk>label>input[type=radio][value=ahead]:checked+span::before
	{
	color: #1a73e8 !important;
	font-weight: 500;
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][value=succ]:checked+span>em
	{
	background: #19ce60;
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][value=fail]:checked+span>em
	{
	background: #FD747A;
}

.learning_wrap .grading>.option>.chk>label>input[type=radio][value=ahead]:checked+span>em
	{
	background: #1a73e8;
}

.learning_wrap .grading>.option>.chk>label>input[type=radio]:checked+span::after
	{
	box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.learning_wrap .grading>.option a.filter {
	position: absolute;
	width: 40px;
	height: 40px;
	padding: 0px;
	top: 10px;
	right: 5px;
	line-height: 40px;
}

.learning_wrap .grading>.option a.filter>span {
	display: none
}

.learning_wrap .grading>.option a.filter:before {
	font-family: 'xeicon' !important;
	width: 40px;
	height: 40px;
	line-height: 40px;
	display: block;
	content: "\eb38";
	font-size: 28px;
	text-align: center;
}

.learning_wrap .grading>.option a.filter>em {
	position: absolute;
	top: 0px;
	right: 0px;
	background: #FD747A;
	line-height: 20px;
	height: 20px;
	min-width: 16px;
	padding: 0 2px;
	font-size: 11px;
	display: block;
	text-align: center;
	border-radius: 50%;
	color: #fff;
}

.learning_wrap .grading>.option a.filter>em::before {
	content: attr(data-cnt);
}

.learning_wrap .grading>.option a.filter>em[data-cnt="0"] {
	display: none;
}

.learning_wrap .grading>.option .btn_right {
	position: absolute;
	width: auto;
	height: 40px;
	padding: 0px;
	top: 10px;
	right: 85px;
	line-height: 40px;
	font-size: 0px;
}

.learning_wrap .grading>.option .btn_right>button {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 5px;
	font-size: 15px;
	color: #999;
}

.learning_wrap .grading>.option .btn_right>label {
	padding: 0px 0px;
	color: #999;
	text-align: center;
	line-height: 40px;
	height: 40px;
	width: auto;
	min-width: 25px;
	overflow: visible;
}

.learning_wrap .grading>.option .btn_right>label+label {
	margin-left: 6px;
}

.learning_wrap .grading>.option .btn_right>label>input[type=radio]+span
	{
	display: block;
	line-height: 40px;
	font-size: 0px;
	margin-left: 0px;
	background: transparent;
	color: #bbb;
	padding: 0px 0px;
	position: relative;
	border-radius: 5px;
}

.learning_wrap .grading>.option .btn_right>label>input[type=radio][value=except]+span
	{
	font-size: 15px;
	color: #999;
	letter-spacing: -1px;
}

.learning_wrap .grading>.option .btn_right>label>input[type=radio][value=init]+span
	{
	font-size: 15px;
	color: #999;
	letter-spacing: -1px;
}

.learning_wrap .grading>.option .btn_right>label>input[type=radio]+span::before
	{
	content: '';
	border: 0px solid #ddd;
	background: transparent;
}

.learning_wrap .grading>.option .btn_right>label>input[type=radio]:checked+span,
	.learning_wrap .grading>.option .btn_right>label>input[type=radio]:checked+span::before
	{
	color: #7e00e4 !important;
	font-weight: 500;
	text-decoration: underline;
}

.learning_wrap .grading>.option .btn_right>label>input[type=radio]+span>em
	{
	position: absolute;
	top: -2px;
	right: -2px;
	background: #999;
	line-height: 18px;
	height: 18px;
	min-width: 14px;
	padding: 0 2px;
	font-size: 10px;
	display: block;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	opacity: 0.6;
}

.learning_wrap .grading>.option .btn_right>label>input[type=radio]+span>em::before
	{
	content: attr(data-cnt);
}

.learning_wrap .grading>.option .btn_right>label>input[type=radio]+span>em[data-cnt="0"]
	{
	display: none;
}

.learning_wrap .grading>.option .btn_right>button::after {
	width: 100%;
	height: 40px;
	line-height: 40px;
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	font-size: 26px;
	border-radius: 5px;
	content: '';
}

.learning_wrap .grading>.option .btn_right>button.selected {
	color: #7e00e4;
	font-weight: 500;
	text-decoration: underline;
}

.learning_wrap .grading>.option .btn_right>button>em {
	position: absolute;
	top: -2px;
	right: -2px;
	background: #999;
	line-height: 18px;
	height: 18px;
	min-width: 14px;
	padding: 0 2px;
	font-size: 10px;
	display: block;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	opacity: 0.6;
}

.learning_wrap .grading>.option .btn_right>button>em::before {
	content: attr(data-cnt);
}

.learning_wrap .grading>.option .btn_right>button>em[data-cnt="0"] {
	display: none;
}

.learning_wrap .grading>.option .btn_right>button.selected>em {
	background: #7e00e4;
}

.learning_wrap .grading>.option>.grading_detail.type2 {
	overflow-x: auto;
}

.learning_wrap .grading>.option>.grading_detail {
	display: none;
	font-size: 0px;
	margin-top: 5px;
	padding-top: 10px;
	border-top: 1px solid #eee;
}

.learning_wrap .grading>.option>.grading_detail.show {
	display: block;
}

.learning_wrap .grading>.option>.grading_detail>.opt_box {
	display: flex;
	font-size: 0px;
}

.learning_wrap .grading>.option>.grading_detail>.opt_box>label {
	padding: 0px 0px;
	height: 34px;
	color: #999;
	text-align: center;
	line-height: 34px;
	width: calc(100%/ 4);
}

.learning_wrap .grading>.option>.grading_detail.type2>.opt_box>label {
	min-width: 100px;
}

.learning_wrap .grading>.option>.grading_detail>.opt_box>label+label {
	margin-left: 5px;
}

.learning_wrap .grading>.option>.grading_detail>.opt_box>label>input[type=radio]+span
	{
	display: block;
	line-height: 34px;
	font-size: 13px;
	margin-left: 0px;
	background: #eee;;
	color: #bbb;
	padding: 0px 0px;
	position: relative;
	border-radius: 5px;
}

.learning_wrap .grading>.option>.grading_detail>.opt_box>label>input[type=radio]+span::after
	{
	width: 100%;
	height: 34px;
	line-height: 34px;
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	font-size: 26px;
	border-radius: 5px;
	content: '';
}

.learning_wrap .grading>.option>.grading_detail>.opt_box>label>input[type=radio]+span::before
	{
	display: none !important;
}

.learning_wrap .grading>.option>.grading_detail>.opt_box>label>input[type=radio]:checked+span
	{
	background: #666;
	color: #fff;
	font-weight: 500;
}

.learning_wrap .grading>.option>dl>dd {
	display: inline-block;
	width: 23%;
	margin-top: 10px;
	margin-left: 2%;
}

.learning_wrap .grading>.option>dl>dd>a {
	margin: 0px;
	display: block;
	line-height: 40px;
	text-align: center;
	background: #eee;
}

.learning_wrap .grading>.question {
	padding: 80px 15px 30px 15px;
	position: relative;
	margin-left: -2px;
	margin-top: -2px;
}

.learning_wrap .grading>.question.detail {
	padding-top: 130px;
}

.learning_wrap .grading>.question>p {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 5px;
	color: #999;
}

.learning_wrap .grading>.question>ul {
	display: block;
	font-size: 0px;
}

.learning_wrap .grading>.question>ul+p {
	margin-top: 15px;
}

.learning_wrap .grading>.question>ul>li {
	display: inline-block;
	width: calc((100% / 5) - 2px);
	margin-left: 2px;
	margin-top: 2px;
	vertical-align: bottom;
}

.learning_wrap .grading>.question>ul>li>a {
	display: block;
	background: #eee;
	padding: 7px;
	position: relative;
	box-sizing: border-box;
	border: 2px solid #eee;
	overflow: hidden;
}

.learning_wrap .grading>.question>ul>li>a::before {
	position: absolute;
	bottom: 7px;
	right: 7px;
	font-family: 'xeicon' !important;
	width: 15px;
	height: 15px;
	line-height: 15px;
	display: block;
	content: "";
	font-size: 15px;
	text-align: center;
}

.learning_wrap .grading>.question>ul>li.start>a::after {
	position: absolute;
	top: -14px;
	left: -14px;
	width: 40px;
	height: 20px;
	display: block;
	content: "";
	font-size: 15px;
	text-align: center;
	background: transparent;
	z-index: 1;
	transform: rotate(150deg);
}

.learning_wrap .grading>.question>ul>li.end>a::after {
	position: absolute;
	bottom: -14px;
	right: -14px;
	width: 40px;
	height: 20px;
	display: block;
	content: "";
	font-size: 15px;
	text-align: center;
	background: transparent;
	z-index: 1;
	transform: rotate(150deg);
}
/*
.learning_wrap .grading > .question > ul > li > a::after {position: absolute;top:-14px;right:-14px;width:40px;height:20px;display:block;content: "";font-size:15px;text-align:center;background: transparent;z-index: 1;transform: rotate( 30deg );}
*/
/* .learning_wrap .grading > .question > ul > li > a > span { font-size:12px;display:block;line-height:15px;height:15px;letter-spacing: -0.5px;font-weight: 300;z-index: 2;position: relative;    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 10px;} */
.learning_wrap .grading>.question>ul>li>a>span {
	font-size: 11px;
	display: block;
	line-height: 15px;
	height: 15px;
	letter-spacing: -0.5px;
	font-weight: 300;
	z-index: 2;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
}

.learning_wrap .grading>.question>ul>li>a>b {
	font-size: 13px;
	display: block;
	line-height: 15px;
	height: 15px;
	margin-top: 5px;
	color: #666 !important;
	font-weight: 400;
	letter-spacing: -0.5px;
	z-index: 2;
	position: relative;
}

.learning_wrap .grading>.question>ul>li>a>em {
	font-size: 12px;
	display: block;
	line-height: 15px;
	height: 15px;
	color: #111 !important;
	font-weight: 400;
	letter-spacing: -0.5px;
	z-index: 2;
	position: absolute;
	top: 7px;
	right: 7px;
}

.learning_wrap .grading>.question>ul>li>a[data-result] {
	border: 2px solid #ddd;
}

.learning_wrap .grading>.question>ul>li>a[data-result].todoIng {
	border: 2px solid #000;
}

.learning_wrap .grading>.question>ul>li>a[data-result=default] {
	border: 2px solid #ddd;
}

.learning_wrap .grading>.question>ul>li>a[data-result=succ] {
	background: #fff;
	color: #19ce60;
	border: 2px solid #19ce60 !important;
}

.learning_wrap .grading>.question>ul>li>a[data-result=succ]::before {
	content: '\e9c6';
}

.learning_wrap .grading>.question>ul>li>a.succ::after {
	background: #19ce60;
}

.learning_wrap .grading>.question>ul>li>a[data-result=fail] {
	background: #fff;
	color: #FD747A;
	border: 2px solid #FD747A !important;
}

.learning_wrap .grading>.question>ul>li>a[data-result=fail]::before {
	content: '\e921';
}

.learning_wrap .grading>.question>ul>li>a.fail::after {
	background: #FD747A;
}

.learning_wrap .grading>.question>ul>li>a[data-result=ahead] {
	background: #fff;
	color: #1a73e8;
	border: 2px solid #1a73e8 !important;
}

.learning_wrap .grading>.question>ul>li>a[data-result=ahead]::before {
	content: '\e920';
}

.learning_wrap .grading>.question>ul>li>a.ahead::after {
	background: #1a73e8;
}

.learning_wrap .grading>.question>ul>li>a[data-reason='8'] {
	background: #ddd !important;
	color: #999;
}

.learning_wrap .grading>.question>ul>li>a[data-init='except'] {
	background: #ddd !important;
	color: #999;
	border: 2px solid #999;
}

.learning_wrap .grading>.question>ul>li>a.except::after {
	background: #999;
}

.learning_wrap .grading>.question>ul>li>a[data-init='giveup'] {
	background: #ddd !important;
	color: #999;
	border: 2px solid #999;
} /*복습포기*/
.learning_wrap .grading>.question>ul>li>a.giveup::after {
	background: #999;
}

.learning_wrap .grading>.question>ul>li>a.order::after {
	content: '\ea7f';
	transform: rotate(30deg);
}

.learning_wrap.type2>.timer {
	position: fixed;
	bottom: 110px;
	top: auto;
	left: 0px;
	margin: 0px;
	transform: none;
	width: 100%;
	height: auto;
}

.learning_wrap.type2>.timer>.outer_line {
	display: none !important;
}

.learning_wrap.type2>.timer>.status {
	position: static;
	left: 0px;
	top: 0px;
	margin: 0px;
	width: 100%;
}

.learning_wrap.type2>.timer>.status>span {
	font-size: 20px;
	margin-bottom: 0px;
}

.learning_wrap.type2>.timer>.status>p {
	display: inline-block;
	margin-bottom: -7px;
}

.learning_wrap.type2>.timer>.status>p>b {
	font-size: 40px;
	height: auto;
	line-height: normal;
	float: left;
	vertical-align: middle;
}

.learning_wrap.type2>.timer>.status>p>i {
	font-size: 40px;
	height: auto;
	line-height: normal;
	float: left;
	vertical-align: middle;
}

.learning_wrap.type2>.timer>.status>dl>dd {
	width: 150px;
}

.learning_wrap.type2>.timer>.status>dl>dd>span {
	display: inline-block;
	padding-right: 5px;
}

.learning_wrap.type2>.timer>.status>dl>dd>b {
	display: inline-block;
	font-size: 20px;
}

.learning_wrap.type2>.group_tit {
	display: flex;
	justify-content: center;
	align-items: center;
	bottom: 72px;
}

.learning_wrap.type2>.group_tit h3 {
	border: 0px;
	padding: 0px;
}

.learning_wrap.type2>.group_tit p {
	margin-top: 0px;
	padding-left: 10px;
}

/* 2022.08.30 추가 */
.grp_search {
	padding: 15px;
}

.grp_search .field>input {
	background: #fff;
	padding-right: 85px !important;
}

.grp_search .field button {
	border-radius: 5px;
}

.academyList {
	padding: 0 15px 15px 15px;
}

.academyList>.list>li:not(:last-child) {
	margin-bottom: 10px;
}

.academyList>.list>li>a {
	background: #fff;
	padding: 15px;
	display: block;
}

.academyList>.list>li>a>p {
	float: right;
}

.group_detail.form h4 {
	margin-bottom: 10px;
}

.group_detail.form label {
	display: block;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 0px;
	height: 48px;
}

.group_detail.form label input {
	display: inline-block;
	width: 100%;
	padding: 0 15px;
	line-height: 48px;
	height: 48px;
	box-sizing: border-box;
}

/* 2022.09.23 추가 */
.pt_62 {
	padding-top: 62px;
}

.ca_se_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 10px 10px;
	box-sizing: border-box;
	height: auto !important;
}

.ca_se_list>span {
	width: 47%;
}

.ca_re_select {
	position: relative;
	border-bottom: 1px solid #ccc;
}

.ca_re_select>select {
	display: block;
	width: 100%;
	padding: 0px 0px;
	line-height: 40px;
	height: 40px;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: 400;
	z-index: 2;
	position: relative;
	letter-spacing: -0.5px;
}

.ca_re_select::after {
	font-family: FontAwesome;
	content: "\f107";
	vertical-align: middle;
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	color: #999;
	font-size: 15px;
	height: 40px;
	line-height: 40px;
	z-index: 1;
}
/* End */

/* 2022.10.06 추가 */
.screenup>header h2.tit {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 0px;
}
/* END */

/* 2022.11.10 추가 */
.teacher_add>div {
	display: flex;
	flex-wrap: wrap;
}

.teacher_add>div>label {
	width: calc(100%/ 2);
	box-sizing: border-box;
	height: auto;
	font-size: 13.5px;
}

.teacher_add>div>label>span:before {
	top: auto;
}

@media ( max-width : 375px) {
	.teacher_add>div>label {
		width: 100%;
	}
}

.set_box.report {
	display: flex;
	justify-content: space-between;
	padding: 0 15px;
}

.set_box.report .field_trans {
	border-bottom: 0px;
	width: calc(( 100%/ 3)- 10px);
}

.set_box.report .field_trans input, .set_box.report .field_trans select
	{
	font-size: 14px;
}
/* End */

/* 2022.11.17  추가 */
.cmtre_summary>.cmtre_info>div.detail.type2 .title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.cmtre_summary>.cmtre_info>div.detail.type2 .title .info {
	display: flex;
	flex-wrap: wrap;
}

.cmtre_summary>.cmtre_info>div.detail.type2 .title .info li {
	color: #00090d;
	font-size: 12px;
	position: relative;
}

.cmtre_summary>.cmtre_info>div.detail.type2 .title .info li:not(:first-child)
	{
	padding-left: 10px;
}

.cmtre_summary>.cmtre_info>div.detail.type2 .title .info li+li::after {
	content: '';
	display: inline-block;
	width: 1px;
	height: 10px;
	background: #bcbcbc;
	position: absolute;
	left: 5px;
	top: 50%;
	margin-top: -4px;
}

.cmtre_summary>.cmtre_info>div.detail.type2 .title>p.txt {
	color: #00090d;
	font-size: 12px;
	padding: 0px;
}

.cmtre_summary>.cmtre_info>div.detail.type2 .title.under {
	align-items: end;
}

@media ( max-width : 500px) {
	.cmtre_summary>.cmtre_info>div.detail.type2 .title span {
		width: 100%;
	}
	.cmtre_summary>.cmtre_info>div.detail.type2 .title .info {
		margin-top: 5px;
	}
}

.cmtre_summary>.cmtre_info>div.detail.type2 table {
	width: 100%;
	border: 1px solid #999;
	overflow: hidden;
	border-radius: 5px;
}

.cmtre_summary>.cmtre_info>div.detail.type2 table th {
	font-size: 13px;
	font-weight: 300;
	padding: 5px 0;
}

.cmtre_summary>.cmtre_info>div.detail.type2 table td {
	font-size: 12px;
	padding: 5px 0;
}

.cmtre_summary>.cmtre_info>div.detail.type2 table tbody th,
	.cmtre_summary>.cmtre_info>div.detail.type2 table tbody td {
	border-top: 1px solid #999;
}

.cmtre_summary>.cmtre_info>div.detail.type2 table th:not(:last-child),
	.cmtre_summary>.cmtre_info>div.detail.type2 table td:not(:last-child) {
	border-right: 1px solid #999;
}

.cmtre_summary>.cmtre_info>div.detail.type2.del {
	background: #bcbcbc;
} /* 삭제된 일정 음영 */
/* End */

/* 2022.12.16 추가 */
.guideTable {
	padding: 0.5rem;
}

.guideTable>table {
	width: 100%;
	border: 1px solid #ccc;
}

.guideTable>table th {
	background: #50CCC6;
	color: #fff;
	width: 20%;
	text-align: center;
	font-weight: 300;
}

.guideTable>table td {
	padding: 10px;
}

.guideTable>table td>p {
	margin-top: 10px;
	font-size: 13px;
}

.guideTable>table tr:not(:last-of-type)>th {
	border-bottom: 1px solid #fff !important;
}

.guideTable>table tr:not(:last-of-type)>td {
	border-bottom: 1px solid #ccc !important;
}
/* End */

/* 2022.12.20 추가 */
.ftit {
	display: flex;
	align-items: center;
}

.ftit>button {
	margin-left: auto;
}

.btn_setbox {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #eee;
	border-radius: 5px;
	background: #eee;
}

.btn_setbox:not(:last-of-type) {
	margin-bottom: 5px;
}

.btn_setbox>.bookArea, .btn_setbox>.field_trans {
	width: 70%;
	padding: 0.5rem;
	border-right: 1px solid #fff !important;
}

.btn_setbox>.btn_box {
	padding: 0.5rem;
	width: 30%;
	text-align: center;
}

.btn_setbox>.btn_box>button {
	background: #fff;
}

.btn_setbox>.bookArea>.field_trans {
	width: 100% !important;
}
/* End */

/* 2023.01.09 추가 */
.etc_dv {
	padding: 10px 0;
}

.etc_dv>textarea {
	resize: none;
	background: #eee;
	border-radius: 5px;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
}
/* End */

/* 2023.01.10 추가 */
.custom_select {
	position: relative;
	display: inline-block;
	background: #fff;
	border-radius: 5px;
}

.custom_select>select {
	padding: 3px 20px 3px 5px;
	position: relative;
	z-index: 1;
}

.custom_select:after {
	font-family: FontAwesome;
	content: "\f107";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 2px;
	color: #999;
	font-size: 15px;
}
/* End */

/* 2023.01.13 추가 */
.enterDate {
	padding: 10px;
	border: 1px solid #000;
	border-radius: 5px;
	display: flex;
	align-items: center;
	margin-right: 5px;
}

.enterDate.hide {
	display: none;
}


.enterDate>.datepicker {
	width: 90px;
}

.ui-datepicker-trigger {
	width: 20px;
}
/* End */

/* 2023.01.17 추가 */
.delDp>div {
	background: #bcbcbc !important;
}

.delDp p {
	color: #000000 !important;
}

.delBtn {
	font-size: 12px !important;
	color: #ff0000 !important;
}

.container>.timeline>ul>li>div>a.delBtn::before {
	content: none;
}
/* End */

/* error page */
.errorWrap {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.errorCon {
	text-align: center;
	padding: 0 1.5rem;
}

.errorCon>img {
	max-width: 150px;
}

.errorCon>.t {
	font-size: 20px;
	margin: 1.2rem 0;
	font-weight: 600;
}

.errorCon>p {
	line-height: 1.3;
	color: #999;
	font-size: 12px;
}

/* 2023.02.14 추가 */
.renewal .swal2-title {
	color: #000;
	font-size: 25px;
}

.renewal .swal2-input {
	font-size: 15px;
}

/* 2023.02.16 추가 */
.btn_check_in_first, .btn_check_in_again {
	width: calc(100% - (85px)) !important;
	display: inline-block;
	margin-right: 5px;
}


.btn_check_in_again.hide {
	display: none;
}


.btn_check_in_re {
	width: 80px !important;
	padding: 0 20px;
	display: inline-block;
	box-sizing: border-box;
	background: #d394f0 !important;
}

.float_btns>a.btn_checkTime{line-height:1.2; font-size:15px; display:flex; align-items:center; justify-content:center; width:100px !important; margin-right:5px;}

.modalWrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 60;
	background: #F2F2F2;
	display: none;
}

.modalWrap.on {
	display: inline-block;
}

.modalWrap>.header {
	background: #fff;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 70px;
	display: flex;
	align-items: center;
	box-shadow: 0px 0px 4px 1px rgb(0 0 0/ 10%);
	padding: 0 20px;
	box-sizing: border-box;
}

.modalWrap>.header h2 {
	font-size: 21px;
	letter-spacing: -0.5px;
	font-weight: 500;
}

.modalWrap>.header>.t>p {
	color: #999;
	font-size: 13px;
	margin-top: 5px;
}

.modalWrap>.header .close {
	font-size: 32px;
	margin-left: auto;
}

.modalWrap>.con {
	margin-top: 70px;
	height: calc(100vh - 70px);
	box-sizing: border-box;
	overflow-y: auto;
}

.modalWrap>.con>ul>li {
	padding: 15px;
}

.modalWrap>.con>ul>li>a {
	display: inline-block;
	background: #fff;
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
	border-radius: 5px;
}

.modalWrap>.con>ul>li .t {
	font-size: 16px;
	font-weight: 500;
}

.modalWrap>.con>ul>li p {
	font-size: 13px;
	color: #999;
	margin-top: 5px;
}

.modalWrap>.con>ul>li.noData {
	text-align: center;
	height: calc(100vh - 70px);
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 2023.02.22 추가 */
.modalWrap.type2 {
	background: url(../images/main_bg.png) no-repeat 100% 100%/cover;
	max-width: 1280px;
	left: auto;
}

.modalWrap.type2>.con {
	position: relative;
}

.modalWrap.type2 button {
	background: url(../images/btn_bg.png) no-repeat center/cover;
	width: 140px;
	height: 120px;
	font-size: 0px;
	position: absolute;
	bottom: 130px;
	left: 50%;
	transform: translateX(-50%);
}

.modalWrap.type2>.header {
	background: transparent;
	box-shadow: none !important;
	max-width: 1280px;
	left: auto;
}

.modalWrap.type2>.header>a.btn_nav {
	margin-left: auto;
	font-size: 32px;
}

.modalWrap.type2>.header>a.btn_nav::before {
	content: "\e91c";
	font-family: 'xeicon'
}

/* 20240119 추가 */
.modalWrap.type3{display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.5);}
.modalWrap.type3.on{display:flex;}
.modalWrap.type3 > .con{width:90%; height:auto; max-width:500px; margin:0px; position:relative;}
.modalWrap.type3 > .con > .xi-close{position:absolute; top:10px; right:10px; color:#fff; font-size:2rem;}
.modalWrap.type3 > .con > img{width:100%; object-fit:cover;}

/* NEW schedule */
.schedule_line>ul.mine>li .plan {
	padding: 5px;
	background: #fff;
	border-radius: 5px;
	min-height: 100%;
	box-sizing: border-box;
}

.schedule_line>ul.mine>li .plan+.plan {
	margin-top: 20px;
}

.schedule_line>ul.mine>li .plan>.t {
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 20px;
}

.schedule_line>ul.mine>li .plan>.t>span {
	font-size: 12px;
	color: #999;
}

.schedule_line>ul.mine>li .plan>.book_list>li {
	font-size: 12px;
}

.schedule_line>ul.mine>li .plan>.book_list+.book_list {
	margin-top: 10px;
}

body:not([data-touchable='true']) .schedule_line>ul.mine>li>a::-webkit-scrollbar
	{
	width: 5px;
}

body:not([data-touchable='true']) .schedule_line>ul.mine>li>a::-webkit-scrollbar-thumb
	{
	background-color: rgba(0, 0, 0, 0.5);
}

body:not([data-touchable='true']) .schedule_line>ul.mine>li>a::-webkit-scrollbar-track
	{
	background-color: #999;
}

@media ( max-width : 660px) {
	.schedule_line>ul.mine>li .plan>.t {
		margin-bottom: 0px;
		font-size: 12px;
		writing-mode: vertical-rl;
	}
	.schedule_line>ul.mine>li .plan>.t>span, .schedule_line>ul.mine>li .plan>.book_list
		{
		display: none;
	}
}

/* NEW schedule_daily */
.slick-list {
	padding: 0 15px !important;
}

.slider_item {
	margin: 0 5px;
}

.slider_item .header {
	background: #000;
	color: #fff;
	text-align: center;
	font-size: 1.4rem;
	height: 50px;
	line-height: 50px;
}

.slider_item>.con_wrap {
	
}

.slider_item .con {
	border: 1px solid #000;
	margin-top: 1rem;
	padding: 0.5rem;
	background: #fff;
}

.slider_item .con>.tit {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 15px;
}

.slider_item .con>.tit>span {
	display: block;
	padding-top: 0.2rem;
	font-size: 15px;
	color: #999;
	font-weight: 300;
}

.slider_item .con.noData {
	height: calc(100vh - 163px);
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 600;
}

.book_info_item {
	border-top: 1px solid #cccccc;
	padding: 10px 0;
}

.book_info_item:last-of-type {
	border-bottom: 1px solid #cccccc;
}

.book_info_item>.t {
	font-size: 20px;
	font-weight: 600;
}

.book_info_item>.bInfoList {
	margin: 15px 0;
}

.book_info_item>.bInfoList>li {
	color: #999;
	font-size: 13px;
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.book_info_item>.bInfoList>li+li {
	margin-top: 5px;
}

.book_info_item>.bInfoList>li>span:nth-of-type(1) {
	width: 75px;
	display: inline-block;
}

.book_info_item>.bInfoList>li>span:nth-of-type(2) {
	width: calc(100% - 75px);
	text-align: right;
	display: inline-block;
}

.book_info_item>.book_plan_info {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.book_info_item>.book_plan_info:not(:last-of-type) {
	margin-bottom: 5px;
}

.book_info_item>.book_plan_info>.row {
	text-align: center;
	background: #efefef;
	padding: 15px 0;
}

.book_info_item>.book_plan_info>.row:first-child {
	width: 55%;
}

.book_info_item>.book_plan_info>.row:last-child {
	width: 45%;
	background: #ccc;
}

.book_info_item>.book_plan_info>.row>span {
	display: block;
}

.book_info_item>.book_plan_info>.row>.t {
	font-size: 11px;
	margin-bottom: 10px;
	color: #949494;
}

.book_info_item>.book_plan_info>.row>.c {
	font-size: 15px;
	font-weight: 600;
}

/* learningRangePop */
.learningRangePop>.header .pop_close {
	font-size: 32px;
	margin-left: auto;
}

.learningRangePop>.con>.option>.chk {
	height: 40px;
}

.learningRangePop .grading>.option .btn_right {
	position: absolute;
	width: auto;
	height: 40px;
	padding: 0px;
	top: 10px;
	right: 25px;
	line-height: 40px;
	font-size: 0px;
}

.learningRangePop .grading>.option .btn_right>label {
	padding: 0px 0px;
	color: #999;
	text-align: center;
	line-height: 40px;
	height: 40px;
	width: auto;
	min-width: 40px;
	overflow: visible;
}

.learningRangePop .grading>.option .btn_right>label+label {
	margin-left: 10px;
}

.learningRangePop .grading>.option .btn_right>label>input[type=radio]+span
	{
	display: block;
	line-height: 40px;
	margin-left: 0px;
	background: transparent;
	padding: 0px 0px;
	position: relative;
	border-radius: 5px;
	font-size: 15px;
	color: #999;
	letter-spacing: -1px;
}

.learningRangePop .grading>.option .btn_right>label>input[type=radio]+span::before
	{
	content: '';
	border: 0px solid #ddd;
	background: transparent;
}

.learningRangePop .grading>.question {
	padding: 80px 15px 30px 15px;
	position: relative;
	margin-left: -2px;
	margin-top: -2px;
}

.learningRangePop .grading>.question>p {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 5px;
	color: #999;
}

.learningRangePop .grading>.question>ul {
	display: block;
	font-size: 0px;
}

.learningRangePop .grading>.question>ul>li {
	display: inline-block;
	width: calc(( 100%/ 5)- 2px);
	margin-left: 2px;
	margin-top: 2px;
	vertical-align: bottom;
}

.learningRangePop .grading>.question>ul>li>a {
	display: block;
	background: #fff;
	padding: 7px;
	position: relative;
	box-sizing: border-box;
	border: 2px solid #000;
	overflow: hidden;
}

.learningRangePop .grading>.question>ul>li>a::before {
	position: absolute;
	bottom: 7px;
	right: 7px;
	font-family: 'xeicon' !important;
	width: 15px;
	height: 15px;
	line-height: 15px;
	display: block;
	content: "";
	font-size: 15px;
	text-align: center;
}

.learningRangePop .grading>.question>ul>li>a>span {
	font-size: 12px;
	display: block;
	line-height: 15px;
	height: 15px;
	letter-spacing: -0.5px;
	font-weight: 300;
	z-index: 2;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-right: 10px;
}

.learningRangePop .grading>.question>ul>li>a>b {
	font-size: 13px;
	display: block;
	line-height: 15px;
	height: 15px;
	margin-top: 5px;
	color: #666 !important;
	font-weight: 400;
	letter-spacing: -0.5px;
	z-index: 2;
	position: relative;
}

.learningRangePop .grading>.question>ul>li>a>em {
	font-size: 12px;
	display: block;
	line-height: 15px;
	height: 15px;
	color: #111 !important;
	font-weight: 400;
	letter-spacing: -0.5px;
	z-index: 2;
	position: absolute;
	top: 7px;
	right: 7px;
}

.learningRangePop .grading>.question>ul>li>a[data-result=succ] {
	background: #fff;
	color: #19ce60;
	border: 2px solid #19ce60 !important;
}

.learningRangePop .grading>.question>ul>li>a[data-result=succ]::before {
	content: '\e9c6';
}

.learningRangePop .grading>.question>ul>li>a[data-init='except'] {
	background: #ddd !important;
	color: #999;
	border: 2px solid #999;
}

.learningRangePop .grading>.question>ul>li>a[data-init='except']::after
	{
	background: #999;
}

/* learningRangePop 추가 */
.learningRangePop .grading>.question.detail {
	padding-top: 130px;
}

.learningRangePop .grading>.question>ul+p {
	margin-top: 15px;
}

.learningRangePop .grading>.question>ul>li>a {
	display: block;
	background: #eee;
	padding: 7px;
	position: relative;
	box-sizing: border-box;
	border: 2px solid #eee;
	overflow: hidden;
}

.learningRangePop .grading>.question>ul>li.start>a::after {
	position: absolute;
	top: -14px;
	left: -14px;
	width: 40px;
	height: 20px;
	display: block;
	content: "";
	font-size: 15px;
	text-align: center;
	background: transparent;
	z-index: 1;
	transform: rotate(150deg);
}

.learningRangePop .grading>.question>ul>li.end>a::after {
	position: absolute;
	bottom: -14px;
	right: -14px;
	width: 40px;
	height: 20px;
	display: block;
	content: "";
	font-size: 15px;
	text-align: center;
	background: transparent;
	z-index: 1;
	transform: rotate(150deg);
}

.learningRangePop .grading>.question>ul>li>a>span {
	font-size: 12px;
	display: block;
	line-height: 15px;
	height: 15px;
	letter-spacing: -0.5px;
	font-weight: 300;
	z-index: 2;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-right: 10px;
}

.learningRangePop .grading>.question>ul>li>a[data-result] {
	border: 2px solid #ddd;
}

.learningRangePop .grading>.question>ul>li>a[data-result].todoIng {
	border: 2px solid #000;
}

.learningRangePop .grading>.question>ul>li>a[data-result=succ]::after {
	background: #19ce60;
}

.learningRangePop .grading>.question>ul>li>a[data-result=fail] {
	background: #fff;
	color: #FD747A;
	border: 2px solid #FD747A !important;
}

.learningRangePop .grading>.question>ul>li>a[data-result=fail]::before {
	content: '\e921';
}

.learningRangePop .grading>.question>ul>li>a[data-result=fail]::after {
	background: #FD747A;
}

.learningRangePop .grading>.question>ul>li>a[data-result=ahead] {
	background: #fff;
	color: #1a73e8;
	border: 2px solid #1a73e8 !important;
}

.learningRangePop .grading>.question>ul>li>a[data-result=ahead]::before
	{
	content: '\e920';
}

.learningRangePop .grading>.question>ul>li>a[data-result=ahead]::after {
	background: #1a73e8;
}

.learningRangePop .grading>.question>ul>li>a[data-reason='8'] {
	background: #ddd !important;
	color: #999;
}

.learningRangePop .grading>.question>ul>li>a[data-init='giveup'] {
	background: #ddd !important;
	color: #999;
	border: 2px solid #999;
}

.learningRangePop .grading>.question>ul>li>a[data-init='giveup']::after
	{
	background: #999;
}

.learningRangePop .grading>.question>ul>li>a.order::after {
	content: '\ea7f';
	transform: rotate(30deg);
}

.learningRangePop>.con {
	margin: 70px 0 80px;
	height: calc(100vh - 150px);
}

.learningRangePop>.foot {
	width: 100%;
	height: 80px;
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	line-height: 80px;
}

.learningRangePop>.foot.fixed_btn {
	position: fixed;
	bottom: 0;
	left: 0px;
	background: #fff;
}

.learningRangePop>.foot.btn>.lrn_pop_close {
	display: inline-block;
	width: 100%;
	background: #382063;
	color: #fff;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}

/* 신규 라디오버튼 추가 */
.radioCustom+span {
	border: 1px solid #999;
	padding: 0 15px;
	border-radius: 10px;
	height: 27px;
	line-height: 27px !important;
	margin-left: 0px !important;
}

.radioCustom:checked+span {
	border-color: #50CCC6;
	background: #50CCC6;
	color: #fff !important;
	font-weight: 600;
}

.radioCustom:checked+span::before, .radioCustom+span::before {
	display: none !important;
}

/* 교재등록 옵션 리스트 */
.set_list label {
	padding: 0px;
	height: auto;
}

.set_list li {
	display: flex;
	padding: 10px 0;
}

.set_list li>.tit {
	width: 60px;
	height: 27px;
	line-height: 27px;
}

.set_list li>.item_list {
	width: calc(100% - 60px);
	margin-bottom: -5px;
}

.set_list li>.item_list>label {
	margin-left: 5px;
	margin-bottom: 5px;
}

.set_list li+li {
	border-top: 1px solid #ccc;
}

/* 교재 가져오기 옵션 리스트 */
div.textbooks.selecter.type2>.set_list {
	background: #fff;
	padding: 15px;
	margin: 0 -15px 15px;
}

/* 인강등록 */
.onRangeWrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.onRangeWrap>input {
	width: calc(100% - 120px);
	height: 40px;
	line-height: 40px;
	box-sizing: border-box;
	font-size: 16px;
	font-weight: 400;
	border-bottom: 1px solid #ccc;
}

.onlineClassList {
	margin-top: 30px;
}

.onlineClassList li {
	display: flex;
	border-bottom: 1px solid #ccc;
	align-items: center;
}

.onlineClassList li>input {
	width: calc(100% - 100px);
	height: 40px;
	line-height: 40px;
	box-sizing: border-box;
	font-size: 16px;
	font-weight: 400;
}

.onlineClassList li>.tit {
	width: 40px;
}

.onlineClassList li>label {
	margin-left: auto;
}

/* 인강 채첨창 */
.ocTit {
	font-size: 20px;
	font-weight: 600;
	height: 40px;
	line-height: 40px;
}

.onClassGrading>.item>.tit {
	display: flex;
	align-items: center;
}

.onClassGrading>.item>.tit>.t {
	font-weight: 600;
	font-size: 17px;
	margin-right: 10px;
}

.onClassGrading>.item>.tit>p {
	font-size: 15px;
}

.onClassGrading>.item>.tit>label {
	margin-left: auto;
}

.rangeWrap {
	padding: 25px 0 70px;
	position: relative;
}

.rangeWrap:last-of-type {
	padding: 25px 0 40px;
}

.rangeWrap:last-of-type>span {
	position: absolute;
	font-size: 13px;
	font-weight: 500;
	bottom: 0px;
}

.rangeWrap .rangeVar {
	width: 100%;
	display: flex;
	align-items: center;
}

.rangeWrap .rangeVar input[type="range"] {
	width: 100%;
	height: 20px;
	overflow: hidden;
	border-radius: 20px;
	background: #ececec;
}

.rangeWrap>span {
	position: absolute;
	font-size: 13px;
	font-weight: 500;
	bottom: 30px;
}

.rangeWrap>span.start {
	left: 0px;
}

.rangeWrap>span.end {
	right: 0px;
}

.rangeslider--horizontal {
	height: 10px !important;
}

.rangeslider__handle {
	width: 40px !important;
	height: 40px !important;
	top: -15px !important;
	line-height: 38px;
	text-align: center;
	font-size: 14px;
}

.rangeslider__handle:after {
	display: none !important;
}

.ocGradingList {
	padding: 10px 0 30px 0;
	display: flex;
}

.ocGradingList>span {
	width: calc(100%/ 10);
	border: 2px solid #ddd;
	display: inline-block;
	cursor: pointer;
	height: 50px;
	font-size: 0px;
}

.ocGradingList>span+span {
	border-left: 0px;
}

.ocGradingList>span.on {
	background: #50CCC6;
}

.onClassGrading>.item+.item {
	margin-top: 2rem;
}

.onClassGrading>.item>.ocGradingList>span.disable {
	background: #bbb;
	cursor: initial;
}

.onClassGrading>.item>.ocGradingList>span.newDisable {
	background: #bbb;
	cursor: initial;
}

.ocgRemove_btn {
	margin-left: 20px;
	color: #999;
}

/* 2023.06.07 report_send_parents */
.reportSendWrap>header {
	display: flex;
	align-items: center;
}

.reportSendWrap>header>h1 {
	line-height: 1;
	font-weight: 600;
	font-size: 23px;
}

.reportSendWrap>header>h1>span {
	font-size: 15px;
	display: block;
	font-weight: 400;
	margin-top: 5px;
	margin-left: 0px;
}

.float_btns.flex {
	display: flex;
	justify-content: space-between;
}

.float_btns>.btn_cancel {
	width: calc(30% - 10px);
	margin: 0 0 0 10px !important;
	background: #999;
	color: #fff;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 500;
}

.float_btns>.btn_update {
	width: 70%;
	height: 50px;
	margin-right: 10px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 500;
	background: #50CCC6;
	color: #fff;
	display: inline-block;
}

.float_btns>.btn_save {
	width: 70%;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 500;
	background: #50CCC6;
	color: #fff;
	display: inline-block;
}

.float_btns.flex.row3>.btn_cancel {
	width: clac(20% - 10px);
}

.float_btns.flex.row3>.btn_update {
	width: clac(40% - 10px);
}

.float_btns.flex.row3>.btn_save {
	width: clac(40% - 10px);
}

.report_wrap[data-role="reportSendToParent"] {
	padding: 20px;
	overflow-Y: auto;
	background: #fff;
	box-sizing: border-box;
}

.report_wrap[data-role="reportSendToParent"] .popItem+.popItem {
	margin-top: 30px;
}

.report_wrap[data-role="reportSendToParent"] .popItem>.t {
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 15px;
}

.report_wrap[data-role="reportSendToParent"] .popItem>.con {
	width: 100%;
	overflow-X: auto;
}

.report_wrap[data-role="reportSendToParent"] .popItem>.con>table {
	width: 100%;
	min-width: 825px;
}

.report_wrap[data-role="reportSendToParent"] .popItem>.con>table tr>th {
	background: #e7eaf9;
	padding: 10px 0;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
}

.report_wrap[data-role="reportSendToParent"] .popItem>.con>table tr>th:last-of-type
	{
	border-right: 1px solid #ccc;
}

.report_wrap[data-role="reportSendToParent"] .popItem>.con>table tr>td {
	padding: 10px;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	text-align: center;
	min-height: 41.6px;
}

.report_wrap[data-role="reportSendToParent"] .popItem>.con>table tr>td:last-of-type
	{
	border-right: 1px solid #ccc;
}

.report_wrap[data-role="reportSendToParent"] .popItem>.con>table tr>td>input
	{
	text-align: center;
	width: 100%;
}

.report_wrap[data-role="reportSendToParent"] .popItem>span {
	color: #cc3333;
	margin-top: 10px;
	display: inline-block;
}

.report_wrap.parent[data-role="reportSendToParent"] {
	/* height: calc(100% - 70px); */
}

/* 차트 리뉴얼 css */
.scrollArea {
	margin-bottom: 30px;
	width: 100%;
	overflow-x: auto;
}

.report_wrap[data-role="reportSendToParent"] .studing_chart {
	min-width: 825px;
	width: 100%;
}

.report_wrap[data-role="reportSendToParent"] .studing_chart>canvas {
	width: 100%;
}

/* custom scroll -가로- */
.reportSendWrap.pc .scrollTable::-webkit-scrollbar {
	height: 7px; /* 스크롤바의 너비 */
}

.reportSendWrap.pc .scrollTable::-webkit-scrollbar-thumb {
	width: 80%; /* 스크롤바의 길이 */
	background: #13d5cd; /* 스크롤바의 색상 */
	border-radius: 10px;
}

.reportSendWrap.pc .scrollTable::-webkit-scrollbar-track {
	background: rgba(33, 122, 244, .1); /*스크롤바 뒷 배경 색상*/
}
/* @_END */

/* 2023.06.28 reportToMonthly */
.reportMonthlyWrap>header {
	display: flex;
	align-items: center;
}

.reportMonthlyWrap>header>h1 {
	line-height: 1;
	font-weight: 600;
	font-size: 23px;
}

.reportMonthlyWrap>header>h1>span {
	font-size: 15px;
	display: block;
	font-weight: 400;
	margin-top: 5px;
	margin-left: 0px;
}

.reportMonthlyWrap>header>div {
	margin-left: auto;
	text-align: right;
	font-weight: 600;
	font-size: 18px;
}

.reportMonthlyWrap>header>div>span {
	font-size: 15px;
	display: block;
	font-weight: 400;
	margin-top: 5px;
}

.report_wrap[data-role="reportToMonthly"] {
	padding: 20px;
	overflow-Y: auto;
	background: #fff;
	box-sizing: border-box;
	/*height: calc(100% - 70px);*/
}

.report_wrap[data-role="reportToMonthly"] .popItem+.popItem {
	margin-top: 30px;
}

.report_wrap[data-role="reportToMonthly"] .popItem>.t {
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 15px;
}

.report_wrap[data-role="reportToMonthly"] .popItem .con {
	width: 100%;
	overflow-X: auto;
}

.report_wrap[data-role="reportToMonthly"] .popItem .con table {
	width: 100%;
	min-width: 825px;
}

.report_wrap[data-role="reportToMonthly"] .popItem .con table tr>th {
	background: #e7eaf9;
	padding: 10px 0;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
}

.report_wrap[data-role="reportToMonthly"] .popItem .con table tr>th:last-of-type
	{
	border-right: 1px solid #ccc;
}

.report_wrap[data-role="reportToMonthly"] .popItem .con table tr>td {
	padding: 10px;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	text-align: center;
	min-height: 41.6px;
}

.report_wrap[data-role="reportToMonthly"] .popItem .con table tr>td:last-of-type
	{
	border-right: 1px solid #ccc;
}

.report_wrap[data-role="reportToMonthly"] .popItem .con table tr>td>input
	{
	text-align: center;
	width: 100%;
}

.report_wrap[data-role="reportToMonthly"] .popItem .scrollArea {
	overflow-x: inherit;
}

.report_wrap[data-role="reportToMonthly"] .popItem .flexBox {
	display: flex;
	align-items: center;
}

.report_wrap[data-role="reportToMonthly"] .popItem .flexBox>.scrollArea
	{
	width: calc(100% - 230px);
	margin-bottom: 0px;
	margin-right: 30px;
}

.report_wrap[data-role="reportToMonthly"] .popItem .flexBox>.con {
	width: 200px;
}

.report_wrap[data-role="reportToMonthly"] .popItem .flexBox table {
	min-width: 200px;
}

.reportMonthlyWrap .field.select {
	position: relative;
	margin-left: 20px;
	border: 1px solid gray;
	width: 80px;
	border-radius: 5px;
}

.reportMonthlyWrap .field.select:after {
	font-family: FontAwesome;
	content: "\f107";
	vertical-align: middle;
	position: absolute;
	top: 0px;
	right: 10px;
	display: block;
	color: #999;
	font-size: 15px;
	height: 25px;
	line-height: 25px;
	z-index: 1;
}

.reportMonthlyWrap .field.select>select {
	display: block;
	width: 100%;
	padding: 0px 20px 0 10px;
	line-height: 25px;
	height: 25px;
	box-sizing: border-box;
}

/* chart 리뉴얼 */
.c3 .c3-axis-x path, .c3 .c3-axis-x line {
	stroke: #ddd;
}

.c3 .c3-axis-y path, .c3 .c3-axis-y lines {
	stroke: #ddd;
}

.c3 .c3-axis-x line, .c3 .c3-axis-y line {
	display: none;
}

.c3-ygrid-line.gridGray line {
	stroke: #ddd;
}

@media ( max-width : 600px) {
	.report_wrap[data-role="reportToMonthly"] .popItem .flexBox {
		flex-wrap: wrap;
		justify-content: center;
	}
	.report_wrap[data-role="reportToMonthly"] .popItem .flexBox>.scrollArea
		{
		width: 100%;
		margin-bottom: 30px;
		margin-right: 0px;
	}
}

/* @_END */


/* 외출일정, 잠자기일정 추가, 외출일정종료시간 설정  팝업 */
.outingEnd_modal,
.etcEnd_modal {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1000;
	display: none;
	justify-content: center;
	align-items: center;
}

.checkTime_modal,
.sleep_modal,
.outing_modal {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 999;
	display: none;
	justify-content: center;
	align-items: center;
}

.checkTime_modal.view,
.outingEnd_modal.view,
.etcEnd_modal.view,
.sleep_modal.view,
.outing_modal.view{ display:flex;}

.checkTime_modal>div,
.outingEnd_modal>div,
.etcEnd_modal>div,
.sleep_modal>div,
.outing_modal>div {
	background: #fff;
	max-width: 90%;
	border-radius: 5px;
	width: 500px;
}

.checkTime_modal>div>.head,
.outingEnd_modal>div>.head,
.etcEnd_modal>div>.head,
.sleep_modal>div>.head,
.outing_modal>div>.head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #ccc;
	font-size: 20px;
}

.checkTime_modal>div>.head>p,
.outingEnd_modal>div>.head>p,
.etcEnd_modal>div>.head>p,
.sleep_modal>div>.head>p,
.outing_modal>div>.head>p {
	font-size: 18px;
}

.checkTime_modal>div>.head>p>span,
.outingEnd_modal>div>.head>p>span,
.etcEnd_modal>div>.head>p>span,
.sleep_modal>div>.head>p>span,
.outing_modal>div>.head>p>span{font-size:13px; display:block; margin-top:5px; color:#bbb;}

.checkTime_modal>div>.head a,
.outingEnd_modal>div>.head a,
.etcEnd_modal>div>.head a,
.sleep_modal>div>.head a,
.outing_modal>div>.head a {
	font-weight: 500;
}

.checkTime_modal>div>.body,
.outingEnd_modal>div>.body,
.etcEnd_modal>div>.body,
.sleep_modal>div>.body,
.outing_modal>div>.body {
	padding: 15px;
}

.checkTime_modal .body .field_trans.select,
.outingEnd_modal .body .field_trans.select,
.etcEnd_modal .body .field_trans.select,
.sleep_modal .body .field_trans.select,
.outing_modal .body .field_trans.select {
	width: 100%;
	position: relative;
	border-bottom: 1px solid #ccc;
}

.checkTime_modal .body .field_trans.select::after,
.outingEnd_modal .body .field_trans.select::after,
.etcEnd_modal .body .field_trans.select::after,
.sleep_modal .body .field_trans.select::after,
.outing_modal .body .field_trans.select::after {
	font-family: FontAwesome;
	content: "\f107";
	vertical-align: middle;
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	color: #999;
	font-size: 15px;
	height: 40px;
	line-height: 40px;
	z-index: 1;
}

.checkTime_modal .body .field_trans.select>select,
.outingEnd_modal .body .field_trans.select>select,
.etcEnd_modal .body .field_trans.select>select,
.sleep_modal .body .field_trans.select>select,
.outing_modal .body .field_trans.select>select {
	display: block;
	width: 100%;
	padding: 0px 0px;
	line-height: 40px;
	height: 40px;
	box-sizing: border-box;
	font-size: 16px;
	font-weight: 400;
	z-index: 2;
	position: relative;
	letter-spacing: -0.5px;
}

.checkTime_modal .body p:not(:first-child),
.outingEnd_modal .body p:not(:first-child),
.etcEnd_modal .body p:not(:first-child),
.sleep_modal .body p:not(:first-child),
.outing_modal .body p:not(:first-child) {
	margin-top: 20px;
}

.sleep_modal .body .btnArea,
.outing_modal .body .btnArea{display:flex; align-items:center; justify-content:flex-end; margin-top: 20px;}
.sleep_modal .body .btnArea > button,
.outing_modal .body .btnArea > button{text-align: center; height: 50px; line-height: 50px; border-radius: 5px; font-size: 16px; font-weight: 500; display: inline-block; }
.sleep_modal .body .btnArea > button.btn_sleep_close,
.outing_modal .body .btnArea > button.btn_pop_close{background:#aaa; color:#fff; margin-right:auto; width:80px;}
.sleep_modal .body .btnArea > button.btn_add_sleep,
.outing_modal .body .btnArea > button.btn_add_outing{background: #50CCC6; color: #fff; width:80px;}
.sleep_modal .body .btnArea > button.btn_play_sleep,
.outing_modal .body .btnArea > button.btn_play_outing{background:#19ce60; color:#fff; width:120px; margin-left:10px;}

.checkTime_modal .body > button,
.outingEnd_modal .body > button,
.etcEnd_modal .body > button
{text-align: center; height: 50px; line-height: 50px; margin-top: 20px; border-radius: 5px; font-size: 16px; font-weight: 500; display: inline-block; width:100%; background: #50CCC6; color: #fff;}

@media (max-width: 620px) {
	.learning_wrap>.study_btns> .btnSt1{font-size:13px; width:80px;}
	.learning_wrap .darkMode { right: 9%; }
}

@media (max-width: 460px) {
	.learning_wrap>.study_btns> .btnSt1{font-size:12px; width:60px; padding:0px;}
	
	.sleepBtn,
	.btn_cancel{margin:10px 0 10px 5px !important;}
	
	.sleep_modal .body .btnArea > button, .outing_modal .body .btnArea > button{height:40px; line-height:40px; font-size:14px;}
	.sleep_modal .body .btnArea > button.btn_play_sleep,
	.outing_modal .body .btnArea > button.btn_play_outing{width:100px; margin-left:5px;}
	
	.learning_wrap .darkMode { right: 8%; }
}

@media screen and (min-width:620px) and (max-width:1023px) {
	.learning_wrap .darkMode { right: 7.5%; }
}

@media screen and (min-width:1024px) and (max-width:1320px) {
	.learning_wrap .darkMode { right: 5.5%; }
}

.checkTime_modal  .body > .field_trans_Wrap,
.outingEnd_modal  .body > .field_trans_Wrap,
.etcEnd_modal  .body > .field_trans_Wrap,
.sleep_modal  .body > .field_trans_Wrap,
.outing_modal  .body > .field_trans_Wrap{display:flex;}
/* .sleep_modal  .body > .field_trans_Wrap > .field_trans.select, */	/* 2023-10-10 잠자기 일정선택 수정 (시간 제외) */
.outing_modal  .body > .field_trans_Wrap > .field_trans.select{width:calc((100% / 2) - 10px);}

.checkTime_modal .body > .field_trans_Wrap{align-items:center;}
.checkTime_modal .body > .tit{display:inline-block;}
.checkTime_modal .body > .tit:nth-of-type(2){margin-top:20px;} 

.checkTime_modal  .body > .field_trans_Wrap > .field_trans.select:first-of-type,
.outingEnd_modal  .body > .field_trans_Wrap > .field_trans.select:first-of-type,
.etcEnd_modal  .body > .field_trans_Wrap > .field_trans.select:first-of-type{width:70px;}
.checkTime_modal  .body > .field_trans_Wrap > .field_trans.select:nth-of-type(2),
.checkTime_modal  .body > .field_trans_Wrap > .field_trans.select:nth-of-type(3),
.outingEnd_modal  .body > .field_trans_Wrap > .field_trans.select:nth-of-type(2),
.outingEnd_modal  .body > .field_trans_Wrap > .field_trans.select:nth-of-type(3),
.etcEnd_modal  .body > .field_trans_Wrap > .field_trans.select:nth-of-type(2),
.etcEnd_modal  .body > .field_trans_Wrap > .field_trans.select:nth-of-type(3)
{width:calc(((100% - 70px) / 2) - 20px);}

.outing_modal .field_trans.tit.txt_box{
    border-bottom: 1px solid #ccc;
    margin-top:5px;
}
.outing_modal .field_trans>input[type=text] {
	display: block;
	width: 100%;
	padding: 0px 0px;
	line-height: 40px;
	height: 40px;
	box-sizing: border-box;
	font-size: 16px;
	font-weight: 400;
	z-index: 2;
	letter-spacing: -0.5px;
}

.outing_modal .field_trans .checkedArea{display:flex; flex-wrap:wrap; gap:5px 10px;}

/* 외출중 화면 */
.outingMask_pop {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 999;
	display:none;
}
.outingMask_pop.view{display:inline-block;}

.outingMask_pop > .otMaskClose {
	font-weight: 500;
	font-size:30px; color:#fff;
	position:absolute;
	right:20px; top:20px;
}

.outingMask_pop > div{max-width:1080px; height:100%; position:relative; margin:0 auto;}

.outingMask_pop > div > div{display:flex; flex-direction: column; align-items:center; justify-content:center; color:#fff; height:100%;}
.outingMask_pop > div > div > .tit{font-size:4rem; font-weight:600;}
.outingMask_pop > div > div > .time{font-size:1.3rem; margin-top:10px; letter-spacing: 1.5px;}

.outingMask_pop button{text-align: center; height: 50px; border-radius: 5px; font-size: 16px; font-weight: 500; display: inline-block; position:absolute; bottom:20px;}

.outingMask_pop button.btn_otEndTime{background: #50CCC6; color: #fff; left:20px; width:100px; line-height:1.2;}
.outingMask_pop button.btn_add_outingEndTime{background:#19ce60; color:#fff; right:20px; width:100px;}

/* 잠자기 화면 */
.sleepMask_modal {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 999;
	display:none;
}
.sleepMask_modal.view{display:inline-block;}

.sleepMask_modal > .sleepMaskClose {
	font-weight: 500;
	font-size:30px; color:#fff;
	position:absolute;
	right:20px; top:20px;
}

.sleepMask_modal > div{display:flex; flex-direction: column; align-items:center; justify-content:center; color:#fff; height:100%;}
.sleepMask_modal > div > .tit{font-size:4rem; font-weight:600;}
.sleepMask_modal > div > .time{font-size:1.3rem; margin-top:10px; letter-spacing: 1.5px;}

/* 외출&잠자기 화면 */
.etcMask_pop {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 999;
	display:none;
}
.etcMask_pop.view{display:inline-block;}

.etcMask_pop > .etcMaskClose {
	font-weight: 500;
	font-size:30px; color:#fff;
	position:absolute;
	right:20px; top:20px;
	z-index: 999;
}

.etcMask_pop > div{max-width:1080px; height:100%; position:relative; margin:0 auto;}

.etcMask_pop > div > div{display:flex; flex-direction: column; align-items:center; justify-content:center; color:#fff; height:100%;}
.etcMask_pop > div > div > .tit{font-size:4rem; font-weight:600;}
.etcMask_pop > div > div > .time{font-size:1.3rem; margin-top:10px; letter-spacing: 1.5px;}

.etcMask_pop button{text-align: center; height: 50px; border-radius: 5px; font-size: 16px; font-weight: 500; display: inline-block; position:absolute; bottom:20px;}

.etcMask_pop button.btn_etcEndTime{background: #50CCC6; color: #fff; left:20px; width:100px; line-height:1.2;}
.etcMask_pop button.btn_add_etcEndTime{background:#19ce60; color:#fff; right:20px; width:100px;}

/* 채팅창 ui */
.chat{background:#fff;}

.chat > header {display:flex; justify-content: space-between; gap: 10px; background: #f3f3f3; position: fixed; top:0px; right:0px; left:0px; z-index: 1;border-bottom:1px solid #ddd;box-shadow: 0px 0px 15px rgba(0,0,0,0.1); margin:0 auto; height:auto; text-align:left; transform:translate(0);}
.chat > header > .history_back{width:45px; height:75px; display:inline-block; margin:0px; line-height:75px; z-index:1;}
.chat > header > .profile {padding:15px 0px 15px 0px; display:block;position: relative; width: 55%; }
.chat > header > .profile > i { position: absolute;top:12px;left:45px;display: block;width:50px;height:50px;border-radius: 50%;background-size: cover;background-repeat: no-repeat;border:1px solid #bbb;box-sizing: border-box;}

.chat > header > .profile > h4 { font-size:20px;font-weight: 700;line-height:26px; white-space: nowrap; text-overflow: ellipsis; width: 100%; overflow: hidden; }
.chat > header > .profile > h4 > span { display:inline-block;vertical-align: bottom;font-size:13px;font-weight: 400;color:#999;margin-left:10px;}
.chat > header > .profile > p { font-size:13px;font-weight: 600;color:#666;line-height: 15px;margin-top:3px; white-space: nowrap; text-overflow: ellipsis; width: 100%; overflow: hidden;}
.chat > header > .profile > span { display:none;position: absolute;bottom:15px;right:60px;font-size:0px;}
.chat > header > .profile > span > i { display:inline-block;width:15px;height:15px;line-height: 15px;text-align: center;font-size:11px;background: #bbb;color:#fff;vertical-align: bottom;}
.chat > header > .profile > span > i.on { background: #404d5e;}

.chat > header > .bntWrap { display: flex; align-items: center; gap: 10px; }
.chat > header > .bntWrap > .cards { display:flex; /* position: absolute; */ top:24px;right:90px;font-size:0px;z-index: 10;}
.chat > header > .bntWrap > .cards > p { display:inline-block;background: #999;padding:5px 0px;width:26px;text-align: center;color:#fff; text-shadow: 0px 0px 5px rgba(0,0,0,0.3);cursor: pointer;}
.chat > header > .bntWrap > .cards > p > span { font-size:11px;display:none;line-height:14px;}
.chat > header > .bntWrap > .cards > p > b { display:block;line-height:16px;text-align:center;display:block;font-size:14px;font-weight: 800;}
.chat > header > .bntWrap > .cards > p > b::before { content:attr(data-cnt); }
.chat > header > .bntWrap > .cards > p.y { background: #ffcb2a;}
.chat > header > .bntWrap > .cards > p.r { background: #fa3457;}

.chat > header > .bntWrap > .reload_btn { display:block;width:36px;height:40px;line-height: 40px;text-align: center;font-family: 'xeicon' !important; /*position: absolute; */ top:17px;right:46px;font-size:24px;}
.chat > header > .bntWrap > .reload_btn::before { content: "\e982";display:block;height:40px;line-height: 40px; }

.chat > header > .search_btn { display:block;width:36px;height:40px;line-height: 40px;text-align: center;font-family: 'xeicon' !important;position: absolute;top:17px;right:10px;font-size:24px;}
.chat > header > .search_btn::before { content: "\e97a";display:block;height:40px;line-height: 40px; }
.chat > header > .search_btn.opened::before { content: "\e921"; }
.chat > header > .search { display:none;padding:10px 10px 10px 10px;border-top:1px solid #ddd;position: relative;}
.chat > header > .search > span { display:block; border:1px solid #ddd;border-radius: 20px;background:#fff;overflow: hidden;position:relative;}
.chat > header > .search > span > input { line-height:38px;padding:0px 15px;width:100%; }
.chat > header > .search > span > button { position: absolute;top:3px;right:3px;background:#404d5e;color:#fff;line-height:32px;padding:0px 20px;border-radius: 17px;}
.chat > header > .search_btn.opened + .search { display:block; }

.chat > footer {display:block; background: #f3f3f3; position: fixed; bottom:0px; right:0px;left:0px;z-index: 1;border-top:1px solid #ddd;box-shadow: 0px 0px 15px rgba(0,0,0,0.1); margin:0 auto; padding:0px;}

.chat > footer > .btns { display:flex;padding:10px 12px;font-size:0px; }
.chat > footer > .btns > a { display:inline-block;line-height:28px;padding:0px 10px;border:1px solid #ddd;background: #fff;font-size:12px; vertical-align: top;border-radius: 5px;position: relative;overflow: hidden;}
.chat > footer > .btns > a > i { display:inline-block;line-height:28px;vertical-align: bottom;margin-left:5px;}
.chat > footer > .btns > a.arr { padding-right:10px; }
.chat > footer > .btns > a.arr > i { font-family:FontAwesome; }
.chat > footer > .btns > a.arr > i::before { content:"\f106"; }
.chat > footer > .btns > a.arr.opened { background: #eee;color:#999;}
.chat > footer > .btns > a.arr.opened > i::before { content:"\f107"; }

.chat > footer > .btns > a > input[type=file] { position: absolute;top:0px;left:0px;line-height:28px;width:150%;font-size:28px;opacity: 0;cursor: pointer;}
.chat > footer > .btns > a + a { margin-left:2px; }
.chat > footer > .btns > a.complaintBtn { background: #ED7D31; color: #fff; }

.chat > footer > .chat { display:block;padding:0px 12px 15px 12px;font-size:0px; background:#f3f3f3;}
.chat > footer > .chat > span { display:block; border:1px solid #ddd;border-radius: 5px;background:#fff;overflow: hidden;position:relative;}
.chat > footer > .chat > span > textarea { line-height:20px;height:26px;padding:8px 10px;width:100%; }
.chat > footer > .chat > span > button { position: absolute;top:3px;right:3px;bottom:3px;border-radius: 3px;background:#404d5e;color:#fff;padding:0px 20px;}

.chat > footer > .boilerplate { display:none;font-size:0px;max-height: 200px;overflow: hidden;overflow-y: auto;background: #fff; box-shadow: 0px 0px 15px rgba(0,0,0,0.1);position: absolute;left:0px;right:0px;bottom:110px;}
.chat > footer > .boilerplate a {padding:10px 15px;line-height: 20px;font-size:13px;color:#666;cursor: pointer;font-weight: 600;display:block;}
.chat > footer > .boilerplate a + a { border-top:1px solid #ddd; }
.chat > footer > .boilerplate.opened { display:block; }

.chat > footer > .boilerplate .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: rgba(0,0,0,0.5); }

.chat > footer > .btns > .chatTarget { display: flex; margin-left:auto;}
/*
.chat > footer > .btns > .chatTarget > label {cursor:pointer; border:1px solid #ddd; background: #fff; padding:0px 10px; border-radius: 5px; height: 28px; width:55px; box-sizing:border-box; font-size:12px; display:flex; align-items:center; justify-content:center;}
.chat > footer > .btns > .chatTarget > label:has(input[type="checkbox"]:checked){background: #50CCC6; height: 28px; }
.chat > footer > .btns > .chatTarget > label:has(input[type="checkbox"]:checked) > span{color:#fff;}
*/

.chat > footer > .btns > .chatTarget > label{padding:0px; height:auto; width:auto;}
.chat > footer > .btns > .chatTarget > label + label{margin-left:2px;}
.chat > footer > .btns > .chatTarget input[type="checkbox"] { display:none;}
.chat > footer > .btns > .chatTarget input[type="checkbox"] + span{cursor:pointer; border:1px solid #ddd; background: #fff; padding:0px 10px; border-radius: 5px; height: 28px; box-sizing:border-box; font-size:12px; display:flex; align-items:center; justify-content:center;}
.chat > footer > .btns > .chatTarget input[type="checkbox"] + span:before { display:none;}

.chat > footer > .btns > .chatTarget input[type="checkbox"]:checked + span{background: #50CCC6; color:#fff; position:relative; padding-left:25px;}
.chat > footer > .btns > .chatTarget input[type="checkbox"]:checked + span:before{content: "\e929"; font-family:xeicon; display:inline-block; border:0px; background: transparent; color: #fff; position:absolute; left:4px; top:50%; transform:translateY(-50%);}
.chat > footer > .btns > .chatTarget span { color: #00090d; margin-left: 0px; font-size:12px;}
.chat > footer > .btns > .chatTarget span:last-child { margin-right: 0; }

.chat > section {background:#fff; padding-top:75px; padding-bottom:110px; }
.chat > section > ul { display:block;padding:15px 0px; }
.chat > section > ul > li { display:block;text-align: left;position: relative;padding:0px 20px 0px 60px;overflow: hidden;}

.chat > section > ul > li > b { display: inline-block;background: #fff;text-shadow: 0px 0px 0px rgba(255,255,255,0.4);font-size: 11px;font-weight: 300;color: rgba(0,0,0,0.7);line-height: 20px;height: 17px;width: 17px;text-align: center;vertical-align: top;margin-left: 5px;border-radius: 50%;box-shadow: 0px 0px 5px rgba(0,0,0,0.2); }
.chat > section > ul > li.me > b { display: inline-block;background: #fff;text-shadow: 0px 0px 0px rgba(255,255,255,0.4);font-size: 11px;font-weight: 300;color: rgba(0,0,0,0.7);line-height: 20px;height: 17px;width: 17px;text-align: center;vertical-align: top;margin-left: 5px;border-radius: 50%;box-shadow: 0px 0px 5px rgba(0,0,0,0.2); }
.chat > section > ul > li > b.new { background: #f58D3D; }
.chat > section > ul > li > b.new::before { content: 'N'; color: #fff; }

.chat > section > ul > li + li { border-top:0px solid #ddd;margin-top:15px }
.chat > section > ul > li > div { display:inline-block;max-width:70%;padding:10px 15px;background: #eee;border-radius: 10px;position: relative; }
.chat > section > ul > li > div > i { position: absolute;top:6px;left:-50px;display: block;width:40px;height:40px;border-radius: 50%;background-size: cover;background-repeat: no-repeat;border:1px solid #bbb;box-sizing: border-box;}

.chat > section > ul > li > div > p { display:block;font-size:12px;color:#999;line-height:20px;margin-bottom:6px;}
.chat > section > ul > li > div > p > b { display:inline-block;height:20px;line-height:20px;vertical-align: top;font-size:13px;font-weight:500;margin-right:7px;color:#111; }
.chat > section > ul > li > div > p > span.read { font-weight:600; color:#fe7c1c; }
.chat > section > ul > li > div > div { display:block;margin-left:0px;line-height:20px; }
.chat > section > ul > li > div > div > img { object-fit: cover; }
.chat > section > ul > li > div > div > b { font-weight: 600;}
.chat > section > ul > li > div > div > span { display:block;font-size:0px;margin-top:5px;margin-bottom:2px;}
.chat > section > ul > li > div > div > span > a { display:inline-block;line-height:26px;padding:0px 15px;background: #999;font-size:12px; vertical-align: top;border-radius: 2px;color:#fff; }
.chat > section > ul > li > div > div > span > b { display:inline-block;line-height:26px;vertical-align: top;margin-left:10px;font-size:12px;color:#999;font-weight: 700;}
.chat > section > ul > li > div:after,
.chat > section > ul > li > div:before {right: 100%; margin-right:0px; top: 18px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.chat > section > ul > li > div:after { border-color: transparent; border-right-color: #eee; border-width: 9px; margin-top: 0px; }

.chat > section > ul > li.me { text-align: right;padding:0px 20px;}
.chat > section > ul > li.me > div > p { color:rgba(0,0,0,0.6); }
.chat > section > ul > li.me > div { background: #eedcc6;}
.chat > section > ul > li.me > div:after,
.chat > section > ul > li.me > div:before {right:auto;left: 100%; margin-left:0px; top: 18px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.chat > section > ul > li.me > div:after { border-color: transparent; border-left-color: #eedcc6; border-width: 9px; margin-top: 0px; }

.chat > section > ul > li.me > div > button { background: transparent;width:26px;height:26px;line-height:26px;text-align:center;font-family: 'xeicon' !important;font-size:14px;position: absolute;top:10px;left:-26px;color:#999;}
.chat > section > ul > li.me > div > button::before {content: "\e921";}


.chat > section > ul > li.bot > div { background: rgba(90,229,223,0.5);}
.chat > section > ul > li.bot > div > p { color:rgba(0,0,0,0.6); }
.chat > section > ul > li.bot > div > p > b { font-weight: 700;letter-spacing: -0.5px;}
.chat > section > ul > li.bot > div > i { background: url(/stu_res/images/bi_n.png) #404d5e no-repeat center;background-size: 75%;;background-repeat: no-repeat;border-radius: 5px;}
.chat > section > ul > li.bot > div:after,
.chat > section > ul > li.bot > div:before {right: 100%; margin-right:0px; top: 18px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.chat > section > ul > li.bot > div:after { border-color: transparent; border-right-color: rgba(90,229,223,0.5); border-width: 9px; margin-top: 0px; }
.chat > section > ul > li.bot > div > div > span > a { background: #404d5e; }

.chat > section > ul > li.bot > .managerNoti > .botMsg > b > .stRead { margin-left: 30px; font-weight:500; color: #999; }
.chat > section > ul > li.bot > .managerNoti > .botMsg > b > .stRead.check { color: #000; }

.chat > section > ul > li.date { text-align: center;padding:10px 0px;}
.chat > section > ul > li.date > p { padding:5px 10px;background: #fff;font-size:13px;color:#999; }
.chat > section > ul > li.date > div:after,
.chat > section > ul > li.date > div:before { display:none; }

.chat > section > ul > li > div > div > span > a.waiting { background: #999; }
.chat > section > ul > li > div > div > span > a.waiting + b {color:#999;}
.chat > section > ul > li > div > div > span > a.proceeding { background:#45a171; }
.chat > section > ul > li > div > div > span > a.proceeding + b {color:#45a171;}
.chat > section > ul > li > div > div > span > a.deadlined { background:#8c2332; }
.chat > section > ul > li > div > div > span > a.deadlined + b {color:#8c2332;}
.chat > section > ul > li > div > div > span > a.pending { background:#8c2332; }
.chat > section > ul > li > div > div > span > a.pending + b {color:#8c2332;}
.chat > section > ul > li > div > div > span > a.progressing { background:#ED7D31; }
.chat > section > ul > li > div > div > span > a.progressing + b {color:#ED7D31;}
.chat > section > ul > li > div > div > span > a.confirmed { background:#45a171; }
.chat > section > ul > li > div > div > span > a.confirmed + b {color:#45a171;}


/* aiGree */
.aiAgreeWrap > .txtbox{padding:15px; background:#f2f2f2;}
.aiAgreeWrap > .txtbox > ul > li{font-size:14px;}
.aiAgreeWrap > .txtbox > ul > li + li{margin-top:7px;}
.aiAgreeWrap > span{margin:20px 0; font-size:15px;display:inline-block; line-height: 1.3;}
.renewalInput>label>input[type=radio]+span {
	line-height: 24px;
	font-size: 15px;
}

.renewalInput>label>input[type=radio]+span:before {
	width: 22px;
	height: 22px;
	top: 50%;
	transform:translateY(-50%);
}

.renewalInput>label{width:100%; height:auto; padding: 2px 0 2px 25px;}
.renewalInput>label + label{margin-top:5px;}

.renewalInput>label>input[type=radio]:checked+span:before {
	font-size: 22px;
	line-height: 22px;
}

/* 학습그룹 및 교재관리 > AI 모니터링 */
.aiAgree_box {
	margin-top:15px;
}

.aiAgree_box>div{
	position: relative; 
	padding: 15px 100px 15px 15px;
	background:#f2f2f2;
}

.aiAgree_box>div>h4 {
	display: block; 
	font-size: 16px; 
	line-height: 20px; 
	font-weight: 500; 
	letter-spacing: -0.5px; 
	margin-bottom: 4px;
}

.aiAgree_box>div>p {
	line-height: 15px; 
	color: #999; 
	font-size: 13px;
}

.aiAgree_box>div>.agree_yn {
	position: absolute;
	top: 15px; 
	right: 15px; 
}

/* 학습그룹 및 교재관리 > tabMenu */
.tabMenuWrap{margin:15px 0 30px;}
.tabMenuWrap ul{display:flex;}
.tabMenuWrap ul > li{cursor:pointer; font-weight:500; width:50%; color:#fff; font-size:15px; padding:15px 20px; background:#999; text-align:center;}
.tabMenuWrap ul > li.on{background:#50CCC6;}

.tabCon{display:none;}
.tabCon.on{display:block;}

/* 학습그룹 및 교재관리 > 내신학습계획 */
.gpaTermSetWrap{margin-bottom:30px;}
.gpaTermSetWrap > h4{display: block; font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: -0.5px; margin-bottom: 4px;}
.gpaTermSetWrap > p{line-height: 15px; color: #999; font-size: 13px; margin-bottom: 4px;}
.gpaTermSetWrap .radio > label + label{margin-left:10px;}

.gpaTerm{display:none; align-items:center; margin-top:5px;}
.gpaTerm.on{display:flex;}
.gpaTerm > span{margin:0 10px;}

.gpaTerm .field_trans {
	border-bottom: 1px solid #ccc;
	border-radius: 0px;
	position: relative;
	overflow: hidden;
	width: 110px;
	display: inline-block;
	position: relative;
	vertical-align: middle;
}

.gpaTerm .field_trans>input[type=date] {
	display: block;
	width: 100%;
	padding: 0px 0px;
	line-height: 40px;
	height: 40px;
	box-sizing: border-box;
	text-align: left;
	font-size: 16px;
	font-weight: 400;
	position: relative;
	z-index: 2;
	background: white;
}

.gpaTerm .field_trans > input[type="date"]::-webkit-calendar-picker-indicator {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; cursor: pointer;  color: transparent; background-size: auto; background-position: right;}

.gpaTerm .field_trans.date:after {
	font-family: 'xeicon' !important;
	content: "\e9a4";
	vertical-align: middle;
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	color: #bbb;
	font-size: 20px;
	height: 40px;
	line-height: 40px;
	z-index: 1;
}


/* 학습 채팅 팝업영역 설정 */
.chatPop {display:block;position:fixed;top:0px;left:0px;right:0px;bottom:0px;background:rgba(0,0,0,0.6);z-index:990;will-change: transform, opacity; }
.chatPop > .popup {position:fixed;top:50%;left:50%;width:90%; padding:0px; height:auto;background:#fff;
	-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	 -webkit-box-shadow:  0px 0px 80px 20px rgba(0,0,0,0.2);-moz-box-shadow: 0px 0px 80px 20px rgba(0,0,0,0.2);box-shadow: 0px 0px 80px 20px rgba(0,0,0,0.2);
	 z-index:999;display:block;}
.chatPop > .popup.width_600{max-width:600px;}

.chatPop > .popup > header { position:relative; display:flex; align-items:center; justify-content:space-between; padding-bottom:0px; background:#eee; padding:0 20px; border-bottom:1px solid #ccc; height:60px;}
.chatPop > .popup > header h1 { font-size:22px; font-weight:600; color:#333; letter-spacing: -0.5px;}
.chatPop > .popup > header h1 > span { font-size:16px;margin-left:7px; }
.chatPop > .popup > header h1.type2{line-height:1; display: flex; flex-direction: column; justify-content: center;}
.chatPop > .popup > header h1.type2 > span{color:#999; display:block; margin:5px 0px 0px; font-size:13px; padding-left:3px;}
.chatPop > .popup > header .close {font-size:30px; display:inline-block; width:20px; height:30px; line-height:20px; text-align:center; cursor:pointer; color:#333; }

.chatPop > .popup > header .nowSt{margin:0px; padding:0px; background:transparent; color:#101010; width: 90%; }
.chatPop > .popup > header .nowSt > .t{font-size: 20px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; width: 100%; overflow: hidden; }
.chatPop > .popup > header .nowSt > .t > span{color:#999; font-size: 13px; margin-left: 10px; font-weight: 400;}
.chatPop > .popup > header .nowSt > .s > span,
.chatPop > .popup > header .nowSt > .s{color:#101010;}
.chatPop > .popup > header .nowSt > .s { width: 90%; white-space: nowrap; text-overflow: ellipsis; width: 100%; overflow: hidden; }
.chatPop > .popup > header .nowSt > .s > span{margin-left: 5px;}

.chatPop > .popup > footer {position:relative; margin:0px; padding:0 20px; height:60px; display:flex; align-items:center; justify-content:flex-end; background:#eee; border-top:1px solid #ccc; }
.chatPop > .popup > footer a { float: none;display:inline-block;line-height:40px;height:40px;border:0px;font-size:14px;width:auto;padding:0px 30px;color:#fff;margin:0px 2px;cursor:pointer;background:#404d5e;border-radius: 5px;}
.chatPop > .popup > footer.right a { padding:0px 25px; }
.chatPop > .popup > footer a.gray { background:#999; }
.chatPop > .popup > footer a.red { background:#ec635d; }
.chatPop > .popup > footer a.black { background:#2d3845; }
.chatPop > .popup > footer a.del {position:absolute;top:15px;right:20px; display:inline-block;line-height:40px;height:40px;border:0px;font-size:14px;width:auto;padding:0px 20px;color:#999;margin:0px 2px;cursor:pointer;background:#ddd; }
.chatPop > .popup > footer a.preview {position:absolute;top:15px;left:20px; display:inline-block;line-height:40px;height:40px;border:0px;font-size:14px;width:auto;padding:0px 20px;color:#fff;margin:0px 2px;cursor:pointer;background:#ec635d; }
.chatPop > .popup > footer.complete a { background:#48bacb;padding:0px 30px; }
.chatPop > .popup > footer.complete a.gray { background:#999;padding:0px 30px; }
.chatPop > .popup > footer span.select {position:absolute;top:15px;left:20px;padding-left:30px; display:inline-block;line-height:36px;height:36px;border:0px;font-size:14px;width:auto;width:80px;margin:0px 0px;cursor:pointer;background:#fff;border:2px solid #e95653; -webkit-border-radius: 5px;-khtml-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; overflow:hidden;}
.chatPop > .popup > footer span.select > label { position:absolute;top:0px;left:0px;display:block;width:30px;height:30px;line-height:15px;font-size:11px;padding:3px 0px;text-align:center;background:#e95653;color:#fff; }
.chatPop > .popup > footer span.select select { position:relative;display:block;width:130%;padding-left:5px;height:36px;line-height:36px;background:transparent;font-size:14px;font-weight:400;outline: none;z-index:2;color:#333; }
.chatPop > .popup > footer span.select:after { font-family:FontAwesome; content:"\f107";vertical-align: middle;position:absolute;top:0px;right:5px;display:block;color:#999;font-size:15px;height:36px;line-height:36px;z-index:1;}

.chatPop > .popup > footer span.appr {position:absolute;top:15px;left:20px;padding-left:30px; display:inline-block;line-height:36px;height:36px;border:0px;font-size:14px;width:auto;width:80px;margin:0px 0px;cursor:default;;background:#eee;border:2px solid #aaa; -webkit-border-radius: 5px;-khtml-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; overflow:hidden;}
.chatPop > .popup > footer span.appr > label { position:absolute;top:0px;left:0px;display:block;width:30px;height:30px;line-height:15px;font-size:11px;padding:3px 0px;text-align:center;background:#aaa;color:#fff; }
.chatPop > .popup > footer span.appr span { position:relative;display:block;padding-left:5px;height:36px;line-height:36px;background:transparent;font-size:14px;font-weight:400;outline: none;z-index:2;color:#333;text-align:left; }

.chatPop > .popup > footer > .select_box{position:absolute; left:20px; top:50%; transform:translateY(-50%);border: 1px solid #bbb;border-radius: 6px;display: inline-block;background: #fff;}
.chatPop > .popup > footer > .select_box > select {padding: 0 40px 0 12px; height: 40px; z-index: 1; position: relative;}
.chatPop > .popup > footer > .select_box:has(select:disabled) {border: 1px solid #dfe2ed;background-color: #edf0f9;}
.chatPop > .popup > footer div[data-tab=upload] { display:none; }

.chatPop > .popup > section {overflow-y:auto;background:#fff;padding:0px;margin:0px; max-height:70vh;}

.chatPop > .popup > section article { padding:20px; }

.chatPop > .popup h2 {font-size: 1.5em; font-weight: 500; margin-bottom: 10px;}

/* formArea */
.formArea > .itemArea{font-size:0px;}
.formArea > .itemArea div{font-size:14px;}
.formArea > .itemArea > .flex > .radio {display: inline-block;}
.formArea > .itemArea > label{font-size:13px; color:#777; display:block; margin-bottom:5px; padding-left: 0px;}
.formArea > .itemArea > .flex > .radio > label {display: flex;align-items: center;cursor: pointer;}
.formArea > .itemArea > .flex > .radio > label > .styledBox {position: relative;width: 20px; height: 20px; border: 1px solid #bbb; background: #fff; border-radius: 50%; display: inline-block;}

.formArea > .itemArea > .flex > .radio > label{display:flex; align-items: center; cursor:pointer;}
.formArea > .itemArea > .flex > .radio > label > .styledBox{position:relative;width:20px;height: 20px;border: 1px solid #bbb;background:#fff;border-radius: 50%;display:inline-block;}
.formArea > .itemArea > .flex > .radio > label > .styledBox + span{margin-left:10px; font-size: 16px; color:#999;}
.formArea > .itemArea > .flex > .radio > label > .styledBox + span > .red{font-weight: 500; color: #ec635d; margin-left: 5px;}
.formArea > .itemArea > .flex > .radio > input[type=radio]:checked + label > .styledBox{background-color: #111;}
.formArea > .itemArea > .flex > .radio > input[type=radio]:checked + label > .styledBox + span{font-size: 16px; color:#111;}
.formArea > .itemArea > .flex > .radio > input[type=radio]:checked + label > .styledBox:after{content: ""; position:absolute; background-color:#fff; width:50%; height:50%; border-radius: 50%; top:50%; left:50%; transform: translate(-50%, -50%); color:#fff}
.formArea > .itemArea > .flex > .radio + .radio{margin-left:10px;}

.formArea > .itemArea + .itemArea{margin-top:20px;}
.formArea > .itemArea > .flex{display:flex; align-items:center; gap:10px;}
.formArea > .itemArea > .flex > .renewalInput{margin-top:0px;}
.formArea > .itemArea > .txt{font-size:14px;}

.formArea > .itemArea .renewalInput{border:1px solid #bbb; background:#fff; border-radius:6px; overflow:hidden; width:100%;}
.formArea > .itemArea .renewalInput,
.formArea > .itemArea .renewalInput > input{width:auto; display:inline-block; line-height: 40px; height: 40px; font-size: 16px;}

.formArea > .itemArea .renewalInput.datepicker{padding-left: 10px;}
.formArea > .itemArea .renewalInput.timeInput{padding: 0px 5px;}
.formArea > .itemArea .renewalInput > input[type="time"] { position: relative; padding-right: 25px; }
.formArea > .itemArea .renewalInput > input[type="time"]::-webkit-calendar-picker-indicator {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; cursor: pointer;  color: transparent; background-size: auto; background-position: right;}

.formArea .datepicker{position: relative;display: inline-block;}
.formArea .datepicker > input{width:120px !important; line-height: 40px; height: 40px; font-size: 16px;}
.formArea .datepicker > i{font-style:normal;}
.formArea .datepicker > i::after{position:absolute; content: "\e9a0"; font-family: "xeicon"; font-size:1.3rem; top:50%; right:10px; transform:translateY(-50%);}

.formArea > .itemArea > textarea {padding: 12px; background: #fff; border: 1px solid #bbb; border-radius: 6px; resize: none; width: 95%;}

.formArea > .late, .absent {display: none;}
.formArea > .late.on, .absent.on {display: block;}

.formArea > .itemArea > .checkedArea {display: flex; flex-wrap: wrap; gap: 5px 15px;}
.formArea > .itemArea > .directInputReason {margin-top: 10px; border-bottom: 1px solid #ccc;}


/* 학습 중 알림 - 화면 깜빡임 */
@keyframes blink-effect { 50% {opacity: 0;} }

.blink_pop { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 999; display: none; }
.blink_pop.view { display: inline-block; animation: blink-effect 1s step-end infinite; background: rgba(255, 0, 0, 0.5) }

.managerNoti_modal { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(255, 0, 0, 0.5); z-index: 1000; display: none; justify-content: center; align-items: center; }
.managerNoti_modal.view { display: flex; }
.managerNoti_modal>div { background: #fff; max-width: 90%; border-radius: 5px; width: 500px; }
.managerNoti_modal>div>.head { display: flex; justify-content: center; align-items: center; padding: 15px; border-bottom: 1px solid #ccc; font-size: 24px; font-weight: 600; }
.managerNoti_modal>div>.body { padding: 30px; }
.managerNoti_modal .body > .field_trans_Wrap { display: flex; font-size: 18px; }
.managerNoti_modal .body > button { text-align: center; height: 50px; line-height: 50px; margin-top: 20px; border-radius: 5px; font-size: 16px; font-weight: 500; display: inline-block; width: 100%; background: #404d5e; color: #fff; }


/* 다크모드 */
.darkMode_pop { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 1); z-index: 990; display: none; }
.darkMode_pop.view { display: inline-block; }
.darkMode_pop > .darkModeClose { font-weight: 500; font-size:30px; color:#fff; position:absolute; right:20px; top:20px; }
.darkMode_pop > .errorWrap > img { max-width: 150px; opacity: 0.2; }

/* 경고장 팝업영역 설정 */
.cautionPop {display:block;position:fixed;top:0px;left:0px;right:0px;bottom:0px;background:rgba(0,0,0,0.6);z-index:990;will-change: transform, opacity; }
.cautionPop > .popup {position:fixed;top:50%;left:50%;width:90%; padding:0px; height:auto;background:#fff;
	-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	 -webkit-box-shadow:  0px 0px 80px 20px rgba(0,0,0,0.2);-moz-box-shadow: 0px 0px 80px 20px rgba(0,0,0,0.2);box-shadow: 0px 0px 80px 20px rgba(0,0,0,0.2);
	 z-index:999;display:block;}
.cautionPop > .popup.width_600{max-width:600px; max-height: 80%; overflow: hidden; overflow-y: scroll;}
.cautionPop > .popup.width_600::-webkit-scrollbar { display: none; }

.cautionPop > .popup > header { position:relative; display:flex; align-items:center; justify-content:space-between; padding-bottom:0px; background:#eee; padding:0 20px; border-bottom:1px solid #ccc; height:60px;}
.cautionPop > .popup > header h1 { font-size:22px; font-weight:600; color:#333; letter-spacing: -0.5px;}
.cautionPop > .popup > header h1 > span { font-size:16px;margin-left:7px; }
.cautionPop > .popup > header h1.type2{line-height:1; display: flex; flex-direction: column; justify-content: center;}
.cautionPop > .popup > header h1.type2 > span{color:#999; display:block; margin:5px 0px 0px; font-size:13px; padding-left:3px;}
.cautionPop > .popup > header .close {font-size:30px; display:inline-block; width:20px; height:30px; line-height:20px; text-align:center; cursor:pointer; color:#333; }

.cautionPop > .popup > header .nowSt{margin:0px; padding:0px; background:transparent; color:#101010; width: 90%; }
.cautionPop > .popup > header .nowSt > .t{font-size: 20px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; width: 100%; overflow: hidden; }
.cautionPop > .popup > header .nowSt > .t > span{color:#999; font-size: 13px; margin-left: 10px; font-weight: 400;}
.cautionPop > .popup > header .nowSt > .s > span,
.cautionPop > .popup > header .nowSt > .s{color:#101010;}
.cautionPop > .popup > header .nowSt > .s { width: 90%; white-space: nowrap; text-overflow: ellipsis; width: 100%; overflow: hidden; }
.cautionPop > .popup > header .nowSt > .s > span{margin-left: 5px;}

.cautionList > .popup > section > article { padding: 10px 10px 10px; }

.cautionList .cautionListWrap { width: 100%; }
.cautionList .cautionListWrap > .conArea { height: 100%; }
.cautionList .cautionListWrap > .conArea > .topArea { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #999; }
.cautionList .cautionListWrap > .conArea > .topArea > .btn{font-size:12px; padding:10px 15px; background:#404d5e; color:#fff; line-height:1; border-radius:5px; display:flex; align-items:center;}

.cautionList .cautionListWrap > .conArea > .topArea > .btns > span { font-size:13px; color:#999; /* position:absolute; right:0px; bottom:39px; width:89px; */}
.cautionList .cautionListWrap > .conArea > .topArea > .cards { top:-13px;right:15px;font-size:0px;z-index: 10;}
.cautionList .cautionListWrap > .conArea > .topArea > .cards > p { display:inline-block;background: #999;padding:5px 0px 7px;width:40px;text-align: center;color:#fff; text-shadow: 0px 0px 5px rgba(0,0,0,0.3);}
.cautionList .cautionListWrap > .conArea > .topArea > .cards > p > span { font-size:12px;line-height:22px;}
.cautionList .cautionListWrap > .conArea > .topArea > .cards > p > b { display:block;line-height:16px;text-align:center;display:block;font-size:14px;font-weight: 800;}
.cautionList .cautionListWrap > .conArea > .topArea > .cards > p > b::before { content:attr(data-cnt); }
.cautionList .cautionListWrap > .conArea > .topArea > .cards > p.y { background: #ffcb2a;}
.cautionList .cautionListWrap > .conArea > .topArea > .cards > p.r { background: #fa3457;}

.cautionList .cautionListWrap > .conArea > .cautionListArea{overflow-y:auto; height: calc(100% - (55.2px + 66px));}
.cautionList .cautionListWrap > .conArea .cautionList > li{padding:10px 0; border-bottom: 1px solid #ddd;}
.cautionList .cautionListWrap > .conArea .cautionList > li > div{display:flex; justify-content:space-between; align-items:center;}
.cautionList .cautionListWrap > .conArea .cautionList > li + li{ /*border-top:1px solid #ddd;*/ border-bottom: 1px solid #ddd;}
.cautionList .cautionListWrap > .conArea .cautionList > li .dapsub1{display:flex;}
.cautionList .cautionListWrap > .conArea .cautionList > li .cntBox{width:40px; text-align:center; font-size:23px;}
.cautionList .cautionListWrap > .conArea .cautionList > li .txtBox > span{line-height:1.2; display:block;}
.cautionList .cautionListWrap > .conArea .cautionList > li .txtBox > span.t{font-size:15px; font-weight:bold;}
.cautionList .cautionListWrap > .conArea .cautionList > li .txtBox > span.c{color:#999; font-size:13px; margin-top:3px;}
.cautionList .cautionListWrap > .conArea .cautionList > li.end {color: #999; }
.cautionList .cautionListWrap > .conArea .cautionList > li.end > .dap1 > .dapsub1 > .txtBox > .t { text-decoration: line-through; }

.cautionList .cautionListWrap > .conArea .cautionList > li > div > a.btn { font-size: 12px; padding: 10px 15px; line-height: 1.2; font-weight: bold; border-radius: 5px; display: flex; align-items: center; display: inline-block; }
.cautionList .cautionListWrap > .conArea .cautionList > li > div > a.btn.gray_bg { background: #999; color: #fff; }

.cautionList .cautionListWrap > .conArea .cautionList > li > .dap2{margin-top:10px; display:none; position:relative; padding-left:45px;}
.cautionList .cautionListWrap > .conArea .cautionList > li > .dap2::before{content: "\e981"; display:inline-block; font-size:20px; font-family:xeicon; position:absolute; left:20px; top:0;}
.cautionList .cautionListWrap > .conArea .cautionList > li > .dap2 > .inputBox{width:99%; border: 1px solid rgba(0,0,0,0); background: #eee; font-size: 13px; overflow: hidden; border-radius: 5px; padding: 0px; }
.cautionList .cautionListWrap > .conArea .cautionList > li > .dap2 > .inputBox > input{width: 100%; line-height: 38px; height: 38px; padding: 0px 10px; font-size: 13px; background: transparent; letter-spacing: normal; outline: none;}

.cautionList .cautionListWrap > .conArea .cautionList > li > .dap2 > .inputBox.btn{display:flex; align-items:center;}
.cautionList .cautionListWrap > .conArea .cautionList > li > .dap2 > .inputBox.btn > a{margin-right:5px; padding:7px 15px;}
.cautionList .cautionListWrap > .conArea .cautionList > li > .dap2 > .inputBox.btn > a.btn.black_bg { background: #404d5e; color: #fff; }
.cautionList .cautionListWrap > .conArea .cautionList > li > .dap2 > .txtBox{font-size:13px;}
.cautionList .cautionListWrap > .conArea .cautionList > li > .dap2 > .txtBox > span{color:#bbb; font-size:11px; display:block;}
.cautionList .cautionListWrap > .conArea .cautionList > li > .dap2 > .tabRadio { margin:15px 0 5px; align-items: center; }
.cautionList .cautionListWrap > .conArea .cautionList > li > .dap2 > .tabRadio > .radioBox > input + label { color: #fff; background: #bbb; display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; height: auto; margin: 0px; border: none; border-radius: 0px; line-height: 1.5; cursor: pointer; }
.cautionList .cautionListWrap > .conArea .cautionList > li > .dap2 > .tabRadio > .radioBox > input:checked + label { background: #404d5e; }

.cautionList .cautionListWrap .paging_wrap { text-align: center; padding:10px 0 0; }

.cautionList .cautionListWrap .paging_wrap > a { display: inline-block; line-height: 34px; height: 34px; min-width: 30px; font-size: 14px; cursor: pointer; text-align: center; vertical-align: middle; margin: 0px 0px; padding: 0px 5px; background: #fff; border: 1px solid #d1d1d1; color: #48535f; }
.cautionList .cautionListWrap .paging_wrap > a.on { color: #fff; font-weight: 400; background: #404d5e; border: 1px solid rgba(0, 0, 0, 0.1); }


/* newLearning css 2024-08-05 */
section.newLearning_wrap{padding:15px !important; height:100%; box-sizing: border-box; overflow:hidden;}

.newLearning_wrap > .header{display:flex; align-items:center; justify-content:space-between;}
.newLearning_wrap > .header > .myGroupInfo > .name{font-size: 16px; font-weight: 600; display:inline-block;}
.newLearning_wrap > .header > .myGroupInfo > .scheduleStdEnd{font-size:12px; color: #999; margin-top:5px;}
.newLearning_wrap > .header > .myGroupInfo > .schedulePlan{font-size:12px; color: #999; margin-top:3px;}
.newLearning_wrap > .header > .btnGroup{display:flex; align-items:center; gap:10px;}
.newLearning_wrap > .header > .btnGroup .xi{font-size:25px; color:#999;}

.newLearning_wrap > .header > .btnGroup > .alarmBtn { position: relative;  z-index:999;}
.newLearning_wrap > .header > .btnGroup > .alarmBtn > .xi > span { display: none; height: 15px; min-width: 15px; background: #ca312c; color: #fff; padding: 1px; border-radius: 50%; position: absolute; top: -8px; left: 11px; font-size: 11px; font-weight: 600; align-items: center; justify-content: center; }
.newLearning_wrap > .header > .btnGroup > .alarmBtn > .xi > span.on { display: flex; }

.newLearning_wrap > .con{padding-top:15px; height: calc(100% - 54px); box-sizing:border-box; position:relative;}

.newLearning_wrap > .con > .timerWrap > .timer > .status > .obj_pause_watch > b { display: inline-block; vertical-align: bottom; line-height: 70px; height: 70px; font-size: 50px; font-weight: 500; letter-spacing: -2px; }

.timelineWrap {z-index:1;}

.timelineWrap .item {
	display: flex;
	align-items:start;
	gap:10px;
	background: #fff;
	padding: 15px;
	-webkit-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
}

.timelineWrap .item > .iconWrap{flex-shrink: 0; display:flex; flex-direction: column; gap:15px;}
.timelineWrap .item > .iconWrap > .xi{font-size:20px; color:#999;}
.timelineWrap .item > .iconWrap > .xi.hide { display: none; }
.timelineWrap .item > .iconWrap > em {
	line-height: 18px;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	background: #bbb;
	width: 36px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	text-align: center;
	border-radius: 3px;
}

.timelineWrap .item > .iconWrap >  em[data-type='1'] {
	background: #50CCC6;
}

.timelineWrap .item > .iconWrap >  em[data-type='4'] {
	background: #FD747A;
}

.timelineWrap .item > .iconWrap >  em[data-type='7'] {
	background: #00CC66;
}

.timelineWrap .item > .txt{width:calc(100% - 47.6px);}
.timelineWrap .item.now > .txt{width:calc(100% - 87.6px);}
.timelineWrap .item > .txt > h5 {
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	margin-bottom: 5px;
	overflow: hidden;
}

.timelineWrap .item > .txt span {
	font-size: 12px;
	line-height: 20px;
	color:#999;
	display:inline-block;
}

.timelineWrap .item > .txt span > .remainTime {
	color: #00CC66;
	font-weight: bold;
}

.timelineWrap .item > .txt > .flexBox{display:flex; align-items:center; gap:21px;}
.timelineWrap .item > .txt > .flexBox > span + span{position:relative;}
.timelineWrap .item > .txt > .flexBox > span + span::before{
	display: inline-block;
	content:'';
	height: 10px;
	width: 1px;
	background: #999;
	position:absolute; 
	top:50%;
	left: -11px;
	transform:translateY(-50%);
}

.timelineWrap .item > .gradingPopBtn{height:100%; font-size:30px; color:#999; margin:auto 0;}
.timelineWrap .item > .gradingPopBtn.hide { display: none; }

.timelineWrap .item > .bookFeedbackBtn{height:100%; font-size:30px; color:#999; margin:auto 0;}
.timelineWrap .item > .bookFeedbackBtn.hide { display: none; }

.timelineWrap{position:relative;}
.timelineWrap > .toggleBtn{z-index:1;  cursor:pointer; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);}
.timelineWrap > .toggleBtn::after{content: "\e942"; display:flex; align-items:center; justify-content:center; font-family:"xeicon"; font-size:15px; width:40px; height:24px; border-radius:12px; background:#999; color:#fff; }
.timelineWrap.on > .toggleBtn::after{content: "\e945";}


.timelineWrap .item.now{border-bottom:1px solid #ccc; z-index:1; position:relative;}
.timelineWrap.on > ul{display:block;}
.timelineWrap > ul {
	display: none;
	padding: 0px;
	background: #fff;
	height: 350px;
	overflow: hidden;
	overflow-y: auto;
	border-bottom: 1px solid #ccc;
}

.timelineWrap > ul > li > .item{cursor:pointer;}

.timelineWrap > ul > li + li{border-top: 1px solid #ccc;}

.timelineWrap > ul > li.ing {
	background:#EEFD68;
	padding:5px;
}


.newLearning_wrap > .con > .timeBox{background:#d9d9d9; display:flex; justify-content:space-between; align-items:center; padding:15px 20px; position:absolute; bottom:0px; left:50%; transform:translateX(-50%); width:100%; max-width:450px; box-sizing:border-box;}
.newLearning_wrap > .con > .timeBox > div > .tit{ color:#999; font-size:12px; display:block; text-align:center; margin-bottom:5px;}
.newLearning_wrap > .con > .timeBox > div > .time{ color:#111;  font-size:14px; font-weight:600; display:block;  text-align:center;}
.newLearning_wrap > .con > .timeBox > div:nth-of-type(2) > .tit{font-size:15px;}
.newLearning_wrap > .con > .timeBox > div:nth-of-type(2) > .time{font-size:16px;}

.timerWrap > .timer {
	display: inline-block;
	width: 300px;
	height: 300px;
	box-sizing: border-box;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.timerWrap > .timer > .outer_line {
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	border-radius: 50%;
	margin: 0 auto;
	/*
	background: conic-gradient(rgb(38, 234, 250) 0%, rgb(38, 234, 250) 10%, rgb(97, 108, 250) 20%, rgb(97, 108, 250) 30%, rgb(255, 255, 255) 40%, rgb(255, 255, 255) 100%);
	*/
}

.timerWrap > .timer > .outer_line > .circle_box {
	position: absolute;
	top: 4%;
	left: 4%;
	right: 4%;
	bottom: 4%;
	background: #F2F2F2;
	display: block;
	border-radius: 50%;
}

.timerWrap > .timer > .outer_line > .circle_box > .inner_line {
	position: absolute;
	top: 4%;
	left: 4%;
	right: 4%;
	bottom: 4%;
	display: block;
	border-radius: 50%;
}

.timerWrap > .timer > .outer_line > .circle_box > .inner_line > i {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	border-radius: 50%;
}

.timerWrap > .timer > .outer_line > .circle_box > .inner_line > i::before {
	position: absolute;
	width: 4px;
	height: 5%;
	top: 0px;
	left: 50%;
	margin-left: -2px;
	border-radius: 4px;
	content: '';
	background: #fff;
}

.timerWrap > .timer > .outer_line > .circle_box > .inner_line > i.late::before{
	position: absolute;
	width: 4px;
	height: 5%;
	top: 0px;
	left: 50%;
	margin-left: -2px;
	border-radius: 4px;
	content: '';
	background: linear-gradient(to top, orange, orange);
}

.timerWrap > .timer > .outer_line > .circle_box > .inner_line > i.on::before {
	position: absolute;
	width: 4px;
	height: 5%;
	top: 0px;
	left: 50%;
	margin-left: -2px;
	border-radius: 4px;
	content: '';
	background: linear-gradient(to top, rgba(38, 234, 250, 1), rgba(221, 251, 117, 1));
}

.timerWrap > .timer > .outer_line > .circle_box > .inner_line > i.off::before{
	position: absolute;
	width: 4px;
	height: 5%;
	top: 0px;
	left: 50%;
	margin-left: -2px;
	border-radius: 4px;
	content: '';
	background: linear-gradient(to top, #ccc, #e9e9e9);
}

.timerWrap > .timer > .outer_line > .circle_box > .inner_line > i.break::before{
	position: absolute;
	width: 4px;
	height: 5%;
	top: 0px;
	left: 50%;
	margin-left: -2px;
	border-radius: 4px;
	content: '';
	background: linear-gradient(to top, yellow, yellow);
}

.timerWrap > .timer > .status {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -140px;
	margin-top: -80px;
	width: 280px;
	text-align: center;
}

.timerWrap > .timer > .status > span {
	display: block;
	font-size: 22px;
	font-weight: 400;
	color: #fff;
	line-height: 30px;
	height: 30px;
	margin-bottom: 10px;
}

.timerWrap > .timer > .status > p {
	display: block;
	font-size: 0px;
	color: #fff;
}

.timerWrap > .timer > .status > p > b {
	display: inline-block;
	vertical-align: bottom;
	line-height: 70px;
	height: 70px;
	font-size: 45px;
	font-weight: 500;
	letter-spacing: -2px;
}

.timerWrap > .timer > .status > .obj_pause_watch {
	color: #fff;
}

.timerWrap > .timer > .obj_pause_watch > b {
	display: inline-block;
	vertical-align: bottom;
	line-height: 70px;
	height: 70px;
	font-size: 50px;
	font-weight: 500;
	letter-spacing: -2px;
}

.timerWrap > .timer > .status > p > i {
	display: inline-block;
	vertical-align: bottom;
	line-height: 65px;
	height: 70px;
	font-size: 40px;
	font-weight: 400;
	margin: 0px 10px;
}

.timerWrap > .timer > .status > .obj_pause_watch > i {
	display: inline-block;
	vertical-align: bottom;
	line-height: 65px;
	height: 70px;
	font-size: 40px;
	font-weight: 400;
	margin: 0px 10px;
}

.timerWrap > .timer > .status > dl {
	display: none;
	font-size: 0px;
	margin-top: 15px;
}

.timerWrap > .timer > .status > dl > dd {
	display: inline-block;
	width: 80px;
	vertical-align: top;
	text-align: center;
}

.timerWrap > .timer > dl > dd+dd {
	border-left: 1px solid #ccc;
}

.timerWrap > .timer > .status > dl > dd > span {
	display: block;
	font-size: 13px;
	line-height: 17px;
	margin-bottom: 3px;
	color: #999;
}

.timerWrap > .timer > dl > dd > b {
	display: block;
	font-size: 22px;
	line-height: 28px;
	font-weight: 500;
	letter-spacing: -1px;
	color: #382063;
}


.timerWrap > .btnArea{display:flex; align-items:center; justify-content:center; gap:10px; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); margin-top:210px;}
.timerWrap > .btnArea > button{flex-shrink:1;}
.timerWrap > .btnArea > .xi{width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid #999; display:flex; align-items:center; justify-content:center;}
.timerWrap > .btnArea > .xi.xi-log-out{font-size:20px;}
.timerWrap > .btnArea > .xi.xi-plus{font-size:15px;}
.timerWrap > .btnArea > .btnPlay{height:40px; width:130px; background:#fff; border:1px solid #999; color:#999; text-align:center; border-radius:20px;}
.timerWrap > .btnArea > button.hide { display: none; }

.popMenu{display:none; position:absolute; background:#000; padding:10px 15px; border-radius:10px; z-index:2; width:100px;}
.popMenu:after{position:absolute; font-family:"xeicon"; font-size:30px; display:inline-block;}
.popMenu > ul > li > a{color:#fff; font-size:13px; display:block; text-align:center; padding:10px 0;}
.popMenu > ul > li > a.hide { display: none; }

.mylnSetMenuBtn{position:relative; cursor:pointer;}
.mylnSetMenuBtn.on > .popMenu{display:inline-block; top:35px; right:0;}
.mylnSetMenuBtn > .popMenu::after{top:-18px; right:-2px; content: "\e930";}

.learningSetBtn{position:relative;}
.learningSetBtn.on > .popMenu{display:inline-block; bottom:50px; right:-10px;}
.learningSetBtn > .popMenu::after{bottom:-18px; right:14px; content: "\e936";}


.newModalWrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 60;
	background: rgba(0,0,0,0.5);
	display: none;
}

.newModalWrap.on {
	display: inline-block;
}

.newModalWrap > .modalPop{background:#fff; border-top-left-radius:20px; border-top-right-radius:20px; width:100%; height:70%; position:absolute; bottom:0;}

.newModalWrap > .modalPop > .header{display:flex; justify-content:space-between; padding:15px 20px; align-items:start;}
.newModalWrap > .modalPop > .header > .tit{width:calc(100% - 30px);}
.newModalWrap > .modalPop > .header > .tit > .name {
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 5px;
	overflow: hidden;
}

.newModalWrap > .modalPop > .header > .tit span {
	font-size: 12px;
	color:#999;
	display:inline-block;
	margin-bottom: 3px;
}

.newModalWrap > .modalPop > .header > .tit > .flexBox{display:flex; align-items:center; gap:21px;}
.newModalWrap > .modalPop > .header > .tit > .flexBox > span + span{position:relative;}
.newModalWrap > .modalPop > .header > .tit > .flexBox > span + span::before{
	display: inline-block;
	content:'';
	height: 10px;
	width: 1px;
	background: #999;
	position:absolute; 
	top:50%;
	left: -11px;
	transform:translateY(-50%);
}

.newModalWrap > .modalPop > .header > .popCloseBtn{font-size:20px; font-weight:600;}


.newModalWrap > .modalPop .grading {
	height: calc(100% - 86px);
	width: 100%;
}

.newModalWrap > .modalPop .grading > .option {
	padding: 0px 20px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	position: sticky;
	top: 0px;
	width: 100%;
	box-sizing: border-box;
}

.newModalWrap > .modalPop .grading > .option > .chk{display:flex; align-items:center; gap:6px;}
.newModalWrap > .modalPop .grading > .option > .chk > label > input{display:none;}


.newModalWrap > .modalPop .grading > .option > .chk > label {
	padding: 0px 0px;
	color: #999;
	text-align: center;
	line-height: 40px;
	height: 40px;
	overflow: visible;
}

.newModalWrap > .modalPop .grading > .option > .chk > label > input[type=radio] + span {
	display: inline-block;
	line-height: 40px;
	background: transparent;
	color: #bbb;
	font-size:15px;
	padding: 0px 0px;
	margin:0px;
	position: relative;
	border-radius: 5px;
}

.newModalWrap > .modalPop .grading > .option >.chk > label > input[type=radio] + span::before{
	display:none;
}

.newModalWrap > .modalPop .grading > .option >.chk > label > input[type=radio] + span > em {
	position: absolute;
	top: -5px;
	right: -5px;
	background: #999;
	line-height: 18px;
	height: 18px;
	min-width: 14px;
	padding: 0 2px;
	font-size: 10px;
	display: block;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	opacity: 0.6;
}

.newModalWrap > .modalPop .grading > .option > .chk > label > input[type=radio] + span > em::before
{
	content: attr(data-cnt);
}

.newModalWrap > .modalPop .grading > .option > .chk > label > input[type=radio] + span > em[data-cnt="0"]
{
	display: none;
}

.newModalWrap > .modalPop .grading > .option >.chk > .tip_btn {
	height: 40px;
	color: #fff;
	min-width: 20px;
	font-weight: 500;
	position: relative;
	display: inline-block;
}

.newModalWrap > .modalPop .grading > .option >.chk > .tip_btn:before {
	content: '?';
	width: 14px;
	height: 14px;
	background: #999;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align:center;
	color: #fff;
	font-weight: 500;
}

.newModalWrap > .modalPop .grading > .option >.chk > label > input[type=radio][value=all]:checked+span{color: #111 !important;}

.newModalWrap > .modalPop .grading > .option >.chk > label > input[type=radio][value=succ]:checked+span,
.newModalWrap > .modalPop .grading > .option >.chk > label > input[type=radio][value=succ]:checked+span::before
{
	color: #19ce60 !important;
	font-weight: 500;
}

.newModalWrap > .modalPop .grading > .option >.chk > label > input[type=radio][value=fail]:checked+span,
.newModalWrap > .modalPop .grading > .option >.chk > label > input[type=radio][value=fail]:checked+span::before
{
	color: #FD747A !important;
	font-weight: 500;
}

.newModalWrap > .modalPop .grading > .option >.chk > label > input[type=radio][value=ahead]:checked+span,
.newModalWrap > .modalPop .grading > .option >.chk > label > input[type=radio][value=ahead]:checked+span::before
{
	color: #1a73e8 !important;
	font-weight: 500;
}

.newModalWrap > .modalPop .grading > .option >.chk > label > input[type=radio][value=succ]:checked+span>em
{
	background: #19ce60;
}

.newModalWrap > .modalPop .grading > .option >.chk > label > input[type=radio][value=fail]:checked+span>em
{
	background: #FD747A;
}

.newModalWrap > .modalPop .grading > .option >.chk > label > input[type=radio][value=ahead]:checked+span>em
{
	background: #1a73e8;
}

.newModalWrap > .modalPop .grading > .option .btn_right {
	margin-left:auto;
	display:flex; 
	align-items:center;
	height: 40px;
	padding: 0px;
	line-height: 40px;
	gap:6px;
}

.newModalWrap > .modalPop .grading > .option .btn_right > label {
	padding: 0px 0px;
	color: #999;
	text-align: center;
	line-height: 40px;
	height: 40px;
	width: auto;
	min-width: 25px;
	overflow: visible;
}

.newModalWrap > .modalPop .grading > .option .btn_right > label > input[type=radio] + span
{
	display: block;
	line-height: 40px;
	margin-left: 0px;
	background: transparent;
	color: #bbb;
	padding: 0px 0px;
	position: relative;
	border-radius: 5px;
	font-size:15px;
}

.newModalWrap > .modalPop .grading > .option .btn_right > label > input[type=radio] + span::before{display:none;}

.newModalWrap > .modalPop .grading > .option .btn_right > label > input[type=radio]:checked+span
{
	color: #7e00e4 !important;
	font-weight: 500;
	text-decoration: underline;
}

.newModalWrap > .modalPop .grading > .option .btn_right > label > input[type=radio]:checked + span > em
{
	background : #7e00e4 !important;
}

.newModalWrap > .modalPop .grading > .option .btn_right > label > input[type=radio] + span > em
{
	position: absolute;
	top: -5px;
	right: -5px;
	background: #999;
	line-height: 18px;
	height: 18px;
	min-width: 14px;
	padding: 0 2px;
	font-size: 10px;
	display: block;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	opacity: 0.6;
}

.newModalWrap > .modalPop .grading > .option .btn_right > label > input[type=radio] + span > em::before
{
	content: attr(data-cnt);
}

.newModalWrap > .modalPop .grading > .option .btn_right > label > input[type=radio] + span > em[data-cnt="0"]
{
	display: none;
}

.newModalWrap > .modalPop .grading > .option>.grading_detail.type2 {
	overflow-x: auto;
}

.newModalWrap > .modalPop .grading > .option > .grading_detail {
	display: none;
	font-size: 0px;
	padding:10px 0;
}

.newModalWrap > .modalPop .grading > .option > .grading_detail.show {
	display: block;
}

.newModalWrap > .modalPop .grading > .option > .grading_detail > .opt_box {
	display: flex;
	font-size: 0px;
}

.newModalWrap > .modalPop .grading > .option > .grading_detail > .opt_box > label {
	padding: 0px 0px;
	height: 34px;
	color: #999;
	text-align: center;
	line-height: 34px;
	width: calc(100%/ 4);
}

.newModalWrap > .modalPop .grading > .option > .grading_detail.type2 > .opt_box > label {
	min-width: 100px;
}

.newModalWrap > .modalPop .grading > .option > .grading_detail > .opt_box > label+label {
	margin-left: 5px;
}

.newModalWrap > .modalPop .grading > .option > .grading_detail > .opt_box > label > input[type=radio]+span
	{
	display: block;
	line-height: 34px;
	font-size: 13px;
	margin-left: 0px;
	background: #eee;;
	color: #bbb;
	padding: 0px 0px;
	position: relative;
	border-radius: 5px;
}

.newModalWrap > .modalPop .grading > .option>.grading_detail>.opt_box>label>input[type=radio]+span::after
	{
	width: 100%;
	height: 34px;
	line-height: 34px;
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	font-size: 26px;
	border-radius: 5px;
	content: '';
}

.newModalWrap > .modalPop .grading > .option>.grading_detail>.opt_box>label>input[type=radio]+span::before
	{
	display: none !important;
}

.newModalWrap > .modalPop .grading > .option>.grading_detail>.opt_box>label>input[type=radio]:checked+span
	{
	background: #666;
	color: #fff;
	font-weight: 500;
}

.newModalWrap > .modalPop .grading > .option>dl>dd {
	display: inline-block;
	width: 23%;
	margin-top: 10px;
	margin-left: 2%;
}

.newModalWrap > .modalPop .grading > .option>dl>dd>a {
	margin: 0px;
	display: block;
	line-height: 40px;
	text-align: center;
	background: #eee;
}

.newModalWrap > .modalPop .grading > .question {
	padding: 20px;
	position: relative;
	height:calc(100% - 41.6px);
	overflow-Y:auto;
	box-sizing: border-box;
}

.newModalWrap > .modalPop .grading > .question.detail {
	padding-top: 130px;
}

.newModalWrap > .modalPop .grading > .question>p {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 5px;
	color: #999;
}

.newModalWrap > .modalPop .grading > .question>ul {
	display: block;
	font-size: 0px;
}

.newModalWrap > .modalPop .grading > .question>ul+p {
	margin-top: 15px;
}

.newModalWrap > .modalPop .grading > .question>ul>li {
	display: inline-block;
	width: calc((100% / 5) - 2px);
	margin-left: 2px;
	margin-top: 2px;
	vertical-align: bottom;
}

.newModalWrap > .modalPop .grading > .question>ul>li>a {
	display: block;
	background: #eee;
	padding: 7px;
	position: relative;
	box-sizing: border-box;
	border: 2px solid #eee;
	overflow: hidden;
}

.newModalWrap > .modalPop .grading > .question>ul>li>a::before {
	position: absolute;
	bottom: 7px;
	right: 7px;
	font-family: 'xeicon' !important;
	width: 15px;
	height: 15px;
	line-height: 15px;
	display: block;
	content: "";
	font-size: 15px;
	text-align: center;
}

.newModalWrap > .modalPop .grading > .question>ul>li.start>a::after {
	position: absolute;
	top: -14px;
	left: -14px;
	width: 40px;
	height: 20px;
	display: block;
	content: "";
	font-size: 15px;
	text-align: center;
	background: transparent;
	z-index: 1;
	transform: rotate(150deg);
}

.newModalWrap > .modalPop .grading > .question>ul>li.end>a::after {
	position: absolute;
	bottom: -14px;
	right: -14px;
	width: 40px;
	height: 20px;
	display: block;
	content: "";
	font-size: 15px;
	text-align: center;
	background: transparent;
	z-index: 1;
	transform: rotate(150deg);
}

.newModalWrap > .modalPop .grading > .question>ul>li>a>span {
	font-size: 11px;
	display: block;
	line-height: 15px;
	height: 15px;
	letter-spacing: -0.5px;
	font-weight: 300;
	z-index: 2;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
}

.newModalWrap > .modalPop .grading > .question>ul>li>a>b {
	font-size: 13px;
	display: block;
	line-height: 15px;
	height: 15px;
	margin-top: 5px;
	color: #666 !important;
	font-weight: 400;
	letter-spacing: -0.5px;
	z-index: 2;
	position: relative;
}

.newModalWrap > .modalPop .grading > .question>ul>li>a>em {
	font-size: 12px;
	display: block;
	line-height: 15px;
	height: 15px;
	color: #111 !important;
	font-weight: 400;
	letter-spacing: -0.5px;
	z-index: 2;
	position: absolute;
	top: 7px;
	right: 7px;
}

.newModalWrap > .modalPop .grading > .question>ul>li>a[data-result] {
	border: 2px solid #ddd;
}

.newModalWrap > .modalPop .grading > .question>ul>li>a[data-result].todoIng {
	border: 2px solid #000;
}

.newModalWrap > .modalPop .grading > .question>ul>li>a[data-result=default] {
	border: 2px solid #ddd;
}

.newModalWrap > .modalPop .grading > .question>ul>li>a[data-result=succ] {
	background: #fff;
	color: #19ce60;
	border: 2px solid #19ce60 !important;
}

.newModalWrap > .modalPop .grading > .question>ul>li>a[data-result=succ]::before {
	content: '\e9c6';
}

.newModalWrap > .modalPop .grading > .question>ul>li>a.succ::after {
	background: #19ce60;
}

.newModalWrap > .modalPop .grading > .question>ul>li>a[data-result=fail] {
	background: #fff;
	color: #FD747A;
	border: 2px solid #FD747A !important;
}

.newModalWrap > .modalPop .grading > .question>ul>li>a[data-result=fail]::before {
	content: '\e921';
}

.newModalWrap > .modalPop .grading > .question>ul>li>a.fail::after {
	background: #FD747A;
}

.newModalWrap > .modalPop .grading > .question>ul>li>a[data-result=ahead] {
	background: #fff;
	color: #1a73e8;
	border: 2px solid #1a73e8 !important;
}

.newModalWrap > .modalPop .grading > .question>ul>li>a[data-result=ahead]::before {
	content: '\e920';
}

.newModalWrap > .modalPop .grading > .question>ul>li>a.ahead::after {
	background: #1a73e8;
}

.newModalWrap > .modalPop .grading > .question>ul>li>a[data-reason='8'] {
	background: #ddd !important;
	color: #999;
}

.newModalWrap > .modalPop .grading > .question>ul>li>a[data-init='except'] {
	background: #ddd !important;
	color: #999;
	border: 2px solid #999;
}

.newModalWrap > .modalPop .grading > .question>ul>li>a.except::after {
	background: #999;
}

.newModalWrap > .modalPop .grading > .question>ul>li>a[data-init='giveup'] {
	background: #ddd !important;
	color: #999;
	border: 2px solid #999;
} /*복습포기*/
.newModalWrap > .modalPop .grading > .question>ul>li>a.giveup::after {
	background: #999;
}

.newModalWrap > .modalPop .grading > .question>ul>li>a.order::after {
	content: '\ea7f';
	transform: rotate(30deg);
}

.wrapper.playing .outer_line {
	display: block !important;
}

.wrapper.playing .status>span {
	color: #999 !important;
}

.wrapper.playing .status>p {
	color: #382063 !important;
}

.wrapper.playing .status>dl {
	display: block !important;
}
/*
.wrapper.playing .study_btns>button {
	color: #999 !important;
}
*/
.wrapper.playing .study_btns>button.btn_play[data-role='pause'] {
	color: #999 !important;
}

.wrapper.playing .group_tit>h3 {
	color: #666 !important;
}

.wrapper.playing .group_tit>p {
	color: #999 !important;
}

.wrapper.pause .outer_line {
	display: none !important;
}

.wrapper.pause .status>span {
	color: #fff;
}

.wrapper.pause .status>p {
	color: #fff;
}

.wrapper.pause .status>dl {
	display: block;
}

.wrapper.pause .status>dl>dd>span {
	color: #fff;
}

.wrapper.pause .status>dl>dd>b {
	color: #fff;
}

.wrapper.pause .status>dl>dd+dd {
	border-left: 1px solid #fff;
}

.wrapper.pause .study_btns>button {
	color: #fff;
}

.wrapper.pause .study_btns>button[data-role='stop'] {
	display: none;
}

.wrapper.pause .study_btns>button[data-role='finish'] {
	display: block;
}

.wrapper.pause .study_btns>button[data-role='setting'] {
	display: block;
}

.wrapper.pause .study_btns>button[data-role='grading'].show {
	display: none;
}

.wrapper.pause .group_tit {
	display: none;
}


.wrapper.playing.break .outer_line {
	display: none !important;
}

.wrapper.playing.break .status>span {
	color: #fff;
}

.wrapper.playing.break .status>p {
	color: #fff;
}

.wrapper.playing.break .status>dl {
	display: block;
}

.wrapper.playing.break .status>dl>dd>span {
	color: #fff;
}

.wrapper.playing.break .status>dl>dd>b {
	color: #fff;
}

.wrapper.playing.break .status>dl>dd+dd {
	border-left: 1px solid #fff;
}

.wrapper.playing.break .study_btns>button {
	color: #fff;
}

.wrapper.playing.break .study_btns>button[data-role='stop'] {
	display: none;
}

.wrapper.playing.break .study_btns>button[data-role='finish'] {
	display: block;
}

.wrapper.playing.break .study_btns>button[data-role='setting'] {
	display: block;
}

.wrapper.playing.break .study_btns>button[data-role='grading'].show {
	display: none;
}

.wrapper.playing.break .group_tit {
	display: none;
}

/*
* New TimeTable형 학습화면
* 작성일 : 2024-08-13
* 작성자 : 이건주
*/

/* timeToDoList */
.timeTable2{height:100%; padding-top:0px !important;}
.timeTable2 > .header{background: #50CCC6; padding:25px 15px; text-align:center;}
.timeTable2 > .header > .date{font-size:15px; color:#111; font-weight:600;}
.timeTable2 > .header > .planDate{font-size:13px; color:#111; margin-top:3px;}
.timeTable2 > .header > .time{font-size:40px; margin:20px 0; font-weight:600;}
.timeTable2 > .header > .textBookName{font-size:18px; color:#111; font-weight:600;}
.timeTable2 > .header > .textBookPlan{font-size:15px; color:#111; margin-top:3px;}
.timeTable2 > .header > .btnArea{display:flex; align-items:center; background:#333; width:240px; margin:20px auto 0;}
.timeTable2 > .header > .btnArea > button{color:#fff; font-size:15px; width:50%; padding:10px 0; text-align:center; position:relative;}
.timeTable2 > .header > .btnArea > button + button::before{content:''; display:inline-block; width:1px; background:#fff; height:10px; position:absolute; left:0; top:50%; transform:translateY(-50%);}

.timeTable2 > .con{height:calc(100% - 252px - 80px); display:flex;}
.timeTable2 > .con > .totalProgress{width:100px; box-sizing:border-box; border-right:1px solid #ccc; padding:15px;}
.timeTable2 > .con > .totalProgress > .circlePg + .circlePg{margin-top:20px;} 
.timeTable2 > .con > .totalProgress > .circlePg > .circle{width:70px; height:70px; border-radius:50%; border:1px solid #ccc; position:relative; background:#fff;}
.timeTable2 > .con > .totalProgress > .circlePg > .circle > .innerCircle{border:1px solid #ccc; width:80%; height:80%; border-radius:50%; background:#F2F2F2; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:flex; align-items:center; justify-content:center; flex-direction:column;}
.timeTable2 > .con > .totalProgress > .circlePg > .circle > .innerCircle > .tit{font-size:12px; color:#999; margin-bottom:3px;}
.timeTable2 > .con > .totalProgress > .circlePg > .circle > .innerCircle > .text::after{content:attr(data-text)'%'; font-size:15px;}

.timeTable2 > .con > .totalProgress > .timebox{width:100%; background:#333; margin-top:30px; padding:10px 0;}
.timeTable2 > .con > .totalProgress > .timebox > .item{color:#fff; text-align:center;}
.timeTable2 > .con > .totalProgress > .timebox > .item + .item{margin-top:10px;}
.timeTable2 > .con > .totalProgress > .timebox > .item > .tit{font-size:12px; margin-bottom:3px; display:block;}
.timeTable2 > .con > .totalProgress > .timebox > .item > .time{font-size:14px; display:block;}


.timeTable2 > .con > .textBookList{width:calc(100% - 100px); padding:15px; box-sizing:border-box; overflow-Y:auto;}
.timeTable2 > .con > .textBookList > .textBook + .textBook{margin-top:15px;} 
.timeTable2 > .con > .textBookList > .textBook{display:flex; gap:15px; align-items:center; cursor:pointer;}
.timeTable2 > .con > .textBookList > .textBook > .colorCircle{width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.timeTable2 > .con > .textBookList > .textBook.pick > .colorCircle::After{content: "\e928"; display:inline-block; font-family:"xeicon"; color:#fff; font-size:20px; font-weight:600;}
.timeTable2 > .con > .textBookList > .textBook > .txt{width:calc(100% - 55px);}
.timeTable2 > .con > .textBookList > .textBook > .txt > .t{display:block; font-size:15px; font-weight:600;}
.timeTable2 > .con > .textBookList > .textBook > .txt > .c{display:block; font-size:13px; margin-top:3px; color:#999;}

.timeTable2 > .foot{box-sizing:border-box; padding:15px; height:80px; background:#fff; box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1); display:flex; align-items:center; justify-content:end; gap:10px;}
.timeTable2 > .foot > button{width:50px; height:50px; border-radius:50%;}
.timeTable2 > .foot > button.logOutBtn{background:#999; font-size:25px; color:#fff; margin-right:auto;}
.timeTable2 > .foot > button.playBtn{background:#50CCC6; font-size:25px; color:#fff;}
.timeTable2 > .foot > button.playBtn[data-type="play"]::After{font-family:xeicon; display:inline-block; content: "\ea3e";}
.timeTable2 > .foot > button.playBtn[data-type="pause"]::After{font-family:xeicon; display:inline-block; content: "\ea3b";}
.timeTable2 > .foot > button.planAddBtn{background:#999; font-size:25px; color:#fff; position:relative;}
.timeTable2 > .foot > button.planAddBtn > .popMenu::after{bottom:-18px; right:20px; content: "\e936"; color:#000;}
.timeTable2 > .foot > button.planAddBtn.on > .popMenu{display:inline-block; bottom:60px; right:-10px;}


.timeTable{height:100%; padding-top:0px !important;}
.timeTable > .header{background: #50CCC6; padding:20px 15px 0px; text-align:center; position:sticky; top:0; z-index:1;}
.timeTable > .header > .date{font-size:15px; color:#111; font-weight:600;}
.timeTable > .header > .planDate{font-size:13px; color:#111; margin-top:3px;}

.timeTable > .header > .headWrap { display: flex; align-items: center; justify-content: space-between; text-align: left; }
.timeTable > .header > .headWrap > .myGroupInfo > .name { display: inline-block; font-size: 16px; font-weight: 600; }
.timeTable > .header > .headWrap > .myGroupInfo > .planDate { font-size:13px; color:#111; }
.timeTable > .header > .headWrap > .myGroupInfo > .schedulePlan { font-size:13px; color:#111; }

.timeTable > .header > .headWrap > .btnGroup { display: flex; align-items: center; gap: 10px; }
.timeTable > .header > .headWrap > .btnGroup .xi { font-size: 25px; }

.timeTable > .header > .headWrap > .btnGroup > .alarmBtn { position: relative; }
.timeTable > .header > .headWrap > .btnGroup > .alarmBtn > .xi > span { display: none; height: 15px; min-width: 15px; background: #ca312c; color: #fff; padding: 1px; border-radius: 50%; position: absolute; top: -8px; left: 11px; font-size: 11px; font-weight: 600; align-items: center; justify-content: center; }
.timeTable > .header > .headWrap > .btnGroup > .alarmBtn > .xi > span.on { display: flex; }

.timeTable > .header > .controllWrap{display:flex; align-items:center; gap:10px; margin:15px 0 10px;}
.timeTable > .header > .controllWrap > .rate {display:inline-block; position: relative; width:calc(100% - 100px);}
.timeTable > .header > .controllWrap > .rate > p {line-height:18px; padding:1px 0px; font-size:12px; display:block; padding-right:0px; position: relative;}
.timeTable > .header > .controllWrap > .rate > p > span { position: absolute;line-height:18px;height:18px;top:1px;right:0px;color:rgba(0,0,0,0.4);font-size:10px;z-index:10;padding-right:5px;font-weight: 800;}
.timeTable > .header > .controllWrap > .rate > p > em { background: #eee;border: 3px solid #eee;display:block;height:12px;line-height:12px;position: relative;overflow: hidden;}
.timeTable > .header > .controllWrap > .rate > p > em > i { display:block;position: absolute;top:0px;left:0px;bottom:0px;background: rgba(145,232,225,1);height:12px;vertical-align: bottom;z-index: 1;}
.timeTable > .header > .controllWrap > .rate > p > em > b { position: relative;z-index: 2;font-weight: 800;color:rgba(0,0,0,0.6);font-size:11px;line-height:12px;padding-left:2px;}
.timeTable > .header > .controllWrap > .rate > p.progress > em > i { background: rgba(145,232,225,1); }
.timeTable > .header > .controllWrap > .rate > p.achievement > em > i { background: rgba(228,211,84,1); }

.timeTable > .header > .controllWrap > button{width:40px; height:40px; border-radius:50%;}
.timeTable > .header > .controllWrap > button.pauseBtn{background:#333; font-size:25px; color:#fff;}
.timeTable > .header > .controllWrap > button.pauseBtn::After{font-family:xeicon; display:inline-block; content: "\ea3b";}
.timeTable > .header > .controllWrap > button.planAddBtn{background:#333; font-size:25px; color:#fff; position:relative;}
.timeTable > .header > .controllWrap > button.planAddBtn > .popMenu::after{top:-18px; right:15px; content: "\e930"; color:#000;}
.timeTable > .header > .controllWrap > button.planAddBtn.on > .popMenu{display:inline-block; top:50px; right:-10px;}

.timeTable > .header > .timeBox{margin:0 -20px; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; background:#333;}
.timeTable > .header > .timeBox > .item{text-align:center;}
.timeTable > .header > .timeBox > .item > .tit{font-size:12px; color:#ccc; margin-bottom:5px; display:block;}
.timeTable > .header > .timeBox > .item > .time{font-size:15px; color:#fff; display:block;}
.timeTable > .header > button.logOutBtn{background:#333; font-size:13px; color:#fff; padding:10px 15px; position:absolute; top:20px; right:15px;}

.timeTable > .con{min-height:calc(100% - 173px); display:flex; padding:10px 0; box-sizing:border-box;}
.timeTable > .con > div{box-sizing:border-box;}

.timeTable > .con > .textBookList{width:calc(100% - 120px); padding:15px; box-sizing:border-box; border-right:1px solid #333;}
.timeTable > .con > .textBookList > .textBook + .textBook{margin-top:15px;} 
.timeTable > .con > .textBookList > .textBook{display:flex; gap:10px; align-items:start; cursor:pointer;}
.timeTable > .con > .textBookList > .textBook.tmp { cursor: default; }
.timeTable > .con > .textBookList > .textBook > .colorCircle{width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.timeTable > .con > .textBookList > .textBook > .colorCircle.pick::After{content: "\e928"; display:inline-block; font-family:"xeicon"; color:#fff; font-size:20px; font-weight:600;}

.timeTable > .con > .textBookList > .textBook > .rightArea{width:calc(100% - 50px); padding-top:5px;}
.timeTable > .con > .textBookList > .textBook > .rightArea > .txt{position:relative; padding-right:15px;}
.timeTable > .con > .textBookList > .textBook > .rightArea > .txt > .t{display:block; font-size:15px; font-weight:600;}
.timeTable > .con > .textBookList > .textBook > .rightArea > .txt > .c{display:block; font-size:12px; margin-top:3px; color:#999;}
.timeTable > .con > .textBookList > .textBook > .rightArea > .txt > .toggleIcon::after{content: "\e936"; color:#999; font-family:"xeicon"; position:absolute; right:0px; bottom:-4px; font-size:20px;}
.timeTable > .con > .textBookList > .textBook > .rightArea.on > .txt > .toggleIcon::after{content: "\e930"; color:#111;}

.timeTable > .con > .textBookList > .textBook > .rightArea.on > .btnArea{display:flex;}
.timeTable > .con > .textBookList > .textBook > .rightArea > .btnArea{display:none; align-items:center; background:#333; width:100%; margin-top:10px;}
.timeTable > .con > .textBookList > .textBook > .rightArea > .btnArea > button{color:#fff; font-size:12px; width:100%; padding:10px 0; text-align:center; position:relative;}
.timeTable > .con > .textBookList > .textBook > .rightArea > .btnArea > button + button::before{content:''; display:inline-block; width:1px; background:#fff; height:10px; position:absolute; left:0; top:50%; transform:translateY(-50%);}


.timeTable > .con > .timePlanList{width:120px; padding:15px;}
.timeTable > .con > .timePlanList > .item + .item{margin-top:10px;}
.timeTable > .con > .timePlanList > .item{position:relative; background:#fff; border:3px solid #fff; height:30px; display:flex; align-items:center;}
.timeTable > .con > .timePlanList > .item > .text{position:absolute; top:50%; left:5px; font-size:12px; transform:translateY(-50%);}
.timeTable > .con > .timePlanList > .item > i{display:inline-block; height:100%;}
.timeTable > .con > .timePlanList > .item > i.rate{background:orange;}
.timeTable > .con > .timePlanList > .item > i.play{background:#50CCC6}
.timeTable > .con > .timePlanList > .item > i.break{background:yellow;}
.timeTable > .con > .timePlanList > .item > i.off{background:#ccc;}

.timeTable > .pauseView.on{display:block;}
.timeTable > .pauseView{display:none; position:fixed; top:0px; left:0px; right:0px; bottom:0px; background: linear-gradient(#EEFD68, #FD747A); z-index:2;}
.timeTable > .pauseView::before {
	display: block;
	position: absolute;
	top: 130px;
	background: #FD747A;
	left: 50%;
	font-size: 20px;
	line-height: 40px;
	color: #fff;
	display: inline-block;
	padding: 0px 15px;
	border-radius: 5px;
	transform: translateX(-50%);
}

.timeTable > .pauseView.pause::before { content: '일시정지 중'; }
.timeTable > .pauseView.break::before { content: '쉬는시간'; }

.timeTable > .pauseView > .timer{
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%, -100%);
}

.timeTable > .pauseView > .timer > .status {
	width: 280px;
	text-align: center;
}
.timeTable > .pauseView > .timer > .status > .obj_pause_watch {
	color: #fff;
}

.timeTable > .pauseView > .timer > .status > .obj_pause_watch > b {
	display: inline-block;
	vertical-align: bottom;
	line-height: 70px;
	height: 70px;
	font-size: 50px;
	font-weight: 500;
	letter-spacing: -2px;
}

.timeTable > .pauseView > .timer > .status > .obj_pause_watch > i {
	display: inline-block;
	vertical-align: bottom;
	line-height: 65px;
	height: 70px;
	font-size: 40px;
	font-weight: 400;
	margin: 0px 10px;
}

.timeTable > .pauseView > .timer > .status > dl {
	display: none;
	font-size: 0px;
	margin-top: 15px;
}

.timeTable > .pauseView > .timer > .status > dl > dd {
	display: inline-block;
	width: 80px;
	vertical-align: top;
	text-align: center;
}

.timeTable > .pauseView > .timer > .status > dl > dd + dd {
	border-left: 1px solid #fff;
}

.timeTable > .pauseView > .timer > .status > dl > dd > span {
	display: block;
	font-size: 13px;
	line-height: 17px;
	margin-bottom: 3px;
	color: #fff;
}

.timeTable > .pauseView > .timer > .status > dl > dd > b {
	display: block;
	font-size: 22px;
	line-height: 28px;
	font-weight: 500;
	letter-spacing: -1px;
	color: #fff;
}

.timeTable > .pauseView > .btnArea{position:absolute; bottom:20px; display:flex; flex-direction: column; align-items:center; width:100%;}
.timeTable > .pauseView > .btnArea > button.playBtn::After{font-family:xeicon; display:inline-block; content: "\ea3e"; font-size:45px; color:#fff;}
.timeTable > .pauseView > .btnArea > button.logOutBtn{width: 160px; height: 50px; font-size: 15px; color: #fff; border: 2px solid #fff; border-radius: 30px; margin-top: 30px;}




.newModalWrap.newGradingPop > .modalPop{height:auto;}
.newModalWrap.newGradingPop > .modalPop > .newGrading{padding:15px 20px;}
.newModalWrap.newGradingPop > .modalPop > .newGrading > .sliderWrap{position:relative;}
.newModalWrap.newGradingPop > .modalPop > .newGrading > .sliderWrap > .text{width:100%; margin-top:15px; display:flex; align-items:center; justify-content:space-between; font-size:13px;}
.newModalWrap.newGradingPop > .modalPop > .newGrading > .sliderWrap > .slider{-webkit-appearance: none; width:100%; height:10px; background:#999; border-radius:5px;}
.newModalWrap.newGradingPop > .modalPop > .newGrading > .sliderWrap > .slider::-webkit-slider-thumb {-webkit-appearance: none; width:35px; height:35px; border-radius:50%; background:transparent; cursor:pointer; z-index:2; position:relative;}
.newModalWrap.newGradingPop > .modalPop > .newGrading > .sliderWrap > .now{position:absolute; top:-12px; display:flex; align-items:center; justify-content:center;  left:0; color:#fff; font-size:12px; width:35px; height:35px; border-radius:50%; background:#ff6633;}

.dailyPlanPopWrap > footer{position:absolute; left:0; bottom:0; right:0;}
.dailyPlanPopWrap .flexBox{display:flex; margin-top:30px; gap:10px;}
.dailyPlanPopWrap .flexBox > div:first-child{width:calc(100% - 110px);}
.dailyPlanPopWrap .flexBox > div:last-child{width:100px;}
.dailyPlanPopWrap .flexBox .select{width:100% !important;}
.dailyPlanPopWrap .flexBox .select > select{padding:0px 20px 0px 0px;}
.dailyPlanPopWrap .flexBox .select:after { font-family:FontAwesome; content:"\f107"; vertical-align: middle; position:absolute; top:0px; right:5px; display:block; color:#999; font-size:15px; height:40px; line-height:40px; z-index:1;}
.colorPicker{width:100px;}
.colorPicker > input{width:100%; height:40px;}

.dailyOutPlanPop .field_trans.tit { border-bottom: none; }
.dailyOutPlanPop .field_trans.tit.txt_box { border-bottom: 1px solid #ccc; margin-top: 5px; }
.dailyOutPlanPop .checkedArea { display: flex; flex-wrap: wrap; gap: 5px 10px; }
.dailyEtcPlanPop > footer { display: flex; align-items: center; justify-content: flex-end; }
.dailyEtcPlanPop > footer a { padding: 0px 0px; }
.dailyEtcPlanPop > footer a.btn_pop_close_r { width: 80px; margin-right: auto; }
.dailyEtcPlanPop > footer a.btn_add_etc { width: 80px; background: #50CCC6; }
.dailyEtcPlanPop > footer a.btn_play_etc { width: 100px; background: #19ce60; }

.dailySleepPlanPop .set_box.dir { padding-top: 0px; }

/* guied_pop */
.guied_pop.view{display:flex;}
.guied_pop.none{display:none !important;}
.guied_pop{display:none; position:fixed; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.5); z-index:10; align-items:center; justify-content:center;}
.guied_pop > .con{width:90%; max-width:700px; max-height:90%; overflow-y:auto;}
.guied_pop > .con > .imgArea{width:100%; border-radius:15px; overflow:hidden; font-size:0px;}
.guied_pop > .con > .imgArea > img{width:100%; object-fit:cover;}
.guied_pop > .con > .btnArea{margin-top:10px; display:flex; align-items:center; justify-content:end; gap:20px;}
.guied_pop > .con > .btnArea > .guiedClose{font-size:20px; color:#fff;}
.guied_pop > .con > .btnArea > .checkbox > input{display:none;}
.guied_pop > .con > .btnArea > .checkbox > label{padding:0px; display:flex; align-items:center; gap:7px; font-size:13px; color:#fff;}
.guied_pop > .con > .btnArea > .checkbox > label > span{border:1px solid #fff; display:flex; align-items:center; justify-content:center; width:15px; height:15px;}
.guied_pop > .con > .btnArea > .checkbox > input:checked + label > span:after{content: "\e928"; display:inline-block; font-family:xeicon; font-size:13px; width:13px; color:#fff;} 

@media (max-width: 431px) {
  .guied_pop{display:none !important;}
}


/* 공지사항 팝업 */
.notice-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999; display: none; }
.notice-overlay.view { display: flex; }
.notice-overlay.none{display:none !important;}

.notice_modal{position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 1000; display: none; justify-content: center; align-items: center;}
.notice_modal.view{display: flex;}
.notice_modal.none{display:none !important;}
.notice_modal > .con{background: #fff; max-width: 90%; border-radius: 5px; width: 500px; overflow:hidden; max-height:600px; /* height:90%; */ position:relative; border: 1px solid #333;}
.notice_modal > .con > .head{padding: 15px; border-bottom: 1px solid #ccc; font-size: 18px; white-space: nowrap; text-overflow: ellipsis; width: 94%; overflow: hidden;}
.notice_modal > .con > .head > span{font-size:13px; display:block; margin-top:5px; color:#bbb;}
.notice_modal > .con > .body{width:100%; padding:15px; max-height: 450px; /* height:calc(100% - 66.8px - 63px); */ overflow-Y:auto; box-sizing:border-box;}
.notice_modal > .con > .body > img{width:100%; object-fit:cover; box-sizing:border-box; margin-top: 15px;}
.notice_modal > .con > .btnArea{display:flex; align-items:center; justify-content:end; gap:20px; background:#ddd; padding:15px;}
.notice_modal > .con > .btnArea > .noticePopCloseBtn{text-align: center;padding: 10px 20px; border-radius: 5px; font-size: 13px; font-weight: 500; display: inline-block; background:#777; color:#fff;}
.notice_modal > .con > .btnArea > .checkbox > input{display:none;}
.notice_modal > .con > .btnArea > .checkbox > label{padding:0px; display:flex; align-items:center; gap:7px; font-size:13px; color:#111;}
.notice_modal > .con > .btnArea > .checkbox > label > span{border:1px solid #111; display:flex; align-items:center; justify-content:center; width:15px; height:15px;}
.notice_modal > .con > .btnArea > .checkbox > input:checked + label > span:after{content: "\e928"; display:inline-block; font-family:xeicon; font-size:13px; width:13px;} 


/* 디바이스 인증 */
.wrapper.login > section > .deviceNum { display: none; }
.wrapper.login > section > .deviceNum.view { display:block; left:30px; width: 50px; height: 50px; line-height: 50px; border-radius: 30px; border: 1px solid #41719C; background: #5B9BD5; text-align: center; font-size: 20px; color: #fff; }

.wrapper.login > section > .deviceAuthWrap { position: relative; }
.wrapper.login > section > .deviceAuthWrap > .deviceAuthModal { display: none; }
.wrapper.login > section > .deviceAuthWrap > .deviceAuthModal.view { position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; background: rgba(0, 0, 0, 0.6); }
.wrapper.login > section > .deviceAuthWrap > .deviceAuthModal.view > div { max-width: 80%; width: 500px; padding: 20px; border-radius: 5px; background: #fff; }
.wrapper.login > section > .deviceAuthWrap > .deviceAuthModal.view > div > .head { display: flex; }
.wrapper.login > section > .deviceAuthWrap > .deviceAuthModal.view > div > .head > h3 { font-size: 20px; font-weight: 600; }
.wrapper.login > section > .deviceAuthWrap > .deviceAuthModal.view > div > .body > input { margin: 15px 0px; padding-left: 5px; width: 100%; height: 45px; line-height: 45px; border-radius: 5px; background: #eee; text-transform: uppercase; }
.wrapper.login > section > .deviceAuthWrap > .deviceAuthModal.view > div > .body > button { display: block; width: 100%; height: 50px; line-height: 50px; border-radius: 5px; background: #50CCC6; font-size: 16px; font-weight: 500; text-align: center; color: #fff; }

.wrapper.login > section > .aiTestWrap { position: relative; }
.wrapper.login > section > .aiTestWrap > .aiTestWrapModal { display: none; }
.wrapper.login > section > .aiTestWrap > .aiTestWrapModal.view { position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; background: rgba(0, 0, 0, 0.6); }
.wrapper.login > section > .aiTestWrap > .aiTestWrapModal.view > div { max-width: 80%; width: 500px; padding: 40px 20px; border-radius: 5px; background: #fff; }
.wrapper.login > section > .aiTestWrap > .aiTestWrapModal.view > div > .head { display: flex; justify-content: center; }
.wrapper.login > section > .aiTestWrap > .aiTestWrapModal.view > div > .head > h3 { font-size: 18px; font-weight: 500; }
.wrapper.login > section > .aiTestWrap > .aiTestWrapModal.view > div > .body > .countDown { display: flex; justify-content: center; padding: 20px 0px; font-size: 55px; font-weight: 600; color: #ED7D31; }

.wrapper.login > section > .aiConfirmWrap { position: relative; }
.wrapper.login > section > .aiConfirmWrap > .aiConfirmWrapModal { display: none; }
.wrapper.login > section > .aiConfirmWrap > .aiConfirmWrapModal.view { position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; background: rgba(0, 0, 0, 0.6); }
.wrapper.login > section > .aiConfirmWrap > .aiConfirmWrapModal.view > div { max-width: 80%; width: 500px; padding: 40px 20px 20px; border-radius: 5px; background: #fff; }
.wrapper.login > section > .aiConfirmWrap > .aiConfirmWrapModal.view > div > .head { display: flex; justify-content: center; }
.wrapper.login > section > .aiConfirmWrap > .aiConfirmWrapModal.view > div > .head > h3 { font-size: 20px; font-weight: 500; }
.wrapper.login > section > .aiConfirmWrap > .aiConfirmWrapModal.view > div > .body { margin-top: 30px; }
.wrapper.login > section > .aiConfirmWrap > .aiConfirmWrapModal.view > div > .body > .btnWrap { display: flex; gap: 10px; width: 100%; height: 45px; line-height: 45px; }
.wrapper.login > section > .aiConfirmWrap > .aiConfirmWrapModal.view > div > .body > .btnWrap > .aiNBtn { width: 100%; border-radius: 5px; background: #00090d; text-align: center; font-size: 16px; font-weight: 500; color: #fff; }
.wrapper.login > section > .aiConfirmWrap > .aiConfirmWrapModal.view > div > .body > .btnWrap > .aiYBtn { width: 100%; border-radius: 5px; background: #50CCC6; text-align: center; font-size: 16px; font-weight: 500; color: #fff; }

/* 케어톡 */
.complaintPopWrap.popup > header { gap: 10px; }
.complaintPopWrap.popup > header > .noThumImg { display: inline-block; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; border: 1px solid #bbb; background-size: cover; background-repeat: no-repeat; }
.popup > section .complaintType { display: flex; align-items: center; gap: 20px; margin-bottom: 10px; }
.popup > section .complaintType > h2::before { display: inline-block; font-family: xeicon; content: "\e929"; height: 25px; line-height: 25px; font-size: 20px; font-weight: 600; color: #fa3457; }
.popup > section .complaintType > h2 { display: inline-block; margin-bottom: 0px; width: 70px; font-size: 16px; }
.popup > section .complaintType > .radio > label { margin-right: 4px; }
.popup > section .complaintMsg > textarea { width: 100%; background-color: #eee; height: 150px; line-height: 25px; font-size: 1em; resize: none; }

.complaintPopWrap.popup > section h1 { text-align: center; font-size: 20px; font-weight: 600; }
.complaintPopWrap.popup > section .tabArea > table.info { border: none; }
.complaintPopWrap.popup > section .tabArea > table.info th::before { content: none; }
.complaintPopWrap.popup > section .tabArea > table.info th { content: none; border: none; background: none; }
.complaintPopWrap.popup > section .tabArea > table.info th.contentTh { vertical-align: text-top; padding-top: 7px; }
.complaintPopWrap.popup > section .tabArea > table.info td { border: none; font-size: 13px; color: #333; }

/* 공지사항 리스트 */
div.noNoticeData { height: 350px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
div.noNoticeData > i { font-size: 45px; color: #666; margin-bottom: 0px; line-height: 50px; }
div.noNoticeData > h2 { font-size: 24px; color: #666; line-height: 40px; font-weight: 400; }
div.noNoticeData > h2::before { content: 'No Data Available.'; }
div.noNoticeData > p { font-size: 14px; color: #999; line-height: 20px; margin: 0px; padding: 0px; }
div.noNoticeData > p::before { content: '조회된 공지사항이 없습니다.'; }


/* 피드백  */
.fb_mask { display:block;position: fixed;top:0px;left:0px;right:0px;bottom:0px;background: rgba(0,0,0,0.8); z-index: 2;}
.fb_wrapper { display:block;position: fixed;top:0px;left:0px;right:0px;bottom:0px;padding:70px 0px;max-width:640px;margin: 0 auto;background: #fff;}
.fb_wrapper > header { display:block;position: fixed;top:0px;left:0px;right:0px;height:50px;padding:10px 15px; box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1); max-width:610px;;margin: 0 auto;}
.fb_wrapper > header > h2 { display:block;text-align: left;font-size: 20px;line-height: 50px;font-weight: 600;}
.fb_wrapper > header > button { font-size:30px;width:60px;height:60px;line-height:60px;position: absolute;top:5px;right:5px;}

.fb_wrapper > footer { display:block;position: fixed;bottom:0px;left:0px;right:0px;height:50px;padding:10px 15px; box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1); max-width:610px;;margin: 0 auto;}
.fb_wrapper > footer > .btns { display: block;font-size:0px;}
.fb_wrapper > footer > .btns > button { display:inline-block; width:100%; background:#382063; color:#fff; height:50px; line-height:50px; border-radius:5px; font-size:16px; font-weight:500; text-align:center; }
.fb_wrapper > footer > .btns > button.cancel { width:calc( 30% - 10px ); background:#999; margin-right:10px;}
.fb_wrapper > footer > .btns > button.save { width:70%; }


.fb_wrapper > section { display:block;padding:35px 25px 35px 25px;height:calc(100vh - 260px); overflow-y: auto;margin-top:50px;}
.fb_wrapper > section > .topper  {display:block;position: fixed;top:70px;left:0px;right:0px;height:50px;padding:0px 0px; max-width:640px;;margin: 0 auto;background: #fff;z-index: 10;}
.fb_wrapper > section > .topper > .textbook { display:block;padding:0px 25px 0px 25px;}
.fb_wrapper > section > .topper > .textbook > h3 { dipslay:block;font-size:18px;font-weight:500;line-height:20px;height:20px;padding:5px 0px;}
.fb_wrapper > section > .topper > .textbook > h3 > b {  font-size:12px;font-weight: 600;color:#fff;display: inline-block;line-height: 20px;height: 20px;vertical-align: top;margin-left:5px;background: #50CCC6;padding:0px 8px;border-radius: 3px;border: 1px solid rgba(0, 0, 0, 0.1);}
.fb_wrapper > section > .topper > .textbook > h3 > b.red { background: #fa3457; }
.fb_wrapper > section > .topper > .textbook > h3 > b.orange { background: #fe7c1c; }
.fb_wrapper > section > .topper > .textbook > h3 > b.green { background: #01ef99; }
.fb_wrapper > section > .topper > .textbook > h3 > span {  font-size:0px;font-weight: 600;color:#fff;display: inline-block;line-height: 20px;height: 20px;vertical-align: top;margin-left:10px;}
.fb_wrapper > section > .topper > .textbook > h3 > span > em {  font-size:12px;font-weight: 400;color:#fff;display: inline-block;line-height: 20px;height: 20px;vertical-align: top;margin-left:2px;background: #999;padding:0px 5px;border-radius: 3px;border: 1px solid rgba(0, 0, 0, 0.1);}
.fb_wrapper > section > .topper > .textbook > p { dipslay:block;font-size:0px;line-height:16px;height:16px;margin-top:4px;}
.fb_wrapper > section > .topper > .textbook > p > span { display:inline-block;font-size:13px;font-weight:400;color:#999;line-height:16px;height:16px;vertical-align: bottom;margin-right:10px;}

.fb_wrapper > section > .topper > .subjects { display:block;padding:0px 0px;margin-bottom:20px;font-size:0px; overflow: hidden;border-bottom: 2px solid #382063;}
.fb_wrapper > section > .topper > .subjects > .tabs { display:block;margin-left:-2px;font-size:0px; }
.fb_wrapper > section > .topper > .subjects > .tabs > a { display:inline-block;width:calc((100% / 6) - 2px);font-size:15px;font-weight: 400;margin-left:2px;background: #ccc;color:#fff;line-height: 50px;height:50px;text-align: center;}
.fb_wrapper > section > .topper > .subjects > .tabs > a.on { background: #382063;color:#fff !important; }
.fb_wrapper > section > .topper > .subjects > .tabs > a.is { text-decoration: underline; color:#999;}

.fb_wrapper > section > .summary { display:block;padding:0px;font-size:0px;margin-bottom:20px;vertical-align: bottom;}
.fb_wrapper > section > .summary.textbook { background: #eee;}
.fb_wrapper > section > .summary > .graph { display:inline-block;width:50%;vertical-align: bottom;padding:15px;}
.fb_wrapper > section > .summary > .graph > i { display:block;height:6px;background: #999;}
.fb_wrapper > section > .summary > .graph > i.org { background: #ccc; }
.fb_wrapper > section > .summary > .graph > i.dp { background: #91E4A6; }
.fb_wrapper > section > .summary > .graph > i.real { background: #5F64C0; }
.fb_wrapper > section > .summary > .graph > i + i { margin-top:2px; }
.fb_wrapper > section > .summary > .unit { display:inline-block;width:calc( (100% - 186px) / 2 );vertical-align: bottom;padding:10px 15px;background: #eee;margin-left:2px;}
.fb_wrapper > section > .summary > .unit > span { display: block;line-height:14px;font-size:12px;color:#999;}
.fb_wrapper > section > .summary > .unit > b { display: block;line-height:18px;font-size:14px;font-weight: 600;text-align: right;}
.fb_wrapper > section > .summary > .issue { display:inline-block;width:90px;vertical-align: bottom;float:right;padding:15px;background: #eee;font-size:0px;text-align: right;}
.fb_wrapper > section > .summary > .issue > i { font-size:20px;line-height:22px;height:22px;width:30px;text-align: center;vertical-align: bottom;color:#999;display: inline-block;float:left;}
.fb_wrapper > section > .summary > .issue > b { display: inline-block;line-height:22px;height:22px;min-width:14px;padding:0px 4px;background: #999;font-size:13px;font-weight: 600;color:#fff;vertical-align: bottom;border-radius: 11px;text-align: center;margin-left:4px;;}
.fb_wrapper > section > .summary > .issue > b::before { content:attr(data-cnt); }
.fb_wrapper > section > .summary > .issue > b.student { background: #FF7A5C;}
.fb_wrapper > section > .summary > .issue > b.manager { background: #53D397;}

.fb_wrapper > section > ul.fb_list { display:block; }
.fb_wrapper > section > ul.fb_list > li { display:block; }
.fb_wrapper > section > ul.fb_list > li > h4 { dipslay:block;font-size:16px;font-weight:500;line-height:20px;height:20px;padding:5px 0px;}
.fb_wrapper > section > ul.fb_list > li > .fb_opt { display: block;border: 1px solid #ddd;padding:4px;font-size:0px;}
.fb_wrapper > section > ul.fb_list > li > .fb_opt > label { display:inline-block;width:calc(100% / 5);margin:0px;padding:0px;line-height: 44px;height: 44px; }
.fb_wrapper > section > ul.fb_list > li > .fb_opt > label > span { width:100%;background: #fff;margin:0px;display: block;text-align: center;line-height: 40px;height: 40px;border-top: 2px solid transparent;border-bottom: 2px solid transparent;}
.fb_wrapper > section > ul.fb_list > li > .fb_opt > label > span::before { display: none;}
.fb_wrapper > section > ul.fb_list > li > .fb_opt > label > [type=radio]:checked + span { background:#FF7A5C;color:#fff; }
.fb_wrapper > section > ul.fb_list > li + li { margin-top:20px; }
.fb_wrapper > section > ul.fb_list > li > .tb_txt { display: block;border: 1px solid #ddd;background: #f8f8f8;padding:10px;font-size:0px;}
.fb_wrapper > section > ul.fb_list > li > .tb_txt > textarea { width:100%;height:100px;resize: none;font-size:15px;}
.fb_wrapper > section > ul.fb_list > li > .tb_txt > textarea::placeholder { color:#bbb; }

.fb_wrapper > section > ul.fb_list.manager > li > .fb_opt > label > [type=radio]:checked + span { background:#53D397;color:#fff; }
.fb_wrapper > section > ul.fb_list.manager > li > .fb_opt > label.checked > span { border-bottom: 2px solid #FF7A5C;color:#FF7A5C; }
.fb_wrapper > section > ul.fb_list.manager > li > .fb_opt > label.checked { border-bottom: 2px solid #FF7A5C; }

/* 하원 보고서 */

.rpt_wrapper { display:block;min-width:360px;margin: 0 auto;background: #fff;}
.rpt_wrapper > header { display:flex;position: fixed;top:0px;left:0px;right:0px;height:50px;padding:10px 15px; box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);background: #fff;z-index: 10;}
.rpt_wrapper > header > .student_info { display:block;text-align: left;padding:3px 0px;}
.rpt_wrapper > header > .student_info > h3 { font-size:17px;font-weight: 600;display:block;line-height: 26px;}
.rpt_wrapper > header > .student_info > h3 > span { display:inline-block;font-size:13px;color:#999;line-height:22px;vertical-align: bottom;margin-left:10px;font-weight: 400;}
.rpt_wrapper > header > .student_info > p { font-size:14px;font-weight: 400;display:block;line-height: 18px;}

.rpt_wrapper > header > span.select {position:absolute;top:15px;right:15px;padding-left:0px; display:inline-block;line-height:40px;height:40px;width:130px;cursor:pointer;background:#eee;border:0px solid #999; border-radius: 5px; overflow:hidden;}
.rpt_wrapper > header > span.select select { position:relative;display:block;width:120%;padding-left:10px;height:40px;line-height:40px;background:transparent;font-size:14px;font-weight:400;outline: none;z-index:2;color:#999; }
.rpt_wrapper > header > span.select:after { font-family:FontAwesome; content:"\f107";vertical-align: middle;position:absolute;top:0px;right:10px;display:block;color:#999;font-size:15px;height:40px;line-height:40px;z-index:1;}

.rpt_wrapper > footer { display:block;position: fixed;bottom:0px;left:0px;right:0px;height:50px;padding:10px 15px; box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);background: #fff;z-index: 10;}
.rpt_wrapper.manager > footer { display:block; }
.rpt_wrapper > footer > .btns { display: block;font-size:0px;text-align: right; border-top: none; padding: 0px;}
.rpt_wrapper > footer > .btns > button { display:inline-block; width:100%; background:#382063; color:#fff; height:50px; line-height:50px; border-radius:5px; font-size:16px; font-weight:500; text-align:center; }
.rpt_wrapper > footer > .btns > button.save { width:180px;; background:#999; margin-right:10px;}
.rpt_wrapper > footer > .btns > button.send { width:180px; }

.rpt_wrapper i.p { color:#449187; }
.rpt_wrapper i.m { color:#F12D2D; }

.rpt_wrapper > section { display:block;padding:15px;height: calc(100% - 100px);}
.rpt_wrapper > section > .title { display:block;padding: 90px 25px 0px;}
.rpt_wrapper > section > .title > h2 { font-size:24px;text-align: center;font-weight: 600;display:block;color:#111;}
.rpt_wrapper > section > .title > p { font-size:13px;text-align: right;font-weight: 400;display:block;color:#999;}

.rpt_wrapper > section > .item { display:block;padding:0px 18px; }
.rpt_wrapper > section > .item + .item { margin-top:40px; }
.rpt_wrapper > section > .item > h4 { font-size: 16px;font-weight: 600;display: block;margin:0px -18px 18px -18px;}

.rpt_wrapper > section > .item > ul.attendance { display:block;vertical-align: top;padding:0px;margin-left:-2px;font-size:0px;}
.rpt_wrapper > section > .item > ul.attendance > li { display:inline-block;width:calc(33.3333% - 2px);vertical-align: top;padding:0px;margin-left:2px;background: #eee;margin-top:2px;}
.rpt_wrapper > section > .item > ul.attendance > li > div { display:block;padding:12px 5px; }
.rpt_wrapper > section > .item > ul.attendance > li > div > span { display: block;line-height:14px;font-size:12px;color:#999;text-align: center;margin-bottom:3px;}
.rpt_wrapper > section > .item > ul.attendance > li > div > b { display: block;line-height:18px;font-size:14px;font-weight: 600;text-align: center;color:#111;}
.rpt_wrapper > section > .item > ul.attendance > li > div > em { display: block;line-height:16px;font-size:13px;font-weight: 400;color:#999;text-align: center;margin-top:2px;}

.rpt_wrapper > section > .item > ul.outing { display:block;vertical-align: top;padding:0px;margin-left:-2px;font-size:0px;}
.rpt_wrapper > section > .item > ul.outing > li { display:inline-block;width:calc( 100% - 2px );vertical-align: top;padding:0px;margin-left:2px;background: #eee;position: relative;margin-top:2px;}
.rpt_wrapper > section > .item > ul.outing > li > div.th { display:block;padding:12px 12px; }
.rpt_wrapper > section > .item > ul.outing > li > div.th > span { display: block;line-height:14px;font-size:12px;color:#999;text-align: left;margin-bottom:3px;}
.rpt_wrapper > section > .item > ul.outing > li > div.th > span > b { font-size:12px;font-weight: 400;color:#111;display:inline-block;line-height:14px;margin-left:8px;}
.rpt_wrapper > section > .item > ul.outing > li > div.th > b { display: block;line-height:18px;font-size:14px;font-weight: 600;text-align: left;color:#111;}
.rpt_wrapper > section > .item > ul.outing > li > div.th > em { display: block;line-height:16px;font-size:13px;font-weight: 400;color:#999;text-align: center;margin-top:2px;}
.rpt_wrapper > section > .item > ul.outing > li > div.td { display:block;padding:12px 12px; position: absolute;top:0px;right:0px;}
.rpt_wrapper > section > .item > ul.outing > li > div.td > span { display: block;line-height:14px;font-size:12px;color:#999;text-align: right;margin-bottom:3px;}
.rpt_wrapper > section > .item > ul.outing > li > div.td > b { display: block;line-height:18px;font-size:14px;font-weight: 600;text-align: right;color:#111;}
.rpt_wrapper > section > .item > ul.outing > li > div.td > b > i { display:inline-block;line-height:18px;font-size:12px;font-weight: 600; vertical-align: bottom;margin-right:10px;}

@media (min-width: 960px) {
	.rpt_wrapper > section > .item > ul.outing > li { display:inline-block;width:calc( 50% - 2px );}
}

.rpt_wrapper > section > .item > ul.time { display:block;vertical-align: top;padding:0px;margin-left:-2px;font-size:0px;}
.rpt_wrapper > section > .item > ul.time > li { display:inline-block;width:calc(33.3333% - 2px);vertical-align: top;padding:0px;margin-left:2px;background: #eee;margin-top:2px;}
.rpt_wrapper > section > .item > ul.time > li > div { display:block;padding:12px 5px; }
.rpt_wrapper > section > .item > ul.time > li > div > span { display: block;line-height:14px;font-size:12px;color:#999;text-align: center;margin-bottom:3px;}
.rpt_wrapper > section > .item > ul.time > li > div > b { display: block;line-height:18px;font-size:14px;font-weight: 600;text-align: center;color:#111;}
.rpt_wrapper > section > .item > ul.time > li > div > em { display: block;line-height:16px;font-size:13px;font-weight: 400;color:#666;text-align: center;margin-top:2px;}
.rpt_wrapper > section > .item > ul.time > li > div > i { display: block;line-height:16px;font-size:11px;font-weight: 400;color:#999;text-align: center;margin-top:2px;}

@media (min-width: 960px) {
	.rpt_wrapper > section > .item > ul.time > li { width:calc(16.6666% - 2px);}
}

.rpt_wrapper > section > .item > ul.textbook { display:block;vertical-align: top;padding:0px;font-size:0px;}
.rpt_wrapper > section > .item > ul.textbook > li { display:block;vertical-align: top;padding:0px;position: relative;margin-top:2px;}
.rpt_wrapper > section > .item > ul.textbook > li + li { margin-top:20px; }
.rpt_wrapper > section > .item > ul.textbook > li > div.textbook { display:block;padding:0px 0px;margin-bottom:10px;}
.rpt_wrapper > section > .item > ul.textbook > li > div.textbook > h3 { display:block;font-size:18px;font-weight:500;line-height:20px;min-height:20px;padding: 5px 80px 5px 0px;}
.rpt_wrapper > section > .item > ul.textbook > li > div.textbook > h3 > b {  font-size:12px;font-weight: 600;color:#fff;display: inline-block;line-height: 20px;height: 20px;vertical-align: top;margin-left:10px;background: #50CCC6;padding:0px 8px;border-radius: 3px;border: 1px solid rgba(0, 0, 0, 0.1);}
.rpt_wrapper > section > .item > ul.textbook > li > div.textbook > h3 > span {  font-size:0px;font-weight: 600;color:#fff;display: inline-block;line-height: 20px;height: 20px;vertical-align: top;margin-left:10px;}
.rpt_wrapper > section > .item > ul.textbook > li > div.textbook > h3 > span > em {  font-size:12px;font-weight: 400;color:#fff;display: inline-block;line-height: 20px;height: 20px;vertical-align: top;margin-left:2px;background: #999;padding:0px 5px;border-radius: 3px;border: 1px solid rgba(0, 0, 0, 0.1);}
.rpt_wrapper > section > .item > ul.textbook > li > div.textbook > p { display:block;font-size:0px;line-height:16px;min-height:16px;margin-top:4px;}
.rpt_wrapper > section > .item > ul.textbook > li > div.textbook > p > span { display:inline-block;font-size:13px;font-weight:400;color:#999;line-height:16px;height:16px;vertical-align: bottom;margin-right:10px;}

.rpt_wrapper > section > .item > ul.textbook > li > div.textbook > .graph { position: absolute;top:0px;right:0px;display:block;width:150px;vertical-align: bottom;padding:0px;}
.rpt_wrapper > section > .item > ul.textbook > li > div.textbook > .graph > i { display:block;height:6px;background: #999;position: absolute;top:0px;right:0px;}
.rpt_wrapper > section > .item > ul.textbook > li > div.textbook > .graph > i.org { background: #ccc; top:0px;}
.rpt_wrapper > section > .item > ul.textbook > li > div.textbook > .graph > i.dp { background: #91E4A6;  top:8px; }
.rpt_wrapper > section > .item > ul.textbook > li > div.textbook > .graph > i.real { background: #5F64C0;  top:16px;}

.rpt_wrapper > section > .item > ul.textbook > li > dl { display:block;vertical-align: top;padding:0px;margin-left:-2px;font-size:0px;}
.rpt_wrapper > section > .item > ul.textbook > li > dl > dd { display:inline-block;width:calc(50% - 2px);vertical-align: top;padding:0px;margin-left:2px;background: #eee;margin-top:2px;}
.rpt_wrapper > section > .item > ul.textbook > li > dl > dd > div { display:block;padding:12px 12px;font-size:0px; }
.rpt_wrapper > section > .item > ul.textbook > li > dl > dd > div > span { display: block;line-height:14px;font-size:12px;color:#999;text-align: left;margin-bottom:3px;}
.rpt_wrapper > section > .item > ul.textbook > li > dl > dd > div > span > i { display:inline-block;line-height:14px;font-size:12px;float:right;font-weight: 600;}
.rpt_wrapper > section > .item > ul.textbook > li > dl > dd > div > b { display: block;line-height:18px;font-size:14px;font-weight: 600;text-align: right;color:#111;}
.rpt_wrapper > section > .item > ul.textbook > li > dl > dd > div > b > [type=text] { width:60%;max-width:130px;text-align: right;font-weight: 600;line-height:16px;font-size:14px;color:#111;border: 1px solid transparent;}
.rpt_wrapper.manager > section > .item > ul.textbook > li > dl > dd > div > b > [type=text] { background: #ddd;border: 1px solid #ccc;box-sizing: border-box;border-radius: 3px;}
.rpt_wrapper > section > .item > ul.textbook > li > dl > dd > div > b > i { display:inline-block;line-height:18px;font-size:12px;float:left;font-weight: 600;}
.rpt_wrapper > section > .item > ul.textbook > li > dl > dd > div > em { display: block;line-height:16px;font-size:13px;font-weight: 400;color:#666;text-align: right;margin-top:2px;}
.rpt_wrapper > section > .item > ul.textbook > li > dl > dd > div > em > [type=text] { width:60%;max-width:130px;text-align: right;font-weight: 400;line-height:14px;font-size:13px;color:#666;border: 1px solid transparent;}
.rpt_wrapper.manager > section > .item > ul.textbook > li > dl > dd > div > em > [type=text] { background: #ddd;border: 1px solid #ccc;box-sizing: border-box;border-radius: 3px;}
.rpt_wrapper > section > .item > ul.textbook > li > dl > dd > div > em > i { display:inline-block;line-height:16px;font-size:12px;float:left;font-weight: 600;}
.rpt_wrapper > section > .item > ul.textbook > li > dl > dd > div > i { display: block;line-height:16px;font-size:11px;font-weight: 400;color:#9996;text-align: center;margin-top:2px;}
.rpt_wrapper > section > .item > ul.textbook > li > dl > dd > div.spec { margin-left:-15px; }
.rpt_wrapper > section > .item > ul.textbook > li > dl > dd > div.spec > span { margin-left:15px; }
.rpt_wrapper > section > .item > ul.textbook > li > dl > dd > div > p { display: inline-block;width:calc(50% - 15px);margin-left:15px;vertical-align: top;line-height:18px;font-size:12px;color:#666;text-align: left;}
.rpt_wrapper > section > .item > ul.textbook > li > dl > dd > div > p > b { width:30px;float:right; font-size:14px;}
.rpt_wrapper > section > .item > ul.textbook > li > dl > dd > div > p > b > [type=text] { width:100%;text-align: right;font-weight: 600;line-height:16px;font-size:14px;color:#111;display:block;border: 1px solid transparent;}
.rpt_wrapper.manager > section > .item > ul.textbook > li > dl > dd > div > p > b > [type=text] { background: #ddd;border: 1px solid #ccc;box-sizing: border-box;border-radius: 3px;}

@media (min-width: 960px) {
	.rpt_wrapper > section > .item > ul.textbook > li > dl > dd { width:calc(33.3333% - 2px);}
}

.rpt_wrapper > section > .item > .sujects_rate { background: #f8f8f8;padding:30px;}
.rpt_wrapper > section > .item > .sujects_rate .chart_wrap{ position: relative; width: 280px; height: 280px; margin:0 auto;overflow: hidden;margin-bottom:30px;}
.rpt_wrapper > section > .item > .sujects_rate .chart { position: relative; width: 280px; height: 280px; border-radius: 50%; transition: 0.3s; background:lightgray; display:inline-block; }
.rpt_wrapper > section > .item > .sujects_rate .chart:after{ content:''; background: #fff; position: absolute; top:50%; left:50%; width:160px; height:160px; border-radius: 50%; transform: translate(-50%, -50%); }
.rpt_wrapper > section > .item > .sujects_rate .chart_bar{ width: inherit; height: inherit; border-radius: 50%; position: relative; }
.rpt_wrapper > section > .item > .sujects_rate .chart_total{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background:gray; width:100%; }
.rpt_wrapper > section > .item > .sujects_rate .chart_total span{ position: absolute; }
.rpt_wrapper > section > .item > .sujects_rate .chart_ex { top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:13px; font-weight:400; color:#999;text-align: center;line-height: 24px;}
.rpt_wrapper > section > .item > .sujects_rate .chart_ex > b { font-size:24px;font-weight: 600;display:block;color:#111;}

.rpt_wrapper > section > .item > .sujects_rate > ul.sujects { display:block;vertical-align: top;padding:0px;margin-left:-2px;font-size:0px;}
.rpt_wrapper > section > .item > .sujects_rate > ul.sujects > li { display:inline-block;width:calc(50% - 2px);vertical-align: top;padding:0px;margin-left:2px;background: #eee;margin-top:2px;}
.rpt_wrapper > section > .item > .sujects_rate > ul.sujects > li > div { display:block;padding:12px 12px; position: relative;}
.rpt_wrapper > section > .item > .sujects_rate > ul.sujects > li > div > span { display: block;line-height:36px;height:36px;width:36px;background: #999;font-size:12px;color:#fff;font-weight: 600;text-align: center;margin-bottom:3px;position: absolute;top:12px;left:12px;}
.rpt_wrapper > section > .item > .sujects_rate > ul.sujects > li:nth-child(1) > div > span { background: #F14960;}
.rpt_wrapper > section > .item > .sujects_rate > ul.sujects > li:nth-child(2) > div > span { background: #F6A147;}
.rpt_wrapper > section > .item > .sujects_rate > ul.sujects > li:nth-child(3) > div > span { background: #27AAE2;}
.rpt_wrapper > section > .item > .sujects_rate > ul.sujects > li:nth-child(4) > div > span { background: #1BCCBA;}
.rpt_wrapper > section > .item > .sujects_rate > ul.sujects > li:nth-child(5) > div > span { background: #7BB03A;}
.rpt_wrapper > section > .item > .sujects_rate > ul.sujects > li:nth-child(6) > div > span { background: #9152D2;}
.rpt_wrapper > section > .item > .sujects_rate > ul.sujects > li > div > b { display: block;line-height:18px;font-size:14px;font-weight: 600;text-align: right;color:#111;}
.rpt_wrapper > section > .item > .sujects_rate > ul.sujects > li > div > em { display: block;line-height:16px;font-size:13px;font-weight: 400;color:#666;text-align: right;margin-top:2px;}
.rpt_wrapper > section > .item > .sujects_rate > ul.sujects > li > div > i { display: block;line-height:16px;font-size:11px;font-weight: 400;color:#999;text-align: right;margin-top:2px;}

.rpt_wrapper.manager > section > .item > .sujects_rate > ul.sujects > li > div { padding-right:125px; }
.rpt_wrapper.manager > section > .item > .sujects_rate > ul.sujects > li > div > .issue {display:inline-block;}
.rpt_wrapper > section > .item > .sujects_rate > ul.sujects > li > div > .issue { display:none;width:90px;vertical-align: bottom;position: absolute;top:12px;right:12px;padding:7px 0px 7px 8px;background: #eee;font-size:0px;text-align: right;border-left: 1px solid #ddd;}
.rpt_wrapper > section > .item > .sujects_rate > ul.sujects > li > div > .issue > i { font-size:20px;line-height:22px;height:22px;width:30px;text-align: center;vertical-align: bottom;color:#999;display: inline-block;float:left;}
.rpt_wrapper > section > .item > .sujects_rate > ul.sujects > li > div > .issue > b { display: inline-block;line-height:22px;height:22px;min-width:14px;padding:0px 4px;background: #999;font-size:13px;font-weight: 600;color:#fff;vertical-align: bottom;border-radius: 11px;text-align: center;margin-left:4px;;}
.rpt_wrapper > section > .item > .sujects_rate > ul.sujects > li > div > .issue > b::before { content:attr(data-cnt); }
.rpt_wrapper > section > .item > .sujects_rate > ul.sujects > li > div > .issue > b.student { background: #FF7A5C;}
.rpt_wrapper > section > .item > .sujects_rate > ul.sujects > li > div > .issue > b.manager { background: #53D397;}

@media (min-width: 960px) {
	.rpt_wrapper > section > .item > .sujects_rate .chart_wrap{ display:inline-block;margin-bottom: 0px;}
	.rpt_wrapper > section > .item > .sujects_rate > ul.sujects { display:inline-block;width:calc(100% - 320px);float:right; margin-top:47px;}
}

.rpt_wrapper > section > .item > ul.warning { display:block;vertical-align: top;padding:0px;margin-left:-2px;font-size:0px;}
.rpt_wrapper > section > .item > ul.warning > li { display:inline-block;width:calc(100% - 2px);vertical-align: top;padding:0px;margin-left:2px;background: #eee;margin-top:2px;}
.rpt_wrapper > section > .item > ul.warning > li > div { display:block;padding:12px 12px; position: relative;}
.rpt_wrapper > section > .item > ul.warning > li > div > span { display: block;line-height:14px;font-size:12px;color:#999;text-align: left;margin-bottom:3px;}
.rpt_wrapper > section > .item > ul.warning > li > div > span > i { display: inline-block;;line-height:14px;font-size:12px;color:#F12D2D;text-align: left;vertical-align: bottom;margin-left:10px;font-weight: 600;}
.rpt_wrapper > section > .item > ul.warning > li > div > b { display: block;line-height:18px;font-size:14px;font-weight: 600;text-align: left;color:#111;}
.rpt_wrapper > section > .item > ul.warning > li > div > em { display: block;line-height:36px;font-size:25px;font-weight: 600;color:#111;text-align: right;margin-top:2px;position: absolute;top:12px;right:12px;}
.rpt_wrapper > section > .item > ul.warning > li > div > i { display: block;line-height:16px;font-size:11px;font-weight: 400;color:#999;text-align: center;margin-top:2px;}
.rpt_wrapper > section > .item > ul.warning > li.cancel > div > b { text-decoration: line-through;color:#bbb;}
.rpt_wrapper > section > .item > ul.warning > li.cancel > div > em { text-decoration: line-through;color:#bbb;}

@media (min-width: 960px) {
	.rpt_wrapper > section > .item > ul.warning > li { width:calc(50% - 2px); }
}

.rpt_wrapper > section > .item > .comment > p { display: block;background: #eee;padding:12px;font-size:14px;line-height: 18px;}
.rpt_wrapper > section > .item > .comment > .tb_txt { display: none;border: 1px solid #ddd;background: #f8f8f8;padding:10px;font-size:0px;}
.rpt_wrapper > section > .item > .comment > .tb_txt > textarea { width:100%;height:100px;resize: none;font-size:15px;}
.rpt_wrapper > section > .item > .comment > .tb_txt > textarea::placeholder { color:#bbb; }

.rpt_wrapper.manager > section > .item > .comment > p { display:none; }
.rpt_wrapper.manager > section > .item > .comment > .tb_txt { display:block; }

.rpt_wrapper header > .parentBtnBox {display: inline-block; width: 50px; cursor: pointer;}
.rpt_wrapper header > .parentBtnBox > .icon {height: 100%;max-height: 70px;display: flex;align-items: center;justify-content: center;}
.rpt_wrapper header > .parentBtnBox > .icon::after {font-family: "xeicon";display: inline-block;font-size: 1.8rem;}
.rpt_wrapper header > .parentBtnBox > .icon.backBtn::after {content: "\e93b";}