elab/css/style.css

@charset "utf-8";

/*****common****/
html,
body {
	background: #fff;
	font-family: "AritaHeiti";
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}
::-webkit-scrollbar{
	width: 0;
}
.page {
	width: 100%;
	height: 100%;
	/*max-width: 1440px;*/
	/*max-height: 1024px;*/
	position: relative;
	margin: 0 auto;
	background: #fff;
	overflow: hidden;
	/*opacity: 0;*/
}

.inner-icon {
	width: 100%;
	position: relative;
	z-index: 1;
}
.slider-img{
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
	display: none;
}
.slider-img:nth-child(1){
	display: block;
}
.hideimg{
	opacity: 0;
}
.full {
	width: 100%;
	background: #4d9bbf;
	padding-top: 20px;
}
.none{
	display: none;
}
.small-line{
	display: none;
}
.big-line{
	display: block;
	width: 100%;
	height: 30px;
	background: none;
	font-size: 0;
}

.loading{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99999;
	overflow: hidden;
}
.loading iframe{
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: none;
	padding: 0;
	margin: 0;
}
/****top menu****/
#menuLayer{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	background: none;
}
.top-menu {
	width: 100%;
	padding: 20px 0;
	height: 24px;
	font-size: 0;
	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;*/
}

#menuLayer .top-menu{
	opacity: 1;
}

.logo {
	width: 4.7%;
	position: absolute;
	top: 32%;
	left: 4%;
	cursor: pointer;
}

.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;
}

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

.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);
	position: relative;
    z-index: 10;
}
.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;
}
#index{
	z-index: 10;
}
.index-body {
	width: 92%;
	height: 87%;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
	z-index: 10;
	background: #fff;
}
.slideCanvas{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: #fff;
}
.slider,
.small-slider {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	z-index: 30;
}

.slider ul,
.slider ul li{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.link-box {
	width: 100%;
	position: absolute;
	z-index: 5;
	left: 0;
	bottom: 10%;
	text-align: center;
}

.slider-links {
	color: #202020;
	font-size: 18px;
	background: #fff;
	border: 2px solid #202020;
	border-radius: 20px;
	padding: 5px 2.5%;
	font-weight: 700;
}
.slider-title{
	width: 100%;
	text-align: center;
	position: absolute;
	left: 0;
	top: 43%;
	font-size: 60px;
	font-weight: 300;
	color: #fff;
	z-index: 10;
}
/*.slider ul li:nth-child(2) .slider-title{
	color: #000;
}
.slider ul li:nth-child(3) .slider-title{
	color: #fff;
}*/

.small-slider {
	display: none;
}


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

.who-we-are,
.what-we-do {
	width: 20%;
	line-height: 30px;
	height: 30px;
	position: absolute;
	z-index: 15;
	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: #1b2030;
	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: #1b2030;
	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: #1B2030;
}

.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;
}

.wave-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 46%;
	height: 100%;
	z-index: 1;
	transition: all ease 1.2s;
}
.wave-bg-inner1,
.wave-bg-inner2{
	width: 70%;
	height: 400%;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 5;
}
.wave-bg-inner2{
	z-index: 10;
}
#leftWave {
	/*background: #5aa8c2;url(http://yun-image.elab-plus.com/images/index/1_objects_7.png) repeat-y left top;
	background-size: 50% 100%;*/
	background-image: linear-gradient(to right, #5aa8c2 80%, #fff 80%);
	transform: translateX(-100%);
}
#leftWave .wave-bg-inner1{
	background: url(http://yun-image.elab-plus.com/images/wave-top.png) no-repeat right top;
	background-size: 30% 100%;
	-webkit-animation: move_wave 12s linear 0s infinite;
	animation: move_wave 12s linear 0s infinite;
}
#leftWave .wave-bg-inner2{
	background: url(http://yun-image.elab-plus.com/images/wave-mid.png) no-repeat right top;
	background-size: 30% 100%;
	-webkit-animation: move_wave 12s linear 3s infinite;
	animation: move_wave 12s linear 3s infinite;
}
#rightWave {
	left: auto;
	right: 0;
	/*background: url(http://yun-image.elab-plus.com/images/index/1_objects_6.png) repeat-y right top;
	background-size: 100% 100%;*/
	background-image: linear-gradient(to left, #1b2030 80%, #fff 80%);
	transform: translateX(100%);
}
#rightWave .wave-bg-inner1,
#rightWave .wave-bg-inner2{
	width: 70%;
	height: 500%;
	position: absolute;
	right: auto;
	left: 0;
	top: -10%;
	z-index: 5;
}
#rightWave .wave-bg-inner1{
	background: url(http://yun-image.elab-plus.com/images/wave-top-1.png) no-repeat left top;
	background-size: 30% 100%;
	-webkit-animation: move_wave 12s linear 0s infinite;
	animation: move_wave 12s linear 0s infinite;
}
#rightWave .wave-bg-inner2{
	background: url(http://yun-image.elab-plus.com/images/wave-mid-1.png) no-repeat left top;
	background-size: 30% 100%;
	-webkit-animation: move_wave 12s linear 3s infinite;
	animation: move_wave 12s linear 3s infinite;
}

#leftWave.active,
#rightWave.active {
	transform: translateX(0);
}
@keyframes move_wave {
    0% {
        transform: translateY(0) translateZ(0) scaleX(1);
    }
    25% {
        transform: translateY(-30%) translateZ(0) scaleX(0.88);
    }
    50% {
        transform: translateY(-60%) translateZ(0) scaleX(1);
    }
    75% {
        transform: translateY(-30%) translateZ(0) scaleX(0.88);
    }
    100% {
        transform: translateY(0) translateZ(0) scaleX(1);
    }
}

.footer {
	width: 92%;
	height: 30px;
	line-height: 30px;
	margin: 8px auto;
	font-size: 0;
	text-align: justify;
	position: relative;
	z-index: 10;
}

.footer div {
	width: 50%;
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	text-align: left;
	transition: all ease 0.8s;
}

.footer div:nth-child(2) {
	text-align: right;
	width: 50%;
}

.footer .left.active,
.footer .right.active {
	color: #fff;
}


/***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%;
	}
	.index-body {
		height: 88%;
	}
	.slider-title{
		font-size: 30px;
	}
}


/***small**/

@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%;
	}
	.index-body {
		height: 	calc(100% - 98px);
	}
	.slider,
	.unslider {
		/*display: none;*/
	}
	.slider-title {
		top: 28%;
		font-size: 5rem;
	}
	.small-slider {
		/*display: block;*/
		display: none;
	}
	.who-we-are,
	.what-we-do {
		display: none;
	}
	.footer .left {
		width: 100%;
		text-align: center;
		line-height: 140%;
	}
	.footer .right {
		display: none;
	}
	.mobile-display {
        visibility: visible !important;
    }
    .mobile-hide {
        display: none !important;
    }
}

/*****main for who we are****/
.pageLayer{
	z-index: 200;
	-webkit-overflow-scrolling: touch;
	overflow-y: scroll;
}
.scroll-wrapper {
	-webkit-overflow-scrolling: touch;
	overflow-y: scroll;

	/* important:  dimensions or positioning here! */
}
.whoWeAre{
	width: 100%;
	height: 100%;
	background: #1b2030;
	overflow-x: hidden;
	overflow-y: auto;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 210;
	transform: translateX(-100%);
	transition: all ease 1s;
	line-height: 0;
    font-size: 0;
}
.whoWeAre.in{
	/*animation: slideInLeft 1s linear 0s forwards;*/
	transform: translateX(0);
}
.black-mask{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
	background: #1b2030;
}
.whoWeAre.in .black-mask{
	animation: slideOutRight 1s linear 1.2s forwards;
}
.whoWeAre iframe{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
}

