@charset "utf-8";

:root{
	--reading-level-kpre    : #ff9b9b;
	--reading-level-ka      : #ff8383;
	--reading-level-kb      : #ff7575;
	--reading-level-kc      : #ff6666;
	--reading-level-kd      : #ff5858;
	--reading-level-1a      : #ffae00;
	--reading-level-1b      : #ff9600;
	--reading-level-1c      : #ff8400;
	--reading-level-1d      : #ff7200;
	--reading-level-2a      : #abea75;
	--reading-level-2b      : #98d568;
	--reading-level-2c      : #85bf5b;
	--reading-level-2d      : #72aa4e;
	--reading-level-3a      : #3dc1f8;
	--reading-level-3b      : #36abf1;
	--reading-level-3c      : #3096ea;
	--reading-level-3d      : #2980e3;
	--reading-level-4a      : #eb3fb0;
	--reading-level-4b      : #d6389d;
	--reading-level-4c      : #c23189;
	--reading-level-4d      : #ad2a76;
	--reading-level-5a      : #3ed9ee;
	--reading-level-5b      : #20c7de;
	--reading-level-5c      : #13b1d3;
	--reading-level-5d      : #0498d7;
	--reading-level-6a      : #e7aa50;
	--reading-level-6b      : #d18a00;
	--reading-level-6c      : #8d7d00;
	--reading-level-6d      : #945000;
}


.reading-curriculum {
	position: relative;
}




#ts-curriculum .filter{
	border: 1px solid #31a5ff;
	background-color: #f6faff;
	border-radius: 5px;
	padding: 5px 10px;
}
#ts-curriculum .filterWrapper {
	margin-bottom: 10px;
}
#ts-curriculum .filterWrapper.fixed {
	position: fixed;
	top:140px;
	z-index: 10;
	width: calc(100vw - 20px);
	background-color:#ffffff;
	padding:5px 0;
}

#ts-curriculum .filterWrapper.fixed + div {
	margin-top: 290px;
}

@media all and (min-width:668px) and (max-width:1279px) {
	#ts-curriculum .filterWrapper.fixed {
		max-width: 760px;
		width:calc(100vw - 40px);
	}
	#ts-curriculum .filterWrapper.fixed + div {
		margin-top: 285px;
	}
}

#ts-curriculum .filter > .filter-kinds {
	display: grid;
	grid-template-columns: 70px auto;
	align-items: center;
	margin-bottom: 5px;
}

#ts-curriculum .filter > .filter-kinds:last-child {
	margin-bottom: 0;
}

#ts-curriculum .filter > .filter-kinds span {
	color: #333;
	font-family: 'TmoneyRoundWindRegular', 'Pretendard', 'Noto Sans KR';
	font-size: 14px;
}

#ts-curriculum .filter > .filter-kinds > .radio-area,
#ts-curriculum .filter > .filter-kinds > .radio-area-level {
	margin:0;
	height: 28px;
	white-space: nowrap;
	overflow: hidden;
}

#ts-curriculum .filter > .filter-kinds > .radio-area > div {
	/*display: inline-block;*/
	display: inline-flex;
	align-items: center;
}

