@charset "utf-8";

/* CSS Document */



section.fullheight {

	position: relative;

	width: 100%;

	height: 90vh;

	padding: 0;

}



section.bg-teal {

}



section.bg-teal .section-tab {

	display: none;

}



@media (min-width: 1024px) {

	section.bg-teal .section-tab {

		position: absolute;

		display: block;

		height: 15%;

		top: -15%;

		right: 0;

		width: calc(50vw + 50px);

	}

}



@media (min-width: 1680px) {

	section.bg-teal .section-tab {

		width: calc(((100% - 1680px) / 2) + 830px);

	}

}





section.section-team {

	border-top: 1px solid #C4C4C4;

	margin-top: 40px;

	padding-top: 40px;

}



@media (min-width: 768px) {

	section.section-team {

		border-top: 1px solid #C4C4C4;

		margin-top: 60px;

		padding-top: 60px;

	}

}



@media (min-width: 992px) {

	section.section-team {

		border-top: 1px solid #C4C4C4;

		margin-top: 50px;

		padding-top: 64px;

	}

}



section.section-team .cases-block {

	margin-bottom: 40px;

}



@media (min-width: 992px) {

	section.section-team .cases-block {

		margin-bottom: 60px;

	}

}



@media (min-width: 992px) {

	section.section-team .cases-block {

		margin-bottom: 90px;

	}

}



section.section-team .cases-block h4 {

	margin: 0 0 30px;

}



@media (min-width: 992px) {

	section.section-team .cases-block h4 {

		font-size: 30px;

	}

	

	section.section-team .cases-block h5 {

		font-size: 14px;

		color: rgba(102,102,102,1.00)

	}



	section.section-team .cases-block .title {

		display: flex;

		justify-content: space-between;

		align-items: center;

	}

}



section.section-team .cases-block .title h2 {

	margin: 0;

}



section.section-team .cases-block .title .read-more {

	margin-top: 20px;

}



.cases-title{

	float:left;

	width: 100%;

}



.cases-title1{

	float:left;

}



.cases-title2{

	float:left;

	margin-left: 20px;

	margin-top: 16px;

}



.cases-title3{

	float:right;

	color: #666;

}



@media (min-width: 992px) {

	section.section-team .cases-block .title .read-more {

		margin: 0;

	}

}



section.section-team .cases-grid {

	display: flex;

	flex-wrap: wrap;

	margin-left: -10px;

	margin-right: -10px;

}



section.section-team .cases-grid-item {

	position: relative;

	width: 100%;

	background: #EFF8FC;

	height: 200px;

	margin: 5px 0;

	box-shadow: inset 0 0 0 1px transparent;

	display: none;

	opacity: 0;

	transition: all .35s ease;

	-o-transition: all .35s ease;

	-moz-transition: all .35s ease;

	-webkit-transition: all .35s ease;

}



@media (min-width: 380px) {

	section.section-team .cases-grid-item {

		width: calc(50% - 10px);

		margin: 5px;

		height: 180px;

	}

}



@media (min-width: 640px) {

	section.section-team .cases-grid-item {

		height: 240px;

	}

}

@media (min-width: 992px) {

	section.section-team .cases-grid-item {

		width: calc(25% - 40px);

		margin: 20px;

		height: 460px;

	}

}



@media (min-width: 1500px) {

	section.section-team .cases-grid-item {

		width: calc(20% - 40px);

		margin: 20px;

		height: 240px;

	}

}




@media (min-width: 1280px) {

	section.section-team .cases-grid-item {

		height: 460px;

	}

}

@media (min-width: 1440px) {

	section.section-team .cases-grid-item {

		height: 460px;

	}

}



section.section-team .cases-grid-item > a {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	height: 360px;

	overflow: hidden;

}



section.section-team .cases-grid-item.branding.app {

	background: #F8F7F4;

 /* grey */

}



section.section-team .cases-grid-item.branding.website {

	background: #F2FAF4;

 /* green */

}



