@charset "utf-8";

.wrapper {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	max-width: 1400px;
	width: 100%;
	height: calc(var(--vh, 1vh) * 100);
	max-height: 788px;
	background-color: #fff;
	box-sizing: border-box;
}

/* 헤더 */
.header-w {
	max-width: 1400px;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	z-index: 99;
	margin: 0 auto;
	width: 100%;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #7855FF;
	padding: 0 30px 0 40px;
	box-sizing: border-box;
}

/* 헤더-좌측 */
.header-left {
	display: flex;
	align-items: center;
}

/* 좌측메뉴 */
.mypage-w {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	width: 320px;
	padding: 40px 30px;
	background-color: #fff;
	box-sizing: border-box;
}

/* 본문 */
.contents-w {
	display: flex;
	width: 100%;
	padding: 70px 0 0;
	box-sizing: border-box;
	overflow-y: auto;
	height: 100%;
	max-height: 100vh;
}

/*height:calc(var(--vh, 1vh) * 100);*/
[class*="page-main"] .content-inner {
	background-size: 100% auto;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-color: #EEEAFF;
}

[class*="page-main"] .content-section {
	margin-top: 40px;
}

.content-inner {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

.content-inner:after {}

.contents {
	position: relative;
	height: 100%;
	width: 100%;
	/*max-height:718px;max-width:calc(1080px + 4.4vw);*/
	margin: 0 auto;
	/*padding:30px 40px 40px;*/
	padding: 40px 20px;
	box-sizing: border-box;
}

.content-section {
	margin-top: 10px;
	width: 100%;
	position: relative;
}

.content-section:first-of-type {
	margin-top: 0;
}

.split-w {
	display: flex;
	width: 100%;
	height: 100%;
}

/* 메인 */
.page-main01 .content-inner {
	background-image: url('../img/bg-main.png');
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;
}

.page-main01 .contents {
	padding: 30px 0px;
	overflow-y: auto;
}

.page-main01 .contentsTitle01 {
	padding: 0 40px;
	box-sizing: border-box;
}

.page-main02 .contents {
	padding-bottom: 0;
}

/* 메인 - 더 읽을만한 글 */
.readingList-w {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% + 22px);
	margin-top: -4px;
	padding-bottom: 80px;
}

.readingList-inner {
	flex-shrink: 0;
	width: 20%;
	padding-right: 22px;
	margin-top: 14px;
	box-sizing: border-box;
}

/* 일일학습 보고서 - 도넛 그래프  */
.graph-wrap-test-end .graph-donut {
	width: 100%;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	position: relative;
}

.graph-wrap-test-end .graph-donut .circle-graph {
	margin: 1.5rem auto;
}

.graph-wrap-test-end .graph-donut .circle-graph.white {
	background: #ffffff;
	border-radius: 50%;
}

.circle-graph-point-info {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #5a371e;
	font-size: 1rem;
	font-weight: 600;
}

.graph-wrap-test-end P {
	text-align: center;
	margin-bottom: .3rem;
	font-family: 'KoreanERWJM';
}

.graph-wrap-test-end P.txt {
	font-size: 1.1rem;
	font-weight: 400;
	/* line-height: 1.35em; */
}

.graph-wrap-test-end P.title {
	top: 36%;
	font-size: .9875rem;
	/* line-height: 1.35em; */
}

.graph-wrap-test-end P.point {
	font-size: 4.5rem;
	font-weight: 400;
	color: #7855FF;
	line-height: 3.5rem;
	font-family: 'KoreanERWJM';
}

.graph-wrap-test-end P.point em {
	font-size: 2rem;
	color: #5a371e;
	position: relative;
	margin-left: .125rem;
	font-weight: 400;
}

.graph-wrap-test-end P.count {
	font-size: .9875rem;
	color: #5a371e;
	line-height: 1.35em;
	font-weight: 800;
	font-family: 'NanumSquareRound';
}

.graph-wrap-test-end P.count em {
	opacity: 0.5;
}

/* 바그래프 (일일학습보고서)*/
.pinNote-w01 {
	height: auto;
	margin-top: 2.5rem;
}

.pinNote-w01:after {
	background-color: #FFD8DC;
}

.pinNote-w01 .pinNote-inner {
	display: flex;
	justify-content: center;
	width: 100%;
}

.pinNote-w01 .pinNote-inner:after {}

.pinNote-w01 .pinNote-cont {
	width: 50%;
}

.pinNote-w01 div.graph {
	position: relative;
	width: 85%;
	margin: 0 auto;
}

.sticker-title01 {
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 20px;
	height: 40px;
	font-size: 20px;
	font-weight: 800;
	color: #5A371E;
	line-height: 2.5rem;
	text-align: center;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0 auto 17px;
	background-image: url("data:image/svg+xml,%0A%3Csvg width='129' height='40' viewBox='0 0 129 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.00333199 8.25183L2.34974 10.62L0.00333199 12.9883L2.34974 15.3599L0.00333199 17.7281L1.89739 19.6326L2.35195 20.0919L1.7314 20.7181L0.0055764 22.4612L1.27235 23.7417L2.35195 24.8294L0.883515 26.3138L0.00669809 27.201L0.786578 27.9852L2.34641 29.5659L0.0267593 31.9084L0 31.9352L0.660707 32.6074L2.34974 34.3158L0.00333199 36.6863L2.34974 39.0545L1.41274 40H127.826L128.766 39.05L128.997 38.8181L128.828 38.649L128.131 37.9454L126.65 36.4488L128.997 34.0805L126.65 31.7123L128.997 29.3418L126.65 26.9736L128.997 24.6054L126.65 22.2371L128.997 19.8689L126.65 17.4973L128.997 15.1291L126.65 12.7609L128.997 10.3926L126.65 8.02442L128.997 5.65282L126.65 3.28458L126.686 3.2454L127.8 2.12514L129 0.916365L128.092 0H1.21999L2.35977 1.15048L0.0133631 3.52208L2.35977 5.89032L0.00333199 8.25183Z' fill='%23B7EEFF'/%3E%3C/svg%3E%0A");
}

/* 플랜 선택 */
.planList-w {
	margin-top: 20px;
	padding-top: 20px;
	position: relative;
}

.planList-inner:first-of-type {
	margin-top: 0;
}

.planList-inner {
	margin-top: 13px;
}


.bar-graph-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 6rem;
	border-bottom: 2px solid #5a371e;
	margin: 0 auto;
	overflow: hidden;
}

.bar-graph-wrap .inner,
.bar-graph-label-wrap P {
	position: relative;
	width: 7rem;
	padding: 0 5px;
}

.bar-graph-wrap .inner .track {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2.8rem;
	max-width: 48px;
	height: 100%;
	background: #ececec;
	border-radius: .75rem .75rem 0 0;
}

.bar-graph-wrap .inner .track .vertical-bar {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	width: 100%;
	border-radius: .5rem .5rem 0 0;
	-webkit-animation: bargrowth 2s ease;
	animation: bargrowth 2s ease;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.bar-graph-wrap .inner:first-child .track P {
	background-color: #7855FF;
}

.bar-graph-wrap .inner:last-child .track P {
	background-color: #5a371e;
}

.bar-graph-label-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
	line-height: 2rem;
	margin: 0 auto;
}

.bar-graph-label-wrap P {
	margin-bottom: 5px;
	font-weight: 700;
	text-align: center;
	font-size: 12px;
}

.bar-graph-label-wrap P strong {
	display: inline-block;
	padding-right: 3px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -1.3px;
}

.bar-graph-label-wrap P:first-child {
	color: #7855FF;
}

