/* 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: #000; 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;}

img{border:0;}
h1,h2,h3{display: none;}

.wrapper{font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;background: #000000;}
.container1{width: 100%;position: relative;height:765px;}
.main-title{
    position: absolute;
    z-index: 115;
    width: 807px;
    padding-left: 50%;
    margin: 0 0 0 -403px;
    top: 20%;
}



.sticky{top: 30px;}
.scrollto{padding-top: 80px;margin-top: -80px;overflow: hidden;}
.main{max-width: 960px;margin: 0 auto;}
/*大圖輪播*/
.pic{position: absolute;z-index: 1;left: 0;top:0px;width:100%;min-height:765px;}
/*==========================Main Slider CSS============================*/
.pic #demo-1 {
			position: relative; /* can either be relative, absolute or fixed. If position is not set (i.e. static), it would be set to "relative" by script */
			overflow: hidden; /* to bound the empty top space created by inner element's top margin */
			width: 100%;
			min-height: 765px;
			background-color: #999;
			background:url("img/p1.jpg")\9;
}
/*選單*/
.block_menu{text-align:center;z-index: 990;width: 100%;height: 55px; background: url("img/menu-bg.jpg") center;}
.block_menu ul{max-width:550px;height: 55px; background: url("img/menu.png") center;margin: 0 auto;overflow: hidden;display: flex;flex-direction:row;flex-wrap: nowrap;}
.block_menu ul li.m1{display: block; width: 117px;height: 55px;}
.block_menu ul li.m1 a{display: block;width: 117px;height: 55px;}
.block_menu ul li.m1 a:hover,.block_menu li.m1 a.active{background: url("img/menu-h.png");}
.block_menu ul li.m2{display: block; width: 116px;height: 55px;}
.block_menu ul li.m2 a{display: block;width: 116px;height: 55px;}
.block_menu ul li.m2 a:hover,.block_menu li.m2 a.active{background: url("img/menu-h.png");background-position: -117px 0;}
.block_menu ul li.m3{display: block; width: 116px;height: 55px;}
.block_menu ul li.m3 a{display: block;width: 116px;height: 55px;}
.block_menu ul li.m3 a:hover,.block_menu li.m3 a.active{background: url("img/menu-h.png");background-position: -233px 0;}
.block_menu ul li.m4{display: block; width: 116px;height: 55px;}
.block_menu ul li.m4 a{display: block;width: 116px;height: 55px;}
.block_menu ul li.m4 a:hover,.block_menu li.m4 a.active{background: url("img/menu-h.png");background-position: -349px 0;}
.block_menu ul li.m5{display: block; width: 87px;height: 55px;}
.block_menu ul li.m5 a{display: block;width: 87px;height: 55px;}
.block_menu ul li.m5 a:hover,.block_menu li.m5 a.active{background: url("img/menu-h.png");background-position: -465px 0;}



.main_content{background: linear-gradient(to bottom, #000000, #424d4b);padding-top: 20px;}
.bg{background-image: url("img/bg.png") ;}
.tour-content{max-width: 960px;margin: 0 auto;padding-top: 50px;padding-bottom:200px;}
.title{text-align: center;margin-bottom: 20px;margin-top: 50px;}
.box-outer{display: flex;flex-direction: row;flex-wrap:wrap;justify-content: flex-start;}
.box-outer.single{justify-content: center;}
.box{width: 31%;height: auto;margin-bottom: 40px;margin: 1% ; position: relative;padding: 0px;}
.box a:hover{opacity: 0.8;}
.note{width: 100%; position: absolute;z-index: 111;bottom: 2px; background:hsla(0,100%,0%,0.7);color: #FFFFFF;text-align: center;padding: 10px;box-sizing: border-box;line-height: 22px;letter-spacing: 1px;}
.tour-title{font-size: 20px;color: #FDF1BC; font-weight: bold;margin-bottom: 5px;}
.tour-price{margin-top: 5px;color: #FFD600;}
.tour-price strong{font-size: 20px; margin-right: 5px;}
.city{width: 50px;height: 30px; background: #41B16D; position: absolute;z-index: 111;top: 0; color: #FFFFFF;text-align: center;border-radius: 0 0 50% 0;line-height: 30px;}

.notic{color: #FFFFFF; font-size: 15px;letter-spacing: 2px;text-align: center;line-height: 24px;margin-top: 20px;padding-bottom: 10px;}

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

@media screen and (min-width:769px)  {
.header-s{display: none;}
	}	

@media screen and (max-width:768px)  {		
.block_menu{display: none;}		
.scrollto{padding-top: 10px;margin-top: -10px;overflow: hidden;}
.box{width: 48%;height: auto;margin: 1% ;}
.container1{display: none;}
.main_content{padding-top: 0px;}	
	}

@media screen and (max-width:500px)  {
.box{width: 90%;height: auto;margin: 5% ;}

	}