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

/*  0 - common style 通用样式。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

@font-face{font-family:Circe;src:url(../fonts/circe/Circe-Light.eot);src:url(../fonts/circe/Circe-Light.eot?#iefix) format("embedded-opentype"),url(../fonts/circe/Circe-Light.woff) format("woff"),url(../fonts/circe/Circe-Light.ttf) format("truetype");font-weight:300;font-style:normal}@font-face{font-family:Circe;src:url(../fonts/circe/Circe-Regular.eot);src:url(../fonts/circe/Circe-Regular.eot?#iefix) format("embedded-opentype"),url(../fonts/circe/Circe-Regular.woff) format("woff"),url(../fonts/circe/Circe-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Circe;src:url(../fonts/circe/Circe-Bold.eot);src:url(../fonts/circe/Circe-Bold.eot?#iefix) format("embedded-opentype"),url(../fonts/circe/Circe-Bold.woff) format("woff"),url(/assets/fonts/circe/Circe-Bold.ttf) format("truetype");font-weight:700;font-style:normal}

html {
	overflow-y:scroll; overflow-x:hidden 
}
*{
	font-family: Circe,"微软雅黑"; /*cursor: none*/
}
html,body {
	width:100%;height:100%; position:relative;min-width:600px; color: black; margin:auto;
}

.clear {
	clear: both
}
.wrapper {
    padding: 0;
    margin: 0 5%;
    position: relative;
    height: 100%;
    color:black;
}

#content[data-page="project"] .wrapper {
	height: auto
}

#header {
	position:relative; z-index:3; width:100%; height: 50px;
	position: absolute; left: 0; top: 10%
}
#header_wrapper {
	width:90%; height: 100%; margin:0 5%; position: relative;
}
#header_logo{
	display: inline-block;z-index: 9; position: relative;
}
#header_nav {
	position: absolute;
	top:0;
	right: 0;
	white-space: nowrap;
	text-align: right;
	width:100%;
}

#header_nav a {
	font-size: 16px;
	color:#000000;
	display: inline-block;
	margin: 0 1.25%;
	color: black;
	outline: none
}

#header_nav a b {
	font: inherit;
	width:100%;
	display: block;
	text-align: center;
	font-weight: bold;
}

#header_nav a:hover,
#header_nav a.header_nav_at {
	color: #00dbc0
}

.en {
	letter-spacing: 1px;
	    font-family: Circe,sans-serif;
}
.cn{
	font-family: "思源黑体 CN","微软雅黑";
}

#content {
	position:absolute; top:10%; bottom:0; margin:50px auto; width:100%;
}
#footer {
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:90px;
	line-height:50px;
	text-align:center
}
#footer a {
	display:inline-block; margin:0 30px; padding-left:55px; height:45px; background:10px center no-repeat;
	font-size:21.19px; line-height:45px; color: #333333; cursor: pointer;
}
#footer a:hover {
	text-decoration:underline
}

#loading {
	width:100%;
	height: 100%;
	z-index: 999;
	position:fixed;
	left: 0;
	top: 0;
	background: white
}

#loading_logo {
	width:500px; height: 125px; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin:auto;
}

#content_wrapper {
	width:100%;
	height: 100%
}

#left_nav {
	width:150px;
	height: 100%;
	padding: 0 10px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
    align-items: center;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
}

#left_nav_list {
	list-style: none;
	text-align: center;
	counter-reset: leftNav;
}

#left_nav_list li {
	width:100%;
	min-height: 40px;
	display: inline-block;
	text-align: left;
	margin-bottom: 49.9px;
}

#left_nav_list li a {
	color:BLACK;
	display: inline-block;
	padding-left: 1em;
	font-size: 48px;
	position: relative;
}

#left_nav_list li a:before {
	content: "0" counter(leftNav); 
	counter-increment: leftNav;
	font-size: 48px;
	line-height: 45px;
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	letter-spacing: -.1em;
	font-family: "思源黑体 CN","微软雅黑";
}
#left_nav_list li a span {
	width:50%;
	line-height: 22px;
	display: block;
	white-space: nowrap;
    font-weight: bold;
	padding-left: .5em;
	text-transform: uppercase;
}
#left_nav_list li a span.cn {
	font-size: 18px;
	letter-spacing: 2.5px;
}
#left_nav_list li a span.en {
	letter-spacing: 0px;
	font-size: 16px
}

#left_nav_list li a:hover,
#left_nav_list li a:hover:before,
#left_nav_list li a:hover span,
.left_nav_list_at a,
.left_nav_list_at a:before,
.left_nav_list_at span{
	color:#00dbc0;
}
.left_nav_list_at a:after {
	content: "";
	background: url(../image/left_nav_list_at.png) no-repeat;
	width:21px; height:19px;
	position: absolute;
	left: 3px;
	bottom: 100%;
	margin-bottom: -5px;
}

html[data-state="ready"] .left_nav_list_at a:after {
	animation: fadeInDown .5s .1s both;
	-o-animation: fadeInDown .5s .1s both;
	-moz-animation: fadeInDown .5s .1s both;
	-webkit-animation: fadeInDown .5s .1s both;
}

#page {
	position: absolute;
	left: 210px;
	right: 0;
	height: 100%;
	z-index: 1;
	color: black;
	top: 0;
}
.page_content{
    width: 100%;
    height: 100%;
    align-items: center;
    display: flex;
    display: -webkit-flex;
}
/*
.page_content:not(#about):not(#business) {
    justify-content: center;
}
*/


.gmta-cursor {
    display: none;
    position: fixed;
    width: 48px;
    height: 48px;
    z-index: 99999;
    top: 0;
    left: 0;
    background: #00dbc0;
    -webkit-transform: translate(-50%,-50%) scale(0);
    -moz-transform: translate(-50%,-50%) scale(0);
    -ms-transform: translate(-50%,-50%) scale(0);
    -o-transform: translate(-50%,-50%) scale(0);
    transform: translate(-50%,-50%) scale(0);
    color: inherit;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    /*border: 2px solid;*/
    mix-blend-mode: multiply;
    pointer-events: none;
    -webkit-transition: color .7s,width .3s,height .3s,border-width .3s 0s,-webkit-transform .3s linear;
    transition: color .7s,width .3s,height .3s,border-width .3s 0s,-webkit-transform .3s linear;
    -o-transition: color .7s,width .3s,height .3s,border-width .3s 0s,-o-transform .3s linear;
    -moz-transition: transform .3s linear,color .7s,width .3s,height .3s,border-width .3s 0s,-moz-transform .3s linear;
    transition: transform .3s linear,color .7s,width .3s,height .3s,border-width .3s 0s;
    transition: transform .3s linear,color .7s,width .3s,height .3s,border-width .3s 0s,-webkit-transform .3s linear,-moz-transform .3s linear,-o-transform .3s linear;

}

