@import "common";
 
@keyframes opacityInOut {
  0%   {opacity: 0;}
  50% {opacity: .3;}
  100% {opacity: 0;}
}

body {
	@media (max-width: 768px) {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 100vh;
	}
	.container {
		@media (max-width: 768px) {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;		
		}
		.swiper{
			width: 100%;
			height: 55.875vw;
			@media (max-width: 768px) {
				flex-grow: 0;
			}
			.swiper-slide {
		        .flex-center();
		    }
		    .swiper-pagination-bullet {
		    	width: 1.3vw;
		    	height: 1.3vw;
		    	margin: 0 0.6vw;
		    	background-color: #fff;
		    	opacity: 1;
		    }
		    .swiper-pagination-bullet-active {
		    	background-color: @color-red;
		    }
		    .swiper-pagination{
		    	bottom: 2.8vw;
		    }
		}
		.content {
			background-image: url(../images/index-content-bg.png);
			background-position: left top;
			background-repeat: no-repeat;
			background-size: 100% auto;
			height: 45.75vw;
			@media (max-width: 768px) {
				background-image: url(../images/mobile/m-index-cont-bg.png);
				height: 77.1028vw;
				// display: flex;
				// justify-content: flex-start;
				// flex-wrap: wrap;
				position: relative;
				flex-grow: 1;
			}
			.flex-center();
			.item {
				width: 29.875%;
				height: 100%;
				position: relative;
				img{
					position: absolute;
					left: 0;
					top: 0;
					z-index: 1;
					&.s1 {
						.transition(0.6s, 0.1s);
					}
					&.s2 {
						z-index: 2;
						opacity: 0;
					}
					&.s3 {
						z-index: 3;
						opacity: 0;
						.transition(0.5s, 0.1s);
					}
					&.s4 {
						z-index: 4;
						opacity: 0;
					}
				}
				&.story {
					@media (max-width: 768px) {
						width: 33vw;
					    // margin-left: 9.8vw;
					    // margin-top: -4.5vw;
					    position: absolute;
					    left: 9.8vw;
					    top: -4.5vw;
					    height: 42vw;
					}
				}
				&.product {
					@media (max-width: 768px) {
						width: 33vw;
					    // margin-left: 11.5vw;
					    // margin-top: -4.5vw;
					    position: absolute;
					    left: 53.5vw;
					    top: -4.5vw;
					    height: 42vw;
					}
				}
				&.social-account{
					width: 40.25%;
					@media (max-width: 768px) {
						width: 100%;
					    height: 40vw;
					    // background: #ff0000a0;
					    position: absolute;
					    left: 0;
					    top: 39vw;
					}
				}
				&.p {
					&.fadeIn {
						.s1 {
							opacity: 0;
						}
						.s2 {
							.animation(opacityInOut, @time: 0.5s);
						}
						.s3 {
							opacity: 1;
						}
					}
				}
				&.social-account {
					img {
						opacity: 0;
						.transition(0.5s);
						&.fadeIn {
							opacity: 1;
						}
					}
					.sa{
						position: absolute;
						opacity: 0;
						z-index: 10;
						width: 8vw; 
						height: 8vw;
						@media (max-width: 768px) {
							opacity: 1;
							// background-color: #00ff00a0;
							width: 10vw;
							height: 10vw;
						}
						&.sa1 {
							left: 10.5vw;
							top: 4.8vw;
							@media (max-width: 768px) {
								left: 10vw;
								top: 2vw;
							}
						}
						&.sa2 {
							left: 24.8vw;
							top: 8vw;
							@media (max-width: 768px) {
								left: 17.5vw;
								top: 19vw;
							}
						}
						&.sa3 {
							left: 28.5vw;
							top: 22.3vw;
							@media (max-width: 768px) {
								left: auto;
								right: 15.5vw;
								top: 19vw;
							}
						}
						&.sa4 {
							left: 19.5vw;
							top: 34.2vw;
							@media (max-width: 768px) {
								left: auto;
								right: 9vw;
								top: 2vw;
							}
						}
					}
				}
			}
		}
		#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;
				
			}
		}
	}
}