/* reset */
@media screen and (max-width: 740px) {
	.topArea {
		display: none !important;
	}
}

/* content inner */
@media screen and (min-width: 741px) {
	.content-inner {
		width: calc(var(--layout-width) + (var(--layout-padding-x) * 2));
	}
	.content-inner.full {
		width: 100%;
	}
}

/* area-title */
@media screen and (min-width: 741px) {
	.content-section-title:first-child {
		margin-bottom: 100px;
	}
	/* galaxy naver app 에서 :has() selector 지원되지 않아 클래스명 사용 */
	.box-text.has-title-sm:first-child:not(:last-child) {
		margin-bottom: var(--space-50);
	}
	.box-text.has-title-sm:nth-child(n + 2) {
		margin-top: var(--space-50);
	}
	.box-text.has-title-xxs:nth-child(n + 2) {
		margin-top: var(--space-30);
	}
}
@media screen and (max-width: 740px) {
	.content-section-title:first-child {
		margin-bottom: var(--space-50);
	}
	/* galaxy naver app 에서 :has() selector 지원되지 않아 클래스명 사용 */
	.box-text.has-title-sm:first-child:not(:last-child) {
		margin-bottom: var(--space-20);
	}
	.box-text.has-title-sm:nth-child(n + 2) {
		margin-top: var(--space-50);
	}
	.box-text.has-title-xxs:nth-child(n + 2) {
		margin-top: var(--space-20);
	}
}

/* MOTION */
/* slide up text*/
[data-motion-box='slideUpText'] {
	overflow: hidden;
}
[data-motion-group='slideUpText'] > *,
[data-motion='slideUpText'] {
	display: inline-block;
	transition: transform 0.3s ease-out;
}
[data-motion-group='slideUpText'] > *:not(.motion-on),
[data-motion='slideUpText']:not(.motion-on) {
	opacity: 0;
	transform: translateY(40%);
}
/* fade up text */
[data-motion-group='fadeUpText'] > *,
[data-motion='fadeUpText'] {
	transition: opacity 0.3s, transform 0.3s ease-out;
}
[data-motion-group='fadeUpText'] > *:not(.motion-on),
[data-motion='fadeUpText']:not(.motion-on) {
	opacity: 0;
	transform: translateY(40%);
}
/* soft fade up text */
[data-motion='fadeUpTextSoft'],
[data-motion-group='fadeUpTextSoft'] > * {
	transition: opacity 0.6s, transform 0.7s ease-out;
}
[data-motion='fadeUpTextSoft']:not(.motion-on),
[data-motion-group='fadeUpTextSoft'] > *:not(.motion-on) {
	opacity: 0;
	transform: translateY(40%);
}
/* slide up img */
[data-motion-box='slideUpImg'] {
	overflow: hidden;
}
[data-motion='slideUpImg'],
[data-motion-group='slideUpImg'] > .box-media > * {
	transition: opacity 1s cubic-bezier(0, 0.55, 0.45, 1),
		transform 1s cubic-bezier(0.175, 0.885, 0.32, 1);
}
[data-motion='slideUpImg']:not(.motion-on),
[data-motion-group='slideUpImg'] > .box-media:not(.motion-on) > * {
	opacity: 0;
	transform: translateY(60%);
}
[data-motion-group='slideUpImg'] > .box-media {
	overflow: hidden;
}
/* swiper motion */
/* bg zoom out */
[data-motion='bgZoomOut'],
[data-swiper-motion='bgZoomOut'] {
	transform: scale(1);
	transition: transform 0.3s ease-out;
	transition-delay: 0.3s;
}
[data-motion='bgZoomOut']:not(.motion-on),
[data-swiper-motion='bgZoomOut']:not(.motion-on) {
	transform: scale(1.06);
}
/* fade right */
[data-motion='fadeRight'],
[data-swiper-motion='fadeRight'] {
	transition: opacity 0.55s ease-out, transform 0.55s ease-out;
	transition-delay: 0.7s;
}
[data-motion='fadeRight']:not(.motion-on),
[data-swiper-motion='fadeRight']:not(.motion-on) {
	opacity: 0;
	transform: translateX(-30px);
}