.gmta-cursor.-disabled, .gmta-cursor.-hidden {
    width: 0;
    height: 0;
    border-width: 0;
    -webkit-transition-delay: 0s,0s,0s,0s,.1s;
    -moz-transition-delay: 0s,0s,0s,0s,.1s;
    -o-transition-delay: 0s,0s,0s,0s,.1s;
    transition-delay: 0s,0s,0s,0s,.1s;
}

.gmta-cursor.-visible, 
.gmta-navbar.-back .gmta-cursor.gmta-navbar-back, 
.gmta-navbar.-open .gmta-cursor.gmta-navbar-backdrop,
.gmta-navbar.-open .gmta-cursor.gmta-navbar-menu {
    -webkit-transform: translate(-50%,-50%) scale(1);
    -moz-transform: translate(-50%,-50%) scale(1);
    -ms-transform: translate(-50%,-50%) scale(1);
    -o-transform: translate(-50%,-50%) scale(1);
    transform: translate(-50%,-50%) scale(1);
}

.gmta-cursor.-mousedown {
    -webkit-transform: translate(-50%,-50%) scale(.8);
    -moz-transform: translate(-50%,-50%) scale(.8);
    -ms-transform: translate(-50%,-50%) scale(.8);
    -o-transform: translate(-50%,-50%) scale(.8);
    transform: translate(-50%,-50%) scale(.8);
    -webkit-transition-duration: .1s;
    -moz-transition-duration: .1s;
    -o-transition-duration: .1s;
    transition-duration: .1s;
}

.gmta-cursor.-move {
    -webkit-transform: translate(-50%,-50%) scale(.6);
    -moz-transform: translate(-50%,-50%) scale(.6);
    -ms-transform: translate(-50%,-50%) scale(.6);
    -o-transform: translate(-50%,-50%) scale(.6);
    transform: translate(-50%,-50%) scale(.6);
}

.table {
	display: inline-table;
	width:100%;
	height: 100%;
}
.cell {
	display: table-cell;
	width:100%;
	height: 100%;
	vertical-align: middle;
}

/*  1 - index style 服务客户样式。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#infoBox {
    width: 100%;
    height: 600px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -300px;
    display: inline-table;
}
#info {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#gmta {
    width: 100%;
    /* height: 100%; */
    text-align: center;
    margin: 0 auto;
    max-width: 1366px;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -o-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    transform:translate3d(0,0,0);
    opacity: 0;
    animation: fadeIn 1s .5s both;
    -webkit-animation: fadeIn 1s .5s both;
    -moz-animation: fadeIn 1s .5s both;
    -o-animation: fadeIn 1s .5s both;
    user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
}

#gmta span{
	text-align:left; padding-bottom:30px; display:inline-block; position:relative; 
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
	 -moz-animation-fill-mode: both;
	  -ms-animation-fill-mode: both;
	   -o-animation-fill-mode: both;
    animation-fill-mode: both;
	-webkit-transition:1s opacity 1s;
	-moz-transition:1s opacity 1s;
	-ms-transition:1s opacity 1s;
	-o-transition:1s opacity 1s;
	transition:1s opacity 1s;
}

#gmta span img{
	visibility:hidden; opacity:0; 
}

#gmta[data-effect="1"] span {
	margin:0 -10%; opacity:0; 
	-webkit-transition:1s all 1s; -moz-transition:1s all 1s; -ms-transition:1s all 1s; -o-transition:1s all 1s;transition:1s all 1s; 
}

#gmta .icon {
	position: relative;
	display: inline-block; margin: 0 2.5%;
	width:20%; padding-bottom: 20%;
	transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0);
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
	 -moz-animation-fill-mode: both;
	  -ms-animation-fill-mode: both;
	   -o-animation-fill-mode: both;
    animation-fill-mode: both;
	-webkit-transition:1s opacity 1s;
	-moz-transition:1s opacity 1s;
	-ms-transition:1s opacity 1s;
	-o-transition:1s opacity 1s;
	transition:1s opacity 1s;
}

#gmta #g.icon {
	margin-left:0; 
}
#gmta #a.icon {
	margin: 0 0 0 -1.25% ; 
}

#gmta svg {
	position: absolute;
	left: 0;
	top: 0;
	width:100%;
	height: 100%;
	cursor: pointer;
}

#gmta .icon:nth-child(1) {
	-webkit-animation-delay:.5s;
	-moz-animation-delay:.5s;
	-o-animation-delay:.5s;
	-ms-animation-delay:.5s;
	animation-delay:.5s;
	-webkit-transition-delay:.5s;
	-moz-transition-delay:.5s;
	-ms-transition-delay:.5s;
	-o-transition-delay:.5s;
	transition-delay:.5s;
}

#gmta .icon:nth-child(2) {
	-moz-animation-delay:.75s;
	-webkit-animation-delay:.75s;
	-ms-animation-delay:.75s;
	-o-animation-delay:.75s;
	animation-delay:.75s;
	transition-delay:.75s;
}

#gmta .icon:nth-child(3) {
	-webkit-animation-delay:1s;
	-moz-animation-delay:1s;
	-ms-animation-delay:1s;
	-o-animation-delay:1s;
	animation-delay:1s;
	-webkit-transition-delay:1s;
	-moz-transition-delay:1s;
	-ms-transition-delay:1s;
	-o-transition-delay:1s;
	transition-delay:1s;
}

#gmta .icon:nth-child(4) {
	-webkit-animation-delay:1.25s;
	-moz-animation-delay:1.25s;
	-ms-animation-delay:1.25s;
	-o-animation-delay:1.25s;
	animation-delay:1.25s;
	-webkit-transition-delay:1.25s;
	-moz-transition-delay:1.25s;
	-ms-transition-delay:1.25s;
	-o-transition-delay:1.25s;
	transition-delay:1.25s;
}

html[data-state="ready"] #gmta[data-effect="1"] .icon {
	opacity:1; 
}

html[data-state="ready"] #gmta[data-effect="2"] .icon {
    -webkit-animation-name: flipInY;
	-moz-animation-name: flipInY;
	-ms-animation-name: flipInY;
	-o-animation-name: flipInY;
	animation-name:flipInY;
}

