@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

:root {
	--main-blue1: #0055FE;
	--main-blue2: #3DB2FF;
	--main-blue3: #31A0FF;
	/* 레이아웃 블루 */
	--main-blue4: #1483ff;
	--main-blue5: #48a0ed;
	/* 톤다운 버튼 */
	--main-blue-bg1: #F8FBFF;
	--main-blue-bg2: #D9DFFF;
	--main-background: #F5F7FA;

	/* 260728 color  */
	--main-yellow1: #FEBE0E;
	--main-yellow2: #FEE79B;
	--main-yellow3: #EF6F06;
	--main-red: #ED1B23;
	--main-yellow-bg1: #ffefc4;
	--main-yellow-bg2: #fffaee;

	--white: #ffffff;
	--black: #212529;
	--Grayf5f: #f5f5f5;
	--Grayf9f: #f9f9f9;
	--Grayf1f: #f1f1f1;
	--Grayddd: #dddddd;
	--Grayccc: #cccccc;
	--Gray666: #666666;
	--Gray888: #888888;
	--Gray999: #999999;
	--Gray333: #3333333;

	--border1: #dddddd;

	--red: #D95154;
	--blue: #367FF3;
	--orange: #dd6d1e;
	--purple: #9349c5;
	--purple2: #c549a7;
	--green: #279842;

	--red-bg: #FFF2F2;
	--blue-bg: #F1F6FF;
	--blue-bg2: #eef7ff;
	--black-bg: #F5F5F5;
	--green-bg: #e6f8e6;

}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.blue {
	color: #023591 !important;
}

.red {
	color: var(--main-red) !important;
}

.pc {
	display: block;
}

.pad {
	display: none;
}

.pc-pad {
	display: block;
}

.m {
	display: none;
}


.blink {
	/* 깜빡임 */
	animation: blink-effect 0.5s step-end infinite !important;
}

.blink2 {
	/* 깜빡임2 */
	animation: blink-effect2 0.5s step-end infinite !important;
}

.blink3 {
	/* 깜빡임3 */
	animation: blink-effect3 0.5s step-end infinite !important;
}

@keyframes blink-effect {
	50% {
		opacity: 0.5;
	}
}

@keyframes blink-effect2 {
	50% {
		opacity: 0.8;
	}
}

@keyframes blink-effect3 {
	50% {
		opacity: 0.9;
	}
}

#header260112.header {
	min-width: auto !important;
}

#header260112.header .book a {
	font-size: 1rem;
	font-weight: 500;
	padding: 0 .5rem;
}

#header260112.header .book a:hover {
	font-weight: 600;
	text-decoration: none;
}

#header260112.header a {
	color: #212529;
	transition: all .3s ease;
}

#header260112.header .inner-left {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
}

#header260112.header .header-top {
	background: #fff;
	width: 100%;
}

#header260112.header .header-top .inner {
	display: flex;
	justify-content: space-between;
	height: 45px;
}

#header260112.header .welcome__txt {
	margin-right: 0;
}

#header260112.header .logo {
	font-size: 24px;
	font-weight: 600;
	width: 70px;
}


#header260112.header .login-menu {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
}

#header260112.header .login-menu a::before {
	content: '|';
	font-size: 0.7rem;
	color: #cccccc;
	padding: 0 0.9rem 0 0.3rem;
}

#header260112.header .login-menu a:first-child:before,
#header260112.header .login-menu a:last-child:before {
	display: none;
}

#header260112.header .login-menu .callcenter-btn {
	padding: 4px 7px;
	background-color: #023591;
	color: var(--white);
	border-radius: 4px;
	margin-left: 8px;
}

#header260112.header .login-menu .callcenter-btn:hover {
	background-color: var(--black);
}

#header260112.header .login-menu a {
	font-size: 0.8rem;
	position: relative;
}

#header260112.header .login-menu a:hover {
	font-weight: 500;
}

#header260112.header .login-menu .mini_popup {
	bottom: 22px;
	width: 60px;
	left: 0;
}

.welcome__txt {
	font-size: 0.8rem;
	color: #777789;
	font-weight: 400;
	margin-right: 1rem;
}

.welcome__txt strong {
	font-weight: 600;
	color: #023591;
}

#header260112.header .m-right {
	display: none;
}


@media (max-width: 1200px) {

	#header260112.header .inner.sub>ul,
	.MainTopBn .in {
		width: 100%;
	}

	#header260112.header .header-top,
	#header260112.header .header-gnb {
		padding: 0;
	}

	/* 
	.header-subpage .gnb-depth1 li::after {
		padding: 0 0.7rem 0 0.7rem;
	}

	.header-subpage .gnb-depth1 li.active {
		margin-right: 1.2rem !important;
	} */
	/* 
	.MainTopBn button {
		right: 0;
		width: 40px;
		height: 40px;
	}
 */

}


@media (max-width: 765px) {
	.header-subpage .gnb-depth1 li.active {
		margin-right: 0 !important;
	}

	#header260112.header .login-menu,
	#header260112.header .inner-left>ul {
		display: none !important;
	}

	#header260112.header .m-right {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		gap: 0.5rem;
		padding-right: 48px;
	}

	#header260112.header h1 a {
		margin: 0;
	}

	#header260112.header .m-right>a {
		font-size: .9rem;
	}

	#header260112.header .m-right>a:hover {
		text-decoration: none;
		font-weight: 600;
	}

	#header260112.header .go_menu {
		top: 14px;
	}
}


body:not(.layout-admin) section {
	padding: 0;
}

.layout {
	max-width: 1200px;
}

.header {
	/* height: 42px; */
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px;
	border-bottom: 1px solid var(--Grayddd);
	background: var(--white);
}

.header.mini {
	padding: 8px 12px;
}

.header.new260630 {
	display: block;
}

.header.new260630 .header-gnb .inner-left {
	display: block;
}

.header .inner-left {
	display: flex;
	align-items: center;
	justify-content: center;
}

.header h1 {
	font-size: 24px;
	font-weight: 600;
	width: 70px;
	height: auto;
}

.header h1 a {
	display: block;
	height: 100%;
	text-indent: -99999px;
	background-image: url("../img/addto-logo-new-4.svg");
	background-position: 0;
	background-repeat: no-repeat;
	background-size: 100%;
	margin-left: 10px;
}

.header .gnb-depth1 {
	position: relative;
	display: flex;
	margin-left: 25px;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.header .gnb-depth1>li>a {
	display: block;
	text-align: center;
	width: auto;
	font-weight: 500;
	line-height: 1.1rem;
	font-size: 1rem;
	color: var(--black);
	transition: all .3s ease;
}

.header .gnb-depth1>li>a:hover {
	font-weight: 600;
	text-decoration: none;
}

.header__logo {
	font-size: 24px;
	font-weight: 700;
	width: 100px;
	display: flex;
}

.header__logo img {
	width: 100%;
}

.header__title {
	flex: 1;
	margin-left: 2rem;
	font-size: 1rem;
}

.header__title span {
	color: #999999;
	font-size: 0.9rem;
	margin-right: 0.5rem;
}

.header__user {
	font-size: 24px;
}

.header .login-menu {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.header .login-menu a {
	font-size: 0.8rem;
	position: relative;
	color: var(--black);
	transition: all .3s ease;
}

.header .login-menu a::before {
	content: '|';
	font-size: 0.7rem;
	color: #cccccc;
	padding: 0 0.9rem 0 0.3rem;
}

.header .login-menu .callcenter-btn::before,
.header .login-menu a:first-child::before {
	display: none;
}

.header .login-menu .callcenter-btn {
	padding: 4px 7px;
	background-color: #023591;
	color: var(--white);
	border-radius: 4px;
	margin-left: 8px;
	transition: all .3s ease;
}

.body-wrap {
	display: flex;
	/* min-height: calc(100vh - 60px); */
	/* height: calc(100vh - 83px); */
	min-height: 600px;
}

.bn__link-01 {
	border-radius: 12px;
	background-color: #D87A00;
	/* background-color: #3D1AC8; */
	color: var(--white);
	display: flex;
	flex-direction: column;
	padding: 1rem;
	gap: 0.5rem;
	transition: all .3s ease;
	cursor: pointer;

}

.bn__link-01:hover {
	/* background-color: #3011aa; */
	background-color: #b96900;
}

.bn__link-01>div {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;

}

.bn__link-01 .title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	color: var(--white);
	font-size: 0.9rem;
	line-height: 1.2rem;
	font-weight: 500;
}

.bn__link-01 .title span {
	font-size: 0.8rem;
	font-weight: 300;
	opacity: 0.8;
}

.bn__link-01 img {
	width: 50px;
	height: 50px;
}

.bn__link-01>span {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	width: 100%;
	font-size: 0.8rem;
	padding: 0.2rem;
	border-radius: 4px;
	border: 1px solid #ffffff4f;
}

.bn__link-01>span::after {
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	background-image: url(../img/icon-rrow-right-w-mm.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}


.sidebar {
	position: relative;
	width: 0;
	padding: 0;
	flex-shrink: 0;
	/* background: linear-gradient(to bottom, #0055FE, #3DB2FF); */
	background: linear-gradient(to bottom, #EF6F06, #FEBE0E);
	border-right: 1px solid var(--Grayddd);
	color: var(--white);
	margin: 0;
	transition: width .25s ease;
	/* display: none; */
}

.sidebar h2 {
	font-size: 1.2rem;
	padding: 0.7rem 0;
	color: var(--white);
	font-weight: 500;
	width: 100%;
	text-align: center;
}

.sidebar h2>div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 0.3rem;
	font-size: 0.8rem;
	text-align: center;
	background-color: #ffffff24;
	border-radius: 4px;
	padding: 0.6rem;
	margin-top: 0.3rem;
}

.sidebar h2>div>p {
	opacity: 1;
	color: #fff;
}

.sidebar h2>div>button {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	padding: 0.1rem 0.5rem;
	border: 1px solid #fff;
	color: #fff !important;
	background-color: unset !important;
	border-radius: 5px;
	opacity: 1;
}

.sidebar h2>div>button:hover {
	background-color: #fff !important;
	color: #EF6F06 !important;
}

.sidebar h2>div>button::after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	/* background-image: url(../img/icon-arrow-r.svg); */
	mask: url("../img/icon-arrow-r.svg") no-repeat center / contain;
	-webkit-mask: url("../img/icon-arrow-r.svg") no-repeat center / contain;
	background-size: 100%;
	background-color: #fff;
	margin-left: 0.1rem;
	opacity: 0.8;
}

.sidebar h2>div>button:hover::after {
	background-color: #EF6F06;
}

.sidebar h3 {
	font-size: 0.8rem;
	padding: 0.7rem 0 0.5rem 0;
	color: #ffffffde;
	font-weight: 400;
}

.sidebar .menu-toggle {
	position: absolute;
	top: 5px;
	right: -23px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	/* background-color: #0056fe; */
	background-color: #EF6F06;
	border: 0;
	font-size: 0;
	border-radius: 0 3px 3px 0;
	transition: all .3s ease;
}

.sidebar.is-open .menu-toggle {
	/* background-color: #0056fe; */
	background-color: #EF6F06;
}

.sidebar .menu-toggle::after {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	min-width: 16px;
	text-align: center;
	background-size: 100%;
	mask: url(../html/260518/img/admin-icon-menu-fill.svg) center center / contain no-repeat;
	transition: background-color 0.2s;
	background-color: var(--white);
	padding: 0 0.7rem;
}

.sidebar.is-open .menu-toggle::after {
	width: 12px;
	height: 12px;
	mask: url(../img/icon-close.svg) center center / contain no-repeat;
	opacity: 0.8;
}

.sidebar.is-open .menu-toggle:hover::after {
	opacity: 1;
}

.sidebar.is-open {
	width: 216px;
	padding: 20px 1rem;
}

.sidebar nav {
	display: none;
	transition: width .25s ease;
}

.sidebar.is-open nav {
	display: block;
}

.sidebar article {
	border-top: 1px solid #ffffff55;
	margin-bottom: 1rem;
}

.sidebar article ul {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	width: 100%;

}

.sidebar article ul li {
	width: 100%;

}

.sidebar .menu-item {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 30px;
	width: 100%;
	padding: 0 16px;
	text-decoration: none;
	white-space: nowrap;
	font-weight: 400;
	font-size: 0.9rem;
	border-radius: 6px;
	color: var(--white);
	transition: all .3s ease;
}

/* 
.sidebar.is-open .menu-item {
	padding: 0 10px;
} */

.sidebar .menu-item:hover {
	color: var(--white);
	font-weight: 600;
	background: #ffffff21;
}

.sidebar .menu-item.active,
.sidebar .menu-item.on {
	background: var(--white);
	color: #EF6F06 !important;
	/* color: var(--main-blue1) !important; */
	font-weight: 600;
}

span.icon {
	display: block;
	width: 14px;
	height: 14px;
	text-align: center;
	background-size: 100%;
	mask: url(../html/260609-2/img/Study-display.svg) center center / contain no-repeat;
	transition: background-color 0.2s;
	background-color: var(--white);
}

.menu-item.active .icon,
.menu-item.on .icon {
	background-color: #EF6F06;
	/* background-color: var(--main-blue1); */
}

.icon.menu-icon-01 {
	mask: url(../html/260609-2/img/Study-display.svg) center center / contain no-repeat;
}

.icon.menu-icon-02 {
	mask: url(../html/260609-2/img/Study-play-outline.svg) center center / contain no-repeat;
}

.icon.menu-icon-03 {
	mask: url(../html/260609-2/img/Study-card-two.svg) center center / contain no-repeat;
}

.icon.menu-icon-04 {
	mask: url(../html/260609-2/img/Study-headset-outline.svg) center center / contain no-repeat;
}

.icon.menu-icon-05 {
	mask: url(../html/260609-2/img/Study-desktop-analytics.svg) center center / contain no-repeat;
}

.icon.menu-icon-06 {
	mask: url(../html/260609-2/img/Study-study-lamp.svg) center center / contain no-repeat;
}

.icon.menu-icon-07 {
	mask: url(../html/260609-2/img/Study-tab-close-outline.svg) center center / contain no-repeat;
}

.icon.menu-icon-08 {
	mask: url(../html/260609-2/img/Study-history-query.svg) center center / contain no-repeat;
}

.icon.menu-icon-09 {
	mask: url(../html/260609-2/img/Study-file-history-line.svg) center center / contain no-repeat;
}

.icon.menu-icon-10 {
	mask: url(../html/260609-2/img/Study-chat-bubble-square-question-remix.svg) center center / contain no-repeat;
}

.icon.menu-icon-11 {
	mask: url(../html/260609-2/img/Study-announcement.svg) center center / contain no-repeat;
}

.icon.menu-icon-12 {
	mask: url(../html/260609-2/img/Study-chat-bubble-1.svg) center center / contain no-repeat;
}

.menu-item.active .icon {
	background-color: var(--white);
}

.menu-item .text {
	opacity: 0;
	transition: .2s;
}

.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.4rem;
	padding: 0 1rem;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 700;
}

