@-webkit-keyframes slideInUp {
	0% {
		transform: translate3d(0, 100%, 0);
		visibility: visible
	}
	to {
		transform: translateZ(0)
	}
}

@keyframes slideInUp {
	0% {
		transform: translate3d(0, 100%, 0);
		visibility: visible
	}
	to {
		transform: translateZ(0)
	}
}

.slideInUp {
	-webkit-animation-name: slideInUp;
	animation-name: slideInUp
}

.wordsLoop {
	display: inline-block;
	white-space: nowrap;
	-webkit-animation: wordsLoop 5s linear infinite normal;
	animation: wordsLoop 5s linear infinite normal
}

@keyframes wordsLoop {
	0% {
		transform: translateX(100%);
		-webkit-transform: translateX(100%)
	}
	to {
		transform: translateX(-100%);
		-webkit-transform: translateX(-100%)
	}
}

@-webkit-keyframes wordsLoop {
	0% {
		transform: translateX(100%);
		-webkit-transform: translateX(100%)
	}
	to {
		transform: translateX(-100%);
		-webkit-transform: translateX(-100%)
	}
}

.animate_img_1 {
	position: absolute;
	-webkit-animation-name: fadeInOut;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 2s;
	-webkit-animation-direction: alternate;
	animation-name: fadeInOut;
	animation-iteration-count: infinite;
	animation-duration: 2s;
	animation-direction: alternate
}

.animate_img_2 {
	position: absolute;
	-webkit-animation-name: fadeOutIn;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 2s;
	-webkit-animation-direction: alternate;
	animation-name: fadeOutIn;
	animation-iteration-count: infinite;
	animation-duration: 2s;
	animation-direction: alternate
}

@-webkit-keyframes fadeInOut {
	0% {
		opacity: 1
	}
	to {
		opacity: 0
	}
}

@keyframes fadeInOut {
	0% {
		opacity: 1
	}
	to {
		opacity: 0
	}
}

@-webkit-keyframes fadeOutIn {
	0% {
		opacity: 0
	}
	to {
		opacity: 1
	}
}

@keyframes fadeOutIn {
	0% {
		opacity: 0
	}
	to {
		opacity: 1
	}
}

@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translate3d(100%, 0, 0)
	}
	to {
		opacity: 1;
		transform: translateZ(0)
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translate3d(100%, 0, 0)
	}
	to {
		opacity: 1;
		transform: translateZ(0)
	}
}

.fadeInRight {
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight
}

.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft
}

@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-2.66667vw)
	}
	to {
		opacity: 1;
		transform: translateX(0)
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-2.66667vw)
	}
	to {
		opacity: 1;
		transform: translateX(0)
	}
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0
	}
	to {
		opacity: 1
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0
	}
	to {
		opacity: 1
	}
}

.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn
}

@-webkit-keyframes flowerSlideUp {
	0% {
		transform: scale(1)
	}
	to {
		transform: scale(.5);
		bottom: 25%
	}
}

@keyframes flowerSlideUp {
	0% {
		transform: scale(1)
	}
	to {
		transform: scale(.5);
		bottom: 25%
	}
}

@-webkit-keyframes xiangSlideUp {
	0% {
		transform: scale(1)
	}
	to {
		transform: scale(.4);
		bottom: 25%
	}
}

@-webkit-keyframes flame {
	0% {
		height: 9.33333vw;
		transform: skewY(0deg)
	}
	25% {
		height: 8vw;
		transform: skewY(40deg)
	}
	60% {
		height: 8.66667vw;
		transform: skewY(-20deg)
	}
	70% {
		height: 6.66667vw;
		transform: skewY(10deg)
	}
	to {
		height: 9.33333vw;
		transform: skewY(0deg)
	}
}

@keyframes flame {
	0% {
		height: 9.33333vw;
		transform: skewY(0deg)
	}
	25% {
		height: 8vw;
		transform: skewY(40deg)
	}
	60% {
		height: 8.66667vw;
		transform: skewY(-20deg)
	}
	70% {
		height: 6.66667vw;
		transform: skewY(10deg)
	}
	to {
		height: 9.33333vw;
		transform: skewY(0deg)
	}
}

@keyframes xiangSlideUp {
	0% {
		transform: scale(1)
	}
	to {
		transform: scale(.25);
		bottom: 23.80952%
	}
}

@-webkit-keyframes fadeOutLeft {
	0% {
		opacity: 1;
		transform: translateX(0)
	}
	to {
		opacity: 0;
		transform: translateX(-2.66667vw)
	}
}

@keyframes fadeOutLeft {
	0% {
		opacity: 1;
		transform: translateX(0)
	}
	to {
		opacity: 0;
		transform: translateX(-2.66667vw)
	}
}

.fadeOutLeft {
	-webkit-animation-name: fadeOutLeft;
	animation-name: fadeOutLeft
}

@-webkit-keyframes fadeOutRight {
	0% {
		opacity: 1;
		transform: translateX(0)
	}
	to {
		opacity: 0;
		transform: translateX(2.66667vw)
	}
}

@keyframes fadeOutRight {
	0% {
		opacity: 1;
		transform: translateX(0)
	}
	to {
		opacity: 0;
		transform: translateX(2.66667vw)
	}
}

.fadeOutRight {
	-webkit-animation-name: fadeOutRight;
	animation-name: fadeOutRight
}

@-webkit-keyframes fadeOut {
	0% {
		opacity: 1
	}
	to {
		opacity: 0
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1
	}
	to {
		opacity: 0
	}
}

.fadeOut {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut
}

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}

.animated.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}

.animated.delay-0P5s {
	-webkit-animation-delay: .5s;
	animation-delay: .5s
}