html[data-state="ready"] #gmta[data-effect="3"] .icon {
    -webkit-animation-name: zoomIn;
	-moz-animation-name: zoomIn;
	-ms-animation-name: zoomIn;
	-o-animation-name: zoomIn;
	animation-name:zoomIn;
}
/*
html[data-state="ready"] #gmta[data-effect="4"] .icon {
    -webkit-animation-name: flip;
	-ms-animation-name: flip;
	-moz-animation-name: flip;
	-o-animation-name: flip;
	animation-name:flip;
}
*/

html[data-state="ready"] #gmta[data-effect="4"] .icon,html[data-state="ready"] #gmta[data-effect="5"] .icon {
    -webkit-animation-name: pulse;
	-moz-animation-name: pulse;
	-ms-animation-name: pulse;
	-o-animation-name: pulse;
	animation-name:pulse;
}

html[data-state="ready"] #gmta[data-effect="6"] .icon {
    -webkit-animation-name: fadeInDownBig;
	 -moz-animation-name: fadeInDownBig;
	  -ms-animation-name: fadeInDownBig;
	   -o-animation-name: fadeInDownBig;
	   animation-name:fadeInDownBig;
}
html[data-state="ready"] #gmta[data-effect="7"] .icon {
    -webkit-animation-name: fadeInUpBig;
	-moz-animation-name: fadeInUpBig;
	-ms-animation-name: fadeInUpBig;
	-o-animation-name: fadeInUpBig;
	animation-name:fadeInUpBig;
}

html[data-state="ready"] #gmta[data-effect="8"] .icon {
    -webkit-animation-name: fadeInLeftBig;
	-moz-animation-name: fadeInLeftBig;
	-ms-animation-name: fadeInLeftBig;
	-o-animation-name: fadeInLeftBig;
	animation-name:fadeInLeftBig;
}

html[data-state="ready"] #gmta[data-effect="9"] .icon {
    -webkit-animation-name: fadeInRightBig;
	-moz-animation-name: fadeInRightBig;
	-ms-animation-name: fadeInRightBig;
	-o-animation-name: fadeInRightBig;
	animation-name:fadeInRightBig;
}

html[data-state="ready"] #gmta[data-effect="10"] .icon {
    -webkit-animation-name: bounceIn;
	-moz-animation-name: bounceIn;
	-ms-animation-name: bounceIn;
	-o-animation-name: bounceIn;
	animation-name:bounceIn;
}

html[data-state="ready"] #gmta[data-effect="11"] .icon {
    -webkit-animation-name: bounceInLeft;
	 -moz-animation-name: bounceInLeft;
	  -ms-animation-name: bounceInLeft;
	   -o-animation-name: bounceInLeft;
	   animation-name:bounceInLeft;
}

html[data-state="ready"] #gmta[data-effect="12"] .icon {
    -webkit-animation-name: bounceInRight;
	-moz-animation-name: bounceInRight;
	-ms-animation-name: bounceInRight;
	-o-animation-name: bounceInRight;
	animation-name:bounceInRight;
}

html[data-state="ready"] #gmta[data-effect="13"] .icon {
    -webkit-animation-name: bounceInUp;
	-moz-animation-name: bounceInUp;
	-ms-animation-name: bounceInUp;
	-o-animation-name: bounceInUp;
	animation-name:bounceInUp;
}

html[data-state="ready"] #gmta[data-effect="14"] .icon {
    -webkit-animation-name: bounceInDown;
	-moz-animation-name: bounceInDown;
	-o-animation-name: bounceInDown;
	-ms-animation-name: bounceInDown;
	animation-name:bounceInDown;
}

html[data-state="ready"] #gmta[data-effect="15"] .icon {
    -webkit-animation-name: fadeInLeft;
	-moz-animation-name: fadeInLeft;
	-ms-animation-name: fadeInLeft;
	-o-animation-name: fadeInLeft;
	animation-name:fadeInLeft;
}

html[data-state="ready"] #gmta[data-effect="16"] .icon {
    -webkit-animation-name: fadeInRight;
	-moz-animation-name: fadeInRight;
	-ms-animation-name: fadeInRight;
	-o-animation-name: fadeInRight;
	animation-name:fadeInRight;
}

html[data-state="ready"] #gmta[data-effect="17"] .icon {
    -webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-ms-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name:fadeInUp;
}

html[data-state="ready"] #gmta[data-effect="18"] .icon {
    -webkit-animation-name: fadeInDown;
	 -moz-animation-name: fadeInDown;
	  -ms-animation-name: fadeInDown;
	   -o-animation-name: fadeInDown;
	   animation-name:fadeInDown;
}

html[data-state="ready"] #gmta[data-effect="19"] .icon {
    -webkit-animation-name: rotateIn;
	-moz-animation-name: rotateIn;
	-ms-animation-name: rotateIn;
	-o-animation-name: rotateIn;
	animation-name:rotateIn;
}

html[data-state="ready"] #gmta[data-effect="20"] .icon {
    -webkit-animation-name: rotateInDownLeft;
	-moz-animation-name: rotateInDownLeft;
	-ms-animation-name: rotateInDownLeft;
	-o-animation-name: rotateInDownLeft;
	animation-name:rotateInDownLeft;
}

html[data-state="ready"] #gmta[data-effect="21"] .icon {
    -webkit-animation-name: rotateInDownRight;
	-moz-animation-name: rotateInDownRight;
	-ms-animation-name: rotateInDownRight;
	-o-animation-name: rotateInDownRight;
	animation-name:rotateInDownRight;
}

html[data-state="ready"] #gmta[data-effect="22"] .icon {
    -webkit-animation-name: rotateInUpLeft;
	-moz-animation-name: rotateInUpLeft;
	-mz-animation-name: rotateInUpLeft;
	-o-animation-name: rotateInUpLeft;
	animation-name:rotateInUpLeft;
}

html[data-state="ready"] #gmta[data-effect="23"] .icon {
    -webkit-animation-name: rotateInUpRight;
	-moz-animation-name: rotateInUpRight;
	-ms-animation-name: rotateInUpRight;
	-o-animation-name: rotateInUpRight;
	animation-name:rotateInUpRight;
}


/*  2 - customer style 服务客户样式。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#customer {
	height: 80%;
	position:absolute;
	top: 10%;
	bottom: 10%;
	left: 0;
	right: 0;
	overflow: hidden;
	text-align: center;
    transform: translateY(-25px);
    -webkit-transform: translateY(-25px);
    -o-transform: translateY(-25px);
    -moz-transform: translateY(-25px);
}

#customer_content {
	width:100%;
	height: 100%;
	/*justify-content: center;*/
	align-items: center;
    display: flex;
    display: -webkit-flex;
	padding: 0 25px;
	overflow-y: auto;
	margin-left:5%;
	position: relative;
}