/*****main for what we do****/
.whatWeDo{
	width: 100%;
	height: 100%;
	background: #1b2030;
	overflow-x: hidden;
	overflow-y: auto;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 210;
	transform: translateX(100%);
	transition: all ease 1s;
	line-height: 0;
    font-size: 0;
}
.whatWeDo .black-mask{
	background: #4d9bbf;
}
.whatWeDo.in{
	/*animation: slideInRight 1s linear 0s forwards;*/
	transform: translateX(0);
}
.whatWeDo.in .black-mask{
	animation: slideOutLeft 1s linear 1.2s forwards;
}
.whatWeDo iframe{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
}

/*****main for contacts****/
.contactLayer{
	width: 100%;
	height: 100%;
	background: #1b2030;
	overflow-x: hidden;
	overflow-y: auto;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 210;
	display: none;
	line-height: 0;
    font-size: 0;
}

/*****main for contacts****/
.careersLayer{
	width: 100%;
	height: 100%;
	background: #1b2030;
	overflow-x: hidden;
	overflow-y: auto;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 210;
	display: none;
	line-height: 0;
    font-size: 0;
}

/*****main for projects****/
.projectsLayer{
	width: 100%;
	height: 100%;
	background: #1b2030;
	overflow-x: hidden;
	overflow-y: auto;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 210;
	display: none;
	line-height: 0;
    font-size: 0;
}
.projectsLayer.in{

}

/*****contact****/

#contact {
	background: #1B2030;
}

#contact .small-slider {
	display: block;
	background: url(http://yun-image.elab-plus.com/images/contact/1_objects@2x_6.png) no-repeat top center;
	background-size: cover;
}

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

#contact .slide-line {
	background: #fff;
}

.contact-title {
	width: 100%;
	top: 43%;
	font-size: 108px;
	text-align: center;
	position: absolute;
	left: 0;
	color: #fff;
	z-index: 10;
	font-weight: 300;
}

.contact-list {
	width: 100%;
	text-align: center;
	font-size: 0;
	position: absolute;
	left: 0;
	bottom: 5%;
	padding: 20px 0;
	z-index: 10;
}

.list-item {
	display: inline-block;
	width: 30%;
	vertical-align: top;
}

.list-item p {
	margin: 10px auto;
}

.list-item p,
.list-item a {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
}

.contact-icon {
	height: 80px;
}

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

@media only screen and (max-width: 576px) and (-webkit-min-device-pixel-ratio:2) {
	.contact-title {
		top: 43%;
		font-size: 18vw;
	}
	.list-item p,
	.list-item a {
		font-size: 12px;
	}
	#contact .footer {
		display: none;
	}
}


/*****careers*****/

#careers {
	height: auto;
}
#careers .top-menu{
	margin-top: 0;
}
#careers .who-we-are,
#careers .what-we-do {
	top: 520px;
}

.page-parts {
	width: 100%;
	position: relative;
	z-index: 5;
	min-height: 300px;
}

.parts-title {
	width: 78.33%;
	margin: 300px 10.8%;
	position: relative;
	z-index: 10;
}

.parts-img {
	width: 720px;
	position: absolute;
	right: 10%;
	top: 1%;
	z-index: 7;
}

.parts2,#parts2 {
	background: #1b2030;
}

.future {
	width: 100%;
	text-align: center;
	padding: 500px 0;
	color: #fff;
	font-size: 40px;
	font-weight: 300;
}

.future .title {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: 1vw;
}

.future .line {
	width: 15%;
	height: 10px;
	margin: 10px auto 30px;
	display: block;
	background: #3facbf;
}

.ouer-values {
	width: 50%;
	position: absolute;
	z-index: 10;
	left: 50%;
	bottom: 5%;
	font-size: 30px;
	font-weight: 300;
	color: #fff;
	text-align: left;
}

.ouer-values .title {
	font-size: 58px;
	font-weight: 700;
	padding-bottom: 20px;
}

#imgForParts2 {
	width: 450px;
	top: auto;
	bottom: -32%;
	left: 10%;
}