/* motion scroll (js) */
.box-media:has([data-motion-scroll]) {
	overflow: hidden;
}

/* cmpnt shuffle imgs */
.cmpnt-shuffle-imgs .shuffle-img {
	display: flex;
	flex-direction: column;
}
.cmpnt-shuffle-imgs .shuffle-img .title {
	color: var(--hyundai-blue);
}

/* 1240px 기준 */
@media screen and (min-width: 741px) {
	/* roblox */
	.cmpnt-shuffle-imgs.roblox .area-shuffle-img {
		height: 2521px;
	}
	.cmpnt-shuffle-imgs.roblox .shuffle-img:nth-child(odd) {
		left: 0;
	}
	.cmpnt-shuffle-imgs.roblox .shuffle-img:nth-child(even) {
		right: 0;
	}
	.cmpnt-shuffle-imgs.roblox .shuffle-img:nth-child(1) {
		top: 0;
		width: 659px;
	}
	.cmpnt-shuffle-imgs.roblox .shuffle-img:nth-child(1) .desc {
		width: 555px;
	}
	.cmpnt-shuffle-imgs.roblox .shuffle-img:nth-child(2) {
		top: 151px;
		width: 500px;
	}
	.cmpnt-shuffle-imgs.roblox .shuffle-img:nth-child(3) {
		top: 750px;
		width: 478px;
	}
	.cmpnt-shuffle-imgs.roblox .shuffle-img:nth-child(4) {
		top: 1025px;
		width: 595px;
	}
	.cmpnt-shuffle-imgs.roblox .shuffle-img:nth-child(5) {
		bottom: 292px;
		width: 595px;
	}
	.cmpnt-shuffle-imgs.roblox .shuffle-img:nth-child(6) {
		bottom: 0;
		width: 478px;
	}
	/* zepeto */
	/* 상단 셔플 이미지 (first)*/
	.cmpnt-shuffle-imgs.zepeto.first .area-shuffle-img {
		height: 1569px;
	}
	.cmpnt-shuffle-imgs.zepeto.first .shuffle-img:nth-child(odd) {
		left: 0;
	}
	.cmpnt-shuffle-imgs.zepeto.first .shuffle-img:nth-child(even) {
		right: 0;
	}
	.cmpnt-shuffle-imgs.zepeto.first .shuffle-img:nth-child(1) {
		top: 0;
		width: 749px;
	}
	.cmpnt-shuffle-imgs.zepeto.first .shuffle-img:nth-child(1) .title{
    display: block;
	}
	.cmpnt-shuffle-imgs.zepeto.first .shuffle-img:nth-child(2) {
		top: 195px;
		width: 595px;
	}
	.cmpnt-shuffle-imgs.zepeto.first .shuffle-img:nth-child(3) {
		top: 792px;
		width: 555px;
	}
	.cmpnt-shuffle-imgs.zepeto.first .shuffle-img:nth-child(4) {
		top: 873px;
		width: 500px;
	}
	/* 하단 셔플 이미지 (second) */
	.cmpnt-shuffle-imgs.zepeto.second .area-shuffle-img {
			height: 934px;
		}
	.cmpnt-shuffle-imgs.zepeto.second .shuffle-img:nth-child(1) {
		left: 0;
		top: 0;
		width:708px;
	}
	.cmpnt-shuffle-imgs.zepeto.second .shuffle-img:nth-child(2) {
		bottom: 0;
		right: 0;
		width: 505px;
	}
	.cmpnt-shuffle-imgs.zepeto.second .box-text{
		position: absolute;
		bottom: 0;
		width: 560px;
}
}

