/* 기본 배경설정 */

body.book {
  background: #FFFDEB url(../images/components/book-bg.png) repeat 0 0;
  background-size: 25%;
}

body.book .header-desk .header-gnb .gnb-box .txt {
  color: var(--txt-color4);
}

body.book .header-desk .header-gnb .gnb-box.on .txt {
  color: var(--yellow-color3);
  font-weight: 900;
}

/* 페이지네이션 북 CSS */
.page-item.active .page-link {
	background-color: var(--olive-color2);
  border-color: var(--olive-color2);
}
.page-link {
	color: var(--olive-color2);
}

/* 보카기본 클래스 수정 */
.hl-primary {
	color: var(--olive-color2);
	font-weight: 900;
}
.hl-secondary {
	color: #FF1100;
	font-weight: 900;
}
.page-menu-1 .btn-page-menu.on a,
.page-menu-1 .btn-page-menu a.on {
	background: var(--olive-color2);
	color: #fff;
  text-decoration: none;
}


/* 페이퍼북 */

.book-level-menu {
  display: flex;
  margin-top: 20px;
  margin-bottom: 10px;
  flex-shrink: 0;
  align-items: center;
}

.book-level-menu>div {
  flex-shrink: 0;
  margin: 0 5px;
  width: 130px;
}

.book-level-menu>div:first-child {
  margin-left: 0;
}

.book-level-menu>div>button {
  background: var(--olive-color2);
  padding: 13px 5px 14px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}

.book-level-menu>div>button.btn2 {
  background: var(--book-kpre);
}

.book-level-menu>div>button.btn3 {
  background: var(--book-ka);
}

.book-level-menu>div>button.btn4 {
  background: var(--book-kb);
}

.book-level-menu>div>button.btn5 {
  background: var(--book-kc);
}

.book-level-menu>div>button.btn6 {
  background: var(--book-kd);
}

.book-level-menu>div>button.btn7 {
  background: var(--book-1a);
}

.book-level-menu>div>button.btn8 {
  background: var(--book-1b);
}

.book-level-menu>div>button.btn9 {
  background: var(--book-1c);
}

.book-level-menu>div>button.btn10 {
  background: var(--book-1d);
}

.book-level-menu>div>button.btn11 {
  background: var(--book-2a);
}

.book-level-menu>div>button.btn12 {
  background: var(--book-2b);
}

.book-level-menu>div>button.btn13 {
  background: var(--book-2c);
}

.book-level-menu>div>button.btn14 {
  background: var(--book-2d);
}

.book-level-menu>div>button.btn15 {
  background: var(--book-3a);
}

.book-level-menu>div>button.btn16 {
  background: var(--book-3b);
}

.book-level-menu>div>button.btn17 {
  background: var(--book-3c);
}

.book-level-menu>div>button.btn18 {
  background: var(--book-3d);
}

.book-level-menu>div>button.btn19 {
  background: var(--book-4a);
}

.book-level-menu>div>button.btn20 {
  background: var(--book-4b);
}

.book-level-menu>div>button.btn21 {
  background: var(--book-4c);
}

.book-level-menu>div>button.btn22 {
  background: var(--book-4d);
}

.book-level-menu>div>button.btn23 {
  background: var(--book-5a);
}

.book-level-menu>div>button.btn24 {
  background: var(--book-5b);
}

.book-level-menu>div>button.btn25 {
  background: var(--book-5c);
}

.book-level-menu>div>button.btn26 {
  background: var(--book-5d);
}

.book-level-menu>div>button.btn27 {
  background: var(--book-6a);
}

.book-level-menu>div>button.btn28 {
  background: var(--book-6b);
}

.book-level-menu>div>button.btn29 {
  background: var(--book-6c);
}

.book-level-menu>div>button.btn30 {
  background: var(--book-6d);
}

.book-level-menu>div>button.on {
  background: #F5FFD8;
  border: 4px solid #849900;
  color: #849900;
  font-weight: 900;
  font-size: 1.1rem;
}