#customer_list {
	max-height: 100%;
	margin: 0 25px 0 5%;
	list-style: none;
	font-size: 0;
	text-align: left;
	display: block;
	width: 100%
}

#customer:before {
	content: "";
	width:90%;
	height: 50px;
	position: absolute;
	left: 0;
	bottom: -1px;
	z-index: 9;
	background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1));
}
#customer:after {
	content: "";
	width:90%;
	height: 50px;
	position: absolute;
	left: 0;
	top: -1px;
	z-index: 9;
	background-image: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0));
}

#customer_list li {
	width:25%;
	padding-bottom: 20%;
	display: inline-block;
	font-size: 14px;
	background: rgba(255,255,255,.5);
	margin: 1px 0px;
	position: relative;
}

@media only screen and (max-width: 1280px) {

#customer_list li {
	width:33%;
}
#customer_content {
	margin-left: 0
}
}
@media only screen and (max-width: 1150px) {

#customer_list li {
	padding-bottom: 25%;
}
#customer_content {
	padding: 0
}
}

@media only screen and (max-width: 1024px) {

#customer_list li {
	width:50%;
	padding-bottom: 30%;
}

}

@media only screen and (max-width: 800px) {

#customer_list li {
	width:50%;
	padding-bottom: 35%;
}

}

#customer_list li a {
	display: block;
	width:170px;
	height:170px;
	background: no-repeat center;
	background-size: contain;
	outline: none;
	position: absolute;
	/*left: 50%;
	top: 50%;
	margin-left: -85px;
	margin-top: -85px*/
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin:auto;
	max-width: 100%;
	max-height: 100%;
}

#about_content,
#business_content {
	padding: 0;
    margin-left:10%;
    margin-bottom: 50px;
}

#about_content,
#business_content{
    max-width: 840px
}
#customer_content{
    max-width: 940px
}

#about h1,
#business_content h1 {
	font-size: 60px;
	color:#03dbc1;
	text-transform: uppercase;
	letter-spacing: -1px;
	line-height: 60px;
	margin-bottom: 30px
}

#about p,
#business_content p{
	font-size: 14px;
	color:#000000;
	line-height: 40px;
	padding-bottom: 30px;
	letter-spacing: 1px
}

/*  3 - project style 案例样式。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#content[data-page="project"]{
	padding-bottom: 5%; bottom:auto;
}

#project {
	margin: 0 10%;

}

#project_column {
	margin: 1%;
	margin-top:2.5%;
	margin-bottom: 2.5%;
    /*display: flex;
    flex-direction: row;
    justify-content: space-between;*/
    text-align: center;
}
#project_column a {
	display: inline-block; margin-right: 2.5%
}
#project_class_01 {
	/*width:166px;*/
	height: 42px;
	/*background: url(../image/project_class_01.png) no-repeat;*/
}
#project_class_02 {
	/*width:140px;*/
	height: 44px;
	/*background: url(../image/project_class_02.png) no-repeat;*/
}
#project_class_03 {
	/*width:159px;*/
	height: 44px;
	/*background: url(../image/project_class_03.png) no-repeat;*/
}
#project_class_04 {
	/*width:143px;*/
	height: 44px;
	/*background: url(../image/project_class_04.png) no-repeat;*/
}

#project_column a.project_column_at {
	background-position: center bottom;
	transition:.25s all ease-in-out;
	-o-transition:.25s all ease-in-out;
	-webkit-transition:.25s all ease-in-out;
	-moz-transition:.25s all ease-in-out;
}

#project_list {
	list-style: none;
}
#project_list:after {
	content: "";
	clear: both;
	display: block;
}
#project_list li {
	width:31%;
	margin: 1%;
	position: relative;
	box-shadow: 2.5px 5px 15px #edeced;
	display: inline-block;
	transition:.5s all;
}


@media only screen and (min-width: 1921px) {
#project_list li {
	width:23%;
	margin: 1%;
	float: left;
}

}

#project_list li:hover {
	transform:translateY(-2.5%);
}

.project_cover {
	display: block;
	width:100%;
	height: 0;
	padding-bottom: 62.5%;
	background: #f8f8f8 no-repeat center top;
	background-size: cover;
    transition:none;
    -o-transition:none;
    -moz-transition:none;
    -webkit-transition:none;
}
.project_list_bg {
	width:100%;
}

.project_info {
	width:85%;
	padding: 2.5% 7.5%;
	/*height: 60px;*/
	background: #f8f8f8;
	position: relative;
	display: block;
}
.project_info_title {
	font-size: 1.5rem; 
	color:black; display: block; line-height: 2rem; margin: 3% 0;
	height: 4rem;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 100
}
.project_info_date {
	font-size: 1rem; color:#989898; font-weight: 100; display: block; line-height: 20px; 
}

.project_info_logo_bar {
	display: block; margin: 3% 0; overflow: hidden; white-space: nowrap;
}

.project_info_logo {
	display: inline-block;
	background: no-repeat center;
	background-size: contain;
	width:15%;
	padding-bottom: 18%;
	max-width: 40px;
	max-height: 40px;
	overflow: hidden;
	margin: 0 2.5%;
	float: left;
}

#gototop {
	position: fixed;
	right: 1%;
	bottom: 5%;
	display: none;
	animation: .5s fadeIn linear both normal;
	-moz-animation: .5s fadeIn linear both normal;
	-o-animation: .5s fadeIn linear both normal;
	-webkit-animation: .5s fadeIn linear both normal;
	cursor: pointer
}

#project_banner {
	width:100%;
	height: 300px;
	position: relative;
	background: #ececec no-repeat center;
	background-size: auto 100%;
	margin: 25px auto
}
#project_detail {
	overflow: hidden; position: relative; padding-right: 20px; /*min-height: 700px*/
}
#project_detail_title {
	font-size: 25px; color: black; font-weight: bold; line-height: 35px
}
#project_detail_date {
	font-size: 14px; color: #c4c1c1; font-weight: 100; line-height: 30px
}
hr {
	border:none; 
}
#project_detail_line {
	margin-bottom: 25px
}
#pcd_edit_area {
	width:100%;
	overflow: hidden;
}

#pcd_edit_area_content p {
	font-size: 15px;
	line-height: 26px;
    word-break: break-all;
}

#pcd_edit_area_content a {
	color: black;
	text-decoration: underline;
	font: inherit;
}

