/************************** service **************************/
#service .process {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 0 80px;
	margin-bottom: 80px;
}
#service .process li {
	position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
#service .process li .img-wrap {
	position: relative;
	margin-bottom: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: var(--light-blue-color);
	transition: all .3s;
}
#service .process li.active .img-wrap {
	background: var(--main-color);
}
#service .process li .img-wrap img {
	width: 42px;
}
#service .process li .img-wrap img.on {
	display: none;
}
#service .process li strong {
	font-size: var(--font-regular);
	font-weight: 700;
	word-break: keep-all;
	transition: all .3s;
}
#service .process li .img-wrap::before {
	content: "";
    position: absolute;
    top: 50%;
    right: -120px;
    transform: translateY(-50%);
    width: 30px;
	height: 30px;
	background: url("../img/sub/rightarrow.png") no-repeat center;
}
#service .process li:last-child .img-wrap::before {
	display: none;
}
#service .process li.active .img-wrap img.off {
	display: none;
}
#service .process li.active .img-wrap img.on {
	display: block;
}
#service .process li.active strong {
	color: var(--main-color);
}
#service .case .swiper-slide {
	margin-bottom: 140px;
	height: 454px;
	border-radius: 30px;
	overflow: hidden;
}
#service .case .swiper-slide span {
	display: block;
	padding: 8px 18px;
	position: absolute;
	top: 40px;
	background: var(--white-color);
	border-radius: 10px;
	font-size: var(--font-regular);
	font-weight: 700;
	text-align: center;
}


#service .matching {
	position: relative;
	max-height: 706px;
}
#service .matching .wrap-in {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9;
}
#service .matching .sub-title-content {
	margin-bottom: 70px;
	color: var(--white-color);
	text-align: center;
	line-height: 1.2;
}
#service .matching .sub-title-content .b-blue {
	display: block;
	color: #388bff;
}
#service .matching .dimmed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(4, 12, 22, 0.9);
	z-index: 1;
}
#service .match-bg {
	position: relative;
	z-index: 0;
}
#service .match-bg.tablet {
	display: none;
}
#service .match-bg .swiper:nth-child(even) {
	margin: 10px 0;
}
#service .m-lawyer {
	display: flex;
	align-items: center;
}
#service .m-lawyer li {
	width: 50%;
	padding: 50px 0;
	border-radius: 500px;
	text-align: center;
}
#service .m-lawyer li {
	transform: scale(0);
	transition: all .8s ease-in-out;
}
#service .m-lawyer li:nth-child(1) {
	background: rgba(160, 199, 251, 0.6);
	margin-left: 100px;
}
#service .m-lawyer li:nth-child(2) {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	font-size: 60px;
	font-weight: 300;
	text-align: center;
	color: var(--white-color);
	transform: scale(0) translateX(-50%);
	z-index: 1;
}
#service .m-lawyer li:nth-child(3) {
	background: rgba(2, 78, 185, 0.6);
	margin-left: -100px;
	margin-right: 100px;
}
#service .wrap-in.on .m-lawyer li {
	transform: scale(1);
}
#service .wrap-in.on .m-lawyer li:nth-child(2) {
	transform: scale(1) translateX(-50%);
	transition-delay: 1.6s;
}
#service .wrap-in.on .m-lawyer li:nth-child(3) {
	transition-delay: .8s;
}
#service .m-lawyer li img {
	margin-bottom: 20px;
}
#service .m-lawyer li p {
	font-size: var(--font-basic);
	font-weight: 600;
	line-height: 1.3;
	color: var(--white-color);
}

#sub.contact {
	position: relative;
	padding: 140px 0;
	background: url("../img/sub/contact-bg.png") no-repeat center / cover;
}
#sub.contact .bg {
	position: absolute;
	top: 0;
	left: 0;
}
#sub.contact .sub-title-content {
	text-align: center;
}
#sub.contact .contact-btn, #cost .contact-btn {
	margin: 30px auto 0;
	background: var(--main-color);
	color: var(--white-color);
}
/************************** service **************************/