.bar-graph-label-wrap P:last-child {
	color: #5a371e;
}

[class*="toastPopup-w"] .bar-graph-label-wrap {
	line-height: 1.5rem;
}

[class*="toastPopup-w"] .bar-graph-wrap .inner,
[class*="toastPopup-w"] .bar-graph-label-wrap P {
	width: 3.5rem;
	font-size: 16px;
}

[class*="toastPopup-w"] .bar-graph-label-wrap P strong {
	font-size: 16px;
}

[class*="toastPopup-w"] .bar-graph-wrap .inner .track {
	width: 30px;
	background-color: transparent;
}

@-webkit-keyframes bargrowth {
	0% {
		bottom: -100%;
	}

	100% {
		bottom: 0;
	}
}

@keyframes bargrowth {
	0% {
		bottom: -100%;
	}

	100% {
		bottom: 0;
	}
}

@media screen and (max-width: 1320px) {
	.pinNote-inner {
		display: block;
		height: 420px;
		overflow: hidden;
		overflow-y: auto;
	}

}

/* 로딩바 */
[class^="icon-"] {
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

/* 로딩중 */
.loadingBar-w {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 99;
	width: 100%;
	height: 100%;
	background-color: rgba(90, 55, 30, 0.8);
}

.loadingBar-inner {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 200;
}

@-webkit-keyframes scaling-circle {

	0%,
	30%,
	50%,
	100% {
		-webkit-transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(1);
		transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(1);
	}

	40% {
		-webkit-transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(0);
		transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(0);
	}
}

@keyframes scaling-circle {

	0%,
	30%,
	50%,
	100% {
		-webkit-transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(1);
		transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(1);
	}

	40% {
		-webkit-transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(0);
		transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(0);
	}
}

.scaling-circle {
	--radius: 25;
	--size: 10;
	height: calc(var(--size) * 1px);
	width: calc(var(--size) * 1px);
	position: absolute;
}

.scaling-circle div {
	height: 100%;
	width: 100%;
	position: absolute;
	border-radius: 100%;
	background: #7855FF;
	-webkit-animation: scaling-circle 0.8s calc(var(--delay) * 1s) infinite ease;
	animation: scaling-circle 0.8s calc(var(--delay) * 1s) infinite ease;
	-webkit-transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px));
	transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px));
}

.scaling-circle div:nth-child(1) {
	--angle: 45;
	--delay: 0.1;
}

.scaling-circle div:nth-child(2) {
	--angle: 90;
	--delay: 0.2;
}

.scaling-circle div:nth-child(3) {
	--angle: 135;
	--delay: 0.3;
}

.scaling-circle div:nth-child(4) {
	--angle: 180;
	--delay: 0.4;
}

.scaling-circle div:nth-child(5) {
	--angle: 225;
	--delay: 0.5;
}

.scaling-circle div:nth-child(6) {
	--angle: 270;
	--delay: 0.6;
}

.scaling-circle div:nth-child(7) {
	--angle: 315;
	--delay: 0.7;
}

.scaling-circle div:nth-child(8) {
	--angle: 360;
	--delay: 0.8;
}

/* ---- 스크롤바 - 회색 ---- */
/*스크롤바 전체*/
*::-webkit-scrollbar,
*::-webkit-scrollbar,
*::-webkit-scrollbar {
	width: 6px;
}

/*스크롤 막대*/
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
	background-color: #D9D9D9;
	border-radius: 10px;
	width: 6px;
}

/*스크롤 막대 외부*/
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
	background-color: #F4F4F4;
}

/* ---- //end: 스크롤바 - 회색 ---- */

/* ------ x축 스크롤바 ------ */
/* x축 스크롤바 전체*/
.recommendList-w::-webkit-scrollbar {
	width: 100%;
	height: 6px;
}

/* x축 스크롤 막대*/
.recommendList-w::-webkit-scrollbar-thumb {
	background-color: #D9D9D9;
	border-radius: 10px;
	width: 6px;
}

/* x축 스크롤 막대 외부*/
.recommendList-w::-webkit-scrollbar-track {
	background-color: rgba(255, 255, 255, .6);
	border-radius: 10px;
}

/* ---- //end:  x축 스크롤바---- */

/* 스크롤 없애기 */
.page-main01 .contents-w,
.page-main02 .contents {
	overflow: hidden;
}

/* 스크롤 만들기 */
.page-main01 .contents,
.page-main02 .contents,
.page-test01 .contents,
.page-report01 .contents,
.page-quiz0302 .contents {
	overflow-y: auto;
}

/* 메인-필독해습 */
.recommendList-w {
	display: flex;
	justify-content: flex-start;
	padding: 0 30px 20px 30px;
	margin-top: 20px;
	overflow: hidden;
	overflow-x: auto;
}

.recommendList-inner {
	padding: 0 10px;
}

.main-bgImage-w {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 300px;
	overflow: hidden;
}

[class^="bgPoint"] {
	display: block;
	position: absolute;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: Center;
	background-size: 100% auto;
}

.testInfo-bg {
	position: absolute;
	left: 0;
	bottom: 115px;
	z-index: 1;
	width: 100%;
}

.charImage {
	display: block;
	margin: 0 auto;
}

.page-test01 .content-section {
	margin-top: 0;
	padding-bottom: 80px;
}

.page-test01 .moduleBtn-w {
	margin-top: 50px;
}

.page-test02 .sliderList-w {
	margin: 16px auto 0;
	padding: 0 30px;
	width: 80%;
}

/* 성향 테스트-안내 */
[class*="page-testInfo"] .moduleBtn-w {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	width: 100%;
}

[class*="page-testInfo0"] {
	position: relative;
}

[class*="page-testInfo2"]:after {
	display: block;
	content: '';
	position: absolute;
	left: 50%;
	bottom: -430px;
	transform: translateX(-50%);
	width: 1657px;
	height: 700px;
	border-radius: 100%;
	background-color: #EEEAFF;
}

[class*="page-testInfo2"] .contents-w {
	position: relative;
	background-color: #7855FF;
}

.testInfo-bg .charImage {
	width: 265px;
}

.page-testInfo2101 .contents {
	padding: 0;
}

.page-testInfo2101 .content-inner {
	max-height: 660px;
}

.page-testInfo2101 .content-section {
	height: 100%;
}

.page-testInfo2101 .moduleBtn-w {
	bottom: 40px;
}

/* 단원평가 안내 */
.page-testInfo2301 .content-inner {
	background: url('../img/bg-info03.png') no-repeat 60% 70%;
	background-size: 684px auto;
}

.page-testInfo2301 .testInfo-title {
	font-size: 28px;
	font-weight: 400;
	line-height: normal;
}

.page-testInfo2301 .testInfo-title strong {
	font-size: 40px;
	margin-bottom: 6px;
}

.page-testInfo2301 .testInfo-title strong {
	font-size: 40px;
	margin-bottom: 6px;
}

.page-testInfo2301 .testInfo-bg {
	bottom: 100px;
}

.page-testInfo2301:after {
	bottom: -475px;
}

/* 지문 메인 */
.page-testInfo0301 {
	background-image: url("../img/bg-testInfo0301.png");
}

.page-testInfo0301 .contents {
	padding-top: 0;
	align-items: center;
	height: auto;
}

.page-testInfo0301 .split-w {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
}

.page-testInfo0301 .content-l {
	padding: 0;
}

.page-testInfo0301 .pageHeader-inner {
	background: none;
}

.content-l {
	flex-shrink: 0;
	width: 54%;
	box-sizing: border-box;
	max-height: calc(100vh - 80px);
}