.parts3 {
	margin: 0 auto;
	background: url(http://yun-image.elab-plus.com/images/join/1_objects@2x_7.png) no-repeat top center;
	background-size: cover;
	z-index: 4;
}

.ouer-rules {
	width: 40%;
	padding: 280px 0 150px 50%;
	font-size: 30px;
	font-weight: 300;
	color: #fff;
	text-align: left;
	line-height: 180%;
}

.ouer-rules .title {
	font-size: 58px;
	font-weight: 700;
	padding-bottom: 20px;
}

.parts4 {
	margin: 0 auto;
	background: url(http://yun-image.elab-plus.com/images/join/1_objects@2x_2.png) no-repeat top center;
	background-size: cover;
	z-index: 4;
}

.parts4 .parts-title {
	width: 57.36%;
	margin: 200px 21.319% 50px;
}

.ouer-find {
	width: 100%;
	text-align: center;
	padding: 50px 0 100px;
	color: #fff;
	font-size: 30px;
	font-weight: 300;
	line-height: 50px;
}

.view-jobs {
	width: 100%;
	text-align: center;
	padding: 50px 0 100px;
	color: #fff;
	font-size: 18px;
	font-weight: 300;
}

.view-jobs span {
	padding: 5px 30px;
	color: #202020;
	background: #fff;
	border-radius: 20px;
	font-weight: 700;
	cursor: pointer;
}

/*****jobs list layer*****/
.jobs-layer{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	background: #fff;
	display: none;
}
.close-bar{
	width: 100%;
	height: 40px;
	line-height: 40px;
	background: url(http://yun-image.elab-plus.com/images/join/1_objects@2x_3.png) no-repeat 50% 50%;
	background-size: contain;
	cursor: pointer;
}
.desc{
	width: 92%;
	margin: 10px auto 20px;
	text-align: left;
	color: #2a2a2a;
	font-size: 30px;
	font-weight: 300;
}
.tab{
	width: 92%;
	margin: 5px auto 0;
    line-height: 38px;
    padding-top: 10px;
    font-size: 0;
}
.tab-cell{
	display: inline-block;
	width: 20%;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	position: relative;
	z-index: 10;
}
.tab div:nth-child(1){
	text-align: left;
}
.tab-head{
	background: #3facbf;
	color: #fff;
	text-align: center;
}
.tab-head.tab div:nth-child(1){
	text-align: center;
}
.tab-body{
	width: 100%;
	height: 65%;
	overflow-x: hidden;
	overflow-y: auto;
}
.tab-body .inner-tab{
	border-top: 1px solid #2a2a2a;
}
.tab-body .inner-tab:nth-child(1){
	border-top: none;
}
.list-arrow{
	width: 18px;
	height: 18px;
	float: right;
	margin-top: 3.5%;
	background: url(http://yun-image.elab-plus.com/images/join/2_objects@2x.png) no-repeat 50% 50%;
	background-size: contain;
	cursor: pointer;
	transition: all ease 0.8s
}
.list-arrow.open{
	background: url(http://yun-image.elab-plus.com/images/join/2_objects@2x_1.png) no-repeat 50% 50%;
	background-size: contain;
}
.tab .detail{
	width: 60%;
/*	line-height: 0;
	padding-bottom: 20px;*/
	height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	transition: all ease 1s;
	transform-origin: top center;
	position: relative;
	z-index: 5;
}
.tab .detail::-webkit-scrollbar{
	width: 0;
}
/*.tab .detail::-webkit-scrollbar-thumb{
	width: 5px;
	background: #ddd;
}*/
.tab .detail .job-inner{
	width: 100%;
	color: #2a2a2a;
	font-size: 18px;
	line-height: 150%;
	opacity: 0;
	transition: all ease 1s;
}
.tab .detail.show {
	height: 250px;
}
.tab .detail.show .job-inner{
    animation: fadeIn 1s ease 0.5s forwards;
}
.tab .detail .b{
	font-weight: 700;
	margin-top: 20px;
}
.tab-footer{
	width: 92%;
	margin: 10px auto 30px;
    font-size: 0;
}
.tab-footer .list-item{
	width: 33%;
}
.tab-footer .list-item,
.tab-footer .list-item a{
	font-size: 17px;
	color: #1b2030;
	vertical-align: bottom;
	font-weight: 700;
}
.tab-footer .list-item:nth-child(2){
	text-align: center;
}
.tab-footer .list-item:nth-child(3){
	text-align: right;
}
.tab-footer .contact-icon{
	width: 10%;
	height: auto;
	vertical-align: bottom;
	margin-right: 10px;
}

/***middle***/
@media only screen and (max-width: 1024px) {
	#imgForParts2 {
		left: 2%;
	}
}
/***middle portrait***/
@media only screen and (max-width: 768px) and (orientation: portrait) {
	.parts-img {
		right: -10%;
	}
	#imgForParts2 {
		left: -15%;
		bottom: -42%;
	}
	.future,.future .title {
		font-size: 35px;
	}
	.ouer-values,.ouer-rules,.ouer-find {
		font-size: 22px;
	}
	.ouer-values .title,.ouer-rules .title {
		font-size: 45px;
	}
	.view-jobs {
		font-size: 18px;
	}
	/****job list****/
    .desc{
    	font-size: 4vw;
    }
    .tab-footer .list-item, .tab-footer .list-item a{
    	font-size: 0;
    }
    .tab-footer .contact-icon{
    	width: 25%;
    }
    .tab-footer .list-item:nth-child(3) .contact-icon{
    	margin-right: 0;
    }
}

/****small****/
@media only screen and (max-width: 667px) and (-webkit-min-device-pixel-ratio:2) {
	.hidden-small{
		display: none;
	}
	.tab-cell{
		width: 33%;
	}
	.font0{
		font-size: 0;
	}
	.list-arrow{
		font-size: 2vw;
	}
	.parts-img {
		width: 90%;
		right: -10%;
	}
	.parts-title {
		margin: 150px 10.8%;
	}
	#careers .who-we-are,
	#careers .what-we-do {
		top: 520px;
		display: none;
	}
	#imgForParts2 {
		width: 60%;
		left: -15%;
		bottom: -33%;
	}
	.future{
		padding: 300px 0;
	}
	.future{
		font-size: 4vw;
	}
	.future .title {
		font-size: 5vw;
	}
	.future .line{
		width: 25%;
        height: 5px;
	}
	.ouer-rules{
		padding: 170px 0 100px 50%;
	}
	.ouer-values,.ouer-rules,.ouer-find {
		font-size: 3vw;
	}
	.ouer-values .title,.ouer-rules .title {
		font-size: 5vw;
		padding-bottom: 10px;
	}
	.view-jobs {
		font-size: 18px;
	}
	.parts4 .parts-title{
		margin: 100px 21.319% 50px;
	}
	.ouer-find {
        line-height: 30px;
        padding: 50px 0;
    }
    /****job list****/
    .desc{
    	font-size: 4vw;
    }
    .tab-footer .list-item, .tab-footer .list-item a{
    	font-size: 0;
    }
    .tab-footer .contact-icon{
    	width: 25%;
    }
    .tab-footer .list-item:nth-child(3) .contact-icon{
    	margin-right: 0;
    }
}


/******projects******/
#projects,#doDetail{
	background: #1B2030;
	height: auto;
}
#projects .who-we-are,
#projects .what-we-do{
	top: 400px;
}
#projects .who-we-are a,
#projects .what-we-do a {
	color: #fff;
}
#doDetail .who-we-are,
#doDetail .what-we-do{
	top: 400px;
}
#doDetail .who-we-are a,
#doDetail .what-we-do a {
	color: #fff;
}
.project-list{
	width: 92%;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 40px;
}
.project-item{
	width: 100%;
	margin-bottom: 30px;
	position: relative;
}
.project-item .inner-icon{
	width: 100%;
	height: 340px;
	object-fit: cover;
}
.item-inner{
	width: 100%;
	text-align: center;
	color: #fff;
	position: absolute;
	left: 0;
	z-index: 10;
	font-weight: 700;
}
.item-desc{
	top: 10%;
}
.item-desc span{
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 30px;
	padding-bottom: 10px;
	border-bottom: 1px solid #fff;
	padding-left: 30px;
}
.item-title{
	top: 40%;
	font-size: 42px;
	letter-spacing: 8px;
}
.item-title p{
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 2.46px;
}
.item-link{
	bottom: 10%;
}
.item-link a{
	font-size: 12px;
	color: #202020;
	line-height: 38px;
	padding: 8px 30px;
	background: #fff;
	border-radius: 20px;
}
/**project -1**/
.project-item-inner{
	width: 100%;
	margin-bottom: 30px;
	position: relative;
}
.project-item-inner .inner-icon{
	width: 100%;
	height: -webkit-fill-available;
	object-fit: cover;
}
.project-item-inner .close-bar{
	position: absolute;
	left: 0;
	top: 1%;
	z-index: 10;
	background: url(http://yun-image.elab-plus.com/images/projects/1_objects@2x_3.png) no-repeat 50% 50%;
	background-size: contain;
    transition: all linear 0.5s;
}
.close-bar:hover{
	transform: rotate(90deg);
}
.project-item-inner .item-title{
	top: 30%;
}
.project-item-inner .item-link a{
	font-size: 18px;
	color: #fff;
	line-height: 38px;
	padding: 8px 40px;
	background: #3facbf;
	border-radius: 20px;
	margin: 0px 20px;
}

/****project detail****/
#projectDetail{
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 0;
	background: #1b2030;
}
.project-item-detail{
	width: 100%;
	margin-bottom: 0;
	position: relative;
}
.project-item-detail .inner-icon{
	width: 100%;
	height: 800px;
	object-fit: cover;
}
.project-item-detail .close-bar{
	position: absolute;
	left: 0;
	top: 1%;
	z-index: 20;
	background: url(http://yun-image.elab-plus.com/images/projects/1_objects@2x_3.png) no-repeat 50% 50%;
	background-size: contain;
    transition: all linear 0.5s;
}
.project-item-detail .item-desc{
	top: 22%;
}
.project-item-detail .item-desc span{
	letter-spacing: 90px;
	padding-left: 90px;
	border-bottom: none;
}
.project-item-detail .item-title{
	font-size: 92px;
	top: 36%;
}
.project-item-detail .item-title p{
	letter-spacing: 32.4px;
	font-size: 26px;
}
.project-item-detail .item-link{
	bottom: 6%;
}
.project-item-detail .item-link a{
	font-size: 18px;
	color: #fff;
	line-height: 38px;
	padding: 8px 40px;
	background: #3facbf;
	border-radius: 20px;
	margin: 0px 20px;
}
.project-item-detail .item-icon{
	width: 100%;
	left: 0;
	top: 68%;
	z-index: 10;
	text-align: center;
}
.project-item-detail .item-icon img{
	width: 2%;
	animation: upAndDown 1s linear infinite;
}
.info-list{
	width: 80%;
	margin: 0 auto;
	padding: 60px 0;
	text-align: center;
	font-size: 0;
}
.info-list li{
	width: 20%;
	display: inline-block;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 30px;
}
.info-list li small{
	font-weight: 300;
}
#parts3 .inner-icon{
	/*height: auto;*/
	height: 1024px;
	z-index: 1;
}
.inner-mask{
	width: 100%;
	height: 100%;
	background: rgba(27,32,48,0.95);
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
}
.number-line{
	width: 70%;
	font-size: 0;
	margin: 100px auto 0 25%;
	max-width: 1008px;
}
.number-box{
	display: inline-block;
	width: 60%;
	text-align: left;
	font-size: 300px;
	font-weight: 300;
	font-family: 'DINCond-Light';
	color: #fff;
	position: relative;
	vertical-align: top;
}
.line1 .number-box:nth-child(1){
	width: 40%;
}
.line2 .number-box:nth-child(1){
	width: 40%;
}
.line1 .w-right{
	font-size: 50px;
	text-align: right;
	padding-right: 40%;
	margin-top: -30%;
}

