/* 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:33.33%;}
.col-4{width:25%;}
.col-5{width:20%;}

body {
	margin: 0;
	padding: 0;
	font-size:13px;
	color:#000;
	background: url(images/bg.jpg) center repeat;
}
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.png) center 0 no-repeat;
	overflow: hidden;
}
.header {width: 100%;}
.top_content {
    width: 960px;
	margin:0 auto;
	background: url(images/top.png) center 0 no-repeat;		
	height: 368px;	
}
.top_content .mobile {display: none;}
h1,h2,h3 { display: none;}


#main {
	position: relative;
	overflow:hidden;
	margin:0 auto;
	width:960px;
    background:url(images/main-bg2.png) center top repeat-y;
}

#main2 {
	position: relative;
	overflow:hidden;
	margin:0 auto;
	width:960px;
    background:url(images/leftcolum-bg.png) left top no-repeat;
	min-height:1125px;
}

#leftcolum {
	width: 645px;
	float: left;
	display: block;
	background:url(images/leftcolum-bg.png) center top no-repeat;
}

#rightcolum {
	width: 315px;
	float: right;
}

/*-------- leftside -------------*/

#box01 { position:absolute; top:0; left:200px;}
#box01 li {  text-indent:-3000px; width:213px; height:187px;  }
#box01 li a { display: block; width: 100%; height: 100%;}

#box01 li#s1 {background: url(images/story1.png) left top no-repeat;}
#box01 li#s1 a:hover { background: url(images/story1.png) -213px top no-repeat;}

#box02 { position:absolute; top:15px; left:430px;}
#box02 li {  text-indent:-3000px; width:194px; height:178px;  }
#box02 li a { display: block; width: 100%; height: 100%;}

#box02 li#s2 {background: url(images/story2.png) left top no-repeat;}
#box02 li#s2 a:hover { background: url(images/story2.png) -194px top no-repeat;}

#box03 { position:absolute; top:200px; left:80px;}
#box03 li {  text-indent:-3000px; width:222px; height:181px;  }
#box03 li a { display: block; width: 100%; height: 100%;}

#box03 li#s3 {background: url(images/story3.png) left top no-repeat;}
#box03 li#s3 a:hover { background: url(images/story3.png) -224px top no-repeat;}

#box04 { position:absolute; top:315px; left:435px;}
#box04 li {  text-indent:-3000px; width:187px; height:197px;  }
#box04 li a { display: block; width: 100%; height: 100%;}

#box04 li#s4 {background: url(images/story4.png) left top no-repeat;}
#box04 li#s4 a:hover { background: url(images/story4.png) -187px top no-repeat;}

#box05 { position:absolute; top:400px; left:50px;}
#box05 li {  text-indent:-3000px; width:198px; height:185px;  }
#box05 li a { display: block; width: 100%; height: 100%;}

#box05 li#s5 {background: url(images/story5.png) left top no-repeat;}
#box05 li#s5 a:hover { background: url(images/story5.png) -203px top no-repeat;}

#box06 { position:absolute; top:620px; left:85px;}
#box06 li {  text-indent:-3000px; width:261px; height:193px;  }
#box06 li a { display: block; width: 100%; height: 100%;}

#box06 li#s6 {background: url(images/story6.png) left top no-repeat;}
#box06 li#s6 a:hover { background: url(images/story6.png) -265px top no-repeat;}

#box07 { position:absolute; top:575px; left:440px;}
#box07 li {  text-indent:-3000px; width:167px; height:182px;  }
#box07 li a { display: block; width: 100%; height: 100%;}

#box07 li#s7 {background: url(images/story7.png) left top no-repeat;}
#box07 li#s7 a:hover { background: url(images/story7.png) -169px top no-repeat;}

#box08 { position:absolute; top:860px; left:115px;}
#box08 li {  text-indent:-3000px; width:247px; height:187px;  }
#box08 li a { display: block; width: 100%; height: 100%;}

#box08 li#s8 {background: url(images/story8.png) left top no-repeat;}
#box08 li#s8 a:hover { background: url(images/story8.png) -247px top no-repeat;}

#box09 { position:absolute; top:895px; left:400px;}
#box09 li {  text-indent:-3000px; width:210px; height:184px;  }
#box09 li a { display: block; width: 100%; height: 100%;}

#box09 li#s9 {background: url(images/story9.png) left top no-repeat;}
#box09 li#s9 a:hover { background: url(images/story9.png) -210px top no-repeat;}


/*-----------rightside-----------*/

