@charset "utf-8";

/* 이벤트용 폰트: 최대 4개까지만 */
@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Pretendard/Pretendard-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Pretendard/Pretendard-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Pretendard/Pretendard-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Paperlogy/Paperlogy-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Paperlogy/Paperlogy-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Paperlogy/Paperlogy-Bold.woff2') format('woff2');
}

/* 
공통 요소 
*/
:root {
	--text-brand: #4169E1;
	--text-primary: #0B0D11;
	--text-secondary: #394046;
	--text-tertiary: #6A747C;

	--point-font: 'Paperlogy', 'Pretendard', sans-serif;
	--basic-font: 'Pretendard', sans-serif;

	--title-stroke: 9px;

	--font-title-large: 60px;
	--font-title-medium: 48px;
	--font-title-small: 24px;

	--font-head-large: 28px;
	--font-head-medium: 22px;

	--font-size-large: 20px;
	--font-size-basic: 18px;
	--font-size-small: 16px;

	--lineHeight: 1.4;
	--lineHeight-p: 1.84;

	--radius-1: 60px;
	--radius-2: 48px;
	--radius-3: 36px;
	--radius-4: 24px;
	--radius-5: 20px;

	--space-side: 40px;
	--sec-top-padding: 60px;
	--sec-bottom-padding: 80px;
	--sec-large-padding: 120px;
	--badge-padding: 8px 20px;
	--spacing-6 : 24px;
	--spacing-7 : 32px;
	--spacing-8 : 40px;
	--spacing-9 : 48px;
	--spacing-10 : 60px;

	--title-gap: var(--spacing-7);
	--content-top-margin: 60px;
}
@media (max-width: 1279px) {
  :root {
		--title-stroke: 8px;

		--font-title-large: 48px;
		--font-title-medium: 32px;
		--font-title-small: 22px;
	
		--font-head-large: 24px;
		--font-head-medium: 20px;
	
		--font-size-large: 20px;
		--font-size-basic: 16px;
		--font-size-small: 15px;
	
		--radius-1: 48px;
		--radius-2: 36px;
		--radius-3: 28px;
		--radius-4: 22px;
		--radius-5: 16px;

		--space-side: 32px;
		--sec-top-padding: 40px;
		--sec-bottom-padding: 60px;
		--sec-large-padding: 80px;
		--badge-padding: 6px 16px;
		--spacing-6 : 20px;
		--spacing-7 : 24px;
		--spacing-8 : 32px;
		--spacing-9 : 38px;
		--spacing-10 : 52px;

		--title-gap: var(--spacing-7);
		--content-top-margin: 48px;
	}
}
@media (max-width: 767px) {
  :root {
		--title-stroke: 6px;

		--font-title-large: 28px;
		--font-title-medium: 24px;
		--font-title-small: 20px;
	
		--font-head-large: 20px;
		--font-head-medium: 18px;
	
		--font-size-large: 18px;
		--font-size-basic: 16px;
		--font-size-small: 14px;
	
		--radius-1: 24px;
		--radius-2: 24px;
		--radius-3: 20px;
		--radius-4: 16px;
		--radius-5: 12px;

		--space-side: 20px;
		--sec-top-padding: 32px;
		--sec-bottom-padding: 48px;
		--sec-large-padding: 64px;
		--badge-padding: 4px 12px;
		--spacing-6 : 16px;
		--spacing-7 : 20px;
		--spacing-8 : 24px;
		--spacing-9 : 32px;
		--spacing-10 : 36px;

		--title-gap: var(--spacing-7);
		--content-top-margin: 36px;
	}
}


img, svg {
	max-width: 100%;
	vertical-align: middle;
}
p { line-height: inherit; }
.White { color: #fff !important; }
.Brand { color: var(--text-brand) !important; }
.Secondary { color: var(--text-secondary) !important; }
.relative {position: relative;}
body.is-lock { overflow: hidden; }/* 스크롤 락 */
#root {padding-bottom: 0;}
#logo{text-align: center;}
#logo img {width: 325px; height: 72px;}

.starlearn-wrapper {
	position: relative;
	max-width: 1920px;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
	font-family: var(--basic-font);
	font-size: var(--font-size-basic);
	color: var(--text-primary);
	letter-spacing: normal;
	line-height: 1.4;
	background-color: #6d9bfb;
}
.starlearn-wrapper .__container {
	max-width: 1360px;
	margin: 0 auto;
	padding-left: var(--space-side);
	padding-right: var(--space-side);
}
section[class^="sec-"] {
	padding-top: var(--sec-top-padding);
	padding-bottom: var(--sec-bottom-padding);
}
section[class^="sec-"] .__content-box {
	margin-top: var(--content-top-margin);
}
.__blue-bg {
	background-image: url(../images/bg-pattern-blue.jpg);
	background-color: #73a1ff;
}
.__blue02-bg {
	background-image: url(../images/bg-blue02.jpg);
	background-position: top center;
	background-color: #4975f2;
}
.white-box {
	padding-top: var(--sec-top-padding);
	padding-bottom: var(--sec-bottom-padding);
	background-color: #fff;
	border-radius: var(--radius-1);
}

/* 타이틀 */
.sec-title-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--title-gap);
}
.sec-title {
	position: relative;
	display: block;
	font-family: var(--point-font);
	font-size: var(--font-title-large);
	font-weight: 700;
	letter-spacing: 0.065em;
	line-height: var(--lineHeight);
}
.sec-title .main-layer {
	position: relative;
	color: #fff;
	z-index: 2;
}
.sec-title .stroke-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #618BDE;
	-webkit-text-stroke: var(--title-stroke) rgba(11, 13, 17, 0.12);
	text-shadow: 4px 4px var(--title-stroke) var(--text-brand);
	white-space: 	nowrap;
  z-index: 1;
}
.sec-sub-title {
	display: block;
	font-size: var(--font-title-small);
	font-weight: 700;
	color: var(--text-brand);
	line-height: var(--lineHeight-p);
}
.sec-sub-title + .sec-title {margin-top: 8px; } 
.sec-info {
	display: block;
	font-size: var(--font-size-large);
	font-weight: 400;
	line-height: 1.8;
}
.last-sub-wrap {margin-top: var(--spacing-6)}
.sub-info-txt {
	color: var(--text-tertiary);
	font-size: var(--font-size-basic);
}

/* 뱃지 */
.badge {
	display: inline-block;
	padding: var(--badge-padding);
	border-width: 2px;
	border-style: solid;
	border-radius: 50rem;
	font-size: var(--font-size-large);
	font-weight: 700;
}
.badge.primary {
	border-color: var(--text-brand);
	color: var(--text-brand);
}
.badge.tertiary {
	border-color: #8C98A1;
	color: var(--text-tertiary);
}
.badge.white {
	border-color: #fff;
	color: #fff;
}

#header {position: absolute;transition: top ease-in-out .25s, background-color ease-in-out .25s; } 
#header.is-close { position: fixed;top: -11rem; } 
#header.is-open { position: fixed; top: 0; }

@media (max-width: 1279px) {
	#logo img {width: auto; height: 64px;}

	.__blue02-bg {
		background-image: url(../images/bg-blue02-t.jpg);
	}
	.sec-sub-title + .sec-title { margin-top: 6px; }
}
@media (max-width: 767px) {
	#logo img {width: auto !important; height: 34px !important; max-height: 34px !important;}
	#header > .btn-consult {right: 4rem;}

	.__blue02-bg {
		background-image: url(../images/bg-blue02-m.jpg);
	}
	.sub-info-txt {font-size: var(--font-size-small);}
}