.line1 .month{
	padding-right: 75%;
	margin-top: -20%;
}
.line1 .w-left{
	font-size: 28px;
	text-align: left;
	margin-top: 30px;
}
.line1 .circle{
	padding-left: 3%;
	/*margin-top: 14%;*/
}
.line2{
	/*margin-top: -70px;*/
}
.line2 .w-right{
	font-size: 28px;
	text-align: right;
	margin-top: -23%;
}
.line2 .percent{
	font-family: AritaHeiti;
	width: 5%;
	font-size: 50px;
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 12%;
}
.line2 .p2{
	left: 47%;
	top: 15%;
}
.line2 .rate{
	padding-right: 8%;
}
.line2 .trade{
	    margin-right: 10px;
    padding-right: 18%;
    margin-top: -15.5%;
}
/******parts4**/
#parts4 .inner-icon{
	position: relative;
	height: 1024px;
	object-position: 10%;
}
.part-icon{
	width: 9.64%;
	position: absolute;
	z-index: 2;
	left: 3%;
	top: 3%;
}
#parts4 .title{
	font-size: 40px;
	color: #fff;
	width: 100%;
	position: absolute;
	text-align: center;
	left: 0;
	top: 32%;
	font-weight: 700;
	z-index: 10;
	letter-spacing: 2.142858px;
}
#parts4 .desc{
	font-size: 35px;
	color: #fff;
	width: 100%;
	text-align: center;
	position: absolute;
	left: 0;
	top: 40%;
	font-weight: 300;
	z-index: 10;
	letter-spacing:3px;
	padding-left: 3px;
}
#parts4 .parts-links,#parts5 .parts-links{
	color: #202020;
	font-size: 18px;
	background: #fff;
	border-radius: 20px;
	padding: 8px 2.5%;
	font-weight: 700;
}

/**parts5***/
#parts5{
	background: #1b2030;
}
#parts5 .inner-icon{
	height: auto;
	position: relative;
	margin-top: 427px;
	z-index: 1;
}
#parts5 .words1{
	position: absolute;
	left: 10%;
	top: 8%;
	z-index: 5;
	font-size: 40px;
	font-weight: 700;
	color: #fff;
	text-align: left;
}
#parts5 .words1 p{
	font-size: 24px;
	font-weight: 300;
	margin-top: 10px;
}
#parts5 .words2{
	width: 32%;
	position: absolute;
	left: 56%;
	top: 7.2%;
	z-index: 5;
	font-size: 25px;
	font-weight: 300;
	color: #fff;
	text-align: left;
	line-height: 52px;
}

/**parts6***/
#parts6{
	background: #1b2030;
	height: 774px;
}
#parts6 .words1{
	width: 51%;
	position: absolute;
	left: 10%;
	top: 15%;
	z-index: 5;
	font-size: 40px;
	font-weight: 700;
	color: #fff;
	text-align: left;
}
#parts6 .words1 p{
	font-size: 24px;
	font-weight: 300;
	margin-top: 10px;
}
#parts6 .words1 p.about{
	margin-top: 70px;
	font-family: "PingFang SC";
    font-size: 25px;
    font-weight: 300;
    line-height: 50px;
    letter-spacing: 1.5px;
}
.about-link{
	width: 100%;
	margin-top: 70px;
	text-align: left;
}
#parts6 .parts-links{
    color: #202020;
    font-size: 18px;
    background: #fff;
    border-radius: 20px;
    padding: 10px 5%;
    font-weight: 700;
}
.dm-app{
	width: 20%;
	max-height: 592px;
	object-fit: contain;
	position: absolute;
	top: 14%;
	right: 5%;
	z-index: 5;
}

/**parts7***/
#parts7{
	background: #3facbf;
	height: 250px;
}
.top-line{
	widows: 100%;
	height: 5px;
	background: #fff;
	font-size: 0;
	line-height: 5px;
}
.project-name{
	width: 30%;
	position: absolute;
	left: 5%;
	top: 30%;
	color: #ffffff;
    font-size: 64px;
    font-weight: 700;
    line-height: 81px;
    letter-spacing: 4px;
}
.project-name p{
    font-family: 'aven';
    font-size: 26px;
    font-weight: 400;
    line-height: 33px;
    letter-spacing: 15.1px;
}

.project-qrcode{
	width: 11%;
	position: absolute;
	right: 7%;
	top: 15%;
	color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: 7px;
}
.project-qrcode .qrcode{
	width: 100%;
	max-height: 158px;
	object-fit: contain;
}

/***middle portrait***/
@media only screen and (max-width: 768px) and (orientation: portrait) {
	.project-item-detail .item-desc span{
		letter-spacing: 60px;
		padding-left: 60px;
	}
	.project-item-detail .item-title{
		font-size: 10vw;
		letter-spacing: 5px;
	}
	.project-item-detail .item-title p{
		font-size: 5vw;
		letter-spacing: 9px;
	}
	.project-item-detail .item-icon{
		top: 63%;
	}
	.project-item-detail .item-icon img{
		width: 5%;
	}
}

/*****small*****/
@media only screen and (max-width: 667px) and (-webkit-min-device-pixel-ratio:2) {
	.item-desc span{
		letter-spacing: 20px;
		padding-left: 20px;
	}
	.project-list{
		margin-bottom: 0;
	}
	.project-item-inner{
		margin-bottom: 15px;
	}
	.small-line{
		display: block;
		width: 100%;
		height: 30px;
		background: none;
		font-size: 0;
	}
	.big-line{
		display: none;
	}
	.project-item-detail .item-desc span{
		letter-spacing: 20px;
		padding-left: 20px;
	}
	.project-item-detail .item-title{
		font-size: 10vw;
		letter-spacing: 5px;
		top: 42%;
	}
	.project-item-detail .item-title p{
		font-size: 5vw;
		letter-spacing: 9px;
	}
	.project-item-detail .item-icon{
		top: 60%;
	}
	.project-item-detail .item-icon img{
		width: 8%;
	}
	.info-list{
		width: 100%;
	}
	.info-list li{
		width: 33%;
		font-size: 16px;
		margin-bottom: 20px;
	}
}


/****what we do******/
#whatWeDo{
	width: 100%;
	background: #1b2030;
	max-width: none;
	overflow-x: hidden;
	overflow-y: auto;
}
#whatWeDo .project-list{
	width: 100%;
	margin-bottom: 0;
}
#whatWeDo .inner-icon{
	height: auto;
}
#do1{
	text-align: left;
	line-height: 0;
	overflow: hidden;
}
.img1{
	width: 100%;
    margin: 300px auto;
	position: relative;
	z-index: 1;
}
.img2{
	width: 35.9%;
	left: 9%;
	top: 17px;
	position: absolute;
	z-index: 2;
}
#do1 .words1{
	position: absolute;
	z-index: 5;
    width: 100%;
    left: 0;
    top: 42%;
    color: #ffffff;
    font-size: 75px;
    font-weight: 300;
    line-height: 55px;
    text-align: center;
    letter-spacing: 14px;
    padding-left: 14px;
}
#do1 .words1 strong{
	display: block;
	width: 100%;
	font-weight: 700;
	letter-spacing: 5px;
	margin-top: 60px;
    line-height: 20px;
}
#do1 .words1 span{
	width: auto;
	margin: 0 auto;
    font-size: 17px;
    font-weight: 300;
    line-height: 18px;
    text-align: center;
    letter-spacing: 2px;
    padding-bottom: 5px;
    border-bottom: 1px  solid  #fff;
}
#do1 .words2{
	position: absolute;
	z-index: 5;
    width: 32%;
    left: 47%;
    bottom: 5%;
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    line-height: 100%;
}
#do1 .words2 p{
	font-size: 20px;
	font-weight: 300;
	margin-top: 20px;
}

