@charset "utf-8";
body{
	font-family: Arial,"微軟中黑體","Microsoft JhengHei";
}
	a{
		text-decoration: none;
	}
	.menu * {
		box-sizing: border-box;
	}
	.menu *:before, .menu *:after {
		box-sizing: inherit;
	}
	/*--- 加快animate.css動畫 ---*/
	.animated_fast{
	  -webkit-animation-duration: 0.5s;
	  animation-duration: 0.5s;
	}
sub,sup{
	vertical-align: baseline;
	position: relative;
	top: -0.4em;
}
sub{
	top:0.4em;
}
/*--------  共用  --------*/
.pc_block{
	display: block;
}
	.mobile_block{
		display: none;
	}
	.html_edit{
		overflow: hidden;
	}
	.image_block{
		overflow: hidden;
		text-align: center;
	}
	.wrap{
		display: table;
		width: inherit;
		height: inherit;
		margin: 0 auto;
	}
	.cell{
		display: table-cell;
		vertical-align: middle;
	}
	.go_top_block{
		text-align: right;
		bottom: 20px;
		position: absolute;
		width: 1124px;
		left: 50%;
		margin-left: -562px;
	}
	.go_top{
		width: 45px;
		height: 45px;
		background: url(../images/scafe_top_btn.png) center center no-repeat;
		display: inline-block;
		margin: 0 5px;
	}
/*--------  images  --------*/
.header{
	background: url(../images/scafe_header_bg.png) center top repeat-y;
}
	.sp_selecter div.right{
		background: url(../images/scafe_lang_icon.png) no-repeat;
	}
	.search a,
	.menu .lv2 li:before,
	.menu .lv2:after,
	.mobile_search_icon,
	.language_icon{
		background: url(../images/scafe_header_icon.png) center center no-repeat;
	}
	.menu > li > a.pc_block{
		background: url(../images/scafe_menu_bg.png) no-repeat;
	}
	.container{
		position: relative;
		z-index: 0;
	}
	.sitemap .title:after{
		background: url(../images/scafe_footer_icon.png) center center no-repeat;
	}
/*--------  框架  --------*/
.google_result_block{
	width: 1124px;
	margin: 0 auto;
}
.header_block:after,
.resident ul:after,
.menu:after,
.bottom_block_bg:after{
	content: '';
	display: block;
	clear: both;
}
.header_block,
.sitemap,
.footer .bottom_block{
	width: 1125px;
	margin: 0 auto;
	position: relative;
}
	.header_block{
		z-index: 1;
		position: relative;
	}
	.header{
		height: 188px;
		min-width: 1124px;
		z-index: 1;
		position: relative;
	}
	.resident,
	.menu{
		float: right;
	}
	.logo_block,
	.resident li,
	.menu > li{
	float: left;
	}
	.header:after{
		content: '';
		display: block;
		background: url(../images/scafe_header_bottom_bg.png) center center no-repeat;
		height: 0px;
		z-index: 7;
		position: absolute;
		width: 100%;
	}
	.logo_block.pc_block{
		margin: 36px 0 0 21px;
	}
	.body_box{
		width: 100%;
		height: 0;
		background-color: #000;
		opacity: 0.3;
		filter: alpha(opacity=0.3);
		z-index: 1;
		position: absolute;
		top: 0;
	}
/*------  次選單  ------*/
.resident ul{
	list-style: none;
	margin: 0;
	padding: 12px 5px 0 0;
}
	.resident > ul > li{
		line-height: 26px;
	}
	.resident > ul > li > a,
	.resident > ul > li > a:link,
	.resident > ul > li > a:active{
		font-size: 13px;
		color: #050505;
		margin: 0 10px;
	}
/*------  lang  ------*/
#language{
	line-height: 0;
	padding: 0 8px 0 0;
}
	.sp_selecter{
		background-color: inherit;
		width: 110px;
		font-size: 13px;
	}
	.sp_selecter:hover{
		background-color: #3e2723;
	}
	.sp_selecter div.right{
		background-position: 0px 0px;
		width: 9px;
		height: 6px;
		top: 9px;
	}
	.sp_selecter:hover div.right{
		background-position: -14px 0;
	}
	.sp_selecter > .select_listdata_area li{
		background-color: #3e2723;
		font-size: 12px;
		line-height: 30px;;
	}
	.sp_selecter > .select_listdata_area li:hover{
		background-color: #e60012;
	}
	.sp_selecter div.center{
		color: #050505;
		padding: 0 0 0 12px;
	}
	.sp_selecter:hover div.center{
		color: #fff;
	}
	.sp_selecter > .select_listdata_area > ul{
		padding: 0;
	}
	.sp_selecter div.left{
		width: 0px;
	}
