@charset "UTF-8";
/* 以上是 聲明 css編碼 */

/* 以下是 圖示文字 的 CSS */
@import url('/webeip/HT00100/peggy/fonticons/css/style.css');
@import url('https://fonts.googleapis.com/css2?family=Oxygen&display=swap');

/* 以下是 slick-1.8.1 的相關 CSS */
@import url('/webeip/HT00100/becky/slick-1.8.1/slick/slick.css');
/* Add the new slick-theme.css if you want the default styling */
@import url('/webeip/HT00100/becky/slick-1.8.1/slick/slick-theme.css');

/* 以下是 reset 的 CSS */
@import url('/webeip/HT00100/becky/css/reset.css');

/* 行程 */
	.tour_main{
		width: 100%;
		min-height: 400px;
	    padding: 50px 0;
	    box-sizing: border-box;
	    background-color: #FEDE6A;
	    position: relative;
	}
	
	.tour_title h2{
		width: 100%;
		text-align: center;
		font-size: 4rem;
		letter-spacing: 5px;
		margin-bottom: 40px;
		font-family: 'Oxygen', sans-serif;
		color: #0a5a60;
	}
	.tour_title h2 span{ color: #ffffff; }
	.tour_text{
		width: 100%;
		background-color: #fff;
		position: absolute;
		bottom: 0;
		text-align: center;
	}
	.tour_main h3{
		display: block;
		margin-bottom: 10px;
		text-align: center;
		font-size: 2rem;
		color: #464646;
		letter-spacing: 5px;
		padding-left: 5px;
		box-sizing: border-box;
	}
	.tour_text img{
		width: 100%;
		max-width: 1200px;
		vertical-align: top;
	}
	.tour_btn{
		width: 100%;
		position: relative;
		z-index: 999;
	}
	.tour_btn a{
		display: block;
		width: 100%;
		max-width: 150px;
		margin: 20px auto 0;
		text-align: center;
		padding: 0.5rem 0.25rem;
		box-sizing: border-box;
		font-size: 1.2rem;
		color: #fff;
		background-color: #095960;
		transition: all .5s;
	}
	.tour_btn a:hover{
		background-color: #FFDE6A;
		color: #095960;
	}
	/* 圖示站內活動 */
		.ShowImgUrlLink_main{
			width: 100%;
			max-width: 1200px;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: flex-start;
			overflow: hidden;
			position: relative;
			z-index: 99;
		}

		.ShowImgUrlLink_mainbox{
			width: 280px;
			margin: 10px;
			transition: all .5s;
		}
		.ShowImgUrlLink_box{
			width: 100%;
			transition: all .5s;
			box-sizing: border-box;
			position: relative;
		}
		.ShowImgUrlLink_img{
			display: block;
			position: relative;
			transition: all .5s;
			overflow: hidden;
			background-color: #fff;
		}
		.ShowImgUrlLink_img_noimg{
	        display: flex;
	        align-items: center;
	        justify-content: center;
	        width: 100%;
	        height: 18vw;
	        background-color: #DDD;
	    }
	    .ShowImgUrlLink_img_noimg > span{
	        font-size: 3rem;
	        color: #FFF;
	    }
	    .ShowImgUrlLink_img_img img{
	    	width: 100%;
	    	vertical-align: top;
	    }
		.ShowImgUrlLink_img > div div{
			width: 100%;
			height: 396px;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
		}
		.ShowImgUrlLink_title{
			display: block;
			padding: 5px;
			color: #000;
			box-sizing: border-box;
			font-size: 1.25rem;
    		background-color: rgb(255 255 255 / 50%);
    		text-align: center;
    		box-shadow: 0 0 5px rgb(0 0 0 / 20%)
		}
	/* 圖示團體旅遊 */
		.travelteam_main{
			width: 100%;
			max-width: 1400px;
			margin: 2rem auto;
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			justify-content: flex-start;
			position: relative;
			z-index: 99;
		}
		.travelteam{
			width: 100%;
			max-width: 330px;
			padding: 0 0 2rem;
			box-sizing: border-box;
			margin: 10px;
			transition: all .2s;
			position: relative;
			box-shadow: 0 5px 8px 0 rgba(0,0,0,.3);
			background-color: #fff;
		}
		.travelteam_img{
			width: 100%;
			position: relative;
		}
		.travelteam_img_img{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 225px;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
		}
		.travelteam_img_noimg{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 225px;
			background-color: #DDD;
		}
		.travelteam_img_noimg > span{
			font-size: 3rem;
			color: #FFF;
		}
		.travelteam_img a{
			border-bottom: 5px solid #095960;
			transition: all .8s;
		}

		.travelteam_img .travelteam_icon{
			position: absolute;
			width: 50px;
			height: 50px;
			left: 0;
			bottom: 0;
			background-color: rgba(9,89,96,.8);
			padding: 15px;
			box-sizing: border-box;
			color: #fff;
			font-size: 1.25rem;
			transition: all .8s;
		}
		.travelteam_img:hover .travelteam_icon{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 3rem;
		}
		.travelteam_title{
			display: block;
			width: 100%;
			text-align: center;
			padding: 0.5rem;
			box-sizing: border-box;
			font-size: 1.2rem;
			line-height: 2rem;
			color: #111;

			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			white-space: normal;
		}
		.travelteam_price{
			position: absolute;
			right: 0;
			bottom: 0;
			font-size: 1.1rem;
			color: #C30D23;
			padding: 10px;
	    	box-sizing: border-box;
		}
		.travelteam_btn{
			position: relative;
			z-index: 999;
			display: block;
			width: 100%;
			max-width: 150px;
			margin: 20px auto 0;
			text-align: center;
			padding: 0.5rem 0.25rem;
			box-sizing: border-box;
			font-size: 1.2rem;
			color: #fff;
			background-color: #095960;
			transition: all .5s;
		}
		.travelteam_btn:hover{
			background-color: #FFDE6A;
			color: #095960;
		}
@media all and (max-width: 1430px)
{
	.travelteam_main{ max-width: 1050px; }
}
@media all and (max-width: 1200px)
{
	.ShowImgUrlLink_main{
		max-width: 900px;
	}
}
@media all and (max-width: 1080px)
{
	.travelteam_main{ max-width: 700px; }

}
@media all and (max-width: 900px)
{
	.ShowImgUrlLink_main{
		max-width: 600px;
	}

}

@media all and (max-width: 730px)
{
	.travelteam_main{
		max-width: 350px;
		margin: 1rem auto;
	}
	.travelteam{ margin: 1rem auto; }
}

@media all and (max-width: 650px){

	.ShowImgUrlLink_mainbox{
		width: 45%;
		margin: 10px 2.5%;
	}
	.ShowImgUrlLink_img > div div{ height: 57vw; }
}
