@charset "UTF-8";
body {font-family: 'GmarketSans', sans-serif;}
/* 전체 레이아웃 */
.common_wrap {width: 100%; min-height: 100vh; background: radial-gradient(circle at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0) 55%), linear-gradient(100deg, #8fd3f4 0%, #d1c4f6 40%, #fcb6d0 80%); background-repeat: no-repeat; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow-x: hidden;}

.content_wrap {width: 1200px; margin: 0 auto;}
.intro_header h1 {font-size: 50px; color: #4585CF; margin-bottom: 125px; position: relative;}

.intro_contents {display: flex; justify-content: space-between; align-items: flex-start;}

.left_button {display: flex; flex-direction: column; gap: 17px; align-items: flex-start;}

.middle_img.intro02 {flex: 1; display: flex; flex-direction: column; align-items: center; margin: 0 50px;}
.middle_img.intro02 > img {margin-bottom: 50px;}
.mid_button {display: flex; gap: 10px; align-items: center; justify-content: center;}
.mid_button > a {width: 250px !important;}
.mid_button > a > img {width: 64%;}
.right_button {display: flex; flex-direction: column; gap: 17px; align-items: flex-end;}

.intro_btn {display: flex; gap: 20px; align-items: center; justify-content: center;}
.intro_btn a {font-size: 20px; font-weight: 600; color: #fff; background-color: #4585CF; border-radius: 8px; display: flex; align-items: center; justify-content: center; width: 280px; flex-direction: column; line-height: 1.3; padding: 21px 10px 15px 10px; text-align: center;}
.right_button a {background-color: #DD6596;}
.intro_btn .mobile_btn {display: none;}


@media (max-width: 1200px){
    .content_wrap {width: 100%; padding: 0 20px; box-sizing: border-box;}
    .intro_header h1 {font-size: 45px; margin-bottom: 120px;}
    .intro_contents {gap: 30px;}
}

@media (max-width: 1024px){
    .content_wrap {width: 100%; padding: 0 15px; box-sizing: border-box;}
    .intro_header h1 {font-size: 40px; margin-bottom: 100px;}
    .intro_contents {gap: 20px;}
}

@media (max-width: 768px){
    .common_wrap {min-height: 100vh; padding: 20px 0; box-sizing: border-box;}
    .content_wrap {width: 100%; padding: 0 20px; box-sizing: border-box;}
    .intro_header h1 {font-size: 35px; margin-bottom: 10px;}
    .intro_contents {flex-direction: column; align-items: center; gap: 20px;}
    
}

@media (max-width: 640px){
    .common_wrap {min-height: 100vh; padding: 40px 0; box-sizing: border-box;}
    .content_wrap {width: 100%; padding: 0 20px; box-sizing: border-box;}
    .intro_header h1 {font-size: clamp(20px, 12vw, 77px); position: relative; width: 100%;}
    .intro_header h1 span {position: relative;}
    .intro_header h1 span::after {display: block; content: ''; position: absolute; background: url(../images/n_intro/img_intro_main04.png) no-repeat; width: 43px; height: 34px; top: -38px; left: 0px;}
    .intro_contents {flex-direction: column; align-items: center; gap: 20px;}
}

@media (max-width: 530px){
    .intro_header h1 {font-size: clamp(20px, 11vw, 77px);}

@media (max-width: 480px){
    .common_wrap {min-height: 100vh; padding: 10px 0; box-sizing: border-box;}
}

@media (max-width: 380px){
}

}
/* =========================
   공통 보정
========================= */
.intro_btn a {
	box-sizing: border-box;
	word-break: keep-all;
}

/* =========================
   태블릿 (1024px 이하)
========================= */
@media (max-width: 1024px) {

	.intro_contents {
		gap: 24px;
	}

	.intro_btn a {
		font-size: 22px;
		width: 240px;
	}

	.intro02 {
		margin: 0 20px;
	}

	.middle_img.intro02 > img {
		max-width: 100%;
		height: auto;
	}
    
}

/* =========================
   모바일 (768px 이하)
========================= */
@media (max-width: 768px) {

	.intro_contents {
		flex-direction: column;
		align-items: stretch;
	}

	.left_button,
	.right_button {
		align-items: stretch;
	}

	.intro_btn {
		width: 100%;
        gap: 12px;
	}

	.intro_btn a {
		width: 100%;
		font-size: 20px;
		padding: 15px 0 12px 0;
	}
    .intro_btn a br {display: none;}
	.middle_img.intro02 {
		margin: 20px 0;
	}

	.middle_img.intro02 > img {
		width: 80% !important;
		max-width: 320px !important;
	}

	.mid_button {
		flex-direction: column;
		gap: 12px;
	}

	.mid_button > a {
		width: 100% !important;
	}
    .intro_btn .mobile_btn {display: block;}
    .intro_btn .pc_btn {display: none;}
}

/* =========================
   소형 모바일 (480px 이하)
========================= */
@media (max-width: 480px) {

	.intro_header h1 {
		font-size: 28px;
		margin-bottom: 20px;
		text-align: center;
	}

	.intro_btn a {
		font-size: 18px;
		border-radius: 6px;
	}

	.middle_img.intro02 > img {
		width: 70%;
	}
}

/* =========================
   초소형 모바일 (360px 이하)
========================= */
@media (max-width: 360px) {

	.intro_btn a {
		font-size: 16px;
	}
}