/* icon arrow */
.icon-arrow {
	display: inline-block;
	position: relative;
	transition: 0.2s ease-out;
}
.icon-arrow:before,
.icon-arrow:after {
	display: block;
	position: absolute;
	right: 0;
	background-color: currentColor;
	content: '';
}
.icon-arrow:before {
	top: -1px;
	transform-origin: top right;
	transform: rotate(-45deg);
}
.icon-arrow:after {
	bottom: 0;
	transform-origin: bottom right;
	transform: rotate(45deg);
}
/* arrow directions */
.icon-arrow.next {
	transform: rotate(180deg);
}
.icon-arrow.down {
	transform: translate(-20%, 20%) rotate(-90deg);
}
/* arrow colors */
.icon-arrow.white {
	color: #fff;
}
@media screen and (min-width: 741px) {
	/* arrow sizes */
	.icon-arrow.large {
		width: clamp(
			calc((34 - (34 * 0.19)) * 1px),
			calc(34 / var(--screen-w) * 100 * 1vw),
			34px
		);
		height: clamp(
			calc((68 - (68 * 0.19)) * 1px),
			calc(68 / var(--screen-w) * 100 * 1vw),
			68px
		);
	}
	.icon-arrow.large:before,
	.icon-arrow.large:after {
		width: clamp(
			calc((48 - (48 * 0.19)) * 1px),
			calc(48 / var(--screen-w) * 100 * 1vw),
			48px
		);
		height: 2px;
	}
	.icon-arrow.medium{
    width:20px;
    height: 40px;
  }
  .icon-arrow.medium:before,
  .icon-arrow.medium:after {
    width: calc(28.5px);
    height: 1px;
  }
	.icon-arrow.small {
		width: 8px;
		height: 16px;
	}
	.icon-arrow.small:before,
	.icon-arrow.small:after {
		width: calc(sqrt(pow(8, 2) + pow(8, 2)) * 1px);
		height: 2px;
	}
}
@media screen and (max-width: 740px) {
	/* arrow sizes */
	.icon-arrow {
		width: clamp(8px, calc(8 / var(--screen-w) * 100 * 1vw), 1000vw);
		height: clamp(12px, calc(12 / var(--screen-w) * 100 * 1vw), 1000vw);
		color: #999;
	}
	.icon-arrow:before,
	.icon-arrow:after {
		width: clamp(8.5px, calc(8.5 / var(--screen-w) * 100 * 1vw), 1000vw);
		height: 1px;
	}
	.icon-arrow:before {
		top: 0;
	}
	/* arrow colors */
	.icon-arrow.white {
		color: #999;
	}
}
/* 기본 arrow style 초기화 */
.zepeto .swiper-button-next,
.zepeto .swiper-button-prev {
	display: flex;
	background-image: none;
  align-items: center;
  justify-content: center;
	width: min-content;
}

.zepeto .swiper-button-prev {
	left: clamp(15px, calc(15 / var(--screen-w) * 100 * 1vw), 1000vw);
	
}
.zepeto .swiper-button-next {
	right: clamp(15px, calc(15 / var(--screen-w) * 100 * 1vw), 1000vw);
}


/* cmpnt-swiper */
.cmpnt-swiper {
	position: relative;
}
.cmpnt-swiper .swiper {
	overflow: hidden;
}
.zepeto .cmpnt-swiper .swiper{
	position: relative;
}

.mobile-only.zepeto .cmpnt-swiper .swiper{
	aspect-ratio:33/20
}

