@import "common";  
// .transition(@time: 0.3s, @dely: 0s){
// 	transition: all @time;
// 	transition-delay: @dely;
// 	transition-timing-function: ease-in-out;
// }

// .animation(@name, @time: 1s, @delay: 0s, @count: 1, @direction: normal, @mode: forwards) {
// 	animation-name: @name;
// 	animation-duration: @time;
// 	animation-delay: @delay;
// 	animation-iteration-count: @count;
// 	animation-direction: @direction;
// 	animation-fill-mode: @mode;
// }
@transactionTime: 0.3s;
@transactionSpan: 0.3s;

@keyframes opacityInOut {
  0%   {opacity: 0;}
  50% {opacity: .75;}
  100% {opacity: 0;}
}

body {
	.container {
		.section {
			position: relative;
			.cont {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				opacity: 0;
				&.cont4 {
					.player {
						position: absolute;
					    right: 7.6%;
					    bottom: 0;
					    width: 40.7%;
					    height: 45.1%;
					    // background-color: #ff0000a0;
					    cursor: pointer;
					}
				}
				.btn-arrow {
					position: absolute;
					width: 10vw;
					height: 10vw;
					// background-color: #ff0000a0;
					left: 22vw;
					bottom: 7vw;
					cursor: pointer;
				}
			}
			&.bottom {
				.btn-arrow {
					left: 45vw;
					top: 6vw;
					bottom: auto;
				}
			}
			&.m{
				.cont1 {
					.transition(@transactionTime, 0s);
				}
				.cont2 {
					.transition(@transactionTime, @transactionSpan*2);
				}
				.cont3 {
					.transition(@transactionTime, @transactionSpan*3);
				}
				.cont4 {
					.transition(@transactionTime, @transactionSpan*4);
				}
			}
			&.show{
				.cont {
					opacity: 1;
				}
			}
		}
		#video-player {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 999;
			background-color: #000;
			display: flex;
			align-items: center;
			justify-content: center;
			&.hide {
				display: none;
			}
			video {
				width: 100%;
				height: 100%;
			}
			.close {
				position: absolute;
				top: 20px;
				right: 20px;
				height: 35px;
				width: 35px;
				text-align: center;
				line-height: 35px;
				border-radius: 50%;
				background-color: #ffffff10;
				color: #fff;
				
			}
		}
		.dots {
			position: fixed;
			right: 2.875vw;
			top: 24vw;
			width: 1.25vw;
			z-index: 9999;
			.dot {
				width: 1.25vw;
				height: 1.25vw;
				border-radius: 50%;
				background-color: #fff;
				opacity: .5;
				margin-bottom: 1.5vw;
				box-shadow: 3px 3px 6px #00000060;
				cursor: pointer;
				&.act {
					opacity: 1;
				}
				// &.dot3.act{
				// 	background-color: #feba2b;
				// }

			}
		}
	}
}