/* CSS Document */

/************************************************************************************
RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, figure, mark{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {line-height: 1; -webkit-text-size-adjust: none;}
ol, ul { list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {
   /* border-collapse: collapse;*/
    border-spacing: 0;
}
a img {border: none;}
img{display: block;}
.clean { clear:both;}
a {color: #292929; text-decoration: none; blr:expression(this.onFocus=this.blur()); outline: none; /* for Firefox */hlbr:expression(this.onFocus=this.blur()); /* for IE */}
a:hover {text-decoration:none;}
a:focus{ -moz-outline-style: none;}

.clean { clear:both;}

.clearfix {
  overflow: hidden;
}

img { max-width:100%;}

.left { float: left;}
.right { float: right;}

/************************************************************************************
STRUCTURE 主要區塊
*************************************************************************************/

.block-first{overflow: hidden;padding-top: 210px;margin-top: -210px;}

body {font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;background: url("../images/main-bg.jpg") center top no-repeat;
	width: 100%;
	min-height:  1073px;}


/*======================
====Main CSS=====
=======================*/
header{padding-top: 32px;}


.header-bg {
	background: url("../images/main-bg.jpg") center top no-repeat;
	background-position: center -40px;
	width: 100%;
	min-height:  950px;
	position: relative;
}


.main-title{
	background: url("../images/main-title.png") center top no-repeat; 
	background-size: contain;
	width: 810px;
	height:247px;
	margin: 0 auto;
	position: absolute;
	z-index: 1;
	left: 50%;
	transform: translateX(-50%);
	top: 50px;
	text-align: center;
	font-size: 66px;
	padding-top:30px;
	color: #FFFFFF;
	letter-spacing:-1px;
	text-shadow: 0 0 5px rgba(0,0,0,0.8);
	font-family: "Noto Sans JP", sans-serif;
}

.main-title span{
	display: block;
	font-size: 30px;
	margin-top: 20px;
	letter-spacing:5px;
}





/*大圖輪播*/
.main-slide-wrap{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 280px;
	
}

.main-slide{
	width: 900px;
    height: 500px;
	border-radius: 70px 70px 0 0 ;
	border: solid 15px #158f89;
	border-bottom: 0px;
	box-sizing: border-box;
	position: relative;
	overflow: visible;
}

.grass{
	position: absolute;
	background: url("../images/grass.png") ; 
	width: 430px;
	height: 89px;
	bottom: -15px;
	left: 30%;
	z-index: 12;
}

.main-slide::after{
	position: absolute;
	content: '';
	background: url("../images/boy.png") ; 
	background-size: cover;
	width: 180px;
	height: 347px;
	bottom: -30px;
	left: -120px;
}

.main-slide::before{
	position: absolute;
	content: '';
	background: url("../images/girl.png") ; 
	background-size: cover;
	width: 213px;
	height: 347px;
	bottom: -30px;
	right: -50px;
}



/*======================
====nav CSS=====
=======================*/



.sticky {
    top: 30px;
}

/*選單*/
.block_menu {
	width: 100%;
	height: 75px;
	width: 100%;
    overflow: hidden;
	top:30px;
	background: #C17A1F;
	background: url("../images/nav-bg.jpg") center top no-repeat; 
}

.nav{
	width: 100%;
	height: 75px;
	z-index: 999;
	background: #C17A1F;
	margin-top: 30px;
}

.nav ul{
	display: flex;
	height: 80px;
	align-items: center;
	justify-content: center;
	gap:10px;
	font-weight: 700;
	font-size: 18px;
}

.nav ul li{
	padding: 10px;
	position: relative;
	z-index: 1;
	white-space:nowrap;
	text-align: center;
	line-height: 22px; 
}

.nav ul li a{
	color: #E4A77E;
	transition:0.5s ease-in-out;
	
}

.nav ul li::before{
	content: "";
	position: absolute;
	height: 20px;
	width: 1px;
	background: #F8B55F;
	right: -5px;
	top: 24px;
}

.nav li:last-child::before{display: none;}

.nav ul li a:hover{
	color: #FFFFFF;
}

.nav ul li a:hover::before{
	content: "";
	position: absolute;
	height:50px;
	width: 50px;
	background: #6C2F07;
	left: 50%;
	transform: translateX(-50%);
	top: 10px;
	border-radius: 50%;
	z-index: -1;
}

.nav ul li a.active{color: #FFFFFF;}

.nav ul li a.active::before{
	content: "";
	position: absolute;
	height:50px;
	width: 50px;
	background: #305814;
	left: 50%;
	transform: translateX(-50%);
	top: 10px;
	border-radius: 50%;
	z-index: -1;
}

/*------------*/



.map-title{
	font-size: 50px;
	font-weight: 700;
	margin-bottom: 30px;
	color: #0b713d;
	text-align: center;
}


#map{
	padding-top: 100px;
	background: #8BB024;
}
#zoo-map{
	background: #dfcf64 url('../images/map-bg.png') repeat center top;
	padding: 100px 0;
}

