@charset "UTF-8";
:root {
	/* viewport */
	--header-height: 96px;
	--view-height: calc(var(--vh, 1vh) * 100);

	--primary: #138360;
	--yellow: #EECC1A;


	/* transition */
	--transition-duration-300: 300ms;
	--transition-duration-500: 500ms;
}

/* init */
	* { font-size: inherit; letter-spacing: -0.02em; }
	html { font-size: 10px; } /* 데스크탑 기준 16px~17px */
	body { color: #333; background: #fff; font-size: clamp(15px, 1.9rem, 17px); line-height: 1.5; }
	/* input, select ,textarea */
	a { color: currentColor; }
	a:not(.btn):active { opacity: 0.8; }
	input, select, textarea, button {  }
	input::placeholder, textarea::placeholder { }
	select {  }
	img { vertical-align: top; max-width: 100%; }
	pre { white-space: pre-line; }

/* button */
	.btn_area { display: flex; justify-content: center; align-items: center; }
	.btn { transition-property: all; transition-duration: var(--transition-duration-300); background: var(--yellow); cursor: pointer; }
	.btn { display: inline-flex; justify-content: center; align-items: center; gap: 2px; line-height: 1em; color: #000; font-size: 18px; font-weight: 600; letter-spacing: -0.03em; }
	.btn:active { opacity: 0.8; }

/* asset */
	.bold { font-weight: 700; }
	.medium { font-weight: 500; }
	.primary { color: var(--primary); }

/* frame */
	/* view height */
	.vh-container { display: flex; justify-content: flex-start; align-items: stretch; flex-direction: column; width: 100%; min-height: var(--view-height); overflow: hidden; }
	.vh-header-wrap,
	.vh-footer-wrap { flex-shrink: 0; }
	.vh-header-wrap { position: sticky; top: 0; z-index: 100; }
	.vh-content-wrap { flex-grow: 1; display: flex; justify-content: flex-start; align-items: stretch; flex-direction: column; }
	.inner { position: relative; z-index: 100; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 4rem; }

	body { height: 2000px; }

/* intro */
	.main-intro { display: flex; justify-content: center; align-items: center; position: relative; height: var(--view-height); background: #fff; padding: 64px 0; }
	.main-intro .logo { width: min(30vw, 515px); margin-bottom: max(120px, 8vh); }
	.main-intro .content { padding-left: 10rem; }
	.main-intro h2 { font-size: clamp(60px, 6rem, 60px); font-weight: 200; line-height: 1.2; margin-bottom: 16px; }
	.main-intro h1 { font-size: clamp(60px, 6rem, 60px); line-height: 1.3; margin-bottom: 36px; font-weight: 800; }
	.main-intro pre { font-size: clamp(15px, 1.7rem, 17px); }
	.main-intro .btn { font-size: clamp(16px, 2rem, 20px); padding: 2.2rem 3.6rem; border-radius: 4rem; margin-top: 32px; font-weight: 700; }
	.intro-background { 
		position: absolute; 
		left: 55%; 
		top: 50%; 
		z-index: 1;
		transform: translate3d(0, -50%, 0);
		-webkit-transform: translate3d(0, -50%, 0);
		width: 650px;
		height: 750px;
		/* width: max(650px, 26vw);
		height: max(750px, 30vw); */
	}
	.intro-background .mask {
		width: 100%;
		height: 100%;
	}
	.intro-background .mask img {
		max-width: inherit;
		height: 100%;

		object-position: center;
		object-fit: contain;
		-webkit-mask: url("data:image/svg+xml,%3Csvg width='1300' height='975' viewBox='0 0 1300 975' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M45.8805 598.889C-4.62775 559.220 -14.5612 486.653 23.4337 434.883L291.932 69.0393C312.879 40.498 345.447 22.7653 380.787 20.6588L1083.96 -21.2554C1146.85 -25.004 1201.77 20.913 1209.21 83.4726C1240.5 220.5 1280.8 350.8 1256.3 479.179C1261.71 524.709 1240.49 569.301 1201.74 593.811L629.012 956.069C586.442 982.995 531.53 980.202 491.911 949.095L45.8805 598.889Z' fill='%23fff'/%3E%3C/svg%3E%0A");
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: left center;
		-webkit-mask-size: 100% 100%;

		mask-image: url("data:image/svg+xml,%3Csvg width='1300' height='975' viewBox='0 0 1300 975' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M45.8805 598.889C-4.62775 559.232 -14.5612 486.653 23.4337 434.883L291.932 69.0393C312.879 40.498 345.447 22.7653 380.787 20.6588L1083.96 -21.2554C1146.85 -25.004 1201.77 20.913 1209.21 83.4726C1240.5 220.5 1280.8 350.8 1256.3 479.179C1261.71 524.709 1240.49 569.301 1201.74 593.811L629.012 956.069C586.442 982.995 531.53 980.202 491.911 949.095L45.8805 598.889Z' fill='%23fff'/%3E%3C/svg%3E%0A");
		mask-repeat: no-repeat;
		mask-position: left center;
		mask-size: 100% 100%;
		overflow: hidden;
	}

/* text banner */
	.main-text-banner { 
		position: relative;
		background: var(--primary);
	}
	.main-text-banner .content {
		position: absolute;
		inset: 0;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		gap: 2.3rem;
	}
	.main-text-banner .content p {
		font-size: clamp(32px, 3.6rem, 36px);
		font-weight: 700;
		color: #39E1AD;
	}
	.main-text-banner .content a {
		font-size: clamp(56px, 6.4rem, 64px);
		font-weight: 800;
		color: #fff;
	}
	.main-text-banner .content .btn {
		font-size: clamp(18px, 2.2rem, 22px);
		font-weight: 700;
		color: #333;
		padding: 1.2rem 3.2rem;
		border-radius: 5rem;
	}
	.line-text { padding: 9.6rem 0 2.7rem; overflow: hidden; }
	.line-text ul { display: flex; justify-content: flex-start; align-items: center; padding: 0 4rem; }
	.line-text li { display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; }
	.line-text p { font-size: clamp(90px, 11vw, 140px); font-weight: 700; color: #0C7554; font-family: 'SBAggroB'; }
	.main-text-banner:last-child .line-text { padding: 14rem 0 2.7rem; }
	.main-text-banner:last-child .line-text ul {  }


	.main-section {
		position: relative;
		padding: 15rem 0 25rem;
	}
	.main-section-title {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.main-section-title h1 {
		position: relative;
		font-size: clamp(60px, 6rem, 60px);
		font-weight: 800;
	}
	.main-section-title h2,
	.main-section-title h2 span {
		font-size: clamp(40px, 4.4rem, 44px);
		font-weight: 700;	
		margin: 0.4em 0;
	}
	.under_text { position: relative; padding: 0.2rem; }
	.under_text:before { content: ""; position: absolute; left: 0; bottom: 9%; width: 100%; height: 25%; background: var(--yellow); }
	.under_text * { position: relative; z-index: 10; }

	.quote_text { position: relative; padding: 0.3em 0.6em; }
	.quote_text:before,
	.quote_text:after { position: absolute; font-size: clamp(60px, 6rem, 60px); color: #CAD1C6; height: 0.5em; line-height: 0.94em; }
	.quote_text:before { content: "“"; left: 0; top: 0; }
	.quote_text:after { content: "”"; right: 0; bottom: 0; }

	#section_03 { background: rgb(247, 250, 245); }
	#section_03 p { text-align: center; font-size: clamp(20px, 2.2rem, 22px); }
	#section_03 .flex-box { position: relative; display: flex; justify-content: flex-end; align-items: flex-end; margin-top: 9.6rem; }
	#section_03 .img { position: relative; padding-right: 5.4rem; text-align: right; }
	#section_03 .img img { width: 43rem; }
	#section_03 .text { width: 50%; }
	#section_03 .text h5 { font-size: clamp(32px, 3.6rem, 36px); font-weight: 700; line-height: 1.4; margin-bottom: 3rem; }
	#section_03 .text pre { font-size: clamp(14px, 1.6rem, 16px); line-height: 1.4; }
	#section_03 .particle { position: absolute; left: -4rem; bottom: 0; z-index: 10; }
	#section_03 .particle img { width: 18rem; }

	#section_04 .flex-box { position: relative; display: flex; justify-content: flex-end; align-items: flex-start; margin-top: 14rem; }
	#section_04 .img { width: 40%; position: relative; text-align: right; margin-top: 3rem; }
	#section_04 .img img { width: 100%; }
	#section_04 .particle { position: absolute; z-index: 10; }
	#section_04 .particle img { width: 100%; }

	#section_04 .inner .particle:nth-child(2) { right: 0; top: 20%; width: max(10rem, 190px); }
	#section_04 .inner .particle:nth-child(3) { left: 10%; bottom: 0; width: max(10rem, 230px); }
	#section_04 .inner .particle img { width: 27rem; }

	#section_04 > .particle { left: 15%; bottom: -15%; }
	#section_04 > .particle img { width: max(10rem, 230px); }

	#section_04 ul { margin-right: -10%; }
	#section_04 li + li { margin-top: min(60px, 6rem); }
	#section_04 .text { position: relative; z-index: 10; }
	#section_04 .text-tit { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 2rem; }
	#section_04 .text-tit img { width: min(40px, 4rem); margin-right: min(13px, 1.3rem); }
	#section_04 .text-tit span { font-size: clamp(28px, 2.8rem, 32px); font-weight: 700; }
	#section_04 .text pre { font-size: clamp(14px, 1.6rem, 16px); }


@media(max-width: 1024px){
	.inner { padding: 0 20px; }
	
	.main-intro { height: auto; flex-direction: column; padding: 20px 0 80px; min-height: inherit; justify-content: flex-start; align-items: stretch; }
	.main-intro .logo { width: 120px; margin-bottom: 30px; }
	.main-intro .content { padding-left: 0; }
	.main-intro h2 { font-size: 20px; }
	.main-intro h1 { font-size: 24px; word-break: keep-all; margin-bottom: 20px; }
	.main-intro pre { font-size: 12px; }
	.main-intro .btn { font-size: 14px; padding: 10px 24px; }
	.intro-background { display: none; position: absolute; top: 0; margin-left: auto; transform: none; -webkit-transform: none; opacity: 0.8; width: 300px; height: 330px; max-width: 100%; opacity: 0.5; }

	.main-text-banner .content { gap: 10px; }
	.main-text-banner .content p { font-size: 14px; }
	.main-text-banner .content a { font-size: 24px; }
	.main-text-banner .content .btn { font-size: 16px; padding: 8px 24px; }
	.line-text { height: 180px; }
	.line-text ul { height: 100%; }
	.line-text p { font-size: 48px; }

	.main-section { position: relative; padding: 60px 0; }
	.main-section-title h1 { font-size: 20px; margin-bottom: 24px; }
	.main-section-title h2 { margin-bottom: 16px; }
	.main-section-title h2, 
	.main-section-title h2 span { font-size: 18px; }
	.quote_text:before, .quote_text:after { font-size: 16px; }


	#section_03 p { font-size: 12px; word-break: keep-all; }
	#section_03 p br { display: none; }
	#section_03 .flex-box { flex-direction: column; }
	#section_03 .text { width: 100%; order: 1; margin-top: 24px; }
	#section_03 .text h5 { font-size: 13px; margin-bottom: 16px; }
	#section_03 .text pre { font-size: 12px; }
	#section_03 .img { order: 2; width: 100%; max-width: 240px; margin: 30px auto; padding-right: 0; }
	#section_03 .img > img { width: 100%; }
	#section_03 .particle {  }
	#section_03 .particle img { width: 100px; }

	#section_04 .flex-box { flex-direction: column; }
	#section_04 ul { margin-right: 0; }
	#section_04 .text-tit img { flex-shrink: 0; width: 20px; margin-right: 8px; }
	#section_04 .text-tit span { font-size: 14px; }
	#section_04 .text pre { white-space: inherit; word-break: keep-all; font-size: 12px; }
	#section_04 .img { position: static; width: 100%; max-width: 280px; margin: 30px auto; }
	#section_04 .inner .particle:nth-child(2),
	#section_04 .inner .particle:nth-child(3) { width: auto; }
	#section_04 .inner .particle:nth-child(3) { bottom: 30%; left: 0px; }
	#section_04 .inner .particle:nth-child(2) img,
	#section_04 .inner .particle:nth-child(3) img { width: 100px; }
	#section_04 > .particle { display: none; left: 30px; bottom: -80px; }
	#section_04 > .particle img { width: 100px; }
}