/* 시리즈 리스트 */

.book-series-list {
  flex-grow: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.book-series-list .loading-img {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}

.book-series-list .book-series-frame {
  flex-shrink: 0;
  width: 210px;
  margin: 0 15px;
  position: relative;
}

.book-series-list .book-series-frame:first-child {
  margin-left: 0;
}

.book-series-list .book-series-frame .book-frame__img {
  position: relative;
  padding-bottom: 140%;
}

.book-series-list .book-series-frame .book-frame__img:before {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  background: #eae9e0;
  width: 100%;
  height: 97%;
  z-index: 2;
  border-radius: 10px;
	overflow: hidden;
	transform: translateY(-50%);
} 

.book-series-list .book-series-frame .book-frame__img:after {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  background: #d9d9d9;
  width: 100%;
  height: 90%;
  z-index: 1;
  border-radius: 10px;
	overflow: hidden;
	transform: translateY(-50%);
}

.book-series-list .book-series-frame .book-frame__img>img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  border-radius: 10px;
  overflow: hidden;
}

.book-series-list .book-series-frame .book-frame__img>.book-frame__cnt {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  /* height: 100%; */
  z-index: 4;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: 9px 0 8px;
  font-weight: 700;
	color: var(--yellow-color3);
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	font-size: 20px;
}

.book-series-list .book-series-frame .book-frame__txt h3 {
  text-align: center;
  font-weight: 400;
  font-size: 1.25rem;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 20px;
}

.book-series-list .book-series-frame .book-frame__badge {
  background: var(--olive-color2);
  padding: 7px 5px 8px;
  border-radius: 6px;
  overflow: hidden;
  width: auto;
  display: block;
  text-align: center;
  line-height: 1;
  font-weight: 900;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  color: #fff;
}
.book-series-list .book-series-frame .book-frame__badge::first-letter {
  color: #FFD600;
  margin-right: 1px;
}
.book-series-list .book-series-frame.on .book-frame__txt h3 {
	font-weight: 900;
	color: var(--olive-color2);
}
.book-series-list .book-series-frame.on .book-frame__img>.book-frame__cnt {
	background: var(--olive-color2);
	color: #fff;
}

/* 메인페이지 최근학습목록 */

.recent-book-list--main {
  display: flex;
  background: #F0F6FF;
  border: 2px solid #A0C2FF;
  align-self: stretch;
  align-items: center;
  padding: 0 20px;
  margin: 10px 0;
  border-radius: 20px;
  margin-right: 30px;
  padding-top: 40px;
  position: relative;
}

.recent-book-list--main .recent-book-list--main__title {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--blue-color2);
}
.recent-book-list--main .recent-book-list--main__more {
	position: absolute;
	right: 10px;
	top: 10px;
	background: var(--olive-color2);
	padding: 3px 10px;
	border-radius: 8px;
	overflow: hidden;
	font-weight: 900;
	color: #fff;
}
.recent-book-list--main .book-frame {
  width: 210px;
  margin-bottom: 0;
}

.recent-book-list--main .book-frame:last-child {
  margin-left: 10px;
}


/* 시리지 디테일(책정보) */

.idic-book-column {
  display: flex;
  padding-top: 50px;
}

.book-list-section {
  display: flex;
  height: calc(100% - 70px);
  padding-bottom: 60px;
}

.subpage-title .series_cnt {
  margin-left: 80px;
  position: relative;
}

.subpage-title .series_cnt:before {
  content: '';
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-40%);
  width: 2px;
  height: 50%;
  background: #828282;
}

.idic-book-list-column {
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
	flex-wrap: wrap;
	/* display: grid;
	grid-template-columns: 2fr 2fr 2fr 2fr 2fr;
	grid-auto-rows: 2fr;
	gap: 3%; */
  overflow-y: scroll;
  height: 100%;
  width: 100%;
}
.idic-book-list-column .book-frame {
	width: 220px;
	margin-bottom: 3em;
}
.book-info-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 0;
}
/* .book-list-section.on .idic-book-list-column {
	grid-template-columns: 2fr 2fr 2fr;
} */
.book-list-section.on .idic-book-list-column .book-frame {
	width: 210px;
}
.book-list-section.on .book-info-box {
  width: 47%;
  border-left: 1px solid #bdbdbd;
  background: #fff;
  /* padding: 5px; */
  flex-shrink: 0;
}

