/* reset */
html,body{height:100%;-webkit-text-size-adjust:none;;font-size:13px;line-height:1.5;color:#333;background:#fff}
body{width:100%;height:100%}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,
table,th,td,form,
fieldset,legend,textarea,input,select,textarea,button,
figure,figcaption{margin:0;padding:0;letter-spacing:0;font-size:13px;line-height:1.5;color:#333;font-family:inherit}
fieldset,li,img{border:0;vertical-align:baseline}
ul,ol{list-style:none}
button{overflow:visible;border:0;background-color:transparent;cursor:pointer}
button:active,button:focus{outline:none}
button::-moz-focus-inner{padding:0;}
input,button{-webkit-appearance:none;-moz-appearance:none;appearance:none}
address,caption,em{font-style:normal}
h1,h2,h3,h4,h5,h6,caption,strong{font-weight:normal}
a,a:focus,a:active,a:hover{text-decoration:none;cursor:pointer}
hr{display:none}
legend{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:1px;line-height:100px;white-space:nowrap}
* { -webkit-text-size-adjust:none; }
html, body { width: 100%; height: 100%; background-color: #111; }
body, input, textarea, select, table, button { font-family:dotum, Sans-serif; }

.wrap {width:100%;font-size:0;line-height:0;position:relative}
.container{position:absolute;left:50%;top:50%}
.c-cont{position:absolute;left:50%;top:0}
.scene{width:100%;text-align:center;margin:0 auto;overflow:hidden;position:relative}
.scnbg{position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%)}
.scnbg img{position: absolute; top: 50%; left: 50%; width: auto; height: auto; max-height:100%;-ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%)}
.section .in-content{position:relative;margin:0 auto;display:inline-block;width:100%;height:100%;min-height:1px}
.section .in-content .blank{display:inline !important;width:100%;height:100% !important;max-width:100%;}

.container img{display:block;width:100%;height:auto}

.bgvideo{position:absolute;top:50%;left:50%}
.bgvideo > video{position:absolute;top:0;height:100%;left:0;width:100%}
.bgvideo:after{content:"";display:block;position:absolute;left:0;width:100%;height:100%;top:0;background:url(../img/dim_video.png) repeat}


#nav{position:fixed;z-index:100;left:0;top:0;width:100%;text-align:left;height:0;overflow:hidden;opacity:0;
-ms-transition:opacity .2s 0s, height 0s .2s ease-in-out;-moz-transition:opacity .2s 0s, height 0s .2s ease-in-out;
-webkit-transition:opacity .2s 0s, height 0s .2s ease-in-out;transition:opacity .2s 0s, height 0s .2s ease-in-out}
#nav.opened{opacity:1;height:100%;
-ms-transition:opacity 0s .3s, height 0s 0s ease-in-out;-moz-transition:opacity 0s .2s, height 0s 0s ease-in-out;
-webkit-transition:opacity 0s .3s, height 0s 0s ease-in-out;transition:opacity 0s .2s, height 0s 0s ease-in-out}
#nav .dim{display:block;position:absolute;left:0;opacity:0;top:0;width:100%;height:100%;background:url(../img/dim.png) repeat;-ms-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;-webkit-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}
#nav.opened .dim{opacity:1}
#nav .nav-wrap{position:absolute;left:50%;top:-100%;height:auto;pointer-events:none;
-ms-transition:top .2s ease-in-out;-moz-transition:top .2s ease-in-out;-webkit-transition:top .2s ease-in-out;transition:top .2s ease-in-out
}
#nav.opened .nav-wrap{top:0;font-size:0;line-height:0;
-ms-transition:top .2s .1s ease-in-out;-moz-transition:top .2s .1s ease-in-out;-webkit-transition:top .2s .1s ease-in-out;transition:top .2s .1s ease-in-out
}
#nav .nav-wrap img{display:block;width:100%;height:auto}
#nav .bt-close{position:absolute;right:50%;bottom:-.5%;width:6.5%;pointer-events:auto}
#nav .bt-close img{display:block;width:100%;height:auto}
#menu{position:absolute;top:5.14%;left:39.085%;width:21.83%}
#menu img{display:block;width:100%;height:auto;
-ms-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;-webkit-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}
#menu li{position:relative;width:100%;pointer-events:auto}
#menu li .deco{position:absolute;width:100%;top:0;left:0;opacity:0}
#menu li.main .deco,
#menu li.about .deco{top:18.6%}
#menu li.about{padding-bottom:5%}
#menu .sel{position:absolute;left:0;top:0;width:100%;opacity:0}
#menu a:hover .def{opacity:0}
#menu a:hover .sel{opacity:1}
#menu li.selected .def{opacity:0}
#menu li.selected .sel{opacity:1}
#menu li.selected .deco{opacity:1}

