@charset "utf-8";
/*******************************************************************************
 * Version 1.0 Release;
 * Copyright 2017
 ******************************************************************************/
body {
	background: #fff;
	color: #555;
	font:100%/1.2 Helvetica, "蘋果儷中黑", "微軟正黑體", Verdana, Arial, sans-serif, "新細明體";
}
/*連結 a-文字連結*/
a {
	color: #071e3d;
	text-decoration: none;
}
a:hover{
	text-decoration: none;
}
/*項目清單-取消項目符號*/
ol, ul {
	list-style: none;
}
    #goTop{
    	display: block;
    	z-index: 4;
    }
/*======================================== 框 */
.Wrap {
	min-height: 100%;
	position: relative;
	overflow: hidden;
}

/*======================================== header */
.container{
	margin-right: auto;
	margin-left: auto;
}
.Header {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 999;
	background: #7edd31;
}
.Header > .Inner {
	padding: 1em 0;/*16/16 0*/
	height: 50px;
}

/*======================================== Content */
/* define bootstrap 2 columns */
.col-xs-1-6,
.col-sm-1-6,
.col-md-1-6,
.col-lg-1-6 {
    position: relative;
    min-height: 1px;
    padding: 0 5px;
}

.col-xs-1-6 {
    width: 50%;
    float: left;
}

@media (min-width: 768px) {
.col-sm-1-6 {
    width: 50%;
    float: left;
    }
}
@media (min-width: 992px) {
.col-md-1-6 {
    width: 50%;
    float: left;
    }
}
@media (min-width: 1200px) {
.col-lg-1-6 {
    width: 50%;
    float: left;
    }
}
/* define bootstrap 5 columns */
.col-xs-1-5,
.col-sm-1-5,
.col-md-1-5,
.col-lg-1-5 {
    /*position: relative;*/
    min-height: 1px;
    padding: 0 5px;
}

/* define bootstrap 3 columns */
.col-xs-1-4,
.col-sm-1-4,
.col-md-1-4,
.col-lg-1-4 {
    position: relative;
    min-height: 1px;
    padding: 0 5px;
}

.col-xs-1-4 {
    width: 33%;
    float: left;
}
.Content,
.Section > .Inner {
	padding: 0.125em 0.078125%;
}
.Section > .Inner > h1 {
	color: #323232;
	font-size: 1.875em;/*30/16*/
	/*font-weight: bold;*/
	text-align: center;
	margin: 17px 75px;
	padding: 5px;
}
/*圖片共用*/
.ImgBox > .Img {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff6d00+0,ffd800+100 */
	display: block;
	/*overflow: hidden;*/
}
.ImgBox > .Img img.Photo {
}
/*SectionBanner */
.SectionBanner {
	background: url("https://event.cdn-eztravel.com.tw/events/newyear-promotion/banner_mobile.png?t=20180926") no-repeat center center;
	background-size: cover;
	margin-top: -2px;
}
.SectionBanner:after {
	content: " ";
	display: block;
	padding-top: 93.125%;
}
.Section.SectionBanner > .Inner {
	padding: 0;
	height: 0;
}
.SectionBanner .Info {
	text-indent: 100%;
	white-space:nowrap;
	overflow: hidden;
	height: 0;
}
/*SectionInfo*/
.SectionInfo{
	background-color: #fbfbfb;
}
/*共用title*/
.Section > .Inner > .row > .SummaryTitle{
	text-align: center;
	margin: 40px 44px 10px;
	font-size: 26px;
	font-weight: 600;
}
.Section > .Inner > .row > .SummaryTitle img{
	display: inline-block;
	width: 170px;
	display: block;
	margin: 0 auto;
	padding: 0 0 10px;
}
/*SectionTab*/
.SectionTab >.Inner > .Tab{
	margin: 0 10px 0 -20px;
}
.SectionTab >.Inner > .Tab > ul{
}
.SectionTab >.Inner > .Tab > ul > a li{
	float: left;
	border-radius:25px;
	border: 2px solid #be3045;
	padding: 5px 20px;
	margin: 2px 5px;
	color: #be3045;
	text-align: center;
	width: 46%;
	font-size: 16px;
}
/*SectionInfo*/
.SectionInfo > .Inner > .SummaryTitle{
	text-align: center;
}
.SectionInfo >.Inner > .row > .SummaryInfo{
	font-size: 18px;
	text-align: center;
	color: #555;
	margin:0 34px 30px;
	line-height: 1.5;
}

