elab/ElabHomeProject/static/webView/css/index.css

/*滚动轴*/

body {
	font-family: "AritaHeiti","微软雅黑";
	overflow-x: hidden;
}
::-webkit-scrollbar{
	width: 0;
}
:-webkit-scrollbar-track {
	background-color: #F5F5F5;
}

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

::-webkit-scrollbar {
	width: 0px;
	background-color: #F5F5F5;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.clearfix {
	zoom: 1;
}

.clearfix:after {
	content: '';
	display: block;
	clear: both;
}

::-webkit-scrollbar-thumb {
	background-color: #999;
}

.wrap {
	width: 90%;
	margin: 0 auto;
}

.hidden {
	display: none;
}

.w_1440 {
	width: 1440px;/*1440px*/
	margin: 0 auto;
}
.close-bar{
	width: 100%;
	height: 40px;
	line-height: 40px;
	background: url(http://yun-image.elab-plus.com/images/projects/1_objects@2x_3.png) no-repeat 50% 50%;
	background-size: contain;
	cursor: pointer;
}
.head_box {
	position: relative;
	padding: 20px 0;
	height: 24px;
}

.menu_btn {
	text-align: center;
}

.menu_btn img,
.menu_btn span {
	display: inline-block;
	vertical-align: middle;
}

.menu_btn span {
	font-size: 22px;
	color: #fff;
	margin-left: 18px;
}

.logo {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.csr {
	height: 908px;
	background: url(http://yun-image.elab-plus.com/images/Main@2x.png) center no-repeat;
	background-size: cover;
	text-align: center;
	padding: 393px 0 0;
}

.csr h3 {
	font-size: 76px;
	color: #fff;
	font-family: "AritaHeiti";
}

.csr_text {
	font-size: 43px;
	color: #fff;
	font-family: "AritaHeiti";
}

.a_btn {
	margin-top: 200px;
	text-align: center;
}

.a_btn a {
	width: 160px;
	height: 50px;
	font-size: 16px;
	color: #000;
	text-align: center;
	display: inline-block;
	line-height: 50px;
	background: #fff;
	border-radius: 40px;
	font-family: "AritaHeiti";
}

.s_v {
	margin-right: 50px;
}

.section2 p {
	font-size: 20px;
	color: #fff;
	line-height: 1.6;
	font-family: "AritaHeiti";
	max-width: 850px;
	margin: 0 auto 40px;
	text-align: left;
}

.section2 {
	padding: 7% 0;
	text-align: center;
}

.section2 h3 {
	font-size: 40px;
	color: #fff;
	font-family: "AritaHeiti";
	margin-bottom: 55px;
}

.yewu {
	margin-top: 104px;
}

.yewu li {
	float: left;
	width: 25%;
}

.section3>h3 {
	font-size: 40px;
	color: #fff;
	font-family: "AritaHeiti";
}

.section3 {
	background: url(http://yun-image.elab-plus.com/images/bg01.png) center no-repeat;
	background-size: 100% 100%;
	text-align: center;
	padding: 58px 0 67px;
	position: relative;
	z-index: 5;
}

.yewu li h3 {
	font-size: 120px;
	color: #3dadc0;
	font-family: "DINCond";
}

.yewu li p {
	font-size: 25px;
	color: #fff;
	margin-top: 23px;
	font-family: "AritaHeiti";
}

.section4 {
	padding: 24% 0 0;
	background: #1e2538;
	margin-top: -147px;
}

.section4_list {
	position: relative;
	padding-bottom: 93px;
}

.section4_list li {
	overflow: hidden;
	margin-bottom: 82px;
	position: relative;
	z-index: 5;
}

.section4_list_box {
	width: 50%;
}

.section4_list li:nth-child(2n) .section4_list_box {
	float: left;
	text-align: right;
	padding-right: 32px;
}

.section4_list li:nth-child(2n+1) .section4_list_box {
	float: right;
	text-align: left;
	padding-left: 36px;
}

.section4_list li:last-child {
	margin-bottom: 0;
}

.section4_list:after {
	content: "";
	width: 2px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: 1px;
	background: #4e5464;
	z-index: 1;
}

.h3 {
	font-size: 86px;
	position: relative;
	color: #41acc0;
	font-family: "DINCond";
	line-height: 80%;
}

.latest {
	color: #fff;
}

.p {
	max-width: 594px;
	font-size: 23px;
	color: #fff;
	margin-top: 15px;
	position: relative;
	font-family: "AritaHeiti";
}

.p1:after {
	content: "";
	width: 30px;
	height: 30px;
	position: absolute;
	top: 50%;
	left: -46px;
	margin-top: -15px;
	background: #fff;
	border-radius: 50%;
	z-index: 5;
}

.pb {
	margin-left: 83px;
}

.tag:after {
	content: "";
	width: 30px;
	height: 30px;
	position: absolute;
	top: 50%;
	margin-top: -15px;
	background: #fff;
	border-radius: 50%;
	z-index: 5;
}

.section4_list li:nth-child(2n) .tag:after {
	right: -49px;
}

.section4_list li:nth-child(2n+1) .tag:after {
	left: -49px;
}

.section4_list li.sec {
	margin-bottom: 0;
}

.more {
	display: block;
	width: 154px;
	height: 50px;
	background: #fff;
	border-radius: 40px;
	color: #000;
	font-size: 20px;
	text-align: center;
	line-height: 50px;
	margin: auto;
	position: relative;
	z-index: 5;
	font-family: "AritaHeiti";
}

.section5 {
	padding: 60px 0;
	background: #1b2030;
	position: relative;
	overflow: hidden;
}

.hj_box {
	padding: 415px 0 0;
	background: url(http://yun-image.elab-plus.com/images/Group@2x02.png) center no-repeat;
	background-size: cover;
	text-align: center;
	height: 906px;
	overflow: hidden;
}

.hj_box h3 {
	font-size: 42px;
	color: #fff;
	margin-bottom: 160px;
	font-family: "AritaHeiti";
}

#section4 {
	margin-top: 0;
	position: relative;
	padding-top: 107px;
}

#section4 ul:nth-child(2n) li:nth-child(2n+1) .section4_list_box {
	float: left;
	padding-right: 32px;
	text-align: right;
}

#section4 ul:nth-child(2n) li:nth-child(2n) .section4_list_box {
	float: right;
	padding-left: 36px;
	text-align: left;
}

.p1-1:after {
	left: auto;
	right: -46px;
}

#section4 ul:nth-child(2n) li:nth-child(2n+1) .tag:after {
	left: auto;
	right: -49px;
}

#section4 ul:nth-child(2n) li:nth-child(2n) .tag:after {
	right: auto;
	left: -49px;
}

