#about {
	margin: 0 auto
}
#about .title {
	text-align: center;
	margin: 0 auto;
	padding: 50px 0
}
#about .title>h3 {
	position: relative;
	display: inline-block;
	font-size: 36px;
	font-weight: 400;
	color: #333;
	text-align: center;
	padding: 20px 0;
	margin: 0 auto
}
#about .profile .container >.text img {
	max-width: 100%;
	height: auto;
}
#about .title>h3:after {
	position: absolute;
	z-index: 4;
	left: 50%;
	bottom: 0;
	margin-left: -20px;
	width: 40px;
	height: 1px;
	background: rgba(0,0,0,.6);
	content: ''
}
#about>.profile {
	width: 90%;
	max-width: 1400px;
	margin: 0 auto
}
#about>.profile .stress, #about>.profile .stress>ul {
	margin: 0 auto
}
#about>.profile .stress>ul>li {
	display: block;
	float: left;
	width: 25%;
	padding: 30px 20px;
	text-align: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-right: 1px solid #e6e6e6
}
#about>.profile .stress>ul>li:last-child {
	border: 0!important
}
#about>.profile .stress>ul>li>h2 {
	color: #00ada9;
	font-size: 18px;
	font-weight: 400
}
#about>.profile .stress>ul>li>h2 span {
	font-weight: 700;
	font-size: 76px
}
#about>.profile .stress>ul>li>p {
	text-align: center;
	font-size: 16px;
	color: #333
}
#about>.profile .text {
	text-align: left;
	margin: 0 auto;
	padding: 50px 0
}
#about>.profile .text>p {
	font-size: 16px;
	line-height: 28px;
	margin-bottom: 15px
}
#about>.workshop {
	margin: 0 auto;
	padding-bottom: 60px
}
#about>.workshop .swiper-slide {
	width: 978px;
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
	overflow: hidden;
	border-radius: 4px
}
#about>.workshop .swiper-slide .con {
	position: absolute;
	z-index: 4;
	left: 0;
	top: 0;
	width: 100%;
	opacity: 0;
	padding: 50px 0;
	background: url(https://www.zgzxele.com/static/home/image/video_mask.png) repeat-x;
	text-align: center;
	-webkit-transition: all .35s;
	transition: all .35s
}
#about>.workshop .swiper-slide .con>.tit {
	position: relative;
	top: 40px;
	opacity: 0;
	font-size: 26px;
	color: #fff;
	-webkit-transition: all .35s;
	transition: all .35s
}
#about>.workshop .swiper-slide .con>.more {
	position: relative;
	top: 40px;
	opacity: 0;
	text-align: center;
	margin: 0 auto;
	padding: 10px;
	-webkit-transition: all .35s;
	transition: all .35s
}
#about>.workshop .swiper-slide .con>.more>a {
	display: block;
	font-size: 14px;
	color: rgba(255,255,255,.78);
	-webkit-transition: all .34s;
	transition: all .34s
}
#about>.workshop .swiper-slide .con>.more>a:hover {
	color: #00ada9;
	text-decoration: underline
}
#about>.workshop .swiper-slide .active {
	opacity: 1
}
#about>.workshop .swiper-slide .active>.more, #about>.workshop .swiper-slide .active>.tit {
	opacity: 1;
	top: 0
}
#about>.workshop .swiper-slide video {
	width: 100%;
	border-radius: 4px
}
#about>.workshop .swiper-slide .title {
	position: absolute;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transform-origin: left top;
	transform-origin: left top;
	left: -3px;
	font-size: 11px;
	color: #666
}
#about>.workshop .swiper-button-next, #about>.workshop .swiper-button-prev {
	width: 50px;
	height: 50px;
	outline: 0;
	background-color: rgba(0,0,0,.3);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 20px auto;
	border-radius: 100%
}
#about>.workshop .swiper-button-next:hover, #about>.workshop .swiper-button-prev:hover {
	background-color: rgba(0,173,169,.9)
}
#about>.workshop .swiper-button-next {
	right: 10%;
	background-image: url(https://www.zgzxele.com/static/home/image/ico_arrow_right_noborder_white.png)
}
#about>.workshop .swiper-button-prev {
	left: 10%;
	background-image: url(https://www.zgzxele.com/static/home/image/ico_arrow_left_noborder_white.png)
}
#about>.workshop .swiper-pagination-bullet {
	background: 0 0;
	opacity: 1;
	margin: 0 6px!important;
	width: 9px;
	height: 9px;
	position: relative;
	outline: 0;
	vertical-align: middle
}
#about>.workshop .swiper-pagination-bullet span {
	width: 3px;
	height: 3px;
	background: #ccc;
	display: block;
	border-radius: 50%;
	margin-top: 3px;
	margin-left: 3px
}
#about>.workshop .swiper-pagination-bullet i {
	background: #000;
	height: 1px;
	width: 20px;
	position: absolute;
	top: 4px;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: left;
	transform-origin: left;
	z-index: 3;
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear
}
#about>.workshop .swiper-pagination-bullet-active span, #about>.workshop .swiper-pagination-bullet:hover span {
	width: 9px;
	height: 9px;
	margin-top: 0;
	margin-left: 0;
	background: #00ada9;
	position: relative;
	z-index: 1
}
#about>.workshop .swiper-container {
	padding-bottom: 40px
}
#about>.honor {
	background: #fff;
	margin: 0 auto;
	padding-bottom: 80px
}
#about>.honor>.container {
	width: 90%;
	max-width: 1400px;
	margin: 0 auto
}
#about>.honor>.container .swiper-slide a {
	position: relative;
	display: block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #eee;
	padding: 30px 30px 80px;
	overflow: hidden;
	-webkit-transition: all .35s;
	transition: all .35s
}
#about>.honor>.container .swiper-slide a:after {
	position: absolute;
	z-index: 4;
	bottom: -50px;
	left: 50%;
	margin-left: -40%;
	width: 80%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background: #00ada9;
	font-size: 16px;
	color: #fff;
	content: 'View larger image →';
	-webkit-transition: all .35s;
	transition: all .35s
}
#about>.honor>.container .swiper-slide a>.img>img {
	width: 100%;
	height: auto
}
#about>.honor>.container .swiper-slide a>.tit {
	padding: 10px 0;
	font-size: 18px;
	font-weight: 500;
	color: #333;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}
