@charset "euc-kr";

/* -- webfont -- */
@font-face {
	font-family: 'GMarketSans';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: 'GMarketSans';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'GMarketSans';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
	font-weight: 700;
	font-display: swap;
}



/* layout
------------------------------------------------------ */
.landing .lllcard {
	padding: 0 0 16rem;
	color: var(--ged-color-gray6);
	background: var(--ged-color-gray0);
}


/* -------- common -------- */
.lllcard-title {
	margin: 0 auto 4.8rem;
	font-family: 'GMarketSans';
	font-size: 4.8rem;
	font-weight: 900;
	color: var(--ged-color-gray8);
	letter-spacing: -0.06em;
	text-align: center;
}

.lllcard-title span {
	color: #fd4e23;
}


/* -------- intro -------- */
.lllcard-intro {
	height: 74rem;
	background: var(--ged-color-gray0) url('/images/landing/lllcard/bg_top.png') no-repeat center top;
}


/* -------- Æò»ý±³À°ÀÌ¿ë±ÇÀ̶õ? -------- */
.lllcard-info {
	margin: 5rem auto 0;
	text-align: center;
}

.lllcard-info .container {
	padding: 6rem 8rem;
	line-height: 1.5;
	font-size: 2rem;
	background: var(--ged-color-white);
	border-radius: 3rem;
	-ms-word-break: keep-all;
	word-break: keep-all;
}

.lllcard-info .container p {
	margin: 3.2rem auto 0;
	font-size: 2.2rem;
	font-weight: 800;
	color: #fd4e23;
}

/* -------- ½Åû¹æ¹ý -------- */
.lllcard-step {
	margin: 14rem auto 0;
}

.lllcard-step .step-card {
	display: flex;
	position: relative;
}

.lllcard-step .step-card::after {
	content: "";
	display: block;
	clear: both;
	position: absolute;
	bottom: -5rem;
	width: 120rem;
	height: 5rem;
	background: url('/images/landing/lllcard/method_shadow.png') no-repeat center top;
}

.lllcard-step .container .step-card>li {
	flex: 0 0 33.33333%;
	position: relative;
	padding: 4rem;
	width: 33.33333%;
	height: 48rem;
	background: var(--ged-color-white);
	letter-spacing: -0.04em;
	text-align: center;
}

.lllcard-step .container .step-card>li:nth-child(even) {
	background: #edeff0;
}

.lllcard-step .container .step-card>li:not(:first-child)::before {
	content: "\EA6E";
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: -2.4rem;
	top: 10rem;
	width: 4.8rem;
	height: 4.8rem;
	font-family: remixicon;
	font-size: 1.6em;
	color: var(--ged-color-gray8);
	background: var(--ged-color-white);
	border-radius: 6rem;
}

.lllcard-step .container .step-card>li:nth-child(odd)::before {
	background: #edeff0;
}

.lllcard-step .__title {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0.4rem 0 0;
	min-height: 6rem;
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--ged-color-gray8);
	word-break: keep-all;
}

.lllcard-step .__content {
	margin: 2.4rem 0 0;
	padding: 3.2rem 0 0;
	border-top: 1px solid var(--ged-color-gray2);
}

.lllcard-step .__content ul li {
	position: relative;
	padding: 0 0 0 1.2rem;
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--ged-color-gray7);
	text-align: left;
}

.lllcard-step .__content ul li:not(:first-child) {
	margin-top: 3.2rem;
}

.lllcard-step .__content ul li::before {
	content: "";
	display: inline-block;
	clear: both;
	position: absolute;
	left: 0;
	top: 9px;
	width: 3px;
	height: 3px;
	background: var(--ged-color-gray7);
}

.lllcard-step .__content ul li p {
	margin: 0.8rem 0 0;
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--ged-color-gray5);
}

.lllcard-step>a {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10rem auto 0;
	width: 72rem;
	height: 10rem;
	font-family: 'GMarketSans';
	font-size: 3rem;
	color: var(--ged-color-white);
	background: #fd4e23;
	letter-spacing: -0.06em;
}



