﻿@charset "UTF-8";

/* 영문학조기이벤트_20240308 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css");
.EngPack_20240308 { width:100%; position:relative; overflow:hidden; text-align:center; }
.EngPack_20240308 * { font-family:Pretendard,'Spoqa Han Sans','맑은 고딕','Malgun Gothic','돋움',dotum,AppleGothic,sans-serif; color:#111; }
.EngPack_20240308 .content { position:relative; width:1200px; margin:0 auto;}
.EngPack_20240308 .topImg { width:100%; height:806px; background:#ffea48 url(images/topBg.png) no-repeat; background-size:cover;  }
.EngPack_20240308 .topImg p { animation:letterSpacing 1.2s ease-in-out both, fadeIn_02 .8s 1.5s ease-in-out infinite; font-size:20px; padding-top:35px; font-weight:500; }
.EngPack_20240308 .topImg p strong { color:#0aa000; }
.EngPack_20240308 .topImg:before { display:block; content:""; position:absolute; left:50%; margin-left:-539px; top:252px; background:url(images/top_img03.png) no-repeat; width:131px; height:91px; animation:fadeIn .3s 2s ease-out both; }
.EngPack_20240308 .topImg:after { display:block; content:""; position:absolute; right:50%; margin-right:-655px; top:222px; background:url(images/top_img02.png) no-repeat; width:279px; height:182px; animation:fadeIn .3s 2s ease-out both; }
.EngPack_20240308 .topImg li { position:absolute; }
.topImg li:nth-child(1) { left:384px; top:76px; animation:fadeIn_up .3s .8s ease-out both; }
.topImg li:nth-child(2) { left:472px; top:178px;  animation:scale .3s 1.1s ease-out both; }
.topImg li:nth-child(2):before { content:""; display:block; position:absolute; right:-13px; bottom:22px; background:#ffc000; width:36px; height:36px; border-radius:20px; z-index:-1; animation:fadeIn .3s 1.5s ease-out both; }
.topImg li:nth-child(3) { left:228px; top:285px; animation:fadeIn_up .4s 1.5s ease-out both; }
.topImg li:nth-child(4) { left:120px; top:410px; animation:fadeIn_up .4s 1.7s ease-out both; }
.topImg li:nth-child(5) { left:367px; top:556px; animation:fadeIn_up .4s 2s ease-out both;  }
.topImg li:nth-child(5):after { content:""; display:block; width:80px; height:53px; position:absolute; left:346px; bottom:1px; background:url(images/top_img01.png) no-repeat; z-index:-1; animation:width .1s 2.3s ease-out both; overflow:hidden; }
.topImg li:nth-child(6) { right:40px; top:200px; animation:fadeIn_up .3s 1.8s ease-out both,upDown 1s infinite ease-in-out; }

.EngPack_20240308 .section_01 { position:relative; background:#47a042 url(images/section01_bg.png) no-repeat center bottom; height:513px; padding-top:80px; box-sizing:border-box; }
.EngPack_20240308 .section_01 ul { display:flex; width:1219px; height:353px; background:url(images/section01_img01.png) no-repeat; margin:0 auto; padding:244px 19px 0 0; }
.EngPack_20240308 .section_01 ul a { display:block; width:493px; height:76px; background:#111; border-radius:15px; transition:all .2s; }
.EngPack_20240308 .section_01 ul a:hover { background:#0d0076; }
.EngPack_20240308 .section_01 ul li:first-child { margin-left:65px; }
.EngPack_20240308 .section_01 ul li:last-child { margin-left:122px; }
.EngPack_20240308 .section_01:before { display:block; content:""; position:absolute; left:0; top:-181px; background:url(images/topLeft.png) no-repeat; width:474px; height:266px; }
.EngPack_20240308 .section_01:after { display:block; content:""; position:absolute; right:25px; top:-255px; background:url(images/topRight.png) no-repeat; width:430px; height:410px; }

.EngPack_20240308 .section_02 { position:relative; background:#ffe237; padding-bottom:130px; }
.EngPack_20240308 .section_02 a { display:block; width:400px; height:80px; background:#111; transition:all .2s; border-radius:15px; margin:50px auto 0; }
.EngPack_20240308 .section_02 a:hover { background:#0d0076 }
.EngPack_20240308 .section_02 span { position:absolute; right:15px; top:50px; animation:upDown 1s infinite ease-in-out; }

.EngPack_20240308 .section_03 { position:relative; background:#47a042; }
.EngPack_20240308 .section_03 span { position:absolute; right:15px; top:50px; animation:upDown 1s infinite ease-in-out; }
.EngPack_20240308 h2 { padding:10px 0 40px; }

.EngPack_20240308 .reply_section { background:#47a042; padding:30px 0 130px; }
.EngPack_20240308 .reply_section .content { background:#fff; border-radius:20px; padding:40px 40px 50px; box-sizing:border-box; }
.EngPack_20240308 .input_section { position:relative; padding:30px 0; background:#eee; border-radius:15px; }
.EngPack_20240308 .input_section textarea { border:2px solid #222; width:850px; height:95px; border-radius:10px 0 0 10px; vertical-align:middle; padding:20px; font-size:16px; color:#a4b0a3; }
.EngPack_20240308 .input_section textarea:focus { outline:none; }
.EngPack_20240308 .input_section ul { text-align:left; margin:20px 0 0 40px; }
.EngPack_20240308 .input_section ul li { color:#777; font-size:14px; }
.EngPack_20240308 .input_section button { width:210px; height:95px; border-radius:0 10px 10px 0; background:#00093e; vertical-align:middle; font-size:20px; color:#fff; transition:all .2s; }
.EngPack_20240308 .input_section button:hover { background:#0d0076; }
.EngPack_20240308 .input_section p { position:absolute; right:40px; bottom:50px; color:#ff4747; }

.EngPack_20240308 .reply_section .reply_list { border-bottom:1px solid #222; margin-top:40px; }
.EngPack_20240308 .reply_list li { display:flex; height:120px; border-top:1px solid #222;}
.reply_section .name { position:relative; width:170px; padding-top:50px; font-size:16px; }
.reply_section .name:after { position:absolute; right:0; top:38px; border-right:1px solid #ccc; height:50px;content:""; }
.reply_section .name strong { display:block; }
.reply_section .reply_txt { display:table; width:950px; padding:20px; text-align:left; }
.reply_section .reply_txt div { display:table-cell; vertical-align:middle; font-size:16px; }

.reply_section .paging { margin:40px auto 0; width:390px; }
.reply_section .paging:after { content:""; display:block; clear:both; }
.reply_section .paging li { float:left; background:#fff; width:36px; height:36px; text-align:center; margin-right:4px; }
.reply_section .paging li a,.paging li strong { box-sizing:border-box; display:inline-block; width:100%; height:100%; vertical-align:middle; border:1px solid #d5d5d5; color:#666; padding-top:8px;}
.reply_section .paging li a,.reply_section .paging strong { border-radius:3px; font-size:14px; }
.reply_section .paging strong { color:#fff !important; background:#3e3e55; border:1px solid #3e3e55 !important; }
.reply_section .paging .first a,.reply_section .paging .prev a,.reply_section .paging .next a,.reply_section .paging .end a { background:#fff url(images/paginate_bg.png) no-repeat; }
.reply_section .paging .first a { background-position:0 -72px; }
.reply_section .paging .next a { background-position:right -36px; }
.reply_section .paging .end a { background-position:right -108px; }
.reply_section .paging .prev { margin-right:16px; }
.reply_section .paging .next { margin-left:13px; }
.EngPack_20240308 .guide { background:#070041; padding:80px 0 130px; text-align:left; }
.EngPack_20240308 .guide p { border-radius:20px; overflow:hidden; }
.EngPack_20240308 .guide h2 { text-align:center; }

.EngPack_20240308 .aside { position:absolute; top:200px; z-index:100; }
.EngPack_20240308 .aside li { margin-top:3px; }
.EngPack_20240308 .aside li a { display:block; width:240px; height:80px; background:rgba(255,255,255,.8); border-radius:0 15px 15px 0; font-size:18px; transition:all .2s; text-align:left; padding:17px 0 0 30px; box-sizing:border-box; }
.EngPack_20240308 .aside li a:hover { background:#fff; color:#111; }
.EngPack_20240308 .aside li a strong { color:#ff3600; }
.EngPack_20240308 .aside li:last-child a { background:rgba(255,255,255,.8) url(images/icon_ch.png) no-repeat 160px 15px; }
.EngPack_20240308 .aside li:last-child a:hover { background:rgba(255,255,255,1) url(images/icon_ch.png) no-repeat 160px 15px; }

@keyframes letterSpacing { 
	0% {
		letter-spacing:20px;
	}
	100% {
		letter-spacing:5px;
	}
} 


@keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@keyframes fadeIn_up {
	0% {
		transform: translateY(30%);
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@keyframes fadeIn_02 {
	0% {
		opacity:.1;
	}
	30% {
		opacity:1;
	}
	60% {
		opacity:1;
	}
	100% {
		opacity:.1;
	}
}

@keyframes width {
	0% {
		width:0;
	}
	100% {
		width:80px;
	}
}

@keyframes aniLeft {
	0% {
		opacity:0;
		transform: translateX(10%);
	}
	100% {
		opacity:1;
		transform: translateX(0%);
	}
}
@keyframes leaf {
	0% {

		transform: rotateY(20deg);
		opacity: 0;
	  }
	  100% {
		transform: rotateY(0deg);
		opacity: 1;
	  }
}
@keyframes upDown {
	0% {
		transform: translateY(0%);
	}
	50%{
		transform: translateY(-10%);
	}
	100% {
        transform: translateY(0%);
	}
}


@keyframes scale {
	0% {
		transform: scale(2); 
		opacity:0;
	}
	100% {
        transform: scale(1);
		opacity:1;
	}
}
@keyframes scale_02 {
	0% {
		transform: scale(.5); 
		opacity:0;
	}
	100% {
        transform: scale(1);
		opacity:1;
	}
}

@keyframes moter_01 {
	from {
		right:-50%;
	}

	90% {
		right:150%;
	}
	100% {
		right:150%;
	}
}
@keyframes moter_02 {
	0% {
		bottom:-60px;
	}
	100% {
		bottom:-58px;
	}
}

@media (max-width:1400px) {
	.EngPack_20240308 .section_01:after { display:none }
}
