:root {
	--black : #000 ;
	--white : #fff ;
	
	--usp-bg : rgba(0,0,0, 0.8) ;
	
	--side-bg : rgba(255, 255, 255, 0.6) ;
	--side-shadow : 0px 4px 4px rgba(0, 0, 0, 0.25) ;
	--side-filter : blur(4px) ;


	--gnb-model-height : 56px ;
	--gnb-model-cont-width : calc( var(--gnb-model-height) * 5 - 10px ) ;
	
	--lnb-width : 80px ; 
	--lnb-padding : 20px ; 
}



*, ::after, ::before { 
	box-sizing: border-box; 
	outline : none ; 
	margin : 0 ; 
	padding : 0 ; 
	border : none ;
	-webkit-tab-highlight-color : transparent ; 
	-webkit-box-sizing : border-box ; 
	-moz-box-sizing : border-box ;
	-webkit-tap-highlight-color: transparent;
}
dl, ul { 
	list-style-type : none ; 
	margin-block-start: 0 ; 
	margin-block-end: 0 ; 
	padding-inline-start: 0 
}
dd { 
	margin-inline-start: 0 
}
button { 
	padding-block: 0 ; 
	padding-inline: 0 ; 
	border-width: 0 ;
	background : none ;
	color : inherit ;
	-webkit-appearance : none ; 
}
body {
	font-family : "Inter","Noto Sans KR",sans-serif ;
	margin : 0 ;
	overflow : hidden ;
	background-color : var(--black) ;
}
.hidden {
	display : none !important 
}
.loading {
	position : absolute ;
	top : 50% ;
	left : 50% ;
	transform : translate(-50%,-50%) ;
	width : 500px ;
	height : 500px ;
	z-index : 3 ;
}
.loading canvas {
	display : block ;
	width : 500px ;
	height : 500px ;
}
.loading .percent {
	font-weight : 600 ;
	font-size : 20px ;
	line-height : -.1em ; 
	position : absolute ;
	top : 0 ;
	left : 0 ;
	width : 100% ;
	text-align : center ;
	line-height : 500px ;
	color : var(--white) ;
}

nav.models {
	position : absolute ;
	top : var(--gnb-model-height) ;
	width: var(--gnb-model-cont-width) ;
	height: var(--gnb-model-height) ;
	left: 50%;
	transform : translateX(-50%) ;
	background-color : var(--white) ;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(4px);
	border-radius: calc( var(--gnb-model-height) / 2 );
}
nav.models ul {
	display : flex ;
	position : relative ;
	width : 100% ; 
}
nav.models ul > li {
	width : 50% ;
	line-height : var(--gnb-model-height) ;
	text-align : center ;
	color : var(--black) ; 
	cursor : pointer ; 
	font-weight : 600 ; 
}
nav.models .selected {
	overflow : hidden ;
	width : 50% ;
	height : 100% ;
	position : absolute ;
	top : 0 ;
	left : 0 ;
	z-index : 2 ;
}
nav.models .selected .cursor {
	position : absolute ;
	width: 127px;
	height: 47px;
	top : 4.5px ;
	left : 4.5px ;
	background: var(--black) ;
	border-radius: 23px;
}
nav.models .selected ul {
	width : 200% ;
}
nav.models .selected ul > li {
	color : var(--white) ;
}
nav.models .selected,
nav.models .selected ul,
nav.models .selected .cursor {
	transition : ease-out .2s ;
}
nav.models .select-1 + .selected {
	transform : translateX(100%) ;
}
nav.models .select-1 + .selected ul {
	transform : translateX(-50%) ;
}
nav.models .select-1 + .selected .cursor {
	left : 2.25px ;
}

