﻿@charset "utf-8";
/* CSS Document */
/*==================共用==================*/
*{ 
	margin:0;
	padding:0;	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
}
	
html,body{
	width:100%;
	height:100%;
	font-family:Arial, Helvetica, "微軟正黑體","黑體", sans-serif;
	-webkit-text-size-adjust:none;
	background-color:#ef5491;
}

/*==================電腦版型==================*/
#wrap{
	width:100%;
	height:auto;
	overflow:hidden;
}
/* 區塊按鈕 */
	
#TOP-MENU{
	display:none;
}

/*主圖*/
.header{ 
    margin-top: 3em;
    width: 100%;
    height: auto;
		}
.header h1{
	display: block;
	width:100%;
	height:0;
	padding-bottom:40.36%;
	background-image: url(../images/ad_big.jpg);
	background-size:cover;
	text-indent:-9999px;	
	 }
.header h2{
	text-indent: -9999px;
}		

/*選單 */
#menu{
	width:98%;
	height: auto;
	margin:0 auto;

} 
#menu ul {
	list-style:none;
	width:100%;
	margin:0 auto;
	}
#menu li {
    float: left;
	width:10%;
	background-color: #ffe04a;
}
#menu li a {
    display: block;

    border-radius: .1em .3em .1em .3em;
    border-right: .1em #b1b54b double;
    color: #665512;
    font-weight: 500;
    font-size: 1.1em;
    text-align: center;
    text-shadow: 0.1em 0.1em #ececea;
    padding: 1em;
    text-decoration: none;


}
li a:hover:not(.active) {
	background-color: #FF9900;
}
.active {
    background-color: #fefff9;
}

/*內容*/
.con{
	clear: both;
	overflow: auto;
    width: 100%;
}

.con .compaign{
	margin: 0 auto;
    width: 75%;
    background-color: #FFFFFF;
    border: .6em solid #ffe04a;
    border-radius: .6em;
	margin-top:2em;
	}

.con .compaign h1{
    letter-spacing: 0.4em;
    font-size: 1.4em;
    line-height: 1.4em;
    color: #393b41;
	background-color: #ffe04a;
    font-weight: bold;
    padding: .8em 0 .4em .8em;
	border-bottom: .2em solid #c8c6be;
	}
.con .compaign h2{
	font-size: 1em;
	line-height: .6em; 
    color: #4b4b4b;
    font-weight: bold;
    padding: 1em 1em .8em 1em;
	}
.con .compaign .box{
	width: 100%;
	height: auto;
}
.con .compaign .box1{
	display:inline-block;
	width:30.3%;
	height:280px;
	background:url(../images/box1.jpg) no-repeat center center ;
	text-indent:-9999px;
	}	
.con .compaign .box2 {
	display:inline-block;
	width:30.3%;
	height:280px;
	background:url(../images/box2.jpg) no-repeat center center ;
	text-indent:-9999px;
	}

.con .compaign .box3 {
	display:inline-block;
	width:30.3%;
	height:280px;
	background:url(../images/box3.jpg) no-repeat center center ;
	text-indent:-9999px;
	}

/*行程開始*/
.container{
	clear: both;
	width: 100%;
	height:auto;
	overflow:hidden;
}
.container .product{
    margin: 0 auto;
    width: 75%;
    height: auto;
    background-color: #FFFFFF;
    border: .5em solid #34a7e6;
    border-radius: .8em;
	margin-top:2em;

}
.container .product .tittle{
	width: 100%;
	height: auto;
}
.container .product .tittle h1{
    letter-spacing: 0.4em;
    font-size: 1.4em;
    line-height: 1.4em;
    color: #ffffff;
    background-color: #5cbdf2;
    font-weight: bold;
    padding: .8em 0 .4em .8em;
    border-bottom: .1em solid #42a7dc;
}
.container .product .sale{
	display: block;
	width: 100%;
	height: auto;
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	color: #ff4040;
	margin: 0px auto 20px auto;
}
.container .product .box{
	width: 100%;
	height: auto;
	margin-bottom: 30px;
	overflow: hidden;
}
.container .product .box h1{
	display: block;
    width: 100%;
    height: auto;
    line-height: 1.4em;
    font-size: 1.2em;
    font-weight: bold;
    color: #e0d7d7;
    background-color: #34a7e6;
}
.container .product .box h1 b{
	display: inline-block;
	width: 40px;
	height: 100%;
	text-indent: -9999px;
	background: url(../images/h1_icon.png) no-repeat center;
}
.container .product .box .boxin{
	width: 100%;
	height: auto;
	padding: 0px 2% 5px 2%;
}
.container .product h3{
	clear: both;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	color: #669933;
	margin-top: 30px;
}
.container .product h4{
	font-size: 20px;
	font-weight: bold;
	color: #51565d;
	margin-top: 20px;
}
.container .product p{
	text-align: justify;
	font-size: 18px;
	color: #51565d;
	margin-top: 10px;
}
.container .product p.step{
	display: inline-block;
	width: 92%;
	height: auto;
}
.container .product .step_icon{
	display: inline-block;
	width: 7%;
	height: auto;
	font-size: 12px;
	text-align: center;
	color: white;
	background-color: #51565d;
	padding: 4px 0px;
	margin-right: 1%;
	border-radius: 10px;
}
.container .product ol.number{
	width: 100%;
	height: auto;
	margin: 0px auto;
	list-style: decimal inside;
	text-align: justify;
	text-indent: -18px;
	font-size: 18px;
	line-height: 1.5em;
	color: #51565d;
	padding: 5px 0px 0px 18px;
}
.container .product p .sp01{font-size: 21px; color: #c44d22;}

/* 內容─團 */
.container .product .goods{
    width: 100%;
    height: auto;
    border-bottom: 2px dotted #6f4e60;
    padding: 20px 0px 10px 0px;
    overflow: hidden;
    clear: both;
    text-align: left;
}

.container .product .goods > a{
    display: block;
    font-size: 21px;
    letter-spacing: 1px;
    color: #635d5f;
    text-decoration: none;
}
.container .product .goods > a:hover{background-color: #fff7fb;}
.container .product .goods .price{
    min-width: 145px;
    float: right;
    text-align: right;
    font-size: 32px;
    font-weight: bold;
    line-height: 32px;
    color: #ff3305;
}
.container .product .goods .price:before{
	content: "$";
	font-size: 14px;
	font-weight: normal;
}
.container .product .goods .price:after{
	content: "元起";
	font-size: 14px;
	font-weight: normal;
}
.container .product .goods .date{
    display: block;
    float: left;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    color: #dbe778;
    margin-top: 8px;
}
.container .product .goods .date span.start{
	display: inline-block;
	font-size: 12px;
    color: #1a1717;
    background-color: #f7c457;
	padding: 0px 10px;
	border-radius: 10px;
}
.container .product .goods .date a{
	color: #003366;
	margin-left: 5px;
}
.container .product .goods .date a:hover{text-decoration: underline;}

/* gotop */
#gotop {
    display: none;
    position:fixed;
    bottom: 50px;
	right:50px;
    text-decoration: none;
    height:50px;
    width:50px;
    z-index: 1001;
    display: block;
    background-image: url(../images/gotop.png);
    background-repeat: no-repeat;
    text-indent: -9999px;
    cursor: pointer;
}
#gotop:hover {
    background-position: 0px -50px;
}
/*======================================================手機版型====================================*/
@media screen and (max-width :743px){
*{
	box-sizing: border-box;
	}

#gotop{
	right:10px;
}
#wrap{
	min-width:320px;
}
/* 區塊按鈕 */
	