.cmpnt-swiper .swiper .swiper-slide {
	overflow: hidden;
}
.cmpnt-swiper > .wrap-swiper-button.full {
	position: absolute;
	left: 50%;
	top: 50%;
	left: 50%;
	z-index: 10;
	height: var(--space-20);
	transform: translate(-50%, -50%);
}
.cmpnt-swiper > .wrap-swiper-button > [class*='swiper-button-'] {
	position: absolute;
	top: 50%;
	margin-top: 0;
	background-image: none;
	line-height: 1;
	transform: translateY(-50%);
}
/* pagination */
.cmpnt-swiper .swiper-pagination:not(.pos-outer) {
	position: absolute;
	left: 50%;
	bottom: var(--layout-content-gap);
	line-height: 1;
	transform: translateX(-50%);
}
.cmpnt-swiper .swiper-pagination.pos-outer {
	position: static;
	margin: 20px auto 0;
}
.cmpnt-swiper .swiper-pagination .swiper-pagination-bullet {
	margin: 0 4px;
	background-color: var(--bg-inactive);
}
.cmpnt-swiper .swiper-pagination .swiper-pagination-bullet-active {
	background-color: var(--hyundai-active-blue);
}
@media screen and (min-width: 741px) {
	.cmpnt-swiper.outside-arrow {
		padding: 0 var(--space-40);
	}
	.cmpnt-swiper > .wrap-swiper-button.full {
		max-width: calc(100% - var(--space-40));
		width: 1720px;
	}
	.cmpnt-swiper > .wrap-swiper-button > [class*='swiper-button-'] {
		width: clamp(
			calc((34 - (34 * 0.19)) * 1px),
			calc(34 / var(--layout-total-width) * 100 * 1vw),
			34px
		);
		height: clamp(
			calc((68 - (68 * 0.19)) * 1px),
			calc(68 / var(--layout-total-width) * 100 * 1vw),
			68px
		);
	}
	/* arrow - bottom-box-notice */
	.cmpnt-swiper.bottom-box-notice > .wrap-swiper-button {
		top: calc((100% - calc(56 / var(--screen-w) * 100 * 1vw)) / 2);
	}
	 /* arrow medium 케이스 위치 */
	 .swiper-button-prev:has(.icon-arrow.medium){
    left:30px
  }
  .swiper-button-next:has(.icon-arrow.medium){
    right:30px
  }
}
@media screen and (max-width: 740px) {
	.cmpnt-swiper > .wrap-swiper-button.full {
		width: calc(100% - var(--space-30));
	}
	.cmpnt-swiper > .wrap-swiper-button > [class*='swiper-button-'] {
		width: clamp(6px, calc(6 / var(--screen-w) * 100 * 1vw), 1000vw);
		height: clamp(12px, calc(12 / var(--screen-w) * 100 * 1vw), 1000vw);
	}
	.cmpnt-swiper:has(.cmpnt-side-dim-text) > .wrap-swiper-button.full {
		top: clamp(439px, calc(439 / var(--screen-w) * 100 * 1vw), 1000vw);
	}
	/* pagination - bottom-box-notice */
	.cmpnt-swiper.bottom-box-notice {
		padding-bottom: calc(36 / var(--screen-w) * 100 * 1vw);
	}
	.cmpnt-swiper.bottom-box-notice .swiper-pagination {
		bottom: 0;
	}
	.cmpnt-swiper.bottom-box-notice > .wrap-swiper-button {
		top: calc((100% - calc(69 / var(--screen-w) * 100 * 1vw)) / 2);
	}
	/* scrollable */
	.cmpnt-swiper[data-swiper='scrollable'] {
		width: calc(100% + var(--layout-padding-x));
	}
	.cmpnt-swiper.mobile-only[data-swiper='scrollable'] .swiper-slide{width:60.5%;}
}