#pcd_edit_area_content h1,#pcd_edit_area_content h2,#pcd_edit_area_content h3,#pcd_edit_area_content h4{line-height:2em;font-weight: 100}
#pcd_edit_area_content h1{ font-size:18px; line-height: 20px; margin: 40px auto;letter-spacing: 2px}
#pcd_edit_area_content h2{ font-size:16px; line-height: 20px; margin: 35px auto;letter-spacing: 1px}
#pcd_edit_area_content h3{ font-size:16px; }
#pcd_edit_area_content h4{ font-size:16px; }


#pcd_edit_area_content img {
	max-width: 100%; height: auto!important; vertical-align: bottom; margin: 20px 0; display: inline!important;
}
#pcd_edit_area_content img[src$="5-121204193R0-50.gif"] {
	width:62px!important;
	height: 62px!important;
	margin: 20px auto;
	display: block!important;
}
#project_list_simple {
	width:290px;
	max-width: 30%;
	min-height: 1px;
	padding-left: 20px;
	float: right;
}

#project_list_simple:not(.project_recommend_list_open) #project_list_simple_wrap[data-state="scroll"] {
	position: fixed;
	top: 0;
    width: 290px;
    max-width: 27%;
    max-height: 100%;
    overflow-y: auto
}

#project_list_simple:not(.project_recommend_list_open) #project_list_simple_wrap[data-state="scroll"] li:not(:nth-child(1)):not(:nth-child(2)) {
	display: none
}

#project_list_simple:not(.project_recommend_list_open) #project_list_simple_wrap[data-state="scroll"] #project_more {
	display: none;
}

#project_simple_title {
	font-size: 18px;
	color: black;
	line-height: 36px
}

#project_recommend_list {
	list-style: none;
}

#project_recommend_list li{
	position: relative;
	transition:.25s all;
	-webkit-transition:.25s all;
	-moz-transition:.25s all;
	-o-transition:.25s all;
	max-height: 0px;
	overflow: hidden;
}

#project_recommend_list li:nth-child(1),
#project_recommend_list li:nth-child(2) {
	max-height: 300px;
	margin:15px auto;
	box-shadow: 2.5px 5px 10px #edeced;
}

#project_list_simple.project_recommend_list_open #project_recommend_list li:nth-child(3) {
	max-height: 300px;
	margin:15px auto;
	transition-delay:.1s;
	-moz-transition-delay:.1s;
	-o-transition-delay:.1s;
	-webkit-transition-delay:.1s;
	box-shadow: 2.5px 5px 10px #edeced;
}
#project_list_simple.project_recommend_list_open #project_recommend_list li:nth-child(4) {
	max-height: 300px;
	margin:15px auto;
	transition-delay:.25s;
	-moz-transition-delay:.25s;
	-o-transition-delay:.25s;
	-webkit-transition-delay:.25s;
	box-shadow: 2.5px 5px 10px #edeced;
}
#project_list_simple.project_recommend_list_open #project_recommend_list li:nth-child(5) {
	max-height: 300px;
	margin:15px auto;
	transition-delay:.4s;
	-moz-transition-delay:.4s;
	-o-transition-delay:.4s;
	-webkit-transition-delay:.4s;
	box-shadow: 2.5px 5px 10px #edeced;
}


.project_recommend_bg {
	width:100%;
	height: auto
}
#project_recommend_line {
	margin-bottom: 15px
}

.project_recommend {
	display: block;
	width:100%;
	height: 0;
	padding-bottom: 62.5%;
	background: #f8f8f8 no-repeat center top;
	background-size: cover;
    transition:none;
    -o-transition:none;
    -moz-transition:none;
    -webkit-transition:none;
}
.project_recommend_wrap {
	width:85%;
	padding: 2.5% 7.5%;
	/*height: 60px;*/
	background: #f8f8f8;
	position: relative;
	display: block;
}
.project_recommend_title {
	font-size: 14px; color:black; display: block; line-height: 20px; margin:5px 0;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 40px;
}
.project_recommend_date {
	font-size: 12px; color:#989898; font-weight: 100; display: block; line-height: 25px;font-family: "微软雅黑";
}

#project_more {
	width:100%;
	height: 54px;
	text-align: center;
	display: block;
	background: #f8f8f8 url(../image/project_more.png) center bottom no-repeat;
	transition:none;
	-o-transition:none;
	-moz-transition:none;
	-webkit-transition:none;
	cursor: pointer;
}

#project_back {
position: fixed;
    left: 0;
    top: 300px;
}

#project_list_simple.project_recommend_list_open #project_more{
	background-position: center top
}

#project_content {
	max-width: 980px;
	margin: auto
}

#content[data-page] #left_nav_list li {
	margin-bottom: 50px;
}

#content[data-page] #page {
	top: 1px;
}