.book-info-box .loading-img {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
}

.book-info-box>div {
  flex-grow: 1;
  width: 100%;
  height: 100%;
}


/* 북레벨테스트 알림 */

.book-lat-up-alert {
  border: 2px solid #FF9600;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  padding: 10px;
  font-size: 1.25rem;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  background: #fff;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.book-lat-up-alert>span {
  color: #FF9600;
  font-weight: 900;
}
.book-lat-up-alert2 {
	text-align: center;
	margin-bottom: 20px;
}

/* 레벨업 테스트 */

.blat-up-chart-box,
.blat-up-detail-box {
  position: relative;
  overflow: hidden;
}
.blat-up-chart-box {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow-y: scroll;
}
.blat-up-chart-box .blat-up-chart {
	flex-grow: 1;
}
.idic-book-hlist--hori {
  display: flex;
  height: auto;
	align-items: center;
	justify-content: center;
	overflow-y: scroll;
	position: relative;
}

.idic-book-hlist-column aside {
  width: 320px;
  /* height: 70%; */
  background: #fafafa;
  border: 1px solid #e6e6e6;
  padding: 15px 25px;
  margin-right: 5px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all .2s;
}

.idic-book-hlist-column aside.active {
  /* width: 60%; */
  /* height: 85%; */
  border: 3px solid #FFC01D;
  background: #fff;
}

/* .idic-book-hlist-column>aside.active>*:not(p) {
  transform: scale(1.2);
} */

.idic-book-hlist-column aside.active>p>a {
  font-size: 1.25rem;
}

.idic-book-hlist-column aside>h2 {
  color: #ff9600;
  text-align: center;
  font-weight: 900;
}

.idic-book-hlist-column aside>h2>small {
  display: block;
  font-size: 14px;
  color: #828282;
  font-weight: 900;
}

.idic-book-hlist-column aside>p {
  display: block;
  text-align: center;
}

.idic-book-hlist-column aside>p>a {
  width: 100%;
  color: #fff;
  border: solid 1px #849900;
  font-weight: 900;
  padding: 9px;
  background-color: #849900;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

.idic-book-hlist-column aside.active>p>a,
.idic-book-hlist-column aside>p>a:hover {
  color: #FFFFFF;
  border: solid 1px #849900;
  background-color: #849900;
}

.idic-book-hlist-column aside>.chart {
  /* float: left; */
  width: 100%;
  height: auto;
  text-align: center;
  position: relative;
  margin: 0;
  padding: 0;
	line-height: 0;
	margin-bottom: 20px;
}

.idic-book-hlist-column aside>.chart>h3 {
  font-size: 22px;
  text-align: center;
  width: 90px;
  height: 90px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  z-index: 1;
  border: 6px solid #FFB800;
  background-color: #FFFFFF;
  color: #828282;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.idic-book-hlist-column aside>.chart>h3>div:last-child {
  margin-bottom: .2em;
}

.idic-book-hlist-column aside>.chart>h3 strong {
  font-size: 120%;
  color: #849900;
  line-height: 1;
  font-weight: 900;
}

.idic-book-hlist-column aside>.chart>h3 small {
  display: block;
  font-size: 14px;
}

.blat-up-detail-box {
  overflow-y: scroll;
  padding: 20px 30px;
}

.blat-up-detail-box .blat-up-table .book-frame {
  width: 70px;
  margin: 0 auto;
}

.blat-up-detail-box .blat-up-table .book-frame .book-frame__img img {
  border-radius: 10px;
}

.blat-up-detail-box .blat-up-table .level-icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-weight: 900;
  background-color: #CBC41E;
  color: #FFFFFF;
  border-radius: 20px;
}

