/**index.wxss**/
.contentWarp {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	overflow: hidden;
}

.touchWrap {
	transform-origin: center;
	position: absolute;
	z-index: 100;
}

.imgWrap {
	box-sizing: border-box;
	width: 100%;
	transform-origin: center;
	float: left;
	border: 5rpx transparent dashed;
}

.imgWrap image {
	float: left;
}

.touchActive .x {
	display: block;
}

.touchActive .o {
	display: block;
}

.x {
	position: absolute;
	top: -25rpx;
	left: -25rpx;
	z-index: 500;
	display: none;
	width: 50rpx;
	height: 50rpx;
	overflow: hidden;
	font-weight: bold;
	color: #d1e3f1;
}

.o {
	position: absolute;
	bottom: -25rpx;
	right: -25rpx;
	width: 50rpx;
	height: 50rpx;
	text-align: center;
	display: none;
	overflow: hidden;
	font-weight: bold;
	color: #d1e3f1;
}

.active {
	background-color: rgb(78, 114, 151);
}

.active view {
	border: none;
}

.touchActive {
	z-index: 400;
}

.operation-buttons {
	position: absolute;
	bottom: 110rpx;
	right: 15rpx;
	display: flex;
	flex-direction: column;
	z-index: 101;
	transition: all .5s ease-in-out;
}

.operation-buttons view {
	width: 51px;height: 51px;background-color: #2a7be9;border-radius: 50%;color: #fff;display: flex;justify-content: center;align-items: center;margin-top: 40rpx;
}
.operation-buttons image {
	width: 27px;height: 25px;margin-top: 0px;
}
.closeSave {
	transform: scale(0);
}
.canvasWrap {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 999;
	text-align: center;
}
.close-effect {
	width: 50rpx;
	height: 50rpx;
	position: absolute;
	top: 25rpx;
	left: 50rpx;
}
.maskCanvas {
	position: absolute;
	left: -200%;
	top: 0;
}

.btnView view {
	padding-bottom: 20rpx;
}

.hand {
	position: absolute;
	left: 100rpx;
	right: 0;
	margin: auto;
	z-index: 100;
}

.getUserInfoBtn {
	position: initial;
	border: none;
	background-color: none;
}

.getUserInfoBtn::after {
	border: none;
}

.btn_view {
	display: flex;
	padding: 20rpx;
}

.btn_view button {
	width: 30%!important;
	padding: 16rpx 20rpx;
	font-size: 26rpx;
	background-color: #2a7be9;
	color: #fff;
}
/* 点击下载按钮时的图片样式 */
.resImg {
	width: 80%;
	height: 80%;
	margin-top: 50rpx;
}

/* 特效样式 */
.fliters {
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 382rpx;
	right: 120rpx;
	z-index: 201;
}

.shapes {
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 242rpx;
	right: 120rpx;
	z-index: 201;
}

.fliters image,
.shapes image {
	width: 60rpx;
	height: 60rpx;
	border: 2rpx solid #eb4985;
}