.content-r {
	width: 100%;
	padding: 40px;
	box-sizing: border-box;
	max-height: calc(100vh - 80px);
}

/* max-width:426px; */
.theme-w {
	max-width: 426px;
}

.theme-w .bg-image {
	display: block;
	width: 311px;
	margin: 0 auto;
	position: relative;
	top: 6px;
}

.theme-w .quizBtnType10 {
	margin-top: 12px;
}

.theme-w .quizBtnType10:first-of-type {
	margin-top: 0;
}

.bg-round {
	display: block;
	width: calc(100% + 50px);
	height: 371px;
	margin-left: -25px;
	border-radius: 100%;
	background-color: #EEEAFF;
}

.bg-round:after {
	display: block;
	content: '';
	width: 100%;
	height: 50%;
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: #EEEAFF;
}

.testInfo-w {
	margin: 0 auto;
}

.testInfo-inner {
	max-width: 315px;
	margin: 0 auto;
	color: #fff;
	text-align: center;
}

.testInfo-title {
	position: relative;
	font-size: 32px;
	letter-spacing: -1.6px;
	line-height: 40px;
	text-align: left;
	word-break: keep-all;
	font-family: 'KoreanERWJM';
}

.testInfo-title strong {
	font-weight: 700;
	font-size: 24px;
	font-family: 'NanumSquareRound';
}

.testInfo-title p {
	margin-top: 5px;
}

.testInfo-text {
	display: block;
	text-align: left;
	position: relative;
	margin-top: 18px;
	padding-top: 20px;
	font-size: 20px;
	line-height: 34px;
	letter-spacing: -1px;
}

.testInfo-dott {
	display: flex;
	align-items: flex-start;
	margin-top: 24px;
	padding: 20px 0 24px;
	position: relative;
}

.testInfo-dott strong {
	flex-shrink: 0;
	margin: 4px 32px 0 0;
	font-size: 28px;
	letter-spacing: -1.4px;
	font-weight: 400;
	font-family: 'KoreanERWJM';
}

.testInfo-dott .dottList {}

/* info LNB 레이어 */
.infoSnb-w {
	position: relative;
	z-index: 9;
}

.infoSnb-w:after {
	display: none;
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: #5A371E;
	opacity: 0.8;
}

.infoSnb-inner {
	position: absolute;
	right: -999px;
	top: 0;
	z-index: 1;
	padding: 64px 40px 40px;
	width: 356px;
	height: 100vh;
	transition: ease-in-out 0.3s;
	box-sizing: border-box;
	background-color: #7855FF;
	border-left: 2px solid #5A371E;
}

.infoSnb-w.open:after {
	display: block;
}

.infoSnb-w.open .infoSnb-inner {
	position: absolute;
	right: 0;
	top: 0;
}

.labelGroup {
	display: flex;
	align-items: center;
}

.labelGroup .icon-level {
	width: 30px;
	height: 34px;
	margin-left: 0;
}

.labelGroup .label02 {
	margin-left: 6px;
}

.labelGroup .label02:first-of-type {
	margin-left: 12px;
}

/* 성향진단 보고서 */
[class*="page-report"] {
	padding-top: 70px;
}

[class*="page-report"] .contents-w,
[class*="page-report"] .contents {
	padding: 0;
	max-width: 100%;
	height: 100%;
}

[class*="page-report"] .content-section {
	padding: 0 2vw 2vw;
	width: 100%;
	box-sizing: border-box;
}

[class*="page-report"] .moduleBtn-w {
	margin-top: 1.5rem;
}

/* 학습진단 보고서 */
.page-report01 .content-inner {
	padding-top: 70px;
	overflow-y: auto;
}

.page-report01 .quizResult-w {
	padding-bottom: 70px;
}

.sectionSplit-w {
	position: relative;
	padding-bottom: 30px;
	display: flex;
	justify-content: space-between;
	width: 100%;
}

/* 나의학습이력 */
.page-qna0801 {
	background-color: #F6F4FF;
}

.page-qna0801 .contents {
	padding-top: 20px;
}

.page-qna0801 .content-inner {
	overflow: hidden;
}

.btnList-inner {
	padding-top: 20px;
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: flex-start;
}

.btnList-cont {
	margin-right: 16px;
}