/*SectionHotels*/
.SectionCountry{
	background-image:url(../image/spot_bg.png?t=20180223v01);
	background-color: #f2f2f2;
	background-position:0 0;
	background-repeat:repeat;
	width: 100%;
}
.SectionCountry > .Inner{
	padding: 6px 30px;
}
.SectionCountry > .Inner > .row > .SummaryTitle img{
	display: inline-block;
	width: 170px;
	display: block;
	margin: 0 auto;
}
.SectionCountry > .Inner > .Sponsor{
	background: rgba(255,255,255,0.9);
	padding: 24px 42px;
	width: 80%;
	margin: 40px auto;
	text-align: center;
}

.BtnBox{
	margin: 18px 0;
}
.Btn a{
	text-decoration: none;
}
.row > .col-md-1-6 {
	float: left;
	width: 100%;
	padding: 0 5px;
	margin: 20px 0 40px;
}
.row > .col-md-1-6 > a > .ImgBox,.row > .col-md-1-4 > a > .ImgBox{
	position: relative;
}
.row > .col-md-1-6 > a > .ImgBox > .Tag,.row > .col-md-1-4 > a >.ImgBox > .Tag{
	background-color: rgba(255,118,17,.8);
	color: #fff;
	padding: 8px 36px;
	position: absolute;
	z-index: 3;
	top:20px;
	left: -6px;
	text-align: center;
	font-size: 17px;
}

.row > .col-md-1-6 > a > .ImgBox > span img, .row > .col-md-1-4 > a >.ImgBox > span img{
	display: inline-block;
	width: 100%;	
}
.row > .col-md-1-6 > .Category, .row > .col-md-1-4 > .Category{
	border-bottom: 2px solid #1053db;
	display: inline-block;
	padding: 14px 5px;
	width: 100%;
}
.row > .col-md-1-6 > .Category > ul,.row > .col-md-1-4 > .Category > ul{
	padding: 0;
	margin:0;
}
.row > .col-md-1-6 > .Category > ul a li{
	float: left;
	font-size: 15px;
	margin: 0 5px 4px;
	padding: 5px 8px;
	border-radius: 5px;
	border: 1px solid #1053db;
	color: #1053db;
}
.row > .col-md-1-6 > .Category > ul a li:hover ,.row > .col-md-1-4 > .Category > ul a li:hover{
	background-color: #1053db;
	color: #fff;
}
.row > .col-md-1-6 > .Country > ul a li{
	margin: 0 8px 4px;
	padding: 5px 15px;
}