.badge--blue {
	color: #1565ff;
	background: #edf4ff;
}

.badge--purple {
	color: #a000ff;
	background: #f6e8ff;
}

.badge--orange {
	color: #ff6b00;
	background: #fff1e8;
}


.btn__st {
	height: 52px;
	padding: 0 30px !important;
	border-radius: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 16px;
	font-weight: 700;
	transition: .2s;
}

.btn__st:hover {
	transform: translateY(-2px);
}

.btn__st.btn-gradient {
	color: #fff !important;
	border: 0;
	background: linear-gradient(90deg, #c528ff, #ff6b2d) !important;
}

.btn__st.btn-gradient:hover {
	background: linear-gradient(90deg, #c528ff, #c528ff) !important;
}

.btn__st.btn-outline {
	color: var(--main-blue4) !important;
	border: 2px solid var(--main-blue4) !important;
	background: var(--white) !important;
}

.btn__st.btn-outline:hover {
	color: var(--black) !important;
	border: 2px solid var(--black) !important;
	background: var(--white) !important;
}

.btn__st.big {
	font-size: 2rem;
	padding: 2.5rem 3rem !important;
	border-radius: 1000px;
}

.btn__st.gr-gy {
	color: var(--main-blue1) !important;
	background: linear-gradient(to right, #FFF052, #82FF82) !important;
	border: 0;
}

.btn__st.gr-gy:hover {
	background: linear-gradient(to right, #FFF052, #FFF052) !important;
}

.btn__st.gr-gy.icon-in::before {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	margin-right: 0.5rem;
	background-size: 100%;
	mask: url(../html/260609-2/img/ECimg-lightning-mood.svg) center center / contain no-repeat;
	background-color: #007CD4;
}

.btn__st.gr-gy.icon-in::before:hover {
	background-color: var(--black);
}

.btn__st.arr-white::after {
	content: '';
	display: block;
	width: 14px;
	height: 14px;
	margin-left: 0.5rem;
	mask: url(../img/btn-arrow-r-w.svg) center center / contain no-repeat;
	background-size: 100%;
	background-color: var(--white)
}

.btn__st.icon-cart::before {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	margin-right: 0.5rem;
	mask: url(../html/260609-2/img/ECimg-cart.svg) center center / contain no-repeat;
	background-size: 100%;
	background-color: var(--main-blue3);
}

.sidebar .text {
	opacity: 1;
	visibility: visible;
}

/* 
.sidebar.is-open .text {
	opacity: 1;
	visibility: visible;
} */

.sidebar .submenu {
	max-height: 0;
	overflow: hidden;
	margin-bottom: 0.5rem;

	max-height: 300px;
}

/* 
.sidebar.is-open .submenu {
	max-height: 300px;
} */

.sidebar .submenu a {
	display: block;
	padding: 10px 20px 10px 32px;
	text-decoration: none;
	color: #666;
	font-size: 0.9rem;
	white-space: nowrap;
}

.sidebar .submenu a:hover {
	color: var(--blue);
}

footer {
	width: 100%;
	min-width: auto !important;
	background-color: var(--black);
	color: var(--white);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
}

footer ul {
	display: flex;
	align-items: center;
	gap: 1rem;
}

footer ul a {
	color: var(--white);
	opacity: 0.8;
	font-size: 0.8rem;
}

footer ul a:hover {
	color: var(--white);
	opacity: 1;
}

footer .footer-logo {
	display: block;
	width: 60px;
	height: 25px;
	mask: url(../img/addto-logo-new-4.svg) center center / contain no-repeat;
	background-color: var(--white);
	opacity: 0.8;
}

footer .footer-left {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 2rem;
}

footer .page-info {
	font-size: 0.7rem;
	opacity: 0.7;
}


footer.footer.big {
	background: #f8f8f8;
	color: #555;
	flex-direction: column;
	padding: 0;
}

.footer.big .inner {
	width: 1200px;
	margin: 0 auto;
}

/* top */

.footer.big .footer-top {
	background: #2f2f2f;
	width: 100%;
	height: 40px;
}

.footer.big .footer-top .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

.footer.big .left-menu,
.footer.big .right-menu {
	display: flex;
	align-items: center;
	font-size: 13px;
}

.footer.big .left-menu a {
	color: #fff;
}

.footer.big .left-menu span {
	color: #666;
	margin: 0 14px;
}

.footer.big .right-menu {
	gap: 25px;
}

.footer.big .right-menu .blog img {
	height: 24px;
}

.footer.big .right-menu .cafe {
	color: #fff;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.footer.big .right-menu .cafe i {
	width: 7px;
	height: 7px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	margin-top: -4px;
}

.footer.big .right-menu .cafe i.active {
	transform: rotate(-180deg);
}

/* bottom */

.footer.big .footer-bottom {
	padding: 35px 0 20px;
}

.footer.big .footer-bottom .inner {
	display: flex;
	gap: 35px;
	align-items: flex-start;
}

.footer.big .logo {
	width: 90px;
	flex-shrink: 0;
}

.footer.big .logo img {
	width: 100%;
}

.footer.big .info {
	flex: 1;
	font-size: 13px;
	line-height: 2;
	color: #666;
}

.footer.big .info p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.footer.big .info span {
	color: #cfcfcf;
}

.footer.big .info img {
	height: 16px;
}

.footer.big .info a {
	color: #666;
}

.footer.big .copy {
	margin-top: 4px;
}

.footer.big .footer-line {
	width: 1200px;
	margin: 15px auto 0;
	height: 1px;
	background: #ddd;
}

.footer.big .right-menu ul {
	display: none;
	position: absolute;
	bottom: 40px;
	right: 0;
	width: 168px;
	border: 1px solid #ddd;
	background: #f8f8f8;
}

.footer.big .right-menu li a {
	display: block;
	margin: 0;
	padding: 0 0 0 17px;
	font-size: 14px;
	line-height: 46px;
	color: #637079;
}

.footer.big .right-menu li a:hover {
	color: #fff;
	background: #696969;
}

/* content 1-1 */
/* layout */
.dashboard {
	flex: 1;
	padding: 1.5rem;
	background: var(--main-background);
	/* min-width: 1280px; */
	/* max-width: 1200px; */
	/* overflow-y: auto;
	overflow-x: hidden; */
}

.dashboard.flex {
	display: flex;
	flex-direction: column;
	gap: .8rem;
}

.dashboard__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 !important;
}

.greeting p {
	font-size: 1rem;
	color: var(--Gray666);
	margin-bottom: 2px;
}

.greeting h1 {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--black);
}

.exam-title {
	display: flex;
	align-items: center;
	flex-direction: column;
	line-height: 1.1rem;
}

.exam-schedule {
	width: 330px;
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--white);
	border: 1px solid var(--border1);
	border-radius: 12px;
	padding: .8rem 1.1rem !important;
	box-shadow: 1px 1px 4px #00000021;
}

.exam-schedule .label {
	display: block;
	font-size: 0.7rem;
	color: var(--main-yellow3);
	/* color: var(--main-blue3); */
}

.exam-schedule .dday {
	font-size: 1.2rem;
	/* color: var(--main-blue3); */
	color: var(--main-yellow3);
}

.exam-info {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	line-height: 1.2rem;
}

.exam-info h2 {
	font-size: 1rem;
	margin-bottom: 0px;
	font-weight: 600;
}

.exam-info time {
	color: #888;
	font-size: 0.8rem;
}

.study__status-box {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	gap: .5rem;
}

.study__status {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.5rem;
	border-radius: 12px;
	padding: 1.5rem !important;
	box-shadow: 1px 1px 4px #00000021;
	background: var(--white);
	border: 1px solid var(--border1);
	width: 75%;
}

.section-title {
	display: flex;
	align-items: center;
	gap: 8px;
}

.weakness h2,
.section-title h2 {
	font-size: 1.1rem;
	font-weight: 600;
}

.section-title p {
	color: #888;
	font-size: 0.8rem;
}

.status__cards {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
	width: 100%;
}

.status-card {
	border: 1px solid #dddddd;
	border-radius: 10px;
	padding: 8px 8px;
	display: flex;
	flex-direction: row;
	gap: 0.7rem;
	align-items: center;
	justify-content: center;
	/* min-width: 200px; */
	min-width: 22%;
}

.status-card>img {
	width: 26px;
}

.status-card:nth-child(3) {
	flex: 1;
	min-width: 190px;
}

.status-card h3 {
	color: #888;
	font-size: .7rem;
	margin-bottom: 1px;
}

.status-card strong {
	font-size: 1.1rem;
	font-weight: 600;
}

.status-card span {
	font-size: 14px;
}

.progress-area {
	border: 1px solid #dddddd;
	border-radius: 10px;
	padding: 14px 20px;
	width: 100%;
}

.progress-label {
	display: flex;
	justify-content: space-between;
	margin-bottom: 4px;
	font-size: 0.9rem;
}

.progress-label strong {
	font-weight: 500;
}

.progress-label span {
	/* color: #2196f3; */
	color: var(--main-yellow3);
	font-weight: 700;
}

.progress {
	height: 10px;
	background: #e5e7eb;
	border-radius: 999px;
	overflow: hidden;
}

.progress span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg,
			#EB6400,
			#FEBE0E);
	/* background: linear-gradient(90deg,
			#1f5eff,
			#48b7ff); */
}

.progress-area p {
	text-align: right;
	margin-top: 4px;
	color: #666;
	font-size: 0.7rem;
}

.weakness {
	display: flex;
	flex-direction: column;
	width: 25%;
	/* min-width: 320px; */
	height: 100%;
	background: var(--white);
	border: 1px solid var(--border1);
	border-radius: 12px;
	padding: 1.5rem !important;
	box-shadow: 1px 1px 4px #00000021;
	gap: 1rem;
}

.weakness .weakness-header {
	display: flex;
	justify-content: space-between;
}

.weakness ol {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 0 0 0.6rem;
}

.weakness .progress {
	height: 12px;
}

.weakness li {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: .5rem;
}

.weakness li span {
	font-weight: 500;
	font-size: 0.7rem;
}

.weakness li strong {
	font-size: 0.8rem;
}

.weakness li::before {
	content: '';
	display: block;
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: bottom;
	opacity: 0.8;
}

.weakness li:nth-child(1)::before {
	background-image: url(../html/260609-2/img/Study-num-01.svg);
}

.weakness li:nth-child(2)::before {
	background-image: url(../html/260609-2/img/Study-num-02.svg);
}

.weakness li:nth-child(3)::before {
	background-image: url(../html/260609-2/img/Study-num-03.svg);
}

.weakness li strong {
	float: right;
	/* color: #2196f3; */
	color: var(--main-yellow3);
}

.weakness .con {
	width: 100%;
}

.btn__more {
	color: var(--Gray666) !important;
	font-size: 0.8rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	transition: all .3s ease;
}

