@charset "utf-8";
/* CSS Document */
*{box-sizing:border-box;}
html,body{
	font-family:Arial, Helvetica, "微軟正黑體",sans-serif;
	font-size:15px;
	color:#723532;
	/*background-color:#faeed3;*/
}
a{text-decoration:none;color:#723532;}
.wraper{
	width:100%;
	background: url('../images/content-bg.jpg') no-repeat center top;
	background-attachment: fixed;
	background-size: cover;
}
.butterflyleft{
	width: 191px;
    height: 168px;
    background: url(../images/butterfly-left.gif);
    position: fixed;
    bottom: 175px;
    left: 200px;
    z-index: 5;
	animation: fly 3s ease infinite alternate;
}
@keyframes fly {
	0%{
		transform: translateY(0);
	}
	50%{
		transform: translateY(-20px);
	}
	100%{
		transform: translateY(0);
	}
}
.butterflyright{
	width: 191px;
    height: 168px;
    background: url(../images/butterfly-right.gif);
    position: fixed;
    top:160px;
    right: 200px;
    z-index: 5;
	animation: fly2 4s ease infinite alternate;
}
@keyframes fly2 {
	0%{
		transform: translateY(0);
	}
	50%{
		transform: translateY(-20px);
	}
	100%{
		transform: translateY(0);
	}
}
.butterflyleft,.butterflyright{
	display: none;
}
#gotop{
	display: none;
	width: 3rem;
    height: 3rem;
    border-radius: 2rem;
    background-color:#560808;
    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:#d07e09;}
/*大圖*/
.topicbox{
	position: relative;
	z-index: 10;
	overflow: hidden;}
.topicwraper{
	background: url('../images/head-bg.png') repeat-x top center;
	}
.top-animate{
	height: 717px;
	position:relative;
}	
.top-animate>img{
	position: absolute;
	right: 0;
	left: 0;
	margin: 0 auto;
}
.top-animate>img:nth-child(1){
	bottom: 55px;
	z-index: 5;
}
.top-animate>img:nth-child(2){
	top:0;
    z-index: 8;
}
.top-animate>img:nth-child(3){
	top: 159px;
    z-index: 15;
    left: -626px;
    animation: bird1 10s infinite;
	animation-timing-function:cubic-bezier(.03,.69,.26,.99);
}
.top-animate>img:nth-child(4){
	bottom: 185px;
    z-index: 15;
    left: 850px;
    animation: bird2 8s linear infinite alternate;
}
@keyframes bird1{
	0%{
		transform: translate3d(0,0,0);
	}
	10%{
		transform: translate3d(0,-10px,0);
	}
	10.1%,20%,30%,40%,50%,60%{
		transform: translate3d(90px,0,0);
	}
	60.1%{
		transform: translate3d(0,-10px,0);
	}
	70.1%,80%,90%,100%{transform: translate3d(0,0,0);}
	
}
@keyframes bird2{
	0%{
		transform: translate3d(0,0,0);
	}
	20%{
		transform: translate3d(30px,-60px,0);
	}
	30%{
		transform: translate3d(10px,-40px,0);
	}
	40%{
		transform: translate3d(0,-20px,0);
	}
	40.1%,60%,70%,80%,90%{
		transform: translate3d(0,0,0);
	}
	100%{transform: translate3d(0,0,0);}
}

/*選單*/       				
#SHOWMENU{
	position: sticky;
	top: 40px;
	z-index: 1010;
}
ul.maintabs{
	width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    padding-left: 0;
    height: 98px;
    background-image: url('../images/nav-bg.png');}
ul.maintabs>li{
    text-align: center;
    width: calc(100%/5);
    margin: auto;
    height: 84px;
    display: flex;
    justify-content: center;
	align-items: center;
	border-left:2px solid black;
	}
ul.maintabs>li:first-child{
	border-left: none;
	}
ul.maintabs>li>a{
    display: flex;
    width: 100%;
    height: 84px;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
}
ul.maintabs>li img.flowericon{
	margin-right: 5px;
	transition: all 1s linear;
	transform: rotate(0deg);
}
ul.maintabs>li:hover img.flowericon{
	transform: rotate(180deg);
}
img.tabs1-hover,img.tabs2-hover,img.tabs3-hover,img.tabs4-hover,img.tabs5-hover{display: none;}