.blat-up-detail-box .blat-up-table .level-icon.e {
  background-color: #FFB800;
}

.blat-up-detail-box .blat-up-table .level-label {
  display: inline-block;
  width: auto;
  padding: 2px 10px 3px;
  font-size: 1rem;
  font-weight: 900;
  background-color: #849900;
  color: #FFFFFF;
  border-radius: 3px;
}

.blat-up-detail-box .blat-up-table .level-label:first-letter {
  color: #FFDA1B;
}

.blat-up-detail-box .blat-up-table .level-result-o {
  font-weight: 900;
  color: var(--olive-color2);
}

.blat-up-detail-box .blat-up-table .level-result-x {
  font-weight: 900;
  color: var(--red-color3);
}


/* 북레벨 */

.book .my-level>a .level {
  color: var(--olive-color2);
}




/* 북레벨테스트 가이드 */
.blat_guide_section {
	background: transparent;
	overflow-y: scroll;
 }
 .blat_guide_section .level-guide-row {
	display: grid;
	grid-template-columns: 2fr 2fr;
	gap: 20px;
	padding: 10px 0;
 }
 .blat_guide_section .level-guide-row.only-txt {
	grid-template-columns: 2fr;
 }
 /* .blat_guide_section .level-guide-row .img-level-ex {
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid #dbdbdb;
 } */
 
 .blat_guide_section .guide-header-wrap {
	display: flex;
 }
 
 .blat_guide_section .numbering-blue {
	border: 1px solid #849900;
	background: #fff;
	color: #849900;
	font-weight: 700;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	font-size: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-right: 15px;
 }
 
 .blat_guide_section .txt-sky-h1 {
	color: #849900;
	font-size: 1.5rem;
	padding-bottom: 0;
	margin: 0;
	line-height: 1.6;
	margin-bottom: 8px;
	font-weight: 900;
	word-break: keep-all;
 }
 
 .blat_guide_section .txt-sky-h3 {
	font-size: 1.25rem;
	color: #828282;
	word-break: keep-all;
 }
 
 .blat_guide_section .blat-grid-section {
	display: grid;
	grid-template-columns: 2fr 2fr 2fr;
	gap: 10px;
	margin-top: 10px;
 }
 
 .blat_guide_section .blat-grid-section .blat-grid-row .guide-img-wrap {
	padding-bottom: 90%;
	position: relative;
 }
 
 .blat_guide_section .blat-grid-section .blat-grid-row .guide-img-wrap>img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
 }
 
 .blat_guide_section .blat-grid-section .blat-grid-row .grid-row-txt {
	padding: 0 10px;
	margin: 10px 0;
 }
 
 .blat_guide_section .blat-grid-section .blat-grid-row .level-header {
	font-weight: 900;
	font-size: 1.5rem;
 }


