@charset "utf-8";
/* CSS Document */
*{box-sizing:border-box;}
html,body{
	font-family:Arial, Helvetica, "微軟正黑體",sans-serif;
	font-size:15px;
	color:#59493f;
	background-image: url(../images/bg.jpg);}
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;}
/*側邊按鈕*/
.left-btn{
	position:fixed;
	top: 120px;
	left: 1rem;
	width: 180px;
	z-index: 310;
}
.left-btn > a{
	width: 100%;
    display: inline-block;
    background-color: #7c73f3;
    margin-bottom: 1rem;
    line-height: 50px;
    border: 3px solid #3d93ce;
    border-radius: 1rem;
    background-image: url(../images/star-icon.png);
    background-position: left 10px center;
    background-repeat: no-repeat;
    padding-left: 45px;
    font-size: 1.4rem;
    color: white;
    font-weight: 700;
	transition: all .5s linear;
}
.left-btn > a:hover{
	background-image: url(../images/starhover-icon.png);
	padding-left: 50px;
	background-color: #e877ae;
	border: 3px solid white;
	color: #fff45c;
}


/*大圖*/
.topbox{
	position: relative;
	height: 90vh;
	z-index: 20;
	overflow: hidden;}
.topwraper{
	height:850px;
	background: url('../images/headbg.jpg') no-repeat top center;
	background-size: cover;
	}
.starbg1{
	width: 1666px;
    height: 204px;
    background: url(../images/star-bg1.png) center;
    position: absolute;
    top: 50px;
    left: 30px;
    filter: drop-shadow(2px 2px 10px white);
	animation: STAR 3s infinite linear;
	animation-direction:alternate-reverse;
}
@-webkit-keyframes STAR{
	0%{opacity: 1;}
	100%{opacity: 0;}
}
.starbg2{
	width: 1574px;
    height: 151px;
    background: url(../images/star-bg2.png) center;
    position: absolute;
    top: 75px;
    left: 290px;
    filter: drop-shadow(2px 2px 10px white);
    animation: STAR2 5s infinite linear;
    animation-direction: alternate-reverse;
}
@-webkit-keyframes STAR2{
	0%{opacity: 1;}
	100%{opacity: 0;}
}
.river{
	width: 100%;
    height: 228px;
    background: url(../images/lake.jpg) no-repeat center;
    position: absolute;
    bottom: 0;
    z-index:100;
}	
.toper{
	width: 1000px;
	margin: 0 auto;
	position:relative;
	}
img.tw01, img.tw02, img.tw03, img.tw04,img.tw05,img.tw06,img.tw07,img.tw08,img.tw09,a.dn{
	position: absolute;
	right: 0;
	left: 0;
	margin:0 auto;
}
img.tw01{
	top: 5vh;
    left: 1050px;
	animation: BLOOM 10s infinite linear;
	animation-direction: alternate-reverse;
	z-index: 120;}
@keyframes BLOOM{
	0%{transform: translateY(150px);}
	100%{transform: translateY(0);}
}
img.tw02{
	left: -900px;
    top: 200px;
	z-index: 110;
	animation: BLOOM2 10s infinite linear;
	animation-direction: alternate-reverse;
}
@keyframes BLOOM2{
	0%{transform: translateY(-160px);}
	100%{transform: translateY(0);}
}
img.tw03{
	top:12vh;
	animation: Moon 60s infinite linear;
	animation-direction:reverse;
}
@keyframes Moon{
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}
img.tw04{top: 24vh; filter:drop-shadow(2px 2px 7px white);}
img.tw05{ top:15vh; left:796px;}
img.tw06{ 
	top: 52vh;
    left:450px;
    z-index: 110;
	animation: Boat 5s linear;
}
@keyframes Boat{
	0%{transform: translateX(300px);}
	100%{transform: translateX(0);}
}
img.tw07{
	top: 500px;
    right: -1250px;
    z-index: 115;
}
img.tw08{
	top: 390px;
    left: -1400px;
    z-index: 111;
}
img.tw09{top: 55vh;
    left: -690px;
    z-index: 120;}
