@charset "utf-8";
*{	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
}
html, body, [id^="page_"]{/*id開頭為page_*/
	width: 100%;
	height: auto;
}
body{
	font-size: 15px;
	font-family: Arial, Helvetica,"Microsoft JhengHei","華文細黑", STHeiti, MingLiu, sans-serif;
	background-color: #021456;;
	color: #81514f;
	background:url("../images/bg.jpg") no-repeat center bottom;
	background-attachment: fixed;
	/*background-origin: content-box;*/
	background-size: cover;
}
a{text-decoration: none;}

#gotop{
	display: none;
	width: 3rem;
    height: 3rem;
    border-radius: 2rem;
    background-color:#a95cf3;
    text-align: center;
    line-height: 3rem;
    color: white;
    position: fixed;
    right: 2rem;
    bottom:3.333rem;
    z-index: 999;
    font-size:1.0666rem;
	cursor:pointer;}
#gotop:hover{
	background-color:#20988e;}
/*節慶選單*/
.festival-menu{
	position: absolute;
	top: 35px;
	right:0;
	left:0;
	z-index: 50;
	background: #d2d2d2;
	border-bottom: 3px solid #005a87;}
ul.festival-menu-inner{
	width: 1000px;
	margin: 0 auto;
	padding-left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
ul.festival-menu-inner>li{
	width: 100%;
	text-align: center;
	display: flex;
}
ul.festival-menu-inner>li>a{
	display: block;
	color:#434343;
    width: 100%;
    font-size: 1.2rem;
	padding: 1rem 0;
	font-weight: 700;
}
ul.festival-menu-inner>li:hover>a{
	color:#434343;
	background: url('../images/wait.png') no-repeat center bottom 2px #eeeeee;
}
ul.festival-menu-inner>li:nth-child(1):hover>a,
ul.festival-menu-inner>li:nth-child(3):hover>a{
	color:#434343;
	background: url('../images/triangle-hover.png') no-repeat center bottom 2px #f3c29d;
}
ul.festival-menu-inner>li>a>span{
	display: block;
	font-size: .75rem;
	margin-top: -2px;
}
ul.festival-menu-inner>li.main-festival>a{
	color:white;
	background: url('../images/triangle.png') no-repeat center bottom 2px #fda35e;
}
/*節慶選單結束*/
/* 主圖 */
.banner_area{
	width: 100%;
	height: 550px;
	overflow: hidden;
}
.header{
	width: 100%;
	height:550px;
	background: url(../images/header_bg.jpg) repeat-x center top;
	background-size: cover;
	position: absolute;
}
.banner_area > img{
	display: block;
	position: absolute;
}
.banner_area > img:nth-child(2){ top:165px; right: calc(50% + 232px);}
.banner_area > img:nth-child(3){top: 122px; right: calc(50% - 465px);}
.banner_area > img:nth-child(4){top: 370px; right: calc(50% - 408px);}
/*外星人*/
.alien{
	animation-name:cc;
	-webkit-animation-name:cc;
	animation-duration:3s;
	-webkit-animation-duration:3s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes cc {
	0% {-webkit-transform:translate3d(0px,0px,0px);}
	25% {-webkit-transform:translate3d(0px,10px,0px);}
	50% {-webkit-transform:translate3d(0px,40px,30px);}
	75% {-webkit-transform:translate3d(10px,10px,0px);}
	100% {-webkit-transform:translate3d(0px,0px,0px);}
}
/*太空人*/
.astro{
	width: 559px;
    height: 467px;
    position: relative;
    margin: auto;
    left: 0;
    right: 0;
    top: 117px; }
.astro > img,.astrobg,.astro >.earth{
	position: absolute;
}
.astrobg{
	width: 255px;
    height: 300px;
    top: 100px;
    left: 127px;
    background-color: #302c74;}
.astro >.earth{
	width: 290px;
    height: 300px;
    overflow: hidden;
    top: 191px;
    left: 107px;}
.globe{
	margin-left: -55px;
    margin-top: 40px;
    animation-name: AA;
	-webkit-animation-name: AA;
	-webkit-animation-duration:120s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes AA {
	from{-webkit-transform:rotate(0deg);}
	to{-webkit-transform:rotate(360deg);}
  }
.astro >img:nth-child(3){top:170px;left:200px;}
.astro >img:nth-child(4){top:105px; left: 126px;}
.astro >img:nth-child(5){top:0;}
.airplane{
	animation-name: BB;
	-webkit-animation-name: BB;
	-webkit-animation-duration:5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes BB {
  	0% {-webkit-transform:translateY(0px);}
	25% {-webkit-transform:translateY(10px);}
	50% {-webkit-transform:translateY(20px);}
	75% {-webkit-transform:translateY(10px);}
	100% {-webkit-transform:translateY(0px);}
  }


/* 選單 */
nav.main{
	width: 100%;
	height: auto;
	padding: 9px 0px;
	/*背景漸層*/
	background-color: #1444b2;
	background: -webkit-gradient(linear, left top, right top, color-stop(0, #1044b1), color-stop(0.3, #5a4cc7), color-stop(0.7, #7251d3), color-stop(1, #ba5ffc));
	background: -moz-linear-gradient(left, #1044b1 0%, #5a4cc7 30%, #7251d3 70%, #ba5ffc 100%);
	background: -webkit-linear-gradient(left, #1044b1 0%, #5a4cc7 30%, #7251d3 70%, #ba5ffc 100%);
	background: -o-linear-gradient(left, #1044b1 0%, #5a4cc7 30%, #7251d3 70%, #ba5ffc 100%);
	background: -ms-linear-gradient(left, #1044b1 0%, #5a4cc7 30%, #7251d3 70%, #ba5ffc 100%);
	background: linear-gradient(left, #1044b1 0%, #5a4cc7 30%, #7251d3 70%, #ba5ffc 100%);
	position: sticky;
	top: 0;
	z-index: 1000;
}
nav.main > ul.maintabs{
	width: 1000px;
	height: auto;
	margin: 0px auto;
	overflow: hidden;
	display: flex;
}
nav.main > ul.maintabs > li{
	width: 100%;
}
nav.main > ul.maintabs > li:nth-child(4){display: none;}
nav.main > ul.maintabs > li > a{
	display: block;
	font-size: 1.3rem;
	font-weight: bold;
	text-align: center;
	line-height: 50px;
	color: white;
	background-color: rgba(171, 2, 17, 0);
	border-radius: 8px;
	padding: 0px 6px;
	transition: all .5s ease;
}
nav.main > ul.maintabs > li > a:hover{background-color:#9c59eb;}

#PAGE1 ul.maintabs>li:nth-child(1)>a,
#PAGE2 ul.maintabs>li:nth-child(2)>a,
#PAGE3 ul.maintabs>li:nth-child(3)>a,
.main ul.maintabs li:hover >a{    
    background: #25216e;
    border-radius: 0.8rem;
    border: 0px solid #fff;
	color: #f5c849;
}


/*第二層選單*/       				
.sec-nav-wraper{
	background-color: #26b2d9;
	position: sticky;
    z-index: 299;
    top: 68px;}
ul.sectabs{
	width:1000px;
	margin:0 auto;
	display:flex;
	flex-wrap:nowrap;}
ul.sectabs li{
    text-align: center;
	width:100%;
	border-left:1px solid white;}
ul.sectabs li:last-child{
	border-right: 1px solid white;
}	
ul.sectabs li a{
    display:block;
    line-height:60px;
    color: white;
    font-size: 1.2rem;
    letter-spacing:1px;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s linear;}
ul.sectabs li:hover >a,
ul.sectabs li.active >a {
	background-color: #0d7f9f;
}    


/*內容區*/
.contentwraper{
	width: 100%;
	height: auto;
	}
.content{
	width: 1000px;
	margin: 0 auto;
	padding: 2.5rem 0 2rem;
}

/*內容標題*/
.bar{
    margin: 0 auto;
    padding: 2rem 0;
    align-items:center;
   }
.bar h3.title01{
	display:block;
	text-indent: -9999px;
	width: 100%;
	height: 125px;
	background: url('../images/bar01.png');
	background-repeat: no-repeat;}
.bar h3.title02{background: url('../images/bar02.png');}
.bar h3.title03{background: url('../images/bar03.png');}	
.bar h3.title04{background: url('../images/bar04.png');}	
.bar h3.title05{background: url('../images/bar05.png');}	
.icon{
	margin-left: -1.5rem;
}
/*商品*/
.goodswraper{
	width: 1000px;
    background-color: #ffffff;
    border: 3px solid #157eae;
    border-radius: 20px;
    padding: 1rem;}
.good{
	transition: all 0.5s linear;
	border-bottom: 2px dotted #ded8d8;
	padding: .5rem;
}
.good:hover{
	background-color:#f1f8fd;
}
a.tours{
	display: block;
    margin-bottom: 1rem;
    }
a.tours h2{
	font-size: 1rem;
	color: #81511c;
	font-weight: bold;
}
.pinner{
	text-align: right;}	
.price{
	font-size: 0.7rem;
    color: #c41919;
    font-weight: 800;
    display: inline-block;
    margin-top: -30px;}
.price span{
	font-size:1.3rem;}
a.pb{color:#eb6100;}
a.pb:hover{color:#c62d2d;}
.date a{color:#81511c;}
.date a.more{
	font-size: .5rem;
	color: #81511c;
	display: inline-block;
    padding: .25rem;
    border: 1px solid #89511c;
    border-radius: .5rem;
    margin-bottom: .25rem;
    margin-right: .25rem;
}	
.good:hover .date a.more{
	border: 1px solid #81511c;
}
.good:hover  .date a.more:hover{background-color:#81511c; color:white;}			
.good:hover a.tours h2.name,.good:hover .date a.more,.good:hover .date a{
	color: #c62d2d;}
.good:hover a.tours h2.name{text-decoration: underline;}
.good:hover	.price{
	color:#c62d2d;}
.good:hover	.price:hover{ cursor: pointer;}		
span.start{
	display: inline-block;
    color: #81511c;
    margin-right: .5rem;
    font-size: .75rem;
}
#BOX2,#BOX3,#BOX4,#BOX5{display: none;}


@media screen and (max-width:999px){
.wraper{}
ul{padding: 0;}
#gotop{
	 right: 1rem;bottom: 1rem;}
.banner_area{
	height:0;
	padding-bottom:48.8148%;
	background:url(../images/head_sp.jpg) no-repeat center;
	background-size:cover;}
.banner_area>.header,.banner_area>img,.astro{
	display:none;}
/*節慶選單關閉*/
.festival-menu{display: none !important;}
/*主選單*/
nav.main{
    width: 100%;
}
nav.main ul.maintabs{
	width: 100%;
	padding: 0 .5rem;
}
nav.main > ul.maintabs > li:nth-child(4){display: block;}
nav.main ul.maintabs li a{
	font-size: 1rem;
    font-weight: 700;
    padding: 0.5rem;
	line-height: 40px;
}

/*第二層選單*/       				
.sec-nav-wraper{
	height:40px;
    top: 74px;}
ul.sectabs{width: 100%;}
ul.sectabs li a{
    line-height:40px;
    font-size: 1rem;
    letter-spacing:0px;}
ul.sectabs li:first-child{
	border-left: 0;
}
ul.sectabs li:last-child{
	border-right: 0;
}
/*內容區*/
.contentwraper{padding: .5rem;}
.content{
	width: 100%;
	margin: 0 auto;
    padding: 3rem 0 2rem;
	}
.bar {margin-top:0; padding-top:0;}	
.bar h3.title01,.bar h3.title02,.bar h3.title03,.bar h3.title04,.bar h3.title05{
	width: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
img.icon,img.att{display: none;}

/*商品*/
.goodswraper{width: 100%;padding:.5rem;}
.good{padding:.5rem;}
a.tours{margin-bottom: 1rem;}
a.tours h2.name{width: 100%;}
a.more{display: inline-flex;}
.date a.more{font-size: .9rem;}	
.pinner{margin-top:0;}
.price {margin-top: 0;}
.price span{font-size: 1.3rem;}
span.start {
	padding: 0;
    margin-right: 0.5rem;
    font-size: .75rem;
    display: inline-block;
    text-align: center;
    margin-bottom: 0.5rem;}
}