@charset 'utf-8';
/* CSS Document */
@font-face {
	font-family: 'CenturyGothic';
	src: url('../font/CenturyGothic.ttf');
}
@font-face {
	font-family: 'CenturyGothicBold';
	src: url('../font/CenturyGothicBold.ttf');
}
html, body, p, input, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form {
	font-weight: normal;
	line-height: 1;
	margin: 0;
	padding: 0;
	list-style: none;
	vertical-align: middle;    /*word-break: break-all;*/
}
html, body {
	font-family: 'CenturyGothic';
	position: relative;
	width: 100%;
	background-color: #fff;
}
header, section, footer, img, button {
	display: block;
	margin: 0;
	padding: 0;
	border: none;
}
input, button, select, textarea {
	outline: none;
}
section, div, span, button, p, ul, li, strong, i, :before, :after {
	background-size: 100% auto !important;
}
:focus {
	outline: none;
}
#top-nav {
	font-size: 14px;
	position: absolute;
	z-index: 100;
	top: 0;
	left: 50%;
	width: 1600px;
	height: 140px;
	margin-left: -800px;
	color: rgba(255, 255, 255, .7);
}
@media screen and (max-width:1600px) {
	#top-nav {
		left: 0;
		width: 100%;
		margin-left: 0;
	}
}
.mobile #top-nav {
	position: fixed;
	height: 1.27rem;
	background-color: #0a0a0a;
}
#top-nav ul {
	height: 70px;
	padding: 35px 0 35px 110px;
}
.mobile #top-nav ul {
	height: .27rem;
	padding: .5rem 0 0 .5rem;
}
#top-nav ul li {
	line-height: 70px;
	float: left;
	height: 70px;
	margin-right: 50px;
	text-align: center;
	white-space: nowrap;
	letter-spacing: 5px;
}
.mobile #top-nav ul li {
	font-size: .18rem;
	line-height: .27rem;
	height: .27rem;
	margin-right: .3rem;
	letter-spacing: .05rem;
}
#top-nav ul li.li-1 {
	width: 66px;
}
#top-nav ul li.li-2 {
	width: 96px;
}
#top-nav ul li.li-3 {
	width: 68px;
}
.mobile #top-nav ul li.li-1, .mobile #top-nav ul li.li-2, .mobile #top-nav ul li.li-3 {
	width: auto;
}
#top-nav ul li.current a{
	font-family: 'CenturyGothicBold';
	color: #fff;
}
#top-nav ul li a {
	display: block;
	text-decoration: none;
	color: rgba(255, 255, 255, .7);
}
#top-nav ul li a:hover {
	font-family: 'CenturyGothicBold';
	text-decoration: underline;
	color: #fff;
}
#top-nav .logo {
	position: absolute;
	top: 35px;
	right: 110px;
	/*width: 148px;
	height: 20px;*/
	width: 70px;
	height: 70px;
	background: url(../images/logo.png) 0 0 no-repeat;
}
/*.mobile #top-nav .logo {
	top: .5rem;
	right: .5rem;
	width: 2rem;
	height: .27rem;
}*/
.mobile #top-nav .logo{
	top: .15rem;
    right: .3rem;
    width: 1rem;
    height: 1rem;
}
#top-banner {
	position: relative;
	overflow: hidden;
	max-width: 2000px;
	max-height: 800px;
	margin: 0 auto;
}
.mobile #top-banner {
	display: none;
}
.mobile .top-service-banner {
	display: none;
}
.mobile .case #top-banner {
	display: block;
	max-width: 7.5rem;
	height: auto !important;
	max-height: 7.5rem;
	margin: 1.27rem 0 0 0;
}
#top-banner-mobile img {
	display: block;
	width: 100%;
}
#top-banner ul {
	position: absolute;
	left: 0;
	width: 100%;
}
.mobile .case #top-banner ul {
	position: relative;
}
#top-banner .swiper-container {
	position: absolute;
	left: 0;
	width: 100%;
}
#top-banner li {
	height: 100%;
}
#top-banner li img {
	display: block;
	width: 100%;
	height: 100%;
}
#top-banner li h1 {
	font-size: 30px;
	font-weight: lighter;
	line-height: 40px;
	position: absolute;
	top: 45%;
	left: 0;
	width: 100%;
	height: 40px;
	text-align: center;
	color: #fff;
}
.mobile .case #top-banner li h1 {
	display: none;
}
#top-banner li h1 strong {
	font-weight: normal;
	padding-right: 15px;
}
#top-banner li h2 {
	font-size: 30px;
	font-weight: lighter;
	line-height: 40px;
	position: absolute;
	top: 55%;
	left: 0;
	width: 100%;
	height: 40px;
	text-align: center;
	color: #fff;
}
#top-banner .swiper-container img {
	position: absolute;
	left: 0;
	width: 100%;
}
#top-banner .swiper-container h1 {
	font-size: 40px;
	font-weight: lighter;
	line-height: 40px;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 40px;
	text-align: center;
	color: #fff;
}
#top-banner .swiper-container h1 strong {
	font-weight: normal;
}
#top-banner .swiper-container span {
	font-size: 12px;
	position: absolute;
	top: 48%;
	left: 0;
	width: 100%;
	margin-top: 70px;
	text-align: center;
	color: #fff;
}
#top-banner .swiper-container a:hover span {
	text-decoration: underline;
}
#top-banner .swiper-pagination {
	font-size: 0;
	bottom: 30px;
	width: 100%;
}
#top-banner .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0 8px;
	border-radius: 0;
	background-color: #fff;
}
#top-banner-mobile {
	display: none;
}
.mobile #top-banner-mobile {
	display: block;
	margin-top:54px
}
.w1380 {
	/*max-width: 1380px;*/
	margin: 0 4%;
}
/*@media screen and (max-width:1380px) {
	.w1380 {
		width: 100%;
		margin: 0 auto;
	}
}*/
.w1380-1600 {
	width: 1380px;
	margin: 0 auto;
	padding: 0 110px;
}
.home-index{
	margin: 0 auto 60px auto;
}
@media screen and (max-width:1600px) {
	.w1380-1600 {
		width: auto;
		margin: 0 110px;
		padding: 0;
	}
	.home-index{
		margin: 0 110px 50px 110px;
	}
	.mobile .w1380-1600 {
		width: auto;
		margin: 0 .4rem;
		padding: 0;
	}
	.mobile .w1380-1600 #index-list{margin-bottom:15px;}
}
#index-nav {
	overflow: hidden;
	zoom: 1;
	padding: 100px 0;
	color: #ccc;
}
.mobile #index-nav {
	padding: 1.47rem 0 .6rem 0;
}
#index-nav ul {
	float: left;
}
#index-nav ul li {
	font-size: 14px;
	line-height: 26px;
	height: 26px;
	padding-left: 70px;
	cursor: pointer;
	letter-spacing: 4px;
	color:#333;
}
.mobile #index-nav ul li {
	font-size: .24rem;
	line-height: .6rem;
	width: 100%;
	height: .6rem;
	padding-left: 0;
}
#index-nav li.current, #index-nav li:hover {
	text-decoration: underline;
}
#index-nav .year {
	width: 300px;
}
@media screen and (max-width:1200px) {
	#index-nav .year {
		width: 160px;
	}
}
#index-nav .sort {
	overflow: hidden;
	zoom: 1;
	/*width: 1020px;*/
}
.mobile #index-nav .sort {
	width: auto;
}
#index-nav .sort li {
	float: left;
	/*width: 270px;*/
}
.mobile #index-nav .sort li {
	float: none;
}
/*@media screen and (max-width:1200px) {
	#index-nav .sort {
		width: 440px;
	}
	#index-nav .sort li {
		width: 150px;
	}
}*/
#index-list {
	overflow: hidden;
	zoom: 1;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}