.cover-in{
	width: 100%;
    height: 177px;
    background: url(../images/head-cover-in.png) no-repeat center;
    position: absolute;
    bottom: 30px;
    z-index: 115;
}
.cover-out{
	width: 100%;
    height: 233px;
    background: url(../images/head-cover-out.png) no-repeat center;
    position: absolute;
    bottom: -45px;
    z-index: 116;
}
a.dn{
	width: 60px;
    height: 60px;
    display: block;
    border: 1px solid #2263ad;
    border-radius: 50%;
    background: url(../images/down.png) no-repeat center;
    z-index: 150;
    top: 62vh;
	transition: all .5s linear;
}
a.dn:hover{
	transform: translateY(1rem);
}

/*選單*/       				
.navwraper{
	width: 100%;
	background-image:url(../images/bg.jpg);
	border-bottom:2px solid #dba98f;}
.nav{
	width:1000px;
	margin:0 auto;}
.nav ul.maintabs{
	width:100%;
	height: 10vh;
	display:flex;
	flex-wrap:nowrap;
	justify-content: center;
	align-items: center;
	margin:0 auto;
}	
.nav ul.maintabs li{
    text-align: center;
	margin: 0 auto;}
.nav ul.maintabs li a{
    display:block;
	color: #a85e0f;
    font-size: 1.4rem;
    font-weight: 700;
	border:1px solid #a85e0f;
	border-radius: .5rem;
    transition: all 0.2s linear;
	padding: .5rem;
}
.nav ul.maintabs li a:hover{
	background-color: rgba(168,94,15,0.25);
}

#TKY .nav ul.maintabs li:nth-child(1)>a,
#THM .nav ul.maintabs li:nth-child(2)>a,
#TCN .nav ul.maintabs li:nth-child(3)>a,
#YCT .nav ul.maintabs li:nth-child(4)>a,
#KP .nav ul.maintabs li:nth-child(5)>a,
#HT .nav ul.maintabs li:nth-child(6)>a,
#PENGHU .nav ul.maintabs li:nth-child(7)>a,
#KINMEN .nav ul.maintabs li:nth-child(8)>a,
#MAZU .nav ul.maintabs li:nth-child(9)>a,
#LG .nav ul.maintabs li:nth-child(10)>a,
#HSR .nav ul.maintabs li:nth-child(11)>a{
	color:white;
    font-size: 1.4rem;
    font-weight: 700;
	border:1px solid #a85e0f;
	border-radius: .5rem;
	padding: .5rem;
	background-color: #a85e0f;
}

/*內容區*/
.contentwraper{
	background:url("../images/content-bg.jpg") no-repeat center bottom;
	background-attachment: fixed;
	background-size:cover;
	}

/*內容區小動畫*/
.content-animate{
	display: none;
}
.bunny,.cloud-l,.cloud-r{
	position:fixed;
}
.bunny{
	width: 524px;
	height: 291px;
	background: url(../images/shake-boat.png);
	right: 30px;
	bottom: 180px;
	animation: Bunny 5s infinite linear;
	animation-direction:alternate-reverse;
	z-index: 3;
}
@keyframes Bunny{
	0%{transform: rotate(20deg);}
	100%{transform:rotate(-20);}
}
.cloud-l{
	width: 493px;
	height: 156px;
	background: url(../images/cloud-left.png);
	left: 0;
	top:350px;
	animation: CLOUDL 5s infinite linear;
	animation-direction:alternate-reverse;
	z-index: 4;
}
@keyframes CLOUDL{
	0%{transform: translateX(-100px);}
	100%{transform: translateX(0);}
}
.cloud-r{
	width: 491px;
	height: 196px;
	background: url(../images/cloud-right.png);
	right: 0;
	top:50px;
	animation: CLOUDR 5s infinite linear;
	animation-direction:alternate-reverse;
	z-index: 4;
}
@keyframes CLOUDR{
	0%{transform: translateX(100px);}
	100%{transform: translateX(0);}
}
/*內容區小動畫結束*/


