/* 팝업 z-index */
/* 
	전체화면팝업:	30
	컨텐츠만큰팝업: 20
*/

/* 리셋 */

:root {
  --blue-color1: #A0C2FF;
  --blue-color2: #6098FF;
  --txt-color1:	#FFFFFF;
  --txt-color2:	#E0E0E0;
  --txt-color3:	#BDBDBD;
  --txt-color4:	#828282;
  --txt-color5:	#444444;
  --txt-color2gray:	#F8F8F8;
  --bg-color2b:	#F0F6FF;
  --bg-color3y:	#FFFDEB;
  --bg-color4r:	#FFF2F3;
  --bg-color6p:	#F6F1FF;
  --red-color2:	#FF8E94;
  --red-color3:	#FF5A78;
  --yellow-color2: #FFB800;
  --yellow-color3: #FF9600;
  --green-color3: #59CB19;
  --green-color4: #09BF06;
  --green-color5: #00789D;
  --purple-color2: #D885FF;
  --bg-color5gr: #F5FFD8;
  --olive-color1: #CBC41E;
  --olive-color2: #849900;
  --orange-color1: #FF8400;
  /* 보카레벨별 color */
  --voca-500: #FFDA1B;
  --voca-1000: #FFB800;
  --voca-1500: #FF7200;
  --voca-2000: #F42D51;
  --voca-2500: #FF5A78;
  --voca-3000: #B230E2;
  --voca-3500: #8C00E1;
  --voca-4000: #1400FF;
  --voca-4500: #005AFF;
  --voca-5000: #6098FF;
  --voca-5500: #04A427;
  --voca-6000: #59CB19;
  /* 북레벨별 color	*/
  --book-kpre: #ffda1b;
  --book-ka: #ffb800;
  --book-kb: #ff9600;
  --book-kc: #ff8400;
  --book-kd: #ff7200;
  --book-1a: #a0c2ff;
  --book-1b: #6098ff;
  --book-1c: #005aff;
  --book-1d: #0038ff;
  --book-2a: #c1f332;
  --book-2b: #a4e42f;
  --book-2c: #59cb19;
  --book-2d: #09bf06;
  --book-3a: #ffb4b7;
  --book-3b: #ff8e94;
  --book-3c: #ff5a78;
  --book-3d: #f42d51;
  --book-4a: #d7afff;
  --book-4b: #d885ff;
  --book-4c: #c35bea;
  --book-4d: #b230e2;
  --book-5a: #3ed9ee;
  --book-5b: #20c7de;
  --book-5c: #13b1d3;
  --book-5d: #0498d7;
  --book-6a: #e7aa50;
  --book-6b: #d18a00;
  --book-6c: #bd7d00;
  --book-6d: #945000;
}

html,
body {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
  letter-spacing: -0.5px;
  line-height: 1.5;
}

a {
  display: block;
  text-decoration: none;
  color: var(--txt-color5);
}
a:hover,
a:focus,
a:visited {
	text-decoration: none;
}

/* a:hover {text-decoration: none;}	*/

img,
svg	{
  vertical-align: top;
  width: 100%;
}

object {
  display: block;
  width: 100%;
  pointer-events: none;
}