.progress {
	width: 98%;
	text-align: center;
}
.progressFirst{
	/*margin-top: -50px;*/
}
.progressSecond{
	/*margin-top: -50px;*/
}
.p_fir {
	margin-right: 4%;
}
.p_border {
	border: 1px solid #fff;;
}

.progress>p {
	display: inline-block;
	width: 100%;
	height: 178px;
	padding: 33px 30px;
	overflow: hidden;
	position: relative;
	font-family: "AritaHeiti";
}

.progress>p span {
	font-size: 20px;
	color: #fff;
	display: inline-block;
	width: 418px;
	line-height: 1.6;
	text-align: left;
}

.progress>p img {
	position: absolute;
	right: 5%;
	top: 14%;
}

.container {
	margin: 0 auto;
}

.con_t {
	background: #000004;
	position: relative;
	overflow: hidden;
	height: 983px;
	max-width: 1440px;
	margin: 0 auto;
}

.con_t img {
	width: 70%;
	max-width: 100%;
	display: block;
	margin: 50px auto 0;
	position: relative;
	z-index: 5;
}

.cai {
	font-size: 131px;
	color: #fff;
	font-family: "AritaHeiti";
	position: absolute;
	top: 294px;
	left: 68px;
	z-index: 4;
}

.line {
	display: inline-block;
	width: 89px;
	height: 10px;
	background: #3fadbe;
	position: absolute;
	top: 454px;
	left: 86px;
}

