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

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

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&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; }
/* 大圖輪播器 Ver.2 */
	.carousel_main{
		position: relative;
	}
	.carousel_main:before{
		position: absolute;
		content: '';
		width: 100%;
		height: 10%;
		background: rgba(0,0,0,.85);
		bottom: 0;
		left: 0;
		z-index: 99;
	}
	.carousel2{
		width: 100%;
		margin: 0 auto;
	}
	.carousel2.slick-slider{ margin-bottom: 0;}
	.carousel2 > div > div > .promo-item > a > img{
		vertical-align: top;
		width: 100%;
		height: auto;
	}
	.carousel2 > div > div > .promo-item > a > div{
		vertical-align: top;
		width: 100%;
		height: 500px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}

	/* 箭頭 */
	.carousel2 .slick-prev, .carousel2 .slick-next{
		width: 40px;
    	height: 50px;
    	transition: all .3s linear;
	}
	.carousel2 .slick-next, .carousel2 .slick-next:hover, .carousel2 .slick-next:focus{
		background: url(/webeip/HT00100/Peggy/carousel10/img/arrow-right-w.svg);
		background-repeat: no-repeat;
    	background-size: contain;
		right: 15px;
		background-color: rgba(0,0,0,.3);	
	}
	.carousel2 .slick-prev, .carousel2 .slick-prev:hover, .carousel2 .slick-prev:focus{
		background: url(/webeip/HT00100/Peggy/carousel10/img/arrow-left-w.svg);
		background-repeat: no-repeat;
    	background-size: contain;
		left: 15px;
    	z-index: 99;
    	background-color: rgba(0,0,0,.3);
	}
	.carousel2 .slick-next:before, .carousel2 .slick-prev:before{ display: none; }

	.carousel2 > .slick-dots {
		position: absolute;
		bottom: 10%;
		width: 100%;
		margin: 0 auto;
		padding: 0;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
    	align-items: center;
    	background: -webkit-gradient(linear,left top,left bottom,color-stop(10%,transparent),to(rgba(0,0,0,.85)));
    	background: linear-gradient(transparent 10%,rgba(0,0,0,.85));
	}
	.carousel2 > .slick-dots li{
		width: 100%;
		height: auto;
		background: none;
		text-transform: uppercase;
		display: inline-block;
		padding: 10px;
		box-sizing: border-box;
		color: #fff;
		font-size: 0.9rem;
		margin: 0;
	}
	.carousel2 > .slick-dots li span{
		transition: all .8s;
	}
	.carousel2 > .slick-dots .slick-active{
		position: relative;
	}
	.carousel2 > .slick-dots .slick-active span{
		font-size: 1.25rem;
	}
	.carousel2 > .slick-dots li:before{
		content: '';
		width: 0;
		height: 5px;
		position: absolute;
		bottom: 0;
	    left: 0;
	    background-color: #fff;
	    transition: all .8s;
	}
	.carousel2 > .slick-dots .slick-active:before{
		width: 100%;
	}

	.sliderdownbtn{
		position: absolute;
		bottom: 5px;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: 999;
		cursor: pointer;
	}
	.sliderdownbtn_img{ width: 200px; }
	.sliderdownbtn_img > img{
		width: 100%;
		vertical-align: top;
		opacity: .5;
	}
	@media (max-width: 850px){
		.carousel_main:before{
			background: -webkit-gradient(linear,left top,left bottom,color-stop(10%,transparent),to(rgba(0,0,0,.85)));
    		background: linear-gradient(transparent 10%,rgba(0,0,0,.85));
		}
		.sliderdownbtn{ bottom: 0; }
		.sliderdownbtn_img{ width: 80px; }
	}
