.main {
	height: 746px;
	background: center center no-repeat;
	background-size: cover;
}

.main .container {
	height: 100%;
	overflow: hidden;
}

.main .phone {
	position: absolute;
	top: 100px;
	left: 190px;
	width: 292px;
	height: 694px;
	background: url(../img/tiyan/phoneBg.png) no-repeat left top;
	background-size: 292px 694px;
}

.main .phone {
	animation: mLeft .6s ease-in-out 0s both;
	-webkit-animation: mLeft .6s ease-in-out 0s both;
}

.main .codes {
	position: absolute;
	top: 200px;
	right: 150px;
	width: 236px;
}

.main .codes {
	animation: mRight .6s ease-in-out 0s both;
	-webkit-animation: mRight .6s ease-in-out 0s both;
}

.main .codes .title {
	padding: 14px 0;
	line-height: 28px;
	color: #fff;
	font-size: 16px;
}

.main .codes .code img {
	max-width: 100%;
}

.main .share {
	padding: 26px 0;
}

.main .phone .btn {
	cursor: pointer;
	font-size: 15px;
	color: #fff;
	position: absolute;
	height: 84px;
	width: 38px;
	right: -36px;
	background: #EF6364;
	border-radius: 0 8px 8px 0;
	-webkit-border-radius: 0 8px 8px 0;
}

.main .phone .btn {
	transition-duration: .5s;
	-ms-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-webkit-transition-duration: .5s;
}

.main .phone .btn p {
	width: 22px;
	text-align: center;
	margin: 0 auto;
	padding: 14px 0;
	line-height: 20px;
}

.main .phone .btn.preBtn {
	top: 184px;
}

.main .phone .btn.nextBtn {
	top: 300px;
}

.main .phone .btn:hover {
	background: #F52291;
}

.main .phone .mContent {
	position: absolute;
	top: 68px;
	left: 18px;
	width: 257px;
	height: 414px;
}

.main .phone .mContent .bg {
	width: 100%;
	height: 100%;
}

.main .phone .mContent .focus {
	position: absolute;
	cursor: pointer;
	z-index: 1;
	background-image: url("data:image/gif; base64,AAAA");
}

.main .phone .loading {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #fff;
}

.main .phone .loading .loadContent {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
	width: 64px;
	height: 39px;
	background: url(../images/loading.png) no-repeat;
}

.main .phone .child {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
}

.main .phone .child1 .focus {
	height: 9.0997%;
	width: 100%;
	top: 49.661181%;
	left: 0px;
	right: 0px;
}

.main .phone .child2 .focus {
	height: 9.196515%;
	width: 100%;
	top: 52.274927%;
}

.main .phone .child3 .focus {
	height: 19.6515%;
	width: 32.5%;
	top: 45.01452%;
	left: 33.59375%;
}

.main .phone .child4 .focus {
	height: 7.841239%;
	width: 95%;
	bottom: 2.323333%;
	left: 2.345375%;
}

.main .phone .child5 .focus {
	height: 7.744433688%;
	width: 44.6875%;
	bottom: 2.904162633%;
	right: 4.21875%;
}

.main .phone .child6 .focus {
	height: 7.744433688%;
	width: 44.6875%;
	bottom: 2.904162633%;
	right: 4.21875%;
}

.main .phone .child7 .focus {
	height: 7.744433688%;
	width: 44.6875%;
	bottom: 2.904162633%;
	right: 4.21875%;
}

.main .phone .child8 .focus {
	height: 6.38915779%;
	width: 32.96875%;
	top: 63.02039%;
	left: 0;
}

.main .phone .child9 .focus {
	height: 4.840271055%;
	width: 24.375%;
	top: 9.002916%;
	right: 0;
}

.main .phone .child10 .focus {
	height: 4.840271055%;
	width: 31.25%;
	top: 9.002916%;
	right: 0;
}

.main .phone .child11 .focus {
	height: 7.357212%;
	width: 8.59375%;
	top: 0;
	left: 0;
}

.main .phone .child12 .focus {
	height: 6.098741529%;
	width: 33.4375%;
	top: 62.923523717%;
	right: 0;
}

