@charset "utf-8";

body, html {

	position: relative;

	height: 100%

}

body {

	font-family: "微软雅黑", Helvetica, Arial, sans-serif;

	margin: 0;

	padding: 0;

	width: 100%;

	height: 100%

}

.swiper-container {

	width: 100%;

	height: 100%

}

.swiper-slide {

	width: 100%;

	height: 100%;

	overflow: hidden

}


.jpcp-1-logo {

	width: 3.45rem;

	height: 3.175rem;

	position: absolute;

	top: 1.075rem;

	left: 50%;

	margin-left: -1.725rem;

	background: url(../images/jpcp-1-logo-d2f69da129.png) no-repeat center center;

	background-size: 100% 100%

}

@keyframes puffInSma {

from {

opacity:0;

-moz-opacity:0;

-khtml-opacity:0;

-webkit-opacity:0;

-o-opacity:0;

transform-origin:50% 50%;

-webkit-transform-origin:50% 50%;

transform:scale(1.4, 1.4);

-webkit-transform:scale(1.4, 1.4);

filter:blur(1.4px);

-webkit-filter:blur(1.4px)

}

to {

	opacity: 1;

	-moz-opacity: 1;

	-khtml-opacity: 1;

	-webkit-opacity: 1;

	-o-opacity: 1;

	transform-origin: 50% 50%;

	-webkit-transform-origin: 50% 50%;

	transform: scale(1, 1);

	-webkit-transform: scale(1, 1);

	filter: blur(0);

	-webkit-filter: blur(0)

}

}

@-webkit-keyframes puffInSma {

from {

opacity:0;

-moz-opacity:0;

-khtml-opacity:0;

-webkit-opacity:0;

-o-opacity:0;

transform-origin:50% 50%;

-webkit-transform-origin:50% 50%;

transform:scale(1.4, 1.4);

-webkit-transform:scale(1.4, 1.4);

filter:blur(1.4px);

-webkit-filter:blur(1.4px)

}

to {

	opacity: 1;

	-moz-opacity: 1;

	-khtml-opacity: 1;

	-webkit-opacity: 1;

	-o-opacity: 1;

	transform-origin: 50% 50%;

	-webkit-transform-origin: 50% 50%;

	transform: scale(1, 1);

	-webkit-transform: scale(1, 1);

	filter: blur(0);

	-webkit-filter: blur(0)

}

}

.puffInSma {

	animation-name: puffInSma;

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

	-webkit-animation-name: puffInSma;

	animation-timing-function: ease-in-out

}


@-webkit-keyframes trans-down {

0% {

-webkit-transform:translate(-2.2rem, -2.2rem);

-moz-transform:translate(-2.2rem, -2.2rem);

transform:translate(-2.2rem, -2.2rem);

opacity:0

}

50% {

-webkit-transform:translate(.2rem, .56rem);

-moz-transform:translate(.2rem, .56rem);

transform:translate(.2rem, .56rem);

opacity:0

}

100% {

-webkit-transform:translate(1.175rem, 1.76rem);

-moz-transform:translate(1.175rem, 1.76rem);

transform:translate(1.175rem, 1.76rem);

opacity:1

}

}

@keyframes trans-down {

0% {

-webkit-transform:translate(-2.2rem, -2.2rem);

-moz-transform:translate(-2.2rem, -2.2rem);

transform:translate(-2.2rem, -2.2rem);

opacity:0

}

50% {

-webkit-transform:translate(.2rem, .56rem);

-moz-transform:translate(.2rem, .56rem);

transform:translate(.2rem, .56rem);

opacity:0

}

100% {

-webkit-transform:translate(1.175rem, 1.76rem);

-moz-transform:translate(1.175rem, 1.76rem);

transform:translate(1.175rem, 1.76rem);

opacity:1

}

}

.trans-down {

	animation-name: trans-down;

	-webkit-animation-duration: 1.35s;

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

	-webkit-animation-iteration-count: 1;

	-webkit-animation-name: trans-down;

	animation-duration: 1.35s;

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

	animation-iteration-count: 1

}