#do2 .words1,
#do4 .words1{
	position: absolute;
	z-index: 5;
    width: 100%;
    left: 0;
    top: 40%;
    color: #ffffff;
    font-size: 72px;
    font-weight: 700;
    letter-spacing: 14px;
    padding-left: 14px;
    text-shadow: 0px 30px 60px 0px rgba(0,0,0,0.5);
}
#do2 .words1 p,
#do4 .words1 p{
	font-size: 43px;
	font-weight: 400;
	letter-spacing: 7px;
}
#do3 {
	text-align: left;
}
#do3 .inner-icon{
	width: 50%;
	margin-left: 0;
	height: auto;
}
#do3 .words1{
	position: absolute;
	z-index: 5;
    width: 43%;
    left: 3%;
    top: 40%;
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    text-align: right;
    line-height: 51px;
}
#do3 .words2{
	position: absolute;
	z-index: 5;
    width: 43%;
    right: 4%;
    top: 39%;
    color: #ffffff;
    font-size: 20px;
    font-weight: 300;
    line-height: 180%;
}
#do5 {
	text-align: left;
}
#do5 .inner-icon{
	width: 50%;
	margin-left: 0;
	height: auto;
}
#do5 .words1{
	position: absolute;
	z-index: 5;
    width: 43%;
    left: 3%;
    top: 40%;
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    text-align: right;
    line-height: 51px;
}
#do5 .words2{
	position: absolute;
	z-index: 5;
    width: 43%;
    right: 4%;
    top: 39%;
    color: #ffffff;
    font-size: 20px;
    font-weight: 300;
    line-height: 180%;
}

@media only screen and (max-width: 1280px){
	#do1 .words1{
		line-height: 35px;
		top: 41%;
	}
	#do1 .words2{
        width: 43%;
    }
    #do1 .words2 p{
    	font-size: 20px;
    }
    #do3 .words1{
        width: 47%;
        left: 0;
        font-size: 30px;
    }
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
	.who-we-are,
	.what-we-do{
		display: none;
	}
	.img2{
		top: auto;
		bottom: 15%;
	}
	#do1 .words1{
		font-size: 60px;
	}
	#do1 .words1 span{
		letter-spacing: 0px;
	}
	#do1 .words1 strong{
		margin-top: 40px;
		margin-bottom: 10px;
	}
	#do1 .words2{
		width: 50%;
		font-size: 20px;
	}
	#do2 .words1, #do4 .words1 {
    position: absolute;
    z-index: 5;
    width: 90%;
    left: 5%;
    top: 30%;
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 14px;
    padding-left: 14px;
}
    #do3 .words1,#do5 .words1{
    	font-size: 23px;
    	top: 32%;
    }
    #do3 .words2{
    	font-size: 17px;
    	top: 30%;
    }
    #do5 .words2{
    	font-size: 17px;
    	top: 33%;
    }
}


/******do detail******/
#doDetail .project-item-detail .inner-icon{
	height: auto;
	/*max-height: 1024px;*/
	height:-webkit-fill-available;
}
#doDetail .project-item-detail .item-title p{
	letter-spacing: 6px;
    font-size: 29px;
    font-weight: 700;
}
#doDetail .project-item-detail .item-icon{
	top: 64%;
}
.future-icon-box{
	width: 100%;
	text-align: center;
}
.future-icon-box li{
	width: 30%;
	display: inline-block;
	font-size: 16px;
	font-weight: 300;
	line-height: 180%;
	vertical-align: top;
}
.future-icon{
	width: 42px;
}

#parts8{
	color: #fff;
}
#doDetail #parts8 .inner-icon{
	max-height: 294px;
}
#parts8 .words-box{
	width: 90%;
	position: absolute;
	left: 5%;
	top: 23%;
	text-align: left;
	z-index: 5;
}
#parts8 .words1{
	font-size: 120px;
	font-weight: 700;
	display: inline-block;
	vertical-align: top;
	font-family: 'DINCond';
}
#parts8 .words2{
	font-size: 18px;
	font-weight: 300;
	display: inline-block;
	/*margin-left: -2%;*/
    line-height: 36px;
    margin-top: 1.5%;
}
#parts8 .words2 strong{
	font-size: 40px;
	padding-bottom: 5px;
	font-weight: 700;
}

#parts9{
	color: #fff;
}
#doDetail #parts9 .inner-icon{
	height: 730px;
}
#doDetail #parts9 .inner-box .inner-icon{
	height: auto;
}
.inner-item{
	position: absolute;
	z-index: 10;
	font-size: 30px;
	font-weight: 700;
	text-align: left;
}
.inner-item small{
	display: block;
	font-size: 18px;
	font-weight: 300;
}
.inner-item div{
	display: inline-block;
	vertical-align: top;
}
.parts9-icon{
	width: 50px;
	height: 50px;
	object-fit: contain;
	vertical-align: top;
}
#innerItem1{
	left: 3%;
	top: 8%;
}
#innerItem2{
	right: 3%;
	top: 8%;
	text-align: right;
}
#innerItem3{
	left: 3%;
	bottom: 8%;
}
#innerItem4{
	right: 3%;
	bottom: 8%;
	text-align: right;
}
.inner-box{
	width: 47.5%;
	left: 26.25%;
	position: absolute;
	top: 23%;
	z-index: 10;
}
.box-item{
	width: 90%;
	position: absolute;
	left: 5%;
	top: 35%;
	font-size: 50px;
	line-height: 58px;
	font-weight: 700;
	letter-spacing: 1.72px;
}

#parts10{
	color: #fff;
	height: 294px;
	background: #1b2030;
}
#parts10 .words-box{
	width: 90%;
	position: absolute;
	left: 5%;
	top: 23%;
	text-align: left;
	z-index: 5;
}
#parts10 .words1{
	font-size: 120px;
	font-weight: 700;
	display: inline-block;
	vertical-align: top;
	font-family: 'DINCond';
}
#parts10 .words2{
	font-size: 18px;
	font-weight: 300;
	display: inline-block;
	/*margin-left: -1.5%;*/
	margin-top: 0.8%;
	line-height: 36px;
}
#parts10 .words2 strong{
	font-size: 40px;
	line-height: 220%;
	display: inline-block;
	font-weight: 700;
}

#parts11{
	font-size: 0;
	max-height: 730px;
}
.parts-box{
	width: 33.3%;
	display: inline-block;
	vertical-align: top;
	color: #fff;
	position: relative;
}
.parts-box:nth-child(3){
	width: 33.4%;
}
.parts-box .box-item{
	width: 80%;
	top: 25%;
	left: 10%;
	z-index: 10;
	text-align: left;
	font-size: 24px;
	line-height: 36px;
	font-weight: 700;
}
.parts-box .box-item small{
	font-size: 30px;
	line-height: 36px;
}
.parts-box .box-item strong{
	font-size: 50px;
	line-height: 58px;
	font-weight: 700;
}

/*****middle*****/
@media only screen and (max-width: 1024px){
	#doDetail .project-item-detail .item-title{
		font-size: 86px;
		line-height: 36px;
	}
	#doDetail .project-item-detail .item-title p{
		font-size: 39px;
		line-height: 116px;
	}
	.inner-box{
    	width: 58%;
    	left: 21%;
    	top: 35%;
    }
    .box-item{
    	top: 25%;
    }
	.parts-box .box-item{
		font-size: 20px;
		top: 20%;
	}
	.parts-box .box-item strong{
		font-size: 35px;
	}
}