/* 레벨별색상처리 */
.lat-list-box .lat-list .lat-box.lat-box-K .lat-box-txt__title {
	color: var(--book-kb);
}
.lat-list-box .lat-list .lat-box.lat-box-K .lat-box-btn .btn-lat {
	border-color: var(--book-kb);
	color: var(--book-kb);
}
.lat-list-box .lat-list .lat-box.lat-box-K .lat-box-btn .btn-lat.btn-lat-test {
	background: var(--book-kb);
	border: 1px solid var(--book-kb);
	color: #fff;
}
.lat-list-box .lat-list .lat-box.lat-box-1 .lat-box-txt__title {
	color: var(--book-1b);
}
.lat-list-box .lat-list .lat-box.lat-box-1 .lat-box-btn .btn-lat {
	border-color: var(--book-1b);
	color: var(--book-1b);
}
.lat-list-box .lat-list .lat-box.lat-box-1 .lat-box-btn .btn-lat.btn-lat-test {
	background: var(--book-1b);
	border: 1px solid var(--book-1b);
	color: #fff;
}
.lat-list-box .lat-list .lat-box.lat-box-2 .lat-box-txt__title {
	color: var(--book-2c);
}
.lat-list-box .lat-list .lat-box.lat-box-2 .lat-box-btn .btn-lat {
	border-color: var(--book-2c);
	color: var(--book-2c);
}
.lat-list-box .lat-list .lat-box.lat-box-2 .lat-box-btn .btn-lat.btn-lat-test {
	background: var(--book-2c);
	border: 1px solid var(--book-2c);
	color: #fff;
}
.lat-list-box .lat-list .lat-box.lat-box-3 .lat-box-txt__title {
	color: var(--book-3c);
}
.lat-list-box .lat-list .lat-box.lat-box-3 .lat-box-btn .btn-lat {
	border-color: var(--book-3c);
	color: var(--book-3c);
}
.lat-list-box .lat-list .lat-box.lat-box-3 .lat-box-btn .btn-lat.btn-lat-test {
	background: var(--book-3c);
	border: 1px solid var(--book-3c);
	color: #fff;
}
.lat-list-box .lat-list .lat-box.lat-box-4 .lat-box-txt__title {
	color: var(--book-4b);
}
.lat-list-box .lat-list .lat-box.lat-box-4 .lat-box-btn .btn-lat {
	border-color: var(--book-4b);
	color: var(--book-4b);
}
.lat-list-box .lat-list .lat-box.lat-box-4 .lat-box-btn .btn-lat.btn-lat-test {
	background: var(--book-4b);
	border: 1px solid var(--book-4b);
	color: #fff;
}
.lat-list-box .lat-list .lat-box.lat-box-5 .lat-box-txt__title {
	color: var(--book-5b);
}
.lat-list-box .lat-list .lat-box.lat-box-5 .lat-box-btn .btn-lat {
	border-color: var(--book-5b);
	color: var(--book-5b);
}
.lat-list-box .lat-list .lat-box.lat-box-5 .lat-box-btn .btn-lat.btn-lat-test {
	background: var(--book-5b);
	border: 1px solid var(--book-5b);
	color: #fff;
}

/*
  # 작업일   : 2022. 12. 20
  # 작업자   : 김영재
  # 작업내용  : 레벨별 신규 색상 적용을 신규 클래스 및 신규 사용자 속성으로 처리하였습니다.
 */
:root{
  --book-kpre-202212:#ff9b9b;
  --book-ka-202212:#ff8383;
  --book-kb-202212:#ff7575;
  --book-kc-202212:#ff6666;
  --book-kd-202212:#ff5858;
  --book-1a-202212:#ffae00;
  --book-1b-202212:#ff9600;
  --book-1c-202212:#ff8400;
  --book-1d-202212:#ff7200;
  --book-2a-202212:#abea75;
  --book-2b-202212:#98d568;
  --book-2c-202212:#85bf5b;
  --book-2d-202212:#72aa4e;
  --book-3a-202212:#3dc1f8;
  --book-3b-202212:#36abf1;
  --book-3c-202212:#3096ea;
  --book-3d-202212:#2980e3;
  --book-4a-202212:#eb3fb0;
  --book-4b-202212:#d6389d;
  --book-4c-202212:#c23189;
  --book-4d-202212:#ad2a76;
}