@-webkit-keyframes trans-up {

0% {

-webkit-transform:translate(16.2rem, 26.2rem);

-moz-transform:translate(16.2rem, 26.2rem);

transform:translate(16.2rem, 26.2rem);

opacity:0

}

50% {

-webkit-transform:translate(11.3rem, 23.1rem);

-moz-transform:translate(11.3rem, 23.1rem);

transform:translate(11.3rem, 23.1rem);

opacity:0

}

100% {

-webkit-transform:translate(8.825rem, 19rem);

-moz-transform:translate(8.825rem, 19rem);

transform:translate(8.825rem, 19rem);

opacity:1

}

}

@keyframes trans-up {

0% {

-webkit-transform:translate(16.2rem, 26.2rem);

-moz-transform:translate(16.2rem, 26.2rem);

transform:translate(16.2rem, 26.2rem);

opacity:0

}

50% {

-webkit-transform:translate(11.3rem, 23.1rem);

-moz-transform:translate(11.3rem, 23.1rem);

transform:translate(11.3rem, 23.1rem);

opacity:0

}

100% {

-webkit-transform:translate(8.825rem, 19rem);

-moz-transform:translate(8.825rem, 19rem);

transform:translate(8.825rem, 19rem);

opacity:1

}

}

.trans-up {

	animation-name: trans-up;

	-webkit-animation-duration: 1.5s;

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

	-webkit-animation-iteration-count: 1;

	-webkit-animation-name: trans-up;

	animation-duration: 1.5s;

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

	animation-iteration-count: 1

}


@keyframes swin {

20% {

transform:rotate3d(0, 0, 1, 10deg)

}

40% {

transform:rotate3d(0, 0, 1, -10deg)

}

60% {

transform:rotate3d(0, 0, 1, 5deg)

}

80% {

transform:rotate3d(0, 0, 1, -5deg)

}

to {

	transform: rotate3d(0, 0, 1, 0deg)

}

}

.swin {

	transform-origin: top center;

	animation-name: swin

}

.origin {

	transform-origin: 50% 50%

}

.jpcp-con {

	width: 18.75rem;

	height: 30.175rem;

	position: relative

}

@-webkit-keyframes rotateEle {

0% {

-webkit-transform:rotate(0);

-moz-transform:rotate(0);

-ms-transform:rotate(0);

-o-transform:rotate(0);

transform:rotate(0)

}

33% {

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-ms-transform:rotate(360deg);

-o-transform:rotate(360deg);

transform:rotate(360deg)

}

100%, 33% {

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-ms-transform:rotate(360deg);

-o-transform:rotate(360deg);

transform:rotate(360deg)

}

}

@keyframes rotateEle {

0% {

-webkit-transform:rotate(0);

-moz-transform:rotate(0);

-ms-transform:rotate(0);

-o-transform:rotate(0);

transform:rotate(0)

}

33% {

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-ms-transform:rotate(360deg);

-o-transform:rotate(360deg);

transform:rotate(360deg)

}

100%, 33% {

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-ms-transform:rotate(360deg);

-o-transform:rotate(360deg);

transform:rotate(360deg)

}

}

.rotateEle {

	-webkit-animation-name: rotateEle;

	animation-name: rotateEle;

	animation-timing-function: linear;

	-webkit-animation-timing-function: linear

}

@-webkit-keyframes rotateEle1 {

0%, 33% {

-webkit-transform:rotate(0);

-moz-transform:rotate(0);

-ms-transform:rotate(0);

-o-transform:rotate(0);

transform:rotate(0)

}

33% {

-webkit-transform:rotate(0);

-moz-transform:rotate(0);

-ms-transform:rotate(0);

-o-transform:rotate(0);

transform:rotate(0)

}

66% {

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-ms-transform:rotate(360deg);

-o-transform:rotate(360deg);

transform:rotate(360deg)

}

100%, 66% {

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-ms-transform:rotate(360deg);

-o-transform:rotate(360deg);

transform:rotate(360deg)

}

}

@keyframes rotateEle1 {

0%, 33% {

-webkit-transform:rotate(0);

-moz-transform:rotate(0);

-ms-transform:rotate(0);

-o-transform:rotate(0);

transform:rotate(0)

}

33% {

-webkit-transform:rotate(0);

-moz-transform:rotate(0);

-ms-transform:rotate(0);

-o-transform:rotate(0);

transform:rotate(0)

}

66% {

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-ms-transform:rotate(360deg);

-o-transform:rotate(360deg);

transform:rotate(360deg)

}

100%, 66% {

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-ms-transform:rotate(360deg);

-o-transform:rotate(360deg);

transform:rotate(360deg)

}

}

