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

/* 以下是 圖示文字 的 CSS */
@import url('/webeip/HT00100/peggy/fonticons/css/style.css');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&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');

/* 大圖輪播器 carousel10 */
	.carousel10_main{ position: relative; }
	.carousel10_main .carousel10{ margin-bottom: -5px; }
	.carousel10_a{
		display: block;
	    width: 100%;
	}
	.carousel10_img{
		display: block;
		vertical-align: top;
	    width: 100%;
	}
	.carousel10 .slick-active .carousel10_img{ animation: roomOut 3s; }
	@keyframes roomOut{
		0%{
			transform: scale(1.1);
		}
		80%{
			transform: scale(1);
		}
		100%{
			transform: scale(1);
		}
	}
	/* 圖片說明 */
	.slick-slide a{
		position: relative;
    	display: inline-block;
	}
	.slick-slide a span{
		position: absolute;
		display: block;
		width: 100%;
		bottom: 0;
		box-sizing: border-box;
		transition: all 1s;
		background: rgba(255,255,255,.5);
		text-align: center;
	}
	.carousel10_txt > i{
		display: block;
		width: 100%;
		font-style: normal;
	    padding: 0 180px;
	    box-sizing: border-box;
	    color: #ffde6a;
	}
	.slick-slide a span .carousel10_title{
		left: -100%;
		transition: all 1s;
	}
	.slick-slide a span .carousel10_detail{
		left: -100%;
		transition: all 1.5s;
	}
	.carousel10_txt > .carousel10_title{ font-size: 3rem; position: relative; text-shadow: black 0em 0em 0.1em;}
	.carousel10_txt > .carousel10_detail{ font-size: 1.5rem; position: relative; text-shadow: black 0em 0em 0.1em;}
	.carousel10 .slick-active a span .carousel10_title,
	.carousel10 .slick-active a span .carousel10_detail{ left: 0; }
	/* 箭頭 */
	.slick-prev, .slick-next{
		width: 20px;
    	height: 30px;
    	transition: all .3s linear;
    	top: 70%;
	}
	.slick-next, .slick-next:hover, .slick-next:focus{
		background: url(/webeip/HT00100/Peggy/carousel10/img/arrow-right-w.svg);
		background-repeat: no-repeat;
    	background-size: contain;
		left: 45px;
		background-color: rgba(0,0,0,.5);
	}
	.slick-prev, .slick-prev:hover, .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: 999;
    	background-color: rgba(0,0,0,.5); */
	}
	.slick-next:before, .slick-prev:before{ display: none; }
	/* 下方點點 */
	.slick-dots{
		display: flex;
		bottom: 0;
	}
	.slick-dots li{
		width: 100%;
		margin: 0;
		height: 10px;
	}
	.slick-dots li button{
		height: 0; 
		padding: 0;
	}
	.slick-dots li button:before{
		content: '';
		background-color: rgba(0,0,0,0.5);
		width: 100%;
		height: 5px;
	}
	.slick-dots li.slick-active button:before{
		opacity: 1;
    	background-color: #af9d7a;
	}
	@media all and (max-width: 425px){
		.carousel10_txt > .carousel10_title{ font-size: 1.75rem; }
		.carousel10_txt > .carousel10_detail{ font-size: 1.25rem; }
		.slick-dots li{ height: 5px; }
	}

	/* 下拉按鈕 */
	.sliderdownbtn{
		width: 120px;
		height: 120px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 0;
		transform: translate(-50%,0);
		bottom: -40px;
		background-color: rgba(255,255,255,.5);
		border-radius: 50%;
		cursor: pointer;
		-webkit-animation: upDown ease-out 1s infinite;
		-moz-animation: upDown ease-out 1s infinite;
		-o-animation: upDown ease-out 1s infinite;
		animation: upDown ease-out 1s infinite;
		-webkit-transition: bottom .5s;
		-o-transition: bottom .5s;
		transition: bottom .5s;
	}
	@keyframes upDown{
		0%{
			opacity: 1;
		}
		50%{
			opacity: 0.7;
		}
		100%{
			opacity: 1;
		}
	}
	.sliderdownbtn:hover{
		bottom: -50px;
	}
	.sliderdownbtn span{
		color: #fff;
	    text-shadow: black 0.1em 0.1em 0.2em;
	    position: relative;
	    top: -20%;
	}
	.sliderdownbtn span:after{
		position: absolute;
		content: '';
		width: 2px;
		height: 30px;
		left: 50%;
		top: 100%;
		background-color: #fff;
		box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
	}
	@media all and (max-width: 768px){
		.carousel10_img{ background-attachment: unset; }
		.sliderdownbtn{
			display: none;
		}
	}