.lat-list-box .lat-list .lat-box.lat-box-K.color-change-202212 .lat-box-txt__title {
  color: var( --book-kc-202212);
}
.lat-list-box .lat-list .lat-box.lat-box-K.color-change-202212 .lat-box-btn .btn-lat {
  border-color: var( --book-kc-202212);
  color: var( --book-kc-202212);
}
.lat-list-box .lat-list .lat-box.lat-box-K.color-change-202212 .lat-box-btn .btn-lat.btn-lat-test {
  background: var( --book-kc-202212);
  border: 1px solid var( --book-kc-202212);
  color: #fff;
}
.lat-list-box .lat-list .lat-box.lat-box-1.color-change-202212 .lat-box-txt__title {
  color: var(--book-1c-202212);
}
.lat-list-box .lat-list .lat-box.lat-box-1.color-change-202212 .lat-box-btn .btn-lat {
  border-color: var(--book-1c-202212);
  color: var(--book-1c-202212);
}
.lat-list-box .lat-list .lat-box.lat-box-1.color-change-202212 .lat-box-btn .btn-lat.btn-lat-test {
  background: var(--book-1c-202212);
  border: 1px solid var(--book-1c-202212);
  color: #fff;
}
.lat-list-box .lat-list .lat-box.lat-box-2.color-change-202212 .lat-box-txt__title {
  color: var(--book-2c-202212);
}
.lat-list-box .lat-list .lat-box.lat-box-2.color-change-202212 .lat-box-btn .btn-lat {
  border-color: var(--book-2c-202212);
  color: var(--book-2c-202212);
}
.lat-list-box .lat-list .lat-box.lat-box-2.color-change-202212 .lat-box-btn .btn-lat.btn-lat-test {
  background: var(--book-2c-202212);
  border: 1px solid var(--book-2c-202212);
  color: #fff;
}
.lat-list-box .lat-list .lat-box.lat-box-3.color-change-202212 .lat-box-txt__title {
  color: var(--book-3c-202212);
}
.lat-list-box .lat-list .lat-box.lat-box-3.color-change-202212 .lat-box-btn .btn-lat {
  border-color: var(--book-3c-202212);
  color: var(--book-3c-202212);
}
.lat-list-box .lat-list .lat-box.lat-box-3.color-change-202212 .lat-box-btn .btn-lat.btn-lat-test {
  background: var(--book-3c-202212);
  border: 1px solid var(--book-3c-202212);
  color: #fff;
}
.lat-list-box .lat-list .lat-box.lat-box-4.color-change-202212 .lat-box-txt__title {
  color: var(--book-4c-202212);
}
.lat-list-box .lat-list .lat-box.lat-box-4.color-change-202212 .lat-box-btn .btn-lat {
  border-color: var(--book-4c-202212);
  color: var(--book-4c-202212);
}
.lat-list-box .lat-list .lat-box.lat-box-4.color-change-202212 .lat-box-btn .btn-lat.btn-lat-test {
  background: var(--book-4c-202212);
  border: 1px solid var(--book-4c-202212);
  color: #fff;
}
.lat-list-box .lat-list .lat-box.lat-box-5.color-change-202212 .lat-box-txt__title {
  color: var(--book-5b);
}
.lat-list-box .lat-list .lat-box.lat-box-5.color-change-202212 .lat-box-btn .btn-lat {
  border-color: var(--book-5b);
  color: var(--book-5b);
}
.lat-list-box .lat-list .lat-box.lat-box-5.color-change-202212 .lat-box-btn .btn-lat.btn-lat-test {
  background: var(--book-5b);
  border: 1px solid var(--book-5b);
  color: #fff;
}

.book-level-menu>div>button.btn2.color-change-202212:not(.on) {background:var(--book-kpre-202212);}
.book-level-menu>div>button.btn3.color-change-202212:not(.on) {background:var(--book-ka-202212);}
.book-level-menu>div>button.btn4.color-change-202212:not(.on) {background:var(--book-kb-202212);}
.book-level-menu>div>button.btn5.color-change-202212:not(.on) {background:var(--book-kc-202212);}
.book-level-menu>div>button.btn6.color-change-202212:not(.on) {background:var(--book-kd-202212);}
.book-level-menu>div>button.btn7.color-change-202212:not(.on) {background:var(--book-1a-202212);}
.book-level-menu>div>button.btn8.color-change-202212:not(.on) {background:var(--book-1b-202212);}
.book-level-menu>div>button.btn9.color-change-202212:not(.on) {background:var(--book-1c-202212);}
.book-level-menu>div>button.btn10.color-change-202212:not(.on) {background:var(--book-1d-202212);}
.book-level-menu>div>button.btn11.color-change-202212:not(.on) {background:var(--book-2a-202212);}
.book-level-menu>div>button.btn12.color-change-202212:not(.on) {background:var(--book-2b-202212);}
.book-level-menu>div>button.btn13.color-change-202212:not(.on) {background:var(--book-2c-202212);}
.book-level-menu>div>button.btn14.color-change-202212:not(.on) {background:var(--book-2d-202212);}
.book-level-menu>div>button.btn15.color-change-202212:not(.on) {background:var(--book-3a-202212);}
.book-level-menu>div>button.btn16.color-change-202212:not(.on) {background:var(--book-3b-202212);}
.book-level-menu>div>button.btn17.color-change-202212:not(.on) {background:var(--book-3c-202212);}
.book-level-menu>div>button.btn18.color-change-202212:not(.on) {background:var(--book-3d-202212);}
.book-level-menu>div>button.btn19.color-change-202212:not(.on) {background:var(--book-4a-202212);}
.book-level-menu>div>button.btn20.color-change-202212:not(.on) {background:var(--book-4b-202212);}
.book-level-menu>div>button.btn21.color-change-202212:not(.on) {background:var(--book-4c-202212);}
.book-level-menu>div>button.btn22.color-change-202212:not(.on) {background:var(--book-4d-202212);}