/************************** cost **************************/
#cost .cost-list {
	display: flex;
	gap: 0 20px;
}
#cost .cost-list > li {
	width: calc(33.33% - 10px);
	padding: 50px 30px;
	background: var(--white-color);
	border-radius: 30px;
	border: 1px solid var(--border-color);
	transition: all .3s;
}
#cost .cost-list li.active {
	border: 1px solid var(--main-color);
	background: var(--light-blue-color);
}
#cost .cost-list li:first-child.active {
	border: 1px solid #6798ed;
	background: #fafbff;
}
#cost .cost-list li:first-child .contact-btn {
	background: #82afff;
}
#cost .cost-list li:first-child > div {
	color: #82afff;
}
#cost .cost-list li:last-child.active {
	border: 1px solid var(--black-color);
	background: #fdfdff;
}
#cost .cost-list li:last-child .contact-btn {
	background: var(--black-color);
}
#cost .cost-list li:last-child > div {
	color: var(--black-color);
}
#cost .cost-list li > div {
	font-size: 26px;
	font-weight: 700;
	color: var(--main-color);
	text-align: center;
}
#cost .cost-list li > small {
	display: block;
	margin: 6px 0 40px;
	font-size: var(--font-menu);
	font-weight: 500;
	color: var(--gray-color);
	text-align: center;
}
#cost .cost-list li > ul {
	width: 84%;
	min-height: 176px;
	margin: 0 auto 30px;
}
#cost .cost-list li > ul li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 28px;
	font-size: var(--font-menu);
}
#cost .cost-list li > ul li:before {
	content: "✓";
	display: inline-block;
	width: 5px;
	height: 5px;
	position: absolute;
	top: 0;
	left: 3px;
	font-weight: bold;
	color: var(--main-color);
}
#cost .cost-list li > strong {
	display: block;
	padding-top: 30px;
	margin: auto;
	font-size: var(--font-mvtxt);
	text-align: right;
	letter-spacing: -0.02em;
	border-top: 1px solid var(--border-color);
}
#cost .cost-list li > strong span {
	display: inline-block;
	margin-right: 8px;
	font-size: 22px;
	font-weight: normal;
	text-decoration: line-through;
}
#cost .cost-list li > strong small {
	font-size: var(--font-menu);
	font-weight: normal;
}
#cost #sub.contact {
	position: relative;
	padding: 140px 0;
	background: var(--white-color);
}
#cost .contact-btn {
	margin-top: 70px;
	width: 200px;
	font-size: var(--font-regular);
}
/************************** cost **************************/


/************************** contact **************************/
#contact .c-contents {
	width: 100%;
	padding: 100px 50px 150px;
	background: var(--light-blue-color);
}
#contact .c-contents .check {
	gap: 20px;
}
#contact .c-contents > div {
	max-width: 1000px;
	margin: 0 auto 30px;
}
#contact .c-contents > div:nth-child(2) {
	margin-bottom: 20px;
}
#contact .c-contents strong {
	display: block;
	margin-bottom: 10px;
	font-size: var(--font-regular);
}
#contact .input-box {
	position: relative;
	margin-bottom: 6px;
}
#contact .input-box span {
	position: absolute;
	top: 10px;
	right: 10px;
	color: var(--main-color);
}
#contact .input-box label {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 1px;
	padding: 12px 15px;
	font-size: var(--font-menu);
	color: var(--gray-color);
	cursor: text;
}
#contact .input-box input[type="text"] {
	width: 100%;
	height: 58px;
	line-height : normal;
	padding: 12px 15px;
	font-size: var(--font-menu);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	outline-style: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
#contact textarea.textarea {
	width: 100%;
	height: 250px;
	background-color: var(--white-color);
	resize: vertical;
	color: black;
	border: none;
	outline: none;
	padding: 12px 15px;
	font-size: var(--font-menu);
	border: 1px solid var(--border-color);
	border-radius: 8px;
}
#contact .check input[type="checkbox"] {
    -webkit-appearance: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
	margin-right: 5px;
    width: 20px;
    height: 20px;
    outline: none;
    border: 1px solid var(--border-color);
	border-radius: 4px;
    vertical-align: middle;
    cursor: pointer;
}
#contact .check input[type="checkbox"]::before {
    border-radius: 4px;
    line-height: 1;
    overflow: hidden;
    transform: scale(0) translate(-50%, -50%);
}
#contact .check input[type="checkbox"]:checked {
    background: var(--main-color);
    color: white;
    border: 1px solid var(--main-color);
}
#contact .check input[type="checkbox"]:checked::before {
    content: "\2713";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: scale(1) translate(-50%, -50%)
}