.p_p {
	max-width: 412px;
	font-size: 20px;
	color: #fff;
	line-height: 1.6;
	font-family: "AritaHeiti";
	position: absolute;
	top: 542px;
	left: 28px;
	z-index: 10;
}

.h33 {
	font-size: 36px;
	color: #fff;
	font-family: "AritaHeiti";
	position: absolute;
	top: 122px;
	right: 256px;
	z-index: 10;
}

.work {
	position: absolute;
	right: 0;
	top: 296px;
	z-index: 10;
}

.work p,
.work h3 {
	color: #fff;
	margin-bottom: 15px;
}

.work p {
	font-size: 18px;
	font-family: "AritaHeiti";
}

.work h3 {
	font-size: 20px;
	font-family: "AritaHeiti";
}

.n {
	font-size: 92px;
	color: #fff;
	font-family: "AritaHeiti";
	position: absolute;
	top: 441px;
	right: 138px;
	z-index: 3;
}

.gx,
.w {
	font-size: 20px;
	color: #fff;
	font-family: "AritaHeiti";
}

.gx {
	position: absolute;
	right: 80px;
	bottom: 240px;
	z-index: 10;
}

.w {
	position: absolute;
	bottom: 130px;
	right: 0;
	z-index: 10;
}

.gx p,
.w p {
	margin-bottom: 20px;
}

.swiper {
	overflow: hidden;
	position: relative;
	background: #202020;
	padding-bottom: 117px;
}

.swiper img {
	width: 100%;
}

.swiper-box {
	padding: 167px 0 0;
}

.s_inner {
	width: 92%;
	margin: 0 auto;
	font-family: "AritaHeiti";
}

.swiper-box h3 {
	font-size: 46px;
	color: #fff;
	text-align: center;
	font-family: "AritaHeiti";
}

.sm {
	font-size: 20px;
	color: #fff;
	text-align: right;
	margin-top: 15px;
}

.sub {
	font-size: 30px;
	color: #f7f7f7;
	line-height: 1.65;
	margin-top: 154px;
	font-family: "AritaHeiti";
}

.span {
	text-align: center;
	margin-top: 120px;
}

.span .swiper-pagination-bullet {
	width: 15px;
	height: 15px;
	background: #3eaec0;
}

.span .swiper-pagination-bullet-active {
	opacity: 1;
}

.work_z {
	position: absolute;
	right: 0;
	top: 25px;
}