p.title {
	background: url(images/tour-title2.jpg) left top no-repeat;
	width:275px;
	height:71px;
	position: relative;
}
p.title a {
	width: 165px;
	height: 35px;
	display: block;
	text-indent: -3000px;
	position:absolute;
	right:0;
	bottom:0;
}
/*------tabs--------------*/


	.abgne_tab {
		clear: left;
		width: 285px;
		margin: 10px 0;
	}
	ul.tabs {
		width: 100%;
		height: 57px;
	}
	ul.tabs li {
		float: left;
		width:86px;
		height: 57px;
		overflow: hidden;
		position: relative;
		text-indent:-5000px;
	}
	ul.tabs li a {
		display: block;
		width:100%;
		height:100%;
	}
	ul.tabs li#b1 { background:url(images/btn01.jpg) -86px 0 no-repeat; }
	ul.tabs li#b2 { background:url(images/btn02.jpg) -86px 0 no-repeat; }
	ul.tabs li#b3 { background:url(images/btn03.jpg) -86px 0 no-repeat; }
	ul.tabs li#b4 { background:url(images/btn04.jpg) -86px 0 no-repeat; }
	ul.tabs li#b5 { background:url(images/btn05.jpg) -86px 0 no-repeat; }

	ul.tabs li#b1.active , ul.tabs li#b1 a:hover { background:url(images/btn01.jpg) 0 0 no-repeat;}
	ul.tabs li#b2.active , ul.tabs li#b2 a:hover { background:url(images/btn02.jpg) 0 0 no-repeat; }
	ul.tabs li#b3.active , ul.tabs li#b3 a:hover { background:url(images/btn03.jpg) 0 0 no-repeat; }
	ul.tabs li#b4.active , ul.tabs li#b4 a:hover { background:url(images/btn04.jpg) 0 0 no-repeat; }
	ul.tabs li#b5.active , ul.tabs li#b5 a:hover { background:url(images/btn05.jpg) 0 0 no-repeat; }

	div.tab_container {
		clear: left;
		width: 100%;
		background:url(images/tour-bg.jpg) 0 0 repeat-y;	
	}
	div.tab_container .tab_content {
		padding: 10px;margin-bottom: 30px;
	}

	
	/*---------*/ 
h5{
	font:15px bold Arial, Helvetica, sans-serif; color:#060; 
	margin:20px 0px 0px 0px ; font-weight:bold;
	/*border-bottom:1px solid #ccc; */
}
#tour-list li { line-height:1.8em; _line-height:0.8em; }
#tour-list li em {
	font:13px bold Arial, Helvetica, sans-serif;
	color:#960;
}
#tour-list li span {
	display: block;
}
#tour-list li a { display:block; font:13px bold Arial, Helvetica, sans-serif; color:#333; text-decoration:none;line-height:1.6em;_line-height:0.8em; padding-bottom:2px; border-bottom:1px #999 dashed;}
#tour-list li a:hover { color:#09C; text-decoration:none;}

p.ad1, p.ad3 {
	width:258px;
	height:100px;
	text-indent:-3000px;
}
p.ad1 {
	background: url(images/tour01.jpg) left top no-repeat;
}
p.ad3 {
	background: url(images/tour03.jpg) left top no-repeat;
}
p.ad1 a, p.ad3 a { display:block; width:100%; height:100%;}

p.space {
	background: url(images/spacer.jpg) left top no-repeat;
	width:258px;
	height:32px;
	text-indent:-3000px;
}

#ad2-box { width:258px; }


p.ad2 {
	background: url(images/tour02.jpg) left top no-repeat;
	width:258px;
	height:129px;
	text-indent:-3000px;	
}

p.ad2-content{ font-size:12px; line-height:1.8em; padding:5px; }

p.ad2-content span { color:#990099;}

p.detail { text-align:right;}
p.detail a { font-size:13px; color:#FFF; background:#550248; padding:2px 3px; text-decoration:none; }
p.detail a:hover { background:#CC9999; }



@media screen and (max-width: 900px) {
    * { box-sizing: border-box; }
    html,body { width: 100%; min-height: 100%; }	
	.container {background: inherit;}
    .top_content {  width: 100%;  height: auto; background: inherit; padding: 0}
    .top_content .mobile {display: block;width: 100%;height: auto;position: inherit;margin: 0 auto;}	
	#main {width:100%;background:#e1d1b3;}
	#main2 {width:100%;background: inherit;min-height:600px;}	
	#leftcolum {display: none;}
	#rightcolum {width: 100%;float: none;}
	.abgne_tab {clear: none;width: 95%;margin: 0 auto;}
	div.tab_container {clear: none;	width: 100%;background:#eee3cf;margin-top: 15px;}
	p.title {margin-left: 20px;}
	h5{	font:18px bold Arial, Helvetica, sans-serif; color:#060;}
	#tour-list li a { display:block; font:15px bold Arial, Helvetica, sans-serif; color:#333; text-decoration:none;line-height:2em; padding-bottom:3px;}
	#tour-list li em {font:15px bold Arial, Helvetica, sans-serif;}
	#tour-list li span {
	display: inline;
}

}


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

@media (max-width: 680px) {
    * { box-sizing: border-box; }
    html, body {width: 100%; min-height: 100%; }
	.left,.right{ float:none;}		
    #tour-list li em {display:block;}
	#tour-list li span {
	display: block;
}
	
}