@charset "UTF-8";

/* 독학패스 */
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
.selfStudy_2022 * { font-family: 'Noto Sans KR','Spoqa Han Sans', sans-serif; box-sizing:border-box; }

.selfStudy_2022 { position:relative; padding-top:765px; }
.selfStudy_2022 .topImg_01 { position:absolute; top:0; width:100%; height:765px; background:url(images/topBg_01.jpg) no-repeat 50%; background-size:cover; animation:bgScale 2.3s ease-out both,fadeOut .5s 2.5s ease-out both; z-index:100; }
.selfStudy_2022 .topImg_02 { position:absolute; top:0; width:100%; height:765px; background:url(images/topBg_02.jpg) no-repeat 50%; background-size:cover; animation:bgScale02 2.3s 2.2s ease-out both; }
.selfStudy_2022 .topTxt { position:relative; width:1200px; margin:0 auto; }
.selfStudy_2022 .topTxt li { position:absolute; left:0;}
.selfStudy_2022 .topImg_01 .topTxt li:nth-child(1) { top:171px;  }
.selfStudy_2022 .topImg_01 .topTxt li:nth-child(2) { top:170px; animation:fadeIn .5s .6s ease both; }
.selfStudy_2022 .topImg_01 .topTxt li:nth-child(3) { top:525px; }
.selfStudy_2022 .topImg_02 .topTxt li:nth-child(1) { top:195px; left:40px; }
.selfStudy_2022 .topImg_02 .topTxt li:nth-child(2) { top:475px; left:205px; }
.selfStudy_2022 .topImg_02 .topTxt li:nth-child(3) { top:162px; animation:fadeIn .5s 3.4s ease both; }
.selfStudy_2022 .content { position:relative; width:1200px; margin:0 auto; text-align:center; padding:100px 0 130px; }

.selfStudy_2022 .section_01 { background:#ee4819; height:695px; }
.selfStudy_2022 .section_01 p { position:absolute; top:-40px; z-index:102; }
.selfStudy_2022 .section_01 span { position:absolute; right:-35px; top:25px; z-index:103; animation:upDown 1s  ease-out infinite; }
.selfStudy_2022 .section_02 { background:#270000; }
.selfStudy_2022 .section_03 { background:#7e0000 url(images/section03_bg.jpg) no-repeat center top; }
.selfStudy_2022 .section_04 { background:#e1e1e1 url(images/section05_bg.jpg) no-repeat center top;; }
.selfStudy_2022 .section_05 { background:#7e0000; }
.selfStudy_2022 .section_05 .apply { background:#fff; margin-top:40px; text-align:left; }
.section_05 .apply > dl { background:#ffecb2; height:95px; border-bottom:1px solid #fff; }
.section_05 .apply > dl dt,.section_05 .apply > dl dd { display:inline-block; }
.section_05 .apply > dl dt { font-size:21px;background:#222; color:#fff; text-align:center; width:118px; height:38px; border-radius:20px; padding-top:4px; margin:32px 0 0 50px; }
.section_05 .apply > dl dd li { display:inline-block; padding:0 30px; font-size:21px; width:235px; }
.section_05 .apply p { text-align:center; }
.section_05 .radio_input input[type="radio"] {display:none; }  
.section_05 .radio_input input[type="radio"] + span { display:inline-block; background:url(images/radio.png) no-repeat; cursor:pointer; padding:1px 0 1px 38px; transition:all .2s; }
.section_05 .radio_input input[type="radio"]:checked + span { background:url(images/radio_check.png) no-repeat; }
.section_05 .pay { position:relative; padding:10px 30px 50px; }
.section_05 .pay dt, .section_05 .pay dd { display:inline-block; }
.section_05 .pay dl { display:inline-block; }
.section_05 .price dt { background:#666; color:#fff; padding:1px 20px 2px; border-radius:20px;}
.section_05 .price dd { color:#666; font-size:28px; font-weight:500; letter-spacing:-2px;  padding:0 25px 0 10px; vertical-align:-4px; }
.section_05 .selling_price dt { color:#fff; background:#ee4819; font-size:18px; padding:3px 20px 4px; border-radius:20px; }
.section_05 .selling_price dd { position:relative; font-size:60px; font-weight:800; letter-spacing:-2px; padding:0 0 0 10px; vertical-align:-12px;}
.section_05 .pay ul { position:absolute; right:32px; bottom:35px; }
.section_05 .pay ul li { display:inline-block; width:165px; height:95px; text-align:center; }
.section_05 .pay ul li a { display:inline-block; width:100%; height:100%; background:#8c8c8c;font-size:20px; color:#fff; line-height:95px; transition:all .25s; }
.section_05 .pay ul li a:hover { background:#676767; }
.section_05 .selling_price dt { color:#fff; background:#ee4819; font-size:18px; padding:3px 20px 4px; border-radius:20px; }
.section_05 .pay ul li:last-child a { background:#ee4819; margin-left:4px;}
.section_05 .pay ul li:last-child a:hover { background:#cd260a; }
.section_05 .selling_price dd span { position:absolute; font-size:14px; font-weight:normal; letter-spacing:-1px; right:-120px; top:-10px; display:inline-block; width:107px; height:107px; background:url(images/sale.png) no-repeat; text-align:center; padding-top:35px; animation:fadeIn_02 1s ease-out infinite; }
.section_05 .info { color:#fff; text-align:left;  padding-top:20px; font-size:14px; }
.selfStudy_2022 .guide { background:#2c2020; color:#bbb; }
.selfStudy_2022 .guide .content { text-align:left; padding:70px 0; }
.selfStudy_2022 .guide h2 { font-size:21px; color:#fff; padding-bottom:20px; }
.selfStudy_2022 .guide dl { margin-bottom:20px; }
.selfStudy_2022 .guide dt,.selfStudy_2022 .guide dd { display:inline-block; vertical-align:top; line-height:1.5; }
.selfStudy_2022 .guide dt { font-size:16px; color:#fff; width:130px; }
.selfStudy_2022 .guide dd { padding-top:2px; }
.selfStudy_2022 .guide dd.margin { margin-left:135px; }
.selfStudy_2022 .guide strong { font-weight:normal; color:#ffca00; }
.selfStudy_2022 .guide h3 { font-weight:normal; color:#ffca00; font-size:16px; padding:10px 0 5px; }
.selfStudy_2022 .guide h3.paddingT0 { padding-top:0; }
.selfStudy_2022 .guide h3:before { content:"[" }
.selfStudy_2022 .guide h3:after { content:"]" }
.selfStudy_2022 .guide a { display:inline-block; color:#111; background:#ffca00; padding:1px 20px 3px; border-radius:20px; margin-left:10px; font-size:14px;}

@keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@keyframes fadeIn_02 {
	0% {
		opacity:.3;
	}
	30% {
		opacity:1;
	}
	95% {
		opacity:1;
	}
	100% {
		opacity:.3;
	}
}
@keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}

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


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

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

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