/* CSS Document */
/************************************************************************************
RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {line-height: 1; -webkit-text-size-adjust: none;}
ol, ul { list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {
   /* border-collapse: collapse;*/
    border-spacing: 0;
}
a img {border: none;}
.clean { clear:both;}
a {color: #292929; text-decoration: none; blr:expression(this.onFocus=this.blur()); outline: none; /* for Firefox */hlbr:expression(this.onFocus=this.blur()); /* for IE */}
a:hover {text-decoration:none;}
a:focus{ -moz-outline-style: none;}

/*.adwrap {
    width: 900px;
    margin: 0 auto;
    margin-bottom: 20px;
	
}*/
.adbox{position: relative; padding: 4px;}
.adbox a{display:block;}
.adbox a:hover{opacity: 0.8;}

.b-box{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.col-1{width:100%;}
.col-2{width:50%;}
.col-3{width:32.33%;}
.col-4{width:25%;}
.col-5{width:20%;}

body {
	margin: 0;
	padding: 0;
	font-size:13px;
	background-color: #274593;
	color:#000;		
}
h1,h2,h3 { display: none;}
.left{ float:left;display:inline-block;width: 100%;}
.right{ float:right;}

/*------------------------------- pc ----------------------------------*/
.container {
    width: 100%;
    height: 100%;
	font-family:Arial,微軟正黑體;
	background: url(images/con_bg.jpg) center 0 no-repeat;
	overflow: hidden;
}
.header {
    width: 100%;
}
.top_content {
    width: 100%;
	margin:0 auto;	
	position:relative;	
	height: 675px;	
}
.top_content .mobile {display: none;}
.top_content .main-title {display: block; margin:0 auto; width: 800px;height: 530px;background: url(images/header.png) 0 0 no-repeat;}

h1,h2,h3 { display: none;}

/***按鈕***/
#nav {
	width: 100%;
	margin: 0 auto;
	list-style: none;
	text-align: center;
	display: block;
	position:absolute;	
	background-color: #93a2c9;
	font-family:Arial,微軟正黑體;
}
#nav ul{	
	margin: 0 auto;	
	text-align: center;
}
#nav li {
	max-width:960px;
	display: inline-block;
	margin: 0;	
}
#nav a {color: #274593;display:block;margin: 4px;padding: 3px 0;}
#nav a p{
	font-size:20px;	
	padding: 0 5px 0 5px;
	margin: 2px 8px 2px;
	font-weight: bold;
}
#nav a:hover {color: #fff;background-color: #274593;border-radius: 10px;padding: 3px 0;}
#nav li.current a{color: #fff;background-color: #274593;border-radius: 10px;padding: 3px 0;}
#menu {width: 100%;margin: 0 auto;background-color: #84329b;}
#menu ul{max-width:615px;height: 65px;margin: 0 auto;}
#menu li {display: block; float: left;margin-right: 25px;padding: 0 3px;}
#menu li a {width: 100%;display: block;}
#menu li a.nav01 {color: #a970b9;line-height: 44px;font-size:24px;font-weight: bold;border-radius: 25px;padding: 0px 5px;margin: 8px 0;border: #a970b9 2px solid;}
#menu li a:hover.nav01,#menu li.on a.nav01{color: #84329b;background-color: #fff;border-radius: 25px;padding: 0px 5px;margin: 8px 0;border: #fff 2px solid;}
.sml-pic{font-size: 20px;}
.ml-pic{font-size: 18px;}


#togglenav {
    display: none;
    z-index: 9999;
    position: fixed;
    right: 0;
    overflow: hidden;
    line-height: 35px;
    width: 100%;
    cursor: pointer;
}
.MainHeight{
		position:fixed !important;
		top:30px !important;
		z-index: 10 !important;
	}
.main { 
	width: 100%; 
	margin: 0 auto;		
	padding-top: 100px;
	padding-bottom: 100px;
}
.beach { 
	width: 100%; 
	margin: 0 auto;
	min-height: 925px;
	background:url(images/beach.png) no-repeat top center;
}
.bottom-bg { 
	width: 100%;
	height: 1228px;
	margin: 0 auto;
	background:url(images/m_bg.png) no-repeat bottom center;
}
.main h4{
	display:block;
	width:844px;
	height:60px;
	margin:0 auto;
	margin-top: 20px;
	margin-bottom: 50px;
	background: url(images/tit-bg.png) center top 0  no-repeat;
}

