@charset "UTF-8";

/* 사회복지사 2급 */
.socialWelfare { width:100%; position:relative; overflow:hidden; text-align:center; }
.socialWelfare .aside { position:absolute; top:1152px; right:10px; z-index:1000; }
.socialWelfare .content { position:relative; width:1200px; margin:0 auto; padding:0 0 130px; }
.socialWelfare .topImg { position:relative; width:100%; height:1011px; background:url(images/topBg_02.jpg) no-repeat 50%; background-size:cover; animation:bgScale02 2.3s 2.2s ease-out both; }
.socialWelfare .topImg:before { position:absolute; left:0; top:0; content:""; display:block; width:100%; height:1011px; background:url(images/topBg_01.jpg) no-repeat 50%; background-size:cover; animation:bgScale 2.3s ease-out both,fadeOut .6s 2.5s ease-out both; }
.socialWelfare .topImg span { position:absolute; right:0; top:0; }
.socialWelfare .topImg p { padding-top:130px; animation:fadeIn .8s .5s ease both;}
.socialWelfare .topImg ul { width:1200px; display:flex; justify-content:space-between; margin-top:74px; }
.socialWelfare .topImg ul li:first-child { animation:fadeIn_up .7s 1.1s ease both; }
.socialWelfare .topImg ul li:nth-child(2) { animation:fadeIn_up .7s 1.5s ease both; }
.socialWelfare .topImg ul li:nth-child(3) { animation:fadeIn_up .7s 1.9s ease both; }
.socialWelfare h2 { padding:100px 0 50px; }
.socialWelfare .section_01 { background:#eae6e2; }
.socialWelfare .section_01 ul { display:flex; justify-content:space-between; }
.socialWelfare .section_01 li { position:relative; display:block; height:560px; width:588px; }
.socialWelfare .section_01 li a { position:absolute; bottom:0; height:93px; display:block; background:#e9383a; border-radius:0 0 15px 15px; overflow:hidden; transition:all .3s; }
.socialWelfare .section_01 li a:hover { background:#618aff; }
.socialWelfare .section_01 li a span { display:block; position:absolute; bottom:40px; left:440px; animation: ani_left .5s infinite ease-in-out; }
.socialWelfare .section_01 li:first-child { background:url(images/section01_img01.png) no-repeat; }
.socialWelfare .section_01 li:last-child { background:url(images/section01_img02.png) no-repeat; }
.socialWelfare .section_02 .content > div { position:relative; }
.socialWelfare .section_02 .content { padding-bottom:110px; }
.socialWelfare .section_02 a { position:absolute; right:50px; top:82px; border:1px solid #555; border-radius:3px; line-height:1.8; background:#fff; }
.socialWelfare .section_03 { background:#d03032; height:635px; }
.socialWelfare .section_03 .mySwiper { background:#fff; height:250px; border-radius:15px; overflow:hidden; width:1200px; margin:0 auto; text-align:left; padding-top:50px; box-sizing:border-box; }
.socialWelfare .section_03 .swiper-button-prev { left:50%; margin:-195px 0 0 -655px; color:#222; }
.socialWelfare .section_03 .swiper-button-next { left:50%; margin:-195px 0 0 630px; color:#222; }
.socialWelfare .section_04 { background:#222; }
.socialWelfare .section_05 { background:#eae6e2; }
.socialWelfare .section_05 a,.socialWelfare .section_06 a { position:relative; background:#222; display:block; width:640px; transition:all .3s; border-radius:10px; margin:0 auto; }
.socialWelfare .section_05 a:hover,.socialWelfare .section_06 a:hover { background:#002489; }
.socialWelfare .section_05 a span,.socialWelfare .section_06 a span { display:block; position:absolute; bottom:32px; left:560px; animation: ani_left .5s infinite ease-in-out; }
.socialWelfare .section_07 { background:#222; }
.socialWelfare .btn_top { position:fixed; bottom:30px; right:30px; display:block; width:61px; height:61px; background:rgba(0,0,0,.3); border-radius:30px; transition:all .3s; }
.socialWelfare .btn_top:hover { background:rgba(0,0,0,.5);}


@media (max-width:1400px) {
	.socialWelfare .aside { display:none; }
}


@keyframes fadeIn_up {
	0% {
		transform: translateY(20%);
		opacity:0;
	}
	100% {
		opacity:1;
	}
}


@keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}

@keyframes ani_left {
	0% {
		transform: translateX(0%);
	}
	50%{
		transform: translateX(15%);
	}
	100% {
        transform: translateX(0%);
	}
}

@keyframes upDown {
	0% {
		transform: translateY(0%);
	}
	50%{
		transform: translateY(6%);
	}
	100% {
        transform: translateY(0%);
	}
}

@keyframes bgScale {
	0% {
		background-size:110% 110%;
	}
	100% {
		background-size:100% 100%;
	}
}

@keyframes bgScale02 {
	0% {
		background-size:100% 100%;
	}
	100% {
		background-size:110% 110%;
	}
}