/* 横屏时样式 */
.transverse-tips {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 999;
}
.transverse-text {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	font-size: 2rem;
}
 /* 肖像（坚屏）模式 */
@media only screen and (orientation: portrait) {
	.transverse-tips {
		display: none;
	}
}

/* 全景（横屏）模式 */
@media screen and (orientation: landscape) {
	.transverse-tips {
		display: block;
	}
}

body {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 320px;
	color: #777;
	max-width: 640px;
	margin: 0 auto;
}

html,
button,
input,
select,
textarea,
.pure-g [class *="pure-u"] {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.02em;
}

.dn {
	display: none;
}

p,
td {
	line-height: 1.5;
}

ul {
	padding: 0 0 0 20px;
}

th {
	background: #eee;
	white-space: nowrap;
}

th,
td {
	padding: 10px;
	text-align: left;
	vertical-align: top;
	font-size: .9em;
	font-weight: normal;
	border-right: 1px solid #fff;
}

td:first-child {
	white-space: nowrap;
	color: #008000;
	width: 1%;
	font-style: italic;
}

h1,
h2 {
	color: #4b4b4b;
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 300;
	margin: 0 0 1.2em;
}

h1 {
	font-size: 4.5em;
	color: #1f8dd6;
	margin: 0 0 .4em;
}

h2 {
	font-size: 2em;
	color: #636363;
}

/*h3 { font-size: 1.8em; color: #4b4b4b; margin: 1.8em 0 .8em }
        h4 { font: bold 1em sans-serif; color: #636363; margin: 4em 0 1em; }*/
a {
	color: #4e99c7;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

p,
pre {
	margin: 0 0 1.2em;
}

::selection {
	color: #fff;
	background: #328efd;
}

::-moz-selection {
	color: #fff;
	background: #328efd;
}

@media (max-width:480px) {
	h1 {
		font-size: 3em;
	}

	h2 {
		font-size: 1.8em;
	}

	h3 {
		font-size: 1.5em;
	}

	td:first-child {
		white-space: normal;
	}
}
.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 4;
	background-color: rgba(0, 0, 0, .6);
	overflow: hidden;
	z-index: 50;
	overflow: hidden;
}
.loading-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	background-color: #fff;
	/* width: 12rem;
	height: 14rem; */
	border-radius: 1rem;
	padding: 1rem;
}
.loading-inner img {
	display: block;
	width: 2rem;
	margin: 0 auto;
}
.loading-inner p {
	margin: 0;
}

.tips {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: rgba(0,0,0,.5);
    padding: 3% 4%;
    font-size: 1.2rem;
    color: #fff;
    border-radius: .5rem;
	z-index: 99;
}
/* Pure CSS */

.pure-button {
	margin: 5px 0;
	text-decoration: none !important;
}

.button-lg {
	margin: 5px 0;
	padding: .65em 1.6em;
	font-size: 105%;
}
/* required snapPuzzle styles */
.snappuzzle-wrap {
	position: relative;
	display: block;
}

.snappuzzle-pile {
	position: relative;
}

.snappuzzle-piece {
	cursor: move;
}

.snappuzzle-slot {
	position: absolute;
	background: #fff;
	opacity: .8;
}

.snappuzzle-slot-hover {
	background: #eee;
}


/* 开始页面 */
.page-start {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 3;
	background-color: #bae8ffff ;
}

