@charset "utf-8";
/* CSS Document */
*{box-sizing:border-box;}
html,body{
	font-family:Arial, Helvetica, "微軟正黑體",sans-serif;
	font-size:15px;
	color:#59493f;
	background-color:#fcdeb8;}
a{text-decoration:none;}
.wraper{
	width:100%;}
#gotop{
	display: none;
	width: 3rem;
    height: 3rem;
    border-radius: 2rem;
    background-color:#b1061b;
    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;}
/*大圖*/
.topbox{
	position: relative;
	height: 900px;
	z-index: 0;
	overflow: hidden;}
.topbox::after{
	content: "";
    display: block;
    position: relative;
    top: -700px;
    z-index: 15;
    height: 704px;
    background: url(../images/cover-bg.png) no-repeat center;}
.topwraper{
	height:900px;
	background: url('../images/topbg.jpg') no-repeat top center;
	}
.toper{
	width: 1000px;
	height:719px;
	margin: 0 auto;
	position:relative;
	}
img.tw01, img.tw02, img.tw03, img.tw04,img.tw05,img.tw06,img.tw07,img.tw08,img.tw09,img.tw10{
	position: absolute;
	right: 0;
	left: 0;
	margin:0 auto 
}
img.tw01{
	top: 100px;
	right: -1350px;}
img.tw02{
	top: 150px;
	left: -1300px;
}
img.tw03{
	right: -1400px;
}
img.tw04{
	left: -1400px;
}
img.tw06{
	bottom: 88px;
}
img.tw07{
	top: 243px;
}
img.tw08{
	bottom: -110px;
}
img.tw10{
	display:none; 
	bottom:50px;
	animation-name: AA;
	-webkit-animation-name: AA;
	animation-delay:2s;
	animation-duration:2s;	
	-webkit-animation-duration:2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	-webkit-animation-iteration-count: infinite;
}
img.tw09{
	top: 160px;
    left: 855px;}

/*雲動畫*/
.tw01{
	-webket-animation: CLOUD-A 5s infinite ease;
	animation-direction: alternate;
	animation: CLOUD-A 5s infinite ease;}
@-webkit-keyframes CLOUD-A{
	10%{ transform: translateX(0px); }
	50%{transform: translateX(80px); }
	100%{transform: translateX(0px); }
}
.tw02{
	-webket-animation: CLOUD-B 5s infinite ease;
	animation-direction: alternate;
	animation: CLOUD-B 5s infinite ease;}
@-webkit-keyframes CLOUD-B{
	10%{ transform: translateX(0px); }
	50%{transform: translateX(-80px); }
	100%{transform: translateX(0px); }
}


/*黃金動畫*/
@-webkit-keyframes AA {
  0% {
  	opacity: 1;
  
  	}
  25%{
  	opacity:1;
  	}
  75%{
  	opacity:0;}
  	
  100%{
  	opacity:0;}
  
  }



/*選單*/       				
.navwraper{
	height: 175px;
    margin: -175px 0 0 0;
    position: relative;
}
.nav{
	width:1000px;
	margin:0 auto;}
.nav ul.maintabs{
	width:830px;
	display:flex;
	flex-wrap:nowrap;
	margin:0 auto;
}	
.nav ul.maintabs li{
    text-align: center;}
.nav ul.maintabs li a{
	width: 166px;
    display:block;
    line-height:160px;
    text-indent: -9999px;
    font-size: 1.5rem;
    letter-spacing: 4px;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.8s linear;
}
.nav ul.maintabs li a.tabs{
	background-image: url('../images/tabs01.jpg');}
.nav ul.maintabs li a.tabs2{
	background-image: url('../images/tabs02.jpg');}
.nav ul.maintabs li a.tabs3{
	background-image: url('../images/tabs03.jpg');}    
.nav ul.maintabs li a.tabs4{
	background-image: url('../images/tabs04.jpg');}
.nav ul.maintabs li a.tabs5{
	background-image: url('../images/tabs05.jpg');}
.nav ul.maintabs li a.tabs6{
	background-image: url('../images/tabs06.jpg');}
.nav ul.maintabs li:hover a.tabs , ul.maintabs li.active a.tabs{
	background-image: url('../images/tabs-hover01.jpg');}
.nav ul.maintabs li:hover a.tabs2, ul.maintabs li.active a.tabs2{
	background-image: url('../images/tabs-hover02.jpg');}
.nav ul.maintabs li:hover a.tabs3, ul.maintabs li.active a.tabs3{
	background-image: url('../images/tabs-hover03.jpg');}
.nav ul.maintabs li:hover a.tabs4, ul.maintabs li.active a.tabs4{
	background-image: url('../images/tabs-hover04.jpg');}
.nav ul.maintabs li:hover a.tabs5, ul.maintabs li.active a.tabs5{
	background-image: url('../images/tabs-hover05.jpg');}
.nav ul.maintabs li:hover a.tabs6, ul.maintabs li.active a.tabs6{
	background-image: url('../images/tabs-hover06.jpg');}

/*內容區*/
.contentwraper{
	width: 100%;
	height: auto;
	background:url("../images/bg.jpg") repeat-y center top;}
