@charset "UTF-8";

/* 사회복지사 2급 */
.referFriend { width:100%; position:relative; overflow:hidden; text-align:center; }
.referFriend .hidden,.referFriend .hidden_02 { opacity:0; }
.referFriend .view { animation:scale .2s ease-out both; z-index:10; }
.referFriend .fade { animation:fadeIn .4s ease-out both; }
.referFriend .delay { animation-delay:.3s; }
.referFriend .aside { position:absolute; top:1152px; right:10px; z-index:1000; }
.referFriend .content { position:relative; width:1200px; margin:0 auto; }
.referFriend .topImg { position:relative; width:100%; height:1006px; background:url(images/topBg_02.jpg) no-repeat 50%; background-size:cover; animation:bgScale02 2.6s 3s ease-out both; } 
.referFriend .topImg:before { position:absolute; left:0; top:0; content:""; display:block; width:100%; height:1006px; background:url(images/topBg_01.jpg) no-repeat 50%; background-size:cover; animation:bgScale 2.6s ease-out both,fadeOut .6s 3s ease-out both; }

.referFriend .topImg ul li:first-child { padding-top:71px; animation:fadeIn_up .8s .9s ease both; }
.referFriend .topImg ul li:nth-child(2) { padding-top:46px; animation:fadeIn_up .8s 1.3s ease both; }
.referFriend .topImg ul li:nth-child(3) { padding-top:55px; animation:fadeIn_up .8s 1.7s ease both; }
.referFriend .topImg ul li:nth-child(4) { padding-top:70px; animation:fadeIn_up .8s 2.1s ease both; }
.referFriend h2 { padding:120px 0 40px; }
.referFriend .section_01 { background:#121212 url(images/section01_bg.png) no-repeat center; }
.referFriend .section_01 .content { height:990px; }
.referFriend .section_01 ul li { position:absolute; }
.referFriend .section_01 ul li:nth-child(1) { left:160px; top:270px; }
.referFriend .section_01 ul li:nth-child(2) { left:0px; top:430px; }
.referFriend .section_01 ul li:nth-child(3) { right:160px; top:280px; }
.referFriend .section_01 ul li:nth-child(4) { right:0; top:415px; }
.referFriend .section_01 p { text-align:right; }
.referFriend .section_01 #counter { width:350px; position:absolute; left:50%; margin-left:-165px; bottom:205px; font-family:Georgia, 'Times New Roman', Times, serif; font-size:115px; background-image:linear-gradient(180deg, rgba(255,255,0,1) 0%, rgba(255,140,0,1) 100%); background-clip:text; -webkit-background-clip:text; color:transparent; }
.referFriend .section_01 strong { font-weight:bold; }

.referFriend .section_02 { background:#c40f0f; }
.referFriend .section_02 .content { height:1402px; }
.referFriend .section_02 li,.referFriend .section_02 span { position:absolute; }
.referFriend .section_02 li:nth-child(1) { left:0; top:250px; }
.referFriend .section_02 li:nth-child(2) { left:374px; top:250px; }
.referFriend .section_02 li:nth-child(3) { left:0; top:600px; }
.referFriend .section_02 li:nth-child(4) { left:374px; top:600px; }
.referFriend .section_02 li:nth-child(5) { right:0; top:285px; }
.referFriend .section_02 li:nth-child(6) { right:0; bottom:110px; }
.referFriend .section_02 span { left:0; bottom:430px; }
.referFriend .section_03 { background:#121212; padding-bottom:130px; }
.referFriend .section_03 li { position:relative; margin-bottom:24px; }
.referFriend .section_03 .btn_copy { position:absolute; bottom:120px; right:70px; background:#fff000; border-radius:10px; transition:all .3s; }
.referFriend .section_03 .btn_copy:hover { background:#ffb400; }
.referFriend .section_03 li:nth-child(2) span { position:absolute; bottom:165px; right:530px; animation:upDown .8s infinite ease-in-out; }
.referFriend .section_03 li:last-child,.referFriend .section_03 li:nth-child(4) { margin:0;}
.referFriend .section_03 dl { position:absolute; left:70px; top:200px; text-align:left; color:#222; }
.referFriend .section_03 dt { font-size:20px; padding-bottom:3px; }
.referFriend .section_03 dd a { color:#ce1313; }
.referFriend .section_03 small { color:#777; padding-left:10px; font-size:14px; }
.referFriend .section_03 dd { font-size:15px; }
.referFriend .section_03 .btn_apply { background:#ce1313; display:inline-block; margin-top:50px; border-radius:50px; transition:all .3s; }
.referFriend .section_03 .btn_apply:hover { background:#a50000; }
.referFriend .section_04 { background:#1f1f1f; }
.referFriend .section_04 a { position:absolute; left:240px; bottom:75px; background:#fff; color:#777; font-size:14px; padding:3px 15px; border-radius:5px; transition:all .3s;}
.referFriend .section_04 a:after { content:" >" }
.referFriend .section_04 a:hover { color:#111; }



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


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

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


@keyframes scale {
	0% {
		transform:scale(1.5);
		opacity:0;
	}
	100% {
        transform:scale(1);
		opacity:1;
	}
}

@keyframes upDown {
	0% {
		transform: translateY(0%);
	}
	50%{
		transform: translateY(12%);
	}
	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%;
	}
}

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