#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='kpre']:checked + span.custom-btn {
	background-color:var(--reading-level-kpre);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='ka']:checked + span.custom-btn {
	background-color:var(--reading-level-ka);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='kb']:checked + span.custom-btn {
	background-color:var(--reading-level-kb);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='kc']:checked + span.custom-btn {
	background-color:var(--reading-level-kc);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='kd']:checked + span.custom-btn {
	background-color:var(--reading-level-kd);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='1a']:checked + span.custom-btn {
	background-color:var(--reading-level-1a);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='1b']:checked + span.custom-btn {
	background-color:var(--reading-level-1b);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='1c']:checked + span.custom-btn {
	background-color:var(--reading-level-1c);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='1d']:checked + span.custom-btn {
	background-color:var(--reading-level-1d);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='2a']:checked + span.custom-btn {
	background-color:var(--reading-level-2a);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='2b']:checked + span.custom-btn {
	background-color:var(--reading-level-2b);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='2c']:checked + span.custom-btn {
	background-color:var(--reading-level-2c);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='2d']:checked + span.custom-btn {
	background-color:var(--reading-level-2d);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='3a']:checked + span.custom-btn {
	background-color:var(--reading-level-3a);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='3b']:checked + span.custom-btn {
	background-color:var(--reading-level-3b);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='3c']:checked + span.custom-btn {
	background-color:var(--reading-level-3c);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='3d']:checked + span.custom-btn {
	background-color:var(--reading-level-3d);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='4a']:checked + span.custom-btn {
	background-color:var(--reading-level-4a);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='4b']:checked + span.custom-btn {
	background-color:var(--reading-level-4b);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='4c']:checked + span.custom-btn {
	background-color:var(--reading-level-4c);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='4d']:checked + span.custom-btn {
	background-color:var(--reading-level-4d);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='5a']:checked + span.custom-btn {
	background-color:var(--reading-level-5a);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='5b']:checked + span.custom-btn {
	background-color:var(--reading-level-5b);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='5c']:checked + span.custom-btn {
	background-color:var(--reading-level-5c);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='5d']:checked + span.custom-btn {
	background-color:var(--reading-level-5d);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='6a']:checked + span.custom-btn {
	background-color:var(--reading-level-6a);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='6b']:checked + span.custom-btn {
	background-color:var(--reading-level-6b);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='6c']:checked + span.custom-btn {
	background-color:var(--reading-level-6c);
}
#ts-curriculum .set-readingschool .scrollable-section .item input[type=radio][name='readingLevel'][value='6d']:checked + span.custom-btn {
	background-color:var(--reading-level-6d);
}


@media all and (min-width:1280px) {
	#ts-curriculum .filter {
		padding: 10px 15px;
		border-radius:10px;
	}
	
	#ts-curriculum .filterWrapper.fixed {
		top: 150px;
		z-index: 10;
		width: 800px;
	}
	#ts-curriculum .filter > .filter-kinds {
		grid-template-columns: 80px auto;
		margin-bottom: 10px;
	}
	
	#ts-curriculum .filter > .filter-kinds span {
		font-size: 16px;
	}
	
	#ts-curriculum .filter > .filter-kinds > .radio-area,
	#ts-curriculum .filter > .filter-kinds > .radio-area-level {
		height: 36px;
	}
	
	
	#ts-curriculum .radio-area-level .btn-book-level button.new-color {
		padding: 3px 0 0 0;
		font-size: 15px;
		height: 36px;
	}
}



#ts-curriculum .book-thumbnail {
	position: relative;
	margin: 10px 0;
}

#ts-curriculum .book-thumbnail .level {
	padding: 0 10px;
	width: 100%;
	height: 40px;
	border-radius: 10px 10px 0 0;
	background-color: #ff8383; /* 레벨별 카테고리 색상 */
	text-align:center;
}

#ts-curriculum .book-thumbnail .level > p {
	padding: 2px 0 0 0;
	margin: 0;
	font-family: 'TmoneyRoundWindExtraBold', 'Pretendard', 'Noto Sans KR';
	color: #fff;
	font-size: 16px;
	line-height: 40px;
}

#ts-curriculum .book-thumbnail .book-box {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	margin: 0;
	width: 100%;
	border-radius: 10px;
	border: 1px solid #ccc;
	border-top: none;
}

#ts-curriculum .book-thumbnail .book-box > p {
	color: #555;
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: -0.1px;
	text-align: center;
}

#ts-curriculum .book-thumbnail .book-box > p.title {
	color: #ff8383; /* 레벨별 카테고리 색상 */
	font-weight: 700;
}

#ts-curriculum .book-thumbnail .img-area {
	text-align: center;
	object-fit: contain;
	max-width:550px;
	margin:0 auto;
}