.container {
	width: 100%;
	margin: 0 auto;
	background: url(http://yun-image.elab-plus.com/images/BG@2x.jpg) center no-repeat;
	background-size: cover;
}

.wph {
	width: 133px;
}

.shun {
	width: 48px;
}

.p_fir1 {
	margin-right: 0;
}

.sb {
	width: 100%;
	position: relative;
	height: 1025px;
}

.shuzi {
	position: absolute;
	width: 100%;
	text-align: center;
	top: 0;
	left: 0;
}

.shuzi span {
	font-size: 30px;
	font-family: "AritaHeiti";
	color: #fff;
}

.progress {
	position: relative;
}

.shuzi strong {
	font-size: 250px;
	color: #fff;
	font-family: "DINCond";

}

.sp1 {
	margin-right: 128px;
}

.lf {
	position: absolute;
	top: -100px;
	left: 0;
}

.Line {
	position: absolute;
	left: 193px;
	top: -723px;
}

@media(max-width:1024px) {
	.csr h3 {
		font-size: .6rem;
	}
	.csr_text {
		font-size: .3rem;
		margin-top: .2rem;
	}
	.a_btn {
		margin-top: 2rem;
	}
	.csr {
		height: auto;
		background: url(http://yun-image.elab-plus.com/images/Group@2x03.png) center no-repeat;
		background-size: cover;
		padding: 3.93rem 0 1rem;
	}
	.a_btn a {
		width: 2.2rem;
		height: .8rem;
		font-size: .26rem;
		line-height: .8rem;
		border-radius: .4rem;
	}
	.s_v {
		margin-right: .5rem;
	}
	.section2 h3 {
		font-size: .42rem;
		margin-bottom: .3rem;
	}
	.section2 p {
		font-size: .3rem;
		margin-bottom: .25rem;
	}
	.yewu li {
		width: 50%;
	}
	.section3 {
		background: url(http://yun-image.elab-plus.com/images/bg03.png) center no-repeat;
		background-size: 100% 100%;
		padding: .87rem 0;
	}
	.yewu li h3 {
		font-size: .86rem;
	}
	.yewu li p {
		font-size: .25rem;
		margin-top: .23rem;
	}
	.yewu {
		margin-top: .75rem;
	}
	.section4 {
		margin-top: -2.4rem;
		padding: 4rem 0 0;
	}
	.section3>h3 {
		font-size: .42rem;
	}
	.section4_list li:nth-child(2n+1) .section4_list_box {
		padding-left: .32rem;
		padding-right: .3rem;
	}
	.p {
		font-size: .25rem;
		margin-top: .3rem;
	}
	.h3 {
		font-size: .6rem;
	}
	.p1:after {
		content: "";
		width: .3rem;
		height: .3rem;
		top: 50%;
		left: -.46rem;
		margin-top: -.15rem;
	}
	.tag:after {
		content: "";
		width: .3rem;
		height: .3rem;
		margin-top: -.15rem;
	}
	.section4_list li:nth-child(2n+1) .tag:after {
		left: -.8rem;
	}
	.section4_list li:nth-child(2n) .tag:after {
		right: -.5rem;
	}
	.section4_list li:nth-child(2n+1) .tag:after {
		left: -.43rem;
	}
	.section4_list li:nth-child(2n) .section4_list_box {
		padding-right: .32rem;
		padding-left: .32rem;
	}
	.section4_list li {
		margin-bottom: 1rem;
	}
	.more {
		width: 154px;
		height: .8rem;
		border-radius: .4rem;
		font-size: .25rem;
		line-height: .8rem;
	}
	.hj_box h3 {
		font-size: .5rem;
		margin-bottom: 1.6rem;
	}
	.progress>p span {
		float: none;
		margin-right: 0;
		font-size: .3rem;
		width: 100%;
	}
	.progress>p img {
		position: static;
		width: 1rem;
		margin: auto;
	}
	.progress>p {
		width: 100%;
		display: block;
		height: auto;
		padding: .3rem;
		margin-bottom: 25px;
	}
	#section4 ul:nth-child(2n) li:nth-child(2n+1) .tag:after {
		right: -.49rem;
	}
	#section4 ul:nth-child(2n) li:nth-child(2n) .tag:after {
		left: -.76rem;
	}
	#section4 ul:nth-child(2n) li:nth-child(2n+1) .tag:after {
		right: -.83rem;
	}
	.p1-1:after {
		right: -.83rem;
		left: auto;
	}
	#section4 {
		padding-top: 1.07rem;
	}
	.section4_list {
		padding-bottom: .5rem;
	}
	.s_inner {
		width: 92%;
	}
	.swiper {
		padding-bottom: 40px;
	}
	.swiper-box h3 {
		font-size: .28rem;
	}
	.sm,
	.sub {
		font-size: .23rem;
	}
	.sub,
	.span {
		margin-top: 1.5rem;
	}
	.con_t img {
		width: 6.64rem;
		margin: 1.18rem auto 0;
	}
	.left {
		top: 2rem;
		left: .15rem;
	}
	.cai {
		font-size: .6rem;
		top: 2.94rem;
		left: .68rem;
	}
	.line {
		width: .8rem;
		height: .1rem;
		top: 4.54rem;
		left: .66rem;
	}
	.con_t {
		padding: 0 .15rem;
	}
	.p_p {
		font-size: .2rem;
		top: 5.42rem;
		left: .28rem;
		max-width: 2.42rem;
	}
	.right {
		top: 1rem;
		right: 0;
		padding-right: .15rem;
	}
	.h33 {
		font-size: .36rem;
		top: 1.22rem;
		right: 0.56rem;
	}
	.work p {
		font-size: .18rem;
		margin-bottom: .15rem;
	}
	.work p,
	.work h3 {
		margin-bottom: .15rem;
	}
	.work {
		top: 2.96rem;
	}
	.work h3 {
		font-size: .2rem;
	}
	.n {
		font-size: .9rem;
		top: 4.4rem;
		right: 0;
	}
	.gx,
	.w {
		font-size: .26rem;
	}
	.gx {
		right: 0rem;
		bottom: 2.4rem;
	}
	.w {
		bottom: 1.3rem;
		right: 0;
	}
	.container {
		width: 100%;
	}
	.hj_box {
		padding: 4rem 0 0;
		height: 9.06rem;
	}
	/*.logo img {
		width: .42rem;
	}*/
	.menu_btn img {
		width: .32rem;
	}
	.menu_btn span {
		font-size: .22rem;
		margin-left: .18rem;
	}
	.shuzi strong {
		font-size: 1.3rem;
	}
	.shuzi span {
		font-size: .3rem;
	}
	.shuzi {
		top: 2.3rem;
	}
	.gx p,
	.w p {
		margin-bottom: .2rem;
	}
	.sp1 {
		margin-right: 1.3rem;
	}
    .shuzi .sp1:last-child {
        margin-right: 0;
    }
	.shuzi p:nth-child(2) span{
		margin-right: 0.35rem !important;
	}
	.con_t {
		height: 11rem;
	}
	.swiper-box {
		padding: 1.6rem 0 0;
	}
	.sb {
		height: 10.25rem;
	}
	.Line {
		width: 1.62rem;
		left: 0;
		top: -7.23rem;
	}
	.w_1440 {
		width: 98%;
	}
}