#scrollDown{position:fixed;top:0;left:50%;z-index:15}
#scrollDown img{display:block;width:100%;height:auto}

.layer{position:fixed;z-index:99;left:0;top:0;width:100%;text-align:center;height:0;overflow:hidden;opacity:0;-ms-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;-webkit-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}
.layer.visible{display:block;opacity:1;height:100%;overflow:visible}
.layer .dim{display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:url(../img/dim.png) repeat}
.layer .in-content{pointer-events:none;position:relative;margin:0 auto;display:inline-block;width:100%;height:100%;min-height:1px}
.layer .in-content .blank{display:inline;width:100%;height:100%;min-height:1px}
.layer .layer-inner{position:relative;margin:0 auto;display:block;pointer-events:auto;}
.layer .layer-inner img{width:100%;height:auto;display:block}
.layer .layer-wrapper{position:absolute;left:0;top:0;width:100%;height:100%}
.layer .layer-container{display:table;width:100%;height:100%}
.layer .layer-aligner{display:table-cell;width:100%;height:100%;vertical-align:middle}

.header{position:fixed;width:auto;top:0;right:0;z-index:10;font-size:0;line-height:0;background:rgba(17,17,17,.8);height:auto;left:0}
.header .in-header{display:inline-block;width:auto;float:right;position:relative;height:100%}
.header .in-header.l{float:left}
.header .bt-nav{left:14%;position:absolute;width:48%;top:17.5%}
.header .bt-nav img{display:block;width:100%;height:auto}
.header .bt-nav .bar{background:#fff;display:block;position:absolute;height:6.25%;width:66.7%;left:16.65%;
-ms-transition:width .2s ease-in-out;-moz-transition:width .2s ease-in-out;-webkit-transition:width .2s ease-in-out;transition:width .2s ease-in-out}
.header .bt-nav .bar.t{top:20.3125%;width:41.6%}
.header .bt-nav .bar.m{top:46.875%}
.header .bt-nav .bar.b{top:73.4375%}
.header .bt-nav:hover .bar.t{width:66.7%}
.header .bt-nav:hover .bar.m{width:41.6%}
.header .bt-nav:hover .bar.b{width:54.15%}
.header img{display:inline-block}
.header .blank{display:inline;width:auto;height:100%;min-height:1px}
.bt-preregist{position:absolute;right:0;top:0;width:189%}
.bt-preregist img{display:block;width:100%;height:auto}

#footer{position:absolute;overflow-x:hidden;text-align:center;width:100%;bottom:0;left:0;background:#000;font-size:0;line-height:0}
#footer:after{content:"";display:block;height:0;clear:both}
#footer .in-footer{display:inline-block;width:auto;max-width:100%;position:relative;height:100%;margin:0 auto}
#footer .blank{display:inline;width:auto;height:100%;min-height:1px}
#footer .copyright{position:absolute;left:-.6%;width:101.2%;top:30%}
#footer .copyright img{display:block;height:auto;width:100%}

.link-buttons{position:fixed;width:auto;top:0;left:0;z-index:10;font-size:0;line-height:0;pointer-events:none}
.link-buttons img{display:inline-block}
.link-buttons .blank{display:inline;width:auto;height:100%;min-height:1px}
.link-kk-friend{position:absolute;right:11%;top:11.9%;width:166%;height:auto}
.link-kk-friend img{display:block;width:100%;height:auto}
.link-buttons > a{position:absolute;top:29.41%;width:44%;pointer-events:auto}
.link-buttons a img{display:block;width:100%;height:auto}
.link-buttons .link-fb{left:126%}
.link-buttons .link-ytb{left:170%}
.link-buttons .link-kk-friend{right:auto;left:70%;width:60%;height:auto;top:5.89%}

.fit-x.ac{position:absolute;left:50%}
.fit-x.av{position:absolute;top:50%}
.vis{position:absolute;left:50%;top:0}
.vis.ac{left:50%}

.video-tit{position:absolute;bottom:50%;width:100%;left:0}
.video-tit img{display:block;width:100%;height:auto}
.video-play{position:absolute;top:50%;width:24.4%;left:37.8%}
.video-play img{display:block;width:100%;height:auto}

