@import "common";
body {
	.container {
		&.desktop {
			.swiper{
				width: 100%;
				height:  calc(100vh - 10.25vw);//55.4583vw;//
				background-color: #ffea09;
				.swiper-slide {
			        width: 100%;
			        height: 100%;
			        background-size: contain;
			        background-repeat: no-repeat;
			        background-position: center;
			        .flex-center();
			        .cont{
			        	// background-color: #ff00ffa0;
			        	position: relative;
			        	height: 100%;
			        	.items {
			        		position: absolute;
			        		top: 20%;
			        		left: 6%;
			        		width: 86.5%;
			        		height: 60%;
			        		display: flex;
			        		flex-wrap: wrap;
			        		.item {
			        			width: 11.11%;
			        			height: 50%;
			        			cursor: pointer;
			    				// &:nth-child(odd) {
								// 	background-color: #ff0000a0;
								// }
								// &:nth-child(even) {
								// 	background-color: #0000ffa0;
								// }
			        		}
			        	}
			        }
			        &.s1 {
			        	background-image: url(../images/product-list1.png);
			        }
			        &.s2 {
			        	background-image: url(../images/product-list2.png);
			        	.items {
			        		top: 10%;
			        		left: 4.5%;
			        		width: 91%;
			        		height: 80%;
			        		justify-content: center;
			        		.item {
			        			width: 12.5%;
			        			height: 50%;
			        		}
			        	}
			        }
			        &.s3 {
			        	background-image: url(../images/product-list3.png);
			        	.items {
			        		top: 30%;
			        		left: 4.5%;
			        		width: 91%;
			        		height: 70%;
			        		justify-content: center;
			        		.item {
			        			width: 16.66%;
			        			height: 80%;
			        		}
			        	}
			        }
			        &.s4 {
			        	background-image: url(../images/product-list4.png);
			        	.items {
			        		top: 25%;
			        		left: 4.5%;
			        		width: 91%;
			        		height: 70%;
			        		justify-content: center;
			        		.item {
			        			width: 33%;
			        			height: 100%;
			        		}
			        	}
			        }
			        &.s5 {
			        	background-image: url(../images/product-list5.png);
			        	.items {
			        		top: 25%;
			        		left: 4.5%;
			        		width: 91%;
			        		height: 70%;
			        		justify-content: center;
			        		.item {
			        			width: 33%;
			        			height: 100%;
			        		}
			        	}
			        }
			        &.s6 {
			        	background-image: url(../images/product-list6.png);
			        	.items {
			        		top: 40%;
			        		left: 4.5%;
			        		width: 91%;
			        		height: 60%;
			        		justify-content: center;
			        		.item {
			        			width: 21%;
			        			height: 100%;
			        			&:nth-child(5) {
			        				width: 16%;
			        			}
			        		}
			        	}
			        }
			        &.s7 {
			        	background-image: url(../images/product-list7.png);
			        	.items {
			        		top: 30%;
			        		left: 4.5%;
			        		width: 91%;
			        		height: 60%;
			        		justify-content: center;
			        		.item {
			        			width: 20%;
			        			height: 99%;
			        		}
			        	}
			        }
			        
			    }
			    .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;
			    }
			}
		}
		&.mobile {
			.product-list {
				position: relative;
				.items {
					position: absolute;
					top: 30.5vw;
					left: 8vw;
					width: 84vw;
					display: flex;
					flex-wrap: wrap;
					.item {
						width: 33.3%;
						height: 39.875vw;
						// &:nth-child(odd) {
						// 	background-color: #ff0000a0;
						// }
						// &:nth-child(even) {
						// 	background-color: #0000ffa0;
						// }
					}
				}
				&.pl2 {
					.items {
						top: 29vw;
						.item {
							height: 63.2vw;
						}
					}
				}
				&.pl3 {
					.item {
						height: 51vw;
					}
				}
				&.pl4 {
					.item {
						height: 51vw;
					}
				}
				&.pl5 {
					.items {
						top: 24vw;
						.item {
							height: 51vw;
						}
					}
				}
				&.pl7 {
					.item {
						height: 68vw;
					}
				}
			}
		}
		
	}
}