ul.maintabs>li:hover>a>img.tabs1,
ul.maintabs>li:hover>a>img.tabs2,
ul.maintabs>li:hover>a>img.tabs3,
ul.maintabs>li:hover>a>img.tabs4,
ul.maintabs>li:hover>a>img.tabs5,
#PAGE1 ul.maintabs>li>a>img.tabs1,
#PAGE2 ul.maintabs>li>a>img.tabs2,
#PAGE3 ul.maintabs>li>a>img.tabs3,
#PAGE4 ul.maintabs>li>a>img.tabs4{display: none;}

#PAGE1 ul.maintabs>li>a>img.tabs1-hover,
#PAGE2 ul.maintabs>li>a>img.tabs2-hover,
#PAGE3 ul.maintabs>li>a>img.tabs3-hover,
#PAGE4 ul.maintabs>li>a>img.tabs4-hover,
ul.maintabs>li:hover>a>img.tabs1-hover,
ul.maintabs>li:hover>a>img.tabs2-hover,
ul.maintabs>li:hover>a>img.tabs3-hover,
ul.maintabs>li:hover>a>img.tabs4-hover,
ul.maintabs>li:hover>a>img.tabs5-hover{display: block;}


/*內容區*/
.contentwraper{
	width: 100%;
	position: relative;
	z-index: 25;
}
.content{
	width: 1000px;
	margin: 0 auto;
	padding: 4rem 0 2rem 0;
}
h3.title{
	display: block;
	margin: 0 auto;
	width: 750px;
	height: 166px;
	background: url("../images/bar01.png");
	text-indent: -9999px;
	background-position: center !important;
	background-repeat: no-repeat !important;}
h3.title2{background: url("../images/bar02.png");}	
h3.title3{background: url("../images/bar03.png");}
h3.title4{background: url("../images/bar04.png");}

/*地圖*/
h3.maptitle{
	width: 629px;
	height: 38px;
	background: url('../images/map-title.png');
	margin: 3rem auto;
}
.mapwrap{
	border: 3px solid #560808;
	padding: 5px;
	margin-bottom: 4rem;
}
.mapinner{
	border: 1px solid #560808;
	padding: 5px;
}

/*商品*/
.goodswraper{
	width: 100%;
    margin-bottom: 1rem;
    border-radius: 5px;
	padding: 1rem;
	background-color: rgba(255, 251, 251, 0.45);
	border: 2px solid #560808;
	position: relative;
}
.goodswraper::before{
	content: '';
    width: 1093px;
    height: 129px;
    background-image: url(../images/content-flower.png);
    position: absolute;
    left: -50px;
    top: -29px;
}
h3.goodstitle{
	width:361px;
	height: 38px;
	background: url('../images/goods-title.png');
	margin: 2rem auto;
}
h3.goodstitle2{
	width:361px;
	height: 38px;
	background: url('../images/goods-title2.png');
	margin: 2rem auto;
}
.maingoods{
	padding: .75rem;
	border: 1px solid #560808;
	margin-bottom: 1rem;
}
.good{
	padding:.5rem ;border-bottom: 1px solid rgb(87, 83, 83);transition: all .5s linear;}
.good:hover{
	background-color:#fff;
}
.goodsbox{
	margin-top: 1rem;
}
.goodsinner{
	padding: .5rem 0 0 ;
}
a.tours>h2{
	font-size: 1.1rem;
	color: #723532;
	font-weight: 700;
}
a.tours > h2.card-title{
	font-size: 1.1rem;
	font-weight: 700;
    letter-spacing: 1px;
    color: #723532;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;/*行數*/
	margin-bottom: .75rem;
	margin-top: 5px;
}
a.tours:hover > h2.card-title,
a.tours:hover > h2{
	color: rgb(133, 36, 36);
	text-decoration: underline;
}
.pinner{
	text-align: right;}	
.price{
	font-size: 0.7rem;
    color: #c41919;
    font-weight: 800;
    display: inline-block;
}
.tour-price{margin-top: -1.5rem;}
.price>span{
	font-size:1.3rem;}
.price:hover{color: rgb(133, 36, 36);}
span.maintour-coast {
    font-size: 2.2rem;
}