/* 行程 */
	.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;
		font-family: "Great Vibes", serif;
		color: #0a5a60;
	}
	.tour_title h2 span{ font-family: "Great Vibes", serif; 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;
		}
/* 圖像廣告連結-videos */
	.tour_main .imgadlink_main{
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: flex-start;
		position: relative;
		z-index: 99;
	}
	.tour_main .imgadlink_group{
		width: 100%;
		max-width: 380px;
		margin: 10px;
		transition: all .3s;
	}
	.tour_main .imgadlink_group:first-child, .tour_main .imgadlink_group:nth-child(2){
		max-width: 580px;
	}
	.tour_main .adimg{ width: 100%; }

	.tour_main .adimg a{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		overflow: hidden;
		border: 8px solid #08585f;
    	box-sizing: border-box;
    	border-radius: 50%;
	}
	.tour_main .adimg a img{
		vertical-align: top;
		max-width: 100%;
		transition: all .3s;
		border-radius: 50%;
    	box-sizing: border-box;
    	-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;
	}
	.tour_main .adimg a:hover 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);
	}
	.tour_main .imgadlink_main iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.tour_main .adtxt{
		width: 100%;
		background-color: #08585f;
		padding: 10px;
		box-sizing: border-box;
	}	

	.tour_main .adtxt > a{
		display: block;
		width: 100%;
		text-align: center;
		padding: 5px;
		box-sizing: border-box;
		font-size: 1.2rem;
		color: #fff;
	}
	.tour_main .adtxt > .otherlink{
		background-color: #357d83;
		max-width: 120px;
		margin: 10px auto;
		transition: all .5s;
	}
	.tour_main .adtxt > .otherlink:hover{
		background-color: #fff;
		color: #357d83;
	}
	.tour_main .adexplain{
		width: 100%;
		text-align: center;
		padding: 0.5rem 0.25rem;
		box-sizing: border-box;
		font-size: 1rem;
		color: #fefefe;
		display: none;
	}
/* 圖像廣告連結-服務項目 */
	.services{
		width: 100%;
		margin: 2rem auto;
	}
	.services .imgadlink_main{
		width: 100%;
		max-width: 900px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.services .imgadlink_group{
		width: 100%;
		max-width: 260px;
		margin: 10px 20px;
		transition: all .3s;
	}
	.services .adimg{ width: 100%;}

	.services .adimg a{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		overflow: hidden;
		border: 8px solid #08585f;
    	box-sizing: border-box;
    	border-radius: 50%;
	}
	.services .adimg a img{
		vertical-align: top;
		max-width: 100%;
		transition: all .3s;
		border-radius: 50%;
    	box-sizing: border-box;
    	-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;
	}
	.services .adimg a:hover 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);
	}
	.services .adiframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.services .adtxt{
		width: 100%;
		background-color: #08585f;
		margin-top: -20px;
		padding: 20px;
		box-sizing: border-box;
	}	

	.services .adtxt > a{
		display: block;
		width: 100%;
		text-align: center;
		padding: 0.5rem 0.25rem;
		box-sizing: border-box;
		font-size: 1.2rem;
		color: #fff;
	}
	.services .adtxt > .otherlink{
		background-color: #357d83;
		max-width: 120px;
		margin: 10px auto;
		transition: all .5s;
	}
	.services .adtxt > .otherlink:hover{
		background-color: #fff;
		color: #357d83;
	}
	.services .adexplain{
		width: 100%;
		text-align: center;
		padding: 0.5rem 0.25rem;
		box-sizing: border-box;
		font-size: 1rem;
		color: #fefefe;
	}
