@charset "utf-8";

html, body {
	height: 100%;

}
html{
	overflow-y:scroll;
}
body {
	font-family:"Heiti TC","微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
	font-size: 12px;
	color:#000000;
	background-color:#FFF;
}

.fix_width{
	position:relative;
	width:1000px;
	margin:0 auto;	
}
.highlight{
	color:#36781d;	
}
#container {
	position:relative;
	/*width: 1200px;*/
	overflow:hidden;
	min-height:100%;
	
	width:100%;
	min-width:1000px;
}
#header {	
	position:absolute;
	display: block;
	width:100%;
	z-index:1;
}
#header .bg_nav {
	
	position:absolute;
	display: block;
	background: url("../images/nav/nav.png") no-repeat center -0px;

	height:132px;
	width:100%;
	z-index:1;
	left:0px;
	top:0px;
}
#header .bg_nav.up {
	background-position:center -200px;
	
}
#header .bg_nav.over {
	height:100px;
}
#header .bg_nav.selected {
	height:100px;
}

#header .logo1{
	position:absolute;
	background: url("../images/common.png") no-repeat -1200px -50px;
	display:block;
	left:10px;
	top:10px;
	width:323px;
	height:50px;
}
#header .logo2{
	position:absolute;
	background: url("../images/common.png") no-repeat -1200px -150px;
	display:block;
	right:10px;
	top:15px;
	width:126px;
	height:31px;
}
#header .shotcut{
	position:absolute;
	right:0px;
	top:62px;
	background: url("../images/common.png") no-repeat -1100px -50px;
	width:83px;
	height:38px;
	z-index:3;
}
#header .shotcut .btn_landing{
	position:absolute;
	display:block;
	background: url("../images/common.png") no-repeat -1100px -100px;
	width:21px;
	height:22px;
	left:12px;
	top:3px;
}
#header .shotcut .btn_landing:hover{
	background-position:-1150px -100px;
}
#header .shotcut .btn_lang{
	float:right;
	margin-top: 5px;
	margin-right:6px;
	color:#FFFFFF
}
#header .content{
	position:relative;
	z-index:2;
	/*background: url("../images/common.png") no-repeat -50px -50px;*/
	
}


#main{
	position:relative;
	display:block;
	min-height:678px;
	top:62px;
	margin-bottom:124px;
	
}

#main .content{
	position:relative;
	/*margin-top:10px;*/
	display:block;
	/*overflow:hidden;*/
	max-height:9999px;
}



#main .content.index>.intro{
	padding:20px;
	font-size:14px;
	color:#333;
	max-height:9999px;
}
#main .content.index>.intro>h1{
	font-size:14px;
	font-weight:bold;
	line-height:16px;
	margin-bottom:15px;
}
#main .content.index>.intro>ul{
	padding-left:15px;
}
#main .content.index>.intro>ul>li{
	line-height:18px;
	margin-bottom:14px;
}
#main .content.index>.intro>ol{
	padding-left:20px;
}
#main .content.index>.intro>ol>li{
	line-height:18px;
	margin-bottom:14px;
}
#main .content.index>.intro>a{
	color:#C00;
	text-decoration:underline;
}
#main .content.index>.btn{
	text-align:right;	
	padding-right:20px;
}
#main .content.index>.btn>a.btn_agree{
	background: url("../images/common.png") no-repeat -1800px -100px;
	width:70px;
	height:26px;
	display:inline-block;
	margin-right:5px;
}
#main .content.index>.btn>a.btn_close{
	background: url("../images/common.png") no-repeat -1900px -100px;
	width:70px;
	height:26px;
	display:inline-block;
}
#main .content.index>.btn>a.btn_back{
	background: url("../images/common.png") no-repeat -1900px -150px;
	width:70px;
	height:26px;
	display:inline-block;
}