section.section-team .cases-grid-item.website {

	background: #EFF8FC;

 /* blue */

}



section.section-team .cases-grid-item.branding {

	background: #FDFAEF;

 /* yellow */

}



section.section-team .cases-grid-item.app {

	background: #FAF1F1;

 /* red */

}



section.section-team .cases-grid-item:hover {

	background: white !important;

	box-shadow: inset 0 0 0 1px #C4C4C4;

}

section.section-team .cases-grid-item .meta{
	background:#f7f7f7;
}

section.section-team .cases-grid-item:hover .meta{

	background: #00aeef !important;
	transition: all 0.4s ease;

	-o-transition: all 0.4s ease;

	-moz-transition: all 0.4s ease;

	-webkit-transition: all 0.4s ease;


}


section.section-team .cases-grid-item:hover{
	box-shadow: 0 0 20px #b5ebff;
	transition: all 0.4s ease;

	-o-transition: all 0.4s ease;

	-moz-transition: all 0.4s ease;

	-webkit-transition: all 0.4s ease;
}

section.section-team .cases-grid-item:hover a img{
	transform: scale(1.1);
	transition: all 0.4s ease;

	-o-transition: all 0.4s ease;

	-moz-transition: all 0.4s ease;

	-webkit-transition: all 0.4s ease;
}







section.section-team .cases-grid-item > a img {

	transition: all .35s ease;

	-o-transition: all .35s ease;

	-moz-transition: all .35s ease;

	-webkit-transition: all .35s ease;

/*	-webkit-filter: brightness(0%);

    !* webkit内核支持程度较好 *!

	-moz-filter: brightness(0%);

    !* 其他内核现在并不支持，为了将来兼容性书写 *!

	-ms-filter: brightness(0%);

	-o-filter: brightness(0%);

	filter: brightness(40%);*/

}



@media (min-width: 992px) {

	section.section-team .cases-grid-item > a img {

		min-height: 100%;

		min-width: 100%;

	}

}



section.section-team .cases-grid-item > a img.hover {

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%,-50%);

	opacity: 0;

	-webkit-filter: brightness(100%);

    /* webkit内核支持程度较好 */

	-moz-filter: brightness(100%);

    /* 其他内核现在并不支持，为了将来兼容性书写 */

	-ms-filter: brightness(100%);

	-o-filter: brightness(100%);

	filter: brightness(85%);

}



section.section-team .cases-grid-item:hover > a img.hover {

	opacity: 1;

	-webkit-filter: brightness(100%);

    /* webkit内核支持程度较好 */

	-moz-filter: brightness(100%);

    /* 其他内核现在并不支持，为了将来兼容性书写 */

	-ms-filter: brightness(100%);

	-o-filter: brightness(100%);

	filter: brightness(85%);

}



section.section-team .cases-grid-item:hover > a img:not(.hover) {

  /* opacity: 0; */

	-webkit-filter: brightness(100%);

    /* webkit内核支持程度较好 */

	-moz-filter: brightness(100%);

    /* 其他内核现在并不支持，为了将来兼容性书写 */

	-ms-filter: brightness(100%);

	-o-filter: brightness(100%);

	filter: brightness(85%);

}



section.section-team .cases-grid-item:hover > a img.hide {

	opacity: 0;

}



section.section-team .cases-grid-item.active {

	display: block;

}



section.section-team .cases-grid-item.in-view {

	animation-duration: .5s;

	animation-timing-function: ease-in-out;

	animation-name: fadeUp;

	animation-fill-mode: forwards;

	animation-delay: .25s;

}



section.section-team .cases-grid-item .meta {

	position: absolute;

	display: flex;

	align-items: center;

	justify-content: space-between;

	bottom: 0;

	left: 0;

	width: 100%;

	padding:18px;

	box-sizing: border-box;

}



@media (min-width: 1200px) {

	section.section-team .cases-grid-item .meta {

		padding:18px;

	}

}

