@charset "utf-8";
/* sub visual */
#sub_visual::before {background-image: url("/images/susang/guide/sub_visual.jpg");}

/* 운영개요 */

.step_list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 2rem 0;padding: 0;
	gap: 0.5rem;
}
.step_list li{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	margin: 0;
	padding: 4rem 2rem;
	background-color: #EEF2F7;	
	border-radius: 0.5rem;
}
.step_list li span {
	padding: 0;
	font-size: clamp(1.4rem, 1.5vw, 1.6rem);
	font-weight: 500;
	color: #111;	
}
.step_list li:before {
	position: absolute;
	display: block;
	content: "";
	right: -1.6rem;top: 50%;
	width: 3.2rem;height: 3.2rem;
	background-color: #244EA2;
	border-radius: 99rem;
    transform: translateY(-50%);
	z-index: 9;
}
.step_list li:after {
	position: absolute;
	display: block;
	content: "";
	right: -0.6rem;top: 50%;
	width: 0.8rem;height: 0.8rem;
	border-width: 0 2px 2px 0;
	border-style: solid;
	border-color: #fff;
	transform: rotate(-45deg) translateY(-50%);
	z-index: 9;
}
.step_list li.last:before,
.step_list li.last:after {display: none;}

@media (max-width: 1024px){
	.step_list {flex-direction: column;}
	.step_list li{width:100%;padding: 3rem 2rem;}	
	.step_list li:before {
		left: 50%;top: auto;bottom: -1.2rem;right: 0;
		width: 2.4rem;height: 2.4rem;
		transform: translateX(-50%);
	}
	.step_list li:after {
		left: 50%; top: auto; bottom: -0.2rem;right: auto;
		border-width: 2px 0 0 2px;
		transform: translate(-50%, 0) rotate(-135deg);
	}
}
.guid_list {	
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	margin: 0;padding: 0;
}
.guid_list > li {
	width: calc(50% - 0.8rem);
	margin: 0;padding: 2.8rem;
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	border:1px solid #D6DFEB;
	border-radius: 0.4rem;
	transition: 0.2s all linear;
}
.guid_list > li > .head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0;padding-left: 3.2rem;
	font-size: clamp(1.6rem, 1.6vw, 1.8rem);
	line-height: 1.5;
	font-weight: 700;
	color: #121212;
}
.guid_list > li > .head .num{
	position: absolute;
	display: block;
	content: '';
	top: 0;left: 0;
	display: flex;
	align-items: center;
	justify-content:center;
	width: 24px;height: 24px;
	font-family: 'Roboto';
	font-size: 1.5rem;
	font-weight: 500;
	color: #fff;
	background-color: #1E2973;
	border-radius: 0.4rem;
}

.guid_list > li > .cont {margin: 0;padding-left: 3.2rem;}
.guid_list > li > .cont p {
	margin: 0;padding: 0;
	font-size: clamp(1.4rem, 1.5vw, 1.6rem);
	line-height: 1.5;
	color: #3e3e3e;
	word-break: keep-all;
}
.guid_list > li > .cont > p + p {margin-top: 0.8rem;}

@media (max-width: 768px){
	.guid_list {	
		flex-direction: column;
		gap: 1rem;
	}
	.guid_list > li {
		width: 100%;
		gap: 0.4rem;
		padding: 2rem;
	}
	.guid_list > li > .head,
	.guid_list > li > .cont {padding-left: 2.8rem;}
	.guid_list > li > .head .num{width: 2rem;height: 2rem;}
}
.reserve_list {	
	display: flex;
	gap: 1.6rem;
	margin: 0;padding: 0;
}
.reserve_list li {
	display: flex;
	align-items: center;
	gap: 3.2rem;
	flex: 1;
	margin: 0;padding: 4rem;
	border-radius: 0.8rem;
	transition: 0.2s all linear;
}
.reserve_list li > .icon {width: 8rem;}
.reserve_list li > .reserve_box {
		display: flex;
		flex-direction: column;
	}