#main.bg_landing{
	background: url("../images/landing/kv.jpg") no-repeat top center;	
}
#main .content.landing>.body{
	position:relative;
	margin-top:60px;
	margin-left:390px;
	width:590px;
}
#main .content.landing>.body h1{
	font-size:40px;
	color:#666;
	margin-bottom:-5px;
}
#main .content.landing>.body h2{
	font-size:29px;
	color:#36781d;
}
#main .content.landing>.body h3{
	font-size:18px;
	color:#36781d;
	
}
#main .content.landing>.body .para{
	margin-top:15px;
	font-size:15px;
	line-height:24px;
	color:#666;
	width:545px;
}
#main .content.landing>.body ul{
	list-style:none;
	margin-top:0px;
}
#main .content.landing>.body ul>li{
	background: url("../images/common.png") no-repeat -1200px -400px;
	display:block;
	width:590px;
	height:33px;
	font-size:16px;
	color:#666;	
	padding-left:22px;
	padding-top:6px;
	margin-bottom:5px;
}





#main .content.landing>.body .intro{
	margin-top:20px;}
#main .content.landing>.body .intro>h3{
	line-height:110%;
}
#main .content.landing>.body .intro>a{
	display:inline-block;
	text-align:center;
	color:#666;
	line-height:140%;
	margin-right:10px;
	margin-top:10px;
	margin-bottom:20px;
}
#main .content.landing>.body .intro>a:hover{
	text-decoration:none;
}
#main .content.landing>.body .intro>a>img{
	border:solid 1px #999;
}






#main .content.landing>.body .btn_go{
	background: url("../images/common.png") no-repeat -1200px -200px;
	display:block;
	margin-top:25px;
	width:263px;
	height:52px;
}
#main .content.landing>.body .btn_go:hover{
	background-position: -1500px -200px;
	
}
#main .content.landing>.body .btn_jetso{
	background: url("../images/common.png") no-repeat -1200px -300px;
	display:inline-block;
	
	width:110px;
	height:32px;
	
	margin-top:5px;
	margin-right:20px;
}
#main .content.landing>.body .btn_apply{
	background: url("../images/common.png") no-repeat -1200px -350px;
	display:inline-block;
	
	width:110px;
	height:32px;
}
#main .content.landing>.remark{
	font-size:10px;
	color:#666;
	line-height:15px;
	margin-top:30px;
	padding-left:25px;
	padding-right:25px;
}
#main .content.landing>.btn_remark{
	float:right;
	background-color:	#f7f7f7;
	padding:8px;
	font-size:10px;
	line-height:14px;
	color:#333;
	text-decoration:none;
	margin-right:25px;
}
#main .content.landing>.btn_remark:hover{
	background-color:	#FFF;
}
#main .content.landing>.important_msg{
	padding:10px;
	margin-left:25px;
	margin-right:25px;
	margin-top:20px;
	height:130px;
	width:940px;
	border:solid 1px #7CA420;
}
#main .content.landing>.important_msg ol{
	padding-left:20px;
	margin-top:10px;
}
#main .content.landing>.important_msg ol>li{
	line-height:15px;
	margin-bottom:10px;
}

#main.bg_demo{
	background: url("../images/demo/kv.jpg") no-repeat top center;	
}
#main .content.demo>.body{
	position:relative;
	min-height:600px;
}
#main .content.demo>.body ul.intro{
	list-style:none;
	position:absolute;
	left:280px;
	top:55px;
	z-index:10;
}
#main .content.demo>.body ul.intro>li{
	position:absolute;
	width:440px;
	text-align:center;
	font-size:16px;
	color:#333;
}
#main .content.demo>.body ul.intro>li>h1{
	font-size:34px;
	color:#36781d;
}
#main .content.demo>.body ul.intro>li>.btn_demo{
	
	background: url("../images/common.png") no-repeat -300px -100px;
	
	display:inline-block;
	width:133px;
	height:56px;
	margin-top:12px;
	margin-left:4px;
}
	