/*------  search  ------*/
.search{
	background: url(../images/scafe_search_bg.png) center center no-repeat;
	width: 200px;
	height: 25px;
}
	.search input{
		font-size: 12px;
		color: #a0a0a0;
		border: 0px;
		width: 166px;
		line-height: 1.5em;
		outline: none;	
	}
	.search ul{
		padding: 4px 8px;
	}
	.search li{
		line-height: 1em;
	}
	.search a,
	.search a:link,
	.search a:active{
		background-position: -175px -15px ;
		width: 16px;
		height: 18px;
		margin: 0;
		display: block;
	}
/*------  menu  ------*/
.menu{
	margin: 0;
	padding: 0;
}
	.menu,
	.menu .lv2{
		list-style: none;
	}
	.menu > li,
	.menu > li > a,
	.menu > li > a:link,
	.menu > li > a:active{
		width: 129px;
		height: 127px;
		position: relative;
		position: relative;
	}
	.menu > li{
		margin: 0 1px;
		z-index: 0;
	}
	.menu > li:nth-child(3){
		margin-left: 4px; 
	}
	.menu > li > a,
	.menu > li > a:link,
	.menu > li > a:active{
		background-position: 16px 4px;
		/*text-align: center;*/
	}
	.menu > .this > a,
	.menu > .this > a:link,
	.menu > .this > a:active{
		background-position: -111px 0;
	}
	.menu > li > a > img{
		margin: 42px 0 0 24px;
	}
	.menu .lv2{
		padding: 0;
		width: 180px;
		left: 50%;
		position: absolute;
		margin-left: -75%;
		z-index: 0;
		overflow: hidden;
		top: 127px;
		height: auto;
		display: none;
		/*padding-top: 20px;*/
	}
	.menu .lv2_open{
		height: auto;
		display: block;
	}
	.menu .lv2:before{
		content: '';
		display: block;
		background: url(../images/scafe_lv2_bg.png) repeat-y;
		width: 175px;
		height: 22px;
		margin: 0 6px;
	}
	.menu .lv2:after{
		content: '';
		display: block;
		background-position: -408px -32px;
		width: 181px;
		height: 30px;;
	}
	.menu .lv2 li{
		background: url(../images/scafe_lv2_bg.png) repeat-y;
		width: 175px;
		padding: 0;
		text-align: center;
		margin: 0 6px;
	}
	.menu .lv2 li:before{
		content: '';
		display: block;
		background-position: -474px 0;
		width: 146px;
		height: 2px;
		margin: 0 auto;
	}
	.menu .lv2 li:first-child:before{
		display: none;
	}
	.menu .lv2 a,
	.menu .lv2 a:link,
	.menu .lv2 a:active{
		font-size: 16px;
		line-height: 1.5em;
		color: #fff;
		padding: 12px 17%;
		display: block;
		margin: 0 6px;
		text-align: left;
	}
	.menu .lv2 li:hover a{
		background: url(../images/scafe_lv2_bg_h.png) repeat-y;
	}
	.menu:after{
		content: '';
		display: block;
		height: 9px;
		background: url(../images/scafe_header_bottom_bg.png) -4px -2px no-repeat;
		z-index: 1;
		position: relative;
		width: 100%;
		padding: 0 16px;
		margin-left: -21px;
	}
/*----- container -------*/