@media only screen and (min-width: 1440px){
	.shuzi strong#withPlus sup {
		vertical-align: 0.7rem !important;
		font-size: 0.5rem !important;
	}
	.shuzi p:nth-child(2) span{
		margin-right: 0.55rem !important;
	}
}

@media only screen and (min-width: 1920px){
	.shuzi strong#withPlus sup {
		vertical-align: 0.5rem !important;
		font-size: 0.4rem !important;
	}
	.shuzi p:nth-child(2) span{
		margin-right: 0.4rem !important;
	}
	.shuzi strong#withPlus {
		margin-right: -0.18rem !important;
	}
}


@media only screen and (min-width: 576px) {
	.shuzi {
		top: 20%;
	}
	.shuzi p:nth-child(2){
		text-align: right;
		display: inline-block;
		width: 49%;
	}
	.shuzi p:nth-child(3) {
		text-align: left;
		display: inline-block;
		width: 49%;
	}
    .shuzi strong#withPlus {
        margin-left: 0.63rem;
        margin-right: -0.23rem;
    }
    .shuzi strong#withPlus sup {
        vertical-align: 0.8rem;
        font-size: 0.6rem;
    }
}

/***pad**/
@media only screen and (max-width: 1024px){
	/*.s_inner h3 span {
		display: block;
	}*/
	.cai {
		font-size: .6rem;
		top: 1.34rem;
		left: .68rem;
	}
	.line {
		width: .8rem;
		height: .1rem;
		top: 2.24rem;
		left: .71rem;
	}
	.h33 {
		font-size: .36rem;
		top: 0.82rem;
		right: 0.56rem;
	}
	.n {
		font-size: .7rem;
		top: 5.2rem;
		right: 0;
	}
	.p_p {
		font-size: .2rem;
		top: 6.02rem;
		left: .38rem;
		max-width: 3.52rem;
	}
	.gx {
		right: 0rem;
		bottom: 1.4rem;
		max-width: 60%;
	}
	.w {
		bottom: 0.3rem;
		right: 20%;
	}
	.gx,
	.w {
		font-size: .22rem;
		line-height: 90%;
	}


	.progressFirst {
		display: none;
	}
	.progressSecond {
		display: none;
	}
	#progreeBtn {
		display: inherit;
	}
}

