@charset "utf-8";
/* 
 * Project Name:涓濅附闆
 * Author:榛橀粯
 * Date:2019-11-13
 */
@font-face {
  font-family: "066-CAI978";
  src: url("fonts/066-CAI978.woff2") format("woff2"),
       url("fonts/066-CAI978.woff") format("woff"),
       url("fonts/fonts/066-CAI978.ttf") format("truetype"),
       url("fonts/066-CAI978.eot") format("embedded-opentype"),
       url("fonts/066-CAI978.svg") format("svg");
}

@font-face {
	font-family: "SourceHanSansCN-Regular";
	src: url("fonts/SourceHanSansCN-Regular.woff2") format("woff2"),
		 url("fonts/SourceHanSansCN-Regular.woff") format("woff"),
		 url("fonts/SourceHanSansCN-Regular.ttf") format("truetype"),
		 url("fonts/SourceHanSansCN-Regular.eot") format("embedded-opentype"),
		 url("fonts/SourceHanSansCN-Regular.svg") format("svg");
  }
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%; overflow-x: hidden;}
/* always display scrollbars */
body { font: 12px/1.8 "SourceHanSansCN-Regular", "Microsoft YaHei New","Microsoft Yahei","寰蒋闆呴粦","Hiragino Sans GB","鍐潚榛戜綋","Arial","Helvetica","SimHei","榛戜綋","STXihei","鍗庢枃缁嗛粦",sans-serif; margin: 0 auto; color: #000000; background-color: #fff; _background-attachment:fixed; 
_background-image:url(about:blank); overflow-y:visible\9; -webkit-text-size-adjust: 100% !important;}

body::-webkit-scrollbar {
	width: 6px;
	background-color: #fff
}

body::-webkit-scrollbar-track {
	border-radius: 6px;
	background-color: #fff
}