.date{
    margin-bottom: 0.5rem;
}
a.day{font-size: 1.1rem; color:#535353;}
a.day:hover{color: rgb(133, 36, 36);text-decoration: underline;}
.date a.more{
	color:#535353;
	display: inline-block;
}	
.date a.more:hover{
	color: #553411;
	text-decoration: underline;
}
span.start{
	display: inline-block;
    margin-right: .5rem;
    font-size: .75rem;
}

.tagwraper{
	margin-bottom: .5rem;}
.tagwraper>span.tag{
	display: inline-block;
    font-size: 12px;
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 15px;
    margin-bottom: 5px;
    margin-right: 5px;
}

.tagwraper>span.tag:nth-child(1){background-color: #eb6100;}
.tagwraper>span.tag:nth-child(2){background-color: #568d4f;}
.tagwraper>span.tag:nth-child(3){background-color: #0a9bc4;}

.maintour-inner>ol{
	padding-left: 1.3rem;
}
.maintour-inner>ol>li{
	font-size: .95rem;
	list-style-type:disc;
}

@media screen and (max-width:1600px) {
	.butterflyleft,.butterflyright{
		display: none !important;
	}
}
@media screen and (max-width:999px){
a.hotel-btn{display: none;}
a.mainbtn{
	display: block;
    width: 50px;
    height: 50px;
    background: url(../images/menu.png);
    background-size: contain;
    position: fixed;
    z-index: 1200;
    top: 45px;
    right: 5px;
    cursor: pointer;}
#gotop{
	 right: 1rem;bottom: 1rem;}
.topicwraper{
	height:0;
	padding-bottom:63.8148%;
	background:url(../images/head_sp.jpg) no-repeat center;
	background-size:cover;}
.top-animate{display: none !important;}

/*選單*/	
nav#SHOWMENU{
	display: none;
    position: fixed;
    top: 35px;
    width: 100vw;
    height: 100vh;
    padding: 2rem;
    z-index: 1201;
    margin: 0;
    background: rgb(251 202 189);}
ul.maintabs{
	width: 100%;
    flex-wrap: wrap;
    padding-left: 0;
    height: auto;
    background-image: unset}
ul.maintabs>li{
    width: 100%;
    margin: auto;
    height: 85px;
	border-left:none;
	border-bottom: 1px solid black;
	}
ul.maintabs>li>a{
    width: 100%;
    height: 100%;
}
ul.maintabs>li img.flowericon{
	margin-right: 5px;
	transition: all 1s linear;
	transform: rotate(0deg);
}
ul.maintabs>li:hover img.flowericon{
	transform: rotate(180deg);
}
img.tabs1-hover,img.tabs2-hover,img.tabs3-hover,img.tabs4-hover,img.tabs5-hover{display: none;}

ul.maintabs>li:hover>a>img.tabs1,
ul.maintabs>li:hover>a>img.tabs2,
ul.maintabs>li:hover>a>img.tabs3,
ul.maintabs>li:hover>a>img.tabs4,
ul.maintabs>li:hover>a>img.tabs5,
#PAGE1 ul.maintabs>li>a>img.tabs1,
#PAGE2 ul.maintabs>li>a>img.tabs2,
#PAGE3 ul.maintabs>li>a>img.tabs3,
#PAGE4 ul.maintabs>li>a>img.tabs4{display: none;}

#PAGE1 ul.maintabs>li>a>img.tabs1-hover,
#PAGE2 ul.maintabs>li>a>img.tabs2-hover,
#PAGE3 ul.maintabs>li>a>img.tabs3-hover,
#PAGE4 ul.maintabs>li>a>img.tabs4-hover,
ul.maintabs>li:hover>a>img.tabs1-hover,
ul.maintabs>li:hover>a>img.tabs2-hover,
ul.maintabs>li:hover>a>img.tabs3-hover,
ul.maintabs>li:hover>a>img.tabs4-hover,
ul.maintabs>li:hover>a>img.tabs5-hover{display: block;}

.content{width:100%;padding: 0 1rem 1rem;}
.box {margin-top:60%;}
h3.title{
	margin: 0 auto;
	width: 100%;
	height: 0;
	padding-bottom:25%;
	background-size: cover;
	margin-bottom: 1rem;
}
.mapwrap {
    margin-bottom: 1rem;
}
h3.maptitle {
	width: 100%;
    height: 0;
    padding-bottom: 6%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 1.5rem auto;
}
h3.goodstitle{
	width: 100%;
    height: 0;
    padding-bottom: 6%;
    background-size: contain;
    margin: 0.75rem auto;
    background-repeat: no-repeat;
    background-position: center;
}
.good{padding: .5rem 0;}
.goodswraper::before{
	display: none;
}
a.tours > h2.card-title{
	margin-top: 1rem;
}
.tour-price {
    margin-top: 0;
}
span.maintour-coast {
    font-size: 1.5rem;
}
}

@media screen and (max-width:550px){
	h3.goodstitle{
		padding-bottom: 7%;
	}
}