.main .phone .child13 .focus {
	height: 7.744433%;
	width: 45.3125%;
	bottom: 4.259438528%;
	left: 27.03125%;
}

.main .phone .child14 .focus {
	height: 7.744433%;
	width: 44.84375%;
	bottom: 2.8073572%;
	right: 3.4375%;
}

.main .phone .child15 .focus {
	height: 6.1955469%;
	width: 33.59375%;
	top: 29.04162633%;
	right: 0;
}

.main .phone .child16 .focus {
	height: 6.1955469%;
	width: 100%;
	top: 61.27783155%;
	left: 0;
}

.main .phone .child17 .focus {
	height: 8.8092933204%;
	width: 45.78125%;
	top: 87.608906%;
	left: 27.34375%;
}

.main .phone .child18 .focus {
	height: 7.9380445%;
	width: 44.6875%;
	bottom: 2.71055179%;
	right: 3.75%;
}

.main .phone .child19 .focus {
	height: 6.1955469%;
	width: 33.59375%;
	top: 62.92352371%;
	right: 0;
}

.main .phone .child20 .focus {
	height: 5.808325266%;
	width: 34.84375%;
	bottom: 8.80929332%;
	left: 32.5%;
}

.main .phone .child21 .focus {
	height: 5.808325266%;
	width: 34.84375%;
	left: 32.5%;
}

.main .phone .child21 .focus.focus1 {
	top: 51.306873%;
}

.main .phone .child21 .focus.focus2 {
	top: 60.40658276%;
}

.main .wapmain {
	display: none;
}