.animated.delay-1s {
	-webkit-animation-delay: 1s;
	animation-delay: 1s
}

.animated.delay-1P5s {
	-webkit-animation-delay: 1.5s;
	animation-delay: 1.5s
}

.animated.delay-2s {
	-webkit-animation-delay: 2s;
	animation-delay: 2s
}

.animated.delay-2P5s {
	-webkit-animation-delay: 2.5s;
	animation-delay: 2.5s
}

.animated.delay-3s {
	-webkit-animation-delay: 3s;
	animation-delay: 3s
}

.animated.delay-3P5s {
	-webkit-animation-delay: 3.5s;
	animation-delay: 3.5s
}

.animated.delay-4s {
	-webkit-animation-delay: 4s;
	animation-delay: 4s
}

.animated.delay-4P5s {
	-webkit-animation-delay: 4.5s;
	animation-delay: 4.5s
}

.animated.delay-5s {
	-webkit-animation-delay: 5s;
	animation-delay: 5s
}

.animated.fast {
	-webkit-animation-duration: .8s;
	animation-duration: .8s
}

.animated.faster {
	-webkit-animation-duration: .5s;
	animation-duration: .5s
}

.animated.slow {
	-webkit-animation-duration: 2s;
	animation-duration: 2s
}

.animated.slower {
	-webkit-animation-duration: 3s;
	animation-duration: 3s
}

.opacity0 {
	opacity: 0
}

.opacity1 {
	opacity: 1
}

.baizu .title {
	padding: 9.33333vw 13.33333vw 0 14.4vw
}

.baizu .hdx {
	position: fixed;
	top: 33.33333vw
}

@-webkit-keyframes slideInDown {
	0% {
		opacity: 0
	}
	to {
		opacity: 1
	}
}

@keyframes slideInDown {
	0% {
		opacity: 0
	}
	to {
		opacity: 1
	}
}

.slideInDown {
	-webkit-animation-name: slideInDown;
	animation-name: slideInDown
}

.baizu {
	background: url(bg.jpg) top no-repeat;
	background-size: cover
}

@media screen and (max-width:320px) {
	.baizu {
		background: url(bg.jpg) top no-repeat;
		background-size: cover;
		width: 100%;
		height: 100%;
		overflow: hidden
	}
	.hdx,
	.title {
		display: none
	}
}

.btns.fl {
	position: absolute;
	width: 21.6vw;
	height: 21.86667vw
}

.btns.fl img {
	width: 100%;
	height: 100%
}

.btns.jxyc {
	top: 50%;
	width: 12.13333vw;
	height: 31.33333vw;
	transform: translate(-50%, -50%);
	right: -6.13333vw;
	margin-top: 8vw
}

.btns.xh {
	bottom: 23.46667vw;
	left: 8.8vw
}

.btns.sx {
	bottom: 23.46667vw;
	left: 39.46667vw
}

.btns.qf {
	bottom: 23.46667vw;
	right: 8.8vw
}

.btns.bz {
	left: 15.33333vw
}

.btns.bz,
.btns.bzjnz {
	width: 31.33333vw;
	height: 18.4vw;
	bottom: 2.93333vw
}

.btns.bzjnz {
	right: 15.33333vw
}

.juanBox {
	box-sizing: border-box;
	width: 86.66667vw;
	margin: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-top: 9.06667vw;
	z-index: 3;

}

.juan {
	box-sizing: inherit;
	width: inherit;
	position: relative;
	margin: auto
}

.juan,
.wrap {
	height: 41.33333vw
}


.btn_container{
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: rgba(0,0,0,0.5);
}

.wrap {
	box-sizing: border-box;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
		background: url(juan.31de6009.png) no-repeat center 50%;
	background-size: 100% 100%;
	text-align: center;
	z-index: 3;
	-webkit-animation: leftSpread 2s ease forwards;
	animation: leftSpread 2s ease forwards
}

.wrap .items {
	margin: 0 auto;
	margin-left: 16vw;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	-webkit-writing-mode: tb-lr;
	-ms-writing-mode: tb-lr;
	writing-mode: tb-lr
}

.wrap .items div {
	font-size: 3.73333vw;
	color: #ffe6b7;
	letter-spacing: 1.33333vw;
	margin: 0 1.6vw;
	height: 41.33333vw
}

.wrap .items div.big {
	font-size: 5.33333vw
}

.wrap .items div img {
	width: 3.6vw;
	height: 4vw;
	vertical-align: baseline
}

.juanMask {
	box-sizing: border-box;
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: 100%;
	height: 41.33333vw;
	background: url(../img/juan.31de6009.png) no-repeat 50%;
	background-size: 100% 100%
}

@-webkit-keyframes leftSpread {
	0% {
		width: 0
	}
	to {
		width: 100%
	}
}

@keyframes leftSpread {
	0% {
		width: 0
	}
	to {
		width: 100%
	}
}

.mask {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	background: rgba(0, 0, 0, .38)
}

.close,
.mask {
	position: absolute
}

.close {
	width: 6.4vw;
	height: 6.4vw;
	top: 110%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3
}

.home {
	position: absolute;
	top: 8vw;
	left: 4vw;
	width: 8vw;
	height: 8vw;
	z-index: 2
}

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

@media screen and (min-height:500px) {
	.baizu .hdx {
		top: 38vw
	}
	.btns.jxyc,
	.juanBox {
		margin-top: 4vw
	}
}

@media screen and (min-height:737px) {
	.btns.jxyc {
		margin-top: -5vw
	}
	.juanBox {
		margin-top: -4vw
	}
	.btns.qf,
	.btns.sx,
	.btns.xh {
		bottom: 58vw
	}
	.btns.bz,
	.btns.bzjnz {
		bottom: 35vw
	}
}