@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,700&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext,cyrillic);
@import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700&subset=latin,latin-ext);
.m-wrap div,.m-wrap span,.m-wrap applet,.m-wrap object,.m-wrap iframe,.m-wrap h1,.m-wrap h2,.m-wrap h3,.m-wrap h4,.m-wrap h5,.m-wrap h6,.m-wrap p,.m-wrap blockquote,.m-wrap pre,.m-wrap a,.m-wrap abbr,.m-wrap acronym,.m-wrap address,.m-wrap big,.m-wrap cite,.m-wrap code,.m-wrap del,.m-wrap dfn,.m-wrap em,.m-wrap img,.m-wrap ins,.m-wrap kbd,.m-wrap q,.m-wrap s,.m-wrap samp,.m-wrap small,.m-wrap strike,.m-wrap strong,.m-wrap sub,.m-wrap sup,.m-wrap tt,.m-wrap var,.m-wrap b,.m-wrap u,.m-wrap i,.m-wrap center,.m-wrap dl,.m-wrap dt,.m-wrap dd,.m-wrap ol,.m-wrap ul,.m-wrap li,.m-wrap fieldset,.m-wrap form,.m-wrap label,.m-wrap legend,.m-wrap table,.m-wrap caption,.m-wrap tbody,.m-wrap tfoot,.m-wrap thead,.m-wrap tr,.m-wrap th,.m-wrap td,.m-wrap article,.m-wrap aside,.m-wrap canvas,.m-wrap details,.m-wrap embed,.m-wrap figure,.m-wrap figcaption,.m-wrap footer,.m-wrap header,.m-wrap hgroup,.m-wrap menu,.m-wrap nav,.m-wrap output,.m-wrap ruby,.m-wrap section,.m-wrap summary,.m-wrap time,.m-wrap mark,.m-wrap audio,.m-wrap video
{
	border: 0;
	font: inherit;
	font-size: 100%;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
.m-wrap table
{
	border-collapse: collapse;
	border-spacing: 0;
}
.m-wrap caption,.m-wrap th,.m-wrap td
{
	font-weight: normal;
	text-align: left;
	vertical-align: middle;
}
.m-wrap q,.m-wrap blockquote
{
	quotes: none;
}
.m-wrap q:before,.m-wrap q:after,.m-wrap blockquote:before,.m-wrap blockquote:after
{
	content: "";
	content: none;
}
.m-wrap a img
{
	border: none;
}
.m-wrap img
{
	image-rendering: auto;
	image-rendering: optimizeQuality;
	ms-interpolation-mode: bicubic;
}
.m-wrap a
{
	color: #444;
	moz-transition: color 0.2s ease-out;
	o-transition: color 0.2s ease-out;
	text-decoration: none;
	transition: color 0.2s ease-out;
	webkit-tap-highlight-color: rgba(255,255,255,0.1);
	webkit-transition: color 0.2s ease-out;
}
.m-wrap p
{
	margin: 0 0 1em;
	padding: 0;
}
.m-wrap p:last-child
{
	margin-bottom: 0;
}
.m-wrap b
{
	font-weight: normal;
}
.m-wrap small
{
	font-size: inherit;
}
.m-wrap h1 img,.m-wrap h2 img,.m-wrap h3 img,.m-wrap h4 img,.m-wrap h5 img,.m-wrap h6 img
{
	margin: 0;
	vertical-align: bottom;
}
.m-wrap blockquote
{
	border: none;
	margin: 0;
	padding: 0;
}
.m-wrap ul,.m-wrap ol
{
	display: block;
	list-style: none;
}
@font-face
{
	font-family: 'Jersey M54';
	font-style: normal;
	font-weight: normal;
	src: url("../libs/font/jersey_m54.eot");
	src: url("../libs/font/jersey_m54.eot?#iefix") format("embedded-opentype"),url("../libs/font/jersey_m54.woff") format("woff"),url("../libs/font/jersey_m54.ttf") format("truetype"),url("../libs/font/jersey_m54.svg#jersey_m54regular") format("svg");
}
.m-wrap
{
	color: #444;
	font-family: "Roboto","STHeiti Light",STXihei,STHeiti,"Apple LiGothic Medium",\5FAE\8EDF\6B63\9ED1\9AD4,"微軟正黑體","Microsoft JhengHei",Helvetica,Arial,sans-serif;
	font-size: 16px;
	line-height: 1.41176;
}
.m-wrap a:hover
{
	color: inherit;
	text-decoration: none;
}
.m-wrap small.ps
{
	display: block;
	font-size: 12px;
	margin-top: 1em;
}
.m-wrap
{
	@-moz-keyframes displayLoadingIcon
	{
		0%
		{
			moz-transform: scale(0, 0);
			transform: scale(0, 0);
		}
		100%
		{
			moz-transform: scale(1, 1);
			transform: scale(1, 1);
		}
	}
	@-webkit-keyframes displayLoadingIcon
	{
		0%
		{
			transform: scale(0, 0);
			webkit-transform: scale(0, 0);
		}
		100%
		{
			transform: scale(1, 1);
			webkit-transform: scale(1, 1);
		}
	}
	@-o-keyframes displayLoadingIcon
	{
		0%
		{
			o-transform: scale(0, 0);
			transform: scale(0, 0);
		}
		100%
		{
			o-transform: scale(1, 1);
			transform: scale(1, 1);
		}
	}
	@-ms-keyframes displayLoadingIcon
	{
		0%
		{
			ms-transform: scale(0, 0);
			transform: scale(0, 0);
		}
		100%
		{
			ms-transform: scale(1, 1);
			transform: scale(1, 1);
		}
	}
	@keyframes displayLoadingIcon
	{
		0%
		{
			transform: scale(0, 0);
		}
		100%
		{
			transform: scale(1, 1);
		}
	}
}
.m-wrap .picnav
{
	font-size: 0;
	white-space: nowrap;
	margin-left:12%;
}
.m-wrap .picnav .picnav-item
{
	font-size: 14px;
}
.m-wrap .picnav .picnav-item
{
	display: inline;
	display: inline-block;
	vertical-align: top;
	white-space: normal;
	zoom: 1;
}
.m-wrap .picnav-item
{
	overflow: hidden;
	position: relative;
	border:3px solid #333;
	margin-left:0.6%;
	margin-right:0.6%;

}
.m-wrap .picnav-item a
{
	display: block;
	
}
.m-wrap .picnav-item .pic
{
	moz-transition: -moz-transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
	o-transition: -o-transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
	webkit-transition: -webkit-transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
	width: 100%;
}
.m-wrap .picnav-item .pic img
{
	display: block;
	height: auto;
	width: 100%;
}
.m-wrap .picnav-item .title
{
	background: black;
	background: rgba(0,0,0,0.0);
	bottom: 0;
	color: #fff;
	
	display: table;
	float: left;
	font-family: "Oswald","Arial Narrow",Impact,"Roboto";
	font-size: 1.6em;
	font-weight: 500;
	height: 65px;
	left: 0;
	line-height: 1.2;
	moz-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
	o-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
	position: absolute;
	text-align: left;
	transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
	webkit-transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
	width: 100.5%;
	z-index: 2;
}
.m-wrap .picnav-item .title span
{
	display: table-cell;
	height: 60px;
	text-align:center;
	vertical-align: middle;
}
.m-wrap .picnav-item .title span>*
{
	display: inline;
	zoom: 1;
}
.m-wrap .picnav-item .title span>.helper,.m-wrap .picnav-item .title span>.mh
{
	height: 100%;
}
.m-wrap .picnav-item a:hover
{
	text-decoration: none;
}
.m-wrap .picnav-item a:hover .title
{
	color: #fff;
}
.m-wrap .picnav-item a:hover .pic
{
	moz-transform: scale(1.1, 1.1);
	ms-transform: scale(1.1, 1.1);
	o-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1);
	webkit-transform: scale(1.1, 1.1);
}
.m-wrap .on-dark .line .text
{
	color: #fff;
}
.m-wrap a:hover .play
{
	opacity: .7;
}
@-moz-keyframes fadein
{
	0%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 1;
	}
}
@-webkit-keyframes fadein
{
	0%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 1;
	}
}
@-o-keyframes fadein
{
	0%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 1;
	}
}
@-ms-keyframes fadein
{
	0%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 1;
	}
}
@keyframes fadein
{
	0%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 1;
	}
}

