@charset "utf-8";

/*	조력절차 - PC	*/
.intro_wrap {
	--intro-inline-padding: 200px;
	display: flex; flex-flow: column nowrap; align-items: center;
	width: 100%; height: auto;
	padding: 100px var(--intro-inline-padding);
}
/* 조력절차 제목 */
.intro_wrap .intro-main_tit {
	order: 1;
	width: auto; height: auto;
	text-align: center; color: #000;
	margin-bottom: 100px;
}
.intro_wrap .intro-main_tit h1 {
	font-size: 66px; font-weight: 800;
	margin-bottom: 60px;
}
.intro_wrap .intro-main_tit p {
	font-size: 24px; font-weight: 400; line-height: 36px;
	margin: 40px auto 50px auto;
}
.intro_wrap .intro-main_tit .intro-highlight {
	font-size: 24px; font-weight: 600; text-decoration: underline; text-decoration-color: #008000;
	margin-bottom: 10px;
}

/* 조력절차 순서 */
.intro_wrap .sec_commission {
	order: 2;
}
.intro_wrap .sec_administration {
	order: 3;
}
.intro_wrap .sec_investigation {
	order: 4;
}
.intro_wrap .sec_protection {
	order: 5;
}
.intro_wrap .sec_trial {
	order: 6;
}
	/* 조력절차 순서 : 성공사례&후기 */
.intro_wrap #sec_board {
	order: 7;
}
.intro_wrap #sec_board-link {
	order: 8;
}