#about>.honor>.container .swiper-slide a:hover:after {
	bottom: 0
}
#about>.honor>.container .swiper-slide a:hover {
	border: 1px solid #ddd;
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,.1);
	box-shadow: 0 0 15px rgba(0,0,0,.1)
}
#about>.honor>.container .swiper-pagination {
	position: relative;
	bottom: 0;
	padding: 20px 0
}
#about>.honor>.container .swiper-pagination .swiper-pagination-bullet-active {
	background: #00ada9
}
#about>.honor>.more {
	margin: 0 auto;
	text-align: center;
	padding: 30px
}
#about>.honor>.more>a {
	display: inline-block;
	padding: 10px 50px;
	border-radius: 50px;
	font-size: 18px;
	color: #00ada9;
	border: 1px solid rgba(0,0,0,.1);
	-webkit-transition: all .35s;
	transition: all .35s
}
#about>.honor>.more>a:hover {
	color: #fff;
	background: rgba(0,173,169,.8);
	border: 1px solid rgba(0,173,169,.8);
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px)
}
#about>.contact {
	position: relative
}
#about>.contact .container {
	position: absolute;
	z-index: 99;
	left: 10%;
	top: 35%;
	margin-top: -220px;
	background: rgba(0,0,0,.8);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 50px;
	text-align: left;
	max-width: 650px;
}
#about>.contact .container>.title {
	text-align: left;
	font-size: 36px;
	color: #fff;
	padding: 0
}
#about>.contact .container>.box {
	padding: 30px 0
}
#about>.contact .container>.box>.txt {
	font-size: 18px;
	color: #fff
}
#about>.contact .container>.box>.txt>p {
	padding: 5px 0
}
#about>.contact .container>.box>.tel {
	padding-top: 20px
}
#about>.contact .container>.box>.tel>p {
	font-size: 18px;
	color: #fff;
	padding: 5px 0
}
#about>.contact .container>.box>.tel>h3 {
	display: block;
	font-weight: 400;
	font-size: 45px;
	color: #00ada9
}
#about>.contact .container>.box>.tel a {
	color: #00ada9
}
#about>.contact .map {
	width: 100%;
	height: 1000px;
	margin: 0 auto;
	background: #fff
}
#about>.contact .map .BMap_bubble_title {
	font-size: 16px;
	font-weight: 700;
	color: #333
}
#about>.contact .map .BMap_bubble_content {
	font-size: 14px;
	color: #333;
	line-height: 24px
}
#about>.contact .map .BMap_bubble_content .url {
	display: inline-block;
	margin-top: 6px;
	font-size: 14px;
	color: #00ada9;
	padding-left: 30px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: url(https://www.zgzxele.com/static/home/image/ico_navigation.png) no-repeat;
	background-size: auto 100%
}
#about>.contact .map .BMap_Marker>div {
	z-index: 90!important
}
#about>.contact .map .BMapLabel {
	position: absolute;
	z-index: -10;
	display: inline;
	cursor: inherit;
	background-color: none!important;
	border: 0!important;
	padding: 0!important;
	white-space: nowrap
}
#about>.contact .map .BMapLabel:after, #about>.contact .map .BMapLabel:before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: 50%;
	opacity: 0;
	will-change: transform, opacity
}
#about>.contact .map .BMapLabel:before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 80px;
	height: 80px;
	margin-top: -40px;
	margin-left: -40px;
	-webkit-transform: scale(0);
	transform: scale(0);
	background: rgba(0,173,169,.6);
	-webkit-animation: out-circle 1s infinite;
	animation: out-circle 1s infinite;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}