/* 關於我們 */
	.about_bg{
		width: 100%;
		padding: 20px;
    	box-sizing: border-box;
		background-color: #8fcae4;
	}
	.about{
		width: 90%;
		max-width: 800px;
		margin: 0 auto;
		padding: 20px;
		box-sizing: border-box;
		color: #fff;
	}
	.about h2{
		width: 100%;
		text-align: center;
		font-size: 4rem;
		letter-spacing: 5px;
		margin-bottom: 40px;
		font-family: 'Oxygen', sans-serif;
	}
	.about h2 span{ color: #ff5b43; }
	.about_box p{
		line-height: 30px;
		text-align: center;
	}
	.about_box p:nth-child(2){ margin: 20px 0; }
	.about_btn{
		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: #ff5b43;
		transition: all .5s;
	}
	.about_btn:hover{
		background-color: #fff;
		color: #ff5b43;
	}
/* 聯絡我們 */
	.contact_bg{
		width: 100%;
		padding: 60px 20px;
    	box-sizing: border-box;
		background-color: #FFDE6A;
	}
	.contact{
		color: #08585F;
	}
	.contact h2{
		width: 100%;
		text-align: center;
		font-size: 4rem;
		letter-spacing: 5px;
		margin-bottom: 40px;
		font-family: 'Oxygen', sans-serif;
	}
	.contact h2 span{ color: #fff; }
	.contact_box{
		width: 100%;
		max-width: 800px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.contact_content h3{
		font-size: 1.5rem;
		border-left: 5px solid;
		padding-left: 10px;
		box-sizing: border-box;
		margin-bottom: 10px;
	}
	.contact_content p{ line-height: 30px; }
	.contact_googlemap{
		position: relative;
		width: 90%;
		max-width: 400px;
		padding-bottom: 50%;
	}
	.contact_googlemap iframe{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}
	.contact_fb{
		margin: 15px auto 0;
		text-align: center;
	}
/* loading載入 */
	.loader-wrapper {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	.loader {
		display: inline-block;
		width: 30px;
		height: 30px;
		position: relative;
		border: 4px solid #Fff;
		animation: loader 2s infinite ease;
	}
	.loader-inner{
		position: absolute;
		vertical-align: top;
		display: block;
		width: 250px;
		animation: loader-inner 5s infinite ease-in;
	}
@media all and (max-width: 1430px)
{
	.travelteam_main{ max-width: 1050px; }
}
@media all and (max-width: 1200px)
{
	.tour_main .imgadlink_main{ max-width: 800px; }
	.tour_main .imgadlink_group:first-child, .tour_main .imgadlink_group:nth-child(2){
		max-width: 95%;
		margin: 10px 2.5%;
	}
	.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: 850px)
{
	.tour_main .imgadlink_group{
		max-width: 95%;
		margin: 10px 2.5%;
	}

}
@media all and (max-width: 825px)
{
	.contact_box{ display: block; }
	.contact_googlemap{
		margin: 1rem auto;
		padding-bottom: 30%;
	}
	.contact_content{
		max-width auto;: 400px;
		margin: 0
	}

}
@media all and (max-width: 730px)
{
	.travelteam_main{
		max-width: 350px;
		margin: 1rem auto;
	}
	.travelteam{ margin: 1rem auto; }
}
@media all and (max-width: 950px){
	.services .imgadlink_main{ max-width: 600px; }
	
}
@media all and (max-width: 650px){
	.services .imgadlink_main{ max-width: 300px; }
	.about{ padding: 0; }

	.ShowImgUrlLink_mainbox{
		width: 45%;
		margin: 10px 2.5%;
	}
	.ShowImgUrlLink_img > div div{ height: 57vw; }
}

	/* 圖示站內活動2 */
		.ShowImgUrlLink_main2{
			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_mainbox2{
			width: calc(90% / 3);
			margin: 10px calc(10% / 6);
			transition: all .5s;
		}
		.ShowImgUrlLink_box2{
			width: 100%;
			transition: all .5s;
			box-sizing: border-box;
			position: relative;
		}
		.ShowImgUrlLink_img2{
			display: block;
			position: relative;
			transition: all .5s;
			overflow: hidden;
			background-color: #fff;
		}
		.ShowImgUrlLink_img_noimg2{
	        display: flex;
	        align-items: center;
	        justify-content: center;
	        width: 100%;
	        height: 220px;
	        background-color: #DDD;
	    }
	    .ShowImgUrlLink_img_noimg2 > span{
	        font-size: 3rem;
	        color: #FFF;
	    }
	    .ShowImgUrlLink_img_img2 img{
	    	width: 100%;
	    	vertical-align: top;
	    }
		.ShowImgUrlLink_img2 > div div{
			width: 100%;
			height: 220px;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
		}
		.ShowImgUrlLink_title2{
			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%)
		}

@media all and (max-width: 1200px)
{
	.ShowImgUrlLink_img2 > div div{ height: 18vw; }
}

@media all and (max-width: 900px)
{
	.ShowImgUrlLink_main2{
		
	}

}
@media all and (max-width: 650px){

	.ShowImgUrlLink_mainbox2{
		width: 45%;
		margin: 10px 2.5%;
	}
	.ShowImgUrlLink_img2 > div div{ height: 28vw; }
}