@media (max-width: 639px) {
	.main {
		height: auto;
		position: absolute;
		top: 47px;
		bottom: 0px;
		left: 0px;
		right: 0px;
	}
	.main .container {
		width: 100%;
	}
	.main .codes {
		display: none;
	}
	.main .wapmain {
		display: block;
	}
	.main .wapmain .title {
		position: absolute;
		width: 100%;
		top: 24.201355%;
		line-height: 38px;
		color: #FFFFFF;
		font-size: 34px;
		text-align: center;
	}
	.main .wapmain .title p {
		padding: 8px 0;
		text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.2);
		-moz-text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.2);
		-ms-text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.2);
		-o-text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.2);
		-webkit-text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.2);
	}
	.main .wapmain .btn {
		cursor: pointer;
		position: absolute;
		top: 63.891577%;
		left: 0px;
		right: 0px;
		margin: 0 auto;
		width: 132px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		font-size: 18px;
		color: #fff;
		border: 2px solid #fff;
		border-radius: 6px;
		-webkit-border-radius: 6px;
	}
	.main .phone {
		background: #062540;
		display: none;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
		width: 100%;
		height: 100%;
		z-index: 2;
	}
	.main .phone {
		animation: none;
		-webkit-animation: none;
	}
	
	
	.main .phone .btn.preBtn {
		top: 88%;
		right: 50%;
	}
	.main .phone .btn.nextBtn {
		top: 88%;
	}
	.main .phone .btn {
		cursor: pointer;
		font-size: 15px;
		color: #fff;
		position: absolute;
		height: 38px;
		width: 84px;
		right: 25%;
		background: #EF6264;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		z-index: 5;
		display: ;
	}
	.main .phone .btn p {
		width: 84px;
		text-align: center;
		margin: 0 auto;
		padding: 0;
		line-height: 38px;
	}
	.main .phone .mContent {
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}
	.main .phone .mContent .bg {
		width: inherit;
		height: inherit;
		max-width: 100%;
		max-height: 100%;
		vertical-align: middle;
	}
	.main .phone .loadContent {
		width: 64px;
		height: 39px;
	}
	.main .phone .child {
		margin: 0 auto;
	}
	.main .phone .child1 .focus {
		height: 9.0997%;
		width: 100%;
		top: 49.661181%;
	}
	.main .phone .child2 .focus {
		height: 9.196515%;
		width: 100%;
		top: 52.274927%;
	}
	.main .phone .child3 .focus {
		height: 19.6515%;
		width: 32.5%;
		top: 45.01452%;
		left: 33.59375%;
	}
	.main .phone .child4 .focus {
		height: 7.841239%;
		width: 95%;
		bottom: 2.323333%;
		left: 2.345375%;
	}
	.main .phone .child5 .focus {
		height: 7.744433688%;
		width: 44.6875%;
		bottom: 2.904162633%;
		right: 4.21875%;
	}
	.main .phone .child6 .focus {
		height: 7.744433688%;
		width: 44.6875%;
		bottom: 2.904162633%;
		right: 4.21875%;
	}
	.main .phone .child7 .focus {
		height: 7.744433688%;
		width: 44.6875%;
		bottom: 2.904162633%;
		right: 4.21875%;
	}
	.main .phone .child8 .focus {
		height: 6.38915779%;
		width: 32.96875%;
		top: 63.02039%;
		left: 0;
	}
	.main .phone .child9 .focus {
		height: 4.840271055%;
		width: 24.375%;
		top: 9.002916%;
		right: 0;
	}
	.main .phone .child10 .focus {
		height: 4.840271055%;
		width: 31.25%;
		top: 9.002916%;
		right: 0;
	}
	.main .phone .child11 .focus {
		height: 7.357212%;
		width: 8.59375%;
		top: 0;
		left: 0;
	}
	.main .phone .child12 .focus {
		height: 6.098741529%;
		width: 33.4375%;
		top: 62.923523717%;
		right: 0;
	}
	.main .phone .child13 .focus {
		height: 7.744433%;
		width: 45.3125%;
		bottom: 4.259438528%;
		left: 27.03125%;
	}
	.main .phone .child14 .focus {
		height: 7.744433%;
		width: 44.84375%;
		bottom: 2.8073572%;
		right: 3.4375%;
	}
	.main .phone .child15 .focus {
		height: 6.1955469%;
		width: 33.59375%;
		top: 29.04162633%;
		right: 0;
	}
	.main .phone .child16 .focus {
		height: 6.1955469%;
		width: 100%;
		top: 61.27783155%;
		left: 0;
	}
	.main .phone .child17 .focus {
		height: 8.8092933204%;
		width: 45.78125%;
		top: 87.608906%;
		left: 27.34375%;
	}
	.main .phone .child18 .focus {
		height: 7.9380445%;
		width: 44.6875%;
		bottom: 2.71055179%;
		right: 3.75%;
	}
	.main .phone .child19 .focus {
		height: 6.1955469%;
		width: 33.59375%;
		top: 62.92352371%;
		right: 0;
	}
	.main .phone .child20 .focus {
		height: 5.808325266%;
		width: 34.84375%;
		bottom: 8.80929332%;
		left: 32.5%;
	}
	.main .phone .child21 .focus {
		height: 5.808325266%;
		width: 34.84375%;
		left: 32.5%;
	}
	.main .phone .child21 .focus.focus1 {
		top: 51.306873%;
	}
	.main .phone .child21 .focus.focus2 {
		top: 60.40658276%;
	}
	.footer {
		display: none;
	}
}

