@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 { z-index: 100; 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: 884px; left: 220px; }
.btn.down a { transition: .3s all ease; display: block; width: 196px; height: 50px; background: url(../images/btn_down.png) no-repeat; text-indent: -9999px; }
.btn.movie1 { position: absolute; top: 884px; left: 885px; }
.btn.movie1 button { transition: .3s all ease; display: block; width: 196px; height: 50px; background: url(../images/btn_movie1.png) no-repeat; text-indent: -9999px; }
.btn.movie2 { position: absolute; top: 82px; left: 300px; }
.btn.movie2 button { transition: .2s 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(200%); }
.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 { background-color: rgba(0,0,0,.75); z-index: 200; position: fixed; left: 0; top: 0; width: 100%; height: 100%; 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 {
    width: 110px;
    padding: 10px 0px 40px;
    z-index: 70;
    position: fixed;
    top: 300px;
    right: 0px;
}
#controller li { margin-bottom: 40px; }
#controller a { text-align: center; color: #a0935f; text-decoration: none; font-size: 16px; height: 25px; line-height: 25px; display: block; background: url(../images/dot.png) no-repeat right 0px; /*padding-right: 28px;*/ }
#controller a { /*text-shadow: 2px 0 0 rgba(0,0,0,.35), -2px 0 0 rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.35), 0 -2px 0 rgba(0,0,0,.35), 1px 1px rgba(0,0,0,.35), -1px -1px 0 rgba(0,0,0,.35), 1px -1px 0 rgba(0,0,0,.35), -1px 1px 0 rgba(0,0,0,.35); */ }
#controller a:hover,
#controller .on a { background-position-y: -25px; color: #a0935f; }
#audio { position: absolute; bottom: 0px; right: -90px; z-index: 125; width: auto; }
.jp-audio { width: 120px; }
.jp-audio .jp-interface { height: 52px; }
.jp-stop { background-image: none; }
.jp-play { position: absolute; left: -35px; top: 21px; width: 19px; height: 17px; background: url(../images/play_off.png) no-repeat; cursor: pointer; }
.jp-play:focus { background: url(../images/play_off.png) no-repeat; }
.jp-pause { display: none; position: absolute; left: -35px; top: 21px; width: 18px; height: 17px; background: url(../images/play_on.png) no-repeat; cursor: pointer; }
.jp-volume-controls { background: url(../images/bar.png) no-repeat; height: 5px; position: absolute; top: 26px; left: 20px; display: none; }
.jp-volume-bar { width: 123px; background: none; height: 6px; left: 0px; top: 0px; }
.jp-volume-bar-value { background: url(../images/volume.png) no-repeat; height: 6px; position: absolute; top: 0px; left: 0px; }
.jp-audio .jp-controls { width: 140px; padding: 20px 20px 0 20px; }
#sec1 { position: relative; height: 1000px; }
#sec2 { position: relative; height: 1200px; background-image: url(../images/sec_02.jpg); }
#sec2 .bg { background: url(../images/bg_section2_effect.jpg) no-repeat center 0; }
#sec2 .bg { z-index: 50; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; filter: alpha(opacity=100); }
#sec3 { height: 1400px; padding-top:1px; position:relative; background: url(../images/sec_03.jpg) no-repeat center 0; }
a.btn_nitice { transition: .2s all ease; width:260px; height:75px; text-indent:-9999px; display:block; margin:1240px auto 0; background: url(../images/btn_nitice.png) no-repeat center 0; }
a.btn_nitice:hover { filter: brightness(200%); }
#bgplayer { position: absolute; z-index: 31; top: 00px; left: 0px; }
ul.qlink { position: fixed; top: 300px; left: 0; z-index: 1100; }
ul.qlink li a { filter: brightness(.75) 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); }
.copyright { text-align: center; filter: brightness(.5);}
.abgne_tab { position: absolute; z-index: 61; top: 228px; left: 50%; margin-left:-150px }
ul.tabs { margin-bottom: 20px; border-bottom: #856d6d 1px solid; height: 35px; }
ul.tabs li { float: left; margin-right: -23px; }
ul.tabs li a { display: block; background-position: 0 0; text-indent: -9999px; width: 151px; height: 35px; background-image: url(../images/tab.png); background-repeat: no-repeat; }
ul.tabs li+li a { background-position: 0 -35px; }
ul.tabs li+li+li a { background-position: 0 -70px; }
ul.tabs li a:hover { background-position-x: right; }
ul.tabs li.active a { background-position-x: right; }
.tab_content { font-size: 16px; color: #e4bebd; line-height: 1.4em; height: 500px; width: 715px; padding-left: 15px; }
.tab_content p { margin-bottom: 1em; }