.rotateEle1 {

	-webkit-animation-name: rotateEle1;

	animation-name: rotateEle1;

	animation-timing-function: linear;

	-webkit-animation-timing-function: linear

}

@-webkit-keyframes rotateEle2 {

0%, 66% {

-webkit-transform:rotate(0);

-moz-transform:rotate(0);

-ms-transform:rotate(0);

-o-transform:rotate(0);

transform:rotate(0)

}

66% {

-webkit-transform:rotate(0);

-moz-transform:rotate(0);

-ms-transform:rotate(0);

-o-transform:rotate(0);

transform:rotate(0)

}

99% {

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-ms-transform:rotate(360deg);

-o-transform:rotate(360deg);

transform:rotate(360deg)

}

100%, 99% {

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-ms-transform:rotate(360deg);

-o-transform:rotate(360deg);

transform:rotate(360deg)

}

}

@keyframes rotateEle2 {

0%, 66% {

-webkit-transform:rotate(0);

-moz-transform:rotate(0);

-ms-transform:rotate(0);

-o-transform:rotate(0);

transform:rotate(0)

}

66% {

-webkit-transform:rotate(0);

-moz-transform:rotate(0);

-ms-transform:rotate(0);

-o-transform:rotate(0);

transform:rotate(0)

}

99% {

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-ms-transform:rotate(360deg);

-o-transform:rotate(360deg);

transform:rotate(360deg)

}

100%, 99% {

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-ms-transform:rotate(360deg);

-o-transform:rotate(360deg);

transform:rotate(360deg)

}

}

.rotateEle2 {

	-webkit-animation-name: rotateEle2;

	animation-name: rotateEle2;

	animation-timing-function: linear;

	-webkit-animation-timing-function: linear

}

@-webkit-keyframes showDown {

from {

top:-15rem

}

to {

	top: 1.75rem

}

}

@keyframes showDown {

from {

top:-15rem

}

to {

	top: 2rem

}

}

.showDown {

	-webkit-animation-name: showDown;

	animation-name: showDown;

	animation-timing-function: cubic-bezier(.19, .59, .12, .97);

	-webkit-animation-timing-function: cubic-bezier(.19, .59, .12, .97);

	-ms-animation-timing-function: cubic-bezier(.19, .59, .12, .97)

}


#music {

	position:fixed;

top:1rem;

left:.6rem;

	width: 1.325rem;

	height: 1.325rem;

	z-index: 888

}

#music #btn {

	width: 1.7rem;

	height: 1.7rem

}

#music .on {

	width: 1.7rem;

	height: 1.7rem;

	position: relative;

	background: url(../images/music_off1-1eba85021e.png) no-repeat 0 0;

	background-size: 100% 100%;

	-webkit-animation: rotating 1.2s linear infinite;

	animation: rotating 1.2s linear infinite;

	-moz-animation: rotating 1.2s linear infinite;

	-o-animation: rotating 1.2s linear infinite

}

#music .off {

	width: 1.7rem;

	height: 1.7rem;

	background: url(../images/music_off-dbe97553d2.png) no-repeat 0 0;

	background-size: 100% 100%

}

@-webkit-keyframes rotating {

from {

-webkit-transform:rotate(0);

-moz-transform:rotate(0);

-ms-transform:rotate(0);

-o-transform:rotate(0);

transform:rotate(0)

}

to {

	-webkit-transform: rotate(360deg);

	-moz-transform: rotate(360deg);

	-ms-transform: rotate(360deg);

	-o-transform: rotate(360deg);

	transform: rotate(360deg)

}

}

@keyframes rotating {

from {

-webkit-transform:rotate(0);

-moz-transform:rotate(0);

-ms-transform:rotate(0);

-o-transform:rotate(0);

transform:rotate(0)

}

to {

	-webkit-transform: rotate(360deg);

	-moz-transform: rotate(360deg);

	-ms-transform: rotate(360deg);

	-o-transform: rotate(360deg);

	transform: rotate(360deg)

}

}