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

.overview {
	position: relative;
	width: 100%;
	margin: 0;padding: 2rem 0;
}
.overview > .img {
	position: absolute;
	top: 2rem;right: 4rem;
	width: 40%;
	border-radius: 8rem 0.8rem 0.8rem 0.8rem;
	overflow: hidden;
}
.overview > .img img {width: 100%;}
.overview > .cont {
	display: flex;
	flex-direction: column;
	gap: 3.2rem;
}
.overview > .cont > .head p{
	margin: 0;padding-left: 0.8rem;
	font-size: clamp(1.6rem, 2vw, 2.4rem);
	line-height: 1.5;
	color: #111;
}
.overview > .cont > .head p strong {
	display: block;
	font-size: clamp(2.8rem, 3.2vw, 3.6rem);
	font-weight: 800;
	color: #1e3399;
}
.overview > .cont > .list {
	margin: 0;
	padding: clamp( 2rem, 3.6vw ,5.2rem) clamp( 2rem, 3vw ,4rem);
	background-color: #EEF2F7;
}
.overview > .cont > .list > li {
	position: relative;
	padding-left: 2rem;
	font-size: clamp(1.4rem, 1.5vw, 1.6rem);
	line-height: 1.5;
	color: #111;
	word-break: keep-all;
}
.overview > .cont > .list > li + li {margin-top: 1.2rem;}
.overview > .cont > .list > li::before {
	position: absolute;
	content: '';
	display: block;
	top: 0.8rem;left: 0.8rem;
	width: 0.4rem;	height: 0.4rem;
	background-color: #1E2124;
	border-radius: 99rem;
}
.overview > .cont > .list > li span {	
	position: absolute;
	left: 2rem; top: 0;
	font-weight: 700;
	color: #111;
}
.overview > .cont > .list li:has(span){padding-left: clamp(8rem, 9vw, 10rem);}

@media (max-width: 1024px){
	.overview > .img {right: 2rem;width: 44%;}

}
@media (max-width: 768px){
	.overview {
		display: flex;
		flex-direction: column;
	}
	.overview > .img {
		position: relative;
		top: auto;right: auto;
		width: 100%;
		border-radius: 0 0 0.4rem 0.4rem;
		box-shadow : none;
		order: 2;
	}
	.overview > .cont {gap: 2.4rem;order: 1;}
	.overview > .cont > .list {border-radius: 0.4rem 0.4rem 0 0;}
	.overview > .cont > .list > li::before {
		top: 0.8rem;left: 0.8rem;
		width: 3px;	height: 3px;
	}
	
}

.sisul_list {
	width: 100%;
	margin: 0;padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.4rem;
}
.sisul_list li {
	display: flex;
	flex-direction: column;
}
.sisul_list li p{
	margin: 0;
	padding: 1.6rem 2rem;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-size:  clamp(1.4rem, 1.5vw, 1.6rem);
	font-weight: 700;
	line-height: 1.5;
	color: #111;
	background-color: #EEF2F7;
}
.sisul_list li i {
    display: block;
    width: 2.8rem; height: 2.8rem;
    margin: 0; padding: 0;
    background-color: #1E3399;
    background-size: 2rem;
    background-position: center center;
    background-repeat: no-repeat;
}     
.sisul_list li i.icon_pin {background-image: url("/images/susang/facility/icon_pin.svg");}

@media (max-width: 768px){	
	.sisul_list {
		gap: 1.2rem;
		grid-template-columns: repeat(2, 1fr);
	}
	.sisul_list li p{padding: 0.8rem;}
}

/*.sisul_list {
	width: 100%;
	margin: 0;padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 2rem;
}
.sisul_list li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	margin: 0;
	padding: 4rem 2rem;
	font-size:  clamp(1.6rem, 1.7vw, 1.8rem);
	color: #111;	
	background-color: #EEF2F7;
	border-radius: 0.5rem;
	-webkit-border-radius: 0.5rem;
}
.sisul_list li i {
    display: block;
    width: 8rem; height: 8rem;
    margin: 0; padding: 0;
    background-color: #fff;
    background-size: 4.4rem auto;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 99rem;
    -webkit-border-radius: 99rem;
}     
.sisul_list li i.icon_sisul1 {background-image: url("/images/susang/facility/icon_sisul1.svg");}
.sisul_list li i.icon_sisul2 {background-image: url("/images/susang/facility/icon_sisul2.svg");}
.sisul_list li i.icon_sisul3 {background-image: url("/images/susang/facility/icon_sisul3.svg");}
.sisul_list li i.icon_sisul4 {background-image: url("/images/susang/facility/icon_sisul4.svg");}
.sisul_list li i.icon_sisul5 {background-image: url("/images/susang/facility/icon_sisul5.svg");}

@media (max-width: 768px){	
	.sisul_list {
		gap: 1.2rem;
		margin-bottom: 1rem;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, auto);
	}
	.sisul_list li {
		gap: 1.6rem;
		padding: 2.8rem 1.6rem;
	}	
	.sisul_list li i {
	    width: 6rem; height: 6rem;
	    background-size: 3.2rem auto;
	}     
}*/