﻿html,body {height:100%;overflow:hidden;}
body {margin:0;padding:0;background-color:#000;}
main,article,section,nav,footer,video { display: block; }
a {outline:none;border:none;}
img {border:none;}
button {outline:none;cursor:pointer;background:none;border:none;}
/* bg video */
video#bgvid {width:2200px;height:auto;min-width:100%;min-height:100%;left:50%;top:50%;position:absolute;-ms-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);opacity:0.5;}
.none {background-image:url(../logo50images/none.jpg);}

main {height:100%;position:relative;overflow:auto;}
main .container {height:100%;min-width:1200px;min-height:900px;background-size:cover;background-position:0 0;background-repeat:no-repeat;position:relative;}
main .container article {width:100%;height:100%;}

main article.main section.main-container {height:100%;text-align:center;position:relative;}
main article.main section.main-container .logo {top:50px;display:none;}
main article.main section.main-container div {position:absolute;left:0;width:100%;min-width:1200px;}
main article.main section.main-container .ani-date {top:270px;height:87px;overflow:hidden;margin-top:40px;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
main article.main section.main-container .ani-main-title {top:300px;height:204px;overflow:hidden;margin-top:50px;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
main article.main section.main-container .ani-sub-title {top:500px;height:65px;overflow:hidden;margin-top:32px;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
main article.main section.main-container .ani-world {top:565px;display:none;}
main article.main section.main-container .ani-footer-navi {bottom:150px;display:none;}
main article.main section.main-container .ani-footer-navi div {position:relative;height:164px;background-position:center;background-repeat:no-repeat;width:1200px;margin:0 auto;}
main article.main section.main-container .ani-footer-navi button {position:absolute;top:70px;height:95px;}
main article.main section.main-container .ani-footer-navi button.btn-1 {left:50%;width:80px;margin-left:-40px;}

main article.layer1 {display:none;}
main article.layer1 > div {height:100%;min-width:1200px;margin:0 auto;position:relative;overflow:hidden;}
main article.layer1 > div img {position:absolute;}
main article.layer1 > div .img-char {right:29%;top:50%;margin-top:-850px;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}


main article.layer3 {display:none;}
main article.layer3 > div {height:100%;min-width:1200px;margin:0 auto;position:relative;overflow:hidden;}
main article.layer3 > div img {position:absolute;}
main article.layer3 > div .img-title {top:50px;left:50%;margin-left:-305px;}
main article.layer3 > div .img-npc {top:68%;margin-top:-230px;left:61%;margin-left:-637px;display:none;}
main article.layer3 > div .img-level {left:46%;margin-left:-337px;bottom:0;}



main article.layer2 {display:none;}
main article.layer2 > div {height:100%;min-width:1200px;margin:0 auto;position:relative;overflow:hidden;}
main article.layer2 > div > img {position:absolute;}
main article.layer2 > div > img.unicorn {left:50%;top:100px;margin-left:-250px;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
main article.layer2 > div .img-title {top:70px;left:50%;margin-left:-305px;}
main article.layer2 > div .slide-box {width:1200px;height:610px;position:absolute;left:50%;margin-left:-600px;top:250px;}
main article.layer2 > div .slide-box .arrow-button {position:absolute;top:50%;margin-top:-60px;background-repeat:no-repeat;width:130px;height:120px;z-index:100;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
main article.layer2 > div .slide-box .arrow-left-off {left:0;background-image:url(../logo50images/arrow_left_off.png);}
main article.layer2 > div .slide-box .arrow-left-off:hover {background-image:url(../logo50images/arrow_left_on.png);}
main article.layer2 > div .slide-box .arrow-right-off {right:0;background-image:url(../logo50images/arrow_right_off.png);}
main article.layer2 > div .slide-box .arrow-right-off:hover {background-image:url(../logo50images/arrow_right_on.png);}
main article.layer2 > div .slide-box .slide-frame {width:0;height:610px;margin:0 auto;position:relative;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
main article.layer2 > div .slide-box .frame-support {width:7px;height:100%;position:absolute;top:0;}
main article.layer2 > div .slide-box .frame-left {left:0;}
main article.layer2 > div .slide-box .frame-right {right:0;background-position-x:right;}
main article.layer2 > div .slide-box .slide-frame .bg-color {background-color:black;position:absolute;left:8.5px;top:8px;width:1057px;height:594px;}
main article.layer2 > div .slide-box .slide {position:absolute;left:71.5px;top:8px;width:1057px;display:none;height:594px;overflow:hidden;}
main article.layer2 > div .slide-box .slide ul {position:relative;width:1063px;height:600px;list-style-type:none;margin:0 auto;overflow:hidden;margin:0;padding:0;position:relative;}
main article.layer2 > div .slide-box .slide ul .slide-item {width:1063px;height:600px;position:absolute;top:0;left:0;}
main article.layer2 > div .slide-box .slide ul .slide-item video {height:100%;width:100%;}
main article.layer2 > div .slide-box .slide ul .slide-item iframe {height:100%;width:100%;display:block;}
main article.layer2 > div .slide-box .slide ul .slide-item img {width:100%;height:100%;display:block;}
main article.layer2 > div .slide-box .slide ul .slide-item.high > img {position:absolute;left:0;top:0;width:100%;height:100%;}
main article.layer2 > div .slide-box .slide ul .slide-item.high button.play {position:absolute;left:50%;top:50%;background-image:url(../logo50images/play_off.png);width:130px;height:130px;margin:-75px 0 0 -75px;}
main article.layer2 > div .slide-box .slide ul .slide-item.high button.play:hover {background-image:url(../logo50images/play_over.png);}
main article.layer2 > div .slide-box .slide ul .slide-item.high button.pause {position:absolute;left:50%;top:50%;background-image:url(../logo50images/pause_off.png);width:130px;height:130px;margin:-75px 0 0 -75px;display:none;}
main article.layer2 > div .slide-box .slide ul .slide-item.high button.pause:hover {background-image:url(../logo50images/pause_over.png);}


main .home-today {position:absolute;top:0;right:239px;display:none;top:50px;}
main .home-button {position:absolute;top:0;right:50px;display:none;top:50px;}
main .copyright {position:absolute;bottom:25px;left:50%;margin-left:-222px;display:none;}
main .sub-navi {width:150px;height:371px;position:fixed;left:0;top:0;height:100%;display:none;background-color:rgba(0,0,0,0.5);background-repeat:no-repeat;background-position:center;z-index:1000;}
main .sub-navi > img {margin:0 0 0 25px;}
main .sub-navi div {position:absolute;width:100%;height:371px;background:none;top:50%;margin-top:-185.5px;}
main .sub-navi div img.scroll-bar {position:absolute;left:27px;top:87px;width:20px;height:17px;}
main .sub-navi div button {position:absolute;left:50px;width:70px;height:50px;}
main .sub-navi div button.btn-0 {top:11px;}
main .sub-navi div button.btn-1 {top:93px;}
main .sub-navi div button.btn-2 {top:178px;}
main .sub-navi div button.btn-3 {top:260px;}
.none video {display:none;}

.pview{ position:relative; display:block; margin:0 auto; width:1000px;}
.items{ display:block; position:absolute; top:280px; left:62px;}
.items a{ display:block; float:left; width:60px; height:60px; background:url(../logo50images/011.png) left top no-repeat; margin-right:108px; margin-bottom:80px; text-align:center}
.items a:nth-child(6n){ margin-right:0px;}
.items a img{ display:inline-block; margin:10px 0 0 -20px; padding:0; border:0}


#preview{position:absolute;border:1px solid #614635;background:#3c2116;padding:5px;display:none;color:#fff;}


/* 스크롤 디자인 */
::-webkit-scrollbar {width: 10px; height: 8px; border: 3px solid #fff;z-index:9999;}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: #efefef}
::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}


.footerBQ {position: absolute;z-index: 999999;width: 100%;height: 60px;bottom:0;text-align:center;}
.footerBQ a{text-decoration:none;margin:0 10px;}
.footerBQ a:link {
    font-size: 14px;
    color: #ffffff85;
    text-decoration: none;
   }
.footerBQ a:visited {
    font-size: 14px;
    color: #ffffff85;
    text-decoration: none;
   }
.footerBQ a:hover {
    font-size: 14px;
    color: #ffffff85;
    text-decoration: underline;
   }