.tbl {display: none;}
.pc.tbl {display: block;}
.mo {display: none;}
@media (max-width: 1279px) {
	.pc {display: none;}
	.tbl {display: block;}
	.pc.tbl {display: block;}
}
@media (max-width: 767px) {
	.tbl {display: none;}
	.pc.tbl {display: none;}
	.mo {display: block;}
}

/* 
	메인 비주얼 
*/
.main-visual {height: calc(100svh - 11rem);min-height: 840px;padding: 0 0 var(--space-side); } 
.main-visual .main-center {width: 100%;height: 100%;max-width: 1600px;margin: 0 auto;background: url(../images/main-visual.png) no-repeat center / contain; } 
@media (max-width: 1279px){
	.main-visual {max-height: 1200px;min-height: 600px; padding: var(--space-side) } 
}
@media (max-width: 767px){
	.main-visual {height: auto;min-height: auto;max-height: none;aspect-ratio: 6 / 7; } 
}

/* 
	섹션. 
	스크롤 스티키 애니메이션 
*/
section.sec-scroll-animation {padding-top: 150px;padding-bottom: 120px;background-image: url(../images/bg-pattern-white.jpg);overflow: hidden; } 
/* 텍스트 애니메이션 */
.sec-scroll-animation .intro-txt {display: inline-block;position: relative;margin-bottom: 120px; } 
.intro-txt .__acc {position: absolute;opacity: 0;background-size: contain;background-position: center;background-repeat: no-repeat;transform: translateX(-50%);transition: 0.4s ease;z-index: 1; } 
.intro-txt .__acc.__acc01 {top: 6.97%;left: 50%;width: 123.47%;height: 4.60%;background-image: url(../images/ani-line.svg); } 
.intro-txt .__acc.__acc02 {top: 10.3%;left: 46%;width: 47.43%;height: 20.27%;background-image: url(../images/ani-circle01.svg); } 
.intro-txt .__acc.__acc03 {top: 26.37%;left: 45%;width: 45.48%;height: 18.66%;background-image: url(../images/ani-circle02.svg); } 
.intro-txt .__acc.is-active {opacity: 1; } 

/* 스티키(학생) 애니메이션 */
.sticky-ani {height: 100vh; } 
.sticky-ani .stage {position: sticky;top: 0;height:100vh;overflow: hidden;will-change: scroll-position;background-image: url(../images/bg-pattern-white.jpg); } 
/* pc에서 헤더 고정일때 사용
.sticky-ani {height: 100vh;padding-top: 11rem; } 
.sticky-ani .stage {position: sticky;top: 0;height: calc(100vh - 11rem);overflow: hidden;will-change: scroll-position;background-image: url(../images/bg-pattern-white.jpg); }  */
.sticky-ani .scene { opacity: 0;position: absolute;width: 100%;top: 50%;transform: translateY(-50%);display: flex;flex-direction: column;align-items: center;pointer-events: none; } 
.scene:first-child { opacity: 1; pointer-events: auto; } 
.sticky-ani .scene.is-active { opacity: 1; pointer-events: auto; } 
.sticky-ani .scene .txt-02 {font-family: var(--point-font);font-size: 48px;font-weight: 700;letter-spacing: 4px; } 
.sticky-ani .scene .txt-02 strong {color: var(--text-brand);font-size: var(--font-title-large);font-weight: 700;letter-spacing: 2px; } 
.sticky-ani .scene .img-student {position: relative;max-width: 800px;width: 90vw; } 
.ani-bubble01,
.ani-bubble02 { opacity: 0; transform: translateY(10px); } 
.img-student .ani-bubble01 {position: absolute;top: -2.1%;left: 0%;max-width: 329px;width: 37.2vw; } 
.img-student .ani-bubble02 {position: absolute; top: -3.25%; right: 3.7%; max-width: 331px; width: 37vw; } 
.img-student .ani-bubble03 {position: absolute; top: 4.6%; left: 5%; max-width: 264px; width: 30.1vw; } 
.sticky-ani .scene .txt-02 {margin-bottom: clamp(40px, 6vh, 52px); }
.sticky-ani .scene.scene04 .txt-02,
.sticky-ani .scene.scene04 .img-logo {margin-bottom: 48px; }

@media (max-width: 1279px) {/* 테블릿 */
	section.sec-scroll-animation {padding-top: 90px; } 
	.sec-scroll-animation .intro-txt { width: clamp(305px, 39vw, 404px); margin-bottom: 100px; } 
	.sec-scroll-animation .intro-txt img { width: 100%; } 
	.sticky-ani {padding-top: 0; } 
	.sticky-ani .stage {height: 100vh; } 
	.sticky-ani .scene .txt-02 {font-size: clamp(24px, 7vw, 40px); margin-bottom: clamp(52px, 6vh, 60px); }
	.sticky-ani .scene.scene04 .txt-02,
	.sticky-ani .scene.scene04 .img-logo {margin-bottom: 38px; }
	.sticky-ani .scene .img-logo {width: 560px; } 
}
@media (max-width: 767px) {/* 모바일 */
	section.sec-scroll-animation {padding-bottom: 0px; } 
	.intro-txt .__acc.__acc01 {top: 5.8%; width: 118.3%; } 
	.intro-txt .__acc.__acc02 { width: 45.43%; } 
	.intro-txt .__acc.__acc03 {left: 46%; width: 44.48%; } 
	.sec-scroll-animation .intro-txt { width: clamp(170px, 40vw, 304px); margin-bottom: 0; } 
	.sticky-ani .scene .txt-02 strong {font-size: inherit; } 
	.sticky-ani .scene.scene04 .txt-02,
	.sticky-ani .scene.scene04 .img-logo {margin-bottom: 32px; }
	.sticky-ani .scene .img-logo {width: clamp(280px, 77vw, 337px);} 
}