main > aside {
	position: absolute;
	width: var(--lnb-width) ;
	top : 50% ;
	transform : translateY(-50%) ;
	background : var(--side-bg) ;
	box-shadow : var(--side-shadow) ; 
	backdrop-filter : var(--side-filter) ;
	border-radius: calc( var(--lnb-width) / 2 );
	padding : 10px ;
}
main > aside.left-side {
	left : var(--lnb-width) ;
}
main > aside.right-side {
	right : var(--lnb-width) ;
}
main > aside .buttons {
	display : grid ;
	gap : var(--lnb-padding) ;
}
main > aside .buttons button {
	width : calc( var(--lnb-width) - var(--lnb-padding) ) ;
	height : calc( var(--lnb-width) - var(--lnb-padding) ) ;
	cursor : pointer ; 
	border-radius : 50% ; 
	font-weight : 600 ; 
	font-family : "Inter", sans-serif ;
	background-color : var(--white) ; 
    display : grid ;
	position : relative ;
    place-content : center ;
}
main > aside .buttons button,
main > aside .buttons button > svg path {
	transition : ease-out .2s ; 
}
main > aside .buttons button:not(.toggle-icon).on {
	background-color : var(--black) ;
	color : var(--white) ;
}
main > aside .buttons button:not(.toggle-icon).on > svg path {
	fill : var(--white) ;
}
main > aside .buttons button.toggle-icon:not(.on) > svg ~ svg,
main > aside .buttons button.toggle-icon.on > svg:first-child {
	display : none ;
}
main > aside .buttons button#btn-bg:after {
	content : "1" ;
	font-size : 18px ; 
}
main > aside .buttons button#btn-bg.on:after {
	content : "2" ;
}
main > aside .buttons button .popup {
	position: fixed;
	width : 60px ; 
	right : 90px ;
	top : 50% ;
	transform : translateY(-50%) ; 
	background-color : var(--white) ;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
	border-radius: 30px;
	padding : 10px ; 
}
main > aside .buttons button .popup.t2 {
	border-radius : 30px ;
	bottom : 0 ;
	padding : 10px 20px ;
}
main > aside .buttons button:not(.on) .popup {
	display : none ; 
}
main > aside .buttons button .popup ul.select-items {
	display : grid ;
	grid-template-columns : repeat(1,1fr) ;
	grid-gap : 18px ;
	margin : 10px 0 ;
}
main > aside .buttons button .popup ul.select-items > li {
	width : 40px ;
	height : 40px ; 
	cursor : pointer ; 
	background-size : cover ;
	background-repeat : no-repeat ;
	position : relative ; 
}
main > aside .buttons button .popup ul.select-items.colors {
	grid-gap : 10px ;
	margin : 5px ;
}
main > aside .buttons button .popup ul.select-items.colors > li {
	width : 30px ;
	height : 30px ; 
}
main > aside .buttons button#btn-color > svg {
	width : 45px ;
}
main > aside .buttons button#btn-color.on:not(.interior) .popup.interior,
main > aside .buttons button#btn-color.on.interior .popup.exterior {
	display : none ;
}
main > aside .buttons button .popup.exterior ul.select-items.colors > li:nth-child(1) {
	background-image : url('./assets/colors/0217_Clear_White.png') ;
}
main > aside .buttons button .popup.exterior ul.select-items.colors > li:nth-child(2) {
	background-image : url('./assets/colors/0217_Snow_white_pearl.png') ;
}
main > aside .buttons button .popup.exterior ul.select-items.colors > li:nth-child(3) {
	background-image : url('./assets/colors/0217_Ivory_Silver.png') ;
}
main > aside .buttons button .popup.exterior ul.select-items.colors > li:nth-child(4) {
	background-image : url('./assets/colors/0217_Shale_Grey.png') ;
}
main > aside .buttons button .popup.exterior ul.select-items.colors > li:nth-child(5) {
	background-image : url('./assets/colors/0217_Aurora_Black_Pearl.png') ;
}
main > aside .buttons button .popup.exterior ul.select-items.colors > li:nth-child(6) {
	background-image : url('./assets/colors/0217_Morning_haze.png') ;
}
main > aside .buttons button .popup.exterior ul.select-items.colors > li:nth-child(7) {
	background-image : url('./assets/colors/0217_Yacht_blue.png') ;
}
main > aside .buttons button .popup.exterior ul.select-items.colors > li:nth-child(8) {
	background-image : url('./assets/colors/0217_Magma_Red.png') ;
}
main > aside .buttons button .popup.exterior ul.select-items.colors > li:nth-child(9) {
	background-image : url('./assets/colors/0217_Ivory_Silver_Matte.png') ;
}
main > aside .buttons button .popup.exterior ul.select-items.colors > li:nth-child(10) {
	background-image : url('./assets/colors/0217_Yacht_blue_matte.png') ;
}
main > aside .buttons button .popup ul.select-items > li.on:before {
	width : calc( 100% + 6px ) ;
	height : calc( 100% + 6px ) ;
	content : "" ;
	display : block ; 
	position : absolute ;
	top : -3px ;
	left : -3px ; 
	border-radius : 50% ;
	border : solid 4px #000 ;
}

main > aside .buttons button .popup ul.select-items.colors > li.cts {
	background-image : url('./assets/colors/interior/ELG_off.png') ;
}
main > aside .buttons button .popup ul.select-items.colors > li.lbr {
	background-image : url('./assets/colors/interior/EWR_off.png') ;
}
main > aside .buttons button .popup ul.select-items.colors > li.rbq {
	background-image : url('./assets/colors/interior/PRS_off.png') ;
}

