﻿@charset "UTF-8";

/* 사회복지사 1급 홍보페이지 20221207 */
html { scroll-behavior:auto; }
.socialWelfare_20221207 { overflow:hidden; text-align:center; }
.socialWelfare_20221207 img { vertical-align:top; }
.socialWelfare_20221207 .hidden { opacity:0; }
.socialWelfare_20221207 .view { animation:fadeIn_down .5s ease-out both; }
.socialWelfare_20221207 .topImg { position:relative; background:#ffcf3d; height:1005px; }
.socialWelfare_20221207 .inner_content { position:relative; width:1200px; margin:0 auto; padding-bottom:130px; }
.topImg p,.topImg li, .topImg a,.topImg span { position:absolute; left:50%; }
.topImg p { top:93px; margin-left:-687px; }
.topImg li:first-child { top:140px; margin-left:-68px; z-index:100; animation:fadeIn .5s .5s ease-out both; }
.topImg ul:after { position:absolute; top:138px; left:50%; margin-left:-72px; content:""; display:block; width:0;height:77px; background:#da0086; animation: line .5s .8s cubic-bezier(0.25, 0.45, 0.45, 0.95) both; z-index:99; }

.topImg li:nth-child(2) { top:241px; margin-left:-68px; animation:fadeIn_up .3s 1.4s ease-out both; }
.topImg li:nth-child(3) { top:313px; margin-left:-69px; animation:fadeIn_up .3s 1.7s ease-out both; }
.topImg li:nth-child(4) { top:424px; margin-left:-70px; animation:fadeIn_up .3s 2s ease-out both; }
.topImg li:nth-child(5) { top:548px; margin-left:-68px; animation:fadeIn_up .3s 2.5s ease-out both; }
.topImg a { display:block; height:38px; top:476px; margin-left:475px; transition:all .3s; background:#ffcf3d; animation:fadeIn .3s 2.2s ease-out both; }
.topImg a:hover { background:#ffa13d; }
.topImg span { bottom:76px; margin-left:-663px; animation:fadeIn_up .3s 2.8s ease-out both; }
.socialWelfare_20221207 .aside { position:fixed; right:0; top:510px; width:130px; height:210px; background:url(//s3-an2-ext-data-file.s3.ap-northeast-2.amazonaws.com/book/img/event/socialwelfare/asideBg.png) no-repeat; z-index:100; box-shadow:-3px 4px 5px rgba(0,0,0,.15); border-radius:10px 0 0 10px; }
.socialWelfare_20221207 .aside a { display:block; background:#222; width:104px; height:35px; border-radius:3px; margin:162px 0 0 13px; transition:all .3s; }
.socialWelfare_20221207 .aside a:hover { background:#0057dc; }
.socialWelfare_20221207 .section_01 { background:#011f4d; }
.socialWelfare_20221207 .section_02 { background:#dbdbe4; }
.socialWelfare_20221207 .point_list { position:relative; }
.point_list ul li { position:absolute; width:175px; height:175px; background:#ffd34f; border-radius:100px; color:#111; font-weight:500; font-size:20px; box-sizing:border-box; padding-top:42px; letter-spacing:-1px; z-index:100; }
.point_list:last-child li { padding-top:26px; }
.point_list:first-child li:first-child { left:-70px; top:220px; }
.point_list:first-child li:last-child { right:-70px; bottom:-80px; }
.point_list:nth-child(2) li:first-child { left:-60px; bottom:-50px; }
.point_list:nth-child(2) li:last-child { right:-60px; top:220px; }
.point_list:nth-child(3) li { right:-70px; top:230px; }
.socialWelfare_20221207 .section_03 { background:#ffcf3d; }
.socialWelfare_20221207 .section_03 span {  position:absolute; left:-220px; top:100px; }
.socialWelfare_20221207 .section_04 { background:#011f4d; }
.socialWelfare_20221207 .section_04 .inner_content { background:url(//s3-an2-ext-data-file.s3.ap-northeast-2.amazonaws.com/book/img/event/socialwelfare/section04_img01.png) no-repeat; padding-top:940px; }
.section_04 .inner_content dl { text-align:left; margin:0 25px; }
.section_04 .inner_content dt { color:#fff; padding-bottom:10px; font-size:18px;}
.section_04 .inner_content li { color:#b8bcc5; list-style:decimal; margin-left:17px; font-size:15px; }
.section_04 .inner_content li a { display:inline-block; padding:3px 12px 4px; border-radius:3px; background:#ffcf3d; transition:all .2s; margin-left:10px; }
.section_04 .inner_content li a:hover { background:#ffa13d; }

.section_04 .file_search { position:absolute; left:50px; top:651px; display:inline-block; height:80px; box-sizing:border-box; }
.section_04 input[type=text].fileInput_textbox { width:593px; height:80px; vertical-align:top; border:2px solid #222; border-radius:10px 0 0 10px; box-sizing:border-box; font-size:16px; padding-left:140px; border-right:none; }
.section_04 .btnFile_search { position:absolute; left:20px; top:17px; display:inline-block; width:100px; height:45px; line-height:45px; text-align:center; color:#888; border:1px solid #ccc; border-radius:5px; }
.section_04 .fileInput_opacity { position:absolute; left:0; top:0; width:592px; height:80px; cursor:pointer; opacity:0; box-sizing:border-box; }
.section_04 .btn_fileUpload { position:absolute; right:-213px; top:0; border-radius:0 10px 10px 0; background:#222; transition:all .3s; }
.section_04 .btn_fileUpload:hover { background:#0057dc; }
.section_04 .inner_content span { position:absolute; right:165px; top:620px; animation:upDown .8s infinite ease-in-out; }

@keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@keyframes line {
	0% {
		width:0;
	}
	100% {
		width:210px;
	}
}


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

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


/* 1400px 이하 사이즈 추가 */
@media (max-width:1260px) {
	.aside { display:none; }
	.socialWelfare_20221207 .hidden { opacity:1; }
	.socialWelfare_20221207 .view { animation:none; }
	.point_list:first-child li:first-child { left:-20px; top:220px; }
	.point_list:first-child li:last-child { right:-20px; bottom:-80px; }
	.point_list:nth-child(2) li:first-child { left:-20px; bottom:-50px; }
	.point_list:nth-child(2) li:last-child { right:-20px; top:220px; }
	.point_list:nth-child(3) li { right:-20px; top:230px; }
}