@media (max-width: 959px)
{
	.m-wrap img
	{
		max-width: none !important;
	}
}

#sectionOverview p,#section-overview p
{
	margin-bottom: 1em;
}
#overview #sectionOverview
{
	line-height: inherit;
}
.m-nav
{
	background: #484848;
	background: rgba(72,72,72,0.85);
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	font-size: 0;
	height: 55px;
	position: relative;
	text-align: center;
	top: auto;
	white-space: nowrap;
	width: 100%;
	z-index: 10101010101;
}
.m-nav .m-logo
{
	display: inline;
	display: inline-block;
	position: relative;
	vertical-align: baseline;
	vertical-align: top;
	width: 250px;
	zoom: 1;
}
.m-nav .m-logo img
{
	display: block;
	margin-top: 13px;
}
.m-nav ul
{
	border-left: 1px solid #ddd;
	display: inline;
	display: inline-block;
	font-size: 0;
	overflow: hidden;
	position: relative;
	vertical-align: baseline;
	vertical-align: top;
	zoom: 1;
}
.m-nav ul li
{
	font-size: 16px;
}
.m-nav ul li
{
	display: inline;
	display: inline-block;
	vertical-align: top;
	white-space: normal;
	zoom: 1;
}
.m-nav li
{
	border-right: 1px solid #ddd;
	color: #fff;
	text-align: center;
}
.m-nav li a
{
	background-color: transparent;
	color: #fff;
	display: block;
	font: 18px/55px "Oswald","Arial Narrow",Impact,"Roboto";
	moz-transition: background-color 0.2s;
	o-transition: background-color 0.2s;
	padding: 0 40px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s;
	webkit-transition: background-color 0.2s;
}
.m-nav li.on a,.m-nav li a:active,.m-nav li a:hover
{
	background-color: #111;
}