main > aside .buttons button .popup ul.select-items.wheel > li.gtl {
	background-image : url('./assets/wheel/GTL.png') ;
}
main > aside .buttons button .popup ul.select-items.wheel > li.type1 {
	background-image : url('./assets/wheel/STD1.png') ;
}
main > aside .buttons button .popup ul.select-items.wheel > li.type2 {
	background-image : url('./assets/wheel/STD2.png') ;
}
main > aside .buttons button.gtl,
main > aside .buttons button.gtl .popup ul.select-items.wheel > li:not(.gtl),
main > aside .buttons button:not(.gtl) .popup ul.select-items.wheel > li.gtl {
	display : none ;
}

main > .loading {
}
main > .loading.off {
	animation : fade-out 1s linear forwards ; 
	opacity : 0 ;
}
@keyframes fade-out {
	from { opacity : 1 }
	to { opacity : 0 }
}
main > nav,
main > aside {
	transition : ease-out .5s ;
}
main > nav.models.off {
	transform : translate(-50%,-112px) ;
}
main > aside.left-side.off {
	transform : translate(-160px,-50%) ;
}
main > aside.right-side.off {
	transform : translate(310px,-50%) ;
}

/**** s: USP ****/
body > section.usp {
	position : fixed ;
	z-index : 100 ;
	background-color : var(--usp-bg) ;
	display : grid ;
	top : 0 ;
	left : 0 ;
	width : 100% ;
	height : 100% ;
	padding : 40px ; 
	place-items : center ;
	backdrop-filter : blur(4px) ;
}
body > section.usp > .body {
	padding : 20px ;
	background-color : var(--white) ;
	border-radius : 20px ; 
	position : relative ;
	max-width : 50% ;
	max-height : 100% ; 
}
body > section.usp,
body > section.usp > .body {
	transition : ease-out .25s ; 
}
body > section.usp:not(.on) {
	opacity : 0 ; 
}
body > section.usp:not(.on) > .body {
	transform : scale(.9) ;
}
body > section.usp > .body .media {
	max-width : 100% ;
	max-height : 100% ; 
	border-radius : 10px ; 
	display : block ;
}
body > section.usp > .body .media + button.play {
	position : absolute ; 
	background : rgba(0,0,0,.5) ; 
	border-radius : 10px ;
	top : 20px ; 
	left : 20px ; 
	width : calc( 100% - 40px );
	height : calc( 100% - 40px );
	cursor : pointer ; 
	background-position : center ;
	background-repeat : no-repeat ; 
	background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='50px' height='50px' viewBox='0 0 256 256' xml:space='preserve'%3E%3Cdefs%3E%3C/defs%3E%3Cg style='stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 0.75;' transform='translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)' %3E%3Cpath d='M 45 90 C 20.187 90 0 69.813 0 45 C 0 20.187 20.187 0 45 0 c 24.813 0 45 20.187 45 45 C 90 69.813 69.813 90 45 90 z M 45 10 c -19.299 0 -35 15.701 -35 35 s 15.701 35 35 35 s 35 -15.701 35 -35 S 64.299 10 45 10 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 0.75;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round' /%3E%3Cpath d='M 61.806 47.026 c 1.559 -0.9 1.559 -3.151 0 -4.051 l -12.91 -7.453 l -12.91 -7.453 c -1.559 -0.9 -3.509 0.225 -3.509 2.026 V 45 v 14.907 c 0 1.801 1.949 2.926 3.509 2.026 l 12.91 -7.453 L 61.806 47.026 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 0.75;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round' /%3E%3C/g%3E%3C/svg%3E") ;
}
/**** e: USP ****/




main > .disclaimer {
	position : absolute ;
	left : 80px ;
	bottom : 30px ; 
	font-size : 12px ; 
	color : var(--white) ;
	z-index : 2 ;
	opacity : 0 ;
	transition : ease-out .5s ; 
}
main > .disclaimer.on {
	opacity : 1 ;
}
main > .disclaimer p {
	position : relative ;
	padding-left : 20px ;
}
main > .disclaimer p:before {
	content : "" ;
	width : 4px ;
	height : 4px ;
	display : block ;
	position : absolute ;
	top : 50% ;
	left : 0 ;
	background-color: var(--white) ;
	border-radius : 50% ;
	transform : translateY(-50%) ;
}
html[lang='ko-kr'] *.lang-int,
html[lang='en-us'] *.lang-kr { 
	display : none ; 
}

html[lang='ko-kr'] ul.select-items.colors > li.ud,
html[lang='ko-kr'] ul.select-items.colors > li.ebb,
html[lang='en-us'] body.select-model-1 ul.select-items.colors > li.ud,
html[lang='en-us'] body.select-model-1 ul.select-items.colors > li.isg,
html[lang='en-us'] body.select-model-1 ul.select-items.colors > li.ag3,
html[lang='en-us'] body.select-model-1 ul.select-items.colors > li.unt {
	display : none ;
}