#about>.contact .map .BMapLabel:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 300px;
	height: 300px;
	margin-top: -150px;
	margin-left: -150px;
	-webkit-transform: scale(0);
	transform: scale(0);
	background: rgba(0,173,169,.3);
	-webkit-animation: out-circle 1.5s infinite;
	animation: out-circle 1.5s infinite;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in
}

@media only screen and (max-width:1200px) {
#about .title>h3 {
	font-size: 32px
}
#about>.honor>.container .swiper-slide a {
	padding: 20px 20px 40px
}
#about>.honor>.container .swiper-slide a:after {
	bottom: -36px;
	height: 36px;
	line-height: 36px;
	font-size: 14px
}
#about>.honor>.container .swiper-slide a>.tit {
	font-size: 16px
}
#about>.contact .container {
	padding: 50px 150px 50px 50px
}
}

@media only screen and (max-width:1080px) {
#about>.profile .stress>ul>li>h2 span {
	font-size: 64px
}
#about>.profile .stress>ul>li>p {
	font-size: 14px
}
#about>.profile .text>p {
	font-size: 14px;
	line-height: 24px
}
#about>.workshop .swiper-slide {
	width: 748px
}
#about>.workshop .swiper-slide .con>.tit {
	font-size: 20px
}
}

@media only screen and (max-width:860px) {
#about .title>h3 {
	font-size: 28px
}
#about>.profile .stress>ul>li>h2 span {
	font-size: 52px
}
#about>.workshop .swiper-slide {
	width: 100%
}
#about>.contact .container>.title {
	font-size: 32px
}

#about>.contact .map {
    width: 100%;
    height: 300px;
}


}

@media only screen and (max-width:640px) {
#about .title, #about>.profile .text {
	padding: 30px 0
}
#about .title>h3 {
	font-size: 24px
}
#about>.profile .stress {
	width: 100%;
	margin: 0 auto
}
#about>.profile .stress>ul>li {
	width: 50%;
	padding: 20px 0;
	border-bottom: 0
}
#about>.profile .stress>ul>li:nth-child(even) {
	float: right;
	border-right: 0
}
#about>.profile .stress>ul>li:first-child, #about>.profile .stress>ul>li:nth-child(2) {
	border-bottom: 1px solid #e6e6e6
}
#about>.profile .stress>ul>li>h2 span {
	font-size: 36px
}
#about>.honor>.container .swiper-slide a>.tit, #about>.profile .stress>ul>li>p {
	font-size: 12px
}
#about>.honor>.container .swiper-slide a {
	padding: 10px!important
}
#about>.honor>.container .swiper-slide a:after {
	display: none
}
#about>.contact .container>.title {
	font-size: 28px
}
#about>.contact .container {
	position: relative;
	left: 0;
	top: 0;
	margin-top: 0;
	width: 100%;
	padding: 30px!important
}
#about>.contact .container>.box {
	padding: 20px 0
}
#about>.contact .container>.box>.txt {
	font-size: 14px
}
#about>.contact .container>.box>.tel>p {
	font-size: 16px
}
#about>.contact .container>.box>.tel>h3 {
	font-size: 36px
}
}
@-webkit-keyframes scaled-rect {
0%, to {
-webkit-transform:translateZ(0) scale(1.2) rotate(0);
transform:translateZ(0) scale(1.2) rotate(0);
-moz-transform:translateZ(0) scale(1.2) rotate(.02deg)
}
50% {
-webkit-transform:translateZ(0) scale(.8) rotate(0);
transform:translateZ(0) scale(.8) rotate(0);
-moz-transform:translateZ(0) scale(.8) rotate(.02deg)
}
}
@keyframes scaled-rect {
0%, to {
-webkit-transform:translateZ(0) scale(1.2) rotate(0);
transform:translateZ(0) scale(1.2) rotate(0);
-moz-transform:translateZ(0) scale(1.2) rotate(.02deg)
}
50% {
-webkit-transform:translateZ(0) scale(.8) rotate(0);
transform:translateZ(0) scale(.8) rotate(0);
-moz-transform:translateZ(0) scale(.8) rotate(.02deg)
}
}
@-webkit-keyframes out-circle {
0% {
-webkit-transform:scale(0);
transform:scale(0);
-moz-transform:scale(0) rotate(.02deg);
opacity:1
}
70% {
opacity:1
}
to {
-webkit-transform:scale(1);
transform:scale(1);
-moz-transform:scale(1) rotate(.02deg);
opacity:0
}
}
@keyframes out-circle {
0% {
-webkit-transform:scale(0);
transform:scale(0);
-moz-transform:scale(0) rotate(.02deg);
opacity:1
}
70% {
opacity:1
}
to {
-webkit-transform:scale(1);
transform:scale(1);
-moz-transform:scale(1) rotate(.02deg);
opacity:0
}
}