@media (min-width: 640px) and (max-width:1023px) {
	.main {
		height: 745px;
	}
	.main .phone {
		background: none;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
		width: 292px;
		height: 694px;
		background-size: 292px 694px;
	}
	.main .codes {
		display: none;
		top: 240px;
		right: 60px;
		width: 236px;
	}
	.main .codes .title {
		padding: 14px 0;
		line-height: 28px;
	}
	.main .share {
		padding: 26px 0;
	}
	.main .phone .btn {
		font-size: 15px;
		height: 84px;
		width: 38px;
		right: -36px;
		border-radius: 0 8px 8px 0;
		-webkit-border-radius: 0 8px 8px 0;
	}
	.main .phone .btn p {
		width: 22px;
		padding: 14px 0;
		line-height: 20px;
	}
	.main .phone .btn.preBtn {
		top: 184px;
	}
	.main .phone .btn.nextBtn {
		top: 300px;
	}
	.main .phone .mContent {
		top: 68px;
		left: 18px;
		width: 257px;
		height: 414px;
	}
	.main .phone .loading .loadContent {
		width: 64px;
		height: 39px;
	}
	.main .phone .child1 .focus {
		height: 9.0997%;
		width: 100%;
		top: 49.661181%;
	}
	.main .phone .child2 .focus {
		height: 9.196515%;
		width: 100%;
		top: 52.274927%;
	}
	.main .phone .child3 .focus {
		height: 19.6515%;
		width: 32.5%;
		top: 45.01452%;
		left: 33.59375%;
	}
	.main .phone .child4 .focus {
		height: 7.841239%;
		width: 95%;
		bottom: 2.323333%;
		left: 2.345375%;
	}
	.main .phone .child5 .focus {
		height: 7.744433688%;
		width: 44.6875%;
		bottom: 2.904162633%;
		right: 4.21875%;
	}
	.main .phone .child6 .focus {
		height: 7.744433688%;
		width: 44.6875%;
		bottom: 2.904162633%;
		right: 4.21875%;
	}
	.main .phone .child7 .focus {
		height: 7.744433688%;
		width: 44.6875%;
		bottom: 2.904162633%;
		right: 4.21875%;
	}
	.main .phone .child8 .focus {
		height: 6.38915779%;
		width: 32.96875%;
		top: 63.02039%;
		left: 0;
	}
	.main .phone .child9 .focus {
		height: 4.840271055%;
		width: 24.375%;
		top: 9.002916%;
		right: 0;
	}
	.main .phone .child10 .focus {
		height: 4.840271055%;
		width: 31.25%;
		top: 9.002916%;
		right: 0;
	}
	.main .phone .child11 .focus {
		height: 7.357212%;
		width: 8.59375%;
		top: 0;
		left: 0;
	}
	.main .phone .child12 .focus {
		height: 6.098741529%;
		width: 33.4375%;
		top: 62.923523717%;
		right: 0;
	}
	.main .phone .child13 .focus {
		height: 7.744433%;
		width: 45.3125%;
		bottom: 4.259438528%;
		left: 27.03125%;
	}
	.main .phone .child14 .focus {
		height: 7.744433%;
		width: 44.84375%;
		bottom: 2.8073572%;
		right: 3.4375%;
	}
	.main .phone .child15 .focus {
		height: 6.1955469%;
		width: 33.59375%;
		top: 29.04162633%;
		right: 0;
	}
	.main .phone .child16 .focus {
		height: 6.1955469%;
		width: 100%;
		top: 61.27783155%;
		left: 0;
	}
	.main .phone .child17 .focus {
		height: 8.8092933204%;
		width: 45.78125%;
		top: 87.608906%;
		left: 27.34375%;
	}
	.main .phone .child18 .focus {
		height: 7.9380445%;
		width: 44.6875%;
		bottom: 2.71055179%;
		right: 3.75%;
	}
	.main .phone .child19 .focus {
		height: 6.1955469%;
		width: 33.59375%;
		top: 62.92352371%;
		right: 0;
	}
	.main .phone .child20 .focus {
		height: 5.808325266%;
		width: 34.84375%;
		bottom: 8.80929332%;
		left: 32.5%;
	}
	.main .phone .child21 .focus {
		height: 5.808325266%;
		width: 34.84375%;
		left: 32.5%;
	}
	.main .phone .child21 .focus.focus1 {
		top: 51.306873%;
	}
	.main .phone .child21 .focus.focus2 {
		top: 60.40658276%;
	}
}

