@charset "UTF-8";

html, body, #wrap { height: 100%; }

body {
	overflow-x: hidden;
	font-family: "微軟正黑體", Tahoma, Arial, Helvetica, sans-serif !important;
	font-size: 13px;
	height: 100%;
	border: none;
	color: #D8DAD7;
	background: #000;
}

.com { ie fix for span a:hover span; }

/*-------------------滿版設定-------------------*/
body > #wrap {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
}

.clearfix {
	display: inline-block;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */

#flash {
        text-align:center;
        /* for mozilla */
        min-width:1000px;
        min-height:800px;
        width:100%;
        height:100%;
        /* for IE */
        width:expression( Math.max( document.body.clientWidth,1000 ) + "px" );
        height:expression( Math.max(document.body.clientHeight,800 ) + "px" );
}

#flash1 {
        text-align:center;
        /* for mozilla */
        min-width:380px;
        min-height:200px;
        width:380px;
        height:200px;
        /* for IE */
        width:expression( Math.max( document.body.clientWidth,380 ) + "px" );
        height:expression( Math.max(document.body.clientHeight,200 ) + "px" );
}
	
#flash2 {
        text-align:center;
        /* for mozilla */
        min-width:175px;
        min-height:42px;
        width:175px;
        height:42px;
        /* for IE */
        width:expression( Math.max( document.body.clientWidth,175 ) + "px" );
        height:expression( Math.max(document.body.clientHeight,42 ) + "px" );
}
	
.style1 {
		color: #999999;
		font-size: 12px;
}

/*-------------------intro頁-------------------*/
#flashIntro {
	position: fixed;
	_position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(../images/intro.jpg) #000 no-repeat center fixed;
	z-index: 0;
}

#languageBtn{
	position: absolute;
	width: 120px;
	height: 16px;
	margin: 18px 0 0 -365px;
	top: 50%;
	left: 50%;
	font-size: 8px;
	color: #EEE;
	line-height: 14px;
	letter-spacing: 2px;
	background: url(../images/language.png) no-repeat center;
	z-index: 1;
}

#languageBtn a{
	float: left;
	display: block;
	width: 40px;
	height: 16px;
	margin: 0;
	padding: 0;
	color: #CCC;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
	text-decoration: none;
}

#languageBtn a:hover{
	color: #FFF;
}

#copyright{
	/*position: absolute;
	width: 320px;
	height: 10px;
	bottom: 10px;
	right: 40px;
	background: url(../images/copyright.png) no-repeat;
	z-index: 1;*/
	position: absolute;
	width: 320px;
	height: 50px;
	margin: 250px 0 0 120px;
	top: 50%;
	left: 50%;
	background: url(../images/copyright.png) no-repeat;
	z-index: 1;
}

/*-------------------首頁-------------------*/
#flashIndex {
	position: fixed;
	_position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/*background: url(../images/index.jpg) #000 no-repeat center top fixed;*/
	background: #000;
	z-index: 0;
}

#flashIndex .slideShow{
	width: 100%;
	height: 100%;
}

#flashIndex .slideShow div{
	width: 100%;
	height: 100%;
}

#flashIndex .slideShow div img{
	width: 100%;
}

#flashIndexMask {
	position: fixed;
	_position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(../images/flashIndexMask.png) repeat;
	z-index: 1;
}

#slogan {
	position: fixed;
	_position: absolute;
	width: 380px;
	height: 200px;
	margin: 0 0 0 100px;
	top: 50%;
	left: 50%;
	background: url(../images/slogan.png) no-repeat;
	z-index: 2;
}

#slogan div{
	display: none;
}

#logo {
	display: block;
	position: fixed;
	_position: absolute;
	width: 140px;
	height: 60px;
	top: 20px;
	left: 20px;
	z-index: 2;
}

#QLogo {
	display: block;
	position: fixed;
	_position: absolute;
	width: 80px;
	height: 50px;
	right: 5px;
	bottom: 20px;
	z-index: 2;
}

#reservation {
	display: block;
	position: fixed;
	_position: absolute;
	width: 32px;
	height: 134px;
	right: 0;
	top: 35px;
	z-index: 3;
}

#footer {
	position: fixed;
	_position: absolute;
	width: 620px;
	height: 25px;
	right: 90px;
	bottom: 16px;
	z-index: 2;
}

#footer li{
	float: left;
}

#footer li.addr{
	width: 350px;
	height: 25px;
	background: url(../images/footer.png) no-repeat;
}

#footer li.contact{
	width: 57px;
	height: 25px;
	background: url(../images/footer.png) no-repeat -350px 0;
}

