@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video { font-family: 'Noto Sans TC', sans-serif; }
/* Reserved Class
-------------------------------------------------------------- */
body,
html { font-family: 'Noto Sans TC'; width: 100%; height: 100%; background: #000; }
body { overflow-x: hidden; }
.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; }
button { border: none; padding: 0; background-color: transparent; cursor: pointer; }
/* Styles
-------------------------------------------------------------- */
#wrap .btn { cursor: default; }
#wrap { position: relative;/*width: 100%;
	margin: 0 auto;
	min-width: 1280px;
	max-width: 1920px;
	height: 950px;
	overflow-x: hidden;
	overflow-y: scroll;
	height:100%;*/
	height: 3900px;
	min-width: 1600px;
    max-width: 1920px;
    margin: 0 auto;
}
.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: 51; position: absolute; left: 0; top: 0; width: 100%; min-width: 1280px; height: 950px;/*opacity: 0;*/
}
.bgTop .bg1 { z-index: 50; position: absolute; left: 0; top: 0; width: 100%; height: 1670px; background: url(../images/bg_01.png) no-repeat center 0; }
#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 .movieWrap { /*z-index: 180; position: absolute; left: 0; top: 0; margin: 0 auto; width: 100%; min-width: 1280px; height: 3900px; background: url(../images/bg.png) no-repeat center 0;*/ }
#wrap .movieWrap { z-index: 19; margin: 0 0 0 -960px; position: absolute; left: 50%; top: 0; /*width: 1920px;*/ /*filter: contrast(110%);*/ }
#wrap .movieWrap video { z-index: 50; /*width: 1920px;*/ }
#wrap .innerWrap { z-index: 60; position: absolute; left: 0; top: 0px; margin: 0 auto; width: 100%; min-width: 1600px; /*height: 3390px;*/
height: 4340px;/*background: url(../images/bg_02.png) no-repeat center bottom;*/
}
#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); z-index: 51; }
.btnArea a,
.btnArea button { width: 210px; height: 41px; background: url(../images/btn.png) no-repeat; display: block; z-index: 100; text-indent: -9999px; }
.btn.down { position: absolute; top: 540px; left: 829px; transform: rotate(4.7deg); }
.btn.down a { background-position-y: 0px; }
.btn.movie1 { position: absolute; top: 561px; left: 307px; ; transform: rotate(1.69deg); }
.btn.movie1 button { background-position-y: -82px; }
.btn.movie2 { position: absolute; top: 631px; left: 272px; transform: rotate(-3.5deg); }
.btn.movie2 button { background-position-y: -41px; }
.btnArea a:hover,
.btnArea button:hover { background-position-x: -210px; }
.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-color: rgba(0,0,0,.55); display: none; }
.layerPop { display: none; z-index: 300; position: fixed; left: 50%; top: 50%; margin: -312px 0 0 -550px; width: 1090px; height: 614px; border: 0px solid #ccc; background: #000; }
.layerPop .confirm { position: absolute; bottom: 12px; left: 190px; }
.layerPop .close { position: absolute; right: -1px; top: -50px; }
#popDrawing.layerPop .close { right: 0px; top: 0px; }
.layerPop .close button { border: none; display: block; text-indent: -9999px; width: 49px; height: 49px; background: url(../images/btn_close_movie.jpg) no-repeat; cursor: pointer; filter: grayscale(50%); }
.layerPop .close button:hover { filter: grayscale(0%); }
.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; }
#bnReservation { z-index: 180 !important; top: 362px !important; }
#popDrawing.layerPop .close { right: 0px; top: 0px; }
#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; }
.quick { position: absolute; right: 0; top: 500px }
.commonQuick { top: 170px !important; }
canvas { display: block; vertical-align: bottom; }
/* ---- particles.js container ---- */
#particles-js { position: absolute; width: 100%; height: 1080px; background-color: none; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */
.count-particles { background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; }
.js-count-particles { font-size: 1.1em; }
#stats,
.count-particles { -webkit-user-select: none; margin-top: 5px; margin-left: 5px; }
#stats { border-radius: 3px 3px 0 0; overflow: hidden; }
.count-particles { border-radius: 0 0 3px 3px; }
#PS_Dimmed { position: fixed !important; }
iframe[name='google_conversion_frame'] { width: 1px; height: 1px; font-size: 0; line-height: 0; position: absolute; top: 0; left: -1000%; overflow: hidden; }
#bgplayer { position: absolute; z-index: 51; top: 1010px; left: -100px; }
#bgplayer video { width:1600px;}
ul.qlink { position: fixed; top: 50%; margin-top: -150px; left: 0; z-index: 70; display: none; }
ul.qlink li a { text-indent: -9999px; background-image: url(../images/qlink.png); display: block; width: 120px; height: 110px; background-repeat: no-repeat; }
ul.qlink li a:hover { /*background-position-y:-110px;*/
filter: brightness(150%); }
#sec1 { height: 900px; }
#sec2 { height: 920px; background: url(../images/bg_02.png) no-repeat center 0; }
#sec3 { height: 540px; background: url(../images/bg_03.png) no-repeat center 0; }
#sec4 { height: 600px; background: url(../images/bg_04.jpg) no-repeat center 0; }
#sec5 { height: 290px; background: url(../images/bg_05.jpg) no-repeat center 0; }
#sec6 { height: 560px; background: url(../images/bg_06.jpg) no-repeat center 0; }
#sec7 { height: 530px; background: url(../images/bg_07.jpg) no-repeat center 0; }
.innerWrap>div { background-image:none;}
#controller { 
	display: none;
	padding: 10px 15px 40px;
	background-color: rgba(0,0,0,.35);
	border-radius: 6px;
	z-index: 70;
	position:fixed;
	/*position: absolute;
	top: 318px;*/
	top:50%;
	right: 30px;
	margin-top:-150px;
}
#controller a { text-align: right; color: #aaaaaa; text-decoration: none; font-size: 15px; height: 28px; line-height: 28px; display: block; width: 100%; background: url(../images/dot.png) no-repeat right 0px; padding-right: 24px; }
#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: -28px; color: #dddddd; }
#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: -5px; 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: -5px; 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; /*width: 60px;*/
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; }
.innerWrap .leaves { z-index: 30; position: absolute; left: -1000px; top: 0; width: 100%; height: 1220px; }
.october-leaf { position: absolute; background-color: transparent; background-image: url('../images/leaves.png'); opacity: 0.8 !important; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); }