.row > .col-md-1-5 {
	margin:22px;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
.row > .col-md-1-5:hover{
	-webkit-transform: translate(0px, -10px);
	-moz-transform: translate(0px, -10px);
	-ms-transform: translate(0px, -10px);
	-o-transform: translate(0px, -10px);
	transform: translate(0px, -10px);
	/*background-color: #fbf6f6;*/
}
.row > .col-md-1-5 a > .ImgBox{
	position: relative;
	clear: both;
}
.row > .col-md-1-5 a > .ImgBox > .Tag{
	background-color: rgba(255,118,17,.8);
	color: #fff;
	padding: 8px 36px;
	position: absolute;
	z-index: 3;
	top:20px;
	left: -6px;
	text-align: center;
	font-size: 17px;
}
.row > .col-md-1-5 a > .ImgBox > span img{
	display: inline-block;
	width: 100%;
}
.row > .col-md-1-5 > .ImgBox > .Img img.Photo {
	width: 100%;
}
.row > .col-md-1-4 {
	float: left;
	width: 100%;
	padding: 0 10px;
	margin: 0 0 40px;
}
.row > .col-md-1-4 > .Category > ul a li{
	float: left;
	font-size: 15px;
	margin: 0 5px 4px;
	padding: 5px 8px;
	border-radius: 5px;
	border: 1px solid #1053db;
	color: #1053db;
}
/*SectionSpots*/
.SectionSpots{
	background-color: #fff;
}
.SectionSpots > .Inner{
	padding: 6px 30px;
	border-top: 7px solid #ddd;
}
.SectionSpots > .Inner > div > .SummaryTitle{
	text-align: center;
	margin: 15px 0 10px;
	font-size: 26px;
	font-weight: 600;
	font-family: "Didot LT W02 Roman",Didot,"Hoefler Text",Garamond,"Times New Roman",serif;
}
.SectionSpots > .Inner > div > .SummaryTitle img{
	display: inline-block;
	width: 170px;
	display: block;
	margin: 0 auto;
	padding: 0 0 10px;
}
.SectionSpots > .Inner > .Note > .Item{
	margin: 0 0 36px;
}
.SectionSpots > .Inner > .Note > .Item > ul{
	list-style-type: decimal;
	padding: 5px 14px;
}
.SectionSpots > .Inner > .Note > .Item > ul > li{
	font-size: 15px;
	line-height: 24px;
}
.SectionSpots > .Inner > .Note > .Item > ul > li > ul > li{
	list-style: square;
	margin-left: -20px;
}
/*SectionVote*/
.SectionVote > .Inner > a .BtnVote{
	background-color: #d8374e;
	border-radius:20em;
	color: #fff;
	font-size: 20px;
	padding: 5px 10px;
	margin: 0 20px 40px;
	text-align: center;
}
/*======================================== Footer */
.Footer {
	background: #7edd31;
	color: #6e6c6c;
	height: 4.125em;
	text-align: center;
	width: 100%;
	bottom: 0;
	left: 0;
	right: 0;
}
.Footer > h1 {
	display: none;
}
.Footer > .Inner {
	padding: 0.9375em 4.6875%;/*15/16 15/320*100*/
	line-height: 1.25;
}
.Footer > .Inner > .Copyright {
	font-size: 0.875em;/*14/16*/
}
/*======================================== Back to top button */

/*如果使用者之視窗寬度>=414px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 414px) {
	.List > .Hotel{
		margin:26px 60px;
	}
}
/*如果使用者之視窗寬度>=600px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 600px) {
	/*======================================== Content */
	/*共用 -購買資訊 */
	.SectionInfo >.Inner > .Tab > ul{
		margin-top: 10px;
	}
	.SectionInfo >.Inner > .Tab > ul > a li{
		margin: 5px 10px;
	}
	.SectionCountry > .Inner{
		padding: 6px 50px;
	}
	.List > .Hotel{
		margin:26px 150px;
	}
	.SectionSpots > .Inner > .Note > ul{
		display: inline-block;
	}
	.SectionSpots > .Inner > .Note > ul li{
		float: left;
		margin: 0 10px;
	}
}
/*如果使用者之視窗寬度>=768px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 768px) {
	#goTop{
    	display: block;
    }
    #goTop2{
		display: none;
	}
	/*======================================== 框 */
	.Wrap {}
	/*======================================== header */
	.Header {}
	.Header > .Inner > .Logo,
	.Header > .Inner > .Logo > a {
		height: 30px;
	}
	.Header > .Inner > .Logo {
		margin: -2px 0 0 -120px;
	}
	/*======================================== Content */
	.Content,
	.Section > .Inner {
		padding: 0.125em 0.078125%;
	}
	.Section {
		margin: 0 auto;
	}
	.Section > .Inner > h1 {
		font-size: 2.25em;/*36/16*/
		margin: 0.78em 200px ;
	}
	/*SectionBanner */
	.SectionBanner {
		background: url("https://event.cdn-eztravel.com.tw/events/newyear-promotion/banner_tb.png?t=20180926") no-repeat center center;
		background-size: cover;
		height: 400px;
		margin-top: -2px;
	}
	.SectionBanner:after {
		padding-top: 65.10417%;
	}
	.InfoList {
		max-width:768px;
	}
	/*SectionTab*/
	.SectionTab >.Inner > .Tab{
		margin: 18px 10px 0 -20px;
	}
	.SectionTab >.Inner > .Tab > ul > a li{
		margin: 5px;
		font-size: 18px;
	}
	/*SectionInfo*/
	.SectionInfo >.Inner{
		padding: 40px 30px;
	}
	.row > .col-md-1-5 {
	    width: 20%;
	    float: left;
	    margin: 5px 0 36px;
    }
    .row > .col-md-1-5 a > .ImgBox > .Tag{
    	font-size: 14px;
    	padding: 8px 25px;
    }
    .row > .col-md-1-6 {
		float: left;
		width: 50%;
		/*padding: 0 20px;*/
		margin: 20px 0 40px;
	}
	.row > .col-md-1-4 {
	    width: 33%;
	    float: left;
	    display: block;
    }
	.SectionInfo >.Inner > .row > .col-md-6 .StepTitle{
		font-size: 36px;
	}
	.SectionInfo >.Inner > .row > .col-md-6 p{
		font-size: 18px;
		line-height: 26px;
		margin: 0 90px;
	}
	.SectionInfo >.Inner > .row > .col-md-6 a .BtnCode{
		margin: 16px 88px;
	}
	.SectionInfo >.Inner > .Tab > ul > a li{
		width: 23%;
		margin: 2px 7px;
		font-size: 20px;
	}
	.SectionInfo > .Inner > .SummaryTitle h1{
		font-size: 50px;
		margin: 30px 0 0;
	}
	/*SectionHotels*/
	.SectionCountry{
	}
	.SectionCountry > .Inner{
		padding: 6px 22px;
	}
	.SectionCountry > .Inner > .List > .SummaryTitle img{
		width: 273px;
		margin: 30px 0 5px;
		display: block;
		margin: 0 auto;
	}
	.row > .col-md-1-5 a > .Info{
		/*height: 200px;*/
	}
	.List {
		display: inline-block;
		max-width: 768px;
		margin:-25px 0% 20px;
	}
	.List > .Hotel {
		float: left;
		max-width: 233px;
		background: #fff;
		margin: 8px 4px 30px;
	}
	.List > .Hotel a > .Info{
		padding: 20px 10px;
	}
	.List > .Hotel a > .Info > h2{
		text-align: center;
		font-size: 20px;
		font-weight: 600;
		color: #ff6d70;
	}
	.List > .Hotel a > .Info > h2 .SmallEng{
		line-height: 16px;
		margin: 5px;
		font-size: 12px;
		color: #555;
	}
	.List > .Hotel a > .Info > .Features{
		height: 108px;
	}
	.List > .Hotel a > .Info > .Des{
		margin: 10px 0 0;
	}
	.List > .Hotel a > .Info > .OriginalPrice{
	}
	.List > .Hotel a > .Info > .Price{
		margin-top: 2px;
		clear: both;
	}
	.List > .Hotel a > .Info > .BtnPink{
		margin: 5px 30px;
	}
	/*SectionSpots*/
	.SectionSpots{
/*		background-image: url(../image/spot_bg.png?t=20171201v01);*/
/*		background-position: -220px 84px;
		background-repeat: repeat;*/
		background-color: #fff;
	}
	.SectionSpots > .Inner > div > .SummaryTitle img{
		width: 170px;
		margin: 30px 0 5px;
		display: block;
		margin: 0 auto;
	}
	.SectionSpots > .Inner > .Note > .Item > ul{
		padding: 5px 40px;
	}
	.SectionSpots > .Inner > .Note > .Item > ul > li{
		font-size: 17px;
		line-height: 26px;
	}
	/*SectionVote*/
	.SectionVote > .Inner > a .BtnVote{
		margin: 0 230px 40px;
	}
}

	/*======================================== Footer */

