.pc-only {
	display: block;
}

.m-only {
	display: none;
}

.main_container {
	overflow: hidden;
}

/* body{background: #969a9d;} */
/* .container {background:#99827D;} */

@media screen and (max-width: 1024px) {
	.pc-only {
		display: none;
	}

	.m-only {
		display: block;
	}
}


/***** regist_cycle *****/
.regist_cycle {
	position: absolute;
	top: 16%;
	right: 7%;
	width: 160px;
	height: 160px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	z-index: 100;
}

.circle_svg {
	position: absolute;
	height: 160px;
	width: 160px;
	top: 0;
	left: 0;
	aspect-ratio: 1 / 1;
	animation: rotateText 12s linear infinite;
}

.circle_text {
	font-size: 10px;
	letter-spacing: 3px;
	fill: rgba(255, 255, 255, 0.6);
}

.regist_content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-weight: bold;
	text-align: center;
	width: 123px;
	height: 123px;
	aspect-ratio: 1 / 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: linear-gradient(146deg, #CC9E78 12.51%, #BE7030 49.97%, #CC9E78 87.43%);
}

.regist_content .regist_content_icon {
	font-size: 22px;
}

.regist_content p {
	color: #fff;
	text-align: center;
	font-family: 'SUIT';
	font-size: 16px;
	font-weight: 500;
	line-height: 130%;
}

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

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


.nav-open .regist_cycle {
	opacity: 0;
	transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}


@media screen and (min-width: 2000px) {

	.regist_cycle,
	.circle_svg {
		height: 175px;
		width: 175px;
	}

	.regist_content {
		width: 130px;
		height: 130px;
	}

	.regist_content p {
		font-size: 18px;
	}
}

@media screen and (max-width: 1024px) {
	/* .regist_cycle {
		top: auto;
		bottom: 10%;
		right: auto;
		left: 5%;
		width: 129px;
		height: 129px;
		opacity: 1;
		transition: opacity 0.4s ease;
	} */
}
@media screen and (max-width: 640px) {
	.regist_cycle {
		top: 10%;
		right: 5%;
		width: 110px;
		height: 110px;
	}
	.circle_svg,
	.regist_content {
		width: 110px;
		height: 110px;
	}
	.regist_content {
		width: 85px;
		height: 85px;
	}
	.regist_content .regist_content_icon {
		width: 30%;
	}
	.regist_content .regist_content_icon img {
		width: 100%;
	}
	.regist_content p {font-size: 11px;}
}





/* *** section1 *** */
.section1 {
	overflow: hidden;
}

.section1 .main_bg {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100vh;
	transition: all 1s;
}

.main_bg_swiper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.main_bg_swiper .swiper-slide {
	width: 100%;
	height: 100%;
}

.main_bg_swiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.main_bg_swiper .swiper-slide video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.main_contents_wrap {
	width: 90%;
	height: 80%;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 10;
}

@media screen and (max-width:640px) {
	.main_contents_wrap {
		width: 90%;
		right: 50%;
		transform: translateX(50%);
	}
}

@media screen and (max-width:391px) {
	.main_contents_wrap {
		height: 75%;
	}
}

.main_con_left {
	width: 22%;
	height: 95%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 9999;
}
.main_left_2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: justify;
}

@media screen and (max-width: 1024px) {
	.main_con_left {
		width: 50%;
	}
}
@media screen and (max-width:860px) {
	.main_con_left {
		width: 50%;
	}
}

@media screen and (max-width:640px) {
	.main_con_left {
		width: 75%;
		height: 81%;
		left: 3%;
	}
}

@media screen and (max-width:460px) {
	.main_con_left {
		width: 62%;
	}
	.main_con_left .main_left_1 span {
        font-size: clamp(10px, 6vw, 40px);
    }
	.main_con_left .main_left_2 h2 {
        font-size: clamp(10px, 11vw, 60px);
    }
}
@media screen and (max-width:391px) {
	.main_con_left {
		width: 55%;
		left: 6%;
	}
}

.main_con_left .main_left_1 {
	width: 100%;
	min-width: 100%;
	padding: 0 15%;
	align-self: stretch;
	height: auto;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	clip-path: inset(0 0 100% 0);
	animation: revealBox 0.7s ease forwards;
}

.main_con_left .main_left_1 span {
	color: #FFF;
	font-family: Pretendard;
	font-size: clamp(10px, 1.9vw, 50px);
	font-style: normal;
	font-weight: 300;
}

@keyframes revealBox {
	from {
		clip-path: inset(0 0 100% 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

@media screen and (max-width: 1024px) {
	.main_con_left .main_left_1 span {
		font-size: clamp(10px, 5vw, 40px);
	}
}
@media screen and (max-width: 391px) {
	.main_con_left .main_left_1 span {
		font-size: clamp(10px, 6vw, 40px);
	}
}

.main_con_left .main_left_2 {
	width: 100%;
	min-width: 100%; /* 부모가 align-items: center여도 가로 전체 사용 */
	align-self: stretch;
	height: auto;
	margin-top: 2%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	clip-path: inset(0 0 100% 0);
	animation: revealBox 1.5s forwards 0.5s;
}

/* 글자 단위 span + flex로 양측 맞춤 (text-justify 미지원 환경 대응) */
.main_con_left .main_left_2 h2 {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 0 15%;
	color: #FFF;
	font-family: Pretendard;
	font-size: clamp(10px, 3.9vw, 103px);
	font-style: normal;
	font-weight: 600;
	/* line-height: 120%; */
}
.main_con_left .main_left_2 h2.dot {
	color: #66A8C1;
	padding: 0 20.5%;
	margin-bottom: -8%;
	margin-top: -5%;
}
.main_con_left .main_left_2 h2 b {
	display: flex;
	justify-content: space-between;
	width: 100%;
	color: #fff;
	font-weight: 900;
}
.main_con_left .main_left_2 h2 b.blue{
	color: #66A8C1;
}

.main_con_left .main_left_3 {
	width: 100%;
	height: auto;
	margin-top: 3vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0;
	transform: translateY(5%);
	animation: revealBox1 1s ease forwards 2s;
}

.main_con_left .main_left_3 img {
	/* max-width: 265px; */
	width: 70%;
	padding-left: 3%;
}

.main_con_left .main_left_3 a {
	display: inline-block;
	width: 100%;
	padding: 2% 4%;
	background-color: #66A8C1;
	color: #fff;
	font-size: clamp(10px, 1.8vw, 40px);
	font-weight: 400;
	font-family: 'Pretendard';
	text-decoration: none;
	border-radius: 999px;
	margin-top: 3%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.main_con_left .main_left_3 a p {
	font-family: 'Quattrocento';
	font-weight: 600;
}

.main_con_left .main_left_3 a:hover {
	cursor: auto;
}

@keyframes revealBox1 {
	from {
		opacity: 0;
		transform: translateY(5%);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media screen and (max-width: 1024px) {
	.main_con_left .main_left_2 h2 {
		font-size: clamp(10px, 9vw, 60px);
		line-height: 130%;
	}
	.main_con_left .main_left_3 a {
		font-size: clamp(10px, 5vw, 25px);
	}
}
@media screen and (max-width:640px) {
	.main_con_left .main_left_2 {
		margin-top: 4%;
		display: flex;
		justify-content: center;
	}
	.main_con_left .main_left_2 h2 {
		padding: 0 5%;
		font-size: clamp(10px, 10vw, 60px);
	}

	.main_con_left .main_left_2 h2.dot {
		padding: 0 9%;
		margin-bottom: -5%;
	}

	.main_con_left .main_left_2 img {
		width: 77%;
	}

	.main_con_left .main_left_3 {
		margin-top: 10%;
	}
	.main_con_left .main_left_1 {
		padding: 0 5%;
	}	
}

@media screen and (max-width:480px) {
	.main_con_left .main_left_2 {
		margin-top: 7%;
	}

	.main_con_left .main_left_2 img {
		width: 95%;
	}

	.main_con_left .main_left_3 img {
		width: 100%;
	}

	.main_con_left .main_left_3 a {
		font-size: 5vw;
		margin-top: 4%;
		padding: 3% 4%;
	}
	.main_con_left .main_left_2 h2 {
		font-size: 32px;
	}
	.main_con_left .main_left_2 h2.dot {
		margin-bottom: -10%;
		padding: 0 12%;
	}
}

.main_ori {
	width: 100%;
	color: #fff;
	font-family: 'Pretendard';
	font-size: clamp(11px, 0.98vw, 23px);
	text-align: left;
	margin-top: 3%;
	font-weight: lighter;
	opacity: 0;
	animation: revealBox1 1s ease forwards 3s;
}


@media screen and (max-width:1024px) {
	.main_ori {
		font-size: 1.8vw;
	}
}

@media screen and (max-width:640px) {
	.main_ori {
		font-size: 3vw;
	}
}

@media screen and (max-width:380px) {
	.main_ori {
		font-size: 14px;
		padding-left: 13%;
	}
}

.main_con_right {
	width: 112%;
	height: 64%;
	position: absolute;
	bottom: -1%;
	left: -11.5%;
}

@media screen and (max-width:380px) {
	.main_con_right {
		left: -8%;
	}
}

.main_right_1 {
	width: 100%;
	height: auto;
	position: absolute;
	z-index: 50;
	bottom: -1.3%;
	left: 0;
	transform: translateX(100%);
	animation: main_train 1.8s ease forwards 2.2s;
}

.main_right_1 img {
	width: 100%;
	height: auto;
}

@keyframes main_train {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(0);
	}
}

.main_right_2 {
	width: auto;
	height: 100%;
	position: absolute;
	top: 0;
	right: 8%;
	opacity: 0;
	transform: translateY(100%);
	animation: main_station 1s forwards 3s;
}

.main_right_2 img {
	width: auto;
	height: 100%;
}

@media screen and (max-width:1024px) {
	.main_right_1 {
		transform: translateX(110%);
		width: 150%;
	}

	@keyframes main_train {
		from {
			transform: translateX(110%);
		}

		to {
			transform: translateX(-30%);
		}
	}
}

@media screen and (max-width:640px) {
	.main_right_1 {
		width: 229%;
	}

	.main_right_2 {
		right: 0;
		bottom: -1%;
		top: auto;
		height: 85%;
	}
}

@media screen and (max-width:380px) {
	.main_right_1 {
		width: 222%;
	}
}

@keyframes main_station {
	from {
		opacity: 0;
		transform: translateY(100%);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media screen and (max-width:380px) {
	.main_right_2 {
		height: 70%;
	}
}







/* *** section2 *** */
.sec2_wrap {
	height: 100%;
	overflow: hidden;
	position: relative;
}

.sec2_wrap .txt {
	position: absolute;
	left: 10.5%;
	top: 21%;
	opacity: 0;
	transform: translate(15%, 0);
	transition: 1.2s;
}

.sec2_wrap .txt dl {
	transform: scale(1.1);
	transition: 1s;
	will-change: transform;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.sec2_wrap .txt dl dt {
	font-family: "Quattrocento", serif;
	font-weight: 400;
	font-size: clamp(10px, 3.15vw, 80px);
	line-height: 130%;
	transition: 1s;
	text-align: left;
}

.sec2_wrap .txt dl dt ._m {
	display: none;
}

.sec2_wrap .txt dl dd {
	font-family: 'Pretendard';
	font-weight: 200;
	font-size: clamp(10px, 1.08vw, 28px);
	letter-spacing: -0.4px;
	line-height: 130%;
	margin-top: 0.6771vw;
	transition: 1s;
	text-align: left;
}

.sec2_wrap .txt.bl dl dt,
.sec2_wrap .txt.bl dl dd {
	color: #2E3C47;
}

.sec2_wrap .txt.co dl dt,
.sec2_wrap .txt.co dl dd {
	color: #fff;
}

.sec2_wrap .img {
	height: 100%;
	position: relative;
	overflow: hidden;
	transition: 1.4s;
}

.sec2_wrap .img::after {
	content: "";
	position: absolute;
	left: 0;
	top: 49%;
	width: 100%;
	height: 40%;
	background-color: #fff;
	transform-origin: 0 0;
	transition: 1.4s;
}

.sec2_wrap .img .box {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	clip-path: inset(50% 0 0 0);
	transition: 1s;
}

.sec2_wrap .img .bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000;
	transition: 1.4s;
}

.sec2_wrap .img .bg span {
	display: block;
	height: 100%;
	background: url('https://bucket-apt.s3.dualstack.ap-northeast-2.amazonaws.com/2025/hanulche-eg-teaser/resources/img/main/sec2_wrap_bg.jpg') no-repeat center / cover;
	/* background: url('/resources/img/main/sec2_wrap_bg.jpg') no-repeat center / cover; */
	opacity: 1;
	transition: 1s;
}

body:not(.fp-viewing-0) .sec2_wrap .txt {
	opacity: 1;
	transform: none;
	transition-delay: 0.3s;
}

body:not(.fp-viewing-0) .sec2_wrap .txt dl {
	transform: none;
	transition-delay: 1.5s;
}

body:not(.fp-viewing-0) .sec2_wrap .img::after {
	transform: scaleY(0);
	transition-delay: 0.2s;
}
body.fp-viewing-0 .sec2_wrap .img::after {
	transition-delay: 0.5s;
}

body:not(.fp-viewing-0) .sec2_wrap .img .box {
	clip-path: inset(0% 0 0 0);
	transition-delay: 1.5s;
}

body:not(.fp-viewing-0) .sec2_wrap .img .bg {
	transform: scale(1.1);
	transition-delay: 1.5s;
}

body:not(.fp-viewing-0) .sec2_wrap .img .bg span {
	opacity: 1;
	transition-delay: 1.8s;
}

body:not(.fp-viewing-0):not(.fp-viewing-1) .sec2_wrap .txt dl dt,
body:not(.fp-viewing-0):not(.fp-viewing-1) .sec2_wrap .txt dl dd {
	opacity: 0;
	transform: translate(0, 15dvh);
}

body:not(.fp-viewing-0):not(.fp-viewing-1) .sec2_wrap .img::before {
	opacity: 1;
}


@media screen and (max-width:1024px) {
	.sec2_wrap .img .bg span {
		background-image: url('https://bucket-apt.s3.dualstack.ap-northeast-2.amazonaws.com/2025/hanulche-eg-teaser/resources/img/main/sec2_wrap_bg_m.jpg');
		/* background-image: url('/resources/img/main/sec2_wrap_bg_m.jpg'); */
		background-position: left 25% center;
		opacity: 1;
	}
	.sec2_wrap .txt dl dt {
		font-size: clamp(10px, 8vw, 55px);
	}
	.sec2_wrap .txt dl dd {
		font-size: clamp(10px, 4.2vw, 20px);
		margin-top: 3%;
	}
}





/* *** section3 *** */
.sec3_wrap .swiper-slide .bg {
	overflow: hidden;
	transform: scale(1.2);
	transition: 1.5s;
}

.sec3_wrap .sec3_ori {
	position: absolute;
	bottom: 3%;
	right: 2%;
	z-index: 999;
	color: #D0D0D0;
	font-family: Pretendard;
	font-size: 14px;
	font-weight: 200;
	line-height: 130%;
}
@media screen and (min-width: 2000px) {
	.sec3_wrap .sec3_ori {
		font-size: 18px;
	}
}

.sec3_wrap .swiper-slide-active .bg {
	overflow: hidden;
	transform: scale(1);
	transition: 1.5s;
}

.sec3_wrap .bg {
	width: 100%;
	height: 100%;
	position: absolute;
}

.sd1 .bg {
	background: url("https://bucket-apt.s3.dualstack.ap-northeast-2.amazonaws.com/2025/hanulche-eg-teaser/resources/img/main/sec3_bg_1.jpg") center center/cover no-repeat;
	/* background: url("/resources/img/main/sec3_bg_1.jpg") center center/cover no-repeat; */
}

.sd2 .bg {
	background: url("https://bucket-apt.s3.dualstack.ap-northeast-2.amazonaws.com/2025/hanulche-eg-teaser/resources/img/main/sec3_bg_2.jpg") center center/cover no-repeat;
	/* background: url("/resources/img/main/sec3_bg_2.jpg") center center/cover no-repeat; */
}

.sd3 .bg {
	background: url("https://bucket-apt.s3.dualstack.ap-northeast-2.amazonaws.com/2025/hanulche-eg-teaser/resources/img/main/sec3_bg_3.jpg") center center/cover no-repeat;
	/* background: url("/resources/img/main/sec3_bg_3.jpg") center center/cover no-repeat; */
}

.sd4 .bg {
	background: url("https://bucket-apt.s3.dualstack.ap-northeast-2.amazonaws.com/2025/hanulche-eg-teaser/resources/img/main/sec3_bg_4.jpg") center center/cover no-repeat;
	/* background: url("/resources/img/main/sec3_bg_4.jpg") center center/cover no-repeat; */
}

.sd5 .bg {
	background: url("https://bucket-apt.s3.dualstack.ap-northeast-2.amazonaws.com/2025/hanulche-eg-teaser/resources/img/main/sec3_bg_5.jpg") center center/cover no-repeat;
	/* background: url("/resources/img/main/sec3_bg_5.jpg") center center/cover no-repeat; */
}

.sd6 .bg {
	background: url("https://bucket-apt.s3.dualstack.ap-northeast-2.amazonaws.com/2025/hanulche-eg-teaser/resources/img/main/sec3_bg_6.jpg") center center/cover no-repeat;
	/* background: url("/resources/img/main/sec3_bg_6.jpg") center center/cover no-repeat; */
}

.sd7 .bg {
	background: url("https://bucket-apt.s3.dualstack.ap-northeast-2.amazonaws.com/2025/hanulche-eg-teaser/resources/img/main/sec3_bg_7.jpg") center center/cover no-repeat;
	/* background: url("/resources/img/main/sec3_bg_7.jpg") center center/cover no-repeat; */
}

.sec3_wrap .txt {
	position: absolute;
	bottom: 19%;
	left: 11%;
	/* background-color: rgba(175, 140, 175, 0.336); */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: #FFF;
	opacity: 0;
	transition: 1.5s;
	transform: translateX(20%);
}
.active .sec3_wrap .swiper-slide-active .txt {
	opacity: 1;
	transform: translateX(0);
	transition: 1.5s;
	transition-delay: 0.8s;
}

.sec3_wrap .txt .sign {
	position: relative;
}
.sec3_wrap .sd1 .txt .sign {
	left: -20%;
	transform: translateY(22%);
}
.sec3_wrap .sd2 .txt .sign {
	left: -16%;
    transform: translateY(10%);
}
.sec3_wrap .sd3 .txt .sign {
    left: -21%;
    transform: translateY(-5%);
}
.sec3_wrap .sd4 .txt .sign {
    left: -12%;
    transform: translateY(17%);
}
.sec3_wrap .sd5 .txt .sign {
    left: -13%;
    transform: translateY(13%);
}
.sec3_wrap .sd6 .txt .sign {
    left: -13%;
    transform: translateY(13%);
}
.sec3_wrap .sd7 .txt .sign {
    left: -13%;
    transform: translateY(13%);
}

.sec3_wrap .txt .t1 p {
	font-family: Quattrocento;
	/* font-size: 16px; */
	font-size: clamp(10px, 0.85vw, 24px);
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 2px;
}

.sec3_wrap .txt .t2 p {
	font-family: Pretendard;
	/* font-size: 40px; */
	font-size: clamp(10px, 2.1vw, 55px);
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	margin-top: 20px;
}

.sec3_wrap .txt .t3 p {
	font-family: Pretendard;
	/* font-size: 20px; */
	font-size: clamp(10px, 1.08vw, 27px);
	font-style: normal;
	font-weight: 300;
	line-height: 130%;
	letter-spacing: -0.4px;
	text-align: left;
	margin-top: 20px;
}

.sec3_wrap .txt .t3 p span {
	/* font-size: 16px; */
	font-size: clamp(10px, 0.85vw, 22px);
	font-weight: 300;
}

@media screen and (max-width:1024px) {
	.sd1 .bg {
		background: url("/resources/img/main/sec3_bg_m_1.jpg") center center/cover no-repeat;
	}
	
	.sd2 .bg {
		background: url("/resources/img/main/sec3_bg_m_2.jpg") center center/cover no-repeat;
	}
	
	.sd3 .bg {
		background: url("/resources/img/main/sec3_bg_m_3.jpg") center center/cover no-repeat;
	}
	
	.sd4 .bg {
		background: url("/resources/img/main/sec3_bg_m_4.jpg") center center/cover no-repeat;
	}
	
	.sd5 .bg {
		background: url("/resources/img/main/sec3_bg_m_5.jpg") center center/cover no-repeat;
	}

	.sd6 .bg {
		background: url("/resources/img/main/sec3_bg_m_6.jpg") center center/cover no-repeat;
	}

	.sd7 .bg {
		background: url("/resources/img/main/sec3_bg_m_7.jpg") center center/cover no-repeat;
	}
	.sec3_wrap .txt .t1 p {
		font-size: 15px;
	}
	.sec3_wrap .txt .t2 p {
		font-size: 23px;
		text-align: left;
	}
	.sec3_wrap .txt .t3 p {
		font-size: 15px;
	}
	.sec3_wrap .txt .t3 p span {
		font-size: 12px;
	}
	.sec3_wrap .swiper-slide .txt .sign {
		left: -2%;
		transform: translateY(0);
	}
}
@media screen and (max-width:600px) {
	.sec3_wrap .sec3_ori {
		padding: 0 5% 0 20%;
		text-align: left;
		word-break: keep-all;
		text-indent: -10px;
		margin-left: 10px;
	}
}
@media screen and (max-width:391px) {
	.active .sec3_wrap .swiper-slide-active .txt {
		word-break: keep-all;
		width: 80%;
	}
	.sec3_wrap .txt .t1 p {
		font-size: 20px;
	}
	.sec3_wrap .txt .t2 p {
		font-size: 30px;
	}
	.sec3_wrap .txt .t3 p {
		font-size: 20px;
	}
	.sec3_wrap .txt .t3 p span {
		font-size: 16px;
	}
}


/* *** section4 *** */
.section4 .sec4_wrap {
	width: 100%;
	height: 100vh;
	display: flex;
}

.sec4_left {
	width: 50%;
	height: 100%;
}

.sec4_left img {
	width: 100%;
}

.sec4_right {
	width: 50%;
	height: 75%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: auto 0;
}

.sec4_right_top {
	width: 90%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 5% 5% 0;	
	opacity: 0;
	transform: translateX(-20%);
	transition-delay: 1s
}
.active .sec4_right_top {
	opacity: 1;
	transform: translateX(0);
	transition: all 0.8s;
}

.sec4_right_top p {
	color: #2E3C47;
	font-family: Pretendard;
	/* font-size: 30px; */
	font-size: clamp(10px,1.6vw,40px);
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-align: left;
}

.sec4_right_top h2 {
	color: #2E3C47;
	font-family: Pretendard;
	/* font-size: 56px; */
	font-size: clamp(10px,2.9vw,75px);
	font-style: normal;
	font-weight: 600;
	line-height: 110%;
	/* 61.6px */
	letter-spacing: -1.12px;
	margin-top: 12px;
	text-align: left;
}

.sec4_right_top h2 span {
	color: #66A8C1;
	font-size: clamp(10px,2.9vw,75px);
}

.sec4_right_top h2 b {
	font-weight: 900;
}
.sec4_right_bottom {
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0 10%;
}

.sec4_right_bottom .sec4_rb_1 {
	width: 50%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	overflow: hidden;
}
.sec4_right_bottom .sec4_rb_1 img {
	transform: translateY(101%);
	opacity: 0;
	width: 32%;
	transition-delay: 1s;
}
.active .sec4_right_bottom .sec4_rb_1 img {
	transform: translateY(0);
	opacity: 1;
	transition: all 0.5s;
}
.active .sec4_right_bottom .sec4_rb_1 .sec4_rb_img_1 {
	transition-delay: 0.9s;
}
.active .sec4_right_bottom .sec4_rb_1 .sec4_rb_img_2 {
	transition-delay: 0.7s;
}
.active .sec4_right_bottom .sec4_rb_1 .sec4_rb_img_3 {
	transition-delay: 0.5s;
}

.sec4_right_bottom .sec4_rb_2 {
	width: 50%;
	margin-top: 118px;
	opacity: 0;
	transform: translateX(20%);
	transition-delay: 1s
}
.active .sec4_right_bottom .sec4_rb_2 {
	opacity: 1;
	transform: translateX(0);
	transition: all 0.8s;
	transition-delay: 0.5s
}

.sec4_right_bottom .sec4_rb_2 ul li {
	display: flex;
	align-items: flex-end;
	flex-direction: column;
	margin-top: 31px;
}

.sec4_right_bottom .sec4_rb_2 ul li h3 {
	color: #00173E;
	text-align: right;
	font-family: Pretendard;
	/* font-size: 18px; */
	font-size: clamp(10px,0.95vw,30px);
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
	/* 27px */
	letter-spacing: -0.36px;
	position: relative;
}
.sec4_right_bottom .sec4_rb_2 ul li h3 span {
	color: #66A8C1;
}
.sec4_right_bottom .sec4_rb_2 ul li p {
	color: #414141;
	font-family: Pretendard;
	/* font-size: 14px; */
	font-size: clamp(10px,0.75vw,18px);
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	letter-spacing: -0.28px;
	text-align: right;
}

.sec4_right_bottom .sec4_rb_2 ul li p span {
	/* font-size: 12px; */
	font-size: clamp(10px,0.65vw,15px);
}

.sec4_right_bottom .sec4_rb_2 ul li h3::after {
	content: "";
	width: 4.2px;
	height: 11.7px;
	background: url('/resources/img/main/sec4_ico.png') no-repeat center / cover;
	position: absolute;
	top: 50%;
	right: -10%;
	transform: translateY(-50%);
}

@media screen and (max-width:1024px) {
	.section4 .sec4_wrap {
		display: flex;
		flex-direction: column;
	}
	.sec4_left {
		width: 100%;
		height: 40%;
		overflow: hidden;
	}
	
	.sec4_left img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}
	.sec4_right {
		width: 100%;
		height: 60%;
		padding: 4% 5%;
	}
	.sec4_right_bottom {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.sec4_right_bottom .sec4_rb_1 {
		width: auto;
		height: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 2%;
		overflow: hidden;
	}
	.sec4_right_bottom .sec4_rb_1 img {
		height: 100%;
	}
	.sec4_right_bottom .sec4_rb_2 {
		width: auto;
		height: 80%;
		margin-top: 0;
	}
	.sec4_right_bottom .sec4_rb_2 ul {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.sec4_right_bottom .sec4_rb_2 ul li {
		align-items: center;
		margin-top: 10%;
	}
	.sec4_right_bottom .sec4_rb_2 ul li h3 {
		text-align: center;
		font-size: clamp(10px,4vw,18px);
	}
	.sec4_right_bottom .sec4_rb_2 ul li p {
		font-size: clamp(10px,3vw,13px);
		text-align: center;
	}
	.sec4_right_bottom .sec4_rb_2 ul li p span {
		font-size: clamp(10px,2.5vw,11px);
	}
	.sec4_right_bottom .sec4_rb_2 ul li h3::after {
		display: none;
	}
}
@media screen and (max-width:391px) {
	.sec4_right {
        padding: 7% 5%;
	}
	.sec4_right_bottom .sec4_rb_1 {
        height: 25%;
	}
	.sec4_right_bottom .sec4_rb_2 {
        height: 75%;
	}
	.sec4_right_bottom .sec4_rb_2 ul li {
        margin-top: 5%;
	}
	.sec4_right_bottom .sec4_rb_2 ul li:first-child {
        margin-top: 10%;
	}
}





/* *** section5 *** */
.section5 {
	width: 100%;
	background-image: url("https://bucket-apt.s3.dualstack.ap-northeast-2.amazonaws.com/2025/hanulche-eg-teaser/resources/img/main/sec5_bg.jpg");
	/* background-image: url("/resources/img/main/sec5_bg.jpg"); */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.sec5_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
}
.sec5_tit h2 {
	color: #2E3C47;
	text-align: center;
	font-family: Quattrocento;
	font-size: clamp(10px, 3.65vw, 95px);
	font-style: normal;
	font-weight: 400;
	line-height: 130%;
	letter-spacing: -1.4px;
}
.sec5_map_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 55%;
	margin-top: 3%;
	gap: 4%;
}

.sec5_map_wrap .sec5_map_con {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 50%;
}

.sec5_map_wrap .sec5_map_con .img_box {
	width: 100%;
	overflow: hidden;
	margin-bottom: 4%;
}

.sec5_map_wrap .sec5_map_con .img_box img {
	width: 100%;
}

.sec5_map_wrap .sec5_map_con .con_wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	justify-content: center;
}

.sec5_map_wrap .sec5_map_con .con_wrap .txt_box {
	margin-bottom: 7%;
	width: 100%;
	text-align: left;
	display: flex;
	justify-content: center;
}

.sec5_map_wrap .sec5_map_con .con_wrap .txt_box h3 {
	color: #26323B;
	font-family: 'Pretendard';
	font-size: clamp(10px, 1.05vw, 30px);
	font-weight: 700;
	line-height: 27px;
	margin-right: 10%;
}


.sec5_map_wrap .sec5_map_con .con_wrap .txt_box p {
	color: #6C6C6C;
	font-family: 'Pretendard';
	font-size: clamp(10px, 1.05vw, 30px);
	font-weight: 400;
	line-height: 27px;
	position: relative;
}
.sec5_map_wrap .sec5_map_con .con_wrap .txt_box p::before {
	content: "";
	width: 2px;
	height: 17px;
	background-color: #8D867D;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -11%;
}
.sec5_map_wrap .sec5_map_con .btn_box {
	display: flex;
	align-items: center;
	gap: 7%;
	width: 100%;
    justify-content: center;
}

.sec5_map_wrap .sec5_map_con .btn_box a {
	display: flex;
	align-items: center;
	gap: 10%;
	width: 25%;
}

.sec5_map_wrap .sec5_map_con .btn_box a span {
	color: #2C3D47;
	font-family: 'Pretendard';
	font-size: clamp(10px, 0.85vw, 25px);
	font-weight: 400;
	line-height: normal;
}

.sec5_balloon {
	position: absolute;
	width: 12%;
	top: 3%;
	right: 28%;
	animation: balloonSway 2s ease-in-out infinite;
}
.sec5_balloon img {
	width: 100%;
}

@keyframes balloonSway {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(-20px); }
}



@media screen and (max-width:1024px) {
	.section5 {
		background-color: #FFF;
		background-image: none;
	}
	.sec5_map_wrap {
		width: 70%;
		margin-top: 4%;
		gap: 0;
		flex-direction: column;
	}
	.sec5_map_wrap .sec5_map_con .img_box {
		margin-bottom: 0;
	}
	.sec5_map_wrap .sec5_map_con .con_wrap .txt_box {
		margin-bottom: 2%;
	}
	.sec5_map_wrap .sec5_map_con:last-child {
		margin-top: 5%;
	}
	.sec5_map_wrap .sec5_map_con .con_wrap .txt_box h3 {
		font-size: clamp(10px, 5vw, 15px);
		line-height: normal;
		margin-right: 10%;
	}
	.sec5_map_wrap .sec5_map_con .con_wrap .txt_box p {
		font-size: clamp(10px, 5vw, 15px);
		line-height: normal;
	}
	.sec5_map_wrap .sec5_map_con .btn_box a img {
		width: 22px;
	}
	.sec5_balloon {
		position: absolute;
		width: 12%;
		left: 50%;
		top: 7%;
		animation: balloonSway 2s ease-in-out infinite;
	}
	
	@keyframes balloonSway {
		0%, 100% {
			transform: translate(-50%, 0);
		}
		50% {
			transform: translate(-50%, -10px);
		}
	}
}
@media screen and (max-width:900px) {
	.sec5_map_wrap {
        width: 95%;
	}
	.sec5_balloon {
        width: 13%;
	}
}
@media screen and (max-width:700px) {
	.sec5_map_wrap {
        width: 100%;
	}
    .sec5_balloon {
        width: 22%;
        top: 8%;
	}
	.sec5_map_wrap .sec5_map_con {
		width: 65%;
	}
	.sec5_tit h2 {
		font-size: clamp(10px, 16vw, 50px);
	}
	.sec5_tit {
		margin-bottom: 4%;
	}
}

@media screen and (max-width:500px) {
    .sec5_balloon {
		width: 40%;
        top: 10%;
	}
	.sec5_map_wrap .sec5_map_con {
		width: 70%;
	}
	.sec5_tit {
		margin-bottom: 10%;
	}
}
@media screen and (max-width:391px) {
    .sec5_balloon {
		width: 40%;
        top: 8%;
	}
	.sec5_map_wrap .sec5_map_con {
		width: 90%;
	}
	.sec5_map_wrap .sec5_map_con:last-child {
        margin-top: 10%;
    }
	.sec5_map_wrap .sec5_map_con .con_wrap .txt_box h3 {
        width: 16%;
		margin-right: 5%;
		font-size: 4vw;
	}
	.sec5_map_wrap .sec5_map_con .con_wrap .txt_box p {
        font-size: 3.5vw;
        width: 62%;
	}
	.sec5_map_wrap .sec5_map_con .btn_box {
		margin-top: 5%;
	}
	.sec5_map_wrap .sec5_map_con .btn_box a span {
		font-size: 3vw;
	}
	.sec5_map_wrap .sec5_map_con .btn_box a {
		width: 35%;
	}
	.sec5_map_wrap .sec5_map_con:first-child .con_wrap .txt_box p::before {
		left: -5%;
	}
	.sec5_tit h2 {
        font-size: 10vw;
    }
}

@media screen and (max-height:700px) {
	.sec5_map_wrap .sec5_map_con {
		width: 60%;
	}
	.sec5_map_wrap .sec5_map_con .con_wrap .txt_box h3 {
        width: 20%;
        font-size: 3.3vw;
	}
	.sec5_map_wrap .sec5_map_con .con_wrap .txt_box p {
        font-size: 3.3vw;
    }
	.sec5_map_wrap .sec5_map_con .btn_box a span {
        font-size: 2.5vw;
    }
}