/*----- footer -------*/
.footer{
	background-color: #313131;
	position: relative;
	z-index: 0;
	min-width: 1124px;
}
	/*--sitemap--*/
	.sitemap{
		padding: 40px 0 0 0;
		margin: 0 auto 40px auto;
	}
	.sitemap ul{
		list-style: none;
		padding: 0;
		margin: 0 0 0 10px;
	}
	.sitemap ul:after{
		content: '';
		display: block;
		clear: both;
	}
	.sitemap > ul > li{
		float: left;
		margin: 0 0 0 40px;
	}
	.sitemap > ul > li:first-child{
		margin: 0;
	}
	.sitemap li a,
	.sitemap li a:link,
	.sitemap li a:active{
		font-size: 13px;
		line-height: 25px;
		color: #b2b2b2;
	}
	.sitemap li a:hover{
		color: #ff9100;
	}
	.sitemap .title{
		font-size: 14px;
		line-height: 1.5em;
		color: #fff;
		max-width: 151px;
	}
	.sitemap .title:after{
		content: '';
		display: block;
		background-position: -94px 0;
		width: 151px;
		height: 1px;
	}
	.sitemap .lv2{
		margin: 10px 0;
	}
	.sitemap .lv2 li{
		max-width: 151px;
	}
	/*--下方區塊--*/
	.footer .bottom_block:after{
		content: '';
		display: block;
		clear: both;
	}
	.footer .bottom_block_bg{
		background: url(../images/scafe_footer_bg.png) center center repeat-x;
		height: 120px;
	}
	.footer .bottom_block{
		padding: 15px 0 0 0;
	}
	.official_web_block{
		display: inline-block;
		float: right;
	}
	.community_block{
		/*float: left;*/
		/*display: inline-block;*/
	}
	.footer .fb_block{
		background: url(../images/scafe_footer_icon_facebook.png) center center no-repeat;
		display: inline-block;
		width: 39px;
		height: 39px;
		margin-right: 5px;
	}
	.footer .youtube_block{
		background: url(../images/scafe_footer_icon_youtube.png) center center no-repeat;
		display: inline-block;
		width: 39px;
		height: 39px;
	}
	.footer .spiin_block{
		background: url(../images/scafe_footer_icon_spiin.jpg) center center no-repeat;
		display: inline-block;
		width: 194px;
		height: 52px;
	}
	.footer .singtex_block{
		background: url(../images/scafe_footer_icon_singtex.png) center center no-repeat;
		display: inline-block;
		width: 180px;
		height: 27px;
		margin: 0 0 20px 20px;
	}
	.footer .copyright_block{
		font-size: 13px;
		line-height: 18px;
		color:#000;
		display: inline-block;
		float: left;
		margin: 38px 0 0 0;
	}