#main .content.demo>.body ul.nav_point{
	list-style:none;
	position:absolute;
	width:1000px;
	left:0px;
	top:580px;
	text-align:center;
	z-index:20;
}
#main .content.demo>.body ul.nav_point>li{
	position:relative;
	background: url("../images/common.png") no-repeat;
	width:72px;
	height:73px;
	cursor:pointer;
	display:inline-block;
	zoom: 1;
	 *display:inline;
}
#main .content.demo>.body ul.nav_point>li.b0{
	background-position:-100px -800px;
}
#main .content.demo>.body ul.nav_point>li.b1{
	background-position:-172px -800px;
}
#main .content.demo>.body ul.nav_point>li.b2{
	background-position:-244px -800px;
}
#main .content.demo>.body ul.nav_point>li.b3{
	background-position:-316px -800px;
}
#main .content.demo>.body ul.nav_point>li.b4{
	background-position:-388px -800px;
}
#main .content.demo>.body ul.nav_point>li.b5{
	background-position:-460px -800px;
}
#main .content.demo>.body ul.nav_point>li.b0.selected{
	background-position:-100px -900px;
}
#main .content.demo>.body ul.nav_point>li.b1.selected{
	background-position:-172px -900px;
}
#main .content.demo>.body ul.nav_point>li.b2.selected{
	background-position:-244px -900px;
}
#main .content.demo>.body ul.nav_point>li.b3.selected{
	background-position:-316px -900px;
}
#main .content.demo>.body ul.nav_point>li.b4.selected{
	background-position:-388px -900px;
}
#main .content.demo>.body ul.nav_point>li.b5.selected{
	background-position:-460px -900px;
}

#main .content.demo>.body ul.nav_point>li>div.tips{
	position:absolute;
	bottom:65px;
	left:-87px !important;
	z-index:50;
	background: url("../images/common.png") no-repeat;
	height:52px;
	
}
#main .content.demo>.body ul.nav_point>li>div.tips.t0{
	background-position:-300px -200px;
	width:244px;
}
#main .content.demo>.body ul.nav_point>li>div.tips.t1{
	background-position:-300px -300px;
	width:244px;
}
#main .content.demo>.body ul.nav_point>li>div.tips.t2{
	background-position:-300px -400px;
	width:244px;
}
#main .content.demo>.body ul.nav_point>li>div.tips.t3{
	background-position:-300px -500px;
	width:244px;
}
#main .content.demo>.body ul.nav_point>li>div.tips.t4{
	background-position:-300px -600px;
	width:244px;
}
#main .content.demo>.body ul.nav_point>li>div.tips.t5{
	background-position:-300px -700px;
	width:244px;
}
#main .content.demo>.body ul.nav_arrow{
	list-style:none;
}
#main .content.demo>.body ul.nav_arrow>li{
	position:absolute;
	background: url("../images/common.png") no-repeat;
	width:60px;
	height:83px;
	cursor:pointer;
	top:80px;
}
#main .content.demo>.body ul.nav_arrow>li.prev{
	background-position:-100px -100px;
	left:213px;
}
#main .content.demo>.body ul.nav_arrow>li.next{
	background-position:-200px -100px;
	left:727px;
}
#main .content.demo>.body ul.pics{
	list-style:none;
	position:absolute;
	top:36px;
	
}
#main .content.demo>.body ul.pics>li{
	display:block;
	float:left;
	
}
#main .content.demo>.body ul.pics>li>img{
	max-width:none;
	
}