/*****ipad and portrait*****/
@media only screen and (max-width: 768px) and (orientation: portrait) {
	#doDetail .project-item-detail .item-title{
		font-size: 54px;
		line-height: 36px;
	}
	#doDetail .project-item-detail .item-title p{
		font-size: 28px;
		line-height: 66px;
	}
	.future-icon {
        width: 38px;
    }
    #parts8 .words-box,
    #parts10 .words-box{
    	width: 90%;
    }
    #parts8 .words1,
    #parts10 .words1{
        font-size: 44px;
    }
    #parts8 .words2{
    	font-size: 16px;
    	margin-top: -7%;
        line-height: 26px;
    }
    #parts8 .words2 strong{
    	position: absolute;
    	left: 8%;
        top: 8%;
    	z-index: 5;
    	font-size: 36px;
    }
    #parts10 .words2{
    	line-height: 120%;
    	margin-top: -3%;
    }
    #parts10 .words2 strong{
    	position: absolute;
    	left: 9%;
        top: -19%;
    }

    #parts9 #innerItem1,#parts9 #innerItem3{
    	width: 46%;
    }
    .inner-item div{
    	display: block;
    	font-size: 4vw;
    }
    .inner-item small{
    	font-size: 3vw;
    }
    .inner-box{
    	width: 70%;
    	left: 15%;
    	top: 38%;
    }
    .box-item{
    	font-size: 6vw;
    	line-height: 150%;
    	top: 25%;
    }
    #innerItem2{
    	width: 43%;
    	top: 14.5%;
    }
    #innerItem2 div:nth-child(2){
    	position: absolute;
    	right: 0;
    	top: -36%;
    }
    #innerItem4{
    	width: 43%;
    	bottom: 12%;
    }
    #innerItem4 div:nth-child(2){
    	position: absolute;
    	right: 0;
    	top: -76%;
    }
	#parts11 .parts-box{
		width: 100%;
		max-height: 243px;
	}
	#parts11 .parts-box .inner-icon{
		height: 243px;
	}
	#parts11 .parts-box .box-item strong{
	    font-size: 24px;
    }
	#parts11 .parts-box .box-item span{
		display: none;
	}
}

/*****small*****/
@media only screen and (max-width: 768px){
	#doDetail .project-item-detail .item-title{
		font-size: 24px;
		line-height: 36px;
	}
	#doDetail .project-item-detail .item-title p{
		font-size: 12px;
		line-height: 36px;
	}
	.future-icon {
        width: 38px;
    }
    #parts8 .words-box,
    #parts10 .words-box{
    	width: 90%;
    }
    #parts8 .words1,
    #parts10 .words1{
        font-size: 44px;
    }
    #parts8 .words2,
    #parts10 .words2{
    	font-size: 16px;
    	margin-left: 1%;
    	margin-left: -6%;
    	margin-top: 5%;
    }
    /*#parts8 .words2 strong,
    #parts10 .words2 strong{
    	position: absolute;
    	left: 13%;
    	top: 7%;
    	z-index: 5;
    	font-size: 36px;
    }*/
    #parts10 .words2{
    	line-height: 120%;
    }
    #parts10 .words2 strong{
    	top: -88%;
    }
    #parts9 #innerItem1,#parts9 #innerItem3{
    	width: 46%;
    }
    .inner-item div{
    	display: block;
    	font-size: 4vw;
    }
    .inner-item small{
    	font-size: 3vw;
    }
    .inner-box{
    	width: 80%;
    	left: 10%;
    	top: 37%;
    }
    .box-item{
    	font-size: 6vw;
    	line-height: 150%;
    	top: 25%;
    }
    #innerItem2{
    	width: 43%;
    	top: 14.8%;
    }
    #innerItem2 div:nth-child(2){
    	position: absolute;
    	right: 0;
    	top: -41%;
    }
    #innerItem4{
    	width: 43%;
    	bottom: 11.1%;
    }
    #innerItem4 div:nth-child(2){
    	position: absolute;
    	right: 0;
    	top: -91%;
    }
	#parts11 .parts-box{
		width: 100%;
		max-height: 243px;
	}
	#parts11 .parts-box .inner-icon{
		height: 243px;
	}
	#parts11 .parts-box .box-item strong{
	    font-size: 24px;
    }
	#parts11 .parts-box .box-item span{
		display: none;
	}
}

/***do-damai****/
#parts12{
	height: 730px;
	font-size: 0;
}
#parts12 .left,
#parts12 .right{
	width: 50%;
	height: 100%;
	display: inline-block;
	position: relative;
}
#parts12 .left .inner-icon,
#parts12 .right .inner-icon{
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
	object-fit: cover;
	object-position: right bottom;
}
.parts-img-mask{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	background: rgba(0,0,0,0.5);
	color: #fff;
	font-weight: 300;
}
#parts12 .words1{
	width: 70%;
	margin: 15% auto 0 10%;
	font-size: 24px;
	text-align: left;
}
#parts12 .words1 p{
	font-size: 30px;
}
#parts12 .words1 strong{
	display: block;
	font-size: 50px;
	font-weight: 700;
	line-height: 58px;
	margin: 10px auto 50px 0;
}
#parts12 .btn-link{
	width: 100%;
	position: absolute;
	z-index: 10;
	left: 0;
	bottom: 18%;
	text-align: center;
}
#parts12 .btn-link a{
	background: #fff;
	font-size: 18px;
	color: #1b2030;
	padding: 10px 50px;
	border-radius: 20px;
	font-weight: 700;
}

#parts13{
	height: 730px;
	overflow: hidden;
}
#doDetail #parts13 .inner-icon{
	height: 100%;
}
#innerBg1{
	display: block;
}
.innerBg2{
	display: none;
}
#parts13 .words1{
	width: 100%;
	position: absolute;
	left: 0;
	top: 45%;
	z-index: 10;
	text-align: center;
	font-size: 30px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 1.2px;
	line-height: 48px;
}
#parts13 .links1,
#parts15 .links1{
	width: 160px;
    height: 50px;
    border: 3px solid #ffffff;
    background: #3facbf;
    color: #ffffff;
    position: absolute;
    left: 21%;
    bottom: 15%;
    z-index: 10;
    text-align: center;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 700;
    line-height: 50px;
}
#parts13 .links2,
#parts15 .links2{
	width: 160px;
    height: 50px;
    border: 3px solid #ffffff;
    background: #3facbf;
    color: #ffffff;
    position: absolute;
    right: 21%;
    bottom: 15%;
    z-index: 10;
    text-align: center;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 700;
    line-height: 50px;
}

/*****small*****/
@media only screen and (max-width: 768px){
	#innerBg1{
	    display: none;
    }
    #innerBg2{
	    display: block;
    }
	#parts13 .links1{
		left: 41%;
		width: 35%;
        bottom: auto;
        top: 10%;
        height: 40px;
        line-height: 40px;
	}
	#parts13 .links2{
		right: 41%;
		bottom: 10%;
		width: 35%;
        height: 40px;
        line-height: 40px;
	}
}

#parts14{
	color: #1b2030;
	height: 294px;
	background: #fff;
}
#parts14 .words-box{
	width: 90%;
	position: absolute;
	left: 5%;
	top: 23%;
	text-align: left;
	z-index: 5;
}
#parts14 .words1{
	font-size: 120px;
	font-weight: 700;
	display: inline-block;
	vertical-align: top;
	font-family: 'DINCond';
}
#parts14 .words2{
	font-size: 18px;
	font-weight: 300;
	display: inline-block;
	/*margin-left: -1.5%;*/
	margin-top: 0.8%;
	line-height: 36px;
}
#parts14 .words2 strong{
	font-size: 40px;
	line-height: 220%;
	display: inline-block;
	font-weight: 700;
}

