/* Website template by freewebsitetemplates.com */

/*------------------------- Layout styles ------------------------*/
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
body{

	margin:0;
	font-family: 'Noto Sans TC', sans-serif;
	background:url(../images/bg-body.png);

/*	background:url(../images/background.png) no-repeat;

	background-size: 100%;*/

}

.page{

	/*background:url(../images/bg-header.jpg) no-repeat center top;*/

	background:url(../images/background_raw.png) no-repeat;

	background-size: 100%;

}



/*------------------------- Font ------------------------*/

@font-face {

    /*font-family: 'RokkittRegular';*/
    font-family: 'Noto Sans TC', sans-serif;

    src: url('rokkitt-regular-webfont.eot');

    src: url('rokkitt-regular-webfont.eot?#iefix') format('embedded-opentype'),

         url('rokkitt-regular-webfont.woff') format('woff'),

         url('rokkitt-regular-webfont.ttf') format('truetype'),

         url('rokkitt-regular-webfont.svg#RokkittRegular') format('svg');

    font-weight: normal;

    font-style: normal;

}



/*------------------------- Header ------------------------*/

.header{

	background:url(../images/bg_line.png) no-repeat left 80px;

	/*background-size: 100%;*/

	width:940px;

	margin:0 auto;

	height:105px;

	padding:16px 10px 0;

}

.header a#logo{

	display:block;

	float:left;

	outline:none;

	padding:12px 0px 0;

}

.header a#logo img{

	border:0;

}

.header ul{

	margin:0;

	list-style:none;

	padding:36px 0 0;

	float:right;

}

.header ul li{

	float:left;

	margin:0 0 0 20px;

	background: #40210f;

}

.header ul li.selected a,.header ul li a:hover{

	color:#f78117;

}

.header ul li a{

	font-size:15px;

	text-decoration:none;

	/* color:#5e5e5e; */

	color:#ddd;

	/*font-family: 'RokkittRegular';*/
	font-family: 'Noto Sans TC', sans-serif;

	outline:none;

}



/*------------------------- Body ------------------------*/

.body{

	width:940px;

	margin:0 auto;

	padding:0 10px;

	overflow:hidden;

}

.body div#featured{

	background:url(../images/tower.png) no-repeat right bottom;


	/*height:448px;*/
	height:355px;

	padding:10px 0 17px;
	margin-right: 50px;

}

.body div#featured h1{

	background:url(../images/font_white.jpg) no-repeat;

	/*color:#f78117;*/

	color:#6f3b1c;

	text-align: center;

	font-size:18px;

	/*font-family: '標楷體';*/
	font-family: 'Noto Sans TC', sans-serif;

	margin:0 0 25px 25px;

	width:480px;
	height: 10px;

	padding:10px 0 10px;

	font-weight:normal;

}

.body div#featured h3{

	background:url(../images/font_white.jpg) no-repeat;

	/*color:#f78117;*/

	color:#6f3b1c;

	text-align: center;

	font-size:18px;

	/*font-family: '標楷體';*/
	font-family: 'Noto Sans TC', sans-serif;

	margin:0 0 25px 25px;

	width:480px;
	height: 10px;

	padding:10px 0 10px;

	font-weight:normal;

}

.body div#featured p{


	background:url(../images/font_white.jpg) no-repeat;

	width: 460px;

	color:#5d5d5d;

	/*font-family: 'RokkittRegular';*/
	font-family: 'Noto Sans TC', sans-serif;
	font-size:16px;

	line-height:30px;

	text-shadow: 0 1px 0 #fcfcfc;

	text-align:center;

	margin:0 0 0 60px;

}

.body div#featured input{

	background:url(../images/interface.jpg) no-repeat;
	background: #db8548;
	border: 0px solid;
    border-radius: 5px;
    text-shadow: 0 -1px 1px #eee; 凸出效果

    height:38px;

    width:156px;

	/*font-family: 'RokkittRegular';*/
	font-family: 'Noto Sans TC', sans-serif;
	color:#fff;

	font-size:16px;

	margin:28px 0 0 180px;

	cursor:pointer;

	outline:none;

}

.body ul.blog{

	list-style:none;

	margin:40px 0 0;

	padding:0 0 0px;

	background:url(../images/separator.jpg) no-repeat center top;

	overflow:hidden;

}

.body ul.blog li:first-child{

	margin:60px 0 0 60px;

}

.body ul.blog li{

	float:left;

	background:url(../images/interface.jpg) no-repeat 0 -68px!important;

	margin:60px 0 0 108px;

	height:320px;

	padding:0;

}

.body ul.blog li div{

	width:201px;

	height:201px;

	text-align:center;

	padding: 8px 0 0px 0;

	float:none;

	margin:0;

	background:none;

	background: #86c5d3;

}


.body ul.blog li div a img{

	border:0;

	margin:0 0 0 0px;

}

.body ul.blog li div a img:hover{

	filter:alpha(opacity=80);

	opacity:0.8;

}

.body ul.blog li div p{

	width:258px;

	text-align:justify;

	/*color:#828081;*/
	color:#FFF;

	/*font-family: 'RokkittRegular';*/
	font-family: 'Noto Sans TC', sans-serif;
	margin:20px 0 0 10px;

	line-height:20px;

	font-size:14px;

	background:none;

	padding:0;

}

.body ul.blog li div a:first-child{

	margin:0;

	padding:0;

	background:none;

	width:auto;

}

.body ul.blog li div a:hover{

	color:#F78117;

}