.body_main{ overflow: hidden; }
.body_title{
	width: 100%;
    text-align: center;
    padding-bottom: 40px;
    position: relative;
    z-index: 99;
}
.body_title > h2{
	font-size: 5rem;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 20px;
    padding-left: 20px;
    box-sizing: border-box;
    color: #b5cfdc;
	line-height: 40px;
}
.body_title > span{
	display: inline-block;
    font-size: 2rem;
}
/* 推薦行程 */
	.tour_main{
		width: 100%;
		padding: 50px 0;
		position: relative;
	}
	.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;
	}
	/* 圖示團體旅遊 */
		.travelteam_main{
			width: 100%;
			min-height: 200px;
		}
		.travelteam{
			width: 100%;
			margin: 10px 20px;
			box-sizing: border-box;
			transition: all .2s;
			position: relative;
		}
		.travelteam:nth-child(odd){
			margin-top: 50px;
		}
		.travelteam:hover{
			top: 5px;
		}
		.travelteam_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%);
		}
		/*.travelteam_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;
		}*/
		.travelteam_img_img{
			width: 100%;
			vertical-align: top;
		}
		.travelteam_img_noimg{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 12vw;
			background-color: #DDD;
		}
		.travelteam_img_noimg > span{
			font-size: 3rem;
			color: #FFF;
		}
		.travelteam_content{
			width: 100%;
			padding: 5px;
			box-sizing: border-box;
			background-color: #fff;
			position: relative;
		}
		.travelteam_title{
			width: 100%;
			padding: 0 0;
			text-align: left;
			box-sizing: border-box;
			font-size: 1.25rem;
			min-height: 40px;
			color: #111;
			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;
		}
		.travelteam_price{
			font-size: 1.25rem;
			color: #ffffff;
			text-align: right;
			box-sizing: border-box;
			position: absolute;
			top: -27px;
   			right: 0;
			background-color: rgb(244 67 54 / 80%);
			padding: 0 10px;
		}
		.travelteam_desc{
			width: 100%;
			min-height: 100px;
			font-size: 1rem;
			line-height: 1.5rem;
			padding: 0 0.5rem;
			box-sizing: border-box;
			color: #888;
			text-align: justify;

			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 7;
			-webkit-box-orient: vertical;
			white-space: normal;
		}
		/* 箭頭 */
		.travelteam_main .slick-prev, .travelteam_main .slick-next{
			width: 40px;
	    	height: 50px;
	    	transition: all .3s linear;
		}
		.travelteam_main .slick-next, .travelteam_main .slick-next:hover, .travelteam_main .slick-next:focus{
			background: url(/webeip/HT00100/Peggy/carousel10/img/arrow-right-w.svg);
			background-repeat: no-repeat;
	    	background-size: contain;
			right: 0;
			background-color: rgba(0,0,0,.3);	
		}
		.travelteam_main .slick-prev, .travelteam_main .slick-prev:hover, .travelteam_main .slick-prev:focus{
			background: url(/webeip/HT00100/Peggy/carousel10/img/arrow-left-w.svg);
			background-repeat: no-repeat;
	    	background-size: contain;
			left: 0;
	    	z-index: 99;
	    	background-color: rgba(0,0,0,.3);
		}
		.travelteam_main .slick-next:before, .travelteam_main .slick-prev:before{ display: none; }
