﻿@charset "UTF-8";

/* ky올패스 20210201 */
.ky_allPass { width:100%; overflow:hidden; text-align:center; }
.ky_allPass img { vertical-align:top; }
.ky_allPass .topImg { width:100%; height:885px; background:#ebebeb; }
.ky_allPass .content { opacity:0; position:relative; width:1200px; height:100%; margin:0 auto; padding:90px 0 120px; }
.ky_allPass .topImg > div { position:relative; width:1200px; height:100%; margin:0 auto; padding:110px 0 150px; }
.ky_allPass .topImg p { position:absolute; z-index:100; }
.ky_allPass .video_section { z-index:99; position:absolute; right:0; top:110px; width:635px; height:482px; overflow:hidden; }
.ky_allPass .video_section video { width:860px; margin-left:-100px;}
.ky_allPass .video_section:before { position:absolute; content:""; display:block; width:100%; height:100%; background:rgba(0,0,0,.7); }

.ky_allPass .aniUp { animation:aniUp .7s cubic-bezier(0.25, 0.45, 0.45, 0.95) both; }

@keyframes aniUp {
	0% {
		transform: translateY(13%);
		opacity:0;
	}
	100% {
		transform: translateY(0%);
		opacity:1;
	}
}

.section_01 { background:#222; }
.section_02 { background:#102079; }
.section_02 .product_section { position:relative; width:1200px; height:1055px; background:url(images/product_bg.png) no-repeat; }
.section_02 .btn_package { position:absolute; top:188px; left:360px;background:#102079; color:#fff; padding:5px 20px; transition:all .3s; border-radius:3px; border:1px solid #102079; }
.section_02 .btn_package:after { content:" >" }

.section_02 .nature .btn_package { left:880px; }
.section_02 .product_select { position:absolute; top:540px; left:160px; width:540px; }
.section_02 .nature .product_select { left:670px;  }
.product_select li { display:inline-block; width:210px; margin-bottom:10px; line-height:1.4; font-size:14px; vertical-align:top; }
.product_select li label { cursor:pointer; }
.product_select li input[type="radio"] { display:none; }
.product_select li input[type="radio"]+span { display:block; padding:3px 0 3px 28px; background:url(images/radio_off.png) no-repeat; text-align:left; }
.product_select li input[type="radio"]:checked+span { background:url(images/radio_on.png) no-repeat; }
.product_section .pay { position:absolute; bottom:100px; left:360px; text-align:left; }
.product_section .nature .pay { left:872px; }
.product_section .pay li { position:relative; margin-bottom:30px; }
.product_section .pay del { display:block; color:#666; font-size:14px; }
.product_section .pay strong { display:inline-block; color:#de1a1a; font-size:30px; letter-spacing:-1px; margin-top:-3px }
.product_section .pay span { position:absolute; right:-85px; top:-15px; text-align:center; box-sizing:border-box; padding-top:20px;display:inline-block; width:71px; height:73px; background:url(images/sale_bg.png) no-repeat; color:#4a0000; }
.product_section .btn_pay { position:absolute; bottom:30px; left:210px; }
.product_section .nature .btn_pay { left:720px; }
.product_section .btn_pay li { display:inline-block; width:220px; height:60px;text-align:center; margin-right:6px; }
.product_section .btn_pay li a { display:block; width:100%; height:100%; font-size:18px; background:#222; color:#fff; box-sizing:border-box; padding-top:17px; }
.product_section .btn_pay li:first-child a { background:#de1a1a;  }
.product_section .nature .btn_pay li:first-child a { background:#0079ee;  }
.product_section .btn_pay li a:after,.section_02 .btn_popup li a:after { content:" >" }
.section_02 .guide { color:#fff; margin:25px 0 0 10px; text-align:left; }
.section_02 .btn_popup { position:absolute; right:0; bottom:115px; }
.section_02 .btn_popup li { display:inline-block; margin-left:2px; }
.section_02 .btn_popup li a { display:inline-block; width:145px; height:30px; text-align:center; line-height:30px; background:#fff; font-size:13px; }
.pop_allpass h1 { width:100%; font-size:21px; background:#333; height:50px; padding-top:10px; box-sizing:border-box; text-align:center; color:#fff; font-weight:normal; }
.pop_allpass .pop_content {padding:30px; }

.section_04,.section_06 { background:#ebebeb; }
.section_04 ul:after { content:""; display:block; clear:both; }
.section_04 li { float:left; position:relative; width:392px; height:211px; margin:0 12px 12px 0; overflow:hidden; }
.section_04 li a { position:absolute; left:0; top:0; }
.section_04 li span { position:absolute; z-index:100; top:65px; left:74px; padding-top:15px; box-sizing:border-box; display:inline-block; width:245px; height:80px; font-size:18px; color:#fff; border:1px solid #999; }
.section_04 li:nth-child(3n) { margin-right:0; }
.section_04 li:nth-child(4),.section_04 li:nth-child(5),.section_04 li:nth-child(6) { margin-bottom:0; }
.section_04 li img { transition:all .3s; }
.section_04 li:hover img { transform:scale(1.2); }
.btn_link { display:block; margin:60px auto 0;width:392px; height:70px; border-radius:3px; background:#102079; border:1px solid #102079; text-align:center; color:#fff !important; font-size:21px; box-sizing:border-box; padding-top:20px; transition:all .3s; }
.btn_link:hover { background:#de1a1a; border:1px solid #de1a1a; }
.section_06 ul { position:absolute; top:516px; left:10px; }
.section_06 li { display:inline-block; width:267px; height:50px; margin-right:8px; }
.section_06 li:nth-child(1),.section_06 li:nth-child(2),.section_06 li:nth-child(3),.section_06 li:nth-child(4) { margin-bottom:338px; }
.section_06 li a { display:block; width:100%; height:100%; background:#222; color:#999; transition: all .3s; font-size:18px; box-sizing:border-box; padding-top:12px;}
.section_06 li a:after { content:" >" }
.section_06 li a:hover { background:#de1a1a; color:#fff; }
.section_06 li a strong { color:#fff; font-weight:normal; }


/* 바로가기 배너 */
.aside_right { position:absolute; left:50%; top:749px; margin-left:630px; width:150px; z-index:100; font-size:16px; border:1px solid #222; }
.aside_right li a { display:block; width:100%; height:100%; padding:12px 0; border-bottom:1px dashed #d0d0d0; font-size:15px; transition:all .3s; background:#fff; line-height:1.2; color:#888; text-align:center; box-sizing:border-box; }
.aside_right li a.current { background:#de1a1a !important; }
.aside_right li a:hover { background:#ebebeb; }
.aside_right li:last-child a,.aside_right li a.current { border-bottom:0; }
.aside_right li a:hover,.aside_right li a.current { color:#000; }

@media (max-width:1400px) {
	.aside_right { display:none; }
}

/* 레이어 */
.layer_code { position:absolute; bottom:210px; left:490px; background:#fff;  width:400px; height:270px; font-size:15px; color:#333; border:1px solid #333; box-shadow:5px 5px 5px rgba(0,0,0,.3); text-align:left; z-index:2000; }
.layer_code h1 { font-size:18px; background:#333; height:50px; padding-top:12px; box-sizing:border-box; text-align:center; color:#fff; font-weight:normal; }
.layer_code .btn_close { position:absolute; right:10px; top:10px; }
.layer_code .layer_content { padding:20px; background:#fff; }
.layer_code .layer_content p { margin-bottom:15px; padding-left:5px; }
.layer_code .layer_content input[type="text"] { width:250px; height:40px; }
.layer_code .layer_content button { background:#de1a1a; width:90px; height:40px; vertical-align: middle;; color:#fff; margin-left:3px; }
.layer_code .layer_content span { display:block; border-top:1px dashed #ccc; margin-top:20px; padding-top:20px; font-size:13px; }
.modal_layerBg { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.9); z-index:-1; transition:all .3s; }
.layer_code.pay_end { left:50%; margin-left:-300px; width:500px; bottom:500px; }
.layer_code strong { color:#de1a1a; }
.layer_code .btn_info { display:block; margin:20px auto 0; width:100%; height:50px; border-radius:3px; background:#102079; border:1px solid #102079; text-align:center; color:#fff !important; font-size:18px; box-sizing:border-box; padding-top:12px; transition:all .3s; }
.btn_info:hover { background:#de1a1a; border:1px solid #de1a1a; }
.layer_code h2 { font-size:18px; margin-top:20px; font-weight:bold; padding-bottom:10px; border-top:1px dashed #ccc; padding-top:18px; }

.ky_allPass .topImg > div:after {  position:absolute; top:218px; content:""; display:block; width:0; height:62px; background:#de1a1a; animation:line .7s .2s cubic-bezier(0.25, 0.45, 0.45, 0.95) both; }
@keyframes line {
	0% {
		width:0;
	}
	100% {
		width:526px;
	}
}
.pop_allpass table li { position:relative; padding-left:12px; margin-bottom:5px; }
.pop_allpass table li:before { content:"- "; position:absolute; left:0; }
.pop_tab:after { content:""; display:block; clear:both; }
.pop_tab li { float:left; width:280px; height:50px; }
.pop_tab li a { background:#e9e9e9; display:inline-block; width:100%; height:100%; text-align:center; box-sizing:border-box; padding-top:7px; color:#555; }
.pop_tab li a.current { background:#3e3e55; color:#fff; }
.section_06 .guide { position:absolute; bottom:85px; left:10px;  margin:25px 0 0 10px; text-align:left; }