.btnList-w {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.btnList-w .selectBtn {
	min-width: 160px;
	padding: 0 40px 0 20px;
	box-sizing: border-box;
}

.btnList-w .selectBtn:after {
	right: 20px;
}

.btnList-w .roundBtnType01 {
	height: 48px;
}

.studyHistory-w {
	height: 100%;
}

.studyHistory-inner {
	display: flex;
	justify-content: center;
	position: relative;
	margin-top: 20px;
	width: 100%;
	height: 75%
}

.studyHistory-inner:before,
.studyHistory-inner:after {
	display: block;
	content: '';
	position: absolute;
	left: 42%;
	z-index: 2;
	width: 76px;
	height: 24px;
	background-image: url('../img/bg-note06.png');
}

.studyHistory-inner:before {
	top: 30px;
}

.studyHistory-inner:after {
	bottom: 30px;
}

.studyHistory-cont {
	padding-left: 8px;
	width: 110%;
}

.studyHistory-cont:first-of-type {
	width: 90%;
	padding-left: 0;
	padding-right: 8px;
}

.studyHistory-w .btn-arrow03 {
	position: static;
	transform: rotate(0);
	margin-left: 10px;
}

/* 배지,칭호 */
.page-report0601 {
	position: relative;
}

.page-report0601:before {
	display: block;
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 60%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
	background-image: url('../img/bg-bedgeTitle.png');
}

.page-report0601 .contents {
	max-width: 652px;
	padding-top: 12px;
}

.page-report0601 .section01 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.page-report0601 .section02 {
	position: relative;
	padding-top: 38px;
	text-align: center;
	margin: 24px auto 0;
}

.page-report0601 .ribbon-title01 {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 1;
	transform: translateX(-50%);
}

.pinNote-title {
	position: relative;
	text-align: center;
}

.pinNote-title .icon-crown {
	width: 40px;
}

.pinNote-title .pinNote-subject {
	margin-top: 6px;
	color: #5A371E;
	font-size: 16px;
	font-weight: 800;
	font-family: 'NanumSquareRound';
	line-height: 130%;
	letter-spacing: -0.8px;
}

.pinNote-title .icon-ribbon {
	position: absolute;
	left: 50%;
	top: -20px;
	width: 263px;
	display: inline-block;
	transform: translateX(-50%);
}

.pinNote-title .pinNote-top {
	position: relative;
}

.pinNote-title .pinNote-label {
	position: absolute;
	left: 0;
	top: 13px;
	right: 0;
	color: #7855FF;
	font-size: 28px;
	font-family: 'KoreanERWJM';
	font-weight: 400;
}

.pinNote-list {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin-top: 94px;
}

.pinNote-list>div {
	position: relative;
	width: 120px;
	margin-left: 15px;
	text-align: center;
}

.pinNote-list>div:first-of-type {
	margin-left: 0;
}

.pinNote-list .icon-badge {
	width: 100px;
	position: relative;
	z-index: 2;
}

.pinNote-list .bg-stage {
	width: 120px;
	position: relative;
	top: -10px;
}

.pinNote-list .pinNote-text {
	position: absolute;
	left: 0;
	bottom: 30px;
	right: 0;
	color: #5A371E;
	font-size: 16px;
	font-weight: 800;
	font-family: 'NanumSquareRound';
	line-height: 130%;
	letter-spacing: -0.8px;
}

.pinNote-list .pinNote-desc {
	position: absolute;
	left: 0;
	top: 8px;
	right: 0;
}

.pinNote-list .pinNote-desc p {
	color: #5A371E;
	font-size: 18px;
	font-weight: 700;
	font-family: 'NanumSquareRound';
	letter-spacing: -0.9px;
}

.pinNote-list .pinNote-desc .subject {
	height: 40px;
}

.pinNote-list .pinNote-desc .desc {
	margin-top: 10px;
}

.pinNote-list .pinNote-desc .desc strong {
	font-weight: 800;
	line-height: 150%;
}

.pinNote-list .pinNote-desc .level {
	margin-top: 8px;
}

.pinNote-list .pinNote-desc .level span {
	display: inline-block;
	color: #666;
	font-size: 14px;
	font-weight: 700;
	font-family: 'NanumSquareRound';
	letter-spacing: -0.7px;
	display: inline-block;
	background-color: #fff;
	border-radius: 20px;
	padding: 4px 16px;
	line-height: 1;
}

.pinNote-list-pink p.subject {
	color: #7855FF;
}

/* 어휘콕콕 결과 */
.page-quiz0301 .content-l,
.page-quiz0301 .content-r {
	padding-bottom: 70px !important;
	overflow-y: auto;
}

.page-quiz0302 {
	background-image: url('../img/bg-pattern.png');
	background-repeat: repeat;
}

.page-quiz0302 .contents {
	padding-top: 35px;
	padding-bottom: 80px;
}

.page-quiz0302 .quizBtnType03 {
	width: 400px;
}

/* 독해쑥쑥 지문 */
.page-quiz0304 {}

.page-quiz0304 .contents {
	padding: 0 50px 20px;
	box-sizing: border-box;
}

.page-quiz0304 {}

.radingBox-w01 {
	overflow-y: auto;
	padding: 40px 50px 0;
	max-height: 100%;
}

.page-quiz0401 .content-r {
	padding-top: 0;
}

/* 배지 목록 */
.page-report0602 .contents {
	padding: 26px 0;
	box-sizing: border-box;
	overflow: hidden;
	overflow-y: auto;
	max-height: calc(100% - 20px);
	margin: 10px auto;
	max-width: 98%;
}

.page-report0602 .content-inner {
	overflow: hidden;
}

.page-report0602 .tabBtn-w02 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

.page-report0602 .tabBtn-cont {
	flex-shrink: 0;
	max-width: 130px;
	padding: 0 10px;
	box-sizing: border-box;
}

/* 창호 목록 */
.page-report0603 {}

.page-report0603 .section01 {
	display: flex;
	justify-content: center;
	padding: 24px 0 18px;
	background-color: #F6F4FF;
}

.page-report0603 .section02 {
	max-width: 1098px;
	margin: 0 auto;
	padding-bottom: 10px;
	height: 100%;
	max-height: 475px;
	box-sizing: border-box;
	overflow: hidden;
	overflow-y: auto;
}

.page-report0603 .popupText-w {
	padding-top: 20px;
}

.page-report0603 .toastPopup-cont:after {
	height: 129px;
	background-image: url('../img/bg-toastTitle02.png');
}

/* 달달 보고서 */
[class*="page-report07"] {
	position: relative;
	background-color: #EEEAFF;
}

[class*="page-report07"] .content-inner {
	overflow: hidden;
	overflow-y: auto;
}

[class*="page-report07"] .tabBtn-inner {
	justify-content: center;
}

[class*="page-report07"] .tabBtn-round {
	font-size: 18px;
	padding: 0 32px;
	box-sizing: border-box;
}

[class*="page-report07"] .userImg-inner {
	width: 64px;
	height: 64px;
}

[class*="page-report07"] [class*="section0"] {
	max-width: 982px;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 50px;
	box-sizing: border-box;
}

[class*="page-report07"] .section01 {
	padding-bottom: 0px;
}

[class*="page-report07"] .section01 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 666px;
}

[class*="page-report07"] .section02 {
	display: block;
	margin-top: 20px;
}

[class*="page-report07"] [class*="reportGroup0"]:first-of-type {
	padding-top: 24px;
}

[class*="reportGroup0"] {
	display: flex;
	background-color: #fff;
}

[class*="reportGroup0"]:first-of-type {
	border-radius: 16px 16px 0 0;
}

[class*="reportGroup0"]:last-of-type {
	border-radius: 0 0 16px 16px;
}

.reportGroup01 {
	justify-content: space-between;
	align-items: flex-start;
	padding: 0 40px 20px 40px;
}

.reportGroup02 {
	display: flex;
	position: relative;
	justify-content: space-between;
	padding: 68px 2.5vw 40px 2.5vw;
	box-sizing: border-box;
}

.reportGroup02 .group-l,
.reportGroup02 .group-r {
	width: 47%;
}

.reportGroup02 .underline-text03 {
	font-size: 20px;
}

.reportGroup02 .text {
	font-size: 18px;
	line-height: 30px;
	font-weight: 700;
}

.reportGroup03 {
	position: relative;
	display: block;
}

.reportGroup04 {
	justify-content: flex-start;
	padding: 0 40px 20px 40px;
}

.reportGroup04 .textGroup {
	padding-left: 20px;
}

.reportGroup04 .title {
	font-size: 24px;
	font-family: 'KoreanERWJM';
	font-weight: 400;
}

.reportGroup04 .text {
	margin-top: 16px;
	font-size: 20px;
	line-height: 32px;
	font-weight: 700;
}

.reportGroup05 {
	position: relative;
	justify-content: space-between;
}

.reportGroup05 .lineStyle05-col {
	top: 102px;
	height: calc(100% - 142px);
}

.reportGroup05 .group-l,
.reportGroup05 .group-r {
	width: 50%;
	padding: 102px 32px 40px;
	box-sizing: border-box;
}

[class*="page-report07"] .group-l {
	flex-shrink: 0;
}

[class*="page-report07"] .stickerBox01 {
	width: 100%;
}

[class*="page-report07"] .ribbon-title02 {
	position: absolute;
	left: -12px;
	top: 40px;
	z-index: 1;
}

[class*="page-report07"] .infoBox-w01 {
	max-width: 200px;
	word-break: keep-all;
}

.page-report0701 .group-l {
	width: 60%;
}

.page-report0701 .group-r {
	padding-left: 3vw;
	padding-top: 24px;
	width: 100%;
	box-sizing: border-box;
}

.page-report0702 .content-inner {
	overflow: hidden;
}

/*.page-report0703 .content-inner{overflow:hidden;}*/
/* 콘텐츠 박스 내 스크롤 */
/*.page-report0702 .section02,*/
/*.page-report0703 .section02{height:calc(100vh - 240px);max-height:410px;position:relative;overflow:hidden;}*/
.page-report0702 .section02 {
	height: calc(100vh - 260px);
	max-height: 420px;
	position: relative;
	overflow: hidden;
	background-color: #fff;
	border-radius: 16px;
}

.page-report0702 .section02 img,
.page-report0702 .section02:before {
	display: block;
	content: '';
	width: 100%;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	background-repeat: no-repeat;
	background-position: center bottom;
}

.page-report0702 .section02:before {
	height: 98px;
	background-image: url('../img/bg-report0702-02.png');
}

.page-report0702 .section02 img {
	width: 300px;
	bottom: 36px;
}

/*.page-report0703 .section02{padding:36px 0;}*/
.page-report0703 .reportGroup02 {
	justify-content: space-between;
}

.page-report0703 .reportGroup02,
.page-report0703 .reportGroup03 {
	padding: 40px 2.5vw;
}

.page-report0703 .reportGroup03 .lineStyle05 {
	width: calc(100% - 5vw);
}