/* 레벨테스트 결과 */
.total-lat-table .hl-primary {
	color: var(--olive-color2);
}
.my-lat-table .point {
	color: var(--olive-color2);
}
.btn-result-levels {
	border-color: var(--olive-color2);
	background: #fffdeb;
}
.btn-result-levels strong {
	color: var(--olive-color2);
	font-weight: 900;
}
.btn-result-class {
	border-color: var(--olive-color2);
	background: var(--olive-color2);
}
.btn-result-levels>svg {
	width: 20px;
	margin-left: 5px;
}


/* 레벨업 테스트 */
.lat-explain .lat-level-box {
	display: grid;
	grid-template-columns: 2fr 2fr 2fr 2fr;
	gap: 10px;
}
.lat-explain .lat-level-box .lat-level {
	background: #FFFDEB;
	border: 1px solid #CBC41E;
	border-radius: 10px;
	padding: 5px;
	text-align: center;
}
.lat-explain .lat-level-box .lat-level h4 {
	font-weight: 900;
	font-size: 22px;
	color: #849900;
}
.lat-explain .lat-level-box .lat-level p {
	margin-bottom: 0px;
	line-height: 1.5;
}
.lat-explain .book-kind-box {
	display: grid;
	grid-template-columns: 2fr 2fr;
	gap: 10px;
}
.lat-explain .book-kind-box .book-kind {
	background: #FFFDEB;
	border: 1px solid #CBC41E;
	border-radius: 10px;
	padding: 10px;
	text-align: center;
}
.lat-explain .book-kind-box .book-kind h4 {
	font-weight: 900;
	font-size: 22px;
	color: #849900;
}
.lat-explain .book-kind-box .book-kind h5 {
	font-weight: 900;
	font-size: 18px;
	color: #444;
	margin-top: 15px;
}
.lat-explain .book-kind-box .book-kind p {
	margin-bottom: 0px;
}
.blat-up-chart-box .my-level-list {
	width: 250px;
	margin: 30px auto;
}
.blat-up-chart-box .my-level-list a {
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 30px;
	padding-right: 30px;
	background: #CBC41E;
	border: 1px solid #CBC41E;
}
.blat-up-chart-box .my-level-list a svg {
	width: 15%;
}
.blat-up-chart-box .my-level-table {
	width: 560px;
	margin: 0 auto;
	position: relative;
	margin-bottom: 30px;
}
.blat-up-table .book-kind-icon {
	display: inline-block;
	width: 22px;
	height: 22px;
	line-height: 24px;
	font-size: 11px;
	font-weight: 900;
	background-color: #CBC41E;
	color: #FFFFFF;
	border-radius: 20px;
}
.blat-up-table .book-kind-icon.e
{ background-color: #FFB800; }
.blat-up-table .table-book-img {
	position: relative;
	padding-bottom: 120%;
	width: auto;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid #dbdbdb;
}
.blat-up-table .table-book-img img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.blat-up-table .table-book-img.table-book-img-2 {
	background: #ededed;
}
.blat-up-table .table-book-img.table-book-img-2 img {
	top: 50%;
	transform: translateY(-50%);
	height: auto;
}
.level-label {
	background: var(--olive-color2);
	padding: 2px 10px 3px;
	border-radius: 6px;
	overflow: hidden;
	color: #fff;
	font-weight: 900;
	display: block;
	max-width: 60px;
	text-align: center;
}
.level-label::first-letter {
	color: #FFDA1B;
}
/* lat-box 상태 css */
.lat-list-box .lat-list .lat-box.complete {
	background: #F4F4F4;
}
.lat-list-box .lat-list .lat-box.complete .lat-box-btn .btn-lat.btn-lat-test {
	background: #FFFDEB;
	border-color: #FF9600;
	color: #FF9600;
}
.lat-list-box .lat-list .lat-box.continue {
	background: #F0F6FF;
	border-color: #A0C2FF;
	box-shadow: 0 0 0 2px #A0C2FF;
}
.lat-list-box .lat-list .lat-box.continue .lat-box-btn .btn-lat.btn-lat-test {
	background: #A0C2FF;
	border-color: #6098FF;
	color: #fff;
}


/* 북보카 팝업 레이아웃 CSS */
.full-popup-contents .full-popup-header.study-layout {
	background: #849900;
}
.full-popup-contents .full-popup-header.study-layout .sub-title {
	background: #444;
}
.full-popup-contents .full-popup-header.study-layout .sub-title:after {
	border: 10px solid #444;
	border-right: 5px solid transparent;
	border-bottom: 10px solid transparent;
}


/* 보카에 있는 CSS 수정 */
.preview-img.on {
	border: 1px solid var(--olive-color2);
	box-shadow: 0 0 0 2px var(--olive-color2);
}


/* 북리스트 */
.idicbook-main-list-container .select-series-list.on {
	padding: 1em 0;
	background: rgba(255, 212, 212, 0.4);
	min-height: 500px;
	position: relative;
}
.idicbook-main-list-container .select-series-list.on .loading-img {
	margin: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.phonics-lv-txt-container {
	margin-bottom: 30px;
}
.phonics-lv-txt-container .txt-title {
	font-weight: 900;
	font-size: 26px;
	margin-bottom: 20px;
	padding-left: 5px;
	color: #444;
}
.phonics-lv-txt-container .txt-box {
	border-radius: 15px;
	overflow: hidden;
	border: 1px solid #dbdbdb;
	padding: 15px 15px;
	color: #666;
	text-align: center;
}
.phonics-lv-txt-container .txt-box > a {
	display: block;
	background: #FFFDEB;
	border: 1px solid #FF9600;
	color: #FF9600;
	padding: 10px;
	text-align: center;
	border-radius: 10px;
	margin-top: 20px;
	font-weight: 700;
}


/* 파닉스, 사이트워드 - 북액티비티 버튼 */
.btn-activity-container {
	position: absolute;
	bottom: 40%;
	left: 50%;
	transform: translateX(-50%);
	width: 10px;
	height: 10px;
	overflow: hidden;
	transition: bottom .3s, width .3s .3s, height .3s .3s;
}
.btn-activity-container .btn-activity-box {
	background: #fff8e7;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 10px 0 15px;
	position: relative;
	border-radius: 30px;
	box-shadow: 1px 1px 5px rgb(0 0 0 / 10%);
}
.btn-activity-container .btn-activity-box:after {
	content: '';
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	border: 15px solid #fff8e7;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 15px solid transparent;
}
.btn-activity-container .btn-activity {
	width: 150px;
	display: block;
	flex-shrink: 0;
}

.book-btn--activity.on .btn-activity-container {
	opacity: 1;
	width: 350px;
	height: 100px;
	bottom: 100%;
	z-index: 3;
}
.book-btn--activity.on.sight-word .btn-activity-container {
	width: 200px;
}