.btn__more::after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	mask: url(../img/icon-arrow-r.svg) center center / contain no-repeat;
	background-color: var(--Gray666);
	background-size: 100%;
	/* opacity: 0.8; */
}

.tab-top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	margin-left: 20px;
}

.tab-menu {
	display: flex;
	gap: 2px;
}

.tab-menu button {
	padding: 10px 24px 7px;
	background: #ececec;
	color: var(--Gray666);
	border: 0;
	font-size: 1rem;
	font-weight: 500;
	border-radius: 8px 8px 0 0;
	transition: all .3s ease;
}

.tab-menu button:hover {
	color: var(--black);
}

.tab-menu button.active {
	color: var(--black);
	/* background: var(--main-blue3); */
	background: var(--main-yellow1);
}

.btn__link {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	/* background: var(--main-blue5); */
	background: var(--main-yellow3);
	color: #fff;
	margin-bottom: 0.5rem;
	padding: 13px 15px;
	border-radius: 8px;
	transition: all .3s ease;
}

.btn__link:hover {
	color: var(--white);
	background: #dc6300;
	text-decoration: none;
}

.btn__link>div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1rem;
}

.btn__link>div>span {
	font-size: 0.7rem;
	font-weight: 400;
	opacity: 0.8;
}

.btn__link.play-arr {
	padding: 12px 26px;
	border-radius: 8px;
	font-size: .9rem;
	font-weight: 500;
	margin-bottom: 0;
	gap: 0.2rem;
}

.btn__link.icon-arr::after {
	content: '';
	display: block;
	width: 18px;
	height: 18px;
	background-image: url(../img/icon-arrow-r.svg);
	background-size: 100%;
	margin-left: 0.5rem;
	opacity: 0.8;
}

.btn__link.icon-arr::before {
	width: 28px;
	height: 29px;
	content: '';
	background-image: url(../html/260609-2/img/Study-icon-05.svg);
	background-size: 100%;
	background-repeat: no-repeat;

}

.btn__link.play-arr::after {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	background-image: url(../html/260609-2/img/Study-play-nomal.svg);
	background-size: 100%;
	opacity: 0.8;
}

.dashboard .tab-content {
	display: none;
	background: var(--white);
	border: 1px solid var(--border1);
	border-top: 6px solid var(--main-yellow1);
	/* border-top: 6px solid var(--main-blue3); */
	border-radius: 12px;
	padding: 1rem !important;
	box-shadow: 1px 1px 4px #00000021;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: .5rem;
}

.dashboard .tab-content.active {
	display: flex;
}

.subject__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	width: 100%;

}

.subject-card {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 12px;
	padding: 16px;
}

.subject-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--border1);
	padding-bottom: 0.5rem;
	margin-bottom: 0.8rem;
}

.subject-header h3 {
	font-size: 1rem;
	font-weight: 600;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;

}

.subject-header h3>img {
	width: 20px;
}

.subject-header .icon {
	height: 32px;
	width: 32px;
	opacity: 0.8;
}

.subject-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.subject-footer a {
	width: 100%;
}

.badge__tag {
	background: var(--blue-bg2);
	color: var(--main-blue1);
	/* background: var(--main-yellow-bg1);
	color: var(--main-yellow3); */
	padding: 2px 6px;
	border-radius: 5px;
	font-size: 0.8rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	gap: 0.5rem;
}

.badge__tag.style-01 {
	background: #e5e7eb;
	color: #666;
}

.badge__tag.style-02 {
	background: #e6f8e6;
	color: #28a745;
}

.badge__tag.style-03 {
	background: #F8EDFF;
	color: var(--purple);
}

.badge__tag.style-04 {
	background: #FFEFE4;
	color: var(--orange);
}

.badge__tag.ls {
	padding: 3px 10px;
	font-size: 1rem;
}

.badge__tag.round {
	border-radius: 100px;
}

.badge__tag.style-gray {
	background: var(--Grayf5f);
	color: var(--black);
}

.badge__tag.style-black-round {
	background: var(--white);
	color: var(--black);
	border: 1px solid var(--Gray666);
}

.badge__tag.style-gray-round {
	background: var(--white);
	color: #777;
	border: 1px solid var(--border1);
}

.badge__tag.style-blue-round {
	background: var(--white);
	color: var(--main-yellow3);
	border: 1px solid var(--main-yellow3);
	/* color: var(--main-blue3);
	border: 1px solid var(--main-blue3); */
}

.subject-body {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.subject-body .dl-list {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 0.6rem;
}

.subject-body dl {
	display: flex;
	flex-direction: row;
	gap: 10px;

}

.subject-body .dl-list-st01 {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 0.6rem;
}

.subject-body .dl-list-st01 dl {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.subject-body dt {
	color: #888;
	font-size: 0.8rem;
	font-weight: 500;
	width: 30%;
}

.subject-body dd {
	font-size: .8rem;
	font-weight: 600;
	width: 70%;
	text-align: center;
}

.subject-body .dl-list-st01 dt {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--Gray333);
	text-align: left;
	width: 100%;
}

.subject-body .dl-list-st01 dd {
	color: #888;
	font-size: 0.8rem;
	font-weight: 500;
	text-align: left;
	width: 100%;
}

.subject-body dd.big {
	font-size: 1.2rem;
}

.sub-buttons {
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
}

.btn__ass {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: var(--white);
	border: 1px solid var(--Gray666);
	color: var(--black);
	text-align: center;
	padding: 8px;
	border-radius: 6px;
	font-size: 0.9rem;
	font-weight: 500;
	opacity: 0.9;
}

.btn__ass>span {
	font-weight: 400;
}

.btn__ass:hover {
	color: var(--black);
	text-decoration: unset;
	/* border: 0; */
	opacity: 1;
}

.btn__ass.arr-right::after {
	content: '';
	display: block;
	width: 18px;
	height: 18px;
	background-image: url(../img/icon-rrow-right-w-mm.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}

.btn__ass.ms {
	padding: 8px;
	font-size: 0.8rem;
	font-weight: 500;
}

.btn__ass.black {
	background: var(--black);
	color: var(--white) !important;
}

.btn__ass.purple {
	background: var(--purple2);
	color: var(--white) !important;
	border-color: var(--purple2);
}

.btn__ass.gray {
	background: var(--Gray666);
	color: var(--white) !important;
	border-color: var(--Gray666);
}

.btn__ass.blue {
	background: var(--main-blue5);
	color: var(--white) !important;
	border-color: var(--main-blue5);

}

.btn__ass.orange {
	background: var(--orange);
	color: var(--white) !important;
	border-color: var(--orange);
}

.btn__ass.line-orange {
	background: var(--white);
	border-color: var(--orange);
	color: var(--orange) !important;
}

.btn__ass.line-purple {
	background: var(--white);
	border-color: var(--purple);
	color: var(--purple) !important;
}

.btn__ass[class*='icon--']::before {
	content: '';
	display: block;
	width: 15px;
	height: 15px;
}

.btn__ass.icon--list::before {
	mask: url(../html/260609-2/img/Study-list.svg) center center / contain no-repeat;
	background-color: var(--black);
}

.btn__ass.icon--star::before {
	mask: url(../html/260609-2/img/Study-star.svg) center center / contain no-repeat;
	background-color: var(--black);
}


.btn__ass.icon--check-outline::before {
	mask: url(../html/260609-2/img/Study-tag-check-outline.svg) center center / contain no-repeat;
	background-color: var(--black);
}


.btn__ass.icon--check-all::before {
	mask: url(../html/260609-2/img/Study-check-all.svg) center center / contain no-repeat;
	background-color: var(--black);
}

.btn__ass .sub-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	width: 100%;
}


.study__tip {
	margin-top: 1rem;
}

.study__tip .tip-header {
	margin-left: 20px;
}

.study__tip h2 {
	display: inline-block;
	/* background: #4d6b89; */
	background: #A24500;
	color: var(--white);
	padding: 10px 24px 6px;
	border-radius: 6px 6px 0 0;
	font-size: 1rem;
	font-weight: 500;
}

.study__tip .tip-list {
	background: #F8F1EC;
	/* background: #E8F2FF; */
	/* border: 4px solid #4d6b89; */
	border: 4px solid #A24500;
	border-radius: 6px;
	padding: 1.5rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

.study__tip .tip-card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 1rem;
}

.study__tip .tip-card:first-child {
	border-right: 1px solid #bfaa9a;
	padding-right: 1.5rem;
}

.study__tip .tip-card img {
	width: 40px;
}

.study__tip .tip-card h3 {
	margin-bottom: 4px;
	font-size: 1rem;
	color: #B24C00;
	/* color: #2d4c6f; */
	font-weight: 600;
}

.study__tip .tip-card p {
	font-size: .8rem;
	line-height: 1.5;
	color: #7C3707;
	/* color: #395365; */
}

.chart--wrap {
	position: relative;
	width: 80px;
	height: 80px;
}

.chart--wrap.mini {
	width: 36px;
	height: 36px;
}

.chart--wrap canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
	/* padding: 1rem; */
}

.chart--text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--Gray999);
	text-align: center;
	line-height: 1rem;
}

/* table */
.subject__score-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px;
	table-layout: fixed;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	font-size: .8rem;
	text-align: center;
}

.subject__score-table th,
.subject__score-table td {
	padding: 3px 4px;
}

.subject__score-table thead th {
	color: var(--black);
	font-weight: 700;
}

.subject__score-table thead th:nth-child(1) {
	background: var(--main-yellow2);
	width: 54px;
}

.subject__score-table thead th:nth-child(2) {
	background: #ffd767;
}

.subject__score-table thead th:nth-child(3) {
	background: #ffd153;
}

.subject__score-table thead th:nth-child(4) {
	background: #fdc93b;
}

.subject__score-table thead th:nth-child(5) {
	background: #fcc222;
}

.subject__score-table thead th:nth-child(6) {
	background: var(--main-yellow1);
}

.subject__score-table tbody th {
	background: #ede9de;
	color: #333;
	font-weight: 600;
}

.subject__score-table tbody td {
	background: #ede9de;
	color: #444;
}


/* 1 - 2 */

.exam-result {
	padding: 1.6rem;
	border: 1px solid var(--Grayccc);
	border-radius: 1rem;
	background: var(--white);
	width: 100%;
}

.exam-result__header {
	padding: 0.8rem 1.5rem 0.8rem 1rem;
}

.exam-result.arr .exam-result__header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

.exam-result.on .exam-result__header {
	border-bottom: 1px solid var(--Grayddd);
}

.exam-result__header h2 {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 1rem;
	font-weight: 600;
}

.exam-result__header .title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	font-size: 1rem;

}

.exam-result__header .title span {
	font-size: 0.8rem;
	font-weight: 400;
}

.exam-result__header .text-purple {
	color: var(--purple);
}

.exam-result__list {
	display: none;
	grid-template-columns: repeat(4, 1fr);
	gap: .5rem;
	padding: 0.8rem;
}

.exam-result.on .exam-result__list {
	display: grid;
}