.content{
	width: 1000px;
	margin: 0 auto;
	padding: 2rem 0;
}
h3.bar01,h4.title01{
	display: block;
	text-indent: -9999px;
}
h3.bar01{
	height: 96px;
	background:url("../images/bar01.png") center no-repeat;
	margin: 2rem 0;
}
h3.bar02{
	background-image: url('../images/bar02.png');}
h3.bar03{
	background-image: url('../images/bar03.png');}
h3.bar04{
	background-image: url('../images/bar04.png');}
h3.bar05{
	background-image: url('../images/bar05.png');}
h3.bar06{
	background-image: url('../images/bar06.png');
}		
h4.title01{
	height: 61px;
	background:url("../images/title01.png") center no-repeat;
	margin: 3rem 0;
}
h4.title02{
	background-image: url("../images/title02.png");}
.goodswraper{
	width: 1000px;
	background-color: #fcf6e1;
	border: 5px solid  #c41919;
	border-radius: 20px;
	padding: 1rem;}

/*商品*/
.good{
	transition: all 0.5s linear;
	border-bottom: 1px solid #ded8d8;
	padding: 1.2rem;
}
.good:hover{
	background-color:#f4e8d8;
}
a.tours{
	display: block;
    margin-bottom: 1rem;
    transition: all 0.5s linear;
    }
a.tours >h2{
	color: #6a3906;
    font-size:1.2rem;
    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.7rem;}		
a.pb{color:#eb6100;}
a.pb:hover{color:#c62d2d;}
.date a{color:#81511c;}
.date a.more{
	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;
}


/*景點*/
.viewwraper{
	display: flex;
    flex-wrap: wrap;}
.view{width: 50%; display: flex; flex-wrap: nowrap; margin: 2rem 0;}
.view02{width:100%;}
.v-img img{width:250px;height: 250px; border:3px solid #c41919; border-radius: 125px;}
.v-inner{padding:1rem;}
.v-inner h5{
	display: block;
	padding-left:3.5rem;
	line-height: 46px;
	background:url("../images/fu.jpg") no-repeat left;
	font-size: 1.47rem;
	margin-bottom: 1rem;
}
.v-inner p{
	line-height: 1.5rem;
    letter-spacing: 1px;
}
.v-inner p >span{font-size: .5rem;}



@media screen and (max-width:999px){
a.hotel-btn{display: none;}
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{
	 right: 1rem;bottom: 1rem;}
.topwraper{
	height:0;
	padding-bottom:75.8148%;
	background:url(../images/head_sp.jpg) no-repeat center;
	background-size:cover;}
.topwraper > .toper{
	display:none;}
.topbox{
	height: auto;
}	
.topbox::after{
    display: none;}
/*選單*/	
.navwraper{
	display:none;
	position:fixed;
	top:35px;
	width: 100%;
	height:100%;
    padding:2rem;
	z-index:1000;
	background-color: #c41919;
	margin: 0;}
.nav{
	width:100%;
	margin:0 auto;}
.nav ul.maintabs {
	width: 100%;
	margin:0 auto;
	flex-wrap:wrap;}
.nav ul.maintabs li{
	width:100%;
	border:1px solid #fff;
	border-radius: 20px;
	margin-bottom: 1rem;
	background-image: none;}
.nav ul.maintabs li:hover,.nav ul.maintabs li.active{	
	background-image: none;
	background-color: #eabd26;
}	
.nav ul.maintabs li a{
	width: auto;
	display: block;
    font-size: 1.4rem;
    text-indent: 0;
    padding: 0;
    color: white;
    text-align: center;
    line-height: 60px;
	}
.nav ul.maintabs li a.tabs,
.nav ul.maintabs li a.tabs2,
.nav ul.maintabs li a.tabs3,
.nav ul.maintabs li a.tabs4,
.nav ul.maintabs li a.tabs5,
.nav ul.maintabs li a.tabs6{background-image: none;}
.nav ul.maintabs li:hover a.tabs , ul.maintabs li.active a.tabs,
.nav ul.maintabs li:hover a.tabs2, ul.maintabs li.active a.tabs2,
.nav ul.maintabs li:hover a.tabs3, ul.maintabs li.active a.tabs3,
.nav ul.maintabs li:hover a.tabs4, ul.maintabs li.active a.tabs4,
.nav ul.maintabs li:hover a.tabs5, ul.maintabs li.active a.tabs5,
.nav ul.maintabs li:hover a.tabs6, ul.maintabs li.active a.tabs6{background-image: none;}
.nav ul.maintabs li:hover a , ul.maintabs li.active a{
	color:#c41919;}

.contentwraper{
	padding:0;
	background-size: contain;
}
.content{
	width:100%;
	padding:1rem;}
h3.bar01,h4.title01{
	margin: 1rem 0;
    width: 100%;
    height: 0;
    padding-bottom: 15%;
    background-size: cover;
}
h4.title01{
	width: 100%;
	height: 0;
	padding-bottom: 20%;
	background-size: contain;
}
.goodswraper{width: 100%;padding:1rem;}

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

.viewwraper{
	display: flex;
    flex-wrap: wrap;}
.view{width:100%; display: flex; flex-wrap:wrap; margin: 1rem 0;}
.v-img{margin: 0 auto;}
.v-img img{}
.v-inner{padding:1rem;}
.v-inner h5{}
.v-inner p{}
.v-inner p >span{}











}