/***行程***/
.box-01{padding:140px 0 10px 0;margin-top: -60px;}
.box-02{padding:100px 0 10px 0;margin-top: -60px;}
.box-03{padding:140px 0 0px 0;margin-top: -60px;}
/*共同*/
.content{max-width: 960px;margin: 0 auto;}
.info_box{width:95%;margin: 0 auto;}
.info_box .title-tour{margin: 0 auto;padding: 15px 0;text-align: center;border-radius:20px;font-size: 29px;}

.r-yellow {background-color: #ffff00;border-radius: 10px;color: #000;}
.pink {color: #d40f7d;} 
.pink-line {border: 8px solid #d40f7d;} 
.pink-bg {background-color: #d40f7d;} 
.blue {color: #00a3e0;} 
.blue-line {border: 8px solid #00a3e0;} 
.blue-bg {background-color: #00a3e0;} 
.green {color: #009a44;} 
.green-line {border: 8px solid #009a44;} 
.green-bg {background-color: #009a44;}
.orange {color: #FC4C02;} 
.orange-line {border: 8px solid #FC4C02;} 
.orange-bg {background-color: #FC4C02;} 
.purple {color: #9352a6;} 
.purple-line {border: 8px solid #9352a6;} 
.purple-bg {background-color: #9352a6;} 
.wrap {overflow:hidden;background-color: #1a2f64;border-radius: 15px;padding: 30px 15px 15px;}


/***景點介紹***/
.point_wrap {overflow:hidden;margin-top: 10px;}
.point_box{display: block;overflow: hidden;padding: 10px 5px 0 14px;position:relative;}
.point{float: left; width: 31%;margin-left: 1%;margin-right: 1%;box-sizing:border-box;margin-bottom: 20px;}
.point .intro-pic{width: 100%;margin: 0 auto;overflow:hidden;}
.point .intro-pic img{transform:scale(1,1);transition: all 1s ease-out;}
.point .intro-pic img:hover{transform:scale(1.2,1.2);}
.point .name{line-height: 30px; font-size: 18px;text-align: center;color: #fff100; font-weight: bold;border-bottom: 1px solid #fff;padding-bottom: 3px;margin-bottom: 10px;}
.point .note{font-size: 14px;line-height: 20px;min-height: 90px;color: #fff;}
.point .note p{background:url(images/add.png) no-repeat top left;margin-top: 5px;}
.point .note span{color: #9db7f9;padding-left: 12px;}



.act {width: 85%;margin: 0 auto;padding-top: 5px;}
.act .pic {width: 100%;padding-bottom: 0px;}
.act img.thumb{ border-radius: 20px;}
.pic .mobile {display: none;}
.pic .web {display: block;}

/*---直式行程---*/
.product {width: 97%;margin: 0 auto;padding-top: 5px;}
.product .note{text-align:right;display:block; width:100%;margin-bottom: 5px;}
.product .note span{font: 20px "微軟正黑體";color: #fff;line-height: 30px;display: inline;border: 2px #fff solid;padding: 2px 5px;}
.product .pic {width: 100%;padding-bottom: 10px;}
.product img.thumb{ border-radius: 20px;}
.product li {display: block;border-bottom: #fff 1px dashed;margin-bottom: 10px;}
.product li a {display: block;padding:6px 5px;font: 15px "微軟正黑體";color: #fff;overflow:hidden;font-weight: bold;}
.product li a:hover { background-color:#274593;}
.product li p{display: block;}
.product li p em{color: #fff;letter-spacing: 1px;font: 13px "微軟正黑體";padding: 2px 4px;margin-left: 10px;font-weight: bold;}
.txt_l{width: auto;font-size:18px;color: #fff;line-height: 2;}
.txt_l span{font-size:15px;padding: 2px 5px;margin-right: 5px;}
.txt_r{width: auto;text-align:right;font-family:"微軟正黑體";color: #fff100;}
.txt_r span{ font-size:14px;}
.txt_r span strong{ font-size:22px;padding: 0 3px;}
.btn-more {text-align:right;display:block; width:100%; margin: 30px 0 0 0;}
.btn-more a {display: inline;font-size: 14px;color: #ffff00;border: solid 1px #ffff00;border-radius:10px;padding: 5px 10px;margin:20px 0 0px 5px;}
.btn-more a:hover {background: #ffff00;color: #000;}

.box-wrap .more-pic {font: 16px "微軟正黑體";border-radius: 4px;color: #1a2f64;border: 1px solid #cecece;background: #efefef;margin-left: 10px;width: 100px;}
.box-wrap.pic-open .more-pic:after {content: "關閉"}
.box-wrap.pic-close .more-pic:after {content: "看更多景點"}
.box {transition: opacity 1s, max-height 0.35s ease;overflow: hidden;}
.pic-close .box {max-height: 0px;}
.pic-open .box {min-height: 100px;}

.box-wrap1 .more-pic1 {font: 16px "微軟正黑體";border-radius: 4px;color: #1a2f64;border: 1px solid #cecece;background: #efefef;margin-left: 10px;width: 100px;}
.box-wrap1.pic-open1 .more-pic1:after {content: "關閉"}
.box-wrap1.pic-close1 .more-pic1:after {content: "看更多景點"}
.box1 {transition: opacity 1s, max-height 0.35s ease;overflow: hidden;}
.pic-close1 .box1 {max-height: 0px;}
.pic-open1 .box1 {min-height: 100px;}

.box-wrap2 .more-pic2 {font: 16px "微軟正黑體";border-radius: 4px;color: #1a2f64;border: 1px solid #cecece;background: #efefef;margin-left: 10px;width: 100px;}
.box-wrap2.pic-open2 .more-pic2:after {content: "關閉"}
.box-wrap2.pic-close2 .more-pic2:after {content: "看更多美食"}
.box2 {transition: opacity 1s, max-height 0.35s ease;overflow: hidden;}
.pic-close2 .box2 {max-height: 0px;}
.pic-open2 .box2 {min-height: 100px;}

:first-child.wow{ *visibility:visible ! important; visibility:visible\9 ! important;}

.remarks{max-width: 800px;margin: 20px auto 0 auto;padding: 10px; font-family:"微軟正黑體";font-size: 15px;line-height: 1.5em; color: #fff;text-align: center;border-top: #fff 1px solid;border-bottom: #fff 1px solid;}


@media only screen and (min-width: 769px) and (max-width:960px){	
    html,body { width: 100%; min-height: 100%; }	
    .main h4{width:100%;}	
    #menu li a.nav01 {font-size:22px;}		
}

/*------------------------------- 平板 ----------------------------------*/

@media screen and (max-width: 768px) {
    * { box-sizing: border-box; }
    html,body { width: 100%; min-height: 100%; }	
	.col-3{width:50%;}
    /***按鈕列***/
	.container {background: inherit;}	
    .top_content {  width: 100%;  height: auto; padding: 0;}	
    .top_content .mobile {display: block;width: 100%;height: auto;position: inherit;margin: 0 auto;}	
	.top_content .main-title{display: none;}
    #nav {display: none; }
	.menu{display: none; }
    #togglenav {display: block;z-index: 9999;position: fixed;right: 0;overflow: hidden;line-height: 35px;width: 100%;cursor: pointer;}	
	.main {padding-top: 0px;padding-bottom: 50px;}
	.bottom-bg { height: 0px;background:inherit;}
	.beach {min-height: 0px; background:inherit;}
	.main h4{width:100%;}	
	.box-01{padding:20px 0 10px 0;margin-top:0px;}
	.box-02{padding:20px 0 10px 0;margin-top:0px;}
	.box-03{padding:20px 0 10px 0;margin-top:0px;}
	.act {width: 94%;}

	
}
@media only screen and (min-width: 679px) and (max-width:758px){	
    html,body { width: 100%; min-height: 100%; }	
    .point .name{font-size: 15px;}	
}


/*------------------------------- 手機 ----------------------------------*/

@media (max-width: 680px) {
    * { box-sizing: border-box; }
    html, body {width: 100%; min-height: 100%; }
	.left,.right{ float:none;}	
	.box{width: 98%;}
    .wrap {border-radius: 10px;padding: 10px 7px;}
    .product {width: 100%;}
	.product .note{text-align:center;margin-bottom: 10px;}
	.act {width: 99%;padding-top: 0px;}
	.act .pic {padding-bottom: 0px;}
	.pic .mobile {display: block;padding: 10px}
	.pic .web {display: none;}
	.product li p em{line-height: 24px;display: block;font: 14px "微軟正黑體";padding: 1px 0px;margin-left: 0px;text-align: center;margin-top: 5px;}
	.txt_l{line-height: 1.5;}
	.txt_r{text-align:center;margin-top: 10px;}
	.point_wrap {margin-top: 0px;}
	.point_box{	padding: 10px}
    .point{float: none; width: 100%;margin-left: 0%;margin-right: 0%;margin-bottom: 20px;}	
	.point .note{min-height: 0px;}
}