@import url('https://fonts.googleapis.com/css?family=Yellowtail');
.group-type-ph { display: none; }
body{background: #000; overflow-x: hidden;}
span { display: inline-block; text-align: center; }
.contentBase div,
img { vertical-align: top !important }
nav { position: -webkit-sticky; position:sticky; top:0px; left: 0; margin:0; width: 100%; padding: 0 0 5px 0; text-align: center; z-index: 999 }
nav {background: linear-gradient(90deg, rgba(181, 154, 109, 1)0%, rgba(223, 204, 133, 1)50%,rgba(241, 217, 156, 1)100%); 
background: -moz-linear-gradient(90deg, rgba(181, 154, 109, 1)0%, rgba(223, 204, 133, 1)50%,rgba(241, 217, 156, 1)100%)); 
background: -webkit-linear-gradient(90deg, rgba(181, 154, 109, 1)0%, rgba(223, 204, 133, 1)50%,rgba(241, 217, 156, 1)100%)); 
background: -o-linear-gradient(90deg, rgba(181, 154, 109, 1)0%, rgba(223, 204, 133, 1)50%,rgba(241, 217, 156, 1)100%)); }



nav>ul {  display: inline-block; padding: 5px 0; width: 100%; background: #0d1218;  }
nav>ul>li { display: inline-block; position: relative; margin: 10px 0px 5px 0px; padding: 0 20px; height: auto; font: 18px/20px "Times New Roman","微軟正黑體"; color:#b49e67; cursor: pointer; }
nav>ul>li small { font-style: normal; font-size: 10px ;line-height: 12px ;}
nav>ul>li a,
nav>ul>li a:link,
nav>ul>li a:visited {color: #b49e67}
nav>ul>li a:hover {color: #fff}
nav>ul .hasSecButton { height: auto; }
nav>ul .SecButton {display:none; position: absolute; top:20px; left: 0%; z-index: 10; margin: 0 auto; padding:10px 10px; min-width: 100%; color: #fff; width:auto;white-space:nowrap; overflow: visible; background: rgba(0,0,0,0.8)}
nav>ul .SecButton a {display:block; margin: 0 0 5px 0 ;}
nav>ul .SecButton a,
nav>ul .SecButton a:visited,
nav>ul .SecButton a:link { font-size: 14px; color: #fff }
nav>ul .SecButton a:hover { font-size: 14px; color: #b49e67 }
nav>ul .leftCustom { left: -30%; }
nav img {width: auto;}


h2 { position: relative; margin: 0 auto 20px auto; display: inline-block; font:  38px/38px "Times New Roman","微軟正黑體"; text-align: center;letter-spacing: 5px}
h2>small {font: 16px/20px "Times New Roman","微軟正黑體"; letter-spacing: 5px}
h2::after {position: absolute;top:0%; right: -10%; content: "♦"; display: inline-block; width: 10px; height: 10px; font-size: 20px }
h2::before {position: absolute;top:0%; left: -10%; content: "♦"; display: inline-block; width: 10px; height: 10px; font-size: 20px }
h2:hover {color: #fff200}

h3 { margin: 1% 0; font: 22px/30px "Times New Roman","微軟正黑體";}
p { margin:0 0 20px 0;  font: 14px/20px "Times New Roman","微軟正黑體"; letter-spacing: 1px}
p strong { font-size: 20px; font-weight: bold }
img { width: 100% }


header { position: relative; height: 80vh; overflow: hidden; text-align: center;}
header h1 { margin: 2% 0 0 0; text-align: center; font: 80px/70px "Yellowtail","Times New Roman","微軟正黑體"; color:#fff; text-shadow: 0px 0px 10px rgba(0,0,0,0.5); background: rgba(0,0,0,0.0) }
header h1.smallFont { font-size: 80px }
header span{ display:block; line-height: 0; margin-top: 30px; font-size:18px;}
header b{background:#fff; color:#000; font-size:15px; padding:2px 3px; margin:0 5px; text-shadow:none;}
header h1 p { margin: 0 0 20px 0; font-size: 40px; }
header h1 small { padding: 4px 6px; font-size: 16px; letter-spacing: 20px; color: #000; text-align: center; text-shadow:none; box-shadow:0px 0px 10px rgba(0,0,0,0.5); background: #fff; }
header h1 small:first-of-type { padding-left:18px; }
/*header video { position: absolute; top:-100px; left:0; z-index: -1 }*/
header .button { margin: 0 auto; display: inline-block; margin: 40px 0 0 0; padding: 10px 20px; color: #fff; letter-spacing: 4px; background: #b49e67; cursor: pointer; }
header .mjLogo { margin-bottom: 1%; width: 20%; transform: translateY(0px); }
header h1 .officalTitle { width:auto; }


/*小動畫社訂*/
.mouseBase { display: inline-block; position: relative; margin: 10px 0 0 0; width: 30px; height: 60px; border:3px solid #fff ; box-shadow:0px 0px 10px rgba(0,0,0,0.5); border-radius: 99em; }
.mouseBase .mouseMov { display: inline-block; position: absolute; top: 8%; left:40%; width: 6px; height: 16px; box-shadow:0px 0px 10px rgba(0,0,0,0.5); border-radius: 99em; background: #fff;
-webkit-animation: mouseMov 1s  infinite alternate; }
@-webkit-keyframes mouseMov {
  from { top: 8%; }
  to { top: 30%; }
}

/*背景顏色設定*/
.backGgWhite { background: #fff }
.backGgNo { background:none;text-shadow: 0px 0px 10px rgba(0,0,0,0.5); }
.backGg50b { background:rgba(0,0,0,0.5);  }
.backGgBlue { background: url(../images/transparentBg.png) top right no-repeat #b49e67 ; background-size: auto 100%; }
.backGgPT1 { background: url(../images/paperTextture1.jpg) }

.linearBg { margin-bottom: 20px; height: 50% ; }
.linearBg::after{background: -webkit-gradient(linear, left top, right bottom, from(#bbb), color-stop(0.25, #bbb), color-stop(0.25, rgba(0,0,0,0)), color-stop(0.5, rgba(0,0,0,0)), color-stop(0.5, #bbb), color-stop(0.75, #bbb), color-stop(0.75, rgba(0,0,0,0)), to(rgba(0,0,0,0)));
background: -moz-linear-gradient(-45deg, #bbb 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, #bbb 50%, #bbb 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0));
background: linear-gradient(-45deg, #bbb 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, #bbb 50%, #bbb 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0));
background-size: 4px 4px;}


/*文字顏色設定*/
.typeColorGray, .typeColorGray a, .typeColorGray a:link {color:#545454;}
.typeColorGray .promotionArea a:link,
.typeColorGray .promotionArea a:visited {color: #fff;}
.typeColorGray2, .typeColorGray2 a, .typeColorGray2 a:link {color:#e3e3e3;}
.typeColorWhite, .typeColorWhite a, .typeColorWhite a:link {color:#fff;}
.typeColorYellow, .typeColorYellow a, .typeColorYellow a:link {color:#fff200;}
.typeColorRed, .typeColorRed a, .typeColorRed a:link {color:red; font-weight: bold}

.typeLeft { text-align: left }
.typeRight { text-align: right  }
.typeCenter { text-align: center;  }

/*邊框白*/
.borderWhite {border:1px solid #fff; }
.borderGray {border:1px solid #545454; }

/**/
.table { margin: 20px 0 0 0; width: 100%; height: auto; text-align: center; border:1px solid #333; }
.td7 tr td { width: 14%;padding: 10px 0; height: auto; border:1px solid #333; }

.contentBase { position: relative; padding: 40px 0 50px 0; height: auto; text-align: center; border-top:5px solid #b49e67;}
.contentBase:nth-child(even) {}
.contentBase .sign { position: absolute; top:-10px; left:10%; width: 120px; height: 100px;font: 40px/80px "Times New Roman","微軟正黑體";color: #fff; border-radius: 0 0 99em 99em; box-shadow: 5px 5px rgba(0,0,0,0.1); background: #850d0d }

.orderBase { margin: 0 auto; padding:30px;  width: 70%; height: auto; border-radius: 5px;  background: rgba(255,255,255,0.9) }
.orderBase .selectArea { display: inline-block; margin: 0 1%; width: 48% ; letter-spacing: 0;}
.orderBase .selectArea select {width: 100% ; padding: 7px 0; border:1px solid #bbb;}
.orderBase .promotionArea { margin: 2px auto; padding:10px 0;  width: 98%; font: 14px/18px "Times New Roman","微軟正黑體"; letter-spacing: 1px;color: #fff;}
.orderBase .promotionArea h3 { margin: 2px 0; color: #fff200; letter-spacing: 0;}
.orderBase .promotionArea h6 { margin: 0 0 10px 0; font: 14px/16px "Times New Roman","微軟正黑體"; letter-spacing: 1px;color: #fff;}
.typeColorGray .orderBase .promotionArea a
.typeColorGray .orderBase .promotionArea a:link { font: 14px/16px "Times New Roman","微軟正黑體"; letter-spacing: 1px;color: #fff;}
.orderBase .content2Box > div:first-child,
.orderBase .content2Box > div:last-child { padding-right: 0; padding-left: 0;}
.orderBase .content2Box > div,
.orderBase .content2Box > div:first-child,
.orderBase .content2Box > div:last-child { padding: 10px;}

.orderBase .content2Box h6 { margin: 20px; padding: 0 0 10px 0; border-bottom:1px solid #bbb  }
.orderBase .content2Box h6,
.orderBase .content2Box h6 a,
.orderBase .content2Box h6 a:link,
.orderBase .content2Box h6 a:visited { font: 20px/20px "Times New Roman","微軟正黑體"; letter-spacing: 1px}
.orderBase .content2Box h6 a .button { display: inline-block; margin: 5px 0 0 5px; padding: 5px 20px; font-size: 12px; color: #fff; background: #b49e67}
.orderBase .content2Box h6 a .slaeOut {background: #555}
.orderBase .content2Box h6 a .waiting {background: #4692fa}

.orderBase .precautions { margin: 20px 0 0 0; font: 14px/20px "Times New Roman","微軟正黑體"; letter-spacing: 1px; text-align: left;}
.orderBase .precautions h6 { margin: 5px 0; font-size: 16px; font-weight: bold }
.orderBase .precautions li { margin: 0 0 0 20px; list-style: disc}

.orderBase .customPriceTable {margin-top:30px; border-top: 1px dotted #545454 }
.orderBase .customPriceTable > div {  padding: 30px 0 !important}
.orderBase .customPriceTable div div { padding: 10px 0; border: 1px solid #ddd }

.orderBase ul.customQA { margin-left:0%; }
.orderBase ul.customQA li {list-style: none; border-bottom: 1px solid #bbb}
.orderBase ul.customQA li:nth-child(even) { margin-bottom:40px; border-bottom: 1px solid #545454}
.orderBase ul.customQA li:nth-child(odd) {color: red}
.orderBase ul.customQA li:nth-child(even)::before {content: "A"}
.orderBase ul.customQA li:nth-child(odd)::before {content: "Q"}

.content1Box > div { display: inline-block; width: 80%; padding: 0 0 20px 0; letter-spacing: 0}
.content2Box > div { display: inline-block; width: 50%; padding: 0 0 -20px 0; letter-spacing: 0; }
.content2Box div .images { display: inline-block; position: relative; }
.custom1 { margin: 0px 30px -40px 0; padding: 0 0 50px 0; width: 80%; position: relative; z-index: 2 }
.content2Box div .images img {width: 80%}
.content2Box div .images::after {content: ""; display: block; position: absolute; top: -5%;left:5%; width: 90%; height: 110%; z-index: 1}
.content2Box > div:first-child { padding-left:10%; }
.content2Box > div:last-child { padding-right:10%; }
.customRoomUse > div p { padding: 10px 40px 0 0 }
.customTourUse > div:first-child {  margin-right: 5px; margin-left:-15px;  border-right: 1px solid #545454 }
.customTourUse > div:last-child { margin-right: -5px; margin-left: 15px; }

.content3Box > div { display: inline-block; width: 33%; padding: 0 0 -20px 0; letter-spacing: 0; }
.customTourUse2 > div { margin: 0 1% ;width:30%; }

.content5Box > div { display: inline-block; margin: 1%; width: 18%; padding: 1%; letter-spacing: 0; }

.smallPhoto { display: inline-block; margin:0 0.5%;  width: 31% }



.order { padding: 10px 20px 0 20px;font-weight: bold; color: #fff; background:#7f6c3c; box-shadow: 0 0 20px rgba(255,255,255,0.3) }
.order::after,
.order::before {display: none !important}
.aw { margin: 3% 1% 3% 1%; letter-spacing: 2px}
.videoBg {position: fixed; top:0; left:0; z-index: -10; width: 100%; text-align: center;}
video { margin:0 auto;  width: 100%; height: auto; }
.colorMat {position: absolute;top:0; left: 0; width: 100%; height: 100%; background: rgba(180,153,103,0.3)}

a.moreInformation { display: inline-block; margin: 8px 0 0 10px; padding: 5px 10px;  }
a.moreInformation {font: 10px/10px "Times New Roman","微軟正黑體" !important; text-align: center; letter-spacing: 0px !important }
.mobileNavButton { display: none; }
.showPhoto { cursor: pointer; }
.showPhotoArea { display: none; position: fixed;top:0; left:0; width: 100vw; height: 100vh; text-align: center; background: rgba(0,0,0,0.8);z-index: 9999 }
.showPhotoArea img { margin: 5% 0 0 0; width: auto; }


.noBorder { border:none; }

/*改table表格*/
.table{letter-spacing: 0em; border: solid 1px #dee2e6;}
.table thead th{background: url(../images/transparentBg.png) top right no-repeat #b49e67; background-size: auto 100%; color: #fff; white-space: nowrap;}
.table thead th:nth-child(2), .table thead th:nth-child(3), .table thead th:nth-child(4){text-align: center;}
.table thead th:nth-child(3){color: #fff200;}
.table thead th:nth-child(4){color: #fff200;}
.table a:link,.table a:visited{text-decoration: underline !important; color: #4692fa;}


@media only screen and (max-width: 1400px) {
header h1 .officalTitle { width:50%; }
}

@media only screen and (max-width: 850px) {
h2 { position: relative; margin-top:10px; display: inline-block; font:  30px/30px "Times New Roman","微軟正黑體"; text-align: center;letter-spacing: 5px}
h3 { margin: 1% 0; font: 18px/1.6em "Times New Roman","微軟正黑體";}
p { margin:0 0 20px 0;  font: 14px/20px "Times New Roman","微軟正黑體"; letter-spacing: 1px}

header { position: relative; height: auto; padding: 0 0 10% 0;}
header h1 { font: 40px/40px "Yellowtail","Times New Roman","微軟正黑體";}
header h1 small { padding: 4px 6px; font-size: 12px; letter-spacing: 5px; color: #000; text-align: center; text-shadow:none; box-shadow:0px 0px 10px rgba(0,0,0,0.5); background: #fff; }
header h1 small:first-of-type { padding-left:18px; }
header h1 p { margin: 0 0 -10px 0; font-size: 30px }

nav { position: fixed; top:0; left: 100%; margin:0; width: 70%; text-align: center; z-index: 999 ;  }
nav>ul {  display: inline-block; padding: 0; width: 100%; height: 100vh; background: #080d13; border-radius: 0; box-shadow: 0 0 50px rgba(0,0,0,0.5)  }
nav>ul>li { display:block; margin:3% 0; padding: 0 1%; width: 100%; border-right: none; font: 14px/20px "Times New Roman","微軟正黑體"; color:#FFF; }
/*.hasSecButton a { display: none }*/
nav>ul .SecButton { position:static; padding: 1% 0; min-width: 90%; width: 90%; color: #ddd; background: rgba(255,255,255,0.2) }
nav>ul>li a,
nav>ul>li a:link,
nav>ul>li a:visited {color: #fff}
nav>ul>li a:hover {color: #fff}

header .mjLogo { width: 145px;  transform: translateY(0px); }
header h1 .officalTitle { width: 90%; }

.typeLeft { text-align: center; }
.typeRight { text-align:  center; }

.linearBg { margin-bottom:10% ;margin-top:2%; }
.contentBase { padding:5% 0 10% 0}
.contentBase .sign { top:-1%; left:5%; width: 40px; height: 40px;font: 20px/40px "Times New Roman","微軟正黑體"; box-shadow: 2px 2px rgba(0,0,0,0.1); }


.customTourUse > div:first-child {  margin-right: 0; margin-left:0;  border-right: none}
.customTourUse > div:last-child { margin-right: 0; margin-left: 0}

.content1Box > div { display: inline-block; width: 100%; padding:0 5% 10% 5%; letter-spacing: 0}
.content2Box > div:first-child { padding:0 5%; }
.content2Box > div:last-child { padding:0 5%; }
.content2Box > div { display: inline-block; width: 100%; padding:0 5%; letter-spacing: 0; }

.customRoomUse > div p { padding: 0 }
.customPriceTable > div { width: 33% }

.customTourUse2 > div { margin: -2% auto 10% auto;width:80%; border-bottom: 1px solid #ccc}

.content5Box > div { display: inline-block; margin: 2%; width: 38%; padding:1%; letter-spacing: 0; }
.custom1 { margin: 0 0 0 0; padding: 0  0 0 0; width: 100%; position: relative; z-index: 2}
.content5Box > div:first-child,
.mobileToOneBox > div {margin: 5%; width: 80%; padding:1%;}


.orderBase { margin: 0 auto; padding:2%;  width: 90%; height: auto; border-radius: 5px;  background: rgba(255,255,255,0.9) }
.orderBase .selectArea { display: inline-block; margin: 0 1%; width: 48% ; letter-spacing: 0;}
.orderBase .selectArea select {width: 100% ; padding: 7px 0; border:1px solid #bbb;}
.orderBase .promotionArea { margin: 2px auto; padding:5%;  width: 98%; font: 14px/20px "Times New Roman","微軟正黑體"; letter-spacing: 1px;color: #fff;text-align: left;}
.orderBase .promotionArea h3 { margin: 2px 0; color: #fff200; letter-spacing: 0; text-align: left;}
.orderBase .content2Box > div:first-child,
.orderBase .content2Box > div:last-child { padding-right: 0; padding-left: 0;}
.orderBase .content2Box > div,
.orderBase .content2Box > div:first-child,
.orderBase .content2Box > div:last-child { padding: 10px;}

.orderBase .content2Box h6 { margin: 20px; padding: 0 0 10px 0; border-bottom:1px solid #bbb  }
.orderBase .content2Box h6,
.orderBase .content2Box h6 a,
.orderBase .content2Box h6 a:link,
.orderBase .content2Box h6 a:visited { font: 20px/20px "Times New Roman","微軟正黑體"; letter-spacing: 1px}
.orderBase .content2Box h6 a .button { display: block; margin: 10px 0 0 0;  font-size: 12px; color: #fff; background: #b49e67}
.orderBase .content2Box h6 a .slaeOut {background: #555}
.orderBase .content2Box h6 a .waiting {background: #4692fa}

.orderBase ul.customQA { margin-left:0}

video { margin-left: -20%; height: 100vh; width: auto; }

a.moreInformation { display: block; margin: 10% 0 0 0; padding: 5px 10px;  }
a.moreInformation {font: 10px/10px "Times New Roman","微軟正黑體" !important; text-align: center; letter-spacing: 0px !important }

.aw {  width: 45%; }
.aw.big { width: 90% }
.aw img {width: 100%}

.mobileNavButton { display: inline-block; position: fixed; top: calc(100% - 40px); right: 0; width: 40px; height: 40px;font: 24px/40px "arial","微軟正黑體"; color: #fff; text-align: center;  background: rgba(0,0,0,0.5); z-index: 9999}
.showPhotoArea img { width: 80%; }
.mobileToBig { width: 100% }
}




@media only screen and (max-width: 500px) {
	video { margin-left: -100%; height: 100vh; width: auto; }

	.orderBase .content2Box h6 a .button {	padding: 5% 20%;}

}


@media only screen and (max-width: 375px) {

.orderBase .content2Box h6,
.orderBase .content2Box h6 a,
.orderBase .content2Box h6 a:link,
.orderBase .content2Box h6 a:visited { font: 16px/20px "Times New Roman","微軟正黑體"; letter-spacing: 1px}
.orderBase {  padding:2%;  width: 96%;}
.orderBase .customPriceTable div div { font-size: 10px; letter-spacing: -1px }
}