@charset "utf-8";
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html,
body {
	height: 100%
}

a,
span,
em,
i,
span {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

body {
	background: #000 url(../img/index/bg.jpg) 50% 50% no-repeat;
	background-size: cover;
	overflow: hidden;
	color: #fff;
	font-family: 'PingHei', 'Lucida Grande', 'Lucida Sans Unicode', 'Helvetica Neue', 'Helvetica', 'Hiragino Sans GB', '微软雅黑', arial, sans-serif;
	-webkit-text-size-adjust: none;
	-webkit-appearance: none;
	outline: 0;
	padding: 0 1em;
	opacity: 0;
	-webkit-transition: opacity 200ms ease-in;
	-ms-transition: opacity 200ms ease-in;
	-moz-transition: opacity 200ms ease-in;
	transition: opacity 200ms ease-in;
}

a {
	color: #fff;
	text-decoration: none
}

img {
	vertical-align: middle
}

.main_wrap {
	
	width: 100%;
	height: 100%;
	overflow: visible;
	max-width: 1280px;
	margin: 0 auto
}

.main_cell {
	/*display: table-cell;
	vertical-align: middle*/
	    width: 100%;
}

.main {
	margin: 0 auto
}

.item div {
	text-align: center;
	-webkit-user-select: none;
	user-select: none
}

.item span {
	display: block;
	cursor: pointer;
	font-size: 2em
}


.item i,
.contact_card i {
	background: url(../img/index/sprite.png) 0 0 no-repeat;
	background-size: 600px
}

.item em {
	display: block;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	margin: 0 auto 30px;
	background: rgba(0,0,0,0);
	-webkit-transition: all 200ms ease-in;
	-ms-transition: all 200ms ease-in;
	-moz-transition: all 200ms ease-in;
	transition: all 200ms ease-in;
}
.item em:hover,.item em:active,.item em.active{
	background: rgba(0,0,0,.4);
}

.item em i {
	display: block;
	width: 150px;
	height: 150px;
	
}
.item_2 em i {
	background-position: -150px -0px;
	
}
.item_3 em i {
	background-position: -300px -0;
	
}
.item_4 em i {
	background-position: -450px -0;
	
}
.card_wrap {
	position: relative;
	text-align: center;
	height: 410px;
	margin-bottom: 80px
}

.card {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: none;
	pointer-events: none
}

.qrcode_wrap {
	
	display: inline-block;
	
}

.qrcode {
	width: 366px;
	height: 366px;
	display: inline-block
}

.logo_wrap {
	display: inline-block;
	width: 996px;
	height: 408px;
	background-image: url(../img/index/title.png);
	background-repeat: no-repeat ;
	background-position: center center ;
	background-size: 100% auto;
}

.qrcode img {
	width: 100%;
	height: 100%
}



.show_card_0 .card_0,
.show_card_1 .card_1,
.show_card_2 .card_2,
.show_card_3 .card_3 {
	display: block;
	pointer-events: all
}

.contact_card {
	width: 100%;
	height: 100%;
	
}
.contact_card>div{
	background-color: rgba(255, 255, 255, .2);
	border-radius: 15px;
	-webkit-border-radius: 15px;
	padding: 32px 80px;
	display: inline-block;
	text-align: left;
	font-size: 2.6em;
	text-align: left
}

.contact_card i {
	display: inline-block;
	vertical-align: middle;
	width: 52px;
	height: 58px;
	background-position: -117px -398px;
	margin-right: 75px
}

.contact_card .mail {
	background-position: -117px -490px
}

@media only screen {
	.card {
		display: block
	}
	
	.card .logo_wrap,
	.card .qrcode_wrap,
	.card .contact_card {
		opacity: 0;		
		-webkit-transform: translate3D(-100%, 0, 0);
		-ms-transform: translate3D(-100%, 0, 0);
		-moz-transform: translate3D(-100%, 0, 0);
		transform: translate3D(-100%, 0, 0);
		
		-webkit-transition: transform .5s, opacity .3s;
		-ms-transition: transform .5s, opacity .3s;		
		-moz-transition: transform .5s, opacity .3s;
		transition: transform .5s, opacity .3s;
		
	}
	/*.card_3 .qrcode_wrap {
	    transform: translate3D(100%,0,0);
	    -webkit-transform: translate3D(100%,0,0);
	}*/
	.show_card_0  .qrcode_wrap,
	.show_card_0  .contact_card,
	.show_card_1  .qrcode_wrap,
	.show_card_1  .contact_card,
	.show_card_2  .qrcode_wrap,
	.show_card_2  .contact_card,
	.show_card_3  .qrcode_wrap,
	.show_card_3  .contact_card{
		
		-webkit-transform: translate3D(100%, 0, 0);
		-ms-transform: translate3D(100%, 0, 0);
		-moz-transform: translate3D(100%, 0, 0);
		transform: translate3D(100%, 0, 0);
	}
	.show_card_1 .card_0 .logo_wrap,
	.show_card_2 .card_1 .qrcode_wrap,
	.show_card_3 .card_1 .qrcode_wrap,
	.show_card_3 .card_2 .qrcode_wrap,
	.show_card_4 .card_3 .qrcode_wrap{
		
		-webkit-transform: translate3D(-100%, 0, 0);
		-ms-transform: translate3D(-100%, 0, 0);
		-moz-transform: translate3D(-100%, 0, 0);
		transform: translate3D(-100%, 0, 0);
	}
	.show_card_0 .card_0 .logo_wrap,
	.show_card_1 .card_1 .qrcode_wrap,
	.show_card_2 .card_2 .qrcode_wrap,
	.show_card_3 .card_3 .qrcode_wrap,
	.show_card_4 .card_4 .contact_card {
		opacity: 1;		
		-webkit-transform: translate3D(0, 0, 0);
		-ms-transform: translate3D(0, 0, 0);
		-moz-transform: translate3D(0, 0, 0);
		transform: translate3D(0, 0, 0);
	}
	.loaded .card_wrap,
	.loaded .item span {
		
		-webkit-animation: fadeIn .8s .5s 1 ease both;
		-ms-animation: fadeIn .8s .5s 1 ease both;
		-moz-animation: fadeIn .8s .5s 1 ease both;
		animation: fadeIn .8s .5s 1 ease both;
	}
	.loaded .item .item_1 {
		
		-webkit-animation-delay: 1s;
		-ms-animation-delay: 1s;
		-moz-animation-delay: 1s;
		animation-delay: 1s;
	}
	.loaded .item .item_2 {
		
		-webkit-animation-delay: 1.5s;
		-ms-animation-delay: 1.5s;
		-moz-animation-delay: 1.5s;
		animation-delay: 1.5s;
	}
	.loaded .item .item_3 {
		
		-webkit-animation-delay: 2s;
		-ms-animation-delay: 2s;
		-moz-animation-delay: 2s;
		animation-delay: 2s;
	}
	.loaded .item .item_4 {
		
		-webkit-animation-delay: 2.5s;
		-ms-animation-delay: 2.5s;
		-moz-animation-delay: 2.5s;
		animation-delay: 2.5s;
	}
	@-webkit-keyframes fadeIn {
		0% {
			-webkit-transform: translate3d(0, 50px, 0);
			opacity: 0
		}
		100% {
			-webkit-transform: translate3d(0, 0, 0);
			opacity: 1
		}
	}
	@-ms-keyframes fadeIn {
		0% {
			-ms-transform: translate3d(0, 50px, 0);
			opacity: 0
		}
		100% {
			-ms-transform: translate3d(0, 0, 0);
			opacity: 1
		}
	}
	@-moz-keyframes fadeIn {
		0% {
			-moz-transform: translate3d(0, 50px, 0);
			opacity: 0
		}
		100% {
			-moz-transform: translate3d(0, 0, 0);
			opacity: 1
		}
	}
	@keyframes fadeIn {
		0% {
			transform: translate3d(0, 50px, 0);
			opacity: 0
		}
		100% {
			transform: translate3d(0, 0, 0);
			opacity: 1
		}
	}
}

/*@media(-webkit-min-device-pixel-ratio:1.3),
(min--moz-device-pixel-ratio:1.3),
(min-resolution:1.3dppx) {
	.item em,
	.item i,
	.contact_card i {
		background-image: url(/s/8B.png)
	}
	.logo_wrap {
		background-image: url(/s/8F.png)
	}
}*/

@media only screen and (max-width:768px)
 {
	
	.item i,
	.contact_card i {
		background-size: 300px;		
	}
	.item em {
		width: 75px;
		height: 75px
	}
	.item span {
		font-size: 1em
	}
	.item em i {
		width: 75px;
		height: 75px;
		
	}
	/*.show_card_1 .item_1 em,
	.show_card_2 .item_2 em,
	.show_card_3 .item_3 em {
		background-position: 0 -94px
	}*/
	.item_2 em i {
		background-position: -75px 0;			
	}
	.item_3 em i {
		background-position: -150px 0;			
	}
	.item_4 em i {
		background-position: -225px 0;			
	}
	.card_wrap {
		height: 205px
	}
	.qrcode_wrap {
		padding: 9px;
		border-radius: 8px;
		-webkit-border-radius: 8px
	}
	.qrcode {
		width: 183px;
		height: 183px
	}
	.logo_wrap {
		width: 90%;
		background-position: center top ;
		
    
	}
	.contact_card>div {
		padding: 16px 40px;
		font-size: 1.3em;
		border-radius: 8px;
		-webkit-border-radius: 8px;
		margin: 0 auto;
	}
	.contact_card i {
		width: 26px;
		height: 29px;
		background-position: -58px -199px;
		margin-right: 37px
	}
	.contact_card .mail {
		background-position: -58px -245px
	}
}

@media only screen and (max-width:450px) {
	.contact_card>div {
		font-size: 1em
	}
	.contact_card i {
		margin-right: 20px
	}
	.logo_wrap{
		height: 100%;
		background-position: center center ;
	}
}

@media only screen and (max-width:375px) {
	.item div {
		
		-webkit-transform: scale(.8);
		-ms-transform: scale(.8);
		-moz-transform: scale(.8);
		transform: scale(.8);
		
	}
}

@media only screen and (max-width:370px) {
	.contact_card>div {
		font-size: .8em
	}
	.contact_card i {
		margin-right: 10px
	}
}

@media only screen and (max-height:500px) {
	.card_wrap {
		margin-bottom: 30px;
	}
}

@media only screen and (max-height:400px) {
	.main {
		-webkit-transform: scale(.8);
		-ms-transform: scale(.8);
		-moz-transform: scale(.8);
		transform: scale(.8)
	}
	.item em {
		margin-bottom: 10px
	}
}

@media only screen and (max-height:350px) {
	body {
		padding: 0;
		margin: 0
	}
	.main {
		-webkit-transform: scale(.7);
		-ms-transform: scale(.7);
		-moz-transform: scale(.7);
		transform: scale(.7)
	}
}

/*@media(-webkit-min-device-pixel-ratio:1.3),
(min--moz-device-pixel-ratio:1.3),
(min-resolution:1.3dppx) {
	.item em,
	.item i,
	.contact_card i {
		background-image: url(/s/8B.png)
	}
}*/

@media only screen and (min-width: 1200px) and (max-height:700px) {
	.main {
		-webkit-transform: scale(.7);
		-ms-transform: scale(.7);
		-moz-transform: scale(.7);
		transform: scale(.7)
	}
	
	
}