#main.bg_maze{
	background: url("../images/maze/kv.jpg") no-repeat top center;	
}
#main .content.maze>.body{
	position:relative;
	min-height:600px;
}
#main .content.maze>.body .intro{
	position:absolute;
	background: url("../images/common.png") no-repeat -1200px -500px;
	width:214px;
	height:161px;
	left:70px;
	top:56px;
}
#main .content.maze>.body ul.points{
	list-style:none;
}
#main .content.maze>.body ul.points>li{
	position:absolute;
	background: url("../images/common.png") no-repeat -1500px -500px;
	width:76px;
	height:76px;
	cursor:pointer;
	color:#999;
}
#main .content.maze>.body ul.points>li.ready{
	background-position:-1600px -500px;
	color:#666;
}
#main .content.maze>.body ul.points>li.ready:hover{
	background-position:-1700px -500px;
}
#main .content.maze>.body ul.points>li.p1{
	left:390px;
	top:263px;
}
#main .content.maze>.body ul.points>li.p2{
	left:765px;
	top:292px;
}
#main .content.maze>.body ul.points>li.p3{
	left:532px;
	top:350px;
}
#main .content.maze>.body ul.points>li.p4{
	left:245px;
	top:343px;
}
#main .content.maze>.body ul.points>li>span{
	position:absolute;
	text-align:center;
	display:block;
	width:100%;
	right:8px;	
}
#main .content.maze>.body ul.points>li>span.label{
	font-size:18px;
	top:-10px;
}
#main .content.maze>.body ul.points>li>span.more{
	font-size:14px;
	top:-20px;
}
#main .content.maze>.body ul.points>li>span.more>.arrow{
	background: url("../images/common.png") no-repeat -1500px -450px;
	width:6px;
	height:9px;
	display:inline-block;
	margin-left:4px;
}

#main .content.maze>.body ul.popups{
	list-style:none;
}
#main .content.maze>.body ul.popups>li{
	position:absolute;
	background: url("../images/common.png") no-repeat    ;
	pointer-events:none;
}

#main .content.maze>.body ul.popups>li.p1{
	background-position:-1200px -700px;
	left:294px;
	top:114px;
	width:593px;
	height:123px;
}
#main .content.maze>.body ul.popups>li.p2{
	background-position:-1200px -900px;
	left:292px;
	top:195px;
	width:633px;
	height:74px;
}
#main .content.maze>.body ul.popups>li.p3{
	background-position:-1200px -1000px;
	left:324px;
	top:186px;
	width:566px;
	height:140px;
}
#main .content.maze>.body ul.popups>li.p4{
	background-position:-1200px -1200px;
	left:195px;
	top:220px;
	width:482px;
	height:98px;
}
#main .content.maze>.body ul.details{
	list-style:none;
}
#main .content.maze>.body ul.details>li{
	position:absolute;
	left:0px;
	top:0px;
	cursor:pointer;
}

#main .content.maze>.body ul.path{
	list-style:none;
}
#main .content.maze>.body ul.path>li{
	position:absolute;
	background: url("../images/common.png") no-repeat;
	display:block;
}


#main .content.maze>.body ul.path>li.p1{
	background-position:-600px -900px;
	width:407px;
	height:55px;
	left:400px;
	top:297px;
}
#main .content.maze>.body ul.path>li.p2{
	background-position:-600px -1000px;
	width:438px;
	height:145px;
	left:400px;
	top:297px;
}
#main .content.maze>.body ul.path>li.p3{
	background-position:-600px -1200px;
	width:571px;
	height:171px;
	left:270px;
	top:297px;
}
#main .content.maze>.body ul.path>li.p4{
	background-position:-600px -1400px;
	width:865px;
	height:171px;
	left:-25px;
	top:297px;
}

#main .content.maze>.body div.ending{
	position:absolute;
	width:1200px;
	top:0px;
	left:-100px;
	/*padding-top:50px;*/
	text-align:center;
	height:678px;
	
}
#main .content.maze>.body div.ending>.bg{
	position:relative;
	width:1000px;
	height:678px;
	display:inline-block
}
#main .content.maze>.body div.ending>.bg>img{
	width:100%;
	height:100%;
	
}
#main .content.maze>.body .btn_apply{
	position:absolute;
	background: url("../images/common.png") no-repeat -1200px -450px;	
	width:213px;
	height:47px;
	left:394px;
	top:347px;
}
#main .content.maze>.body .btn_jetso{
	position:absolute;
	background: url("../images/common.png") no-repeat -1500px -300px;
	width:140px;
	height:44px;
	left:430px;
	top:406px;
}
#main .content.maze>.body .btn_remark{
	position:absolute;
	right:10px;
	bottom:0px;
	background-color:	#f7f7f7;
	padding:8px;
	font-size:10px;
	line-height:14px;
	color:#333;
	text-decoration:none;
	margin-right:25px;
}
#main .content.maze>.body .btn_remark:hover{
	background-color:	#FFF;
}