/* 	
	섹션. 
	SNS  
*/
section.sec-sns {padding-top: var(--sec-large-padding); } 
.sec-sns .__content-box {position: relative;padding: 40px 40px 48px;background: url(../images/bg-pattern-video.png);background-size: 60px;border-radius: var(--radius-1); } 
.sec-sns .video-wrap { background-color: #000; box-shadow: 0 0 0 8px rgba(11, 13, 17, 0.32);border-radius: var(--radius-3);overflow: hidden;aspect-ratio: 16 / 9; } 
.sec-sns .video-wrap iframe,
.sec-sns .video-wrap #player { width: 100%;height: 100%; } 
.sec-sns .sns-links {margin-top: var(--spacing-7);display: flex;justify-content: center;gap: var(--spacing-9);color: #fff; } 
.sec-sns .sns-links span {display: block;margin-top: 12px; } 
.sec-sns .acc { position: absolute; } 
.sec-sns .acc1 { top: -32px; left: -35px; } 
.sec-sns .acc2 { top: -18px; right: 99px; } 
.sec-sns .acc3 { top: 0; right: 25px; transform: translateY(calc(-100% + -4px)); } 
.sec-sns .acc4 { left: 40px; bottom: -53px; } 
@media (max-width: 1279px) { /* 테블릿 */
	.sec-sns .__content-box { padding: 32px 32px 40px; }
	.sec-sns .acc1 { top: -12px; left: -14px; width: 80px; } 
	.sec-sns .acc2 {top: -10px; right: 28px; width: 61px; } 
	.sec-sns .acc3 { right: -24px; width: 58px; }
	.sec-sns .acc4 {left: 32px; bottom: -15px;  width: 77px; } 
	.sec-sns .sns-links img {max-width: 52px;}
}
@media (max-width: 767px) { /* 모바일 */
	.sec-sns .__content-box {padding: 8px 8px 16px; } 
	.sec-sns .sns-links { margin-top: 16px; } 
	.sec-sns .sns-links span {margin-top: 8px;font-size: var(--font-size-small); } 
	.sec-sns .acc1 { top: -20px;left: -20px;width: 48px; } 
	.sec-sns .acc2 { top: -9px;right: 15px;width: 37px; } 
	.sec-sns .acc3 { right: -13px;width: 35px;transform: translateY(calc(-100% + -19px)); } 
	.sec-sns .acc4 { left: 0px;bottom: -23px;width: 44px; } 
}

/* 
	섹션. 스타런이란? 
	.sec-Whatis
*/
.sec-Whatis .step-head {
	position: relative;
	display: flex;
	justify-content: space-between;
	padding: 40px;
	font-size: var(--font-title-small);
}
.sec-Whatis .visual-img {position: relative;}
.sec-Whatis .acc {position: absolute; } 
.sec-Whatis .acc1 {top: -34px; left: 32px; } 
.sec-Whatis .acc2 {top: -106px; right: 20px; } 
.sec-Whatis .step-head .point-txt {
	font-family: var(--point-font);
	color: #000;
}
.sec-Whatis .step-head .__center {
	position: relative;
	padding: 0 20px;
	background-color: #fff;
	z-index: 2;
}
.step-head .line {
	position: absolute;
	top: 50%;
	left: 150px;
	right: 150px;
	height: 2px;
	transform: translateY(-50%);
	background-color: #6A747C;
}
.step-head .line::before,
.step-head .line::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 10px;
	height: 10px;
	transform: translateY(-50%);
	background-color: #6A747C;
	border-radius: 100%;
}
.step-head .line::before { left: 0; }
.step-head .line::after { right: 0; }
.sec-Whatis .step-reward-wrap {
	padding: 0 53px;
}
.sec-Whatis .step-reward {
	--padding-row: 24px; 
	--padding-column: 16px;

	position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
	gap: var(--padding-row) var(--padding-column);
	padding-top: var(--padding-row);
	font-size: var(--font-head-medium);
}
.sec-Whatis .step-reward::before {
	content: '';
	position: absolute;
	max-width: 1134px;
	width: 100%;
	aspect-ratio: 21 / 1;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	background: url(../images/whatis-line.png) no-repeat;
	background-position-x: center;
	background-position-y: center;
	background-size: contain;
}
.step-reward .schedule.left { grid-column: span 1; }
.step-reward .schedule.center { grid-column: span 4; }
.step-reward .schedule.right { grid-column: span 1; }
.step-reward .item.month{ position: relative; z-index: 1;}
.step-reward .item.month .__box,
.step-reward .item.schedule {
	display: flex;
  align-items: center;
  justify-content: center;
	font-size: var(--font-size-large);
	line-height: 1.4;
}
.step-reward .item.month .__box {
	gap: 12px;
	flex-direction: column;
	padding: 20px 8px; 
	margin-top: var(--padding-row);
  border: 3px solid #DCE1E5;
  border-radius: var(--radius-4);    
  background-color: #fff;
	font-weight: 500;
}
.step-reward .item.schedule {
	height: 96px;
	border-radius: var(--radius-5);
	font-weight: 700;
}
.step-reward .__box.schedule.left {background-color: #B5E3CB;color: #296F4A; } 
.step-reward .__box.schedule.center {flex: 1;background-color: #CCEBF7;color: #005C81; } 
.step-reward .__box.schedule.right {background-color: #FAC7A6;color: #A54D16; }
@media (max-width: 1279px) { /* 테블릿 */
	.sec-Whatis .acc1 { top: -26px; left: 26px; width: 57px;} 
	.sec-Whatis .acc2 {top: -74px; right: 2px; width: 120px;} 
	.sec-Whatis .step-head { padding: 22px 32px 14px; } 
	.sec-Whatis .step-head .point-txt { font-size: 18px; } 
	.step-head .line { left: 110px; right: 110px; } 
	.sec-Whatis .step-reward-wrap { padding: 0 var(--space-side); } 
	.sec-Whatis .step-reward {--padding-row: 20px;--padding-column: 16px; } 
	.sec-Whatis .step-reward::before {
		aspect-ratio: unset;
		height: calc(var(--padding-row) + 3vw);
		background-position-y: bottom; 
	} 
	.step-reward .item.month .__box {gap: 10px 0px; } 
}
@media (max-width: 767px) { /* 모바일 */
	.sec-Whatis .sec-title-wrap {padding: 0 var(--space-side); } 
	.sec-Whatis .sec-title-wrap .sec-info {max-width: 310px; margin: 0 auto;}
	.sec-Whatis .acc1 {width: 28px; top: -13px; left: 12px;} 
	.sec-Whatis .acc2 {top: -34px; width: 60px; } 
	.sec-Whatis .step-head {justify-content: center; padding: 20px 16px 8px;}
	.sec-Whatis .step-head .point-txt, .step-head .line {display: none;}
	.sec-Whatis .step-reward {
		--padding-row: 16px;
    --padding-column: 16px;
		--width-bg: clamp(56px, 16%, 80px);

		grid-template-columns: 9fr 7fr;
    grid-template-rows: repeat(6, 1fr);
		padding-left: var(--width-bg);
	}
	.sec-Whatis .step-reward-wrap {
		max-width: 520px;
		margin: 0 auto;
	}
	.sec-Whatis .step-reward::before {
		max-width: var(--width-bg);
		top: var(--padding-row);;
		left: 0;
		height: auto;
		bottom: 0;
    transform: none;
		background-image: url(../images/whatis-line-m.svg);
		background-position-x: 26%;
	}
	.step-reward .item.month:nth-child(1) { grid-row: 1; grid-column: 1; }
	.step-reward .item.month:nth-child(2) { grid-row: 2; grid-column: 1; }
	.step-reward .item.month:nth-child(3) { grid-row: 3; grid-column: 1; }
	.step-reward .item.month:nth-child(4) { grid-row: 4; grid-column: 1; }
	.step-reward .item.month:nth-child(5) { grid-row: 5; grid-column: 1; }
	.step-reward .item.month:nth-child(6) { grid-row: 6; grid-column: 1; }
	.step-reward .schedule.left {grid-row: 1; grid-column: 2;}
	.step-reward .schedule.center {grid-row: 2 / 6; grid-column: 2; height: auto !important;}
	.step-reward .schedule.right { grid-row: 6; grid-column: 2;}
	.step-reward .item.month {
		position: relative;
	}
	.step-reward .item.month b {
		position: absolute;
		top: 23px;
		left: clamp(-27px, -3.5vw, -10px);
		transform: translateX(-100%);
	}
	.step-reward .item.month .__box {
		flex-direction: row;
		height: 90px;
		padding: 12px 0px 12px 12px;
		margin-top: 0;
    border-width: 2px;
		text-align: right;
    font-size: var(--font-size-basic);
	}
	.step-reward .item.month .__box figure {max-width: 66px;}
	.step-reward .item.schedule {
		height: 90px;
		padding: 10px;
		font-size: var(--font-size-basic);
	}
}

/* 
	섹션. 학습 과정 
*/
.sec-process {
	--process-blue: #003D56;
	
	padding-top: var(--sec-large-padding);
}
.sec-process .process-list { position: relative; width: 1200px; height: 1411px; background: url(../images/process-bg.png) no-repeat center; margin: 0 auto; z-index: 10; } 
.process-list > li {position: absolute; } 
.process-list > li .dot {position: relative;display: block;width: 60px;height: 60px;background-color: var(--process-blue);border-radius: 100%;transform: scale(0.5);opacity: 0;transition: opacity 0.2s, transform 0.4s; } 
.process-list > li .dot::before {content: '';position: absolute;top: 50%;left: 50%;width: 26px;height: 26px;transform: translate(-50%, -50%);border-radius: 100%;transition: backgroundColor 0.2s 0.2s; } 
.process-list > li .goal {    position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
	z-index: 10; width: 116px; aspect-ratio: 29 / 33; background: url(../images/process-GoalLine.png) no-repeat center / contain;}
.process-list > li .__txt-wrap {position: relative;margin-left: 30px;margin-bottom: 10px;padding-top: 10px;padding-left: 20px; } 
.process-list > li .__txt-wrap::before {content: '';position: absolute;top: -0.3em;left: -1px;width: 2px;height: 0%;background-color: var(--process-blue);transition: height 0.4s 0.4s; } 
.process-list > li p {text-align: left;font-size: var(--font-size-large);line-height: var(--lineHeight-p); } 
.process-list .point-txt {
	display: inline-block; font-size: 1.1em; font-family: var(--point-font); color: #2747A7;
	text-shadow:
		-1px -1px 0 rgba(255, 255, 255, 0.60),
		1px -1px 0 rgba(255, 255, 255, 0.60),
		-1px  1px 0 rgba(255, 255, 255, 0.60),
		1px  1px 0 rgba(255, 255, 255, 0.60);
}
.process-list > li figure { max-width: 260px; margin-left: 31px; } 
.process-list > li p,
.process-list > li figure {opacity: 0;transform: translateY(10%);transition: 0.4s 0.8s; } 
.process-list > li:nth-child(1) { top: 77px; left: 444px; } 
.process-list > li:nth-child(2) { top: 516px; left: 733px; } 
.process-list > li:nth-child(3) { top: 516px; left: 315px; } 
.process-list > li:nth-child(4) { top: 863px; left: 151px; } 
.process-list > li:nth-child(5) { top: 970px; left: 700px; } 
/* 애니메이션 */
.process-list > li.is-active .dot {transform: scale(1);opacity: 1; } 
.process-list > li.is-active .dot::before {background-color: #fff; } 
.process-list > li.is-active .__txt-wrap::before {height: 100%; } 
.process-list > li.is-active p,
.process-list > li.is-active figure {opacity: 1;transform: translateY(0); } 

@media (min-width: 1280px) {
	.sec-process .process-content-wrap {margin-top: 0;}
	.process-list > li:nth-child(4) p { padding-top: 100px; } 
	.process-list > li:nth-child(5) .__txt-wrap { margin-left: 0; padding-top: 71px; } 
	.process-list > li:nth-child(5) figure {margin-left: 0; } 
	.sec-process .process-bg {display: none;}
}
@media (max-width: 1279px) { /* 테블릿 */
	.sec-process .process-content-wrap {position: relative;max-width: 800px; padding-left: clamp(20px, 10vw, 114px); margin-left: auto;margin-right: auto; } 
	.sec-process .process-list {width: 100%;height: auto;background: none;z-index: unset; } 
	.process-list > li { position: static; display: flex;margin-bottom: var(--spacing-8); } 
	.process-list > li .dot {flex: 0 0 45px;width: 45px; height: 45px; z-index: 10;} 
	.process-list > li .dot::before {width: 19.5px; height: 19.5px; } 
	.process-list > li .goal {width: 93px; left: 22px; top: 20px;}
	.process-list > li .__txt-wrap {flex: 0 0 308px;margin-top: 22px;padding-top: 15px;padding-left: 40px;margin-left: 0;margin-bottom: 0; } 
	.process-list > li .__txt-wrap::before {top: 0; left: 0; width: 0%; height: 1.5px;transition: width 0.4s 0.4s; } 
	.process-list > li figure { flex: 1; max-width: none; margin-top: 22px; margin-left: var(--spacing-7); } 
	.process-list > li:nth-child(5) {position: relative; top:auto; left: auto;}
	.process-list > li:nth-child(5) .__txt-wrap {margin-left: 37px; padding-left: 48px; padding-top: 22px; } 
	.process-list > li:nth-child(5) .__txt-wrap::before { content: ''; } 
	.process-list > li:nth-child(5) figure {display: block; } 
	
	/* 애니메이션 */
	.process-list > li.is-active .__txt-wrap::before {width: 100%;height: 2px; } 
	/* 배경 */
	.sec-process .process-bg {position: absolute; top: 0; left: 0;width: 50px;height: 80%; background-image: url(../images/process-race.svg);background-position-x: 10px;background-repeat: repeat-y;z-index: unset; } 
	.process-bg > div { position: absolute; } 
	.process-bg .start { width: 75px; top: -50px; left: -14px; z-index: 20;} 
	.process-bg .gradient { top: 0;left: 4px;width: 38px; height: 43.75px; background: linear-gradient(180deg, var(--process-blue), transparent); } 
}
@media (max-width: 767px) { /* 모바일 */
	.sec-process .sec-info { max-width: clamp(240px, 58vw, 405px); margin: 0 auto;}
	.sec-process .process-content-wrap {max-width: 520px;padding-left: 20px;padding-right: 20px; } 
	.sec-process .process-list {padding-top: 27px;z-index: unset; } 
	.process-list > li {display: block;margin-bottom: 63px; } 
	.process-list > li .dot {position: absolute;margin-top: -22.5px;z-index: 10; } 
	.process-list > li .goal {top: 0;}
	.process-list > li .__txt-wrap { padding-top: 22px;  padding-left: 72px; } 
	.process-list > li:nth-child(5) .__txt-wrap { margin-left: 0; padding-left: 72px;}
	.process-list > li p {max-width: 240px; letter-spacing: -0.03em;}
	.process-list > li figure {margin-top: 16px; margin-left:0; padding-left: 72px;text-align: left; } 
	
	/* 배경 */
	.process-bg .start {top: -23px;} 
}



/* 
	섹션. 보상과 응원 
	.sec-cheering
*/
.sec-cheering .__content-box {position: relative;max-width: 1200px;margin-left: auto;margin-right: auto; } 
.sec-cheering .txtBubble-wrap li {position: absolute;transform-origin: center bottom; animation: tick 4s steps(1, end) infinite; } 
.sec-cheering .txtBubble-wrap .bubble01 {top: 35px;left: 356px; } 
.sec-cheering .txtBubble-wrap .bubble02 {top: 406px;left: 355px;animation-delay: -0.2s; } 
.sec-cheering .txtBubble-wrap .bubble03 {top: 734px;left: 332px; } 
@media (prefers-reduced-motion: reduce){
	/* .sec-cheering .txtBubble-wrap li { animation: none; }  */
}
@keyframes tick { 
	0% { transform: rotate(0); } 
	20% { transform: rotate(-5deg); } 
	40% { transform: rotate(5deg); } 
	60% { transform: rotate(-3deg); } 
	80% { transform: rotate(3deg); } 
	100% { transform: rotate(0); } 
}
@media (max-width: 1279px) { /* 테블릿 */
	.sec-cheering .__content-box {max-width: 960px;}
	.sec-cheering .txtBubble-wrap .bubble01 { top: 6%; left: 29.5%; width: 46.46%; } 
	.sec-cheering .txtBubble-wrap .bubble02 { top: 41.4%; left: 18.6%; width: 51.88%; } 
	.sec-cheering .txtBubble-wrap .bubble03 {top: 73.5%; left: 30%; width: 58.55% ; } 
}
@media (max-width: 767px) { /* 모바일 */
	.sec-cheering .__content-box {max-width: 560px;}
	.sec-cheering .txtBubble-wrap .bubble01 {top: 9.5%; left: 43.5%;  width: 42%;} 
	.sec-cheering .txtBubble-wrap .bubble02 {top: 44%; left: 11.5%; width: 43.94%; } 
	.sec-cheering .txtBubble-wrap .bubble03 {top: 72.8%; left: 38%; width: 51.94%;} 
}


/* 
	섹션. 스타런 굿즈 
*/
.sec-goods .white-box {padding: 80px; } 
.sec-goods .goods-list {
	--box-height: 376px;

	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-7); 
} 
.sec-goods .goods-list > li {
	display: flex;flex-direction: column; justify-content: space-between; gap: 20px; 
	width: 100%; min-height: var(--box-height);
	padding: 20px;border-radius: var(--radius-5); border: 3px solid #A5B4B8;
} 
.sec-goods .goods-list > li strong {font-size: var(--font-title-small);} 
.sec-goods .goods-list > li p {color: var(--text-secondary); } 
.sec-goods .goods-list > li figure {border-radius: 16px; overflow: hidden; } 
.sec-goods .goods-list > li.cover {
	background-color: #EAEDF0;
	border-color: #DCE1E5;
	gap: 0;
}
.sec-goods .goods-list > li.cover strong {color: #8C98A1;}
.sec-goods .goods-list > li.cover p {display: none;}
.sec-goods .goods-list > li.cover figure {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (max-width: 1279px) { /* 테블릿 */
	.sec-goods .white-box {padding: var(--sec-top-padding) var(--space-side) var(--sec-bottom-padding);border-radius: var(--radius-2); } 
	.sec-goods .goods-list {
		--box-height: 342px;

		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
	} 
	.sec-goods .goods-list > li {justify-content: center; padding: 16px; } 
}
@media (max-width: 767px) { /* 모바일 */
	.sec-goods .goods-list { 
		--box-height: 318px;

		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); justify-items: center; 
	} 
	.sec-goods .goods-list > li {padding: 12px;border-radius: var(--radius-5);line-height: var(--lineHeight); } 
	.sec-goods .goods-list > li p {display: flex; align-items: center; justify-content: center; } 
}


/* 
	섹션. 팬미팅 
	.sec-fanMeeting
*/
section.sec-fanMeeting { padding-top: var(--sec-large-padding); } 
.starlearn-wrapper .sec-fanMeeting .__container { max-width: 1280px; padding: 0; } 
.sec-fanMeeting .sec-title-wrap { gap: 20px; } 
.sec-fanMeeting .sec-title.Yellow { font-size: var(--font-title-medium); color: #FDC742; font-weight: 500; } 
.sec-fanMeeting .fm-info-wrap { position: relative; } 
.fm-info-wrap .__bg { position: relative; top: 0; left: 50%; transform: translateX(-50%); width: 1280px; aspect-ratio: 1280 / 1399; background: url(../images/fm-visual.png?ver=0303) no-repeat center / contain; } 
.fm-info-wrap .txt-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin:0; padding-left: 93px; padding-top: 460px; z-index: 10; } 
.fm-info-wrap .txt-box__inner { width: 448px; margin: 0 auto; } 
.fm-info-wrap .__title { padding-top: var(--spacing-10); padding-bottom: var(--spacing-8); border-bottom: 1px solid #DCE1E5; font-size: var(--font-title-small); font-weight: 700; } 
.fm-info-wrap .__content > .__inner { display: flex; flex-direction: column; gap: var(--spacing-7); padding: var(--spacing-8) 0; } 
.fm-info-wrap .__content dl { flex: 1; display: flex; gap: 20px; align-items: start; } 
.fm-info-wrap .__content dt {min-width: 107px;}
.fm-info-wrap .__content dd { padding-top: 8px; text-align: left; font-weight: 500; } 
.fm-info-wrap .last-sub-wrap { margin-top: 76px; text-align: left; } 
@media (max-width: 1279px) { /* 테블릿 */
	.fm-info-wrap .__bg { width: 100%; max-width: 1280px; min-width: 980px; } 
	.fm-info-wrap .txt-box {padding-top: clamp(354px, 37vw, 440px); padding-left: clamp(70px, 9vw, 85px); } 
	.fm-info-wrap .txt-box__inner {position: relative; width: clamp(313px, 40vw, 415px);  } 
	.fm-info-wrap .__title {padding-top: 52px; padding-bottom: 32px;}
	.fm-info-wrap .__content dt {  min-width: 98px; padding-top: 2px; padding-bottom: 2px;}
	.fm-info-wrap .last-sub-wrap {margin-top: clamp(32px, 5vw, 106px);}
}
@media (max-width: 767px) { /* 모바일 */
	.fm-info-wrap .__bg {min-width: 500px; background-image: url(../images/fm-visual-m.png?ver=0303); aspect-ratio: 1151 / 1734;} 
	.fm-info-wrap .txt-box {padding-top: clamp(185px, 38%, 284px);padding-left: 0; } 
	.fm-info-wrap .txt-box__inner {width: clamp(225px, 42vw, 313px); height: 100%; } 
	.fm-info-wrap .__title { padding: 24px 0;font-size: 18px; } 
	.fm-info-wrap .__content > .__inner {width: 225px;margin: 0 auto; padding: 20px 18px 32px; border-radius: 0 0 var(--radius-2) var(--radius-2); } /* 260219 */
	.fm-info-wrap .__content dl { flex-direction: column; gap: 8px; } 
	.fm-info-wrap .__content dt {  min-width: 90px;}
	/* .fm-info-wrap .__content > .__inner {width: 225px;margin: 0 auto;padding: 20px 18px;background: rgba(255, 255, 255, 0.60); } 
	.fm-info-wrap .__content dl { flex-direction: column; gap: 8px; } 
	.fm-info-wrap .__content dt {min-width: 85px;} */
	.fm-info-wrap .last-sub-wrap { position: absolute; width: 376px; left: 50%; bottom: clamp(50px, 12%, 140px); margin: 0; transform: translateX(-50%); } 
}
@media (max-width: 500px) { 
	.fm-info-wrap .last-sub-wrap {width: 246px;bottom: clamp(50px, 9%, 140px);}
}

/* 
	섹션. 무엇이 다른가요 
*/
.sec-difference .sec-title-wrap {gap: 20px; } 
.sec-difference .sec-title.White {font-size: var(--font-title-medium);color: #ffffff; font-weight: 500; } 
.sec-difference .last-sub-wrap {margin-top: 50px; } 
/*카운셀 슬라이드& 불릿-- */
.carousel-wrap {
	--card-width: 420px;
	--card-height: 488px;
	--wrap-gap: 48px;

	display: flex;flex-direction: column;align-items: center;gap: var(--wrap-gap);overflow: hidden; 
} 
.carousel-view {position: relative;width: 100%;display: flex;align-items: center;justify-content: center;overflow: visible; } 
.carousel-cards {position: relative;width: 100%;height: 100%;min-height: var(--card-height);display: flex;align-items: center;justify-content: center; } 
.carousel-card {position: absolute;top: 0;width: var(--card-width);height: var(--card-height);padding: var(--spacing-8) var(--spacing-7);background-color: #fff;border-radius: var(--radius-3); opacity: 0;transition: all 0.3s ease, z-index 0s;filter: blur(1px);z-index: 1;cursor: pointer;pointer-events: none; } 
.carousel-card.active {left: 50%;opacity: 1;filter: none;transform: translateX(-50%) scale(1); box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.40); z-index: 10;pointer-events: auto;cursor: default;z-index: 10; } 
.carousel-card.left {left: 0;opacity: .8;filter: blur(1px);transform: scale(.93);z-index: 2;pointer-events: auto; } 
.carousel-card.right {left: 100%;opacity: .8;filter: blur(1px);transform: translateX(-100%) scale(.93);z-index: 3;pointer-events: auto; } 
.carousel-bullets {display: flex;gap: 12px; } 
.carousel-bullet {width: 12px; height: 12px;background: rgba(255, 255, 255, 0.24);border-radius: 50em;transition: all .2s cubic-bezier(.7,0,.18,1);cursor: pointer; } 
.carousel-bullet.active {width: 34px;background: #fff; } 
/* --카운셀 슬라이드& 불릿 */
.diffe-item {display: flex; flex-direction: column; align-items: center;justify-content: space-between; gap: 10px;width: 100%;height: 100%; } 
.diffe-item .__title b { display: block; margin-top: 10px; font-size: var(--font-title-small); font-weight: 700; } 
.diffe-item figure {min-width: 356px;}
.diffe-item > p { font-size: var(--font-size-small); line-height: var(--lineHeight-p); } 

@media (max-width: 1279px) { /* 테블릿 */ 
	.carousel-wrap {
		--card-width: 400px;
		--wrap-gap: 32px;
	}
}
@media (max-width: 767px) { /* 모바일 */
	.carousel-wrap {
		--card-width: 240px;
		--card-height: 295px;
		--wrap-gap: 24px;
	}
	.carousel-card {box-shadow: 0 4.8px 4.8px 0 rgba(0, 0, 0, 0.40); padding: 15px 12px; }
	.diffe-item {font-size: 9px;}
	.diffe-item .__title b {margin-top: 6px;font-size: 12px; } 
	.diffe-item figure {min-width: auto;}
	.diffe-item > p {font-size: 9px; } 
	.sec-difference .last-sub-wrap {margin-top: 32px;}
}

/* 
	섹션. 학습과목
 */
.sec-subject .roadmap-wrap {
	--width-category: 102px;
	--width-subject: 147px;

	padding: var(--spacing-7);
	background-color: #fff;
	border-radius: var(--radius-3);
	font-size: var(--font-size-large);
}
.roadmap .roadmap-head {display: flex; border-bottom: 1px solid #ececec; } 
.roadmap .roadmap-head .subject-th {width: calc(var(--width-category) + var(--width-subject)); background-color: #fff; } 
.roadmap .roadmap-head .th {flex: 1;font-weight: 500;padding: 8px;text-align: center; } 
.roadmap .roadmap-body {position: relative; } 
.roadmap-body .category-tr {display: flex;align-items: stretch;position: relative;z-index: 2; } 
.roadmap .tr-wrap {border-top: 1px solid #fff;border-bottom: 1px solid #e1e2e2;}
.roadmap-body .tr + .tr {border-top: 2px solid #fff; } 

/* 과목별 생상 */
.category-tr.math {--category-bg: #F9B8BB;--category-color: #C41C22;--bar-bg: #F1494F; } 
.category-tr.korean {--category-bg: #B5E3CB;--category-color: #296F4A;--bar-bg: #45B97C; } 
.category-tr.english {--category-bg: #99D6EF;--category-color: #007AAC;--bar-bg: #33ADDF; } 
.category-tr.csat {--category-bg: #FAC7A6;--category-color: #D4621A;--bar-bg: #F58F4D; } 
/* 좌측 카테고리 */
.roadmap .category {display: flex;align-items: center;justify-content: center;width: var(--width-category);background-color: var(--category-bg);color: var(--category-color); font-weight: 700; } 
.roadmap .subject {display: flex;align-items: center;justify-content: center;width: var(--width-subject);height: 80px;background-color: #F6F7F8; font-weight: 400; } 
/* 진행 바 */
.roadmap .tr-wrap {flex: 1; } 
.roadmap .tr {display: flex; } 
.roadmap .tr .bar-line {--cols: 11; --side-padding: 18px; flex: 1;display: flex;align-items: center;justify-content: start;padding: 0 var(--side-padding); } 
.roadmap .bar {padding: 8px;background-color: var(--bar-bg);border-radius: 50em;text-align: center; } 
.roadmap .bar span {font-weight: 400; color: #fff; } 
.roadmap .bar.width-11 {width: 100%; } 
.roadmap .bar.width-10 {width: calc((100% - var(--side-padding)) / var(--cols) * 10); } 
.roadmap .bar.width-7 {width: calc((100% - var(--side-padding)) / var(--cols) * 7); } 
.roadmap .bar.width-6 {width: calc((100% - var(--side-padding)) / var(--cols) * 6); } 
.roadmap .bar.width-4 {width: calc((100% - var(--side-padding)) / var(--cols) * 4); } 
.roadmap .bar.offset-6 {margin-left: calc((100% - var(--side-padding)) / var(--cols) * 6); } 
.roadmap .bar.offset-1 {margin-left: calc((100% - var(--side-padding)) / var(--cols) * 1); } 
/* 배경 */
.roadmap .roadmap-bg {display: flex;position: absolute;top: 0;bottom : 0;left: calc(var(--width-category) + var(--width-subject));right: 0;pointer-events: none;z-index: 1; } 
.roadmap .roadmap-bg .stage:nth-child(1) {flex: 0 0 9.5%; } 
.roadmap .roadmap-bg .stage:nth-child(2) {flex: 0 0 54%;background-color: #F4F6F6;border-right: 1px solid #e1e2e2; } 
.roadmap .roadmap-bg .stage:nth-child(3) {flex: 1 1 33%; } 
.roadmap .roadmap-bg .stage:nth-child(4) {flex: 0 0 9.5%;background-color: #F4F6F6;border-right: 1px solid #e1e2e2; } 

@media (max-width: 1279px) { /* 테블릿 */
	.sec-subject .roadmap-wrap {
		--width-category: 79px;
		--width-subject: 98px; 
	} 
	.roadmap .category {font-size: var(--font-title-small); } 
	.roadmap .subject {height: 73px;font-size: var(--font-size-small); } 
	.roadmap .roadmap-head .th {font-size: var(--font-size-basic); } 
	.roadmap .bar {padding: 0px 2px 2px; } 
	.roadmap .bar span {font-size: var(--font-size-small); } 
	.roadmap .tr .bar-line {--side-padding: 10px; } 
}
@media (max-width: 767px) { /* 모바일 */
	.sec-subject .roadmap-wrap {
		--width-category: 0px;
		--width-subject: 60px;
		--width-content: 516px;

		padding-right: 0;
		padding-left: 12px;
	}
	.roadmap-wrap .roadmap { position: relative; overflow-x: auto; z-index: 2; }
	.roadmap-wrap .inner-padding { min-width: calc(var(--width-content) + 12px); padding-right: 12px; }
	.roadmap .category { display: none; }
	.roadmap .subject,
	.roadmap .roadmap-head .subject-th { position: sticky; left: 0; z-index: 1; }
	.roadmap .subject,
	.roadmap .roadmap-head .th,
	.roadmap .bar span { font-size: 12px ; }
	.roadmap .roadmap-head .subject-th {width: var(--width-subject); }
	.roadmap .subject {background-color: var(--category-bg); color: var(--category-color);font-weight: 700; } 
	.roadmap .subject span.mo {display: inline;}
	.roadmap .bar {position: relative;height: 8px;margin-top: 1em; } 
	.roadmap .bar span {position: absolute;top: -2px;left: 50%;transform: translate(-50%, -100%);color: var(--text-secondary);font-weight: 500;white-space: nowrap; } 
	.roadmap .roadmap-bg {right: auto; width: calc(100% - var(--width-subject)); min-width: calc(var(--width-content) - var(--width-subject)); } 
}


/* 
	섹션. 이벤트 01 
	.sec-event01
*/
/* 스타런 버튼 */
.starlearn-wrapper .btn {padding: 12px 24px;border-radius: 50rem;font-size: var(--font-size-basic);font-weight: 500; } 
.starlearn-wrapper .btn.btn-primary {border-color: var(--text-brand);background-color: var(--text-brand);color: #fff; } 
.starlearn-wrapper .btn:disabled {color: #AEB9C3;background: rgba(221, 225, 228, 0.60);cursor: default; } 
/* 이벤트 패널 */
.starlearn-wrapper .event-panel {background-color: #fff;border-radius: var(--radius-3);overflow: hidden; } 
.event-panel .title {display: flex;justify-content: space-between;align-items: center;padding: var(--spacing-7) var(--spacing-9);border-bottom: 1px solid #DCE1E5; } 
.event-panel .title .__right {display: flex;gap: 10px 16px;     font-size: var(--font-size-large); } 
.event-panel .process {display: flex;justify-content: space-between; gap: var(--spacing-7); padding: var(--spacing-7) var(--space-side); } 
.event-panel .process > li {flex: 1;display: flex; gap: 12px; } 
.event-panel .process .num {display: flex; 
	justify-content: center;
	align-items: center;
	min-width: 48px;
	flex: 0 0 48px;
	height: 80px;
	font-size: 36px;
	font-family: var(--point-font);
	font-weight: 700;} 
.event-panel .process .info {text-align: left; } 
.event-panel .process .info p {margin-top: 8px; } 
.event-panel .btn-wrap {margin: 0; padding: var(--spacing-7); } 
.event-panel .footer {padding: var(--spacing-7) var(--spacing-8) var(--spacing-10);background-color: #EAEDF0; } 
.event-panel .footer .__title {text-align: left;}
.event-panel .goods-list {display: flex;flex-wrap: wrap; justify-content: center;align-items: start; text-align: center; margin-top: 36px;} 
.event-panel .goods-list > li {padding: 0 var(--spacing-8)}
.event-panel .goods-list figure {display: flex;justify-content: center;align-items: center;width: 220px;aspect-ratio: 1 / 1;position: relative;background-color: rgba(11, 13, 17, 0.08);border-radius: 100%; } 
.event-panel .goods-list figure figcaption {position: absolute;top: -10px;right: -10px;display: flex;justify-content: center;align-items: center;width: 60px;aspect-ratio: 1 / 1;background-color: #FDB913;box-shadow: 2px 2px 4px 0 rgba(11, 13, 17, 0.24);border-radius: 100%;font-weight: 700;color: #503800; } 
.event-panel .goods-list p {margin-top: 20px;font-size: var(--font-size-large); } 
@media (max-width: 1279px) { /* 태블릿 */
	.event-panel .process {display: grid;grid-template-columns: repeat(2, 1fr);} 
	.event-panel .process > li {flex: 0 0 260px; } 
	.event-panel .process .num {font-size: 32px;}
	.event-panel .process .info p {line-height: var(--lineHeight); } 
	.event-panel .goods-list {margin-top: 20px; row-gap: 20px; } 
	.event-panel .goods-list figure {width: 236px; }
}
@media (max-width: 767px) {
	/* 모바일 */
	.event-panel .title {flex-direction: column; gap: 20px; padding: var(--spacing-7);}
	.event-panel .title .badge {flex-shrink: 0; align-self: flex-start; } 
	.event-panel .title .__right {align-self: end; flex-direction: column; align-items: end;} 
	.event-panel .process {grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));}  /*column 3개 기준 */
	.event-panel .process.column4 {grid-template-columns: repeat(auto-fit, minmax(254px, 1fr));} 
	.event-panel .process > li {gap: 8px; } 
	.event-panel .process .num {font-size: 24px; } 
	.event-panel .goods-list figure {width: 192px; } 
	.event-panel .goods-list figure figcaption {width: 50px; } 
	.event-panel .goods-list p {margin-top: 16px; } 
	.event-panel .btn-wrap {margin-top: 0;}
}

/* 
	섹션. 이벤트 02 
	.sec-event02
*/
.sec-event02 .phone-ring {position: relative;overflow: hidden; } 
.sec-event02 .phone-ring .__ani {
	--animation-size: 60px;
	--icon-phone-size: 24px;
	--border-size: 2px;
	--animation-curve: cubic-bezier(0.12, 0.7, 0.74, 0.71);

	position: absolute;top: 83.5%;left: 50%; 
	display: flex; justify-content: center; align-items: center; 
	margin-left: calc(var(--animation-size) * -0.5);
} 
.sec-event02 .phone-ring .__ani > * {width: var(--animation-size); height: var(--animation-size); border-radius: 100%; } 
.phone-ring .phone { 
	display: flex; justify-content: center; align-items: center;
	background: var(--text-brand) url(../images/ico-phone.svg) no-repeat center / var(--icon-phone-size); 
	animation: phone 1s var(--animation-curve) infinite alternate-reverse; 
	border: var(--border-size) #fff solid; z-index: 2; 
} 
.phone-ring .circle { background-color: #fff; position: absolute; animation: scaling 2s var(--animation-curve) infinite; } 
.phone-ring .circle.circle1 { animation-delay: 0s; } 
.phone-ring .circle.circle2 { animation-delay: 1s; } 
@keyframes scaling { 
	0% { transform: scale(2); background-color: rgba(47, 68.99, 284.95, 0.5); } 
	100% { transform: scale(5);background-color: rgba(47, 68.99, 284.95, 0); } 
}
@keyframes phone { 
	0% { transform: scale(2); } 
	100% { transform: scale(2.5); } 
}
.sec-event02 .event-panel {border-top-left-radius: 0;border-top-right-radius: 0;border-top: 1px solid rgba(255, 255, 255, 0.4);background: rgba(65, 105, 225, 0.60);color: #fff; } 
.sec-event02 .event-panel .title {border-color: var(--text-brand); } 
.sec-event02 .event-panel .process {padding-bottom: var(--spacing-10); } 
@media (max-width: 1279px) { /* 태블릿 */
	.sec-event02 .phone-ring .__ani {
		--animation-size: 5vw;
		--icon-phone-size: 2.1vw;
		--border-size: 2px;
	}
}
@media (max-width: 767px) { /* 모바일 */
	.sec-event02 .phone-ring .__ani {
		--icon-phone-size: 2.3vw;
		--border-size: 1px;
	}
}


/* 
	섹션. 이벤트 03 
	.sec-event03
*/
.sec-event03 .event-panel .title {border: none; } 
.sec-event03 .event-panel .goods-list {padding: 0 var(--spacing-8) var(--spacing-10); } 
.sec-event03 .event-panel .footer {display: flex;gap: var(--spacing-6);padding-top: var(--spacing-10); } 
.sec-event03 .event-panel .footer > div {flex: 1; } 
.sec-event03 .event-panel .footer p {font-size: var(--font-size-large);line-height: var(--lineHeight-p); text-align: left;} 
.dot-txt {position: relative;padding-left: 1.3em; } 
.dot-txt::before {content: '';position: absolute;top: 0.8em;left: 0.55em;width: 0.2em;height: 0.2em;background-color: currentColor;border-radius: 100%; } 
.underline {text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } 
@media (max-width: 767px) { /* 모바일 */
	.sec-event03 .sec-title-wrap figure img { max-height: 60px; }
	.sec-event03 .event-panel .goods-list figure img { transform: scale(0.9); }
	.sec-event03 .event-panel .footer { flex-direction: column; }
}

/* 
	섹션. 어떻게 학습 가입 하나요? 
	.sec-howTo
*/
.sec-howTo .black-box {background: rgba(11, 13, 17, 0.60);border-radius: var(--radius-3);color: #fff; } 
.sec-howTo .sec-title-wrap {padding: var(--sec-top-padding) var(--space-side) var(--spacing-7); } 
.sec-howTo .howTo-info {display: flex;gap: 16px 24px;padding: var(--spacing-9) var(--space-side);border-top: 1px solid rgba(255, 255, 255, 0.24);border-bottom: 1px solid rgba(255, 255, 255, 0.24); } 
.sec-howTo .howTo-info > ul {flex: 1;text-align: left;line-height: var(--lineHeight-p); } 
.sec-howTo .howTo-info > ul > li + li {margin-top: 1.84em; } 
.sec-howTo .howto-type {padding: var(--spacing-7) var(--space-side) var(--sec-bottom-padding); } 
.sec-howTo .howto-type h3 {font-size: var(--font-head-large);font-weight: 500;margin-bottom: var(--spacing-8); } 
.sec-howTo .howto-type ul {display: flex;gap: var(--spacing-7); } 
.howto-type .type-item {flex: 1;display: flex;flex-direction: column;gap: var(--spacing-6);min-width: 352px;padding: var(--spacing-8) var(--spacing-7);border-radius: var(--radius-4);background-color: #FFF; } 
.howto-type .type-item .__title span {font-size: var(--font-head-medium);font-weight: 500;color: var(--text-secondary)}
.howto-type .type-item .__title strong {display: block;margin-top: 10px;font-size: var(--font-title-small);font-weight: 700;color: var(--text-primary)}
.howto-type .type-item .__img {
	width: 100%;
	height: 186px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: var(--radius-5);overflow: hidden; 
} 
.howto-type .type-item:nth-child(1) .__img {background-image: url(../images/howTo-img01.jpg);}
.howto-type .type-item:nth-child(2) .__img {background-image: url(../images/howTo-img02.jpg);}
.howto-type .type-item:nth-child(3) .__img {background-image: url(../images/howTo-img03.jpg);}
.howto-type .type-item p {font-weight: 500;color: var(--text-tertiary);line-height: var(--lineHeight-p); } 
@media (max-width: 1279px) { /* 태블릿 */
	.sec-howTo .howto-type ul {flex-direction: column; } 
	.howto-type .last-sub-wrap {margin-top: var(--spacing-6); } 
}
@media (max-width: 1279px) and (min-width: 768px) { /* only 태블릿 */
	.howto-type .type-item {position: relative;padding: var(--spacing-8)}
	.howto-type .type-item .__title,
	.howto-type .type-item p { width: 50%; margin-left: auto; } 
	.howto-type .type-item .__img {position: absolute; top: var(--spacing-8); left: var(--spacing-8); bottom: var(--spacing-8);width: 43.45%;height: auto; } 
	.howto-type .type-item p {display: flex;align-items: center;justify-content: center;min-height: 107px;line-height: var(--lineHeight); } 
}
@media (max-width: 767px) { /* 모바일 */ 
	.sec-howTo .howTo-info {flex-direction: column; } 
	.sec-howTo .howto-type h3 {margin-bottom: 20px; } 
	.howto-type .type-item { min-width: auto; } 
	.howto-type .type-item .__img {height: auto;aspect-ratio: 1 / 0.59; } 
	.howto-type .type-item p {line-height: var(--lineHeight); } 
}

/* 
	섹션. 유의사항 
	.sec-note
*/
section.sec-note {padding-bottom: 200px; } 
.sec-note .white-box {padding: var(--sec-top-padding) var(--space-side) var(--sec-bottom-padding);border-radius: var(--radius-3);text-align: left; } 
.sec-note .__title {font-size: var(--font-title-small);font-weight: 700; } 
.sec-note .note-p {margin-top: var(--spacing-8); } 
.sec-note .note-p h4 {margin-bottom: 16px;font-size: var(--font-head-medium);font-weight: 500; } 
.sec-note .note-p h4::before {top: 0.65em; } 
.sec-note .note-p ol {padding-left: var(--spacing-7);line-height: var(--lineHeight-p); } 


/* 
	하단 플로팅 배너
 */
.floting-wrap .floting-banner {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%) translateY(100%);
	opacity: 0;
  pointer-events: none;
	transition: transform 0.5s ease, opacity 0.3s ease;

	display: flex;
	justify-content: space-between;
	align-items: center;

	width: 565px;
	padding: 18px 18px 18px 40px;
	background: url(../images/bg-pattern-darkblue.png);
	background-size: 60px;
	border: 2px solid #0F1956;
	border-radius: 50rem;
	box-shadow: 8px 12px 32px 0 rgba(11, 13, 17, 0.10);

	z-index: 989;
}
.floting-wrap .floting-banner.is-show {position: fixed;transform: translateX(-50%); pointer-events: auto;opacity: 1; } 
.floting-wrap .floting-banner.is-stop {position: absolute;transform: translateX(-50%); pointer-events: auto;opacity: 1; } 
.starlearn-wrapper .floting-banner span {color: #fff;font-weight: 600; } 
.starlearn-wrapper .floting-banner .buttons-box {display: flex;justify-content: space-between;gap: 8px 12px;margin: 0; } 
.starlearn-wrapper .floting-banner .btn { display: inline-block; padding: 16px 25px;border: 0;font-weight: 800;	line-height: 1; color: #fff; } 
.starlearn-wrapper .floting-banner .btn01 { background-color: #CE6CFF; } 
.starlearn-wrapper .floting-banner .btn02 { background: linear-gradient(90deg, #367BFF 0%, #4282FF 100%); } 
#top{cursor: pointer;}
@media (max-width: 1279px) {/* 태블릿 */
	.floting-wrap .floting-banner {justify-content: center; gap: 10px 20px; width: 100%;padding: 14px;bottom: 0; left: 0; right: 0;transform: translateY(100%);border-radius: 0; box-shadow: 8px 12px 32px 0 rgba(11, 13, 17, 0.10); } 
	.floting-wrap .floting-banner.is-show {transform: translateY(0%); } 
	.starlearn-wrapper .floting-banner .btn {width: 200px; padding: 19px 32px; } 
	.starlearn-wrapper .floting-banner .btn img { width: 102px;}
	.floting-wrap .floting-banner.is-stop {transform: translateY(0%); } 
	#top { right: var(--space-side); transition: all 0.3s ease; } 
	#top.is-show { bottom: 100px; } 
	/* #top.is-stop { bottom: 200px; }  */
}
@media (max-width: 767px) {/* 모바일 */
	.floting-wrap .floting-banner {flex-direction: column; padding: 10px 20px 14px;font-size: var(--font-size-small); } 
	.starlearn-wrapper .floting-banner .buttons-box {justify-content: center; width: 100%; gap: 8px; } 
	.starlearn-wrapper .floting-banner .btn {width: 100%; max-width: 320px; padding: 14.5px; font-size: var(--font-size-small); } 
	.starlearn-wrapper .floting-banner .btn img { width: 88px;}
	#top.is-show { bottom: 122px; } 
	/* #top.is-stop { bottom: 333px; }  */
}