#contact .check input[type="radio"] {
    -webkit-appearance: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
	margin-right: 5px;
    width: 20px;
    height: 20px;
    outline: none;
    border: 1px solid var(--border-color);
	border-radius: 50%;
    vertical-align: middle;
    cursor: pointer;
}
.#contact .check input[type="radio"]::before {
    border-radius: 50%;
    line-height: 1;
    overflow: hidden;
    transform: scale(0) translate(-50%, -50%);
}
#contact .check input[type="radio"]:checked {
    background: var(--main-color);
    color: white;
    border: 1px solid var(--main-color);
}
#contact .check input[type="radio"]:checked::before {
    content: "\2713";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: scale(1) translate(-50%, -50%)
}

#contact .contact-btn {
	margin: 80px auto 0;
	background: var(--main-color);
    color: var(--white-color);
}
/************************** contact **************************/


/************************** privacy **************************/
#privacy {
	padding-top: 80px;
}
#privacy .wrap-in {
	margin: auto;
    border-bottom: 1px solid #ddd;
}
#privacy .tilte {
	margin-bottom: 50px;
	font-size: 40px;
	font-weight: bold;
    text-align: center;
}
#privacy h3 {
    display: block;
    margin-bottom: 50px;
    font-size: 16px;
    font-weight: 500;
	line-height: 1.4;
}
#privacy ul {
    margin-bottom: 180px;
}
#privacy li {
    margin-bottom: 50px;
    font-size: 16px;
    line-height: 1.5;
}
#privacy ul li > div {
	margin-bottom: 30px;
}
#privacy li strong {
	display: block;
}
#privacy li p:nth-child(2) {
    margin-top: 5px;
}
/************************** privacy **************************/


@media all and (max-width:1501px) {
	#service .process li .img-wrap::before {right: -5em;}
	#service .m-lawyer li img {width: 90px;}
	#service .m-lawyer li:nth-child(2) {font-size: 40px;}
}

@media all and (max-width:1281px) {
	#service .process li .img-wrap {width: 140px; height: 140px;}

	#service .case .swiper-slide {height: 380px;}

	#service .matching .sub-title-content {margin-bottom: 50px;}
	#service .m-lawyer li:nth-child(1) {margin-left: 80px;}
	#service .m-lawyer li:nth-child(3) {margin-left: -80px; margin-right: 80px;}
	#service .m-lawyer li img {width: 80px; margin-bottom: 14px;}

	#cost .cost-list > li {padding: 50px 20px;}
	#cost .cost-list li > ul, #cost .cost-list li > strong {width: 90%;}
	#cost .cost-list li > div {font-size: 24px; word-break:keep-all;}
	#cost .cost-list li > strong span {display: block; margin-right: 0; font-size: 20px;}
}

@media all and (max-width:1025px) {
	#service .process {gap: 0 50px;}
	#service .process li .img-wrap::before {width: 24px; height: 24px; background-size: contain; right: -3.5em;}
	#service .process li .img-wrap {width: 120px; height: 120px;}
	#service .process li .img-wrap img {width: 36px;}

	#service .case .swiper-slide {margin-bottom: 100px; height: 300px;}

	#service .matching .sub-title-content {margin-bottom: 30px;}
	#service .m-lawyer li {padding: 40px 0;}
	#service .m-lawyer li:nth-child(2) {padding: 50px 0;}
	#service .m-lawyer li:nth-child(1) {margin-left: 50px;}
	#service .m-lawyer li:nth-child(3) {margin-left: -50px; margin-right: 50px;}
	#service .m-lawyer li p {font-size: 18px;}

	#service .contact {padding: 100px 0;}
	#service .matching {max-height: 690px;}

	#cost .cost-list {flex-wrap: wrap; gap: 20px 20px;}
	#cost .cost-list > li {width: calc(50% - 10px); border-radius: 20px;}
	#cost .cost-list li > ul, #cost .cost-list li > strong {width: 100%;}
	#cost .cost-list li > small, #cost .cost-list li > ul {margin-bottom: 20px;}
	#cost .cost-list li > strong {padding-top: 20px;}
	#cost .contact-btn {margin-top: 40px;}
	
	#privacy .tilte {font-size: 30px;}
	#privacy ul {margin-bottom: 100px;}
}