/*****/
@media only screen and (max-width: 576px) and (-webkit-min-device-pixel-ratio:2) {
	.s_inner h3 span {
		display: block;
	}
	.cai {
		font-size: .6rem;
		top: 1.34rem;
		left: .68rem;
	}
	.line {
		width: .5rem;
		height: .1rem;
		top: 2.24rem;
		left: .71rem;
	}
	.h33 {
		font-size: 4.5vw;
		top: 0.2rem;
		right: auto;
		left: 50%;
	}
	.work {
		top: 0.96rem;
		right: auto;
		left: 50%;
	}
	.n {
		font-size: .7rem;
		top: 5.2rem;
		right: 0;
	}
	.p_p {
		font-size: .2rem;
		top: 6.02rem;
		left: .38rem;
		max-width: 3.52rem;
	}
	.gx {
		right: 0rem;
		bottom: 1.4rem;
		max-width: 60%;
	}
	.w {
		bottom: 0.3rem;
		right: 20%;
	}
	.gx,
	.w {
		font-size: .22rem;
		line-height: 90%;
	}
}

.top-menu {
	width: 100%;
	padding: 20px 0;
	height: 64px;
	font-size: 0;
	line-height: 24px;
	position: relative;
	z-index: 10;
	/*background: url(http://yun-image.elab-plus.com/images/menu-bg.jpg) no-repeat;
	background-size: 100% 100%;
	opacity: 0;*/
}
.logo {
	width: 4.7%;
	position: absolute;
	bottom: 0%;
	left: 4%;
	cursor: pointer;
}
.inner-icon {
	width: 100%;
	position: relative;
	z-index: 1;
}
.menu {
	width: 3.4%;
	position: absolute;
	top: 35%;
	left: 48.3%;
	cursor: pointer;
}

.cases {
	width: 3.4%;
	position: absolute;
	top: 45;
	right: 4%;
	cursor: pointer;
}

/***left and right slide menu***/

.who-we-are,
.what-we-do {
	width: 20%;
	line-height: 30px;
	height: 30px;
	position: absolute;
	z-index: 10;
	left: -8%;
	top: 45%;
	color: #1b2030;
	font-size: 14px;
	text-align: center;
	font-weight: 700;
	/*transform: rotate(90deg);*/
	cursor: pointer;
	transition: all linear 0.6s;
}

.slide-line {
	position: absolute;
	left: 50%;
	top: 70%;
	width: 1px;
	height: 50px;
	margin: 3px auto 0;
	font-size: 0px;
	background: #fff;
	transform: translateY(3%);
	transition: all ease 0.8s;
}
.slide-line1 {
	position: absolute;
	left: 50%;
	top: -210px;
	width: 1px;
	height: 200px;
	margin: 3px auto 0;
	font-size: 0px;
	background: #fff;
	transform: translateY(-100px);
	transition: all ease 0.8s;
	opacity: 0;
}
.what-we-do {
	left: auto;
	right: -8%;
	transform: rotate(-90deg);
}

