@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
/* Reserved Class
-------------------------------------------------------------- */
button,
label { cursor: pointer; background-color: transparent; }
.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; }
.sprSet { background: url(http://s.nx.com/s2/game/arpiel/event/2015/1112_gstar/spr_set.png); text-indent: -9999px; display: block; }
.fix { position: fixed !important; }
/* Styles
-------------------------------------------------------------- */
body,
html { width: 100%; height: 100%; background: #000; font-family: 'Noto Sans TC';}
#wrap { margin: 0 auto; position: relative; width: 100%; min-width: 1280px; max-width: 1920px; height: 4250px; overflow: hidden; }
#wrap .btn { cursor: default; }
.movieArea { z-index: 50; margin: 0 0 0 -960px; position: absolute; left: 50%; top: 0; width: 1920px; }
.movieArea .cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/bg_pattern_intro.png); }
.movieArea video { z-index: 50; width: 1920px; }
#wrap .bgTop { z-index: 100; position: absolute; left: 0; top: 0; width: 100%; min-width: 1280px; height: 1030px; opacity: 0; filter: alpha(opacity=0); }
.bgTop .bg1 { z-index: 50; position: absolute; left: 0; top: 0; width: 100%; height: 1030px; background: url(../images/bg_top1.jpg) no-repeat center 0; }
.bgTop .bg2 { z-index: 150; position: absolute; left: 0; top: 0; width: 100%; height: 1030px; background: url(../images/bg_top2.jpg) no-repeat center 0; display: none; }
.bgTop .bg3 { z-index: 100; position: absolute; left: 0; top: 0; width: 100%; height: 1030px; background: url(../images/bg_top3.jpg) no-repeat center 0; display: none; }
#wrap .stoneArea { position: absolute; left: 0; top: 0; width: 100%; }
#wrap .stoneArea .stone { position: absolute; }
#wrap .stoneArea .stone1 { top: 650px; right: 0; }
#wrap .stoneArea .stone2 { top: 930px; left: 0; }
#wrap .stoneArea .stone3 { top: 0px; right: 0; }
#wrap .innerWrap { z-index: 180; position: absolute; left: 0; top: 0; margin: 0 auto; width: 100%; min-width: 1280px; height: 4250px; background: url(../images/bg.png) no-repeat center 0; }
#topArea { z-index: 300 !important; }
.btnArea { margin: 0 0 0 -640px; position: absolute; left: 50%; top: 0; width: 1280px; height: 63px; opacity: 0; filter: alpha(opacity=0); }
.btnArea .btn { position: absolute; }
.btn.down { position: absolute; top: 54px; left: 735px; }
.btn.down a { transition: .3s all ease; display: block; width: 159px; height: 129px; background: url(../images/btn_down.png) no-repeat; text-indent: -9999px; }
.btn.movie1 { position: absolute; top: 174px; left: 156px; }
.btn.movie1 button { transition: .3s all ease; display: block; width: 185px; height: 164px; background: url(../images/btn_movie1.png) no-repeat; text-indent: -9999px; }
.btn.movie2 { position: absolute; top: 82px; left: 300px; }
.btn.movie2 button { transition: .3s all ease; display: block; width: 129px; height: 110px; background: url(../images/btn_movie2.png) no-repeat; text-indent: -9999px; }
.btn.down a:hover,
.btn.movie1 button:hover,
.btn.movie2 button:hover { filter: brightness(175%); }
.getArea { margin: 0 0 0 -640px; position: absolute; top: 1987px; left: 50%; width: 1280px; }
.get1 { position: absolute; top: 0; left: 262px; width: 174px; }
.get1 button { display: block; width: 229px; height: 61px; text-indent: -9999px; }
.get2 { position: absolute; top: 0; left: 787px; width: 229px; }
.get2 button { display: block; width: 229px; height: 61px; text-indent: -9999px; }
.btnDetail { margin: 0 0 0 -640px; position: absolute; top: 3324px; left: 50%; width: 1280px; }
.btnDetail .toolTip { position: absolute; left: -163px; top: -83px; display: none; }
#wrap .detail1 { position: absolute; top: 0px; left: 1040px; cursor: pointer; }
#wrap .detail2 { cursor: pointer; }
.detail1:hover .toolTip { display: block; }
.detail2:hover .toolTip { display: block; }
.detail1 a { display: block; width: 32px; height: 33px; text-indent: -9999px; }
.detail1 .toolTip { width: 221px; height: 165px; background: url(../images/bg_toolTip1.png) no-repeat; }
.detail2 .toolTip { left: -160px; width: 221px; height: 165px; background: url(../images/bg_toolTip2.png) no-repeat; }
.detail2 { position: absolute; top: 165px; left: 341px; }
.detail2 a { display: block; width: 32px; height: 33px; text-indent: -9999px; }
.nowInfo { margin: 0 0 0 -640px; position: absolute; top: 4107px; left: 50%; width: 1280px; }
.nowInfo .parsing { position: absolute; top: 59px; left: 383px; width: 324px; text-align: center; }
.nowInfo .parsing img { margin: 0 -3px; }
.nowInfo .parsing .ico_cnt { margin: 0 0 0 5px; }
.nowInfo .join { position: absolute; left: 181px; top: -11px; width: 172px; }
.nowInfo .join button { display: block; width: 172px; height: 163px; text-indent: -9999px; }
.quick { z-index: 200; position: absolute; right: 12px; top: 226px; }
.overlay { z-index: 200; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity = 50); display: none; }
.layerPop { z-index: 300; position: fixed; left: 50%; top: 50%; }
.layerPop .confirm { position: absolute; bottom: 12px; left: 190px; }
.layerPop .close { position: absolute; right: 0px; top: 0px; }
.layerPop .close button { display: block; text-indent: -9999px; width: 60px; height: 60px; }
.layerPop .confirm button { display: block; text-indent: -9999px; width: 130px; height: 42px; }
.customSelect { position: absolute; left: 54px; top: 168px; width: 404px; height: 29px; }
.customSelect .txt { padding-bottom: 0; width: 100%; height: 100%; line-height: 29px; background: none; text-indent: 10px; position: absolute; left: 0; top: 0; _display: none; color: #070707; font-size: 13px; text-align: left; }
.customSelect select { width: 100%; height: 100%; cursor: pointer; position: relative; opacity: 0; filter: alpha(opacity=0); }
#popMovie { position: absolute; top: 100px; left: 50%; margin: 0 0 0 -643px; width: 1286px; height: 777px; background: url(../images/bg_movie.png) no-repeat; }
#popMovie .tabArea { position: absolute; top: 0; left: 0; }
#popMovie .tabArea li { float: left; }
#popMovie .tabArea li.on button { background: yellow; }
#popMovie .tabArea li button { display: block; width: 150px; height: 50px; background: #ccc; }
#popMovie .youtubeArea { position: absolute; top: 54px; left: 3px; width: 1280px; height: 720px; background: #000; }
#popDetail1 { margin: -159px 0 0 -274px; width: 548px; height: 319px; background: url(../images/bg_popDetail1.png) no-repeat; }
#popDetail1 .confirm { display: none; }
#popDetail2 { margin: -144px 0 0 -274px; width: 548px; height: 289px; background: url(../images/170119_teaserMain/bg_popDetail2.png) no-repeat; }
#popDetail2 .confirm { display: none; }
#popDrawing { position: absolute; margin: 0 0 0 -358px; top: 20px; width: 717px; height: 922px; background: url(../images/bg_picture.png) no-repeat; }
#popDrawing .link { position: absolute; bottom: 19px; left: 244px; }
#popDrawing .link a { display: block; width: 229px; height: 67px; text-indent: -9999px; }
#choiceChar { margin: -250px 0 0 -271px; width: 511px; height: 542px; background: url(../images/bg_choiceChar.png) no-repeat; }
#choiceChar .close button { width: 45px; height: 45px; }
#itemClear { margin: -250px 0 0 -271px; width: 511px; height: 542px; background: url(../images/bg_clear.png) no-repeat; }
#itemClear .close button { width: 45px; height: 45px; }
#popNotice { margin: -321px 0 0 -421px; width: 843px; height: 643px; background: url(../images/bg_notice.png) no-repeat; }
#popNotice .close button { width: 45px; height: 45px; }

#controller { display: none; z-index: 200; position: fixed; top: 50%; right: 30px; margin-top: -150px; }
#controller li {
	margin-bottom: 20px;
}
#controller li a { 
	height: 60px;
	display: block;
	width: 100px;
	background: url(../images/controller.png) no-repeat right 0px;
	transition: .3s all ease;
	filter:grayscale(.55) brightness(40%);
	text-indent:-9999px;	
}
#controller li:nth-child(1) a{ background-position-y: 0px;}
#controller li:nth-child(2) a{ background-position-y: -60px;}
#controller li:nth-child(3) a{ background-position-y: -120px;}
#controller li a:hover,
#controller li.on a { filter:grayscale(0) brightness(110%); }

#sec1 { height:950px;}
#sec2 { height:970px;}
#sec3 { height:2230px;}
#bgplayer {
    position: absolute;
    z-index: 51;
    top: 1200px;
    left: -80px;
	display:none;
}
#bgplayer video {
    width: 80%;
}

ul.qlink { display:none; position: fixed; top: 50%; margin-top: -150px; left: 0; z-index: 1100; }
ul.qlink li a { filter: brightness(.5) saturate(.8); width: 210px; height: 85px; text-indent: -9999px; background-image: url(../images/qlink.png); display: block; background-repeat: no-repeat; }
ul.qlink li a { background-position: 0 0; }
ul.qlink li+li a { background-position: 0 -85px; }
ul.qlink li+li+li a { background-position: 0 -170px; height: 120px; }
ul.qlink li a:hover { filter: brightness(1) saturate(1); }