@media (max-width: 1000px)
{
	.m-nav li a
	{
		padding-left: 20px;
		padding-right: 20px;
	}
}
@media (max-width: 60em)
{
	.m-nav .m-logo
	{
		display: none;
	}
	.m-nav ul
	{
		text-align: left;
	}
}
@media (max-width: 53.125em)
{
	.m-nav li a
	{
		padding-left: 14px;
		padding-right: 14px;
	}
}
.m-wrap .section
{
	position: relative;
}
.m-wrap .section-inner
{
	margin: 0 auto;
	max-width: 1000px;
	padding: 4.375em 0;
	position: relative;
}
.m-wrap .section-display
{
	z-index: 2;
}
.m-wrap .section-display img
{
	display: block;
}
.m-wrap .section-display .base
{
	z-index: 1;
}
.m-wrap .section-imgbg
{
	float: left;
	left: 50%;
	margin-left: -50%;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}
.m-wrap .section-imgbg img
{
	display: block;
	height: auto;
	margin: 0 auto;
	width: 100%;
}
.m-wrap .learndetail
{
	position: relative;
}
.m-wrap .open-detail
{
	bottom: 0;
	float: left;
	left: 50%;
	margin-left: -95px;
	position: absolute;
	z-index: 5;
}
.m-wrap .close-detail
{
	bottom: 0;
	float: left;
	left: 50%;
	margin-left: -95px;
	position: absolute;
	z-index: 5;
}
.m-wrap .close-detail.attop
{
	bottom: auto;
	top: 0;
}

.m-wrap .section-title
{
	background: url("../../img/ui/title-underline.png") no-repeat 0 100%;
	margin-bottom: 1.875em;
	padding-bottom: 1.875em;
}
.m-wrap .section-title .section-title-x
{
	margin-bottom: 0.1875em;
}
.m-wrap .section-title-x
{
	color: #343434;
	display: block;
	font-family: "Jersey M54","Oswald","Arial Narrow",Impact,"Roboto";
	font-size: 3.125em;
	font-weight: 400;
	line-height: 1;
}
.m-wrap .section-title-b
{
	color: #626262;
	display: block;
	font-family: "Oswald","Arial Narrow",Impact,"Roboto";
	font-size: 1.875em;
	font-weight: 700;
	line-height: 1.1;
}
.m-wrap .section-blockquote
{
	border-left: 7px solid #b1b1b1;
	border-right: 7px solid #b1b1b1;
	color: #b1b1b1;
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.25;
	padding-left: 0.9375em;
	padding-right: 0.9375em;
	text-align: center;
}
.m-wrap .section-descr
{
	font-size: 1.0625em;
}
.dark .m-wrap .section-descr
{
	font-weight: 300;
}
.m-wrap .section.dark
{
	color: #fff;
	font-weight: 300;
}
.m-wrap .section.dark .section-title-x
{
	color: #fff;
}
.m-wrap .section.dark .section-title-b
{
	color: #bfbfbf;
}
.m-wrap .section.dark a
{
	color: #fff;
}
.m-wrap .tagtitle
{
	background: url("../../img/ui/tagtitle-bg.png");
	display: inline;
	display: inline-block;
	font-family: "Oswald","Arial Narrow",Impact,"Roboto";
	font-size: 1.25em;
	font-weight: 500;
	height: 34px;
	line-height: 34px;
	margin-bottom: 0.9em;
	padding: 0 0.4em;
	vertical-align: baseline;
	zoom: 1;
}
.m-wrap .tagtitle+p
{
	font-size: 1.125em;
}
.m-wrap .fontfix
{
	font-family: impact,arial;
	font-size: 93%;
}
.m-wrap .divider
{
	background: #4c4f53;
	clear: both;
	text-align: center;
}
.m-wrap .divider .title
{
	color: white;
	font-family: "Oswald","Arial Narrow",Impact,"Roboto";
	font-size: 2.625em;
	line-height: 1;
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;
	padding: 25px 0 25px;
}
.m-wrap .section.bg-wall
{
	background: url("../../img/ui/bg-wall.jpg") repeat-x 50% -0.375em;
}
.m-wrap .section.bg-gradient
{
	background: #fff url("../../img/ui/bg-gradient.jpg") repeat-x;
}
.m-wrap .section.dark
{
	background-color: black;
}
.m-wrap .section.bg-white
{
	background-color: #fff;
}
#top-wrap
{
	background: #e0e3e6;
	margin: 0 auto;
	position: relative !important;
}
* html #content
{
	zoom: 1;
}
*:first-child+html #content
{
	zoom: 1;
}

#top
{
	background: black;
}
#top .picnav
{
	white-space: normal;
}
#top .picnav-item
{
	width: 20%;
}
#top .picnav-item a:hover .title
{
	color: #679cac;
}