.reserve_list li > .reserve_box p {
	margin: 0;padding: 0;
	font-size: clamp(1.4rem, 1.5vw, 1.6rem);
	line-height: 1.5;
	word-break: keep-all;
}
.reserve_list li > .reserve_box p strong {
	display: block;
	margin-bottom: 0.75rem;
	font-size: clamp(1.6rem, 1.6vw, 1.8rem);font-weight: 700;
	color: #2b2b2e;
}
.reserve_list li:first-child {background-color: #EDF9FF;}
.reserve_list li:last-child {background-color: #F0F6FD;}

@media (max-width: 1024px){
	.reserve_list {	gap: 1.5rem;}
	.reserve_list li {padding: 1.25rem 1.25rem 1.25rem 2.25rem;}
	.reserve_list li > .reserve_box p strong {
		margin-bottom: 0.5rem;
	}
}
@media (max-width: 768px){
	.reserve_list {	
		flex-direction: column;
		gap: 1rem;
	}
	.reserve_list li {
		gap: 1rem;
		width: 100%;
		padding: 1rem 1rem 1rem 2rem;
	}
	.reserve_list li > .icon {width: 4rem;}
	.reserve_list li > .reserve_box p strong {margin-bottom: 0.25rem;}
}

/* 운영조례 */
.acc_wrap {margin-bottom: 2rem;display: flex;flex-direction: column;gap: -1px;}
.acc_wrap .acc_item {margin: 0;padding: 0;}
.acc_wrap .acc_header {
	position: relative;
	display: flex;
	align-items: center;justify-content: space-between;
	width: 100%;
	padding: 2rem;
	padding-left: 6rem;
	background-image: url("/images/susang/guide/icon_acc_title.svg");
	background-position: 2rem center;
	background-repeat: no-repeat;
	background-size: 3.2rem auto;
	background-color: #fff;
	border-top: 1px solid #C9D2DB;
	cursor: pointer;
}
.acc_wrap .acc_header:before {	
	position: absolute;
	bottom: -1px;left: 0;
	content: '';
	display: block;
	width: 100%;height: 1px;
	background-color: #C9D2DB;
}
.acc_wrap .acc_header strong {
	font-size: clamp(1.6rem, 1.8vw, 2rem);
	color: #2b2b2e;
}
.acc_wrap .acc_header em {
	margin-left: 0.25rem; padding: 0;
	font-size: clamp(1.4rem, 1.5vw, 1.6rem);font-weight: 700;
	color: #4276d6;
}
.acc_arrow::before {
	content: '';
	display: block;
	margin-left: 1rem;
	width: 4rem;height: 4rem;
	background-image: url("/images/susang/common/icon_arrow_down.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 1.2rem auto;
	background-color: #E6E8EA;
	border-radius: 99rem;
	-webkit-border-radius: 99rem;
	transition: transform 0.3s ease;
}
.acc_header[aria-expanded="true"] .acc_arrow::before {
  transform: rotate(180deg);
}
.acc_wrap .acc_cont {
  padding: 0 2rem;
  overflow: hidden;
  max-height: 0;
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}
.acc_wrap .acc_cont[hidden] {
  display: block;
  max-height: 0;
  opacity: 0;
}
.acc_ctrl {margin-bottom: 1rem;display: flex;justify-content: flex-end;}
.acc_ctrl #toggleAll {
	display: inline-flex;
	align-items: center;gap: 0.4rem;
	padding: 0;
	cursor: pointer;
}
.acc_ctrl #toggleAll .arrow {display: inline-block;transition: transform 0.3s ease;}
.acc_ctrl #toggleAll .arrow::before {
	content: '';
	display: block;
	width: 2.4rem;height: 2.4rem;
	background-image: url("/images/susang/common/icon_arrow_down.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 0.8rem auto;
	border: 1px solid #C9D2DB;
	border-radius: 99rem;
}
.acc_ctrl #toggleAll .arrow.rotated {transform: rotate(180deg);}
[id^="content"] {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

[class*="jore_"] > li {position: relative;font-size: clamp(1.4rem, 1.5vw, 1.6rem);line-height: 1.5;text-align: left;}
[class*="jore_"] > li::before{position: absolute;content: '';left: 1.2rem;}
[class*="jore_"] > li + li {margin-top: 0.8rem;}
[class*="jore_"] > li > ul {margin: 1.6rem 0;}
[class*="jore_"] > li span {color: #111;}	
[class*="jore_bul"] > li {padding-left: 2.8rem;}
.jore_bul1 > li::before {
	display: block;
	top: 0.8rem;
	width: 6px;	height: 6px;
	background-color: #9DA0A3;
	border-radius: 99rem;-webkit-border-radius: 99rem;	
}
.jore_bul2 > li {color: #555;line-height: 1.5;}
.jore_bul2 > li::before {
	display: block;
	top: 0.8rem;
	width: 4px;height: 4px;
	background-color: #6A7387;
	border-radius: 99rem;-webkit-border-radius: 99rem;
}
.jore_list > li {padding-left: 2.4rem;}
.jore_list > li:has(span.num) {padding-left: 4.8rem;} 
.jore_list > li span.num{
	content: '';
	position: absolute;
	top: 0;left: 1.2rem;
	display: flex;
	justify-content: center;align-items: center;
	width: 2.4rem;height: 2.4rem;
	margin-right: 1.2rem;
	font-size: clamp(1.3rem, 1.4vw, 1.5rem);
	color: #fff;
	text-align: center;
	background-color: #22449C;
	border-radius: 0.4rem;  
}
.jore_list > li::before {
	display: block;
	top: 0.8rem;
	width: 5px;height: 1px;
	background-color: #464C53;
}	 
 /* 파일 다운받기*/	
.file_box {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}
.file_box li {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;padding: 1.2rem 2.4rem;
	font-size: clamp(1.4rem, 1.5vw, 1.6rem); 
	color: #111;
	background-color: #eef0f5;
	border-radius: 0.6rem;
}
.file_box li a {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 0.4rem;
	margin: 0;padding: 0.8rem 1.6rem;
	font-size: clamp(1.4rem, 1.5vw, 1.6rem); 
	color: #111;
	background-color: #fff;
	border:1px solid #ddd;
	border-radius: 0.4rem;
	transition: all 0.3s;
	overflow:hidden;
}
	 
@media all and (max-width:1023px){	
	[class*="jore_"] > li + li {margin-top: 0.6rem;}
}
@media (max-width: 746px) {	
	.acc_wrap {margin-bottom: 1.2rem;}
	.acc_wrap .acc_header {
		padding: 1.6rem;padding-left: 5rem;
		background-size: 2.4rem auto;
	}
	.acc_arrow::before {width: 2.8rem;height: 2.8rem;}
	.acc_ctrl #toggleAll .arrow::before {width: 1.6rem;height: 1.6rem;}
	
	[class*="jore_"] > li::before{left: 0.8rem;}
	[class*="jore_bul"] > li {padding-left: 2rem;}
	.jore_bul1 > li::before {width: 4px;height: 4px;}
	.jore_list > li:has(span.num) {padding-left: 2.8rem;} 
	.jore_list > li span.num {left: 0;width: 2rem;height: 2rem;}	
	
	/* 파일 다운받기 */
	.file_box {gap: 0.6rem;}
	.file_box li {padding: 0.8rem 1.6rem;}
	.file_box li span {
		display: block;
        color: #1E2124;
	    white-space: nowrap; 
	    overflow: hidden; 
	    text-overflow: ellipsis;
	    max-width: 70%;
	}
	.file_box li a {padding: 0.6rem 1.2rem;}
	
}
@media (max-width: 480px) {
	.acc_wrap .acc_header {padding: 1.2rem;padding-left: 4rem;background-position: 0.8rem center;}
	.acc_arrow::before {width: 2rem;height: 2rem;background-size: 0.8rem auto;}
	
}