* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 18px
}

@media only screen and (min-width:360px) {
	html {
		font-size: 20px !important
	}
}

@media only screen and (min-width:375px) {
	html {
		font-size: 21px !important
	}
}

@media only screen and (min-width:400px) {
	html {
		font-size: 23px !important
	}
}

@media only screen and (min-width:414px) {
	html {
		font-size: 23px !important
	}
}

@media only screen and (min-width:480px) {
	html {
		font-size: 27px !important
	}
}

@media only screen and (min-width:540px) {
	html {
		font-size: 34px !important
	}
}

@media only screen and (min-width:640px) {
	html {
		font-size: 36px !important
	}
}

@media only screen and (min-width:768px) {
	html {
		font-size: 44px !important
	}
}

@media only screen and (min-width:960px) {
	html {
		font-size: 55px !important
	}
}

@media only screen and (min-width:1024px) {
	html {
		font-size: 59px !important
	}
}

html,
body,
. {
	width: 100%;
	height: 100%;
}

.container {
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}

.container .header {
	height: 3.28rem;
	overflow: hidden;
	background: url(../Images/head-bg.jpg) repeat-x;
	background-size: auto 100%;
}

.header img,
.header h4 {
	float: left;
}

.header img {
	width: 2.67rem;
	height: 2.67rem;
	margin: 0.28rem;
	margin-right: 0.4rem;
}

.header h4 {
	padding-top: 0.5rem;
}

.header h4 p {
	font-size: 0.76rem;
	line-height: 1.24rem;
	color: #fff;
}

.header h4 span {
	font-size: 0.6rem;
	color: #7f7f7f;
	vertical-align: top;
}

.header button {
	float: right;
	width: 3.28rem;
	height: 3.28rem;
	background: url(../Images/return.png) center no-repeat;
	background-size: 1rem auto;
	border: none;
}

.header button a {
	width: 3.28rem;
	height: 3.28rem;
	display: flex;
}

.header button:focus{
	outline: none;
}

.main img {
	width: 100%;
	display: block;
	border: none;
}

.photoIntroduction .content{
	position: relative;
}

.rotationChart {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 2rem);
}

.screen {
	width: 13.5rem;
	height: 13.5rem;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	background: url(../Images/img-bg.png) no-repeat;
	background-size: 100%;
}

.screen li {
	width: 13.5rem;
	/* height: 18.2rem; */
	overflow: hidden;
	padding: 0.2rem;
	float: left;
}

.screen .pic {
	width: 13.5rem;
	/* height: 18.2rem; */
	overflow: hidden;
	padding: 0;
	float: left;
	position: relative;
	top: 8px;
}

.screen .pic img {
	width: 90%;
	text-align: center;
	margin: 0 auto;
	border-radius: 2px;
}

.screen ul {
	position: absolute;
	left: 0;
	top: 0;
	width: 10000px;
}

.screen .iosul{
	position: absolute;
	left: 0;
	top: -28px;
	width: 10000px;
}

.rotationChart ol {
	position: absolute;
	left: 50%;
	bottom: 92px;
	line-height: 20px;
	text-align: center;
	transform: translateX(-50%);
}

.rotationChart ol li {
	float: left;
	width: 0.34rem;
	height: 0.34rem;
	margin-left: 0.5rem;
	background: url(../Images/20-2.png) no-repeat;
	background-size: 100%;
}

.rotationChart ol li:first-child{
	margin-left: 0;
}

.rotationChart ol li.current {
	background: url(../Images/20.png) no-repeat;
	background-size: 100%;
	transform: scale(1.5);
}

.arr{
	z-index: 999;
	height: 2.6rem;
	width: 100%;
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
}

.arr span{
	width: 2.6rem;
	height: 2.6rem;
	position: absolute;
	left: 0rem;
	top: 0;
	background: url(../Images/left-button.png) center no-repeat;
	background-size: 1.3rem;
}

.arr .right {
	right: 0rem;
	left: auto;
	background: url(../Images/right-button.png) center no-repeat;
	background-size: 1.3rem;
}

.download {
	position: relative;
}

.download .bg {
	width: 100%;
	height: 100%;
}

.download .qrCode {
	width: 4.5rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.footer {
	/* height: 3.28rem; */
	overflow: hidden;
	text-align: center;
	background: url(../Images/footer-bg.jpg) repeat-x;
	background-size: auto 100%;
}

.footer i,
.footer div{
	display: inline-block;
	font-size: 0;
}

.footer i{
	width: 3.4rem;
	height: 3.28rem;
	background: url(../Images/logo.png) center no-repeat;
	background-size: 100%;
}

.footer div{
	vertical-align: top;
	padding: 0.6rem 0;
}

.footer div p{
	text-align: left;
	height: 1rem;
}

.footer div span{
	font-size: 0.6rem;
	line-height: 1rem;
	color: #fff;
	float: left;
	margin-left: 0.4rem;
}