button {
  vertical-align: top;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

pre	{
  white-space: pre-wrap;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 14px;
}

.inner {
  width: 100%;
  margin: 0	auto;
  padding: 0 10px;
}

.inner-60 {
  /* 안씀 */
  width: 80% !important; 
  margin: 0	auto !important;
}

.tb-inner {
  width: 80% !important;
  max-width: 1000px;
  margin: 0	auto !important;
  padding: 0 10px;
}

.two-column-layout {
  display: flex;
  justify-content: space-between;
}
form {
	margin:	0;
}


/* a 태그	애니메이션 START	*/

@keyframes pulse {
  from {
	-webkit-transform: scale(1);
	transform: scale(1);
  }
  50% {
	-webkit-transform: scale(1.4);
	transform: scale(1.4);
  }
  to {
	-webkit-transform: scale(1);
	transform: scale(1);
  }
}


/* a 태그	애니메이션 END */


/* 공통 애니메이션	START */

@keyframes gnb_ani {
  100% {
	transform: translateY(-2px);
  }
}


/* 공통 애니메이션	END	*/


/* 로딩 그라데이션	애니메이션 START	*/

@keyframes loadingGradientAni {
  0% {
	background-position: 0%	50%
  }
  100% {
	background-position: 100% 50%
  }
}


/* 로딩 그라데이션	애니메이션 END */


/* 로고 */

.logo {
  width: 105px;
  position:	relative;
  z-index: 10;
}

.logo a	{
  width: 100%;
  padding-bottom: 67%;
  position:	relative;
}

.logo a	img,
.logo a	object {
  position:	absolute;
  left:	0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}




/* 버튼-메뉴 */

.btn-menu {
  width: 48px;
  position:	relative;
}

.btn-menu a	{
  width: 100%;
  padding-bottom: 100%;
  position:	relative;
}

.btn-menu a	img,
.btn-menu a	object {
  position:	absolute;
  left:	0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}


/* 버튼-검색 */

.btn-search	{
  width: 70px;
}

.btn-search	button {
  width: 100%;
  padding: 0;
  padding-bottom: 100%;
  position:	relative;
  border: none;
  background: none;
}

.btn-search	button img,
.btn-search	button object {
  position:	absolute;
  left:	0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}


/* 버튼-마이페이지	*/

.btn-mypage	{
  width: 48px;
}

.btn-mypage	a {
  width: 100%;
  padding-bottom: 100%;
  position:	relative;
}

.btn-mypage	a img,
.btn-mypage	a object {
  position:	absolute;
  left:	0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}


/* 단어 이미지 */

.preview-img {
  width: 100%;
  padding-bottom: 100%;
  position:	relative;
  border: 1px solid	var(--txt-color3);
  border-radius: 10px;
  overflow:	hidden;
}

.preview-img.on	{
  border: 1px solid	var(--blue-color2);
  box-shadow: 0	0 0	2px	var(--blue-color2);
}

.preview-img img {
  position:	absolute;
  left:	0;
  top: 0;
  width: 100%;
  height: 100%;
}


/* 학습 중인 단어	*/


/* .visual-voca-current-step {
	max-width: 600px;
	width: 100%;
	margin:	0 auto;
	position: absolute;
	left: 50%;
	bottom:	0;
	transform: translate(-50%, 60%);
	z-index: 1;
} */

.voca-current-step {
  background: #fff;
  border-radius: 40px;
  overflow:	hidden;
  border: 1px solid	var(--border-color1);
  box-shadow: 0px 4px 4px rgba(0, 0, 0,	0.25);
}

.voca-current-step>a {
  display: flex;
  padding: 20px	20px;
  align-items: center;
  justify-content: space-between;
  position:	relative;
}

.voca-current-step .voca-current-step__txt {
  margin-bottom: 0;
  flex-shrink: 0;
  margin-right:	40px;
  padding-left:	10px;
  text-align: center;
  min-width: 100px;
}

.voca-current-step .voca-current-step__voca	{
  margin-right:	200px;
  padding-left:	30px;
  border-left: 1px solid var(--txt-color3);
}

.voca-current-step .voca-current-step__img {
  position:	absolute;
  right: 0;
  top: 0;
  width: 220px;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.voca-current-step .voca-current-step__img .voca-current-step__img__bg {
  width: 100%;
  height: 100%;
  /* background: linear-gradient(88.94deg, #FFFFFF 6%, rgba(255, 255, 255, 0) 44.32%); */
}

.voca-current-step .voca-current-step__title {
  color: var(--txt-color4);
  font-size: 5px;
  font-size: 1.25rem;
  font-weight: 700;
}

.voca-current-step .voca-current-step__list	{
  color: var(--txt-color5);
  word-break: keep-all;
  font-size: 1.5rem;
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
  gap: 5px;
  margin: 10px 0 10px;
  width: 580px;
}
.voca-current-step .voca-current-step__list.txt-box	{
	display: block;
}
.voca-current-step .voca-current-step__day {
  color: var(--blue-color2);
  font-size: 1.5rem;
  font-weight: 900;
}

.voca-current-step .voca-current-step__day>span	{
  color: var(--txt-color4);
  font-size: 1.5rem;
  font-weight: 400;
}

.voca-current-step .voca-current-step__step	{
  color: var(--blue-color2);
  font-weight: 900;
  font-size: 3rem;
  line-height: 1;
  margin: 5px 0px 7px;
}

.voca-current-step .right-arrow	{
  width: 30px;
}


/* old,	new	선택 메뉴 */

.voca-version-selector {
  width: 270px;
  display: flex;
  border-radius: 10px;
  overflow:	hidden;
  box-shadow: 0px 4px 4px rgba(0, 0, 0,	0.25);
}

.voca-version-selector .voca-version-selector__box {
  width: 50%;
}

.voca-version-selector .voca-version-selector__box a {
  text-align: center;
  padding: 10px	5px;
  background: #fafafa;
  font-size: 1rem;
  font-weight: 400;
  color: #828282;
}

.voca-version-selector .voca-version-selector__box a>div:first-child {
  font-weight: 900;
  line-height: 1.2;
}

.voca-version-selector .voca-version-selector__box.old a>div:first-child {
  color: #FF9600;
}

.voca-version-selector .voca-version-selector__box.new a>div:first-child {
  color: #005AFF;
}

.voca-version-selector .voca-version-selector__box a>div:last-child	{
  line-height: 1.4;
  font-size: 12px;
}

.voca-version-selector .voca-version-selector__box.old.on a	{
  background: #FF9600;
  color: #fff;
}

.voca-version-selector .voca-version-selector__box.old.on a>div:first-child	{
  color: #fff;
}

.voca-version-selector .voca-version-selector__box.new.on a	{
  background: #005AFF;
  color: #fff;
}

.voca-version-selector .voca-version-selector__box.new.on a>div:first-child	{
  color: #fff;
}

/* 폰트-스타일 */
.hl-primary	{
	font-weight: 900;
	color: var(--blue-color2);
}
.hl-secondary {
	font-weight: 900;
	color: var(--red-color3);
}
/* 버튼-스타일 */

.btn-style1	{
  width: 100%;
  padding: 1em 1em;
  border-radius: 50px;
  overflow:	hidden;
  font-size: 1.4rem;
  text-align: center;
  border: 2px solid	#fff;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-style1	svg,
.btn-style1	img	{
  width: 10%;
  margin-right:	10px;
  margin-top: 2px;
}

.btn-style2	{
  width: 100%;
  padding: 0.5em 0.5em;
  border-radius: 0.7em;
  overflow:	hidden;
  font-size: 1.4rem;
  text-align: center;
  border: 2px solid	#fff;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: keep-all;
}

.btn-style2	img,
.btn-style2	object {
  width: 17%;
  margin-right:	10px;
  margin-top: 2px;
}

.btn-high-primary {
  background: var(--blue-color2);
  color: #fff;
  border-color:	var(--blue-color2);
  font-weight: 700;
}

.btn-high-warning {
  background: var(--red-color3);
  color: #fff;
  border-color:	var(--red-color3);
  font-weight: 700;
}

.btn-low-primary {
  background: #fff;
  color: var(--txt-color2);
  border-color:	var(--txt-color2);
}

.btn-white-primary {
  background: transparent;
  color: #fff;
  border-color:	#fff;
}

.btn-high-secondary	{
  background: var(--sub-color2);
  color: var(--blue-color2);
  border-color:	var(--blue-color2);
}

.btn-high-third	{
  background: var(--blue-color2);
  color: #fff;
  border-color:	#fff;
}

.btn-high-fourth {
  background: var(--txt-color3);
  color: #fff;
  border-color:	var(--txt-color3);
  font-weight: 700;
}


/* VOCA	BOX	*/

.voca-box {
  width: 270px;
  /* width:	auto; */
}

.voca-box .voca-box__img {
  width: 100%;
  height: 100%;
  padding-bottom: 90%;
  background-image:	url('../images/components/voca-box-img.png?v=2');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  margin: 0	auto;
  position:	relative;
  -webkit-filter: grayscale(0%);
}

.voca-box .voca-box__img__txt {
  position:	absolute;
  bottom: 13%;
  right: 50%;
  font-weight: 700;
  color: #fff;
  transform: translateX(66%) translateY(-40%) rotateX(23deg) rotateY(-14deg);
  font-size: calc(100vw	/ 40);
  line-height: 1;
  text-shadow: -2px	-2px 2px #000;
  width: 50%;
  text-align: center;
}

.voca-box.complete .voca-box__img {
  background-position: 100%	50%;
}

.voca-box.active .voca-box__img	{
  background-position: 0% 50%;
}

.voca-box.disabled .voca-box__img {
  opacity: 0.8;
  -webkit-filter: grayscale(100%);
}

.voca-box.disabled a {
  pointer-events: none;
  cursor: default;
}


/* 메뉴 */

.mobile-menu {
  width: 320px;
  border-left: 1px solid var(--border-color1);
  background: #f2f2f2;
  padding-bottom: 10px;
  height: 100%;
}

.mobile-menu .mobile-menu__title {
  color: var(--blue-color2);
  font-weight: 900;
  padding: 5px 10px;
}

.mobile-menu .mobile-menu__family {
  background: #F8F8F8;
  border-top: 1px solid	var(--border-color1);
  border-bottom: 1px solid var(--border-color1);
}

.mobile-menu .mobile-menu__family-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  padding-top: 0;
}

.mobile-menu .mobile-menu__family-list>div {
  max-width: 60px;
}

.mobile-menu .mobile-menu__q {
  margin-top: 1em;
  background: #F8F8F8;
}

.mobile-menu .mobile-menu__q_list {
  display: grid;
  grid-template-columns: 2fr 2fr;
  border-top: 1px solid	var(--border-color1);
}

.mobile-menu .mobile-menu__q_list>div {
  border-bottom: 1px solid var(--border-color1);
}

.mobile-menu .mobile-menu__q_list>div:nth-child(2n - 1)	{
  border-right:	1px	solid var(--border-color1);
}

.mobile-menu .mobile-menu__q_list a	{
  text-align: center;
  padding: 10px;
  background: #fff;
}

.mobile-menu .mobile-menu__vertical	{
  margin-top: 1em;
}

.mobile-menu .mobile-menu__vertical>div	{
  border-bottom: 1px solid var(--border-color1);
}

.mobile-menu .mobile-menu__vertical>div:first-child	{
  border-top: 1px solid	var(--border-color1);
}

.mobile-menu .mobile-menu__vertical	a {
  padding: 10px;
  background: #fff;
}

.mobile-menu .mobile-menu__title-row {
  display: flex;
  justify-content: space-between;
  padding: 15px	10px;
}

.mobile-menu .mobile-menu__title-row .mobile-menu_title-row__titile	{
  font-size: 1.25rem;
  color: var(--blue-color2);
  font-weight: 900;
  line-height: 1;
}

.mobile-menu .mobile-menu__title-row .btn-close	{
  width: 20px;
  height: 20px;
}


/* 나의 레벨 */

.my-level {
  border: 1px solid	var(--txt-color3);
  width: 150px;
  text-align: center;
  background: #fff;
  border-radius: 10px;
  position:	relative;
  box-shadow: 0px 4px 4px rgba(0, 0, 0,	0.25);
}


/* .voca-my-level:after	{
	content: '';
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border:	15px solid var(--txt-color2);
	border-right: 15px solid transparent;
	border-top:	15px solid transparent;
	border-bottom: 15px	solid transparent;
}
.voca-my-level:before {
	content: '';
	position: absolute;
	left: calc(100%	- 1px);
	top: 50%;
	transform: translateY(-50%);
	border:	15px solid #fff;
	border-right: 15px solid transparent;
	border-top:	15px solid transparent;
	border-bottom: 15px	solid transparent;
	z-index: 1;
} */

.my-level>a	{
  padding: 10px	5px;
}

.my-level>a	.title {
  font-size: 14px;
  line-height: 1;
}

.my-level>a	.level {
  font-size: 2rem;
  font-weight: 900;
  color: var(--blue-color2);
  line-height: 1;
  margin-top: 5px;
}


/* 프레임헤더 */

.frame-header {
  background: url('../images/components/frame-header-bg.png') no-repeat	0 50%;
  background-size: 100%	100%;
  text-align: center;
  position:	relative;
}

.frame-header .frame-header__txt {
  font-size: 1.5rem;
  color: #fff;
  font-weight: 900;
  padding: .6em	0.5em;
  line-height: 1;
}
.frame-header.frame-header--book {
	background:	#849900;
}

/* Day 선택박스	*/

.voca-q-day-nav	{
  display: flex;
  border: 2px solid	var(--blue-color2);
  border-radius: 50px;
  justify-content: space-around;
  background: var(--bg-color2);
  padding: 0 1em;
}

.voca-q-day-nav	a {
  line-height: 30px;
  font-size: 1rem;
  padding: 0.5em 0.5em;
  font-weight: 700;
  color: var(--txt-color3);
  line-height: 1.5;
}

.voca-q-day-nav	a.on {
  color: var(--blue-color2);
  font-weight: 900;
}


/* 스텝선택박스 */

.step-select-box {
  border-radius: 20px;
  overflow:	hidden;
  border: 2px solid	var(--main-color);
  background: #fff;
}

.step-select-box .frame-body {
  padding: 1em;
}

.step-select-box .frame-body .btn-step {
  margin-bottom: 10px;
}

.step-select-box .frame-body .btn-step:last-child {
  margin-bottom: 0;
}

.btn-step a	{
  color: #aaaaaa;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 0.7em 0.2em;
  background: #fff;
  text-align: center;
  border: 1px solid	var(--txt-color2);
  color: var(--txt-color3);
  border-radius: 7px;
  line-height: 1;
}

.btn-step.on a {
  border-color:	var(--blue-color2);
  color: var(--blue-color2);
  background: var(--sub-color2);
  /* display: flex;
	align-items: center;
	justify-content: center; */
}

.btn-step.off a	{
  color: var(--txt-color3);
  background: var(--bg-color2);
  opacity: .6;
}

.btn-step a	.btn-step__txt {
  display: inline-block;
  position:	relative;
}

.btn-step a	.btn-step__txt img,
.btn-step a	.btn-step__txt object {
  position:	absolute;
  left:	0;
  top: 0;
  width: auto;
  display: none;
}

.btn-step.on a .btn-step__txt {
  padding-left:	11%;
}

.btn-step.on a .btn-step__txt img,
.btn-step.on a .btn-step__txt object {
  display: block;
}


/* 서브메뉴	*/

.sub-menu-box .btn-step	a {
  text-align: left;
  padding-left:	1em;
}

.sub-menu-box .btn-step.on a .btn-step__txt	{
  padding-left:	0;
}


/* 테이블 스타일1	*/

.table-style1 {
  border: 1px solid	var(--txt-color2);
  overflow:	hidden;
  border-radius: 20px;
	background:	#fff;
}

.table-style1>table	{
  width: 100%;
  text-align: center;
}

.table-style1>table>thead {
  background: var(--txt-color2gray);
  color: var(--txt-color5);
  border-bottom: 1px solid var(--txt-color2);
}

.table-style1>table>thead th {
  padding: 1em 0.5em;
  font-size: 1rem;
  line-height: 1;
  font-weight: 900;
}

.table-style1>table>tbody tr {
  background: #fff;
  color: var(--txt-color5);
}

.table-style1>table>tbody td {
  padding: 0.9em 0.5em;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 400;
  border-top: 1px solid	var(--txt-color2);
}

.table-style1>table>tbody td.voca-level-title {
  font-weight: 900;
}

.table-style1>table>tbody td .txt-primary {
  color: var(--blue-color2);
}

.table-style1>table>tbody td .txt-secondary	{
  color: var(--sub-color1);
}

.table-style1>table>tbody tr.expire-row	{
  background: var(--sub-color2);
  color: var(--txt-color3);
}

.table-style1>table>tbody tr .check-icon {
  width: 15px;
  margin: 0	auto;
}


/* 테이블 스타일2	*/

.table-style2>table	{
  width: 100%;
  text-align: center;
  border-bottom: 1px solid var(--border-color1);
}

.table-style2 td,
.table-style2 th {
  padding: 10px	5px;
  background: #fff;
}

.table-style2 tbody	tr:nth-child(2n	- 1) td	{
  background: #f7f7f7;
}

.table-style2-vertical tbody tr:nth-child(2n - 1) th {
  background: #f7f7f7;
}

.table-style2 thead	{
  border-bottom: 1px solid var(--border-color1);
}

/* 테이블 스타일3	*/
.table-style3 {
	border:	1px	solid var(--txt-color2);
	overflow: hidden;
  border-radius: 20px;
}
.table-style3>table	{
  width: 100%;
  text-align: center;
	margin:	0;
}
.table-style3 thead	th {
	background:	#CBC41E;
	color: #fff;
	padding: .6em 0.5em;
}
.table-style3 td,
.table-style3 th {
  padding: 10px	5px;
  background: #fff;
	border:	none;
	vertical-align:	middle;
	font-size: 1.1rem;
}

.table-style3 tbody	tr:nth-child(2n	- 1) td	{
  background: #f7f7f7;
}

.table-style3-vertical tbody tr:nth-child(2n - 1) th {
  background: #f7f7f7;
}

.table-style3 thead	{
  border-bottom: 1px solid var(--border-color1);
}

/* 테이블 스타일4	*/
.table-style4 {
	border:	1px	solid var(--txt-color2);
	overflow: hidden;
  border-radius: 20px;
}
.table-style4>table	{
  width: 100%;
  text-align: center;
	margin:	0;
}
.table-style4 tfoot	td,
.table-style4 thead	th {
	background:	#6E6E6E;
	color: #fff;
	padding: .6em 0.5em;
}

.table-style4 td,
.table-style4 th {
  padding: 10px	5px;
  background: #fff;
	border:	none;
	vertical-align:	middle;
	font-size: 1.1rem;
	border-right: 1px solid	var(--txt-color2);
}
.table-style4 td.border_none,
.table-style4 th.border_none {
	border-right: none;
}
.table-style4 tbody	tr:nth-child(2n	- 1) td	{
  background: #f7f7f7;
}
.table-style4-vertical tbody tr:nth-child(2n - 1) th {
  background: #f7f7f7;
}

.table-style4 tbody	tr td.primary-bg,
.table-style4 tbody	tr th.primary-bg {
	background:	var(--blue-color2);
	color: #fff;
	font-weight: 700;
}
.table-style4 tbody	tr td.white-bg,
.table-style4 tbody	tr th.white-bg {
	background:	#fff;
}
.table-style4 tbody	tr td.text-left,
.table-style4 tbody	tr th.text-left	{
	text-align:	left;
}

.table-style4 thead	{
  border-bottom: 1px solid var(--border-color1);
}


/* 레벨테스트 진행	BOX	*/

.level-test-panel {
  background: #fff;
  border: 1px solid	#6499fa;
  border-radius: 10px;
  margin-bottom: 2em;
  display: grid;
  grid-template-columns: 2fr 2fr;
  overflow:	hidden;
}

.level-test-panel.disabled {
  opacity: 0.7;
  -webkit-filter: grayscale(100%);
  pointer-events: none;
  background: #ededed;
}

.level-test-panel-component	{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position:	relative;
}

.level-test-panel-component:first-child:after {
  content: '';
  position:	absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 1px;
  border-right:	2px	solid #6499fa;
}

.level-test-panel-component	.level-now {
  color: #6499fa;
  font-weight: 900;
  text-align: center;
  font-size: 1.7rem;
  padding: 10px	0;
  position:	relative;
}

.level-test-panel-component.complete .level-now	{
  background: rgba(103,	156, 254, 0.1);
}

.level-test-panel-component	.complete-badge	{
  position:	absolute;
  background: #6499FA;
  border: 1px solid	#6499FA;
  box-sizing: border-box;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  color: #fff;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 13px;
  font-weight: 700;
  padding: 5px 10px	5px	5px;
}

.level-test-panel-component	.complete-badge.ing-badge {
  background: #F0B20C;
  border: 1px solid	#F0B20C;
}

.level-test-panel-component	.level-test-panel-btn-wrap {
  display: flex;
  border-top: 1px solid	#6499FA;
}

.level-test-panel-component	.level-test-panel-btn-wrap>div {
  width: 100%;
  text-align: center;
}

.level-test-panel-component	.level-test-panel-btn-wrap>div:first-child {
  border-right:	1px	solid #6499FA;
}

.level-test-panel-component	.level-test-panel-btn-wrap>div>a {
  color: #6499fa;
  padding: 10px;
  font-weight: 700;
}

.level-test-panel-component	.level-test-panel-btn-wrap>div.btn-cnu-lat>a {
  background: rgba(103,	156, 254, 0.1);
  font-weight: 700;
}

.level-test-panel-component	.level-test-panel-btn-wrap>div.level-test-restart-btn>a	{
  background: rgba(103,	156, 254, 0.1);
  font-weight: 700;
  color: #6499fa;
}

.level-test-panel-component	.level-test-panel-btn-wrap>div.level-test-start-btn>a {
  background: #6499FA;
  font-weight: 700;
  color: #fff;
}

.level-test-panel-component	.level-test-panel-btn-wrap>div:last-child {
  border-right:	none;
}

.level-test-panel-component	.level-test-panel-btn-wrap .level-test-start-btn>a {
  background: #6499FA;
  color: #FFFFFF;
}

.level-test-panel-component	.level-test-panel-btn-wrap .complete>a {
  background: rgba(103,	156, 254, 0.1);
  color: #828282;
}





/* 보카 리스트 버튼 */
.btn-study-box {
  width: 70px;
}

.btn-study-box .btn-study {
  background: var(--txt-color3);
  border-radius: 50%;
  text-align: center;
  padding-bottom: 100%;
  position:	relative;
}

.btn-study-box .btn-study-c	{
  position:	absolute;
  left:	50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.btn-study-box .btn-study svg,
.btn-study-box .btn-study img,
.btn-study-box .btn-study object {
  width: 35%;
  margin: 0	auto;
}

.btn-study-box .btn-study-c	.txt {
  font-weight: 700;
  margin-top: .5em;
  color: #fff;
  line-height: 1;
  font-size: 14px;
}

.btn-study-box .btn-study-box__txt {
  color: var(--txt-color4);
  font-weight: 300;
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
  margin-top: 10px;
}

.btn-study-box .btn-study.on {
  background: var(--blue-color2);
}

.btn-study-box .btn-study.off {
  background: var(--txt-color3);
  opacity: .6;
}

.btn-study-box .btn-study.on.btn-study--study {
  background: var(--blue-color2);
}

.btn-study-box .btn-study.on.btn-study--word {
  background: var(--yellow-color3);
}

.btn-study-box .btn-study.on.btn-study--sentence {
  background: var(--purple-color2);
}

.btn-study-box .btn-study.on.btn-study--spelling {
  background: var(--olive-color2);
}

.btn-study-box .btn-study.btn-study--list {
  background: var(--bg-color3y);
  border: 1px solid	var(--green-color4);
}

.btn-study-box .btn-study.btn-study--list .btn-study-c .txt	{
  color: var(--green-color4);
}

.btn-study-box .btn-study.btn-study--rec {
  background: var(--txt-color3);
  border: 1px solid	var(--txt-color3)
}
.btn-study-box .btn-study.btn-study--rec .btn-study-c .txt {
  color: #fff;
}
.btn-study-box .btn-study.btn-study--rec.on	{
  background: #FF5A78;
  border: 1px solid	#FF5A78;
}
.btn-study-box .btn-study.btn-study--rec .btn-study-c .txt {
  color: #fff;
}


/* 보카리스트 */

.day-list-box {
  display: flex;
	padding: 5px 0;
}

.day-list-box .day-list	{
  flex-shrink: 0;
  margin-right:	10px;
  min-height: 300px;
}

.day-list-box .day-list:last-child {
  margin-right:	0;
}

.day-list-box .load-data {
	margin-right: 0;
}

.day-list {
  border: 1px solid	var(--txt-color3);
  background: #fff;
  border-radius: 10px;
  padding: 1rem;
  position:	relative;
  width: 680px;
  /* height: 400px;	*/
  height: auto;
  overflow:	hidden;
}

.day-list.on {
  border-color:	var(--blue-color2);
  box-shadow: 0	0 0	4px	var(--blue-color2);
}

.day-list .day-list__cts__img {
  position:	absolute;
  right: 15px;
  top: 50%;
  width: 35%;
  height: 80%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  transform: translateY(-50%);
  border: 1px solid	#BDBDBD;
	border-radius: 10px;
	overflow: hidden;
	z-index: 1;
}

.day-list__cts__img__bg	{
  width: 100%;
  height: 100%;
  /* background: linear-gradient(88.94deg, #FFFFFF 6%, rgba(255, 255, 255, 0) 44.32%); */
}
.day-list .day-list__cts__img .btn-word-list {
	padding: 12px 10px;
	background:	rgba(255, 255, 255,	0.9);
	text-align:	center;
	font-weight: 700;
	color: #6098FF;
	position: absolute;
	bottom:	0;
	left: 0;
	width: 100%;
}

.day-list .day-list__box {
  position:	relative;
  z-index: 1;
}

.day-list .day-list__box .word-list	{
  color: var(--txt-color5);
  font-size: 1.5rem;
  display: grid;
  grid-template-columns: 2fr 2fr;
  gap: 5px;
  margin: 20px 0 30px;
  width: 65%;
  font-weight: 700;
}


.day-list .day-list__box .word-list .word-page {
	font-size: 50%;
	font-weight: 400;
}

.day-list .day-list__box .word-list > a:first-child {
  margin-left: 0;
}

.day-list .day-list__box .word-list > a .keyword {
  color: var(--red-color3);
  font-weight: 900;
}

.day-list .day-list__box .day-list__main-title {
  color: #000;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1;
  position:	absolute;
  right: 0;
  top: 0;
  opacity: .6;
}

.day-list .day-list__box .day-list__box__title {
  display: flex;
  align-items: baseline;
}

.day-list .day-list__box .day-list__box__title .day-title {
  color: var(--blue-color2);
  font-weight: 900;
  font-size: 1.6rem;
  margin-right:	10px;
  line-height: 1.2;
}

.day-list .day-list__box .day-list__box__title .step
{ color: var(--txt-color4); }

.day-list .day-btn__box
{ display: flex; margin-left: auto; position: relative; z-index: 1; }
.day-list .day-btn__box	.btn-study-box
{ margin-left: 0.36em; }
.day-list .day-btn__box	.btn-study-box:first-child
{ margin-left: 0; }


.day-list .day-list__title {
  display: flex;
  align-items: baseline;
}

.day-list .day-list__title .step h5	{
  flex-shrink: 0;
}

.day-list .day-list__title .step {
  color: var(--txt-color2);
  margin: 0	1em;
  flex-shrink: 0;
}

.day-list .day-list__cts {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1em;
}

.day-list .day-list__cts>div {
  flex-grow: 1;
  margin-right:	4em;
  width: 100%;
}

.day-list .day-list__cts>div:last-child	{
  margin-right:	0;
}

.day-list .day-list__cts .day-list__cts__btn-list {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr 2fr;
}


/* 가로스크롤 더보기 버튼	*/

.btn-load-data {
  flex-shrink: 0;
  width: 20vw;
  height: auto;
  /* background: rgba(255, 255,	255, 0.9); */
  border-radius: 20px;
  font-size: 2rem;
}





/* 단어리스트 */

.word-list-box {
  display: none;
  background: #fff;
  margin-bottom: 10px;
  position:	relative;
  border: 2px solid	#D7D7D7;
  border-radius: 10px;
  padding: 1rem;
}

.word-list-box.on {
  display: block;
}

.word-list-box .voca-list-box-tail {
  position:	absolute;
  bottom: 100%;
  right: 12.5%;
  width: 7%;
}

.word-list-box .voca-list-box-tail img {
  vertical-align: bottom;
}

.word-list-box .voca-list .voca-word {
  display: inline-block;
  color: var(--txt-color2);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.word-list-box .voca-list .voca-sound {
  width: 30px;
  display: inline-block;
  padding-top: 3px;
  margin-left: 5px;
  vertical-align: top;
}

.word-list-box .voca-list .voca-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px	0;
  border-bottom: 1px solid #dbdbdb;
}

.word-list-box .voca-list .voca-item .voca-txt {
  display: flex;
  align-items: center;
}

.word-list-box .voca-list .voca-item .voca-txt .part-word>.ipart.ipart_verb	{
  vertical-align: 5px;
}

.word-list-box .voca-list .voca-item:last-child	{
  border-bottom: none;
}

.word-list-box .voca-list .voca-list-img {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
  grid-gap:	10px;
  align-items: center;
  justify-content: end;
  max-width: 320px;
  flex-grow: 1;
}

.word-list-box .voca-list .voca-list-img a {
  cursor: pointer;
}

.word-list-box .voca-list .voca-item:last-child	{
  border-bottom: none;
}


/* 포인트 BOX */

.point-box {
  border: 1px solid	var(--blue-color2);
  background: #fff;
  color: var(--txt-color1);
  border-radius: 20px;
  overflow:	hidden;
  padding: 1em;
  text-align: center;
}

.point-box .point-title	{
  font-size: 1.5rem;
  font-weight: 400;
}

.point-box .point {
  font-size: 2.5rem;
  font-weight: 900;
  margin: .1em 0 .3em;
  color: var(--blue-color2);
}

.point-box .point-info {
  max-width: 290px;
  margin: 0	auto;
  font-size: 1.5rem;
}

.point-box .point-info .point-info__row	{
  display: flex;
  justify-content: space-between;
}

.point-box .point-info .point-info__row	strong {
  min-width: 50px;
  font-weight: 900;
}

.point-box.on {
  background: var(--sub-color2);
  border: 2px solid	var(--blue-color2);
}

.point-box.off {
  background: #F8F8F8;
  border: 1px solid	var(--blue-color2);
}


/* 컨텐츠 BOX */

.ct-box	{
  background: #fff;
  border: 1px solid	var(--txt-color2);
  border-radius: 20px;
  padding: 2em 2em;
}


/* user-info box 가로배치 */

.user-info-box a {
  display: flex;
  align-items: center;
}

.user-info-box a .user-img-box {
  /* 사진크기 컨트롤 */
  width: 35px;
  margin-right:	10px;
}

.user-info-box a .user-img-box .user-img {
  border-radius: 50%;
  border: 1px solid	var(--border-color1);
  overflow:	hidden;
  padding-bottom: 100%;
  position:	relative;
}

.user-info-box a .user-img-box .user-img>img {
  width: 100%;
  height: 100%;
  position:	absolute;
  left:	0;
  top: 0;
}


/* fixed 메뉴	*/

.fixed-menu	{
  position:	fixed;
  left:	0;
  bottom: 0;
  width: 100%;
  z-index: 30;
  height: 57px;
  overflow:	hidden;
}

.fixed-menu	.fixed-menu__ct	{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fixed-menu	.fixed-menu__bg	{
  width: 100%;
  height: 100%;
  background: #fff;
  position:	absolute;
  left:	0;
  top: 0;
  z-index: -1;
  opacity: 1;
}

.fixed-menu	a {
  padding: .7em	1.7em;
  word-break: keep-all;
  white-space: nowrap;
}

.fixed-menu	.fixed-menu__center	{
  display: flex;
  align-items: center;
  position:	absolute;
  left:	50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.fixed-menu	.fixed-menu__center	.txt {
  color: #000;
  font-weight: 400;
}

.fixed-menu	.fixed-menu__parent	.icon {
  width: 20px;
  display: flex;
  align-items: center;
}


/* 전체팝업	*/

.full-popup	{
  position:	fixed;
  left:	0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: rgba(0, 0, 0,	0.2);
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
  transform: translateY(100%);
}

.full-popup.on {
  transform: translateY(0);
}

.full-popup-contents {
  /* padding: 10px;	*/
  background: var(--txt-color2gray);
  width: 100%;
  height: 100%;
  position:	relative;
}

.full-popup-contents .btn-close	{
  position:	absolute;
  right: 1.5em;
  top: 10px;
  width: 50px;
  padding: 14px;
  z-index: 1;
}

.full-popup-contents .loading-img {
  position:	absolute;
  left:	50%;
  top: 40%;
  transform: translate(-50%, -50%);
}

.full-popup-contents .full-popup-contents-load {
  height: 100%;
}

.full-popup-contents .full-popup-header	{
  height: 70px;
  background: rgba(255,	255, 255, 0.4);
}

.full-popup-contents .full-popup-header	.title {
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
  color: var(--txt-color4);
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.full-popup-contents .full-popup-section {
  height: calc(100%	- 70px);
}

.full-popup-contents .full-popup-section.nopadding {
  height: calc(100%	- 80px);
  /* margin: 0 -10px; */
  margin-top: 10px;
  padding: 10px	10px 20px;
}

.full-popup-contents .full-popup-section.full-popup-section--scroll	{
  overflow-y: scroll;
  background: #fff;
  margin: 0	-10px;
  padding: 20px;
}

.full-hori-scroll-section {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.full-popup-contents .full-popup-header.study-layout {
	background:	var(--blue-color2);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius:	20px;
	overflow: hidden;
	position: relative;
}
.full-popup-contents .full-popup-header.study-layout .title	{
	color: #fff;
}
.full-popup-contents .full-popup-header.study-layout .left-part	{
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	height:	100%;
	align-items: center;
}
.full-popup-contents .full-popup-header.study-layout .sub-title	{
	margin-right: 20px;
	font-weight: 900;
	height:	100%;
	padding: 0 1em;
	background:	#475675;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius:	20px;
	position: relative;
	color: #fff;
	font-size: 1.5rem;
}
.full-popup-contents .full-popup-header.study-layout .sub-title:after {
	content: '';
	position: absolute;
	left: 99%;
	top: 0%;
	transform: translateY(-50%);
	border:	10px solid #475675;
	border-right: 5px solid	transparent;
	border-bottom: 10px	solid transparent;
}
.full-popup-contents .full-popup-header.study-layout .day-title	{
	font-weight: 900;
	color: #EFFD03;
	font-size: 1.5rem;
}
.full-popup-contents .full-popup-header.study-layout .day-title	.step {
	margin-left: 5px;
	font-size: 60%;
	font-weight: 300;
	color: #fff;
}
/* 컨텐츠의	크기만큼 팝업	*/

.response-popup	{
  position:	fixed;
  left:	0;
  bottom: 0;
  right: 0;
  top: 0;
  z-index: 35;
  background: rgba(0, 0, 0,	0.2);
  justify-content: center;
  align-items: center;
  /* transition: all 0.2s; */
  transform: translateY(100%);
}

.response-popup.on {
  transform: translateY(0);
}

.response-popup-contents {
  background: var(--txt-color2gray);
  position:	absolute;
  width: 100%;
  bottom: 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
	overflow: hidden;
	transition:	all	0.2s;
	transform: translateY(100%);
}
.response-popup.on .response-popup-contents	{
	transform: translateY(0);
}
.response-popup-contents .btn-close	{
  position:	absolute;
  right: 5px;
  top: 12px;
  width: 50px;
  padding: 14px;
  z-index: 5;
}
.response-popup-contents .response-popup-title,
.response-popup-contents .book-voca-title {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-align:	center;
	font-size: 1.5rem;
	font-weight: 900;
	line-height: 1;
	color: #444;
	background:	rgba(255, 255, 255,	0.3);
	padding: 25px;
}
.response-popup-contents .book-voca-title span {
	position: relative;
	margin-right: 50px;
}
.response-popup-contents .book-voca-title span:after {
	content: '';
	position: absolute;
	right: -25px;
	top: 50%;
	transform: translateY(-40%);
	width: 2px;
	height:	40%;
	background:	#828282;
}
.response-popup-contents .loading-img {
	margin:	40px auto;
}

.response-popup-contents .response-popup-contents-load {
	height:	100%;
	padding-top: 75px;
	padding-bottom:	10px;
	background:	#f4f4f4;
}

.response-popup-contents .response-popup-header	{
  height: 70px;
  background: rgba(255,	255, 255, 0.4);
}

.response-popup-contents .response-popup-header	.title {
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
  color: var(--txt-color4);
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.response-popup-contents .response-popup-section {
  height: calc(100%	- 70px);
}

.response-popup-contents .response-popup-section.nopadding {
  height: calc(100%	- 80px);
  /* margin: 0 -10px; */
  margin-top: 10px;
  padding: 10px	10px 20px;
}

.response-popup-contents .response-popup-section.response-popup-section--scroll	{
  overflow-y: scroll;
  background: #fff;
  margin: 0	-10px;
  padding: 20px;
}

.response-hori-scroll-section {
  display: flex;
  align-items: center;
  flex-grow: 1;
}


/* 사이드 팝업 */

.side-popup	{
  position:	fixed;
  left:	0;
  bottom: 0;
  right: 0;
  top: 0;
  z-index: 20;
  background: rgba(0, 0, 0,	0.2);
  justify-content: center;
  align-items: center;
  /* transition: all 0.2s; */
  transform: translateY(100%);
}

.side-popup.on {
  transform: translateY(0);
}

.side-popup-contents {
  background: var(--txt-color2gray);
  position:	absolute;
	width: 30%;
	height:	100%;
	bottom:	0;
	right: 0;
	overflow: hidden;
	transition:	all	0.2s;
	transform: translateX(100%);
}
.side-popup.on .side-popup-contents	{
	transform: translateX(0);
}
.side-popup-contents .btn-close	{
  position:	absolute;
  right: 5px;
  top: 12px;
  width: 50px;
  padding: 14px;
  z-index: 5;
}
.side-popup-contents .side-popup-title,
.side-popup-contents .book-voca-title {
	width: 100%;
	text-align:	center;
	font-size: 1.5rem;
	font-weight: 900;
	line-height: 1;
	color: #444;
	background:	transparent;
	padding: 25px;
	word-break:	break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.side-popup-contents .book-voca-title span {
	position: relative;
	margin-right: 50px;
}
.side-popup-contents .book-voca-title span:after {
	content: '';
	position: absolute;
	right: -25px;
	top: 50%;
	transform: translateY(-40%);
	width: 2px;
	height:	40%;
	background:	#828282;
}
.side-popup-contents .loading-img {
	margin:	40px auto;
}


/* 팝업 */

.popup {
  position:	fixed;
  left:	0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1010;
  background: rgba(0, 0, 0,	0.2);
  justify-content: center;
  align-items: center;
  display: none;
  padding: 5px;
}
.popup.under {
	z-index: 19;
}
.popup.on {
  display: flex;
}

.popup-contents	{
  padding: 0;
  background: #fff;
  border: 2px solid	#BDBDBD;
  box-shadow: 0px 2px 4px rgba(0, 0, 0,	0.35);
  border-radius: 20px;
  min-width: 300px;
  min-height: 130px;
  position:	relative;
  overflow:	hidden;
	flex-shrink: 0;
}

.popup-contents	.popup-contents__txt {
  text-align: center;
  padding: 1em 2.5em;
  font-weight: 900;
  font-size: 1.5rem;
	line-height: 1.3;
}
.popup-contents	.popup-contents__txt p {
	font-size: 1rem;
	font-weight: 400;
	margin:	0;
	margin-top:	10px;
}
.popup-contents	.popup-contents__btn {
  text-align: center;
}

.popup-contents	.popup-contents__btn>a {
  color: #fff;
  background: var(--blue-color2);
  font-weight: 900;
  padding: 10px;
  font-size: 1.25rem;
}

.popup-contents	.btn-close {
  position:	absolute;
  right: 5px;
  top: 5px;
	width: 45px;
	z-index: 1;
}

.popup-contents	.btn-close>a {
  padding: 10px
}

.popup-contents	.popup-title {
  margin-bottom: 1em;
}

.popup.style-2 .popup-contents {
  padding: 0;
}

.popup.style-2 .popup-contents .popup-title	{
  padding: 10px;
  background: url(../images/components/frame-header-bg.png)	no-repeat 0	50%;
  background-size: 100%	100%;
  text-align: center;
  color: #fff;
  margin-bottom: 0;
}

.popup.style-2 .popup-contents .btn-close svg path {
  fill:	#fff;
}

.popup.style-2 .popup-contents .popup-contents__inner {
  padding: 0 1em;
  max-height: 500px;
  height: 100%;
  overflow-y: scroll;
}

.alert-popup {
  text-align: center;
  padding-top: .5em;
}

.alert-popup .alert-popup-txt {
  margin-top: .5em;
  line-height: 1.5;
}

.alert-popup .alert-popup-txt>span {
  font-weight: 900;
}

.alert-popup .btn-box {
  margin-top: 1em;
  line-height: 1;
}

.alert-popup .btn-box>a	{
  font-size: 1rem;
  width: auto;
  display: inline-block;
  padding: 1em 2em;
}

.popup-contents	.popup-contents--confirm__btn {
  display: grid;
  grid-template-columns: 2fr 2fr;
  text-align: center;
}

.popup-contents	.popup-contents--confirm__btn>a	{
  font-weight: 900;
  background: #f8f8f8;
  color: #444;
  font-size: 1rem;
  padding: 1em 2em;
}

.popup-contents	.popup-contents--confirm__btn>a:first-child	{
  background: var(--blue-color2);
  color: #fff;
}


/* 페이지 메인 메뉴 */

.page-menu-1 {
  width: 100%;
  display: flex;
  justify-content: center;
	align-items: center;
	margin:	20px 0;
	flex-shrink: 0;
/*	padding-left:120px;	*/
}

.page-menu-1 .btn-page-menu	a {
	padding: 0.5em 1em;
	font-size: 1.5rem;
	font-weight: 900;
	line-height: 1;
	color: var(--txt-color4);
	border-radius: 50px;
	background:	transparent;
/*	margin:	0 10px;	*/
	text-decoration: none;
}

.page-menu-1 .btn-page-menu	a .radio-day {
	font-weight: 900;
	color: var(--txt-color4);
	margin-left:30px;
}

.page-menu-1 .btn-page-menu.on a,
.page-menu-1 .btn-page-menu	a.on {
	background:	var(--blue-color2);
	color: #fff;
  text-decoration: none;
}

body.book .page-menu-1 .btn-page-menu.on a,
body.book .page-menu-1 .btn-page-menu a.on {
	background:	var(--yellow-color2);
	color: #fff;
  text-decoration: none;
}

body.video .page-menu-1	.btn-page-menu.on a,
body.video .page-menu-1	.btn-page-menu a.on	{
	background:	#0088B4;
	color: #fff;
  text-decoration: none;
}

body.daily .page-menu-1	.btn-page-menu.on a,
body.daily .page-menu-1	.btn-page-menu a.on	{
	background:	#55bd47;
	color: #fff;
	text-decoration: none;
}

.page-menu-2 {
  /* width:	100%; */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  /* background: #fafafa; */
  border-radius: 50px;
  /* margin-top: 10px; */
  overflow:	hidden;
}

.page-menu-2 .btn-page-menu	{
  position:	relative;
}

.page-menu-2 .btn-page-menu:before {
  content: '';
  position:	absolute;
  left:	0;
  top: 50%;
  width: 1px;
  height: 30%;
  transform: translateY(-50%);
  background: #ddd;
}
.page-menu-2 .btn-page-menu:first-child:before {
	display: none;
}
.page-menu-2 .btn-page-menu	a {
  padding: 1em 1.5em;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  color: var(--txt-color3);
}

.page-menu-2 .btn-page-menu	a.on,
.page-menu-2 .btn-page-menu.on a {
  color: var(--txt-color5);
  text-decoration: underline;
}


/* 단어카드	*/

.word-card {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  overflow:	hidden;
  border: 1px solid	var(--txt-color2);
  display: flex;
  flex-direction: column;
}

.word-card .word-card-header {
  width: 100%;
  background: var(--yellow-color2);
  color: var(--txt-color1);
  text-align: center;
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1;
  padding: 15px	0;
}

.word-card .word-card-content {
  padding: 20px	25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.word-card .word-card-content .voca-card-content__bottom {
  margin-top: auto;
}

.word-card .word-card-content .idic-word-stnc .preview-img-box {
  max-width: 300px;
  width: 100%;
  margin: 5% auto;
  position:	relative;
}

.word-card .word__sentence {
  margin-top: 0.5em;
}

.word-card .word-img-list {
  max-width: 180px;
  margin: 0	auto;
  margin-top: 1em;
}

.word-card .word-definition	{
  margin-top: 1em;
  text-align: center;
}

.word__title a h5 {
  color: var(--txt-color5);
  margin-right:	5px;
  font-weight: 900;
  font-size: 1.8rem;
  margin-bottom: 0;
  line-height: 1;
  display: inline-block;
}

.word__title a .word__title__sound {
  width: 25px;
  display: inline-block;
  margin-left: 5px;
  vertical-align: 0;
}

.word__sentence	a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.word__sentence	a .word__title__sound {
  width: 1.4rem;
  flex-shrink: 0;
}

.word__sentence	a .sentence	{
  margin-left: 10px;
  font-size: 1.25rem;
  color: var(--txt-color5);
}

.word-img-list {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
  grid-gap:	10px;
  align-items: center;
  justify-content: end;
}


/* section 높이 지정 */

section.ct-section {
  width: 100vw;
  height: calc(100vh - 90px);
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
	justify-content: space-around;
	/* background: red;	*/
}

section.ct-section .full-scroll-section	{
  flex-grow: 1;
  overflow-y: scroll;
  padding: 20px	30px;
  /* margin-top: 10px; */
  background: #fff;
  position:	relative;
  padding-bottom: 30px;
}

section.ct-section .full-section-nopadding {
	flex-grow: 1;
	/* flex-shrink:	0; */
  padding: 0;
  /* margin-top: 10px; */
  background: #fff;
  position:	relative;
	overflow: hidden;
}

section.ct-section .full-section-nopadding .loading-img,
section.ct-section .full-scroll-section	.loading-img,
section.ct-section .full-section .loading-img {
  position:	absolute;
  left:	50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

section.ct-scroll-section {
  width: 100vw;
  height: calc(100vh - 70px);
  padding-bottom: 70px;
  display: block;
  overflow:	scroll;
  padding-top: 10px;
}

section.ct-header-section {
  width: 100vw;
  height: 100vh;
}

section.ct-header-section .ct-header-section__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  position:	relative;
  background: rgba(255,	255, 255, 0.4);
}

section.ct-header-section .ct-header-section__header .header-title {
  position:	absolute;
  left:	50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

section.ct-header-section .ct-header-section__contents {
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
}


/* day 메뉴 */

.voca-day-menu {
  display: flex;
  height: 50px;
}

.voca-day-menu .btn-voca-day {
  width: 5%;
  text-align: center;
  font-weight: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}

.voca-day-menu .btn-voca-day:first-child {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}

.voca-day-menu .btn-voca-day:last-child	{
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

.voca-day-menu .btn-voca-day.on	{
  background: var(--blue-color2);
  color: var(--txt-color1);
}

.voca-day-menu .btn-voca-day.current {
  background: #fff;
  border: 7px solid	var(--blue-color2);
  color: var(--blue-color2);
  transform: scale(1.2);
  border-radius: 6px;
  font-size: 1.25rem;
}


/* 로딩 애니메이션	*/

@keyframes loading-ani {
  to {
	background-position: -1200px 0;
  }
}

.loading-img {
  width: 150px;
  height: 150px;
  background: url('../images/components/loading-img.png?v=2') no-repeat	0 0	/ cover;
  animation: loading-ani 5s	infinite steps(8);
}


/* 오디오태그 숨기기 */

#audio,
#audi0,
#audio1,
#audio2,
#bgmaudio,
#audio_playlist0,
#audio_playlist1,
#audio_playlist2 {
  display: none;
}


/* 가로스크롤 */

.hori-scroll-box {
	width: 100%;
  overflow-x: scroll;
  -ms-overflow-style: none;
  /* IE	and	Edge */
  scrollbar-width: none;
	/* Firefox */
	display: flex;
}

.hori-scroll-box::-webkit-scrollbar	{
  display: none;
  /* Chrome, Safari, Opera*/
}

.hori-scroll-box:before,
.hori-scroll-box:after {
  content: '';
  width: 10px;
  background: red;
  height: 10px;
  display: block;
  flex-shrink: 0;
  opacity: 0;
}


/* 메인 페이지 이등분 레이아웃 */

.ct-bisector-section {
  height: calc(100%	- 90px);
  display: grid;
  grid-template-columns: 2fr 2fr;
  gap: 20px;
  padding: 0 10px;
  padding-bottom: 60px;
}

section.ct-section .full-section {
  flex-grow: 1;
  overflow-y: hidden;
  padding: 20px	30px;
  background: #fff;
  margin-top: 10px;
  margin-bottom: -10px;
  position:	relative;
  padding-bottom: 30px;
}

.ct-bisector-section--nogap	{
  height: 100%;
  display: grid;
  grid-template-columns: 2fr 2fr;
  gap: 0;
	position: relative;
	width: 100%;
}

.ct-bisector-section--nogap>div.bg-div {
  background: #f8f8f8;
}


/* book	이미지	컴포넌트 .book-img-box 로 width 를 컨트롤 */

.book-img {
  width: 100%;
  height: auto;
  padding-bottom: 130%;
  border: 3px solid	#FFFFFF;
  border-radius: 15px;
  position:	relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}


/* howto 서브페이지 설명버튼	*/

.btn-how-to	{
  display: flex;
  padding: 5px 10px;
}

.btn-how-to	.btn-how-to__txt {
  font-weight: 700;
  margin-right:	10px;
  color: #828282;
}

.btn-how-to	object {
  width: 30px;
}


/* 레벨테스트 리스트 */

.vlat-list {
  display: flex;
  padding: 10px	0;
}

.vlat-list .vlat-box {
  flex-shrink: 0;
  margin-right:	10px;
  width: 35vw;
  background: #fff;
  border: 1px solid	#dbdbdb;
  text-align: center;
  padding: 1em;
  border-radius: 20px;
  overflow:	hidden;
  height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vlat-list .vlat-box:last-child	{
  margin-right:	0;
}

.vlat-list .vlat-box .vlat-box-txt .vlat-box-txt__title	{
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  padding: 10px	0;
}

.vlat-list .vlat-box .vlat-box-txt .vlat-box-txt__txt1 {
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  color: var(--txt-color5);
}

.vlat-list .vlat-box .vlat-box-txt .vlat-box-txt__txt2 {
  font-size: 1.25rem;
  color: #828282;
  line-height: 1;
  font-weight: 700;
  margin-top: 20px;
}

.vlat-list .vlat-box .vlat-box-btn>div:first-child {
  margin-bottom: 5px;
}

.vlat-list .vlat-box .vlat-box-btn .btn-vlat {
  background: #f8f8f8;
  border-radius: 10px;
  overflow:	hidden;
  padding: .5em	0;
  font-size: 1.5rem;
  font-weight: 900;
  color: red;
  border: 1px solid	red;
}

.vlat-list .vlat-box .vlat-box-btn .btn-vlat.btn-vlat-test {
  background: red;
  color: #fff
}


/* 레벨단계별 커스텀 */

.vlat-list .vlat-box.vlat-box-500 .vlat-box-txt	.vlat-box-txt__title {
  color: var(--voca-500);
}

.vlat-list .vlat-box.vlat-box-500 .vlat-box-btn	.btn-vlat {
  color: var(--voca-500);
  border: 1px solid	var(--voca-500);
}

.vlat-list .vlat-box.vlat-box-500 .vlat-box-btn	.btn-vlat.btn-vlat-test	{
  background: var(--voca-500);
  color: #fff
}

.vlat-list .vlat-box.vlat-box-1000 .vlat-box-txt .vlat-box-txt__title {
  color: var(--voca-1000);
}

.vlat-list .vlat-box.vlat-box-1000 .vlat-box-btn .btn-vlat {
  color: var(--voca-1000);
  border: 1px solid	var(--voca-1000);
}

.vlat-list .vlat-box.vlat-box-1000 .vlat-box-btn .btn-vlat.btn-vlat-test {
  background: var(--voca-1000);
  color: #fff
}

.vlat-list .vlat-box.vlat-box-1500 .vlat-box-txt .vlat-box-txt__title {
  color: var(--voca-1500);
}

.vlat-list .vlat-box.vlat-box-1500 .vlat-box-btn .btn-vlat {
  color: var(--voca-1500);
  border: 1px solid	var(--voca-1500);
}

.vlat-list .vlat-box.vlat-box-1500 .vlat-box-btn .btn-vlat.btn-vlat-test {
  background: var(--voca-1500);
  color: #fff
}

.vlat-list .vlat-box.vlat-box-2000 .vlat-box-txt .vlat-box-txt__title {
  color: var(--voca-2000);
}

.vlat-list .vlat-box.vlat-box-2000 .vlat-box-btn .btn-vlat {
  color: var(--voca-2000);
  border: 1px solid	var(--voca-2000);
}

.vlat-list .vlat-box.vlat-box-2000 .vlat-box-btn .btn-vlat.btn-vlat-test {
  background: var(--voca-2000);
  color: #fff
}

.vlat-list .vlat-box.vlat-box-2500 .vlat-box-txt .vlat-box-txt__title {
  color: var(--voca-2500);
}

.vlat-list .vlat-box.vlat-box-2500 .vlat-box-btn .btn-vlat {
  color: var(--voca-2500);
  border: 1px solid	var(--voca-2500);
}

.vlat-list .vlat-box.vlat-box-2500 .vlat-box-btn .btn-vlat.btn-vlat-test {
  background: var(--voca-2500);
  color: #fff
}

.vlat-list .vlat-box.vlat-box-3000 .vlat-box-txt .vlat-box-txt__title {
  color: var(--voca-3000);
}

.vlat-list .vlat-box.vlat-box-3000 .vlat-box-btn .btn-vlat {
  color: var(--voca-3000);
  border: 1px solid	var(--voca-3000);
}

.vlat-list .vlat-box.vlat-box-3000 .vlat-box-btn .btn-vlat.btn-vlat-test {
  background: var(--voca-3000);
  color: #fff
}

.vlat-list .vlat-box.vlat-box-3500 .vlat-box-txt .vlat-box-txt__title {
  color: var(--voca-3500);
}

.vlat-list .vlat-box.vlat-box-3500 .vlat-box-btn .btn-vlat {
  color: var(--voca-3500);
  border: 1px solid	var(--voca-3500);
}

.vlat-list .vlat-box.vlat-box-3500 .vlat-box-btn .btn-vlat.btn-vlat-test {
  background: var(--voca-3500);
  color: #fff
}

.vlat-list .vlat-box.vlat-box-4000 .vlat-box-txt .vlat-box-txt__title {
  color: var(--voca-4000);
}

.vlat-list .vlat-box.vlat-box-4000 .vlat-box-btn .btn-vlat {
  color: var(--voca-4000);
  border: 1px solid	var(--voca-4000);
}

.vlat-list .vlat-box.vlat-box-4000 .vlat-box-btn .btn-vlat.btn-vlat-test {
  background: var(--voca-4000);
  color: #fff
}

.vlat-list .vlat-box.vlat-box-4500 .vlat-box-txt .vlat-box-txt__title {
  color: var(--voca-4500);
}

.vlat-list .vlat-box.vlat-box-4500 .vlat-box-btn .btn-vlat {
  color: var(--voca-4500);
  border: 1px solid	var(--voca-4500);
}

.vlat-list .vlat-box.vlat-box-4500 .vlat-box-btn .btn-vlat.btn-vlat-test {
  background: var(--voca-4500);
  color: #fff
}

.vlat-list .vlat-box.vlat-box-5000 .vlat-box-txt .vlat-box-txt__title {
  color: var(--voca-5000);
}

.vlat-list .vlat-box.vlat-box-5000 .vlat-box-btn .btn-vlat {
  color: var(--voca-5000);
  border: 1px solid	var(--voca-5000);
}

.vlat-list .vlat-box.vlat-box-5000 .vlat-box-btn .btn-vlat.btn-vlat-test {
  background: var(--voca-5000);
  color: #fff
}


/* 5500	& 6000 준비중으로 css 주석처리 */


/* .vlat-list .vlat-box.vlat-box-5500 .vlat-box-txt	.vlat-box-txt__title {
 color:	var(--voca-5500);
}
.vlat-list .vlat-box.vlat-box-5500 .vlat-box-btn .btn-vlat {
 color:	var(--voca-5500);
 border: 1px solid var(--voca-5500);
}
.vlat-list .vlat-box.vlat-box-5500 .vlat-box-btn .btn-vlat.btn-vlat-test {
 background: var(--voca-5500);
 color:	#fff
}
.vlat-list .vlat-box.vlat-box-6000 .vlat-box-txt .vlat-box-txt__title {
 color:	var(--voca-6000);
}
.vlat-list .vlat-box.vlat-box-6000 .vlat-box-btn .btn-vlat {
 color:	var(--voca-6000);
 border: 1px solid var(--voca-6000);
}
.vlat-list .vlat-box.vlat-box-6000 .vlat-box-btn .btn-vlat.btn-vlat-test {
 background: var(--voca-6000);
 color:	#fff
} */

.vlat-list .vlat-box.vlat-box-K	.vlat-box-txt .vlat-box-txt__title {
  color: var(--book-kb);
}

.vlat-list .vlat-box.vlat-box-K	.vlat-box-btn .btn-vlat	{
  color: var(--book-kb);
  border: 1px solid	var(--book-kb);
}

.vlat-list .vlat-box.vlat-box-K	.vlat-box-btn .btn-vlat.btn-vlat-test {
  background: var(--book-kb);
  color: #fff
}

.vlat-list .vlat-box.vlat-box-1	.vlat-box-txt .vlat-box-txt__title {
  color: var(--book-1b);
}

.vlat-list .vlat-box.vlat-box-1	.vlat-box-btn .btn-vlat	{
  color: var(--book-1b);
  border: 1px solid	var(--book-1b);
}

.vlat-list .vlat-box.vlat-box-1	.vlat-box-btn .btn-vlat.btn-vlat-test {
  background: var(--book-1b);
  color: #fff
}

.vlat-list .vlat-box.vlat-box-2	.vlat-box-txt .vlat-box-txt__title {
  color: var(--book-2c);
}

.vlat-list .vlat-box.vlat-box-2	.vlat-box-btn .btn-vlat	{
  color: var(--book-2c);
  border: 1px solid	var(--book-2c);
}

.vlat-list .vlat-box.vlat-box-2	.vlat-box-btn .btn-vlat.btn-vlat-test {
  background: var(--book-2c);
  color: #fff
}

.vlat-list .vlat-box.vlat-box-3	.vlat-box-txt .vlat-box-txt__title {
  color: var(--book-3c);
}

.vlat-list .vlat-box.vlat-box-3	.vlat-box-btn .btn-vlat	{
  color: var(--book-3c);
  border: 1px solid	var(--book-3c);
}

.vlat-list .vlat-box.vlat-box-3	.vlat-box-btn .btn-vlat.btn-vlat-test {
  background: var(--book-3c);
  color: #fff
}

.vlat-list .vlat-box.vlat-box-4	.vlat-box-txt .vlat-box-txt__title {
  color: var(--book-4b);
}

.vlat-list .vlat-box.vlat-box-4	.vlat-box-btn .btn-vlat	{
  color: var(--book-4b);
  border: 1px solid	var(--book-4b);
}

.vlat-list .vlat-box.vlat-box-4	.vlat-box-btn .btn-vlat.btn-vlat-test {
  background: var(--book-4b);
  color: #fff
}

.vlat-list .vlat-box.vlat-box-5	.vlat-box-txt .vlat-box-txt__title {
  color: var(--book-5b);
}

.vlat-list .vlat-box.vlat-box-5	.vlat-box-btn .btn-vlat	{
  color: var(--book-5b);
  border: 1px solid	var(--book-5b);
}

.vlat-list .vlat-box.vlat-box-5	.vlat-box-btn .btn-vlat.btn-vlat-test {
  background: var(--book-5b);
  color: #fff
}

.vlat-list .vlat-box.vlat-box-6	.vlat-box-txt .vlat-box-txt__title {
  color: var(--book-6b);
}

.vlat-list .vlat-box.vlat-box-6	.vlat-box-btn .btn-vlat	{
  color: var(--book-6b);
  border: 1px solid	var(--book-6b);
}

.vlat-list .vlat-box.vlat-box-6	.vlat-box-btn .btn-vlat.btn-vlat-test {
  background: var(--book-6b);
  color: #fff
}

.vlat-list .vlat-box.disabled {
  opacity: 0.7;
  -webkit-filter: grayscale(100%);
  pointer-events: none;
  background: #ededed;
}

.vlat-list .vlat-box.complete {
  background: #F4F4F4;
  border-color:	#bdbdbd;
  box-shadow: 0	0 0	2px	#bdbdbd;
}

.vlat-list .vlat-box.testing {
  background: #F0F6FF;
  border-color:	#A0C2FF;
  box-shadow: 0	0 0	2px	#A0C2FF;
}

.vlat-list .vlat-box.complete .vlat-box-btn	.btn-vlat.btn-vlat-test	{
  background: #FFFDEB;
  border-color:	#FF9600;
  color: #FF9600;
}

.vlat-list .vlat-box.testing .vlat-box-btn .btn-vlat.btn-vlat-test {
  background: #A0C2FF;
  border-color:	#6098FF;
  color: #fff;
}


/* 레벨업하기 */

.vlat-up-step-section {
  position:	relative;
  overflow:	hidden;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.vlat-up-step-wrap {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  overflow-y: scroll;
	padding: 30% 0 5%;
}
.vlat-up-step-wrap::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera*/
}
.vlat-up-step {
  margin-left: 30%;
  position:	relative;
}

.vlat-up-step:before {
  content: '';
  position:	absolute;
  left:	31px;
  bottom: 50%;
  height: 40px;
  width: 320%;
  background: #E0E0E0;
  z-index: 0;
  transform: translateY(50%);
}


/* .vlat-up-step:first-child {
	margin-left: 10%;
} */

.vlat-up-step:last-child:before	{
  display: none;
}

.vlat-up-step:last-child:after {
  content: '';
  width: 200px;
  height: 10px;
  position:	absolute;
  top: 0;
  left:	100%;
  background: transparent;
}

.vlat-way-title	{
  font-weight: 900;
  font-size: 2.5rem;
  /* width:	250px; */
  color: #E0E0E0;
  position:	relative;
}

.vlat-way-title>span {
  position:	absolute;
  left:	50%;
  top: -45px;
  transform: translateX(-50%);
  line-height: 1;
}

.vlat-way-point	{
  width: 80px;
  flex-shrink: 0;
  position:	relative;
  z-index: 1;
}

.vlat-way-point	.vlat-way-point__inner {
  padding-bottom: 100%;
  position:	relative;
  border: 2px solid	#E0E0E0;
  border-radius: 50%;
  overflow:	hidden;
  background: #fff;
}

.vlat-way-point	.vlat-way-point__inner .vlat-way-point__circle {
  position:	absolute;
  left:	50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #E0E0E0;
  width: 55%;
  height: 55%;
  border-radius: 50%;
  overflow:	hidden;
}

.vlat-up-step.current .vlat-way-title>span {
  top: -55px;
}

.vlat-up-step.current .vlat-current-badge {
  position:	absolute;
  left:	50%;
  bottom: 170%;
  z-index: 2;
  width: 160px;
  margin-left: -80px;
	animation: gnb_ani 1s infinite alternate cubic-bezier(0.4, 0, 1, 1);
}

.vlat-up-step.current .vlat-current-badge .badge-txt1 {
  color: #d24309;
  font-weight: 900;
  font-size: 1.5rem;
  position:	absolute;
  top: 9%;
  left:	2px;
  width: 100%;
  text-align: center;
}

.vlat-up-step.current .vlat-current-badge .badge-txt2 {
  color: #7c6f29;
  font-weight: 900;
  font-size: 1.8rem;
  position:	absolute;
  bottom: 11%;
  left:	0;
  width: 100%;
  text-align: center;
  padding-left:	7px;
}

.vlat-up-step.current .vlat-way-point {
  transform: scale(1.3);
}

.vlat-up-step.current .vlat-way-title {
  transform: scale(1.3);
}

.vlat-up-step.current .vlat-way-point .vlat-way-point__inner {
  border-color:	#BDBDBD;
}

.vlat-up-step.current .vlat-way-point .vlat-way-point__inner .vlat-way-point__circle {
  background: #BDBDBD;
}

.vlat-up-step.current .vlat-way-title {
  color: #BDBDBD;
}

.vlat-up-step.on:before	{
  background: red;
}

.vlat-up-step.on .vlat-way-point .vlat-way-point__inner	{
  border-color:	red;
}

.vlat-up-step.on .vlat-way-point .vlat-way-point__inner	.vlat-way-point__circle	{
  background: red;
}

.vlat-up-step.on .vlat-way-title {
  color: red;
}

.vlat-up-step.vlat-up-step-500.on:before {
  background: var(--voca-500);
}

.vlat-up-step.vlat-up-step-500.on .vlat-way-point .vlat-way-point__inner {
  border-color:	var(--voca-500);
}

.vlat-up-step.vlat-up-step-500.on .vlat-way-point .vlat-way-point__inner .vlat-way-point__circle {
  background: var(--voca-500);
}

.vlat-up-step.vlat-up-step-500.on .vlat-way-title {
  color: var(--voca-500);
}

.vlat-up-step.vlat-up-step-1000.on:before {
  background: var(--voca-1000);
}

.vlat-up-step.vlat-up-step-1000.on .vlat-way-point .vlat-way-point__inner {
  border-color:	var(--voca-1000);
}

.vlat-up-step.vlat-up-step-1000.on .vlat-way-point .vlat-way-point__inner .vlat-way-point__circle {
  background: var(--voca-1000);
}

.vlat-up-step.vlat-up-step-1000.on .vlat-way-title {
  color: var(--voca-1000);
}

.vlat-up-step.vlat-up-step-1500.on:before {
  background: var(--voca-1500);
}

.vlat-up-step.vlat-up-step-1500.on .vlat-way-point .vlat-way-point__inner {
  border-color:	var(--voca-1500);
}

.vlat-up-step.vlat-up-step-1500.on .vlat-way-point .vlat-way-point__inner .vlat-way-point__circle {
  background: var(--voca-1500);
}

.vlat-up-step.vlat-up-step-1500.on .vlat-way-title {
  color: var(--voca-1500);
}

.vlat-up-step.vlat-up-step-2000.on:before {
  background: var(--voca-2000);
}

.vlat-up-step.vlat-up-step-2000.on .vlat-way-point .vlat-way-point__inner {
  border-color:	var(--voca-2000);
}

.vlat-up-step.vlat-up-step-2000.on .vlat-way-point .vlat-way-point__inner .vlat-way-point__circle {
  background: var(--voca-2000);
}

.vlat-up-step.vlat-up-step-2000.on .vlat-way-title {
  color: var(--voca-2000);
}

.vlat-up-step.vlat-up-step-2500.on:before {
  background: var(--voca-2500);
}

.vlat-up-step.vlat-up-step-2500.on .vlat-way-point .vlat-way-point__inner {
  border-color:	var(--voca-2500);
}

.vlat-up-step.vlat-up-step-2500.on .vlat-way-point .vlat-way-point__inner .vlat-way-point__circle {
  background: var(--voca-2500);
}

.vlat-up-step.vlat-up-step-2500.on .vlat-way-title {
  color: var(--voca-2500);
}

.vlat-up-step.vlat-up-step-3000.on:before {
  background: var(--voca-3000);
}

.vlat-up-step.vlat-up-step-3000.on .vlat-way-point .vlat-way-point__inner {
  border-color:	var(--voca-3000);
}

.vlat-up-step.vlat-up-step-3000.on .vlat-way-point .vlat-way-point__inner .vlat-way-point__circle {
  background: var(--voca-3000);
}

.vlat-up-step.vlat-up-step-3000.on .vlat-way-title {
  color: var(--voca-3000);
}

.vlat-up-step.vlat-up-step-3500.on:before {
  background: var(--voca-3500);
}

.vlat-up-step.vlat-up-step-3500.on .vlat-way-point .vlat-way-point__inner {
  border-color:	var(--voca-3500);
}

.vlat-up-step.vlat-up-step-3500.on .vlat-way-point .vlat-way-point__inner .vlat-way-point__circle {
  background: var(--voca-3500);
}

.vlat-up-step.vlat-up-step-3500.on .vlat-way-title {
  color: var(--voca-3500);
}

.vlat-up-step.vlat-up-step-4000.on:before {
  background: var(--voca-4000);
}

.vlat-up-step.vlat-up-step-4000.on .vlat-way-point .vlat-way-point__inner {
  border-color:	var(--voca-4000);
}

.vlat-up-step.vlat-up-step-4000.on .vlat-way-point .vlat-way-point__inner .vlat-way-point__circle {
  background: var(--voca-4000);
}

.vlat-up-step.vlat-up-step-4000.on .vlat-way-title {
  color: var(--voca-4000);
}

.vlat-up-step.vlat-up-step-4500.on:before {
  background: var(--voca-4500);
}

.vlat-up-step.vlat-up-step-4500.on .vlat-way-point .vlat-way-point__inner {
  border-color:	var(--voca-4500);
}

.vlat-up-step.vlat-up-step-4500.on .vlat-way-point .vlat-way-point__inner .vlat-way-point__circle {
  background: var(--voca-4500);
}

.vlat-up-step.vlat-up-step-4500.on .vlat-way-title {
  color: var(--voca-4500);
}

.vlat-up-step.vlat-up-step-5000.on:before {
  background: var(--voca-5000);
}

.vlat-up-step.vlat-up-step-5000.on .vlat-way-point .vlat-way-point__inner {
  border-color:	var(--voca-5000);
}

.vlat-up-step.vlat-up-step-5000.on .vlat-way-point .vlat-way-point__inner .vlat-way-point__circle {
  background: var(--voca-5000);
}

.vlat-up-step.vlat-up-step-5000.on .vlat-way-title {
  color: var(--voca-5000);
}

.vlat-up-step.vlat-up-step-5500.on:before {
  background: var(--voca-5500);
}

.vlat-up-step.vlat-up-step-5500.on .vlat-way-point .vlat-way-point__inner {
  border-color:	var(--voca-5500);
}

.vlat-up-step.vlat-up-step-5500.on .vlat-way-point .vlat-way-point__inner .vlat-way-point__circle {
  background: var(--voca-5500);
}

.vlat-up-step.vlat-up-step-5500.on .vlat-way-title {
  color: var(--voca-5500);
}

.vlat-up-step.vlat-up-step-6000.on:before {
  background: var(--voca-6000);
}

.vlat-up-step.vlat-up-step-6000.on .vlat-way-point .vlat-way-point__inner {
  border-color:	var(--voca-6000);
}

.vlat-up-step.vlat-up-step-6000.on .vlat-way-point .vlat-way-point__inner .vlat-way-point__circle {
  background: var(--voca-6000);
}

.vlat-up-step.vlat-up-step-6000.on .vlat-way-title {
  color: var(--voca-6000);
}

/* .vlat-up-current-step-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  flex-direction: column;
} */

.vlat-up-current-step .vlat-title {
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: .5em;
}

.vlat-up-current-step .vlat-title>span {
  color: red;
}

.vlat-up-current-step .vlat-txt1 {
  font-size: 1.75rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 1em;
}

.vlat-up-current-step .vlat-txt1>span {
  font-weight: 700;
  color: #828282;
}

.vlat-up-current-step .vlat-txt2 {
  font-size: 1.5rem;
  line-height: 1.5;
  margin-top: 1em;
}

.vlat-up-current-step .vlat-btn-wrap {
  max-width: 350px;
  margin: 0	auto;
  margin-top: 2em;
}

.vlat-up-current-step .btn-vlat	{
  background: #ffbb00;
  font-weight: 900;
  color: #fff;
  font-size: 1.75rem;
  text-align: center;
  line-height: 1;
  padding: .8em	0;
  border-radius: 50px;
  overflow:	hidden;
}

.vlat-up-current-step ol {
  word-break: keep-all;
  font-size: 1.25rem;
}

.vlat-up-current-step.step-500 .btn-vlat {
  background: var(--voca-500);
}

.vlat-up-current-step.step-1000	.btn-vlat {
  background: var(--voca-1000);
}

.vlat-up-current-step.step-1500	.btn-vlat {
  background: var(--voca-1500);
}

.vlat-up-current-step.step-2000	.btn-vlat {
  background: var(--voca-2000);
}

.vlat-up-current-step.step-2500	.btn-vlat {
  background: var(--voca-2500);
}

.vlat-up-current-step.step-3000	.btn-vlat {
  background: var(--voca-3000);
}

.vlat-up-current-step.step-3500	.btn-vlat {
  background: var(--voca-3500);
}

.vlat-up-current-step.step-4000	.btn-vlat {
  background: var(--voca-4000);
}

.vlat-up-current-step.step-4500	.btn-vlat {
  background: var(--voca-4500);
}

.vlat-up-current-step.step-5000	.btn-vlat {
  background: var(--voca-5000);
}

.vlat-up-current-step.step-5500	.btn-vlat {
  background: var(--voca-5500);
}

.vlat-up-current-step.step-6000	.btn-vlat {
  background: var(--voca-6000);
}

.vlat-up-alert {
  border: 2px solid	var(--blue-color2);
  border-radius: 10px;
  overflow:	hidden;
  margin: 10px;
  margin-top: 20px;
  text-align: center;
  padding: 10px;
  font-size: 1.25rem;
  box-shadow: 0px 2px 4px rgba(0, 0, 0,	0.2);
	background:	#fff;
	flex-shrink: 0;
}

.vlat-up-alert>span	{
  color: var(--blue-color2);
  font-weight: 900;
}

.vlat-up-current-step-wrap .vlat_up-txt	{
  margin-bottom: 2em;
}

.vlat-up-current-step-wrap .p-txt1 {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: .5em;
}

.vlat-up-current-step-wrap .hl-secondary {
  color: var(--book-3c);
  font-weight: 900;
}

.vlat-up-current-step-wrap .hl-primary {
  color: var(--blue-color2);
  font-weight: 900;
}

.vlat-up-current-step-wrap .btn-box	{
  max-width: 320px;
  width: 100%;
}

.vlat-btn-wrap {
	margin-bottom: 30px;
}
.vlat-btn-wrap > a {
	max-width: 320px;
	margin:	0 auto;
	font-weight: 900;
}

/* 레벨테스트 응시	badge */

.btn-vlat-try-agin {
  position:	absolute;
  left:	10px;
  bottom: 10px;
  z-index: 4;
}


/* badge alert */

.badge-alert {
  padding: 7px 20px	5px;
  border-radius: 50px;
  overflow:	hidden;
  background: #fff;
  border: 1px solid	#dbdbdb;
  font-weight: 700;
  box-shadow: 2px 2px 2px rgba(0, 0, 0,	0.25);
}


/* 랭킹 섹션 */

.rank-info-div {
  padding: 30px	10%;
  display: flex;
  flex-direction: column;
	justify-content: space-between;
}

.rank-info-div .rank-title {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 1em;
}

.rank-info-div .rank-info {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.rank-info-div .rank-info .rank-info__title	{
  color: var(--blue-color2);
  border-right:	2px	solid var(--blue-color2);
  overflow:	hidden;
  padding: 6px;
  width: 110px;
  text-align: left;
  margin-right:	30px;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 700;
}

.rank-info-div .rank-info .rank-info__rank {
  font-weight: 900;
  font-size: 2rem;
  margin-right:	10px;
}

.rank-info-div .rank-info .rank-info__rank>span	{
  color: #828282;
  font-weight: 400;
  font-size: 1.5rem;
}

.rank-info-div__btn>a:first-child {
  margin-bottom: 5px;
}

.rank-info-div__btn	.btn-rank {
  border: 1px solid	var(--blue-color2);
  color: var(--blue-color2);
  background: var(--bg-color2b);
  line-height: 1;
  font-size: 1.75rem;
  text-align: center;
  font-weight: 900;
  padding: .8em	0;
  border-radius: 50px;
  overflow:	hidden;
}

.rank-info-div__btn	.btn-rank.on {
  background: var(--blue-color2);
  color: #fff;
}

.rank-table-div	{
  padding: 20px	30px;
  overflow-y: scroll;
	position: relative;
}

.rank-table-div>.loading-img {
  position:	absolute;
  left:	50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.rank-table-div	.rank-table-title-row {
  margin-bottom: 1em;
}

.rank-table-div	.rank-table-title {
  font-weight: 900;
  line-height: 1;
  font-size: 1.7rem;
}

.rank-table-box	.user-box .user-img-box	{
  width: 30px;
  margin-right:	10px;
  border-radius: 50%;
  overflow:	hidden;
  border: 1px solid	#dbdbdb;
}

.rank-table-box	.user-box {
  display: flex;
  align-items: center;
}


/* btn-select */

.btn-select-box	{
  display: flex;
  align-items: center;
}

.btn-select-box	.btn-select-box__select	{
  background: var(--blue-color2);
  width: 30px;
  border-radius: 10px;
  overflow:	hidden;
}

.btn-select-box	.btn-select-txt	a {
  font-size: 1rem;
  margin: 0	10px;
  font-weight: 700;
  color: var(--blue-color2);
}

.btn-select-box	.btn-select-box__select	.btn-select-box__select__img {
  padding-bottom: 100%;
  position:	relative;
}

.btn-select-box	.btn-select-box__select	.btn-select-box__select__img object	{
  position:	absolute;
  left:	50%;
  top: 50%;
  width: 60%;
  height: 60%;
  transform: translate(-50%, -50%);
}

.rank-table-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* 페이지네이션 */

.pagination-box	{
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.page-link {
  padding: .7em	1.25em;
}


/* 메뉴 */

.mobile-menu-box {
  position:	fixed;
  right: 0;
  top: 0;
  z-index: 90;
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0, 0, 0,	0.7);
  justify-content: flex-end;
}

.mobile-menu-box.on	{
  display: flex;
}

.mobile-menu {
  width: 320px;
  border-left: 1px solid var(--border-color1);
  background: #f2f2f2;
  padding-bottom: 10px;
  height: 100%;
  transform: translateX(100%);
  transition: all .1s;
}

.mobile-menu.on	{
  transform: translateX(0);
}

.mobile-menu .mobile-menu__title {
  color: var(--main-color);
  font-weight: 900;
  padding: 5px 10px;
}

.mobile-menu .mobile-menu__family {
  background: #F8F8F8;
  border-top: 1px solid	var(--border-color1);
  border-bottom: 1px solid var(--border-color1);
}

.mobile-menu .mobile-menu__family-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  padding-top: 0;
}

.mobile-menu .mobile-menu__family-list>div {
  max-width: 60px;
}

.mobile-menu .mobile-menu__q {
  margin-top: 1em;
  background: #F8F8F8;
}

.mobile-menu .mobile-menu__q_list {
  display: grid;
  grid-template-columns: 2fr 2fr;
  border-top: 1px solid	var(--border-color1);
}

.mobile-menu .mobile-menu__q_list>div {
  border-bottom: 1px solid var(--border-color1);
}

.mobile-menu .mobile-menu__q_list>div:nth-child(2n - 1)	{
  border-right:	1px	solid var(--border-color1);
}

.mobile-menu .mobile-menu__q_list a	{
  text-align: center;
  padding: 10px;
  background: #fff;
}

.mobile-menu .mobile-menu__vertical	{
  margin-top: 1em;
}

.mobile-menu .mobile-menu__vertical>div	{
  border-bottom: 1px solid var(--border-color1);
}

.mobile-menu .mobile-menu__vertical>div:first-child	{
  border-top: 1px solid	var(--border-color1);
}

.mobile-menu .mobile-menu__vertical	a {
  padding: 10px;
  background: #fff;
}

.mobile-menu .mobile-menu__title-row {
  display: flex;
  justify-content: space-between;
  padding: 15px	10px;
}

.mobile-menu .mobile-menu__title-row .mobile-menu_title-row__titile	{
  font-size: 1.25rem;
  color: var(--main-color);
  font-weight: 900;
  line-height: 1;
}

.mobile-menu .mobile-menu__title-row .btn-close	{
  width: 20px;
  height: 20px;
}




/* 레벨테스트 main */
.lat-list-box,
.lat-explain {
	padding: 30px;
	overflow-y:	scroll;
}
.lat-explain hr	{
	margin:	2rem 0;
}
.lat-explain p {
	margin-bottom: 0;
}
.lat-explain .lat-explain__row {
	margin-bottom: 20px;
}
.lat-explain h3	{
	font-weight: 900;
	font-size: 32px;
	color: #444;
	margin-bottom: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.lat-explain h3	> a	{
	background:	#849900;
	color: #fff;
	display: flex;
	align-items: center;
	font-size: 18px;
	padding: 10px 15px;
	border-radius: 50px;
}
.lat-explain h3	> a	> svg {
	width: 20px;
	margin-right: 5px;
}
.lat-explain .lat-step-box {
	display: grid;
	grid-template-columns: 2fr 2fr 2fr;
	gap: 10px;
}
.lat-explain ul	li {
	font-size: 18px;
}
.lat-explain .lat-step-box .lat-step {
	background:	#FFFDEB;
	border:	1px	solid #CBC41E;
	border-radius: 20px;
	padding: 10px;
	text-align:	center;
}
.lat-explain .lat-step-box .lat-step h4	{
	font-weight: 900;
	font-size: 22px;
	color: #849900;
}
.lat-explain .lat-step-box .lat-step p {
	margin-bottom: 10px;
}
.lat-explain .about-ar-table-list {
	display: grid;
	grid-template-columns: 2fr 2fr;
	gap: 10px;
}
.lat-list-box {
	overflow-y:	scroll;
}
.lat-list-box .lat-count-alert {
	/* background: #FFB800;	*/
	color: #ff385c;
	text-align:	center;
	font-weight: 700;
	padding: 10px;
}
.lat-list-box .lat-list	{
	display: grid;
	grid-template-columns: 2fr 2fr;
	gap: 10px;
	margin-bottom: 40px;
}
.lat-list-box .lat-list	.lat-box {
	border:	1px	solid #bdbdbd;
	border-radius: 20px;
	overflow: hidden;
	text-align:	center;
	padding: 20px 10px;
}
.lat-list-box .lat-list	.lat-box .lat-box-txt__title {
	margin-bottom: 20px;
}
.lat-list-box .lat-list	.lat-box .lat-box-txt__title .title	{
	font-weight: 900;
	font-size: 72px;
	line-height: 1;
}
.lat-list-box .lat-list	.lat-box .lat-box-txt__title .sub-title	{
	font-weight: 700;
	margin-left: 5px;
}
.lat-list-box .lat-list	.lat-box .lat-box-btn .btn-lat {
	border:	1px	solid #000;
	padding: 7px 0;
	border-radius: 10px;
	overflow: hidden;
	margin:	0 auto;
	margin-bottom: 5px;
	max-width: 220px;
	font-size: 20px;
	font-weight: 900;
}
.lat-list-box .lat-list	.lat-box .lat-box-btn .btn-lat.btn-lat-test	{
	background:	#000;
	border:	1px	solid #000;
	color: #fff;
}
.lat-list-box .lat-title {
	font-weight: 900;
	font-size: 26px;
	margin-bottom: 20px;
	padding-left: 5px;
	color: #444;
}
.lat-list-box .lat-title .lat-sub-title	{
	font-size: 80%;
	color: #828282;
	line-height: 1;
	font-weight: 400;
}
.lat-list-box .lat-list	.lat-box.disabled {
	pointer-events:	none;
	background:	#ededed;
	opacity: 0.7;
}
.lat-list-box .lat-list	.lat-box.disabled.lat-box-5500 .lat-box-txt__title,
.lat-list-box .lat-list	.lat-box.disabled.lat-box-6000 .lat-box-txt__title {
	color: #a1a1a1;
}
.lat-list-box .lat-list	.lat-box.disabled.lat-box-5500 .lat-box-btn	.btn-lat,
.lat-list-box .lat-list	.lat-box.disabled.lat-box-6000 .lat-box-btn	.btn-lat {
	border-color: #a1a1a1;
	color: #a1a1a1;
}
.lat-list-box .lat-list	.lat-box.disabled.lat-box-5500 .lat-box-btn	.btn-lat.btn-lat-test,
.lat-list-box .lat-list	.lat-box.disabled.lat-box-6000 .lat-box-btn	.btn-lat.btn-lat-test {
	background:	#a1a1a1;
	border:	1px	solid #a1a1a1;
	color: #fff;
}
/* 녹음하기	레이아웃 */
.word-rec-list-section .voca-list {
	padding: 30px;
	padding-top: 20px;
	overflow: scroll;
	height:	100%;
}
.word-rec-list-section .voca-list .voca-item {
	border:	1px	solid #BDBDBD;
	background:	#fff;
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 10px;
	padding: 30px;
	display: flex;
	position: relative;
}
.word-rec-list-section .voca-list .voca-item.on	{
	border:	1px	solid #A0C2FF;
	background:	#E6EDFA;
}
.word-rec-list-section .voca-list .voca-item .word-txt {
	margin-bottom: 30px;
}
.word-rec-list-section .voca-list .voca-item .word-txt a {
	display: flex;
	align-items: center;
}
.word-rec-list-section .voca-list .voca-item .word-txt a .voca-sound {
	width: 30px;
	margin-right: 10px;
}
.word-rec-list-section .voca-list .voca-item .word-txt a .voca-word	{
	font-weight: 900;
	font-size: 2rem;
	line-height: 1;
	color: var(--blue-color2);
}
.word-rec-list-section .voca-list .voca-item .word-sentence-list .word-sentence	{
	margin-bottom: 10px;
}
.word-rec-list-section .voca-list .voca-item .word-sentence-list .word-sentence	a{
	display: flex;
	align-items: center;
}
.word-rec-list-section .voca-list .voca-item .word-sentence-list .word-sentence	a .voca-sound {
	width: 30px;
	margin-right: 10px;
}
.word-rec-list-section .voca-list .voca-item .word-sentence-list .word-sentence	a .sentence	{
	font-weight: 700;
	font-size: 1.5rem;
}
.word-rec-list-section .voca-list .voca-item .rec-txt-side {
	flex-grow: 1;
}
.word-rec-list-section .voca-list .voca-item .rec-btn-side {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 170px;
	flex-shrink: 0;
	margin-top:	3%;
}
.word-rec-list-section .voca-list .voca-item .rec-btn-side .rec-btn	{
	width: 80px;
}
.word-rec-list-section .voca-list .voca-item .rec-btn-side .rec-btn-icon {
	width: 60px;
	margin:	0 auto;
}
.word-rec-list-section .voca-list .voca-item .rec-btn-side .rec-btn-icon svg {
	width: 60px;
	height:	60px;
}
.word-rec-list-section .voca-list .voca-item .rec-btn-side .rec-btn	.rec-btn-txt {
	text-align:	center;
}
/* .word-rec-list-section .voca-list .voca-item	.rec-btn-side .record-play.on {
	pointer-events:	none;
} */
.word-rec-list-section .voca-list .voca-item .rec-btn-side .record-play.on svg path.svg-bg {
	fill: #59CB19;
}
.word-rec-list-section .voca-list .voca-item .rec-btn-side .record-play.on svg path.svg-icon {
	fill: #ffffff;
}

.word-rec-list-section .voca-list .voca-item .rec-btn-side .down-btn.on	{
	pointer-events:	none;
}
.word-rec-list-section .voca-list .voca-item .rec-btn-side .down-btn.on	svg	path.svg-bg	{
	fill: #FFB800;
}
.word-rec-list-section .voca-list .voca-item .rec-btn-side .down-btn.on	svg	path.svg-icon {
	fill: #fff;
}

.rec-list-box {
	padding: 0 10px;
	height:	100%;
	display: block;
}
.rec-list-box .btn-load-data {
	margin:	0 auto;
}

.rec-list-box .load-data {
	width: 100%;
}
.rec-list-box .word-rec-list-section {
	width: 100%;
}
.rec-list-box .word-rec-list-section .voca-list	{
	padding: 0;
}
.rec-list-box .voca-item .rec-date {
	position: absolute;
	right: 20px;
	top: 10px;
	color: #444;
	font-weight: 900;
	font-size: 1.6rem;
	line-height: 1;
}


.rec-list-box .btn-close svg path {
	fill: #fff;
}
.rec-list-box .rec-btn-side	.record-play svg .svg-pause	{
	display: none;
}
.rec-list-box .rec-btn-side	.record-play.on	svg	.svg_bg	{
	fill: #59CB19;
}
.rec-list-box .rec-btn-side	.record-play.on	svg	.svg-pause {
	display: block;
}
.rec-list-box .rec-btn-side	.record-play.on	svg	.svg-play {
	display: none;
}


.btn-more {
	max-width: 280px;
	margin:	0 auto;
	margin-bottom: 20px;
}
.btn-load-data a {
	text-align:	center;
}
.btn-load-data a > .img	{
	width: 100px;
	margin:	0 auto;
}

/* 로딩체크	*/
.loading-check-layer {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom:	0;
	z-index: 40;
	background:	rgba(0,	0, 0, 0.2);
	justify-content: center;
	align-items: center;
	transition:	all	0.2s;
	display: none;
}
.loading-check-layer.on	{
	display: flex;
}


/* 로딩결과가 없을때 안내메세지 */
.no-data-txt {
	position: absolute;
	left: 50%;
	top: 45%;
	transform: translate(-50%, -50%);
	font-size: 2rem;
	font-weight: 900;
	text-align:	center;
}



/* 레코딩재생바 */
.record_play_box {
	padding: 1em;
	width: 80vw;
}
.recording-timer {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height:	auto;
	position: relative;
	margin-right: 50px;
}
.recording-timer .timer-bar	{
	width: 100%;
	height:	10px;
	border:	1px	solid #BDBDBD;
	border-radius: 50px;
	/* overflow: hidden; */
	padding: 1px;
	padding-right: 10px;
}
.recording-timer .timer-bar	.bar-box {
	width: 100%;
	height:	100%;
	border-radius: 50px;
	/* overflow: hidden; */
}
.recording-timer .timer-bar	.bar {
	width: 0;
	height:	100%;
	background:	#FF5A78;
	/* transition: all linear 1s; */
	position: relative;
	border-radius: 50px;
}
.recording-timer .timer-bar	.bar:after {
	content: '';
	position: absolute;
	left: 99%;
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height:	17px;
	background:	#FF5A78;
	border-radius: 50%;
}
.rec-section .recording-timer .timer-bar .bar:after	{
	display: none;
}
.recording-timer .r-time {
	/* position: absolute;
	top: 100%;
	left: 0; */
	margin:	0 5px;
}
.recording-timer .e-time {
	/* position: absolute;
	top: 100%;
	right: 0; */
	margin:	0 5px;
}
.record_play_box .record-play {
	width: 60px;
}
.record-play svg .svg-pause	{
	display: none;
}
.record-play.on	svg	.svg_bg	{
	fill: #59CB19;
}
.record-play.on	svg	.svg-pause {
	display: block;
}
.record-play.on	svg	.svg-play {
	display: none;
}
.record-play .rec-btn-txt {
	text-align:	center;
}
.record_play_box .record_play_box__title {
	text-align:	center;
	font-weight: 900;
	font-size: 1.5rem;
	margin-bottom: 10px;
}
.record_play_box .record_play_box__btn {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 0 2em;
	margin-top:	10px;
	position: relative;
}
.record_play_box .record_play_box__btn > a {
	width: 60px;
}
.record_play_box .record_play_box__btn > a.down-btn.on svg path.svg-bg {
	fill: #FFB800;
}
.record_play_box .record_play_box__btn > a.down-btn.on svg path.svg-icon {
	fill: #fff;
}

.record_play_box .record_play_box__btn .record-play	{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}


/* 기본 비디오 컴포넌트 */
.video_img1	{
	position: relative;
	padding-bottom:	56.25%;
	border-radius: 12px;
	overflow: hidden;
	border:	5px	solid #fff;
	box-shadow:	0px	0px	0px	1px	#BDBDBD;
}

.video_img1	img{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height:	100%;
	border-radius: 6px;
}
.video_title1 {
	white-space: normal;
	line-height: 1.4;
	height:	53px;
	margin-top:	5px;
	padding-left: 5px;
	text-align:	left;
	display: -webkit-box;
	-webkit-line-clamp:	2;
	-webkit-box-orient:	vertical;
	overflow: hidden;
	font-size: 1.2rem;
}


/* AR레벨	아이콘	*/
.ar-icon {
	background:	var(--olive-color2);
	padding: 7px 10px 8px;
	border-radius: 6px;
	overflow: hidden;
	display: block;
	text-align:	center;
	line-height: 1;
	font-weight: 900;
	color: #fff;
	font-size: 1rem;
	white-space: nowrap;
	display: inline-block;
	vertical-align:	-6px;
}
.ar-icon::first-letter {
  color: #FFD600;
  margin-right:	1px;
}
.book-img-box .ar-icon {
	position: absolute;
	left: 50%;
	top: 0%;
	transform: translate(-50%, -50%);
	z-index: 5;
}


/* 메세지 toggle */
/* @keyframes msgToggleAni {
	0% {
		top: -30%;
	}
	50%	{
		top: 10%;
	}
	100% {
		top: -30%;
	}
} */

.msg-toggle	{
	position: fixed;
	background:	#fafafa;
	box-shadow:	0px	1px	4px	-1px #666;
	border-radius: 50px;
	color: #000;
	padding: 10px 30px;
	top: -30%;
	z-index: 50;
	transition:	top	0.5s;
	font-weight: 700;
}
.msg-toggle.top	{
	left: 50%;
	transform: translateX(-50%);
}
.msg-toggle.left {
	left: 5%;
}
.msg-toggle.right {
	right: 5%;
}
.msg-toggle.on {
	top: 10%;
}


.full-popup-contents .full-popup-header	.title .video-season-title {
	margin-left: 80px;
	position: relative;
	max-width: 50%;
}

.full-popup-contents .full-popup-header	.title .video-season-title:before {
	content: '';
	position: absolute;
	left: -40px;
	top: 50%;
	transform: translateY(-40%);
	width: 2px;
	height:	50%;
	background:	#828282;
}
.full-popup-contents .full-popup-header	.title .video-season-title span	{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
} 

/* 단어 카드 css  day-quiz */
.day-quiz-wrap { width: 100%; background-color: #fff; border-radius: 20px; padding: 25px;}
.day-quiz-wrap-default { border: 3px solid var(--txt-color3);}
.day-quiz-wrap-orange { border: 3px solid var(--yellow-color2);}
.day-quiz-wrap-olive { border: 3px solid var(--olive-color2);}
.day-quiz-wrap-green { border: 3px solid var(--green-color5);}
.day-quiz-wrap-border-none { border-radius: 0px !important; padding: 0px !important; border: 0px !important; }

.day-quiz-header { display: flex; justify-content: space-between; }
.day-quiz-header > :nth-child(1){ display: flex; gap: 10px; }
.day-quiz-header > :nth-child(2){ display: flex; gap: 10px; }

.day-quiz-title { font-weight: 900; font-size: 24px; }
.day-quiz-title-default { color: var(--blue-color2); }
.day-quiz-title-orange { color: var(--yellow-color2); }
.day-quiz-title-olive { color: var(--olive-color2); }
.day-quiz-title-green { color: var(--green-color5); }

.day-quiz-level { color: var(--txt-color4); font-weight: 600; display: flex; justify-content: center; align-items: center;}

.day-quiz-count { margin-top: 10px; color: var(--txt-color4); font-size: 16px; font-weight: 500; }

.day-quiz-word-box { display: flex; justify-content: space-between; text-align: center;

	color: var(--txt-color5); font-weight: 700; font-size: 16px; }

.day-quiz-image{ width: 100px; border-radius: 10px; border: 1px solid var(--txt-color2); }

.day-quiz-page { color: var(--txt-color5); font-size: 11px; }

.day-quiz-btn-box {	display: flex; justify-content: space-between; margin: 0 auto; width: 80%;}

.day-quiz-word-list { border-radius: 10px; text-align: center; display: flex; justify-content: center; padding: 3px 10px; font-weight: 700; align-items: center; cursor: pointer;}
.day-quiz-word-list-default { background-color: var(--blue-color2); color: #fff;}
.day-quiz-word-list-orange { background-color: var(--yellow-color2); color: #fff;}
.day-quiz-word-list-olive { background-color: var(--olive-color2); color: #fff;}
.day-quiz-word-list-green { background-color: var(--green-color5); color: #fff;}


/* 스펠링 학습목록 */
.spelling-history-wrap{ width: 100%; height: 524px; overflow: scroll; }
.spelling-history-wrap::-webkit-scrollbar { display: none; }

.spelling-history-contents { display: flex; flex-direction: column; padding: 10px; gap: 20px;}

.spelling-history-row { display:flex; width: 100%; height: 220px; background-color: #fff; border-radius: 10px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}
.spelling-history-row > div {justify-content: center; align-items: center; }
.spelling-history-row > :nth-child(1) { width: 300px;}
.spelling-history-row > :nth-child(2) { width: 100%;}
.spelling-history-row > :nth-child(3) { width: 300px;}

.spelling-history-info { display: flex; flex-direction: column; justify-content: center; align-items: center;}
.spelling-history-info > :nth-child(1) { font-weight: 900; font-size: 40px;}
.spelling-history-info > :nth-child(2) { font-weight: 700; font-size: 30px; color: var(--blue-color2); }

.spelling-history-word-list { display: flex; justify-content: center; gap: 28px;}

.spelling-history-word { display: flex; flex-direction: column; gap: 10px; }
.spelling-history-word > div > img { border-radius: 10px; }
.spelling-history-word > :nth-child(1) { width: 110px; height: 110px;}
.spelling-history-word > :nth-child(2) { font-weight: 700; font-size: 18px; text-align: center;}

.spelling-history-complete { display: flex; flex-direction: column; justify-content: center; gap:10px; }
.spelling-history-complete > :nth-child(1) { width: 110px; height: 110px;}