#main.bg_talktalk{
	background: url("../images/talktalk/kv.jpg") no-repeat top center;	
}
#main .content.talktalk>.body{
	position:relative;
	min-height:600px;
}

#main .content.talktalk>.body .intro{
	position:absolute;
	left:130px;
	top:60px;
	width:740px;
	text-align:center;
	font-size:16px;
	color:#333;
	z-index:10;
	max-height:9999px;
}
#main .content.talktalk>.body .intro>.remark{
	font-size:11px;
	line-height:15px;
}
#main .content.talktalk>.body .intro>h1{
	font-size:34px;
	color:#36781d;
}

	
#main .content.talktalk>.body ul.cover{
	list-style:none;
	position:absolute;
	width:1000px;
	left:0px;
	top:180px;
	text-align:center;
	z-index:20;
	margin:0px;
}
#main .content.talktalk>.body ul.cover>li{
	position:relative;

	width:250px;
	height:306px;
	margin:0px;
	cursor:pointer;
	
	zoom: 1;
	
	display:inline-block;
	 *display:inline;
	 margin-left:-4px;
}
#main .content.talktalk>.body .btn_remark{
	position:absolute;
	right:10px;
	bottom:0px;
	background-color:	#f7f7f7;
	padding:8px;
	font-size:10px;
	line-height:14px;
	color:#333;
	text-decoration:none;
	margin-right:25px;
}
#main .content.talktalk>.body .btn_remark:hover{
	background-color:	#FFF;
}










#main.bg_fee{
	background: url("../images/fee/kv.jpg") no-repeat top center;	
}
#main .content.fee>.body{
	position:relative;
	min-height:600px;
}
#main .content.fee>.body div.nav_point_heading{
	position:absolute;
	background: url("../images/common.png") no-repeat -600px -500px;
	width:65px;
	height:42px;
	display:inline-block;
	top:630px;
	left:340px;
}
#main .content.fee>.body ul.nav_point{
	list-style:none;
	position:absolute;
	width:1000px;
	left:0px;
	top:630px;
	text-align:center;
	z-index:20;
}
#main .content.fee>.body ul.nav_point>li{
	position:relative;
	background: url("../images/common.png") no-repeat;
	width:42px;
	height:42px;
	cursor:pointer;
	display:inline-block;
	zoom: 1;
	 *display:inline;
}
#main .content.fee>.body ul.nav_point>li.b0{
	background-position:-700px -500px;
}
#main .content.fee>.body ul.nav_point>li.b1{
	background-position:-743px -500px;
}
#main .content.fee>.body ul.nav_point>li.b2{
	background-position:-786px -500px;
}
#main .content.fee>.body ul.nav_point>li.b3{
	background-position:-829px -500px;
}

#main .content.fee>.body ul.nav_point>li.b0.selected{
	background-position:-700px -550px;
}
#main .content.fee>.body ul.nav_point>li.b1.selected{
	background-position:-743px -550px;
}
#main .content.fee>.body ul.nav_point>li.b2.selected{
	background-position:-786px -550px;
}
#main .content.fee>.body ul.nav_point>li.b3.selected{
	background-position:-829px -550px;
}