/* 1200px
------------------------------------------------------ */
@media all and (max-width: 1200px) {

	/* layout
	------------------------------------------------------ */
	.landing .lllcard {
		padding: 0 0 10rem;
	}

	/* -------- common -------- */
	.lllcard-title {
		margin-bottom: 3.2rem;
		font-size: 3.6rem;
	}


	/* -------- intro -------- */
	.lllcard-intro {
		height: auto;
		padding-bottom: 40%;
		background-size: cover;
	}


	/* -------- Æò»ý±³À°ÀÌ¿ë±ÇÀ̶õ? -------- */
	.lllcard-info .container {
		padding: 5% 8%;
		font-size: 1.8rem;
	}

	.lllcard-info .container br {
		display: none;
	}

	.lllcard-info .container p {
		margin-top: 2rem;
		font-size: 1.9rem;
	}


	/* -------- ½Åû¹æ¹ý -------- */
	.lllcard-step {
		margin-top: 8rem;
	}

	.lllcard-step .container .step-card>li {
		padding: 3.6rem 3rem;
		height: auto;
		min-height: 48rem;
	}

	.lllcard-step .__title {
		font-size: 1.9rem;
	}

	.lllcard-step .__content ul li {
		padding: 0 0 0 0.8rem;
		font-size: 1.6rem;
		-ms-word-break: keep-all;
		word-break: keep-all;
	}

	.lllcard-step .__content ul li br {
		display: none;
	}

	.lllcard-step .__content ul li p {
		font-size: 1.4rem;
	}

	.lllcard-step>a {
		margin-top: 6rem;
		width: 70%;
		height: 7rem;
		font-size: 2.4rem;
	}

}



/* 767px
------------------------------------------------------ */
@media all and (max-width: 767px) {

	/* layout
	------------------------------------------------------ */
	.landing .lllcard {
		padding: 0 0 6rem;
	}

	/* -------- common -------- */
	.lllcard-title {
		margin-bottom: 3%;
		font-size: clamp(2.2rem, 3.5vw, 3.2rem);
	}


	/* -------- Æò»ý±³À°ÀÌ¿ë±ÇÀ̶õ? -------- */
	.lllcard-info {
		margin-top: 8%;
	}

	.lllcard-info .container {
		font-size: 1.6rem;
		border-radius: 1rem;
	}

	.lllcard-info .container p {
		margin-top: 3%;
		font-size: 1.65rem;
	}


	/* -------- ½Åû¹æ¹ý -------- */
	.lllcard-step {
		margin-top: 10%;
	}

	.lllcard-step .container .step-card {
		flex-direction: column;
	}

	.lllcard-step .step-card::after {
		width: 100%;
		background-position: right top;
		background-size: cover;
	}

	.lllcard-step .container .step-card>li {
		flex: 0 0 100%;
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding: 1.8rem 8% 3.6rem;
		min-height: auto;
	}

	.lllcard-step .container .step-card>li:not(:first-child)::before {
		left: 50%;
		top: -3rem;
		transform: translateX(-50%) rotate(90deg);
	}

	.lllcard-step .container .step-card>li img {
		width: 8rem;
	}

	.lllcard-step .__title {
		margin-left: 1rem;
		min-height: 4.8rem;
		font-size: 1.7rem;
		text-align: left;
	}

	.lllcard-step .__content {
		flex: 1 0 100%;
		margin-top: 1rem;
		padding-top: 2rem;
		width: 100%;
	}

	.lllcard-step .__content ul li {
		font-size: 1.5rem;
	}

	.lllcard-step .__content ul li:not(:first-child) {
		margin-top: 1.6rem;
	}

	.lllcard-step .__content ul li p {
		margin-top: 0.4rem;
		font-size: 1.3rem;
	}

	.lllcard-step>a {
		margin-top: 6%;
		width: 92%;
		height: 5rem;
		font-size: 1.7rem;
	}

}