#index-list .module {
	position: relative;
	overflow: hidden;
	width: 50%;
	cursor: pointer;
}
.mobile #index-list .module {
	width: 100%;
	height: 4.24rem;
}
#index-list .module img.seat {
	display: block;
	width: 100%;
}
#index-list .module img.thumbnail {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin:0;
}
.mobile #index-list .module img.thumbnail {
	/*opacity: .6;*/
}
#index-list .module video {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.mobile #index-list .module video {
	display: none;
}
#index-list .module a {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}
#index-list .module .mask {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	transition: opacity .2s;
	opacity: 0;
	background: url(../images/works-list-mask.png) 0 0 no-repeat;
}
.mobile #index-list .module .mask {
	display: none;
}
#index-list .module:hover .mask {
	opacity: 1;
}
#index-list .module p {
	position: absolute;
	left: 10%;
	width: 80%;
	transition: transform .2s, color .2s;
	pointer-events: none;
	color: rgba(255, 255, 255, .8);
}
.mobile #index-list .module p {
	left: .4rem;
}
#index-list .module:hover p {
	color: rgba(255, 255, 255, 1);
}
#index-list .module p.p1 {
	font-size: 12px;
	top: 50px;
	transition: opacity .2s, transform .2s;
	transform: translate3d(0, 10px, 0);
	letter-spacing: 4px;
	opacity: 0;
}
#index-list .module p.p2 {
	font-size: 22px;
	line-height: 1.5;
	top: 80px;
	transition: opacity .2s, transform .2s;
	transform: translate3d(0, 10px, 0);
	letter-spacing: 2px;
	opacity: 0;
}
#index-list .module p.p3 {
	font-size: 12px;
	bottom: 55px;
	transition: opacity .2s, transform .2s;
	transform: translate3d(0, 10px, 0);
	letter-spacing: 4px;
	opacity: 0;
}
#index-list .module p.p4 {
	font-size: 16px;
	font-weight: lighter;
	line-height: 1.5;
	top: 135px;
	transition: opacity .2s, transform .2s;
	transform: translate3d(0, 10px, 0);
	letter-spacing: 1px;
	opacity: 0;
}
#index-list .module:hover p.p1 {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}
#index-list .module:hover p.p2 {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}
#index-list .module:hover p.p3 {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}
#index-list .module:hover p.p4 {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}
@media screen and (max-width:1200px) {
	#index-list .module p.p1 {
		top: 40px;
	}
	#index-list .module p.p2 {
		font-size: 16px;
		top: 65px;
		letter-spacing: 1px;
	}
	#index-list .module p.p3 {
		bottom: 45px;
	}
	#index-list .module p.p4 {
		font-size: 14px;
		top: 105px;
	}
}
.mobile #index-list .module p.p1 {
	font-size: .18rem;
	top: .4rem;
}
.mobile #index-list .module p.p2, .mobile #index-list .module p.p3 {
	display: none;
}
.mobile #index-list .module p.p4 {
	font-size: .24rem;
	line-height: 1.8;
	top: .8rem;
	width: 3.2rem;
	opacity: 1;
}
.footer {
	background: url(../images/footer.png); 
	background-size: auto !important;
}
.mobile .footer {
	padding-top: 1.5rem;
}
#bottom-nav {
	font-size: 12px;
	padding-top: 100px;
	color: #ccc;
}
.mobile #bottom-nav {
	display: none;
}
#bottom-nav ul {
	height: 70px;
	padding-left: 40px;
}
#bottom-nav ul li {
	line-height: 70px;
	float: left;
	height: 70px;
	margin-right: 50px;
	text-align: center;
	letter-spacing: 4px;
}
#bottom-nav ul li.li-1 {
	width: 55px;
}
#bottom-nav ul li.li-2 {
	width: 80px;
}
#bottom-nav ul li.li-3 {
	width: 57px;
}
#bottom-nav ul li.current a{
	font-family: 'CenturyGothicBold';
	color: #fff;
}
#bottom-nav ul li a {
	display: block;
	text-decoration: none;
	color: #ccc;
}
#bottom-nav ul li a:hover {
	font-family: 'CenturyGothicBold';
	text-decoration: underline;
	color: #fff;
}
#bottom {
	position: relative;
	margin-top: 100px;
	padding: 0 40px 50px 40px;
}
.mobile #bottom {
	margin-top: .5rem;
	padding: 0 0 1rem 0;
}
#bottom p {
	font-size: 14px;
	color: rgba(255, 255, 255, .6);
}
.mobile #bottom p {
	font-size: .22rem;
	font-weight: lighter !important;
	text-align: left;
}
#bottom p.p1 {
	font-weight: bold;
	line-height: 30px;
}
.mobile #bottom p.p1 {
	line-height: 1.8;
}
#bottom p.p2 {
	line-height: 30px;
	text-decoration: underline;
}
.mobile #bottom p.p2 {
	line-height: 1.8;
}
#bottom p.p3 {
	margin-top: 30px;
	color: rgba(255, 255, 255, .3);
	margin-bottom:10px
}
.mobile #bottom p.p3 {
	line-height: 1.8;
	margin-top: .2rem;
}
#bottom p.p4 {
	margin-top: 150px;
	text-align: center;
	color: rgba(255, 255, 255, .3);
}
.mobile #bottom p.p4 {
	margin-top: 1rem;
}
#bottom .share {
	/*position: absolute;
	top: 0;
	right: 40px;
	width: 285px;
	height: 51px;*/
	flex:1;
}
.mobile #bottom .share {
	font-size: 0;
	position: relative;
	right: auto;
	width: auto;
	height: .85rem;
	margin-top: .8rem;
	text-align: center;
}
#bottom .share li {
	float: right;
	width: 51px;
	height: 51px;
	margin-right: 27px;
}
#bottom .share li:last-child{margin-right:0}
.mobile #bottom .share li {
	display: inline-block;
	float: none;
	/* width: .85rem;
	height: .85rem; */
	margin: 0 .25rem;
	background-size: 4.75rem auto !important;
}
.mobile #bottom .share li:hover{background-position: 0 -102px;}
.mobile #bottom .share li a:hover {background-image:none!important; opacity:0 !important;}
.mobile #bottom .share li:hover a{background-image:none!important;}
#bottom .share li a {
	display: block;
	width: 51px;
	height: 51px;
	transition: opacity .2s;
	opacity: 0;
}

