﻿


/*banner图*/
#banner_tabs {
	width: 100%;
	height: 100vh;
	_height: 800px;
	position: relative;
}

#banner_tabs .slides li {
	width: 100%;
	height: 100%;
}

.flex-direction-nav a {
	width: 50px;
	height: 100px;
	overflow: hidden;
	text-indent: 999999em;
	background: url(/images/flexnav.png) no-repeat;
	display: block;
	position: absolute;
	top: 50%;
	margin-top: -60px;
	z-index: 10;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all .6s ease;
}

.flex-direction-nav .flex-prev {
	left: 2%;
	background-position: 0px 0px;
}

.flex-direction-nav .flex-next {
	right: 2%;
	background-position: -50px 0px;
}

#banner_tabs:hover .flex-next {
	opacity: 0.9;
	filter: alpha(opacity=80);
}

#banner_tabs:hover .flex-prev {
	opacity: 0.9;
	filter: alpha(opacity=80);
}

#page {
	height: 60px;
	margin-top: -60px;
}

.index-page section.active>div {
	display: block;
}

.index-page section {
	height: 100vh;
	position: relative;
	overflow: hidden;
}

.index-page section>div {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: none;
	transition: all .6s;
}
/*APP-HOME*/
 .bg {
	background: url(/images/bg.jpg);
	background-position: center center;
	height: 430px;
	display: block;
	width: 100%;
	top: 0;
	left: 0;
	opacity: 1;
	-webkit-animation: bg-scale 10s linear infinite;
	animation: bg-scale 10s linear infinite;
}

.bg {
	background: url(../image/bg2.jpg);
	background-position: center center;
}


/*slogan*/
.index-page .app-home .slogan {
	height: 162px;
	margin-top: -160px;
	margin-left: 60px;
}

.index-page2 .app-home .slogan {
	width: 100%;
	height: 80px;
	margin-left: -50%;
	margin-top: -340px;
	text-align: center;
}

.index-page3 .app-home .slogan {
	width: 852px;
	height: 100px;
	margin-left: -426px;
	margin-top: -90px;
}

/*second-slogan*/
.index-page .app-home .second-slogan {
	width: 495px;
	height: 50px;
	margin-top: 40px;
	margin-left: 60px;
}

.index-page2 .app-home .second-slogan {
	width: 100%;
	height: 50px;
	margin-top: -240px;
	margin-left: -50%;
	text-align: center;
}

.index-page2 .app-home .second-slogan2 {
	width: 100%;
	margin-left: -50%;
	text-align: center;
	top: auto;
	bottom: 0px;
}

.index-page3 .app-home .second-slogan {
	width: 100%;
	margin-left: -50%;
	text-align: center;
}


/*second-slogan end*/
.index-page .app-home .create-btn {
	margin-left: -130px;
	margin-top: 110px;
}

.index-page .app-home .mask {
	position: absolute;
	background: rgba(0,0,0,.68);
	width: 150px;
	height: 150px;
	top: 0%;
	left: 0px;
	margin-top: 0px;
	margin-left: 890px;
	transition: all 2s;
	border-radius: 50%;
	opacity: 0;
}

.maskscale {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: mask-scale;
	animation-name: mask-scale;
}


/*按钮*/
.nav-arrow {
	position: absolute;
	bottom: 30px;
	left: 50%;
	z-index: 3;
	margin-left: -27px;
	width: 55px;
	height: 55px;
	cursor: pointer;
	background-image: url(/images/jiantou_a.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 55px 55px;
	opacity: 0.5;
	animation-name: arrowing;
	-webkit-animation-name: arrowing;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx) {
	.nav-arrow {
		background-size: 35px 35px
	}
}

.nav-arrow:hover {
	opacity: 1;
}

@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx) {
	.nav-arrow:hover {
		background-size: 35px 35px
	}
}

@-webkit-keyframes arrowing {
	0%,100% {
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px)
	}

	50% {
		-webkit-transform: translateY(10px);
		transform: translateY(10px)
	}
}

@keyframes arrowing {
	0%,100% {
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}

	50% {
		-webkit-transform: translateY(10px);
		transform: translateY(10px);
	}
}