section.section-team .cases-grid-item .meta .tags{

	width: 100%;

}



section.section-team .cases-grid-item .meta .tags span {

	color: #808080;

	font-size: 14px;

}



section.section-team .cases-grid-item .meta .tags .tags-span1{

	display:block;

	color: #000;

	font-size: 16px;

}

section.section-team .cases-grid-item:hover .meta .tags .tags-span1{
	color: #fff;
}

section.section-team .cases-grid-item .meta .tags .tags-span2{

	display: block;

	width: 30px;

	height: 2px;

	margin: 10px 0;

	background: #00aeef;

}
section.section-team .cases-grid-item:hover .meta .tags .tags-span2{background: #fff;}
section.section-team .cases-grid-item:hover .meta .tags .tags-span3{color: #fff;}


section.section-team .cases-grid-item .meta .tags .tags-span3{

	display:inline-block;

	color: #666;

	font-size: 14px;

}



section.section-team .cases-grid-item .meta .tags a{

	float: right;

	color: #000;

	font-size: 14px;

}

section.section-team .cases-grid-item:hover .meta .tags a{
	color: #fff;
}



@media (min-width:414px) and (max-width:567px) {

	section.section-team .cases-grid-item .meta {

		padding: 0 8px 18px;

	}



	section.section-team .cases-grid-item .meta .tags span {

		font-size: 12px;

		margin: 0 1px;

	}

}



@media (min-width:320px) and (max-width:375px) {

	section.section-team .cases-grid-item .meta .tags span {

		font-size: 12px;

		margin: 0 3px;

	}

}



section.section-team .cases-grid-item .meta .tags span:first-child {

	margin-left: 0;

}



section.section-team .cases-grid-item .meta .tags span:last-child {

	margin-right: 0;

}



@media (min-width: 1200px) {

	section.section-team .cases-grid-item .meta .social {

		display: flex;

	}

}



section.section-team .cases-grid-item .meta .social li {

	margin-left: 8px;

}



section.section-team .cases-grid-item .meta .social li a {

	position: relative;

	display: block;

	overflow: hidden;

	width: 40px;

	height: 40px;

}



@media (min-width:320px) and (max-width:414px) {

	section.section-team .cases-grid-item .meta .social li a {

		width: 30px;

		height: 30px;

	}

}



section.section-team .cases-grid-item .meta .social li a.dribbble {

	background-image: url("../image/ball-white.svg");

	background-size: contain;

	background-repeat: no-repeat;

}



section.section-team .cases-grid-item .meta .social li a:hover.dribbble {

	background-image: url("../image/ball-white-hover.svg");

	background-size: contain;

	background-repeat: no-repeat;

}



section.section-team .cases-grid-item .meta .social li a.station {

	background-image: url("../image/zcool-white.svg");

	background-size: contain;

	background-repeat: no-repeat;

}



section.section-team .cases-grid-item .meta .social li a:hover.station {

	background-image: url("../image/zcool-white-hover.svg");

	background-size: contain;

	background-repeat: no-repeat;

}



section.section-team .cases-grid-item .meta .social li a.behance {

	background-image: url("../image/be-white.svg");

	background-size: contain;

	background-repeat: no-repeat;

}



section.section-team .cases-grid-item .meta .social li a:hover.behance {

	background-image: url("../image/be-white-hover.svg");

	background-size: contain;

	background-repeat: no-repeat;

}



section.section-team .cases-grid-item .meta .social li a.link {

	background-image: url("../image/link.svg");

	background-size: contain;

	background-repeat: no-repeat;

}



section.section-team .cases-grid-item .meta .social li a:hover.link {

	background-image: url("../image/link-hover.svg");

	background-size: contain;

	background-repeat: no-repeat;

}

.index-title-p2 {

    position: absolute;

    top: 0;

    left: 14%;

    font-size: 50px;

    font-weight: bold;

    color: rgba(170,170,170,0.1);

}