#footer li.careers{
	width: 46px;
	height: 25px;
	background: url(../images/footer.png) no-repeat -407px 0;
}

#footer li.en{
	width: 46px;
	height: 25px;
	background: url(../images/footer.png) no-repeat -453px 0;
}

#footer li.jp{
	width: 44px;
	height: 25px;
	background: url(../images/footer.png) no-repeat -499px 0;
}

#footer li.youtube{
	width: 22px;
	height: 25px;
	background: url(../images/footer.png) no-repeat -543px 0;
}

#footer li.fb{
	width: 55px;
	height: 25px;
	background: url(../images/footer.png) no-repeat -565px 0;
}

#footer li a{
	display: block;
	width: 100%;
	height: 100%;
}

#newsShow{
	position: fixed;
	_position: absolute;
	width: 460px;
	height: 40px;
	margin: 120px 0 0 0;
	left: -390px;
	top: 50%;
	background: url(../images/newsBox.png) repeat-x;
	z-index: 2;
	overflow: hidden;
}

#newsShow .newsBtn{
	float: right;
	width: 70px;
	height: 40px;
	background: url(../images/newsBtn.png) no-repeat;
}

#newsShow #newsBox{
	float: right;
	width: 370px;
	height: 40px;
	padding: 0 10px 0 10px;
	background: url(../images/newsBox.png) repeat-x;
	overflow: hidden;
}

#newsShow #newsBox div{
	width: 370px;
	height: 12px;
	margin: 14px 0 14px 0;
	line-height: 12px;
	overflow: hidden;
}

#newsShow #newsBox a{
	font-size: 12px;
	color: #FFF;
	text-decoration: none;
}

#newsShow #newsBox a span{
	padding: 0 10px 0 0;
	font-size: 11px;
	color: #FFF;
}

/*-------------------主選單-------------------*/
#mainMenuUp{
	position: fixed;
	_position: absolute;
	width: 100%;/*width: 175px;*/
	height: 42px;
	left: 75px;
	bottom: 0;
	z-index: 2;
	background: url(../images/mainMenuUp.png) no-repeat;
	cursor: pointer;
}

#mainMenuUp div{
	display: none;
}

#mainMenuUp .btn{
	display: block;
	position:absolute;
	width:175px;
	height:42px;
	margin:-42px 0 0 0;
	*margin:0 0 0 -175px;
	background:url(../images/btn.png);
}

#mainMenuUpC{
	position: fixed;
	_position: absolute;
	width: 100%;/*width: 175px;*/
	height: 42px;
	left: 75px;
	bottom: 0;
	z-index: 2;
	background: url(../images/mainMenuUp.png) no-repeat;
	cursor: pointer;
}

#mainMenuUpC .btn{
	position:absolute;
	width:175px;
	height:42px;
	margin:-42px 0 0 0;
	*margin:0 0 0 -175px;
	background:url(../images/btn.png);
}

#mainMenuDn{
	float: left;
	width: 70px;
	height: 46px;
	margin: 7px 0 0 10px;
	z-index: 5;
	background: url(../images/mainMenuDn.png) no-repeat;
	cursor: pointer;
}

#mainMenu{
	position: fixed;
	_position: absolute;
	width: 100%;
	height: 60px;
	left: 0;
	bottom: -60px;
	border-top: 1px solid #111;
	background: #000;
	z-index: 4;
}

#mainMenu #menu{
	position: relative;
	float: right;
	width: 810px;
	height: 60px;
	cursor: pointer;
	overflow: hidden;
}

#mainMenu #menu li{
	float: left;
	height: 60px;
	padding: 0 9px 0 16px;
	background: url(../images/mainMenuHr.png) no-repeat left top;
}

#mainMenu #menu li.about{
	width: 54px;
	background: none;
}

#mainMenu #menu li.news{
	width: 54px;
}

#mainMenu #menu li.facility{
	width: 54px;
}

#mainMenu #menu li.rooms{
	width: 54px;
}

#mainMenu #menu li.dining{
	width: 54px;
}

#mainMenu #menu li.wedding{
	width: 54px;
}

#mainMenu #menu li.conference{
	width: 54px;
}

#mainMenu #menu li.occasions{
	width: 54px;
}

#mainMenu #menu li.contact{
	width: 54px;
}

#mainMenu #menu li.eshopping{
	width: 74px;
}

#mainMenu #menu li.back{
	position: absolute;
	width: 139px;
	height: 60px;
	margin: 0 0 0 -10px;
    z-index: 8;
	background: url(../images/mainMenuHover.png) no-repeat center top;
}

