/**
 * 슬라이드 1 전용 — 레이아웃·폭·코·딩 강조·바운스 애니메이션.
 * 타이포 크기/줄간격은 hero_typography_system.css (hero-kicker / hero-title / hero-desc).
 */
.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 .title_wrap.hero-slide1-restore {
	--hero-s1-co: #dbdb4c;
	--hero-s1-ding: #ee9e39;
	font-family: "GmarketSans", "Noto Sans KR", sans-serif;
	max-width: min(720px, 58vw);
	width: 54%;
	padding-right: 16px;
	box-sizing: border-box;
	position: relative;
	z-index: 3;
	text-align: left;
}

/* 슬라이드 1 첫 줄만 상단 패딩 (타이포 공통값 외) */
.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 .title_wrap.hero-slide1-restore .hero-kicker.hero-slide1-line1 {
	padding-top: clamp(8px, 1.5vw, 24px) !important;
}

/* 본문(쉽고 재미있는 …) 흰색 */
.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 .title.visual_bounce.hero-slide1-line1 {
	color: #fff !important;
}

/* 2·3행 — 줄 단위 블록 (custom.css .title.lg{display:inline-block} 제거 → 줄 간 빈칸 방지) */
.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 .title_wrap.hero-slide1-restore .title.lg.hero-slide1-subhead {
	display: block !important;
	width: 100%;
	font-family: inherit !important;
	font-weight: 700 !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
}

.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 .title_wrap.hero-slide1-restore .title.lg.hero-slide1-subhead .hero-slide1-lg-line {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.06 !important;
	letter-spacing: inherit !important;
}

.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 .title_wrap.hero-slide1-restore .title.lg.hero-slide1-subhead .hero-slide1-lg-line + .hero-slide1-lg-line {
	margin-top: 0 !important;
}

/* custom.css 의 .title { overflow:hidden } 이 바운스·큰 글자·::before 점을 잘라냄 */
.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 .title_wrap.hero-slide1-restore .title,
.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 .title_wrap.hero-slide1-restore .title.visual_bounce {
	overflow: visible !important;
}

/* ‘코’‘딩’ — 글자색과 위 점을 음절별 동일 색 */
.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 .title.visual_bounce.hero-slide1-line1 .hero-slide1-syl:nth-of-type(1) {
	color: var(--hero-s1-co) !important;
}

.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 .title.visual_bounce.hero-slide1-line1 .hero-slide1-syl:nth-of-type(2) {
	color: var(--hero-s1-ding) !important;
}

.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1.active .title.visual_bounce.hero-slide1-line1 .hero-slide1-syl::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 50% !important;
	width: 7px !important;
	height: 7px !important;
	border-radius: 50% !important;
	transform: translateX(-50%) !important;
	top: -11px !important;
	box-shadow: none;
	animation: bounceDot 1.2s ease-in-out both !important;
}

.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1.active .title.visual_bounce.hero-slide1-line1 .hero-slide1-syl:nth-of-type(1)::before {
	background: var(--hero-s1-co) !important;
	animation-delay: 0.35s !important;
}

.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1.active .title.visual_bounce.hero-slide1-line1 .hero-slide1-syl:nth-of-type(2)::before {
	background: var(--hero-s1-ding) !important;
	animation-delay: 0.45s !important;
}

.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1.active .title.visual_bounce.hero-slide1-line1 .hero-slide1-syl {
	position: relative !important;
	animation: bounce 0.5s forwards !important;
}

.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1.active .title.visual_bounce.hero-slide1-line1 .hero-slide1-syl:nth-of-type(1) {
	animation-delay: 0s !important;
}

.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1.active .title.visual_bounce.hero-slide1-line1 .hero-slide1-syl:nth-of-type(2) {
	animation-delay: 0.12s !important;
}

.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 .title_wrap.hero-slide1-restore .visual_btn {
	clear: both;
	position: relative;
	z-index: 2;
}

.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 .title_wrap.hero-slide1-restore .visual_btn a {
	flex-wrap: nowrap;
}

.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 .title_wrap.hero-slide1-restore .title.lg.hero-slide1-subhead {
	color: #fff !important;
}

/* 오른쪽 일러스트 */
.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 > .img {
	width: 50%;
	max-width: 778px;
	z-index: 1;
}

/*
 * PC/모바일 각각 다른 파일(show_pc / show_m) — img 전체에 display:block 을 주면
 * .show_m{display:none} 보다 우선해 두 장이 세로로 겹쳐 보임
 */
.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 > .img img.show_pc {
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center right;
	display: block;
}

.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 > .img img.show_m {
	display: none !important;
}

@media screen and (max-width: 767px) {
	.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 .title_wrap.hero-slide1-restore {
		width: 100%;
		max-width: none;
		padding-right: 0;
		text-align: center;
	}

	.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 > .img {
		position: relative !important;
		right: auto !important;
		top: auto !important;
		transform: none !important;
		width: 90% !important;
		max-width: 500px !important;
		margin: 30px auto 0 !important;
	}

	.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 > .img img.show_pc {
		display: none !important;
	}

	.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 > .img img.show_m {
		display: block !important;
		width: 100%;
		max-width: 100%;
		height: auto;
		object-fit: contain;
		object-position: center;
	}
}