body::-webkit-scrollbar-thumb {
	border-radius: 0px;
	background-color: #469181;
}

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: #f7a300; color: #fff; text-shadow: none; }
::selection { background: #f7a300; color: #fff; text-shadow: none; }
a { text-decoration: none; blr: expression(this.onFocus=this.blur()); -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
a:link, a:visited { text-decoration: none; color:inherit;}
a:active, a:hover { text-decoration: none; color:inherit;}
.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:1400px; margin: 0px auto;}

.header{ position: fixed; left: 0; top: 0; z-index: 99; width: 100%; transition: 0.4s;}
.header.active,.header.active1,.header.active2{ background: #fff;}
.header.active .logo img.logo-show,.header.active1 .logo img.logo-show,.header.active2 .logo img.logo-show{ opacity: 0; visibility: hidden;}
.header.active .logo img.logo-hide,.header.active1 .logo img.logo-hide,.header.active2 .logo img.logo-hide{ opacity: 1; visibility: visible;}
.header.active .navs >li >a,.header.active1 .navs >li >a,.header.active2 .navs >li >a{ color: #000000;}
.header.active .navs >li >a small, .header.active1 .navs >li >a small, .header.active2 .navs >li >a small{ color: #bfbfbf;}
.header.active .language .lanbtn,.header.active1 .language .lanbtn,.header.active2 .language .lanbtn{ color: #000;}
.header.active .language .lanbtn i:before,.header.active1 .language .lanbtn i:before,.header.active2 .language .lanbtn i:before{ color: #000;}
.header.active .searchs:before,.header.active1 .searchs:before,.header.active2 .searchs:before{ color: #000;}
.header.active .searchs:after,.header.active1 .searchs:after,.header.active2 .searchs:after{ background: #000000; opacity: 0.5; filter:alpha(opacity=50);}

.logo{ position: relative; z-index: 5; float: left; margin-left: 49px; margin-top: 13px; width: 141px; height: 65px;}
.logo img{ display: block; width: 100%; height: auto; transition: 0.4s;}
.logo img.logo-hide{ opacity: 0; visibility: hidden; position: absolute; left: 0; top: 0;}
.navs{ position: absolute; left: 48%; transform: translateX(-50%); top: 0; text-align: center; z-index: 4; display: flex;}
.navs >li{ position: relative; float: left;}
.navs >li >a{ position: relative; display: block; width: 130px; padding-top:35px; height: 55px; text-align: center; color: #FFFFFF; font-size: 18px; font-weight: bold;}
.navs >li >a small{ display: block; line-height: 1; font-family: Arial !important; font-size: 12px; font-weight: normal;}
.navs >li >a:before{ content: ""; width: 0; height: 4px; background: #469181; position: absolute; right: 0; bottom: 0; transition: 0.45s cubic-bezier(0.7, 0, 0.3, 1);}
.navs >li:hover >a:before,.navs >li.active >a:before{ width: 100%; right: auto; left: 0;}

.nav-item{ position: absolute; left: 0; top: 100%; width: 100%; z-index: 3; display: none; overflow: hidden; background: #f5f5f5; padding: 25px 0;}
.nav-item li a{ display: block; line-height: 1.5; padding: 8px 0; color: #000; font-size: 16px; font-weight: lighter;} 
.nav-item li a:hover{ color: #469181;}

.menu-bg{ position: absolute; left: 0; top: 100%; width: 100%; height: 0; background: #fff; overflow: hidden; display: none !important;}
.menu-bg:before{ position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 1px; background: #707070; background: rgba(112,112,112,0.15);}

.header-btn{ float: right;}
.language{ float: left; position: relative; margin-top: 29px; padding-bottom: 30px;}
.language .lanbtn{ display: block; padding: 0 22px; line-height: 30px; color: #FFFFFF; font-size: 14px; font-family: arial; font-weight: bold; cursor: pointer; transition: 0.36s;}
.language .lanbtn i{ display: inline-block; margin-left: 10px; font-size: 10px; font-weight: normal; vertical-align: middle; position: relative; transition: 0.38s;}
.language-menu{ position:absolute; top:100%; box-shadow: 0 0 5px rgba(0,0,0,0.5); left:0; z-index:1; width:100%; padding:13px 0; border-top:2px solid #469181; background:#fff; opacity: 0; visibility: hidden; transform: translateY(30px); -webkit-transform: translateY(30px); transition: 0.45s cubic-bezier(0.7, 0, 0.3, 1);}
.language-menu li a{ display:block; line-height:26px; color:#777; text-align: center; font-weight: bold; font-size: 14px;}
.language-menu li a:hover{ color: #469181;}
.language:hover .lanbtn i{ transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);}
.language:hover .language-menu{ opacity: 1; visibility: visible; transform: translateY(0px); -webkit-transform: translateY(0px);}
.searchs{ position: relative; float: left; height: 90px; line-height: 90px; padding: 0 34px; color: #fff; font-size: 22px; cursor: pointer;}
.searchs:before{ transition: 0.38s;}
.searchs:hover:before{ color: #469181;}
.searchs:after{ position: absolute; left: 0; top: 50%; margin-top: -15px; content: ""; width: 1px; height: 30px; background: #FFFFFF; opacity: 0.5; filter:alpha(opacity=0.5);} 

.menubtn{ position:relative; z-index: 20; float: right; transition: 0.4s; width: 90px; height: 90px; background: #000000; cursor: pointer;}
.menuiphone{ display: none;}
.menubtn span{ display:block; width:31px; height:2px; background:#fff; margin:auto; margin-top:44px; position:relative; 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;}
.menubtn span:after,
.menubtn span:before { content: ""; position: absolute; display: inline-block; width: 100%; height: 2px; 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}
.menubtn span:before {top: -10px;-webkit-transition-property: top,transform;-moz-transition-property: top,transform;-ms-transition-property: top,transform;-o-transition-property: top,transform;transition-property: top,transform;}
.menubtn span:after {bottom: -10px;-webkit-transition-property: bottom,transform;-moz-transition-property: bottom,transform;-ms-transition-property: bottom,transform;-o-transition-property: bottom,transform;
transition-property: bottom,transform;}
.menubtn.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}
.menubtn.active span:after,.menubtn.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}
.menubtn.active span:before {top: 0px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg)}
.menubtn.active span:after {bottom:0px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}

.search-box{ position: absolute; left: 0; top: 100%; width: 100%; background: #fff; height: 0; overflow: hidden;}
.search-wrapper{ padding: 104px 0 112px; border-top: 1px solid #707070; border: 1px solid rgba(112,112,112,0.15);}
.search-hidden{ position: relative; width: 798px; margin: auto;}
.search-wrapper .search-text{ padding: 0; padding: 20px 0 20px 12px; margin: 0; border: 0; border-bottom: 2px solid #707070; box-sizing: border-box; width: 100%; color: #666666; font-size: 16px; line-height: 1; font-weight: lighter; background: none; font-family: "寰蒋闆呴粦";}
.search-wrapper .search-text:focus{ border-bottom-color: #469181;}
.search-wrapper .search-text::-webkit-input-placeholder{ color: #666666;}
.search-wrapper .search-text:focus::-webkit-input-placeholder{ opacity: 0; visibility: hidden;}
.search-wrapper .search-sub{ position: absolute; right: 0; top: 0; display: block; margin: 0; border: 0; height: 63px; line-height: 63px; padding: 0 6px; cursor: pointer; background: none; outline: none;}
.search-wrapper .search-sub:before{ color: #000000; font-size: 22px; transition: 0.35s;}
.search-wrapper .search-sub:hover:before{ color: #469181;}

.navigate{ position: fixed; left: 0; top: 90px; bottom: 0; width: 100%; height: 0; overflow: hidden; background: #fff; overflow: hidden; text-align: center;}
.navigate:before{ position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 1px; background: #707070; background: rgba(112,112,112,0.15);}
.navigate-wrapper{ display: inline-block; margin: auto; margin-top: 104px; text-align: left;}
.navigate-item{ display: block; float: left; margin-left: 157px;}
.navigate-item:first-child{ margin-left: 0;}
.navigate-item dt{ display: block; line-height: 1; margin-bottom: 32px;}
.navigate-item dt a{ display: inline-block; color: #000000; font-size: 22px; font-weight: bold;}
.navigate-item dt a:hover{ color: #469181;}
.navigate-item dd{ display: block;}
.navbtn{ margin-bottom: 22px;}
.navbtn a{ display: inline-block; color: #666666; font-size: 16px; line-height: 1.4; font-weight: lighter;}
.navbtn a:hover{ color: #469181;}

.menu-leve{ position: absolute; left: 0; top: 0; z-index: 10; width: 100%; background: #fff;}
.menu-leve:before{ position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 1px; background: #707070; background: rgba(112,112,112,0.15);}
.navigateis{ position: fixed; left: 0; top: 59px; bottom: 0; width: 100%; background: #F8F8F8; border-top: 1px solid rgba(0,0,0,0.1); padding-bottom: 30px; overflow-y: auto; transform: translate3D(100%, 0, 0); -webkit-transform: translate3D(100%, 0, 0); visibility: hidden; transition: 0.8s cubic-bezier(0.7, 0, 0.3, 1);}
.navigateis.show{ visibility: visible; transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);}
.navigatewr{ padding-top: 38px;}
.navigatewr >li{ margin-bottom: 14px; text-align: center;}
.navigatewr >li >a{ display: inline-block; color: #333333; font-size: 18px; font-weight: bold; line-height: 1.3; margin-bottom: 10px;}
.leval-menu{ padding: 10px 0; background: #fff; display: none;}
.leval-menu li{ margin-bottom: 12px; text-align: center;}
.leval-menu li a{ display: inline-block; color: #666666; font-size: 14px;}
.leval-menu li a:hover{ color: #469181;}

/*banner*/
.banner{ position: relative; height: 100%; height: 100vh;}
.banner .bbg{ width: 100%; height: auto; display: none;}
.banner video{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.banner-content{ width: 90%; position: absolute; left: 50%; margin-left: -45%; top: 50%; margin-top: -168px; text-align: center; }
.banner-font.hide{ opacity: 0; visibility: hidden;}
.banner-font{ margin-bottom: 60px; text-shadow: 0 0 4px rgba(0,0,0,0.4);transition: 0.5s;} 
.banner-font small{ display: block; line-height: 1; color: #fff; font-size: 40px; font-family: arial; text-transform: uppercase; margin-bottom: 18px; overflow: hidden;}
.banner-font h3{ color: #fff; font-size: 66px; line-height: 1.2; text-align: center; margin-bottom: 32px;}
.banner-font p{width: 540px;text-align: center;line-height: 1.4;color: #fff;font-size: 20px;font-weight: lighter;margin: auto;}
.video-btn{ width: 67px; height: 67px; border-radius: 50%; position: relative; margin: auto; background: #000; filter:alpha(opacity=40); background: rgba(0,0,0,0.4); cursor: pointer; box-shadow:  0 0 5px rgba(0,0,0,0.4); transition: 0.4s;}
.video-btn:hover{ background: #469181; background: rgba(70,145,129,0.8);}
.video-btn span{ position: absolute; left: 50%; top: 50%; margin-left: -7px; margin-top: -9px; width: 14px; height: 19px; background: url(../images/stop.png) center no-repeat;}
.video-btn.stop span{ background: url(../images/play.png) center no-repeat;}
.scroll{ position: absolute; left: 50%; bottom: 0; margin-left: -65px; padding-bottom: 74px; line-height: 1; color: #fff; font-size: 12px; font-weight: bold; font-family: arial;}
.scroll:before{ content: ""; position: absolute; left: 50%; margin-left: -1px; bottom: 0; width: 2px; height: 60px; background: #fff;}
.slide-nav{ position: fixed; right: 0; top: 90px; bottom: 0; width: 90px; background: #000; filter:alpha(opacity=20); z-index: 90; background: rgba(0,0,0,0.2);}
.menuhref{ position: absolute;  top: 48px; right: 0; bottom: 90px; width: 100%; display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap;}
.menuhref li{ text-align: center; width: 100%; text-transform: uppercase; flex: 0 1 auto; height: 20px; transition: 1s;}
.menuhref li span{ display: block; color: #fff; opacity: 0.5; height: 20px; filter:alpha(opacity=50); font-weight: bold; cursor: pointer; transform: rotate(90deg); transition: 0.45s;} 
.menuhref li.active{ height: 51%;}
.menuhref li.active span,.menuhref li:hover span{ opacity: 1; filter:alpha(opacity=100);}
.mouse{ position: absolute; right: 32px; bottom: 46px; width: 27px; height: 40px; background: url(../images/mouse.png) center no-repeat; z-index: 10; transition: 0.5s;}
.mouse:before{position: absolute; left: 50%; margin-left: -1px; top: 8px; content: ""; width: 2px; height: 8px; background: #fff; border-radius: 2px;  animation:moveDownSpot 1000ms infinite; -webkit-animation:moveDownSpot 1000ms infinite; -moz-animation:moveDownSpot 1000ms infinite;}
.mouse.hide{ opacity: 0; visibility: hidden; transform: translateY(-40px); -webkit-transform: translateY(-40px);}
@keyframes moveDownSpot {
	from{
		opacity: 1;
		top: 4px;
	}
	to{
		opacity: 0.1;
		top: 16px;
	}
}

.home-width{ width: 1400px; margin: auto;}
.about-crace{ position: relative; width: 100%; height: 100%; height: 100vh; z-index: 3; }
.about-wrapper{ position: absolute; left: 50%; margin-left: -700px; top: 50%; margin-top: -211px;}
.about-content{ margin-bottom: 96px; text-align: center;}
.about-content small{ display: block; text-align: center; line-height: 1; color: #fff; font-size: 40px; text-transform: uppercase; font-family: "066-CAI978"; overflow: hidden;}

.about-content strong{ position: relative; display: block; margin-top: 14px; padding-bottom: 28px; text-align: center; line-height: 1; color: #fff; font-size: 30px; font-weight: bold; overflow: hidden;}
.about-content strong:before{ content: ""; position: absolute; left: 50%; margin-left: -15px; bottom: 0; width: 30px; height: 4px; background: #fff;}
.about-content p{ margin-top: 32px; color: #fff; font-size: 30px; line-height: 1.4; }
.about-list{ text-align: center; font-size: 0;}
.about-list li{ display: inline-block; margin-left: 78px; text-align: center;}
.about-list li:first-child{ margin-left: 0;}
.abouicon{ position: relative; z-index: 3; margin: auto; width: 112px; height: 112px; border-radius: 50%; background: #fff; filter:alpha(0.8); background: rgba(255,255,255,0.8); transition: 0.5s;}
.abouicon:before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: #479182; opacity: 0; visibility: hidden; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transition: 0.65s; z-index: -1;}
.abouicon b{ display: block; color: #469181; font-size: 46px; text-align: center; font-weight: normal; line-height: 112px;}
.abouicon b:before{ transition: 0.4s;}
.about-list li .aboutname{ display: block; margin-top: 12px; text-align: center; line-height: 1; color: #FFFFFF; font-size: 16px; font-weight: lighter;}
.about-list li a:hover .abouicon{ background: rgba(255,255,255,0); transition-delay: 0.4s;}
.about-list li a:hover .abouicon:before{ opacity: 1; visibility: visible; transform: rotateY(0deg); -webkit-transform: rotateY(0deg);}
.about-list li a:hover .abouicon b:before{ color: #fff;}

.slick-list { overflow: hidden; width: 100%; height: 100%; }
.slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; }
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both;}
.industry{ position: relative; height: 100%; height: 100vh;}
.industrys{ position: absolute; left: 50%; margin-left: -700px; top: 50%; margin-top: -265px;}
.industry-list{ padding: 0 116px;}
.industry-item{ float: left; width: 25%;}
.industry-item a{ display: block; position: relative; overflow: hidden; margin: 0 6px;}
.industry-item figure{ display: block; overflow: hidden;}
.industry-item figure img{ display: block; width: 100%; height: auto; transition: 0.56s;}
.industry-title{ position: absolute; left: 26px; top: 26px; z-index: 5;}
.industry-title b{ display: block; line-height: 1; color: #fff; font-size: 16px; font-family: "066-CAI978"; margin-bottom: 13px; font-weight: normal;}
.industry-title small{ display: block; line-height: 1.2; color: #fff; font-size: 30px; font-family: "066-CAI978";}
.industry-name{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 184px; background: url(../images/shabox.png) left bottom repeat-x; background: linear-gradient(rgba(0,0,0,0), #000); transition: 0.4s 0.2s;}
.industry-name span{ position: absolute; left: 26px; right: 24px; bottom: 40px; display: block; color: #FFFFFF; font-size: 16px; line-height: 1.2; padding-top: 16px; border-top: 1px solid #fff; border-top: 1px solid rgba(255,255,255,0.5);}
.industry-mark{ position: absolute; left: 0; right: 0; bottom: -288px; padding: 0 25px 43px; background: #469181; z-index: 5; visibility: hidden; transition: 0.56s;}
.indutitle{ padding: 26px 0 17px; border-bottom: 1px solid #fff; border-bottom: 1px solid rgba(255,255,255,0.5);}
.indutitle strong{ display: block; float: left; color: #fff; font-size: 16px; font-weight: bold; line-height: 1.2;}
.indutitle b{ position: relative; float: right; display: block; width: 20px; height: 20px; transition: 0.45s;}
.indutitle b:before{ position: absolute; left: 0; top: 10px; content: ""; width: 100%; height: 1px; background: #fff;}
.indutitle b:after{ position: absolute; left: 10px; top: 0; content: ""; width: 1px; height: 100%; background: #fff;}
.industry-text{ padding-top: 27px;}
.industry-text p{ color: #fff; font-size: 14px; height: 75px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.industry-text span{ position: relative; display: inline-block; margin-top: 58px; color: #fff; font-size: 12px; font-family: arial; font-weight: bold; text-transform: uppercase;}
.industry-text span:before{ position: absolute; right: 0; bottom: -2px; content: ""; width: 0; height: 2px; background: #fff; transition: 0.45s;}
.industry-mark:hover .indutitle b{ transform: rotate(180deg); -webkit-transform: rotate(180deg);}
.industry-mark:hover .industry-text span:before{ right: auto; left: 0; width: 100%;}
.industry-item a:hover figure img{ transform: scale(1.1); -webkit-transform: scale(1.1); transition: 6s;}
.industry-item a:hover .industry-mark{ bottom: 0; visibility: visible;}
.industry-item a:hover .industry-name{ opacity: 0; visibility: hidden; transition: 0.4s;}
.industrybtn{ position: absolute; top: 50%; margin-top: -26px; z-index: 5; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; border: 1px solid #fff; border: 1px solid rgba(255,255,255,0.3); text-align: center; line-height: 50px; color: #fff; font-size: 14px; transition: 0.4s;}
.industrybtn:after{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; z-index: -1; background: #469181; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transition: 0.48s; opacity: 0; visibility: hidden;}
.industrybtn.prev{ left: 0;}
.industrybtn.next{ right: 0;}
.industrybtn:hover{ border: 1px solid #469181;}
.industrybtn:hover:after{ opacity: 1; visibility: visible; transform: rotateY(0deg); -webkit-transform: rotateY(0deg);}
.industrybtn.prev:hover{ text-indent: -3px;}
.industrybtn.next:hover{ text-indent: 3px;}
.latest-news{ position: relative; z-index: 5; height: 100%; height: 100vh;}
.news-wrapper{ position: absolute; left: 50%; margin-left: -700px; top: 50%; margin-top: -302px;}
.news-title{ margin-bottom: 62px; text-align: center;}
.news-title small{ display: block; text-align: center; line-height: 1; color: #fff; font-size: 40px; font-family: "066-CAI978"; text-transform: uppercase; margin-bottom: 16px; overflow: hidden;}
.news-title strong{ display: block; line-height: 1; color: #fff; font-size: 30px; font-weight: bold; overflow: hidden;}
.news-content{ position: relative;}
.newsleft{ position: relative; width: 60.2%; float: left; background: #fff;}
.newsleft:before{ content: ""; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background: #E9E9E9;}
.ntitle{ padding: 29px 53px 18px 55px;}
.ntitle strong{ display: block; float: left; color: #666666; font-size: 14px; font-weight: bold; line-height: 1.2;}
.ntitle .more{ float: right;}
.more{ position: relative; display: block; width: 20px; height: 20px;}
.more:hover{ transform: rotate(180deg); -webkit-transform: rotate(180deg);}
.more:before{ position: absolute; left: 0; top: 10px; content: ""; width: 100%; height: 1px; background: #469181;}
.more:after{ position: absolute; left: 10px; top: 0; content: ""; width: 1px; height: 100%; background: #469181;}
.news-list{ padding-left: 55px; padding-bottom: 33px; margin-right: 10px;}
.news-item{ float: left; width: 50%;}
.news-wr{ margin-right: 42px;} 
.newsimg{ position: relative; overflow: hidden; line-height: 1; padding-bottom: 50.72%; height: 0;}
.newsimg img{position: absolute; left: 0; top: 0; display: block; width: 100%; height: auto; transition: 0.54s;}
.news-text{ padding-top: 20px;}
.news-text strong{ display: block; margin-bottom: 12px; color: #469181; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.news-text p{ height: 75px; color: #999999; font-size: 14px; font-weight: lighter; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.news-text time{ position: relative; display: block; padding-top: 13px; margin-top: 32px; line-height: 1; color: #999999; font-size: 14px;}
.news-text time:before{ content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 1px; background: #707070; opacity: 0.3; filter:alpha(opacity=30);}
.news-wr a:hover .newsimg img{ transform: scale(1.05); -webkit-transform: scale(1.05);}
.notice{ position: absolute; right: 0; top: 0; width: 39.8%; height: 100%; background: #fff;}
.notice .ntitle{ padding: 29px 49px 18px 52px;}
.notice-list{ padding: 0 49px 24px 52px;}
.notice-list li{ margin-bottom: 22px;}
.notice-list li span{ position: relative; display: block; float: left; padding-left: 14px; color: #999999; font-size: 14px; line-height: 20px; font-weight: lighter; width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.4s;}
.notice-list li span:before{ content: ""; position: absolute; left: 0; top: 50%; margin-top: -2px; width: 4px; height: 4px; background: #469181; border-radius: 50%;}
.notice-list li time{ float: right; color: #999999; font-size: 14px; line-height: 20px;}
.notice-list li a:hover span{ color: #469181;}
.notice-btn{ position: absolute; right: 0; bottom: 0; width: 100%;}
.notice-i{ position: relative; width: 50%; float: left; background: #E9E9E9;}
.notice-i a{ display: block; padding: 38px 0; height: 43px;}
.notice-i b{ display: block; float: left; line-height: 1; color: #469181; font-size: 43px; font-weight: normal; margin-left: 38px}
.notice-i span{ display: block; float: left; color: #469181; font-size: 14px; font-weight: lighter; margin-left: 18px; line-height: 43px;}
.notice-i i{ position: absolute; right: 30px; top: 50%; margin-top: -5px; display: block; line-height: 1; color: #469181; font-size: 9px; transform: scale(0.8); -webkit-transform: scale(0.8); font-style: normal; transition: 0.35s;}
.platform{ background: #469181;}
.platform b:before,.platform span,.platform i:before{ color: #fff;}
.notice-i a:hover i{ right: 24px;}
.notice-i a:hover b{ animation: move 1s infinite;}

@keyframes move {
	0%{
		transform: translateY(0);
	}
	50%{
		transform: translateY(-6px);
		opacity: 0.8;
	}
	100% {
		transform: translateY(0);
	}
}

.footer{ background: #54585A; z-index: 6;}
.footer-nav{ padding: 45px 0; border-bottom: 1px solid #707070;}
.footer-left{ float: left; overflow: hidden;}
.footer-left span.arrows{ display: block; float: left; color: #fff; font-size: 22px; margin-top: 26px;}
.footer-left span.arrows.icon--66{ margin-right: 20px;}
.footer-left span.arrows.icon--67-1{ margin-left: 20px;}
.footer-left .flogo{ float: left; display: block; width: 140px; margin-left: -6px; margin-right: 52px;}
.fnav{ float: left;  margin-top: 12px;}
.fnav li{ position: relative; float: left; margin-right: 40px; height: 55px; display: flex; align-items: center;}
.fnav li:last-child{ margin-right: 0;}
.fnav li img{ width: 100%; height: auto; max-height: 100%;}
.fnav li a{ position: relative; line-height: 16px; color: #fff; font-size: 14px; font-weight: lighter;}
.fnav li:first-child:before{ display: none;}
.flink{ position: relative; float: right; width: 234px;}
.flink span{ position: relative; cursor: pointer; display: block; padding-left: 15px; height: 39px; line-height: 39px; color: #54585A; font-size: 12px; background: #fff;}
.flink span.active:before{ transform: rotate(180deg); -webkit-transform: rotate(180deg);}
.flink span:before{ content: ""; width:0; height:0; border-left:7px solid transparent;  border-right: 7px solid transparent; border-bottom: 10px solid #54585A; position:absolute; right: 16px; top:50%; margin-top: -5px; transition: 0.36s;}
.links{ width: 100%; position: absolute; left: 0; top: 100%; z-index: 10; background: #fff; display: none; height: 120px; overflow-y: auto;}
.links li{ border-bottom: 1px solid #54585A;}
.links li a{ display: inline-block; padding-left: 15px; line-height: 39px; color: #54585A;}
.links li a:hover{ color: #469181;}
.footer-share{ padding: 21px 0 44px;}
.edite{ float: left;}
.edite p{ color: #fff; font-size: 12px; font-weight: lighter; line-height: 2;}
.edite p a.network{ position: relative; display: inline-block; color: #fff; margin-left: 12px;}
.edite p a.network:before{ content: ""; width: 0; height: 1px; background: #fff; position: absolute; right: 0; bottom: 2px; transition: 0.44s;}
.edite p a.network:hover:before{ width: 100%; right: auto; left: 0;}
.allow{ float: right;}
.allow a{ display: block; position: relative; z-index: 3; float: left; margin-left: 17px; width: 39px; height: 39px; border: 1px solid #fff; border-radius: 50%; line-height: 39px; text-align: center; color: #fff; font-size: 16px;}
.allow a:after{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: #469181; z-index: -1; opacity: 0; visibility: hidden; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transition: 0.45s;}
.allow a:hover{ border-color: #469181; transition-delay: 0.15s;}
.allow a:hover:after{ opacity: 1; visibility: visible; transform: rotateY(0deg); -webkit-transform: rotateY(0deg);}

.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; border: 2px solid #469181; 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;}
.allowleft{ float: left;}
.bshare-custom{ float: left;}
.allow .bshare-custom #bshare-more-icon,.allow .bshare-custom .bshare-more-icon{ padding-left: 0 !important; height: 39px !important; background: none !important;}
.allow .bshare-custom #bshare-more-icon:hover{ text-decoration: none !important;}

.scolltop{ position: absolute; right: 0; bottom: 32px; width: 100%; z-index: 4; padding-top: 44px; color: #fff; font-size: 15px; text-align: center; font-family: "066-CAI978"; line-height: 1; text-transform: uppercase; cursor: pointer; transition: 0.58s; opacity: 0; visibility: hidden; transform: translateY(50px); -webkit-transform: translateY(50px);}
.scolltop.show{ opacity: 1; visibility: visible; transform: translateY(0);}
.scolltop:before{ content: ""; position: absolute; left: 50%; margin-left: -16px; top: 0; width: 33px; height: 33px; background: url(../images/top.png) center no-repeat; transition: 0.38s;}
.scolltop:hover:before{ top: -4px;}

.commonbg{ position: absolute; left: 0; top: 0; z-index: -1; width: 103%; height: 100%; background-size: cover; background-size: cover; background-repeat: no-repeat; transition:all 1s cubic-bezier(.77,0,.175,1);}
.wrapper { position:fixed; bottom: 0; left: 0; width:100%; height:100%; }
.pagewr{ position: relative; }
.wrapper .page{ position: absolute; left: 0; right: 0; width: 100%; height: 100%; overflow: hidden; z-index: 5;  height: 100%;}
.wrapper .page1,.wrapper .page2,.wrapper .page3,.wrapper .page4,.wrapper .page5{ top: 0;}
.wrapper .page5{ height: auto !important; z-index: 0 !important; bottom:0; top: auto;}
.wrapper .page.prevs{ z-index: 6;}
.wrapper .page.active{ height: 100%; visibility: visible; z-index:4;}
.wrapper .page.odd{ z-index: 5; height: 100%;}
.wrapper .page.odd.prevs{ z-index: 6;}
.wrapper .page.odd.active{ z-index: 8; height: 100%; height: 0;}

/*about*/
.innerheight{ height: 90px;}
.pbanner,.pbanner-wrapper{ position: relative; overflow: hidden;}
.pimg{ position: relative; padding-bottom: 440px; line-height: 0; height: 0; overflow: hidden;}
.pimg img{ position: absolute; height: 110%; left: 55%; margin-left: -1056px; top: 0;}
.ptext{ position: absolute; left: 50%; margin-left: -700px; top: 110px; text-align: center;}
.ptext small{ display: block; margin-bottom: 28px; text-align: center; line-height: 1.2; color: #fff; font-size: 57px; font-weight: bold; font-family: arial; }
.ptext i{ display: none; margin: auto; width: 26px; height: 3px; background: #fff;}
.ptext p{ margin-top: 32px; text-align: center; line-height: 1.2; color: #E2E2E2; font-size: 30px; font-weight: bold; overflow: hidden;}
.menubox{ position: absolute; left: 0; bottom: 0; width: 100%; background: #000; filter:alpha(opacity=50); background: rgba(0,0,0,0.5);}
.menu-home{ width: 57px; height: 61px; float: left;}
.menu-home a{ display: block; height: 61px; line-height: 61px; text-align: center; color: #fff; font-size: 17px; background: #000; filter:alpha(opacity=60); background: rgba(0,0,0,0.6);}
.menu-home a:hover{ background: #000; line-height: 58px;}
.menulist{ margin-left: 56px; display: flex; display: -webkit-flex;}
.menulist li{ float: left; width: 16.6666%; flex: 1; -webkit-flex: 1; -moz-flex: 1; position: relative;}
.menulist li a{ display: block; text-align: center; height: 61px; line-height: 61px; color: #D8D8D8; font-size: 16px; font-weight: lighter; border-right: 1px solid #707070;}
.menulist li a:before{ content: ""; position: absolute; right: 0; top: 0; width: 0; height: 3px; background: #fff; transition: 0.45s cubic-bezier(0.7, 0, 0.3, 1);}
.menulist li:hover a,.menulist li.active a{ color: #FFFFFF;}
.menulist li:hover a:before,.menulist li.active a:before{ width: 100%; right: auto; left: 0;}

.introduct-title{ padding: 90px 0 84px; text-align: center;}
.introduct-title strong{ display: block; line-height: 1; color: #000000; font-size: 50px; margin-bottom: 28px;}
.introduct-title p{ text-align: center; color: #666666; font-size: 18px; line-height: 1; font-weight: lighter;}
.synopsis{ position: relative; padding-bottom: 41%; height: 0; z-index: 3;}
.synipsiswr{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden;}
.synopsisbg{ position: absolute; left: 0; top: 0; width: 100%; height: 105%; background-attachment: local; background-size: cover; overflow: hidden;}
.synopsis-content{ position: absolute; left: 50%; margin-left: -700px; bottom: -162px; z-index: 3; padding: 26px 27px 120px 57px; width: 712px; background: #469181; background: rgba(70,143,124,0.9); box-shadow: 50px 50px 50px rgba(0,0,0,0.16);}
.synopsis-content h2{ margin-bottom: 10px; color: #fff; font-size: 100px; line-height: 1;}
.synopsis-content strong{ display: block; margin-bottom: 26px; line-height:1.4; color: #fff; font-size: 24px; font-weight: bold;} 
.synopsis-content p{ color: #C1CFCC; font-size: 16px; font-weight: lighter;}

.attestation{ padding: 14.58% 0 0;}
.attesta-item{ margin-bottom: 95px;}
.attesta-item:last-child{ margin-bottom: 0;}
.attesta-img{ width: 50%; float: right; line-height: 1; overflow: hidden;}
.attesta-img img{ display: block; width: 100%; height: auto;}
.attesta-content{ float: left; width: 50%;}
.attesta-wr{ padding: 46px 49px 0;}
.attesta-wr strong{ display: block; color: #469181; font-size: 24px; font-weight: bold; line-height: 1.2; margin-bottom: 6px;}
.attesta-wr span{ display: block; line-height: 1.5; color: #333; font-size: 24px; font-weight: bold;}
.attesta-wr p{ color: #666666; font-size: 16px; font-weight: lighter; text-align: justify; margin-top: 36px;}
.attesta-odd .attesta-img{ float: left;}
.intruducts{ position: relative; padding: 82px 0 85px; background-size: cover; background-position: center;}
.intruimg{ position: absolute; right: 8.3125%; bottom: 0; height: 110.5%;}
.intruimg img{ height: 100%; width: auto;}
.themes{ position: relative; z-index: 3;}
.theme-title{ margin-bottom: 48px;}
.theme-title strong{ display: block; margin-bottom: 22px; text-align: center; line-height: 1.2; color: #000000; font-size: 24px; font-weight: bold;}
.theme-title p{ margin: auto; width: 789px; max-width: 100%; color: #666666; font-size: 16px; font-weight: lighter; text-align: center;}
.teme-list li{ float: left; margin-left: 0.3625%; padding: 41px 0 74px; width: 19.71%; text-align: center; background: #fff; filter:alpha(opacity=80); background: rgba(255,255,255,0.8);}
.teme-list li:first-child{ margin-left: 0;}
.teme-list li b{ display: block; text-align: center; color: #469181; font-size: 46px; font-weight: normal; line-height: 1; transition: 0.32s;}
.teme-list li span{ display: block; margin-top: 26px; margin-bottom: 29px; text-align: center; line-height: 1; color: #333333; font-size: 18px; font-weight: bold; transition: 0.35s;}
.teme-list li p{ line-height: 1; text-align: center; color: #666666; font-size: 16px; font-weight: lighter;}
.teme-list li:hover b{ transform: translateY(-5px); -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px);}
.innovate{ padding: 122px 0 150px;}
.innovate-item{ width: 47.14%; float: left; margin-bottom: 40px;}
.innovate-item:nth-child(2n+2){ float: right;}
.innovate-img{ position: relative; padding-bottom: 57.33%; line-height: 1; height: 0; overflow: hidden;}
.innovate-img img{ position: absolute; left: 0; top: 0; width: 100%; height: auto; transition: 0.65s;}
.innovateinn{ padding-top: 45px;}
.innovateinn p{ text-align: center; color: #666666; font-size: 14px; font-weight: lighter; line-height: 2;}
.innovate-item:hover .innovate-img img{ transform: scale(1.05); -webkit-transform: scale(1.05);}
.honor-wrapper{ position: relative;}
.honor{ padding: 100px 0 120px; background-attachment: fixed; background-size: cover; background-position: center;}
.honormax{ width: 610px; margin: auto; position: relative; z-index: 3;}
.honoritem{ float: left;}
.honoritem img{ display: block; width: 100%; height: auto;}
.honoritem span{ display: block; text-align: center; line-height: 1; margin-top: 30px; color: #333333; font-size: 16px; font-weight: lighter;}
.honorbtn{ position: absolute; top: 50%; margin-top: -26px; width: 52px; height: 52px; line-height: 52px; border-radius: 50%; text-align: center; color: #fff; font-size: 14px; background: #fff; filter:alpha(opacity=80); background: rgba(255,255,255,0.8); border-radius: 50%; cursor: pointer; transition: 0.4s;}
.honorbtn.prev{ left: -80px;}
.honorbtn.next{ right: -80px;}
.honorbtn:hover{ background: #469181;}
.honor-min{ width: 33.33%; margin: auto;}
.honorin{ width: 33.333%; float: left; position: relative; padding: 0 15px; box-sizing: border-box;}
.honorin:before{ content: ""; position: absolute; left: 15px; top: 0; right: 15px; bottom: 0; background: #000; opacity: 0.5; filter: alpha(opacity=50); z-index: 2;}
.honorin img{ display: block; width: 100%; height: auto;}
.honor-min .slick-list{ overflow: visible;}
.honorwrd{ position: absolute; left: 157px; right: 157px; top: 50%; margin-top: -100px; overflow: hidden;}

.course{ padding: 120px 0 50px; background: #F2F2F2; overflow: hidden;}
.coursett{ text-align: center; color: #000000; font-size: 50px; font-weight: bold; line-height: 1;}
.course-main{ position: relative; margin-top: 122px; z-index: 3;}
.course-main:before{ content: ""; width: 1px; position: absolute; left: 50%; top: 0; bottom: 105px; background: url(../images/line.png) repeat-y;}
.course-list li{ position: relative; float: right; width: 50%; margin-bottom: 40px;}
.coursewr{ padding: 0 32px;}
.coursewr:before{ content: ""; position: absolute; left: -6px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #469181; z-index: 2;}
.coursewr:after{ content: ""; position: absolute; left: -13px; top: -5px; width: 26px; height: 26px; border-radius: 50%; background: #469181; opacity: 0.52; filter:alpha(opacity=52); z-index: 1; transform: scale(0); -webkit-transform: scale(0); visibility: hidden; transition: 0.4s;}
.coursewr .coursebg{ display: block; width: 48px; height: 48px; border-radius: 50%; background: #F2F2F2; position: absolute; left: -24px; top: -22px;}
.course-title{ position: relative; display: block; color: #469181; font-size: 18px; font-weight: lighter; line-height: 1;}
.course-title b{ display: block; line-height: 1.2; margin-bottom: 8px;} 
.course-text{ margin-top: 24px; padding: 35px 64px 20px 34px; min-height: 115px; background: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.16);}
.course-text p{ color: #333333; font-size: 15px; font-weight: lighter; line-height: 2; text-align: justify;}
.coursewr:hover:after{ transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); visibility: visible;}
.course-list li:nth-child(2){ margin-top: 130px;}
.course-list li.odd { float: left;}
.course-list li.odd .coursewr{ float: left;}
.course-list li.odd .coursewr .course-title{ text-align: right;}
.course-list li.odd .coursewr .coursebg{ left: auto; right: -24px;}
.course-list li.odd .coursewr:before{ left: auto; right: -6px;}
.course-list li.odd .coursewr:after{ left: auto; right: -13px;}
.culturn{ padding-top: 120px; /*background: url(../img/18.jpg)  center bottom no-repeat;*/}
.cuturn-tt{ margin-bottom: 55px; text-align: center; line-height: 1; color: #000000; font-size: 50px; font-weight: bold;}
.culturn-btn span{ position: relative; z-index: 3; display: block; float: left; color: #333333; font-size: 18px; font-weight: lighter; text-align: center; width: 50%; height: 74px; line-height: 74px; background: #F2F2F2; cursor: pointer; transition: 0.4s;}
.culturn-btn span:before{ content: ""; width: 100%; height: 0; background: #469181; position: absolute; left: 0; bottom: 0; z-index: -1; transition: 0.4s;}
.culturn-btn span:hover,.culturn-btn span.active{ color: #fff;}
.culturn-btn span:hover:before,.culturn-btn span.active:before{ height: 100%; bottom: auto; top: 0;}
.culturn-item{ display: none;}
.culturn-item:first-child{ display: block;}
.culturn-inso{ padding: 122px 0 150px;}
.culturn-inso li{ float: left; margin-bottom: 90px; width: 33.3333%; text-align: center;}
.culturn-inso li b{ position: relative; z-index: 3; margin: auto; display: block; width: 93px; height: 93px; background: #333333; border-radius: 50%; line-height: 93px; color: #fff; font-size: 32px; font-weight: normal;}
.culturn-inso li b:after{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: #479182; opacity: 0; visibility: hidden; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transition: 0.65s; z-index: -1;}
.culturn-inso li strong{ display: block; margin-top: 18px; margin-bottom: 22px; text-align: center; line-height: 1; color: #333333; font-size: 18px; font-weight: bold;}
.culturn-inso li p{ text-align: center; line-height: 1.2; color: #666666; font-size: 16px; font-weight: lighter;}
.culturn-inso li:hover b:after{ opacity: 1; visibility: visible; transform: rotateY(0deg); -webkit-transform: rotateY(0deg);}
.idea{ padding: 100px 0;}
.idea-list li{ margin-top: -1px;}
.idea-top{ position: relative; height: 63px; border-top: 1px solid #707070; border-bottom: 1px solid #707070; transition: 0.4s; cursor: pointer;}
.idea-top span{ display: block; float: left; margin-left: 16px; line-height: 63px; color: #333333; font-size: 18px; font-weight: bold; transition: 0.4s;}
.idea-top b{ position: absolute; right: 43px; top: 50%; margin-top: -10px; display: block; width: 19px; height: 19px; transition: 0.38s;}
.idea-top b:before{ content: ""; width: 100%; height: 3px; background: #333333; position: absolute; right: 0; top: 8px; transition: 0.35s;}
.idea-top b:after{ content: ""; width: 3px; height: 100%; background: #333333; position: absolute; top: 0; left: 8px; transition: 0.35s;}
.idea-top:hover,.idea-top.active{ border-color: #469181;}
.idea-top:hover span,.idea-top.active span{ color: #469181;}
.idea-top:hover b{ transform: rotate(180deg); -webkit-transform: rotate(180deg);}
.idea-top:hover b:before,.idea-top:hover b:after,.idea-top.active b:before,.idea-top.active b:after{ background: #469181;}
.idea-top.active b:after{ opacity: 0; visibility: hidden; transform: translateY(10px);}
.idea-text{ padding: 20px 26px 32px; display: none;}
.idea-text p{ color: #333333; font-size: 14px; font-weight: lighter; line-height: 2;}
.behavior{ padding: 108px 0 168px; background-position: center; background-size: cover;}
.behavior-title{ margin-bottom: 86px; text-align: center; line-height: 1; color: #000000; font-size: 50px; font-weight: bold;}
.behavior-list li{ width: 30.57%; float: left; margin-left: 4.145%;}
.behavior-list li:first-child{ margin-left: 0;}
.behavior-list li span{ display: block; text-align: center; height: 60px; line-height: 60px; color: #fff; font-size: 16px; font-weight: lighter; background: #333333;}
.behavior-text{ padding: 46px 30px 42px; box-sizing: border-box; width: 100%; background: #fff; border: 1px solid #707070; border-top: none; display: table;}
.behavior-text p{ height: 100px; display: table-cell; vertical-align: middle; color: #666666; font-size: 16px; font-weight: lighter; text-align: center;}
.framework{ padding: 138px 0 260px; text-align: center;}
.framework img{ display: block; max-width: 100%; margin: auto;}
.care{ padding: 110px 0 22px;}
.care-list li{ position: relative; margin-bottom: 74px;}
.care-list li figure{ display: block; line-height: 1; overflow: hidden; width: 66%;} 
.care-list li figure img{ display: block; width: 100%; height: auto; transition: 0.78s;}
.care-text{ position: absolute; right: 0; top: 50%; transform: translateY(-50%);  display: table-cell; width: 30%;}
.care-text p{ display: table-cell; vertical-align: middle; color: #333333; font-size: 16px; font-weight: bold;}
.care-list li:nth-child(2n+2) figure{ float: right;}
.care-list li:nth-child(2n+2) .care-text{ right: auto; left: 0;}

.team{ padding: 134px 0 90px;}
.team-list{ margin-left: -25px; margin-right: -25px;}
.team-list li{ float: left; margin-bottom: 78px; width: 25%; cursor: pointer;}
.team-wrapper{ position: relative; margin: 0 25px;}
.team-wrapper figure{ overflow: hidden; line-height: 1; padding-bottom: 123.9%; height: 0;}
.team-wrapper figure img{ width: 100%; height: auto; transition: 0.65s;}
.team-text{ margin-top: 32px; text-align: center;}
.team-text strong{ display: block; margin-bottom: 12px; line-height: 1; color: #333333; font-size: 20px; font-weight: bold;}
.team-text p{ text-align: center; color: #333333; font-size: 14px; font-weight: lighter; line-height: 1.4; height: 38px; overflow: hidden;}
.team-wrapper:hover figure img{ transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05);}
.pop-team{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 199; background: #fff; transition: 0.88s 0.3s; opacity: 0; visibility: hidden;}
.pop-team.show{ opacity: 1; visibility: visible; transition: 0.8s 0s;}
.pop-team.show .poptext{ opacity: 1; visibility: visible; transform: translateX(0px); -webkit-transform: translateX(0px);}

.popbg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.poptext{ width: 800px; position: absolute; left: 50%; top: 50%; margin-left: -400px; margin-top: -335px; box-shadow: 0 3px 12px rgba(0,0,0,0.16); opacity: 0; visibility: hidden; transform: translateX(100px); -webkit-transform: translateX(100px); transition: 0.8s cubic-bezier(0.7, 0, 0.3, 1);}
.popwr{ padding: 66px 50px 0;}
.poptextimg{ padding-bottom: 28px; text-align: center;}
.poptextimg img{ display: block; width: 313px; max-width: 100%; height: auto; margin: auto;}
.poptextimg span{ display: block; text-align: center; line-height: 1; color: #333333; font-size: 32px; font-weight: bold; margin-top: 16px;}
.popconetent{ padding: 27px 0 62px; border-top: 1px solid #707070; border-top: 1px solid rgba(112,112,112,0.36);}
.popconetent strong{ display: block; color: #666666; font-size: 14px; font-weight: bold;}
.popconetent p{ color: #666666; font-size: 14px;}
.poclose{ position: absolute; right: -56px; top: 0; width: 56px; height: 56px; background: #AAAAAA; cursor: pointer; line-height: 56px; text-align: center; color: #fff; font-size: 14px; transition: 0.4s;}
.poclose:hover{ transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);}
.pbanner1{ position: relative; overflow: hidden;}
.group-img{ position: relative; overflow: hidden; line-height: 1;}
.group-img img{ display: block; position: relative; width: 100%; height: auto;}
.group-inner{ position: absolute; left: 50%; margin-left: -700px; top: 40%; margin-top: -98px; text-align: center;}
.group-inner small{ display: block; text-align: center; line-height: 1; color: #fff; font-size: 22px; font-weight: bold; font-family: arial; text-transform: uppercase; overflow: hidden;} 
.group-inner strong{ display: block; margin-top: 22px; margin-bottom: 46px; text-align: center; line-height: 1; color: #fff; line-height: 1; font-size: 75px; overflow: hidden;}
.group-inner p{ text-align: center; color: #fff; font-size: 18px; font-weight: bold;}
.productdo{ position: absolute; left: 50%; margin-left: -54px; bottom: 82px; text-align: center; cursor: pointer;}
.productdo span{ display: block; text-align: center; line-height: 1; color: #fff; font-size: 14px; font-family: arial; text-transform: uppercase; margin-bottom: 31px; font-family: arial; font-weight: bold;}
.productdo b{ display: block; margin: auto; width: 75px; height: 75px; border: 1px solid #fff; text-align: center; line-height: 75px; color: #fff; font-size: 23px; transition: 0.3s;}
.productdo:hover b{ line-height: 82px;}

.industryd{ padding: 76px 0 40px;}
.product li{ position: relative; z-index: 3; margin-bottom: 95px; padding-bottom: 80px;}
.product li a:before{ content: ""; position: absolute; left: 13.02%; top: 80px; bottom: 0; right: 0; background: #F4F4F4; z-index: -1;}
.product li figure{ float: left; display: block; width: 64.58%; height: auto; line-height: 1; overflow: hidden;}
.product li figure img{ display: block; width: 100%; height: auto; transition: 0.65s;}
.product-text{ width: 352px; float: left; margin-left: 68px; margin-top: 9.375%;}
.product-text strong{ display: block; margin-bottom: 22px; line-height: 1; color: #333333; font-size: 30px; font-weight: bold;}
.product-text p{ color: #666666; font-size: 16px; font-weight: lighter; height: 84px; overflow: hidden; margin-bottom: 66px;}
.product-text span{ position: relative; display: inline-block; width: 160px; line-height: 1; color: #333333; font-size: 16px; font-weight: bold; transition: 0.4s; height: 42px; line-height: 44px; border: 1px solid #B7B7B7; border-radius: 24px; text-align: center;}
.product-text span i{ position: absolute; right: 18px; top: 0; display: block; line-height: 1; font-size: 13px; font-style: normal; opacity: 0; visibility: hidden; transition: 0.4s;}

.product li a:hover figure img{ transform: scale(1.05); -webkit-transform: scale(1.05);}
.product li a:hover .product-text span{ color: #469181;}
.product li a:hover .product-text span i{ right: 12px; visibility: visible; opacity: 1;}
.product li.odd figure{ float: right;}
.product li.odd .product-text { float: right; margin-left: 0; margin-right: 68px;}
.product li.odd a:before{ left: 0; right: 13.02%;}
.industryli{ padding: 145px 0 150px;}
.product-list li{ position: relative; transition: 0.65s;}
.product-list li:before{ content: ""; width: 0; height: 2px; background: #469181; position: absolute; right: 0; bottom: 0; transition: 1s;}
.product-wrapper{ background: #F3F3F3; padding: 35px 0;}
.product-wrapper figure{ float: left; display: block; line-height: 1; overflow: hidden; margin-left: 28px; width: 382px;}
.product-wrapper figure img{ width: 100%; height: auto; transition: 0.65s;}
.product-wrapper:hover figure img{ transform: scale(1.08); -webkit-transform: scale(1.08); -moz-transform: scale(1.08);}
.product-wrapper:hover .product-content span{color: #469181;}
.product-wrapper:hover .product-content span i{ right: 12px; visibility: visible; opacity: 1;}
.product-content{ margin-left: 460px; margin-right: 48px;}
.product-content strong{ display: block; margin-bottom: 26px; color: #333333; font-size: 24px; font-weight: bold; line-height: 1.2;}
.product-content p{ color: #333333; font-size: 16px; font-weight: lighter; height: 84px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 60px;}
.product-content span{ position: relative; display: inline-block; width: 160px; line-height: 1; color: #333333; font-size: 16px; font-weight: bold; transition: 0.4s; height: 42px; line-height: 44px; border: 1px solid #B7B7B7; border-radius: 24px; text-align: center;}
.product-content span i{ position: absolute; right: 18px; top: 0; display: block; line-height: 1; font-size: 13px; font-style: normal; opacity: 0; visibility: hidden; transition: 0.4s;}
.product-list li:hover{ background: #F3F3F3;}
.product-list li:hover:before{ width: 100%; right: auto; left: 0;}

.product-box{ padding: 100px 0 150px; background: #F3F3F3;}
.protitle{ margin-bottom: 40px; text-align: center; line-height: 1.2; color: #333333; font-size: 24px;}
.proban{ position: relative;}
.proitem{ float: left; position: relative; line-height: 0;}
.proitem img{ width: 100%; height: auto;}
.proitem span{ display: block; width: 100%; padding-top: 20px; padding-bottom: 20px; color: #fff; line-height: 1.2; font-size: 16px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: absolute; left: 0; bottom: 0; background: url(../images/shabox.png) top center repeat-x;}
.probtn { position: absolute;  top: 50%; margin-top: -21px; z-index: 10; color: #fff; opacity: 0.52; filter:alpha(opacity=52); cursor: pointer; transition: 0.4s; font-size: 42px;}
.probtn.prev{ left: 24px;}
.probtn.next{ right: 24px;}
.probtn:hover{ opacity: 1; filter:alpha(opacity=100);}
.company{ margin-top: 90px;}
.conpany-title{ display: block; float: left; color: #333333; font-size: 24px; font-weight: bold; width: 280px;}
.conpany-title img{ width: 100%; height: auto;}
.company-text{ margin-left: 384px; padding-right: 124px;}
.company-text p{ color: #333333; font-size: 16px; font-weight: lighter; line-height: 2;}
.project{ padding: 0 0 138px;}
.project-wrap{ margin-left: 384px;}
.project-wrap .company-text{ margin-left: 0; padding-right: 0; margin-top: 40px;}
.projectin{ margin-left: -21px; margin-right: -21px; position: relative;}
.prositem{ float: left; width: 50%;}
.prowrd{ margin: 0 21px;}
.prowrd figure{ display: block; line-height: 1; overflow: hidden;}
.prowrd img{ display: block; width: 100%; height: auto; transition: 0.68s;}
.prowrd span{ display: block; padding-left: 28px; height: 80px; line-height: 80px; color: #333333; font-size: 16px; font-weight: lighter; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #F3F3F3; transition: 0.4s;}
.projectin .slick-arrow{ margin-top: 39px;}
.projectin .slick-arrow{  width: 64px; height: 64px; background:#CCCCCC; color: #fff; line-height: 64px; text-align: center; cursor: pointer; font-size: 12px; margin-right: 1px; transition: 0.42s; border: none; outline: none; text-indent: 9999px; overflow: hidden;}
.projectin .slick-arrow.slick-prev{ position: absolute; left: 21px; bottom: 0; background: #CCCCCC url(../images/prev1.png) center no-repeat;}
.projectin .slick-arrow.slick-next{ margin-left: 100px; background: #CCCCCC url(../images/next1.png) center no-repeat;}
.projectin .slick-arrow.slick-prev:hover{ background: #469181 url(../images/prev1.png) center no-repeat;}
.projectin .slick-arrow.slick-next:hover{ background: #469181 url(../images/next1.png) center no-repeat;}

.prowrd:hover figure img{ transform: scale(1.07); -webkit-transform: scale(1.07); -moz-transform: scale(1.07);}
.prowrd:hover span{ background:#469181; color: #fff;}
.news-box{ padding: 96px 0 180px;}
.newslist{ margin-left: -15px; margin-right: -15px; margin-bottom: 68px;}
.newslist li{ float: left; width: 25%; margin-bottom: 23px;}
.newslist li a{ display: block; position: relative; top: 0; margin: 0 15px;  z-index: 3; background: #F3F3F3; transition: 0.45s;}
.newslist li a figure{ position: relative; display: block; line-height: 1; overflow: hidden;}
.newslist li a figure:before{ content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: 3px solid #469181; transition: 0.5; z-index: 3; opacity: 0; visibility: hidden;}
.newslist li a figure img{ display: block; width: 100%; height: auto; transition: 0.65s;}
.news-main{ padding: 22px 28px 25px; position: relative;}
.news-main strong{ display: block; line-height: 1.5; color: #469181; font-size: 16px; font-weight: bold; margin-bottom: 12px; height: 48px; overflow: hidden;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: 0.4s;}
.news-main p{ color: #999999; font-size: 14px; height: 84px;font-weight: lighter; margin-bottom: 36px; line-height: 2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; transition: 0.4s;}
.news-main time{ display: block; line-height: 1; color: #999999; font-size: 14px; padding-top: 13px; position: relative; transition: 0.4s;}
.news-main time:before{ content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 1px; background: #707070; opacity: 0.3; filter:alpha(opacity=30); transition: 0.4s;}
.newslist li a:hover{ background: #469181; box-shadow: 10px 10px 6px rgba(0,0,0,0.16); top: -20px;}
.newslist li a:hover figure img{ transform: scale(1.06); -webkit-transform: scale(1.06); -moz-transform: scale(1.06);}
.newslist li a:hover figure:before{ opacity: 1; visibility: visible;}
.newslist li a:hover .news-main strong{ color: #fff;}
.newslist li a:hover .news-main p{ color: #fff;}
.newslist li a:hover .news-main time{ color: #fff;}
.newslist li a:hover .news-main time:before{ background: #fff;}
.pagelist{ text-align: center; font-size: 0;}
.pagelist a{ display: inline-block; margin-left: 20px; width: 56px; height: 56px; background:#C7C7C7; font-size: 14px; color: #FFFFFF; text-align: center; line-height: 56px;}
.pagelist a:first-child{ margin-left: 0;}
.pagelist a:hover,.pagelist a.active{ background: #469181;}

.viewfix{ background: #F3F3F3;}
.newsview{ padding: 42px 0 30px; background: #469181;}
.newsinner{ width: 900px; margin: auto; max-width: 90%;}
.newsinner span{ display: block; line-height: 1; color: #fff; font-size: 14px;}
.newsinner h3{ color: #fff; font-size: 32px; font-weight: bold; line-height: 1.4; margin-top: 18px; margin-bottom: 18px;}
.newsinner time{ display: block; line-height: 1; color: #fff; font-size: 12px;}
.view{ padding: 76px 0 90px; width: 900px; margin: auto; max-width: 90%;}
.view img{ max-width: 100%; height: auto !important;}
.view p,.view a{ color: #666666; font-size: 16px; font-weight: lighter; line-height: 2; text-align: justify;}
.pages{ float: left; margin-right: 1px;}
.pages a{ display: block; width: 128px; height: 64px; text-align: center; line-height: 64px; color: #666666; font-size: 14px; background: #CCCCCC;}
.pages a i{ display: inline-block; font-size: 12px; margin-right: 18px; vertical-align: middle; font-style: normal;}
.pages a i:before{ color: #666666; transition: 0.38s;}
.pages a:hover{ background: #469181; color: #fff;}
.pages a:hover i:before{ color: #fff;}
.backlist{ float: right;}
.backlist a{ display: block; width: 64px; height: 64px; background: #CCCCCC; line-height: 64px; text-align: center; color: #666666; font-size: 14px;}
.backlist a:hover{ background: #469181; color: #fff;}

.support{ padding: 90px 0 160px;}
.supportli{ margin-bottom: 120px;}
.supportli li{ padding: 39px 0 39px 7.71%; cursor: pointer;}
.sopport-item{ float: left; width: 20%;}
.sopport-item i{ display: block; float: left; line-height: 1; color: #999999; font-size: 16px; font-style: normal; margin-right: 7px; transition: 0.4s;}
.sopport-item i:before{ transition: 0.4s;}
.sopport-item span{ display: block; float: left; color: #333333; font-size: 16px; line-height: 1;}
.supportli li b{ display: block; width: 24px; height: 24px; float: left; background: rgba(70,145,129,0.5) url(../images/add.png) center no-repeat; border-radius: 50%; transition: 0.4s;}
.supportli li:hover .sopport-item i:before{ color: #469181;}
.supportli li:hover b{ background: #469181 url(../images/add.png) center no-repeat; transform: rotate(180deg); -webkit-transform: rotate(180deg);}
.surtitle{ display: block; color: #333333; font-size: 32px; line-height: 1.2; font-weight: bold; margin-bottom: 28px;}
.support-text{ height: 370px; overflow-y: auto;}
.support-text::-webkit-scrollbar {
	width: 6px;
	background-color: #fff
}

.support-text::-webkit-scrollbar-track {
	border-radius: 6px;
	background-color: #fff
}

.support-text::-webkit-scrollbar-thumb {
	border-radius: 0px;
	background-color: #469181;
}

.support-text p{ color: #666666; font-size: 14px;  line-height: 2;}
.emain{ padding: 60px 0 38px;}
.emain a{ display: inline-block; color: #469181; font-size: 14px; line-height: 1.2;}

.networks{ padding: 150px 0 200px;}
.marketing{ float: left;}
.markingtt{ margin-bottom: 72px;}
.markingtt span{ display: block; margin-bottom: 24px; padding-left: 8px; height: 18px;  line-height: 18px; color: #469181; font-size: 16px; font-weight: lighter; border-left: 8px solid #469181;}
.markingtt strong{ display: block; color: #469181; font-size: 72px; line-height: 1; font-size: 72px; font-weight: normal; font-family: "066-CAI978";}
.address{ margin-bottom: 52px;}
.address strong{ display: block; line-height: 1; color: #333333; font-size: 16px; font-weight: bold; margin-bottom: 14px;}
.address p{ color: #666666; font-size: 16px; font-weight: lighter; height: 2.2;}
.netwrokimg{ width: 56.57%; float: right;}
.netwrokimg img{ width: 100%; height: auto;}
.notices{ padding: 88px 0 110px;}
.notice-inner{ margin-left: -15px; margin-right: -15px; padding-bottom: 59px;}
.notice-inner li{ width: 50%; float: left; margin-bottom: 30px;}
.notice-inner li a{ display: block; margin: 0 15px;}
.notice-inner li span{ display: block; height: 64px; line-height: 64px; font-size: 18px; color: #fff; background: #333333; padding-left: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: bold; transition: 0.4s;}
.notice-text{ padding: 22px 34px 46px; background: #EFEFEF;}
.notice-text p{ color: #333333; font-size: 16px; font-weight: lighter; line-height: 2; height: 96px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.notice-inner li b{ display: block; height: 56px; line-height: 56px; color: #666666; font-size: 14px; font-weight: lighter; padding-left: 34px; background: #E2E2E2; transition: 0.4s;} 
.notice-inner li b i{ display: inline-block; text-align: right; color: #666666; font-size: 12px; font-style: normal; float: right; margin-right: 24px; line-height: 56px; transition: 0.4s;}
.notice-inner li a:hover span{ background:#469181;}
.notice-inner li a:hover b{ background: #C2D5D1; }

.searchbox{ background: #FAFAFA; padding: 98px 0 100px;}
.search-wr{ width: 800px; margin: auto; padding: 0 !important; border: none;}
.search-wr h3{ text-align: center; line-height: 1; color: #333333; font-size: 30px; margin-bottom: 82px;}
.search-wr p{ text-align: center; color: #666666; font-size: 14px; margin-top: 27px;}
.search-result{ padding: 97px 0 200px; width: 1400px; max-width: 90%; margin: auto;}
.result-list li{ margin-bottom: 30px; background: #EFEFEF;}
.result-list li strong{ display: block; height: 64px; line-height: 64px; padding-left: 34px; background: #333333; color: #fff; font-size: 18px; font-weight: bold;}
.result-text{ padding: 32px 48px 54px 34px;}
.result-text p{ color: #333333; font-size: 16px; height: 56px; overflow: hidden;}
.result-list li b{ display: block; height: 56px; line-height: 56px; padding-left: 34px; background: #E2E2E2; color: #666666; font-size: 14px; position: relative; font-weight: normal; transition: 0.4s;}
.result-list li b i{ font-style: normal; font-size: 12px; line-height: 1; position: absolute; right: 30px; top: 50%; margin-top: -6px;}
.result-list li a:hover b{ color: #469181;}
.project-items{ background-color: #F3F3F3;}

.honor-list{ width: 1136px; margin: auto;}
.honor-item{ position: relative; width: 25%; float: left; margin-bottom: 30px;}
.honor-item figure{ display: block; margin: 0 18px; cursor: pointer;}
.honor-item figure a{ display: block;}
.honor-item figure mark{ display: block; background: none; overflow: hidden; line-height: 1; position: relative; border: 1px solid #e7dfd2;}
.honor-item figure mark:before{ content: ""; width: 100%; height: 100%; background-color: #469181; position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; transition: 0.5s; z-index: 3;}
.honor-item figure mark img{ display: block; width: 100%; height: auto; transition: 0.58s;}
.honor-item figure mark span{ width: 100%; position: absolute; left: 0; top: 50%; margin-top: -14px; font-size: 28px; text-align: center; opacity: 0; visibility: hidden; transition: 0.45s; z-index: 6;}
.honor-item p{ padding: 0px 16px; height: 52px; line-height: 52px; overflow: hidden; color: #787878; text-align: center; font-size: 14px; background-color: #fff; transition: 0.5s;}
.honor-item figure:hover mark img{ transform: scale(1.07);}
.honor-item figure:hover mark span{ opacity: 1; visibility: visible;}
.honor-item figure:hover mark:before{ opacity: 0.9; visibility: visible;}
.honor-item figure:hover p{ background-color: #469181; color: #fff;}
.honor-loads{ display: block; position: absolute; left: -112px; top: 1px; opacity: 0; visibility: hidden; transform: translateX(-30px); background: none; transition: 0.38s;}
.honor-loads a{ display: block; width: 110px; padding-left: 20px; height: 32px; line-height: 32px; border: 1px solid #469181; background: #469181; color: #fff; font-size: 12px; margin-bottom: 10px; }
.honor-item:hover{ z-index: 5;}
.honor-item:hover .honor-loads{ opacity: 1; visibility: visible; transform: translateX(0);}


.frameworks{ padding: 83px 0 100px;}
.frameworks-title{ text-align: center; margin-bottom: 56px;}
.frameworks-title strong{ display: block; text-align: center; line-height: 1; color: #000000; font-size: 24px;}
.frameworks-btn{ margin-top: 32px; text-align: center;}
.frameworks-btn span{ position: relative; display: inline-block; margin-left: 70px; line-height: 1; cursor: pointer; color: #000000; font-size: 16px; padding-bottom: 20px; transition: 0.35s;}
.frameworks-btn span:before{ content: ""; width: 0; height: 4px; background-color: #469181; position: absolute; right: 0; bottom: 0; transition: 0.4s;}
.frameworks-btn span:first-child{ margin-left: 0;}
.frameworks-btn span:hover,.frameworks-btn span.active{ color: #469181;}
.frameworks-btn span:hover:before,.frameworks-btn span.active:before{ width: 100%; right: auto; left: 0;}
.framework-item{ display: none;}
.framework-item:first-child{ display: block;}
.framework-list{ text-align: center; font-size: 0;}
.framework-list li{ box-sizing: border-box; display: inline-block; border: 1px solid rgba(112,112,112, 0.2); margin-left: -1px; margin-top: -1px; width: 20%; position: relative; text-align: center; padding-bottom: 25.5px;}
.framework-list li figure{ display: block; text-align: center; height: 122px; position: relative;}
.framework-list li figure img{ display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-width: 80%; max-height: 80%; transition: 0.38s;}
.framework-list li span{ display: block; text-align: center; line-height: 1; color: #666666; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.framework-list li:hover figure img{ transform: translateY(-6px);}
.footer-right{ width: 60%;}
.footer-nav{  display: flex; display: -webkit-flex;	display: -moz-flex; justify-content: space-between; align-items: flex-end;}
.footer-shares:nth-child(2){ margin-top: 10px;}
.footer-items{ float: left; margin-right: 15px; text-align: center; }
.footer-items:last-child{ margin-right: 0;}
.footer-items img{ display: block; height: 70px; margin: auto; border-radius: 5px; transition: 0.36s;}
.footer-shares2 { display: flex; display: -webkit-flex;	display: -moz-flex; justify-content: space-between;}
.footer-items2 img{ height: auto; width: 100%;}
.footer-items span{ margin-top: 7px; display: block; line-height: 1.2; color: #FFFFFF; font-size: 12px;}
.footer-items:hover img{ transform: translateY(-5px);}

.footer-right{ float: right;}

#close-dock{ position: absolute; right: 0; top: 0; background-color: #fff; background-color:rgba(255,255,255,0.7); text-align: center; width: 36px; height: 36px; line-height: 36px; font-size: 15px; cursor: pointer; text-indent: 10px;}