.content{
	width: 1000px;
	margin: 0 auto;
	padding: 2rem 0;
	position: relative;
	z-index: 50;
}
h3.bar01{
	display: block;
	text-indent: -9999px;
	height: 208px;
	background:url("../images/title01.png") center no-repeat;
	margin: 4rem 0 2rem 0;
}
h3.bar02{background-image: url('../images/title02.png');}
h3.bar03{background-image: url('../images/title03.png');}
h3.bar04{background-image: url('../images/title04.png');}
h3.bar05{background-image: url('../images/title05.png');}
h3.bar06{background-image: url('../images/title06.png');}
h3.bar07{background-image: url('../images/title07.png');}	
h3.bar08{background-image: url('../images/title08.png');}	
h3.bar09{background-image: url('../images/title09.png');}	
h3.bar10{background-image: url('../images/title10.png');}	
h3.bar11{background-image: url('../images/title11.png');}

/*內容區*/
.goodswraper{
	width: 1000px;
	background-color: white;
	border: 3px solid  #a85e0f;
	border-radius: 20px;
	padding: 1rem;}

/*商品*/
.good{
	transition: all 0.5s linear;
	border-bottom: 1px solid #ded8d8;
	padding: .75rem;
}
.good:hover{
	background-color:#f4e8d8;
}
a.tours{
	display: block;
    margin-bottom: .75rem;
    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.5rem;}		
a.pb{color:#c41919;}
a.pb:hover{color:#eb6100;}
.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;
}
a.tours2{margin-bottom: 0;}
.area{
	padding: 1rem;
    border: 1px solid #e0a15a;
    border-radius: 15px;
	margin-top:2.5rem;
}
.s-title{
	text-align: center;
    margin-top: -3rem;
}
.s-title >h5{
	display: inline-block;
    font-size: 2rem;
    text-align: center;
    padding: .75rem 2rem;
    background-color: white;
	margin-bottom: 1rem;
	color: #a05121;
}
span.deadline{
	font-size: 1.1rem;
    color: #a05121;
	font-weight: 700;
}


@media screen and (min-width:1025px) and (max-width:1600px){
img.tw01 {
left: 97%;
}
img.tw05 {
    top: 12vh;
    left: 75%;
}
img.tw02 {
    left: -76%;}
.content-animate{
	display: none !important;
}	
}
@media screen and (max-width:1390px){
/*側邊按鈕*/
.left-btn{
	display: none;
}
}
@media screen and (max-width:1024px){
.topwraper{
	height:0;
	padding-bottom:65.8148%;
	background:url(../images/head-sp.jpg) no-repeat center top;
	background-size:contain;}
.toper,.starbg1,.starbg2,.river,.cover-in,.cover-out,.content-animate{
	display:none !important;}
.topbox{
	height: auto;
	}
/*側邊按鈕*/
.left-btn{
	display: none;
}
.nav ul.maintabs {height: auto; padding:1rem 0;}
.contentwraper{
	padding:0;
	background-size: contain;
}
h3.bar01{
	margin:2rem 0;
}
.content{
	width:100%;
	padding:1rem;}
}

@media screen and (max-width:999px){
.topwraper{
	height:0;
	padding-bottom:75.8148%;
	background:url(../images/head-sp.jpg) no-repeat center top;
	background-size:cover;}	
a.mainbtn{
	display:block;
	width:50px;
	height:50px;
	background:url(../images/menu.png);
	position:fixed;
	z-index:200;
	top:60px;
	right:10px;
	cursor:pointer;}
#gotop{
	 right: 1rem;bottom: 1rem;}
.left-btn{display: none;}	 

/*選單*/	
.navwraper{
	display:none;
	position:fixed;
	top:35px;
	width: 100%;
	height:100%;
    padding:2rem 1rem;
	z-index:1050;
	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: 45%;
    margin: .5rem auto;}
.nav ul.maintabs li a{
line-height: 3rem;
	}
.nav ul.maintabs li:last-child{
	width: 95%;
}
h3.bar01{
	margin: 1.75rem 0 1rem 0;
    width: 100%;
    height: 0;
    padding-bottom: 26%;
    background-size: cover;
}
.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: 1.5rem;}
span.start {
        padding: .5rem;
    margin-right: .5rem;
    font-size: .75rem;
    display: inline-block;
    /* width: 25%; */
    text-align: center;
    margin-bottom: .5rem;}
a.tours2{margin-bottom: .5rem;}	
}