.body ul.blog li div a{

/*	color:#606060;
	font-family: 'Noto Sans TC', sans-serif;
	font-style:italic;
	text-decoration:none;
	padding:98px 0 0;
	margin:32px auto 0;
	display:block;
	width: 120px;
	background:url(../images/button-more.png) no-repeat center top;
	outline:none;
	font-size:16px;
	font-weight:normal;
	text-shadow: 0 1px 0 #fcfcfc;*/

	color:#606060;
	font-family: 'Noto Sans TC', sans-serif;
	font-style:italic;
	text-decoration:none;
	padding:98px 0 0;
	margin:28px auto 0;
	display:block;
	width: 201px;
	background:url(../images/button-more.jpg) no-repeat center top;
	outline:none;
	font-size:16px;
	font-weight:normal;
	/*text-shadow: 0 1px 0 #fcfcfc;*/

}

#blog_change{
	background:url(../images/button-more2.jpg) no-repeat center top;
}


.body h3{

	/*font-family: 'RokkittRegular';*/
	font-family: 'Noto Sans TC', sans-serif;
	font-size:16px;

	font-weight:bold;

	color:#636363;

	margin:15px 0 0;

	line-height:21px;

}

.body p{

	/*font-family: 'RokkittRegular';*/
	font-family: 'Noto Sans TC', sans-serif;
	font-size:16px;

	text-align:justify;

	color:#636363;

	margin:0 0 0px;

	line-height:21px;

}

.body p a{

	outline:none;

	color:#636363;

}

.body ul{

	list-style:none;

    margin:0;

    padding:0;

	overflow:hidden;

}

.body ul li:first-child{

	background:none;

	padding:0 0 0px;

}

.body ul li{

	overflow:hidden;

	background:url(../images/separator.jpg) no-repeat center top;

	padding:30px 0;

}

.body ul li div.featured{

	background:url(../images/interface.jpg) no-repeat 0 -68px;

	width:281px;

	height:292px;

	text-align: center;

	margin:0;

}

.body ul li div.featured img{

	margin:10px 0 0 -3px;

	border:0;

}

.body ul li div.featured ul{

	overflow:hidden;

	margin:2px 0 0 10px;



}

.body ul li div.featured ul li:first-child{

	margin:0;

}

.body ul li div.featured ul li{

	float:left;

	margin:0 0 0 18px;

	background:none;

	padding:0;

}

.body ul li div.featured ul li a{

	padding:0;

}

.body ul li div.featured ul li a img{

	margin:0;

}

.body ul li div.featured ul li a img:hover{

	filter:alpha(opacity=80);

	opacity:0.8;

}

.body ul li div.featured a{

	clear:both;

	display:block;

	font-size:13px;

	/*font-family: 'RokkittRegular';*/
	font-family: 'Noto Sans TC', sans-serif;
	text-decoration:none;

	color:#8a8889;

	font-weight:bold;

	padding:5px 0 0;

	width:auto;

	outline:none;

}

.body ul li div{

	float:left;

	margin:0 0 0 50px;

	width:609px;

	background:url(../images/button-more.png) no-repeat left bottom;

}

.body ul li div h3{

	margin:0;

	font-size:20px;

	font-weight:bold;

	/*font-family: 'RokkittRegular';*/
	font-family: 'Noto Sans TC', sans-serif;
	color:#f28220;

	line-height:22px;

}

.body ul li div p{

	line-height:22px;

	/*font-family: 'RokkittRegular';*/
	font-family: 'Noto Sans TC', sans-serif;
	font-size:14px;

	color:#5D5D5D;

	padding:0 0 90px;

	margin:0;

}

.body ul.paging{

	margin:15px 0 10px 210px;

}

.body ul.paging li{

	float:left;

	padding:0 5px;

	background:none;

}

.body ul.paging li a{

	text-decoration:none;

	color:#ff7e0d;

	font-family: arial;

	font-size:12px;

}

.body ul.paging li a:hover{

	color:#5D5D5D;

}



/*------------------------- Footer ------------------------*/

.footer{

	width:940px;

	background:url(../images/bg_line2.png) no-repeat center top;

	padding:65px 10px 207px;

	margin:0 auto;

	overflow:hidden;

}

.footer ul{

	list-style:none;

	margin:0 0 0 60px;

	padding:0;

	overflow:hidden;

	float:left;

}

.footer ul li:first-child a{

	border:none;

	padding:0 6px 0 0;

}

.footer ul li{

	float:left;

}

.footer ul li a:hover{

	color:#F78117;

}

.footer ul li a{

	border-width: 1px;

	border-color:#5b5b5b;

	border-style: none none none solid;

	color:#5b5b5b;

	font-size:10px;

	font-family: Trebuchet MS;

	text-decoration:none;

	font-weight:bold;

	padding:0 6px;

	outline:none;

}

.footer p{

	color:#5b5b5b;

	font-size:14px;

	line-height: 22px;

	background:url(../images/font_white.jpg) no-repeat;

	/*font-family: Trebuchet MS;*/
	font-family: '微軟正黑體, Noto Sans TC', sans-serif;

	font-weight:bold;

	float:left;

	margin:6px 0 0 55px;

}

.footer div.connect{

	float:left;

	margin:20px 0 0 330px;

}

.footer div.connect a{

	float:left;

	outline:none;

}

.footer div.connect a#facebook{

	width:27px;

	height:28px;

	display:block;

	/*text-indent:-9999px;*/

	/*background:url(../images/icons.gif) no-repeat;*/

}

.footer div.connect a#twitter{

	width:36px;

	height:28px;

	display:block;

	/*text-indent:-9999px;*/

	/*background:url(../images/icons.gif) no-repeat 0 -48px;*/

	margin:0 0 0 52px;

}

.footer div.connect a#vimeo{

	width:32px;

	height:28px;

	display:block;

	/*text-indent:-9999px;*/

	/*background:url(../images/icons.gif) no-repeat 0 -96px;*/

	margin:0 0 0 40px;

}