@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: 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 {
	margin: 0 auto;
	position: relative;
	width: 100%;
	min-width: 1280px;
	max-width: 1920px;
	/*height: 3900px;*/
	height: 950px;
	overflow: hidden;
}
.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: 50;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	min-width: 1280px;
	height: 3900px;
	opacity: 0;
}
.bgTop .bg1 {
	z-index: 50;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1670px;
	background: url(../images/bg_new_01.png) no-repeat center 0;
}
.bgTop .bg2 {
	z-index: 49;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 3900px;
	background: url(../images/bg_new_02.jpg) no-repeat center 1670px;
}
#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: 49;
	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: 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;*/
}
#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: 739px;
	left: 227px;
}
.btn.down a {
	display: block;
    z-index: 100;
    position: relative;
	width: 110px;
	height: 110px;
	text-indent: -9999px;
	background: url(../images/btn.png) no-repeat;
	background-position: -300px 0px;
}
.btn.down a:hover {
	background-position: -300px -150px;
}
.btn.down .bg {
	background: url(../images/btn.png) no-repeat;
	background-position: -300px -300px;
    z-index: 50;
    position: absolute;
    top: 0px;
    left: 0px;
	width: 110px;
	height: 110px;
    opacity: 0;
}
.btn.movie1 {
	position: absolute;
	top: 711px;
	left: 102px;
}
.btn.movie1 button {
	display: block;
    z-index: 100;
    position: relative;
	width: 150px;
	height: 150px;
	text-indent: -9999px;
	background: url(../images/btn.png) no-repeat;
	background-position: -150px 0px;
}
.btn.movie1 button:hover {
	background-position: -150px -150px;
}
.btnArea .movie1 .bg {
	background: url(../images/btn.png) no-repeat;
	background-position: -150px -300px;
    z-index: 50;
    position: absolute;
    top: 0px;
    left: 0px;
	width: 150px;
	height: 150px;
    opacity: 0;
}
.btn.movie2 {
	position: absolute;
	top: 620px;
	left: 89px;
}
.btn.movie2 button {
	display: block;
    z-index: 100;
    position: relative;
	width: 110px;
	height: 110px;
	text-indent: -9999px;
	background: url(../images/btn.png) no-repeat;
	background-position: 0px 0px;
}
.btn.movie2 button:hover {
	background-position: 0px -150px;
}
.btnArea .movie2 .bg {
	background: url(../images/btn.png) no-repeat;
	background-position: 0px -300px;
    z-index: 50;
    position: absolute;
    top: 0px;
    left: 0px;
	width: 110px;
	height: 110px;
    opacity: 0;
}

.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,.75);	
	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;
}
#bnReservation {
	z-index: 180 !important;
	top: 362px !important;
}
#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;
}