@-webkit-keyframes mask-scale {
	0% {
		-webkit-transform: scale(1.5);
		transform: scale(1.5);
		opacity: .1
	}

	20% {
		-webkit-transform: scale(2);
		transform: scale(2);
		opacity: .2
	}

	30% {
		-webkit-transform: scale(3);
		transform: scale(3);
		opacity: .3
	}

	40% {
		-webkit-transform: scale(4);
		transform: scale(4);
		opacity: .4
	}

	50% {
		-webkit-transform: scale(5);
		transform: scale(5);
		opacity: .5
	}

	60% {
		-webkit-transform: scale(6);
		transform: scale(6);
		opacity: .6
	}

	70% {
		-webkit-transform: scale(8);
		transform: scale(8);
		opacity: .7
	}

	80% {
		-webkit-transform: scale(10);
		transform: scale(10);
		opacity: .8
	}

	90% {
		-webkit-transform: scale(12);
		transform: scale(12);
		opacity: .9
	}

	100% {
		-webkit-transform: scale(18);
		transform: scale(18);
		opacity: 1
	}
}

@keyframes mask-scale {
	0% {
		-webkit-transform: scale(1.5);
		transform: scale(1.5);
		opacity: .1
	}

	20% {
		-webkit-transform: scale(2);
		transform: scale(2);
		opacity: .2
	}

	30% {
		-webkit-transform: scale(3);
		transform: scale(3);
		opacity: .3
	}

	40% {
		-webkit-transform: scale(4);
		transform: scale(4);
		opacity: .4
	}

	50% {
		-webkit-transform: scale(5);
		transform: scale(5);
		opacity: .5
	}

	60% {
		-webkit-transform: scale(6);
		transform: scale(6);
		opacity: .6
	}

	70% {
		-webkit-transform: scale(8);
		transform: scale(8);
		opacity: .7
	}

	80% {
		-webkit-transform: scale(10);
		transform: scale(10);
		opacity: .8
	}

	90% {
		-webkit-transform: scale(12);
		transform: scale(12);
		opacity: .9
	}

	100% {
		-webkit-transform: scale(18);
		transform: scale(18);
		opacity: 1
	}
}

@-webkit-keyframes bg-scale {
	0%,99% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	33% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}

	66% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1)
	}
}

@keyframes bg-scale {
	0%,99% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	33% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}

	66% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1)
	}
}

.delay100 {
	animation-delay: .1s;
	-webkit-animation-delay: .1s;
}

.delay200 {
	animation-delay: .2s;
	-webkit-animation-delay: .2s;
}

.delay300 {
	animation-delay: .3s;
	-webkit-animation-delay: .3s;
}

.delay400 {
	animation-delay: .4s;
	-webkit-animation-delay: .4s;
}

.delay500 {
	animation-delay: .5s;
	-webkit-animation-delay: .5s;
}

.delay600 {
	animation-delay: .6s;
	-webkit-animation-delay: .6s;
}

.delay700 {
	animation-delay: .7s;
	-webkit-animation-delay: .7s;
}

.delay800 {
	animation-delay: .8s;
	-webkit-animation-delay: .8s;
}

.delay900 {
	animation-delay: .9s;
	-webkit-animation-delay: .9s;
}

.delay1000 {
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
}

.delay1200 {
	animation-delay: 1.2s;
	-webkit-animation-delay: 1.2s;
}

.delay1400 {
	animation-delay: 1.4s;
	-webkit-animation-delay: 1.4s;
}

.delay1600 {
	animation-delay: 1.6s;
	-webkit-animation-delay: 1.6s;
}

.delay1800 {
	animation-delay: 1.8s;
	-webkit-animation-delay: 1.8s;
}

.delay1900 {
	animation-delay: 1.9s;
	-webkit-animation-delay: 1.9s;
}

.delay2500 {
	animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}

.delay3500 {
	animation-delay: 3.5s;
	-webkit-animation-delay: 3.5s;
}

.delay4500 {
	animation-delay: 4.5s;
	-webkit-animation-delay: 4.5s;
}