/*  3 - contact style 联系栏目样式。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#contact {
	text-align: center;
}
#contact_wrap {
	position: relative;
	display: inline-block;
	margin: 25px 0;
	max-width: 80%;
	overflow: hidden;
}


@media only screen and (max-height: 800px) {
#contact {
	text-align: right;
}
	#contact_wrap {
		max-width: 85%;
	}

}
@media only screen and (max-height: 700px) {
#contact {
	text-align: left;
}
	#contact_wrap {
		max-width: 75%;
	}

}
@media only screen and (max-height: 600px) {
#contact {
	text-align: left;
}
	#contact_wrap {
		max-width: 65%;
	}

}

.contact_bg {
	width:100%;
}
#lineart {
	max-width: 720px;
	width:75%;
	height: 100%;
	background: no-repeat center;
	background-size: contain;
	position:absolute;
	left: 0;
	top: 0;
	transition:.75s width 1s;
	-webkit-transition:.75s width 1s;
	-moz-transition:.75s width 1s;
	-o-transition:.75s width 1s;
}

#content[data-city="guangzhou"] #lineart{
	background-image:url(../image/lineart_01.jpg);
}
#content[data-city="chengdu"] #lineart{
	background-image:url(../image/lineart_02.jpg);
}

#contact_info {
	width:50%;
	display: inline-block;
	height: 100%;
	background: url(../image/contact_info_bg.png) no-repeat center left;
	background-size: contain;
	position:absolute;
	right: 0;
	top: 0;
	text-align: left;
	visibility: hidden;
}


@keyframes lineart{
	0%{transform:scale(1); opacity: 0; transform-origin:center left;}
	65%{transform:scale(1); opacity: 1; transform-origin:center left;}
	100%{transform:scale(.75); transform-origin:center left;}
}

html[data-state="ready"] #lineart{
	animation: 1.75s lineart both normal;
	-o-animation: 1.75s lineart both normal;
	-moz-animation: 1.75s lineart both normal;
	-webkit-animation: 1.75s lineart both normal;
}

html[data-state="ready"] #contact_info {

	visibility: visible;
	animation: 1s fadeIn 1.5s linear both normal;
	-moz-animation: 1s fadeIn 1.5s linear both normal;
	-o-animation: 1s fadeIn 1.5s linear both normal;
	-webkit-animation: 1s fadeIn 1.5s linear both normal;

}

html[data-state="ready"] #address_title{
-webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;

    animation-delay:.5s;
    -o-animation-delay:.5s;
    -moz-animation-delay:.5s;
    -webkit-animation-delay:.5s;
}

html[data-state="ready"] #address_city {
-webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;

    animation-delay:.7s;
    -o-animation-delay:.7s;
    -moz-animation-delay:.7s;
    -webkit-animation-delay:.7s;
}

#contact_info:before {
	content: "";
	width:10%;
	height: 8.68%;
	background: url(../image/contact_info_bg_arrow.png) no-repeat center right;
	background-size: contain;
	position: absolute;
	right: 100%;
	top: 50%;
	margin-top:-4.44% 
}

#contact_info_tel {
	position: absolute;
	left: 0;
	top: 10%;
	max-width: 80%
}
#contact_info_tel_reason {
	font-size: 14px;
	color:#bbfff7;
	line-height: 1.5rem;
	font-size: 1rem;
}
#contact_info_tel_number {
	font-size: 34.54px;
	color:white;
	line-height: 3rem;
	font-weight: bold;
	font-size: 3rem;
}

#contact_info_mail {
	position: absolute;
	left: 0;
	top: 10%;
	margin-top: 5rem;
	max-width: 80%
}
#contact_info_mail_reason {
	font-size: 14px;
	color:#bbfff7;
	line-height: 1.5rem;
	font-size: 1rem;
}
#contact_info_mail_address,
#contact_info_mail_address a {
	font-size: 34.54px;
	color:white;
	line-height: 2rem;
	font-weight: bold;
	font-size: 3rem;
	white-space: nowrap;
}

#contact_info_addr {
	position: absolute;
	left: 0;
	top: 10%;
	margin-top: 10rem;
}
#contact_info_addr_reason {
	font-size: 14px;
	color:#bbfff7;
	line-height: 1.5rem;
	font-size: 1rem;
}
#contact_info_addr_detail{
	font-size: 34.54px;
	color:white;
	line-height: 1.5rem;
	font-size: 1rem;
}

#contact_info_map {
	width:100%;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 0

}
#contact_info_map img {
	width: 100%;
}

#click_map {
	width:231px;
	height: 153px;
	position: absolute;
	right: 20%;
	top: 50%;
	margin-top: -76.5px;
	margin-right: -115px;
	background: url(../image/click_shadow.png) no-repeat center;
    user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    transition:1s all;
    -o-transition:1s all;
    -moz-transition:1s all;
    -webkit-transition:1s all;
    display: none;
}

#contact_wrap.contact_info_show #click_map{
	transform:scale(.75);
	-o-transform:scale(.75);
	-moz-transform:scale(.75);
	-webkit-transform:scale(.75);
}

#outer_circle {
	width:35px;
	height: 35px;
	border: 3px solid #00dbc0;
	border-radius: 35px;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto
}

#inner_circle {
	width:15px;
	height: 15px;
	background:#00dbc0;
	border-radius: 15px;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto
}

#click_map_text {
	width:2em;
	font-size: 14px;
	line-height: 16px;
	height: 32px;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	padding-left: 70px;
	color:#00dbc0;
	font-weight: 100;
}

#address {
	position: absolute;
	left: 5%;
	top: 0;
	text-align: left;
}
#address_title {
	font-size: 5rem;
	text-transform: uppercase;
	color:#03dbc1;
	line-height: 100%
}

#address_city a {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color:#444444;
}

#address_city a.city_at,
#content[data-blade="recruitment"][data-city="1"] #address_city a:nth-child(1),
#content[data-blade="recruitment"][data-city="2"] #address_city a:nth-child(3) {
	color:#03dbc1;
}

#address_city b {
	margin: 0 5px; display: inline-block;
}

#address_city span {
	margin: 0 5px; display: inline-block;
}


#recruitment {
	width:95%;
	margin-left:5%
}
#job_table_name {
	margin-top: 25px
}
#job_table_name td:not(:nth-child(1)) {
	text-align: center;
}
#job_table tr {
	margin: 25px 0;
	border-bottom: 1px solid #cccccc
}
#job_table td {
	font-size: 14px;
	color: #000000;
	line-height: 50px;
	text-align: center;
	letter-spacing: 1px;
	width:25%;
}
#job_table td:nth-child(1) {
	text-align: left;
}
.job_table_title {
	font-size: 16px; color: #03dbc1;
	text-transform: uppercase;
	letter-spacing: 2px
}
#job_table td .job_detail {
	background: #03dbc1;
	color: white;
	border-radius: 5px;
	padding: 0 5px;;
	line-height: 14px;
}

#message {
	background: url(../image/icon_email_small.png) no-repeat left bottom; height: 16px;
	padding-left: 25px;
}
#message a {
	font-size: 16px; color: #000000; line-height: 16px; display: inline-block; visibility: hidden; max-width:0px; 
	transition:.1s all .5s; 
	-o-transition:.1s all .5s;
	-moz-transition:.1s all .5s;
	-webkit-transition:.1s all .5s;
}
#message span {
	font-size: 14px; color: #03dbc1; line-height: 16px; display: inline-block; margin: 0 10px
}

#content[data-city="1"] #message a:nth-child(1),
#content[data-city="2"] #message a:nth-child(2){
	visibility: visible; max-width: 100%
}

#recruitment_wrap {
	position: relative;
	max-height: calc(100% - 6em - 120px);
	max-height: -webkit-calc(100% - 6em - 120px);
	max-height: -moz-calc(100% - 6em - 120px);
	overflow-y: auto;
	margin-bottom: 30px
}
#job_detail {
	position: absolute; left: 45%;
	padding:20px 40px;
	right: 25px;
	top: 0;
	height: 360px;
	background:#f2f2f2;
	margin-left: 5%;
	margin-top: -180px;
	visibility: hidden;
	opacity: 0;
	transition:.1s all;
	-webkit-transition:.1s all;
	-moz-transition:.1s all;
	-o-transition:.1s all;
}

#job_detail_arrow {
	background: url(../image/job_detail_arrow.png) no-repeat;
	width:39px;
	height: 46px;
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 9;
	margin-left: -35px;
	margin-top: -23px;
	transition:.1s all;
	-webkit-transition:.1s all;
	-moz-transition:.1s all;
	-o-transition:.1s all;
	visibility: hidden;
	opacity: 0;
}
.job_detail:hover {
	cursor:default;
}
#recruitment[data-state="detail"] #job_detail_arrow,
#recruitment[data-state="detail"] #job_detail{
	visibility:visible;
	opacity: 1;	
}

#job_detail_content{
	height: 200px;
	overflow-y:scroll;
	font-size: 14px
}

#job_detail h2 {
	font-size: 18px;
	line-height: 50px
}
#job_detail_content p {
	font-size: 14px;
	line-height: 30px;
}
#job_detail_close {
	width:161px;
	height: 167px;
	background: url(../image/job_detail_close.png) no-repeat;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 9
}

#job_table_name,
#job_table {
	width:45%;
}
@media only screen and (max-width: 1280px) {

	#project,#project_list,#project_content {
		margin: auto
	}

	#recruitment {
		width:100%;
		margin: 0
	}
	#job_detail {
		right: auto;
		margin: auto;
		left: 0;
		width:90%;
		padding: 20px 5%;
		top: 50%!important;
		margin-top: -200px!important;

	}

	#recruitment[data-state="detail"] #job_detail {
		animation: bounceIn .5s both;
		-o-animation: bounceIn .5s both;
		-moz-animation: bounceIn .5s both;
		-webkit-animation: bounceIn .5s both;

	}
	#job_table_name,
	#job_table {
		width:100%;
	}
	#job_detail_arrow {
		display: none;
	}
}

/*  4 - openning style 开场动画样式。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#G,#M,#T,#A {
	transform-origin:center;
	-o-transform-origin:center;
	-moz-transform-origin:center;
	-webkit-transform-origin:center;
}
#G {
	animation-delay:.1s;
	-o-animation-delay:.1s;
	-moz-animation-delay:.1s;
	-webkit-animation-delay:.1s;
}
#M {
	animation-delay:.3s;
	-o-animation-delay:.3s;
	-moz-animation-delay:.3s;
	-webkit-animation-delay:.3s;
}
#T {
	animation-delay:.2s;
	-o-animation-delay:.2s;
	-moz-animation-delay:.2s;
	-webkit-animation-delay:.2s;
}
#A {
	animation-delay:.4s;
	-o-animation-delay:.4s;
	-moz-animation-delay:.4s;
	-webkit-animation-delay:.4s;
}

html[data-state="loading"] #header,
html[data-state="loading"] #content{
	visibility: hidden;
}

html[data-state="ready"] #header,
html[data-state="ready"] #content{
	visibility: visible;
	animation: fadeIn .5s both;
	-o-animation: fadeIn .5s both;
	-moz-animation: fadeIn .5s both;
	-webkit-animation: fadeIn .5s both;
}

html[data-state="loading"] #project_column a {
	visibility: hidden;
}

html[data-state="ready"] #project_column a {
	visibility: visible;
	animation: fadeIn .5s both;
	-o-animation: fadeIn .5s both;
	-moz-animation: fadeIn .5s both;
	-webkit-animation: fadeIn .5s both;
}

#l-map{height:100%;width:100%;z-index:99!IMPORTANT}


#contact_info_wrap {
	width:75%;
	height: 90%;
	top: 0;
	left: 0;
	right: 0;
	position: relative;
	margin:auto;
	overflow: hidden;
	z-index: 5;
}
.contact_map {
	position: absolute;
	right: 0;
	top: 10%;
	margin-top: 15rem;
	width: 120%;
	height: 70%;
	min-width:480px;
}

#project_line {
    height: 1px;
    background: #e6e4e5;
    border: none;
    margin-top:25px;
    margin-bottom: 30px
}

#loading_progress_bar {
	width:100%;
	height: 5px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
}

#loading_progress {
	width:0%;
	height: 100%;
	background: #00dbc0;
}

#next_page {
	display: block;
	width:45%;
	text-align: center;
	margin: auto;
	font-size: 18px;
	line-height: 36px;
	height: 36px;
	background: #f8f8f8;
	color:gray;
	letter-spacing: 5px;
	margin-top: 50px;
	font-weight: 100;
	cursor: pointer;
}



#frame {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    background: rgba(0,0,0,.7);
    display: none;
    transition:.5s all;
    -o-transition:.5s all;
    -moz-transition:.5s all;
    -webkit-transition:.5s all;
}

#frame_wrap {
    width: 90%;
    height: 90%;
    position:fixed;
    right: 5%;
    bottom: 5%;
    background: none;
    background-color: transparent;
    border: 5px solid #00dbc0;
    background: white;
    z-index: 1;
    transition:.5s all;
    -o-transition:.5s all;
    -moz-transition:.5s all;
    -webkit-transition:.5s all;
    visibility: visible;
}

#frame iframe {
	width:100%;
	height: 100%;
	position: relative;
	z-index: 2
}

.maps-close {
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: 20px;
    z-index: 2;
    width: 57px;
    height: 20px;
    background: url(../image/s-close.png) no-repeat;
}

#frame.smallwindow {
	background: rgba(0,0,0,0);
	visibility: hidden;
}

#frame.smallwindow #frame_wrap {
	width:320px!important;
	height: 240px!important;
	top: auto!important;
	left: auto!important;
	right: 1%!important;
	bottom: 5%!important;
	margin-right:60px!important;
	margin-bottom: 0px!important;
}

#frame_btn {
	width:100%;
	height: 100%;
	position:absolute;
	top: 0;
	left: 0;
	z-index: 1
}

#frame.smallwindow #frame_btn {
	z-index: 9;
}
#frame_minimize {
	position:absolute;
	left: 100%;
	top: 5px;
	width:53px;
	height: 53px;
	margin-top: 53px;
	background: #00dbc0 url(../image/frame_ctrl.png) no-repeat center top;
	cursor: pointer;
	transition:none;
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
}
#frame_close {
	position:absolute;
	left: 100%;
	top: 5px;
	width:53px;
	height: 53px;
	background: #00dbc0 url(../image/frame_close.png) no-repeat center top;
	cursor: pointer;
}


#frame.smallwindow #frame_minimize {
	background-position: center bottom;
}

#link_jump {
	position:absolute;
	left: 0;
	top: 100%;
	text-align: center;
	width:100%;
	color:white;
	font-size: 15px;
	line-height: 15px;
	margin-top: 20px;
	cursor: pointer;
	animation: fadeIn .5s 1s both;
	-o-animation: fadeIn .5s 1s both;
	-moz-animation: fadeIn .5s 1s both;
	-webkit-animation: fadeIn .5s 1s both;
}
#link_jump span {
	font: inherit;
	display: inline-block;
	text-decoration: underline;
}

#frame.smallwindow #link_jump {
	animation: fadeOut .5s both;
	-o-animation: fadeOut .5s both;
	-moz-animation: fadeOut .5s both;
	-webkit-animation: fadeOut .5s both;
}


.sevenstyle,
.seven {
	width: 650px;
	margin: auto;
	max-width:100%;
}

#owl_project {
	margin: 5% 1% 0%;
	width: 98%
}

#owl_project,#project_column,#project_list {
	animation: fadeIn .5s both .5s;
	-o-animation: fadeIn .5s both .5s;
	-moz-animation: fadeIn .5s both .5s;
	-webkit-animation: fadeIn .5s both .5s;
}

#header_logo{
	font-size: 0
}
#header_logo span {
	font-size: 12px;
	color:#333333;
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	text-align: center;
	font-weight: bold;
	letter-spacing: 1px;
	text-indent: 1px;
	font-family: "思源黑体 CN","微软雅黑";
	margin-top: 5px;
	white-space: nowrap;
}
#footer {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}

#footer p {
	font-size: 24px;
	line-height: 24px;
	letter-spacing: 3px;
	text-align: center;
	text-indent: 3px
}

#footer p b {
	font-size:18px;
	line-height: 24px;
	font-weight: bold;
	color:#00dbc0;
	margin: 0 3px;
	font-family: "思源黑体 CN","微软雅黑";
}

#about_content {
	max-width:9999px;
	display: flex;
	display: -webkit-flex;
    justify-content: center;
    align-items: center;
}
#about_content img {
	max-width:60%;
	float: right;
}
@media only screen and (max-width: 1280px) {
	#about p {
		line-height: 30px
	}
}
@media only screen and (max-width: 1024px) {
	#about_content {
		max-width: 840px
	}
	#about_content img {
		display: none
	}
}

#business #customer_list a {
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -ms-transition: .5s all;
    -o-transition: .5s all;
    transition: .5s all;
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    -moz-transform: scale(.9);
    -o-transform: scale(.9);
    transform: scale(.9);
}

#business #customer_list a:hover {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

#project_column a {
	position:relative;
	margin: 0 2%
}
#project_column svg{
	position: absolute;
	left: 0;
	top: 0;
    -webkit-transition: .1s all;
    -moz-transition: .1s all;
    -ms-transition: .1s all;
    -o-transition: .1s all;
    transition: .1s all;
}
.project_words {
	margin-left: 55px
}
.project_words b{
	display: block;
	text-align: left;
	color: black;
    -webkit-transition: .1s all;
    -moz-transition: .1s all;
    -ms-transition: .1s all;
    -o-transition: .1s all;
    transition: .1s all;
}
.project_words b.cn {
	font-size: 19.64px;
}
.project_words b.en {
	font-size: 11.46px;
	white-space: nowrap;
}

#project_column a:hover .project_words b,
.project_column_at .project_words b {
	color:#00dbc0;
}

#project_column a:not(.project_column_at):not(:hover) svg{
	-webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
#project{
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -ms-transition: .5s all;
    -o-transition: .5s all;
    transition: .5s all;
}


@keyframes zoomFadeOut{
	0%{transform:scale(1); opacity: 1}
	100%{transform:scale(.5); opacity: 0}
}
@keyframes zoomFadeIn{
	0%{transform:scale(3); opacity: 0}
	100%{transform:scale(1); opacity: 1}
}

@-webkit-keyframes zoomFadeOut{
	0%{-webkit-transform:scale(1); opacity: 1}
	100%{-webkit-transform:scale(.5); opacity: 0}
}
@-webkit-keyframes zoomFadeIn{
	0%{-webkit-transform:scale(3); opacity: 0}
	100%{-webkit-transform:scale(1); opacity: 1}
}

@-moz-keyframes zoomFadeOut{
	0%{-moz-transform:scale(1); opacity: 1}
	100%{-moz-transform:scale(.5); opacity: 0}
}
@-moz-keyframes zoomFadeIn{
	0%{-moz-transform:scale(3); opacity: 0}
	100%{-moz-transform:scale(1); opacity: 1}
}

@-o-keyframes zoomFadeOut{
	0%{-o-transform:scale(1); opacity: 1}
	100%{-o-transform:scale(.5); opacity: 0}
}
@-o-keyframes zoomFadeIn{
	0%{-o-transform:scale(3); opacity: 0}
	100%{-o-transform:scale(1); opacity: 1}
}

.zoomFadeOut {
	animation: zoomFadeOut 1s both;
	-o-animation: zoomFadeOut 1s both;
	-moz-animation: zoomFadeOut 1s both;
	-webkit-animation: zoomFadeOut 1s both;
}
.zoomFadeIn {
	animation: zoomFadeIn 1s both;
	-o-animation: zoomFadeIn 1s both;
	-moz-animation: zoomFadeIn 1s both;
	-webkit-animation: zoomFadeIn 1s both;
}

#desc {
	width: 100%;
	height: 100%;
	background: white;
	position: absolute;
	left: 0;
	top: 0;
	font-size: 40.78px;
	font-size: 5rem;
	color:#333333;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    line-height: 40px;
    display: none;
}

#desc p,#desc span {
	font:inherit;
}

#desc span {
	letter-spacing: 5px;
	margin:20px;
	font-family: "思源黑体 CN","微软雅黑"
}
#desc p {
	position: relative; height: 40px; margin-top: -40px
}
#desc p:before {
	content: "";
	width:35px;
	height: 33px;
	background: url(../image/desc_ltc.png);
	position: absolute;
	right: 100%;
	bottom: 100%;
}
#desc p:after {
	content: "";
	width:35px;
	height: 33px;
	background: url(../image/desc_rtc.png);
	position: absolute;
	left: 100%;
	top: 100%;
}

#info[data-state="desc"] #gmta {
	animation: zoomFadeOut .5s both;
	-o-animation: zoomFadeOut .5s both;
	-moz-animation: zoomFadeOut .5s both;
	-webkit-animation: zoomFadeOut .5s both;
}
#info[data-state="desc"] #desc {
	display: flex;
	display: -webkit-flex;
	animation: zoomFadeIn .5s both .25s;
	-o-animation: zoomFadeIn .5s both .25s;
	-moz-animation: zoomFadeIn .5s both .25s;
	-webkit-animation: zoomFadeIn .5s both .25s;
}