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

			body {
				background-color: #999;
			}

			.box {
				position: absolute;
				width: 520px;
				height: 300px;
				background-color: #8c7dcb;
				top: 300px;
				left: 0;
				right: 0;
				margin: auto;
				border-radius: 25px;
			}

			.cover-bg {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 2;
				height: 185px;
				background: linear-gradient(to right, #e3c4ff, #c8ceed);
				border-radius: 0 0 20px 20px;
				mask-image: radial-gradient(circle at 50% -300%, transparent 0%, transparent 78%, black 76%, black -100%);
			}

			.cover {
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				z-index: 1;
				top: -140px;
				overflow: hidden;
				display: none;
			}

			.cover::after {
				content: '';
				display: block;
				width: 100%;
				height: 80px;
				background-color: #8c7dcb;
				border-radius: 20px;
				margin: auto;
			}

			.cover i {
				display: block;
				position: relative;
				left: 0;
				top: 3px;
				right: 0;
				width: 300px;
				height: 100px;
				overflow: hidden;
				margin: auto;
				transform: scale(2.45, 1);
			}

			.cover i::after {
				content: '';
				position: absolute;
				width: 300px;
				height: 300px;
				top: 60px;
				left: 0;
				background-color: #8c7dcb;
				transform: rotate(45deg);
				border-radius: 10px;
			}

			.btn {
				position: absolute;
				z-index: 4;
				background: linear-gradient(to right, #b395ea, #9273dc);
				width: 45%;
				left: 0;
				right: 0;
				margin: auto;
				bottom: 80px;
				border-radius: 8px;
				text-align: center;
				color: #fff;
				padding: 20px 0;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
				cursor: pointer;
			}

			.content {
				background-color: #fff;
				left: 20px;
				right: 20px;
				height: 50px;
				position: absolute;
				z-index: 1;
				bottom: 20px;
				box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
				transform-style: preserve-3d;
				text-align: center;
				padding:0 20px 20px;
				line-height: 1.8;
				text-align: justify;
			}
			.content p{
				overflow: hidden;
				height: 100%;
			}
			.content span {
				position: absolute;
				width: 100%;
				top:-68px;
				left:0;
				right:0;
				display: flex;
			}
			.content span::before{
				content: '';
				flex: 1;
				height: 70px;
				background-color: #fff;
				mask: radial-gradient(circle at left 50px, #0000 15px, #fff 0);
				border-radius: 10px 0 0 0;
				z-index: 1;
			}
			.content span::after{
				content: '';
				flex: 1;
				height: 70px;
				background-color: #fff;
				mask: radial-gradient(circle at right 50px, #0000 15px, #fff 0);
				border-radius: 0 10px 0 0;
				z-index: 1;
			}
			.content span i{
				position: absolute;
				top:50px;
				left:30px;
				right:30px;
				z-index: 2;
				border-top:1px dashed #ccc;
			}

			.content h2 {
				font-size: 18px;
				text-align: center
			}

			.box.active .cover-bg {
				height: 240px;
			}

			.box.active .cover {
				display: block;
			}

			.box.active .content {
				height: 480px;
				transition: 0.3s;
				transition-delay: 0.1s;
			}