#parts15 .words1{
	width: 100%;
	position: absolute;
	left: 0;
	top: 7%;
	z-index: 10;
	text-align: center;
	font-size: 24px;
	font-weight: 300;
	color: #fff;
	letter-spacing: 0.8px;
	line-height: 36px;
}
#parts15 .words1 strong{
	display: block;
	margin-bottom: 20px;
	font-size: 80px;
	font-weight: 300;
}
.links-list{
	width: 44%;
	position: absolute;
	z-index: 10;
	left: 28%;
	top: 40%;
	font-size: 0;
	text-align: center;
}
.links-list span{
	display: inline-block;
	width: 30%;
	margin: 0 1.5%;
	font-size: 22px;
	height: 80px;
	line-height: 80px;
	background: #fff;
	border-radius: 20px;
	vertical-align: top;
}
.links-list span:nth-child(1){
	height: 70px;
	line-height: 30px;
	padding-top: 10px;
}
.left-img,.right-img{
	position: absolute;
	z-index: 10;
	width: 20%;
	bottom: 15%;
	left: 0;
	max-width: 544px;
}
.right-img{
	left: auto;
	right: 0;
}
#parts15 .links1{
    left: 3%;
    bottom: 5%;
}
#parts15 .links2{
    right: 3%;
    bottom: 5%;
}

/*****small*****/
@media only screen and (max-width: 768px) and (orientation: portrait){
	#parts15 .words1 {
		font-size: 18px;
		padding: 0 68px;
		width: auto;
	}
    #parts15 .words1 strong{
	    font-size: 60px;
    }
	.links-list{
	    width: 54%;
	    left: 23%;
	    top: 32%;
	}
	.links-list span{
		width: 47%;
		font-size: 3.5vw;
	    height: 60px;
	    line-height: 60px;
	}
	.links-list span:nth-child(1){
	    height: 55px;
	    line-height: 25px;
	    padding-top: 5px;
    }
}


#parts16{
	height: 1024px;
	background-image: linear-gradient(to right, #40aec8, #44b7ed);
}
#doDetail #parts16 .inner-icon{
	width: 38.8%;
	height: auto;
	object-fit: contain;
	position: absolute;
	z-index: 1;
	right: 0;
	top: 30%;
}
#parts16 .mask{display: none;}
#parts16 .words1{
	width: 43.125%;
	text-align: center;
	position: absolute;
	color: #fff;
	left: 3%;
	top: 30%;
	font-size: 24px;
	font-weight: 300;
	line-height: 150%;
}
#parts16 .words1 strong{
	font-size: 80px;
	line-height: 80px;
}
#parts16 .words1 p{
	font-size: 60px;
	margin-bottom: 20px;
	line-height: 80px;
}
#parts16 .links1{
	width: 160px;
    height: 50px;
    position: absolute;
    left: 15%;
    bottom: 20%;
    z-index: 10;
    background: #ffffff;
    color: #41b1d6;
    font-size: 18px;
    font-weight: 700;
    line-height: 50px;
    border-radius: 20px;
    text-align: center;
}
@media only screen and (max-width: 1024px){
	.left-img, .right-img{
		bottom: 25%;
	}
	#parts15 .links1,#parts15 .links2{
		bottom: 10%;
	}
	#parts12 .words1 strong{
		font-size: 41px;
	}
	#parts16 .words1{
		width: 50%;
	}
	#parts16 .words1 strong {
        font-size: 60px;
    }
    #parts16 .words1 p {
        font-size: 50px;
    }
    #doDetail #parts16 .inner-icon{
    	right: -7%;
    }
}

@media only screen and (max-width: 768px) and (orientation: portrait){
	#parts8 .words2.smallTop8{margin-top: 5%;}
	#parts8 .words2 .partsStrong1{font-size: 30px;left: 9%;top: 15%;}

	#parts10 .words2.smallTop10{margin-top: 8%;}
	#parts10 .words2 .partsStrong2{font-size: 30px;top: -8%;left: 9%;}

	#parts14 .words2.smallTop10{margin-top: 4%;}
	#parts14 .words2 .partsStrong3{font-size: 30px;top: -7%;left: 7%;}

	.left-img,.right-img{
		bottom: 20%;
		width: 40%;
		left: -22%;
	}
	.right-img{
		left: auto;
		bottom: 20%;
		right: -22%;
	}

	#parts12 .left, #parts12 .right{
		width: 100%;
		height: 50%;
	}
	#parts12 .words1{
		width: 90%;
		margin: 10% auto 0 10%;
		font-size: 18px;
	}
	#parts12 .right .words1{
		margin-left: 25%;
	}
	#parts12 .words1 strong{
		font-size: 36px;
		margin: 10px auto 30px 0;
	}
	#parts12 .btn-link{
		display: none;
	}

	.big-line{
		display: none;
	}
	.small-line{
		display: block;
		height: 30px;
	}

	#parts14 .words1{
		font-size: 44px;
	}
	#parts14 .words2{
		margin-top: -3%;
	}
	#parts14 .words2 strong{
		position: absolute;
	}
	#parts15 .links1, #parts15 .links2{
      width: 25%;
      height: 40px;
      line-height: 40px;
    }
    #parts16 .words1{
    	width: 60%;
    }
    #parts16 .words1 strong{
    	font-size: 50px;
    }
    #parts16 .words1 p{
    	font-size: 40px;
    }
}

@media only screen and (max-width: 667px) and (-webkit-min-device-pixel-ratio:2) {
	#parts8 .words2.smallTop8{margin-top: 8%;}
	#parts8 .words2 .partsStrong1{font-size: 30px;left: 10%;top: 9%;}

	#parts10 .words2 .partsStrong2{font-size: 30px;top: -11%;left: 11%;}

	#parts14 .words2.smallTop10{margin-top: -10%;}
	#parts14 .words2 .partsStrong3{font-size: 30px;top: -13%;left: 11%;}

	#parts12 .left, #parts12 .right{
		width: 100%;
		height: 50%;
	}
	#parts12 .words1{
		width: 90%;
		margin: 20% auto 0 10%;
		font-size: 18px;
	}
	#parts12 .right .words1{
		margin-left: 25%;
	}
	#parts12 .words1 strong{
		font-size: 36px;
		margin: 10px auto 30px 0;
	}
	#parts12 .btn-link{
		display: none;
	}

	.big-line{
		display: none;
	}
	.small-line{
		display: block;
		height: 20px;
	}

	#parts14 .words1{
		font-size: 44px;
	}
	#parts14 .words2{
		margin-top: -3%;
	}
	#parts14 .words2 strong{
		position: absolute;
	}
	#parts15 .links1, #parts15 .links2{
      width: 30%;
      height: 32px;
      line-height: 32px;
    }
	#parts16 .words1{
		width: 100%;
		left: 0;
		top: 10%;
		font-size: 5vw;
	}
	#parts16 .words1 strong{
		font-size: 11vw;
	}
	#parts16 .words1 p{
		font-size: 9vw;
	}
	#parts16 .links1{
		bottom: 40%;
		left: calc( 50% - 80px);
	}
	#doDetail #parts16 .inner-icon{
		width: 55%;
		top: auto;
		bottom: 3%;
		right: -10%;
		opacity: 0.3;
	}
	.links-list{
	    width: 54%;
	    left: 23%;
	    top: 42%;
	}
	.links-list span{
		width: 47%;
		font-size: 4vw;
	    height: 40px;
	    line-height: 40px;
	}
	.links-list span:nth-child(1){
	    height: 35px;
	    line-height: 15px;
	    padding-top: 5px;
    }
}

/*****listLayer*****/
.listLayer,
.detailLayer,
.chuangLayer{
	width: 100%;
	height: 100%;
	background: #1b2030;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 210;
	transform: translateX(-100%);
	transition: all ease 1s;
	line-height: 0;
    font-size: 0;
}
.chuangLayer{
	z-index: 250;
}
.listLayer.in,
.detailLayer.in,
.chuangLayer.in{
	transform: translateX(0);
}