#TOP-MENU{
	display:block;
	width:60px;
	height:40px;
	background-image:url(../images/btn.jpg);
	position: fixed;
	right:15px;
	top:50px;
	text-indent:-9999px;
	z-index:300;
	cursor:pointer;
}

/*主圖*/
.header{ 
		width:100%;
		height:auto;
		}
.header h1{
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 64.81%;
    background-image: url(../images/head_sp.jpg);
    background-size: cover;
    text-indent: -9999px;
    margin-top: 40px;
	 }
.header h2{
	text-indent: -9999px;
}		

/*選單 */
#menu{
	display:none;
	width:100%;
	height:100%;
	position:fixed;
	z-index:302;
	background-color:#ef5491; 
	top:0;

} 
#menu ul {
	width:100%;
	height: auto;
	margin-top:50px;/*表頭上方*/	
	}
#menu li {
    float: none;
    width: 98%;
    margin: 0 auto;
}
#menu li a {
    display: block;
    background-color: #ffe04a;
    border-radius: .1em .3em .1em .3em;
    border-right: .1em #b1b54b double;
    border-bottom: .1em #b1b54b double;
    color: #665512;
    font-weight: 500;
    font-size: .98em;
    text-align: center;
    text-shadow: 0.1em 0.1em #ececea;
    text-decoration: none;
}
li a:hover:not(.active) {
	background-color: #FF9900;
}
.active {
	background-color: #FF6600;
}

/*內容*/
.con{
	width:100%;
	height:auto;
	overflow:hidden;
}

.con .compaign{
    width: 100%;
	height:auto;
	}

.con .compaign h1{
    font-size: 1.4em;

	}
.con .compaign h2{
	font-size: 1.2em;
    line-height: 1.2em;
	}
.con .compaign .box{
	width: 100%;
	height: auto;
}
.con .compaign .box1{
	float:none;
	width:100%;
	height:280px;
	background:url(../images/box1.jpg) no-repeat center center ;
	text-indent:-9999px;
	background-size: contain;
	}	
.con .compaign .box2 {
	float:none;
	width:100%;
	height:280px;
	background:url(../images/box2.jpg) no-repeat center center ;
	text-indent:-9999px;
	background-size: contain;
	}

.con .compaign .box3 {
	float:none;
	width:100%;
	height:280px;
	background:url(../images/box3.jpg) no-repeat center center ;
	text-indent:-9999px;
	background-size: contain;
	}

/*行程開始*/
.container{
	clear:both
	width: 100%;
	height:auto;
}
.container .product{
    width: 100%;
    height: auto;
}
.container .product .tittle{
	width: 100%;
	height: auto;
}

.container .product .sale{
	width: 100%;
	height: auto;
}
.container .product .box{
	width: 100%;
	height: auto;
	margin-bottom: 30px;
	overflow: hidden;
}
.container .product .box h1{
	display: block;
    width: 100%;
    height: auto;
    line-height: 1.4em;
    font-size: 1.2em;
    font-weight: bold;
    color: #e0d7d7;
    background-color: #34a7e6;
}

/* gotop */
#gotop {
    display: none;
    position:fixed;
    bottom: 50px;
	right:50px;
    text-decoration: none;
    height:50px;
    width:50px;
    z-index: 1001;
    display: block;
    background-image: url(../images/gotop.png);
    background-repeat: no-repeat;
    text-indent: -9999px;
    cursor: pointer;
}
#gotop:hover {
    background-position: 0px -50px;
}

}