/* 프리뷰 영역 레벨별 색상 설정 Start */
#ts-curriculum .book-thumbnail[title='ka'] .level {background-color:var(--reading-level-ka);}
#ts-curriculum .book-thumbnail[title='kb'] .level {background-color:var(--reading-level-kb);}
#ts-curriculum .book-thumbnail[title='kc'] .level {background-color:var(--reading-level-kc);}
#ts-curriculum .book-thumbnail[title='kd'] .level {background-color:var(--reading-level-kd);}
#ts-curriculum .book-thumbnail[title='1a'] .level {background-color:var(--reading-level-1a);}
#ts-curriculum .book-thumbnail[title='1b'] .level {background-color:var(--reading-level-1b);}
#ts-curriculum .book-thumbnail[title='1c'] .level {background-color:var(--reading-level-1c);}
#ts-curriculum .book-thumbnail[title='1d'] .level {background-color:var(--reading-level-1d);}
#ts-curriculum .book-thumbnail[title='2a'] .level {background-color:var(--reading-level-2a);}
#ts-curriculum .book-thumbnail[title='2b'] .level {background-color:var(--reading-level-2b);}
#ts-curriculum .book-thumbnail[title='2c'] .level {background-color:var(--reading-level-2c);}
#ts-curriculum .book-thumbnail[title='2d'] .level {background-color:var(--reading-level-2d);}
#ts-curriculum .book-thumbnail[title='3a'] .level {background-color:var(--reading-level-3a);}
#ts-curriculum .book-thumbnail[title='3b'] .level {background-color:var(--reading-level-3b);}
#ts-curriculum .book-thumbnail[title='3c'] .level {background-color:var(--reading-level-3c);}
#ts-curriculum .book-thumbnail[title='3d'] .level {background-color:var(--reading-level-3d);}
#ts-curriculum .book-thumbnail[title='4a'] .level {background-color:var(--reading-level-4a);}
#ts-curriculum .book-thumbnail[title='4b'] .level {background-color:var(--reading-level-4b);}
#ts-curriculum .book-thumbnail[title='4c'] .level {background-color:var(--reading-level-4c);}
#ts-curriculum .book-thumbnail[title='4d'] .level {background-color:var(--reading-level-4d);}
#ts-curriculum .book-thumbnail[title='5a'] .level {background-color:var(--reading-level-5a);}
#ts-curriculum .book-thumbnail[title='5b'] .level {background-color:var(--reading-level-5b);}
#ts-curriculum .book-thumbnail[title='5c'] .level {background-color:var(--reading-level-5c);}
#ts-curriculum .book-thumbnail[title='5d'] .level {background-color:var(--reading-level-5d);}
#ts-curriculum .book-thumbnail[title='6a'] .level {background-color:var(--reading-level-6a);}
#ts-curriculum .book-thumbnail[title='6b'] .level {background-color:var(--reading-level-6b);}
#ts-curriculum .book-thumbnail[title='6c'] .level {background-color:var(--reading-level-6c);}
#ts-curriculum .book-thumbnail[title='6d'] .level {background-color:var(--reading-level-6d);}
#ts-curriculum .book-thumbnail[title='ka'] .book-box > p.title {color:var(--reading-level-ka) }
#ts-curriculum .book-thumbnail[title='kb'] .book-box > p.title {color:var(--reading-level-kb) }
#ts-curriculum .book-thumbnail[title='kc'] .book-box > p.title {color:var(--reading-level-kc) }
#ts-curriculum .book-thumbnail[title='kd'] .book-box > p.title {color:var(--reading-level-kd) }
#ts-curriculum .book-thumbnail[title='1a'] .book-box > p.title {color:var(--reading-level-1a) }
#ts-curriculum .book-thumbnail[title='1b'] .book-box > p.title {color:var(--reading-level-1b) }
#ts-curriculum .book-thumbnail[title='1c'] .book-box > p.title {color:var(--reading-level-1c) }
#ts-curriculum .book-thumbnail[title='1d'] .book-box > p.title {color:var(--reading-level-1d) }
#ts-curriculum .book-thumbnail[title='2a'] .book-box > p.title {color:var(--reading-level-2a) }
#ts-curriculum .book-thumbnail[title='2b'] .book-box > p.title {color:var(--reading-level-2b) }
#ts-curriculum .book-thumbnail[title='2c'] .book-box > p.title {color:var(--reading-level-2c) }
#ts-curriculum .book-thumbnail[title='2d'] .book-box > p.title {color:var(--reading-level-2d) }
#ts-curriculum .book-thumbnail[title='3a'] .book-box > p.title {color:var(--reading-level-3a) }
#ts-curriculum .book-thumbnail[title='3b'] .book-box > p.title {color:var(--reading-level-3b) }
#ts-curriculum .book-thumbnail[title='3c'] .book-box > p.title {color:var(--reading-level-3c) }
#ts-curriculum .book-thumbnail[title='3d'] .book-box > p.title {color:var(--reading-level-3d) }
#ts-curriculum .book-thumbnail[title='4a'] .book-box > p.title {color:var(--reading-level-4a) }
#ts-curriculum .book-thumbnail[title='4b'] .book-box > p.title {color:var(--reading-level-4b) }
#ts-curriculum .book-thumbnail[title='4c'] .book-box > p.title {color:var(--reading-level-4c) }
#ts-curriculum .book-thumbnail[title='4d'] .book-box > p.title {color:var(--reading-level-4d) }
#ts-curriculum .book-thumbnail[title='5a'] .book-box > p.title {color:var(--reading-level-5a) }
#ts-curriculum .book-thumbnail[title='5b'] .book-box > p.title {color:var(--reading-level-5b) }
#ts-curriculum .book-thumbnail[title='5c'] .book-box > p.title {color:var(--reading-level-5c) }
#ts-curriculum .book-thumbnail[title='5d'] .book-box > p.title {color:var(--reading-level-5d) }
#ts-curriculum .book-thumbnail[title='6a'] .book-box > p.title {color:var(--reading-level-6a) }
#ts-curriculum .book-thumbnail[title='6b'] .book-box > p.title {color:var(--reading-level-6b) }
#ts-curriculum .book-thumbnail[title='6c'] .book-box > p.title {color:var(--reading-level-6c) }
#ts-curriculum .book-thumbnail[title='6d'] .book-box > p.title {color:var(--reading-level-6d) }
/* 프리뷰 영역 레벨별 색상 설정 End */