.page-report0703 .dottList01 {
	width: 100%;
	justify-content: space-between;
}

.page-report0703 [class*="dottList"] {
	padding-top: 4px;
}

.page-report0703 [class*="dottList"] li {
	padding-left: 12px;
	width: 47%;
	margin-top: 8px;
	font-size: 20px;
}

.page-report0703 [class*="dottList"] li:after {
	width: 3px;
	height: 3px;
}

.page-report0703 .underline-text03 {
	font-size: 20px;
}

.page-report0703 .textGroup,
.page-report0703 .text {
	width: 100%;
	justify-content: flex-start;
	box-sizing: border-box;
	font-size: 20px;
	font-weight: 700;
	margin-top: 12px;
	line-height: 32px;
}

.page-report0703 .reportGroup01 {
	padding-bottom: 40px;
}

.bedgeBox {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 240px;
	height: 167px;
	box-sizing: border-box;
	border-radius: 16px;
	padding: 12px 0;
	background-color: #EEEAFF;
}

.bedgeBox img {
	display: block;
	width: 164px;
	margin: 0 auto;
}

.page-report0704 .contents,
.page-report0705 .contents {
	height: auto;
	padding-bottom: 40px;
}

.page-report0704 .section02 {
	padding-bottom: 0;
	border-radius: 16px;
	overflow: hidden;
}

.page-report0704 .reportGroup01 {
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	padding-bottom: 0;
}

.page-report0704 .reportGroup01 .group-r {
	margin-left: 2vw;
}

.page-report0704 .quizResult-title {
	width: 100%;
}

.page-report0704 .reportGroup02 {
	padding-top: 86px;
	justify-content: space-between;
}

.page-report0704 .group-r {}

.page-report0704 .roundBox33 {
	width: 315px;
	height: 315px;
}

.page-report0704 .roundBox34 {
	width: 386px;
	height: 201px;
}

.page-report0704 .textGroup {
	margin-top: 22px;
}

.page-report0704 .text {
	margin-top: 8px;
}

/* 캘린더 헤더 */
.calendarHeader-w {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 60px;
	background-color: #fff;
	border-bottom: 2px solid #5A371E;
}

.btn-calendar {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background-color: transparent;
	color: #5A371E;
}

.calendarHeader-w .calendarMonth-text {
	font-size: 22px;
}

.calendarHeader-w .icon-calendar {
	width: 16px;
	height: 16px;
	margin-right: 16px;
}

.calendarHeader-w .icon-arrow07 {
	width: 20px;
	height: 20px;
}

.btn-prev .icon-arrow07 {
	transform: rotate(180deg);
}

/* EXAM ANALIZE */
.graph-item-wrap {
	width: 100%;
	text-align: center;
}

.graph-item-wrap:after {
	content: "";
	display: block;
	clear: both;
}

.module-circle-graph {
	width: 100%;
	height: 10%;
	position: relative;
}

.module-circle-graph .label {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	font-size: 14px;
	color: #7855FF;
	text-align: center;
	line-height: 30px;
	transform: translateY(-50%);
}

.module-circle-graph .label EM {
	display: block;
	font-size: 16px;
	color: #43270f;
	font-weight: 800;
	line-height: 18px;
}

.module-circle-graph .label b {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -1.3px;
	display: inline-block;
	margin-right: 3px;
}

.module-circle-graph SVG {
	width: 100%;
	height: 100%;
}

.graph-item-wrap .graph-item {
	float: left;
	width: 32%;
	text-align: center;
	margin: 0 1%;
	vertical-align: top;
}

.graph-item-wrap .graph-item:first-child {
	margin: 0;
}

.graph-item .class {
	display: block;
	color: #5A371E;
	line-height: 1.5em;
	font-weight: 800;
	font-size: 16px;
}

.graph-item .compare {
	display: block;
	font-size: .875rem;
	color: #aaaaaa;
	line-height: 1.5em;
}

.graph-item .compare em.up {
	color: #7855FF;
	font-weight: 800;
}

.graph-item .compare em.down {
	color: #2565bc;
	font-weight: 800;
}

/* 더블차트 */
.double-graph-wrap div.graph {
	display: table-cell;
	width: 50%;
	position: relative;
}

.chart-wrap {
	width: 120px;
	height: 120px;
	margin: 0 auto;
	position: relative;
}

.chart {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.chart-wrap span.title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	width: 100%;
	font-size: 2rem;
	font-weight: 700;
	color: #7855FF;
	text-align: center;
}

.chart-wrap span.title em {
	font-size: 1rem;
	font-weight: 400;
	position: relative;
	top: -3px;
}

.graph-index {
	width: 100%;
	font-size: .875rem;
	line-height: .875rem;
	text-align: center;
	margin: 2rem auto;
}

.graph-index P {
	display: inline-block;
	vertical-align: top;
}

.graph-index P:first-child {
	margin-right: .5rem;
}

.graph-index P em {
	display: inline-block;
	width: 1.5rem;
	height: .75rem;
	background: #c6c6c6;
	border-radius: .5rem;
	margin-right: .25rem;
}

.graph-index P em.pink {
	background: #fc6371;
}

