@charset "UTF-8";

/* -------------------------------- */
/* HERO SECTION */
/* -------------------------------- */

.hero{
	position:relative;
	width:100%;
	overflow:hidden;
	
	background:
		linear-gradient(
			135deg,
			#fcfcfc 0%,
			#f7fbfa 42%,
			#f3f8f7 100%
		);
}

/* 오른쪽 유기적 배경 */

.hero-bg-shape{
	position:absolute;

	top:-240px;
	right:-160px;

	width:1050px;
	height:1050px;

	border-radius:
		48% 52% 58% 42% /
		40% 42% 58% 60%;

	background:
		radial-gradient(
			circle at 35% 35%,
			rgba(123, 224, 213, 0.20),
			rgba(123, 224, 213, 0.10) 45%,
			rgba(123, 224, 213, 0.04) 68%,
			transparent 82%
		);

	filter:blur(2px);
}

/* 왼쪽 은은한 빛 */

.left-glow{
	position:absolute;

	left:-180px;
	top:120px;

	width:560px;
	height:560px;

	border-radius:50%;

	background:
		radial-gradient(
			circle,
			rgba(120,220,210,0.14) 0%,
			rgba(120,220,210,0.06) 45%,
			transparent 75%
		);

	filter:blur(42px);
}

/* 하단 웨이브 */

.bottom-wave{
	position:absolute;

	left:-10%;
	bottom:-220px;

	width:130%;
	height:380px;

	border-radius:
		45% 55% 0 0 /
		100% 100% 0 0;

	background:
		linear-gradient(
			90deg,
			rgba(106,220,208,0.41),
			rgba(106,220,208,0.06)
		);

	transform:rotate(-2deg);
}

/* -------------------------------- */
/* NAVIGATION */
/* -------------------------------- */

.nav{
	position:relative;
	z-index:10;
	
	width:100%;
	padding:38px 72px;
	
	display:flex;
	align-items:center;
	justify-content:space-between;
}
nav {
	padding-top: 3rem !important;
	background-color: rgba(255,255,255,0);
	
	transition: all .3s ease;
}
nav.nav-scrolled {
	background-color: rgba(255,255,255,.9);

	box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.logo{
	font-size:64px;
	font-weight:800;
	line-height:0.85;
	color:#1c1c1c;
}

.logo span{
	color:#68d8cb;
}

.nav-menu{
	display:flex;
	gap:56px;

	list-style:none;

	color:#222;
	font-size:20px;
	font-weight:600;
}

.nav-right{
	display:flex;
	align-items:center;
	gap:18px;
}

.sbtn{
	height:56px;
	padding:0 30px;

	border-radius:999px;

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

	font-size:18px;
	font-weight:700;

	cursor:pointer;
}
.sbtn:hover {
	text-decoration: none;
}
.sbtn-outline{
	border:1.5px solid #bfd5d1;
	background:white;
	color:#222;
}
.sbtn-outline:hover {
	border:1.5px solid #bfd5d1;
	background: rgba(123, 224, 213, .5) 15%;
	color:#222;
}

.sbtn-primary{
	border:none;

	color:white;

	background:
		linear-gradient(
			135deg,
			#28c9bb,
			#72ddd2
		);

	box-shadow:
		0 10px 30px rgba(68,211,198,0.22);
}

/* -------------------------------- */
/* CONTENT */
/* -------------------------------- */

.hero-inner{
	position:relative;
	z-index:2;

	width:100%;
	max-width:1600px;

	margin:0 auto;

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

	padding:
		40px 72px
		120px;
}

/* LEFT */

.hero-left{
	width:48%;
}

.hero-sub{
	color:#56cfc2;
	font-size:calc(1rem + 1vw);
	font-weight:700;

	margin-bottom:30px;
}

.hero-title{
	font-size:calc(4rem + 1.5vw);
	line-height:1;

	letter-spacing:-6px;
	font-weight:900;

	color:#111;

	margin-bottom:42px;
}

.hero-desc{
	font-size:calc(1rem + 0.2vw);
	line-height:1.8;
	color:#2d2d2d;

	word-break:keep-all;
}

.hero-buttons{
	margin-top:54px;

	display:flex;
	gap:24px;
}

.hero-sbtn{
	height:78px;
	padding:0 46px;

	border-radius:999px;

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

	font-size:26px;
	font-weight:700;

	cursor:pointer;
}

.hero-sbtn-primary{
	border:none;

	color:white;

	background:
		linear-gradient(
			135deg,
			#22c7b8,
			#72ddd2
		);

	box-shadow:
		0 18px 40px rgba(60,210,197,0.24);
}

.hero-sbtn-outline{
	background:white;
	border:2px solid #c9dcda;
	color:#222;
}

/* RIGHT */

.hero-right{
	position:relative;
	height:631px;
}

/* 메인 캐릭터 영역 */

.character-wrap{
	position:absolute;

	_right:150px;
	bottom:0px;

	_width:520px;
	_height:520px;

	border-radius:50%;

	background:
		radial-gradient(
			circle,
			rgba(120,220,210,0.14),
			rgba(120,220,210,0.04) 60%,
			transparent 75%
		);
	z-index:9;
}

/* 글래스 원 */

.glass-circle{
	position:absolute;

	border-radius:50%;

	background:
		rgba(255,255,255,0.74);

	border:
		1px solid rgba(255,255,255,0.9);

	backdrop-filter:blur(12px);

	box-shadow:
		0 12px 40px rgba(0,0,0,0.04);
}

.gc-school{
	width:190px;
	height:190px;

	top:30px;
	right:40px;
}

.gc-chat{
	width:170px;
	height:170px;

	top:520px;
	right:80px;
}

.gc-group{
	width:160px;
	height:160px;

	top:600px;
	left:20px;
}

/* -------------------------------- */
/* FLOATING SHAPES */
/* -------------------------------- */

.float{
	position:absolute;
}

/* plus */

.plus{
	width:24px;
	height:24px;
}

.plus::before,
.plus::after{
	content:"";
	position:absolute;
	background:#6bd9cd;
	border-radius:10px;
}

.plus::before{
	width:24px;
	height:4px;
	top:10px;
}

.plus::after{
	width:4px;
	height:24px;
	left:10px;
}

/* circle */

.circle{
	width:16px;
	height:16px;

	border-radius:50%;
	border:3px solid #77ddd2;
}

/* diamond */

.diamond{
	width:12px;
	height:12px;

	background:#ffd761;

	transform:rotate(45deg);
	border-radius:2px;
}

/* triangle */

.triangle{
	width:0;
	height:0;

	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-bottom:18px solid rgba(112,220,209,0.46);
}

/* positions */

.f1{
	top:90px;
	left:24%;
}

.f2{
	top:10px;
	left:50%;
}

.f3{
	top:250px;
	left:70px;
}

.f4{
	bottom:120px;
	right:250px;
}

.f5{
	top:460px;
	right:40px;
}

.f6{
	top:0px;
	right:0px;
}

.f7{
	top:0px;
	left:0px;
}