@import "@/assets/scss/c/config.scss";
@import "@/assets/scss/c/function.scss";

.m-wx_index {
	.wrap {
		margin-top: 10px;
	}
	.mw-cpt_type {
		min-height: 200px;
		border-radius: 4px;
		background-color: #ffffff;
	}

	.mw-show {
		padding: 40px 0 100px;

		.mw-phone {
			position: relative;
			margin: 0 auto;
			width: 375px;
			min-height: 500px;
			background-color: #ffffff;
			box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);

			.mw-phone-hint {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				text-align: center;
				color: #aaaaaa;
				height: 30px;
				line-height: 30px;
				font-size: 12px;
				transition: transform $ad2 ease-in-out;

				&.z-out-left {
					transform: translateX(-250px);
				}

				&.z-out-down {
					transform: translateY(100px);
				}
			}

			.z-none {
				border: 1px dashed #aaa;
			}

			.mw-cpt {
				cursor: pointer;

				&.z-focused {
					box-shadow: 0 0 8px 4px #cc5;
				}

				.d-cpt-operate {
					@include bs1;
					position: absolute;
					top: -1000px;
					bottom: -1000px;
					right: -50px;
					width: 50px;
					padding: 5px 0;
					height: 200px;
					margin: auto 0;
					border-radius: 0 4px 4px 0;
					border-left: 1px solid #bb5;
					background-color: #ffffff;
					text-align: center;
					.d-cpt-btn {
                        margin-bottom: 2px;
						padding: 8px 0 4px;
						line-height: 16px;

						&:hover {
							background-color: #f1f2f3;
						}

						img {
							height: 12px;
							line-height: 12px;
						}
						p {
							line-height: 10px;
							font-size: 12px;
						}
					}
				}

				.mw-cpt-top_title {
					position: relative;
					background-color: #ff4c52;
					line-height: 50px;
					padding-left: 15px;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
					font-size: 13px;
				}
				.mw-cpt-cnt_news {
					position: relative;
				}
			}

			.mw-phone-fixed {
				@include bs1;
				position: absolute;
				z-index: 10;
				top: 300px;
				right: -2px;
				height: 50px;
				width: 120px;
				border-radius: 50px 0 0 50px;
				border: 1px dashed #aaa;
				background-color: #ffffff;
			}
			.mw-phone-top {
				position: relative;
				height: 50px;
			}
			.mw-phone-ban {
				position: relative;
				height: 200px;
			}
			.mw-phone-cnt {
				position: relative;
				min-height: 300px;
			}
		}
	}

	.mw-set {
		padding: 5px 20px;
		min-height: 400px;
		border-radius: 4px;
		background-color: #ffffff;
		.d-operate {
			padding: 20px 0;
			text-align: right;
		}
	}
}