@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
/* CSS Reset
-------------------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, img, strong, small, dl, dt, dd, ol, ul, li, fieldset, form, input, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; font-size: 100%; }
img, fieldset, button { border: 0; }
article, aside, figcaption, figure, video, audio, footer, header, hgroup, menu, nav, section { display: block; }
body, input, button, textarea, select, table { line-height: 1.2; font-family: '나눔고딕', 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', '돋움', dotum, Helvetica, sans-serif; font-size: 14px; color: #555; }
ol, ul { list-style: none; }
a { text-decoration: none; color: #555; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; }
a:hover, a:focus, a:active { text-decoration: underline; color: #555; }
img { vertical-align: middle; }
button { overflow: visible !important; }
button, label { cursor: pointer; background: none; }
button::-moz-focus-inner, input::-moz-focus-inner {
padding:0;
border:0;
}
table { border-collapse: collapse; border-spacing: 0; }
caption, legend { width: 0; height: 0; font-size: 0; line-height: 0; text-indent: -9999px; visibility: hidden; }
/* Reserved Class
-------------------------------------------------------------- */
.blind { width: 1px; height: 1px; font-size: 0; line-height: 0; position: absolute; top: 0; left: -1000%; overflow: hidden; }
.show { display: block; }
.hide { display: none; }
.fL { float: left; }
.fR { float: right; }
.clearFix { zoom: 1; }
.clearFix:after { clear: both; display: block; content: ''; }
.btn { background: none; border: 0 none; outline: none; }
.fix { position: fixed !important; }
/* Styles
-------------------------------------------------------------- */
body, html { width: 100%; height: 100%; background: #000; }
body { overflow-x: auto !important; overflow-y: hidden !important; /*background: url(../images/bg_sec0.jpg) no-repeat center 0 fixed; background-size: cover;*/ }
#wrap .btn { cursor: default; }
/* 공통 */
#wrap { position: relative; width: 100%; min-width: 960px; }
#wrap .innerWrap { position: relative; margin: 0 auto; width: 960px; }
.header { position: fixed; z-index: 51; width: 100%; }
div.logo { position: absolute; top: 22px; left: 38px; width: 240px; }
div.logo img { width: 100%; }
ul.nav { position: absolute; right: 20px; top: 30px; }
ul.nav li { display: inline-block; /*transform: skewX(-20deg);*/ }
ul.nav li a { padding: .5em 1.25em; border: solid 1px #b12c00; color: #CC3300; text-decoration: none; }
ul.nav li a span { /*transform: skewX(20deg);*/ display: inline-block; }
ul.nav li a:hover { background-color: #b12c00; color: #ffd8cb; }
#bgm, #play, #pause { position: absolute; top: -99999999px; }
.sound { outline: none; float: right; width: 30px; height: 30px; margin-top: 15px; font: 0/0 ""; color: transparent; background-image: url(../images/sound.png); background-position: 0 0; display: inline-block; cursor: pointer; }
.sound:hover { background-position: -30px 0px; }
.sound.off { background-position: 0px -30px; }
.sound.off:hover { background-position: -30px -30px; }
.mouse { z-index: 100; margin: 0 0 0 -25px; position: fixed; bottom: 50px; left: 50%; display: none; }
#menuGroup { z-index: 200; position: fixed; right: 20px; top: 50%; transform: translateY(-50%); }
#menu li a { position: relative; width: 151px; display: block; text-indent: -9999px; background: url(../images/spr_quick0929.png) no-repeat; }
#menu li.m0 a { background-position: 0 0px; height: 49px; }
#menu li.m1 a { background-position: 0 -49px; height: 53px; }
#menu li.m2 a { background-position: 0 -102px; height: 52px; }
#menu li.m3 a { background-position: 0 -154px; height: 54px; }
#menu li.m4 a { background-position: 0 -208px; height: 36px; }
#menu li a span { position: absolute; right: -15px; top: -18px; width: 55px; height: 59px; display: none; background: url(../images/ico_light.png) no-repeat; }
#menu li.m0.active span, #menu li.m0 a:hover span { display: block; top: -18px; }
#menu li.m1.active span, #menu li.m1 a:hover span { display: block; top: -12px; }
#menu li.m2.active span, #menu li.m2 a:hover span { display: block; top: -12px; }
#menu li.m3.active span, #menu li.m3 a:hover span { display: block; top: -12px; }
#menu li.m4.active span, #menu li.m4 a:hover span { display: block; top: -12px; }
.fog { position: fixed; left: -320px; bottom: 0; width: 99999px; height: 470px; }
.section { z-index: 50; position: relative; width: 100%; height: 1080px; min-height: 900px; overflow: hidden; }
.section .innerWrap { position: relative; margin: 0 auto; width: 960px; height: 100%; min-height: 900px; }
.section .cloud { z-index: 10; position: absolute; top: 50%; left: 50%; opacity: 0; filter: alpha(opacity=0); }
.section .con { z-index: 50; position: absolute; top: 50%; left: 50%; opacity: 0; filter: alpha(opacity=0); }
.bgArea div { z-index: 20; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); }
.bgArea .bg0 { opacity: 1; filter: alpha(opacity=100); background: url(../images/bg_sec0.jpg) no-repeat center 0 fixed; background-size: cover; }
.bg0Effect { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); background: url(../images/bg_sec0_effect.jpg) no-repeat center 0 fixed; background-size: cover; }
.bgArea .bg1 { background: url(../images/bg_sec1.jpg) no-repeat center 0 fixed; background-size: cover; }
.bgArea .bg2 { background: url(../images/bg_sec2.jpg) no-repeat center 0 fixed; background-size: cover; }
.bgArea .bg3 { background: url(../images/bg_sec3.jpg) no-repeat center 0 fixed; background-size: cover; }
.bgArea .bg4 { background: url(../images/bg_sec4.jpg) no-repeat center 0 fixed; background-size: cover; }
#section0 .titleGroup { margin: -180px 0 0 0/*-245px*/; position: absolute; top: 50%; left: 50%; width: 490px; height: 342px; transform: translateX(-50%); }
#section0 .titleGroup p { text-align: center; }
#section0 .titleGroup .title1 { position: absolute; top: -90px; left: 40px; opacity: 0; filter: alpha(opacity=0); }
#section0 .titleGroup .title2 { position: absolute; left: 0; top: 50px; height: 204px; }
#section0 .titleGroup .title2 p { position: absolute; top: 0; opacity: 0; filter: alpha(opacity=0); }
#section0 .titleGroup .title2 p img { width: 100%; }
#section0 .titleGroup .title2 .txt1 {/*left:0px;top: 0;	*/ left: -350px; top: -140px; width: 600px; }
#section0 .titleGroup .title2 .txt2 {/*left:206px;top: 0;*/ left: -50px; top: -140px; width: 600px; }
#section0 .titleGroup .title2 .txt3 {/*left:404px;top: 0;*/ left: 354px; top: -140px; width: 600px; }
#section0 .titleGroup .title2 .txt4 {/*left:404px;top: 0;*/ left: 704px; top: -140px; width: 600px; }
#section0 .titleGroup .title3 { position: absolute; left: -100px; top: 380px; /* top: 186px;*/ opacity: 0; filter: alpha(opacity=0); }
#section0 .titleGroup .title4 { position: absolute; left: 38px; top: 420px;  /*top: 275px; */ opacity: 0; filter: alpha(opacity=0); }
#section1 .con1 { margin: -329px 0 0 -39px; width: 661px; height: 724px; }
#section1 .paging { z-index: 100; position: absolute; top: 785px; left: 0; width: 100%; text-align: center; opacity: 0; filter: alpha(opacity=0); }
#section1 .paging a { margin: 0 8px; position: relative; display: inline-block; width: 16px; height: 18px; background: url(../images/ico_paging.png) no-repeat; text-indent: -9999px; }
#section1 .paging a.active span { position: absolute; left: -20px; top: -20px; width: 55px; height: 59px; display: block; background: url(../images/ico_light.png) no-repeat; }
#section2 .con { margin: -376px 0 0 -686px; width: 885px; height: 703px; }
#section3 .con { margin: -320px 0 0 -259px; width: 702px; height: 650px; }
#section4 .con { margin: -376px 0 0 -532px; width: 1064px; height: 760px; text-align: center; }
#section4 .swiper-container { position: absolute; top: 122px; left: 0; }
#section4 .paging a.on { display: block; width: 15px; height: 15px; background: red; }
#section4 .paging a { display: inline-block; width: 16px; height: 18px; background: url(../images/ico_paging.png) no-repeat; text-indent: -9999px; }
#section4 .slideArea .mask { width: 300px; height: 300px; overflow: hidden; }
#section4 .slideArea ul { position: relative; width: 9999px; }
#section4 .slideArea li { float: left; }
#section5 { background-color:rgba(0,0,0,.95); opacity:.35;}
.swiper-container { width: 100%; height: 100%; }
.swiper-container { width: 100%; height: 100%; }
.swiper-container .swiper-slide { text-align: center; font-size: 18px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.swiper-pagination { left: 450px; top: 710px; }
.swiper-pagination span { top: -20px; margin: 0 6px; position: relative; display: inline-block; width: 16px; height: 18px; background: url(../images/ico_paging.png) no-repeat; text-indent: -9999px; opacity: 1; filter: alpha(opacity=100); }
.swiper-pagination .swiper-pagination-bullet-active { margin: 0 2px; top: 0; width: 55px; height: 59px; background: url(../images/ico_light.png) no-repeat; }
.overlay { z-index: 19999999; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity = 50); display: none; }
.layerPop { z-index: 20000000; position: fixed; left: 50%; top: 50%; }
.layerPop .confirm { position: absolute; bottom: 20px; left: 300px; }
.layerPop .close { position: absolute; right: 0; top: 0; }
.layerPop .close button { display: block; text-indent: -9999px; width: 57px; height: 57px; }
.layerPop .confirm button { display: block; text-indent: -9999px; width: 147px; height: 38px; }
#popDetail1_1 ul { position: absolute; }
#popDetail1_1 li { padding: 0 0 3px 0; }
#popDetail1_1 .detailList1 { top: 202px; left: 40px; }
#popDetail1_1 .detailList2 { top: 202px; left: 254px; }
#popDetail1_1 .detailList3 { top: 488px; left: 254px; }
#popDetail1_1 .detailList4 { top: 202px; left: 467px; }
.img_copyright { position: relative; width: 980px; display: block; margin: 0 auto; }
.fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell { height: auto !important; min-height:inherit !important;}
@media screen and (max-device-width: 1024px) {
body, .bgArea .bg0, .bgArea .bg1, .bgArea .bg2, .bgArea .bg3, .bgArea .bg4 { background: url(../images/bg_sec0.jpg) no-repeat center 0 fixed; background-size: auto; }
.bgArea .bg0Effect{background-size: auto; }
#section1 .con1 { margin-left: 0; transform: translateX(-50%); }
#section2 .con { margin-left: -30px; transform: translateX(-50%); }
#section3 .con { margin-left: 0px; transform: translateX(-50%); }
#menuGroup { top: 80px; transform: translateY(0); }
}