/* 공통 */
.clearfix:after
{
	content: '';
	display: block;
	clear: both;
}

.br
{
	display: block;
}




.layout_goal
{
	padding: 90px 0 110px;
	text-align: center;
	background: url('../images/bg_goal.jpg') no-repeat 0 0;
	background-size: cover;
}

.title_vision h2
{
	color: #FFE600;
	font-size: 26px;
	letter-spacing: 5px;
}

.title_vision p
{
	margin: 30px 0 0 0;
	color: #fff;
	font-size: 36px;
	font-weight: 100;
}

.content_goal
{
	margin: 80px 0 0 0;
}

.content_goal h3
{
	color: #fff;
	font-size: 30px;
	letter-spacing: 4px;
}

.content_goal ul
{
	max-width: 1350px;
	margin: 35px auto 0 auto;
}

.content_goal ul li
{
	float: left;
	min-width: 480px;
	padding: 64px 10px;
	text-align: center;
	color: #222;
	font-size: 22px;
	font-weight: 600;
	line-height: 30px;
	border-radius: 250px;
	border: 1px solid #fff;
	background: rgba(255,255,255,0.7);
}

.content_goal ul li:first-child
{
	margin:20px -45px 0 0;
}

.content_goal ul li:last-child
{
	margin:20px 0 0 -45px;
}

.content_lesson
{
	margin: 46px 0 0 0;
	text-align: center;
}

.content_lesson h3
{
	position: relative;
	display: inline-block;
	color: #B7B7B7;
	font-size: 60px;
	letter-spacing: 9px;
	text-indent: 5px;
}

.content_lesson h3:before
{
	content: "";
	position: absolute;
	top: -45px;
	left: 50%;
	width: 1px;
	height: 45px;
	transform: translateX(-50%);
	border: 1px dashed #B7B7B7;
}

.content_lesson h3:after
{
	content: "";
	position: absolute;
	bottom: -45px;
	left: 50%;
	width: 1px;
	height: 45px;
	transform: translateX(-50%);
	border: 1px dashed #B7B7B7;
}

.content_lesson .lesson
{
	max-width: 1350px;
	margin:100px auto 0 auto;
	padding: 0 60px 60px;
	border: 1px solid #A7BAD1;
	border-radius: 35px;
}

.content_lesson .lesson h4
{
	position: relative;
	display: inline-block;
	min-width: 190px;
	margin: -20px 0 0 0;
	color: #627CB7;
	font-size: 30px;
	letter-spacing: 4px;
	background: #fff;
}

.content_lesson .lesson h4:before
{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 15px;
	margin: -50px 0 0 0;
	transform: translate(-50%, -50%);
	border-radius: 100%;
	background: #F47216;
}

.content_lesson .lesson p
{
	margin: 50px 0 0 0;
	color: #222;
	font-size: 27px;
	font-weight: 500;
}

.content_lesson .lesson ul
{
	margin: 40px 0 0 0;
}

.content_lesson .lesson ul li
{
	float: left;
	width: 32%;
	margin: 0 0.5%;
	padding: 26px 0;
	text-align: center;
	color: #222;
	font-size: 22px;
	font-weight: 500;
	border-radius: 250px;
	border: 1px dashed #B3C4D8;
	background: #F2F7FF;
}





@media screen and (max-width: 1500px)
{
	.br 
	{
		display: inline;
	}

	.content_goal ul
	{
		max-width: 100%;
		padding: 0 5%;
	}

	.content_goal ul li
	{
		min-width: auto;
		width: 35.3%;
		word-break: keep-all;
	}

	.content_goal ul li:first-child
	{
		margin: 20px -3% 0 0;
	}

	.content_goal ul li:last-child
	{
		margin: 20px 0 0 -3%;
	}

	.content_lesson
	{
		padding: 0 3% 0 3%;
	}
}


@media screen and (max-width: 1280px)
{
	.content_goal ul li
	{
		width: 100%;
		margin: 20px 0 0 0;
	}

	.content_goal ul li:first-child
	{
		margin: 0 0 0 0;
	}

	.content_goal ul li:last-child
	{
		margin: 20px 0 0 0;
	}
}

@media screen and (max-width: 1100px)
{
	.content_lesson .lesson ul
	{
		margin: 40px 0 -1% 0;
	}

	.content_lesson .lesson ul li 
	{
		width: 49%;
		margin: 0 0.5% 1% 0.5%;
	}
}

@media screen and (max-width: 767px)
{
	.layout_goal
	{
		padding: 60px 0 80px;
	}

	.title_vision h2 
	{
		font-size: 20px;
	}

	.title_vision p 
	{
		font-size: 30px;
	}

	.content_goal
	{
		margin: 50px 0 0 0;
	}

	.content_goal h3 
	{
		font-size: 22px;
	}

	.content_goal ul li
	{
		padding: 20px;
		font-size: 18px;
		line-height: 1.2;
	}

	.content_lesson h3
	{
		font-size: 40px;
	}

	.content_lesson .lesson
	{
		padding: 0 30px 40px 30px;
	}

	.content_lesson .lesson h4
	{
		min-width: 130px;
		font-size: 22px;
	}

	.content_lesson .lesson p
	{
		margin: 30px 0 0 0;
		font-size: 20px;
	}

	.content_lesson .lesson ul
	{
		margin: 30px 0 -1% 0;
	}

	.content_lesson .lesson ul li 
	{
		padding: 15px 15px;
		font-size: 18px;
	}
}

@media screen and (max-width: 580px)
{
	.layout_goal
	{
		padding: 40px 0 50px;
	}

	.title_vision h2 
	{
		font-size: 17px;
	}

	.title_vision p 
	{
		margin: 20px 0 0 0;
		font-size: 24px;
	}

	.content_goal
	{
		margin: 40px 0 0 0;
	}

	.content_goal h3 
	{
		font-size: 20px;
	}

	.content_goal ul
	{
		margin-top: 20px;
	}

	.content_goal ul li,
	.content_goal ul li:last-child
	{
		margin-top: 15px;
		padding: 10px 30px;
		font-size: 16px;
	}

	.content_lesson
	{
		margin-top: 30px;
	}

	.content_lesson h3 
	{
		font-size: 30px;
	}

	.content_lesson h3:before 
	{
		top: -30px;
		height: 30px;
	}

	.content_lesson h3:after 
	{
		bottom: -30px;
		height: 30px;
	}

	.content_lesson .lesson
	{
		margin-top: 65px;
		padding: 0 20px 30px 20px;
	}

	.content_lesson .lesson h4
	{
		min-width: 100px;
		font-size: 20px;
	}

	.content_lesson .lesson h4:before
	{
		width: 10px;
		height: 10px;
		margin: -36px 0 0 0;
	}

	.content_lesson .lesson p
	{
		margin: 20px 0 0 0;
		font-size: 16px;
	}

	.content_lesson .lesson ul
	{
		margin-top: 20px;
	}

	.content_lesson .lesson ul li 
	{
		width: 99%;
		padding: 15px 15px;
		font-size: 15px;
	}
}