.zoo-map a:hover{background: url("../images/map-hover.png") center top ;}


.map-wrap{
	max-width: 1000px;
	margin: 0 auto;
	border: solid 10px #fae871;
	border-radius: 60px;
}



.map-top{
	background: url("../images/map-top.jpg") center top ;
	height: auto;
	height: 73px;
	position: relative;
}

.map-top::before{
	content: '';
	position: absolute;
	background: url("../images/map-title.png") center top ;
	width: 226px;
	height: 197px;
	left: 50%;
	transform: translateX(-50%);
	top: -50px;
}

.map-wrap {
  position: relative;
	max-width: 1000px;
	margin: 0 auto;
	border: solid 10px #fae871;
	border-radius: 60px;
}

#responsive-image {
  width: 100%;
  height: auto;
  display: block;
}



.tour-bg,.video-bg,.zoo-bg,.rainforest-bg,.nightsafari-bg,.birdpark-bg,.riversafari-bg,.birdparadise-bg,.banyantree-bg,.zoo-bg{ padding-top:30px; padding-bottom: 150px; }
.tour-bg { background: #8BB024 url('../images/leaf.png') repeat center top;}
.video-bg { background: url("../images/bg01.jpg") center top repeat-y; }
.zoo-bg { background: url("../images/bg03.jpg") center top repeat-y;background: #5FBFCC;}
.banyantree-bg { background: url("../images/bg08.jpg") center top repeat-y;background: #C472A0;}
.rainforest-bg { background: url("../images/bg04.jpg") center top repeat-y;background: #A0BF4A; }
.nightsafari-bg { background: url("../images/bg05.jpg") center top repeat-y;background: #525252; }
.birdparadise-bg { background: url("../images/bg06.jpg") center top repeat-y;background: #E49C52; }
.riversafari-bg { background: url("../images/bg07.jpg") center top repeat-y;background: #9472BF; }
.footer-bg { background: url("../images/bg08.jpg") center top repeat-y; }

.box-t2,.box-t3,.box-t4,.box-t5,.box-t6,.box-t7,.box-t9,.box-t10,.box-t11{ text-indent: -5000px;margin-top:40px;}
.box-t1 {
    background: url("../images/sec-title.png") center top no-repeat;  
	width: 270px;
    height: 102px; 
	margin: 0 auto;
	color: #ffedbc;
	text-align: center;
	font-size: 40px;
	font-weight: 600;
	line-height: 102px;
	margin-bottom: 40px;
}
.box-t2 {
    background: url("../images/title-part2.png") center top no-repeat;  
    height: 90px;    
}
.box-t3 {
    background: url("../images/title-part3.png") center top no-repeat;   
    height: 138px; 
}
.box-t4 {
    background: url("../images/title-part4.png") center top no-repeat;   
    height: 139px; 
}
.box-t5 {
    background: url("../images/title-part5.png") center top no-repeat;   
    height: 139px; 
}
.box-t6 {
    background: url("../images/title-part6.png") center top no-repeat;   
    height: 141px; 
}
.box-t7 {
    background: url("../images/title-part7.png") center top no-repeat;   
    height: 186px; 
}
.box-t9 {
    background: url("../images/title-part9.png") center top no-repeat;   
    height: 138px; 
}

.box-t10 {
    background: url("../images/title-part10.png") center top no-repeat;   
    height: 134px; 
}

.box-t11 {
    background: url("../images/title-part11.png") center top no-repeat;   
    height: 166px; 
}

.row { max-width: 960px; margin:0 auto; }
.row2 { max-width: 1000px; margin:0 auto; }

.zoo-main-pic,.rainforest-main-pic,.night-main-pic,.river-main-pic,.bird-main-pic { text-align: center;}

.rainforest-main-pic { padding-top: 20px;}




/*----tour-box---*/

.promo{
	width: 100%;
	margin: 0 auto;
	margin-top: 30px;
}

.promo a{
	border-radius: 20px;
	background: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: stretch;}

.promo-pic{width:50%;padding: 10px;
box-sizing: border-box;}
.promo-pic img{
	display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
	border-radius: 10px;
}
.promo-txt{
	width: 50%;
	display: flex;
	flex-direction: column;
	gap:10px;
	padding: 15px;
	box-sizing: border-box;
}
.promo-name{
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	color: #0E7010;
}


.promo-info ul {
    padding-left: 20px;
}

.promo-info li {
    font-size: 15px;
    line-height: 18px;
    margin-bottom: 3px;
    position: relative;
}

.promo-info .discount{
	display: inline-block;
	color: #FF4D08;
	border: solid 1px #FF4D08;
	padding: 5px;
	margin-bottom: 5px;
}
.promo-info li::before {
    content: '♦︎';
    position: absolute;
    font-size: 10px;
    left: -18px;
    top: 0px;
}

#tour { padding-top:100px; margin-top: -100px; }
.tour-box {padding-top: 30px; }

.tour-list{display: flex;justify-content: center;align-items: stretch;max-width:1300px;padding-top: 20px;margin: 0 auto;flex-wrap: wrap;gap:20px;}
.tour-list li{border-radius: 10px;width: 48%;background: #FFFFFF;position: relative;}
.tour-list li a{text-decoration: none;display: block;}

.tour-list.tkt li{border-radius: 10px;width: 31.5%;background: #FFFFFF;position: relative;background: #FFEFB8;}

.tour-sale{
	position: absolute;
	width: auto;height: auto;
	background: #0E7010;
	color: #FFFFFF;
	color: #F4EF76;
	border-radius: 10px 0 10px 0px;
	padding: 5px 10px;
	font-size: 14px;
}

 .tour-list .txt {
    font: 900  18px "微軟正黑體"  ; 
	color: #0E7010;
	line-height: 22px;
    overflow: hidden;
    padding:15px;
	border-radius: 0px 0px 10px 10px ;
	text-align: center;
	
 }

.tour-list .txt span{
	display: block;
	color: #000000;
	margin-top: 6px;
	font-size: 16px;
}


.tour-list img{display: block;border-radius: 10px 10px 0px 0px;}


 .tour-info {
     padding:10px 0;
 }
 .tour-info span {     
    font: 600  15px "微軟正黑體" ; color: #524344;text-indent: 20px;
    padding:4px 20px; 
    display: block;position: relative;
	
  }

.tour-info span::before{content: '';display: block;position: absolute; width: 12px;height: 14px; border-radius: 2px 8px; background: #388B37;}


 .tour-list li:hover {
    background: 
  }

 /*.tour-list li a p.txt_l { font: 18px "微軟正黑體" ; color:#04124a; width:78%; display:inline; float:left; line-height: 28px;  }
 .tour-list li a p.price { color: red; width:20%; display:inline; text-align: right; float: right; line-height: 32px;  }*/


/*----ticket-box---*/

 .ticket-box { margin: 20px 0px; padding-bottom: 50px;}

 .ticket-list { display: flex;justify-content: center;flex-wrap: wrap;gap:15px;}

 .ticket-list li {
    background: #f4ed9e;
    border-radius: 10px;
    padding:10px; 
    text-align: center;
    width: 27%; 
    height: auto;
  }

 .ticket-list li a { 
    background: #fcf7bf;
    border-radius: 10px;
    border:1px dashed #b6ae54;
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: block;
 }

.ticket-list img{border-radius: 5px 5px 0 0 ;}

.ticket-list li a p.tt-txt {
    font: 600 15px "微軟正黑體" ; color:#534e11;  
    overflow: hidden;
    padding:10px;
	min-height: 60px;
    
 }

 .ticket-list li a p.tt-buy {
    font: bold 15px "微軟正黑體" ;
    overflow: hidden;
    text-decoration: none;
	padding:5px;
	background: #B8B057;
	 color: #FFFFFF;
	width: 40%;
	margin: 0 auto;
	border-radius: 5px;
	margin-bottom: 10px;
	text-shadow: 1px 1px 1px #746E23;
 }

/*自由行*/
.free-box {padding-top: 30px;}
.free-box ul{display: flex;justify-content:space-around; align-items: center;gap:20px;padding-top: 20px;}
.free-box li{border: solid 2px #fff;padding:5px 10px;width: 45%;text-align: center;border-radius: 5px;font-weight: bold;}
.free-box li a{text-decoration: none;font-size: 18px;color: #4E4919;transition: 0.5s;}


/*-----video-box----*/
#video { padding-top:100px; margin-top: -100px; padding-bottom: 100px; }
.video-intro { font: 500 16px "微軟正黑體" ; line-height: 1.8em; margin:30px 150px 50px 30px;position: relative; }
.video-pic { position: absolute; right:0; top:-10px; }
.video-box {  background: url("../images/video-bg.png") left top repeat; padding:20px; }

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
}

.video-icon  { text-align: center; }


/*---------*/
#zoo,#rainforest,#nightsafari,#birdpark,#riversafari,#banyantree,#birdparadise,#map { padding-top:100px; margin-top: -100px;   }

.ct-box { margin:0 40px; clear:both; }

.ct40-l { width:43%; float:left; margin-right: 15px;  }
.ct25-l { width:25%; float:left; margin-right: 15px; }
.ct55-l { width: 53%;  float:left; }
.ct45-r { width: 45%; float:right; }

.ct-in-down { margin-top: 14px;}
.ct-in { margin-top: 8px;}
.ct-in2 { margin-top: 2px;}
.ct-in3 { margin-top: 14px;}

.p-blue { color: #e1fefd; font: 500 16px "微軟正黑體" ;  }
.p-ylw { color: #feffda; font: 500 16px "微軟正黑體" ;  }
.p-blue p,.p-ylw p { margin: 15px 0; line-height: 1.8em;}
.p-blue p:first-child,.p-ylw p:first-child { margin-top:0px;}

.feature-box { background: url("../images/bg-note.png") right top no-repeat; }
.feature-list { 
    min-height: 185px;  
    padding: 35px 15px 0px 45px;
}
.feature-list li { font: 500 14px "微軟正黑體" ; line-height: 20px; color: #008577;position: relative;margin-bottom: 5px; }
.feature-list li::before { 
    content: url("../images/icon-star.png");
	position: absolute;
    padding-right: 6px;  
	left: -20px;
}

.animal {max-width: 960px; margin: 0 auto;padding: 10px 0;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}
.logo-title{width: 100%;text-align: center;font-size: 30px;font-weight: 700;line-height: 60px;}
.logo{width: 15%;display: flex;justify-content: center;align-items: center;flex-direction: column;font-size: 15px;font-weight: 700;color: #686868;}

 /*--填充高度--*/
 /*.video-intro::before,.video-intro::after { 
     content: " ";
     height:60px;
     display: block;
 }*/

.tour-tle{ margin-top: 20px; margin: 0 auto;width: 120px; font-size: 22px;text-align: center;font-weight: 900;color: #906540;
background: #FFFFFF;line-height: 80px;border-radius:  42% 58% 41% 59% / 49% 41% 59% 51% ;}


#banyantree .zoo-main-pic{position: relative;}
#banyantree .zoo-main-pic::after{
	content: '前往訂房';
	position: absolute;
	width: 100px;
	height: 40px;
	background: #D41E85;
	color: #FFFFFF;
	font-weight: bold;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 10px 10px 5px 5px ;
	line-height: 40px;
	font-size: 18px;
	pointer-events: none;
}



/*------media query----------*/


@media only screen and ( max-width:1000px){
	.main-slide::before{
	position: absolute;
	content: '';
	background: url("../images/girl.png") ; 
	background-size: cover;
	width: 140px;
	height: 230px;
	bottom: -30px;
	right: 0px;
}
	
}


@media only screen and ( max-width:1000px)
{ 
	.main-slide{width: 90vw;height: 500px;}
	.main-slide::after{
	position: absolute;
	content: '';
	background: url("../images/boy.png") ; 
	background-size: cover;
	width: 150px;
	height: 290px;
	bottom: -30px;
	left: -30px;
}

.main-slide::before{
	position: absolute;
	content: '';
	background: url("../images/girl.png") ; 
	background-size: cover;
	width: 140px;
	height: 230px;
	bottom: -30px;
	right: -30px;
}
	


}
@media only screen and ( max-width:940px)
{ 
    .animal { background: none; min-height:auto;  text-align: center;}  
	.header-bg {height: 600px;}
}

@media only screen and ( max-width:920px) 
{ 
    .ticket-list li { width: 42%;} 
}

@media only screen and ( max-width:830px) 
{ 
    .ct40-l { width: 100%; float:none; }
    .ct25-l { width:47%;  text-align: center; margin-top: -25px;  }   
    .feature-box { max-width: 372px; margin-left: 23%;}
.main-title{
	background: url("../images/main-title.png") center top no-repeat; 
	background-size: contain;
	width: 600px;
	height:183px;
	top: 40px;
	text-align: center;
	font-size: 45px;
}

.main-title span{
	display: block;
	font-size: 30px;
	margin-top: 10px;
	letter-spacing:5px;
}
	
	
}

/*---平板-----*/

@media only screen and ( max-width:768px) 
{ 
	html {scroll-behavior: smooth;}
    header{padding-top: 0px;}
    .tour-box { margin: 10px 20px;}
    .ticket-box { margin: 10px 10px;}  
    #tour,#video,#zoo,#rainforest,#nightsafari,#birdpark,#riversafari,#banyantree { padding-top:0px; margin-top: 0px; }
	.nav,#block_menu{display: none;}
    .nav{margin-top: 0px;}
	.header-bg {height: 400px;}
	.main-title{margin-top: 10px;}
	.logo{width: 31%;}
	.promo a{flex-wrap: wrap;}
	.promo-pic{width:100%;}
	.promo-txt{width: 100%;}
	.header-bg {min-height:  650px;}	
	.main-slide-wrap{top: 200px;}	
	.main-slide{
		width: 90vw;height:400px;
		border-radius: 30px 30px 30px 30px ;
		border: solid 10px #158f89;}	
	.main-slide::after{display: none;}
	.main-slide::before{display: none;}		
	.grass{display: none;}	
	.tour-list.tkt li{width: 47%;}	
	.tour-list li{width: 47%;}		
}

@media only screen and ( max-width:600px) 
{
 
    .feature-box {  margin-left: 10%;}
    .ct55-l { width: 98%;  float: none; }
    .ct45-r { width: 98%; float: none; }
    .ct25-l { width:98%; float: none;  }  
	.ct-in2 {display: none;}
	.ct-in-down{margin-bottom: 40px;}
	.main-title{
	width: 480px;
	height:146px;
	top: 20px;
	text-align: center;
	font-size: 36px;
	padding-top:20px;
}

.main-title span{
	display: block;
	font-size: 20px;
	margin-top: 10px;
	letter-spacing:0px;
}
.main-slide-wrap{top: 150px;}		
.main-slide{width: 90vw;height: 250px;}	
.header-bg {min-height:  450px;}	
.map-title{
	font-size: 40px;
}	
}

/*---手機版-----*/
@media only screen and (max-width:480px) 
{
    .tour-tle { text-align: center;}
    .tour-info span { padding:4px 10px; }
    .feature-box { background:#f7f4e8; margin-left: 0%;margin-top: 10px;margin-bottom: 10px;border-radius: 10px;}
    .feature-list { min-height: auto;  padding: 15px;padding-left: 30px; }
    .ct25-l { margin-top: 0; }     
    .ct-none { display: none; }
    .ticket-list li a p.tt-txt { font: 600 17px "微軟正黑體" ;  }  
    .ticket-list li a p.tt-buy { font: bold 16px "微軟正黑體" ;   }
	.tour-list li{width: 100%;}
	.tour-list.tkt li{width: 100%;}
	.header-bg {height: 250px;}
	.main-title{
	width: 360px;
	height:109px;
	top: 20px;
	text-align: center;
	font-size: 28px;
	padding-top:10px;
}	
.map-title{
	font-size: 30px;
}
	
	#banyantree .zoo-main-pic::after{
		content: '前往訂房';
		position: absolute;
		width: 100px;
		height: 40px;
		background: #D41E85;
		color: #FFFFFF;
		font-weight: bold;
		bottom: 3px;
		left: 8%;
		transform: translateX(0%);
		border-radius: 0px 10px 0px 05px ;
		line-height: 40px;
		font-size: 18px;
		pointer-events: none;
	}	

}