@media (min-width: 1024px) and (max-width:1440px) {
	.main {
		height: 750px;
	}
	.main .phone {
		top: 86px;
		left: 60px;
		width: 292px;
		height: 694px;
		background-size: 292px 694px;
	}
	.main .codes {
		top: 184px;
		right: 60px;
		width: 236px;
	}
	.main .codes .title {
		padding: 14px 0;
		line-height: 28px;
	}
	.main .share {
		padding: 26px 0;
	}
	.main .phone .btn {
		font-size: 15px;
		height: 84px;
		width: 38px;
		right: -36px;
		border-radius: 0 8px 8px 0;
		-webkit-border-radius: 0 8px 8px 0;
	}
	.main .phone .btn p {
		width: 22px;
		padding: 14px 0;
		line-height: 20px;
	}
	.main .phone .btn.preBtn {
		top: 184px;
	}
	.main .phone .btn.nextBtn {
		top: 300px;
	}
	.main .phone .mContent {
		top: 68px;
		left: 18px;
		width: 257px;
		height: 414px;
	}
	.main .phone .loading {}
	.main .phone .child1 .focus {
		height: 9.0997%;
		width: 100%;
		top: 49.661181%;
	}
	.main .phone .child2 .focus {
		height: 9.196515%;
		width: 100%;
		top: 52.274927%;
	}
	.main .phone .child3 .focus {
		height: 19.6515%;
		width: 32.5%;
		top: 45.01452%;
		left: 33.59375%;
	}
	.main .phone .child4 .focus {
		height: 7.841239%;
		width: 95%;
		bottom: 2.323333%;
		left: 2.345375%;
	}
	.main .phone .child5 .focus {
		height: 7.744433688%;
		width: 44.6875%;
		bottom: 2.904162633%;
		right: 4.21875%;
	}
	.main .phone .child6 .focus {
		height: 7.744433688%;
		width: 44.6875%;
		bottom: 2.904162633%;
		right: 4.21875%;
	}
	.main .phone .child7 .focus {
		height: 7.744433688%;
		width: 44.6875%;
		bottom: 2.904162633%;
		right: 4.21875%;
	}
	.main .phone .child8 .focus {
		height: 6.38915779%;
		width: 32.96875%;
		top: 63.02039%;
		left: 0;
	}
	.main .phone .child9 .focus {
		height: 4.840271055%;
		width: 24.375%;
		top: 9.002916%;
		right: 0;
	}
	.main .phone .child10 .focus {
		height: 4.840271055%;
		width: 31.25%;
		top: 9.002916%;
		right: 0;
	}
	.main .phone .child11 .focus {
		height: 7.357212%;
		width: 8.59375%;
		top: 0;
		left: 0;
	}
	.main .phone .child12 .focus {
		height: 6.098741529%;
		width: 33.4375%;
		top: 62.923523717%;
		right: 0;
	}
	.main .phone .child13 .focus {
		height: 7.744433%;
		width: 45.3125%;
		bottom: 4.259438528%;
		left: 27.03125%;
	}
	.main .phone .child14 .focus {
		height: 7.744433%;
		width: 44.84375%;
		bottom: 2.8073572%;
		right: 3.4375%;
	}
	.main .phone .child15 .focus {
		height: 6.1955469%;
		width: 33.59375%;
		top: 29.04162633%;
		right: 0;
	}
	.main .phone .child16 .focus {
		height: 6.1955469%;
		width: 100%;
		top: 61.27783155%;
		left: 0;
	}
	.main .phone .child17 .focus {
		height: 8.8092933204%;
		width: 45.78125%;
		top: 87.608906%;
		left: 27.34375%;
	}
	.main .phone .child18 .focus {
		height: 7.9380445%;
		width: 44.6875%;
		bottom: 2.71055179%;
		right: 3.75%;
	}
	.main .phone .child19 .focus {
		height: 6.1955469%;
		width: 33.59375%;
		top: 62.92352371%;
		right: 0;
	}
	.main .phone .child20 .focus {
		height: 5.808325266%;
		width: 34.84375%;
		bottom: 8.80929332%;
		left: 32.5%;
	}
	.main .phone .child21 .focus {
		height: 5.808325266%;
		width: 34.84375%;
		left: 32.5%;
	}
	.main .phone .child21 .focus.focus1 {
		top: 51.306873%;
	}
	.main .phone .child21 .focus.focus2 {
		top: 60.40658276%;
	}
}

@media (min-width: 1441px) and (max-width:1920px) {}

@keyframes mLeft {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@-webkit-keyframes mLeft {
	0% {
		-webkit-transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		opacity: 1;
	}
}

@keyframes mRight {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@-webkit-keyframes mRight {
	0% {
		-webkit-transform: translateX(100%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		opacity: 1;
	}
}