.choose-box {
	position: fixed;
	bottom: -250rpx;
	left: 0;
	right: 0;
	z-index: 998;
	background-color: rgba(0, 0, 0, .8);
	padding: 20rpx;
	transition: all .5s ease-in-out;
}
scroll-view {
	position: relative;
}
.showBox {
	bottom: 88rpx;
}
.scrollView {
	display: flex;
	align-items: center;
}
.arrowBtn {
	position: absolute;
	z-index: 2;
	width: 70rpx!important;
	height: 70rpx!important;
}
.pre {
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.next {
	top: 50%;
	right: 0;
}
swiper {
	padding-bottom: 20rpx;
}
.creat-works-btn {position: fixed;bottom: 110rpx;left: 77px;right: 77px; height: 51px;line-height: 51px;text-align: center;color: #fff;background-color: #287be9;border-radius: 51px;z-index: 101;box-sizing: border-box;font-weight: bold;}
.works-box {position: fixed;bottom: 110rpx;z-index: 101;}
.works-boxAc {bottom: 86rpx;}
.close-works-btn {background-color: #2a7be9;color: #fff;border-radius: 20px 20px 0 0;padding: 50rpx 20rpx 30rpx 20rpx;display: inline-block;}
.works-content {background-color: #2a7be9;}
.title-box view {
	background-color: rgba(42, 123, 233, 1);
	display: inline-block;
	padding: 20rpx 40rpx;
	border-radius: 10rpx;
	margin-bottom: 10rpx;
	/* margin-right: 20rpx; */
	margin-top: 10rpx;
	flex-shrink: 0;
	color: #fff;
	margin-left: 10rpx;
}

.title-box .titleActive {
	color: #000;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 50rpx;
}
.img-box {
	width: 25%!important;
}
.img-box view {
	width: 96%;
	height: 320rpx;
	flex-shrink: 0;
	background-color: rgba(0,0,0,.8);
	display: flex;
	align-items: center;
}

.img-box view:last-child {
	margin-right: 0rpx;
}

.img-box image {
	width: 100%;
	height: 320rpx;
	object-fit: contain;
}
.img-box .allActive {
	transform: scale(.9);
	border: 4rpx dashed rgba(255, 255, 255, .4);
	box-shadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, .8);
}

.works-btn {
	position: fixed;
	right: 20rpx;
	top: 20rpx;
	z-index: 998;
	background-color: rgba(0,0,0,.3);
	color: #fff;
	font-size: 28rpx;
	border-radius: 10rpx;
	padding: 16rpx 20rpx;
}
.content-box {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 100001;
	display: flex;
	justify-content: center;
	align-items: center;
}
.input-box {
	display: flex;
	flex-direction: column;
	background-color: rgba(255,255,255,.6);
	border-radius: 6rpx;
	padding: 20rpx;
	color: #000;
	font-size: 26rpx;
	text-align: center;
}
.input-box text {
	font-weight: bold;
}
.input-box input {
	background-color: #fff;
	margin-top: 20rpx;
	text-align: left;
	padding: 10rpx 20rpx;
	height: auto;
}
.input-box view {
	width: 100%;
	margin-top: 20rpx;
	padding: 20rpx;
	color: #fff;
	background-color: rgba(0,0,0,.2);
}
.auth-box {position: fixed;top: 0;right: 0;left: 0;bottom: 0;display: flex;justify-content: center;align-items: center;z-index: 1000;}
.auth-box > view {background-color: #FFFFFF;border-radius: 10rpx;padding: 30rpx;box-shadow: 0rpx 0rpx 20rpx rgba(0,0,0,.5);margin: 0 100rpx;}
.auth-top {display: flex;}
.auth-top image {width: 96rpx;height: 96rpx;flex-shrink: 0;}
.auth-top-content {margin-left: 20rpx;}
.auth-top-content view {font-size: 28rpx;margin-top: 20rpx;color: #999999;}
.auth-top-content view:nth-child(1) {font-size: 30rpx;font-weight: bold;margin-top: 0;}
.auth-center {font-size: 28rpx;margin: 30rpx 0;border-bottom: 1rpx solid #F5F5F5;border-top: 1rpx solid #F5F5F5;padding: 20rpx 0;}
.auth-bottom {display: flex;justify-content: center;align-items: center;font-size: 24rpx;}
.btn {padding: 12rpx 40rpx;border-radius: 4rpx;}
.btn-no {color: #2a7be9;background-color: #FFFFFF;border: 1rpx solid #2a7be9;}
.btn-yes {color: #FFFFFF;background-color: #2a7be9;border: 1rpx solid #2a7be9;position: relative;margin-left: 20rpx;}
.auth-btn {position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0;}
.isNyin{box-shadow: 0rpx 3rpx 6rpx rgba(0,0,0,.5);}
.isOyin{box-shadow: 0rpx 3rpx 6rpx rgba(0,0,0,1);}
.card-box-userinfo {transform: rotate(360deg) scale(0);transition: all 1s ease-in-out;}