@media all and (min-width:1280px) {
	
	#ts-curriculum .filterWrapper.fixed + div {
		margin-top: 280px;
	}
	#ts-curriculum .book-thumbnail {
		margin: 10px 0;
	}
	
	#ts-curriculum .book-thumbnail .level {
		padding: 0 15px;
		height: 50px;
		border-radius: 15px 15px 0 0;
	}
	
	#ts-curriculum .book-thumbnail .level > p {
		padding: 2px 0 0 0;
		font-size: 18px;
		line-height: 50px;
	}
	
	#ts-curriculum .book-thumbnail .book-box {
		gap: 10px;
		padding: 10px 20px;
		border-radius: 10px;
	}
	
	#ts-curriculum .book-thumbnail .book-box > p {
		font-size: 14px;
	}
	
	#ts-curriculum .book-thumbnail .book-box > p.title {
		font-size: 18px;
	}
	
	#ts-curriculum .book-thumbnail .levelDescription br {
		display: none;
	}
}

#ts-curriculum .noDataImg {
	padding:30px 0;
	text-align:center;
}
#ts-curriculum .noDataImg > img {
	width:300px;
}

#ts-curriculum .curriculum-table {
	display: grid;
	grid-template-columns: 50px auto;
	gap: 5px;
}

#ts-curriculum .curriculum-table .week > div {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
	width: 100%;
	height: 110px;
	background-color: #31A5FF;
	border-radius: 5px;
	font-family: 'TmoneyRoundWindExtraBold', 'Pretendard', 'Noto Sans KR';
	color: #fff;
	font-size: 12px;
}

#ts-curriculum .curriculum-table .book-scroll-list {
	display:grid;
	grid-template-rows: repeat(12,1fr);
	overflow-x: auto;
}

#ts-curriculum .curriculum-table .book-scroll-list::-webkit-scrollbar {
	display: none;
}

#ts-curriculum .curriculum-table .book-scroll-list .outline {
	display: inline-block;
	border-radius: 5px;
	border: 1px solid #ccc;
	padding: 10px 5px;
	margin-bottom: 10px;
	height: 110px;
	box-sizing:border-box;
	width:fit-content;
	/* min-width: 100%; */
}

#ts-curriculum .curriculum-table .book-scroll-list .outline .book-wrap {
	display: flex;
	flex-direction: row;
	/*
	border-radius: 5px;
	border: 1px solid #ccc;
	*/
}

#ts-curriculum .curriculum-table .book-scroll-list .outline .book-wrap > div {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
	width: 150px;
	border-right: 1px solid #eee;
	padding-left: 5px;
}

#ts-curriculum .curriculum-table .book-scroll-list .outline .book-wrap > div:last-child {
	border-right: none;
}

#ts-curriculum .curriculum-table .book-scroll-list .outline .book-wrap .book-preview {
	position: relative;
	/*margin: 0 auto;*/
}

