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

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

/* 大圖輪播器 carousel10 */

	.carousel_main{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		position: relative;
	}

	.carousel10_main{
		position: relative;
		width: 100%;
	}

	.carousel10_a{
		display: block;
	    width: 100%;
	    position: relative;
	}
	.carousel10_img{
		display: block;
		vertical-align: top;
	    width: 100%;
	    height: auto;
	}
	.carousel10_img{
		width: 100%;
		height: 30vw;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}
	/* 下方點點 */
		.carousel10-pagination{
			position: absolute;
			text-align: center;
			-webkit-transition: .3s opacity;
			-o-transition: .3s opacity;
			transition: .3s opacity;
			-webkit-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
			z-index: 10;
		}
		.carousel_main .swiper-container-horizontal>.swiper-pagination-bullets,
		.carousel_main .swiper-pagination-custom,
		.carousel_main .swiper-pagination-fraction{
			left: 50%;
    		width: auto;
			transform: translate3d(0,0,0) translate(-50%, 0);
		}
		.carousel10-pagination .swiper-pagination-bullet{
			width: 40px;
    		height: 6px;
    		border-radius: 0;
		}
		.carousel10-pagination .swiper-pagination-bullet-active{ background: #ffffff; }
	/* 箭頭 */
		.carousel10-button-next, .carousel10-button-prev{
			position: absolute;
			top: 50%;
			width: 40px;
			height: 50px;
			margin-top: -30px;
			z-index: 10;
			cursor: pointer;
			background-size: 40px 50px;
			background-position: center;
			background-repeat: no-repeat;
		}
		.carousel10-button-next, .swiper-container-rtl .carousel10-button-prev{
			right: 10px;
			left: auto;
			background-image: url(/webeip/HT00413/img/arrow-right-w.svg);
		}
		.carousel10-button-prev, .swiper-container-rtl .carousel10-button-next{
			background-image: url(/webeip/HT00413/img/arrow-left-w.svg);
			left: 10px;
			right: auto;
		}
	/* 下滑按鍵 */
		.sliderdownbtn{
			bottom: 10px;
			left: 10px;
			cursor: pointer;
			width: 20px;
			height: 80px;
			position: absolute;
			z-index: 6;
			display: none;
		}
		.sliderdownbtn_line{
			cursor: pointer;
			width: 3px;
			height: 80px;
			background-color: rgba(255,255,255,.8);
			position: absolute;
			z-index: 6;
		}
		.sliderdownbtn_arrow{
			position: absolute;
			width: 3px;
			height: 20px;
			content: '';
			background-color: rgba(255,255,255,.8);
			left: 5px;
			bottom: 0;
			transform: rotateZ(30deg);
		}
		@media all and (max-width: 768px){
			.carousel10_img{ height: 50vw; }
			.carousel10-button-next, .carousel10-button-prev{ display: none; }

			.carousel_main .swiper-container-horizontal>.swiper-pagination-bullets,
			.carousel_main .swiper-pagination-custom,
			.carousel_main .swiper-pagination-fraction{
				left: auto;
				right: 0;
				width: auto;
				transform: translate3d(0,0,0) translate(0, 0);
			}
			.carousel10-pagination .swiper-pagination-bullet{
					width: 15px;
				    height: 15px;
				    border-radius: 50%;
			}
			
		}

/* 團體蒐尋器 */
	.search_main{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		position: relative;
		margin-top: -47px;
		margin-bottom: 50px;
		z-index: 999;
	}
	.searchgrp_main{
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
	}
	.searchgrp_title{
		width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		position: relative;
	}
	.searchgrp_title > ul{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.searchgrp_title > ul li a{
		display: inline-block;
		padding: 10px 20px;
		box-sizing: border-box;
		font-size: 1.25rem;
		background-color: rgba(0,0,0,.5);
		color: #fff;
		cursor: pointer;
		transition: all .3s;
	}
	.searchgrp_title > ul li a.titleclick{
		background-color: #ab845b;
	}
	.searchgrp_title > ul li:hover a{
		background-color: #ab845b;
	}

	/* 蒐尋器 */
		.searchgrp_box{
			width: 100%;
			box-shadow: 0 0 5px rgb(0 0 0 / 30%);
			box-sizing: border-box;
			display: none;
		}
		.searchgrp_box1{
			display: block;
		}
		.searchgrp_box > form{
			display: block;
			width: 100%;
			margin: 0 auto;
			background-color: #fff;
			padding: 5px;
			box-sizing: border-box;
			border-radius: 0 0 5px 5px;
		}
		.searchgrp_box > form > ul{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: flex-end;
		}
		.searchgrp_box > form > ul > li{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		    padding: 2px 5px;
		    box-sizing: border-box;
		    color: #000;
		    margin-bottom: 10px;
		}
		.searchgrp_box > form > ul > li:first-child{
			width: 25%;
		}
		.searchgrp_box > form > ul > li:nth-child(2),
		.searchgrp_box > form > ul > li:nth-child(3){
			width: 30%;
		}
		.searchgrp_box > form > ul > li:nth-child(4),
		.searchgrp_box > form > ul > li:nth-child(5){
			width: 15%;
		}
		.searchgrp_box > form > ul > li > div > .travel_select{
			width: 100%;
			line-height: 22px;
			padding: 0.25rem 0.5rem;
			margin: 0 0.25rem;
			font-size: 1rem;
			box-sizing: border-box;
			border: 1px solid #ddd;
		}
		.searchgrp_box > form > ul > li > div > .travel_select option{ box-sizing: border-box; }
		.searchgrp_box > form > ul > li > span{
			display: inline-block;
			margin: 0.25rem;
			color: #000;
			font-size: 1.15rem;
			letter-spacing: 2.5px;
			padding-left: 2.5px;
			box-sizing: border-box;
		}
		.searchgrp_box > form > ul > li > div{
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.searchgrp_box > form > ul > li > div > .searchgrp_day{
			width: 100%;
			display: flex;
			justify-content: center;
		    align-items: center;
		    position: relative;
		}

		.searchgrp_box > form > ul > li > div > .searchgrp_day > input[type="text"]{
			line-height: 22px;
			padding: 0.25rem 0.5rem;
			margin: 0 0.25rem;
			width: 100%;
			border: none;
			box-sizing: border-box;
			font-size: 1rem;
			border: 1px solid #ddd;
		}
		.searchgrp_box > form > ul > li > div > .searchgrp_day > span{
			white-space: nowrap;
		}
		.searchgrp_box > form > ul > li > div > .searchgrp_day > .icon-calendar4{
			display: inline-block;
			box-sizing: border-box;
			border-radius: 3px;
			color: #333;
			position: absolute;
			right: 15px;
			font-size: 1.25rem;
		}
		.searchgrp_box > form > ul > li > .searchgrp_keyword{ width: 100%; }
		.searchgrp_box > form > ul > li > .searchgrp_keyword > input[type="text"]{
			width: 100%;
		    line-height: 22px;
		    padding: 0.25rem 0.5rem;
		    margin: 0 0.25rem;
		    border: 1px solid #ddd;
		    box-sizing: border-box;
		    font-size: 1rem;
		}
		.searchgrp_box > form > ul > li > input[type="submit"]{
			width: 100%;
			padding: 10px;
			box-sizing: border-box;
			border: 0;
			border-radius: 2px;
			margin: 0 0.25rem;
			background-color: #ab845b;
			color: #fff;
			cursor: pointer;
			transition: all .5s;
			font-size: 1rem;
		}
		.searchgrp_box > form > ul > li > input[type="submit"]:hover{ background-color: #FF0000; }
/*按鈕*/
	.bodywrap_btn{
		position: relative;
		z-index: 1;
		font-size: 1.15rem;
		text-align: center;
		padding: 10px 25px;
		background: #ab845b;
		color: #fff;
		display: inline-block;
		box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.1);
		transition: all .3s;
		box-sizing: border-box;
	}
	.bodywrap_btn > span{
		display: inline-block;
		letter-spacing: 5px;
		padding-left: 5px;
		box-sizing: border-box;
	}
	.bodywrap_btn:hover{
   		background: #555555;
	}
	.bodywrap_btn:hover .icon-hotel-arrow-right{
		animation: arrow-right2 0.8s infinite linear;
	}
	@keyframes arrow-right2 {
		0% {
			transform: translate(-10px, 0%);
			opacity: 0;
		}
		50% {
			opacity: 0.8;
		}
		100% {
			transform: translate(10px, 0%);
			opacity: 0;
		}
	}
/* 客製化行程 */
	.customization_main{
		width: 100%;
		padding: 100px 0;
		box-sizing: border-box;
		position: relative;
		background-image: url(/webeip/HT00047/img/customization_bg.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		background-attachment: fixed;
	}
	.customization_main:after{
		content: '';
		position: absolute;
		z-index: 1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #40372e;
		opacity: 0.8;
	}
	.customization_box{
		width: 100%;
		max-width: 1400px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	.customization_boxL, .customization_boxR{
		width: 40%;
		margin: 0 2%;
		position: relative;
		z-index: 2;
	}
	.customization_boxL > div{
		color: #fff;
	}
	.customization_boxL > div h3, .customization_boxL > div h1{
		letter-spacing: 5px;
		padding-left: 5px;
		box-sizing: border-box;
		margin-bottom: 10px;
	}
	.customization_boxL > div > div{
		margin: 30px 0;
	}
	.customization_boxL > div > div p{
		letter-spacing: 5px;
		padding-left: 5px;
		box-sizing: border-box;
		text-align: justify;
		line-height: 30px;
	}
	.customization_boxR{
		border: 15px solid rgba(255, 255, 255, 0.5);
		box-sizing: border-box;
	}
	.customization_boxR > img{
		width: 100%;
		vertical-align: top;
	}
/* 服務項目 */
	.service_main{
		width: 100%;
		padding: 100px 0;
		box-sizing: border-box;
	}
	.service_main > ul{
		width: 100%;
		max-width: 1400px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	.service_main > ul li{
		display: inline-block;
		width: calc(90% / 4);
		margin: 20px calc(10% / 8);
		text-align: center;
		border: 5px solid #BFBFBF;
		background-color: #f1f1f1;
		box-sizing: border-box;
		padding: 10px 15px;
	}
	.service_main > ul li i{
		height: 60px;
		width: 60px;
		margin: 15px auto;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(199 199 199 / 50%);
		border-radius: 50%;
		font-size: 2rem;
	}
	.service_main > ul li span{
		display: inline-block;
		font-weight: bold;
		color: #666;
		font-size: 1.5rem;
		letter-spacing: 2px;
		padding-left: 2px;
		box-sizing: border-box;
	}
	.counter_main{
		height: 32px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
/* 關於我們、聯絡我們 */
	.about_main{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		box-sizing: border-box;
		position: relative;
	}
	
	.about_boxL, .about_boxR{
		width: 50%;
		position: relative;
		z-index: 2;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		padding: 100px 40px;
		box-sizing: border-box;
	}
	.about_boxL{
		background-image: url(/webeip/HT00047/img/about.jpg);
	}
	.about_boxR{
		background-image: url(/webeip/HT00047/img/contact.jpg);
	}
	.about_boxL:after,
	.about_boxR:after{
		content: '';
		position: absolute;
		z-index: 1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0.5;
	}
	.about_boxL:after{ background-color: #40372e; }
	.about_boxR:after{ background-color: #000; }
	
	.about_boxL > div,
	.about_boxR > div{
		color: #fff;
		position: relative;
		z-index: 2;
	}
	.about_boxL > div h3, .about_boxL > div h1,
	.about_boxR > div h3, .about_boxR > div h1{
		letter-spacing: 5px;
		padding-left: 5px;
		box-sizing: border-box;
		margin-bottom: 10px;
	}

/* 熱門行程 */
	.tour_main{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		position: relative;
	}
	.tour_box{
		width: 90%;
		max-width: 1400px;
		margin: 0 auto;
		padding: 0 0 50px;
	}
	.tour_title{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 98%;
		margin: 0 auto;
		font-size: 1.5rem;
		letter-spacing: 10px;
		padding-left: 10px;
		box-sizing: border-box;
		color: #7f7f7f;
		margin-bottom: 60px;
		text-align: center;
	}
	.tour_title > span{
		display: inline-block;
		font-size: 3.5rem;
		margin-left: 10px;
		color: #ab845b;
	}
	.tour_wrap{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.tour_body{
		width: calc(90% / 3);
		margin: 10px calc(10% / 6);
	}

	/* 圖示團體旅遊 */
		.travelteam_main{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			justify-content: flex-start;
			position: relative;
		}
		.travelteam{
			width: 100%;
			box-sizing: border-box;
			transition: all .3s;
			position: relative;
		}
		.travelteam_img{
			width: 100%;
			display: block;
			position: relative;
			box-sizing: border-box;
			background-color: #fff;
		}
		/*.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{
			display: block;
			width: 100%;
			padding: 5px;
			box-sizing: border-box;
			position: relative;
			text-align: right;
			background-color: #f1f1f1;
			transition: all .3s;
		}
		.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{
			display: inline-flex;
			justify-content: center;
			align-items: flex-end;
			font-size: 1.15rem;
			text-align: right;
			box-sizing: border-box;
			color: #f44336;
			padding: 0 10px;
			font-weight: bold;
		}
		.travelteam_price > i{
			display: inline-block;
			font-size: 0.9rem;
			color: #000;
			font-weight: normal;
			font-style: normal;
			margin-left: 5px;
		}
		.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;
		}


		/*上面設定*/
			.tour_top .travelteam_content,
			.tour_top .travelteam_price{ display: none; }
			.tour_top .travelteam{ position: absolute; opacity: 0;}
			.tour_top .travelteam_main .travelteam.current{ opacity: 1; z-index: 999;}

		/* 下面設定 */
			.tour_bottom .travelteam_main{ margin-top: 20px; }
			.tour_bottom .travelteam_img{ display: none; }
			.tour_bottom .travelteam_content{ border-bottom: 1px dashed #BFBFBF; }
			.tour_bottom .travelteam:last-child .travelteam_content{ border-bottom: none; }
			.tour_bottom .travelteam_main .travelteam:hover .travelteam_content{
				background-color: #2196F3;
			}
			.tour_bottom .travelteam_main .travelteam:hover .travelteam_content .travelteam_title{ color: #fff; }
			.tour_bottom .travelteam_main .travelteam:hover .travelteam_content .travelteam_price,
			.tour_bottom .travelteam_main .travelteam:hover .travelteam_content .travelteam_price > i{ color: #fff; }
	/* 圖示站內 */
		.ShowImgUrlLink_main{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			justify-content: flex-start;
			position: relative;
		}
		.ShowImgUrlLink_box{
			width: 100%;
			box-sizing: border-box;
			transition: all .3s;
			position: relative;
		}
		.ShowImgUrlLink_img{
			width: 100%;
			display: block;
			position: relative;
			box-sizing: border-box;
			background-color: #fff;
		}
		/*.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;
		}*/
		.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{
			display: block;
			width: 100%;
			padding: 5px;
			box-sizing: border-box;
			position: relative;
			text-align: right;
			background-color: #f1f1f1;
			transition: all .3s;
		}
		.ShowImgUrlLink_title > p{
			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;
		}
		.ShowImgUrlLink_updatedate{
			color: #8c8c8c;
		}

		/*上面設定*/
			.tour_top .ShowImgUrlLink_title{ display: none; }
			.tour_top .ShowImgUrlLink_box{ position: absolute; opacity: 0;}
			.tour_top .ShowImgUrlLink_main .ShowImgUrlLink_box.current{ opacity: 1; z-index: 999;}

		/* 下面設定 */
			.tour_bottom .ShowImgUrlLink_main{ margin-top: 20px; }
			.tour_bottom .ShowImgUrlLink_img{ display: none; }
			.tour_bottom .ShowImgUrlLink_title{ border-bottom: 1px dashed #BFBFBF; }
			.tour_bottom .ShowImgUrlLink_box:last-child .ShowImgUrlLink_title{ border-bottom: none; }
			.tour_bottom .ShowImgUrlLink_main .ShowImgUrlLink_box:hover .ShowImgUrlLink_title{
				background-color: #2196F3;
			}
			.tour_bottom .ShowImgUrlLink_main .ShowImgUrlLink_box:hover .ShowImgUrlLink_title > p,
			.tour_bottom .ShowImgUrlLink_main .ShowImgUrlLink_box:hover .ShowImgUrlLink_title > .ShowImgUrlLink_updatedate{ color: #fff; }

	
@media (max-width: 885px)
{
	.service_main{ padding: 25px 0; }
	.service_main > ul li{
		width: calc(95% / 2);
		margin: 20px calc(5% / 4);
	}
}
@media (max-width: 768px)
{
	.search_main{ margin-top: -45px; }

	.searchgrp_title > ul li a{
		padding: 10px;
		font-size: 1.15rem;
	}

	.searchgrp_box > form > ul > li:first-child,
	.searchgrp_box > form > ul > li:nth-child(2),
	.searchgrp_box > form > ul > li:nth-child(3),
	.searchgrp_box > form > ul > li:nth-child(4),
	.searchgrp_box > form > ul > li:nth-child(5){ width: 100%; }

	.searchgrp_box > form > ul > li:nth-child(2){
		flex-wrap: wrap;
	}
	.searchgrp_box > form > ul > li:nth-child(2) > .searchgrp_day{ margin-bottom: 5px; }

	.customization_boxL, .customization_boxR{
		width: 98%;
		margin: 20px 2%;
	}

	.about_boxL, .about_boxR{ width: 100%; }


	.tour_title{
		font-size: 1.15rem;
		letter-spacing: 5px;
		padding-left: 5px;
		margin-bottom: 30px;
	}
	.tour_title > span{
		font-size: 2.5rem;
	}
	.tour_body{
		width: 90%;
		margin: 10px calc(10% / 2);
	}


}
@media (max-width: 425px)
{
	.customization_main{ padding: 50px 0; }
	.customization_boxL > div h1{ font-size: 1.5rem; }
	.service_main > ul li{ padding: 5px; }
	.service_main > ul li i{
		height: 40px;
		width: 40px;
		margin: 5px auto;
		font-size: 1.25rem;
	}
	.service_main > ul li span{
		font-size: 1.15rem;
	}

	.about_boxL, .about_boxR{ padding: 50px 20px; }
	.about_boxL > div h1, .about_boxR > div h1{ font-size: 1.5rem; }
}