/*如果使用者之視窗寬度>=800px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 800px) {
	.col-md-1-5 {
	    width: 20%;
	    float: left;
	}
}
/*如果使用者之視窗寬度 =1024px(橫向)iPad，將會再載入這裡的 CSS。*/
@media (max-device-width: 1024px) and (orientation: landscape) {}
/*如果使用者之視窗寬度>=1024px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 1024px) {
	#goTop2{
		display: none;
	}
	/*======================================== Wrap 最外框 */
	/*======================================== Header */
	.Header {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		padding: 1.375em 0 1em;/*22/16 0 16/16*/
	}
	.Header > .Inner {
		max-width: 1000px;
		height: auto;
		padding: 0;
		margin: 0 auto;
	}
	.Header > .Inner:after {
		content: "";
		display: block;
		clear: both;
		line-height: 0;
		height: 0;
		visibility: hidden;
	}
	/*======================================== Content */
	.Content {
		padding: 0 0;
	}
	.Section {
		margin: 0;
	}
	.Section > .Inner {
		max-width: 1140px;
		margin: 0 auto;
	}
	.Section > .Inner > h1 {
		font-size: 2.5em;/*40/16*/
		margin: 40px 100px 10px;
	}

	/*SectionBanner */
	.SectionBanner {
		background: url("https://event.cdn-eztravel.com.tw/events/newyear-promotion/banner_tb.png?t=20180926") no-repeat center center;
		background-size: cover;
		width: 100%;
		height: 550px;
	}
	.SectionBanner:after {
		padding-top: 34.479167%;
	}
	.SectionBanner .Info {		
	}
	/*SectionInfo*/
	#clickDiscounts{
		margin-left: 36%;
	}
	#appClickDiscounts{
		margin-left: 36%;
	}
	.SectionTab > .Inner{
		padding: 46px 0 50px;
	}
	.SectionTab > .Inner > .row > .SummaryTitle img{
	}
	.SectionTab >.Inner > .row > .col-md-6 p{
		margin: 0 77px;
	}
	.SectionTab >.Inner > .row > .col-md-6 a .BtnCode{
		margin: 16px 140px;
	}
	.SectionTab >.Inner > .Tab{
		width: 70%;
		margin: 0 auto;
	}
	.SectionTab >.Inner > .Tab > ul > a li{
		padding: 5px;
		font-size: 24px;
	}
	.SectionTab > .Inner > .SummaryTitle{
	}
	.row > .col-md-1-5{
		width: 20%;
		float: left;
		margin:22px 0;
	}
	.row > .col-md-1-4 {
	    width: 33%;
	    float: left;
    }

	/*SectionHotels*/
	.SectionCountry{
	}
	.SectionCountry > .Inner{
		margin:0 auto;
		padding: 10px 16px;
	}
	.row > .col-md-1-5 a > .Info{
		height: 150px;
	}
	.List {
		display: inline-block;
		max-width: 1200px;
		padding: 0 5px;
		margin: -34px 0;
	}
	.List > .Hotel {
		float: left;
		max-width: 322px;
		background: #fff;
		margin: 10px 8px 40px;
	}
	.List > .Hotel a > .Info{
		padding: 24px;
	}
	.List > .Hotel a > .Info h2{
		font-size: 25px;
		text-align: center;
		color: #ff6d70;
	}
	.List > .Hotel a > .Info > h2 .SmallEng{
		font-size: 15px;
		color: #555;
	}
	.List > .Hotel a > .Info > .Features{
		height: 88px;
	}
	.List > .Hotel a > .Info > .OriginalPrice{
	}
	.List > .Hotel a > .Info > .Des{
		font-size: 16px;	
	}
	.List > .Hotel a > .Info > .Price{
		margin: 0 0 15px;
		font-size: 30px;
	}
	.BtnPink{
		padding: 10px 34px;
	}
	/*SectionSpots*/
	.SectionSpots{
	    background-color: #fff;
	}
	.SectionSpots > .Inner > div{
		margin: -50px 60px;
		max-width: 1024px;
	}
	.SectionSpots > .Inner > div > .SummaryTitle{
		margin: 68px 0 10px;
	}
	.SectionSpots > .Inner > .Note > .Item ul li{
		line-height: 30px;
	}
	/*SectionVote*/
	.SectionVote > .Inner > a .BtnVote{
		margin: 50px 380px 100px;
	}
	/*======================================== Footer */
	.Footer {
		height: 2.375em;/*38/16*/
	}
	.Footer > .Inner {
		padding: 0.5625em 0;/*9/16 0*/
	}
	.Footer > .Inner > .Copyright {
		font-size: 1em;/*16/16*/
	}
}
/*如果使用者之視窗寬度>=1280px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 1280px) {
	/*======================================== Content */
	.SectionBanner {
		background: url("https://event.cdn-eztravel.com.tw/events/newyear-promotion/banner_pc.png?t=20180926") no-repeat center center;
		background-size: cover;
		width: 100%;
		height: 520px;
	}
	.col-lg-1-5 {
	    width: 20%;
	    float: left;
    }
    .row > .col-md-1-5 a > .ImgBox > .Tag{
    	font-size: 17px;
    	padding: 8px 36px;
    }
    .col-lg-1-4 {
	    width: 33%;
	    float: left;
    }

}
/*如果使用者之視窗寬度>=1600px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 1600px) {
	.SectionInfo > img{
		height: 900px;
		margin: 0 0;
	}
	/*======================================== Content */
}/*如果使用者之視窗寬度>=1920px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 1920px) {
	.SectionInfo > img{
		height: 420px;
		padding: 0 0;
	}
}