@charset "utf-8";



#sec01{
	width:100%;
	margin:0 auto;
	height:70vh;
	padding-top:100px;
	background-color:#0f9fc8;
	background-image:url(../images/sec01_img.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center 100px;
}
#sec02{
	margin-bottom:100px;
}
#sec03{
	margin-bottom:100px;
}

#sec02 > .inner, #sec03 > .inner{
	overflow:hidden;
}

#sec02 > .inner > h1{
	margin:50px auto;
	padding:20px 0 5px 0;
	width:200px;
	font-size:2em;
	border-bottom:3px solid #a1a1a1;
	text-align:center;
}
#sec02 > .inner > div{
	width:calc(33% - 20px);
	height:300px;
	margin:0 10px;
	float:left;
	padding:10px;
	position:relative;
	background-image:url(../images/main_part_01.jpg);
	background-size:130%;
	background-position:center;
	color:white;
	transition:background-size .3s;
}
#sec02 > .inner > div:hover{
	background-size:160%;
}
#sec02 > .inner > div:nth-child(2){
	background-image:url(../images/main_part_02.jpg);
}
#sec02 > .inner > div:nth-child(3){
	background-image:url(../images/main_part_03.jpg);
}

#sec02 > .inner > div > a{
	display:block;
	height:300px;
	position:relative;
}

#sec02 > .inner > div > a > h3{
	font-size:1.5em;
}





#sec03 > .inner > div{
	width:calc(50% - 20px);
	float:left;
	margin:0 10px;
	padding:10px;
	border:1px solid #a7a7a7;
	border-radius:10px;
	position:relative;
}

#sec03 > .inner > div > h3{
	font-size:1.5em;
	border-bottom:1px solid #a7a7a7;
}

#sec03 > .inner > div > h3 + a{
	display:block;
	position:absolute;
	right:10px;top:15px;
}

#sec03 > .inner > div > ul{
	
}
#sec03 > .inner > div > ul > li{
	overflow:hidden;
	margin:10px 0;
}
#sec03 > .inner > div > ul > li > div:first-child{
	float:left;
}
#sec03 > .inner > div > ul > li > div:last-child{
	float:right;
	font-size:0.85em;
}










/* 섹션 01 

#sec01 > div > .sec_img{
	background-repeat:no-repeat;
	background-size:100%;
	position:absolute;
}


#sec01 > div > .sec_img:first-child{
	width:1200px;
	height:100vh;
	background-image:url(../images/sec01_bg.png);
	left:0; top:0;
	animation-name:sec01_bg;
	animation-duration:2s;
	animation-iteration-count:1;
}
#sec01 > div > .sec_img:nth-child(2){
	width:530px;
	height:200px;
	background-image:url(../images/sec01_ment.png);
	left:320px; top:180px;
	animation-name:sec01_ment;
	animation-duration:2s;
	animation-iteration-count:1;
}
#sec01 > div > .sec_img:last-child{
	width:700px;
	height:400px;
	background-image:url(../images/sec01_x.png);
	left:200px; top:250px;
	animation-name:sec01_x;
	animation-duration:2s;
	animation-iteration-count:1;
}



@keyframes sec01_bg{
	0%{left:0; top:100px}
	100%{left:0;top:0;}
}

@keyframes sec01_ment{
	0%{left:100px; top:180px}
	100%{left:320px;top:180px;}
}

@keyframes sec01_x{
	0%{left:400px; top:250px}
	100%{left:200px;top:250px;}
}

*/




@media(max-width:1200px){

#sec02 > .inner, #sec03 > .inner{
	width:90%;
}

#sec01 > div{
	width:100vw;
}

#sec02 > .inner > div{
	width:100%;
	clear:left;
	margin:0 auto;
	margin-bottom:10px;
}

#sec03 > .inner > div{
	width:100%;
	clear:both;
	margin:0 auto;
	margin-bottom:10px;
}


#sec01{
	height:50vh;
}
#sec02{

}
#sec03{

}



}