body {
	color: #222;
	-webkit-text-size-adjust: none;
}
body{
	margin: 0;
	padding: 0;
}

body, button, input, select, textarea {
	font-family: Tahoma, Arial, Roboto, ”Droid Sans”, ”Helvetica Neue”, ”Droid Sans Fallback”, ”Heiti SC”, sans-self;
	font-size: 62.5%;
	line-height: 1.5;
}
ol, ul {
	list-style: none;
}
html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.section-wrap {
	width: 100%;
	height: 100%;
	overflow: visible;
	transition: transform 1s cubic-bezier(0.86, 0, 0.03, 1);
	-webkit-transition: -webkit-transform 1s cubic-bezier(0.86, 0, 0.03, 1);
}
.section-wrap .section {
	position: relative;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
}
.section-wrap .section .title p {
	padding: 0 4%;
	opacity: 0
}
.section-wrap .section .title.active .tit {
	opacity: 1;
	transform: translateY(-25px);
	-webkit-transform: translateY(-25px);
	transition: all 2s cubic-bezier(0.86, 0, 0.8, 1);
	-webkit-transition: all 2s cubic-bezier(0.86, 0, 0.8, 1);
}

@media screen and (min-width:750px) {
.section-wrap .section-1 {
	background: url(/yyly/qx1.jpg);
	background-position: 50% 0%; background-size: cover;
}
.section-wrap .section-2 {
	background: url(/yyly/qx2.jpg);
	background-position: 50% 100%; background-size: cover;
}
.section-wrap .section-3 {
	background: url(/yyly/qx3.jpg);
	background-position: 60% 100%; background-size: cover;
}
.section-wrap .section-4 {
	background: url(/yyly/qx4.jpg);
	background-position: 10% 10%; background-size: cover;
}
.put-section-0 {
	transform: translateY(0);
	-webkit-transform: translateY(0);
}
.put-section-1 {
	transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
}
.put-section-2 {
	transform: translateY(-200%);
	-webkit-transform: translateY(-200%);
}
.put-section-3 {
	transform: translateY(-300%);
	-webkit-transform: translateY(-300%);
}
.put-section-4 {
	transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
}
.section-wrap .section .title {
	width: 100%;
	position: absolute;
	top: 10%;
	color: #fff;
	font-size: 2.4em;
}
.section-wrap .section .title img {
	position: absolute;
	top: 10%;
    width: 60%;
	opacity: 1;
	transform: translateY(-25px);
	-webkit-transform: translateY(-25px);
	transition: all 2s cubic-bezier(0.86, 0, 0.8, 1);
	-webkit-transition: all 2s cubic-bezier(0.86, 0, 0.8, 1);
}
}

@media screen and (min-width: 1280px) {
.section-wrap .section-1 {
	background: url(/yyly/qx1.jpg);
	background-position: 50% 50%;
}
.section-wrap .section-2 {
	background: url(/yyly/qx2.jpg);
	background-position: 50% 50%;
}
.section-wrap .section-3 {
	background: url(/yyly/qx3.jpg);
	background-position: 50% 50%;
}
.section-wrap .section-4 {
	background: url(/yyly/qx4.jpg);
	background-position: 50% 50%;
}
.section-wrap .section .title img {
	    width: 40%;
	position: absolute;
	top: 10%;
	opacity: 1;
	transform: translateY(-25px);
	-webkit-transform: translateY(-25px);
	transition: all 2s cubic-bezier(0.86, 0, 0.8, 1);
	-webkit-transition: all 2s cubic-bezier(0.86, 0, 0.8, 1);
}
.section-wrap .section-1 .title  {
	margin: 4% 0 0 18%
}	
.section-wrap .section-2 .title  {
	margin: 0 auto;
}
	.section-wrap .section-3 .title  {
	 margin-left: 5%;
}	
	.section-wrap .section-4 .title  {
	 margin-left: 40%;
		
}	
	
	
	
.put-section-0 {
	transform: translateY(0);
	-webkit-transform: translateY(0);
}
.put-section-1 {
	transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
}
.put-section-2 {
	transform: translateY(-200%);
	-webkit-transform: translateY(-200%);
}
.put-section-3 {
	transform: translateY(-300%);
	-webkit-transform: translateY(-300%);
}
.put-section-4 {
	transform: translateY(-400%);
	-webkit-transform: translateY(-400%);
}
}
.section-btn {
	width: 14px;
	position: fixed;
	right: 4%;
	top: 50%;
}
.section-btn li {
	width: 14px;
	height: 14px;
	cursor: pointer;
	text-indent: -9999px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	margin-bottom: 12px;
	background: #1883c5;
	text-align: center;
	color: #fff;
	onsor: pointer;
}
.section-btn li.on {
	background: #fff
}
.arrow {
	opacity: 1;
	animation: arrow 3s cubic-bezier(0.5, 0, 0.1, 1) infinite;
	-webkit-animation: arrow 3s cubic-bezier(0.5, 0, 0.1, 1) infinite;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	position: absolute;
	bottom: 10px;
	left: 50%;
	margin-left: -30px;
	width: 60px;
	height: 60px;
	border-radius: 100%;
	-webkit-border-radius: 100%;
	line-height: 60px;
	text-align: center;
	font-size: 20px;
	color: #fff;
	border: 1px solid #fff;
	cursor: pointer;
	overflow: hidden;
}
.arrow:hover {
	animation-play-state: paused;
	-webkit-animation-play-state: paused;
}
 @keyframes arrow {
%0, %100 {
bottom:10px;
opacity:1;
}
50% {
bottom:50px;
opacity:.5
}
}
 @-webkit-keyframes arrow {
%0, %100 {
bottom:10px;
opacity:1;
}
50% {
bottom:50px;
opacity:.5
}
}