/*----- footer End -------*/
@media screen and (max-width: 600px) {
	.google_result_block{
		width: 100%;
	}
	/*--------  圖片  --------*/
	.header{
		background: url(../images/scafe_mobile_header_bg.png);
		height: 81px;
		position: fixed;
		top: 0px;
		width: 100%;
		z-index: 2;
		min-width: 100%;
		left: 0px;
	}
	.menu_icon,
	.menu .menu_close{
		background: url(../images/scafe_header_icon.png);
	}
	.menu > li > a:before,
	.menu > li > a:after{
		background: url(../images/scafe_mobile_menu_line.png);
	}
	/*------- html_edit 規則------*/
	.html_edit table{
		width: 100% !important;
	}
	.html_edit img{
		max-width: 100% !important; 		
		width: 100%;
		height: auto !important; 
	}
	/*--------  共用  --------*/
	.pc_block{
		display: none;
	}
		.mobile_block{
			display: block;
		}
		.header .open{
			display: block;
		}
	/*--------  框架  --------*/
	.header_block,
	.sitemap,
	.footer .bottom_block{
		width: 100%;
	}
		.header:after{
			display: none;
		}
		.logo_block{
			float: none;
			text-align: center;
			padding: 7px 0 0 0;
			margin: 0 auto;
			width: 111px;
		}
		.mobile_resident ul{
			list-style: none;
			margin: 0;
		}
		.mobile_resident:after{
			content: '';
			display: block;
			clear: both;
		}
		.mobile_resident{
			position: absolute;
			right: 0;
			top: 17px;
		}
		.mobile_resident li{
			margin: 0 23px 0 0; 
			float: left;
		}
		.menu{
			top: 0;
			left: -1px;
			position: absolute;
			display: none;
			-webkit-overflow-scrolling: touch;
		}
		.resident{
			float: none;
			position: absolute;
			top: 0;
			width: 100%;
			display: none;
		}
		.resident ul{
			padding: 0;
		}
		.container{
			margin: 60px 0 0 0;
		}
		.footer .sitemap{
			display: none;
		}
	/*------  menu  ------*/
	.menu:after{
		display: none;
	}
	.menu_icon{
		background-position: -42px -5px;
		width: 40px;
		height: 40px;
		display: inline-block;
		cursor: pointer;
		position: absolute;
		top: 10px;
		left: 18px;
	}
		.menu > li, 
		.menu > li > a, 
		.menu > li > a:link, 
		.menu > li > a:active{
			width: 95%;
			height: auto;
			color: #633511;
			font-size: 16px;
			text-align: left;
		}
		.menu > li{
			background-color: #c0af98;		
		}
		.menu > li:first-child{
			background-color: #22120f;
			color: #fff;
			line-height: 55px;
			font-size: 14px;
			padding: 0 5%;
		}
		.menu > li:nth-child(3){
			margin-left: 1px;
		}
		.menu > li > a:after{
			content: '';
			background-position: 0 0;
			background-repeat: repeat-x;
			height: 2px;
			width: 100%;
			display: block;
			position: absolute;
			bottom: 0;
			left: 0;
		}
		.menu > li > a, 
		.menu > li > a:link, 
		.menu > li > a:active{
			padding:16px 10%;		
		}
		.menu > .this,
		.menu > li:hover{
			background: #22120f;
		}
		.menu > li:hover > a, 
		.menu > li:hover > a:link, 
		.menu > li:hover > a:active,
		.menu > .this > a,
		.menu > .this > a:link,
		.menu > .this > a:active{
			color: #e60012;	
		}
		.menu > .this > a:after,
		.menu > li:hover > a:after{
			background: inherit;
		}
		.menu .menu_close{
			background-position: -139px -13px ;
			width: 21px;
			height: 21px;
			display: inline-block;
			position: absolute;
			right: 14px;
			top: 16px;
			cursor: pointer;
		}
		/*-- menu lv2  --*/
		.menu .lv2{
			height: auto;
			position: relative;
			margin: 0;
			width: 100%;
			left: 0;
			top: 0;
			overflow: auto;
			padding: 0;
			display: none;
		}
		.menu .lv2:before,
		.menu .lv2:after{
			display: none;
		}
		.menu .lv2 li{
			width: 100%;
			background: #ffe8ca;
			margin: 0;
		}
		.menu .lv2 a, 
		.menu .lv2 a:link, 
		.menu .lv2 a:active{
			margin: 0 10%;
			padding: 12px 10px;
			color: #633511;
			border-bottom: 1px dashed #d9c2a3;
		}
		.menu .lv2 li:last-child a, 
		.menu .lv2 li:last-child a:link, 
		.menu .lv2 li:last-child a:active{
			border-bottom: none;
		}
		.menu .lv2 li:hover{
			background: #22120f;			
		}
		.menu .lv2 li:hover a{
			background-image: none;
			color: #e60012;
		}
		.menu .lv2 li:before{
			display: none;
		}
	/*------  search  ------*/
	.mobile_search_icon{
		background-position: -10px -12px ;
		width: 22px;
		height: 25px;
		cursor: pointer;
	}
	.resident > ul > li{
		background-color: #3e2723;
		width: 100%;
		float: none;
		padding: 25px 0;;
	}
	.search{
		/*display: none;*/
		background: none;
		background-color: #fff;
		border-radius: 20px;
		width: 90%;
		height: 25px;
		margin: 0 auto;
		position: relative;
	}
	.search input{
		width: 100%;/*380px;*/
		margin: 2px 25px 4px;

	}
	/*------- language --------*/
	.language_icon{
		background-position: -102px -10px ;
		width: 23px;
		height: 25px;
		cursor: pointer;
	}
	.mobile_language{
		/*display: none;*/
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		display: none;
	}
	.mobile_language ul{
		/*position: absolute;*/
		padding: 0;
		margin: 0;
	}
	.mobile_language li{
		background-color: #3e2723;
		text-align: center;
	}
	.mobile_language li:hover{
		background-color: #e60012;
	}
	.mobile_language a,
	.mobile_language a:link,
	.mobile_language a:active{
		padding: 0 20%;
		display: block;
		font-size: 12px;
		line-height: 30px;
		color: #fff;		
	}
	/*------- footer -------*/
	.footer{
		background-color:inherit;
		min-width:100%;
	}
	.footer:before{
		content: '';
		display: block;
		background: url(../images/scafe_mobile_footer_bg_top.png);
		height: 10px;
	}
	.footer .bottom_block_bg{
		background: url(../images/scafe_mobile_footer_bg.png);
		height: auto;
	}
	.footer .bottom_block{
		padding: 7px 0 0 0;
	}
	.footer .official_web_block a{
		margin: 10px 0;
	}
	.community_block{
		text-align: center;
	}
	.official_web_block{
		float: none;
		text-align: center;
		display: block;
		width: 194px;
		margin: 10px auto;
	}
	.footer .copyright_block{
		width: auto;
		display: block;
		text-align: center;
		float: none;
		margin: 14px 0 0 0;
		padding: 0 0 7px 0;

	}
}