.exam-card {
	padding: 0.8rem;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: .8rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.exam-card__top {
	display: flex;
	gap: .8rem;
	align-items: flex-start;
}

.exam-result.arr .exam-result__header::after {
	content: '';
	display: block;
	width: 18px;
	height: 18px;
	background-image: url(../img/icon-arrow-up.svg);
	background-size: 100%;
	opacity: 0.8;
}

.exam-result.arr.on .exam-result__header::after {
	opacity: 1;
	transform: rotate(-180deg);
}

/* 2 - 1  */
.exam-link {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: .5rem 1rem;
	font-size: .9rem;
	font-weight: 500;
	/* color: var(--main-blue3);
	background-color: #E6F4FF;
	border: 1px solid #E6F4FF; */
	color: var(--main-yellow3);
	background-color: var(--white);
	border: 1px solid var(--main-yellow3);
	border-radius: 8px;
}

.exam-link:hover {
	text-decoration: none;
	background-color: var(--main-yellow-bg2);
	color: var(--main-yellow3);
	border: 1px solid var(--main-yellow3);
	/* background-color: #f3faff;
	color: var(--main-blue3);
	border: 1px solid var(--main-blue3);
	 */
}

.exam-link.arr::after {
	content: '';
	display: block;
	width: 18px;
	height: 18px;
	mask: url(../html/260609-2/img/icon-rrow-right-w-mm.svg) center center / contain no-repeat;
	background-color: var(--main-yellow3);
	/* background-color: var(--main-blue3); */
	background-size: 100%;
	opacity: 0.8;
}

.stage-round {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: .6rem;
	flex-shrink: 0;
	font-size: .7rem;
	font-weight: 600;
	line-height: 1rem;
	padding: 0.5rem;
	background: var(--main-yellow-bg2);
	color: var(--main-yellow3);
	/* background: #eef7ff;
	color: #1787ff; */
}

.stage-round-num {
	border-radius: .6rem;
	background: var(--Grayf5f);
	color: #333333;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3rem;
	padding: 0.7rem;
}

.exam-result.on .stage-round-num {
	/* background: var(--blue-bg2);
	color: var(--main-blue3); */
	background: var(--main-yellow-bg1);
	color: var(--main-yellow3);
}

.stage-round strong {
	font-size: 1.2rem;
}

.stage-round-num strong {
	font-size: 1rem;
}

.exam-card__top .info {
	flex: 1;
}

.exam-card__top .info p {
	margin: 0;
	color: #888;
	font-size: 0.7rem;
}

.exam-card__top .info strong {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	margin-top: .3rem;
	font-size: 0.8rem;
	gap: 0.3rem;
}

.in-progress {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	margin-top: 0.5rem;
}

.in-progress .average {
	text-align: right;
	color: #999;
	font-size: 0.6rem;
	width: 50px;
}

.in-progress .progress {
	width: 100%;
	height: 8px;
}

ul.score-box {
	display: flex;
	flex-direction: row;
	gap: 0.1rem;
	align-items: center;
	justify-content: center;
}

ul.score-box .score--star {
	width: 12px;
	height: 12px;
	display: block;
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
}

.exam-result__header ul.score-box .score--star {
	width: 18px;
	height: 18px;
}

ul.score-box .score--star.off {
	background-image: url(../html/260609-2/img/Study-star-02.svg);
}

ul.score-box .score--star.on {
	background-image: url(../html/260609-2/img/Study-star-01.svg);
}

ul.score-box.purple .score--star.off {
	background-image: url(../html/260609-2/img/Study-star-03.svg);
}

ul.score-box.purple .score--star.on {
	background-image: url(../html/260609-2/img/Study-star-04.svg);
}


.search__wrap {
	position: relative;
	margin-bottom: 0.5rem;
}

.search__wrap .search-box {
	display: flex;
	align-items: center;
	width: 330px;
	height: auto;
	background: var(--main-yellow3);
	/* background: var(--main-blue5); */
	border-radius: 999px;
	padding: 0.5rem 1.5rem;
}

.search__wrap .search-title {
	position: relative;
	color: var(--white);
	font-size: 1rem;
	margin-right: 0.9rem;
	font-weight: 600;
}

.search__wrap .search-title .tooltip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translateX(-50%);
	min-width: 180px;
	padding: 12px 16px;
	background: #333;
	color: #fff;
	border-radius: 8px;
	line-height: 1.6;
	text-align: left;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: .2s;
	z-index: 100;
}

.search__wrap .search-title .tooltip::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	transform: translateX(-50%);
	border-width: 6px 6px 0;
	border-style: solid;
	border-color: #333 transparent transparent transparent;
}

.search__wrap .search-title:hover .tooltip,
.search__wrap .search-title:focus-visible .tooltip {
	opacity: 1;
	visibility: visible;
}

.search__wrap .search-box input[type="search"] {
	flex: 1;
	height: 30px;
	width: 100%;
	border: 0;
	border-radius: 4px;
	background: var(--white);
	text-align: center;
	font-size: 1rem;
	font-weight: 500;
	outline: none;
}

.search__wrap .play-btn {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	margin-left: .4rem;
	border: 0;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--white);
}

.search__wrap .play-btn::after {
	content: '';
	display: block;
	width: 26px;
	height: 26px;
	mask: url(../html/260609-2/img/Study-play-nomal.svg) center center / contain no-repeat;
	/* background-color: var(--main-blue3); */
	background-color: var(--main-yellow3);
	background-size: 100%;
}

.search__wrap .play-btn svg {
	margin-left: 2px;
}

/* 2 - 2 */

.study-setting {
	width: 100%;
	padding: 1.5rem;
	border-radius: 1rem;
	background: var(--white);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.study-setting__notice {
	margin: 0;
	font-size: 0.7rem;
	color: var(--Gray666);
}

.subject__tab {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	width: 100%;
}

.subject-tab__item {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: 0.5rem 1.5rem;
	border: 1px solid #d7d7d7;
	border-radius: 999px;
	background: var(--white);
	cursor: pointer;
	transition: .2s;
}

.subject-tab__item span {
	font-size: .9rem;
	font-weight: 600;
	color: var(--black);
}

.subject-tab__item strong {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 20px;
	border-radius: 999px;
	background: #efefef;
	font-size: 0.7rem;
	color: var(--black);
}

.subject-tab__item.is-active {
	border-color: var(--main-yellow3);
	background: linear-gradient(90deg, var(--main-yellow3), #cb5d00);
}

.subject-tab__item.is-active span {
	color: var(--white);
}

.subject-tab__item.is-active strong {
	background: rgba(0, 0, 0, 0.10);
	color: var(--white);
}

.chapter__list {
	display: none;
	flex-direction: row;
	gap: 1rem;
}

.chapter__list.active {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}


.chapter__card {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 20px;
	padding: 1rem 1.5rem;
	border: 1px solid #dcdcdc;
	border-left: 4px solid var(--main-yellow3);
	/* border-left: 4px solid var(--main-blue3); */
	background: var(--white);
	gap: .5rem;
}

.chapter__card>div {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.chapter-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.chapter-card__header h3 {
	margin: 0;
	font-size: .9rem;
	font-weight: 600;
}

.chapter-card__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.2rem 1rem;
	border-radius: 999px;
	background: #6d6d6d;
	color: #fff;
	font-size: 0.7rem;
}

.chapter-card__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.chapter-card__list button {
	width: 100%;
	padding: 0.1rem 0.6rem;
	border: none;
	border-radius: 999px;
	background: #f7f7f7;

	display: flex;
	align-items: center;

	cursor: pointer;
	transition: .2s;
}

.chapter-card__list button:hover {
	background: var(--main-yellow-bg2);
}

.chapter-card__list .dot {
	width: .6rem;
	height: .6rem;
	margin-right: 0.5rem;
	border-radius: 50%;
	background: var(--main-blue3);
}

.chapter-card__list .title {
	flex: 1;
	text-align: left;
	font-size: 0.7em;
	font-weight: 500;
	color: #444;
}

.chapter-card__list .count {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--white);
	color: var(--Gray666);
	font-size: 0.7rem;
}

.chapter__card .btn__ass {
	width: 100%;
}

.subject-tab__item .icon {
	width: 13px;
	height: 13px;
	mask: unset;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	background-color: unset;
}

.icon.icon-electric {
	background-image: url(../html/260609-2/img/Study-icon-13.svg);
}

.icon.icon-machine {
	background-image: url(../html/260609-2/img/Study-icon-14.svg);
}

.icon.icon-install {
	background-image: url(../html/260609-2/img/Study-icon-15.svg);
}

.subject-tab__item.is-active .icon.icon-electric {
	background-image: unset;
	background-color: var(--white);
	mask: url(../html/260609-2/img/Study-icon-13.svg) center center / contain no-repeat;
}

.subject-tab__item.is-active .icon.icon-machine {
	background-image: unset;
	background-color: var(--white);
	mask: url(../html/260609-2/img/Study-icon-14.svg) center center / contain no-repeat;
}

.subject-tab__item.is-active .icon.icon-install {
	background-image: unset;
	background-color: var(--white);
	mask: url(../html/260609-2/img/Study-icon-15.svg) center center / contain no-repeat;
}

/* 3 - 1 */

.content-sub {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.content-sub-title {
	position: relative;
	display: flex;
	flex-direction: row;
	width: 100%;
	gap: .3rem;
	font-size: 1.2rem;
	font-weight: 600;
}

.content-sub-title .icon {
	width: 22px;
	height: 22px;
	mask: unset;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	background-color: unset;
}

.h2-col {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-direction: column;
}

.h2-col p {
	font-weight: 400;
	font-size: 0.8rem;
	line-height: 1rem;

}

.icon.icon-simulator {
	background-image: url(../html/260609-2/img/Study-arrow-circle-right-outline-rounded.svg);
}

.content-sub-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: .5rem;
}

.content-sub .subject-card {
	border-radius: 12px;
	padding: 1.5rem 1.5rem !important;
	box-shadow: 1px 1px 4px #00000021;
}

/* 4 - 1 */
.subject-card.audio-book {
	padding: 0 !important;
	overflow: hidden;
}

.subject-card.audio-book.orange {
	border-color: var(--orange);
}

.subject-card.audio-book.purple {
	border-color: var(--purple);
}

.subject-card.audio-book.green {
	border-color: var(--green);
}

.subject-card.audio-book .subject-header {
	padding: 1rem 1.5rem !important;
	margin: 0;
}

.subject-card.audio-book.orange .subject-header {
	background-color: var(--orange);
	margin-bottom: 0;
}

.subject-card.audio-book.purple .subject-header {
	background-color: var(--purple);
}

.subject-card.audio-book.green .subject-header {
	background-color: var(--green);
}

.subject-card.audio-book .subject-header i {
	opacity: 0.7;
	width: 32px;
	height: 32px;
}

.subject-card.audio-book .subject-header h3 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	color: var(--white);
	gap: 0.1rem;
}

.subject-card.audio-book .subject-header h3 span {
	font-size: 0.8rem;
	font-weight: 400;
	opacity: 0.8;
}

.subject-card.audio-book .subject-body {
	padding: 1.5rem !important;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: .8rem;
	margin-bottom: 0;
}

.subject-card.audio-book .subject-body-top {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	width: 100%;
}

.subject-body-top .badge__tag.ls {
	padding: 3px 10px;
	font-size: 0.8rem;
	gap: 0.2rem;
}

.subject-card.audio-book .number__list {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	gap: 0.8rem;
}

.subject-card.audio-book .number__list li {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	font-weight: 500;
	font-size: 0.8rem;
}

.subject-card.audio-book .number__list li::before {
	content: '';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background-color: #333;
	color: var(--white);
	font-size: 0.7rem;
	border-radius: 100px;
	margin-right: 0.5rem;
	letter-spacing: 1px;
}


.subject-card.audio-book .number__list li.more {
	font-size: 0.7rem;
	opacity: 0.5;
}

.subject-card.audio-book .number__list li.more::before {
	display: none;
	margin-left: 2rem;
}

.subject-card.purple .number__list li::before {
	background-color: var(--purple);
}

.subject-card.orange .number__list li::before {
	background-color: var(--orange);
}

.subject-card.green .number__list li::before {
	background-color: var(--green);
}

.subject-card.audio-book .number__list li.num-01::before {
	content: '1';
}

.subject-card.audio-book .number__list li.num-02::before {
	content: '2';
}

.subject-card.audio-book .number__list li.num-03::before {
	content: '3';
}

.subject-card.audio-book .subject-footer {
	padding: 0 1.5rem 1.5rem;
}

.subject-card.audio-book .subject-footer .sim-card__link {
	justify-content: flex-start;
}

.subject-card.audio-book .icon-electric {
	background-image: unset;
	background-color: var(--orange);
	mask: url(../html/260609-2/img/Study-icon-13.svg) center center / contain no-repeat;
}

.subject-card.orange .sim-card__link {
	color: var(--orange);
}

.subject-card.purple .sim-card__link {
	color: var(--purple);
}

.subject-card.green .sim-card__link {
	color: var(--green);
}



/* 5 - 1 */
.content-sub-filter {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: .4rem;
	width: 100%;
}

.content-sub-filter button {
	padding: 0.4rem 1rem;
	font-size: .9rem;
	font-weight: 500;
	background: var(--main-yellow-bg2);
	color: var(--main-yellow3);
	border: 1px solid var(--main-yellow3);
	/* background: var(--blue-bg2);
	color: var(--main-blue3);
	border: 1px solid var(--main-blue3); */
	border-radius: 8px;
}

.content-sub-filter button:hover {
	color: #dc6300;
	border: 1px solid #dc6300
}

.content-sub-filter .is-active {
	background: var(--main-yellow3);
	border-color: var(--main-yellow3);
	color: var(--white);
	/* background: var(--main-blue3);
	border-color: var(--main-blue3);
	color: var(--white); */
}

.content-sub-filter .is-active:hover {
	background: #dc6300;
	border-color: #dc6300;
	color: var(--white);
}

.content-sub-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .5rem;
}


.sim-card {
	display: flex;
	flex-direction: var(--red);
	align-items: center;
	gap: 1rem;
	background: var(--white);
	border: 1px solid var(--border1);
	border-radius: 12px;
	padding: 1rem 1.5rem !important;
	box-shadow: 1px 1px 4px #00000021;
}

.sim-card__right {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	width: 140px;
}

.sim-card__icon .icon {
	width: 36px;
	height: 36px;
	mask: unset;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	background-color: unset;
}

.icon.icon-rlc {
	background-image: url(../html/260609-2/img/Study-icon-16.svg);
}

.icon.icon-power {
	background-image: url(../html/260609-2/img/Study-icon-17.svg);
}

.icon.icon-pf {
	background-image: url(../html/260609-2/img/Study-icon-18.svg);
}

.icon.icon-transformer {
	background-image: url(../html/260609-2/img/Study-icon-19.svg);
}

.icon.icon-yd {
	background-image: url(../html/260609-2/img/Study-icon-20.svg);
}

.icon.icon-meter {
	background-image: url(../html/260609-2/img/Study-icon-21.svg);
}


.sim-card__content {
	flex: 1;
}

.sim-card__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.sim-card__top h3 {
	font-size: .9rem;
	line-height: 1.5rem;
	font-weight: 600;
}

.sim-card__content p {
	font-size: .8rem;
	color: #666;
	line-height: 1.4;
}

.sim-card__category {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	gap: .3rem;
}


.sim-card__link {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	gap: .3rem;
	color: #333;
	font-weight: 600;
	font-size: 0.8rem;
	text-decoration: none;
	white-space: nowrap;
	transition: all .3s ease;
}

.sim-card__link:hover {
	text-decoration: none;
	color: var(--black) !important;
}

.sim-card__link::after {
	content: '';
	display: block;
	width: 14px;
	height: 14px;
	mask: url(../img/icon-rrow-right-w-mm.svg) center center / contain no-repeat;
	background-color: var(--Gray999);
	background-size: 100%;
}

.sim-card.blue .sim-card__link {
	color: var(--main-blue3);
}

.sim-card.purple .sim-card__link {
	color: var(--purple);
}

.sim-card.orange .sim-card__link {
	color: var(--orange);
}


/* popup -  2026 1회차 기출문제 강의 */
#blackbg {
	z-index: 999;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(9px);
	-webkit-backdrop-filter: blur(9px);
}

section[class*="popup_st"] {
	border: 4px solid var(--black);
	position: fixed;
	padding: 40px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--white);
	z-index: 1100;
}

.popup_st_01 {
	min-width: 1000px;
	min-height: 310px;
	height: auto !important;
}

.popup__wrap {
	width: 100%;
	padding: 1.5rem;
	box-sizing: border-box;
	font-family: Pretendard, sans-serif;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.popup__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.popup__header .top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.ct__list {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.ct__list input {
	display: none;
}

.ct__list label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: auto;
	height: auto;
	padding: 0.1rem 0.8rem;
	border: 1px solid #D9D9D9;
	border-radius: 4px;
	background: var(--white);
	color: #666;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: .2s;
	margin: 0;
}

.ct__list label .dot::after {
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	background-image: url(../img/icon-check-black.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	margin-left: 0.2rem;
	opacity: 0.6;
}

.ct__list input:checked+label .dot::after {
	background-image: url(../img/icon-check-white.svg);
	opacity: 1;
}

.ct__list label:hover {
	border-color: var(--main-blue1);
	color: var(--main-blue1);
}

.ct__list input:checked+label {
	background: var(--main-blue1);
	border-color: var(--main-blue1);
	color: var(--white);
	font-weight: 500;
}

.popup__header h2 {
	font-size: 1.3rem;
	font-weight: 600;
}

.popup__header .popup-close {
	border: 0;
	background: none;
	font-size: 26px;
	cursor: pointer;
	color: var(--black);
	opacity: 0.5;
}

.popup__header .popup-close:hover {
	opacity: 1;
}

.badge__wrap {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
}

.popup__video {
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 0.5rem;
}

.popup-video__viewer {
	flex: 1;
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
	width: 100%;
}

.popup-video__player {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}

.popup-video__player img,
.popup-video__player iframe,
.popup-video__player video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.popup-video__info {
	border: 1px solid #ddd;
	padding: 1rem;
	background: #fff;
	width: 100%;
	display: none;
}

.popup-video__info.pc {
	display: block;
}

.popup-video__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem 1rem;
}

.popup-video__meta strong {
	font-size: 1rem;
	font-weight: 600;
}

.badge__list {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}

.difficulty,
.frequency {
	display: flex;
	align-items: center;
	gap: .8rem;
}

.star {
	font-size: 2rem;
	color: #ffc400;
	letter-spacing: .1rem;
}

.star.purple {
	color: #9b5cff;
}

/* 
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.8rem;
    padding: 0 1rem;
    border-radius: .4rem;
    font-size: 1.3rem;
    font-weight: 700;
}

.badge--blue {
    color: #1976ff;
    background: #edf5ff;
}

.badge--orange {
    color: #ff7c20;
    background: #fff3e7;
} */

.popup-video__desc {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #eee;
}

.popup-video__desc p {
	font-size: 0.9rem;
	line-height: 2;
	color: #555;
}

.popup-video__list {
	position: relative !important;
	width: 260px;
	border: 1px solid #ddd;
	background: #fff;
	overflow-y: scroll;
	max-height: 380px;
}

.video-item {
	width: 100%;
	display: flex;
	gap: 1rem;
	padding: 0.5rem;
	background: #fff;
	border: 0;
	border-bottom: 1px solid #eee;
	text-align: left;
	cursor: pointer;
	transition: .2s;
}

.video-item:hover {
	background: #f8f8f8;
}

.video-item.is-active {
	background: #f5f8ff;
}

.video-item:last-child {
	border-bottom: 0;
}

.popup-video__list .thumb {
	position: relative;
	width: 70px;
	height: 50px;
	flex-shrink: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--black);
}

.popup-video__list .thumb img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	opacity: 0.5;
}

.popup-video__list .play {
	position: absolute;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 50%;
	width: 1.5rem;
	height: 1.5rem;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .8);
}

.popup-video__list .play::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-35%, -50%);
	border-left: .7rem solid #fff;
	border-top: .4rem solid transparent;
	border-bottom: .4rem solid transparent;
}

.popup-video__list .text {
	flex: 1;
	min-width: 0;
}

.popup-video__list .text strong {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--black);
}

.popup-video__list .text span {
	display: block;
	font-size: 0.8rem;
	color: #666;
}

.popup-video__list::-webkit-scrollbar {
	width: 6px;
}

.popup-video__list::-webkit-scrollbar-thumb {
	background: #bbb;
	border-radius: 10px;
}

.popup-video__list::-webkit-scrollbar-track {
	background: #f5f5f5;
}


/* popup -  5분 핵심 요약 – 전기이론 */

.popup__option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 14px 18px;
	border: 1px solid #ddd;
	width: 100%;
}

.popup__option .blind {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.popup__option .category,
.popup__option .speed {
	display: flex;
	align-items: center;
	gap: .5rem;
	border: 0;
	margin: 0;
	padding: 0;
}

.popup__option .category input,
.popup__option .speed input {
	display: none;
}

.popup__option .category label,
.popup__option .speed label {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	padding: 0.3rem 0.8rem;
	border: 1px solid #d8d8d8;
	border-radius: 2rem;
	background: #fff;
	cursor: pointer;
	transition: .2s;
	font-size: 0.8rem;
	margin: 0;
}

.popup__option .category input:checked+label,
.popup__option .speed input:checked+label {
	background: #222;
	color: #fff;
	border-color: #222;
}

.popup__option .category label:hover,
.popup__option .speed label:hover {
	border-color: #222;
}

.popup__option .title {
	font-size: 1rem;
	font-weight: 500;
}

.popup__option .switch__box {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	user-select: none;
}

.popup__option .switch__box input {
	display: none;
}

.popup__option .switch__box i {
	width: 48px;
	height: 28px;
	background: var(--Grayddd);
	border-radius: 30px;
	position: relative;
	display: block;
	transition: background .3s;
}

.popup__option .switch__box i::after {
	content: "";
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #222;
	position: absolute;
	top: 3px;
	left: 3px;
	transition: transform .3s;
}

.popup__option .switch__box input:checked+i {
	background: var(--main-yellow1);
	/* background: var(--main-blue3); */
}

.popup__option .switch__box input:checked+i::after {
	transform: translateX(20px);
	background: var(--white)
}

.summary__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .5rem;
	overflow-y: scroll;
	overflow-x: hidden;
	/* scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch; */
	height: 410px;
	padding: 0.2rem;
}

.video__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.2rem;
	border-radius: 14px;
	background: #f6fbff;
}

.video__card.blue-box {
	box-shadow: 1px 1px 4px #5b5b5b1f;
}

.video__card>div {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.video__card .badge-wrap {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.4rem;
}

.video__card .badge-wrap .badge__tag {
	padding: 0px 12px;
}

.video__card .progress {
	margin-top: 0.5rem;
	height: 8px;
}

.video-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

.video__card h3 {
	font-size: 1rem;
	font-weight: 600;
}

.video__card p {
	color: #666;
	line-height: 1.5;
	font-size: 0.8rem;
}

.video__card .video-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;

}

.play__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: 30px;
	border: none;
	border-radius: 50%;
	color: #fff;
	font-size: 18px;
	background: linear-gradient(135deg, #8a2be2, #ff5b3d);
	transition: all .3s ease;
	cursor: pointer;
}

.play__btn:hover {
	background: linear-gradient(135deg, #8a2be2, #8a2be2);
}

.play__btn::after {
	content: '';
	display: block;
	width: 80%;
	height: 80%;
	background-image: url(../html/260609-2/img/Study-play-nomal.svg);
	background-size: 100%;
}

.play__btn.stop {
	background: linear-gradient(135deg, var(--black), var(--black));
}

.play__btn.stop::after {
	background-image: url(../html/260609-2/img/Study-stop.svg);
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
}

/* popup - 플립 암기카드  */
.flip-card {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.flip-card__top {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}

.flip-card__top .filter {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.flip-card__top .filter>div {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
}

.flip-card__top .filter input {
	display: none;
}

.flip-card__top .filter label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .1rem;
	padding: 0.2rem 0.8rem;
	border: 1px solid #D9D9D9;
	border-radius: 2rem;
	background: var(--white);
	color: var(--Gray666);
	font-size: .9rem;
	font-weight: 400;
	cursor: pointer;
	transition: .2s;
	margin: 0;
}

.flip-card__top .filter label:hover {
	border-color: var(--black);
	color: var(--black);
}

.flip-card__top .filter input:checked+label {
	background: var(--black);
	border-color: var(--black);
	color: var(--white);
	font-weight: 500;
}

.flip-card__top .filter .dot {
	width: .8rem;
	height: .8rem;
	border-radius: 50%;
	background: #32C95A;
}

/* 
.flip-card__top .filter input:checked+label .dot {
	background: var(--white);
} */

.flip-card__top .filter .divider::after {
	content: '';
	display: block;
	width: 1px;
	height: 12px;
	background-color: var(--Grayddd);
}

.flip-card__top .dot {
	width: 8px;
	height: 8px;
	background: var(--green);
	border-radius: 50%;
	display: inline-block;
	margin-right: 6px;
}

.flip-card__top .total {
	position: relative;
	/* right: 20px;
	top: 18px; */
	font-size: 0.9rem;
	font-weight: 700;
	width: 100px;
	text-align: center;
}

.flip-card__top .progress {
	margin-top: 0;
	height: 10px;
	border-radius: 30px;
	background: #e7e7e7;
	overflow: hidden;
	width: 100%;
}

.flip-card__top .progress span {
	display: block;
	height: 100%;
	/* background: linear-gradient(90deg, #1c55ef, #3eb7ff); */
	background: linear-gradient(90deg, #EB6400, #FEBE0E);
}

.ct__list {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;

}

.ct__list a {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border: 1px solid #cccccc;
	padding: 0.5rem 1rem;
	font-weight: 400;
	font-size: 0.8rem;
}

.flip-card__wrap {
	display: flex;
	align-items: center;
	gap: 0;
}

.swiper.flashcardSwiper {
	width: 800px;
}

.swiper.flashcardSwiper .swiper-slide {
	padding: 1rem 0.3rem;
}

.flip-card__wrap .card-arrow {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: var(--white);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	cursor: pointer;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.flip-card__wrap .card-arrow.prev::after {
	content: '';
	display: block;
	width: 80%;
	height: 80%;
	background-image: url(../img/arrow-left.svg);
	background-size: 100%;
	opacity: 0.6;
}

.flip-card__wrap .card-arrow.next::before {
	content: '';
	display: block;
	width: 80%;
	height: 80%;
	background-image: url(../img/arrow-right.svg);
	background-size: 100%;
	opacity: 0.6;
}

.flip-card__wrap .card-arrow.prev:hover::after,
.flip-card__wrap .card-arrow.next:hover::before {
	opacity: 1;
}

.flip-card__wrap .card {
	flex: 1;
	min-height: 450px;
	background: var(--white) !important;
	border-radius: 16px;
	position: relative;

	perspective: 1000px;
	overflow: hidden;
	cursor: pointer;
}

.card.is-flip .card__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: .5s;
	transform-style: preserve-3d;
	transform: rotateY(180deg);
}

.card__front,
.card__back {
	width: 100%;
	height: 100%;
	min-height: fit-content;
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
}

.card__front {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.card__back {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	font-weight: 600;
	color: var(--white);
	background-color: var(--main-blue3);
	transform: rotateY(180deg);
}


.card__status {
	position: absolute;
	right: 0;
	top: -1rem;
	display: flex;
	gap: 8px;
}

.card__status button {
	display: flex;
	align-items: center;
	flex-direction: row;
	height: 30px;
	padding: 0 14px;
	border-radius: 6px;
	border: 1px solid #777;
	background: #fff;
	color: #777;
	font-size: .9rem;
}

.card__status button .dot::after {
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	mask: url("../img/icon-check-black.svg") no-repeat center / contain;
	background-color: #777;
	background-size: 100%;
	background-repeat: no-repeat;
	margin-left: 0.2rem;
}

.card__status button.is-active {
	background: #fff3eb;
	border-color: var(--orange);
	color: var(--orange);
	font-weight: 500;
}

.card__status button.is-active .dot::after {
	background-color: var(--orange);
}

.card__category {
	position: absolute;
	top: -1rem;
	left: 0;
	/* color: var(--main-blue3); */
	color: var(--black);
	font-weight: 500;
	font-size: 0.8rem;
}

.card__body {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	max-width: 80%;
	margin-top: 1rem;
}

.card__body h3 {
	font-size: 2rem;
	line-height: 3rem;
	font-weight: 800;
}


.card__body h3 {
	display: block;
}

.card__body img {
	display: block;
	max-width: 100%;
	width: fit-content;
	height: auto;
}

.card .card__inner {
	padding: 2rem 1.2rem 1.2rem;
	overflow-y: scroll;
	height: 460px;
}

.card .card__inner::-webkit-scrollbar {
	width: 5px;
}

.card .card__inner::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, .2);
}

.card .card__inner::-webkit-scrollbar-thumb {
	background: rgba(180, 180, 180, .35);
	border-radius: 20px;
	transition: .2s;
}

.card .card__inner:hover::-webkit-scrollbar-thumb {
	background: rgba(180, 180, 180, .8);
}

.card__answer {
	display: none;
	padding: 20px;
	color: var(--orange);
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 500;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: .3s;
}

.card__answer.is-show {
	display: inline-block;
	max-height: 100px;
	margin-top: 1rem;
	opacity: 1;
}

.card__body.is-answer {
	max-width: 100%;
}

.card__body.is-answer h3 {
	display: none;
}

.card__body.is-answer .card__answer {
	display: flex;
	max-height: fit-content;
	flex-direction: column;
	gap: 1rem;
	max-width: 100%;
	opacity: 1;
}

/* 
.card__answer::before {
	content: '💡';
} */
.card__table-wrap {
	width: 100%;
	overflow-x: auto;
}

.card__compare-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: .8rem;
	color: #222;
	border: 3px solid #222;
}

.card__compare-table th,
.card__compare-table td {
	border: 2px solid #222;
	padding: 16px 14px;
	text-align: center;
	vertical-align: middle;
	word-break: keep-all;
	line-height: 1.7;
}

.card__compare-table thead th {
	font-size: .9rem;
	font-weight: 700;
	background: #fafafa;
}

.card__compare-table tbody th {
	background: #fafafa;
	font-weight: 700;
}

.card__compare-table td {
	font-weight: 500;
}

.card__compare-table td:first-child {
	text-align: left;
}

.card__guide {
	position: relative;
	font-size: 1rem;
	color: var(--Gray666);
	margin-top: .8rem;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;
}

.card__guide.info {
	gap: .5rem;
	background-color: #fff !important;
}

.card__guide kbd,
.flip-card__bottom kbd {
	padding: 4px 10px;
	border: 1px solid #bbb;
	border-radius: 4px;
	background: #ffffff6f;
	color: var(--Gray666);
	font-size: 0.9rem;
}

.flip-card__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 0.9rem;
	color: var(--Gray666);
	padding: 0 2rem;
}

.flip-card__bottom .move {
	width: 38px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #bbb;
	background: #ffffff6f;
	border-radius: 4px;
}

.flip-card__bottom .dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--Gray666);
}

.blue-box {
	box-shadow: 1px 1px 6px #5b5b5b70;
	border: 2px solid #e0e0e0;
	background: var(--white)
}

fieldset.re__list {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.1rem;
}

fieldset.re__list>label {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	margin-bottom: 0;
	padding: 0.2rem 0.7rem;
	border-radius: 4px;
	border: 1px solid #ccc;
	color: #333333;
	cursor: pointer;
}

fieldset.re__list>label.active {
	color: #fff;
	background-color: #333;
	border-color: #333;
}

.content-paging {
	display: flex;
	justify-content: center;
	gap: 4px;
}

.content-paging a {
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	border: 1px solid #ddd;
	background: #fff;
	color: #666;
	text-decoration: none;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .25s;
	font-size: 0.8rem;
}

.content-paging a.page-btn {
	font-size: 1rem;
}

.content-paging a:hover {
	border-color: var(--main-yellow3);
	color: var(--main-yellow3);
}

.content-paging .active {
	background: var(--main-yellow3);
	border-color: var(--main-yellow3);
	/* background: var(--main-blue3);
	border-color: var(--main-blue3); */
	color: var(--white);
}

.content-paging .active:hover {
	color: var(--white);
}

.content-search {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 5px;
	margin-top: 24px;
	flex-wrap: wrap;
}

.content-search select,
.content-search input {
	height: 35px;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 0 14px;
	font-size: 0.8rem;
	outline: none;
	transition: .2s;
	background: #fff;
}

.content-search select {
	width: 80px;
	cursor: pointer;
	position: relative;
}


.content-search input {
	width: 280px;
}

.content-search select:focus,
.content-search input:focus {
	border-color: var(--main-yellow1);
}

.content-search button {
	height: 35px;
	padding: 0 20px;
	border: none;
	border-radius: 6px;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: .2s;
	/* background: var(--main-blue3); */
	background: var(--main-yellow3);
}

.content-search button:hover {
	background: #dc6300;
}

.select-box {
	position: relative;
	cursor: pointer;
}

.select-box::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 6px;
	height: 6px;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	transform: translateY(-60%) rotate(45deg);
	pointer-events: none;
	transition: .2s;
}

.select-box:focus-within::after {
	border-color: #222;
}

.select-box select:focus {
	border-color: var(--main-yellow1);
}



@media (max-width: 1500px) {

	.exam-schedule {
		width: 380px;
	}

	.status-card {
		min-width: auto;
		padding: 8px 10px;
		gap: .4rem;
	}

	.status-card:nth-child(3) {
		min-width: auto;
	}

	.chart--wrap.mini {
		width: 28px;
		height: 28px;
	}

	.weakness {
		width: 30%;
		min-width: auto;
	}

	.study__status {
		width: 78%;
	}

	header,
	footer {
		min-width: 1320px;
	}

	.exam-card__top .info p {
		font-size: 0.8rem;
	}

	.exam-card__top .info strong {
		font-size: 0.9rem;
	}

	.stage-round span {
		font-size: .7rem;
	}

	ul.score-box .score--star {
		width: 14px;
		height: 14px;
	}

	.stage-round strong {
		font-size: 1.2rem;
	}

	.exam-card__top .info strong {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		margin-top: 0.2rem;
		gap: 0rem;
		font-size: 0.9rem;
		width: 100%;
	}

	.exam-result__list {
		display: none;
		grid-template-columns: repeat(4, 1fr);
		gap: 0.4rem;
		padding: 0.5rem;
	}

	.exam-card__top .badge__tag {
		padding: 2px 6px;
	}

	.study__tip .tip-card:first-child {
		padding-right: 2rem;
	}
}

@media (max-width: 1200px) {


	.pc {
		display: none;
	}

	.pad {
		display: none;
	}

	.pc-pad {
		display: block;
	}

	.m {
		display: none;
	}

	.popup_st_01 {
		width: 90%;
		min-width: 90%;
	}

	.popup__option .switch__box {
		margin-left: unset;
		margin-bottom: 0 !important;
	}

	.popup__option:has(.speed) {
		display: flex;
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		row-gap: 10px;
		column-gap: 30px;
	}

	.flip-card__bottom {
		flex-direction: column;
	}

	.swiper.flashcardSwiper {
		margin: 0.5rem;
	}

	.card__guide {
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 0.4rem;
	}

	.card__guide.info {
		flex-direction: row;
		gap: .5rem;
	}
}

@media (max-width: 1024px) {

	header,
	footer {
		min-width: 100%;
	}

	.subject__list,
	.status__cards,
	.study__tip .tip-list {
		grid-template-columns: 1fr;
		flex-direction: column;
	}

	.sidebar.is-open {
		padding: 20px 1rem;
		width: 166px;
	}

	.study__status-box {
		flex-direction: column;
	}

	.weakness,
	.study__status {
		width: 100%;
	}

	.subject__list {
		display: grid;
	}

	.status__cards {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.study__tip .tip-list {
		display: grid;
	}

	.exam-schedule {
		position: relative !important;
		width: 320px;
	}

	.chapter__list {
		flex-direction: column;
	}

	.subject-tab {
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.sidebar {
		position: relative !important;
	}

	.dashboard {
		min-width: calc(100vh - 170px);
		padding: 2rem;
	}

	.exam-result__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.exam-card__top .info strong {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-top: 0;
		gap: 0.5rem;
		font-size: 0.9rem;
		width: 100%;
	}

	.bn__link-01>div {
		flex-direction: column;
		gap: 0.5rem;
	}

	.bn__link-01>span {
		font-size: 0.6rem;
	}

	.bn__link-01 .title {
		align-items: center;
		justify-content: center;
	}

	.bn__link-01 .title {
		font-size: 0.8rem;
		line-height: 1rem;
		font-weight: 500;
	}

	.bn__link-01 img {
		width: 30px;
		height: 30px;
	}

	.btn__link>div>span {
		font-size: 0.6rem;
	}

	.weakness ol {
		gap: 1rem;
	}

	.flip-card__wrap .card-arrow {
		width: 56px;
		height: 42px;
	}
}

@media (max-width:768px) {

	.pc {
		display: none;
	}

	.pad {
		display: none;
	}

	.pc-pad {
		display: none;
	}

	.m {
		display: block;
	}

	section[class*="popup_st"] {
		border: 0;
		position: fixed;
		padding: 20px;
		top: 0;
		left: 0;
		transform: unset;
	}

	.popup_st_01 {
		min-width: 100%;
		min-height: 100%;
		height: 100% !important;
		width: 100%;
		overflow-y: scroll;
	}

	.popup__header:has(.top) {
		align-items: flex-start;
	}

	.popup__header .top {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-direction: column;
		gap: 0.5rem;
	}

	.popup__header .popup-close {
		font-size: 22px;
	}

	.header .gnb-depth1 {
		display: none;
	}

	.flip-card__top .filter {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: .5rem;
	}

	.flip-card__top .filter>div {
		display: flex;
		flex-direction: row;
		gap: 0.5rem;
	}

	.popup__option .category,
	.popup__option .speed {
		gap: .4rem;
	}

	.popup__option .category label,
	.popup__option .speed label {
		padding: 0.2rem 0.6rem;
		font-size: .7rem;
	}

	.popup__option .switch__box i {
		width: 40px;
		height: 23px;
	}

	.popup__option .switch__box i::after {
		content: "";
		width: 17px;
		height: 17px;
	}

	.popup__option .switch__box input:checked+i::after {
		transform: translateX(16px);
	}

	.popup__option .title {
		font-size: 0.9rem;
	}

	.popup-video__viewer {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.popup-video__list {
		flex: 2;
		position: relative !important;
		width: 100%;
		max-height: none;
		overflow-y: unset;
	}

	.popup__option .switch__box {
		margin-left: inherit;
		gap: 12px;
		margin-bottom: 0;
	}

	.popup__option {
		gap: 10px;
		flex-direction: row;
		align-content: center;
		align-items: center;
	}

	.popup-video__info.m {
		display: block;
	}

	.popup-video__info.pc {
		display: none;
	}

	.popup__video {
		flex-direction: column;
	}

	.summary__list {
		grid-template-columns: repeat(1, 1fr);
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
		height: 1000px;
	}

	.summary__list::-webkit-scrollbar {
		display: none;
	}

	.card__guide {
		font-size: 0.8rem;
	}

	.flip-card__bottom {
		gap: 12px;
		font-size: 0.8rem;
	}

	.flip-card__bottom .move {
		width: 28px;
	}

	.flip-card__top .filter .divider {
		display: none;
	}

	.card__answer {
		font-size: 0.9rem;
		padding: 4px 15px;
	}

	.card__category {
		font-size: 0.8rem;
	}

	.body-wrap {
		height: auto;
		min-height: auto;
	}

	.dashboard {
		padding: 1.5rem;
		min-width: calc(100vh - 120%);
	}

	.card__status button {
		height: 26px;
		padding: 0 6px;
		border-radius: 6px;
		font-size: 0.8rem;
	}

	.flip-card__wrap {
		gap: 0;
	}

	.card__body h3 {
		font-size: 1.5rem;
	}

	.card__status {
		gap: 5px;
	}

	.flip-card__wrap .card-arrow {
		width: 56px;
		height: 26px;
	}

	/* 상단 */
	.dashboard__header {
		flex-direction: column;
		gap: 1rem;
		align-items: flex-start;
	}

	.greeting p {
		font-size: 14px;
		margin: 0;
	}

	.greeting h1 {
		font-size: 1rem;
		line-height: 1.4;
		word-break: keep-all;
	}

	.exam-schedule {
		width: 100%;
		padding: 15px;
	}

	.exam-schedule .dday {
		font-size: 1.2rem;
	}

	.exam-info h2 {
		font-size: 15px;
		line-height: 1.4;
	}

	footer ul,
	.header .login-menu {
		display: none;
	}

	/* 학습현황 */
	.study__status {
		padding: 15px;
	}

	.section-title {
		flex-direction: column;
		align-items: flex-start;
		gap: 3px;
	}

	.section-title h2 {
		font-size: 1rem;
	}

	.section-title p {
		font-size: 0.8rem;
	}

	.status__cards {
		grid-template-columns: repeat(1, 1fr);
		gap: 10px;
	}

	.content-sub-list {
		grid-template-columns: repeat(1, 1fr);
		gap: .5rem;
	}

	.content-sub-title {
		font-size: 1rem;
	}

	.content-sub-title .icon {
		width: 18px;
		height: 18px;
	}

	.content-sub-title {
		width: 80%;
		font-size: 1.2rem;
	}

	.weakness {
		padding: 15px;
	}

	.weakness h2 {
		font-size: 1.2rm;
	}

	/* 탭 */
	.tab-top {
		position: relative;
		padding-top: 4rem;
	}

	.tab-menu {
		overflow-x: auto;
		white-space: nowrap;
	}

	.tab-menu button {
		flex-shrink: 0;
		padding: 12px 18px 6px;
		font-size: 0.9rem;
	}

	.search__wrap {
		position: absolute;
		margin-bottom: 0;
		bottom: 60px;
		right: 0;
	}

	.search__wrap .search-title {
		font-size: 0.9rem;
	}

	.btn__link {
		position: absolute;
		bottom: 3.4rem;
		right: 0;
		padding: 12px;
		font-size: .8rem;
		margin: 0;
	}

	.btn__link.icon-arr::after {
		width: 14px;
		height: 14px;
	}

	.btn__link.icon-arr::before {
		width: 21px;
		height: 22px;
	}

	.btn__link>div>span {
		display: none;
	}

	/* 과목 카드 */
	.subject__list {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.subject-card {
		padding: 15px;
	}

	.subject-header h3 {
		font-size: 1rem;
	}

	.subject-body {
		flex-direction: column;
		gap: 15px;
	}

	.subject-body dl {
		width: 100%;
	}

	.subject-body dd {
		font-size: .8rem;
	}

	.weakness ol {
		gap: 0.5rem;
	}

	.h2-col {
		width: 50%;
	}

	.study__tip .tip-card:first-child {
		padding-right: 0;
		border-right: 0;
	}

	.btn__study {
		padding: 13px;
		font-size: 0.8rem;
	}

	.sub-buttons {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.sub-buttons a {
		padding: 10px;
		font-size: 13px;
	}

	/* TIP */
	.study__tip {
		margin-top: 25px;
	}

	.study__tip h2 {
		font-size: 15px;
		padding: 8px 12px;
	}

	.tip-list {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 20px;
	}

	.tip-card h3 {
		font-size: 18px;
	}

	.tip-card p {
		font-size: 14px;
		line-height: 1.6;
	}

	.study__tip .tip-card img {
		width: 30px;
	}

	/* 1 - 2 */

	.exam-result__list {
		grid-template-columns: 1fr;
	}

	.subject-tab__item .icon {
		display: none;
	}

	.subject-tab__item span {
		font-size: 0.8rem;
	}

	.subject-tab__item strong {
		display: none;
	}

	.subject-tab__item {
		padding: 0.4rem 1rem;
	}

	.search__wrap .search-box input[type="search"] {
		font-size: 0.9rem;
	}

	.footer.big .inner {
		width: 100%;
		margin: 0 auto;
		padding: 0 1rem;
	}

	.footer.big .left-menu span {
		color: #666;
		margin: 0 8px;
	}

	.footer.big .footer-bottom .inner {
		display: flex;
		flex-direction: column;
		gap: 5px;
		padding: 0 1rem;
	}

	.footer.big .left-menu,
	.footer.big .right-menu {
		display: flex;
		align-items: center;
		font-size: 12px;
	}

	.footer.big .right-menu li a {
		color: #212529;
		border-bottom: 1px solid;
	}

	.footer.big .right-menu .cafe {
		gap: 8px;
		font-size: 12px;
	}

	.footer.big .right-menu ul {
		bottom: -105px;
		right: 0;
		width: 100%;
		border: 1px solid #ddd;
		background: #d8d8d8;
		z-index: 9;
	}

	.footer.big .footer-top {
		height: auto;
		padding: 0.7rem 0;
	}

	.footer.big .footer-top .inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
		gap: 0.5rem;

	}
}



@media (max-width:400px) {
	.popup__wrap {
		padding: 1rem;
	}

	.popup__header h2 {
		font-size: 1.1rem;
	}

	.popup__option .category label,
	.popup__option .speed label {
		padding: 0.2rem 0.6rem;
		font-size: 0.6rem;
	}

	.popup__option .title {
		font-size: 0.8rem;
	}

	.video__card .badge-wrap {
		gap: 0.3rem;
	}
}



/* randing */
.randing_wrap {
	position: relative;
	width: 100%;
}

.title-img {
	margin-bottom: 2rem;
}

.floating-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 14px;
	z-index: 1000;
	pointer-events: none;
}

.floating-banner__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 1100px;
	height: 96px;
	margin: 0 auto;
	padding: 0 28px;
	border-radius: 20px;
	background: var(--white);
	box-shadow: 0 15px 40px rgba(0, 0, 0, .18);
	pointer-events: auto;
}

.type-black .floating-banner__inner {
	background: var(--black);
	color: var(--white);
}

.floating-banner__inner.hide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.floating-banner__text {
	display: flex;
	align-items: center;
	gap: 20px;
}

.icon-lightning {
	width: 42px;
	height: 42px;
	background: url("../html/260609-2/img/ECimg-lightning-mood.svg") center/contain no-repeat;
	flex-shrink: 0;
}

.floating-banner__text strong {
	display: block;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--black);
}

.type-black .floating-banner__text strong {
	color: var(--white);
}

.floating-banner__text strong span {
	color: #c428ff;
}

.type-black .floating-banner__text strong span {
	color: var(--main-yellow1);
}

.floating-banner__text p {
	color: #666;
	font-size: .9rem;
	font-weight: 400;
}

.type-black .floating-banner__text p {
	color: var(--Grayccc);
}

.floating-banner__button {
	display: flex;
	gap: 14px;
}

/* event - 001 */

.body-wrap.event-001 img {
	width: 100%;
}

.body-wrap.event-001 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: auto;
}

.body-wrap>section {
	position: relative;
	padding: 6rem 2rem !important;
	width: 100%;
	overflow: hidden;
}

.body-wrap>section.event__01 {
	padding: 2rem 2rem !important;
}

.body-wrap>section>article {
	width: 1000px;
	margin: 0 auto;
	position: relative;
}

.event__01 {
	background: linear-gradient(180deg, #FEE79B 92%, #FDDC76 100%);
	padding: 4rem 2rem !important;
	position: relative;
}

.event__02 {
	background: #fff9e8;
}

.event__01 .title-img {
	margin-bottom: 1rem;
}

.event__01::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: block;
	width: 1500px;
	background-size: 100%;
	background-image: url(../html/260609-2/img/ECimg-bg-01.png);
	background-position: center;
	background-repeat: no-repeat;
}

.event__03 {
	background-color: var(--Grayf5f);
}

.body-wrap .event__01>article {
	width: 1200px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 0;
}

.body-wrap.event-001 .event__01 img {
	width: 1000px;
}

.study-tool {
	padding: 70px 0 180px;
}

.study-tool .inner {
	width: 1200px;
	margin: 0 auto;
}

.study-tool__list {
	display: flex;
	gap: 0.5rem;
	width: 1000px;
}

.study-tool__list.fix {
	position: absolute;
	right: 136px;
	top: 212px;
	width: 418px;
}

.study-card {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #FDF3DB;
	background: #FDF3DB;
	border-radius: 8px;
	text-align: center;
	transition: .25s;
}

.study-card:hover {
	transform: translateY(-8px);
	border-color: var(--black);
}

.study-card a {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem;
}

.study-card__top {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0.2rem;
}

.study-card__device {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 5px;
	background: #56a9ff;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.study-card__device.mobile {
	margin-left: 4px;
	background: #2f7df5;
}

.study-card__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
}

.study-card__thumb::after {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	mask: url("../html/260609-2/img/ECimg-50.svg") no-repeat center / contain;
	-webkit-mask: url("../html/260609-2/img/ECimg-50.svg") no-repeat center / contain;
	background-color: var(--black);
}

.study-tool__list li:nth-child(1) .study-card__thumb::after {
	width: 20px;
	height: 20px;
}

.study-tool__list li:nth-child(2) .study-card__thumb::after {
	mask: url("../html/260609-2/img/ECimg-51.svg") no-repeat center / contain;
	-webkit-mask: url("../html/260609-2/img/ECimg-51.svg") no-repeat center / contain;
}

.study-tool__list li:nth-child(3) .study-card__thumb::after {
	mask: url("../html/260609-2/img/ECimg-53.svg") no-repeat center / contain;
	-webkit-mask: url("../html/260609-2/img/ECimg-53.svg") no-repeat center / contain;
	width: 25px;
	height: 25px;
}

.study-tool__list li:nth-child(4) .study-card__thumb::after {
	mask: url("../html/260609-2/img/ECimg-54.svg") no-repeat center / contain;
	-webkit-mask: url("../html/260609-2/img/ECimg-54.svg") no-repeat center / contain;
	width: 22px;
	height: 22px;
}

.study-tool__list li:nth-child(5) .study-card__thumb::after {
	mask: url("../html/260609-2/img/ECimg-55.svg") no-repeat center / contain;
	-webkit-mask: url("../html/260609-2/img/ECimg-55.svg") no-repeat center / contain;
	width: 22px;
	height: 22px;
}

.study-tool__list.fix li:nth-child(1) .study-card__thumb::after {
	mask: url("../html/260609-2/img/ECimg-56.svg") no-repeat center / contain;
	-webkit-mask: url("../html/260609-2/img/ECimg-56.svg") no-repeat center / contain;
	width: 42px;
	height: 42px;
}

.study-tool__list.fix li:nth-child(2) .study-card__thumb::after {
	mask: url("../html/260609-2/img/ECimg-57.svg") no-repeat center / contain;
	-webkit-mask: url("../html/260609-2/img/ECimg-57.svg") no-repeat center / contain;
	width: 33px;
	height: 33px;
}

.study-card h3 {
	font-size: 1rem;
	font-weight: 700;
	text-align: left;
	color: var(--black);
}

.study-tool__list.fix .study-card h3 {
	color: var(--main-red);
	font-size: 1.2rem;
}

.study-tool__list.fix .study-card p {
	color: #333;
	font-size: 0.9rem;
}

.study-card a:hover {
	text-decoration: none;
}

.study-card p {
	color: var(--Gray666);
	font-size: 0.7rem;
	text-align: left;
}

.study-card strong {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
	color: var(--main-blue4);
	font-size: 18px;
	font-weight: 700;
}

.study-tool__notice {
	margin-top: 40px;
	text-align: center;
	color: rgba(255, 255, 255, .6);
	font-size: 18px;
}

.type-black .btn__st.btn-outline {
	color: var(--main-yellow2) !important;
	border-color: var(--main-yellow2) !important;
	background-color: var(--black) !important;

}

.type-black .btn__st.icon-cart::before {
	background-color: var(--main-yellow2) !important;
}

.type-black .btn__st.icon-cart:hover::before {
	background-color: var(--main-yellow1) !important;
}

.type-black .btn__st.btn-outline:hover {
	color: var(--main-yellow1) !important;
	border-color: var(--main-yellow1) !important;
}

.type-black .btn__st.arr-white::after {
	background-color: var(--black) !important;
}

.type-black .btn__st.btn-gradient {
	background: linear-gradient(to bottom, #FEDB03, #FEC205) !important;
	color: var(--black) !important;
}

.type-black .btn__st.btn-gradient:hover {
	background: linear-gradient(to bottom, #FEC205, #FEC205) !important;
}

.study-tool__list.fix .study-card {
	border-color: #949494;
}

.study-tool__list.fix .study-card:hover {
	border-color: var(--black);
}

.point-card {
	padding: 70px;
	border-radius: 28px;
	background: #fff;
	position: relative;
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .08);
	margin-bottom: 1.5rem;
}

.point-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 8px;
	background: linear-gradient(90deg, #6f00ff, #c42cff, #ffcb3a);
}

.point-card.num-02::before {
	background: linear-gradient(90deg, #DB006E, #FFF035);
}

.point-card.num-03::before {
	background: linear-gradient(90deg, #D900D5, #FFF035);
}

.point-card.num-04::before {
	background: linear-gradient(90deg, #EDA200, #FFF035);
}

.point-card.num-05::before {
	background: linear-gradient(90deg, #FA6702, #FFF035);
}

.point-card__inner {
	display: flex;
	align-items: center;
	gap: 2rem;
	gap: 1rem;
	padding: 2.5rem;
}

.point-card__preview {
	width: 420px;
}



.point-card__content {
	flex: 1;
}

.point-card__title {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 14px;
}


.icon__st {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: linear-gradient(180deg, #6f00ff, #ffca35);
	color: #fff;
	font-size: 30px;
}

.icon__st::after {
	content: '';
	display: block;
	width: 30px;
	height: 30px;
	background-image: url(../html/260609-2/img/icon-mosk-test.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;

}

.point-card.num-02 .icon__st::after {
	background-image: url(../html/260609-2/img/icon-play-book.svg);
}

.point-card.num-03 .icon__st::after {
	background-image: url(../html/260609-2/img/icon-Flap-card.svg);
}

.point-card.num-04 .icon__st::after {
	background-image: url(../html/260609-2/img/icon-Audiobook.svg);
}

.point-card.num-05 .icon__st::after {
	background-image: url(../html/260609-2/img/icon-table-list.svg);
}

.badge__st {
	display: inline-flex;
	align-items: center;
	padding: 0px 12px;
	font-size: 0.8rem;
	font-weight: 500;
	background-color: #F6E7FF;
	border: 1px solid #7E00D1;
	color: #7E00D1;
	border-radius: 999px;
}

.badge__st.red {
	background-color: #FFF5EE;
	border-color: #CD5400;
	color: #CD5400;
}

.point-card h2 {
	font-size: 1.6rem;
	margin-top: 8px;
	font-weight: 600;
}

.slogan_title {
	display: block;
	margin-bottom: 10px;
	font-size: 1.3rem;
	color: #9b16ff;
	font-weight: 600;
}

.desc {
	color: #666;
	line-height: 1.5;
	font-size: 0.9rem;
	margin-bottom: 20px;
}

.feature-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.feature-list li {
	display: flex;
	align-items: center;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--black);
	gap: 0.3rem;
}

.feature-list li::before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	mask: url("../html/260609-2/img/icon-check-fill.svg") no-repeat center / contain;
	-webkit-mask: url("../html/260609-2/img/icon-check-fill.svg") no-repeat center / contain;
	background-color: #9b16ff;
}

.mock-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
	color: #8b18ff;
	text-decoration: none;
	font-size: 1.2rem;
	font-weight: 800;
}

.mock-link:hover {
	color: var(--black) !important;
	text-decoration: none;
}

.mock-link::after {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	mask: url("../html/260609-2/img/icon-arrow-right.svg") no-repeat center / contain;
	-webkit-mask: url("../html/260609-2/img/icon-arrow-right.svg") no-repeat center / contain;
	background-color: var(--Gray888);
}

.mock-link span {
	color: #999;
}

.point-card.num-02 .icon__st {
	background: linear-gradient(180deg, #DB006E, #ffca35);
}

.point-card.num-03 .icon__st {
	background: linear-gradient(180deg, #D900D5, #ffca35);
}

.point-card.num-04 .icon__st {
	background: linear-gradient(180deg, #EDA200, #ffca35);
}

.point-card.num-05 .icon__st {
	background: linear-gradient(180deg, #FA6702, #ffca35);
}

.point-card.num-02 .feature-list li::before {
	background-color: #DB006E;
}

.point-card.num-03 .feature-list li::before {
	background-color: #D900D5;
}

.point-card.num-04 .feature-list li::before {
	background-color: #EDA200;
}

.point-card.num-05 .feature-list li::before {
	background-color: #FA6702;
}

.point-card.num-02 .slogan_title,
.point-card.num-02 .mock-link {
	color: #DB006E;
}

.point-card.num-03 .slogan_title,
.point-card.num-03 .mock-link {
	color: #D900D5;
}

.point-card.num-04 .slogan_title,
.point-card.num-04 .mock-link {
	color: #EDA200;
}

.point-card.num-05 .slogan_title,
.point-card.num-05 .mock-link {
	color: #FA6702;
}


@media (max-width:1200px) {
	.body-wrap>section>article {
		width: 100%;
	}

	.body-wrap .event__01>article {
		width: 100% !important;
	}

	.floating-banner {
		bottom: 14px;
		top: unset;
	}

	.floating-banner__inner {
		width: calc(100% - 30px);
		height: 96px;
		padding: 0 28px;
		border-radius: 10px;
		justify-content: center;
		gap: 2rem;
	}

	.btn__st {
		height: 42px;
		padding: 0 20px !important;
		font-size: 0.8rem;
	}

	.body-wrap.event-001 .event__01 img {
		width: 100%;
	}

	.icon-lightning {
		width: 32px;
		height: 32px;
	}

	.btn__st.icon-cart::before {
		width: 16px;
		height: 16px;
	}

	.floating-banner__text {
		gap: 10px;
	}

	.floating-banner__text strong {
		font-size: 1rem;
	}

	.floating-banner__text p {
		font-size: 0.8rem;
	}

	.study-tool__list.fix {
		right: calc(50% - 462px);
		top: 28%;
		width: 418px;
	}

	.study-tool__list.fix .study-card a {
		gap: 0.5rem;
		padding: 0.6rem;
	}

	.study-tool__list.fix .study-card p {
		color: #333;
		font-size: 0.9rem;
	}

	.study-tool__list.fix .study-card h3 {
		font-size: 1rem;
	}
}

@media (max-width:1024px) {

	.point-card {
		padding: 40px 24px;
	}

	.point-card__inner {
		flex-direction: column;
	}

	.point-card__preview {
		width: 100%;
		flex: auto;
	}

	.point-card h2 {
		font-size: 36px;
	}

	.slogan {
		font-size: 24px;
	}

	.desc {
		font-size: 17px;
	}

	.feature-list {
		grid-template-columns: 1fr;
	}

	.feature-list li {
		font-size: 18px;
	}

	.mock-link {
		font-size: 24px;
	}

	.body-wrap .event__01>article {
		width: 100% !important;
	}

	.study-tool__list {
		width: 100%;

		display: grid;
		grid-template-columns: repeat(6, 1fr);
	}

	.study-tool__list li:nth-child(1),
	.study-tool__list li:nth-child(2),
	.study-tool__list li:nth-child(3) {
		grid-column: span 2;
	}

	.study-tool__list li:nth-child(4) {
		grid-column: 2 / span 2;
	}

	.study-tool__list li:nth-child(5) {
		grid-column: 4 / span 2;

	}

	.floating-banner__inner {
		flex-direction: column;
		gap: 0.8rem;
		height: auto;
		padding: 0.8rem;
	}

	.btn__st {
		height: auto;
		padding: 6px 62px !important;
		font-size: 0.8rem;
	}

	.study-tool__list.fix {
		right: calc(50% - 417px);
		top: 24%;
		width: 378px;
		display: flex;
	}

}

@media (max-width:880px) {
	.study-tool__list.fix {
		right: calc(50% - 385px);
		top: 23%;
		width: 348px;
	}

}

@media (max-width:800px) {
	.study-tool__list.fix {
		right: calc(50% - 337px);
		top: 22%;
		width: 304px;
	}

	.study-tool__list.fix li:nth-child(1) .study-card__thumb::after {
		width: 28px;
		height: 28px;
	}

	.study-tool__list.fix li:nth-child(2) .study-card__thumb::after {
		width: 22px;
		height: 22px;
	}

	.study-tool__list.fix .study-card p {
		font-size: 0.7rem;
	}

	.study-tool__list.fix .study-card h3 {
		font-size: 0.8rem;
	}

}

@media (max-width:768px) {


	.body-wrap>section {
		padding: 3rem 1.5rem !important;
		width: 100%;
	}

	.floating-banner {
		top: unset;
		left: 0;
		bottom: 0;
		transform: none;
	}

	.floating-banner__inner {
		width: 100%;
		height: auto;
		flex-direction: column;
		padding: 12px 12px;
		border-radius: 12px 12px 0 0;
		gap: 0.5rem;
	}


	.floating-banner__text {
		gap: 4px;
	}


	.floating-banner__text p {
		font-size: 0.8rem;
		display: none;
	}

	.floating-banner__text strong {
		font-size: 0.8rem;
	}

	.type-black .floating-banner__text strong {
		font-weight: 500;
	}

	.floating-banner__button {
		gap: 8px;
		width: 100%;
	}

	.title-img {
		margin-bottom: 1rem;
	}

	.study-card:hover {
		transform: unset;
	}

	.study-card__thumb::after {
		width: 26px;
		height: 26px;
	}

	.study-tool__list li:nth-child(3) .study-card__thumb::after {
		width: 26px;
		height: 26px;
	}

	.study-tool__list li:nth-child(4) .study-card__thumb::after {
		width: 22px;
		height: 22px;
	}

	.study-card .title {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		gap: 0.5rem;
	}

	.study-card p {
		font-size: 0.9rem;
	}

	.study-card a {
		padding: 0.5rem;
	}

	.study-tool__list {
		grid-template-columns: 1fr;
	}

	.study-tool__list li:nth-child(1),
	.study-tool__list li:nth-child(2),
	.study-tool__list li:nth-child(3),
	.study-tool__list li:nth-child(4),
	.study-tool__list li:nth-child(5) {
		grid-column: auto !important;
	}

	.btn__st {
		height: 32px;
		width: 100% !important;
		padding: 0 10px !important;
		border-radius: 4px;
		font-size: 11px;
	}

	.btn__st.icon-cart::before {
		width: 12px;
		height: 12px;
	}

	.btn__st.arr-white::after {
		width: 10px;
		height: 10px;
	}

	.icon-lightning {
		width: 12px;
		height: 12px;
	}

	.point-card:nth-child(2n) .point-card__inner {
		flex-direction: column-reverse !important;
	}

	.point-card h2 {
		font-size: 20px;
	}

	.point-card__title {
		gap: 10px;
	}

	.slogan_title {
		margin-bottom: 5px;
		font-size: 1rem;
	}

	.desc {
		font-size: 14px;
	}

	.feature-list li {
		font-size: 14px;
	}

	.feature-list {
		gap: 8px;
	}

	.feature-list li::before {
		width: 20px;
		height: 20px;
	}

	.mock-link {
		font-size: 15px;
	}

	.point-card {
		padding: 30px;
		border-radius: 12px;
		box-shadow: 0 6px 220px rgba(0, 0, 0, .08);
		margin-bottom: 2rem;
	}

	.point-card__inner {
		padding: 1.5rem 1.2rem;
	}

	.body-wrap.event-001 .event__01 img {
		width: 100%;
	}

	.icon__st {
		width: 52px;
		height: 52px;
	}

	.icon__st::after {
		width: 24px;
		height: 24px;
	}

	.study-tool__list.fix {
		width: 220px;
		right: calc(50% - 247px);
		top: 19%;
		gap: 0.3rem;
	}

	.study-tool__list.fix .study-card {
		border-width: 1px;
		border-radius: 4px;
	}

	.study-tool__list.fix li:nth-child(1) .study-card__thumb::after {
		width: 20px;
		height: 20px;
	}

	.study-tool__list.fix li:nth-child(2) .study-card__thumb::after {
		width: 16px;
		height: 16px;
	}

	.study-tool__list.fix .study-card .title {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.study-tool__list.fix .study-card a {
		gap: 0.5rem;
		padding: 0.2rem;
	}

	.study-tool__list.fix .study-card h3 {
		font-size: 0.6rem;
	}

	.study-tool__list.fix .study-card p {
		font-size: 0.5rem;
	}

	.type-black .btn__st.btn-outline {
		background-color: #1b170e !important;
		border-width: 1px !important;
	}
}


@media (max-width:600px) {

	.study-tool__list.fix {
		width: 175px;
		right: calc(50% - 196px);
		top: 17%;
		gap: 0.2rem;
	}

	.study-tool__list.fix .study-card a {
		gap: 0.2rem;
		padding: 0.2rem;
	}
}

@media (max-width:400px) {
	.study-tool__list.fix li:nth-child(1) .study-card__thumb::after {
		width: 15px;
		height: 15px;
	}

	.study-tool__list.fix li:nth-child(2) .study-card__thumb::after {
		width: 12px;
		height: 12px;
	}

	.study-tool__list.fix {
		width: 155px;
		right: calc(50% - 168px);
		top: 14%;
	}

}