#bottom .share li.weixin {
	/* float: left; */
	width: 51px;
	height: 51px;
	margin-right: 27px;
	background-image: url(../images/icon-share.png);
	background-repeat: no-repeat;
	background-size: auto !important;
}
#bottom .share li.weixin a {
	display: block;
	width: 51px;
	height: 51px;
	transition: opacity .2s;
	opacity: 0;
	background-image: url(../images/icon-share.png);
	background-repeat: no-repeat;
	background-size: auto !important;
}
#bottom .share li.behance a {
	display: block;
	width: 51px;
	height: 51px;
	transition: opacity .2s;
	opacity: 0;
	background-position: 0 -102px;
}
.mobile #bottom .share li a {
	width: .85rem;
	height: .85rem;
	background-size: 4.75rem auto !important;
}
#bottom .share li a:hover {
	opacity: 1;
}
#bottom .share li a:hover {
	opacity: 1;
}
.share li.weixin {
	background-position: 0 0;
}
#bottom .share li.weixin a {
	background-position: 0 -102px;
}
.mobile #bottom .share li.weixin a {
	background-position: 0 -1.7rem;
}
.share li.behance {
	background-position: 0 0;
}
.mobile #bottom .share li.behance a{
	background-position: 0 -1.7rem;
}



#bottom .share li.digitaling {
	background-position: -156px 0;
}
.mobile #bottom .share li.digitaling {
	background-position: -2.6rem 0;
}
#bottom .share li.digitaling a {
	background-position: -156px -102px;
}
.mobile #bottom .share li.digitaling a {
	background-position: -2.6rem -1.7rem;
}
#bottom .share li.zcool {
	margin-right: 0;
	background-position: -234px 0;
}
.mobile #bottom .share li.zcool {
	background-position: -3.9rem 0;
}
#bottom .share li.zcool a {
	background-position: -234px -102px;
}
.mobile #bottom .share li.zcool a {
	background-position: -3.9rem -1.7rem;
}
#services-title {
	width: 1600px;
	margin: 0 auto;
	padding-bottom: 100px;
}
.mobile #services-title {
	padding-bottom: .8rem;
}
@media screen and (max-width:1600px) {
	#services-title {
		width: auto;
	}
}
#services-title p.p {
	font-size: 28px;
	margin: 0 110px;
	padding: 160px 0 0 0;
	letter-spacing: 12px;
	/* color: #ccc; */
	color: #333;
}
.mobile #services-title p.p {
	display: none;
}
#services-title p.m {
	display: none;
}
.mobile #services-title p.m {
	font-size: .4rem;
	line-height: 1.5;
	display: block;
	margin: 0 .5rem;
	padding: 1.6rem 0 0 0;
	letter-spacing: .1rem;
	/*color: #ccc;*/
	color: #333;
}
#services-intro {
	position: relative;
	z-index: 10;
	margin-top: 30px;