#frontier{}
#frontier .logo{position:absolute;bottom:50%;left:4.8%;width:90.4%}
#frontier .logo img{width:100%;height:auto;display:block}
#frontier .desc{position:absolute;bottom:33.34%;left:0;width:100%}
#frontier .desc span{display:block}
#frontier .tit{width:88%;margin:0 auto;position:relative;top:6%}
#frontier .stit.d1{width:89%;margin:0 auto}
#frontier .stit.d2{width:98.6%;margin:0 auto}
#frontier .desc img{width:100%;height:auto;display:block}
#frontier .buttons{position:absolute;top:74.54%;left:-12.6%;width:125.2%;text-align:center}
#frontier .bt-google{display:block;width:33.7%;top:0;position:absolute;left:0}
#frontier .bt-google img{position:absolute;left:0;top:0;width:100%}
#frontier .bt-appstore{display:block;width:31.31%;top:0;position:absolute;left:34.345%}
#frontier .bt-appstore img{position:absolute;left:0;top:0;width:100%}
#frontier .bt-video{display:block;position:absolute;top:0;right:0;width:33.7%}
#frontier .bt-video img{position:absolute;left:0;top:0;width:100%}
#frontier .bt-video .bg{opacity:0;-ms-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;-webkit-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}
#frontier .bt-video:hover .bg{opacity:1}

#story .bg{left:50%;top:0;position:absolute}
#story .def,
#story .min{left:0;top:0;position:absolute}
#story .fit-x.min{display:none}
#story .vis.min{display:none}

#storyVideo .container{overflow:hidden}
#storyVideo .bgvideo img{display:block;width:100%;height:auto}

#character{}
#character .c-cont{background:#fff;overflow:hidden}
#character .swiper-container{position:absolute;top:0;width:100%;height:100%;bottom:0;left:0;right:0}
#character .swiper-container .swiper-slide{overflow:hidden}
#character .in-content{height:87.8%}
#character img{display:block;width:100%;height:auto}
#character .vis .prev{left:-5%}
#character .vis .next{left:12%}
#character .content{position:absolute;width:70%;bottom:-12%;left:0;height:3.7%}
#character .tit{position:absolute;width:100%;bottom:125%;left:0}
#character .tit img{bottom:0}
#character .tit .prev{left:-25%}
#character .tit .next{left:75%}
#character .bt-play{width:48%;display:block}
#character .in-content.btns{z-index:90;pointer-events:none}
#character .bt-group{position:absolute;top:107.5%;right:0%;width:17.6%}
#character .bt-group a:after{content:"";position:absolute;display:block;left:0;top:0;bottom:0;right:0;border:1px solid #000}
#character .bt-group .bt-prev{position:absolute;pointer-events:auto;right:50%;top:0;width:50%;margin-right:-1px}
#character .bt-group .bt-next{position:absolute;pointer-events:auto;left:50%;top:0;width:50%}
#character .bt-group a:hover{background:#bfbfbf}
#character img.prev{position:absolute;opacity:0;left:-50%;
-ms-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#character img.now{position:absolute;opacity:1;left:0;
-ms-transition:all .3s .2s ease-in-out;-moz-transition:all .3s .2s ease-in-out;-webkit-transition:all .3s .2s ease-in-out;transition:all .3s .2s ease-in-out}
#character img.next{position:absolute;opacity:0;left:50%;
-ms-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}

#characterVideo .container{overflow:hidden}

#gallery .c-cont img{display:block;width:100%;height:auto}
#gallery .vis.tit{left:0}
#gallery .fit-x{bottom:0}


#mediaDetail .layer-inner{width:95%;margin:auto;}
#mediaDetail .player{position:absolute;top:0;left:0;right:0;bottom:0}
#mediaDetail #mediaPlayer{width:100%;height:100%}
#mediaDetail .bt-close{position:absolute;width:5.5%;left:auto;right:0;top:auto;bottom:102.2%}

#galleryDetail .layer-inner{width:95%;margin:auto;}
#galleryDetail .bt-close{position:absolute;width:5.5%;left:auto;right:0;top:auto;bottom:102.2%}
#galleryDetail .swiper-container{position:absolute;top:0;left:0;right:0;bottom:0}
#btPrev{display:none;}
#btNext{display:none;}
#btPrev img,
#btNext img{display:block;width:100%;height:auto}

.scr-to-explore{position:absolute;left:50%;z-index:1}
.scr-to-explore img{display:block;width:100%;height:auto}
#frontier .scr-to-explore{bottom:0}
#story .scr-to-explore{top:0}


@media screen and (max-width: 959px) {
	#story .fit-x.def{display:none}
	#story .fit-x.min{display:block}
	#story .vis.def{display:none}
	#story .vis.min{display:block}
}