.app{
	padding: 0%;
	margin-top: 381rpx;
	.mask {
		.information {
			width: 70%;
			height: 400rpx;
			margin: 50% auto;
			background: #FFFFFF;
			border-radius: 30rpx;
			text-align: center;
			color: #FFFFFF;
			position: relative;

			.determine,
			.cancel {
				width: 200rpx;
				height: 70rpx;
				border-radius: 26rpx;
				font-size: 34rpx;
				line-height: 70rpx;
				position: absolute;
				top: 74%;
			}

			.determine {
				background: #26A888;
				right: 36rpx;
			}

			.cancel {
				background: #C5BFBF;
				left: 36rpx;
			}

			.title {
				font-size: 42rpx;
				margin-top: 40rpx;
				color: #000000;
			}

			image {
				width: 100rpx;
				height: 100rpx;
				margin: 10% 0 0 0;
			}
		}
	}
	.swiper {
		position: fixed;
		top: 0;
		left: 2%;
		width: 96%;
		height: 380rpx;
		z-index: 999;

		.swiper-box {
			width: 100%;
			height: 380rpx;
		}

		.swiper-item {
			height: 380rpx;
			text-align: center;

			image {
				width: 100%;
				height: 380rpx !important;
				z-index: 999;
			}
		}

		video {
			height: 100%;
			width: 100%;
		}
	}

	.hospital {
		width: 96%;
		margin: 0 auto;
		height: 100%;
		background-color: #fff;

		.appointmenthospital {
			height: 90rpx;
			font-size: 35rpx;
			line-height: 90rpx;
			border-bottom: 1rpx solid #D8D4D4;
			width: 94%;
			margin: 0 auto;
			font-weight: 600;
		}

		.tabbar {
			display: flex;
			height: calc(100vh - 470rpx);
			width: 100%;


			.lefttabbar {
				width: 30%;
				// display: inline-block;
				height: 100%;
				padding-top: 20rpx;

				.lefttabbarlist {
					overflow: scroll;
					-webkit-overflow-scrolling: touch;
					height: 100%;

					.actives {
						width: 80%;
						color: red;
						font-size: 34rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin: 0 auto;
						line-height: 80rpx;
						border-bottom: 1rpx solid #D8D4D4;
						text-align: center;
						font-size: 30rpx;
						// border-radius: 25rpx 0 0 25rpx;
					}

					.active {
						text-align: center;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 30rpx;
						white-space: nowrap;
						border-bottom: 1rpx solid #D8D4D4;
						width: 80%;
						margin: 0 auto;
						line-height: 80rpx;
					}
				}
			}

			.righttabbar {
				width: 70%;
				height: 100%;

				.productlist {
					padding-bottom: 40rpx;
					overflow: scroll;
					-webkit-overflow-scrolling: touch;
					width: 100%;
					height: 100%;
					margin: 0 auto;
					border-radius: 25rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-evenly;
					background-color: #ffffff;

					.content {
						height: 500rpx;
						position: relative;
						width: 100%;
						border-bottom: 1rpx solid #D8D4D4;

						.hospitalimage {
							position: absolute;
							width: 120rpx;
							height: 150rpx;
							top: 30rpx;
							left: 30rpx;
						}

						.hospitalteacher {
							font-size: 36rpx;
							position: absolute;
							top: 60rpx;
							left: 180rpx;
						}

						.physician {
							font-size: 24rpx;
							color: #666666;
							position: absolute;
							top: 120rpx;
							left: 183rpx;

						}

						.words {
							    white-space: normal;
							    word-break: break-all;
							margin-left: 41rpx;
							width: 85%;
							margin-top: 190rpx;
							text-indent: 2em;
							font-size: 30rpx;
							line-height: 55rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 4;
							    text-align: justify;
						}

						.appointment {
							position: absolute;
							bottom: 25rpx;
							right: 30rpx;
							width: 125rpx;
							height: 52rpx;
							background: #F44B2F;
							border-radius: 26rpx;
							color: #fff;
							line-height: 52rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}
}