/*	padding-top: 120px;
	background-color: #191919;*/
}
.mobile #services-intro {
	overflow: hidden;
	/*height: 4.5rem;*/
	margin-top: 0;
	padding-top: .8rem;
}
#services-intro p {
	font-size: 18px;
	line-height: 40px;
	text-align: center;
	color: #fff;
}
.mobile #services-intro p {
	font-size: .24rem;
	line-height: 1.8;
}
#services-intro p strong {
	font-family: 'CenturyGothicBold';
}
.mobile #services-intro p strong {
	font-family: 'CenturyGothic';
}
#services-intro p span {
/*	opacity: .5;*/
	opacity:1;
}
#services-intro svg {
	display: none;
}
#services-intro .pic {
	position: relative;
	overflow: hidden;
	zoom: 1;
	width: 1000px;
	margin: 0 auto;
	padding-bottom: 50px;
	transform-origin: 0 0;
}
#services-intro .pic .goo {
	position: relative;
	width: 500px;
	height: 500px;
	filter: url('#goo');
}
#services-intro .pic .goo.left {
	float: left;
}
#services-intro .pic .goo.right {
	float: right;
}
#services-intro .pic .goo div div {
	position: absolute;
	border-radius: 50%;
}
#services-intro .pic .goo div div p {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: left;
	border-radius: 50%;
}
#services-intro .pic .goo .big div {
	top: 50%;
	left: 50%;
	width: 260px;
	height: 260px;
	margin: -130px 0 0 -130px;
	transition: transform .3s;
}
#services-intro .pic .goo .small div {
	transition: transform .3s;
}
#services-intro .pic .goo .big div:hover, #services-intro .pic .goo .small div:hover {
	transform: scale3d(1.1, 1.1, 1);
}
#services-intro .pic .left.goo div div p {
	background-color: #fff;
}
#services-intro .pic .right.goo div div p {
	background-color: #2e2e2e;
}
#services-intro .pic .goo .big strong {
	font-size: 50px;
	display: block;
}
#services-intro .pic .goo .big span {
	font-size: 16px;
	display: block;
	margin-top: 2px;
	text-align: center;
	letter-spacing: 2px;
	opacity: 1;
}
#services-intro .pic .left.goo .big strong {
	font-family: 'CenturyGothicBold';
	line-height: 1;
	padding: 70px 0 0 40px;
	color: #000;
}
#services-intro .pic .left.goo .big span {
	color: #333;
}
#services-intro .pic .right.goo .big strong {
	font-family: 'CenturyGothicBold';
	line-height: 1;
	padding: 70px 0 0 75px;
	color: #fff;
}
#services-intro .pic .right.goo .big span {
	color: #ccc;
}
#services-intro .pic .goo .small span {
	font-size: 18px;
	line-height: 20px;
	position: absolute;
	top: 50%;
	display: block;
	width: 100%;
	height: 20px;
	margin-top: -10px;
	text-align: center;
	opacity: 1;
}
#services-intro .pic .left.goo .small span {
	color: #333;
}
#services-intro .pic .right.goo .small span {
	color: #ccc;
}
@keyframes rotate1 {
	0% {
		transform: rotateZ(0deg);
	}
	100% {
		transform: rotateZ(360deg);
	}
}
@keyframes rotate2 {
	0% {
		transform: rotateZ(0deg);
	}
	100% {
		transform: rotateZ(-360deg);
	}
}
#services-intro .pic .left.goo .s1 div {
	top: 85px;
	left: 415px;
	width: 120px;
	height: 120px;
}
#services-intro .pic .left.goo .s2 div {
	top: 105px;
	left: 325px;
	width: 80px;
	height: 80px;
}
#services-intro .pic .left.goo .s3 div {
	bottom: 145px;
	left: 365px;
	width: 80px;
	height: 80px;
}
#services-intro .pic .right.goo .s1 div {
	top: 305px;
	left: -20px;
	width: 130px;
	height: 130px;
}
#services-intro .pic .right.goo .s2 div {
	top: 75px;
	left: 135px;
	width: 80px;
	height: 80px;
}
#services-intro .pic .right.goo .s3 div {
	top: 335px;
	left: 105px;
	width: 80px;
	height: 80px;
}
#services-intro .pic .grid {
	position: absolute;
	width: 100%;
	height: 580px;
	pointer-events: none;
	opacity: .15;
	background: url(../images/services-intro-bg.png);
	background-size: auto !important;
}
.services-list {
	position: relative;
	/* height: 660px; */
	/* background: url(../images/services-list-bg.jpg) 50% 0 no-repeat; */
	background-size: 100% 100% !important;
}
#services-list-mobile {
	display: none;
}
.mobile #services-list-mobile {
	display: block;
}
.mobile .services-list {
	height: 8rem;
}
.mobile #services-list-p {
	display: none;
}
#services-list-m {
	display: none;
}
.mobile #services-list-m {
	display: block;
}
.services-list .swiper-pagination {
	font-size: 0;
	bottom: .5rem;
	width: 100%;
}
.services-list .swiper-pagination-bullet {
	width: .15rem;
	height: .15rem;
	margin: 0 .1rem;
	border-radius: 0;
	background-color: #fff;
}
.services-list ul {
	overflow: hidden;
	zoom: 1;
	width: 100%;
	margin: 0 auto;
	padding-top: 120px;
	padding-bottom: 50px;
}
.mobile .services-list ul {
	overflow: visible;
	width: 100%;
	margin: 0;
	padding-top: 0;
}
@media screen and (max-width:1240px) {
	.services-list ul {
		width: 100%;
	}
}
.services-list ul li {
	float: left;
	width: 25%;
	padding: 50px 0;
	transition: background-color .5s;
}
.mobile .services-list ul li {
	width: 100%;
	padding: .7rem 0 0 0;
}
@media screen and (max-width:1240px) {
	.services-list ul li {
		width: 25%;
	}
}
.services-list li .icon {
	width: 150px;
	height: 150px;
	margin: 0 auto;
	transition: transform .2s;
}
.mobile .services-list li .icon {
	width: 3.6rem;
	height: 3.6rem;
}
.services-list li.li-1 .icon {
	background: url(../images/services-list-icon-1.png) 0 0 no-repeat;
}
.services-list li.li-2 .icon {
	background: url(../images/services-list-icon-2.png) 0 0 no-repeat;
}
.services-list li.li-3 .icon {
	background: url(../images/services-list-icon-3.png) 0 0 no-repeat;
}
.services-list li.li-4 .icon {
	background: url(../images/services-list-icon-4.png) 0 0 no-repeat;
}
.services-list li h3 {
	font-size: 16px;
	font-weight: bold;
	margin-top: 20px;
	transition: transform .2s;
	text-align: center;
	color: #fff;
}
.mobile .services-list li h3 {
	font-size: .32rem;
	margin-top: .1rem;
}
.services-list li .service-sum{
	font-size: 12px;
	line-height: 24px;
	margin-top: 30px;
	transition: transform .2s;
	text-align: center;
	color: rgba(255, 255, 255, .6);
}
.mobile .services-list li .service-sum{
	font-size: .22rem;
	line-height: 1.8;
	margin-top: .15rem;
}
.mobile .services-list li .service-sum p{
	line-height: 1.8rem;
}
#services-clients {
	/*padding: 150px 0;
	background-color: #141414;*/
}
.mobile #services-clients {
	padding: .4rem 0;
}
#services-clients img {
	display: block;
	margin: 0 auto;
	width:100%;
}
.mobile #services-clients img {
	/* width: 6.3rem; */
	width: 100%;
}
#services-contact {
	padding-bottom: 180px;
}
.mobile #services-contact {
	padding-bottom: 1rem;
}
#services-contact h2 {
	font-size: 14px;
	margin: 60px 0 0 90px;
	color: #fff; 
