@charset "utf-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio { margin: 0; padding: 0; border: 0; font-size: 100%; outline: none; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; overflow-x: hidden; }
article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block; }
input, select { vertical-align: middle; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
strong { font-weight: bold; }
input { outline: none; padding: 0; }
input[type="text"], input[type="button"], input[type="submit"], input[type="reset"], select { -webkit-appearance: none; border-radius: 0; }
textarea { -webkit-appearance: none; border-radius: 0; background: none; outline: none; padding: 0; margin: 0; border: none; }
.clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.fc { text-align: center; }
.fr { text-align: right; }
.l { float: left; display: inline-block; }
.r { float: right; display: inline-block; }
.vt { vertical-align: top; }
.vm { vertical-align: middle; }
.inner { width: 1100px; margin: 0 auto; }
.menufix.on { opacity: 1; visibility: visible; transition: 466ms 0ms; }
.menubox { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: #fff; display: none; overflow-y: auto; }
.menus-list { position: relative; margin: 10% auto 88px; width: 90%; }
.menus-list li { position: relative; }
.menus-list li:before { content: ""; width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: ReturnToNormal; animation-name: ReturnToNormal; border-bottom: 1px solid #e5e5e5; }
.menus-list li:last-child { border-bottom: none; }
.menus-list li a { display: block; line-height: 80px; color: #323232; font-size: 26px; font-weight: bold; text-align: center; }
@-webkit-keyframes ReturnToNormal {
	0% {
		-webkit-transform: scale(0.1, 1);
		-ms-transform: scale(0.1, 1);
		transform: scale(0.1, 1);
	}

	100% {
		-webkit-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
		transform: scale(1, 1);
	}

}
@keyframes ReturnToNormal {
	0% {
		-webkit-transform: scale(0.1, 1);
		-ms-transform: scale(0.1, 1);
		transform: scale(0.1, 1);
	}

	100% {
		-webkit-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
		transform: scale(1, 1);
	}
}
.banner { position: relative; overflow: hidden; }
.banner .bannerbox li { height: 100%; line-height: 0; opacity: 0; transition: opacity 1300ms linear; -webkit-transition: opacity 1300ms linear; float: left; }
.banner .bannerbox li a > img { line-height: 0; width: 100%; position: relative; transition: transform 5s ease; -webkit-transition: transform 5s ease; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); }
.banner .bannerbox li.imgIn { opacity: 1; z-index: 10; display: block; }
.banner .bannerbox li.imgIn a > img { transform: matrix(1, 0, 0, 1, 0, 0); -webkit-transform: matrix(1, 0, 0, 1, 0, 0); }
.bannerdown { width: 90px; height: 90px; position: absolute; left: 280px; bottom: 0; background: url(../images/radius.png) center no-repeat; background-size: cover; z-index: 10; cursor: pointer; }
.bannerdown span { display: block; width: 11px; height: 35px; background: url(../images/arrow1.png) center no-repeat; position: absolute; left: 50%; margin-left: -5px; top: 27px; animation-delay: 0ms; animation-duration: 1500ms; animation-iteration-count: infinite; animation-name: arrow; animation-play-state: running; animation-timing-function: linear; }
.banner .flex-direction-nav {/*width: 46.875%; right: 0; bottom: 0; height: 44px; position: absolute; z-index: 50;*/
	/*0802*/
	width: 100%;
	left: 0;
	top: 50%;
	height: 44px;
	position: absolute;
	z-index: 50;
	/*0802*/
}
.banner .flex-direction-nav li a {
	display: block;
	width: 88px;
	height: 88px;
	text-indent: 999px;
	overflow: hidden;
	position: absolute;
	bottom: 14px;
}
.banner .flex-direction-nav li a.flex-prev { left: 60px; background: url(../images/icon_arrow_l.png) center no-repeat; }
.banner .flex-direction-nav li a.flex-next { right: 60px; background: url(../images/icon_arrow_r.png) center no-repeat; }
.banner .flex-direction-nav li a.flex-prev:hover { background:rgba(0,0,0,0.8) url(../images/icon_arrow_l1.png) center no-repeat;	border: 1px solid rgba(0,0,0,0.1);}
.banner .flex-direction-nav li a.flex-next:hover { background:rgba(0,0,0,0.8)  url(../images/icon_arrow_r1.png) center no-repeat; 	border: 1px solid rgba(0,0,0,0.1);}
@-webkit-keyframes arrow {
	0% { opacity: 0; -webkit-transform: translate3d(0px, 0px, 0px); }
	33% { opacity: 1; }
	66% { opacity: 1; }
	100% { opacity: 0; -webkit-transform: translate3d(0px, 10px, 0px); }
}
.whise { width: 100%; height: 44px; background: #fff; position: absolute; left: 0; bottom: 0; z-index: 5; }
/*.line:after{ content:""; width:32px; height:100vh; background:#000; position:fixed; left:0; top:0; z-index:15;}*/
.line:before { content: ""; width: 21px; height: 234px; position: absolute; right: 0; top: 0; background: #000; z-index: 15; }
.content { width: 46.875%; position: absolute; right: 0; bottom: 0; z-index: 10; background: rgba(0, 0, 0, 0.85); background: #171a92 \9; filter: alpha(opacity=85); }
.content:before { content: ""; width: 9px; height: 88px; background: #e6d6c1; position: absolute; left: 24px; top: 0; }
.content-wr { padding: 45px 54px 0; height: 195px; }
.conlist { position: relative; }
.conlist li { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; transform: translateX(0) skewX(-30deg); -webkit-transform: translateX(0) skewX(-30deg); -moz-transform: translateX(0) skewX(-30deg); }
.conlist li.on { opacity: 1; visibility: visible; transform: translateX(0) skewX(0deg); -webkit-transform: translateX(0) skewX(0deg); -moz-transform: translateX(0) skewX(0deg); transition: 788ms; }
.conlist li h3 { color: #fff; font-size: 38px; line-height: 1.3; margin-bottom: 16px; }
.conlist li p { color: #fff; font-size: 14px; height: 80px; overflow: hidden; line-height: 28px; }
.conlist li a { display: inline-block; line-height: 1; color: #fff; padding-right: 20px; background: url(../images/arrow.png) right center no-repeat; position: relative; }
.conlist li a:before { content: ""; width: 0%; height: 1px; background: #fff; position: absolute; left: 0; bottom: -1px; transition: 300ms ease-in-out; }
.conlist li a:hover { padding-right: 24px; }
.conlist li a:hover:before { width: 100%; }
.muble { height: 44px; position: relative; background: #e2e2e2; padding-left: 92px; }
.muble:before { content: ""; width: 92.9%; height: 100%; background: url(../images/nuble.jpg) left center no-repeat; position: absolute; left: 0; bottom: 0; }
.num { position: relative; }
.num b, .num i { display: inline-block; float: left; color: #323232; font-size: 16px; line-height: 44px; }
.num i { margin: 0 14px; }
.flexbo { position: fixed; left: 85px; top: 26.5%; padding-right: 70px; padding-bottom: 22px; z-index: 17; }
.recommend-box { padding: 130px 0 100px; z-index: 5; position: relative; }
.recommend-box .line:before { display: none; }
.recommend-box .line:after { top: 53px; }
.commonlogo { position: absolute; left: 85px; top: 16.8%; display: none; }
.commoned { margin-left: 12px; }
.commoned h3 { color: #000; font-size: 16px; line-height: 1; margin-bottom: 16px; }
.commoned small { display: block; color: #646464; line-height: 1; margin-bottom: 36px; /*font-family: "helvetica_neue_ltregular";*/ }
.commoned span { display: block; width: 32px; height: 9px; background: url(../images/arrow2.png) center no-repeat; transition: 320ms; position: relative; }
.commoned:hover span { margin-left: 6px; }
.recommend { width: 74.11%; float: right; margin-right: 79px; position: relative; }
.recommend-list > li { width: 31.3%; float: left; margin-right: 3%; position: relative; perspective: 500px; overflow: hidden; }
.recommend-list > li:last-child { margin-right: 0; }
.recommend-list > li figure { display: block; line-height: 1; overflow: hidden; }
.recommend-list > li figure img { display: block; width: 100%; height: auto; line-height: 1; transition: 0.5s; }
.reconmmendt { position: absolute; width: 100%; height: 100%; background: url(../images/enterbg.jpg) repeat; transition: 0.5s; transform: rotateX(40deg); z-index: -1; transform-origin: center bottom 0; left: 0; opacity: 0; bottom: 0; visibility: hidden; }
.reconmmendt:before { content: ""; width: 100%; height: 4px; background: #000; position: absolute; left: 0; bottom: 0; }
.reconmmendt h3 { color: #ffffff; font-size: 22px; line-height: 1; padding-bottom: 12px; width: 100%; text-align: center; position: relative; left: 0;
	top: 40%; font-weight: normal; text-transform: uppercase; }
.reconmmendt span { display: block; width: 32px; height: 32px; background: url(../images/search.png) center no-repeat; position: absolute; left: 50%; margin-left: -16px; top: 50%; margin-top: -16px; }
.recommend-down { position: absolute; width: 100%; left: 0; bottom: 30px; }
.reconlist { float: left; margin-left: 42px; }
.reconlist li { color: #fff; display: block; font-size: 13px; line-height: 2; }
.recommend-down i { display: block; width: 7px; height: 10px; background: url(../images/arrow.png) center no-repeat; position: absolute; right: 30px; bottom: 6px; }
.recommend-list > li:hover .reconmmendt { transform: none; opacity: 1; visibility: visible; }
.recommend-list > li:hover figure img { transform: translateY(-100%) }
.product-box { background: #eeeeee; position: relative; z-index: 16; top: 10%;opacity: 0;}
.productcon { width: 73.4%; float: right; position: relative; }
.productlist { width: 44.7%; position: absolute; height: 100%; left: 0; top: 0; }
.prowr { position: absolute; left: 0; top: calc(50% - 240px); }
.products { width: 380px; }
.products li { position: relative; }
.products li a { display: block; padding: 40px 30px 40px 100px; position: relative; transition: 386ms ease-in-out; height: 16px; }
.products li a:before { content: ""; width: 100%; height: 100%; background: #119315; position: absolute; left: 0; top: 0; transform-origin: 100%; -webkit-transform-origin: 100%; -webkit-transition: -webkit-transform .45s cubic-bezier(.4, 0, .2, 1); transition: -webkit-transform .45s cubic-bezier(.4, 0, .2, 1); transition: transform .45s cubic-bezier(.4, 0, .2, 1); transition: transform .45s cubic-bezier(.4, 0, .2, 1), -webkit-transform .45s cubic-bezier(.4, 0, .2, 1); transform: scaleX(0); -webkit-transform: scaleX(0); visibility: hidden \9; }
.products li:hover a { padding: 40px 30px 40px 100px; }
.products li:hover a:before { transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform-origin: 0; -webkit-transform-origin: 0; visibility: visible \9; }
.products li:hover i:before { width: 100%; }
.products li:hover p { color: #fff; }
.products li:hover b { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); opacity: 1; visibility: visible; transition: 440ms 240ms; }
.products li:hover.li_mo span { background: url(../images/icon.png) 0 -46px no-repeat; }
.products li:hover.li_sofa span { background: url(../images/icon.png) 0 -184px no-repeat; }
.products li:hover.li_chair span { background: url(../images/icon.png) 0 -250px no-repeat; }
.products li:hover.li_room span { background: url(../images/icon.png) 0 -115px no-repeat; }
.products li:hover.li_chaji span { background: url(../images/icon.png) 0 -383px no-repeat; }
.products li span { display: block; width: 44px; height: 33px; position: absolute; left: 25px; top: 50%; margin-top: -16px; transition: 378ms ease-in-out; }
.products li i { display: inline-block; width: 45px; height: 1px; background: #a0a0a0; margin-top: 8px; margin-right: 16px; position: relative; float: left; }
.products li i:before { content: ""; width: 0; height: 1px; background: #fff; position: absolute; left: 0; bottom: 0; transition: 300ms ease-in-out; }
.products li p { display: inline-block; position: relative; color: #323232; font-size: 18px; line-height: 1; transition: 320ms; float: left; }
.products li b { display: block; width: 25px; height: 25px; position: absolute; right: 31px; top: 50%; margin-top: -12px; opacity: 0; visibility: hidden; transition: 440ms 0ms ease-in-out; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); }
.products li b:before { content: ""; width: 100%; height: 1px; background: #fff; position: absolute; left: 0; top: 12px; }
.products li b:after { content: ""; width: 1px; height: 100%; background: #fff; position: absolute; top: 0; left: 12px; }
.products li.li_mo span { background: url(../images/icon.png) 0 0 no-repeat; }
.products li.li_sofa span { background: url(../images/icon.png) 0 -150px no-repeat; }
.products li.li_chair span { background: url(../images/icon.png) 0 -218px no-repeat; }
.products li.li_room span { background: url(../images/icon.png) 0 -84px no-repeat; }
.products li.li_chaji span { background: url(../images/icon.png) 0 -350px no-repeat; }
.producted { width: 55.3%; float: right; position: relative; height: 600px; }
.producted figure { display: block; overflow: hidden; line-height: 1; position: relative; height: 100%; }
.producted figure div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none;
	-webkit-filter: grayscale(20%);
	-moz-filter: grayscale(20%);
	-ms-filter: grayscale(20%);
	-o-filter: grayscale(20%);
	filter: grayscale(20%);
}
.producted figure div:first-child { display: block }
.producted figure img { height: 100%; }
.procenter { position: absolute; left: -132px; top: 50%; margin-top: -144px; }
.procenter > img { display: block; width: 259px; }
.centerwr {
	width: 227px;
	height: 257px;
	background: #fff;
	position: absolute;
	left: 16px;
	top: 16px;
	border: 10px solid #1193;
}
.centerwr small { display: block;
	position: relative;
	line-height: 1.2;
	text-align: center;
	width: 160px;
	padding-bottom: 23px;
	border-bottom: 2px solid #d2d2d2;
	margin: 30px auto 50px;
	font-family: "space_ageregular";
	font-size: 21px;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 3px; }
.centerwr small:before { content: ""; width: 20px; height: 4px; background: #000; position: absolute; left: 50%; margin-left: -10px; bottom: -14px; }
.more { width: 62px; height: 62px; margin: auto; background: url(../images/radius1.png) center no-repeat; -webkit-transition: -webkit-transform ease-out 0.3s, background 0.2s;
	-moz-transition: -moz-transform ease-out 0.3s, background 0.2s;
	transition: transform ease-out 0.3s, background 0.2s; }
.more a { display: block; height: 62px; position: relative; }
.more a:before { content: ""; width: 7px; height: 10px; background: url(../images/arrow3.png) center no-repeat; position: absolute; left: 50%; margin-left: -3px; top: 50%; margin-top: -5px; transition: 288ms; }
.more a:after {
	content: "";
	top: 0;
	left: 0;
	padding: 0;
	z-index: -1;
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	box-shadow: 0 0 0 2px rgba(210, 210, 210, 0.1);
	opacity: 0;
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
}
.more:hover {
	-webkit-transform: scale(0.93);
	-moz-transform: scale(0.93);
	-ms-transform: scale(0.93);
	transform: scale(0.93);
	color: #fff;
}
.more:hover a:before { left: 55%; }
.more:hover a:after {
	-webkit-animation: sonarEffect 1s ease-out 75ms;
	-moz-animation: sonarEffect 1s ease-out 75ms;
	animation: sonarEffect 1s ease-out 75ms;
}
@-webkit-keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(210, 210, 210, 0.1), 0 0 10px 10px #000, 0 0 0 10px rgba(210, 210, 210, 0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(210, 210, 210, 0.1), 0 0 10px 10px #000, 0 0 0 10px rgba(210, 210, 210, 0.5);
		-webkit-transform: scale(1.5);
		opacity: 0;
	}
}
@-moz-keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(210, 210, 210, 0.1), 0 0 10px 10px #000, 0 0 0 10px rgba(210, 210, 210, 0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(210, 210, 210, 0.1), 0 0 10px 10px #000, 0 0 0 10px rgba(210, 210, 210, 0.5);
		-moz-transform: scale(1.5);
		opacity: 0;
	}
}
@keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(210, 210, 210, 0.1), 0 0 10px 10px #000, 0 0 0 10px rgba(210, 210, 210, 0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(210, 210, 210, 0.1), 0 0 10px 10px #000, 0 0 0 10px rgba(210, 210, 210, 0.5);
		transform: scale(1.5);
		opacity: 0;
	}
}
.product-box .line:after { display: none; }
.product-box .line:before { top: 80%; }
.brand-center { position: relative; padding: 134px 0 146px; }
.brand-logo { position: absolute; left: 66%; top: 20px; padding: 4px 0 20px; }
.brand-logo h3 { color: #b4b4b4; font-size: 21px; font-family: "space_ageregular"; line-height: 1.2; font-weight: normal; text-transform: uppercase; letter-spacing: 2px; }
.brand-logo:before { content: ""; width: 20px; height: 4px; background: #a0a0a0; position: absolute; left: 0; bottom: 0; }
.brandb .slides li { position: relative; }
.brandb .slides li figure { display: block; width: 50.8%; float: left; overflow: hidden; }
.brandb .slides li figure img { display: block; width: 100%; height: auto;opacity: 0; }
.brand-text { width: 51.9%; position: absolute; right: 0; bottom: -120px; background: #eeeeee;opacity: 0 }
.brand-wr { padding: 48px 84px 32px; }
.brand-wr h4 { color: #323232; font-size: 36px; font-weight: normal; line-height: 1; margin-bottom: 40px; }
.brand-wr p { color: #787878; font-size: 15px; height: 156px; }
.brand-text .more { margin: 0; }
.brand-icon { position: absolute; right: 0; top: 135px; z-index: 20; }
.brand-info { width: 36px; height: 36px; margin-bottom: 12px; position: relative; }
.brand-info a { display: block; width: 36px; height: 36px; }
.brand-info a b { display: block; width: 23px; height: 22px; position: absolute; left: 50%; margin-left: -11px; top: 50%; margin-top: -11px; z-index: 6; }
.brand-info:nth-child(1) a b { background: url(../images/quality2.png) center no-repeat; }
.brand-info:nth-child(2) a b { background: url(../images/quality3.png) center no-repeat; }
.brand-info a:after { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../images/radius3.png) center no-repeat; background-size: cover !important; visibility: hidden; transition: 330ms; transform: scale(0.6); -webkit-transform: scale(0.6); -moz-transform: scale(0.6); opacity: 0; -moz-transition: all .4s cubic-bezier(0.445, 0.145, 0.355, 1); -o-transition: all .4s cubic-bezier(0.445, 0.145, 0.355, 1); }
.brand-info a:before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../images/radius2.png) center no-repeat; background-size: cover !important; transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; }
.brand-info:hover a:before, .brand-info.flex-active a:before { opacity: 0; transform: scale(1.3); -webkit-transform: scale(1.3); }
.brand-info:hover a:after, .brand-info.flex-active a:after { transform: scale(1); -webkit-transform: scale(1); opacity: 1; visibility: visible; }
.brand-center .line:before { top: 85%; }
.popUpblack { background: #000 \9; filter: alpha(opacity=80); background: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 1010; display: none; }
.popUp { width: 220px; height: 242px; border: 2px solid #00318b; background: #fff; position: fixed; left: 50%; top: 50%; margin: -87px 0 0 -115px; z-index: 1004; }
.popUp .t { padding: 0 0 0 10px; height: 26px; line-height: 26px; color: #666; font-weight: bold; border-bottom: 1px solid #e8e8e8; background: #f2f2f2; }
.popUp .t .close { padding: 0 10px 0 0; float: right; cursor: pointer; color: #666; font-weight: normal; }
.popUp .img { padding: 20px; }
.popUp .img img { width: 100%; display: block; }
.furniture { float: left; position: relative; }
.furniture strong { color: #323232; font-size: 30px; line-height: 1; padding: 6px 3px 6px 6px; font-family: "helvetica_neue_ltregular"; font-weight: normal; float: left; }
.furniture small { display: block; color: #c8c8c8; font-family: "helvetica_neue_ltregular"; line-height: 1.3; float: left; margin-left: 6px; position: relative; top: -13px; }
.solid { float: right; margin-top: -16px; }
.solid h1 { color: #202020; font-size: 48px; font-family: "space_ageregular"; font-weight: normal; line-height: 1; margin-bottom: 14px; text-transform: uppercase; display: inline-block }
.solid h1 img { width: 100px; margin: 0px 10px }
.solid span { display: block;
	text-align: center;
	color: #c7c7c7;
	font-size: 12px;
	line-height: 1;
	margin-top: 8px; }
.record p { display: inline-block; float: left; color: #bbb; }
.record a { float: right }
.record a:hover { color: #fff; }
.mtop { display: none; }
/*品牌故事*/
.brand { position: relative; background: #eeeeee; padding-top: 130px; padding-bottom: 103px; }
.bicon { position: absolute; left: 88px; top: 85px; z-index: 14; }
.bicon img { display: block; width: 141px; height: auto; line-height: 1; }
.brandimg { width: 53.7%; float: left; position: relative; margin-top: 68px; }
.brandimg figure { padding-right: 83px; }
.brandimg img { display: block; width: 100%; max-width: 100%; height: auto; }
.brandimg i { display: block; width: 83px; height: 100%; background: #000; position: absolute; right: 0; top: 0; }
.brandfix { width: 46.3%; float: left; background: #f7f7f7; position: relative; }
.branded { padding: 50px 55px 120px 62px; }
.branded strong { display: block; color: #000; font-size: 38px; line-height: 1.2; padding-left: 78px; position: relative; }
.branded strong:before { content: ""; width: 50px; height: 1px; background: #a0a0a0; position: absolute; left: 0; top: 50%; }
.branded p { color: #646464; font-size: 14px; margin-top: 30px; }
.modern { padding: 25px 0 26px 14px; width: 133px; background: #000; position: absolute; right: -61px; bottom: -46px; }
.modern i { color: #fff; font-size: 30px; font-family: "Arial"; line-height: 1; font-weight: bold; }
.startfix { margin-top: -76px; width: 53.7%; float: left; background: #000; }
.startwr { padding: 96px 44px 102px; }
.startwr span { display: block; color: #fff; font-size: 26px; font-weight: bold; margin-bottom: 6px; }
.startimg { width: 46.3%; float: left; overflow: hidden; }
.startimg img { display: block; width: 100%; height: auto; line-height: 1; }
#vbBox { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; }
.jwlogo { display: none !important; }
.qualife { width: 1340px; float: right; margin-right: 170px; }
.life { padding: 36px 190px 36px 62px; min-height: 452px; }
.life h4 { color: #323232; font-size: 38px; line-height: 1.2; margin-bottom: 34px; font-weight: normal; }
.life p { color: #646464; font-size: 14px; }
.qualife .brandimg { width: 41.8%; }
.qualife .brandfix { width: 58.2%; }
.qualife .modern { right: 194px; bottom: -130px; }
.brand-top { position: relative; z-index: 10; }
.informate { padding-top: 0; }
.news { width: 50%; float: right; }
.news-wr { padding: 120px 78px 94px 62px; }
.new-list li span { display: inline-block; line-height: 2; width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; float: left; color: #646464; font-size: 14px; transition: 340ms; }
.new-list li time { display: inline-block; line-height: 2; float: right; color: #969696; font-family: "Arial"; }
.new-list li:hover span { color: #000; }
.informates { position: relative; }
.news { position: relative; }
.pagelist { width: 100%; background: #000; position: absolute; left: 0; bottom: -60px; }
.page-wr { padding: 24px 0 7px 50px; }
.page-wr a, .page-wr span { display: inline-block; float: left; margin-right: 44px; line-height: 1; color: #fff; font-size: 14px; font-family: "Arial"; width: 28px; padding-bottom: 18px; text-align: center; position: relative; cursor: pointer; }
.page-wr a:before { content: ""; width: 0; height: 4px; background: #e5e5e5; position: absolute; left: 50%; bottom: 0; transition: 288ms; }
.page-wr a:hover:before, .page-wr a.on:before { width: 100%; left: 0; }
.ptext { position: absolute; left: 50%; margin-left: -550px; top: 50%; margin-top: -72px; }
.ptext h3 { color: #fff; font-size: 48px; text-align: center; line-height: 1.2; padding-bottom: 26px; position: relative; }
.ptext h3:before { content: ""; width: 96px; height: 5px; background: #fff; position: absolute; left: 50%; margin-left: -48px; bottom: 0; }
.ptext small { display: block; line-height: 1; margin-top: 22px; font-size: 48px; font-weight: bold; font-family: "Arial"; text-align: center; color: #fff; }
.newtitle { color: #fff; font-size: 14px; font-weight: bold; position: absolute; left: 87px; bottom: 23px; line-height: 1; }
.newview { position: relative; background: #eeeeee; padding: 67px 0 10px; }
.view { width: 960px; margin: auto; }
.view-t { margin-bottom: 48px; }
.view-t h2 { color: #323232; font-size: 32px; margin-bottom: 22px; text-align: center; }
.view-t time { display: block; text-align: center; color: #969696; }
.view-text img { display: inline-block; max-width: 100%; height: auto; }
.view-text p { color: #646464; font-size: 14px; }
.pagepre { margin-top: 160px; padding: 22px 38px 7px; position: relative; background: #000; }
.pagepre a { display: inline-block; float: left; color: #fff; font-size: 14px; line-height: 1; padding-bottom: 16px; position: relative; }
.pagepre a:before { content: ""; width: 0; height: 4px; background: #fff; position: absolute; left: 0; bottom: 0; transition: 300ms ease-in-out; }
.pagepre a:hover:before { width: 100%; }
.pagepre a:nth-child(3) { float: right; }
.pagepre a:nth-child(2) { position: absolute; left: 50%; margin-left: -28px; top: 22px; }
.proclass { position: relative; padding-top: 170px; background: #eeeeee; }
.product-list { float: left; width: 363px; z-index: 20; background: #fff; position: relative; }
.product-list li { width: 181px; float: left; border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; position: relative; background: #fff; }
.product-list li:nth-child(2n+2) { border-right: none; }
.product-list li:before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #000; transform-origin: 100%; -webkit-transform-origin: 100%; -webkit-transition: -webkit-transform .38s cubic-bezier(.4, 0, .2, 1); transition: -webkit-transform .38s cubic-bezier(.4, 0, .2, 1); transition: transform .38s cubic-bezier(.4, 0, .2, 1); transition: transform .38s cubic-bezier(.4, 0, .2, 1), -webkit-transform .38s cubic-bezier(.4, 0, .2, 1); transform: scaleX(0); -webkit-transform: scaleX(0); visibility: hidden \9; }
.product-list li:hover:before { transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform-origin: 0; -webkit-transform-origin: 0; visibility: visible \9; }
.product-list li:hover a { color: #fff; }
.product-list li a { display: block; text-align: center; height: 134px; line-height: 134px; color: #323232; font-size: 14px; position: relative; font-weight: bold; }
.product-list li:nth-child(5), .product-list li:nth-child(6) { border-bottom: none; }
.product-fix { float: right; background: #000; }
.product-fix li { background: #000; }
.product-fix li a { color: #fff; text-align: center; }
.product-fix li a b { display: inline-block; padding-left: 48px; margin: auto; line-height: 134px; position: relative; }
.product-fix li a b img { display: block; max-width: 35px; max-height: 27px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.product-fix li:before { background: #797979; }
.product { padding: 114px 0 144px; background: #eeeeee; }
.producta { width: 1200px; margin: auto; position: relative; z-index: 10; }
.product-li { margin-bottom: 40px; background: #fff; }
.product-wr { padding: 33px 36px; }
.product-info { width: 24.7%; float: left; margin-right: 0.4%; overflow: hidden; position: relative; }
.product-info:last-child { margin-right: 0; }
.product-info figure { display: block; line-height: 1; overflow: hidden; }
.product-info figure img { display: block; width: 100%; height: auto; line-height: 1; transition: 523ms; }
.product-info:hover figure img { transform: scale(1.08); -webkit-transform: scale(1.08); -moz-transform: scale(1.08); }
.productview { position: relative; overflow: hidden; }
.demo { overflow: hidden; }
.news-fix { overflow: hidden; }
.carouseimg { position: relative; }
.prowred { padding: 45px 37px; width: 260px; height: 346px; }
.prolist { position: relative; }
.prolist li span { display: block; color: #000000; font-size: 14px; line-height: 1; margin-bottom: 11px; }
.prolist li h3 { color: #000000; font-size: 32px; font-weight: bold; line-height: 1.2; margin-bottom: 14px; }
.prolist li p { color: #969696; font-size: 14px; line-height: 2; }
.prolist li { position: absolute; left: 0; top: 0; display: none;
	-webkit-animation-name: content;
	animation-name: content;
	-webkit-animation-direction: normal;
	animation-direction: normal;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1; }
.prolist li.on { display: block; }
@-webkit-keyframes content {
	from {
		opacity: 0;
		-webkit-transform: translateY(5%);
		transform: translateY(5%);
	}
	to {
		opacity: 1;
		-webkit-transform: translateY(0%);
		transform: translateY(0%);
	}
}
@keyframes content {
	from {
		opacity: 0;
		-webkit-transform: translateY(5%);
		transform: translateY(5%);
	}
	to {
		opacity: 1;
		-webkit-transform: translateY(0%);
		transform: translateY(0%);
	}
}
.proband { padding: 89px 0 120px; }
.bicon strong { display: block; color: #000000; font-size: 20px; font-weight: bold; line-height: 1; margin-top: 23px; }
.map { position: relative; }
.map figure { display: block; overflow: hidden; position: relative; }
.map figure:before { content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); background: #000 \9; filter: alpha(opacity=30); position: absolute; left: 0; top: 0; }
.map figure img { display: block; line-height: 1; width: 100%; height: auto; }
.mapcontent { position: absolute; left: 50%; margin-left: -550px; top: 50%; }
.addresd { padding: 28px 40px; height: 250px; }
.add { min-height: 80px; }
.add b { display: inline-block; font-size: 14px; float: left; color: #969696; font-weight: bold; line-height: 1.2; }
.add h3 { color: #000000; font-size: 20px; width: 200px; font-weight: bold; margin-left: 16px; float: left; line-height: 1.3; }
.service-idea { position: relative; }
.idea { width: 50%; float: left; }
.services { float: right; margin-right: 142px; width: 327px; background: #000; height: auto; position: relative; z-index: 10; }
.ideawr { padding: 50px 26px; }
.ideawr h3 { color: #fff; font-size: 32px; line-height: 1; margin-bottom: 23px; }
.ideawr p { color: #fff; font-size: 14px; font-weight: bold; }
.conservice { padding: 0; padding-bottom: 103px; }
.conservice .bicon { top: 108px; }
.idea { padding: 77px 0 60px; }
.stored { width: 50%; float: left; background: #eeeeee; position: relative; }
.store-wr { padding: 68px 88px 50px; }
.storecheck { margin-bottom: 36px; }
.storecheck h3 { color: #323232; font-size: 32px; line-height: 1; margin-bottom: 26px; }
.select { float: left; margin-right: 8px; padding-left: 20px; width: 208px; height: 56px; line-height: 56px; color: #646464; font-size: 14px; background: #fff; padding-top: 0; padding-bottom: 0; outline: none; border: none; border-radius: 0; cursor: pointer; font-family: "微軟正黑體"; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.check { float: left; width: 65px; height: 56px; background: #fff; text-align: center; line-height: 56px; font-family: "微軟正黑體"; font-size: 14px; color: #646464; cursor: pointer; border: none; outline: none; transition: 344ms; }
.check:hover { background: #000; color: #fff; }
.store-list { width: 540px; }
.store-list li { padding: 34px 0 25px; border-bottom: 1px solid #d2d2d2; }
.store-list li:last-child { border-bottom: none; }
.store-list li b { display: block; width: 18px; height: 18px; text-align: center; line-height: 18px; border: 1px solid #a0a0a0; color: #646464; font-size: 14px; float: left; }
.store-text { width: 492px; float: right; }
.store-text span { color: #646464; font-size: 14px; line-height: 20px; margin-bottom: 4px; display: block; }
.store-text span i { font-style: normal; display: inline-block; margin-left: 22px; }
.map .line:after { height: 1056px; }
.memberView { width: 740px; margin: auto; background: #fff; border-radius: 12px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
.recolite { padding-bottom: 0; }
.recourewr { padding: 50px 45px 107px; }
.recouret { margin-bottom: 55px; }
.recoure-info { float: left; }
.recoure-info:nth-child(1) { width: 56.9%; }
.recoure-info:nth-child(2) { width: 18.77%; }
.recoure-info span { display: block; color: #969696; font-size: 14px; line-height: 1; margin-bottom: 16px; }
.recoure-info strong { display: block; color: #000000; font-size: 32px; line-height: 1; font-weight: normal; }
.posite h3 { color: #323232; font-size: 14px; line-height: 1; padding-bottom: 10px; border-bottom: 1px solid #a0a0a0; margin-bottom: 12px; }
.posite p { color: #646464; font-size: 14px; }
.hdhapp { margin-top: 30px; border-top: 1px solid #a0a0a0; padding-top: 23px; }
.hdhapp p { color: #646464; font-size: 18px; }
#proPage { position: fixed; top: 0; left: 0; right: 0px; bottom: 0px; z-index: 1006; background: rgba(255, 255, 255, 0.9); background: #000 \9; filter: alpha(opacity=80); overflow: hidden; -webkit-overflow-scrolling: touch; display: block; visibility: hidden; z-index: 1010; opacity: 0; transition: 560ms; }
.pro-bd { left: 50%; width: 740px; margin-left: -370px; cursor: default; opacity: 0; position: fixed; top: 50%; visibility: hidden; z-index: 1020; }
html.openPH body { -webkit-transition: all 0s; -moz-transition: all 0s; -ms-transition: all 0s; transition: all 0s; }
html.openPH #proPage { overflow-y: auto; }
html.openPH .introduct-mark { overflow-y: auto; }
html.openPH .introduct-mark .introduct-filex { top: 0; position: absolute; box-sizing: border-box; margin-top: 0 !important; }
html.openPH #proPage .pro-bd { top: 0; position: absolute; box-sizing: border-box; margin-top: 0 !important; }
.pro-page { position: relative; }
html.openPro #proPage { visibility: visible; opacity: 1; transition: 560ms; }
html.openPro .pro-bd { opacity: 1; -webkit-animation: flipInX .8s ease-in-out both; -moz-animation: flipInX .8s ease-in-out both; -ms-animation: flipInX .8s ease-in-out both; animation: flipInX .8s ease-in-out both; visibility: visible; }
.resource { position: absolute; left: 86px; bottom: 40px; }
.resource small { color: #fff; font-size: 36px; font-family: "Arial"; line-height: 0.9; margin-bottom: 32px; display: block; }
.resource h3 { color: #fff; font-size: 36px; line-height: 1; }
.recuite-box { padding: 108px 0 118px; }
.recuite { width: 936px; margin: auto; }
.recuite-list li { position: relative; cursor: pointer; width: 32.3%; margin-right: 1.55%; margin-bottom: 36px; float: left; background: #fff; overflow: hidden; }
.recuite-list li:before { content: ""; width: 0; height: 0; background: #000; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); border-radius: 50%; transition: 540ms; }
.recuite-list li:hover:before { width: 140%; height: 200%; left: 100% \9; top: 100% \9; left: 0 \9; top: 0 \9; }
.recuite-list li:hover .recuited h3 { color: #fff; }
.recuite-list li:hover .recuited strong { color: #fff; }
.recuite-list li:hover .recuited strong i { color: #fff; }
.recuite-list li:hover .need p { color: #fff; }
.recuite-list li:nth-child(3n+3) { margin-right: 0; }
.recuited { padding: 24px 26px 22px; height: 144px; position: relative; }
.recuited h3 { color: #323232; font-size: 24px; line-height: 1; transition: 330ms; position: relative; }
.recuited h3 strong { display: block; color: #323232; line-height: 0.8; position: absolute; right: 43px; top: 0; font-size: 50px; font-weight: normal; transition: 330ms; }
.recuited h3 strong i { color: #323232; font-size: 14px; font-weight: bold; font-style: normal; line-height: 1; position: absolute; right: -19px; top: 0; transition: 330ms; }
.need { position: absolute; left: 26px; width: 254px; bottom: 18px; }
.need p { color: #323232; font-size: 14px; font-weight: bold; line-height: 1.3; transition: 330ms; }
.wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; transition: transform 1s cubic-bezier(0.86, 0, 0.03, 1); -webkit-transition: transform 1s cubic-bezier(0.86, 0, 0.03, 1); }
.wrapper .page { position: relative; overflow: hidden; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: 0.3; transition: opacity 0.8s 0ms cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: opacity 0.8s 0ms cubic-bezier(0.445, 0.145, 0.355, 1); }
.wrapper.active-page1 .page.page1 { opacity: 1; transition-delay: 0.3s; -webkit-transition-delay: 0.3s; }
.wrapper.active-page2 .page.page2 { opacity: 1; transition-delay: 0.3s; -webkit-transition-delay: 0.3s; }
.wrapper.active-page3 .page.page3 { opacity: 1; transition-delay: 0.3s; -webkit-transition-delay: 0.3s; }
.wrapper.active-page3 .page.page3 .commonicon { -webkit-animation: flipInX .8s .6s ease-in-out both; -moz-animation: flipInX .8s .6s ease-in-out both; -ms-animation: flipInX .8s .6s ease-in-out both; animation: flipInX .8s .6s ease-in-out both; }
.wrapper.active-page4 .page.page4 { opacity: 1; transition-delay: 0.3s; -webkit-transition-delay: 0.3s; }
.wrapper.active-page4 .page.page4 .commonicon { -webkit-animation: flipInX .8s .6s ease-in-out both; -moz-animation: flipInX .8s .6s ease-in-out both; -ms-animation: flipInX .8s .6s ease-in-out both; animation: flipInX .8s .6s ease-in-out both; }
.wrapper.active-page5 .page.page5 { opacity: 1; transition-delay: 0.3s; -webkit-transition-delay: 0.3s; }
.wrapper.active-page5 .page.page5 .commonicon { -webkit-animation: flipInX .8s .6s ease-in-out both; -moz-animation: flipInX .8s .6s ease-in-out both; -ms-animation: flipInX .8s .6s ease-in-out both; animation: flipInX .8s .6s ease-in-out both; }
.wrapper .page6 { opacity: 1; height: auto !important; }
.commonicon { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; }
@-webkit-keyframes flipInX {
	0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 }
	40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg) }
	70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg) }
	100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1 }
}
@keyframes flipInX {
	0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 }
	40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg) }
	70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg) }
	100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1 }
}
.page1 .bannerdown { left: 88px; bottom: 22px; z-index: 12; }
.characters { width: 50%; background: rgba(47, 49, 139, 0.95); background: #000 \9; filter: alpha(opacity=95); position: absolute; right: 0; bottom: 0; z-index: 12; }
.characters:before { content: ""; width: 9px; height: 80%; background: #e6d6c1; position: absolute; left: 27px; top: 0; }
.characters span { display: block; color: #fff; font-size: 44px; font-weight: bold; line-height: 112px; margin-left: 64px; }
.pagenav { position: fixed; left: 88px; top: 20%; z-index: 30; }
.pageicon { margin-bottom: 29px; z-index: 30; }
.pageicon img { display: block; width: 141px; height: 163px; line-height: 1; }
.side_btn_ul { width: 141px; opacity: 0; visibility: hidden; transition: 550ms; }
.side_btn_ul.in { opacity: 1; visibility: visible; }
.side_btn_ul li { border-bottom: 1px solid #6a6cc9; cursor: pointer; position: relative; background: #000; }
.side_btn_ul li:nth-child(1), .side_btn_ul li:last-child { border-bottom: none; }
.side_btn_ul li:before { content: ""; width: 100%; height: 0%; position: absolute; left: 0; top: 50%; background: #cfa972; transition: 323ms ease-in-out; opacity: 0; }
.side_btn_ul li span { display: block; line-height: 50px; color: #fff; position: relative; font-size: 16px; text-align: center; }
.side_btn_ul li.active:before, .side_btn_ul li:hover:before { height: 100%; top: 0; opacity: 1; }
.title { padding: 15px 0; border-top: 1px solid #d2c7ab; border-bottom: 1px solid #d2c7ab; color: #d2c7ab; font-size: 48px; line-height: 0.9; display: inline-block; font-family: "helveticaneuelight"; font-weight: normal; text-transform: uppercase; }
.cultre-icon { width: 50%; position: absolute; height: 100%; left: 0; top: 0; }
.commonicon { position: absolute; left: 50%; margin-left: -120px; top: 50%; margin-top: -179px; width: 240px; }
.icontop { padding: 24px 0 24px 36px; background: #000; }
.icontop strong { display: block; color: #fff; line-height: 1.6; font-size: 32px; letter-spacing: 16px; }
.icontop p { color: #fff; font-size: 14px; padding-right: 36px; margin-top: 10px; }
.commonicon figure { display: block; overflow: hidden; line-height: 1; }
.commonicon figure img { display: block; width: 100%; height: auto; }
.culturefix { width: 50%; height: 100%; position: absolute; right: 0; top: 0; background: #f6f1e4; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; box-align: center; -webkit-box-align: center; align-items: center; -webkit-align-items: center; }
.culturefix .title { color: #34368b; }
.culturelist { overflow: hidden; width: 635px; position: relative; padding-bottom: 20px; }
.culture-list { margin-top: 32px; }
.culture-list strong { display: block; color: #323232; font-size: 14px; }
.culture-list p { color: #646464; font-size: 14px; }
.cultured { overflow: hidden; height: 304px; margin-top: 48px; width: 525px; }
.title-list { margin-top: 70px; }
.listimg { padding: 82px 80px 150px; background: #eeeeee; }
.flex-images { overflow: hidden; }
.flex-images .item { float: left; overflow: hidden; position: relative; margin: 0 2px; margin-bottom: 48px; }
.flex-images .item.product-info { width: 100%; }
.flex-images .item.product-info:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); }
.flex-images .item.product-info img { width: 100%; max-height: 100%; transition: 520ms; }
.commontop span { -webkit-transform: scale(1); transform: scale(1); opacity: 0; }
.flexbo.on { padding-right: 0; }
.flexbo.on .commontop span { -webkit-animation: fadeInUp .8s ease-in-out both; -moz-animation: fadeInUp .8s ease-in-out both; -ms-animation: fadeInUp .8s ease-in-out both; animation: fadeInUp .8s ease-in-out both; opacity: 1; }
.commontop i { opacity: 0; visibility: hidden; transform: scale(0.2); -webkit-transform: scale(0.2); -moz-transform: scale(0.2); }
.flexbo.on .commontop i { opacity: 1; visibility: visible; transition: 0.8s ease-in-out; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); }
.commoned { display: none; opacity: 0; }
.commoned.on { -webkit-animation: lightSpeedIn .8s ease-out; -moz-animation: lightSpeedIn .8s ease-out; -ms-animation: lightSpeedIn .8s ease-out; animation: lightSpeedIn .8s ease-out; opacity: 1; display: block; }
@-webkit-keyframes boingInUp {
	0% { opacity: 0; -webkit-transform-origin: 50% 0%; -webkit-transform: perspective(800px) rotateX(-90deg); }
	50% { opacity: 1; -webkit-transform-origin: 50% 0%; -webkit-transform: perspective(800px) rotateX(50deg); }
	100% { opacity: 1; -webkit-transform-origin: 50% 0%; -webkit-transform: perspective(800px) rotateX(0deg); }
}
@keyframes boingInUp {
	0% { opacity: 0; transform-origin: 50% 0%; transform: perspective(800px) rotateX(-90deg); }
	50% { opacity: 1; transform-origin: 50% 0%; transform: perspective(800px) rotateX(50deg); }
	100% { opacity: 1; transform-origin: 50% 0%; transform: perspective(800px) rotateX(0deg); }
}
@-webkit-keyframes fadeInUp {
	0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px) }
	100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) }
}
@keyframes fadeInUp {
	0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px) }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) }
}
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp }
@-webkit-keyframes rubberBand {
	0% { -webkit-transform: scale(1); transform: scale(1) }
	30% { -webkit-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75) }
	40% { -webkit-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25) }
	60% { -webkit-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85) }
	100% { -webkit-transform: scale(1); transform: scale(1) }
}
@keyframes rubberBand {
	0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) }
	30% { -webkit-transform: scaleX(1.25) scaleY(0.75); -ms-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75) }
	40% { -webkit-transform: scaleX(0.75) scaleY(1.25); -ms-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25) }
	60% { -webkit-transform: scaleX(1.15) scaleY(0.85); -ms-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85) }
	100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) }
}
@-webkit-keyframes lightSpeedIn {
	0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0 }
	60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1 }
	80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1 }
	100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1 }
}
@keyframes lightSpeedIn {
	0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0 }
	60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1 }
	80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1 }
	100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1 }
}
.recommend-list.article-block li { opacity: 0; }
.recommend-list.articleShow li { -webkit-animation: fadeInUp .6s ease-in-out both; -moz-animation: fadeInUp .6s ease-in-out both; -ms-animation: fadeInUp .6s ease-in-out both; animation: fadeInUp .6s ease-in-out both; opacity: 1; }
.recommend-list.articleShow li:nth-child(2) { animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
.recommend-list.articleShow li:nth-child(3) { animation-delay: 0.6s; -webkit-animation-delay: 0.6s; }
.procenter.article-block, .product-list.article-block { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; }
.procenter.articleShow, .product-list.articleShow { -webkit-animation: flipInX .8s ease-in-out both; -moz-animation: flipInX .8s ease-in-out both; -ms-animation: flipInX .8s ease-in-out both; animation: flipInX .8s ease-in-out both; }
.product-fix.articleShow { animation-delay: 3.4s; -webkit-animation-delay: 0.34s; -moz-animation-delay: 0.34s; }
.brandimg.article-block figure { transform: translateX(85px); -webkit-transform: translateX(85px); -moz-transform: translateX(85px); opacity: 0; transition: 760ms; }
.brandimg.articleShow figure { opacity: 1; transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); }
.brandimg.article-block i { height: 0; opacity: 0; transition: 650ms 0ms; }
.brandimg.articleShow i { height: 100%; opacity: 1; }
.startfix.article-block { opacity: 0; transform: translateX(125px); -webkit-transform: translateX(125px); }
.startfix.articleShow { opacity: 1; transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); transition: 788ms; }
.startimg.article-block { position: relative; top: 88px; opacity: 0; }
.startimg.articleShow { opacity: 1; top: 0; transition: 750ms 340ms; }
@-webkit-keyframes spaceInUp {
	0% { opacity: 0; -webkit-transform-origin: 50% 0%; -webkit-transform: scale(.2) translate(0%, -200%); }
	100% { opacity: 1; -webkit-transform-origin: 50% 0%; -webkit-transform: scale(1) translate(0%, 0%); }
}
@keyframes spaceInUp {
	0% { opacity: 0; transform-origin: 50% 0%; transform: scale(.2) translate(0%, -200%); }
	100% { opacity: 1; transform-origin: 50% 0%; transform: scale(1) translate(0%, 0%); }
}
.ptext.article-block { opacity: 0; -webkit-transform-origin: 50% 0%; -webkit-transform: scale(.2) translate(0%, -200%); }
.ptext.articleShow { opacity: 1; -webkit-animation: spaceInUp .6s ease-in-out both; -moz-animation: spaceInUp .6s ease-in-out both; -ms-animation: spaceInUp .6s ease-in-out both; animation: spaceInUp .6s ease-in-out both; }
.resource.article-block { opacity: 0; visibility: hidden; transform: translateY(-88px); -webkit-transform: translateY(-88px); -moz-transform: translateY(-88px); transition: 688ms; }
.resource.articleShow { opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); visibility: visible; }
.brandfix.article-block { transform: translateY(100px); -webkit-transform: translateY(100px); -moz-transform: translateY(100px); opacity: 0; visibility: hidden; }
.brandfix.articleShow { opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); transition: 580ms; }