@charset "utf-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, 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, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0px; border: 0; font-size: 100%; outline: none; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; overflow-x: hidden; }
body { font: 12px/1.8 "微軟正黑體","Microsoft YaHei New","Microsoft Yahei","微软雅黑","Arial","Helvetica","SimHei",sans-serif; margin: 0 auto; color: #989898; background-color: #8996a0; _background-attachment:fixed; 
_background-image:url(about:blank);}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
input, select { vertical-align: middle; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
input { outline: none; padding:0;}
img { border: 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;}
::-moz-selection { background: #1686cc; color: #fff; text-shadow: none; }
::selection { background: #1686cc; color: #fff; text-shadow: none; }
a { text-decoration: none; blr: expression(this.onFocus=this.blur()); cursor: pointer; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
a:link, a:visited { text-decoration: none; }
a:active, a:hover { text-decoration: none; }
.clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0px; }
.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:1200px; margin: 0px auto;}
.display {display:none;}
.header-box{ width:100%; position:fixed; left:0; top:0; z-index:59;  background:url(../images/bg2.png) repeat-x left top;}
.header-box:before{ content:""; width:100%; height:0%; position:absolute; left:0; top:0; background:#1686cc; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s;}
.header-box.scoll:before{ height:100%;}
.header-box.scoll .header{ padding:12px 60px 12px 123px; border-bottom:0px solid #7d7d7d; transition:padding 0.44s,border 0.35s 0.5s;}
.header{ padding:25px 60px 25px 123px; position:relative; z-index:5; transition:0.44s;}
.nav{ float:right; padding-top:18px;}
.nav >li{ float:left; position:relative; margin-right:60px;}
.nav >li >a{ display:block; line-height:1; color:#ffffff; font-size:16px; padding-bottom:12px; position:relative;}
.nav >li >a:before{ content:""; width:13px; height:3px; background:#fff; position:absolute; left:0; bottom:0; width:0; transition:0.25s ease-in-out;}
.nav >li:hover >a:before,.nav >li.cureent >a:before{ width:13px;}
.levalwr{ padding-top:7px; width:130px; position:absolute; left:50%; margin-left:-65px; top:27px; opacity:0; visibility:hidden; transform:translateY(34px); -webkit-transform:translateY(34px); -moz-transform:translateY(34px); transition:0.3s ease;}
.levaldown{ background:#fff; padding:7px 0 8px;}
.levaldown li{ position:relative; overflow:hidden;}
.levaldown li:before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); width: 0; height:0; background: #ececec; border-radius:50%; opacity:0; visibility:hidden; transition:0.35s;}
.levaldown li a{ display:block; text-align:center; height:29px; line-height:29px; color:#010101; font-size:14px; position:relative; z-index:4;}
.levaldown li:hover:before{ opacity:1; visibility:visible; width:110%; height:280%;} 
.nav >li:hover .levalwr{ opacity:1; visibility:visible; z-index:5; transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0);}
.logo{ width:320px; line-height:1; float:left;}
.logo img{ display:block; width:100%; height:auto; line-height:1;}
.navigate{ display:none; padding:8px 5%; border-bottom:1px solid #7d7d7d; position:relative; z-index:5;}
.natitle{ float:left; color:#fff; font-size:18px; line-height:40px; font-weight:normal;}
.ilogo{ display:block; height:40px; width:auto; float:left;}
.menus{ float:right; margin-top:11px; line-height:1;}
.menus span { position: relative; display: inline-block; width: 27px; height: 17px; vertical-align: middle; -webkit-transition-duration: .3s,.3s; -moz-transition-duration: .3s,.3s; -ms-transition-duration: .3s,.3s; -o-transition-duration: .3s,.3s; transition-duration: .3s,.3s; -webkit-transition-delay: .3s,0s; -moz-transition-delay: .3s,0s; -ms-transition-delay: .3s,0s; -o-transition-delay: .3s,0s; transition-delay: .3s,0s; }
.menus span:after,
.menus span:before { content: ""; position: absolute; display: inline-block; width: 100%; height: 3px; left: 0; background-color: #fff; -webkit-transition-duration: .3s,.3s; -moz-transition-duration: .3s,.3s; -ms-transition-duration: .3s,.3s; -o-transition-duration: .3s,.3s; transition-duration: .3s,.3s; -webkit-transition-delay: .3s,0s; -moz-transition-delay: .3s,0s; -ms-transition-delay: .3s,0s; -o-transition-delay: .3s,0s; transition-delay: .3s,0s; }
.menus span:before { top: 0; -webkit-transition-property: top,transform; -moz-transition-property: top,transform; -ms-transition-property: top,transform; -o-transition-property: top,transform; transition-property: top,transform; }
.menus span:after { bottom: 0; -webkit-transition-property: bottom,transform; -moz-transition-property: bottom,transform; -ms-transition-property: bottom,transform; -o-transition-property: bottom,transform; transition-property: bottom,transform; }
.menus.active span { background-color: transparent; -webkit-transition-delay: 0s,0s; -moz-transition-delay: 0s,0s; -ms-transition-delay: 0s,0s; -o-transition-delay: 0s,0s; transition-delay: 0s,0s; }
.menus.active span:after, .menus.active span:before { -webkit-transition-delay: 0s,.3s; -moz-transition-delay: 0s,.3s; -ms-transition-delay: 0s,.3s; -o-transition-delay: 0s,.3s; transition-delay: 0s,.3s; }
.menus.active span:before { top: 7px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.menus.active span:after { bottom:7px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.navfix{ width:100%; height:100%; padding-top:56px; box-sizing:border-box; overflow-y:auto; position:fixed; left:0%; top:0; background:#8996a0; display:none;}
.navfix.on .navwrs{ opacity:1; visibility:visible; transition:0.5s;}

.navwrs{ position:relative; height:100%; opacity:0; visibility:hidden; transition:0s;}
.navlist{ width:100%; padding-top:42px; transition:0.35s;}
.navlist.actives{ width:37.5%;}  
.navlist.actives >li >a{ margin-left:14px;}
.navlist >li >a{ display:block; text-align:center; color:#ffffff; font-size:18px; line-height:56px; position:relative; transition:0s;}
.navlist >li >a.now{ color:#323232; background:#d5d5d5; transition:0.35s;}
.levalbox{ width:62.5%; height:100%; position:absolute; right:0; top:0; box-sizing:border-box; padding-top:42px; padding-left:68px; z-index:4; opacity:0; visibility:hidden; transition:0; overflow:hidden;}
.levalbox:before{ content:""; width:0%; height:100%; background:#d5d5d5; position:absolute; right:0; top:0; transform-origin:right 0; transition:0;}
.levalin{ opacity:0; position:relative; width:100%; left:5%; transition:0s; z-index:6;}
.levalbox.on{ opacity:1; visibility:visible; transition:0.35s;}
.levalbox.on:before{ width:100%; transition:0.35s;}
.levalbox.on .levalin{ opacity:1; left:0; transition:0.35s 0.3s;}

.levalbox .lclose{ display:inline-block; height:56px; line-height:56px; font-size:16px; color:#646464; position:relative;}
.levalmenu{ position:relative;}
.levalmenu li a{ display:inline-block; height:56px; line-height:56px; color:#646464; font-size:16px;}

.flexbg{ position:fixed; width:100%; height:100%; left:0; top:0; z-index:-1; background:url(../images/linebg.png) center top no-repeat;}
.decorate{ padding-top:250px; position:relative; z-index:5;}
.decoratewr{ width:87.8%; float:right;}
.decoratitle small{ display:block; color:#fff; font-size:88px; line-height:1; }
.decoratitle span{ display:block; margin-top:20px; color:#ffffff; font-size:30px;}
.decoratbtn{ margin-top:-4px; text-align:right;}
.decoratbtn .more{ float:right; margin-right:94px;}
.more{ width:78px; height:68px; position:relative; background:url(../images/triangle.png) center no-repeat; transition:0.34s;}
.more a{ display:block; height:68px; background:url(../images/arrow1.png) center 33px no-repeat; animation:arrow 1000ms infinite; -webkit-animation:arrow 1000ms infinite; -moz-animation:arrow 1000ms infinite;}
@-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, 6px, 0px); }
}

@keyframes arrow {
    0% { opacity: 0; transform: translate3d(0px, 0px, 0px); }
    33% { opacity: 1; }
    66% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(0px, 6px, 0px); }
}

@-ms-keyframes arrow {
    0% { opacity: 0; -ms-transform: translate3d(0px, 0px, 0px); }
    33% { opacity: 1; }
    66% { opacity: 1; }
    100% { opacity: 0; -ms-transform: translate3d(0px, 6px, 0px); }
}

@-webkit-keyframes arrow1 {
    0% { opacity: 0; -webkit-transform: translate3d(0px, 0px, 0px); }
    33% { opacity: 1; }
    66% { opacity: 1; }
    100% { opacity: 0; -webkit-transform: translate3d(6px, 0px, 0px); }
}

@keyframes arrow1 {
    0% { opacity: 0; transform: translate3d(0px, 0px, 0px); }
    33% { opacity: 1; }
    66% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(6px, 0px, 0px); }
}

@-ms-keyframes arrow1 {
    0% { opacity: 0; -ms-transform: translate3d(0px, 0px, 0px); }
    33% { opacity: 1; }
    66% { opacity: 1; }
    100% { opacity: 0; -ms-transform: translate3d(6px, 0px, 0px); }
}
.more:hover{ background:url(../images/triangle1.png) center no-repeat;}
.more:hover a{ background-position:center 37px;}
.office{ position:relative; margin-top:68px;}
.officele{ width:82.57%; position:relative; z-index:5; overflow:hidden; line-height:0;}
.officele img{ height:100%; width:auto; position:absolute; right:3.5893%; top:0; line-height:0;}
.officele .officebg{ width:100%; height:auto; line-height:1; position:relative; right:0;}

.officeimg{ width:35.25%; height:100%; position:absolute; right:0; top:0;}
.officeimg img{ display:block; height:100%; width:auto; position:absolute; right:0; top:0;}
.officefixs{ width:140%; height:100%; position:absolute; right:0; top:0; background-position:center right; background-size:cover;}

.workplace{ padding-left:12.2%; padding-right:12.2%; padding-top:134px; position:relative; padding-bottom:140px;}
.feel{ margin-top:70px;}
.feelinfo{ width:47.5%; float:left;padding-bottom:1.6%;padding-top:1.6%;}
.feelinfo:nth-child(2n+2){ float:right;} 
.feelinfo b{ display:block; line-height:1; color:#fff; font-size:14px;  font-weight:normal; margin-bottom:24px;}
.feelinfo strong{ display:block; line-height:1; color:#fff; font-size:24px; font-weight:normal; position:relative; padding-bottom:13px;}
.feelinfo strong:before{ content:""; width:0; height:1px; background:#ff2524; position:absolute; left:0; bottom:0; transition:0.36s;}
.feelinfo figure{ display:block; line-height:1; overflow:hidden; margin-top:28px; position:relative; }
.fellbgs{ width:100%; left:%; top:0; height:100%; background-size:cover; background-position:50%; position:absolute;}
.feelinfo figure img{ display:block; width:100%; height:auto; line-height:1; transition:0.5s; opacity:0; visibility:hidden;}
.feelinfo:hover strong:before{ width:70px;}
.feelinfo:hover figure img{ -webkit-filter: brightness(0.50);filter: brightness(0.50); transform:scale(1.03); -webkit-transform:scale(1.03); -moz-transform:scale(1.03);}
.cases{  position:relative;}
.cases .decoratewr{ float:left;}
.casewr{ position:relative; overflow:hidden; line-height:1;}
.casewr >li{ overflow:hidden; -webkit-animation: decreaseHeight 0.8s forwards ease-in-out; animation: decreaseHeight 0.8s forwards ease-in-out; z-index:4 !important; opacity:1 !important;}
.casewr >li >figure{ display:block; line-height:1; overflow:hidden; width:100%;}
.casewr >li >figure >img{ display:block; width:100% \9!important; height:auto; line-height:0; position:relative; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); left:0\9; transform:none\9; -webkit-transform:none\9; -moz-transform:none\9;}
.casewr >li.flex-active-slide{  -webkit-animation: show 0.8s forwards ease-in-out; animation: show 0.8s forwards ease-in-out; z-index:3 !important;}

@-webkit-keyframes decreaseHeight {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		width: 0;
	}
}

@keyframes decreaseHeight {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		width: 0;
	}
}
@-webkit-keyframes show {
	0% {
		opacity: 0;
	}
	1%,100% {
		opacity: 1;
	}
}

@keyframes show {
	0% {
		opacity: 0;
	}
	1%,100% {
		opacity: 1;
	}
}

.case{ overflow:hidden; width:100%;}
.case .flex-direction-nav{ width:444px; left:12%; margin-left:97px; bottom:227px; z-index:10; position:absolute;}
.case .flex-direction-nav li a{ display:block; width:23px; height:10px; text-indent:9999px; overflow:hidden; position:absolute; bottom:0; z-index:10;}
.case .flex-direction-nav li a.flex-prev{ left:0; background:url(../images/arrow2.png) center no-repeat;}
.case .flex-direction-nav li a.flex-prev:hover{ left:-2px;}
.case .flex-direction-nav li a.flex-next{ right:0; background:url(../images/arrow3.png) center no-repeat;}
.case .flex-direction-nav li a.flex-next:hover{ right:-2px;}  
.casetext{ width:73.9%; height:100%; position:absolute; left:12%; top:0; background:url(../images/casebg.png) right top no-repeat; z-index:6; background-size:cover;}
.casefix{ width:444px; margin-left:97px; position:relative; height:100%;}
.decoratitle b{ color:#fff; font-size:36px; line-height:1.4; font-style:normal;  display:block; font-weight:normal;}
.casefix .decoratitle{ padding-top:103px;}
.caselist{ width:100%; position:absolute; left:0; bottom:0; height:196px;}
.caselist li{ width:100%; position:absolute; left:0; top:0; visibility:hidden;  opacity:0;}
.caselist li h3{ color:#fff; font-size:24px; font-weight:normal; line-height:1; margin-bottom:20px; transform:translateY(40px); -webkit-transform:translateY(40px); -moz-transform:translateY(40px);}
.caselist li p{ color:#ffffff; font-size:14px; line-height:2; overflow:hidden; height:140px; transform:translateY(40px); -webkit-transform:translateY(40px); -moz-transform:translateY(40px);}
.caselist li.on{ opacity:1; visibility:visible; transition:0.36s;}
.caselist li.on h3{ transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0); transition:0.38s 0.2s;}
.caselist li.on p{ transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0); transition:0.38s 0.32s;}

.theory-box{ padding:0px 0 0; background:#;}
.decoratetop{ padding-bottom:66px;}
.decorateli{ margin-top:94px; padding-right:11.87%;}
.decorateli li{ width:20.58%; float:left; margin-right:5.893333%; font-family:"微软雅黑"; position:relative;}
.decoratefix{ position:relative; top:0; transition:0.35s;}
.decorateli li:nth-child(4n+4){ margin-right:0;}
.decorateli li time{ display:block; padding-left:54px; height:34px; line-height:34px; color:#fff; font-size:12px;  background:url(../images/time.png) left center no-repeat; margin-bottom:32px;}
.decorateli li strong{ display:block; line-height:1.2; color:#ffffff; font-size:18px; font-weight:normal; white-space:nowrap; text-overflow:ellipsis; margin-bottom:24px; overflow:hidden;}
.decorateli li p{ color:#e1e1e1; font-size:14px; height:50px; overflow:hidden;}

.nlistli{ margin-top:94px; padding-right:%;}
.nlistli li{ width:47%; float:left; margin-right:5.893333%; font-family:"微软雅黑"; position:relative;}
.nlistlifix{ position:relative; top:0; transition:0.35s;}
.nlistli li:nth-child(2n+2){ margin-right:0;}
.nlistli li time{ display:block; padding-left:54px; height:34px; line-height:34px; color:#fff; font-size:12px;  background:url(../images/time.png) left center no-repeat; margin-bottom:32px;}
.nlistli li strong{ display:block; line-height:1.2; color:#ffffff; font-size:18px; font-weight:normal; white-space:nowrap; text-overflow:ellipsis; margin-bottom:24px; overflow:hidden;}
.nlistli li p{ color:#e1e1e1; font-size:14px; height:50px; overflow:hidden;}

.team{ position:relative; background:#eaeaea;}
.designer{ width:43%; float:left; position:relative; z-index:5;}
.desigerwr{ padding:100px 13.35% 120px;}
.desigers{ height:250px; margin-top:50px;}
.desigers a{  color:#fff;}
.desigerwr p{ color:#fff; font-size:14px;}
.teambg{ width:57%; height:100%; position:absolute; left:0; top:0; background:#1686cc;} 
.more1{ float:none; position:relative; width:68px; height:78px; background:url(../images/triangle2.png) center no-repeat;}
.more1 a{ height:78px; background:url(../images/arrow4.png) 14px center no-repeat; animation:arrow1 1000ms infinite; -webkit-animation:arrow1 1000ms infinite; -moz-animation:arrow1 1000ms infinite;}
.more1:hover{ background:url(../images/triangle3.png) center no-repeat;}
.more1:hover a{ background:url(../images/arrow3.png) 16px center no-repeat;}
.desigerimg{ width:57%; float:left; height:100%; position:absolute; right:0; top:0; overflow:hidden;}
.desigerbg{ width:140%; height:100%; background-size:cover; position:absolute; left:-20%; top:0; display:none\9;}
.desigerimg img{ width:auto; height:100%; line-height:0; opacity:0; visibility:hidden; opacity:1\9; visibility:visible\9;}
.desigerimg{ background-size:cover;}
.footer-box{ padding-top:76px; background:#8996a0;}
.products{ padding-left:12.2%; padding-bottom:120px; border-bottom:1px solid #778591;}
.aboutle{ float:left; width:45.55%;}
.aboutle small{ display:block; color:#fff; font-size:18px; margin-bottom:130px;}
.aboutle h3{ color:#fff; font-weight:normal; font-size:40px;  line-height:1.2;}
.aboutle h3 a{ color:#fff;display:block; }
.aboutle h3 a:hover{ color:#1686cc;}
.conts{ width:35%; float:left;}
.contrr{ width:15%; float:left;}
.conwr small{ display:block; color:#fff; font-size:18px; margin-bottom:130px;}
.address p{ color:#ffffff; font-size:14px; margin-bottom:10px; font-style:normal; }
.viewmore{ margin-top:35px; width:195px; height:51px; position:relative; background:#51626f; overflow:hidden;}
.viewmore:before{ display:block; content:""; background:#1686cc; position:absolute; left:0; top:0; width:110%; height:100%; transition:-webkit-transform .35s cubic-bezier(.52,.08,.18,1); transition:transform .35s cubic-bezier(.52,.08,.18,1); transform-origin:right top; transform:translateX(-101%) skewX(-17.62deg); -webkit-transform:translateX(-101%) skewX(-17.62deg); visibility:hidden;}
.viewmore a,.viewmore span{ display:block; position:relative; z-index:5; line-height:51px; text-align:center; color:#fff;  font-size:14px;}
.viewmore:hover:before{ transform-origin:left top; transform:translateX(0) skewX(-17.62deg); -webkit-transform:translateX(0) skewX(-17.62deg); visibility:visible;}
.viewmore:hover a,.viewmore:hover span{ color:#fff;}
.edites{ width:75.6%; margin:auto; padding:30px 0 42px;}
.edites p,.edites a{ display:inline-block; float:left; color:#ffffff; font-size:14px;}
.edites p a{ padding-left:10px;}
.edites a{ float:right;}
.edites a:hover{ color:#1686cc;}
.decorateli li .viewmore{ width:120px; height:28px; margin-top:14px; transition:0.35s; opacity:0; visibility:hidden;}
.decorateli li .viewmore span{ height:28px; line-height:28px;}
.decorateli li:hover .decoratefix{ top:-30px; transition:0.35s 0s;}
.decorateli li:hover .viewmore{ opacity:1; visibility:visible;}

.nlistli li .viewmore{ width:120px; height:28px; margin-top:14px; transition:0.35s; opacity:0; visibility:hidden;}
.nlistli li .viewmore span{ height:28px; line-height:28px;}
.nlistli li:hover .nlistlifix{ top:-30px; transition:0.35s 0s;}
.nlistli li:hover .viewmore{ opacity:1; visibility:visible;}

.bg-slides { position:fixed; top:0;left:0; bottom:0; right:0; width:100%; height:100%; z-index:-1;
transition:all .3s}
.bg-slides.hide {opacity:1}
.bg-slides .slide { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:all 1.5s; background-position:center center; background-size:cover; z-index:1}
.bg-slides .slide.active { opacity:1}
.bg-slides::after { position:absolute; top:0; left:0; width:100%; height:100%; background-color:#000;
opacity:.2;	content:' '; display:block; z-index:2}
.main { padding:0 78px 0 15%;}
.section { height:100vh;transition:all .5s; position:relative;}
.section .inner { position:absolute; top:50%; left:0; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); display:inline-block; color:#fff; opacity:1; transition:all .3s}
.section .inner.active { opacity:1}
.section .inner:hover { color:#fff; opacity:1;}
.section .inner{ width:100%;}
.flexlogo{ position:fixed; left:4.52%; top:50%; margin-top:-26px; z-index:10;}
.flexlogo img{ display:block; width:100%; height:auto; line-height:1;}
.commonlog{ float:left; width:470px;}
.commonlog small{ display:block; color:#fff; font-size:14px; line-height:1; font-family:"微软雅黑"; margin-bottom:20px;}
.commonlog strong{ display:block; line-height:1; color:#ffffff; font-size:72px; font-family:"微软雅黑"; font-weight:normal; margin-bottom:30px;}
.commonlog span{ display:block; color:#fff; font-size:28px; line-height:1; margin-bottom:20px;}
.commonlog b{ display:block; width:100px; height:45px; text-align:center; color:#ffffff; font-size:14px; line-height:2; padding-top:17px; background:#ff2524;}
.abouwr{ position:relative; padding:40px 48px; float:left; margin-top:-40px;}
.hobg:before{ content:""; width:100%; height:100%; position:absolute; left:0; top:0; background:#1686cc; height:0; transition:0.5s;}
.abouts{ position:relative; width:565px; z-index:5;}
.brand{ border-top:4px solid #1686cc; padding-top:23px; position:relative;}
.brand p{ color:#fff; font-size:14px;}
.hobg:hover:before{ height:100%; transition:0.5s cubic-bezier(0.52, 1.64, 0.37, 0.66); -webkit-transition:0.5s cubic-bezier(0.52, 1.64, 0.37, 0.66); -moz-transition:0.5s cubic-bezier(0.52, 1.64, 0.37, 0.66);}

.exhibite .commonlog{ margin-top:204px;}
.halls{ position:relative; float:left; margin-left:48px; padding-top:13px; border-top:4px solid #1686cc; width:565px;}
.commonbtn{ position:relative; overflow:hidden;}
.commonbtn .slides li{ z-index: 4 !important;opacity:1 !important; -webkit-animation: decreaseHeight 0.8s forwards ease-in-out; animation: decreaseHeight 0.8s forwards ease-in-out; overflow:hidden; position:relative;}
.hallwrs .slides li{ padding-bottom:32px;}
.commonbtn .slides li figure{ display:block; line-height:1; overflow:hidden; width:565px; position:relative;}
.furahref a{ cursor:default;}
.commonbtn .slides li figure img{ display:block; width:100%; height:auto; line-height:1;}
.hallwrs .slides li .title{ display:block; text-align:center; color:#fff; font-size:14px; line-height:1; opacity:0; visibility:hidden; transition:0s; height:14px; overflow:hidden; position:absolute; left:0; bottom:0; width:100%;}

.commonbtn .slides li.flex-active-slide{  -webkit-animation: show 0.8s forwards ease-in-out; animation: show 0.8s forwards ease-in-out; z-index:3 !important;}
.commonbtn .slides li.flex-active-slide .title{ opacity:1; visibility:visible; transition:0.35s;}

@-webkit-keyframes decreaseHeight {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		width: 0;
	}
}

@keyframes decreaseHeight {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		width: 0;
	}
}

@-webkit-keyframes show {
	0% {
		opacity: 0;
	}
	1%,100% {
		opacity: 1;
	}
}

@keyframes show {
	0% {
		opacity: 0;
	}
	1%,100% {
		opacity: 1;
	}
}
.commonbtn .flex-direction-nav li,.furtupage{ position:absolute; top:50%; margin-top:-45px; z-index:10;}
.commonbtn .flex-direction-nav li.flex-nav-prev,.furtupage.fpage1{ left:0;}
.commonbtn .flex-direction-nav li.flex-nav-next,.furtupage.fpage2{ right:0;}
.commonbtn .flex-direction-nav li a,.furtupage a{ display:block; perspective:300px; position:relative;}
.commonbtn .flex-direction-nav li a:before,.furtupage a:before{ content:""; position:absolute; top:9px; display:block; width:50px; padding-right:32px; line-height:1; padding-left:32px; padding-top:12px; height:44px; color:#ffffff; font-size:14px;  background:#ff2524; transition:0.32s;}
.commonbtn .flex-direction-nav li a.flex-prev:before,.furtupage.fpage1 a:before{ content:"Previous page"; left:-114px; text-align:left;}
.commonbtn .flex-direction-nav li a.flex-next:before,.furtupage.fpage2 a:before{ content:"Next page"; right:-114px; text-align:right;}
.commonbtn .flex-direction-nav li a span,.furtupage a span{ display:block; width:14px; padding:13px 10px 0; height:61px; background:#51626f; text-align:center; color:#ffffff; font-size:14px; line-height:1.2; transition:0.32s 0.14s; transform-origin:left center; -webkit-transform-origin:left center;}
 .furtupage a span { padding:0 10px; height:90px; display:flexbox; display:flex; display:-webkit-flex; align-items:center; -webkit-align-items:center;}
.commonbtn .flex-direction-nav li a.flex-next span,.furtupage.fpage2 a span{ transform-origin:right center;}
.commonbtn .flex-direction-nav li a.flex-prev:hover span,.furtupage.fpage1 a:hover span{ transform:rotateY(90deg); -webkit-transform:rotateY(90deg); -moz-transform:rotateY(90deg); opacity:0; visibility:hidden; transition:0.32s 0s;}
.commonbtn .flex-direction-nav li a.flex-prev:hover:before,.furtupage.fpage1 a:hover:before{ left:0;}
.commonbtn .flex-direction-nav li a.flex-next:hover span,.furtupage.fpage2 a:hover span{ transform:rotateY(-90deg); -webkit-transform:rotateY(-90deg); -moz-transform:rotateY(-90deg); opacity:0; visibility:hidden; transition:0.32s 0s;}
.commonbtn .flex-direction-nav li a.flex-next:hover:before,.furtupage.fpage2 a:hover:before{ right:0;}
.commonbtn .flex-direction-nav.on { display:none;}
.commonbtn .flex-direction-nav li a.on:before{ display:none;}
.commonbtn .flex-direction-nav li a.on span{ background:#7c7c7c; opacity:1;}
.commonbtn .flex-direction-nav li a.on:hover span{ transform:rotateY(0); -webkit-transform:rotateY(0); -moz-transform:rotateY(0); opacity:0.5; visibility:visible;}

.events .commonlog{ margin-top:80px;}
.eventdown{ padding:44px 32px 44px; overflow:hidden; background:#8996a0; position:relative; top:-1px;}
.eventwr{ position:relative;}
.eventdown time{ display:block; text-align:center; line-height:1; padding-bottom:22px; position:relative; margin-bottom:18px; color:#fff; font-size:48px; }
.eventdown time:before{ content:""; width:22px; height:4px; background:#fff; position:absolute; left:50%; margin-left:-11px; bottom:0;}
.eventdown p{ text-align:center; color:#ffffff; font-size:14px; text-align:center;line-height:1.4;height:52px; overflow:hidden;}
.commonbtn .slides li.flex-active-slide .eventwr{ opacity:1; visibility:visible; transition:0.38s 0.35s; top:0;}
.commonbtn .slides li figure .vbtn{ display:block; width:44px; height:44px; background:#1686cc; position:absolute; cursor:pointer; left:0; top:0; right:0; bottom:0; margin:auto; border-radius:50%; z-index:5;}
.vbtn:before{ content:""; width:12px; height:15px; background:url(../images/arrow5.png) center no-repeat; position:absolute; left:18px; top:15px; cursor:pointer; transition:0.38s;}
.vbBox{ height: 100%; width:100%; left:0; top:0; position:absolute; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center center;}
.jwplayer{ opacity:0; position:absolute !important; height:100% !important;}
.jwlogo{ display:none !important;}
.commonbtn .slides li.on figure .vbtn{ opacity:0; visibility:hidden;}


.menunav{ position:fixed; right:43px; top:50%; margin-top:-185px; z-index:20;}
.menuli li{ margin-bottom:7px; height:56px; width:4px; position:relative; background:#fff;}
.menuli li:last-child{ margin-bottom:0;}
.menuli li a{ display:block; width:25px; position:absolute; right:0; top:0; height:100%; }
.menuli li a i{ display:block; width:4px; height:100%; background:#ff2524; position:absolute; right:0; top:0; -webkit-transition: -webkit-transform .4s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .33s cubic-bezier(.4,0,.2,1); transition: transform .33s cubic-bezier(.4,0,.2,1); transition: transform .33s cubic-bezier(.4,0,.2,1),-webkit-transform .33s cubic-bezier(.4,0,.2,1); transform-origin: left 100%; -webkit-transform-origin: left 100%; transform: scaleY(0); -moz-transform: scaleY(0); -webkit-transform: scaleY(0); visibility: hidden\9;}
.menuli li a b{ display:block; color:#fff; line-height:1; font-weight:normal;  font-size:12px; position:absolute; left:10px; top:0; transform-origin:left top; transform:rotate(90deg); left:-35px\9; transform:none\9;}
.menuli li.current i,.menuli li:hover i{ transform: scaleY(1); -webkit-transform: scaleY(1); transform-origin: left 0; -webkit-transform-origin: left 0; visibility: visible\9;}

.furniture{ padding:242px 0 250px; background-attachment:fixed; background-position:center top; background-repeat:no-repeat;}
.furnitu{ position:relative;}
.furnitirew .flexlogo{ position:absolute; top:0; margin-top:0;}
.furnitures{ width:765px; float:left; padding-top:32px; border-top:4px solid #1686cc;}
.furnitureli >li{ position:relative; width:33.333333%; float:left; margin-bottom:5px; text-align:center;}
.furnifix{ background:# ; margin:auto; padding:2px 0 18px; text-align:center; position:relative; margin-right:5px;}
.furnifix:before{ content:""; width:100%; height:100%; position:absolute; left:0; top:0; background:#1686cc; -webkit-transition: -webkit-transform .4s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .33s cubic-bezier(.4,0,.2,1); transition: transform .33s cubic-bezier(.4,0,.2,1); transition: transform .33s cubic-bezier(.4,0,.2,1),-webkit-transform .33s cubic-bezier(.4,0,.2,1); transform-origin: left 100%; -webkit-transform-origin: left 100%; transform: scaleY(0); -moz-transform: scaleY(0); -webkit-transform: scaleY(0); visibility: hidden\9;}
.furnitureli >li:hover .furnifix:before,.furnitureli >li.active .furnifix:before{ transform: scaleY(1); -webkit-transform: scaleY(1); transform-origin: left 0; -webkit-transform-origin: left 0; visibility: visible\9;}
.furnifix b{ display:block; width:100%; height:173px; position:relative; text-align:center; overflow:hidden; margin:auto;}
.furnifix b img{ display:block; line-height:1; max-width:100%; max-height:100%; position:absolute; left:0; top:0; right:0; bottom:0; margin:auto;}
.furnifix span{ display:block; text-align:center; line-height:1; color:#ffffff; font-size:16px; margin-top:5px; position:relative;}
.furnidown{ box-sizing:border-box; margin:22px 0 10px; overflow:hidden; position:relative; padding:32px 36px 34px; width:100%; background:#8996a0; display:none; float:left;}
.arrows{ display:block; opacity:0; visibility:hidden; width:20px; height:13px; background:url(../images/arrow6.png) center no-repeat; position:absolute; left:50%; margin-left:-10px; bottom:-26px;}
.furnis li{ float:left; width:182px; margin-bottom:10px; text-align:left;}
.furnis li a{ display:inline-block; padding-bottom:5px; position:relative; color:#ffffff; font-size:14px; line-height:1;}
.furnis li a:before{ content:""; width:100%; height:1px; background:#fff; position:absolute; left:0; bottom:0; transform-origin:100%; -webkit-transform-origin:100%; -webkit-transition:-webkit-transform .33s cubic-bezier(.4,0,.2,1); transition:-webkit-transform .33s cubic-bezier(.4,0,.2,1); transition:transform .33s cubic-bezier(.4,0,.2,1); transition:transform .33s cubic-bezier(.4,0,.2,1),-webkit-transform .33s cubic-bezier(.4,0,.2,1); transform:scaleX(0); -webkit-transform:scaleX(0); visibility:hidden\9;}
.furnis li a:hover:before{ transform:scaleX(1); -webkit-transform:scaleX(1); -moz-transform:scaleX(1); transform-origin:0; -webkit-transform-origin:0; visibility:visible\9;}
.furnifix.now .arrows{ opacity:1; visibility:visible; transition:0.34s;}
.furnidown.inde{ z-index:10;}
.furnitudown{ padding-top:28px; margin-top:55px; border-top:4px solid #8996a0;}
.furnitudown .furnis{ padding:32px 36px 34px; background:#8996a0;}
.furnitudown .furnis li{ width:33.3333%;}
.promenu{ padding-bottom:8px; margin-bottom:15px; border-top:0px solid #8996a0;}
.promenu .furnis{ padding:0px; }
.promenu .furnis li{ width:25%;}
.recuits{ background:#1686cc; line-height:1; padding:0 46px 0 34px; position:relative; z-index:10;} 
.recuits span{ display:block; float:left; color:#ffffff; font-size:14px; height:40px; line-height:40px;}
.recuits span:nth-child(1){ width:230px;}
.recuits span:nth-child(3){ float:right;}
.recuiteli{ padding:10px 0 16px; background:#8996a0;}
.recuiteli li{ position:relative; cursor:pointer; padding:0 46px 0 34px;}
.recuiteli li .rebg{ content:""; width:100%; height:100%; position:absolute; left:0; top:0; background:#51626f; -webkit-transition: -webkit-transform .4s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .33s cubic-bezier(.4,0,.2,1); transition: transform .33s cubic-bezier(.4,0,.2,1); transition: transform .33s cubic-bezier(.4,0,.2,1),-webkit-transform .33s cubic-bezier(.4,0,.2,1); transform-origin: left 100%; -webkit-transform-origin: left 100%; transform: scaleY(0); -moz-transform: scaleY(0); -webkit-transform: scaleY(0); visibility: hidden\9;}
.recuiteli li span{ display:block; float:left; height:40px; line-height:40px; color:#ffffff; font-size:14px; position:relative; z-index:4;}
.recuiteli li i{ display:block; width:7px; height:10px; background:url(../images/arrow7.png) center no-repeat; position:absolute; right:66px; z-index:4; top:50%; margin-top:-5px; transition:0.32s;}
.recuiteli li span:nth-child(1){ width:230px;}
.recuiteli li:hover .rebg{ transform: scaleY(1); -webkit-transform: scaleY(1); transform-origin: left 0; -webkit-transform-origin: left 0; visibility: visible\9;}
.recuiteli li:hover i{ background:url(../images/arrow8.png) center no-repeat; right:60px;}

.acivities{ margin-top:52px;}
.acivities i{ float:left; margin-right:2px; position:relative; line-height:1; color:#ffffff; font-size:14px; cursor:pointer; padding:0 6px 8px; font-style:normal;}
.acivities i:before{ content:""; width:100%; height:2px; background:#009944; position:absolute; left:0; bottom:0; transform-origin:100%; -webkit-transform-origin:100%; -webkit-transition:-webkit-transform .3s cubic-bezier(.4,0,.2,1); transition:-webkit-transform .3s cubic-bezier(.4,0,.2,1); transition:transform .3s cubic-bezier(.4,0,.2,1); transition:transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1); transform:scaleX(0); -webkit-transform:scaleX(0); visibility:hidden\9;}
.acivities i:hover:before,.acivities i.on:before{ transform:scaleX(1); -webkit-transform:scaleX(1); -moz-transform:scaleX(1); transform-origin:0; -webkit-transform-origin:0; visibility:visible\9;}
.group{ position:relative; overflow:hidden;}
.halls .group .hallwrs:before{ content:""; width:100%; height:100%; position:absolute; left:0; top:0%; background:#8996a0; z-index:20; -webkit-transition: -webkit-transform .88s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .88s cubic-bezier(.4,0,.2,1); transition: transform .88s cubic-bezier(.4,0,.2,1); transition: transform .88s cubic-bezier(.4,0,.2,1),-webkit-transform .88s cubic-bezier(.4,0,.2,1); transform: scaleY(1); -webkit-transform: scaleY(1); transform-origin: left 0; -webkit-transform-origin: left 0; visibility: visible\9;}
.halls .group .hallwrs{ position:absolute; left:0; top:0; opacity:0; visibility:hidden;}
.halls .group .hallwrs.on{ opacity:1; visibility:visible; transition:0.76s; position:relative;}
.halls .group .hallwrs.on:before{ transform-origin: left 100%; -webkit-transform-origin: left 100%; transform: scaleY(0); -moz-transform: scaleY(0); -webkit-transform: scaleY(0); visibility: hidden\9;}


@keyframes fadedown {
  from {
	 transform:translateY(0);
  }
  60% {
	 transform:translateY(0);
  }

  to {
	transform:translateY(100%);
	visibility:hidden;
  }
}

.furniturebox{ position:relative; overflow:hidden;}
.furniyub{ position:relative;}
.furnied{ position:relative; overflow:hidden;}
.furniyub .slides li{ position:relative; line-height:1; width:100%; }
.furniyub .slides li figure{ width:100%; display:block; line-height:1; overflow:hidden;}
.furniyub .slides li figure img{ display:block; width:100%; height:auto; line-height:0; position:absolute; left:0; top:0;}

@-webkit-keyframes decreaseHeight {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		width: 0;
	}
}

@keyframes decreaseHeight {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		width: 0;
	}
}

@-webkit-keyframes show {
	0% {
		opacity: 0;
	}
	1%,100% {
		opacity: 1;
	}
}

@keyframes show {
	0% {
		opacity: 0;
	}
	1%,100% {
		opacity: 1;
	}
}
.furniyub .slides li.flex-active-slide .furtitle h2,.furniyub .slides li.flex-active-slide .furniedt small{ transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0); transition:transform 0.6s 0.5s; opacity:1;}
.furniyub .slides li.on .furtitle h2,.furniyub .slides li.on .furniedt small{ transform:translateY(100%); -webkit-transform:translateY(100%); -moz-transform:translateY(100%); transition:0.6s; opacity:1;}
.furniyub .slides li.flex-active-slide .furniedt small{ transition:transform 0.5s 0.7s;}
.furniedt{ width:90%; position:absolute; left:50%; margin-left:-45%; top:50%; text-align:center; z-index:10; margin-top:-67px;}
.furtitle{ line-height:1; overflow:hidden; text-align:center; margin-bottom:40px;}
.furover{ overflow:hidden;}
.furtitle h2{ line-height:1; text-align:center; color:#ffffff; font-size:80px; font-weight:bold; transform:translateY(-100%); -webkit-transform:translateY(-100%); -moz-transform:translateY(-100%); display:inline-block; margin:auto; opacity:0; line-height:0.9;}
.furniedt small{ display:block; text-align:center; line-height:1; color:#fff; font-size:14px; transform:translateY(-100%); -webkit-transform:translateY(-100%); -moz-transform:translateY(-100%); overflow:hidden; display:inline-block; margin:auto; opacity:0;}
.furniyures{ position:absolute; left:33px; bottom:47px; z-index:6;}
.furnitbox{ position:relative;}
.furnitbox:before{ content:""; width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0.6); background:#000\9; filter:alpha(opacity=60); -webkit-transition: -webkit-transform .5s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .5s cubic-bezier(.4,0,.2,1); transition: transform .5s cubic-bezier(.4,0,.2,1); transition: transform .5s cubic-bezier(.4,0,.2,1),-webkit-transform .5s cubic-bezier(.4,0,.2,1); transform-origin: left 100%; -webkit-transform-origin: left 100%; transform: scaleY(0); -moz-transform: scaleY(0); -webkit-transform: scaleY(0); visibility: hidden\9;}
.furniyures.on .furnitbox:before{ transform: scaleY(1); -webkit-transform: scaleY(1); transform-origin: left 0; -webkit-transform-origin: left 0; visibility: visible\9;}
.furniyures.on .furnitbox .furnitwr{ opacity:1; visibility:visible;}
.furniyures.on .furnitushow{ opacity:0; visibility:hidden; transition:0.4s;}
.furnitwr{ position:relative; z-index:8; padding:44px 28px 24px 22px; width:340px; opacity:0; visibility:hidden; transition:0.43s;}
.furnitbox span{ display:block; width:29px; height:29px; position:relative; background:url(../images/close.jpg) center no-repeat; position:absolute; left:22px; top:0; cursor:pointer; transition:0.3s}
.furnitbox span:hover{ transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg);}
.furnitbox p{ color:#fff; font-size:12px; line-height:2; margin-bottom:26px;}
.furnitbox a{ display:inline-block; line-height:1; color:#fff; font-size:12px; position:relative; padding-bottom:4px;}
.furnitbox a:before{ content:""; width:100%; height:1px; background:#fff; position:absolute; left:0; bottom:0; transform-origin:100%; -webkit-transform-origin:100%; -webkit-transition:-webkit-transform .23s cubic-bezier(.4,0,.2,1); transition:-webkit-transform .23s cubic-bezier(.4,0,.2,1); transition:transform .23s cubic-bezier(.4,0,.2,1); transition:transform .23s cubic-bezier(.4,0,.2,1),-webkit-transform .23s cubic-bezier(.4,0,.2,1); transform:scaleX(0); -webkit-transform:scaleX(0); visibility:hidden\9;}
.furnitbox a:hover:before{transform:scaleX(1); -webkit-transform:scaleX(1); -moz-transform:scaleX(1); transform-origin:0; -webkit-transform-origin:0; visibility:visible\9;}
.furnitushow{ display:block; width:41px; height:41px; background:url(../images/show.png) center no-repeat; cursor:pointer; position:absolute; left:0; bottom:0; z-index:10; transition:transform 0.4s,opacity 0.36s 0.38s;} 
.furnitushow:hover{ transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg);}

.muble{ position:absolute; left:0; width:100%; height:auto; bottom:46px; text-align:center; z-index:5;}
.muble b{ display:inline-block; line-height:1; color:#ffffff; font-size:28px; font-weight:normal; }
.muble i{ display:inline-block; line-height:1; color:#fff; font-size:28px; font-style:normal; margin:0 8px; font-size:28px;}
.muble b.defaul{ font-size:56px;}
.furline{ display:block; width:0; height:8px; background:#1686cc; position:absolute; left:0; bottom:0; z-index:10;}
.furline.load{ -webkit-animation: line 6.6s forwards linear; animation: line 6.6s forwards linear; }
.furline.stop{ animation-play-state: paused;}
@-webkit-keyframes line {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

@keyframes line {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}
.series{ background:#8996a0; z-index:30; position:relative; overflow:hidden;}
.series-info{ width:50%; float:left; position:relative;}
.series-info.on .serieswr i{ transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg);}
.series-info:before{ content:""; width:100%; height:100%; position:absolute; left:0; top:0; background:#8e8e8e; -webkit-transition: -webkit-transform .44s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .44s cubic-bezier(.4,0,.2,1); transition: transform .44s cubic-bezier(.4,0,.2,1); transition: transform .44s cubic-bezier(.4,0,.2,1),-webkit-transform .44s cubic-bezier(.4,0,.2,1); transform-origin: left 100%; -webkit-transform-origin: left 100%; transform: scaleY(0); -moz-transform: scaleY(0); -webkit-transform: scaleY(0); visibility: hidden\9;}
.series-info:hover:before{ transform: scaleY(1); -webkit-transform: scaleY(1); transform-origin: left 0; -webkit-transform-origin: left 0; visibility: visible\9;}
.serieswr{ padding-left:40px; padding-top:30px; padding-bottom:30px; cursor:pointer; position:relative; z-index:5;}
.serieswr span{ display:block; line-height:1; color:#ffffff; font-size:20px; padding-right:28px; position:relative; cursor:pointer; width:250px; float:left;}
.serieswr span b{ display:inline-block; font-weight:normal;}
.serieswr i{ display:inline-block; font-style:normal; width:16px; height:8px; background:url(../images/arrow9.png) center no-repeat; margin-left:13px; position:relative; top:-2px; transition:0.34s;}
.serieswr small{ display:inline-block; float:left; line-height:1; color:#ffffff; font-size:14px; font-family:"Arial"; position:relative; padding-left:30px; margin-top:3px;}
.serieswr small:before{ content:""; width:17px; height:1px; background:#fff; position:absolute; left:0; top:50%;}
.series-info:nth-child(2){ background:#8e8e8e; float:right;}

.seriesbox{ width:100%; height:100%; position:fixed; left:0; top:0; z-index:69; opacity:0; visibility:hidden; transition:0.54s;}
.seriesbg{ width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0.8); background:#000\9; filter:alpha(opacity=80); z-index:0; cursor:url(../images/close.ico),pointer;}
.seriesbox .seriesle:nth-child(1):before{ content:""; width:100%; height:100%; background:#959595; position:absolute; left:100%; top:0; -webkit-transition: -webkit-transform .84s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .84s cubic-bezier(.4,0,.2,1); transition: transform .84s cubic-bezier(.4,0,.2,1); transition: transform .84s cubic-bezier(.4,0,.2,1),-webkit-transform .84s cubic-bezier(.4,0,.2,1); transform-origin: left 100%; -webkit-transform-origin: left 100%; transform: scaleY(0); -moz-transform: scaleY(0); -webkit-transform: scaleY(0); visibility: hidden\9; z-index:2;}
.seriesbox.on{ opacity:1; visibility:visible;}
.seriesbox.show .seriesle:nth-child(1):before{ transform: scaleY(1); -webkit-transform: scaleY(1); transform-origin: left 0; -webkit-transform-origin: left 0; visibility: visible\9;}
.seriesbox.show .flexbg{ width:100%; transition:2s;}
.seriesflex{ height:100%; position:relative; z-index:5;}
.seriesle{ width:50%; height:100%; position:relative; opacity:0; transform:translateX(200px); -webkit-transform:translateX(200px); -moz-transform:translateX(200px); visibility:hidden; transition:0s; z-index:5; background:#8996a0; position:absolute; top:0;}
.seriesle.show{ opacity:1; visibility:visible; transform:translateX(0); -webkit-transform:translateX(0); transition:0.65s; -moz-transform:translateX(0);}
.seriesle:nth-child(2) .seriesdown{ position:absolute; left:0; top:0;}
.seriesle:nth-child(2) .seriesdown.on{ display:block;}
.serscoll { height:100%; overflow-y:scroll; overflow-x:hidden; -webkit-overflow-scrolling: touch;}

.seriesle:nth-child(1){ left:0; background:#8996a0 url(../images/linebg.png) left top no-repeat;}
.seriesle:nth-child(2){ right:0; background:#959595 url(../images/linebg.png) right top no-repeat;}
.seriesli{ padding-top:46px; position:relative; z-index:5;}
.seriesli >li >a{ display:block; position:relative; padding-left:40px; height:35px; line-height:35px;}
.seriesli >li >a:before{ content:""; width:100%; height:100%; position:absolute; left:0; top:0; background:#919191; -webkit-transition: -webkit-transform .44s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .28s cubic-bezier(.4,0,.2,1); transition: transform .28s cubic-bezier(.4,0,.2,1); transition: transform .28s cubic-bezier(.4,0,.2,1),-webkit-transform .28s cubic-bezier(.4,0,.2,1); transform-origin: left 100%; -webkit-transform-origin: left 100%; transform: scaleY(0); -moz-transform: scaleY(0); -webkit-transform: scaleY(0); visibility: hidden\9;}
.seriesli >li >a b{ display:inline-block; color:#ffffff; font-size:14px; font-weight:normal; position:relative; z-index:5;}
.seriesli >li >a:after{ content:""; width:9px; height:15px; background:url(../images/arrow10.png) center no-repeat; opacity:0; visibility:hidden; transition:0.33s; position:absolute; right:50px; top:50%; margin-top:-7px;}
.seriesli >li.on >a:before{ transform: scaleY(1); -webkit-transform: scaleY(1); transform-origin: left 0; -webkit-transform-origin: left 0; visibility: visible\9;}
.seriesli >li.on >a:after{ opacity:1; visibility:visible;}
.seriesdown{ width:100%; height:100%; position:fixed; left:100%; top:0; display:none; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling: touch;}
.closeser { display:block; width:16px; height:16px; background:url(../images/close.png) center no-repeat; cursor:pointer; position:absolute; right:5%; top:20px; transition:0.34s;}
.closeser:hover { transform:rotate(180deg); -webkit-transform:rotate(180deg);}
.seriesle2 >.seriesdown { position:absolute; left:0; display:block;}

.seriesdown::-webkit-scrollbar,.serscoll::-webkit-scrollbar{ width:5px; height: 5px;}
.seriesdown::-webkit-scrollbar-thumb,.serscoll::-webkit-scrollbar-thumb { border-radius:5px; -webkit-box-shadow: inset 0 0 0.1rem rgba(0,0,0,0.2); background: #1686cc;}
.seriesdown::-webkit-scrollbar-track,.serscoll::-webkit-scrollbar-track{border-radius: 5px;}

.seriesfix{ padding-top:46px;}
.seriesfix li{ padding-left:50px; position:relative;}
.seriesfix li:before{ content:""; width:100%; height:100%; position:absolute; left:0; top:0; background:#b5b5b5; -webkit-transition: -webkit-transform .28s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .28s cubic-bezier(.4,0,.2,1); transition: transform .28s cubic-bezier(.4,0,.2,1); transition: transform .28s cubic-bezier(.4,0,.2,1),-webkit-transform .28s cubic-bezier(.4,0,.2,1); transform-origin: left 100%; -webkit-transform-origin: left 100%; transform: scaleY(0); -moz-transform: scaleY(0); -webkit-transform: scaleY(0); visibility: hidden\9;}
.seriesfix li a{ display:inline-block; height:35px; line-height:35px; color:#fff; font-size:14px; position:relative;width:100%;}
.seriesfix li:hover:before{ transform: scaleY(1); -webkit-transform: scaleY(1); transform-origin: left 0; -webkit-transform-origin: left 0; visibility: visible\9;}
.seriesbox .flexbg{ background-position:left top; z-index:1; width:50%; transition:1s;}

.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: 1; 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); display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; align-items:center; -webkit-align-items:center; -moz-align-items:center;}

.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;}
.newbox{ padding:60px 50px 0 86px;}
.newle{ float:left; width:35.81%; padding-top:70px;}
.newtop{ margin-bottom:104px;}
.newtop small{ display:block; line-height:1; color:#fff; font-size:14px;  margin-bottom:20px;}
.newtop small a{  color:#fff; font-size:14px;  margin-bottom:20px;}
.newtop h3{ color:#fff; font-size:48px; line-height:1; font-weight:normal; }
.newr time{ display:block; padding-left:24px; color:#fff; font-size:14px; font-family:"Arial"; background:url(../images/time1.png) left center no-repeat; line-height:14px; margin-bottom:26px;}
.newr strong{ display:block; line-height:1.2; color:#fff; font-size:40px; margin-bottom:46px; transition:0.4s;}
.newdetail{ position:relative; margin-top:46px;}
.newdetail b{ display:block; width:49px; height:20px; background:url(../images/arrow11.png) center no-repeat; transition:0.35s; margin:auto; }
.newdetail span{ display:inline-block; margin:auto; color:#ffffff; font-size:14px; line-height:1; transition:0.54s; position:absolute; padding-left:68px; left:0; top:2px; opacity:0; visibility:hidden;}
.newdetail span i{ display:inline-block; width:0; height:4px; background:#fff; vertical-align:middle; position:absolute; left:0; top:50%; margin-top:-2px; transition:0.3s;}
.newbox .newdetail b { margin-left:0;}

.newimg{ width:60.6%; float:right; line-height:1;}
.newimg img{ display:block; transition:0.84s; height:auto; max-width:100%; max-height:100%; line-height:0;}
.newbox:hover .newr .newdetail b,.newwr:hover .newr .newdetail b{ opacity:0; visibility:hidden;}
.newbox:hover .newr .newdetail span,.newwr:hover .newr .newdetail span{ opacity:1; visibility:visible;}
.newbox:hover .newr .newdetail span i,.newwr:hover .newr .newdetail span i{ width:60px; transition:0.36s 0.15s;}
.newbox:hover .newimg img,.newwr:hover .newimg img{ -webkit-filter: brightness(0.50);filter: brightness(0.50);}

.company{ position:absolute; left:86px; bottom:58px; z-index:20;}
.page .company{ display:none;}
.flexnew{ position:fixed;}
.company-info{ float:left;  padding:3px 15px;  position:relative; overflow:hidden; background:#445268; border-right:1px solid #445268;}
.company-info:last-child{ border-right:none;}
.company-info a:before{ content:""; width:100%; height:100%; position:absolute; left:0; top:0; background:#ff2524; -webkit-transition: -webkit-transform .28s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .28s cubic-bezier(.4,0,.2,1); transition: transform .28s cubic-bezier(.4,0,.2,1); transition: transform .28s cubic-bezier(.4,0,.2,1),-webkit-transform .28s cubic-bezier(.4,0,.2,1); transform-origin: left 100%; -webkit-transform-origin: left 100%; transform: scaleY(0); -moz-transform: scaleY(0); -webkit-transform: scaleY(0); visibility: hidden\9;}
.company small{ display:block; margin-top:12px; margin-left:10px; color:#fff; font-size:18px;  line-height:1; position:absolute; left:0; top:0; transition:0.3s; opacity:0; visibility:hidden; transform:translateY(-100%); -webkit-transform:translateY(-100%); -moz-transform:translateY(-100%);}
.company span{ display:block;  padding:16px 0; color:#fff; line-height:1; font-size:14px; text-align:center; font-weight:normal; position:relative; transition:0.28s 0.14s;}
.company-info.on a:before,.company-info:hover a:before{ transform: scaleY(1); -webkit-transform: scaleY(1); transform-origin: left 0; -webkit-transform-origin: left 0; visibility: visible\9;}
.company-info.on span{ opacity:1;  transition:0.28s;}
.company-info.on small{ opacity:1; visibility:visible; transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0);}

.promt{ float:left;  padding:20px 18px ;  position:relative; overflow:hidden; background:#445268; border-right:0px solid #445268; width:80%; text-align:center; line-height:1; height:25px}
.promt:last-child{ border-right:none;}
.promt a:before{ content:""; width:100%; height:100%; position:absolute; left:0; top:0; background:#ff2524; -webkit-transition: -webkit-transform .28s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .28s cubic-bezier(.4,0,.2,1); transition: transform .28s cubic-bezier(.4,0,.2,1); transition: transform .28s cubic-bezier(.4,0,.2,1),-webkit-transform .28s cubic-bezier(.4,0,.2,1); transform-origin: left 100%; -webkit-transform-origin: left 100%; transform: scaleY(0); -moz-transform: scaleY(0); -webkit-transform: scaleY(0); visibility: hidden\9;}
.promt.on {  background:#1686cc; transform: scaleY(1); -webkit-transform: scaleY(1); transform-origin: left 0; -webkit-transform-origin: left 0; visibility: visible\9;}
.promt.on a:before,.promt:hover a:before{  background:#fff; transform: scaleY(1); -webkit-transform: scaleY(1); transform-origin: left 0; -webkit-transform-origin: left 0; visibility: visible\9;}
.promt.on span{ opacity:1;  transition:0.28s;}
.promt.on small{ opacity:1; visibility:visible; transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0);}


.news{ background:#51626f; position:relative; height:100%; width:100%;}
.newwr{ position:absolute; left:50%; margin-left:-600px; top:50%; margin-top:-198px;}
.newwr .newtop small{ text-align:center;}
.newwr .newtop h3{ text-align:center;}
.newwr .newr{ text-align:center;}
.newwr .newr time{ display:inline-block; margin:auto;}
.newtitle{ padding:0 110px; position:relative; text-align:center; margin-top:26px;}

.newtitle:before{ left:60px;}
.newtitle:after{ content:"”"; right:60px;}
.newwr .newdetail{ margin:auto; display:inline-block; width:140px; text-align:center;}

.newsfix{ position:relative; padding:165px 0 104px; border-bottom:1px solid #778591;}
.newsfix .company{ left:84px; top:118px; bottom:auto;}
.newtext{ width:1100px; margin:auto;}
.newtext .newwr{ position:relative; left:0; top:0; margin-left:0; margin-top:0; width:100%;}
.newtext .newtop{ margin-bottom:86px;}
.shares{ text-align:center; margin-top:116px;}
.sharewr{ display:inline-block; margin:auto;}
.sharewr span{ display:block; float:left; color:#ffffff; font-size:14px; line-height:0.9; margin-top:8px; padding-right:12px; border-right:1px solid #fff;}
.sharelist{ margin-left:10px; float:left;}
.sharelist li{ float:left; margin-right:5px; width:29px; height:29px; position:relative; border-radius:50%; background:#fff;}
.sharelist li:before{ content:""; width:100%; height:100%; border-radius:50%; background:#ff2524; position:absolute; left:0; top:0; border-radius:50%; transform:scale(0); -webkit-transform:scale(0); -moz-transform:scale(0); opacity:0; visibility:hidden; transition:0.35s;}
.sharelist li:last-child{ margin-right:0;}
.sharelist li a{ display:block; height:29px; position:relative;}
.sharelist li:nth-child(1) a{ background:url(../images/weixin.png) center no-repeat;}
.sharelist li:nth-child(2) a{ background:url(../images/weib.png) center no-repeat;}
.sharelist li:hover:before{ opacity:1; visibility:visible; transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);}
.sharelist li:nth-child(1):hover a{ background:url(../images/weixin1.png) center no-repeat;}
.sharelist li:nth-child(2):hover a{ background:url(../images/weib1.png) center no-repeat;}

.views{ width:704px; margin:auto; margin-top:78px;}
.views img{ max-width:100% !important; height:auto !important;}
.views p{ color:#fff; font-size:14px; line-height:2;}
.views .txtview { color:#fff; font-size:14px; line-height:2;margin-top:48px;}
.views .txtview table{ color:#fff; font-size:12px; line-height:4;margin-top:18px;}
.views .txtview table td{ border-bottom: 1px #FFF solid  }
.views .txtview table td img{ vertical-align:middle  }
.views .txtview a{ color:#fff; }

.pageprev .prevflex{ position:fixed; top:50%; margin-top:-37px; z-index:10;}
.pageprev .prevflex.prevs{ left:0;}
.pageprev .prevflex.nexts{ right:0;}
.pageprev .prevflex a{ display:block; perspective:300px; position:relative;}
.pageprev .prevflex a:before{ content:""; position:absolute; top:9px; display:block; width:50px; padding-right:32px; line-height:1; padding-left:32px; padding-top:12px; height:44px; color:#ffffff; font-size:14px;  background:#ff2524; transition:0.32s;}
.pageprev .prevflex.prevs a:before{ content:"Previous page"; left:-114px; text-align:left;}
.pageprev .prevflex.nexts a:before{ content:"Next page"; right:-114px; text-align:right;}
.pageprev .prevflex a b{ display:block; width:14px; padding:13px 10px 0; height:61px; background:#51626f; text-align:center; color:#ffffff; font-size:14px; line-height:1.2; transition:0.32s 0.14s; transform-origin:left center; -webkit-transform-origin:left center; font-weight:normal;}
.pageprev .prevflex.nexts a b{ transform-origin:right center;}
.pageprev .prevflex.prevs a:hover b{ transform:rotateY(90deg); -webkit-transform:rotateY(90deg); -moz-transform:rotateY(90deg); opacity:0; visibility:hidden; transition:0.32s 0s;}
.pageprev .prevflex.prevs a:hover:before{ left:0;}
.pageprev .prevflex.nexts a:hover b{ transform:rotateY(-90deg); -webkit-transform:rotateY(-90deg); -moz-transform:rotateY(-90deg); opacity:0; visibility:hidden; transition:0.32s 0s;}
.pageprev .prevflex.nexts a:hover:before{ right:0;}

.informate{ padding:196px 43px 90px 12.18%;}
.informate .commonlog{ margin-top:10%;}
.mapbox{ width:60%; float:right; overflow:hidden; position:relative;}
.mapbox .mapimg{ display:block; width:100%; height:auto; line-height:1;}
.maptext{ padding:62px 27px 88px 33px; background:#fff; width:250px; border-top:10px solid #1686cc; position:absolute; left:8.51%; top:50%; margin-top:-162px; z-index:20;}
.maptext p{ color:#000000; font-size:16px; font-weight:bold; line-height:1.4; padding-left:40px; margin-bottom:18px;}
.maptext p a { color:#000000;}
.maptext p:last-child{ margin-bottom:0;}
.maptext p:nth-child(1){ background:url(../images/c1.png) 2px top no-repeat;}
.maptext p:nth-child(2){ background:url(../images/c2.png) 2px top no-repeat;}
.maptext p:nth-child(3){ background:url(../images/c3.png) 0px top no-repeat;}
.maptext p:nth-child(4){ background:url(../images/c4.png) 0 center no-repeat;}
.maptext p:nth-child(5){ background:url(../images/c5.png) 0 center no-repeat;}

.map{ position:absolute; width:100%; height:100%; left:0; top:0;}
.mapflex{ position:relative;}
.anchorBL{ display:none;}
.BMap_bubble_title{ color:#be691d; font-size:14px; font-weight:bold;}
.mapicon{ width:46px; height:46px; background:url(../images/map1.png) center no-repeat; position:absolute; left:50%; top:50%; margin-left:-23px; margin-top:-23px; animation-delay: 0ms; animation-duration: 2000ms; animation-iteration-count: infinite; animation-name: scales; animation-play-state: running; animation-timing-function: linear;}
.BMap_mask{ background:rgba(0,0,0,0.2) !important; background:#000\9; filter:alpha(opacity=20);}

@keyframes scales {
    0% { opacity: 0.2; transform: scale(0.6);}
    33% { opacity: 0.5; transform:scale(0.8);}
    66% { opacity: 1; transform:scale(1);}
    100% { opacity: 0.6; transform:scale(0.6); }
}
.service{ padding:260px 0; background-attachment:fixed; background-position:center; background-repeat:no-repeat;}
.servicewr{ position:relative;}
.servicewr .commonlog{ position:absolute; left:12.18%; top:0;}
.servicri{ width:565px; float:right; margin-right:72px; padding-top:33px; border-top:4px solid #1686cc;}
.servicri p{ color:#fff; font-size:14px;}

.designer-box{ position:absolute; width:100%; top:0; height:100%; left:0;}
.designers{ position:absolute; width:100%; left:0; top:50%; margin-top:-308px;}
.desigerle{  z-index:10; position:absolute; left:50%; margin-left:-268px; bottom:0; width:536px;}
.desigerin li{ position:relative; bottom:0; cursor:pointer;} 
.desigerin li:last-child{ margin-bottom:0;}
.desigerin li figure{ display:block; width:58px; height:58px; line-height:1; overflow:hidden; position:relative; border-radius:50%; border:6px solid #c8c8c8; transition:0.4s;}
.desigerin li figure img{ display:block; position:absolute; left:0; top:0; width:100%; height:auto; border-radius:50%; transition:0.4s;}
.desigerin li figure img.hide{ opacity:0; visibility:hidden;}
.desigerin li:hover figure{ border-color:#ff2524;}
.desigerin li:hover figure img.show{ opacity:0; visibility:visible;}
.desigerin li:hover figure img.hide{ opacity:1; visibility:visible;}  
.directors{ position:relative; z-index:8;}
.directorlist li .directorwr{ width:1100px; margin:auto; position:relative;} 
.intruduct{ width:350px; float:left; position:absolute; left:0; top:-33px; padding-top:33px; z-index:10;}
.intruduct.on .intraductle h3{ color:#323232;}
.intruduct.on .intraductle span{ color:#646464; transition:0.38s 0.18s;}
.intruduct.on .intrulist p{ color:#646464; transition:0.32s 0.2s;}
.intraductbg{ width:100%; height:100%; position:absolute; left:0; top:0; background:#fff; display:none;}
.intruwrs{ padding:62px 30px 28px;}
.intraductle{ position:relative; z-index:5;}
.intraductle strong{ display:inline-block; line-height:1; color:#fff; font-size:20px;  padding:10px 14px; background:#1686cc; transition:0.34s;}
.intraductle h3{ color:#fff; line-height:1; font-size:48px; margin-top:36px; margin-bottom:23px; transition:0.38s;}
.intraductle span{ display:block; line-height:1; color:#fff; font-size:16px; font-weight:bold; margin-bottom:48px; transition:0.38s;}
.intrulist p{ color:#ffffff; line-height:2.2; transition:0.32s;}
.ihide{ display:none;}
.smore{ margin-top:28px;}
.smore b{ display:inline-block; line-height:1; color:#fff; font-size:14px; position:relative; padding-bottom:4px; cursor:pointer; transition:0.34s;}
.smore b:hover{ color:#1686cc;}
.desigered{ width:423px; margin:auto; position:relative; line-height:1;}
.desigered img{ display:block; width:100%; height:auto; line-height:0;}
.desigered small{ display:block; color:#fff; font-size:100px; line-height:0.9;  position:absolute; right:-96px; top:-10px; text-transform:uppercase; transform:rotate(90deg);}
.represent{ width:116px; position:absolute; right:10px; top:72px; transition:0.42s;}
.represent.on{ opacity:0; visibility:hidden;}
.worktop{ margin-bottom:38px;}
.worktop small{ display:block; color:#fff; font-size:14px; line-height:1;  padding-bottom:14px; position:relative;}
.worktop small:before{ content:""; width:20px; height:2px; background:#fff; position:absolute; left:0; bottom:0;}
.worktop span{ display:block; line-height:1; color:#ffffff; font-size:14px; font-weight:bold; margin-top:8px;}
.workli li{ margin-bottom:4px; position:relative;}
.workli li figure{ display:block; line-height:1; overflow:hidden;}
.workli li figure img{ display:block; width:100%; height:auto; line-height:0; transition:0.3s;}
.workte{ width:100%; height:100%; position:absolute; left:0; top:0;}
.workte:before{ content:""; width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0.5); background:#000\9; filter:alpha(opacity=50); -webkit-transition: -webkit-transform .28s cubic-bezier(.4,0,.2,1); transition: -webkit-transform .28s cubic-bezier(.4,0,.2,1); transition: transform .28s cubic-bezier(.4,0,.2,1); transition: transform .28s cubic-bezier(.4,0,.2,1),-webkit-transform .28s cubic-bezier(.4,0,.2,1); transform-origin: left 100%; -webkit-transform-origin: left 100%; transform: scaleY(0); -moz-transform: scaleY(0); -webkit-transform: scaleY(0); visibility: hidden\9;}
.workte span{ display:block; text-align:center; margin-top:24px; line-height:1; color:#ffffff; font-size:14px; font-weight:bold; opacity:0; visibility:hidden; transition:0.32s; position:relative; z-index:4;}
.workli li:hover figure img{ transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1);}
.workli li:hover .workte:before{ transform: scaleY(1); -webkit-transform: scaleY(1); transform-origin: left 0; -webkit-transform-origin: left 0; visibility: visible\9;}
.workli li:hover .workte span{ opacity:1; visibility:visible;}
.desigerin li.flex-active-slide{ }
.desigerin li.flex-active-slide figure{ border-color:#ff2524; }
.desigerin li.flex-active-slide figure img.show{ opacity:0; visibility:visible;}
.desigerin li.flex-active-slide figure img.hide{ opacity:1; visibility:visible;}  
.desigerle .flex-direction-nav li a span{ display:block; width:16px; height:25px; text-indent:999px; overflow:hidden; position:absolute; top:50%; margin-top:-12px;}
.desigerle .flex-direction-nav li a.flex-prev span{ background:url(../images/arrow12.png) center no-repeat; left:-30px;}
.desigerle .flex-direction-nav li a.flex-next span{ background:url(../images/arrow13.png) center no-repeat; right:-30px;}

.dclose{ width:58px; height:58px; position:absolute; right:0; top:50%; margin-top:-29px; background:#445268; transition:0.38s; z-index:10; cursor:pointer; display:none;}
.dclose span{ display:block; position:relative; height:58px; background:url(../images/close.png) center no-repeat; transition:0.35s;}
.dclose:hover{ background:#1686cc;}
.dclose:hover span{ transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg);}
.designers .muble{ bottom:0; width:auto; left:50%; margin-left:-550px; position:absolute; padding-left:28px;}
.iclose{ display:none; position:absolute; right:14px; top:14px; z-index:5; width:30px; height:30px; background:url(../images/close1.png) center no-repeat; background-size:cover;}

.directors .flex-direction-nav{ width:423px; position:absolute; left:50%; margin-left:-211px; top:50%; z-index:10; overflow:hidden; height:89px; margin-top:-44px;}
.directors .flex-direction-nav li{position:absolute; top:50%; margin-top:-45px; z-index:10;}
.directors .flex-direction-nav li.flex-nav-prev{ left:0;}
.directors .flex-direction-nav li.flex-nav-next{ right:0;}
.directors .flex-direction-nav li a{ display:block; perspective:300px; position:relative;}
.directors .flex-direction-nav li a:before{ content:""; position:absolute; top:9px; display:block; width:50px; padding-right:32px; line-height:1; padding-left:32px; height:56px; padding-top:0; line-height:56px;color:#ffffff; font-size:14px;  background:#ff2524; transition:0.32s;}
.directors .flex-direction-nav li a.flex-prev:before{ content:"Last"; left:-114px; text-align:left;}
.directors .flex-direction-nav li a.flex-next:before{ content:"Next"; right:-114px; text-align:right;}
.directors .flex-direction-nav li a span{ display:block; width:14px; padding:13px 10px 0; height:61px; background:#51626f; text-align:center; color:#ffffff; font-size:14px; line-height:1.2; transition:0.32s 0.14s; transform-origin:left center; -webkit-transform-origin:left center;}
.directors .flex-direction-nav li a.flex-next span{ transform-origin:right center;}
.directors .flex-direction-nav li a.flex-prev:hover span{ transform:rotateY(90deg); -webkit-transform:rotateY(90deg); -moz-transform:rotateY(90deg); opacity:0; visibility:hidden; transition:0.32s 0s;}
.directors .flex-direction-nav li a.flex-prev:hover:before{ left:0;}
.directors .flex-direction-nav li a.flex-next:hover span{ transform:rotateY(-90deg); -webkit-transform:rotateY(-90deg); -moz-transform:rotateY(-90deg); opacity:0; visibility:hidden; transition:0.32s 0s;}
.directors .flex-direction-nav li a.flex-next:hover:before{ right:0;}

.desigerfix{ display:none; width:100%; text-align:center; position:absolute; left:0; bottom:30px;}
.desigerfix strong{ display:block; text-align:center; line-height:1; color:#fff; font-size:42px; margin-bottom:14px;}
.desigerfix span{ display:block; text-align:center; color:#fff; line-height:1; margin-bottom:20px; font-size:18px;}
.desigerli{ text-align:center;}
.desigerli i{ display:inline-block; width:130px; height:40px; border:1px solid rgba(255,255,255,0.3); border-radius:10px; background:rgba(0,0,0,0.5); text-align:center; line-height:40px; margin-right:20px; font-size:18px; font-style:normal; color:#fff;}
.desigerli i:last-child{ margin-right:0;}

.reruits{ width:100%; height:100%; position:fixed; left:0; top:0; z-index:100; opacity:0; visibility:hidden; transition:0.5s; overflow:hidden;}
.recuitebgs{ width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0.8); background:#000\9; filter:alpha(opacity=80);}
.recruiwrs{ opacity:0; transition:0s; visibility:hidden; transform:translateX(100px); -webkit-transform:translateX(100px); -moz-transform:translateX(100px); position:absolute; left:50%; top:50%; margin-left:-308px; margin-top:-285px;}   
.recuitefix{ padding:42px 48px 32px; background:#fff; width:520px; background:#fff; z-index:10; border-top:4px solid #ff2524; max-height:100%; overflow-y:auto;}
.recuitefix b{ display:block; width:21px; height:21px; transition:0.38s; background:url(../images/close2.png) center no-repeat; cursor:pointer; position:absolute; right:-33px; top:50%; margin-top:-10px;}
.recuitefix b:hover{ transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg);}
.recuitefix h3{ line-height:1; color:#000000; font-size:28px; font-weight:normal;}
.recuitefix i{ font-style:normal; display:block; color:#000000; font-size:28px; line-height:1; position:absolute; right:48px; top:38px;}
.recuitedo{ margin-top:58px; margin-bottom:62px; height:320px; overflow:hidden;}
.recuitedo p{ color:#323232; font-size:14px;}
.recuitefix a{ display:inline-block; color:#ff2524; font-size:14px;}
.reruits.on{ opacity:1; visibility:visible; transition:0.6s;}
.reruits.on .recruiwrs{ opacity:1; visibility:visible; transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0); transition:0.5s 0.15s;}

.prevpro{ position:absolute; right:7px; bottom:46px; z-index:20;}
.probtns{ margin-bottom:8px; position:relative; width:70px; overflow:hidden; text-align:right;}
.probtns:last-child{ margin-bottom:0;}
.probtns b{ display:block; width:40px; float:right; height:40px; border-radius:50%; transition:0.4s;}
.probtns1 b{ background:#51626f url(../images/arrow14.png) center no-repeat;}
.probtns2 b{ background:#51626f url(../images/arrow15.png) center no-repeat;}
.probtns span{ display:block; height:34px; padding:0 9px; background:#ff2524; line-height:34px; color:#fff; font-size:13px; position:absolute; right:0; top:3px; white-space:nowrap; transition:0.43s; visibility:hidden; right:-70px;}
.probtns:hover b{ opacity:0; visibility:hidden;}
.probtns:hover span{ right:0; visibility:visible; opacity:1;}