@import "design-tokens.less";

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

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

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

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

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

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

		.pthp-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: @pthp-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% - @{pthp-banner-overlay-pct}) + @{pthp-banner-text-inset})";
			right: auto;
			width: 56rem;
			max-width: ~"calc(@{pthp-banner-overlay-pct} - @{pthp-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 / @pthp-artboard * @layout-max);
			}
		}
	}

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

		.title {
			margin-left: 0;
		}

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

	.card-ca {
		.pthp-content();
		position: relative;
		width: 100%;
		max-width: @layout-max;
		height: (469 / @pthp-artboard * @layout-max);
		margin-top: (80 / @pthp-artboard * @layout-max);
		padding-left: (115 / @pthp-artboard * @layout-max);
		padding-top: (85 / @pthp-artboard * @layout-max);
		box-sizing: border-box;
		overflow: hidden;
		text-shadow: 1px 1px 20px rgba(0, 0, 0, 1);

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

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

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

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

		.content-wrapper {
			display: none;

			&.active {
				display: block;
			}
		}

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

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

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

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

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

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

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

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

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

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

					.right-title {
						margin-bottom: (24 / @pthp-artboard * @layout-max);
					}

					.right-title-2 {
						margin-bottom: (12 / @pthp-artboard * @layout-max);
					}

					.card-1 {
						width: 100%;
						max-width: 100%;
						margin-top: (24 / @pthp-artboard * @layout-max);

						.card-img {
							width: 100%;
							max-width: 100%;
							height: auto;
							display: block;
							margin-top: (16 / @pthp-artboard * @layout-max);
						}

						&.card-o1 {
							margin-top: (12 / @pthp-artboard * @layout-max);
						}
					}
				}
			}
		}
	}

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

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

	.download-grid.ani-tab-grid {
		.ani-tab-show-more {
			display: none;
		}
	}
}
}