/* 	color: #333;*/
}
.mobile #services-contact h2 {
	font-size: .2rem;
	margin: .8rem 0 0 .5rem;
}
#services-contact .table {
	overflow: hidden;
	zoom: 1;
	width: 660px;
	margin: 80px auto 0 auto;
}
.mobile #services-contact .table {
	width: 6.5rem;
	margin: .4rem auto 0 auto;
}
#services-contact .table input {
	font-size: 14px;
	line-height: 48px;
	display: block;
	float: left;
	width: 254px;
	height: 48px;
	margin: 12px;
	padding: 0 25px;
	color: #ccc;
	border: 1px solid #414141;
	background: transparent;
}
.mobile #services-contact .table input {
	font-size: .24rem;
	line-height: 1rem;
	float: none;
	width: 5.76rem;
	height: 1rem;
	margin: 0 0 .4rem 0;
	padding: 0 .35rem;
	border: .02rem solid #414141;
}
#services-contact .service-btn {
	display: block;
	width: 360px;
/*	height: 50px;*/
	margin: 60px auto 0 auto;
}
#services-contact .service-btn button{
	background-color: #212121;
	transition: color .2s, background-color .2s;
	color: #ccc;
	font-size: 14px;
	display: inline-table;
	width: 170px;
	height: 50px;
	line-height: 50px;
	box-sizing: border-box;
}
#services-contact .service-btn button:first-child{margin-right:16px}
#services-contact .service-btn button a{
	display:block;
	color:#ccc;
	background: #212121;
}
.mobile #services-contact .service-btn button{
	font-size: .24rem;
	width: 3.3rem;
	height: 1rem;
	margin: .5rem auto 0 auto;
	display: block;
}
.mobile #services-contact .service-btn button:first-child{
	margin:0 auto;
	margin-bottom: 10px;
}
#services-contact button:hover {
	color: #fff;
	background-color: #333;
}
#about-title {
	width: 1600px;
	margin: 0 auto;
	/*padding-bottom: 100px;*/
	padding-bottom: 70px;
}
.mobile #about-title {
	padding-bottom: .8rem;
}
@media screen and (max-width:1600px) {
	#about-title {
		width: auto;
	}
}
#about-title p.p {
	font-size: 28px;
	margin: 0 110px;
	padding: 160px 0 0 0;
	letter-spacing: 12px;
	 color: #ccc; 