main > canvas {
	position : fixed ;
	top : 0 ;
	left : 0 ;
	width : 100% !important ;
	height : 100% !important ;
}

@media only screen and (max-width: 1600px) {
	main > nav {
		transform: translate(-50%,-50%) scale(.75) !important ;
		top : 3rem ; 
	}
	main > aside {
		transform: translateY(-50%) scale(.75) ;
	}
	main > aside.left-side {
		left : calc( var(--lnb-width) * .5 ) ;
	}
	main > aside.right-side {
		right : calc( var(--lnb-width) * .5 ) ;
	}
}

@media only screen and (max-width: 780px) {
	html, body, main {
		height : calc( 100svh - env(safe-area-inset-bottom) ) !important ; 
	}
	main > canvas {
		top : env(safe-area-inset-bottom) ;
		max-height : calc( var(--vh) * 100 );
	}
	@supports (height: 100dvh) {
		main > canvas {
			height: 100dvh;
		}
	}

	body .loading,
	body .loading canvas { 
		width : 50vw !important ;
		height : 50vw !important ;
	}
	body .loading .percent {
		line-height : 50vw !important ;
	}

	body nav.models {
		top : 20px ;
		height: 41.48px;
		width: 200px;
		border-radius: 20.74px;
	}
	body nav.models ul > li {
		font-size : 11px ; 
		line-height : 41.48px ;
	}
	body nav.models .selected .cursor {
		width : 94.07px ;
		height: 34.07px;
		top : 3.7px ;
		left : 4.44px ;
		border-radius: 17.035px;
	}
	body nav.models .select-1 + .selected .cursor {
		left : 1.5px ;
	}

	body main > aside {
		width: 40px;
		border-radius: 20px;
		padding : 5px ;
		background: rgba(255, 255, 255, 0.6);
	}
	body main > aside.left-side {
		left : 20px ;
		transform : translateY(0) ;
		top : 82px ; 
	}
	body main > aside.right-side {
		right : 50% ;
		transform : translateX(50%) ;
        width: auto;
		height: 70px;
        top: calc(100dvh - 100px);
	}
	body main > aside.right-side.off {
		transform : translateY(100vh) ;
	}
	body main > aside .buttons {
		gap : 10px ;
	}
	body main > aside .buttons button {
		width : 30px ;
		height : 30px ;
		font-size: 6px ;
		line-height : 0.95 ; 
	}
	body main > aside.left-side .buttons button > svg {
		width : 20px !important ;
		height : 20px !important ;
	}
	body main > aside .buttons button#btn-bg:after {
		font-size : 12px ; 
	}
	body main > aside .buttons button .popup {
		right : 50% ;
		transform : translateX(50%) ;
		bottom : 80px ;
		border-radius: 30px;
		padding : 6.67px 10px ; 
		width: auto;
        top: inherit;
	}
	body main > aside .buttons button .popup ul.select-items {
		display : flex ;
		gap : 15.7px ;
		margin : 0 ;
	}
	body main > aside .buttons button .popup ul.select-items > li {
		width : 26.67px ;
		height : 26.67px ; 
	}
	body main > aside .buttons button#btn-color .popup.exterior {
		padding : 9px 12px ; 
	}
	body main > aside .buttons button#btn-color .popup.exterior ul.select-items {
		gap : 8px ;
		margin : 0 ;
	}
	body main > aside .buttons button#btn-color .popup.exterior ul.select-items > li {
		width : 22.44px ;
		height : 22.44px ; 
	}


	body main > aside.right-side {
		border-radius : 35px ;
		padding : 8.75px 9.29px ;
	}
	body main > aside.right-side .buttons {
		display : flex ; 
		gap : 17.75px ; 
	}
	body main > aside.right-side .buttons button {
		width : 52.5px ;
		height : 52.5px ; 
	}
	body main > aside.right-side .buttons button > svg {
		width : 29.75px !important ;
		height : 29.75px !important ;
	}

	body > section.usp {
		padding : 10px ; 
	}
	body > section.usp > .body {
		background : none ; 
		max-width: 100% ; 
	}
	body > section.usp > .body,
	body > section.usp > .body .media {
		padding : 0 ;
		border-radius : 5px ; 
	}

	main > .disclaimer {
		left : 20px ;
		bottom : 10px ; 
		font-size : .6rem ; 
	}
	main > .disclaimer p {
		padding-left : 10px ;
	}
	main > .disclaimer p:before {
		width : 3px ;
		height : 3px ;
	}

}