@charset "utf-8";

#organization {
	margin-bottom:100px;
}
#organization [class^=og] {
	margin-bottom:65px;
}
#organization [class^=og] li {
	position:relative;
}
#organization [class^=og] span {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
#organization .organ {
	margin-top:35px;
}

#organization .og1 {
	position:relative;
}
#organization .og1::before {
	content:'';
	width:1px;
	height:334px;
	background-color:#ddd;
	position:absolute;
	left:50%;
	top:150px;
	transform:translateX(-50%);
}
#organization .og1 li {
	width:520px;
	height:150px;
	border-radius:10px;
	border-style: solid;
	border-width: 4px;
	border-image-source: linear-gradient(to top, #6bd4df, #d4bbe8);
	border-image-slice: 1;
	background-image: linear-gradient(to bottom, #fff, #fff), linear-gradient(to top, #6bd4df, #d4bbe8);
	background-origin: border-box;
	background-clip: content-box, border-box;
	margin:0 auto;

}
#organization .og1 span {
	width: 100%;
    text-align: center;
}

#organization .og2 {}
#organization .og2 li {
	width:240px;
	height:85px;
	margin:0 auto;
	background-color:#1dbecf;
}
#organization .og2 span {
	font-size:24px;
	letter-spacing:-0.6px;
	color:#fff;
	font-family: 'ONE-Mobile-Title';
}

#organization .og3 {}
#organization .og3 ul {
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
}
#organization .og3 ul::before {
	content:'';
	width:76.71%;
	height:1px;
	background-color:#ddd;
	position:absolute;
	top:-33px;
	left:50%;
	transform:translateX(-50%);
}
#organization .og3 li {
	max-width:240px;
	width:18%;
	margin:0 1%;
	height:85px;
	border:3px solid #1dbecf;
	background-color:#fff;
}
#organization .og3 li::before {
	content:'';
	width:1px;
	height:35px;
	background-color:#ddd;
	position:absolute;
	top:-35px;
	left:50%;
	transform:translateX(-50%);
}
#organization .og3 span {
	font-size:24px;
	letter-spacing:-0.6px;
	color:#1dbecf;
	font-family: 'ONE-Mobile-Title';
}

#organization .og4 {}
#organization .og4 ul {
	display:flex;
	align-items:center;
	justify-content:flex-start;
	position:relative;
	margin-left: 2.3%;
}
#organization .og4 ul::before {
	content:'';
	width:22.5%;
	height:1px;
	background-color:#ddd;
	position:absolute;
	top:-32px;
	left:49%;
	transform:translateX(-50%);
}
#organization .og4 li {
	max-width:240px;
	width:18%;
	margin:0 1%;
	height:85px;
	border:4px solid #d4bbe8;
	background-color:#fff;
}
#organization .og4 li:nth-child(2) {
	margin-left : 9.6%
}
#organization .og4 li:last-child {
	margin-left : 3.7%
}
#organization .og4 li::before {
	content:'';
	width:1px;
	height:35px;
	background-color:#ddd;
	position:absolute;
	top:-35px;
	left:50%;
	transform:translateX(-50%);
}
#organization .og4 li:first-child::before {
	height: 69px;
	top: -69px;;
}

#organization .og4 span {
	letter-spacing:-0.6px;
	color:#7c50a1;
	font-family: 'ONE-Mobile-Title';
}

/*---------------반응형 미디어쿼리----------------*/

@media (max-width:1440px) {
	.scroll {
        overflow-x: scroll;
    }
	.scroll_wd {
        width: 1440px;
    }
	#organization .og1 li {
		width:480px;
	}
	#organization .og1 span img {
		width:80%;
		max-width:340px;
	}
	#organization .og2 li {
		width:220px;
	}
	#organization .og2 span {
		font-size:20px;
	}

	#organization .og3 ul::before {
		width: 69.3%;
	}
	#organization .og3 li {
		max-width:220px;
	}
	#organization .og3 span {
		font-size:20px;
	}
	
	#organization .og4 ul {
		margin-left: 6.9%;
	}
	#organization .og4 li {
		max-width:220px;
	}
	#organization .og4 li:nth-child(2) {
		margin-left: 11.2%;
	}
	#organization .og4 li:last-child {
		margin-left: 4.95%;
	}
}

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

@media (max-width:1024px) {
	#organization .og1 li {
		width:450px;
	}
	#organization .og1 span img {
		width:80%;
		max-width:340px;
	}
	#organization .og2 li {
		width:200px;
	}
	#organization .og2 span {
		font-size:18px;
	}

	#organization .og3 li {
		max-width:200px;
	}
	#organization .og3 span {
		font-size:18px;
	}
	#organization .og3 ul::before {
        width: 80.1%;
    }
	
	#organization .og4 ul {
        margin-left: 0;
    }
	#organization .og4 ul::before {
		left: 50%;
	}
	#organization .og4 li {
		max-width:200px;
	}
	#organization .og4 li:nth-child(2) {
        margin-left: 9.8%;
    }
	#organization .og4 li:last-child{
        margin-left: 3.45%;
    }
}

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

@media (max-width:768px) {
	#organization .og1 li {
		width:380px;
	}
	#organization .og2 span {
		font-size:17px;
	}
	#organization .og3 span {
		font-size:17px;
	}
}

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

@media (max-width:400px) {}
@media (max-width:320px) {}