@media all and (max-width:877px){
	#service .m-lawyer {flex-direction: column;}
	#service .m-lawyer li {width: 80%;}
	#service .m-lawyer li:nth-child(1) {margin-left: 0px;}
	#service .m-lawyer li:nth-child(3) {margin-left: 0px; margin-right: 0px;}
	#service .m-lawyer li:nth-child(2) {position: relative; padding: 20px 0; text-align: center; top: initial; left: initial; transform: initial; transform: scale(0);}
	#service .wrap-in.on .m-lawyer li:nth-child(2) {transform: scale(1);}

	#service .matching {max-height: 900px; overflow: hidden;}
	#service .match-bg {display: none;}
	#service .match-bg.tablet {display: block;} 

	#cost .cost-list {flex-direction: column;}
	#cost .cost-list > li {width: 450px; margin: auto;}
}

@media all and (max-width:768px){
	#service .process {grid-template-columns: 26.5% 26.5% 26.5%; grid-gap: 2rem;}
	#service .process li .img-wrap::before {width: 20px; height: 20px; right: -3em;}

	#service .m-lawyer li {width: 100%;}

	#contact .c-contents .check {flex-direction: column; gap: 10px 0;}
}

@media all and (max-width:641px){
	#service .process {grid-template-columns: 26.5% 26.5% 26.5%; grid-gap: 1.5rem;}
	#service .process li .img-wrap {margin-bottom: 20px;}
	#service .process li .img-wrap::before {width: 12px; height: 12px; right: -2em;}

	#service .m-lawyer li:nth-child(2) {padding: 15px 0;}

	#service .contact {padding: 90px 0;}
	#service .contact-btn {margin-top: 20px;}

	#cost .cost-list > li {padding: 40px 20px;}

	#contact .c-contents {padding: 60px 20px 120px;}
	#contact .c-contents > div:nth-child(2) {margin-bottom: 10px;}
	#contact .contact-btn {margin-top: 50px;}
	#contact .check label {font-size: 14px;}
	#contact textarea.textarea {height: 200px;}

	#privacy .tilte {font-size: 26px;}
	#privacy .tilte, #privacy h3 {margin-bottom: 40px;}
	#privacy ul {margin-bottom: 90px;}
}

@media all and (max-width:481px){
	#service .process {margin-bottom: 60px; grid-template-columns: 41.8% 41.8%;}
	#service .process li .img-wrap {width: 100px; height: 100px;}
	#service .process li .img-wrap img {width: 30px;}
	#service .process li .img-wrap::before {width: 16px; height: 16px; right: -2.3em;}

	#service .case .swiper-slide {margin-bottom: 90px;}
	#service .case .swiper-slide {height: 250px; border-radius: 20px;}
	#service .case .swiper-slide span {top: 24px;font-size: 14px;}

	#service .matching {max-height: 700px;}
	#service .matching .sub-title-content .b-blue {display: inline; padding: 0 5px;}
	#service .m-lawyer li {padding: 30px 0;}
	#service .m-lawyer li:nth-child(2) {padding: 10px 0; font-size: 30px;}
	#service .m-lawyer li img {width: 66px; margin-bottom: 12px;}
	#service .m-lawyer li p {font-size: 16px;}
	#cost .cost-list > li {width: 100%; margin: auto;}
	#cost .cost-list li > strong {font-size: 24px;}
	#cost .cost-list li > strong span {font-size: 18px;}

	#privacy .tilte, #privacy h3 {margin-bottom: 30px;}
}