.tm-popup-video {
	position: relative;

	.video-link {
		display: inline-block;

		&:hover {
			.video-play {
				transform: scale3d(1.15, 1.15, 1.15);
			}
		}
	}

	.video-text {
		margin-top: 28px;
	}

	.video-poster {
		position: relative;
	}

	.video-play {
		position: relative;
		transition: all 1s cubic-bezier(0, 0, .2, 1) !important;
		border-radius: 50%;
		box-shadow: 0 20px 30px rgba(0, 0, 0, .2);

		&:hover {
			transform: scale3d(1.15, 1.15, 1.15);
		}
	}

	.video-play-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		line-height: 1;
		margin-left: 1px;

		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			height: 0;
			transform: translate(-50%, -50%);
			border-top: 9px solid transparent;
			border-bottom: 9px solid transparent;
			border-left: 15px solid #fff;
		}
	}

	.video-overlay {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	&.style-poster-01,
	&.style-poster-02,
	&.style-poster-03 {
		.video-play {
			color: #fff;
		}

		.video-button {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		&.poster-full-wide {
			.video-link {
				display: block;
			}

			.video-poster {
				img {
					width: 100%;
				}
			}
		}
	}

	&.style-poster-01 {
		.video-play {
			width: 72px;
			height: 72px;
		}
	}

	&.style-poster-02 {
		.video-play {
			width: 90px;
			height: 90px;
		}
	}

	&.style-poster-03 {
		.video-play {
			width: 110px;
			height: 110px;
		}

		.video-play-icon {
			&:before {
				border-top-width: 13px;
				border-bottom-width: 13px;
				border-left-width: 23px;
			}
		}
	}

	&.style-poster-04 {
		.video-play {
			background: #fff;
			color: #222;
			box-shadow: 0 20px 30px rgba(0, 0, 0, .07);
		}

		.video-button {
			position: absolute;
			top: 50%;
			left: 100%;
			transform: translate(-50%, -50%);
		}

		&.poster-full-wide {
			.video-link {
				display: block;
			}

			.video-poster {
				img {
					width: 100%;
				}
			}
		}

		.video-play {
			width: 100px;
			height: 100px;
		}

		.video-play-icon {
			&:before {
				border-top-width: 12px;
				border-bottom-width: 12px;
				border-left-width: 21px;
				border-left-color: currentColor;
			}
		}
	}

	&.style-button,
	&.style-button-03,
	&.style-button-04,
	&.style-button-05,
	&.style-button-06 {
		line-height: 0;

		> a {
			display: inline-block;
			text-align: center;
		}

		.video-play {
			display: block;
			margin: 0 auto;
		}

		.video-text {
			line-height: 1.4;
		}

	}

	&.style-button {
		.video-play {
			width: 90px;
			height: 90px;
		}

		.video-play-icon {
			&:before {
				border-top-width: 11px;
				border-bottom-width: 11px;
				border-left-width: 19px;
			}
		}
	}

	&.style-button-02 {
		.video-link {
			display: block;
		}

		.video-content {
			text-align: center;
			position: relative;

			&:before,
			&:after {
				content: '';
				position: absolute;
				top: 40px;
				height: 1px;
				width: calc(50% - 85px);
				background: #eee;
			}

			&:before {
				left: 0;
			}

			&:after {
				right: 0;
			}
		}

		.video-play {
			display: inline-block;
			width: 80px;
			height: 80px;
			color: #fff;
		}

		.video-play-icon {
			&:before {
				border-top-width: 10px;
				border-bottom-width: 10px;
				border-left-width: 17px;
			}
		}

		.video-text {
			color: inherit;
			margin: 32px 0 0;
		}
	}

	&.style-button-03 {
		.video-play {
			width: 110px;
			height: 110px;
		}

		.video-play-icon {
			&:before {
				border-top-width: 14px;
				border-bottom-width: 14px;
				border-left-width: 24px;
			}
		}
	}

	&.style-button-04 {
		.video-play {
			width: 72px;
			height: 72px;
		}

		.video-play-icon {
			&:before {
				border-top-width: 9px;
				border-bottom-width: 9px;
				border-left-width: 15px;
			}
		}
	}

	&.style-button-05 {
		.video-play {
			width: 130px;
			height: 130px;
		}

		.video-play-icon {
			&:before {
				border-top-width: 16px;
				border-bottom-width: 16px;
				border-left-width: 28px;
			}
		}
	}

	&.style-button-06 {
		.video-link {
			&:hover {
				.video-play {
					transform: none;

					&:before {
						transform: scale3d(1.15, 1.15, 1.15);
						opacity: 0;
					}
				}
			}
		}

		.video-play {
			width: 130px;
			height: 130px;
			box-shadow: none;
			background: none;

			&:before {
				transition: all .5s;
				position: absolute;
				content: '';
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				border-radius: 50%;
				background-image: linear-gradient(-142deg, #fe5b34 0%, #fe378c 100%);
				z-index: 1;
				opacity: .15;
			}

			&:after {
				position: absolute;
				content: '';
				width: 90px;
				height: 90px;
				top: 20px;
				left: 20px;
				border-radius: 50%;
				background-image: linear-gradient(-142deg, #fe5b34 0%, #fe378c 100%);
				z-index: 2;
			}
		}

		.video-play-icon {
			z-index: 3;

			&:before {
				border-top-width: 11px;
				border-bottom-width: 11px;
				border-left-width: 19px;
			}
		}
	}

	&.style-box-01 {
		.video-link {
			display: block;
			text-align: center;

			&:hover {
				transform: translateY(-3px);

				.video-content {
					background: #fff;
				}

				.video-text {
					color: #111;
				}

				.video-play {
					background: #e63a65;
					border-color: #E63A65;
				}
			}
		}

		.video-content {
			@extend %transit;
			width: 100%;
			min-height: 145px;
			background: rgba(255, 255, 255, .07);
			padding: 24px 30px 20px;
		}

		.video-play {
			transform: none !important;
			height: 55px;
			width: 55px;
			margin: 0 auto;
			border: 2px solid #fff;
			background: transparent;
			box-shadow: none;
		}

		.video-play-icon {
			&:before {
				border-top-width: 7px;
				border-bottom-width: 7px;
				border-left-width: 12px;
			}
		}

		.video-text {
			font-size: 16px;
			font-weight: 700;
			line-height: 1.44;
			color: #fff;
			margin-top: 23px;
		}
	}
}