#mainMenu #menu li a{
	position: relative;
	float: left;
	display: block;
	height: 45px;
	padding: 15px 0 0 0;
	color: #FFF;
	font-size: 11px;
	text-align: center;
	letter-spacing: 1px;
	text-decoration: none;
	overflow: hidden;
	z-index: 10;
}

#mainMenu #menu li b{
	float: left;
	display: block;
	height: 45px;
	padding: 15px 0 0 0;
}

#secondMenu{
	position: fixed;
	_position: absolute;
	width: 100%;
	height: 30px;
	left: 0;
	bottom: -30px;
	background: url(../images/secondMenu.png) repeat;
	z-index: 3;
}

#secondMenu h2{
	display: none;
	position: relative;
	float: right;
	padding: 7px 0 0 0;
	height: 23px;
	font-size: 8px;
	color: #666;
	overflow: hidden;
}

#secondMenu h2 a{
	display: inline-block;
	margin: 0 5px 0 5px;
	font-size: 12px;
	line-height: 18px;
	color: #999;
	text-decoration: none;
}

#secondMenu h2 a:hover{
	color: #FFF;
}

#secondMenu #about{
	width: 800px;
}

#secondMenu #news{
	width: 720px;
}

#secondMenu #facility{
	width: 640px;
}

#secondMenu #rooms{
	width: 565px;
}

#secondMenu #dining{
	width: 485px;
}

#secondMenu #wedding{
	width: 405px;
}

#secondMenu #conference{
	width: 325px;
}

#secondMenu #occasions{
	width: 280px;
}

/*-------------------內頁-------------------*/
#reservationPage {
	display: block;
	position: fixed;
	_position: absolute;
	width: 32px;
	height: 134px;
	right: 0;
	top: 35px;
	z-index: 3;
}

#pageBg {
	position: fixed;
	_position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(../images/pageImagesBg.png) #201228 repeat;
	z-index: 1;
	overflow: hidden;
}

#pageBg .images{
	width: 100%;
	height: 100%;
}

#pageBg .images div{
	width: 100%;
	height: 100%;
}

#pageBg .images div div{
	position: absolute;
	top: 0;
	right: 200px;
}

#pageBg .images div div img{
	width: 100%;
}

#pageMask {
	position: fixed;
	_position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(../images/pageMask.png) no-repeat left top fixed;
	z-index: 1;
}

#pageBg .trafficMap {
	display: inline-table;
	position: absolute;
	width: 900px;
	height: 600px;
	margin: -300px 0 0 -600px;
	top: 50%;
	left: 50%;
	text-align: center;
	vertical-align: middle;
	z-index: 0;
	cursor: pointer;
	overflow: hidden;
}

#pageBg .trafficMap li{
	width: 800px;
	height: 500px;
	overflow: hidden;
}

#pageBg .trafficMap li img{
	width: 800px;
	height: 500px;
}

h4{
	position: fixed;
	_position: absolute;
	width: 104px;
	height: 100%;
	right: 316px;
	top: 0;
	background: url(../images/pageMenuBg.png) repeat;
	z-index: 1;
}

h4 .pageMenu{
	width: 90px;
	height: auto;
	margin: 110px 7px 0 7px;
	border-bottom: 1px solid #5D5761;
}

h4 .pageMenu li{
	width: 86px;
	min-height: 23px;
	padding: 0 2px 0 2px;
	overflow: hidden;
	border-top: 1px solid #5D5761;
}

