@charset "UTF-8";
/* CSS Document */

html, body {
	position:relative;
	width:100%;
	height:100%;
	margin:0;
	font-family:"Helvetica Neue", "微軟正黑體", Helvetica, Arial, sans-serif;	
}
img {
	height:auto;
	border:0;
}
h1 {
	font-size: 28px;
    margin-top: 10px;
    margin-bottom: 5px;
	color:#f5821f;
	font-weight:bold;
}
p {
	color: #666;
}
a {
	text-decoration:none;
}
header {
	position:fixed;
	top:0;
	left:0;
	padding:10px;
	width:100%;
	height:80px;
	background:rgba(255,255,255,1);
	overflow:hidden;
	z-index:999;
	text-align: center;
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);
	-webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
header.smaller {
	height:65px;
	background:rgba(255,255,255,1);
}
.head_logo {
	position:relative;
	margin:0 auto;
	width:100%;
	max-width:1120px;
}
.logo {
	width:130px;
	-webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.logo.smaller {
	width:100px;
}
.wrapper {
	position: relative;
	margin: 0 auto;
	padding-top: 80px;
	width: 100%;
	max-width: 1200px;
	background: url(../images/bg.jpg) 50% 46% no-repeat;
}
.wrapper.smaller {
	padding-top: 65px;
}
.top_bg_g {
	position: relative;
    width: 100%;
	opacity: 0;
}
.top_bg {
	position: relative;
    z-index: 2;
}
.top_bg_shadow {
	position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.5;
	 animation: top_bg_shadow_anim linear 5s;
	animation-iteration-count: infinite;
	transform-origin: 50% 50%;
	-webkit-animation: top_bg_shadow_anim linear 5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: 50% 50%;
	-moz-animation: top_bg_shadow_anim linear 5s;
	-moz-animation-iteration-count: infinite;
	-moz-transform-origin: 50% 50%;
	-o-animation: top_bg_shadow_anim linear 5s;
	-o-animation-iteration-count: infinite;
	-o-transform-origin: 50% 50%;
	-ms-animation: top_bg_shadow_anim linear 5s;
	-ms-animation-iteration-count: infinite;
	-ms-transform-origin: 50% 50%;
}
.top_bg_g-anim{
  animation: top_bg-anim ease-in-out 0.5s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: top_bg-anim ease-in-out 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: top_bg-anim ease-in-out 0.5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: top_bg-anim ease-in-out 0.5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: top_bg-anim ease-in-out 0.5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes top_bg-anim{
  0% {
    opacity:0;
    transform:  translate(0px,-100px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes top_bg-anim{
  0% {
    opacity:0;
    -moz-transform:  translate(0px,-100px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes top_bg-anim {
  0% {
    opacity:0;
    -webkit-transform:  translate(0px,-100px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes top_bg-anim {
  0% {
    opacity:0;
    -o-transform:  translate(0px,-100px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes top_bg-anim {
  0% {
    opacity:0;
    -ms-transform:  translate(0px,-100px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
}
@keyframes top_bg_shadow_anim{
  0% {
    transform:  translate(0px,0px)  ;
  }
  50% {
    transform:  translate(10px,0px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes top_bg_shadow_anim{
  0% {
    -moz-transform:  translate(0px,0px)  ;
  }
  50% {
    -moz-transform:  translate(10px,0px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes top_bg_shadow_anim {
  0% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  50% {
    -webkit-transform:  translate(10px,0px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes top_bg_shadow_anim {
  0% {
    -o-transform:  translate(0px,0px)  ;
  }
  50% {
    -o-transform:  translate(10px,0px)  ;
  }
  100% {
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes top_bg_shadow_anim {
  0% {
    -ms-transform:  translate(0px,0px)  ;
  }
  50% {
    -ms-transform:  translate(10px,0px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}
.title-ani_p{
	position: absolute;
    margin: 0 auto;
    z-index: 4;
    left: 0;
    right: 0;
    top: 5px;
    width: 43%;
	opacity: 0;
}
.title-animation{
	animation: title-animationFrames linear 0.3s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode:forwards; /*when the spec is finished*/
	-webkit-animation: title-animationFrames linear 0.3s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
	-moz-animation: title-animationFrames linear 0.3s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;
	-moz-animation-fill-mode:forwards; /*FF 5+*/
	-o-animation: title-animationFrames linear 0.3s;
	-o-animation-iteration-count: 1;
	-o-transform-origin: 50% 50%;
	-o-animation-fill-mode:forwards; /*Not implemented yet*/
	-ms-animation: title-animationFrames linear 0.3s;
	-ms-animation-iteration-count: 1;
	-ms-transform-origin: 50% 50%;
	-ms-animation-fill-mode:forwards; /*IE 10+*/
	-webkit-animation-delay: 0.6s; /* Safari 4.0 - 8.0 */
	animation-delay: 0.6s;
}

@keyframes title-animationFrames{
  0% {
    opacity:0;
    transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes title-animationFrames{
  0% {
    opacity:0;
    -moz-transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes title-animationFrames {
  0% {
    opacity:0;
    -webkit-transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes title-animationFrames {
  0% {
    opacity:0;
    -o-transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes title-animationFrames {
  0% {
    opacity:0;
    -ms-transform:  translate(0px,70px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
}
.fadein{
	animation: fade_anim linear 0.4s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode:forwards; /*when the spec is finished*/
	-webkit-animation: fade_anim linear 0.4s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
	-moz-animation: fade_anim linear 0.4s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;
	-moz-animation-fill-mode:forwards; /*FF 5+*/
	-o-animation: fade_anim linear 0.4s;
	-o-animation-iteration-count: 1;
	-o-transform-origin: 50% 50%;
	-o-animation-fill-mode:forwards; /*Not implemented yet*/
	-ms-animation: fade_anim linear 0.4s;
	-ms-animation-iteration-count: 1;
	-ms-transform-origin: 50% 50%;
	-ms-animation-fill-mode:forwards; /*IE 10+*/
	-webkit-animation-delay: 0.8s; /* Safari 4.0 - 8.0 */
	animation-delay: 0.8s;
}

@keyframes fade_anim{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fade_anim{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fade_anim {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fade_anim {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fade_anim {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

.text{
  animation: text-anim ease-out 0.3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: text-anim ease-out 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: text-anim ease-out 0.3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: text-anim ease-out 0.3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: text-anim ease-out 0.3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes text-anim{
  0% {
    opacity:0;
    transform:  translate(-50px,10px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes text-anim{
  0% {
    opacity:0;
    -moz-transform:  translate(-50px,10px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes text-anim {
  0% {
    opacity:0;
    -webkit-transform:  translate(-50px,10px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes text-anim {
  0% {
    opacity:0;
    -o-transform:  translate(-50px,10px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes text-anim {
  0% {
    opacity:0;
    -ms-transform:  translate(-50px,10px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
}
.text01 {
	position: absolute;
    top: 26%;
    left: 3%;
    width: 50%;
	opacity: 0;
	-webkit-animation-delay: 0.8s; /* Safari 4.0 - 8.0 */
	animation-delay: 0.8s;
}
.text02 {
	position: absolute;
    top: 38%;
    left: 7%;
    width: 38%;
	opacity: 0;
	-webkit-animation-delay: 0.9s; /* Safari 4.0 - 8.0 */
	animation-delay: 0.9s;
}

.map_point{
	position: absolute;
    margin: 0 auto;
    width: 9%;
    left: 0;
    right: 0;
    bottom: 6%;
    z-index: 4;
	opacity: 0;
	-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
	animation-delay: 1s;
}
.ying {
	position: absolute;
    top: 54%;
    left: 13%;
    width: 20%;
	opacity: 0;
	-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
	animation-delay: 1s;
}
.discount {
	position: absolute;
    top: 27%;
    right: 7%;
    width: 40%;
	opacity: 0;
	-webkit-animation-delay: 1.1s; /* Safari 4.0 - 8.0 */
	animation-delay: 1.1s;
}
.btn_book {
	position: relative;
    margin: 24px auto;
    width: 15%;
	cursor: pointer;
	-webkit-animation-delay: 1.2s; /* Safari 4.0 - 8.0 */
	animation-delay: 1.2s;
	-webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.btn_book:hover {
	width: 16%;
}
.package {
	position: relative;
    margin: 0 auto;
	margin-bottom: 20px;
    max-width: 1000px;
    width: 100%;
}
.p_title {
	position: relative;
    margin: 0 auto;
	margin-bottom: 10px;
    width: 38%;
}
.p_product {
	padding: 0;
	min-height: 148px;
}
.content_term {
	position: relative;
    margin: 20px auto;
    width: 100%;
    max-width: 1000px;
	-webkit-animation-delay: 1.2s; /* Safari 4.0 - 8.0 */
	animation-delay: 1.2s;
}
.content_term ul {
	list-style: none;
	font-size: 14px;
	padding-left: 10px;
}

footer {
	position:relative;
	margin:0px auto;
	padding:10px 0;
	width:100%;
	background:#efefef;
	font-size:12px;
	color:#666;
}
footer a {
	color:#666;
}
.footer_info {
	position:relative;
	margin:0 auto;
	width:100%;
	max-width:1000px;
}
.copyright {
	text-align:left;
}
.stock {
	text-align:center;
}
.term {
	text-align:right;
}
@media (max-width: 1200px) {

}
@media (max-width: 998px) {
.wrapper {
	background-size: 100%;
}
.package {
    width: 90%;
}
.text01 {
    top: 21%;
    left: 3%;
    width: 50%;
}
.text02 {
    top: 30%;
    left: 7%;
    width: 38%;
}
.ying {
    top: 41%;
    left: 13%;
    width: 20%;
}
.content_term {
    width: 90%;
}
.footer_info {
	width:90%;
}
.copyright {
	text-align: center;
}
.term {
	text-align: center;
}
}
@media (max-width: 728px) {
.text01 {
    top: 22%;
}
.text02 {
    top: 31%;
}
.ying {
    top: 42%;
}
.discount {
    top: 22%;
    right: 0%;
    width: 47%;
}
.p_product {
    padding: 0;
    width: 50%;
}
}
@media screen and (orientation:landscape) {
.wrapper {
	background-size: 100%;
}
.package {
    width: 90%;
}
.content_term {
    width: 90%;
}
.footer_info {
	width:90%;
}
.copyright {
	text-align: center;
}
.term {
	text-align: center;
}
.text01 {
    top: 25%;
    left: 7%;
    width: 46%;
    z-index: 2;
}
.text02 {
    top: 36%;
}
.ying {
    top: 51%;
}
.discount {
    top: 26%;
    right: 7%;
    width: 40%;
}
}
@media screen and (orientation:portrait) {
.wrapper {
    background: url(../images/bg.jpg) 50% 8% no-repeat;
    background-size: 100%;
}
.top_bg_g {
	overflow: hidden;
}
.top_bg {
	width: 110%;
    margin-left: -5%;
    margin-right: -5%;
}
.title-ani_p {
    width: 56%;
}
.map_point {
    width: 18%;
}
.text01 {
    top: 0;
    left: 0;
    width: 50%;
    position: relative;
    margin: 0 auto;
    width: 94%;
	margin-top: 68%;
}
.text02 {
    top: 0;
    left: 0;
    width: 90%;
    position: relative;
    margin: 0 auto;
    margin-top: -10%;
}
.ying {
    top: 12.5%;
    width: 70%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.discount {
    top: 0;
    right: 0%;
    width: 94%;
    position: relative;
    margin: 0 auto;
    margin-top: -66px;
    z-index: -1;
}
.p_product {
    width: 100%;
}
.btn_book {
    margin: 5px auto;
    margin-bottom: 30px;
    width: 60% !important;
}
.p_title {
    width: 85%;
}
}