/* 促銷NEWS */
	.news_main{
		width: 100%;
		padding: 50px 0;
		position: relative;
	}
	.news_main:before{
		position: absolute;
		content: '';
		width: 100%;
		height: 50%;
		left: 0;
		top: 0;
		background-color: #EEE;
		z-index: -999;
	}
	.news_box{
		width: 80%;
		max-width: 1400px;
		margin: 0 auto;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
	}
	/*圖示文字-只顯示標題*/
		.ShowImgUrlLink_main2{
			width: 46%;
			margin: 0 2%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
		}
		.ShowImgUrlLink_wrap2{
			width: 100%;
		}
		.ShowImgUrlLink_box2{
			display: inline-block;
			width: 100%;
			color: #000;
			font-size: 1.25rem;
			padding-bottom: 10px;
			border-bottom: 2px solid rgb(0 0 0 / 20%);
			margin-bottom: 5px;
			position: relative;
		}
		.ShowImgUrlLink_img2{
			width: 100%;
			margin: 0 auto 20px;
			box-sizing: border-box;
			background-color: rgb(255 255 255 / 20%);
			position: relative;
			overflow: hidden;
		}
		.ShowImgUrlLink_img2 > img{
			width: 100%;
			vertical-align: top;
			-webkit-transition: all 0.4s ease;
			-text-decoration-linemoz-transition: all 0.4s ease;
			-o-transition: all 0.4s ease;
			transition: all 0.4s ease;
		}
		.ShowImgUrlLink_img2 > div{
			vertical-align: top;
			width: 100%;
			height: 300px;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
			-webkit-transition: all 0.4s ease;
			-text-decoration-linemoz-transition: all 0.4s ease;
			-o-transition: all 0.4s ease;
			transition: all 0.4s ease;
		}

		.ShowImgUrlLink_img_noimg2{
	        display: flex;
	        align-items: center;
	        justify-content: center;
	        width: 100%;
	        height: 353.5px;
	        background-color: #DDD;
	    }
	    .ShowImgUrlLink_img_noimg2 > span{
	        font-size: 3rem;
	        color: #FFF;
    	}

		/* 日期 */
			.ShowImgUrlLink_date2{
				text-align: center;
				position: absolute;
				top: 0;
				right: 0;
				padding: 5px;
				box-sizing: border-box;
				background-color: rgb(0 0 0 / 50%);
				color: #fff;
				font-size: 1.05rem;
				display: none;
			}
		.ShowImgUrlLink_box2 .ShowImgUrlLink_title2{
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			white-space: normal;
			word-break: break-all;
			transition: all .3s;
		}
		.ShowImgUrlLink_box2:hover .ShowImgUrlLink_title2{
			letter-spacing: 5px;
		}

		.ShowImgUrlLink_img2, .ShowImgUrlLink_img_noimg2{ display: none; }

	/* 圖示站內 */
		.ShowImgUrlLink_main{
			width: 50%;
			height: 300px;
			position: relative;
		}
		.ShowImgUrlLink_box{
			width: 100%;
			transition: all .5s;
			box-sizing: border-box;
			position: relative;
			background-color: rgba(255,255,255,0.3);
			-webkit-transition: all 0.4s ease;
			-text-decoration-linemoz-transition: all 0.4s ease;
			-o-transition: all 0.4s ease;
			transition: all 0.4s ease;
			position: absolute;
			width: 100%;
			height: 100%;
			opacity: 0;
		}
		.ShowImgUrlLink_img{
			width: 100%;
			margin: 0 auto 20px;
			box-sizing: border-box;
			background-color: rgb(255 255 255 / 20%);
			position: relative;
			overflow: hidden;
		}
		.ShowImgUrlLink_img > img{
			width: 100%;
			vertical-align: top;
			-webkit-transition: all 0.4s ease;
			-text-decoration-linemoz-transition: all 0.4s ease;
			-o-transition: all 0.4s ease;
			transition: all 0.4s ease;
		}
		.ShowImgUrlLink_img > div{
			vertical-align: top;
			width: 100%;
			height: 300px;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
			-webkit-transition: all 0.4s ease;
			-text-decoration-linemoz-transition: all 0.4s ease;
			-o-transition: all 0.4s ease;
			transition: all 0.4s ease;
		}

		.ShowImgUrlLink_box:hover .ShowImgUrlLink_img > img,
		.ShowImgUrlLink_box:hover .ShowImgUrlLink_img > div{
			-moz-transform: scale(1.1);
			-webkit-transform: scale(1.1);
			-o-transform: scale(1.1);
			-ms-transform: scale(1.1);
			transform: scale(1.1);
		}
		.ShowImgUrlLink_img_noimg{
	        display: flex;
	        align-items: center;
	        justify-content: center;
	        width: 100%;
	        height: 353.5px;
	        background-color: #DDD;
	    }
	    .ShowImgUrlLink_img_noimg > span{
	        font-size: 3rem;
	        color: #FFF;
    	}

		/* 日期 */
			.ShowImgUrlLink_date{
				text-align: center;
				position: absolute;
				bottom: 0;
				right: 0;
				padding: 5px;
				box-sizing: border-box;
				background-color: rgb(0 0 0 / 50%);
				color: #fff;
				font-size: 1.05rem;
			}
			/* 標題 */
			.ShowImgUrlLink_title{
				display: none;
			}
		.ShowImgUrlLink_icon{
			position: absolute;
			width: 100%;
			text-align: center;
			background-color: rgb(0 0 0 / 50%);
			left: 0;
			top: 50%;
			transform: translate(0, -50%);
			font-size: 1.75rem;
			color: #ffffff;
			opacity: 0;
			-webkit-transition: all 0.4s ease;
			-text-decoration-linemoz-transition: all 0.4s ease;
			-o-transition: all 0.4s ease;
			transition: all 0.4s ease;
		}
		.ShowImgUrlLink_box:hover .ShowImgUrlLink_icon{
			opacity: 1;
		}
	.ShowImgUrlLink_main .ShowImgUrlLink_box.current{
		opacity: 1;
	}