/* svg그래프 */
.svg-graph-wrap {
	width: 90%;
	background-image: linear-gradient(to right, #d5cfcc 1px, transparent 1px);
	background-size: 12.45% 1%;
	background-position: 0 5%;
	border-bottom: 2px solid #5a371e;
	padding: 2rem 0 0;
	margin: 0 auto;
}

.svg-graph-wrap-bg .label {
	display: table;
	width: 90%;
	font-size: .875rem;
	color: #5a371e;
	line-height: 2.5rem;
	margin: .75rem auto 1rem;
}

.svg-graph-wrap-bg .label P {
	display: table-cell;
}

.svg-graph-wrap-bg .label P:last-child {
	text-align: right;
}

.svg-graph-wrap-bg {
	width: 90%;
	margin: 0 auto;
	/* background-color: #f4f4f4; */
	position: relative;
	z-index: 1;
	padding: 1.25rem 0 0.5rem;
	/* box-shadow: 0 0 3px 0 rgba(0, 0, 0, .2); */
	/* margin-top: 2rem; */
	background: url(../_images/postit.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

/* 독서 성향 테스트-퀴즈02(좌측 문항안내) */
.quizCount-w {
	position: absolute;
	left: 10px;
	top: 30px;
	z-index: 2;
	max-width: 216px;
	width: 100%;
}

.btn-quizCount {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 78px;
	height: 28px;
	color: #fff;
	background-color: #7855FF;
	border-radius: 30px;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M11.7334 6.40039L8.00006 10.1337L4.26673 6.40039' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 90% center;
}

.btn-quizCount div {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding-right: 10px;
}

.btn-quizCount span {
	color: #fff;
	display: inline-block;
	text-align: center;
}

.quizCountBox-w {
	display: none;
	padding-top: 25px;
	position: relative;
}

.quizCountBox-w:after {
	display: block;
	content: '';
	width: 13px;
	height: 13px;
	position: absolute;
	left: 30px;
	top: 18px;
	background-size: 100% auto;
	transform: rotate(-45deg);
	border: 2px solid #5A371E;
	border-width: 2px 2px 0 0;
	background-color: #DCD4FF;
}

.boxCurrent .quizCountBox-w {
	display: block;
}

.boxCurrent .btn-quizCount {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M11.7334 9.59961L8.00006 5.86628L4.26673 9.59961' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.quizCountBox-inner {
	border: 2px solid #5A371E;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 16px;
}

.quizCountBox-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 50px;
	padding: 0 20px;
	box-sizing: border-box;
	background-color: #DCD4FF;
}

.quizCountBox-title,
.quizCountBox-top span {
	color: #5A371E;
	font-weight: 800;
}

.quizCountBox-text strong {
	font-size: 28px;
	color: #7855FF;
	font-weight: 800;
}

.quizCountBox-list {
	padding: 16px;
	box-sizing: border-box;
	background-color: #fff;
}

.quizCountBox-list ol {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-top: -5px;
}

.quizCountBox-list li {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 5px;
	width: 20%;
	height: 36px;
	color: #5A371E;
	font-size: 16px;
	font-weight: 700;
	background-color: #eee;
}

.quizCountBox-list li.nowQuiz {
	background-color: #7855FF;
	color: #fff;
}

.quizCountBox-list li.endQuiz {
	background-color: #DCD4FF;
}

/* 퀴즈-결과페이지 */
.page-quizResult .contents-w {
	background-color: #fff;
	padding-top: 70px;
}

.page-quizResult .contents {
	max-width: 100%;
	padding: 0;
}

.quizResult-inner {
	max-width: 538px;
	margin: 0 auto;
	text-align: center;
}

/* 퀴즈-결과페이지(닉네임,진단일) */
.quizResult-top {
	padding: 17px 0;
}

.testDate {
	margin-left: 16px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
}

.testDate strong {
	font-weight: 700;
}

.testDate span {
	margin-left: 10px;
	font-weight: 700;
}

.page-quizResult .userInfo-w {
	margin-top: 0;
	justify-content: center;
}

/* 퀴즈-결과페이지(학습레벨) */
.quizResult-box {
	padding: 20px 0 40px;
	background-color: #EEEAFF;
	border-top: 2px solid rgba(197, 181, 255, 0.8);
}

.resultLevel-w {
	display: inline-block;
}

[class*="resultLevel-title"] {
	text-align: left;
	padding: 20px 0 16px;
	font-family: 'KoreanERWJM';
}

[class*="resultLevel-title"] .txtPoint {
	display: block;
	font-size: 26px;
}

.resultLevel-info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: 15px;
	height: 32px;
}

.resultLevel-title2 {
	text-align: center;
}

.resultLevel-title2 .resultLevel-info {
	justify-content: center;
}

.txtLevel {
	display: inline-block;
	height: 100%;
	color: #5A371E;
	font-size: 50px;
	font-weight: 700;
	text-transform: uppercase;
	background-image: linear-gradient(to bottom, transparent 50%, rgba(197, 181, 255, 0.8) 0%);
}

[class*="txtLine0"] {
	display: inline-block;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.txtLine01 {
	background-image: linear-gradient(to bottom, transparent 60%, rgba(254, 208, 212, 0.7) 50%);
}

.resultLevel-text {
	display: inline-block;
	margin-left: 10px;
	color: #5A371E;
	font-size: 28px;
	letter-spacing: -1.4px;
}

/* 퀴즈-결과페이지(학습진단보고서) */
.quizResult-type {}

.quizResult-list {
	margin-top: -16px;
	padding-bottom: 30px;
}

/* 학년별 개념영상 */
.bg-gray {
	background-color: #eee;
}

/* 퀴즈  :  레이아웃 공통 */
[class*="page-quiz0"] .split-w {}

/* 퀴즈 : 어휘콕콕 페이지 제어 */
.page-quiz0202 .contents {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: center;
	padding: 0;
}

.page-quiz0202 .quizGroup-w03 {
	padding-bottom: 40px;
}

/* 퀴즈 : 독해쑥쑥 페이지 제어 */
.page-quiz0301 .contents,
.page-quiz0401 .contents,
.page-calendar .contents {
	max-width: 100%;
	padding: 0;
	min-height: 100%;
}

.page-quiz0301 .content-l,
.page-quiz0401 .content-l {
	background-color: #F4F1FF;
	height: 100%;
}

/* 지식도감 */
.page-quiz0501,
.page-charge {
	background-color: #EEEAFF;
}

.page-quiz0501 .contents {
	padding-top: 0;
	padding-bottom: 80px;
	overflow: hidden;
	overflow-y: auto;
}

.page-quiz0501 .tabBtn-inner {
	justify-content: center;
}

/* 독해력충전 */
.page-charge {}

.page-charge .contents {
	padding-top: 20px;
	padding-bottom: 90px;
	overflow: hidden;
	overflow-y: auto;
	box-sizing: border-box;
	max-height: 658px;
}

/* 독해 달력 */
.page-calendar .content-r {
	background-color: #EEEAFF;
	padding-top: 30px;
	padding-bottom: 70px;
	overflow-y: auto;
}

.page-calendar .content-l {
	min-width: 460px;
	width: 40%;
	padding: 30px 2vw 70px;
	box-sizing: border-box;
	overflow-y: auto;
}

/* 1400이하  */
@media screen and (max-width: 1400px) {
	.content-section {
		margin-top: 20px;
	}

	.readingList-inner {
		width: 25%;
	}
}

/* 1024이하  */
@media screen and (max-width: 1200px) {
	.readingList-inner {
		width: 33.3%;
	}
}

/* 튜토리얼(페이징 숫자) */
.pagingNum-w01 {
	position: absolute;
	right: 5%;
	bottom: 40px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 9vw;
	max-width: 109px;
	height: 4vw;
	max-height: 45px;
	border: 2px solid #FF6371;
	border-radius: 30px;
	background-color: #FFF2F4;
	font-size: 22px;
}

.pagingNum-w01 span {
	display: inline-block;
	text-align: center;
	color: #FF9CA5;
	font-weight: 800;
}

.now {
	color: #FF6371 !important;
}

/* --- 튜토리얼 --- */
.sliderList-w06 {
	position: relative;
}

.quizHeader-w02 {
	position: absolute;
	left: 0;
	top: 70px;
	z-index: 1;
	width: 100%;
	background-color: #fff;
}

.quizHeader-inner {
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
}

[class*="page-tutorial"] {
	position: relative;
	padding-top: 70px;
}

/* 튜토리얼(공통) */
.tutorial-box [class*="txt0"] {
	left: 0;
	top: 0;
	padding-left: 45px;
}

.page-tutorial0101 [class*="arrow"] {}

/* --- 튜토리얼(공통)--- */
[class*="page-tutorial"] .tabBtn-w02 {
	position: absolute;
	left: 0;
	top: 0;
	margin: 0 auto;
	width: 100%;
}

[class*="page-tutorial"] .tabBtn-inner {
	width: 100%;
	margin: 0 auto;
	max-width: 1170px;
}

[class*="page-tutorial"] .tabBtn-cont {
	width: 100%;
}

[class*="page-tutorial"] .contents-w {
	padding-top: 60px;
}

[class*="page-tutorial"] .contents {
	/*padding:60px 102px 0;*/
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 70px 0;
	width: 100%;
	box-sizing: border-box;
	max-width: 100%;
}

.tutorial-container {
	max-width: 1169px;
	width: 100%;
}

.tutorial-box {
	position: relative;
}

.tutorial-box:after {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
}

.tutorialBtn-wrap {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 50px;
}

[class*="tutorialBtn0"] {
	position: absolute;
	top: 0;
	width: 50px;
	height: 50px;
}

.tutorialBtn01-prev {
	left: -60px;
	background-image: url("data:image/svg+xml,%0A%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='50' height='50' rx='25' transform='matrix(-1 0 0 1 50 0)' fill='%237855FF'/%3E%3Crect x='-1' y='1' width='48' height='48' rx='24' transform='matrix(-1 0 0 1 48 0)' stroke='%23C5B5FF' stroke-opacity='0.8' stroke-width='2'/%3E%3Cpath d='M25 17.1875L17.1875 25L25 32.8125' fill='%237855FF'/%3E%3Cpath d='M25 17.1875L17.1875 25L25 32.8125' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.75 25L32.8125 25L18.75 25Z' fill='%237855FF'/%3E%3Cpath d='M18.75 25L32.8125 25' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}

.tutorialBtn01-next {
	right: -60px;
	background-image: url("data:image/svg+xml,%0A%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='50' height='50' rx='25' fill='%237855FF'/%3E%3Crect x='1' y='1' width='48' height='48' rx='24' stroke='%23C5B5FF' stroke-opacity='0.8' stroke-width='2'/%3E%3Cpath d='M25 17.1875L32.8125 25L25 32.8125' fill='%237855FF'/%3E%3Cpath d='M25 17.1875L32.8125 25L25 32.8125' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M31.25 25L17.1875 25L31.25 25Z' fill='%237855FF'/%3E%3Cpath d='M31.25 25L17.1875 25' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}

.tutorialBtn01-prev.slick-disabled {
	background-image: url("data:image/svg+xml,%0A%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='50' height='50' rx='25' transform='matrix(-1 0 0 1 50 0)' fill='%23C5B5FF' fill-opacity='0.8'/%3E%3Crect x='-1' y='1' width='48' height='48' rx='24' transform='matrix(-1 0 0 1 48 0)' stroke='%23C5B5FF' stroke-opacity='0.8' stroke-width='2'/%3E%3Cpath d='M25 17.1875L17.1875 25L25 32.8125' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.75 25L32.8125 25L18.75 25Z' fill='%23C5B5FF' fill-opacity='0.8'/%3E%3Cpath d='M18.75 25L32.8125 25' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}

.tutorialBtn01-next.slick-disabled {
	background-image: url("data:image/svg+xml,%0A%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='50' height='50' rx='25' fill='%23C5B5FF' fill-opacity='0.8'/%3E%3Crect x='1' y='1' width='48' height='48' rx='24' stroke='%23C5B5FF' stroke-opacity='0.8' stroke-width='2'/%3E%3Cpath d='M25 17.1875L32.8125 25L25 32.8125' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M31.25 25L17.1875 25L31.25 25Z' fill='%23C5B5FF' fill-opacity='0.8'/%3E%3Cpath d='M31.25 25L17.1875 25' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}

/* 튜토리얼(텍스트) */
.tutorial-box {}

.tutorial-box [class*="txt0"] {
	position: absolute;
	z-index: 1;
	color: #fff;
	font-size: 20px;
}

/* 1400이하  */
@media screen and (max-width: 1200px) {
	.tutorial-box [class*="txt0"] {
		font-size: 16px;
	}
}

/* 튜토리얼(페이징 숫자) */
.pagingNum-w01 {
	position: absolute;
	right: 5%;
	bottom: 40px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 9vw;
	max-width: 109px;
	height: 4vw;
	max-height: 45px;
	border: 2px solid #7855FF;
	border-radius: 30px;
	background-color: #F4F1FF;
	font-size: 22px;
}

.pagingNum-w01 span {
	display: inline-block;
	text-align: center;
	color: #AF9AFF;
	font-weight: 800;
}

.now {
	color: #7855FF !important;
}

/* 튜토리얼(화살표 방향) */
.tutorial-box [class*="txt0"] {
	line-height: 1.5;
}

.tutorial-box [class*="arrow"] {
	display: block;
	position: absolute;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
}

.tutorial-box .l-middle [class*="arrow"] {
	left: 0;
	top: 50%;
	transform: translateY(-50%) rotate(0deg);
}

.tutorial-box .l-top [class*="arrow"] {
	left: 0;
	top: 0;
	transform: translateX(0) rotate(0deg);
}

.tutorial-box .l-bottom [class*="arrow"] {
	left: 0;
	bottom: 0;
	transform: translateX(0) rotate(0deg);
}

.tutorial-box .r-middle [class*="arrow"] {
	right: 0;
	top: 0;
	transform: translateX(0) rotate(0deg);
}

.tutorial-box .r-top [class*="arrow"] {
	right: 0;
	top: 0;
	transform: translateX(0) rotate(0deg);
}

.tutorial-box .r-bottom [class*="arrow"] {
	right: 0;
	bottom: 0;
	transform: translateX(0) rotate(0deg);
}

.tutorial-box .bottom [class*="arrow"] {
	bottom: 0;
	left: 50%;
	transform: translateX(0) rotate(0deg);
}

.tutorial-box .top [class*="arrow"] {
	top: 0;
	left: 50%;
	transform: translateX(0) rotate(0deg);
}

/* 튜토리얼(텍스트) */
.tutorial-box .l-middle {
	padding-left: 35px;
}

.tutorial-box .l-top {
	padding: 15px 0 0 35px;
}

.tutorial-box .l-bottom {
	padding: 0 0 0px 35px;
}

.tutorial-box .r-middle {
	padding: 0 35px 0 0;
}

.tutorial-box .r-top {
	padding: 15px 35px 0 0;
}

.tutorial-box .r-bottom {
	padding: 0 35px 15px 0;
}

.tutorial-box .bottom {
	padding: 0 0 50px 0;
}

.tutorial-box .top {
	padding: 35px 0 0 0;
}

/* 튜토리얼(화살표) */
.tutorial-box .arrow01 {
	width: 63px;
	height: 63px;
	background-image: url('../img/tuto_arrow01.png');
}

.tutorial-box .arrow02 {
	width: 35px;
	height: 14px;
	background-image: url('../img/tuto_arrow02.png');
}

.tutorial-box .arrow03 {
	width: 35px;
	height: 14px;
	background-image: url('../img/tuto_arrow03.png');
}

.tutorial-box .arrow04 {
	width: 35px;
	height: 14px;
	background-image: url('../img/tuto_arrow04.png');
}

.tutorial-box .arrow05 {
	width: 43px;
	height: 45px;
	background-image: url('../img/tuto_arrow05.png');
}

.tutorial-box .arrow06 {
	width: 35px;
	height: 14px;
	background-image: url('../img/tuto_arrow06.png');
}

.tutorial-box .arrow07 {
	width: 93px;
	height: 140px;
	background-image: url('../img/tuto_arrow07.png');
}

.tutorial-box .arrow08 {
	width: 43px;
	height: 45px;
	background-image: url('../img/tuto_arrow08.png');
}

.tutorial-box .arrow09 {
	width: 85px;
	height: 100px;
	background-image: url('../img/tuto_arrow09.png');
}

.tutorial-box .arrow10 {
	width: 62px;
	height: 70px;
	background-image: url('../img/tuto_arrow10.png');
}

.tutorial-box .arrow11 {
	width: 38px;
	height: 38px;
	background-image: url('../img/tuto_arrow11.png');
}

.tutorial-box .arrow12 {
	width: 41px;
	height: 21px;
	background-image: url('../img/tuto_arrow12.png');
}

.tutorial-box .arrow13 {
	width: 43px;
	height: 45px;
	background-image: url('../img/tuto_arrow13.png');
}

.tutorial-box .arrow14 {
	width: 54px;
	height: 60px;
	background-image: url('../img/tuto_arrow14.png');
}

.tutorial-box .arrow15 {
	width: 77px;
	height: 73px;
	background-image: url('../img/tuto_arrow15.png');
}

.tutorial-box .arrow16 {
	width: 31px;
	height: 31px;
	background-image: url('../img/tuto_arrow16.png');
}

.tutorial-box .arrow17 {
	width: 108px;
	height: 95px;
	background-image: url('../img/tuto_arrow17.png');
}

/* 튜토리얼(공통) */
.tutorial-box [class*="txt0"] {
	left: 0;
	top: 0;
}

.tutorial-box [class*="l-"] {
	padding-left: 50px;
}

.tutorial-box [class*="r-"] {
	padding-right: 45px;
}

.tutorial-box ol {
	margin-left: 20px;
}

.tutorial-box ol li {
	padding-left: 5px;
	list-style-type: decimal;
}

.page-tutorial0101 [class*="arrow"] {}

/* 튜토리얼-홈 slide01 */
.page-tutorial0101 .txt0101 {
	left: 17%;
	top: 4%;
}

.page-tutorial0101 .txt0101 .arrow02 {}

.page-tutorial0101 .txt0102 {
	left: 24%;
	top: 17%;
}

.page-tutorial0101 .txt0103 {
	left: 25%;
	top: 33%;
	padding-left: 55px;
}

.page-tutorial0101 .txt0103 .arrow08 {
	transform: translateY(-60%) rotate(320deg);
}

/* 튜토리얼-홈 slide02 */
.page-tutorial0101 .txt0201 {
	left: 37%;
	top: 13%;
}

.page-tutorial0101 .txt0201 .arrow02 {
	transform: translateY(-70%) rotate(40deg);
}

.page-tutorial0101 .txt0202 {
	left: 37%;
	top: 56%;
}

.page-tutorial0101 .txt0202 .arrow02 {
	transform: translateY(-130%) rotate(15deg);
}

/* 튜토리얼-홈 slide03 */
.page-tutorial0101 .txt0301 {
	padding: 0 0 70px 105px;
	left: 9%;
	top: auto;
	bottom: 16%;
}

/* 튜토리얼-독해달력 slide01 */
.page-tutorial0102 .txt0101 {
	left: 22%;
	top: 15%;
}

.page-tutorial0102 .txt0101 .arrow08 {
	transform: translateX(0) rotate(260deg);
}

.page-tutorial0102 .txt0102 {
	left: 12%;
	top: auto;
	bottom: 23%;
	padding-bottom: 45px;
}

.page-tutorial0102 .txt0102 .arrow08 {
	transform: translateX(30%) rotate(180deg);
	left: auto;
	right: 0;
}

/* 튜토리얼-독해달력 slide02 */
.page-tutorial0102 .txt0201 {
	left: 50%;
	top: auto;
	bottom: 19%;
	padding-bottom: 55px;
}

.page-tutorial0102 .txt0201 .arrow08 {
	left: 10%;
	transform: translateX(0%) rotate(226deg);
}

/* 튜토리얼-학습하기 slide01 */
.page-tutorial0103 .txt0101 {
	left: 24%;
	top: 21%;
	padding-left: 55px;
}

.page-tutorial0103 .txt0101 .arrow13 {
	transform: translateY(-80%) rotate(330deg);
}

.page-tutorial0103 .txt0102 {
	left: 22%;
	top: 68%;
}

.page-tutorial0103 .txt0102 .arrow13 {
	transform: translateY(-30%) rotate(180deg) scaleX(-1);
}

/* 튜토리얼-학습하기 slide02 */
.page-tutorial0103 .txt0201 {
	left: 22%;
	top: 36%;
	padding-right: 110px;
}

.page-tutorial0103 .txt0201 .arrow17 {
	top: 16%;
	transform: translateY(0%) rotate(85deg);
}

/* 튜토리얼-학습하기 slide03 */
.page-tutorial0103 .txt0301 {
	padding: 60px 0 0 105px;
	left: 35%;
	top: auto;
	bottom: 13%;
}

.page-tutorial0103 .txt0301 .arrow17 {
	transform: translateY(0%) rotate(267deg);
}

/* 튜토리얼-학습하기 slide04 */
.page-tutorial0103 .txt0401 {
	left: auto;
	right: 5%;
	top: 5%;
}

.page-tutorial0103 .txt0401 .arrow05 {
	right: 10%;
	transform: translateY(-5%) rotate(10deg);
}

/* 튜토리얼-학습하기 slide05 */
.page-tutorial0103 .txt0501 {
	left: 4.5%;
	top: 10%;
	padding-bottom: 0;
}

.page-tutorial0103 .txt0501 .arrow04 {
	bottom: 5px;
	transform: translateY(-5%) rotate(175deg);
}

.page-tutorial0103 .txt0502 {
	left: auto;
	right: 5%;
	top: auto;
	bottom: 19%;
	padding-top: 60px;
}

.page-tutorial0103 .txt0502 .arrow14 {
	transform: translateY(0%) rotate(275deg);
}

/* 튜토리얼-지식도감 slide01 */
.page-tutorial0104 .txt0101 {
	left: 5%;
	top: 15%;
	padding-top: 50px;
}

.page-tutorial0104 .txt0101 .arrow05 {
	left: 10px;
}

.page-tutorial0104 .txt0102 {
	left: auto;
	right: 51%;
	top: 65%;
}

.page-tutorial0104 .txt0102 .arrow01 {
	right: 2%;
	bottom: -10px;
	transform: translateY(0%) rotate(305deg);
}

/* 튜토리얼-독해력 충전 slide01 */
.page-tutorial0105 .txt0101 {
	left: 45%;
	top: 55%;
	padding-top: 10px;
}

.page-tutorial0105 .txt0101 .arrow11 {
	transform: translateY(0%) rotate(70deg) scaleX(-1);
}

/* 튜토리얼-달달보고서 slide01 */
.page-tutorial0106 .txt0101 {
	padding-top: 45px;
	left: 8.5%;
	top: 13%;
}

.page-tutorial0106 .txt0101 .arrow05 {}

/* 튜토리얼-달달보고서 slide02 */
.page-tutorial0106 .txt0201 {
	left: 38%;
	top: 18%;
}

.page-tutorial0106 .txt0201 .arrow11 {
	transform: translateY(-70%) rotate(70deg) scaleX(-1);
}

.page-tutorial0106 .txt0202 {
	left: auto;
	right: 10%;
	top: 32%;
	padding-left: 60px;
}

.page-tutorial0106 .txt0202 .arrow14 {
	transform: translateY(-15%) rotate(175deg);
	top: 50%;
}

.page-tutorial0106 .txt0301 {
	left: auto;
	right: 11%;
	top: 14%;
	padding-top: 55px;
}

/* 1200이하  */
@media screen and (max-width: 1200px) {
	.page-tutorial0106 .txt0301 {
		padding-top: 45px;
	}

	.page-tutorial0106 .txt0301 .arrow08 {
		left: 47%;
	}
}

/* 1024이하  */
@media screen and (max-width: 1024px) {
	.page-tutorial0103 .txt0201 {
		padding-right: 100px;
	}

	.tutorial-box [class*="arrow"] {
		background-size: 90% auto;
	}

	.page-tutorial0103 .txt0401 {
		right: 4%;
	}

	.page-tutorial0103 .txt0501 {
		left: 3.5%;
	}

	.page-tutorial0103 .txt0502 {
		padding-top: 55px;
	}

	.page-tutorial0104 .txt0101 {
		left: 4%;
		top: 13%;
	}

	.page-tutorial0104 .txt0101 .arrow05 {
		top: 5px;
		left: 5px;
	}

	.page-tutorial0106 .txt0101 {
		left: 7%;
	}

	.page-tutorial0106 .txt0202 .arrow14 {
		top: 30%;
	}

	.page-tutorial0106 .txt0301 .arrow08 {
		left: 52%;
	}

}