/* 조력절차 본문 */
.intro_wrap .intro-article {
	display: flex; flex-flow: column nowrap; align-items: center;
	width: 100%; height: auto;
	margin-bottom: 140px;
}
.intro_wrap .intro-article .intro-art_tit {
	order: 1;
	width: 100%; height: auto;
	margin-bottom: 60px;
}
.intro_wrap .intro-article .intro-art_tit h2 {
	font-size: 58px; font-weight: 800; letter-spacing: 0.4px; text-align: center; color: #24A411; text-shadow: 2px 2px 0 rgba(51, 51, 51, 0.185)
}
.intro_wrap .intro-article .intro-art_conts {
	order: 2;
	width: 100%; height: auto;
	padding: 40px 60px; margin-bottom: 60px;
	background-color: #EFEFEF;
}
.intro_wrap .intro-article .intro-art_conts .conts_img-pc {
	display: block;
	width: 100%; height: auto; max-width: 1800px;
}
.intro_wrap .intro-article .intro-art_warn {
	order: 3;
	width: 60%; height: auto;
	margin-bottom: 60px;
}
.intro_wrap .intro-article .warn-pc {
	max-width: 800px; min-width: 740px;
}
.intro_wrap .intro-article .intro-art_lawyers {
	order: 4;
	width: 100%; height: auto;
	display: flex; flex-direction: column; align-items: center;
}
.intro_wrap .intro-article .intro-art_lawyers h3 {
	width: 240px; height: 55px;
	font-size: 26px; font-weight: 400; color: #fff; text-align: center; letter-spacing: 0.2px; line-height: 55px;
	margin: 0 auto  40px auto;
	background-color: #007200;
}
.intro_wrap .intro-lawyers_fixed {
	display: block;
	width: 100%; max-width: 890px;
}
.intro_wrap .intro-lawyers_fixed img {
	display: block;
	width: 100%; height: auto;
}
.intro_wrap .intro-lawyers_rolling {
	--lawyers-roll-width: 4020px;
	--lawyers-roll-height: 120px;
	--lawyers-roll-gap: 30px;
	--lawyers-photo-pitch: calc(var(--lawyers-roll-height) + var(--lawyers-roll-gap));
	--lawyers-photos-per-click: 3;
	--lawyers-button-size: clamp(44px, 4.5vw, 84px);
	--lawyers-button-inset: clamp(20px, 2.5vw, 48px);
	--lawyers-fade-width: clamp(96px, 13vw, 240px);
	position: relative;
	width: calc(100% + var(--intro-inline-padding) * 2);
	max-width: calc(var(--lawyers-roll-width) + var(--lawyers-roll-gap));
	height: var(--lawyers-roll-height);
	margin-top: 30px;
	overflow: hidden;
	content-visibility: auto;
}
.intro_wrap .intro-lawyers_track {
	display: flex;
	width: max-content;
	transform: translateX(calc(-1 * var(--lawyers-index, 0) * var(--lawyers-photo-pitch)));
}
.intro_wrap .intro-lawyers_track picture {
	flex: none;
	/* 반복 경계 간격 */
	padding-right: var(--lawyers-roll-gap);
}
.intro_wrap .intro-lawyers_track img {
	display: block;
	width: var(--lawyers-roll-width); height: var(--lawyers-roll-height);
	max-width: none;
}
.intro_wrap .intro-lawyers_rolling::before,
.intro_wrap .intro-lawyers_rolling::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset-block: 0;
	width: var(--lawyers-fade-width);
	pointer-events: none;
}
.intro_wrap .intro-lawyers_rolling::before {
	left: 0;
	background: linear-gradient(to right, #fff, transparent);
}
.intro_wrap .intro-lawyers_rolling::after {
	right: 0;
	background: linear-gradient(to left, #fff, transparent);
}
.intro_wrap .intro-lawyers_button:not([hidden]) {
	display: grid;
	place-items: center;
	position: absolute;
	z-index: 2;
	top: 50%;
	transform: translateY(-50%);
	width: var(--lawyers-button-size);
	height: var(--lawyers-button-size);
	padding: 0;
	border: 2px solid #D9D9D9;
	border-radius: 50%;
	background: #fff;
	color: #737373;
	box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
	cursor: pointer;
}
.intro_wrap .intro-lawyers_button:focus-visible {
	outline: 2px solid #007200;
	outline-offset: 2px;
}
.intro_wrap .intro-lawyers_prev {
	left: var(--lawyers-button-inset);
}
.intro_wrap .intro-lawyers_next {
	right: var(--lawyers-button-inset);
}
.intro_wrap .intro-lawyers_button::before {
	content: "";
	width: 26%; height: 26%;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}
.intro_wrap .intro-lawyers_prev::before {
	transform: translateX(20%) rotate(135deg);
}
.intro_wrap .intro-lawyers_next::before {
	transform: translateX(-20%) rotate(-45deg);
}
.intro_wrap .intro-article .intro-art_conts .conts_img-mo {
	display: none;
}
.intro_wrap .intro-article .warn-mo {
	display: none;
}

/*	조력절차 - ipad pro	*/
@media screen and (max-width: 1024px) {
	.intro_wrap {
		--intro-inline-padding: 100px;
		padding-block: 140px;
	}
	/* 조력절차 제목 */
	.intro_wrap .intro-main_tit {
		margin-bottom: 70px;
	}
	.intro_wrap .intro-main_tit h1 {
		font-size: 58px; margin-bottom: 30px;
	}
	.intro_wrap .intro-main_tit p {
		font-size: 22px; line-height: 32px; margin-bottom: 25px;
	}
	.intro_wrap .intro-main_tit .intro-highlight {
		margin-bottom: 14px;
	}

	/* 조력절차 본문 */
	.intro_wrap .intro-article {
		margin-bottom: 70px;
	}
	.intro_wrap .intro-article .intro-art_tit {
		margin-bottom: 50px;
	}
	.intro_wrap .intro-article .intro-art_tit h2 {
		font-size: 48px;
	}
	.intro_wrap .intro-article .intro-art_conts {
		padding: 30px 20px; margin-bottom: 40px;
	}
	.intro_wrap .intro-article .intro-art_conts .conts_img-pc {
		max-width: 1024px;
	}
	.intro_wrap .intro-article .intro-art_warn {
		width: 70%; margin-bottom: 40px;
	}
	.intro_wrap .intro-article .warn-pc {
		max-width: 700px; min-width: 500px;
	}
	.intro_wrap .intro-article .intro-art_lawyers h3 {
		width: 240px; height: 50px; margin: 0 auto  25px auto;
		font-size: 26px; line-height: 50px;
	}
}

/*	조력절차 - ipad air	*/
@media screen and (max-width: 820px) {
	.intro_wrap {
		--intro-inline-padding: 50px;
		padding-block: 100px;
	}
	/* 조력절차 제목 */
	.intro_wrap .intro-main_tit {
		margin-bottom: 60px;
	}
	.intro_wrap .intro-main_tit h1 {
		font-size: 40px; margin-bottom: 25px;
	}
	.intro_wrap .intro-main_tit p {
		font-size: 20px; line-height: 30px; margin-bottom: 40px;
	}
	.intro_wrap .intro-main_tit .intro-highlight {
		font-size: 20px; margin-bottom: 15px;
	}

	/* 조력절차 본문 */
	.intro_wrap .intro-article {
		margin-bottom: 60px;
	}
	.intro_wrap .intro-article .intro-art_tit {
		margin-bottom: 40px;
	}
	.intro_wrap .intro-article .intro-art_tit h2 {
		font-size: 36px;
	}
	.intro_wrap .intro-article .intro-art_conts {
		padding: 20px 15px;
	}
	.intro_wrap .intro-article .intro-art_conts .conts_img-pc {
		max-width: 820px;
	}
	.intro_wrap .intro-article .intro-art_warn {
		width: 70%;
	}
	.intro_wrap .intro-article .warn-pc {
		max-width: 580px; min-width: 450px;
	}
	.intro_wrap .intro-article .intro-art_lawyers h3 {
		width: 220px; height: 45px; margin: 0 auto 20px auto;
		font-size: 24px; line-height: 45px;
	}
}

/*	조력절차 - Mobile	*/
@media screen and (max-width: 640px) {
	.intro_wrap {
		--intro-inline-padding: 30px;
		padding-block: 50px;
	}

	/* 조력절차 제목 */
	.intro_wrap .intro-main_tit {
		margin-bottom: 50px;
	}
	.intro_wrap .intro-main_tit h1 {
		font-size: 36px; margin-bottom: 20px; letter-spacing: 0.2px; line-height: 52px;
	}
	.intro_wrap .intro-main_tit p {
		font-size: 14px; line-height: 24px; margin-bottom: 15px;
	}
	.intro_wrap .intro-main_tit .intro-highlight {
		font-size: 15px; margin-bottom: 12px;
	}

	/* 조력절차 본문 */
	.intro_wrap .intro-article {
		margin-bottom: 50px;
	}
	.intro_wrap .intro-article .intro-art_tit {
		margin-bottom: 30px;
	}
	.intro_wrap .intro-article .intro-art_tit h2 {
		font-size: 30px;
	}
	.intro_wrap .intro-article .intro-art_conts .conts_img-pc {
		display: none;
	}
	.intro_wrap .intro-article .intro-art_conts .conts_img-mo {
		display: block;
		width: 100%; height: auto; max-width: 360px;
	}
	.intro_wrap .intro-article .intro-art_conts {
		padding: 20px 15px; margin-bottom: 30px;
	}
	.intro_wrap .intro-article .intro-art_warn {
		width: 90%;
		margin: 0 auto 40px auto;
	}
	.intro_wrap .intro-article .warn-pc {
		display: none;
	}
	.intro_wrap .intro-article .warn-mo {
		display: block;
		max-width: 300px; min-width: 240px;
	}
	.intro_wrap .intro-lawyers_fixed {
		max-width: 280px;
	}
	.intro_wrap .intro-lawyers_rolling {
		--lawyers-roll-width: 2576px;
		--lawyers-roll-height: 80px;
		--lawyers-roll-gap: 16px;
		--lawyers-photos-per-click: 2;
		--lawyers-button-size: 44px;
		--lawyers-button-inset: 20px;
		--lawyers-fade-width: 76px;
		margin-top: 25px;
	}
	.intro_wrap .intro-article .intro-art_lawyers h3 {
		width: 200px; height: 45px;
		font-size: 22px; line-height: 45px;
		margin: 0 auto 20px auto;
	}
}