* {
	-webkit-overflow-scrolling: touch;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-text-size-adjust: none;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
	margin: 0;
	padding: 0;
}

header,
footer,
section,
article,
aside,
nav,
hgroup,
address,
figure,
figcaption,
menu,
details {
	display: block;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption,
th {
	text-align: left;
	font-weight: normal;
}

html,
body,
fieldset,
img,
iframe,
abbr {
	border: 0;
}

i,
cite,
em,
var,
address,
dfn {
	font-style: normal;
}

[hidefocus],
summary {
	outline: 0;
}

li {
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
small {
	font-size: 100%;
}

sup,
sub {
	font-size: 83%;
}

pre,
code,
kbd,
samp {
	font-family: inherit;
}

q:before,
q:after {
	content: none;
}

textarea {
	overflow: auto;
	resize: none;
}

label,
summary {
	cursor: default;
}

a,
button {
	cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6,
em,
strong,
b {
	font-weight: bold;
}

del,
ins,
u,
s,
a,
a:hover {
	text-decoration: none;
}

body,
textarea,
input,
button,
select,
keygen,
legend {
	font: 12px/1.14 arial, \5b8b\4f53;
	color: #333;
	outline: 0;
}

body {
	background: #fff;
}

a,
a:hover {
	color: #333;
}

input {
	border: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	/*解决ios上按钮的圆角问题*/
	border-radius: 0;
	/*解决ios上输入框圆角问题*/
	outline: medium;
	/*去掉鼠标点击的默认黄色边框*/
	background-color: transparent;

	&:-webkit-autofill {
		-webkit-box-shadow: 0 0 0px 1000px white inset;
	}

	&[type=number] {
		-moz-appearance: textfield;
	}

	&[type=number]::-webkit-inner-spin-button,
	&[type=number]::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
}

button{
	border: none;
}


/* --- 自定义公共样式 flex布局 --- */
.fullWidth{width: 100% !important;}
.flex {display:flex !important;}
.flex-direction {flex-direction:column;}
.flex1 {flex: 1;}
.flex-wrap {flex-wrap:wrap;}
.flex-nowrap {flex-wrap:nowrap;}
.flex-shrink0{flex-shrink: 0;}
.align-start {align-items:flex-start;}
.align-end {align-items:flex-end;}
.align-center {align-items:center;}
.align-stretch {align-items:stretch;}
.self-start {align-self:flex-start;}
.self-center {align-self:flex-center;}
.self-end {align-self:flex-end;}
.self-stretch {align-self:stretch;}
.align-stretch {align-items:stretch;}
.justify-start {justify-content:flex-start;}
.justify-end {justify-content:flex-end;}
.justify-center {justify-content:center;}
.justify-between {justify-content:space-between;}
.justify-around {justify-content:space-around;}
.cursor-pointer {cursor: pointer;}
.radius{border-radius: 50%;}
.radius-sm{border-radius: 4px;}
.radius-xl{border-radius: 11px;}
/* --- 自定义公共样式 text 字体大小 --- */
.text-xs {font-size:10px !important;}
.text-sm {font-size:12px !important;}
.text-df {font-size:14px !important;}
.text-lg {font-size:16px !important;}
.text-xl {font-size:18px !important;}
.text-xxl {font-size:20px !important;}
.text-xxxl {font-size:30px !important;}
.text-sl {font-size:40px !important;}
.text-xsl {font-size:80px !important;}
.text-bold {font-weight:bold !important;}
.text-bold-xs {font-weight:500 !important;}
.text-bold-sm {font-weight:600 !important;}
.text-center {text-align:center !important;}
.text-red {color: #e60012 !important;}
.text-white{color: #ffffff !important;}
.text-black-xs {color: #999999 !important;}
.text-black-lg {color: #666666 !important;}
.text-black-sm{color: #222222 !important;}
.text-black-xl{color: #333333 !important;}
.text-black {color: #000000 !important;}
.text-blue {color: #117CFF !important;}
.text-grey{color: #999999 !important;;}
.text-cut {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: 100%;}
.text-cut-2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.line-height-xs{line-height: 18px;}
.line-height{line-height: 25px;}
.line-height-lg{line-height: 30px;}

/* 初始化结束 */
body,html{
	-webkit-text-size-adjust: 100% !important;
	-webkit-text-size-adjust: none;
	width: 100%;
	height: 8.12rem;
	overflow-x: hidden;
	position: relative;
}
body{
	background: url('../img/background.png') no-repeat;
	overflow-x: hidden;
	width: 3.75rem;
	height: 8.12rem;
	background-size: 100%;
}
.begin-images{
	position: absolute;
	left: 0;
	top: 5.2rem;
	width: 3.75rem;
	
}
.images-position{
	display: none;
	margin-top: 0.6rem;
}
.images-final{
	display: none;
}
#images-final-img{
	width: 100%;
}
.choice-images{
	display: none;
}
.img-box{
	width: 2.6rem;
	height: 4rem;
	position: relative;
	overflow: hidden;
}
.img-wapper{
	width: 2.6rem;
	height: 4rem;
	position: absolute;
	z-index: 1;
}
.upload-images{
	width: 2.6rem;
	height: 4rem;
	position: absolute;
	padding: 0.2rem;
	box-sizing: border-box;
	z-index: 2;
	background: rgba(0,0,0,0.5);
}
.upload-images-dwn{
	width: 100%;
	height: 100%;
	z-index: 3;
	background: url('../img/upload.png');
	background-size: 100% 100%;
	background-position: center;
}
#move{
	position: absolute;
	width: 2.6rem;
	transform:scale(1);
}
.national-button{
	width: 1.1rem;
	height: .32rem;
	text-align: center;
	font-size: .15rem;
	background: url('../img/national-day-button.png') no-repeat;
	background-size: 100% 100%;
	font-weight: 900;
	font-family: STSongti-SC-Black, STSongti-SC;
	color: #FFFFFF;
}

.swiper-container {
	margin-top:3.5rem;
	width: 3.75rem;
	height: 3.64rem;
}
.swiper-button-wapper{
	position: absolute;
	top: -0.5rem;
	left: 0;
	width: 3.75rem;
	color: #FFFFFF;
	padding: 0 0.76rem;
}
.swiper-button-prev,.swiper-button-next{
	position: relative;
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.swiper-button-prev:after, .swiper-button-next:after{
	padding: 0;
	color: #FFFFFF;
	font-size: 0.16rem;
}
.swiper-slide {
	text-align: center;
	width: 2.24rem;
	height: 3.64rem;
	background-color: #FFFFFF;
}
.swiper-img-wapper{
	width: 2.24rem;
	height: 3.64rem;
}
.back-button{
	width: 0.28rem;
	height: 0.22rem;
	margin-bottom: 0.5rem;
}
.wapper-text{
	width: 0.14rem;
	color: #FFFFFF;
	font-size: 0.14rem;
	word-wrap: break-word;
	word-break:break-all;
	line-height: 0.2rem;
}
.audio{
	position: absolute;
	width: 0.25rem;
	height: 0.25rem;
	right: 0.1rem;
	top: 0.1rem;
}
.music{
	width: 0.25rem;
	height: 0.25rem;
}
.music-rotate{
		animation: musicAnimation 5s infinite linear;
}
.music-rotate-pause{
	animation-play-state:paused;
}
@keyframes musicAnimation{
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}
.select_contact{
	width: 3.18rem;
	height: 0.3rem;
	background: #FFFFFF;
	border-radius: 4px;
	margin-bottom: 0.1rem;
}
header{
	position: relative;
}
.move-text{
	display: none;
	position: absolute;
	z-index: 2;
}
.move-wapper1{
	bottom: 0.2rem;
	left: 0.1rem;
	font-size: 0.1rem;
	width: 1.5rem;
	color: #221815;
}
.move-wapper2{
	bottom: 0.2rem;
	left: 0.1rem;
	font-size: 0.1rem;
	width: 1.5rem;
	color: #FFFFFF;
}
.move-wapper3{
	bottom: 0.47rem;
	width: 1.5rem;
	left: 0.1rem;
	font-size: 0.1rem;
	opacity: 0.85;
	font-weight: 500;
	color: #221815;
}
.move-wapper4{
	top: 0.35rem;
	left: 0.25rem;
	font-size: 0.1rem;
	color: #FFFFFF;
	width: 0.1rem;
	word-wrap: break-word;
	word-break: break-all;
}
.national-button-animation{
	-webkit-animation-name: scaleDraw; /*关键帧名称*/
	-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
	-webkit-animation-iteration-count: infinite;  /*动画播放的次数*/
	-webkit-animation-duration: 3s; /*动画所花费的时间*/
}
.saveShare{
	margin-top: 1.2rem;
	-webkit-animation-name: scaleDraw; /*关键帧名称*/
	-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
	-webkit-animation-iteration-count: infinite;  /*动画播放的次数*/
	-webkit-animation-duration: 3s; /*动画所花费的时间*/
}

@keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
		0%{
				transform: scale(1);  /*开始为原始大小*/
		}
		25%{
				transform: scale(1.1); /*放大1.1倍*/
		}
		50%{
				transform: scale(1);
		}
		75%{
				transform: scale(1.1);
		}
}