@import "design-tokens.less";

/* 1720px artboard → @layout-max (120rem) */
@packaged-artboard: 1720;

.packaged-content() {
	width: 100%;
	max-width: @layout-max;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

@packaged-banner-overlay-pct: 55%;
@packaged-banner-pc-height: calc(300 / 1080 * 100vw);
@packaged-banner-pc-min-h: 30rem;
@packaged-banner-text-inset: ~"max((300 / 1080 * 100vw / 3), 10rem)";

@media screen and (min-width: @bp-desktop) {
.page-packaged {
	overflow: hidden;
	padding-bottom: 10rem;

	.banner {
		position: relative;
		height: @packaged-banner-pc-height;
		min-height: @packaged-banner-pc-min-h;
		overflow: hidden;

		picture {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
			margin: 0;
		}

		.packaged-banner-img,
		.banner-img {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			object-fit: cover;
			object-position: left center;
		}

		.banner-bg {
			position: absolute;
			width: @packaged-banner-overlay-pct;
			height: 100%;
			top: 0;
			right: 0;
			left: auto;
			object-fit: cover;
			object-position: right center;
			z-index: 1;
		}

		.banner-text {
			position: absolute;
			z-index: 2;
			left: ~"calc((100% - @{packaged-banner-overlay-pct}) + @{packaged-banner-text-inset})";
			right: auto;
			width: 56rem;
			max-width: ~"calc(@{packaged-banner-overlay-pct} - @{packaged-banner-text-inset})";
			top: 0;
			height: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.banner-text-inner {
				position: relative;
				top: auto;
				right: auto;
				left: auto;
				width: 100%;
				height: auto;
				padding: 0;
				box-sizing: border-box;
			}

			.title {
				color: #333333;
				font-size: 4.5rem;
				line-height: 1.2;
			}

			.desc {
				color: #333333;
				font-size: 1.7rem;
				line-height: 1.5;
				margin-top: 4rem;
				width: 100%;
				max-width: (720 / @packaged-artboard * @layout-max);
			}
		}
	}

	#categories.categories {
		.packaged-content();
		padding-left: 0;
		padding-right: 0;

		.title {
			margin-left: 0;
		}

		.pills {
			padding-left: 0;
			padding-right: 0;
		}
	}

	.card-ca {
		.packaged-content();
		position: relative;
		width: 100%;
		max-width: @layout-max;
		height: (469 / @packaged-artboard * @layout-max);
		margin-top: (80 / @packaged-artboard * @layout-max);
		padding-left: (115 / @packaged-artboard * @layout-max);
		padding-top: (114 / @packaged-artboard * @layout-max);
		box-sizing: border-box;
		overflow: hidden;

		.card-title {
			font-size: (52 / @packaged-artboard * @layout-max);
			color: #fff;
			line-height: 1.2;
		}

		.card-desc {
			color: #fff;
			font-size: (22 / @packaged-artboard * @layout-max);
			line-height: 1.5;
			width: (804 / @packaged-artboard * @layout-max);
			max-width: 100%;
			margin-top: (40 / @packaged-artboard * @layout-max);
		}
	}

	.download-grid {
		margin-top: (20 / @packaged-artboard * @layout-max);
	}

	.content-container {
		.packaged-content();

		.content-wrapper {
			display: none;

			&.active {
				display: block;
			}
		}

		#content-1 {
			padding-top: (80 / @packaged-artboard * @layout-max);
			padding-bottom: (50 / @packaged-artboard * @layout-max);

			.inner {
				display: flex;
				align-items: stretch;
				justify-content: space-between;
				gap: (52 / @packaged-artboard * @layout-max);
				padding-left: 0;
				padding-right: 0;

				.flex-left {
					flex: 0 0 (693 / @packaged-artboard * @layout-max);
					width: (693 / @packaged-artboard * @layout-max);
					max-width: (693 / @packaged-artboard * @layout-max);
					min-width: 0;
					margin-right: 0;
					background-color: #f2f2f2;
					border-radius: (25 / @packaged-artboard * @layout-max);
					padding-left: (84 / @packaged-artboard * @layout-max);
					padding-top: (127 / @packaged-artboard * @layout-max);
					padding-bottom: (828 / @packaged-artboard * @layout-max);
					box-sizing: border-box;
					position: relative;

					.title {
						color: #333;
						font-size: (72 / @packaged-artboard * @layout-max);
						line-height: 1.2;
						margin-bottom: (118 / @packaged-artboard * @layout-max);
					}

					.list {
						color: #333;
						font-size: (28 / @packaged-artboard * @layout-max);
						line-height: 2;
						margin-left: -0.4rem;
						width: (322 / @packaged-artboard * @layout-max);
						max-width: 100%;

						.blue-item {
							color: #1f94d2;
						}

						.indicator {
							left: -0.8rem;
							top: 0;
						}
					}

					.machine-wrapper {
						width: (606 / @packaged-artboard * @layout-max);
						height: (502 / @packaged-artboard * @layout-max);
						bottom: (326 / @packaged-artboard * @layout-max);
						overflow: hidden;
					}
				}

				.flex-right {
					flex: 1 1 0;
					min-width: 0;
					padding-top: 0;

					.right-title {
						color: #333;
						font-size: (40 / @packaged-artboard * @layout-max);
						line-height: 1.2;
					}

					.card-1 {
						position: relative;
						width: 100%;
						// max-width: (552 / @packaged-artboard * @layout-max);
						aspect-ratio: 552 / 393;
						height: auto;
						margin-top: (80 / @packaged-artboard * @layout-max);

						.bg-img {
							z-index: 3;
						}

						.card-1-left {
							width: (106.75 / 552 * 100%);
							height: (60 / 393 * 100%);
							left: 0;
							bottom: (-25 / 393 * 100%);
						}

						.card-1-right {
							width: (274 / 552 * 100%);
							height: (119 / 393 * 100%);
							object-fit: cover;
							bottom: (-25 / 393 * 100%);
							right: 0;
							z-index: 1;
						}

						.top-text {
							z-index: 4;
							left: (20 / 552 * 100%);
							top: (52 / 393 * 100%);

							.top-title {
								color: rgb(56, 54, 54);
								font-size: (24 / @packaged-artboard * @layout-max);
								line-height: 1.2;
								margin-bottom: (24 / @packaged-artboard * @layout-max);
							}

							.top-cards {
								.top-card {
									background: rgb(224, 127, 56);
									height: (45 / @packaged-artboard * @layout-max);
									width: (110 / @packaged-artboard * @layout-max);
									margin-right: (8 / @packaged-artboard * @layout-max);

									.card-title {
										font-size: (14 / @packaged-artboard * @layout-max);
										line-height: 1.2;
										color: rgb(247, 247, 247);
									}

									.card-desc {
										font-size: (8 / @packaged-artboard * @layout-max);
										line-height: 1.2;
										color: rgb(247, 247, 247);
									}
								}
							}
						}

						.card-text-1 {
							font-size: (12 / @packaged-artboard * @layout-max);
							line-height: 1.2;
							color: rgb(56, 54, 54);
							z-index: 4;
							left: 0;
							top: (301 / 393 * 100%);
						}

						.card-text-2 {
							font-size: (8 / @packaged-artboard * @layout-max);
							line-height: 1.2;
							z-index: 4;
							bottom: (-25 / 393 * 100%);
							left: (110 / 552 * 100%);
							width: (140 / 552 * 100%);
						}

						.card-text-3 {
							font-size: (14 / @packaged-artboard * @layout-max);
							line-height: 1.2;
							z-index: 4;
							top: (345 / 393 * 100%);
							left: (295 / 552 * 100%);
							color: rgb(56, 54, 54);
						}
					}

					.card-2 {
						margin-top: (120 / @packaged-artboard * @layout-max);

						.card-title {
							color: #333;
							font-size: (40 / @packaged-artboard * @layout-max);
							line-height: 1.2;
						}

						.card-2-inner {
							position: relative;
							width: 100%;
							// max-width: (547 / @packaged-artboard * @layout-max);
							aspect-ratio: 547 / 263;
							height: auto;
							background: #fff;
							overflow: hidden;
							margin-top: (49 / @packaged-artboard * @layout-max);

							.card-2-bg {
								width: (543 / 547 * 100%);
								height: 100%;
								top: 0;
								left: (30 / 547 * 100%);
							}

							.card-2-label {
								width: (123 / 547 * 100%);
								height: (36 / 263 * 100%);
								left: (34 / 547 * 100%);
								top: (148 / 263 * 100%);
							}

							.card-2-shadow {
								height: 100%;
								width: 100%;
								top: 0;
								right: (-30 / 547 * 100%);
							}
						}
					}

					.card-3 {
						margin-top: (80 / @packaged-artboard * @layout-max);

						.card-title {
							font-size: (40 / @packaged-artboard * @layout-max);
							width: 100%;
							max-width: none;
							line-height: 1.2;
							color: #333;
						}

						.card-desc {
							color: #333;
							font-size: (28 / @packaged-artboard * @layout-max);
							line-height: 1.2;
							margin-top: (28 / @packaged-artboard * @layout-max);
						}

						.installation-card {
							width: 100%;
							max-width: 100%;
							aspect-ratio: 976 / 311;
							height: auto;
							margin-top: (28 / @packaged-artboard * @layout-max);

							.bg-img,
							img {
								object-fit: contain;
							}
						}
					}

					.card-3-extra {
						margin-top: (80 / @packaged-artboard * @layout-max);

						.card-title {
							color: #333;
							font-size: (40 / @packaged-artboard * @layout-max);
							margin-bottom: (28 / @packaged-artboard * @layout-max);
							line-height: 1.2;
						}

						> .flex {
							align-items: flex-start;
							gap: (40 / @packaged-artboard * @layout-max);
						}

						.spec-1 {
							flex: 1 1 0;
							min-width: 0;
							width: auto;
							margin-right: 0;

							.spec-desc {
								padding-right: (20 / @packaged-artboard * @layout-max);
							}
						}

						.spec-2 {
							// flex: 1 1 0;
							min-width: 0;
						}

						.spec-title {
							color: #333;
							font-size: (28 / @packaged-artboard * @layout-max);
							line-height: 1.2;
						}

						.spec-desc {
							color: #333;
							font-size: (20 / @packaged-artboard * @layout-max);
							line-height: 1.2;
							margin-top: (20 / @packaged-artboard * @layout-max);
						}
					}

					.card-4 {
						margin-top: (80 / @packaged-artboard * @layout-max);

						.card-title {
							color: #333;
							font-size: (40 / @packaged-artboard * @layout-max);
							width: 100%;
							max-width: none;
							line-height: 1.2;
							margin-bottom: (40 / @packaged-artboard * @layout-max);
						}

						.spec-container {
							display: flex;
							align-items: center;
							justify-content: center;
							flex-shrink: 0;
							width: 40rem;
							// max-width: 100%;
							height: 6rem;
							background-color: #f2f2f2;
							border-radius: (9 / @packaged-artboard * @layout-max);
							box-sizing: border-box;

							.spec-name {
								color: #818286;
								font-size: (22 / @packaged-artboard * @layout-max);
							}

							.spec-value {
								color: #333;
								font-size: (40 / @packaged-artboard * @layout-max);
								margin-top: (4 / @packaged-artboard * @layout-max);
							}

							.separator-1 {
								width: 1px;
								height: (32 / @packaged-artboard * @layout-max);
								background: #cccccc;
								opacity: 0;
								margin-left: (35 / @packaged-artboard * @layout-max);
								margin-right: (35 / @packaged-artboard * @layout-max);
							}

							.separator-2 {
								width: 1px;
								height: (32 / @packaged-artboard * @layout-max);
								opacity: 0;
								background: #cccccc;
								margin-left: (35 / @packaged-artboard * @layout-max);
								margin-right: (37 / @packaged-artboard * @layout-max);
							}
						}

						.img-container {
							position: relative;
							width: 100%;
							// max-width: (551 / @packaged-artboard * @layout-max);
							height: 30rem;
							overflow: visible;
							margin-top: (16 / @packaged-artboard * @layout-max);
							margin-bottom: (20 / @packaged-artboard * @layout-max);

							.wind-img {
								position: absolute;
								left: 0;
								bottom: 0;
								top: auto;
								right: auto;
								width: 100%;
								
							}

							.text-wrapper {
								position: absolute;
								z-index: 2;
								width: (222 / @packaged-artboard * @layout-max);
								height: (201 / @packaged-artboard * @layout-max);
								right: 0;
								top: (-77 / @packaged-artboard * @layout-max);
								padding-top: (30 / @packaged-artboard * @layout-max);
								box-sizing: border-box;

								.text-1 {
									color: #fff;
									font-size: (12 / @packaged-artboard * @layout-max);
									margin-bottom: (5 / @packaged-artboard * @layout-max);
								}

								.text-2 {
									color: #fff;
									font-size: (40 / @packaged-artboard * @layout-max);
									line-height: 1.1;
								}

								.text-3 {
									font-size: (20 / @packaged-artboard * @layout-max);
									color: #000;
									line-height: 1.2;
								}

								.text-4 {
									font-size: 0.55rem;
									line-height: 1.2;
									color: #000;
								}
							}
						}

						.note {
							position: relative;
							color: #333;
							font-size: (20 / @packaged-artboard * @layout-max);
							line-height: 1.5;
							width: 100%;
							// max-width: (550 / @packaged-artboard * @layout-max);
							margin-top: (12 / @packaged-artboard * @layout-max);
						}
					}

					.card-5 {
						width: 100%;
						max-width: (486 / @packaged-artboard * @layout-max);
						height: (127 / @packaged-artboard * @layout-max);
						border-radius: (15 / @packaged-artboard * @layout-max);
						border: 1px solid #1f94d2;
						margin-top: (31 / @packaged-artboard * @layout-max);
						padding-left: (29 / @packaged-artboard * @layout-max);
						padding-top: (25 / @packaged-artboard * @layout-max);
						box-sizing: border-box;

						.label {
							font-size: (18 / @packaged-artboard * @layout-max);
							color: #fff;
							display: flex;
							justify-content: center;
							align-items: center;
							background: #1f94d2;
							width: (31 / @packaged-artboard * @layout-max);
							height: (31 / @packaged-artboard * @layout-max);
							border-radius: 100%;
							top: 0;
							left: 0;
							transform: translate(-50%, -50%);
						}

						.option-title {
							font-size: (14 / @packaged-artboard * @layout-max);
						}

						.option-desc {
							font-size: (12 / @packaged-artboard * @layout-max);
							margin-top: (5 / @packaged-artboard * @layout-max);
							margin-bottom: (18 / @packaged-artboard * @layout-max);
						}
					}

					.card-6 {
						margin-top: (40 / @packaged-artboard * @layout-max);

						.title {
							font-size: (14 / @packaged-artboard * @layout-max);
							margin-bottom: (12 / @packaged-artboard * @layout-max);
						}

						.compare {
							width: 100%;
							max-width: (479 / @packaged-artboard * @layout-max);
							aspect-ratio: 479 / 288;
							height: auto;
							margin-bottom: (13 / @packaged-artboard * @layout-max);
						}

						.desc {
							padding-left: (56 / @packaged-artboard * @layout-max);
							font-size: (12 / @packaged-artboard * @layout-max);
						}
					}
				}
			}
		}
	}

	.ani-tab-grid {
		.packaged-content();

		.ani-tab-grid-title {
			width: 100%;
			max-width: @layout-max;
			margin-left: auto;
			margin-right: auto;
			padding-left: (114 / @packaged-artboard * @layout-max);
			padding-right: (114 / @packaged-artboard * @layout-max);
			box-sizing: border-box;
		}

		.ani-tab-show-more {
			width: 100%;
			max-width: @layout-max;
			margin-left: auto;
			margin-right: auto;
			box-sizing: border-box;

			.video-grid {
				position: relative;
				left: auto;
				top: auto;
				width: 100%;
				height: (417 / @packaged-artboard * @layout-max);
				border-radius: 0.5rem;
				overflow: hidden;

				&.abs {
					position: relative;
				}

				> .bg-img,
				> img.bg-img {
					position: absolute;
					inset: 0;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				.video-grid-inner {
					position: relative;
					z-index: 1;
					width: 100%;
					height: 100%;
					min-height: (417 / @packaged-artboard * @layout-max);
					box-sizing: border-box;

					&.bg-img {
						position: relative;
						inset: auto;
						width: 100%;
						height: 100%;
						object-fit: unset;
					}

					.play-btn {
						width: (28 / @packaged-artboard * @layout-max);
						height: (28 / @packaged-artboard * @layout-max);
						margin-right: (6 / @packaged-artboard * @layout-max);
					}

					.title {
						font-size: (40 / @packaged-artboard * @layout-max);
					}

					.desc {
						margin-top: (26 / @packaged-artboard * @layout-max);
						font-size: (22 / @packaged-artboard * @layout-max);
						width: (464 / @packaged-artboard * @layout-max);
						max-width: 90%;
					}

					.button {
						margin-top: 2rem;
						width: 20rem;
						height: 5rem;
						font-size: 1.5rem;
						border-radius: 5rem;
					}
				}
			}
		}
	}
}
}