.delay7000 {
	animation-delay: 7s;
	-webkit-animation-delay: 7s;
}




/*屏幕小于1440px应用一下样式*/
@media (max-width:1440px) {

	.index-page .app-home .slogan {
		height: 120px;
		margin-top: -140px;
	}

	.index-page .app-home .slogan img {
		height: 120px;
	}

	.index-page2 .app-home .slogan {
		margin-top: -190px;
	}

	.index-page2 .app-home .slogan img {
		height: auto;
	}

	.index-page3 .app-home .slogan img {
		height: auto;
	}

	.index-page2 .app-home .second-slogan {
		margin-top: -82px;
	}

	.index-page2 .app-home .second-slogan2 img {
		height: 420px;
	}

	.index-page3 .app-home .second-slogan {
		width: 100%;
		margin-left: -50%;
		text-align: center;
	}

	.footer-mess .mess-right .form .ind_mess textarea {
		width: calc(66% - 20px);
	}

	.footer-mess .mess-right .form .ind_mess .code {
		width: 34%;
	}
	.index-page .app-home .mask {
		position: absolute;
		background: rgba(0,0,0,.68);
		width: 150px;
		height: 150px;
		top: 0%;
		left: 0px;
		margin-top: 0px;
		margin-left: 600px;
		transition: all 2s;
		border-radius: 50%;
		opacity: 0;
	}
}

@media (max-width:769px) {
	.index-page .app-home .slogan,
	.index-page .app-home .second-slogan {
		width: 100%;
		margin-left: -50%;
		text-align: center;
		height: auto;
		padding: 0 45px;
		box-sizing: border-box;
	}

	.index-page .app-home .slogan img,.index-page2 .app-home .slogan img,.index-page2 .app-home .second-slogan img,.index-page2 .app-home .second-slogan2 img {
		height: auto;
	}

	.index-page .app-home .slogan {
		margin-top: -120px;
	}

	.index-page2 .app-home .slogan {
		margin-top: -90px;
	}

	.index-page3 .app-home .slogan {
		margin-top: -90px;
	}

	.index-page .app-home .second-slogan {
		margin-top: -10px;
	}

	/*共用元素*/
	.container {
		margin: 0 auto;
	}

	.section {
		padding: 30px 0px;
	}
}

/*屏幕小于768px应用一下样式*/
@media (max-width:768px) {
	/*banner图*/
	.section_head {
		padding: 30px 10px;
	}

	.section_head .title p {
		font-size: 24px;
	}

	.section_head .title span {
		font-size: 14px;
	}

	.flex-direction-nav a {
		opacity: 1;
		width: 30px;
		height: 60px;
		background-size: 60px 60px;
	}

	.flex-direction-nav .flex-prev {
		left: 2%;
		background-position: 0px 0px;
	}

	.flex-direction-nav .flex-next {
		right: 2%;
		background-position: -30px 0px;
	}
}
@media screen and (max-width: 1024px) and (min-width: 0px){
	#banner_tabs {
		width: 100%;
		height: 728px;
		_height: 800px;
		position: relative;
	}
	.index-page2 .app-home .slogan {
		margin-top: -196px;
	}
	.index-page2 .app-home .second-slogan {
		margin-top: -65px;
	}
	.index-page section {
		height: 728px;
		position: relative;
		overflow: hidden;
	}
	.index-page2 .app-home .bg {
		background: url(../image/bg2.jpg);
	}
}
@media screen and (max-width: 1024px) and (min-width: 0px) {
	.two-column-promo{
		margin-bottom: 70px !important;
        margin-top: 5%;
	}
	.two-column-promo .sin-promo {
        width: 100%;
        margin-bottom: 10%;
    }
	.promo-title-right {
		left: 38px;
		text-align: left;
		right: 0px;
	}
	.two-column-promo .sin-promo .promo-title p {
		color: white;
		line-height: 20px;
		width: 85% !important;
		font-size: 13px;
		padding-left: 5%;
		text-align: left !important;
		padding-top: 5%;
		float: left !important;
	}
}