.who-we-are a,
.what-we-do a {
	color: #fff;
}

.who-we-are .slide-line.active {
	transition: all ease 0.8s;
	transform: translateY(-110%);
}

.what-we-do:hover,
.who-we-are:hover {
	color: #fff;
}
.what-we-do:hover a,
.who-we-are:hover a{
	color: #fff;
}
.what-we-do .slide-line.active,
.who-we-are .slide-line.active {
	transition: all ease 0.8s;
	transform: translateY(50px);
	background: #fff;
}
.what-we-do .slide-line1.active,
.who-we-are .slide-line1.active {
	transition: all ease 0.8s;
	transform: translateY(0px);
	background: #fff;
	opacity: 1;
}

/***middle**/
@media only screen and (max-width: 1024px) {
	.logo {
		width: 6%;
	}
	.menu {
		width: 4.5%;
	}
	.cases {
		width: 4.5%;
	}
}


/***middle portrait***/

@media only screen and (max-width: 768px) and (orientation: portrait) {
	.logo {
		width: 8%;
	}
	.menu {
		width: 6.5%;
	}
	.cases {
		width: 6.5%;
	}
}


/***small**/

@media only screen and (max-width: 576px) and (-webkit-min-device-pixel-ratio:2) {
	.logo {
		width: 18%;
		position: absolute;
		left: 42.5%;
		cursor: pointer;
		bottom: 15%;
	}
	.menu {
		width: 13.4%;
		position: absolute;
		bottom: 0;
		left: 5%;
		cursor: pointer;
	}
	.cases {
		width: 13.4%;
	}
	.who-we-are,
    .what-we-do{
    	display: none;
    }
}

.main-menu {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	width: 100%;
	height: 100%;
	background: #34B5CB;
	transform: translateY(-100%);
	opacity: 0;
	transition: all ease 0.8s
}

.main-menu.active {
	transform: translateY(0);
	opacity: 1;
}

.menu-close {
	width: 40px;
	height: 40px;
	margin: 30px auto;
	color: #ffffff;
	font-family: "Arial";
	font-size: 40px;
	cursor: pointer;
	background: url(http://yun-image.elab-plus.com/images/projects/1_objects@2x_3.png) no-repeat 50% 50%;
	background-size: contain;
	transition: all ease 1s;
	transform: rotate(0);
}
.menu-close:hover{
	transform: rotate(360deg);
}
.menu-list {
	width: 100%;
	margin: 0 auto;
	margin-top: 10%;
}

.menu-list li {
	width: 100%;
	margin-bottom: 1%;
	color: #fff;
	font-size: 40px;
	font-weight: 700;
	text-align: center;
	letter-spacing: 4.689653px;
	font-family: 'AritaHeiti';
}

.menu-list li small {
	width: 100%;
	display: block;
	font-size: 16px;
}

.menu-list li a {
	color: #fff;
}

.slider{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	z-index: 30;
}

.slider ul{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
/****inner slider***/
.inslider{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	z-index: 30;
}

.inslider ul{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

@media only screen and (max-width: 576px) and (-webkit-min-device-pixel-ratio:2) {
	.menu-close {
		margin-left: 5%;
	}
	.menu-list li {
		width: 95%;
		padding-left: 5%;
		text-align: left;
		margin-bottom: 5%;
		font-size: 7vw;
	}
	.logo {
		width: 18%;
		position: absolute;
		left: 42.5%;
		cursor: pointer;
	}
	.menu {
		width: 13.4%;
		position: absolute;
		top: 35%;
		left: 3%;
		cursor: pointer;
	}
	.cases {
		width: 13.4%;
	}
	.shuzi p{
		margin-bottom: 7%;
	}
	.shuzi strong {
        font-size: 1.5rem;
        position: relative;
    }
    .shuzi strong sup{
    	font-size: 1rem;
    	position: absolute;
    	right: -21%;
    	top: -19%;
    }
}