h4 .pageMenu li a{
	display: block;
	width: 86px;
	height: 23px;
	color: #CCC;
	-webkit-text-size-adjust: none; font-size: 11px;
	line-height: 23px;
	text-decoration: none;
	text-shadow: #000 0px 0px 6px;
	filter: glow(color=#000000,strength=0,enable=0);
}

h4 .pageMenu li a:hover{
	color: #FFF;
	text-shadow: #B8E 0px 0px 6px;
	filter: glow(color=#660099,strength=3,enable=1);	
}

h4 .pageMenu div{
	width: 90px;
	height: auto;
	padding: 5px 0 5px 0;
	border-top: 1px solid #5D5761;
	overflow: hidden;
}

h4 .pageMenu div a{
	display: block;
	width: 90px;
	height: auto;
	padding: 2px 0;
	color: #816782;
	-webkit-text-size-adjust: none; font-size: 11px;
	line-height: 14px;
	text-decoration: none;
	overflow: hidden;
}

h4 .pageMenu div a:hover , h4 .pageMenu div a.selected{
	color: #BCA9BD;	
}

h3{
	position: fixed;
	_position: absolute;
	width: 314px;
	height: 100%;
	right: 0;
	top: 0;
	background: #2F1C3C;
	border-left: 1px solid #573C65;
	border-right: 1px solid #45324E;
	z-index: 2;
}

h3 .pageSlogan{
	font-family: "標楷體";
	width: 280px;
	height: auto;
	margin: 0 0 20px 34px;
	font-size: 14px;
	line-height: 20px;
	color: #BCAFBF;
}

h3 .pageTitle{
	width: 250px;
	height: 19px;
	margin: 55px 30px 30px 34px;
	font-size: 18px;
	letter-spacing: 2px;
	line-height: 19px;
	/*text-transform: uppercase;*/
}

h3 .pageContent{
	width: 250px;
	height: auto;
	margin: 0 30px 20px 34px;
	font-size: 11px;
	line-height: 17px;
}

h3 .pageContent > div{
	margin: 5px 0 0 0;
	font-size: 11px;
}

h3 .pageContent ul{
	list-style-type: disc;
	margin: 0 20px 0 15px;
}

h3 .pageContent ul li{
	margin: 0 0 7px 0;
	font-size: 11px;
}

h3 .pageContent ul li a {
	color: #FFF;
	text-decoration: none;
}

h3 .pageContent ul li a:hover {
	text-decoration: underline;
}

h3 .pageList{
	width: 240px;
	height: auto;
	margin: 0 29px 20px 35px;
	font-size: 11px;
	line-height: 17px;
}

h3 .slidetabs {
	width: 250px;
	height: auto;
	margin: 30px 30px 0 34px;
}

h3 .slidetabs li{
	float: left; 
} 

h3 .slidetabs li a{
	display: block;
	width: 8px;
	height: 8px;
	margin: 0 5px 0 0;
	background: url(../images/option.png) no-repeat;
	overflow: hidden;
} 

h3 .slidetabs li a:hover {
	background-position: -8px 0;
}

h3 .slidetabs li.activeSlide a{
	background: url(../images/option.png) no-repeat -8px 0;
}

h3 .pages {
	width: 235px;
	height: auto;
	margin: 0 34px 0 35px;
}

h3 .pages li{
	float: left; 
} 

h3 .pages li a{
	display: block;
	margin: 0 3px 0 3px;
	color: #FFF;
	font-size: 10px;
	text-decoration: none;
} 

h3 .pages li a:hover {
	color: #B0A1B6;
}

h3 .pages li.active a{
	color: #B0A1B6;
	text-decoration: none;
}

h3#pageW{
	position: fixed;
	_position: absolute;
	width: 354px;
	height: 100%;
	right: 0;
	top: 0;
	background: #2F1C3C;
	border-left: 1px solid #573C65;
	border-right: 1px solid #45324E;
	z-index: 2;
}

h3#pageW .pageTitle{
	width: 320px;
	height: 19px;
	margin: 55px 14px 30px 20px;
	font-size: 18px;
	letter-spacing: 2px;
	line-height: 19px;
	/*text-transform: uppercase;*/
}

h3#pageW .pageTitleS{
	width: 310px;
	height: 19px;
	margin: 55px 10px 30px 34px;
	font-size: 18px;
	letter-spacing: 2px;
	line-height: 19px;
	/*text-transform: uppercase;*/
}

h3#pageW .pageContent{
	width: 320px;
	height: auto;
	margin: 0 14px 40px 20px;
	font-size: 11px;
	line-height: 17px;
}

h3#pageW .pageContent > div{
	margin: 5px 0 0 0;
	font-size: 11px;
}

h3#pageW .pageContent ul{
	list-style-type: disc;
	margin: 0 20px 0 15px;
}

h3#pageW .pageContent ul li{
	margin: 0 0 7px 0;
	font-size: 11px;
}

h3#pageW .pageList{
	width: 334px;
	height: auto;
	margin: 0 0 30px 20px;
	font-size: 11px;
	line-height: 17px;
}

h3#pageW .pages {
	width: 285px;
	height: auto;
	margin: 0 34px 0 35px;
}

h3#pageW .pages li{
	float: left; 
} 

h3#pageW .pages li a{
	display: block;
	margin: 0 3px 0 3px;
	color: #FFF;
	font-size: 10px;
	text-decoration: none;
} 

h3#pageW .pages li a:hover {
	color: #B0A1B6;
}

h3#pageW .pages li.active a{
	color: #B0A1B6;
	text-decoration: none;
}

/*---facebox-不要刪除------------------*/
#fullBg {
	display: none;
	position: fixed;
	_position: absolute;
	width: 100%;
	height: 100%;
	z-index: 100;
	background: url(../images/lightboxBg.png) repeat;
}