/*	color: #333;*/
}
.mobile #about-title p.p {
	display: none;
}
#about-title p.m {
	display: none;
}
.mobile #about-title p.m {
	font-size: .4rem;
	line-height: 1.5;
	display: block;
	margin: 0 .5rem;
	padding: 1.6rem 0 0 0;
	letter-spacing: .1rem;
	color: #ccc;
}
#about-title .divsum {
	font-size: 14px;
	line-height: 28px;
	display: block;
	margin: 30px 110px 0 110px;
	color: #999;
}
.mobile #about-title .divsum {
	font-size: .22rem;
	line-height: 1.8;
	margin: .7rem .5rem 0 .5rem;
	color: #999;
}
#about-banner {
	position: relative;
	overflow: hidden;
	max-height: 450px;
}
.mobile #about-banner {
	display: none;
}
.mobile .about-pc-banner{display:none;}
#about-banner-mobile {
	display: none;
}
.mobile #about-banner-mobile {
	display: block;
}
#about-banner-mobile img {
	display: block;
	width: 100%;
}
#about-banner ul {
	position: absolute;
	left: 0;
	width: 100%;
}
#about-banner li {
	height: 100%;
}
#about-banner li img {
	display: block;
	width: 100%;
	height: 100%;
}
#about-swiper {
	padding: 120px 0;
}
.mobile #about-swiper {
	position: relative;
	height: 6.5rem;
	padding: .5rem 0;
}
.mobile #about-swiper .swiper-container {
	overflow: hidden;
	height: 6.5rem;
	margin: 0 .5rem;
}
#about-swiper .swiper-container .swiper-slide {
	display: table-cell;
	overflow: hidden;
	height: 660px;
	text-align: center;
	vertical-align: middle;
}
.mobile #about-swiper .swiper-container .swiper-slide {
	width: 100%;
	height: 6.5rem;
}
#about-swiper .swiper-container img {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	transform: translate(-50%, -50%);
	height: 100%;
	width: auto;
}
.mobile #about-swiper .swiper-container img {
	width: 100%;
	height:auto;
}
#about-swiper .swiper-pagination {
	font-size: 0;
	position: static;
	width: 100%;
	margin-top: 30px;
}
.mobile #about-swiper .swiper-pagination {
	position: absolute;
	bottom: 0;
	margin-top: 0;
}
#about-swiper .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0 8px;
	border-radius: 0;