#ts-curriculum .curriculum-table .book-scroll-list .outline .book-wrap .book-preview > img {
	width: 62px;
	height: 90px;
	border-radius: 5px;
	overflow: hidden;
	object-fit: cover;
}

#ts-curriculum .curriculum-table .book-scroll-list .outline .book-wrap .book-preview > span {
	position: absolute;
	width: 50px;
	left: 50%;
	top: 5px;
	transform: translateX(-50%);
	padding: 4px 0 2px 0;
	text-align: center;
	border-radius: 30px;
	font-family: 'TmoneyRoundWindRegular', 'Pretendard', 'Noto Sans KR';
	color: #fff;
	font-size: 11px;
	line-height: 11px;
	letter-spacing: -1px;
	z-index: 1;
}

#ts-curriculum .curriculum-table .book-scroll-list .outline .book-wrap .book-preview > span.icn-nonfic {
	/* background: rgba(255, 81, 81, 0.80); */
	background-color: #00b349;
	
}

#ts-curriculum .curriculum-table .book-scroll-list .outline .book-wrap .book-preview > span.icn-fic {
	/* background: rgba(92, 184, 0, 0.88); */
	background-color: #6d46fc;
}


#ts-curriculum .curriculum-table .book-scroll-list .outline .title-preview {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	word-break: keep-all;
	padding-right: 5px;
	/*width: 65px;*/
	width: calc(100% - 65px);
	height: auto;
	color: #555;
	text-align: left;
	font-size: 12px;
	font-weight: 400;
	line-height: 14px;
	letter-spacing: 0;
}
@media all and (min-width:668px) and (max-width:1279px) {
	#ts-curriculum .curriculum-table .book-scroll-list .outline {
		width:fit-content;
	}
	
	#ts-curriculum .curriculum-table .book-scroll-list .outline .book-wrap > div {
		/* width: 20%; */
	}
	
	#ts-curriculum .curriculum-table .book-scroll-list .outline .book-wrap > div.tripartition {
		width: 220px;
	}
	
	#ts-curriculum .curriculum-table .book-scroll-list .outline .book-wrap > div.tripartition .title-preview {
		/*width: 115px;*/
		width: calc(100% - 62px);
	}
}

@media all and (min-width:1280px) {
	
	#ts-curriculum .noDataImg {
		padding:50px 0;
	}
	#ts-curriculum .curriculum-table {
		grid-template-columns: 56px auto;
	}
	
	#ts-curriculum .curriculum-table .week > div {
		height: 97px;
		border-radius: 10px;
		font-size: 13px;
	}
	
	#ts-curriculum .curriculum-table .book-scroll-list .outline {
		display: inline-block;
		width:100%;
		height: 97px;
		border-radius: 10px;
		box-sizing:border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	
	#ts-curriculum .curriculum-table .book-scroll-list .outline .book-wrap > div {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		padding: 0 3px;
		gap: 0;
		/*width: 145px;*/
		width: 20%;
		border-right: 1px solid #eee;
	}
	
	#ts-curriculum .curriculum-table .book-scroll-list .outline .book-wrap > div:first-child {
		padding-left: 0px;
	}
	
	#ts-curriculum .curriculum-table .book-scroll-list .outline .book-wrap .book-preview > img {
		width: 50px;
		height: 75px;
		border-radius: 5px;
		overflow: hidden;
		object-fit: cover;
	}
	#ts-curriculum .curriculum-table .book-scroll-list .outline .book-wrap .book-preview > span {
		width: 40px;
	}
	
	#ts-curriculum .curriculum-table .book-scroll-list .outline .title-preview {
		-webkit-line-clamp: 4;
		padding-left: 5px;
		width:calc(100% - 50px);
		height: auto;
		text-align: left;
		font-size: 14px;
		line-height: 18px;
		word-break: keep-all;
		margin-right: 0;
		text-overflow: ellipsis;
	}
	#ts-curriculum .curriculum-table .book-scroll-list .outline .book-wrap > div.tripartition {
		/*width: 242px;*/
		width: 33.3333%;
	}
	
	#ts-curriculum .curriculum-table .book-scroll-list .outline .book-wrap > div.tripartition .title-preview {
		/*width: 157px;*/
		width: calc(100% - 65px);
	}
	/*
	#ts-curriculum .curriculum-table .book-scroll-list .outline .title-preview {
		width: 157px;
	}
	*/
	
}