#msg {
	display: none;
	position: absolute;
	width: 100%;
	z-index: 101;
}

#msg #ctt {
	position: absolute;
	width: 200px;
	height: 200px;
	margin: -100px 0 0 -100px;
	top: 50%;
	left: 50%;
}

#lightboxBtn {
	clear: both;
	width: 100%;
	height: 50px;
	padding: 50px 0 0 0;
	text-align: right;
}

#lightboxBtn a.prev{
	display: inline-block;
	width: 50px;
	height: 50px;
	background: url(../images/lightboxBtn.png) no-repeat;
}

#lightboxBtn a.close{
	display: inline-block;
	width: 50px;
	height: 50px;
	background: url(../images/lightboxBtn.png) no-repeat -51px 0;
}

#lightboxBtn a.next{
	display: inline-block;
	width: 50px;
	height: 50px;
	background: url(../images/lightboxBtn.png) no-repeat -102px 0;
}

/*---------------花絮像簿detail---------------*/
h3#pageW .pageList .albumList{
	width: 334px;
	height: 408px;
	margin: 5px 0 5px 16px;
	overflow: hidden;
}

h3#pageW .pageList .albumList li{
	float: left;
	width: 126px;
	height: 126px;
	margin: 0 10px 10px 0;
	overflow: hidden;
}

h3#pageW .pageList .albumList li img{
	display: block;
	width: 120px;
	height: 120px;
	border: 3px solid #FFF;
}

h3#pageW .pageList .albumList li .albumTip{
	display: none;
	position: absolute;
	width: 110px;
	height: 110px;
	padding: 8px;
	margin: -126px 0 0 0;
	*margin: -126px 0 0 0;
	background: url(../images/albumListBg.png) repeat;
}

h3#pageW .pageList .albumList li .albumTip li.date{
	width: 110px;
	height: 15px;
	margin: 0 0 5px 0;
	color: #7F6B84;
	font-size: 11px;
	line-height: 15px;
}

h3#pageW .pageList .albumList li .albumTip li.name{
	width: 110px;
	height: 15px;
	margin: 0 0 2px 0;
	color: #FFF;
	font-size: 12px;
	line-height: 15px;
	overflow: hidden;
}

h3#pageW .pageList .albumList li .albumTip li.add{
	width: 110px;
	height: 15px;
	margin: 0 0 10px 0;
	color: #FFF;
	font-size: 12px;
	line-height: 15px;
	overflow: hidden;
}

h3#pageW .pageList .albumList li .albumTip li.viewDetail{
	width: 110px;
	height: 16px;
	margin: 0;
	overflow: hidden;
}

h3#pageW .pageList .albumList li .albumTip li.viewDetail a{
	display: block;
	width: 63px;
	height: 16px;
	background: url(../images/viewDetail.png) no-repeat;
}

#albumDetail{
	position: absolute;
	width: 1200px;
	min-height: 650px;
	margin: 0 0 0 -600px;
	top: 0;
	left: 50%;
}

#albumDetail #lightboxBtnP {
	position: absolute;
	width: 152px;
	height: 50px;
	top: 50px;
	right: 10%;
	text-align: right;
	z-index: 2000;
}

#albumDetail #lightboxBtnP a.prev{
	float: left;
	display: block;
	width: 50px;
	height: 50px;
	margin: 0 1px 0 0;
	background: url(../images/lightboxBtn.png) no-repeat;
}

#albumDetail #lightboxBtnP a.close{
	float: left;
	display: block;
	width: 50px;
	height: 50px;
	margin: 0 1px 0 0;
	background: url(../images/lightboxBtn.png) no-repeat -51px 0;
}

#albumDetail #lightboxBtnP a.next{
	float: left;
	display: block;
	width: 50px;
	height: 50px;
	background: url(../images/lightboxBtn.png) no-repeat -102px 0;
}

#albumDetail .albumIntro{
	position: absolute;
	width: 200px;
	height: 200px;
	top: 20px;
	left: 10%;
}

#albumDetail .albumIntro li.date{
	width: 200px;
	height: 15px;
	margin: 0 0 5px 0;
	color: #8F7A93;
	font-size: 11px;
	line-height: 15px;
}

#albumDetail .albumIntro li.name{
	width: 200px;
	height: 15px;
	margin: 0 0 2px 0;
	color: #FFF;
	font-size: 12px;
	line-height: 15px;
	overflow: hidden;
}

#albumDetail .albumIntro li.add{
	width: 200px;
	height: 15px;
	margin: 0 0 10px 0;
	color: #FFF;
	font-size: 12px;
	line-height: 15px;
	overflow: hidden;
}