@media only screen and (max-width: 1280px) {
	.line1 .w-right{
		padding-right: 28%;
	}
	.line1 .month{
		padding-right: 75%;
	}
	.line2 .percent{
		left: 55%;
	}
	.line2 .p2{
		left: 52%;
	}
	.line2 .rate {
        padding-right: 0%;
    }
    .line2 .trade{
    	padding-right: 9%;
    }
}

@keyframes waterCircle {
    0% {
        transform: scale(0,0);
        opacity: 0;
    }
    100% {
        transform: scale(2.5,2.5);
        opacity: 1;
    }
}
@keyframes top_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1);
    }
    25% {
        transform: translateX(-30%) translateZ(0) scaleY(0.9);
    }
    50% {
        transform: translateX(-60%) translateZ(0) scaleY(1);
    }
    75% {
        transform: translateX(-30%) translateZ(0) scaleY(0.9);
    }
    100% {
        transform: translateX(0) translateZ(0) scaleY(1);
    }
}

#parts4{
	height: 1024px;
}

@media only screen and (max-width: 1024px) {
	.number-line{
		width: 80%;
		margin: 10% auto 0 10%;
	}
	.number-box{
		font-size: 300px;
		width: 50%;
	}
	.line1 .number-box:nth-child(1){
		width: 50%;
	}
	.line1 .w-right{
		font-size: 40px;
        padding-right: 40%;
        margin-top: -27%;
	}
	.line1 .w-left{
		font-size: 30px;
	}
	.line1 .month{
		padding-right: 57%;
	}
	.line1 .circle{
		padding-left: 5%;
	}
	.line2{
		margin-top: 10%;
	}
	.line2 .percent {
        left: 60%;
        font-size: 6vw;
        top: 13%;
    }
    .line2 .p2{
    	left: 67%;
    }
    .line2 .w-right{
    	font-size: 30px;
    	margin-top: -13%;
    	padding-right: 15%;
    }
    .line2 .trade{
    	padding-right: 5%;
    	margin-top: -11%;
    }
    #parts4 .inner-icon{
	    position: relative;
	    height: 1024px;
	    object-position: contain;
	    object-position: 50%;
    }
    #parts4 .title{
    	font-size: 40px;
    }
    #parts4 .desc{
    	width: 80%;
    	left: 10%;
    	text-align: center;
    	font-size: 30px;
    }
    #parts5 .words2{
    	width: 40%;
    }
    .project-name{
    	width: 50%;
    	text-align: left;
    }
    .project-qrcode{
    	width: 15%;
    }
}

@media only screen and (max-width: 768px) {
	.number-line{
		width: 80%;
		margin: 10% auto 0 10%;
	}
	.number-box{
		font-size: 300px;
		width: 50%;
	}
	.line1 .number-box:nth-child(1){
		width: 50%;
	}
	.line1 .w-right{
		font-size: 40px;
        padding-right: 20%;
        margin-top: -32%;
	}
	.line1 .w-left{
		font-size: 30px;
	}
	.line1 .month{
		padding-right: 57%;
	}
	.line1 .circle{
		padding-left: 5%;
	}
	.line2{
		margin-top: 10%;
	}
	.line2 .percent {
        left: 77%;
        font-size: 6vw;
        top: 13%;
    }
    .line2 .p2{
    	left: 89%;
    }
    .line2 .w-right{
    	font-size: 30px;
    	margin-top: -13%;
    	padding-right: 15%;
    }
    .line2 .trade{
    	padding-right: 5%;
    	margin-top: -11%;
    }
    #parts4 .inner-icon{
	    position: relative;
	    height: 1024px;
	    object-position: contain;
	    object-position: 50%;
    }
    #parts4 .title{
    	font-size: 42px;
    }
    #parts4 .desc{
    	width: 80%;
    	left: 10%;
    	text-align: left;
    	font-size: 30px;
    }
    #parts5 .words1{
    	width: 90%;
    	left: 5%;
    	font-size: 20px;
    }
    #parts5 .words1 p{
    	font-size: 14px;
    }
    #parts5 .words2{
    	width: 90%;
    	left: 5%;
    	font-size: 16px;
    	text-align: justify;
    	line-height: 180%;
    	top: 20%;
    }
    #parts5 .inner-icon{
    	height: 597px;
    	object-fit: cover;
    	object-position: 70% 100%;
    }
    #parts6 .words1{
    	left: 5%;
    	top: 15%;
    	width: 67%;
    	font-size: 7vw;
    }
    #parts6 .words1 p{
    	font-size: 3vw;
    }
    #parts6 .words1 p.about{
    	font-size: 3vw;
    	line-height: 180%;
    }
    .dm-app {
        width: 50%;
        top: 15%;
        right: -25%;
    }
    .project-name{
    	width: 50%;
    	top: 15%;
    	text-align: left;
    	font-size: 5vw;
    	line-height: 150%;
    }
    .project-name p{
    	font-size: 3vw;
    	letter-spacing: 2px;
    }
    #parts7{
    	height: 200px;
    }
    .project-qrcode{
    	width: 30%;
    }
    .project-qrcode p{
    	display: none;
    }
}


@media only screen and (max-width: 667px) and (-webkit-min-device-pixel-ratio:2) {
	.number-line{
		width: 80%;
		margin: 70% auto 0 10%;
	}
	.number-box{
		font-size: 120px;
		width: 50%;
	}
	.line1 .number-box:nth-child(1){
		width: 50%;
	}
	.line1 .w-right{
		font-size: 20px;
        padding-right: 28%;
        margin-top: -32%;
	}
	.line1 .w-left{
		font-size: 16px;
	}
	.line1 .month{
		padding-right: 60%;
	}
	.line1 .circle{
		padding-left: 5%;
	}
	.line2{
		margin-top: 30%;
	}
	.line2 .percent {
        left: 65%;
        font-size: 8vw;
        top: 7%;
    }
    .line2 .p2{
    	left: 75%;
    }
    .line2 .w-right{
    	font-size: 16px;
    	margin-top: -13%;
    	padding-right: 15%;
    }
    .line2 .trade{
    	padding-right: 5%;
    	margin-top: -11%;
    }
    #parts4 .inner-icon{
	    position: relative;
	    height: 1024px;
	    object-position: contain;
	    object-position: 50%;
    }
    #parts4 .title{
    	font-size: 22px;
    }
    #parts4 .desc{
    	width: 84%;
    	left: 8%;
    	text-align: justify;
    	font-size: 20px;
    }
    #parts5 .words1{
    	width: 90%;
    	left: 5%;
    	font-size: 20px;
    }
    #parts5 .words1 p{
    	font-size: 14px;
    }
    #parts5 .words2{
    	width: 90%;
    	left: 5%;
    	font-size: 16px;
    	text-align: justify;
    	line-height: 180%;
    	top: 20%;
    }
    #parts5 .inner-icon{
    	height: 597px;
    	object-fit: cover;
    	object-position: 70% 100%;
    }
    #parts6 .words1{
    	left: 5%;
    	top: 25%;
    	width: 67%;
    	font-size: 7vw;
    }
    #parts6 .words1 p{
    	font-size: 3vw;
    }
    #parts6 .words1 p.about{
    	font-size: 3vw;
    	line-height: 180%;
    }
    .dm-app {
        width: 50%;
        top: 25%;
        right: -25%;
    }
    .project-name{
    	width: 50%;
    	top: 15%;
    	text-align: left;
    	font-size: 5vw;
    	line-height: 150%;
    }
    .project-name p{
    	font-size: 3vw;
    	letter-spacing: 2px;
    }
    #parts7{
    	height: 200px;
    }
    .project-qrcode{
    	width: 30%;
    }
    .project-qrcode p{
    	display: none;
    }
    #parts9 .inner-item .small-line{
    	height: 1px;
    }
    .project-item .item-title{
    	font-size: 28px;
    	letter-spacing: 0px;
    }
    .project-item-inner .item-title{
    	font-size: 28px;
    	letter-spacing: 0px;
    }
}