/*	background-color: #000;*/
background-color: #fff;
}
/*#about-swiper .swiper-pagination {
	font-size: 0;
	bottom: .5rem;
	width: 100%;
}*/
.mobile #about-swiper .swiper-pagination-bullet {
	width: .15rem;
	height: .15rem;
	margin: 0 .1rem;
}
#about-hr {
	padding-bottom: 140px;
}
.mobile #about-hr {
	padding: .8rem 0;
}
#about-hr p {
	font-size: 14px;
	line-height: 28px;
	margin: 0 90px;
	 color: #ccc; 
	/*color: #333;*/
}
.mobile #about-hr p {
	font-size: .22rem;
	line-height: 1.8;
	margin: 0 .5rem;
}
#detail {
	max-width: 1380px;
	margin: 0 auto;
}
#detail .content {
	margin: 30px 0;
}
.mobile #detail .content {
	margin: 0;
	padding-top: 1.5rem;
	padding-bottom: 15px;
}
.mobile .case #detail .content {
	padding-top: .25rem;
}
#detail .content img {
	display: block;    /*width: 100%;*/
	max-width: 1380px;
	margin: 0 auto;
	/*padding: 50px 0;*/
}
#detail .content img.img1380 {
	width: 100%;
}
#detail .content img.img1000 {
	width: 1000px;
}
@media screen and (max-width:1190px) {
	#detail .content img.img1000 {
		width: 100%;
	}
}
#detail .content img.img360 {
	width: 360px;
}
#detail .content img.img160 {
	width: 160px;
}
.mobile #detail .content img {
	max-width: 7.5rem;
	/*padding: .5rem 0;*/
}
#detail .content video {
	display: block;
	width: 100%;
	max-width: 1380px;
	margin: 0 auto;
	padding: 50px 0;
}
.mobile #detail .content video {
	width: 100%;
	padding: .5rem 0;
}
#detail .content h1 {
	font-size: 20px;
	margin: 0 250px 60px 250px;
	text-align: center;
	letter-spacing: 4px;
	color: #ccc;
}
.mobile #detail .content h1 {
	font-size: .28rem;
	margin: 0 .5rem .6rem .5rem;
	letter-spacing: 0;
}
#detail .content h2 {
	font-size: 30px;
	line-height: 2.5;
	margin: 0 auto;
	padding: 0 0 50px 0;
	text-align: center;
	letter-spacing: 4px;
	color: #ccc;
}
.mobile #detail .content h2 {
	font-size: .24rem;
	padding: .25rem 0;
	letter-spacing: 0;
}
#detail .content h3 {
	font-size: 16px;
	line-height: 2.5;
	margin: 0 auto;
	padding: 80px 0 50px 0;
	text-align: center;
	letter-spacing: 4px;
	color: #ccc;
}
.mobile #detail .content h3 {
	font-size: .24rem;
	padding: .25rem 0;
	letter-spacing: 0;
}
#detail .content p ,#detail .content h4,#detail .content h3{
	font-size: 14px;
	font-weight: lighter;
	line-height: 2.5;
	width: 750px;
	margin: 0 auto;
	/*padding: 50px 0;*/
	text-align: center;
	letter-spacing: 4px;
	/* color: #ccc; */
	color: #333;
}
.mobile #detail .content p,.mobile #detail .content h4,.mobile #detail .content h3{
	font-size: .24rem !important;
	line-height: 1.8 !important;
	width: auto;
	/*padding: .25rem 0;*/
	text-align: left;
	letter-spacing: 0;
	color:#333;
	text-align: center;
}
#detail .content p.tips {
	font-size: 12px;
	margin-top: -50px;
	color: #999;
}
.mobile #detail .content p.tips {
	font-size: .18rem;
	margin-top: -.5rem;
	text-align: center;
}
#detail-next {
	position: relative;
	overflow: hidden;
	max-width: 2000px;
	max-height: 800px;
	margin: 0 auto;
}
#detail-next ul {
	position: absolute;
	left: 0;
	width: 100%;
}
#detail-next li {
	height: 100%;
}
#detail-next li img {
	display: block;
	width: 100%;
	height: 100%;
}
#detail-next .txt p {
	font-weight: bold;
	position: absolute;
	left: 90px;
	color: #fff;
}
#detail-next .txt p.p1 {
	font-size: 12px;
	top: 50px;
	letter-spacing: 4px;
}
#detail-next .txt p.p2 {
	font-size: 14px;
	line-height: 22px;
	top: 90px;
	letter-spacing: 5px;
}
#detail-next .txt p.p3 {
	font-size: 12px;
	bottom: 55px;
	letter-spacing: 4px;
}
#detail-next .txt a {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	transition: background-color .5s;
	text-decoration: none;
	background-color: rgba(0, 0, 0, .6);
}
#detail-next .txt a:hover {
	background-color: rgba(0, 0, 0, .2);
}
#detail-next .txt a i {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 88px;
	height: 28px;
	margin: -14px 0 0 -44px;
	background: url(../images/arrow-next.png) 0 0 no-repeat;
}
#detail-next .txt a:hover i {
	animation: arrow .5s infinite alternate;
}
@keyframes arrow {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(0, 10px, 0);
	}
}
#detail-next .txt a span {
	font-size: 18px;
	position: absolute;
	top: 50%;
	display: block;
	width: 100%;
	margin-top: 40px;
	text-align: center;
	letter-spacing: 5px;
	color: #ccc;
}
.weixinPopup {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	left: 100%;
	width: 100%;
	height: 100%;
	transition: opacity .5s;
	opacity: 0;
	background-color: rgba(0, 0, 0, .7);
}
.weixinPopup.show {
	left: 0;
	opacity: 1;
}
.weixinPopup.show.hide {
	left: 0;
	opacity: 0;
}
.weixinPopup img {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 258px;
	margin: -150px 0 0 -129px;
}


.weiboPopup {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	left: 100%;
	width: 100%;
	height: 100%;
	transition: opacity .5s;
	opacity: 0;
	background-color: rgba(0, 0, 0, .7);
}
.weiboPopup.show {
	left: 0;
	opacity: 1;
}
.weiboPopup.show.hide {
	left: 0;
	opacity: 0;
}
.weiboPopup img {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 258px;
	margin: -150px 0 0 -129px;
}


@media screen and (max-width:720px) {
	.mobile #detail .content img{width:100% !important;height:auto !important;}
}



.links{
	height: auto;
	padding-bottom: 40px !important;
	padding-top:0 !important;
}
.links#bottom-nav ul{height:auto;padding-left:0}
.links#bottom-nav ul li{
	margin-right:20px;
	line-height: 24px;
	height: 24px;
	font-size: 14px;
}
.mobile .links{
	display: block !important;
	padding-top: 0 !important;
	padding-bottom: 20px !important;
}
.mobile .links#bottom-nav ul{
	padding-left:0;
	text-align: center;
}
.mobile .links#bottom-nav ul li{float:static;display:inline-block;}