@charset "UTF-8";

/* it패키지 할인 이벤트 */
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
.ITPack_event { width:100%; position:relative; overflow:hidden; text-align:center; }
.ITPack_event .aside { position:absolute; top:858px; right:0; width:150px; background:#fff; z-index:1000; border-radius:10px 0 0 10px; overflow:hidden; box-shadow:3px 3px 10px 3px rgba(0,0,0,.2); }
.ITPack_event .aside h2 { background:#eb4524; color:#fff; padding:15px 0; font-size:16px;  height:92px; }
.ITPack_event .aside h2 strong { color:#ffc011; font-weight:400; font-size:14px; padding-bottom:3px; }
.ITPack_event .aside h2:after { display:none; }
.ITPack_event .aside strong { display:block; }
.ITPack_event .aside li { display:block; border-bottom:1px dashed #ddd; }
.ITPack_event .aside li:last-child { border-bottom:0; }
.ITPack_event .aside li a { display:block; width:100%; height:100%; color:#111; padding:10px 0; box-sizing:border-box; transition:all .3s; }
.ITPack_event .aside li a strong { color:#eb4524; font-weight:500; }
.ITPack_event .aside li a:hover { background:#eee; }
.ITPack_event .aside li a span { vertical-align:2px; padding-right:3px; }
.ITPack_event .aside .top { display:none; position:fixed; bottom:30px; right:30px; background:#111 url(images/icon_top.png) no-repeat center 18px; width:60px; height:60px; color:#fff; border-radius:30px; box-sizing:border-box; padding-top:28px; font-size:12px; letter-spacing:0; transition:all .2s; }
.ITPack_event .aside .top:hover { background:#111 url(images/icon_top.png) no-repeat center 15px; }
.ITPack_event * { font-family: 'Noto Sans KR', sans-serif,'Spoqa Han Sans'; color:#111; box-sizing:border-box; }
.ITPack_event a { transition:all .3s; }
.ITPack_event .content { position:relative; width:1200px; margin:0 auto; padding-bottom:130px; }
.ITPack_event .dday_banner { position:absolute; top:0; z-index:800; width:100%; height:90px; background:#171767;box-shadow:0px 3px 5px rgba(0,0,0,0.4)}
.ITPack_event .dday_banner .content { background:url(images/dday_banner.png) no-repeat; }
.ITPack_event .dday_banner a { position:absolute; right:0; top:15px; background:#0000ce; display:block; width:210px; height:60px; padding:0 8px 2px 0; border-radius:5px; border:1px solid #0000ce; }
.ITPack_event .dday_banner a:hover { background:#2929ff; border:1px solid #2929ff; }
.ITPack_event .topImg { width:100%; height:910px; background:#10102d; padding-top:100px; }
.ITPack_event .topImg .content { height:805px; }
.ITPack_event .topImg .content:after { content:""; display:block; position:absolute; left:335px; top:284px; width:88px; height:260px; background:url(images/top_after.png) no-repeat; animation:fadeIn .3s .6s both; }
.ITPack_event .topImg li { position:absolute; }
.ITPack_event .topImg li:nth-child(1) { top:130px; left:270px; animation:fadeIn_up .5s .3s both; }
.ITPack_event .topImg li:nth-child(2) { top:287px; left:30px; animation:aniLeft .6s .8s both; }
.ITPack_event .topImg li:nth-child(3) { top:284px; right:30px; animation:aniRight .6s 1.1s both; }
.ITPack_event .topImg li:nth-child(4) { top:390px; right:52px; animation:fadeIn .5s 1.5s both,upDown 1s 2.2s infinite ease-in-out; }
.ITPack_event .topImg li:nth-child(5) { bottom:-120px; left:-58px; animation:fadeIn_up02 .8s 1.6s both; z-index:100;}
.ITPack_event .section_01 { padding:90px; background:#ffc011; }
.ITPack_event .section_01 .content { padding:0; }

.ITPack_event h2 { position:relative; padding:110px 0 50px; }
.ITPack_event h2:after { position:absolute; bottom:75px; content:""; display:block; width:100%; height:1px; background:#252552; z-index: -1; }
.ITPack_event .section_02 p { margin-bottom:40px; }
.ITPack_event .section_02 p:last-child { margin-bottom:0; }
.ITPack_event .margin0 { margin-bottom:0px !important; }
.ITPack_event .section_02 .content div { position:relative; margin-bottom:40px; }
.ITPack_event .section_02 div a { position:absolute; bottom:60px; left:415px; background:#ffc011; display:block; width:368px; height:80px; border-radius:10px; }
.ITPack_event .section_02 div a:hover { background:#ff9211 }
.section_03 { position:relative; z-index:100; background:#1c1c5e; }
.section_03 h2:after,.section_04 h2:after { background:#fff; z-index:-1; }
.ITPack_event .section_04 h2:after { bottom:100px; }
.section_03 .content div { position:relative; margin-bottom:40px; }
.section_03 .content div a { position:absolute; right:20px; top:20px; background:#10102d; display:block; width:210px; height:58px; border-radius:10px; text-align:center; }
.section_03 .content div a:hover { background:#2929ff; }
.section_04 { background:#10102d; position:relative; z-index:100; }
.section_04 .first { position:absolute; top:-300px; }
.section_04 li { display:inline-block; margin-top:50px;}
.section_04 li:first-child { margin-right:12px; }
.section_04 li a { display:block; width:368px; height:80px; border-radius:10px;}
.section_04 li:first-child a { background:#ffc011; }
.section_04 li:last-child a { background:#3a3ac2; }
.section_04 li:first-child a:hover { background:#ffeb11; }
.section_04 li:last-child a:hover { background:#2929ff; }
.section_05 { position:relative; z-index:100; background:#eee; }
.section_05 h2:after { bottom:134px; }
.section_05 li { position:relative; float:left; width:377px; height:366px; margin-right:23px; border-radius:15px; overflow: hidden; }
.section_05 li a { position:absolute; bottom:30px; left:30px;display:block; width:325px; height:69px; background:#10102d; border-radius:10px; }
.section_05 li a:hover { background:#3f56ff; }
.section_05 li:nth-child(1) { background:url(images/section05_img01.png) no-repeat; }
.section_05 li:nth-child(2) { background:url(images/section05_img02.png) no-repeat; }
.section_05 li:nth-child(3) { background:url(images/section05_img03.png) no-repeat; margin-right:0; }
.section_05 ul:after {content:""; display:block; clear:both; }

.ITPack_event .guide { background:#28282d; padding:70px 0; text-align:left;  }
.ITPack_event .guide h3 { position:relative; font-size:21px; font-weight:bold; background:url(images/icon_guide.png) no-repeat; padding:10px 0 8px 55px; color:#d2d2e5; }
.ITPack_event .guide h3:after { position:absolute; right:0; top:23px; content:""; display:block; background:#d2d2e5; width:990px; height:1px; }
.ITPack_event .guide dl { margin-left:55px;  }
.ITPack_event .guide dt { font-weight:bold; font-size:18px; margin:20px 0 3px; color:#d2d2e5;}
.ITPack_event .guide dd { line-height:1.6; color:#d2d2e5;}
.ITPack_event .guide dd.important { line-height:1.6; color:#ffd200;}
.ITPack_event .guide dd:before { content:"- " }
.ITPack_event .guide .content { padding-bottom:0; }

@media (max-width:1400px) {
	.ITPack_event .guide h3 { background:none; }
	.ITPack_event .guide h3:after { display:none }
	.ITPack_event .aside { display:none; }
}


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

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

@keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@keyframes aniLeft {
	0% {
		opacity:0;
		transform: translateX(27%);
	}
	100% {
		opacity:1;
		transform: translateX(0%);
	}
}

@keyframes aniRight {
	0% {
		opacity:0;
		transform: translateX(-13%);
	}
	100% {
		opacity:1;
		transform: translateX(0%);
	}
}

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

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

_:-ms-fullscreen, :root .ITPack_event .aside .top {
 display:none !important;
 }