@charset "utf-8";
/* CSS Document */

body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button,textarea, p, th {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif,"微軟正黑體";
}
img {border: 0;}
:focus {outline: 0;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}
input, button, textarea,select, optgroup, option {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
}
code, kbd, samp, tt {font-size: 100%;}
 
/*purpose To enable resizing for IE */
/*branch For IE6-Win, IE7-Win */
input, button, textarea, select {*font-size: 100%;}
ol, ul, li {list-style: none;}
:link, :visited , ins {text-decoration: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
 
/*HTML5 tag*/
section, article, aside, footer, header, nav, main {
	display: block;
}

.r{ float: right;}
.l{ float: left;}
.b:after{ content: '.'; display: block; clear: both; height: 0; line-height: 0; visibility: hidden;}

/* -------------------------------------------------------------------------------
		預設共用 css
------------------------------------------------------------------------------- */
	* { box-sizing: border-box;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box;}

	a, h1, h2, h3{ text-decoration: none; transition:0.5s all;
		-webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all;}

	.container { margin: 0 auto; max-width: 1400px;}
	.container .container { width: 100%;}
	.wrap{ padding-top: 4em;}
	
	.con-area.pad { padding: 8rem 0;}
		.con-pad { padding: 0 4.5rem;}	
		
		body { overflow-x: hidden;}
	
	pre { white-space: pre-wrap;}
	
	h1 {font-size: 2em; } h2 {font-size: 1.8em; font-weight: bold;} h3 {font-size: 1.6em;}
		h2.title { color: #4c6c77;}
	.top-span { padding-top: 4em;} .bottom-span { padding-bottom: 2em;}
	.group-top-span { padding-top: 2em;} .group-span { padding-top: .5em;}
	.con-width { max-width: 900px;}
	
	.con-box { text-align: justify;}
	.con-box * { line-height: 180%;}
		.con-box table td { vertical-align: top;}
	.con-box ol, .con-box ul, .con-box li { list-style: initial;}
	.con-box blockquote { margin: .5em; padding-left: 1.5em; border-left: 2px solid;}
	
	.con-box p { font-size: 1em;}
	.con-box p img { max-width: 100%; width: auto; height: auto !important;}
	
	/*menu 打開附加CSS*/
	#home.backhid { position: fixed; width: 100%; height: 100%; z-index: 2;}
	
	@media (max-width: 1023px){
		.con-area.pad { padding: 0 0 2rem;}
			.con-pad { padding: 0 2rem;}
	}
	@media (max-width: 768px){
		.con-pad { padding: 0 1rem;}
	}
	@media (max-width:480px){
		h1 {font-size: 1.8em;} h2 {font-size: 1.6em;} h3 {font-size: 1.4em;}
		.top-span { padding-top: 2em;} .bottom-span { padding-bottom: 1em;} .group-top-span { padding-top: 1em;}
	}
	
	
	/* animate */
	.animate { position: relative; opacity: 0; transition: all .5s;}
		.animate.anim-bottom { bottom: -3rem;}
		.animate.anim-right { right: -2rem;}
		.animate.anim-left { left: -2rem;}
	.animate.in { opacity: 1;}
		.animate.in.anim-bottom { bottom: 0;}
		.animate.in.anim-right { right: 0;}
		.animate.in.anim-left { left: 0;}

/* -------------------------------------------------------------------------------
		語言bar css
------------------------------------------------------------------------------- */
	.lang_box{background: #333; color: #fff; font-size: 12px;}
		.lang_bar{max-width: 1200px; margin: 0 auto; position: relative;}
			.lang_bar span{margin: 5px 10px; cursor: default;}
		.lang_sel{position: absolute; right: 30px; z-index: 99999;}
		.lang_sel li{padding: 5px 10px; background: #333; color: #fff; cursor: pointer;}
		.lang_list{display: none;}
			.lang_list a{color: #fff;}
		.lang_sel:hover .lang_list{display: block;}
	
	.lang_use, .lang_list li:hover {background: #C93 !important;}

/* -------------------------------------------------------------------------------
		浮動板塊比例 css
------------------------------------------------------------------------------- */
	.w-25, .w-30, .w-40, .w-50, .w-60, .w-70{float: left;}
	.w-25{width: 25%;}
	.w-30{width: 30%;}
	.w-40{width: 40%;}
	.w-50{width: 50%;}
	.w-60{width: 60%;}
	.w-70{width: 70%;}
	
	@media (max-width:768px){
		.w-25, .w-30, .w-40, .w-50, .w-60, .w-70{float: none; width: 100%; padding: 0 !important;}
		.mobile-hid { display: none;}
	}
	
/* -------------------------------------------------------------------------------
		icon - css
------------------------------------------------------------------------------- */
	.box-icon, .dot-icon { margin-right: 5px; background: url(../images/icon/icon.png) no-repeat; display: inline-block;}
	.box-icon > a, .dot-icon > a {display: inline-block; padding: 13px;}
	.box-icon { background-position-y: 0; }
	.dot-icon { background-position-y: -34px; }
	
	.twitter	{ background-position-x: 0;}
	.pinterest	{ background-position-x: -36px;}
	.vimeo		{ background-position-x: -72px;}
	.fb			{ background-position-x: -108px;}
	.instagram	{ background-position-x: -144px;}
	.youtube	{ background-position-x: -180px;}
	.flickr		{ background-position-x: -216px;}
	.wordpress	{ background-position-x: -252px;}
	
	.b-icon, .w-icon { border-radius: 50%; margin-right: 10px; background: url(../images/icon/icon.png) no-repeat; display: inline-block; padding: 25px;}
	.b-icon { background-position-y: -70px; background-color: #fff;}
	.w-icon { background-position-y: -120px; border: 1px solid #fff;}
	
	
	.bw-twitter		{ background-position-x: 0;}
	.bw-pinterest	{ background-position-x: -50px;}
	.bw-vimeo		{ background-position-x: -100px;}
	.bw-fb			{ background-position-x: -150px;}
	.bw-instagram	{ background-position-x: -200px;}
	.bw-youtube		{ background-position-x: -250px;}
	.bw-flickr		{ background-position-x: -300px;}
	.bw-wordpress	{ background-position-x: -350px;}
	
	
/* -------------------------------------------------------------------------------
		loading - css
------------------------------------------------------------------------------- */
	#loading{
		position: relative;
		background-color: rgba(255,255,255,.5);
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 999999;
		margin-top: 0px;
		top: 0px;
	}
	#loading-center-absolute {
		position: absolute;
		left: 50%;
		top: 50%;
		height: 200px;
		width: 200px;
		margin-top: -100px;
		margin-left: -100px;
	}
	#box-object-1{
		width: 80px;
		height: 80px;
		background-color: #bd4932;
		-webkit-animation: turn-animate 1s infinite ease-in-out;
		animation: turn-animate 1s infinite ease-in-out;
		margin: 60px auto 0;
	}
	#circle-object-1{
		width: 80px;
		height: 80px;
		background-color: #bd4932;
		-webkit-animation: turn-animate 1s infinite ease-in-out;
		animation: turn-animate 1s infinite ease-in-out;
		margin: 60px auto 0;
		border-radius: 50%;
	}
	@-webkit-keyframes turn-animate {
	  0% { -webkit-transform: perspective(160px); }
	  50% { -webkit-transform: perspective(160px) rotateY(-180deg); }
	  100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }
	}
	
	@keyframes turn-animate {
	  0% { 
		transform: perspective(160px) rotateX(0deg) rotateY(0deg);
		-webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg); 
	  } 50% { 
		transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
		-webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;
	  } 100% { 
		transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
		-webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
	  }
	}