@charset "utf-8";

.flex {
	display: flex;
}
.flex_column {
	display: flex;
	flex-direction: column;
}
.flex_between {
	display: flex;
	justify-content: space-between;
}
.flex_around {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.flex_start {
	display: flex;
	align-items: start;
}
.flex_center {
	display: flex;
	align-items: center;
}
.flex_center_center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.flex_row_center {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.flex_between_center {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flex_end {
	display: flex;
	justify-content: flex-end;
}
.flex_just_center {
	justify-content: center;
}
.flex_baseline {
	align-items: baseline;
}

.flex_wrap {
	flex-wrap: wrap;
}
.flex_nowrap {
	flex-wrap: nowrap;
}
.display_block {
	display: block;
}
.display_none {
	display: none;
}

.g5 {
	gap: 5px;
}
.g10 {
	gap: 10px;
}
.g20 {
	gap: 20px;
}
.g25 {
	gap: 25px;
}
.g30 {
	gap: 30px;
}
.g40 {
	gap: 40px;
}
.g45 {
	gap: 45px;
}
.g50 {
	gap: 50px;
}
.g60 {
	gap: 60px;
}
.g80 {
	gap: 80px;
}
.g100 {
	gap: 100px;
}
.g140 {
	gap: 140px;
}

/* contents */
.intro-inner {
	position: relative;
	height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.intro-inner.grd1 {
	background: linear-gradient(139.1deg, #7f62e3 4.89%, #7255e7 11.02%, #b254ec 98.29%);
}
.intro-inner.grd2 {
	background: linear-gradient(139.1deg, #5755de 4.89%, #5855e7 11.02%, #5491ec 98.29%);
}

.intro-inner .logo {
	display: none;
}

.intro-inner .text {
	font-family: 'century Gothic';
}
.intro-inner .text > * {
	width: 360px;
	margin: 0 auto;
}
.intro-inner .text h3 {
	font-size: 34px;
	color: #fff;
	text-align: center;
	line-height: 140%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
}
.intro-inner .text h3 .txt_opacity {
	opacity: 0.6;
}
.intro-inner .text h3 .txt_point {
	color: #fff;
	border-bottom: 5px solid #fff;
	padding-bottom: 16px;
}

.intro-inner .text h3 .txt_small {
	color: #fff;
	font-size: 26px;
	width: 100%;
	font-weight: 200;
}

.intro-inner .text h4 {
	font-family: 'NotoSansKR';
	font-size: 12px;
	font-weight: 400;
	line-height: 150%;
	margin-top: 15px;
	color: #6a6d73;
}

.intro-inner .bg_01 {
	position: absolute;
	top: 20px;
	right: 30px;
}

.intro-inner .bg_02 {
	position: absolute;
	top: 310px;
	left: 20px;
}

.intro-inner .bg_03 {
	position: absolute;
	top: 330px;
	right: 25px;
}

.bg_01 img {
	width: 185px;
}
.bg_02 img {
	width: 120px;
}
.bg_03 img {
	width: 158px;
}

.intro-inner .bg_04 {
	position: absolute;
	top: 0px;
	right: 30px;
}

.intro-inner .bg_05 {
	position: absolute;
	top: 320px;
	left: 10px;
}

.intro-inner .bg_06 {
	position: absolute;
	top: 290px;
	right: 10px;
}

.bg_04 img {
	width: 160px;
}
.bg_05 img {
	width: 200px;
}
.bg_06 img {
	width: 170px;
}

.backimg-wrap {
	width: 100%;
	max-width: 1900px;
	height: 150px;
	position: absolute;
	top: 20px;
}

.intro-wrap {
	width: 100%;
	margin: auto;
	padding: 0 50px;
	box-sizing: border-box;
}

.in-wrap {
	width: 100%;
	height: 100%;
	background: #fff;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 50px;
}
.in-wrap.rvs {
	flex-direction: column-reverse;
}
.intro-section01 {
	width: 100%;
	padding: 110px 0px;
	height: auto;
}
.intro-section01 .text01 {
	font-size: 30px;
	font-weight: bold;
	color: #1c2f45;
	text-align: center;
	line-height: 52px;
}
.intro-section01 .text01 span {
	color: #6632fb;
}
.intro-section01 .text02 {
	width: 100%;
	text-align: center;
}
.intro-section01 .text02 h2 {
	font-size: 34px;
	font-weight: bold;
	letter-spacing: -0.03em;
	line-height: 52px;
}
.intro-section01 .text02 p {
	font-size: 16px;
	line-height: 28px;
	padding-top: 26px;
	word-break: keep-all;
	text-overflow: clip;
}

.intro-section02 {
	padding: 20px 20px 110px 20px;
	height: auto;
}
.intro-section02 .textbox {
	width: 100%;
	text-align: left;
}
.intro-section02 .textbox .small {
	font-size: 15px;
	line-height: 26px;
}
.intro-section02 .textbox .title {
	font-size: 42px;
	color: #1c2f45;
	font-weight: bold;
}
.intro-section02 .textbox .explan {
	font-size: 16px;
	line-height: 26px;
	letter-spacing: -0.03em;
	padding-top: 26px;
	word-break: keep-all;
	text-overflow: clip;
}
.intro-section02 .imgbox {
	width: 100%;
}
.intro-section02 .imgbox img {
	background-size: cover;
	width: 100%;
}
.intro-wrap {
	width: 100%;
	margin: auto;
	padding: 0 30px;
	box-sizing: border-box;
}

.intro-section02 .textbox a.c1 {
	background-color: #fff0eb;
}
.intro-section02 .textbox a.c2 {
	background-color: #fffae9;
}
.intro-section02 .textbox a.c3 {
	background-color: #fff1f3;
}
.intro-section02 .textbox a.c4 {
	background-color: #f1f2ff;
}

.c1 {
	color: #e36232;
}
.c2 {
	color: #de9a20;
}
.c3 {
	color: #d15762;
}
.c4 {
	color: #5258ce;
}
.c5 {
	color: #1c2f45;
	font-weight: 600;
}

/* 가로 해상도 768 이상 */
@media screen and (min-width: 768px) {
	/* contents */
	.intro-inner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.intro-inner .text {
		height: 250px;
	}
	.intro-inner .text > * {
		width: 500px;
	}

	.intro-inner .text h3 {
		font-size: 48px;
		letter-spacing: -0.01em;
		line-height: 120%;
		word-break: keep-all;
	}
	.intro-inner .text h4 {
		font-size: 22px;
		margin-top: 27px;
	}
	.intro-inner .bg01 {
		width: 1275px;
		top: -423px;
		transform: translateX(-26%);
	}
	.intro-inner .bg_01 {
		position: absolute;
		top: 5px;
		right: 40px;
	}
	.intro-inner .bg_02 {
		position: absolute;
		top: 240px;
		left: 34px;
	}
	.intro-inner .bg_03 {
		position: absolute;
		top: 310px;
		right: 135px;
	}
	.bg_01 img {
		width: 200px;
	}
	.bg_02 img {
		width: 150px;
	}
	.bg_03 img {
		width: 190px;
	}

	.intro-inner .bg_04 {
		position: absolute;
		top: 10px;
		right: 120px;
	}
	.intro-inner .bg_05 {
		position: absolute;
		top: 231px;
		left: 82px;
	}
	.intro-inner .bg_06 {
		position: absolute;
		top: 284px;
		right: 60px;
	}
	.bg_04 img {
		width: 150px;
	}
	.bg_05 img {
		width: 170px;
	}
	.bg_06 img {
		width: 180px;
	}

	.intro-section01 .text01 {
		font-size: 36px;
		font-weight: bold;
		color: #1c2f45;
		text-align: center;
	}
	.intro-section01 .text02 h2 {
		font-size: 38px;
		font-weight: bold;
		letter-spacing: -0.03em;
		line-height: 52px;
	}
	.intro-section02 .textbox .title {
		font-size: 28px;
		color: #1c2f45;
		font-weight: bold;
	}
}
/* 가로 해상도 1024 이상 */
@media screen and (min-width: 1024px) {
	/* contents */
	.intro-inner {
		height: 420px;
	}

	.intro-inner .logo {
		display: block;
		position: absolute;
		top: 30px;
		left: 50%;
		width: 940px;
		transform: translateX(-50%);
	}
	.intro-inner .logo a {
		margin-left: 16px;
		display: block;
		background: url(/images/logo_white.svg) no-repeat;
		background-size: contain;
		width: 136px;
		height: 30px;
		text-indent: -9999px;
	}
	.intro-inner .text {
		height: 80px;
		padding-top: 0;
	}
	.intro-inner .text > * {
		width: 940px;
	}
	.intro-inner .text h3 {
		font-size: 46px;
		letter-spacing: -0.01em;
		line-height: 140%;
	}
	.intro-inner .text h4 {
		font-size: 16px;
		margin-top: 22px;
	}

	.intro-inner .bg_01 {
		position: absolute;
		top: -20px;
		right: 130px;
	}
	.intro-inner .bg_02 {
		position: absolute;
		top: 175px;
		left: 150px;
	}
	.intro-inner .bg_03 {
		position: absolute;
		top: 178px;
		right: 240px;
	}
	.bg_01 img {
		width: 200px;
	}
	.bg_02 img {
		width: 140px;
	}
	.bg_03 img {
		width: 180px;
	}

	.intro-inner .bg_04 {
		position: absolute;
		top: 0px;
		right: 200px;
	}
	.intro-inner .bg_05 {
		position: absolute;
		top: 190px;
		left: 90px;
	}
	.intro-inner .bg_06 {
		position: absolute;
		top: 190px;
		right: 140px;
	}
	.bg_04 img {
		width: 150px;
	}
	.bg_05 img {
		width: 170px;
	}
	.bg_06 img {
		width: 180px;
	}
}
/* 가로 해상도 1280 이상 */
@media screen and (min-width: 1280px) {
	/* contents */
	main {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 420px;
		box-sizing: border-box;
	}

	.intro-wrap {
		position: relative;
		top: 380px;
		width: 100%;
		height: auto;
		margin: auto;
		padding: 0 50px;
		box-sizing: border-box;
	}

	.intro-wrap.study {
		width: 1200px;
		height: 100%;
		min-height: 3120px;
	}

	.intro-wrap.manage {
		width: 1200px;
		height: 100%;
		min-height: 3280px;
	}

	.intro-inner {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.intro-inner .logo a {
		margin-left: 0;
	}

	.intro-inner .text {
		height: 80px;
		padding-top: 0;
	}
	.intro-inner .text h3 {
		font-size: 46px;
	}
	.intro-inner .bg_01 {
		position: absolute;
		top: -20px;
		right: 231px;
	}
	.intro-inner .bg_02 {
		position: absolute;
		top: 195px;
		left: 244px;
	}
	.intro-inner .bg_03 {
		position: absolute;
		top: 200px;
		right: 340px;
	}
	.bg_01 img {
		width: 225px;
	}
	.bg_02 img {
		width: 145px;
	}
	.bg_03 img {
		width: 190px;
	}

	.intro-inner .bg_04 {
		position: absolute;
		top: 10px;
		right: 270px;
	}
	.intro-inner .bg_05 {
		position: absolute;
		top: 200px;
		left: 160px;
	}
	.intro-inner .bg_06 {
		position: absolute;
		top: 230px;
		right: 120px;
	}
	.bg_04 img {
		width: 160px;
	}
	.bg_05 img {
		width: 170px;
	}
	.bg_06 img {
		width: 190px;
	}

	.in-wrap {
		width: 100%;
		height: 100%;
		background: #fff;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
		gap: 80px;
	}
	.in-wrap.rvs {
		flex-direction: row;
	}
	.intro-section01 .textbox .title {
		font-size: 28px;
	}
	.intro-section01 .text02 h2 {
		font-size: 42px;
		font-weight: bold;
		letter-spacing: -0.03em;
		line-height: 52px;
	}
	.intro-section02 .textbox .title {
		font-size: 28px;
		color: #1c2f45;
		font-weight: bold;
	}
	.intro-section02 .textbox {
		width: 46%;
		text-align: left;
	}
	.intro-section02 .imgbox {
		width: 54%;
	}
}
/* 가로 해상도 1500 이상 */
@media screen and (min-width: 1500px) {
	/* contents */
	.intro-inner {
		padding-top: 160px;
	}
	.intro-inner .logo {
		top: 22px;
		width: 1180px;
	}
	.intro-inner .logo a {
		margin-left: 0;
		width: 167px;
		height: 36px;
	}
	.intro-inner .text {
		height: 250px;
		padding-top: 8px;
	}
	.intro-inner .text > * {
		width: 1180px;
	}
	.intro-inner .text h3 {
		font-size: 46px;
		letter-spacing: -0.01em;
	}
	.intro-inner .text h4 {
		font-size: 18px;
		padding-top: 25px;
	}

	.intro-inner .bg_01 {
		position: absolute;
		top: 0;
		right: 271px;
	}
	.intro-inner .bg_02 {
		position: absolute;
		top: 165px;
		left: 240px;
	}
	.intro-inner .bg_03 {
		position: absolute;
		top: 200px;
		right: 380px;
	}
	.bg_01 img {
		width: 225px;
	}
	.bg_02 img {
		width: 187px;
	}
	.bg_03 img {
		width: 190px;
	}

	.intro-inner .bg_04 {
		position: absolute;
		top: 10px;
		right: 380px;
	}
	.intro-inner .bg_05 {
		position: absolute;
		top: 207px;
		left: 280px;
	}
	.intro-inner .bg_06 {
		position: absolute;
		top: 200px;
		right: 270px;
	}
	.bg_04 img {
		width: 160px;
	}
	.bg_05 img {
		width: 170px;
	}
	.bg_06 img {
		width: 190px;
	}

	.intro-wrap.study {
		width: 1200px;
		height: 100%;
		min-height: 3120px;
	}

	.intro-wrap.manage {
		width: 1200px;
		height: 100%;
		min-height: 3280px;
	}
}
/* 가로 해상도 1920 이상 */
@media screen and (min-width: 1920px) {
	/* contents */
	.intro-inner .logo {
		top: 42px;
		width: 1500px;
	}

	.intro-inner .text {
		height: 282px;
		padding-top: 0;
	}
	.intro-inner .text > * {
		width: 1500px;
	}
	.intro-inner .text h3 {
		font-size: 48px;
	}
	.intro-inner .text h4 {
		font-size: 22px;
		margin-top: 32px;
	}

	.intro-inner .bg_01 {
		position: absolute;
		top: 0px;
		right: 320px;
	}
	.intro-inner .bg_02 {
		position: absolute;
		top: 170px;
		left: 310px;
	}
	.intro-inner .bg_03 {
		position: absolute;
		top: 200px;
		right: 380px;
	}
	.bg_01 img {
		width: 225px;
	}
	.bg_02 img {
		width: 177px;
	}
	.bg_03 img {
		width: 190px;
	}

	.intro-inner .bg_04 {
		position: absolute;
		top: 0px;
		right: 480px;
	}
	.intro-inner .bg_05 {
		position: absolute;
		top: 170px;
		left: 310px;
	}
	.intro-inner .bg_06 {
		position: absolute;
		top: 200px;
		right: 320px;
	}
	.bg_04 img {
		width: 155px;
	}
	.bg_05 img {
		width: 177px;
	}
	.bg_06 img {
		width: 190px;
	}
}
