@charset "UTF-8";

/* it패키지 할인 이벤트 */
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
.navy_20220728 { width:100%; position:relative; overflow:hidden; text-align:center; }
.navy_20220728 * { font-family: 'Noto Sans KR', sans-serif,'Spoqa Han Sans'; color:#111; box-sizing:border-box; }
.navy_20220728 a { transition:all .3s; }
.navy_20220728 .content { position:relative; width:1200px; margin:0 auto; padding:100px 0 130px; }
.navy_20220728 .content h2 { padding-bottom:50px; text-align:center;}
.navy_20220728 .shortcut_banner { position:absolute; top:1153px;z-index:800; width:100%; height:135px; background:#0054ff; }
.navy_20220728 .shortcut_banner dl { position:absolute; left:500px; top:35px; width:260px; text-align:left; }
.navy_20220728 .shortcut_banner dt { position:relative; font-size:20px; color:#ffde00; }
.navy_20220728 .shortcut_banner dt,.navy_20220728 .shortcut_banner dd { display:inline-block; line-height:1.6; }
.navy_20220728 .shortcut_banner dt:before { position:absolute; left:-12px; top:14px; content:""; width:5px; height:5px; background:#ffde00; border-radius:5px; display:inline-block; }
.navy_20220728 .shortcut_banner dd:before { content:": " }
.navy_20220728 .shortcut_banner dd { font-size:20px; color:#fff; }
.navy_20220728 .shortcut_banner .content { background:url(images/dday_banner.png) no-repeat; ㅔㅁㅇ야ㅜㅎ:0; }
.navy_20220728 .shortcut_banner a { position:absolute; right:0; top:25px; background:#ffde00; display:block; width:268px; height:85px; padding:0 8px 2px 0; border-radius:10px; border:1px solid #ffde00; }
.navy_20220728 .shortcut_banner a:hover { background:#00ffc0; border:1px solid #00ffc0; }

.navy_20220728 .topImg { position:relative; width:100%; height:1153px; }
.navy_20220728 .topImg_01 { position:absolute; top:0; width:100%; height:1153px; 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:99; }
.navy_20220728 .topImg_02 { position:absolute; top:0; width:100%; height:1153px; background:url(images/topBg_02.jpg) no-repeat 50%; background-size:cover; animation:bgScale02 2.3s 2.2s ease-out both; }
.navy_20220728 .topImg ul { position:relative; width:1200px; margin:0 auto; z-index:100; }
.navy_20220728 .topImg li { position:absolute; left:50%; }
.navy_20220728 .topImg li:nth-child(1) { top:109px; margin-left:-250px; animation:fadeIn_up .6s .3s ease both; }
.navy_20220728 .topImg li:nth-child(2) { top:217px; margin-left:-355px; animation:fadeIn_up .6s .6s ease both; }
.navy_20220728 .topImg li:nth-child(3) { top:350px; margin-left:-488px; animation:fadeIn_up02 .8s .9s ease both; }
.navy_20220728 .topImg li:nth-child(4) { top:320px; margin-left:260px; animation:fadeIn .8s 2s ease both; }
.navy_20220728 .topImg li:nth-child(4) img:first-child { position:absolute; left:0; top:0;z-index:10; }
.navy_20220728 .topImg li:nth-child(4) img:last-child { animation:light .8s 3.5s ease infinite; }
.navy_20220728 .topImg li:nth-child(5) { top:803px; margin-left:-600px; animation:fadeIn_up02 .8s 1.4s ease both; }

.navy_20220728 .section_01 { background:#e0e0e9; }
.navy_20220728 .section_01 h2 { padding-top:135px; }
.navy_20220728 .section_02 span { position:absolute; bottom:30px; right:-80px; }
.navy_20220728 .section_03 { background:#0039ad url(images/h2_section03_Bg.png) no-repeat top center; }
.navy_20220728 .section_03 ul:after { clear:both; content:""; display:block; }
.navy_20220728 .section_03 li { position:relative; float:left; width:384px; height:813px; background:url(images/section03_bg.png) no-repeat; margin-right:24px; padding:0 25px; text-align:left; }
.navy_20220728 .section_03 li:last-child { margin-right:0; }
.navy_20220728 .section_03 li > dl { height:530px; }
.navy_20220728 .section_03 li > span { position:absolute; top:-10px; left:-18px; }
.navy_20220728 .section_03 li > dl > dt { font-size:28px; font-weight:700; height:80px; padding-top:22px; text-align:center; }
.navy_20220728 .section_03 li > dl > dd { position:relative; font-size:20px; height:75px; border-bottom:1px dashed #ccc; padding:23px 0 0 5px; font-weight:500; }
.navy_20220728 .section_03 li:first-child > dl > dd:last-child { border-bottom:none; }
.navy_20220728 .section_03 li > dl > dd span { position:absolute; right:0; top:18px;display:block; width:100px; height:36px; font-size:16px; background:#e0e0e9; border-radius:20px; text-align:center; padding-top:6px; }
.navy_20220728 .section_03 .pay_info { position:relative; }
.navy_20220728 .section_03 .pay_info span { position:absolute; top:95px; right:-12px; animation:upDown .7s ease infinite; }
.navy_20220728 .section_03 .pay_info p { font-size:28px; border-bottom:1px solid #222; text-align:center; padding:22px 0 18px; margin-bottom:23px; }
.navy_20220728 .section_03 .pay_info dt { font-size:15px; background:#fff; border-radius:20px; width:65px; height:27px; text-align:center; padding-top:2px; }
.navy_20220728 .section_03 .pay_info dt,.navy_20220728 .section_03 .pay_info dd { display:inline-block; }
.navy_20220728 .section_03 .pay_info dd { margin-left:10px; }
.navy_20220728 .section_03 .pay_info dd del { font-size:21px; color:#777; vertical-align:-3px; }
.navy_20220728 .section_03 .pay_info dd del small { color:#777; font-size:17px; font-weight:400; vertical-align:1px; }
.navy_20220728 .section_03 .pay_info dd strong { font-size:38px; color:#e90000; vertical-align:-8px; letter-spacing:-2px; }
.navy_20220728 .section_03 .pay_info dd strong small { font-size:20px; color:#e90000; font-weight:400; vertical-align:3px; }
.navy_20220728 .section_03 .pay_info a { display:block; margin-top:25px;width:100%; height:55px; background:#222; color:#fff; font-size:23px; text-align:center; padding-top:11px; border-radius:30px; }
.navy_20220728 .section_03 .pay_info a:hover { background:#da0000; }
.navy_20220728 .section_04 { background:#ffde00; }
.navy_20220728 .section_04 .benefit { position:relative; margin-top:24px; }
.navy_20220728 .section_04 .benefit a { margin-top:24px; position:absolute; right:294px; bottom:110px; background:#003eff; display:block; width:328px; height:75px; padding:0 8px 2px 0; border-radius:10px; border:1px solid #003eff; }
.navy_20220728 .section_04 .benefit a:hover { background:#0021ad; border:1px solid #0021ad; }
.navy_20220728 .section_04 .benefit span { position:absolute; left:105px; top:113px; animation:upDown 1s ease infinite; }

.navy_20220728 .guide { background:#0a0a4c; text-align:left;  }
.navy_20220728 .guide dl { border:1px solid #6f6f99; border-radius:10px; padding:40px 50px 50px; margin-top:24px; }
.navy_20220728 .guide dt { font-weight:bold; font-size:20px; margin:0 0 5px; color:#8585a6;}
.navy_20220728 .guide dd { line-height:1.6; color:#8585a6;}
.navy_20220728 .guide dd:before { content:"※ " }


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

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

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


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

@keyframes light {
	0% {
		filter:brightness(1);
	}
	50%{
		filter:brightness(.7);
	}
	100% {
		filter:brightness(1);
	}
}

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

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