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

html,body{
	font-family:Arial, Helvetica, "微軟正黑體",sans-serif;
	font-size:15px;
	color:#FFF;
	background-color:#2e267a;}
a{text-decoration:none;
color:#FFF;}
.wraper{
	width:100%;}
#gotop{
	width: 3rem;
    height: 3rem;
    border-radius: 2rem;
    background-color:#13b5b1;
    text-align: center;
    line-height: 3rem;
    color: white;
    position: fixed;
    right: 0.5rem;
    bottom: 2rem;
    z-index: 20rem;
    font-size:1.0666rem;
	cursor:pointer;}
#gotop:hover{
	background-color:#f39700;}
.slideshow {
    height: 520px;
    display: block;
    width: 100%;
    background-position: center;}
.topwraper{
	height:556px;
	position:relative;}
.cloud{
	width: 100%;
    height: 175px;
    background: url(../images/cloud.png) no-repeat 100%;
    position: absolute;
    bottom: 0;
	z-index:10;}
.topwraper > .toper{
	width: 1000px;
    margin: auto;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 12;}
.topwraper > .toper > h1.maintitle{
	display:block;
	text-indent:-9999px;
	width:420px;
	height:360px;
	background:url(../images/topic.png) no-repeat center;
	position:relative;
	left:0; right:0; top:75px; bottom:0;
	margin:auto;
	 z-index: 13; }
img.fire1{
	position: relative;
    bottom: 106px;
    left: 200px;
	z-index: 14;}
img.fire2{
	left: 507px;
    bottom: 200px;
	 z-index: 15;}
.navwraper{
	/*height: 80px;*/
    background: rgba(46,38,122,1);
    padding: 0.6666rem 0;}
.nav{
	width:1000px;
	margin:0 auto;
	padding:0.5rem 0;}
.nav ul{
	text-align: center;
}
.nav ul.maintabs li,.nav ul.maintabs li a{
	border-radius: 15px;
}	
.nav ul.maintabs li{
	display:inline-block;
	margin:0 1rem;
	border:3px solid white;
	box-shadow: 3px 5px white;
	transition: all 0.2s linear;
	background-color: white;}
.nav ul.maintabs li:hover{
	box-shadow: 3px 2px white;
	transform: translateY(3px);
}	
.nav ul.maintabs li a{
	display:block;
	padding: 0 3rem;
	font-size: 1.6rem;
	font-weight: bold;
	line-height:60px;
	background:#2e267a url('../images/star.png') no-repeat center left 1rem;
	}
.nav ul.maintabs li a:hover, .nav ul.maintabs li.active a{
	color: #4e1d02;
	background:#fcdf00 url('../images/star-hover.png') no-repeat center left 1rem;
	}

/*日期*/
.dater{
	position:fixed;
    width:59px;
    height: 336px;
    background-image: url(../images/date.png);
    z-index:33;
	right:0;
	bottom:140px;
	cursor:pointer;
	z-index:30;}
.dateinner{
	width:489px;
	height:336px;
	position: fixed;
    z-index: 28;
    right: -430px;
    bottom: 140px;}
.contevtwraper{
	background:url(../images/bg.jpg) center top;}
.content{
	width:1000px;
	margin:0 auto;
	padding:50px 0;}
.content h6.bar{
	text-align: center;
	color:#f9eb83;
	display:block;
	font-size: 1.6rem;
	font-weight: bold;
	width:660px;
	height:42px;
	margin:3rem auto;
	background: url('../images/flag.png') no-repeat center;}

/*商品*/
.good{
	transition: all 0.3s linear;
	padding: .8rem;
	border-radius: 1rem;
	background: rgba(229, 229, 229, 0.2);
	margin-bottom: 1rem;}
.good:hover{
	background-color:white;
}
a.tours{
	display: block;
    margin-bottom: 1rem;
    }
a.tours h2{
    font-size:1.2rem;
    font-weight: bold;
}    
.pinner{
	text-align: right;}	
.price{
	font-size: 0.7rem;
    color: #eb6100;
    font-weight: 800;
    display: inline-block;
    margin-top: -30px;}
a.pb{color:#eb6100;}
a.pb:hover{color:#c62d2d;}
.price span{
	font-size:1.6rem;}
.date a.more{
	display: inline-block;
    padding: .25rem;
    border: 1px solid white;
    border-radius: .5rem;
    margin-bottom: .25rem;
    margin-right: .25rem;
}
.good:hover .date a.more{
	border: 1px solid #2e267a;
}
.good:hover  .date a.more:hover{background-color:#2e267a; color:white;}			
.good:hover a.tours h2.name,.good:hover .date a.more,.good:hover .date a,.good:hover span.start{
	color: #2e267a;}
.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: white;
    margin-right: .5rem;
    font-size: .75rem;
}


.contentwraper2{
	background-color:rgba(88,106,186,0.4);}
.viewcont{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
	}
.viewcont .view{
	width: 47%;
    padding: 0.6666rem;
    clear: left;
    overflow: hidden;
	/*display:inline-block;*/
	margin-bottom:1em;}
.viewimg{
	width:200px;
	height:200px;
	float:left;}
.viewimg img{
	width:100%;
	height:auto;
	border-radius:100px;
	border:2px solid #f9eb83;}	
.viewp{
	width: 51%;
    float: left;
    padding:1rem;
    text-align: justify;}
.viewp h3.viewh3{
	font-size:1.5rem;
	display:block;
	padding-left:35px;
	line-height:45px;
	background:url(../images/location.png) no-repeat left center;}	

@media screen and (max-width:1079px){
*{box-sizing:border-box;}
#banner-fade{
	display:none !important;}
a.mainbtn{
	display:block;
	width:50px;
	height:50px;
	background:url(../images/menu.png);
	position:fixed;
	z-index:200;
	top:60px;
	right:10px;
	cursor:pointer;}
.wraper{}
#gotop{}
#gotop:hover{}
.slideshow {
	display:none !important;}
.topwraper{
	height:0;
	padding-bottom:64.8148%;
	background:url(../images/head_sp.jpg) no-repeat center;
	background-size:cover;}
.cloud{
	display:none;}
.topwraper > .toper{
	display:none;}
.topwraper > .toper > h1.maintitle{
	display:none !important;}
img.fire1{
	display:none;}
img.fire2{
	display:none;}
.navwraper{
	display:none;
	position:fixed;
	top:35px;
	width: 100%;
	height:100%;
    background: rgba(46,38,122,0.9);
    padding:40px;
	z-index:205;}
.nav{
	width:100%;
	margin:0 auto;}
.nav ul.maintabs {
	margin:0 auto;}
.nav ul.maintabs li{
	width: 100%;
	margin:2rem auto;}
.nav ul.maintabs li:hover{
}	
.nav ul.maintabs li a{
	}
.nav ul.maintabs li a:hover, .nav ul.maintabs li.active a{
	}


.dater{
    background-size: contain;
    background-repeat: no-repeat;
    bottom:100px;}
.dateinner{
	width: 390px;
    background-size: contain;
    right: -430px;
    bottom: 100px;}
.dateinner img{
	width:100%;}
.contevtwraper{
	background:none;
	padding:10px;}
.content{
	width: 100%;
    padding:1em;}
.content h6.bar{
	width:100%;
	background-image:none;
	margin:1em auto;
	text-indent:0;
	text-align:center;
	font-size:1.733em;
	color:#f9eb83;}

a.tours{}
a.tours h2.name{}
a.tours h4.way{}
a.tours p.inner{}	
.price{
    float: none;
    margin-top:0;}
.price span{}	
a.tours:hover{
	background-color:#e5e5e5;}	
a.tours:hover h2.name{
	color:#2e267a}
a.tours:hover p.inner{
	color:#535353;}		
.contentwraper2{
	width:100%;
	background-color:rgba(88,106,186,0.4);}
.viewcont{}
.viewcont .view{}
.viewimg{}
.viewimg img{}	
.viewp{}
.viewp h3.viewh3{
	font-size:1.4rem;}	

}
@media screen and (max-width: 989px){
.dater{
	width: 47px;
    background-size: contain;
    background-repeat: no-repeat;
    bottom:100px;}
.dateinner{
    bottom:100px;}
.viewcont{
	}
.viewcont .view{
	width:50%;
    padding: 10px;
    clear: left;
    overflow: hidden;
    display: inline-block;
    margin-bottom: 1em;}
.viewimg{
	float:none;}
.viewimg img{
	width:100%;
	height:auto;
	border-radius:100px;
	border:2px solid #f9eb83;}	
.viewp{
	width:100%;
    float:none;
    padding: 15px;
    text-align: justify;}
.viewp h3.viewh3{}	
}	

@media screen and (max-width: 515px){
#gotop{display: none !important;}	
.viewcont{
	}
.viewcont .view{
	width:100%;
    padding: 10px;
    clear: left;
    overflow: hidden;
    display: inline-block;
    margin-bottom: 1em;}
.viewimg{
	width:100%;
	height:auto;}
.viewimg img{
	border-radius:0;}	
}	
	
@media screen and (max-width: 360px){
.dater{
    width:43px;
    background-size: contain;
    background-repeat: no-repeat;
    bottom:50px;}
.dateinner{
	width:96%;
    bottom:50px;}

}