#main .content.fee>.body ul.nav_arrow{
	list-style:none;
}
#main .content.fee>.body ul.nav_arrow>li{
	position:absolute;
	background: url("../images/common.png") no-repeat;
	width:60px;
	height:83px;
	cursor:pointer;
	top:270px;
}
#main .content.fee>.body ul.nav_arrow>li.prev{
	background-position:-100px -100px;
	left:0px;
}
#main .content.fee>.body ul.nav_arrow>li.next{
	background-position:-200px -100px;
	right:0px;
}
#main .content.fee>.body ul.pics{
	list-style:none;
	position:absolute;
	top:0px;
	
}
#main .content.fee>.body ul.pics>li{
	display:block;
	float:left;
}
#main .content.fee>.body ul.pics>li>img{
	max-width:none;
}
#main .content.fee>.body .btn_remark{
	position:absolute;
	right:10px;
	top:630px;
	background-color:	#f7f7f7;
	padding:8px;
	font-size:10px;
	line-height:14px;
	color:#333;
	text-decoration:none;
	margin-right:25px;
	z-index:90;
}
#main .content.fee>.body .btn_remark:hover{
	background-color:	#FFF;
}















#main.bg_jetso{
	background: url("../images/jetso/kv.jpg") no-repeat top center;	
}
#main .content.jetso>.body{
	position:relative;
	min-height:600px;
}

#main .content.jetso>.body .intro{
	position:absolute;
	left:552px;
	top:70px;
	width:450px;
	color:#666;
	z-index:10;
}
#main .content.jetso>.body h1{
	font-size:32px;
	color:#36781d;
	margin-bottom:15px;
}
#main .content.jetso>.body h2{
	font-size:24px;
	line-height:24px;
}
#main .content.jetso>.body h3{
	font-size:30px;
	line-height:32px;
	color:#36781d;
}
#main .content.jetso>.body h4{
	font-size:22px;
	color:#36781d;
	margin-top:20px;
}
#main .content.jetso>.body h5{
	font-size:12px;
	line-height:16px;
}
#main .content.jetso>.body h5>a{
	text-decoration:underline;
	color:#36781d;
}
#main .content.jetso>.body .btn_apply{
	display:inline-block;
	background: url("../images/common.png") no-repeat -600px -100px;
	width:136px;
	height:52px;
}
#main .content.jetso>.body .intro>a{
	display:inline-block;
	height:52px;
	vertical-align:bottom;
	margin-top:15px;
}

#main .content.jetso>.body .remark{
	margin-top:605px;
	font-size:12px;
	color:#666;
	line-height:15px;
}
#main .content.jetso>.body .remark a{
	color:#36781d;
	text-decoration:underline;
	
}
#main .content.jetso>.body .remark>a>.arrow{
	background: url("../images/common.png") no-repeat -600px -50px;
	width:10px;
	height:10px;
	margin-left:5px;
	zoom: 1;
	display:inline-block;
	 *display:inline;
}

#main .content.jetso>.body .remark>.important_msg>ol{
	padding-left:20px;
	margin-top:10px;
}
#main .content.jetso>.body .remark>.important_msg>ol>li{
	line-height:15px;
	margin-bottom:10px;
}


#footer {	
	position:absolute;
	display: block;
	background-color:#FFF;
	height:62px;
	bottom:0px;
	width:100%;
	
}
#footer .content {	
	height:62px;
}
#footer .copyright{
	position:absolute;
	left:10px;
	top:15px;
	font-family:Arial;
	font-size:10px;
	line-height:15px;
}
#footer .copyright a{
	text-decoration:underline;
	font-weight:bold;
	color:#000000;
}
#footer .copyright a:hover{
	color:#097603;
}
#footer .logo{
	position:absolute;
	background: url("../images/common.png") no-repeat -1800px -50px;
	display:block;
	right:10px;
	top:15px;
	width:71px;
	height:12px;
}
.zindex10{
	position:absolute;
	z-index:10;	
}
.zindex20{
	position:absolute;
	z-index:20;	
}
.zindex30{
	position:absolute;
	z-index:30;	
}
.zindex40{
	position:absolute;
	z-index:40;	
}
.zindex50{
	position:absolute;
	z-index:50;	
}
.zindex60{
	position:absolute;
	z-index:60;	
}
.zindex70{
	position:absolute;
	z-index:70;	
}
.zindex80{
	position:absolute;
	z-index:70;	
}
.zindex90{
	position:absolute;
	z-index:70;	
}
/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }