/* ============================================================================
팝업 
============================================================================ */
.pop-parent {
	display: block;
	position: fixed;
	top: 200px;
	right: 0;
	z-index: 9999;
	transition: all .2s;
}

.pop-parent.close {
	display: none;
}

.pop-parent .m-ratioBox-wrap {
	width: 100%;
	padding-top: 100%;
	position: relative;
	overflow: hidden;
}

.pop-parent .m-ratioBox-wrap .m-ratioBox {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-position: center;
}

.pop-parent .m-ratioBox-wrap img {
	display: block;
	width: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	z-index: 1;
}

.pop-parent .m-ratioBox-wrap iframe {
	width: 105%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	z-index: 1;
}

.pop-parent .swiper {
	overflow: hidden;
}

.pop-parent .swiper-pagination {
	display: flex;
}

.pop-parent .pop {
	width: 400px;
	position: relative;
}

.pop-parent .pop .btn-toggle {
	width: 40px;
	height: 40px;
	position: relative;
	background-color: black;
	cursor: pointer;
	border: 1px solid #3c3c3c;
}

.pop-parent .pop .btn-toggle img {
	width: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-90deg);
	transition: all .3s;
}

.pop-parent .pop-btns {
	display: flex;
	position: absolute;
	top: 73px;
	left: -113px;
	background-color: #3c3c3c;
	opacity: 1;
	transform: rotate(90deg);
}

.pop-parent .pop-btns i {
	font-size: 20px;
	font-weight: bold;
}

.pop-parent .pop-btns a {
	color: #fff;
	padding: 7px 14px;
}

.pop-parent .pop-btns #oneday_check {
	position: absolute;
	clip: rect(0, 0, 0, 0);
}

.pop-parent .pop-btns #oneday_check+label {
	display: flex;
	align-items: center;
	padding: 0 10px;
	font-size: 14px;
	color: #fff;
	cursor: pointer;
	position: relative;
}

.pop-parent .pop-btns #oneday_check+label:before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 10px;
	border: 1px solid #fff;
	background: white;
}

.pop-parent .pop-btns #oneday_check:checked+label:before {
	content: '\2713';
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 1px solid var(--F9A529);
	background: var(--F9A529);
	color: #202020;
	text-align: center;
	line-height: 12px;
}

.pop-parent .pop-btns .btn-toggle {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.pop-parent .pop-btns .btn-toggle .icon {
	width: 20px;
	height: 20px;
}

.pop-parent .pop .swiper-btn-control {
	width: 8px;
	height: 11px;
	margin-left: 16px;
	position: relative;
	top: 2px;
}

.pop-parent .swiper-control {
	display: flex;
	align-items: center;
	position: absolute;
	top: 21px;
	right: 20px;
	z-index: 2;
}

.pop-parent .swiper-control .swiper-pagination {
	position: static;
}

.pop-parent .swiper-pagination-bullet {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	border-radius: 0;
	border: 1px solid white;
	opacity: 0.5;
	background-color: transparent;
}

.pop-parent .swiper-pagination-bullet-active {
	background-color: #fff;
	opacity: 1;
}

.pop-parent.active {
	right: -400px;
}

.pop-parent.active .btn-toggle {
	transform: rotate(180deg);
}


/* xicon 대체 */
.btn-toggle .icon {
	max-width: 32px;
}

@media screen and (max-width:1200px) {
	.pop-parent .pop {
		width: 310px;
	}

	.pop-parent.active {
		right: -310px;
	}
}


/* ====== 공통 ======== */

.no-scroll {
	overflow: hidden;
}


.scrollWrap {
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

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

.bgBox {
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}




/* 모달전체 기본 클래스명입니다. */
 .modal {
 	display: none;
 	position: fixed;
 	z-index: 999;
 	left: 0;
 	top: 0;
 	width: 100%;
 	height: 100%;
 	overflow: auto;
 	background-color: rgba(0, 0, 0, 0.8);
 }

 .modal .modal-content {
 	background-color: #fefefe;
 	margin: 15% auto;
 	padding: 40px;
 	width: 100%;
	max-width: 560px;
	position: relative;
	border-radius: 16px;
	box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.12);
	background-color: #fff;
 }

 .modal .close {
 	font-weight: bold;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 12px;
	right: 12px;
 }


.modal .close i {
	color: #292929;
	font-size: 16px;
}

  .modal .close:hover,
  .modal .close:focus {
 	color: black;
 	text-decoration: none;
 	cursor: pointer;
 }


.modal .modalInput {
	width: 100%;
	height: 56px;
	border-radius: 8px;
	border: solid 1.5px #e4e4e4;
	background-color: #fff;
	padding: 0 24px;
	font-size: 18px;
}

.modal .modalInput::placeholder {
	font-size: 18px;
	font-weight: 600;
	color: #292929;
	opacity: 0.5;
}

.modal .form-title {
	font-size: 18px;
	font-weight: bold;
	color: #292929;
}

.modal .input-wrap {
	margin-top: 12px;
}

.modal .wrap_btn {
	display: flex;
	gap: 16px;
	margin-top: 34px;
}

.modal .btn_modal {
	border-radius: 8px;
	height: 56px;
	font-size: 20px;
    font-weight: 600;
	z-index: 2;
}

.modal .btn_cancle {
	border: solid 1.5px #292929;
	background-color: #fff;
	color: #292929;
	width: 160px;
}

.modal .btn_next {
	border-radius: 8px;
	background-color: #292929;
	color: #fff;
	width: 100%;
}

.modal .txt_guide {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #292929;
	margin-top: 8px;
}


.modal .icon_chk {
	font-size: 56px;
	color: #292929;
}

.msgPwdModal .inner-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.msgPwdModal .icon_chk {
	margin-bottom: 24px;
}

.msgPwdModal .form-title {
	font-size: 32px;
	font-weight: 500;
}

.msgPwdModal .wrap_btn {
	width: 100%;
}


@media screen and (max-width: 1024px) {
.modal-content {
	max-width: 90%;
	border-radius: 4px;
	padding: 20px;
}

.modal .txt_guide {
	font-size: 11px;
}


.modal .btn_modal {
	height: 40px;
	font-size: 14px;
	border-radius: 4px;
}

.modal .modalInput {
	height: 40px;
	padding: 0 16px;
	font-size: 14px;
	border-radius: 4px;
}

.modal .modalInput::placeholder {
	font-size: 14px;
}

.modal .wrap_btn {
	gap: 8px;
	margin-top: 24px;
}

.modal .form-title {
	font-size: 16px;
}

}

/* ===================== */

/* section {
	min-height: calc(100vh - 96px - 300px );
}

@media screen and (max-width: 1024px) {
	section {
		min-height: calc(100vh - 439px - 56px);
	}
} */


.fluidWrap {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.fluidWrap::before {
	width: 100%;
	display: block;
	content: "";
	padding-top: 100%;
}

.fluidWrap img,
.fluidWrap video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* 
   공지사항/ 프로모션
*/









/* 로드맵 */

.bg_com {
	width: 100vw;
	height: 100vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 0 메인 */
.mainSection {
	background-image: url('/images/bg_main.png');
}

.mainSection .container {
	padding: 20px 0;
}

.mainSection .img_main {
	max-width: 44%;
	position: absolute;
	top: 44%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.mainSection .main_sub {
	padding: 0 20px;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 5%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 20px;
	font-weight: 500;
	color: #484848;
}


@media screen and (max-width: 1080px) {

.mainSection .main_sub {
	font-size: 18px;
}



}


/* 1 - 로드맵 */

.roadmapSection {
    background-image: url('/images/bg_roadmap.png');
	/* padding: 6.5rem 4.438rem 6.5rem 8.438rem;  */
	/* padding: 9.63% 3.70% 9.63% 7.03%; */
	/* padding: clamp(50px, 9.63%, 104px) clamp(30px, 3.70%, 135px) clamp(50px, 9.63%, 135px) clamp(60px, 7.03%, 104px); */
		padding:0 clamp(30px, 3.70%, 135px) 0 clamp(60px, 7.03%, 104px);
	/* 104px 135px */
} 

.roadmapSection .container {
	/* background-color: darkgray; */
}

.roadmapSection .wrap_session {
	display: flex;
	align-items: center;
}

.roadmapSection .wrap_session:not(:first-child) {
	margin-top: 24px;
}


.roadmapSection .list_section {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	width: 100%;
}

/* 네모 공통 */
.roadmapSection .item_section {
	width: calc((100% - 8px * 6) / 7);
	height: calc(((100vh - 13rem) - 8px * 3) / 4);
	/* max-width: 200px; */
	/* height: 100%; */
	/* height: 12.5rem; */
	border-radius: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.2s ease-in-out;
}

/* 차시 전체 공통 */

.roadmapSection .list_section {
	display: flex;
	gap: 8px;
	margin-left: 2%;
	/* margin-left: 24px; */
}

.roadmapSection .item_head {
	/* min-width: 200px; */
	/* min-height: 200px; */
	height: calc(((100vh - 13rem) - 8px * 3) / 4);
}

.roadmapSection .item_head .title_item {
	font-family: 'HakgyoansimDunggeunmiso-B';
	font-size: clamp(20px, 1.6667vw, 36px);
	color: #fff;
}

.roadmapSection .title_pre {
	font-size: var(--font21);
	color: #222;
	font-weight: bold;
	text-align: center;
}

.roadmapSection .title_item {
	font-size: var(--font21);
	font-weight: bold;
	color: #222;
	text-align: center;
	line-height: 1.52;
}

.roadmapSection .item_link {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.roadmapSection .time_item {
	width: 100%;
	/* max-width: 96px; */
	max-width: 86%;
	/* height: 32px; */
	padding: 1% 0;
	border-radius: 16px;
	line-height: 1.5;
	text-align: center;
	margin-top: 6%;
	font-size: var(--font18);
	color: #222;
}

.roadmapSection .try_item {
	font-size: var(--font18);
	font-weight: bold;
	color: #0093ff;
	margin-bottom: 1%;
}



/* 1차시 section_1 */
.roadmapSection .session_1 .item_section {
	background-color: var(--color-yellow-main);
	border: 4px solid var(--color-yellow-main);
}

.roadmapSection .session_1 .item_head {
	background-color: var(--color-yellow-head);
	border: 4px solid var(--color-yellow-head);
}

.roadmapSection .session_1 .item_pre,
.roadmapSection .session_1 .time_item {
	background-color: var(--color-yellow-pre);
	border: 4px solid var(--color-yellow-pre);
}

/* 2차시 section_2 */
.roadmapSection .session_2 .item_section {
	background-color: var(--color-green-main);
	border: 4px solid var(--color-green-main);
}

.roadmapSection .session_2 .item_head {
	background-color: var(--color-green-head);
	border: 4px solid var(--color-green-head);
}

.roadmapSection .session_2 .item_pre,
.roadmapSection .session_2 .time_item {
	background-color: var(--color-green-pre);
	border: 4px solid var(--color-green-pre);
}

/* 3차시 section_3 */
.roadmapSection .session_3 .item_section {
	background-color: var(--color-blue-main);
	border: 4px solid var(--color-blue-main);
}

.roadmapSection .session_3 .item_head {
	background-color: var(--color-blue-head);
	border: 4px solid var(--color-blue-head);
}

.roadmapSection .session_3 .item_pre,
.roadmapSection .session_3 .time_item {
	background-color: var(--color-blue-pre);
	border: 4px solid var(--color-blue-pre);
}

/* 4차시 section_4 */
.roadmapSection .session_4 .item_section {
	background-color: var(--color-red-main);
	border: 4px solid var(--color-red-main);
}

.roadmapSection .session_4 .item_head {
	background-color: var(--color-red-head);
	border: 4px solid var(--color-red-head);
}

.roadmapSection .session_4 .item_pre,
.roadmapSection .session_4 .time_item {
	background-color: var(--color-red-pre);
	border: 4px solid var(--color-red-pre);
}

.roadmapSection .session_4 .try_item {
	color: var(--color-red-head);
}

/* Null 가상 */
.roadmapSection .item_null.item_section,
.roadmapSection .item_null .item_head,
.roadmapSection .item_null .item_pre,
.roadmapSection .item_null .time_item {
	background-color: var(--color-unset);
	border: unset;
}

/* 로드맵 hover 효과 */

.roadmapSection .item_section:not(.item_null, .item_head):hover {
	background-color: #fff;
}

.roadmapSection .item_section:not(.item_head):hover {
	background-color: #fff;
}

.roadmapSection .session_1 .item_section:not(.item_null,.item_head):hover {
	border: 4px solid var(--color-hover-yellow);
}

.roadmapSection .session_2 .item_section:hover {
	border: 4px solid var(--color-hover-green);
}

.roadmapSection .session_3 .item_section:not(.item_null,.item_head):hover {
	border: 4px solid var(--color-hover-blue);
}

.roadmapSection .session_4 .item_section:not(.item_head):hover {
	border: 4px solid var(--color-hover-red);
}



.roadmapSection .item_null {
	pointer-events: none;
}



@media screen and (max-width:1024px) {
.roadmapSection .item_section {
	border-radius: 24px;
}

}







/* 최상단 공통 */
.btn_round {

}


/* 수업전 교사 확인 사항 */
.bg_default {
	width: 100vw;
	height: 100vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/* height: calc(var(--vh, 1vh) * 100); */
		/* 실제 뷰포트 높이를 반영 */
}

.preS_01 {
	background-image: url('/images/bg_pre_01.png');
}

.preS_02 {
	background-image: url('/images/bg_pre_02.png');
}

.preS_03 {
	background-image: url('/images/bg_pre_03.png');
}

.preS_04 {
	background-image: url('/images/bg_pre_04.png');
}


/* // */

.userControl {
	display: flex;
	align-items: center;
	justify-content: end;
	/* padding: 40px; */
	padding: 2%;
	/* gap: 16px; */
	gap: 1%;
}

.userControl .btn_round {
	width: 100%;
	max-width: fit-content;
	/* width: 174px; */
	padding: 0 3%;
	/* height: 64px; */
	height: 6vh;
	border-radius: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	/* font-size: 20px; */
	font-size: var(--font20);
	color: #fe9c13;
	font-weight: bold;
	background-color: #fff;
	border: 2px solid #fe9c13;
}

.userControl .btn_title {
	/* font-size: 20px; */
	font-size: var(--font20);
	color: #fff;
	font-weight: bold;
}

.userControl .btn_home {
	justify-content: center;
	gap: 16px;
	background-color: #fe9c13;
	max-width: 174px;
}

.userControl .now_title {
    width: auto;
	padding: 0 24px;
}

.userControl .img_home {
	max-width: 46px;
	width: 78%;
	max-width: clamp(32px, 8vw, 46px);
	/* 최소 32px, 최대 46px */
	width: clamp(50%, 78%, 100%);
	/* 뷰포트 크기에 따라 너비 조정 */
}



.userControl .pagination {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 216px;
}

.userControl .page_numView {
	/* width: 216px; */
	/* height: 64px; */
	width: 15vw;
	/* max-width: 261px; */
	height: 6vh;
	border-radius: 32px;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.userControl .btn_page {
	position: absolute;
	/* width: 64px;
	height: 64px; */
	/* width: 30%; */
	/* height: auto; */
	height: 6vh;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: #ffd500;
	display: flex;
	justify-content: center;
	align-items: center;
}

.userControl .btn_page.prev {
	left: 0;
}

.userControl .btn_page.next {
	right: 0;
}

.userControl .icon_arrow{
	font-size: 20px
}

.userControl .page_numView {
	/* font-size: 20px; */
	font-size: var(--font20);
	font-weight: bold;
}




.pageTitle {
	position: relative;
	border-radius: 60px;
	background-color: #ffd500;
	width: 100%;
	max-width: calc(100vw - 80px);
	/* height: 120px; */
	padding: 1.6% 0;
	margin: 0 auto;
	display: flex;
	align-items: center;
	/* padding-left: 192px; */
	padding-left: 11vw;
}

.pageTitle::after {
	position: absolute;
	content: "";
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	/* height: calc(100% - 24px);
	width: calc(100% - 40px); */
	height: calc(100% - 25%);
	width: calc(100% - 2%);
	border: 4px dashed #ffb300;
	border-radius: 48px;
}

/* 배경색 black */
.pageTitle.black {
	background-color: #222;
}

.pageTitle.black .title_page  {
	color: #fff;
}

.pageTitle .icon_title {
	/* max-width: 128px; */
	max-width: 8vw;
	position: absolute;
	left: 2%;
	z-index: 2;
} 

.pageTitle .title_page {
	font-family: 'HakgyoansimDunggeunmiso-B';
	font-size: var(--font40);
	color: #222;
}

.pageTitle .title_page.type2 {
	/* font-size: 32px; */
	font-size: var(--font32);
	color: #fff;
}

.pageTitle .size_type2 { 
	font-size: var(--font34);
}


.userActive {
	max-width: calc(100vw - 80px);
	/* height: calc(100vh - 304px); */
	height: calc(100vh - 27vh);
	/* max-height: 573px; */
	margin: 0 auto;
	padding-top: 24px;
	padding-bottom: 24px;
	display: flex;
	gap: 24px;
	justify-content: space-around;
}


.userActive .userBox {
	width: 100%;
	height: 100%;
	/* height: inherit; */
	/* height: calc(100vh - 364px); */
	border-radius: 40px;
	background-color: rgba(255, 213, 0, 0.25);
	/* padding: 24px; */
	padding: 1.5%;
	position: relative;
}

/* .classDescription::after {
	position: absolute;
	content: "";
	display: block;
	width: calc(100% - 3%);
	height: 24px;
	bottom: 4.5%;
	left: 50%;
	transform: translateX(-50%);
	background-color: #fff;
} */

.userActive .classDescription {
	/* max-width: 728px; */
	width: 35%;
	/* overflow-y: scroll;
	scrollbar-width: none; */
}

.userActive .classMediaBox {
	width: 65%;
}

.classDescription .wrap_inner {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 4.2%;
	border-radius: 32px;
	background-color: #fff;
	overflow-y: auto;
	scrollbar-width: none;
	height: calc(100% - 1.5%); 
}



.classDescription .box_inner {
    /* height: 100%; */
	min-height: fit-content;
}


.classDescription .wrap_process {
    padding: 24px;
	border-radius: 24px;
	background-color: #fff4ae;
}

.classDescription .title_process {
	font-family: 'HakgyoansimDunggeunmiso-B';
	font-size: clamp(0px, 1.5vw, 20px);
	line-height: 1.4;
	text-align: center;
}

.classDescription .detail_process {
	position: relative;
	border-radius: 24px;
	border: 2px solid #ffd500;
	margin-top: 52px;
	/* padding: 53px 32px 32px; */
	padding: 15% 9% 9%;
	background-color: #fff;
}


.classDescription .title_sticker {
	position: absolute;
	left: 5%;
	top:-14%;
	width: 40%;
	max-width: 148px;
	min-width: fit-content;
	padding: 4% 1%;
	/* height: 57px; */
	border-radius: 28.5px;
	background-color: #ffd500;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--HDOR);
	/* font-size: 24px; */
	font-size: var(--font24);
	color: #222;
}

.classDescription .item_process {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.classDescription .item_process:not(:last-child){
	/* margin-bottom: 16px; */
	margin-bottom: 5%;
}

.classDescription .dot {
	font-size: 8px;
	color: #222;
}

.classDescription .txt_process {
	/* font-size: 18px; */
	font-size: var(--font18);
	line-height: 1.4;
	color: #222;
	text-align: left;
	width: calc(100% - 36px);
}



.wrap_swiper {
	width: 100%;
}


.classMediaBox .item_slide {
	border-radius: 40px;
	overflow: hidden;
	height: 100%;
	/* max-height: 720px; */
}


.classMediaBox .item_slide img
/* .wrap_swiper .item_slide img*/ { 
	object-position: top;
	object-fit: cover;
	/* height: -webkit-fill-available; */
	max-height: unset;
} 


.classMediaBox .img_click {
	display: flex;
	/* width: 30%; */
	max-width: 120px;
	position: absolute;
	top: 10%;
	left: 46px;
	width: clamp(60px, 20vw, 120px);
		/* 최소 60px, 뷰포트 너비의 20%, 최대 120px */
}

.classSwiper1 {
	border-radius: 40px;
	overflow: hidden;
	height: 100%;
}

.preS_04 .classSwiper1 .fluid-img-wrap::before {
	padding-top: 70%;
}


.classSwiper1 .swiper-pagination-bullet,
.classSwiper3 .swiper-pagination-bullet,
.classSwiper12 .swiper-pagination-bullet {
	/* width: 56px !important;
	border-radius: 4px; */
	background-color: #fff !important;
	opacity: 0.5 !important;
}

.classSwiper1 .swiper-pagination-bullet-active,
.classSwiper3 .swiper-pagination-bullet-active,
.classSwiper12 .swiper-pagination-bullet-active {
	background-color: #fff !important;
	opacity: unset !important;
}

.swiper-button-next,
.swiper-button-prev {
	color: #fff !important;
}


.swiper-button-next {
	right: 20px !important;
}

.swiper-button-prev {
	left: 20px !important;
}

.wrap_storySwiper .item_slide {

}


.wrap_storySwiper .item_slide img {
	width: 100%;
	height: 100vh;
	object-fit: cover;
	display: flex;
}

.fluid-img-wrap::before {
	width: 100%;
	display: block;
	content: "";
	padding-top: 100%;
}


.wrap_storySwiper .fluid-img-wrap::before {
	/* padding-top: 56.3%; */
}

.activeBox {
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: space-between;
}


.activeBox .item_active {
	/* width: calc(100% - 32px); */
	/* width: 216px; */
	/* max-height: 178px; */
	/* border-radius: 32px; */
	border-radius: clamp(16px, 4vw, 32px);
	text-align: center;
	/* padding: 8px 0px 16px; */
	padding: 4% 0px 8%;
	/* height: auto; */
		height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4%;
}

.activeBox .item_active .title_active {
	width: 100%;
	font-family: 'HakgyoansimDunggeunmiso-B';
	font-size: var(--font24);
	line-height: 1.5;
	color: #fff;
	/* margin-top: 4px; */
	/* min-height: 55px; */
	display: flex;
	justify-content: center;
	align-items: center;
}

.activeBox .item_active .icon_active {
	width: 30%;
	min-width: 32px;
	margin: 0 auto;
}

.activeBox .item_active.item_1 {
	border: solid 4px #ff8000;
	background-color: #fe9c13;
}


.activeBox .item_active.item_2 {
	border: solid 4px #00ab43;
	background-color: #00cb50;
}

.activeBox .item_active.item_3 {
	border: solid 4px #0074c9;
	background-color: #0093ff;
}

.activeBox .item_active.item_4 {
	border: solid 4px #e2213a;
	background-color: #f05367;
}

@media screen and (max-height: 816px) {
/* .activeBox .item_active {
	flex-direction: row;
	padding: 4% 0;
	justify-content: unset;
	padding-left: 10%;
}

.activeBox .item_active .title_active {
	justify-content: start;
	text-align: left;
	width: fit-content;
} */

.activeBox .item_active .icon_active {
	margin: unset;
}

}


.activeDescription .roll_dot {
	/* width: 100%;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #ffd500;
	font-size: var(--font20);
	color: #222;
	display: flex;
	justify-content: center;
	align-items: center; */
			aspect-ratio: 1 / 1;
				/* 1:1 비율로 설정하여 완벽한 원 유지 */
			border-radius: 50%;
			min-width: fit-content;
			/* 둥근 모양 유지 */
			background-color: #ffd500;
			font-size: var(--font20_32);
			/* 최소 12px, 뷰포트 2%, 최대 16px */
			color: #222;
			display: flex;
			justify-content: center;
			align-items: center;
			width: calc(100% - 87%);
			height: calc(100% - 87%);
			max-width: 32px;
			padding: 2px;
			display: flex;
			justify-content: center;
			align-items: center;
}


/* 여기  높이랑 히든 삭제*/
.activeDescription .wrap_inner {
	border-radius: 40px;
	/* overflow: hidden; */
	background-image: url(/images/bg_acitveDcp_01.png);
	background-position: top;
	background-repeat: no-repeat;
	background-size: contain;
	/* padding-top: 182px; */
	padding-top: 43%;
	/* height: 100%; */
	padding: 43% 6% 10%;
}


.activeDescription .detail_process {
	margin-top: unset;
}



.defaultSection .userActive .classMediaBox {
	width: calc(60% - 32px);
}

.defaultSection .userActive .classDescription {
	width: calc(30% - 32px);
}

.defaultSection .userActive .activeBox {
	width: 12%;
}



/* ------  */

.classDescription .detail_process:not(:last-child){
	/* margin-bottom: 50px; */
	margin-bottom: 13%;
}

.defaultSection .wrap_img {
	height: 100%;
	border-radius: 32px;
	overflow: hidden;
}

.defaultSection .wrap_img img {
	height: 100%;
	/* object-fit: cover; */
	object-fit: fill;
}

.defaultSection .classMediaBox {
	position: relative;
}

.btn_default {
	position: absolute;
	right: 48px;
	top: 48px;
	display: flex;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #2222223b;
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn_default .icon_default {
	/* font-size: 32px; */
	font-size: var(--font32);
	color: #fff;
}

.btn_close {
	z-index: 22;
	width: clamp(60px, 10vw, 96px);
	/* 최소 60px, 최대 96px, 뷰포트 너비의 10% 기준 */
	height: clamp(60px, 10vw, 96px);
	/* 높이도 동일하게 설정 */
}
@media screen and (max-width: 1024px) {
	.btn_close {
		z-index: 22;
		width: clamp(48px, 6vw, 96px);
		height: clamp(48px, 6vw, 96px);
	}
}



/* 확장 페이지 공통 */
.extendSection {
	padding-top: 24px;
	background-image: url('/images/bg_class1_01.png');
}

/*  확장 페이지별 배경화면 */
	.es_02 {
		background-image: url(/images/bg_class1_02.png);
	}

	.es_03 {
		background-image: url(/images/bg_class1_03.png);
	}

	.es_04 {
		background-image: url(/images/bg_class1_05.png);
	}

	.es_05,
	.es_06,
	.es_10,
	.es_22 {
		background-image: url(/images/bg_class1_07.png);
	}

	.es_07 {
		background-image: url(/images/bg_class1_09.png);
	}

	.es_09 {
		background-image: url(/images/bg_class1_10.png);
	}

	.es_11 {
		background-image: url(/images/bg_class1_12.png);
	}

	.es_12 {
		background-image: url(/images/bg_class1_13.png);
	}

	.es_13 {
		background-image: url(/images/bg_class1_14.png);
	}

	.es_14 {
		background-image: url(/images/bg_class1_15.png);
	}

	.es_15 {
		background-image: url(/images/bg_class1_16.png);
	}

	.es_16 {
		background-image: url(/images/bg_class1_17.png);
	}

	.es_17 {
		background-image: url(/images/bg_class1_18.png);
	}

	.es_23 {
		background-image: url(/images/bg_class2_03.png);
	}

	.es_24 {
		background-image: url(/images/bg_class2_04.png);
	}

	.es_26 {
		background-image: url(/images/bg_class2_06.png);
	}

	.preT_02 {
		background-image: url(/images/bg_class2_pre02.png);
	}

	.ps_03 {
		background-image: url(/images/bg_class2_06.png);
	}



	.es_31 {
	    background-image: url(/images/bg_class3_01.png);
	}

	.es_32 {
		background-image: url(/images/bg_class3_02.png);
	}

	.es_33 {
		background-image: url(/images/bg_class3_03.png);
	}

	.es_34 {
		background-image: url(/images/bg_class3_04.png);
	}

	.es_35 {
		background-image: url(/images/bg_class3_05.png);
	}

	.es_36 {
		background-image: url(/images/bg_class3_06.png);
	}

	.es_37 {
		background-image: url(/images/bg_class3_07.png);
	}

	.es_38 {
		background-image: url(/images/bg_class3_08.png);
	}

	.es_43 {
		background-image: url(/images/bg_class4_02.png);
	}

	.es_44 {
		background-image: url(/images/bg_class4_04.png);
	}

	.es_45 {
		background-image: url(/images/bg_class4_05.png);
	}

	.es_46 {
		background-image: url(/images/bg_class4_06.png);
	}

	.es_47 {
		background-image: url(/images/bg_class4_07.png);
	}

	.es_48 {
		background-image: url(/images/bg_class4_08.png);
	}

	.es_49 {
		background-image: url(/images/bg_class4_09.png);
	}

	.es_333 {
		background-image: url(/images/bg_class3_033.png);
	}

	.es_55 {
		background-image: url(/images/bg_class3_055.png);
	}

/* -- */


.es_05 .es_05_center_01 {
	display: flex;
	width: calc(100% - 40px);
	max-width: 80%;
	margin: 0 auto;
}

.es_06 .es_06_center_01,
.es_10 .es_10_center_01 {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(100% - 40px);
	max-width: 34%;
	margin: 0 auto;
	padding-top: 6%;
}


.es_15 {
	position: relative;
}







.classMediaBox .wrap_bg_img.es_07 {
	background-image: url(/images/bg_class1_09.png);
}





.extendSection .img_click {
	max-width: 120px;
	position: absolute;
	top: 17%;
	left: 10%;
}

.extendSection .pageTitle {
	padding-left: unset;
	text-align: center;
	max-width: calc(100vw - 284px);
	margin: unset;
	padding: 1% 0;
} 

.extendSection .pageTitle::after {
	display: none;
}

.extendSection .title_page {
	/* width: 100%; */
	width: fit-content;
	margin: 0 auto;
}

.extendSection .container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	z-index: 2;
	position: relative;
}

.extendSection .btn_close {
	position: unset;
}

.extendSection .btn_close:hover {
	background-color: #FFB300;
	transition: all 0.3s;
}

.extendDepSection .btn_close {
	position: absolute;
}


.extendDepSection .btm_container {
	position: absolute;
	bottom: 0;
	padding-bottom: 80px;
}

.extendDepSection .pageTitle {
	background: unset;
}

.extendDepSection .title_page {
	/* font-size: 64px; */
	font-size: clamp(43px, 5vw, 96px);
	color: var(--color-green-head);
}

.extendDepSection .img_character {
	max-width: 401px;
}

.extendDepSection .wrap_contents {
	position: relative;
}


/*  확장 페이지별 배경화면 */
.eds_01 {
	background-image: url('/images/bg_class1_04.png');
}

.eds_02 {
	background-image: url('/images/bg_rules_2.png');
}

.eds_03 {
	background-image: url('/images/bg_rules_1.png');
}
/* --- */


/* rulesSection */

.rulesSection .btm_container {
	/* height: 100%; */
	height: unset;
	top: unset;
}



.rulesSection .bubble_container {
	top: 50%;
	left: 50%;
	bottom: unset;
	transform: translate(-50%,-50%);
}

.rulesSection .pageTitle {
	width: fit-content;
	margin: 0 auto;
	border-radius: unset;
}

.rulesSection .speech_bubble {
	width: 520px;
	position: absolute;
}

.rulesSection .bubble_1 {
	left: -540px;
	bottom: 40px;
}

.rulesSection .bubble_4 {
	right: -540px;
	bottom: 40px;
}

.rulesSection .bubble_2 {
	left: -400px;
	top: -340px;
}

.rulesSection .bubble_3 {
    right: -400px;
	top: -340px;
}

.eds_02 .title_page {
	color: #f05367;
}


.rulesSection .container {
	position: unset;
}

.rulesSection .pageTitle {
	position: unset;
}

.rulesSection  .btm_container {
	position: unset;
	padding-bottom: unset;
	bottom: unset;
	width: 100%;
	top: unset;
	display: flex;
	justify-content: center;
	align-items: center;
}

.rulesSection .btm_container .wrap_contents {
	width: fit-content;
	height: fit-content
}

.rulesSection .wrap_guide_contents {
	
}

.eds_01 .bubble_2 {
	top: -300px;
}

.eds_01 .bubble_3 {
	top: -300px;
}

.eds_03 .title_page {
	color: #fe9c13;
}


.rulesSection .time_container  { 
	width: 80%;
}



.classMediaBox .wrap_bg_img {
	overflow: hidden;
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url(/images/cmb_04.png);
}

.classMediaBox .wrap_bg_img img {
	width: calc(100% - 40px);
	object-fit: contain;
}

.classMediaBox .cs_28 {
	width: 100%;
}

.classMediaBox .cs_05 img {
	max-width: 36%;
	min-width: 214px;
}

.classMediaBox .cs_08 {
	background-image: url(/images/cmb_05.png);
}

.classMediaBox .cs_09 {
	background-image: url(/images/cmb_06.png);
}

.classMediaBox .cs_10 {
	background-image: url(/images/cmb_10.png);
}

.classMediaBox .cs_11 {
	background-image: url(/images/cmb_11.png);
}

.classMediaBox .cs_13 {
	background-image: url(/images/cmb_13.png);
}

.classMediaBox .cs_14 {
	background-image: url(/images/cmb_14.png);
}

.classMediaBox .cs_15 {
	background-image: url(/images/cmb_15.png);
}

.classMediaBox .cs_16 {
	background-image: url(/images/cmb_16.png);
}

.classMediaBox .cs_17,
.classMediaBox .cs_28 {
	background-image: url(/images/cmb_17.png);
}








.extendSlideSection {
	background-image: unset;
}

.classMediaBox .btn_default {
	z-index: 2;
}

.extendSlideSection .container {
	display: flex;
	/* flex-direction: column; */
}

.extendSlideSection .btn_close {
	/* position: absolute; */
}

.extendSlideSection .classSwiper3 {
	/* position: absolute;
	top: 0;
	left: 0;
	z-index: 1; */
}


.cmb14 .btn_answer {
	max-width: 400px;
	/* bottom: 80px; */
}

.cmb14 .btn_answer::after {
	content: "선택 후 바닷속 확인해보기";
}

.cmb14 {
	position: relative;
}


@media screen and (max-width: 1024px) {
.cmb14 .btn_answer {
	max-width: 240px;
	height: 32px;
	font-size: clamp(12px, 0.9375vw, 22px);
}


}

.groupChoice {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 76%;
}

.groupChoice .item_choice {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc((100% - 16px * 2) / 3);
	border: 4px solid #f5f5f5;
	border-radius: clamp(12px, 4vw, 24px);
	background-color: #fff;
	max-height: 182px;
	overflow: hidden;
	cursor: pointer;
}

.groupChoice img {
	height: calc(100% - 40px);
}

.groupChoice .item_num {
	position: absolute;
	left: 0;
	top: 0;
	font-family: 'HakgyoansimDunggeunmiso-B';
	/* font-size: 32px; */
	font-size: var(--font32);
	color: #222;
	width: 28%;
	height:28%;
	background-color: #f5f5f5;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom-right-radius: 24px;
}

.preS_02 .groupChoice .item_choice:hover,
.preS_02 .groupChoice .item_choice.active {
	border: 4px solid #aae053;
}

.preS_02 .groupChoice .item_choice:hover .item_num,
.preS_02 .groupChoice .item_choice.active .item_num {
	background-color:#aae053;
}

.preS_01 .groupChoice .item_choice:hover,
.preS_01 .groupChoice .item_choice.active {
	border: clamp(2px, 1vw, 4px) solid #ffb300;
}

.preS_01 .groupChoice .item_choice:hover .item_num,
.preS_01 .groupChoice .item_choice.active .item_num {
	background-color: #ffb300;
	border: clamp(2px, 1vw, 4px) solid #ffb300;
}

.preS_01 .groupChoice .choice {
	border-width: clamp(2px, 1vw, 4px);
}

.es_14 .groupChoice .item_choice {
	max-height: 280px;
}

.es_14 .groupChoice {
	height: fit-content;
}

.es_14 .btn_answer {
	max-width: 600px;
}

.es_14 .btn_answer::after {
	content: "선택 후 바닷속 확인해보기";
}

.es_14 .bg_dolpin {
	position: absolute;
	left: 0;
	top: 0;
}

.groupChoice .choice {
	border: solid 8px #ffb300;
}

.groupChoice .choice .item_num {
	background-color: #ffb300;
}

@media screen and (max-width: 1080px) {
.groupChoice .item_num {
	font-size: 18px;
	width: 32px;
	height: 32px;
	border-bottom-right-radius: 12px;
}


.groupChoice img {
	height: calc(100% - 20px);
	max-height: 70px;
}

}



.classMediaBox .ps_033 {
	background-image: url(/images/pre_04_01.jpg);
	border-radius: 32px;
}

/* 선택한 이미지 화면에 노출 */
.selected_images {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	
}



/* 1차시 15 */
.item_quiz {
	position: relative;
	/* width: 200px;
	height: 200px; */
	width: clamp(120px, 11vw, 300px);
		aspect-ratio: 1 / 1;
		/* 정사각형 비율 유지 */
	border-radius: 50%;
	background-color: #ff8000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: all 0.3s;
}

.item_quiz::after {
	position: absolute;
	content: "";
	/* width: 180px;
	height: 180px; */
	width: clamp(100px, 10vw, 320px);
		aspect-ratio: 1 / 1;
		/* 정사각형 비율 유지 */
	background-color: #fe9c13;
	border-radius: 50%;
	z-index: 1;
	transition: all 0.3s;
	border-radius: 50%;
}

.item_quiz::before {
	display: none;
	position: absolute;
	content: "";
	/* width: 180px;
	height: 180px; */
	width: clamp(170px, 5vw, 240px);
	aspect-ratio: 1 / 1;
	/* 정사각형 비율 유지 */
	background-color: rgba(255, 255, 255, 0.24);
	border-radius: 50%;
	z-index: 1;
	transition: all 0.3s;
	border-radius: 50%;
}

.item_quiz .img_deco {
	position: absolute;
	max-width: 43px;
	/* left: 24px;
	top: 32px; */
	left: 11%;
	top: 13%;
	z-index: 2;
}

.item_quiz .title {
	/* font-size: 24px; */
	font-size: var(--font24);
	font-family: 'HakgyoansimDunggeunmiso-B';
	color: #ffd500;
	z-index: 2;
	transition: all 0.3s;
}

.item_quiz .title_num {
	font-size: var(--font42);
	font-family: 'HakgyoansimDunggeunmiso-B';
	color: #fff;
	z-index: 2;
}

.wrap_inner {
	display: inline-block;
	position: relative;
	text-align: center;
	cursor: pointer;
}

.item_quiz {
	position: relative;
	background:  #ffa500;
	/* 기본 배경 그라데이션 */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: all 0.4s ease-in-out;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	color: #fff;
	border-radius: 50%;
	font-family: Arial, sans-serif;
}

.item_quiz:hover::after {background-color: #fff;}

.item_quiz:hover::before {
	display: flex;
}

.item_quiz:hover .title_num {
	color: #ff8000;
}


.item_quiz:hover {
	transform: scale(1.1);
	background: #ff8000;
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

.title {
	font-size: 20px;
	font-weight: bold;
	margin: 0;
	color: #ff8000;
}

.title_num {
	font-size: 24px;
	font-weight: bold;
	margin: 0;
	color: #ff8000;
}

/* 퍼지는 효과 애니메이션 */
@keyframes spreadEffect {
	0% {
		box-shadow: 0 0 10px 5px rgba(255, 200, 100, 0.3);
	}

	50% {
		box-shadow: 0 0 20px 10px rgba(255, 200, 100, 0.5);
	}

	100% {
		box-shadow: 0 0 30px 15px rgba(255, 200, 100, 0.6);
	}
}






/* 퀴즈 풍선 개별 속성 */
.wrap_quiz .wrap_inner {
	position: absolute;
}

.wrap_quiz .quiz_1 {
	top: 23%;
	left: 35%;
}

.wrap_quiz .quiz_2 {
	bottom: 19%;
	left: 48%;
}

.es_15 .wrap_quiz {
	width:50%;
	height: auto;
	margin: 0 auto;
}

.es_15 .quiz_1 {
	left: 44%;
	top: 30%;
}

.es_15 .quiz_2 {
	left: 53%;
	bottom: 25%;
}



.quiz_modal {
	
}

.wrap_num {
	display: flex;
	flex-direction: column;
	gap: 2%;
	width: 100%;
	max-width: 70%;
	aspect-ratio: 1;
	margin: 0 auto;
	padding-top: 12vh;
}

.wrap_num .item_num {
	background-color: #fff;
	border: 4px solid #e4e4e4;
	border-radius: clamp(30px, 5vw, 60px);
	/* 반응형으로 변경 */
	display: flex;
	align-items: center;
	padding: clamp(8px, 2vw, 16px);
	/* 반응형 패딩 */
	text-align: center;
	transition: all 0.3s ease-in-out;
	/* 부드러운 변화 */
}

.wrap_num .item_num.check {
	background-color: #ffd500;
	border: 4px solid #ffb300;
}


.wrap_num .num {
	/* width: 88px;
	height: 88px; */
	width: clamp(50px, 10vw, 88px);
	height: clamp(50px, 10vw, 88px);
	border-radius: 50%;
	font-family: var(--HDB);
	font-size: clamp(24px, 4vw, 56px);
	/* font-size: 56px; */
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #e4e4e4;
}

.wrap_num .check .num {
	background-color: #ffb300;
}

.wrap_num .cont_num {
	font-family: var(--HDOR);
	width: 100%;
	/* font-size: 56px; */
	font-size: clamp(24px, 4vw, 56px);
	color: #222;
}

.btn_blue {
	/* position: absolute;
	bottom: 48px;
	right: 48px;
	width: 248px;
	height: 248px;
	border-radius: 124px;
	background-color: #0093ff;
	display: flex;
	justify-content: center;
	align-items: center; */
	position: absolute;
		bottom: 5%;
		/* 화면 높이의 5% */
		right: 2%;
		/* 화면 너비의 5% */
		width: clamp(100px, 15vw, 248px);
			/* 최소 100px, 최대 248px */
			height: clamp(100px, 15vw, 248px);
			/* 동일하게 설정 */
		border-radius: 50%;
		/* 완전한 원형 */
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #0093ff;
}

.btn_blue .title {
    font-family: var(--HDB);
	font-size: var(--font40);
 	color: #fff;
	line-height: 1.4;
}

/* .btn_blue .shawdow_blue {
	position: absolute;
	width: 248px;
	height: 248px;
	border-radius: 124px;
	background-color: #0074c9;
	z-index: -1;
	bottom: -8px;
} */

.btn_blue {
	box-shadow: 0 clamp(2px, 1.5vh, 8px) #0074c9;
}

#modal2 .btn_blue {
		box-shadow: 0 clamp(2px, 1.5vh, 8px) #e2213a;
}



.quiz_modal .wrap_num .item_num {
	cursor: pointer;
}

@media screen and (max-width: 1024px) {
	.wrap_num .item_num {
		padding: clamp(4px, 1vw, 8px);
	}

	.wrap_num .num {
		width: clamp(42px, 5vw, 88px);
		height: clamp(42px, 5vw, 88px);
		font-size: clamp(24px, 3vw, 56px);
	}
	.btn_blue { 
		right: 0;
	}
}




/* 1차시 수업 후기 */
.wrap_review {
	position: absolute;
	display: flex;
	gap: 24px;
	left: 50%;
	top:50%;
	transform: translate(-50%,-40%);
	width: 100%;
	max-width: calc(100% - 96px);
}

.es_16 .wrap_review {
	gap: 3%;
	max-width: 80%;
}

#modal2 .wrap_num {
	flex-wrap: wrap;
	flex-direction: row;
	gap: 40px;
    aspect-ratio: unset;
}

#modal2 .wrap_num .item_num {
	width: calc((100% - 40px * 2) / 3);
	max-width: 33%;
	padding: unset;
	border-radius: clamp(16px, 4vw, 32px);
	flex-direction: column;
	align-items: start;
	border: solid 8px #ffb300;
	position: relative;
}

#modal2 .num {
		border-radius: unset;
		border-top-left-radius: clamp(8px, 2vw, 12px);
		border-bottom-right-radius: clamp(16px, 4vw, 32px);
		background-color: #ffb300;
		font-size: var(--font40);
		width: 30%;
			/* 부모 요소 크기에 비례 */
			height: 30%;
			/* 부모 요소 크기에 비례 */
			max-width: 72px;
			/* 최대 크기 제한 */
			max-height: 72px;
			/* 최대 크기 제한 */
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
}

#modal2 .cont_num {
	position: absolute;
	bottom: 8%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	background-color: #ffb300;
	border-radius: 37.5px;
	font-family: var(--HDB);
	color: #222;
	width: fit-content;
	/* padding: 16px 40px; */
	padding: clamp(8px, 2vw, 16px) clamp(20px, 5vw, 40px);
	font-size: clamp(12px, 2vw, 40px);
}

#modal2 .fluidWrap::before {
	padding-top: 130%;
}

#modal2 .btn_blue {
	background-color: #f05367;
}

#modal2 .btn_blue .shawdow_blue {
	background-color: #e2213a;
}

#modal2 .item_num:hover .num {
	background-color: #e2213a;
	color: #fff;
}

#modal2 .item_num:hover .cont_num {
	background-color: #e2213a;
	color: #fff;
}

#modal2 .item_num:hover {
	border-color: #e2213a;
}

@media (max-width: 1054px) {
	#modal2 .num {
		max-width: 52px;
		max-height: 52px;
		border-top-left-radius: clamp(8px, 1vw, 12px);
		border-bottom-right-radius: clamp(16px, 3vw, 32px);
	}
	#modal2 .cont_num {
		padding: clamp(8px, 1vw, 16px) clamp(20px, 2vw, 40px);
		bottom: 4%;
		border-radius: 24px;
	}

}
@media (max-width: 1024px) {
	#modal2 .wrap_num .item_num {
		width: calc((100% -24px * 2) / 3);
		border: solid 4px #ffb300;
		border-radius: clamp(12px, 3vw, 32px);
	}
	#modal2 .wrap_num {
		gap: 24px;
		padding-top: 8vh;
	}
}

@media (max-width: 768px) {
	#modal2 .wrap_num .item_num {
		width: calc((100% - 8% * 2) / 3);
		/* 더 작은 간격 */
	}
}

.whiteBoardModal.type2 .img_stemp{
		max-width: clamp(90px, 10vw, 200px);
}

.whiteBoardModal.type2 .inner_content .title {
	margin-top: 2vh;
	font-size: clamp(40px, 4vw, 80px);
}

.img_stemp {
	display: inline-block;
	/* 애니메이션 적용을 위해 block-level 요소로 설정 */
	animation: wiggle 1s ease-in-out infinite;
	/* 애니메이션 반복 */
}

/* 애니메이션 정의 */
@keyframes wiggle {

	0%,
	100% {
		transform: rotate(0deg);
		/* 기본 상태 */
	}

	25% {
		transform: rotate(-10deg);
		/* 왼쪽으로 기울임 */
	}

	75% {
		transform: rotate(10deg);
		/* 오른쪽으로 기울임 */
	}
}




/* 🟢 2차시 preS_02 -------------------- 🟢 */

.preS_02 .userControl .btn_home {
	background-color: #00cb50;
}

.preS_02 .userControl .btn_round {
	border: 2px solid #00cb50;
	color: #00cb50;
}

.preS_02 .userControl .btn_page {
	background-color: #aae053;
}

.preS_02 .pageTitle {
	border: solid 4px #8fcb2f;
	background-color: #aae053;
}

.preS_02 .pageTitle::after {
	border: 4px dashed #8fcb2f;
}

.preS_02 .classDescription .wrap_process {
	background-color: #e9ffcb;
}

.preS_02 .classDescription .title_sticker {
	background-color: #aae053;
}

.preS_02 .classDescription .detail_process {
	border: solid 2px #aae053;
}

.preS_02 .userActive .userBox {
	background-color: rgba(170, 224, 83, 0.25);
}

.preS_02 .activeDescription .roll_dot {
	background-color: #aae053;
}

.preS_02 .classMediaBox {
	display: flex;
	gap: 24px;
}

.preS_02 .cm_22 .btn_default {
	z-index: 20;
}

.preS_02 .cm_22 .wrap_img {
	position: relative;
}

.preS_02 .cm_22 .btn_default {
	right: 24px;
	top: 24px;
}

.preS_02 .groupChoice {
	gap: 24px;
	flex-direction: column;
	position: unset;
	width: 32%;
	flex-wrap: unset;
	transform: unset;
}

.preS_02 .item_choice {
	width: 100%;
	max-height: 224px;
	border: 4px solid #e4e4e4;
}

.preS_02 .item_num {
	width: clamp(40px, 10vw, 64px);
	/* 최소 40px, 뷰포트 너비의 10%, 최대 64px */
	height: clamp(40px, 10vw, 64px);
	/* 동일하게 설정 */
	font-size: var(--font18);
	background-color: #e4e4e4;
}

@media screen and (max-width: 1080px) {
	.preS_02 .item_num {
		width: 32px;
		height: 32px;
		border-bottom-right-radius: 12px;
	}
}

.es_22 {
	display: flex;
	flex-direction: column;
}

.es_22 .activeDolpin .groupChoice {
	width: 25%;
}

.fixed_dolpin {
	width: 70%;
	max-width: 1052px;
}

.activeDolpin .wrap_active {
	display: flex;
	max-width: 70%;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	gap: 4%;
}

.activeDolpin .groupChoice {
	position: unset;
	transform: unset;
	flex-direction: column;
	width: 58%;
}

.activeDolpin .groupChoice .item_choice {
	width: 100%;
	max-height: unset;
}

.activeDolpin .groupChoice img {
	height: unset;
}

.fixed_dolpin {
	position: relative;
}

/* 선택된 이미지 표시 */
.selected-overlay {
	position: absolute;
	top: 50%;
	/* 고정 돌고래 이미지의 중앙에 표시 */
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	/* 고정 이미지 위에 나타남 */
	width: 100%;
	/* 크기 조정 */
	height: auto;
	opacity: 0;
	/* 기본적으로 숨김 */
	transition: opacity 0.3s ease-in-out;
}

.selected-overlay.show {
	opacity: 1;
	/* 선택되었을 때 표시 */
}





/* 발표하기  presentSection */

.presentSection .wrap_inner {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 24px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: calc(100% - 96px);
}

.presentSection .title {
	font-family: var(--HDB);
	font-size:var(--font80);
	color: #0093ff;
	text-align: center;
}

.presentSection .wrap_review {
	max-width: 72%;
	margin: 0 auto;
	position: unset;
	transform: unset;
	/* gap: 40px; */
	gap: 4%;
	display: flex;
	justify-content: center;
}

.presentSection .wrap_item {
	border-radius: 32px;
	padding: 3% 1vw;
	box-sizing: border-box;
	max-width: 424px;
	cursor: pointer;
}


.presentSection .wrap_item.red {
	border: solid 4px #f05367;
	background-color: #ffeff6;
}

.presentSection .wrap_item.blue {
	border: solid 4px #0093ff;
	background-color: #e8f5ff;
}

.presentSection .wrap_item.yellow {
	border: solid 4px #ffb300;
	background-color: #fffade;
}

/* .presentSection .wrap_item:hover {
	border-width: 8px;
} */

.presentSection .title_item {
	width: fit-content;
	margin: 0 auto;
	/* padding: 16px 40px; */
	padding: 5% 12%;
	border-radius: 37.5px;
	font-family: var(--HDB);
	font-size: clamp(0px, 2.083vw, 48px);
	color: #fff;
	text-align: center;
	min-width: fit-content;
}

.presentSection .red .title_item {
	background-color: #f05367;
}

.presentSection .blue .title_item {
	background-color: #0093ff;
}

.presentSection .yellow .title_item {
	background-color: #ffb300;
}


 .presentSection .icon_present {
	display: flex;
	margin: 0 auto;
 }

 .presentSection .red .icon_present {
	max-width: 90%;
	margin-top: 8%;
}

.presentSection .blue .icon_present {
	max-width: 90%;
	margin-top: 6%;
}

.presentSection .yellow .icon_present {
	max-width: 90%;
	margin-top: 20%;
}



/* 🔵 3차시 preS_03 -------------------- 🔵 */

.preS_03 .userControl .btn_home {
	background-color: #0093ff;
}

.preS_03 .userControl .btn_round {
	border: 2px solid #0093ff;
	color:#0093ff;
}

.preS_03 .userControl .btn_page {
	background-color: #84cfff;
}

.preS_03 .pageTitle {
	border: solid 4px #007dd9;
	background-color: #0093ff;
}

.preS_03 .pageTitle::after {
	border: 4px dashed #007dd9;
}

.preS_03 .pageTitle .title_page {
	color: #fff;
}

.preS_03 .classDescription .wrap_process {
	background-color: #e2f7ff;
}

.preS_03 .classDescription .title_sticker {
	background-color: #84cfff;
}

.preS_03 .classDescription .detail_process {
	border: solid 2px #84cfff;
}

.preS_03 .userActive .userBox {
	background-color: rgba(132, 207, 255, 0.25);
}

.preS_03 .activeDescription .roll_dot {
	background-color: #84cfff;
}


.pageTitle .title_page.type2 {
	font-size: 32px;
}


/* 🔴 4차시 preS_04 -------------------- 🔴 */

.preS_04 .userControl .btn_home {
	background-color: #f05367;
}

.preS_04 .userControl .btn_round {
	border: 2px solid #f05367;
	color: #f05367;
}

.preS_04 .userControl .btn_page {
	background-color: #ff97a3;;
}

.preS_04 .pageTitle {
	border: solid 4px #e2213a;
	background-color: #f05367;
}

.preS_04 .title_page {
	color: #fff;
}

.preS_04 .pageTitle::after {
	border: 4px dashed #e2213a;
}

.preS_04 .classDescription .wrap_process {
	background-color: #ffeff6;
}

.preS_04 .classDescription .title_sticker {
	background-color: #ffb8c0;
}

.preS_04 .classDescription .detail_process {
	border: solid 2px #ffb8c0;
}

.preS_04 .userActive .userBox {
	background-color: rgba(255, 151, 163, 0.25);
}

.preS_04 .activeDescription .roll_dot {
	background-color: #ff97a3;
}



/* 4차시 */
.wrap_rayer {
	position: relative;
}

.wrap_rayer .item_trash {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	height: unset !important;
	object-fit: contain !important;
}

.wrap_rayer .dolpin_rayer {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 3;
	height: unset !important;
	object-fit: contain !important;
	width: 60%;
}



.es_49 .wrap_ani {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
}

.es_49 .wrap_ani img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
}

.es_49 .btn_play {
	position: absolute;
	right: 32px;
	bottom: 32px;
	width: 96px;
	height: 96px;
	border-radius: 48px;
	background-color: #f05367;
	display: flex;
	justify-content: center;
	align-items: center;
}

.es_49 .icon_play {
	font-size: 38px;
	color: #fff;
}


 /* .dust-effect {
 	animation: dustAnimation 0.5s forwards;
 } */


	/* @keyframes dustAnimation {
		0% {
			opacity: 1;
			transform: scale(1) translate(0, 0);
		}

		50% {
			opacity: 0.5;
			transform: scale(1.5);
		}

		100% {
			opacity: 0;
			transform: scale(2);
		}
	} */


.es_49 .twinkle {
	position: absolute;
	animation: twinkleEffect 1s infinite alternate;
	display: none;
	opacity: 0;
}

  @keyframes twinkleEffect {
  	0% {
  		opacity: 0.2;
  		transform: scale(1);
  	}

  	50% {
  		opacity: 0.7;
  		transform: scale(1.2);
  	}

  	100% {
  		opacity: 0;
  		transform: scale(1.5);
  	}
  }

.es_49 .twinkle_01 {
	max-width: 120px;
	left: 15%;
	top: 30%;
}

.es_49 .twinkle_02 {
	max-width: 120px;
	right: 15%;
	top: 25%;
}

.es_49 .twinkle_03 {
	max-width: 190px;
	right: 20%;
	bottom: 15%;
}

.nice_01 {
	opacity: 0;
	position: absolute;
	left: 0;
	bottom: 0;
}


.before_dolpin,
.after_dolpin {
	position: absolute;
	/* 겹쳐서 보이도록 설정 */
	top: 0;
	left: 0;
	width: 100%;
	/* 크기 동일하게 맞추기 */
	height: auto;
	opacity: 1;
	/* 기본값: 보이는 상태 */
	transition: opacity 0.5s ease;
	/* 전환 효과 */
}

.after_dolpin {
	opacity: 0;
	/* 초기에는 보이지 않도록 설정 */
}

.fade-out {
	opacity: 0;
	/* 페이드 아웃 시 투명하게 */
	transition: opacity 0.5s ease;
	/* 전환 시간 설정 */
}

.fade-in {
	opacity: 1;
	/* 페이드 인 시 불투명하게 */
	transition: opacity 0.5s ease;
	/* 전환 시간 설정 */
}


.after_dolpin.fade-in {
	transition: opacity 0.3s ease;
}



.wrap_storySwiper {
	position: absolute;
	left: 0;
	top: 0;
}



.activePresent {
	background-image: url('/images/active_bg3.png');
}

.activePresent .title {
	font-family: var(--HDB);
	color: #0093ff;
	font-size: 80px;
}

.activePresent .btn_close {
	position: absolute !important;
	top: 12px;
	right: 34px;
}

.activePresent .container {
	padding-top: 5%;
}


/* 발표가이드 규칙 */
.rul_02 {
	background-image: url('/images/active_bg3.png');
}

.rul_02 .title_page {
	color: #0093ff;
}

.rulesSection .bubble_2.type2 {
	top: -392px;
}

.rulesSection .bubble_3.type2 {
	top: -392px;
}



.wrap_memo {
	margin-left: 1vw;
	/* 뷰포트 단위로 조정 */
	position: absolute;
	top: 32px;
	/* 반응형 위치 조정 */
	left: 0;
	/* width: fit-content;
	max-width: 90%; */
	/* 최대 너비 제한 */
	width: clamp(120px, 15vw, 304px);
	max-width: 304px;
}

.wrap_memo:after {
	position: absolute;
	content: "";
	width: clamp(16px, 2vw, 24px);
	/* 반응형 크기 */
	height: clamp(16px, 2vw, 24px);
	background-color: #e2f7ff;
	border-radius: 50%;
	top: clamp(12px, 3vh, 22px);
	/* 반응형 위치 */
	left: 50%;
	transform: translateX(-50%);
}

.wrap_memo:before {
	position: absolute;
	content: "";
	width: 4px;
	height: clamp(40px, 8vh, 70px);
	/* 반응형 크기 */
	background-color: #fff;
	top: -24px;
	left: 50%;
	transform: translateX(-50%);
}

.wrap_person {
	border-radius: 40px;
	background-color: #f05367;
	width: 100%;
	max-width: 100%;
	/* 최대 너비 제한 */
	padding-top: clamp(12px, 5vw, 64px);
	/* 반응형 여백 */
	box-shadow: 0 clamp(2px, 0.5vh, 4px) #e2213a;
	/* 반응형 그림자 */
}

.wrap_person .title {
	font-family: var(--HDB);
	border-radius: 29.5px;
	background-color: #bb0018;
	color: #fff;
	padding: clamp(2px, 1vw, 4px) clamp(8px, 3vw, 56px);
	/* 반응형 내부 여백 */
	margin: 0 auto;
	text-align: center;
	max-width: fit-content;
	font-size: clamp(18px, 2vw, 32px);
	/* 반응형 폰트 크기 */
}

.wrap_person .sub {
	font-family: var(--HDB);
	color: #fff;
	font-size: clamp(14px, 2vw, 32px);
	/* 반응형 폰트 크기 */
	text-align: center;
	line-height: 1.2;
	margin-top: clamp(12px, 3vh, 24px);
	/* 반응형 여백 */
	padding-bottom: clamp(20px, 4vh, 40px);
	/* 반응형 여백 */
}

.wrap_mikeRoom {
	margin-top: clamp(6px, 2vh, 24px);
	/* 반응형 여백 */
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 40px;
	background-color: #ffb300;
	max-width: 100%;
	/* 최대 너비 제한 */
	padding: clamp(12px, 3vh, 24px) clamp(4px, 3vw, 12px);;
	/* 반응형 패딩 */
	gap: clamp(6px, 9vw, 12px);
	/* 반응형 간격 */
	box-shadow: 0 clamp(2px, 0.5vh, 4px) #0074c9;
	/* 반응형 그림자 */
}

.wrap_mikeRoom img {
	max-width: clamp(28px, 3vw, 74px);
}

.wrap_mikeRoom .title {
	font-family: var(--HDB);
	font-size: clamp(14px, 1.5vw, 32px);
	color: #222;
	min-width: fit-content;
}

.rul_02 .wrap_mikeRoom {
	box-shadow: 0 clamp(2px, 0.5vh, 4px) #fe9c13;
}

.rul_02 .btn_close {
	right: 24px;
	top: 0px;
}

@media screen and (max-width: 1080px) {
/* 
.wrap_memo {
	margin-left: 24px;
}

.wrap_person {
	max-width: 204px;
}

.wrap_person .title {
	font-size: 24px;
	max-width: 120px;
}

.wrap_person .sub {
	font-size: 24px;
}

.wrap_mikeRoom img {
	max-width: 56px;
}

.wrap_mikeRoom .title {
	font-size: 24px;
}

.wrap_mikeRoom {
	gap: 8px;
} */

}
/* 노래방 */
.rul_03 {
	background-image: url('/images/active_bg4.png');
}

.rul_03 .title_page {
	color: #00cb50;
}

.rul_03 .time {
	width: 680px;
	height: 680px;
	border-radius: 50%;
	background-color: #fff;
	border: solid 40px #00cb50;
	display: flex;
	justify-content: center;
	align-items: center;

}

.rul_03 .time_view {
	font-size: 160px;
	font-weight: bold;
	color: #00ab43;
	margin-top: -64px;
}




.rul_03 .container {
	z-index: 1;
	bottom: unset;
}

.rul_03 .wrap_memo {
	z-index: 2;
}

.rul_03 .wrap_mikeRoom {
	background-color: #0093ff;
	padding: 12px 8px;
}

.rul_03 .wrap_mikeRoom .title {
	color: #fff;
}

.rul_03 .btn_answer.type2 {
	max-width: 320px;
	height: 96px;
	bottom: 20%;
}

.rul_03 .btn_answer::after {
	content: "시작";
}


.rul_03 .wrap_contents {
	position: absolute;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
}

.rul_03 .top_con {
	z-index: 3;
}

.sing_01 {
	background-image: url('/images/bg_sing01.png');
}

.singSection .guide_score {
	width: 100%;
	max-width: 1280px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap: clamp(8px, 2vw, 16px);
	/* 간격을 반응형으로 조정 */
	/* margin: clamp(16px, 4vw, 24px) auto 0; */
	margin: 0 auto;
	/* 위쪽 여백을 반응형으로 설정 */
	padding: clamp(10px, 5vw, 20px);
	/* 좌우 여백 */
}

.singSection .wrap_inner {
	width: 100%;
	max-width: 1920px;
	/* 최대 너비 제한 */
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: unset;
	padding: 0 16px;
	/* 모바일 환경에서 좌우 여백 */
}

.singSection .title_score {
	max-width: clamp(300px, 60vw, 872px);
	/* 반응형 크기 */
	margin: 0 auto -6vh;
	padding: clamp(10px, 5vw, 20px);
}

.singSection .wrap_act {
	position: relative;
	display: flex;
	justify-content: center;
	gap: clamp(8px, 2vw, 16px);
	/* 이미지 간격 조정 */
}

.singSection .mid_act {
	max-width: clamp(156px, 24vw, 365px);
	/* 중앙 이미지 반응형 크기 */
	z-index: 2;
}

.singSection .img_act {
	max-width: clamp(150px, 20vw, 346px);
	/* 양옆 이미지 반응형 크기 */
	z-index: 1;
}

.singSection .left_act {
	margin-right: clamp(-100px, -15vw, -200px);
	/* 반응형으로 간격 조정 */
}

.singSection .right_act {
	margin-left: clamp(-100px, -15vw, -200px);
	/* 반응형으로 간격 조정 */
}

.singSection .text_act {
	width: 100%;
	max-width: clamp(120px, 27vw, 494px);
	/* 반응형 크기 */
	margin: 0 auto;
	height: auto;
	/* 비율 유지 */
	display: block;
}

.singSection .wrap_guide {
	display: flex;
	align-items: center;
	gap: clamp(8px, 10vw, 16px);
	/* 각 가이드 간 간격 */
}

.singSection .title_guide {
	position: absolute;
	left: 0;
	/* 반응형으로 조정 */
	border-radius: 52px;
	background-color: #ffd500;
	font-family: var(--HDB);
	font-size: clamp(18px, 2vw, 40px);
	/* 반응형 폰트 크기 */
	color: #222;
	width: clamp(100px, 15vw, 256px);
	/* 반응형 너비 */
	height: clamp(50px, 10vh, 104px);
	/* 반응형 높이 */
	display: flex;
	justify-content: center;
	align-items: center;
}

.singSection .cont_guide {
	position: relative;
	border-radius: 52px;
	background-color: #fff4ae;
	font-family: var(--HDB);
	font-size: clamp(16px, 2vw, 40px);
	color: #222;
	height: clamp(50px, 10vh, 104px);
	display: flex;
	justify-content: start;
	align-items: center;
	width: 100%;
	padding-left: clamp(124px, 18vw, 264px);
	word-break: keep-all;
}

.singSection .guide2 .title_guide {
	background-color: #aae053;
}

.singSection .guide2 .cont_guide {
	background-color: #ecffd2;
}


.wrap_act {
	display: flex;
	justify-content: center;
	position: relative;
}

.img_act {
	opacity: 0;
	transform: scale(0.5);
	transition: all 1s ease;
}

.mid_act {
	opacity: 0;
	transform: scale(0.5);
	animation: appearAndBounce 1s ease-in-out forwards;
}

.text_act {
	opacity: 0;
	transform: scale(0.5);
	/* 작게 시작 */
	animation: appearAndBounce 1s ease-in-out forwards;
	z-index: 2;
	/* 등장 애니메이션 */
}

/* 애니메이션 정의 */
@keyframes appearAndBounce {
	0% {
		opacity: 0;
		transform: scale(0.5);
		/* 처음엔 작고 투명 */
	}

	50% {
		opacity: 1;
		transform: scale(1.1);
		/* 살짝 크게 */
	}

	100% {
		opacity: 1;
		transform: scale(1);
		/* 원래 크기로 */
	}
}
@media screen and (max-width: 768px) {

.singSection .guide_score {
	max-width: 70%;
}

.singSection .cont_guide,
.singSection .title_guide {
	height: clamp(50px, 6vh, 69px);
}

.singSection .cont_guide {
	padding-left: clamp(101px, 17vw, 164px);
}


}

/* 돌림판 */

#modal_p1 {
	padding: 10%;
}

#modal_p1 .modal-content {
	background-color: unset;
	padding: 96px 10% 120px;
}

#modal_p1 .inner_content {
	position: relative;
}

#modal_p1 .main_board {
	max-width: 874px;
	
}

#modal_p1 .btn_board {
	position: absolute;
	max-width: 203px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
	width: 30%;
}

#modal_p1 .hear_board {
	position: absolute;
	max-width: 84px;
	top: -7%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 22;
		width: 11%;
}

#modal_p1 .wrap_side {
	position: absolute;
	right: -88px;
	bottom: 88px;
	display: flex;
	gap: 32px;
	flex-direction: column;
	width: 19%;
}

#modal_p1 .sing_side {
	display: flex;
	max-width: 200px;
}



@keyframes rotate360 {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.main_board {
	transition: transform 0.5s ease;
	/* 부드러운 회전 효과 */
}

.btn_board img {
	transition: transform 0.3s ease;
	/* 버튼 이미지 변경 시 부드러운 효과 */
}


/* 선택한 바닷속  */
.selected_view  {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
}

.selected_view .item_choice {
	 position: absolute;
	 width: 100%;
	left: 0;
	bottom: 0;
}


.timer {
	position: relative;
	width: 200px;
	height: 200px;
}

.circle {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #ddd;
	display: flex;
	justify-content: center;
	align-items: center;
}

.progress {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: conic-gradient(#4caf50 0% 0%);
	clip-path: inset(0 0 0 0);
	animation: countdown 60s linear forwards;
}

@keyframes countdown {
	0% {
		background: conic-gradient(#4caf50 0% 0%);
	}

	100% {
		background: conic-gradient(#4caf50 100% 100%);
	}
}

/* 임시 */

.rul_03 .wrap_tiem_contents {
	width: 100% !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* top: 50%;
	transform: translate(-50%, -50%); */
	position: unset;
	transform: unset;

}

.timer-container {
	position: relative;
	/* 중앙 정렬 */
	text-align: center;
	width: 50%;
	/* 컨테이너 너비 */
	/* max-width: 680px; */
	/* 최대 크기 */
	margin: 0 auto;
	padding: 20px;
}

.progress-ring {
	width: 100%;
	/* 부모 컨테이너 너비에 맞춤 */
	height: auto;
	/* 가로 세로 비율 유지 */
	background-color: #fff;
	border-radius: 50%;
	/* border 포함 계산 */
}

.progress-ring__background {
	fill: transparent;
	stroke: #dcf6b0;
	/* 배경색 */
	stroke-width: 40;
	/* Border와 동일한 크기 */
}

.progress-ring__circle {
	fill: transparent;
	stroke: #2ecc71;
	stroke-width: 40px;
	/* border 크기와 동일하게 설정 */
	stroke-dasharray: 2010.62;
	/* Circumference = 2πr, r=320 */
	/* stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.5s linear; */
	stroke-linecap: round;
	/* 둥근 끝 */
	transform: rotate(-90deg); /* 회전방향 */
	transform-origin: 50% 50%;
	stroke-dasharray: 2011;
		/* 원의 전체 둘레 */
		stroke-dashoffset: 2011;
		/* 초기 위치에서 숨김 */
		transition: stroke-dashoffset 0.5s linear;
		/* 부드러운 애니메이션 */
}

.time-display {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* font-size: var(--font80); */
	font-size: 80px;
	/* 화면 크기에 따라 조정; */
	font-weight: bold;
	color: #00ab43;
}

.control-button {
	position: absolute;
	bottom: 30%;
	/* 원 안에서 아래로 배치 */
	left: 50%;
	transform: translate(-50%, 50%);
	background-color: #fdd835;
	border: none;
	padding: 10px 20px;
	font-size: 1.5rem;
	color: #000;
	border-radius: 25px;
	cursor: pointer;
	box-shadow: 0 4px #c6a700;
	/* width: 100%; */
	width: 50%;
	max-width: 320px;
	height: 96px;
	border-radius: 48px;
	font-size: 40px;
	color: #222;
}

/* "중지" 상태일 때 스타일 */
.control-button.stop-mode {
	background-color: #f05367;
	/* 빨간색 */
	color: #fff;
	/* 흰색 텍스트 */
	box-shadow: 0 4px #e2213a;
	/* 어두운 빨간 그림자 */
}

.sub-button {
	color: black;
	bottom: 5%;
	/* 일시정지 버튼을 아래로 배치 */
	background-color: unset;
	box-shadow: unset;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	bottom: 17%;
	padding: unset;
	height: unset;
	border-radius: unset
}

.sub-button .wrap_pause {
	display: flex;
	gap: 2px;
}

.sub-button .bar_pause {
	width: 8px;
	height: 28px;
	background-color: #aeaeae;
	border-radius: 4px;
}

.sub-button .title {
	font-size: 32px;
	font-weight: 600;
	color: #aeaeae;
}

.hidden {
	display: none;
	/* 버튼 숨기기 */
}



@media screen and (max-width: 1024px) { 
.timer-container {
	max-width: 520px;
}

.control-button {
	max-width: 240px;
	height: 54px;
	font-size: 32px;
}

.main-button {
	bottom: 36%;
}

.sub-button {
	bottom: 23%;
}
.sub-button .title {
	font-size: 24px;
} 

}




/* 임시 // */


/* Swiper 컨테이너 */
.box_swiper {
	width: 100%;
	/* 부모 너비에 맞춤 */
	height: auto;
	/* 높이를 자동 조정 */
	overflow: hidden;
	/* 넘치는 콘텐츠 숨김 */
}

/* Swiper 슬라이드 */
.swiper-slide {
	display: flex;
	/* 이미지 가운데 정렬을 위해 플렉스 사용 */
	justify-content: center;
	align-items: center;
	height: 100%;
	/* 슬라이드 높이를 부모 높이에 맞춤 */
	aspect-ratio: 16 / 9;
		/* 비율 고정 (16:9) */
		overflow: hidden;
		/* 넘치는 이미지를 숨김 */
}

/* 이미지 스타일 */
.swiper-slide img {
	width: 100%;
	/* 이미지 너비를 부모에 맞춤 */
	height: 100%;
	/* 높이는 비율 유지 */
	object-fit: cover;
	/* 이미지 비율을 유지하면서 영역을 채움 */
	max-height: 100vh;
	/* 화면 높이를 넘지 않도록 제한 */
}


@media screen and (max-width:1370px) {
	.userControl .btn_round,
	.userControl .page_numView,
	.userControl .pagination
	 {
		height: 48px;
		font-size: clamp(0px, 1.5vw, 20px);
	}

	.userControl .btn_title {
		font-size: clamp(0px, 1.5vw, 20px);
	}

	.userControl .btn_page {
		height: 100%;
		width: unset;
		
	}

	.userControl .img_home {
		max-width: 32px;
	}

}



.typeSection .container {
	flex-direction: column;
}

.typeSection .wrap_title {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.typeSection .btn_close {
	position: absolute;
	top: 8px;
	right: 36px;
}

.typeSection .wrap_review {
	position: unset;
	transform: unset;
	padding-top: 5%;
	margin: 0 auto;
}





/* 스와이퍼 전체 관리 */
.preClassSwiper1 .fluid-img-wrap::before {
	padding-top: 63%;
}







/* 규칙 페이지 전체 관리  ruleOrginSection*/
/* 공통 스타일 */
.ruleOrginSection {
	width: 100%;
	height: 100vh;
	background-color: #f8f8f8;
	padding-top: unset;
}

.ruleOrginSection .wrap_head {
	height: clamp(50px, 8vh, 80px);
	/* 최소 50px, 최대 80px */
}



.ruleOrginSection .container {
	margin: 0 auto;
	text-align: center;
}

.ruleOrginSection .speech_bubble {
	position: unset;
	width: unset;
}

.ruleOrginSection .btm_container {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	padding-bottom: unset;
	gap: 40%;
}

.ruleOrginSection .btn_close {
	right: 3%;
	top: 3%;
	z-index: 22;
	width: clamp(40px, 8vw, 96px);
	/* 작은 해상도에서 더 잘 줄어들도록 조정 */
	height: clamp(40px, 8vw, 96px);
	/* 같은 비율로 조정 */
	max-width: 100%;
	/* 부모 크기 제한 방지 */
	max-height: 100%;
	/* 부모 크기 제한 방지 */
	cursor: pointer;
}

/* 캐릭터 및 말풍선 배치 */
.ruleOrginSection .wrap_contents {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ruleOrginSection .pageTitle {
	padding: unset;
}

.ruleOrginSection .character_area {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}

/* 캐릭터 이미지 */
.ruleOrginSection .img_character {
	width: clamp(120px, 21vw, 400px);
	/* 최소 120px, 최적 15vw, 최대 400px */
	max-width: 100%;
	/* 부모 컨테이너 크기 제한 */
	z-index: 2;
}

/* 말풍선 스타일 */
/* 말풍선 스타일 */
.ruleOrginSection .speech_bubbles {
	position: absolute;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	gap: 1%;
	/* 말풍선 간 간격 조정 */
	width: 100%;
	left: 0%;
	transform: translate(-50%, 0);
	bottom: 0;
	/* 전체적으로 캐릭터에 더 가깝게 */
}


.ruleOrginSection .speech_bubble {
	opacity: 0;
	width: clamp(120px, 28vw, 520px);
	max-width: 520px;
	transition: transform 0.3s ease;
}
.ruleOrginSection .bubble_1 {
	grid-column: 1;
	grid-row: 2;
	translate: -20vw -5vh;
	/* 위치 조정은 translate 속성으로 */
}

.ruleOrginSection .bubble_2 {
	grid-column: 1;
	grid-row: 1;
	translate: -12vw -8vh;
}

.ruleOrginSection .bubble_3 {
	grid-column: 2;
	grid-row: 1;
	translate: -4vw -8vh;
}

.ruleOrginSection .bubble_4 {
	grid-column: 2;
	grid-row: 2;
	translate: 6vw -5vh;
}

/* 말풍선 애니메이션 */
.ruleOrginSection .bubble_1 {
	animation: showBubble 0.5s ease-in-out 0.5s forwards;
}

.ruleOrginSection .bubble_2 {
	animation: showBubble 0.5s ease-in-out 2.5s forwards;
}

.ruleOrginSection .bubble_3 {
	animation: showBubble 0.5s ease-in-out 4.5s forwards;
}

.ruleOrginSection .bubble_4 {
	animation: showBubble 0.5s ease-in-out 6.5s forwards;
}

/* 애니메이션 키프레임 */
@keyframes showBubble {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}



@media screen and (max-width: 1024px) {

.ruleOrginSection .btm_container {
	/* justify-content: space-around; */
}

}

@media screen and (max-height: 1260px) {

	.ruleOrginSection .pageTitle {
		padding-top: 10%;
	}

	.ruleOrginSection .title_page {
		font-size: clamp(32px, 4vw, 80px);
	}
	    .ruleOrginSection .speech_bubble {
		width: clamp(120px, 20vw, 420px);
	}

		.ruleOrginSection .speech_bubbles {
		left: 36%;
	}

		.ruleOrginSection .img_character {
			max-width: 80%;
		}
}

@media screen and (max-height: 1024px) {

	/* .ruleOrginSection .btm_container {
		justify-content: space-around;
	} */

}

.cmb14 .groupChoice {
	top: 45%; 
	align-items: stretch;
}


.cmb14 .groupChoice .item_choice {
	flex: 1 1 calc(33.33% - 16px);
		/* 3열로 배치, 간격 포함 */
		box-sizing: border-box;
	
}


.cmb14 .groupChoice .item_img {
	max-width: 100%;
	max-height: 146px;
	/* 이미지가 부모 요소를 넘지 않도록 제한 */
	/* height: 280px;
	object-fit: cover; */
}

@media screen and (max-width: 1080px) {

.cmb14 .groupChoice {
	gap: 8px;
} 
.cmb14 .groupChoice .item_choice {
	max-height: 98px;
}

.cmb14 .btn_default {
	right: 24px;
	top: 24px;
	width: 32px;
	height: 32px;
}

}

.cm_22 .groupChoice .item_choice {
	max-height: unset;
	height: 100%;
}


 #modal_p1 .close-btn {
	color: #e4e4e43b;
	z-index: 9999;
	
}



@media (min-width: 1920px) {
	.userControl .btn_home .userControl .img_home {
		width: 100%;
		max-width: clamp(32px, 8vw, 72px);
	}

	.userControl .btn_home,
	.userControl .pagination {
		max-width: fit-content;
		border-radius: 32px;
	}

	.userControl .btn_round,
	.userControl .btn_page {
		max-height: 80px;
	}

	.userControl .page_numView {
		border-radius: 70px;
		max-height: 80px;
		max-width: 10vw;
	}

}


.classDescription .detail_process:first-child .title_sticker {
	top: -24px;
}

@media screen and (max-height: 896px) {

.activeBox .item_active .title_active {
	font-size: clamp(0px, 1.1vw, 18px);
}

.activeBox {
	gap: 4px;
}

}


@media screen and (max-height: 790px) {

.activeBox .item_active {
}

.activeBox .item_active .icon_active {
	width: 22%;
	min-width: 32px;
}

}