.btn-start {
	position: fixed;
	width: 12rem;
	height: 3.5rem;
	text-align: center;
	line-height: 3.5rem;
	bottom: 10%;
	left: 50%;
	margin-left: -6rem;
	
}
/* 放大缩小动画 */
@-webkit-keyframes scaleDraw {

	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	25% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
	50% {
		-webkit-transform: scale(1);
		transform: scale(1);

	}
	75% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
}
/* 旋转动画 */
@-webkit-keyframes rotation {

	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.btn-start img {
	width: 100%;
	-webkit-transform: scale(1);
	animation: scaleDraw 5s ease-in-out infinite;
	-moz-animation: scaleDraw 5s ease-in-out infinite;
	-webkit-animation: scaleDraw 5s ease-in-out infinite;
	-o-animation: scaleDraw 5s ease-in-out infinite;
}
.home-bottom {
	position: absolute;
	width: 100%;
	bottom: -1rem;
	z-index: -1;
}
.home-bottom img {
	width: 100%;
}
.home-logo {
	position: absolute;
	left: 1rem;
	top: 1rem;
	width: 6rem;
}
.home-logo img {
	width: 100%;
}
.home-title {
	/* position: absolute; */
	width: 80%;
	/* top: 10%;
	left: 50%; */
	/* transform: translate(-50%, -10%);
	-webkit-transform: translate(-50%, -10%); */
	z-index: 2;
	margin: 4rem auto;
}
.home-title img {
	width: 100%;
}
.home-sun {
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}
.home-sun img {
	width: 100%;
}
.page-start .home-cloud {
	position: absolute;
	top: 20%;
	width: 100%;
}
.page-start .home-cloud img {
	width: 100%;
}



/* 选择页面 */
.swiper {
	width: 100%;
	height: 100%;
	border: .6rem solid #076D44;
	border-radius: .5rem;
}

.swiper-slide {
	position: relative;
	text-align: center;
	font-size: 18px;
	background: #fff;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.swiper-slide .pic {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swiper-slide .title {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 3.4rem;
	background-image: url('../img/select_title_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	
}
.swiper-slide .title img {
	height: 72%;
}
.swiper-button-next {
	/* width: 1.25rem; */
	height: 3.6rem;
	right: 0;
	background-image: url('../img/btn_next.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
}
.swiper-button-prev {
	height: 3.6rem;
	left: 0;
	background-image: url('../img/btn_prev.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
}
.swiper-button-next::after,
.swiper-button-prev::after {
	content: none;
}

/* .swiper-button-prev.swiper-button-disabled {
	background-image: url('../img/btn_prev_no.png');
}
.swiper-button-next.swiper-button-disabled {
	background-image: url('../img/btn_next_no.png');
} */
.select-box {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 4;
	background-color: rgba(0, 0, 0, .6);
	overflow: hidden;
	
}
.select-out {
	position: relative;
	width: 90%;
	height: 100vh;
	top: 0;
	left: 50%;
	padding: .6rem;
	background-image: url('../img/select_bg.png');
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	ransform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
}
.select-inner {
	position: relative;
	width: 100%;
	/* height: 94vw; */
	top: 54%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}
.btn-back {
	position: absolute;
	width: 2.5rem;
	right: 1%;
	top: -40%;
	color: #fff;
}
.btn-back img {
	width:100%;
}
.btn-yes {
	position: absolute;
	left: 50%;
	bottom: -21%;
	width: 12rem;
	height: 3.5rem;
	transform: translate(-50%, -10%);
	-webkit-transform: translate(-50%, -10%);
}
.btn-yes img {
	width: 100%;
}

/* 拼图页面 */
.pin-title {
	/* position: absolute; */
	width: 80%;
	/* top: 10%;
	left: 50%; */
	/* transform: translate(-50%, -10%);
	-webkit-transform: translate(-50%, -10%); */
	z-index: 2;
	margin: 4rem auto;
}
.pin-title img {
	width: 100%;
}
.contaitner-box {
	position: fixed;
	width: 100%;
	height: 100vh;
	background-color: #bae8ffff ;
	overflow: hidden;
}
.pin-box {
	position: absolute;
	width: 100%;
	top: 58%;
	left: 50%;
	transform: translate(-50%, -55%);
	-webkit-transform: translate(-50%, -55%);
}
.pure-g {
	position: relative;
}
.piece {
	position: absolute;
	top: 23rem;
	left: 0;
	z-index: 9;
}
.frame {
	/* padding: .5rem; */
	
}
.frame-inner {
	border: .6rem solid #076D44;
	border-radius: .5rem;
}
.pin-tree {
	position: absolute;
	width: 10rem;
	top: -19%;
	left: .5rem;
}
.pin-tree img {
	width: 100%;
}
.countdown {
	position: absolute;
	top: -16%;
	right: .5rem;
	/* width: 7.5rem; */
	height: 3rem;
	background-color: #3b9158;;
	background-image: url('../img/djs_z.png');
	background-size: auto 100%;
	background-position: center left;
	background-repeat: no-repeat;
	line-height: 2rem;
	padding-left: 5rem;
	padding-right: 1rem;
	color: #fff;
	font-size: 1.5rem;
	font-style: italic;
	border: .5rem solid #076d44;
	border-radius: .8rem;
}
.countdown .second {
	color: #ffb65b;
	font-size: 2rem;
	font-weight: bold;
}
/* 结果页面 */
.puzzle_solved {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, .6);
	z-index: 20;
	
}
.puzzle_solved_inner {
	position: absolute;
	top: 45%;
	left: 50%;
	width: 100%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}
.success-failed-box {
	position: relative;
	width: 100%;
	padding: 8rem 2rem;
}
.success-failed-box img {
	width: 100%;
}
.failed-guang {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	-webkit-transform: scale(1);
	animation: rotation 5s linear infinite;
	-moz-animation: rotation 5s linear infinite;
	-webkit-animation: rotation 5s linear infinite;
	-o-animation: rotation 5s linear infinite;
}
.restart-puzzle {
	display: block;
	width: 12rem;
	margin: 0 auto;
}
.restart-puzzle img {
	width: 100%;
}

/* 分享 */
.save-box {
	position: fixed;
	top: 0;
	left: -150rem;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, .6);
	z-index: 21;
}
.save-pic-box {
	position: relative;
	top: 0;
	left: -150rem;
	height: 153vw;
}
.save-pic-bg {
	position: absolute;
	top: 0;
	text-align: center;
}
.save-pic-bg img {
	width: 96%;
}
.save-out {
	position: relative;
	width: 92%;
	height: 100%;
	z-index: 1;
	margin: 0 auto;
}
.save-inner {
	position: absolute;
	top: 53%;
	left: 50%;
	width: 100%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%, -50%);
	border: .5rem solid #076d44;
	border-radius: .8rem;
	text-align: center;
	/* overflow: hidden; */
}
.save-inner .pic {
	width: 100%;
}

.save-inner .title {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 3.4rem;
	background-image: url('../img/select_title_bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
}
.save-inner .title img {
	height: 72%;
}
.qr-code {
	position: absolute;
	left: 50%;
	top: 84%;
	width: 5rem;
	height: 5rem;
	transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	z-index: 22;
}
.qr-code img {
	width: 100%;
	height: 100%;
}
.save-vr-box {
	/* position: absolute;
	bottom: 1%; */
	display: flex;
	width: 100%;
	justify-content: center;
}
.save-vr-box .save-btn,
.save-vr-box .vr-btn {
	display: block;
	width: 44%;
}
.save-vr-box .save-btn img,
.save-vr-box .vr-btn img {
	width: 100%;
}
.imgDiv {
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 999;
}
.imgDiv img {
	width: 100%;
}
.left0 {
	left: 0 !important;
}

@media only screen and (min-device-width: 320px)  and (max-device-width: 375px)  and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { 
	.btn-back {
		width: 2.1rem;
	}
	.btn-yes {
		width: 10rem;
		height: 2.5rem;
	}
	.btn-start {
		width: 10rem;
		margin-left: -5rem;
	}
	.restart-puzzle {
		width: 10rem;
	}
	.pin-title {
		width: 60%;
		margin: 0;
		margin-left: 8rem;
		margin-top: 1rem;
	}
	.piece {
		top: 16rem;
	}
}
@media only screen 
    and (max-device-width : 414px)
    and (width : 414px)
    and (height : 736px)
    and (orientation : portrait) 
    and (device-aspect-ratio : 414/736)
    and (device-pixel-ratio : 3)
    and (-webkit-min-device-pixel-ratio : 3)
    { 
		.pin-title {
			width: 60%;
			margin: 0;
			margin-left: 8rem;
			margin-top: 1rem;
		}
	}
@media only screen and (min-device-width: 360px)  and (max-device-width: 740px)  and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { 
	
}

@media only screen and (min-device-width: 375px)  and (max-device-width: 667px)  and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { 
	.pin-box {
		top: 53%;
	}
}

@media only screen and (min-device-width: 414px)  and (max-device-width: 896px)  and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { 
	
}