/* 主題專區-圖像廣告連結 */

	.imgadlink_main{
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		background-color: #EEE;
		height: 30vw;
	}
	.imgadlink_group{
		width: 25%;
	    box-sizing: border-box;
	    transition: all .2s;
	    position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
	}
	.adimg{
		position: absolute;
		width: 100%;
		height: 50%;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}
	.imgadlink_group:nth-child(odd) .adimg{
		top: auto;
		bottom: 0;
	}

	.adimg a{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
	.adimg a img{
		vertical-align: top;
		width: 100%;
		position: relative;
		-webkit-transition: all 0.4s ease;
    	-text-decoration-linemoz-transition: all 0.4s ease;
    	-o-transition: all 0.4s ease;
    	transition: all 0.4s ease;
	}
	.imgadlink_group:hover .adimg a img{
		-moz-transform: scale(1.1);
	    -webkit-transform: scale(1.1);
	    -o-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	    transform: scale(1.1);
	    opacity: .7;
	}
	.adiframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.adtxt{
		position: absolute;
		width: 100%;
		height: 50%;
		transition: all .5s;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.imgadlink_group:nth-child(odd) .adtxt{
		top: 0;
		bottom: auto;
	}
	.imgadlink_group:nth-child(even) .adtxt:after{
		position: absolute;
		content: '';
		clip-path: polygon(50% 50%, 0 100%, 100% 100%);
		background-color: #fff;
		width: 0;
		height: 40%;
		top: -35%;
		transition: all .3s;
	}
	.imgadlink_group:nth-child(odd) .adtxt:after{
		position: absolute;
		content: '';
		clip-path: polygon(50% 100%, 0 50%, 100% 50%);
		background-color: #fff;
		width: 0;
		height: 40%;
		top: 75%;
		transition: all .3s;
	}
	.imgadlink_group:hover:nth-child(odd) .adtxt:after,
	.imgadlink_group:hover:nth-child(even) .adtxt:after{ width: 30%; }
	.adtxt > a{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 90%;
		height: 90%;
		padding: 5px;
		box-sizing: border-box;
		background-color: #fff;
	}
	.adtxt > a > div{ width: 100%; }
	.adtxt > a > div h2{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		white-space: normal;
		word-break: break-all;
		transition: all .3s;
		color: #000;
		font-size: 1.25rem;
	}
	.adexplain{
		display: block;
		width: 100%;
		text-align: left;
		padding: 0.5rem 0.25rem;
		box-sizing: border-box;
		font-size: 0.9rem;
		color: #888;
	}
/* 關於我們 */
	.about_main{
		width: 100%;
		padding: 100px 0;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	.about_main:before{
		position: absolute;
		content: '';
		width: 100%;
		height: 50%;
		left: 0;
		top: 0;
		background-color: #EEE;
		z-index: -999;
	}
	.about_main .body_title{
		width: 41%;
		margin: 0 2%;
	}
	.about_main .body_title > h2{
		font-size: 3.5rem;
	}
	.about_main .body_title > div{
		width: 95%;
		max-width: 450px;
		margin: 20px auto;
		padding: 10px;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10px;
		text-align: justify;
		box-shadow: 0 0 5px rgba(0,0,0,.3);
	}
	/* 圖像廣告連結 */
		.imgadlink_main2{
			width: 55%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
		}
		.imgadlink_group2{
			width: 170px;
			height: 170px;
			margin: 10px;
			position: relative;
			transition: all .8s ease;
		}
		.adimg2{
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			transition: all .8s ease;
			left: 0;
			top: 0;
			z-index: 1;
		}
		.imgadlink_group2:first-child .adimg2{
			background-color: #f0786f;
			
		}
		.imgadlink_group2:nth-child(2) .adimg2{
			background-color: #f7ae41;
		}
		.imgadlink_group2:nth-child(3) .adimg2{
			background-color: #44b9ae;
			
		}
		.imgadlink_group2:nth-child(4) .adimg2{
			background-color: #717fcc;
		}
		.adimg2 a{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
		}
		.adimg2 a img{
			vertical-align: top;
			width: 100%;
			position: relative;
			-webkit-transition: all 0.4s ease;
	    	-text-decoration-linemoz-transition: all 0.4s ease;
	    	-o-transition: all 0.4s ease;
	    	transition: all 0.4s ease;
		}
		.imgadlink_group2:hover .adimg2 a img{
			-moz-transform: scale(1.1);
			-webkit-transform: scale(1.1);
			-o-transform: scale(1.1);
			-ms-transform: scale(1.1);
			transform: scale(1.1);
		}
		.adiframe2{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.adtxt2 > a{
			position: absolute;
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			box-sizing: border-box;
		}
		.imgadlink_group2:first-child .adtxt2 > a{
			border: 5px solid #f44336;
			
		}
		.imgadlink_group2:nth-child(2) .adtxt2 > a{
			border: 5px solid #ff9800;
		}
		.imgadlink_group2:nth-child(3) .adtxt2 > a{
			border: 5px solid #009688;
			
		}
		.imgadlink_group2:nth-child(4) .adtxt2 > a{
			border: 5px solid #3f51b5;
		}
		.adtxt2 > a{ color: #000; }
@media (min-width: 651px){
	.imgadlink_group2:hover .adimg2{
		top: -120px;
		transform: rotate(-360deg);
	}
}

@media (max-width: 1400px){
	.imgadlink_group2{
		width: 140px;
		height: 140px;
	}
}
@media (max-width: 1250px){
	.imgadlink_group2{
		width: 120px;
		height: 120px;
	}
}
@media (max-width: 1150px){
	.about_main .body_title{ 
		width: 100%;
    	margin: 0;
    }
    .imgadlink_main2{ width: 100%; }

}
@media (max-width: 850px){
	.body_title > h2{
		font-size: 4rem;
	}
	.body_title > span{
		font-size: 1.75rem;
	}
	.travelteam{ margin: 10px; }
	.travelteam_price{ font-size: 1rem; }
	.travelteam_title{ font-size: 1.15rem; }

	.news_main{
		padding: 0 0 50px;
	}
	.news_box,
	.ShowImgUrlLink_main2{
		width: 100%;
	}

	.ShowImgUrlLink_box2{
		width: 45%;
		margin: 10px 2.5%;
	}
	.ShowImgUrlLink_box2 .ShowImgUrlLink_title2{ font-size: 1.05rem; }
	.ShowImgUrlLink_date2{ display: inline-block; }

	.ShowImgUrlLink_img2, .ShowImgUrlLink_img_noimg2{ display: block; }
	.ShowImgUrlLink_main{ display: none; }


	.imgadlink_main{ height: 1000px; }
	.imgadlink_group{ width: 50%; }
	.imgadlink_group:nth-child(odd) .adtxt:after,
	.imgadlink_group:nth-child(even) .adtxt:after{ width: 30%; }


}
@media (max-width: 650px){
	.about_main{
		padding: 50px 0;
	}
	.about_main .body_title{ padding-bottom: 0; }
	.about_main .body_title > h2{
		letter-spacing: 10px;
		padding-left: 10px;
	}
	.imgadlink_group2{
		width: 46%;
		margin: 10% 1%;
		height: 46vw;
	}
	.imgadlink_group2 .adtxt2 > a{
		width: 100%;
		height: auto;
		top: 110%;
		left: 50%;
		transform: translate(-50%, 0);
	}
	.imgadlink_group2:first-child .adtxt2 > a,
	.imgadlink_group2:nth-child(2) .adtxt2 > a,
	.imgadlink_group2:nth-child(3) .adtxt2 > a,
	.imgadlink_group2:nth-child(4) .adtxt2 > a{
		border: none;	
	}
}