@charset "UTF-8";
/* 以上是 聲明 css編碼 */

/* 以下是 圖示文字 的 CSS */
@import url('/webeip/HT00100/peggy/fonticons/css/style.css');

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&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');

/* 以下是swiper-4.5.0 css */
@import url(/webeip/HT00100/Peggy/swiper-4.5.0/css/swiper.min.css);

/* 以下是 animate 的 CSS */
@import url('/webeip/HT00100/becky/css/animate.css');
/* 以下是 reset 的 CSS */
@import url('/webeip/HT00100/becky/css/reset.css');
html, body{ overflow: auto; }

/* 推薦行程 */
	.tour_main{
		width: 100%;
		padding: 100px 0 50px;
		position: relative;
		background-image: url(/webeip/HT00029/img/search_bg.jpg);
		background-position: top center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.tour_main > h2{
		width: 100%;
		max-width: 1200px;
		margin: 0 auto 50px;
		text-align: center;
		font-size: 2rem;
		color: #f39800;
	}
	.tour_main > h2 .tour_icon{
		display: block;
		font-size: 2.5rem;
	}
	.tour_main > h2 .tour_txt{
		display: block;
		margin: 10px 0;
		letter-spacing: 10px;
		padding-left: 10px;
		box-sizing: border-box;
	}
	/*.tour_main:before{
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: #EEE;
		clip-path: polygon(0 0, 0% 100%, 100% 100%);
	}
	.tour_main:after{
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		right: 0;
		top: 0;
		background-color: #dedede;
		clip-path: polygon(100% 0, 0% 100%, 100% 100%);
		z-index: -99;
	}*/
	/* 圖示站內活動快報 */

		.ShowImgUrlLink_main{
			width: 100%;
			max-width: 1200px;
			margin: 0 auto;
			box-sizing: border-box;
			transition: all .2s;
			position: relative;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: flex-start;
		}
		/*.travelteam:nth-child(odd){
			margin-top: 50px;
		}*/
		.ShowImgUrlLink_box{
			width: calc(80% / 4);
			margin: 10px calc(20% / 8) 40px;
			position: relative;
		}
		.ShowImgUrlLink_box:hover{
			top: 5px;
		}
		.ShowImgUrlLink_img{
			width: 100%;
			display: block;
			position: relative;
			padding: 5px;
			margin-bottom: 5px;
			box-sizing: border-box;
			background-color: #fff;
			box-shadow: 0 0 5px rgb(0 0 0 / 50%);
		}
		/*.ShowImgUrlLink_img_img{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 12vw;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
		}*/
		.ShowImgUrlLink_img_img img{
			width: 100%;
			vertical-align: top;
		}
		.ShowImgUrlLink_img_noimg{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 12vw;
			background-color: #DDD;
		}
		.ShowImgUrlLink_img_noimg > span{
			font-size: 3rem;
			color: #FFF;
		}
		.ShowImgUrlLink_title{
			width: 110%;
			padding: 10px 5px;
			box-sizing: border-box;
			background-color: rgb(0 0 0 / 50%);
			position: absolute;
			z-index: 999;
			bottom: -5px;
			left: 50%;
			transform: translate(-50%, 0);
			transition: all .3s;
		}
		.ShowImgUrlLink_title span{
			width: 100%;
			padding: 0 0;
			text-align: left;
			box-sizing: border-box;
			font-size: 1.15rem;
			min-height: 40px;
			color: #fff;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			white-space: normal;
			font-weight: bolder;
		}
		.ShowImgUrlLink_price{
			font-size: 1.25rem;
			color: #ffffff;
			text-align: right;
			box-sizing: border-box;
			position: absolute;
			top: 0;
   			right: 0;
			background-color: rgb(244 67 54 / 80%);
			padding: 0 10px;
		}

@media (max-width: 1030px){
	.tour_main{ padding: 50px 0; }

	.ShowImgUrlLink_box{
		width: calc(80% / 3);
		margin: 10px calc(20% / 6) 40px;
	}
}

@media (max-width: 768px){
	.tour_main{ padding: 25px 0; }
	.tour_main > h2{ margin: 0 auto; }

	.ShowImgUrlLink_box{
		width: calc(90% / 2);
		margin: 10px calc(10% / 4) 40px;
	}

	.ShowImgUrlLink_title{
		position: static;
		transform: translate(0, 0);
		width: 100%;
		background-color: rgb(255 255 255 / 80%);
	}

	.ShowImgUrlLink_title span{
		color: #000;
		font-size: 1rem;
	}
}