/* cmpnt-side-dim-text */
.cmpnt-side-dim-text {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.cmpnt-side-dim-text .box-dimmed {
	background-color: rgba(0, 0, 0, 0.4);
	color: #fff;
}
@media screen and (min-width: 741px) {
	.cmpnt-side-dim-text {
		display: flex;
		align-items: center;
		height: clamp(
			calc((940 - (940 * 0.19)) * 1px),
			calc(940 / var(--screen-w) * 100 * 1vw),
			940px
		);
		padding: var(--layout-content-gap) 0;
	}
	.cmpnt-side-dim-text .box-dimmed {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: clamp(
			calc((1086 - (1086 * 0.19)) * 1px),
			calc(1086 / var(--screen-w) * 100 * 1vw),
			1086px
		);
		height: clamp(
			calc((640 - (640 * 0.19)) * 1px),
			calc(640 / var(--screen-w) * 100 * 1vw),
			640px
		);
		padding-left: clamp(
			calc((254 - (254 * 0.19)) * 1px),
			calc(254 / var(--screen-w) * 100 * 1vw),
			254px
		);
	}
	.cmpnt-side-dim-text .box-text {
		padding: clamp(
			calc((125 - (125 * 0.19)) * 1px),
			calc(125 / var(--screen-w) * 100 * 1vw),
			125px
		);
	}
	.cmpnt-side-dim-text .box-text .title-sm {
		margin-bottom: clamp(
			calc((50 - (50 * 0.19)) * 1px),
			calc(50 / var(--screen-w) * 100 * 1vw),
			50px
		);
	}
	.cmpnt-side-dim-text .box-media img {
		width: clamp(
			calc((690 - (690 * 0.19)) * 1px),
			calc(690 / var(--screen-w) * 100 * 1vw),
			690px
		);
		height: clamp(
			calc((690 - (690 * 0.19)) * 1px),
			calc(690 / var(--screen-w) * 100 * 1vw),
			690px
		);
		object-fit: cover;
	}
	.cmpnt-side-dim-text.shooting-star {
		background-image: url('/content/dam/hyundai/ww/en/images/company/metaverse/nft/shooting-star-bg-pc.jpg');
	}
	.cmpnt-side-dim-text.mob-ed {
		background-image: url('/content/dam/hyundai/ww/en/images/company/metaverse/nft/mob-ed-bg-pc.jpg');
	}
	.cmpnt-side-dim-text.plasma-nft {
		background-image: url('/content/dam/hyundai/ww/en/images/company/metaverse/nft/plasma-nft-pc.jpg');
	}
	.cmpnt-side-dim-text.ioniq-6-nft {
		background-image: url('/content/dam/hyundai/ww/en/images/company/metaverse/nft/ioniq-6-nft-pc.jpg');
	}
}
@media screen and (max-width: 740px) {
	.cmpnt-side-dim-text {
		display: flex;
		flex-direction: column-reverse;
		justify-content: flex-start;
		height: calc(658 / var(--screen-w) * 100 * 1vw);
		min-height: 658px;
		padding: clamp(23px, calc(23 / var(--screen-w) * 100 * 1vw), 1000vw)
			var(--layout-padding-x)
			clamp(88px, calc(88 / var(--screen-w) * 100 * 1vw), 1000vw);
	}
	.cmpnt-side-dim-text .box-dimmed {
		flex-shrink: 0;
		height: clamp(250px, calc(250 / var(--screen-w) * 100 * 1vw), 1000vw);
		margin-top: auto;
		padding: var(--space-40);
	}
	.cmpnt-side-dim-text .box-media {
		width: clamp(275px, calc(275 / var(--screen-w) * 100 * 1vw), 1000vw);
		height: clamp(275px, calc(275 / var(--screen-w) * 100 * 1vw), 1000vw);
		margin: 0 auto;
	}
	.cmpnt-side-dim-text.shooting-star {
		background-image: url('/content/dam/hyundai/ww/en/images/company/metaverse/nft/shooting-star-bg-mo.jpg');
	}
	.cmpnt-side-dim-text.mob-ed {
		background-image: url('/content/dam/hyundai/ww/en/images/company/metaverse/nft/mob-ed-bg-mo.jpg');
	}
	.cmpnt-side-dim-text.plasma-nft {
		background-image: url('/content/dam/hyundai/ww/en/images/company/metaverse/nft/plasma-nft-mo.jpg');
	}
	.cmpnt-side-dim-text.ioniq-6-nft {
		background-image: url('/content/dam/hyundai/ww/en/images/company/metaverse/nft/ioniq-6-nft-mo.jpg');
	}
}

/* cmpnt-card-column */
.cmpnt-card-column {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.cmpnt-card-column.bg-blue {
	background-color: var(--hyundai-blue);
	color: #fff;
}
.cmpnt-card-column.bg-white {
	border: 1px solid rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 741px) {
	.cmpnt-card-column {
		overflow-y:auto;
		height: clamp(
			calc((658 - (658 * 0.19)) * 1px),
			calc(658 / var(--screen-w) * 100 * 1vw),
			658px
		);
		padding: clamp(
				calc((60 - (60 * 0.19)) * 1px),
				calc(60 / var(--screen-w) * 100 * 1vw),
				60px
			)
			clamp(
				calc((30 - (30 * 0.19)) * 1px),
				calc(30 / var(--screen-w) * 100 * 1vw),
				30px
			);
	}
}
@media screen and (max-width: 740px) {
	.cmpnt-card-column {
		height: clamp(457px, calc(457 / var(--screen-w) * 100 * 1vw), 1000vw);
		padding: var(--space-40);
	}
	.cmpnt-card-column .title-xxs {
		min-height: var(--space-40);
		margin-bottom: var(--space-15);
	}
}

/* accordion */
.cmpnt-accordion {
	display: flex;
	flex-direction: column;
}
.cmpnt-accordion .accor-title {
	display: flex;
	justify-content: space-between;
	background-color: #fff;
}
.cmpnt-accordion .accor-title .title {
	line-height: 1.46em;
}
.cmpnt-accordion .accor-desc {
	overflow: hidden;
	max-height: 0;
	background-color: var(--light-sand);
}
.cmpnt-accordion .accor-desc .desc {
	display: block;
}
/* active */
.cmpnt-accordion .accor-item.active .accor-desc {
	max-height: clamp(300px, calc(300 / var(--screen-w) * 100 * 1vw), 1000vw);
}
.cmpnt-accordion .accor-item.active .icon-arrow.down {
	transform: rotate(90deg);
}
@media screen and (min-width: 741px) {
	.cmpnt-accordion {
		gap: 10px;
	}
	.cmpnt-accordion .accor-title .title {
		padding: 36px 40px;
	}
	.cmpnt-accordion .accor-desc .desc {
		padding: 50px;
	}
	.cmpnt-accordion .accor-button {
		padding: 0 40px;
	}
}
@media screen and (max-width: 740px) {
	.cmpnt-accordion {
		gap: 8px;
	}
	.cmpnt-accordion .accor-title .title {
		display: flex;
		align-items: center;
		min-height: clamp(36px, calc(36 / var(--screen-w) * 100 * 1vw), 1000vw);
		padding: var(--space-15) 0 var(--space-15) var(--space-20);
	}
	.cmpnt-accordion .accor-desc .desc {
		padding: var(--space-30) var(--space-20);
	}
	.cmpnt-accordion .accor-button {
		padding: 0 clamp(15.5px, calc(15.5 / var(--screen-w) * 100 * 1vw), 1000vw);
	}
}

/* grid */
.box-grid {
	display: grid;
}
.box-grid.grid-3 {
	grid-template-columns: repeat(3, 1fr);
}
@media screen and (min-width: 741px) {
	.box-grid {
		gap: var(--space-20);
	}
}
@media screen and (max-width: 740px) {
	.box-grid {
		gap: var(--space-15);
	}
}

/* ZEPETO */

/* ZEPETO에만 있는 신규 케이스 */
.zepeto .box-text.has-title-sm {
	margin-top: 100px;
}
@media screen and (max-width: 740px) {
	.zepeto .box-text.has-title-sm {
		margin-top: 50px;
	}
}
.zepeto .box-text.zepeto{
	margin-top: var(--space-50);
}
.zepeto .box-text.zepeto .desc.desc-md{
	margin-top: 10px;
}
.zepeto .italic {
  font-style: italic;
}