@keyframes WheelArrow {

			0%,
			to {
				bottom: 0
			}

			60% {
				bottom: 10px;
				opacity: .5
			}
		}

		@keyframes WheelArrow2 {

			0%,
			to {
				top: 0
			}

			60% {
				top: -10px;
				opacity: .5
			}
		}

		@keyframes Show100 {
			0% {
				stroke-dashoffset: 537
			}

			to {
				stroke-dashoffset: 0
			}
		}

		@keyframes Play {
			0% {
				background-position: 0
			}

			to {
				background-position: -360px
			}
		}

		@keyframes Ani {
			0% {
				box-shadow: 0 0 0 var(--color-white-zero);
				border: 1px solid var(--color-white-zero);
				transform: scale(0)
			}

			70% {
				box-shadow: 0 0 50px var(--color-white);
				border: 1px solid var(--color-white);
				transform: scale(1)
			}

			to {
				box-shadow: 0 0 60px var(--color-white-zero);
				border: 0 solid var(--color-white-zero);
				transform: scale(2)
			}
		}

		@keyframes Rotate {
			0% {
				transform: rotate(0) translateZ(0)
			}

			to {
				transform: rotate(360deg) translateZ(0)
			}
		}

		@keyframes fadeInBlur {
			0% {
				opacity: 0;
				filter: blur(10px)
			}

			to {
				opacity: 1;
				filter: none
			}
		}

		@keyframes fadeOutBlur {
			to {
				filter: blur(8px)
			}
		}

		@keyframes fadeIn {
			0% {
				opacity: 0
			}

			to {
				opacity: 1
			}
		}

		@keyframes fadeOut {
			0% {
				opacity: 1
			}

			to {
				opacity: 0
			}
		}

		@keyframes fadeInRotate {
			0% {
				opacity: 0;
				transform: translate3d(0, 100px, 0) rotate(-62deg)
			}

			to {
				opacity: 1;
				transform: translate3d(0, 0, 0) rotate(-62deg)
			}
		}

		@keyframes fadeInUp {
			0% {
				opacity: 0;
				transform: translate3d(0, 100px, 0)
			}

			to {
				opacity: 1;
				transform: none
			}
		}

		@keyframes fadeInDown {
			0% {
				opacity: 0;
				transform: translate3d(0, -100px, 0)
			}

			to {
				opacity: 1;
				transform: none
			}
		}

		@keyframes Blur {
			0% {
				filter: none;
				transform: none
			}

			to {
				filter: blur(8px);
				transform: scale(1.01)
			}
		}

		@keyframes greyScale {
			0% {
				filter: none
			}

			to {
				filter: grayscale(1)
			}
		}

		@keyframes zoomLarge {
			0% {
				opacity: 0;
				transform: scale(1.5)
			}

			to {
				opacity: 1;
				transform: none;
				pointer-events: auto
			}
		}

		@keyframes scaleLarge {
			0% {
				opacity: 0;
				transform: scale(1.15)
			}

			to {
				opacity: 1;
				transform: none;
				pointer-events: auto
			}
		}

		@keyframes scaleLarge2 {
			0% {
				opacity: .5;
				filter: blur(10px);
				transform: scale(1.15)
			}

			to {
				opacity: 1;
				transform: none;
				filter: none;
				pointer-events: auto
			}
		}

		@keyframes scaleSmall {
			0% {
				transform: scale(.8) translate3d(0, 100px, 0);
				opacity: 0
			}

			to {
				transform: none;
				opacity: 1
			}
		}

		@keyframes goHeight {
			0% {
				transform: scale3d(1, 0, 1)
			}

			to {
				transform: scale3d(1, 1, 1)
			}
		}

		@keyframes goWidth {
			0% {
				transform: scale3d(0, 1, 1)
			}

			to {
				transform: scale3d(1, 1, 1)
			}
		}

		@keyframes toLeft {
			0% {
				opacity: 0;
				left: -100px
			}

			to {
				opacity: 1;
				left: 0
			}
		}

		@keyframes toRight {
			0% {
				opacity: 0;
				right: -100px
			}

			to {
				opacity: 1;
				right: 0
			}
		}

		@keyframes goRight {
			0% {
				opacity: 0;
				transform: translate3d(-100px, 0, 0)
			}

			to {
				opacity: 1;
				transform: none
			}
		}

		@keyframes goLeft {
			0% {
				opacity: 0;
				transform: translate3d(100px, 0, 0)
			}

			to {
				opacity: 1;
				transform: none
			}
		}

		@keyframes StrokeLine {
			0% {
				stroke-dashoffset: 0
			}

			to {
				stroke-dashoffset: 100
			}
		}

		@keyframes StrokeLine1 {
			0% {
				stroke-dashoffset: 0
			}

			to {
				stroke-dashoffset: -100
			}
		}

		@keyframes DrawStroke {
			0% {
				stroke-dashoffset: 1000
			}

			to {
				stroke-dashoffset: 0
			}
		}

		@keyframes moveLeft {
			to {
				transform: translateX(-100%)
			}
		}

		@keyframes moveRight {
			to {
				transform: translateX(100%)
			}
		}

		@keyframes moveUp {
			to {
				transform: translateY(-100%)
			}
		}

		@keyframes changeColor {

			0%,
			to {
				fill: var(--color-normal)
			}

			80% {
				fill: var(--color-white)
			}
		}

		@keyframes changeColor2 {

			0%,
			to {
				fill: var(--color-white)
			}

			80% {
				fill: var(--color-normal)
			}
		}

		@keyframes Vertical {
			0% {
				transform: rotate(0);
				filter: none
			}

			50% {
				transform: rotate(180deg);
				filter: brightness(140%)
			}

			to {
				transform: rotate(360deg);
				filter: none
			}
		}

		@keyframes Horizontal {
			0% {
				transform: rotateY(0) rotateX(45deg)
			}

			25% {
				transform: rotateY(90deg) rotateX(15deg)
			}

			50% {
				transform: rotateY(180deg) rotateX(95deg)
			}

			75% {
				transform: rotateY(270deg) rotateX(65deg)
			}

			to {
				transform: rotateY(360deg) rotateX(45deg)
			}
		}

		@keyframes Bright {

			0%,
			to {
				filter: none
			}

			50% {
				filter: brightness(120%)
			}
		}

		@keyframes clipPath {
			0% {
				clip-path: circle(0 at 100% 0)
			}

			to {
				clip-path: circle(150% at 100% 0)
			}
		}

		@keyframes clipPathCenter {
			0% {
				clip-path: circle(0 at 50% 50%)
			}

			to {
				clip-path: circle(150% at 100% 0)
			}
		}

		@keyframes bgGradient {

			0%,
			to {
				background-position: 0 0
			}

			50% {
				background-position: 100% 50%
			}
		}

		a,
		abbr,
		acronym,
		address,
		applet,
		article,
		aside,
		audio,
		b,
		big,
		blockquote,
		canvas,
		caption,
		center,
		code,
		dd,
		del,
		details,
		dfn,
		div,
		dl,
		dt,
		embed,
		fieldset,
		figcaption,
		figure,
		footer,
		form,
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		header,
		hgroup,
		iframe,
		img,
		ins,
		kbd,
		label,
		legend,
		li,
		mark,
		menu,
		nav,
		object,
		ol,
		output,
		p,
		pre,
		q,
		ruby,
		s,
		samp,
		section,
		small,
		span,
		strike,
		strong,
		sub,
		summary,
		table,
		tbody,
		td,
		tfoot,
		th,
		thead,
		time,
		tr,
		tt,
		u,
		ul,
		var,
		video {
			margin: 0;
			padding: 0;
			border: 0;
			vertical-align: baseline
		}

		body,
		html {
			border: 0;
			vertical-align: baseline
		}

		cite,
		em,
		i,
		sup {
			margin: 0;
			padding: 0;
			border: 0
		}

		article,
		aside,
		details,
		figcaption,
		figure,
		footer,
		header,
		hgroup,
		menu,
		nav,
		section,
		svg {
			display: block
		}

		*,
		:after,
		:before {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box
		}

		.box-nav li.current .click::after,
		.container,
		.header {
			opacity: 0
		}

		.container.visible,
		.header.visible {
			opacity: 1
		}

		:root {
			--color-normal: #d6b194;
			--color-normal-light: #e8d2b4;
			--color-normal-light-2: #c0a886;
			--color-normal-dark: #76563d;
			--color-normal-brown: #c49776;
			--color-normal-brown-dark: #b07d54;
			--color-highlight: #467084;
			--color-highlight-dark: #093447;
			--color-normal-highlight: #fef4e7;
			--color-orange: #ffa336;
			--color-white: #fff;
			--color-red: #ff1b25;
			--color-violet: #c9007f;
			--color-pink: #ffc8bb;
			--color-green: #779d56;
			--color-green-light: #ccdec7;
			--color-normal-zero: rgba(214, 177, 148, 0);
			--color-normal-alpha-05: rgba(214, 177, 148, 0.5);
			--color-normal-alpha-08: rgba(214, 177, 148, 0.8);
			--color-normal-alpha-98: rgba(214, 177, 148, 0.98);
			--color-normal-dark-6: rgba(118, 86, 61, 0.6);
			--color-highlight-08: rgba(70, 112, 132, 0.8);
			--color-white-zero: rgba(255, 255, 255, 0);
			--color-white-alpha-01: rgba(255, 255, 255, 0.1);
			--color-white-alpha-02: rgba(255, 255, 255, 0.2);
			--color-white-alpha-03: rgba(255, 255, 255, 0.3);
			--color-white-alpha-04: rgba(255, 255, 255, 0.4);
			--color-white-alpha-05: rgba(255, 255, 255, 0.5);
			--color-white-alpha-06: rgba(255, 255, 255, 0.6);
			--color-white-alpha-08: rgba(255, 255, 255, 0.8);
			--color-black-zero: rgba(0, 0, 0, 0);
			--color-black-alpha-01: rgba(0, 0, 0, 0.1);
			--color-black-alpha-02: rgba(0, 0, 0, 0.2);
			--color-black-alpha-03: rgba(0, 0, 0, 0.3);
			--color-black-alpha-04: rgba(0, 0, 0, 0.4);
			--color-black-alpha-05: rgba(0, 0, 0, 0.5);
			--color-black: #333;
			--color-grey: #555;
			--color-grey-light: #aaa;
			--color-light: #846751;
			--color-white-grey: #efefef;
			--color-bg: #bbd0b6;
			--color-bg-grey: #959595;
			--color-bg-black: #000;
			--color-bg-red: #d02127;
			--bg-gradient-menu: linear-gradient(90deg, var(--color-normal-light) 0%, var(--color-normal) 100%);
			--bg-gradient-menu2: linear-gradient(135deg, var(--color-normal-light) 0%, var(--color-normal-brown) 80%);
			--bg-gradient: linear-gradient(135deg, var(--color-normal-zero) 0%, var(--color-normal-alpha-05) 70%, var(--color-normal) 100%);
			--bg-gradient-dark: linear-gradient(135deg, var(--color-normal) 0%, var(--color-highlight) 80%);
			--bg-gradient-dark2: linear-gradient(135deg, var(--color-normal-brown) 0%, var(--color-normal-dark) 80%);
			--icon-gradient-white: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 1) 100%);
			--color-bg-circle-1: radial-gradient(circle, var(--color-normal-highlight) 0%, var(--color-normal-light) 50%, var(--color-normal-brown) 100%);
			--color-bg-circle-2: radial-gradient(circle, var(--color-normal-light) 0%, var(--color-normal) 100%);
			--color-bg-circle-3: radial-gradient(circle, var(--color-highlight-dark) 0%, var(--color-black-zero) 70%);
			--color-bg-circle-4: radial-gradient(circle, var(--color-normal-light) 0%, var(--color-normal-brown) 70%);
			--color-bg-gradient: linear-gradient(90deg, var(--color-highlight) 0%, var(--color-normal) 100%);
			--color-bg-gradient-2: linear-gradient(0deg, var(--color-highlight) 0%, var(--color-normal) 100%);
			--color-bg-gradient-3: linear-gradient(0deg, var(--color-normal-brown) 0%, var(--color-black-zero) 100%);
			--color-bg-gradient-4: linear-gradient(0deg, var(--color-highlight) 0%, var(--color-normal-brown) 100%);
			--color-text-gradient: linear-gradient(0deg, var(--color-normal) 0%, var(--color-highlight) 100%);
			--bg-gradient-footer: linear-gradient(0deg, var(--color-normal-alpha-08) 0%, var(--color-normal-brown) 80%);
			--titleFontBig: 4.5vw;
			--titleFont: 2.5vw;
			--titleFontSmall: 1.5vw
		}

		body,
		html {
			width: 100%;
			margin: 0;
			padding: 0
		}

		html {
			-webkit-user-select: none;
			user-select: none;
			-webkit-font-smoothing: antialiased;
			text-rendering: optimizeLegibility
		}

		body {
			height: 100%;
			min-height: 100vh;
			font-family: Montserrat, sans-serif;
			line-height: 1;
			overflow: hidden;
			background: var(--color-bg-circle-1);
			font-weight: 400;
			font-style: normal;
			font-optical-sizing: auto
		}

		body,
		html {
			font-size: .9vw
		}

		blockquote::after,
		blockquote::before,
		q::after,
		q::before {
			content: none
		}

		:focus {
			outline: 0;
			border: 0
		}

		b,
		strong {
			text-decoration: none;
			font-weight: 700
		}

		del {
			text-decoration: line-through
		}

		img[alt] {
			font-size: 0
		}

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			line-height: 1.4
		}

		a {
			line-height: 1.5;
			color: currentColor
		}

		a,
		button,
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		input,
		p,
		select,
		textarea {
			font-family: Montserrat, sans-serif;
			font-style: normal;
			font-optical-sizing: auto
		}

		a,
		cite,
		code,
		dd,
		dl dt,
		em,
		i,
		ins,
		p,
		pre,
		sup {
			text-decoration: none
		}

		p {
			line-height: 1.5;
			font-weight: 400
		}

		div,
		li,
		span {
			line-height: 1.4
		}

		blockquote,
		q {
			quotes: none
		}

		cite,
		em,
		i,
		sup {
			vertical-align: baseline
		}

		sup {
			position: relative;
			bottom: .3rem;
			font-size: 70%
		}

		cite,
		em,
		i {
			line-height: 1.4;
			font-style: italic
		}

		button,
		input,
		select,
		textarea {
			-webkit-appearance: none;
			appearance: none
		}

		button {
			border: 0;
			cursor: pointer;
			background-color: transparent;
			padding-inline: 0;
			line-height: 1.4
		}

		input,
		select,
		textarea {
			line-height: 1.6
		}

		img:not([src]) {
			visibility: hidden
		}

		* {
			scrollbar-width: none;
			scrollbar-color: var(--color-white-alpha-05) var(--color-white-zero)
		}

		* ::-webkit-scrollbar,
		::-webkit-scrollbar {
			width: 0;
			display: none
		}

		::-webkit-scrollbar-thumb {
			background: var(--color-white-alpha-05)
		}

		::-webkit-scrollbar-track {
			background: var(--color-white-zero)
		}

		#render-styles,
		#svg_filter,
		#svg_gradient {
			position: absolute;
			width: 0;
			height: 0;
			overflow: hidden;
			opacity: 0;
			pointer-events: none
		}

		.load-center {
			position: fixed;
			width: 100vw;
			height: 100vh;
			top: 0;
			left: 0;
			z-index: 999
		}

		.load-svg {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -60%) scale(.65)
		}

		.load-center g {
			opacity: 0;
			transform-origin: center center
		}

		.load-center.show .gio,
		.load-center.show .the {
			animation-name: fadeInDown;
			animation-duration: .6s;
			animation-delay: .3s;
			animation-fill-mode: forwards
		}

		.load-center.show .gio {
			animation-name: scaleLarge;
			animation-duration: 1s;
			animation-delay: 0s
		}

		.load-center.show .riverside,
		.load-effect.move .loadlogo {
			animation-name: fadeInUp;
			animation-duration: .6s;
			animation-delay: .3s;
			animation-fill-mode: forwards
		}

		.loadx {
			position: fixed;
			top: 50%;
			left: 50%;
			width: 4rem;
			height: 4rem;
			margin: -2rem 0 0 -2rem;
			display: none;
			z-index: 110000
		}

		.loadx::after,
		.loadx::before {
			content: '';
			left: 0
		}

		.load-effect {
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			pointer-events: none;
			overflow: hidden;
			background: var(--color-bg-circle-1);
			z-index: 99999
		}

		.bg-landscape,
		.bg-portrait,
		.loadlogo,
		.mask-img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%
		}

		.loadlogo {
			opacity: 0
		}

		.bg-landscape,
		.bg-portrait,
		.mask-img {
			min-width: 100vw;
			min-height: 100vh;
			min-height: 100dvh;
			transform-origin: center center
		}

		.mask-img {
			position: relative;
			left: 50%;
			top: 50%;
			width: auto;
			height: auto;
			transform: translate(-50%, -50%);
			z-index: 2
		}

		.bg-landscape,
		.landscape,
		.mask-img {
			display: block
		}

		.bg-portrait,
		.language li.active,
		.portrait {
			display: none
		}

		.load-effect.out {
			background: 0 0
		}

		.load-effect.move .loadlogo {
			animation-name: scaleLarge;
			animation-duration: 1.2s;
			animation-delay: .2s
		}

		.header {
			position: fixed;
			width: 100%;
			top: 0;
			left: 0;
			height: auto;
			z-index: 110
		}

		.logo,
		.right-header {
			position: fixed;
			right: 1.8rem;
			opacity: 0
		}

		.logo {
			top: 1rem;
			width: calc(500/280*20vh);
			height: 20vh;
			z-index: 20
		}

		.effect::after,
		.loadx::after,
		.loadx::before,
		.logo::after,
		.logo::before {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0
		}

		.logo::after,
		.logo::before {
			left: 0;
			opacity: 0;
			transition: opacity .5s ease-out;
			content: ""
		}

		.logo.space {
			right: 3rem
		}

		.logo.cursor {
			cursor: pointer
		}

		.logo.scale-logo {
			width: calc(500/280*15vh);
			height: 15vh
		}

		.right-header {
			width: auto;
			height: auto;
			max-height: 3rem;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			bottom: 1.8rem;
			top: auto;
			text-align: center;
			pointer-events: none;
			z-index: 110
		}

		.right-header.normal {
			bottom: auto;
			top: 1.5rem
		}

		.right-header.hide {
			right: -100%;
			pointer-events: none
		}

		.effect,
		.right-header span {
			position: relative;
			display: block
		}

		.effect {
			width: 2.5rem;
			height: 2.5rem;
			pointer-events: none
		}

		.effect::after {
			content: '';
			right: 0;
			transform-origin: center center
		}

		.option-header svg,
		.right-header svg {
			position: relative;
			display: block;
			width: 2.5rem;
			height: 2.5rem;
			overflow: visible;
			z-index: 1
		}

		.right-header span {
			font-size: .9rem;
			text-transform: uppercase;
			font-weight: 700;
			text-shadow: 0 1px 1px var(--color-black-alpha-02);
			white-space: nowrap
		}

		.hotline-text>span {
			font-size: 105%
		}

		.option-header,
		.v360 {
			display: flex;
			justify-content: center;
			align-items: center
		}

		.option-header {
			width: auto;
			height: auto;
			left: 9rem;
			top: 1.5rem;
			text-align: left;
			text-transform: uppercase;
			opacity: 0;
			pointer-events: none;
			z-index: 110;
			position: fixed
		}

		.option-header.hide {
			top: -8rem;
			pointer-events: none
		}

		.option-header span,
		.title-page h1 {
			font-size: 1rem;
			text-transform: uppercase;
			white-space: nowrap
		}

		.language li a,
		.language li button,
		.option-header span {
			font-weight: 700;
			text-shadow: 0 1px 1px var(--color-black-alpha-02)
		}

		.option-header span {
			position: relative;
			display: block;
			line-height: 1.4
		}

		.v360 {
			position: relative;
			color: var(--color-white);
			margin: 0
		}

		.v360 .effect {
			margin: 0 1rem 0 0
		}

		.content-cube {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			animation: Bright 4s infinite linear
		}

		.cube {
			position: absolute;
			width: 35%;
			height: 35%;
			right: 20%;
			top: 20%;
			transform-style: preserve-3d;
			animation: Horizontal 4s infinite linear;
			z-index: 1
		}

		.box-cube,
		.subscribe {
			display: flex;
			justify-content: center;
			align-items: center
		}

		.box-cube {
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			position: absolute
		}

		.box-cube.front {
			background: var(--color-white-alpha-01);
			transform: translateZ(7px)
		}

		.box-cube.back {
			background: var(--color-white-alpha-02);
			transform: translateZ(-7px) rotateY(180deg)
		}

		.box-cube.top {
			background: var(--color-white-alpha-03);
			transform: rotateX(-90deg) translateY(-50%);
			transform-origin: top center
		}

		.box-cube.bottom {
			background: var(--color-white-alpha-04);
			transform: rotateX(90deg) translateY(50%);
			transform-origin: bottom center
		}

		.box-cube.left {
			background: var(--color-white-alpha-05);
			transform: rotateY(270deg) translateX(-50%);
			transform-origin: center left
		}

		.box-cube.right {
			background: var(--color-white-alpha-06);
			transform: rotateY(-270deg) translateX(50%);
			transform-origin: top right
		}

		.subscribe {
			position: relative;
			color: var(--color-white)
		}

		.subscribe .effect {
			margin: 0 5px 0 0
		}

		.hotline-text,
		.language {
			position: relative;
			margin: 0 1.5rem 0 0
		}

		.hotline-text {
			display: flex;
			justify-content: center;
			align-items: center;
			color: var(--color-white)
		}

		.hotline-text .effect {
			margin: 0 .3rem 0 0
		}

		.language {
			display: block;
			width: 2.5rem;
			height: 2.5rem;
			text-align: center
		}

		.language form,
		.language ul {
			width: 100%;
			height: 100%;
			position: relative;
			display: block
		}

		.active-nav,
		.language li {
			display: block;
			color: var(--color-white)
		}

		.language li {
			position: relative;
			width: 2.5rem;
			height: 2.5rem;
			margin: 0
		}

		.language li .effect,
		.nav-click svg {
			position: absolute;
			left: 0;
			top: 0
		}

		.language li a,
		.language li button {
			text-align: center;
			font-size: .9rem;
			padding: 0 0 1rem 1.5rem;
			width: 100%;
			height: 100%;
			text-transform: uppercase;
			color: currentColor;
			z-index: 1
		}

		.nav-click {
			position: fixed;
			top: .5rem;
			left: 2rem;
			display: flex;
			width: 5.5rem;
			height: 5.5rem;
			opacity: 0;
			pointer-events: none;
			z-index: 150
		}

		.nav-click svg {
			left: 5%;
			top: 5%;
			width: 90%;
			height: 90%;
			z-index: 1
		}

		.active-nav {
			top: 0;
			cursor: pointer;
			z-index: 10
		}

		.active-nav,
		.active-nav::after,
		.close-nav {
			position: absolute;
			left: 0;
			width: 100%;
			height: 100%
		}

		.active-nav::after {
			content: '';
			top: 0
		}

		.close-nav {
			top: -.2rem;
			display: block;
			color: var(--color-white);
			cursor: pointer;
			opacity: 0;
			z-index: 10
		}

		.nav-click.active .close-nav {
			animation-name: fadeInDown;
			animation-duration: 1s;
			animation-delay: .5s;
			animation-fill-mode: forwards;
			pointer-events: auto
		}

		.close-nav,
		.main-menu li.current .link-hoz,
		.nav-click.active .active-nav,
		.title-page {
			pointer-events: none
		}

		.title-page {
			position: absolute;
			width: auto;
			height: auto;
			writing-mode: vertical-rl;
			transform: rotate(180deg);
			top: 2rem;
			right: .8rem;
			text-align: center;
			overflow: hidden;
			opacity: 0;
			z-index: 10
		}

		.title-page h1 {
			line-height: 1.2;
			color: var(--color-white);
			writing-mode: vertical-rl;
			opacity: .5
		}

		.title-main {
			width: 100%;
			height: auto;
			margin: 0;
			z-index: 2
		}

		.title-main,
		.title-main h2,
		.title-main h3,
		.title-page h1 {
			display: block;
			position: relative
		}

		.title-main h2 {
			font-family: Newsreader, serif;
			font-optical-sizing: auto;
			font-weight: 300;
			font-size: var(--titleFontBig)
		}

		.title-main h2 strong {
			font-weight: 400
		}

		.title-main h3 {
			font-size: var(--titleFontSmall)
		}

		.text-ani-item {
			overflow: hidden
		}

		.text-ani-item span,
		.title-main h2 {
			line-height: 1.2
		}

		.text-ani-item .char {
			opacity: 0;
			transition: transform .8s ease, opacity .5s ease;
			transform-origin: center center
		}

		.box-nav li.current .click::before,
		.box-nav li.current span,
		.text-ani-item .char.move {
			opacity: 1
		}

		.break .text-ani-item .char:nth-child(odd) {
			transform: translateY(-50%)
		}

		.break .text-ani-item .char:nth-child(even) {
			transform: translateY(50%)
		}

		.break .text-ani-item .char.move,
		.navigation.show {
			transform: none
		}

		.container {
			position: relative;
			width: 100%;
			height: auto;
			min-height: 100vh;
			margin: 0;
			display: block;
			overflow: hidden
		}

		.nav,
		.navigation {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0
		}

		.navigation {
			left: 0;
			transform: translateY(100%);
			overflow: hidden;
			text-align: center;
			z-index: 100
		}

		.nav {
			right: 0;
			display: flex;
			text-align: right;
			align-items: center;
			justify-content: flex-end;
			z-index: 30
		}

		.main-menu {
			width: auto;
			height: auto;
			position: relative;
			display: block;
			margin: 0;
			padding: 0 10vw 0 0;
			list-style: none;
			z-index: 30
		}

		.main-menu li,
		.main-menu li>.icon svg {
			position: relative;
			width: 100%;
			display: block
		}

		.main-menu li {
			margin: 0;
			padding: 0 2rem 0 0;
			text-align: right;
			color: var(--color-white);
			overflow: hidden
		}

		.main-menu li .link-hoz {
			color: currentColor;
			padding: 1vh .8rem;
			position: relative;
			text-transform: uppercase;
			white-space: nowrap;
			display: inline-block;
			font-size: 1.5rem;
			font-style: italic
		}

		.main-menu li>.icon {
			content: '';
			width: 1rem;
			height: 1rem;
			position: absolute;
			top: calc(50% - .7rem);
			right: 1rem
		}

		.main-menu li>.icon svg {
			height: 100%
		}

		.link-hoz span {
			font-size: 1.5rem;
			font-style: italic;
			font-weight: 400
		}

		.main-menu li.active .link-hoz span,
		.main-menu li.current .link-hoz span {
			color: var(--color-highlight)
		}

		.main-menu li.active>.icon,
		.main-menu li.current>.icon {
			transform: scale(1.4);
			filter: none !important
		}

		.main-menu li.active>.icon path,
		.main-menu li.current>.icon path {
			stroke: url(#gradient_07)
		}

		.overlay-menu {
			position: fixed;
			height: 100%;
			width: 100%;
			left: 0;
			top: 0;
			overflow: hidden;
			z-index: 1
		}

		.logo-menu {
			position: absolute;
			width: 50vw;
			height: 28vw;
			top: calc(50% - 14vw);
			left: 5vw;
			pointer-events: none;
			z-index: 5
		}

		.logo-menu span {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			transition: all 1.5s cubic-bezier(.2, .6, .3, 1);
			opacity: 0
		}

		.logo-menu span:nth-child(1) {
			transform: scale(.8)
		}

		.logo-menu span:nth-child(2) {
			transform: scale(.8) translate3d(-200px, -100px, 0)
		}

		.logo-menu span:nth-child(3) {
			transform: scale(.8) translate3d(0, -100px, 0)
		}

		.logo-menu span:nth-child(4) {
			transform: scale(.8) translate3d(0, 100px, 0)
		}

		.overlay-menu::after {
			content: '';
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: var(--bg-gradient-menu);
			transition: clip-path 1s cubic-bezier(.83, .31, .2, .9);
			clip-path: circle(0 at 0 0);
			pointer-events: none
		}

		.overlay-menu.show::after {
			clip-path: circle(200% at 100% 0);
			pointer-events: auto
		}

		.footer.show,
		.overlay-menu.show {
			pointer-events: auto
		}

		.overlay-menu.show .logo-menu span:nth-child(1) {
			transform: none;
			opacity: 1;
			transition-delay: .8s
		}

		.overlay-menu.show .logo-menu span:nth-child(2) {
			transform: none;
			opacity: 1;
			transition-delay: .5s
		}

		.overlay-menu.show .logo-menu span:nth-child(3) {
			transform: none;
			opacity: 1;
			transition-delay: .6s
		}

		.overlay-menu.show .logo-menu span:nth-child(4) {
			transform: none;
			opacity: 1;
			transition-delay: .7s
		}

		.footer {
			position: fixed;
			width: auto;
			height: auto;
			bottom: 1.8rem;
			left: 7rem;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			pointer-events: none;
			z-index: 5
		}

		.copyright {
			position: relative;
			font-size: .7rem;
			text-transform: uppercase;
			color: var(--color-white);
			display: block;
			white-space: nowrap;
			padding: 1rem;
			z-index: 20
		}

		.copyright a {
			color: currentColor;
			display: none
		}

		.copyright.hidden {
			display: none
		}

		.footer.align-left {
			left: 2rem
		}

		.social {
			width: auto;
			height: auto;
			z-index: 20
		}

		.box-nav ul,
		.social ul {
			height: auto;
			list-style: none
		}

		.social,
		.social li,
		.social li button,
		.social ul {
			display: block;
			position: relative
		}

		.social ul {
			width: 100%
		}

		.social li {
			width: auto;
			height: auto;
			display: inline-block;
			vertical-align: middle;
			margin: 0 .3rem
		}

		.social li button {
			color: var(--color-white);
			border: 1px solid var(--color-white-alpha-05);
			border-radius: .5rem
		}

		.social li .facebook,
		.social li .youtube {
			width: 3rem;
			height: 3rem
		}

		.social li .zalo {
			width: 4rem;
			height: 3rem
		}

		.social li svg {
			width: 100%;
			height: 100%
		}

		.box-nav li.current,
		.no-wheel .box-nav {
			pointer-events: none
		}

		.box-nav,
		.box-nav li {
			display: flex;
			align-items: center;
			width: 2rem;
			height: auto
		}

		.box-nav {
			left: 2.2rem;
			top: 50%;
			justify-content: center;
			pointer-events: none;
			opacity: 0;
			transform: translate(-50%, -50%);
			transition: all 1s cubic-bezier(.215, .61, .355, 1);
			z-index: 20;
			position: fixed
		}

		.box-nav ul {
			width: auto;
			text-align: center;
			margin: 0
		}

		.box-nav li {
			position: relative;
			margin: 1rem 0;
			white-space: nowrap;
			cursor: pointer
		}

		.box-nav li span {
			font-size: .7rem;
			font-weight: 700;
			text-transform: uppercase;
			color: var(--color-white);
			text-shadow: 0 1px 1px var(--color-black-alpha-02);
			padding-left: 2rem;
			opacity: .5;
			transition: opacity .3s ease-in-out
		}

		.box-nav li span,
		.box-nav ul,
		.box-slider,
		.click,
		.social li svg {
			position: relative;
			display: block
		}

		.click {
			width: 1.6rem;
			height: 1.6rem
		}

		.click::after,
		.click::before {
			content: '';
			position: absolute;
			transition: opacity .3s ease-in-out
		}

		.click::after {
			top: .2rem;
			left: .2rem;
			width: 1.2rem;
			height: 1.2rem
		}

		.click::before {
			width: 1.6rem;
			height: 1.6rem;
			top: 0;
			left: 0;
			opacity: 0
		}

		#home-page .title-page,
		.box-nav li.hidden {
			display: none
		}

		.box-nav.show {
			pointer-events: auto;
			opacity: 1;
			transform: translate(0, -50%)
		}

		.box-nav ul::after,
		.box-nav ul::before {
			content: '';
			width: .1rem;
			height: 5rem;
			position: absolute;
			left: calc(50% - .05rem)
		}

		.box-nav ul::before {
			top: -4rem
		}

		.box-nav ul::after {
			bottom: -4rem
		}

		.box-slider {
			width: 100%;
			height: 100vh;
			overflow: hidden;
			-webkit-user-select: none;
			user-select: none
		}

		.group-central {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			pointer-events: none;
			opacity: 0;
			overflow: hidden;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			will-change: transform
		}

		.group-central:first-child {
			opacity: 1
		}

		.slide-inner {
			position: relative;
			height: 100%;
			display: flex;
			overflow: hidden;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden
		}

		.bg-inner,
		.content-main,
		.slide-inner {
			width: 100%;
			will-change: transform
		}

		.content-main {
			height: 100vh;
			left: 0;
			top: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0;
			position: absolute
		}

		.group-central.show-text {
			pointer-events: auto;
			opacity: 1;
			z-index: 2
		}

		.group-central.show-text .content-main {
			z-index: 5
		}

		.bg-inner {
			position: relative;
			height: 100%
		}

		.bg-cover,
		.box-cover {
			width: 100%;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover
		}

		.bg-cover {
			left: 0;
			top: 0;
			height: 100%;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			position: absolute
		}

		.bg-cover::after,
		.bg-cover::before {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			pointer-events: none;
			opacity: 0;
			display: none
		}

		.box-cover {
			height: calc(1125/2000*100vw);
			position: relative;
			display: none
		}

		.content-center {
			display: block;
			position: relative;
			width: auto;
			height: auto;
			z-index: 10
		}

		.box-txt,
		.box-txt p {
			position: relative;
			display: block;
			margin: 0 0 1rem
		}

		.box-txt {
			width: 100%;
			height: auto
		}

		.box-txt a,
		.box-txt p {
			text-shadow: 0 1px 1px var(--color-black-alpha-02)
		}

		.box-txt p {
			font-style: italic;
			line-height: 1.6
		}

		.box-txt a {
			color: currentColor
		}

		.box-txt p:last-child {
			margin: 0
		}

		.box-txt ul {
			position: relative;
			display: block;
			margin: 0;
			list-style-position: outside;
			padding-left: .8rem;
			text-align: left
		}

		.box-txt li {
			position: relative;
			text-shadow: 0 1px 1px var(--color-black-alpha-02);
			font-style: italic;
			margin: 0 0 .3rem
		}

		.box-txt h3 {
			margin: 0 0 10px
		}

		.box-txt i {
			font-size: .6rem;
			width: 80%;
			max-width: 50rem;
			display: block;
			margin: 1rem auto
		}

		.box-txt i::before {
			content: '';
			width: 4rem;
			height: 1px;
			display: block;
			margin: 0 auto 1rem;
			position: relative;
			background-color: var(--color-white-alpha-05)
		}

		.text-decor {
			position: absolute;
			width: 36vw;
			height: calc(300/700*36vw);
			pointer-events: none;
			will-change: transform
		}

		.is-touch .box-txt {
			margin: auto
		}

		.text-center {
			text-align: center
		}

		.text-left {
			text-align: left
		}

		.text-right {
			text-align: right
		}

		.text-jutify {
			text-align: justify
		}

		.text-italic {
			font-style: italic
		}

		.white-text {
			color: var(--color-white);
			text-shadow: 0 1px 1px var(--color-black-alpha-02)
		}

		.gradient-text {
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			-webkit-box-decoration-break: clone;
			background-image: var(--color-text-gradient)
		}

		.brown-text {
			color: var(--color-normal-dark)
		}

		.blue-text {
			color: var(--color-highlight-dark)
		}

		.yellow-text {
			color: var(--color-normal-brown)
		}

		.mix-multiply {
			mix-blend-mode: multiply
		}

		.mix-color-burn {
			mix-blend-mode: color-burn
		}

		.mix-overlay {
			mix-blend-mode: overlay
		}

		.pic-img {
			position: relative;
			display: block;
			width: 100%;
			height: auto;
			overflow: hidden
		}

		.pic-img img,
		.text-decor-cover {
			display: block;
			width: 100%;
			pointer-events: none
		}

		.pic-img img {
			object-fit: cover;
			object-position: center center;
			transform-origin: center center;
			height: 100%
		}

		.layout-move .pic-img,
		.pic-img img {
			position: absolute
		}

		.layout-move .pic-img img {
			left: 0;
			top: -50px;
			height: calc(100% + 100px)
		}

		.layout-move .column,
		.pic-img img {
			will-change: transform
		}

		.text-decor-cover {
			position: relative;
			height: auto;
			z-index: 10
		}

		.bgcanvas,
		canvas {
			position: absolute;
			pointer-events: none
		}

		canvas {
			width: 100%;
			height: 100%;
			display: block;
			top: 0;
			left: 0;
			transition: opacity .8s ease-in-out
		}

		.bgcanvas {
			width: 120vw;
			height: calc(1125/2000*120vw);
			top: 50%;
			left: 50%;
			transform: translate3d(-50%, -40%, 0);
			opacity: 0;
			transition: opacity 1s ease-in-out;
			z-index: 1
		}

		.bgcanvas.isPlay {
			opacity: .3
		}

		#home-page .box-nav li:first-child {
			display: none
		}

		#home-page .box-txt a,
		#home-page .box-txt p {
			font-size: 1rem
		}

		.home-wave .bg-inner::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background: var(--color-bg-circle-1)
		}

		.logo-center,
		.pattern,
		.tagline {
			position: absolute;
			opacity: 0;
			z-index: 2
		}

		.logo-center {
			width: 100vw;
			height: 100vh;
			top: 50%;
			transform: translate(-50%, -60%) scale(.65);
			transition: opacity .8s ease-in-out;
			pointer-events: none;
			left: 50%
		}

		.logo-center::after,
		.logo-center::before {
			content: "";
			position: absolute;
			width: 100%;
			left: 0;
			pointer-events: none
		}

		.pattern,
		.tagline {
			width: 100%;
			left: 0
		}

		.logo-center::after,
		.logo-center::before,
		.pattern {
			top: 0;
			transition: opacity .8s ease-in-out;
			height: 100%
		}

		.logo-center .pattern {
			-webkit-mask-position: center center;
			mask-position: center center;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-size: contain;
			mask-size: contain;
			filter: grayscale(.9) brightness(120%);
			mix-blend-mode: multiply
		}

		.logo-center.show,
		.pattern.show,
		.tagline.show {
			opacity: 1
		}

		.tagline {
			height: auto;
			bottom: 10vh;
			padding: 0 5vw;
			display: none;
			align-items: center;
			justify-content: center
		}

		.tagline h2,
		.tagline h3 {
			position: relative;
			display: block;
			font-size: var(--titleFont);
			font-weight: 700;
			text-transform: uppercase;
			text-align: center
		}

		.tagline h3 {
			font-size: var(--titleFontSmall);
			margin: 10px 0
		}

		.tagline .text-svg {
			position: relative;
			width: 36vw;
			height: auto
		}

		.tagline .text-svg .char:not(.line) {
			opacity: 0;
			transition: all .8s ease;
			transform-origin: center center
		}

		.tagline .text-svg .char:not(.line):nth-child(odd) {
			transform: translateY(-50%)
		}

		.tagline .text-svg .char:not(.line):nth-child(even) {
			transform: translateY(50%)
		}

		.tagline .text-svg .t-1 .t-text {
			fill: var(--color-normal-dark)
		}

		.tagline .text-svg .line,
		.tagline .text-svg .t-2 .t-text,
		.text-svg .t-3 .t-text {
			fill: var(--color-highlight-dark)
		}

		.tagline .text-svg .line {
			transform: scale3d(1, 0, 1);
			transform-origin: center bottom
		}

		.tagline .text-svg .t-2 .char {
			transition-delay: .8s
		}

		.tagline .text-svg .t-3 .char {
			transition-delay: 1.5s
		}

		.tagline .text-svg .char:not(.line).move {
			opacity: 1;
			transform: none
		}

		.tagline .text-svg .line.move {
			animation-name: goHeight;
			animation-duration: 1s;
			animation-delay: 1.5s;
			animation-fill-mode: forwards
		}

		.about-overview .box-txt li,
		html[lang=en] .tagline-en,
		html[lang=vi] .tagline-vi {
			display: flex
		}

		.home-overview .bg-cover {
			background-position: left center;
			height: calc(1400/2000*100vw);
			top: calc(50% -(1400/2000*40vw))
		}

		.ratio-4-3 .home-overview .bg-cover {
			top: 0
		}

		.logo-banner,
		.water {
			position: absolute;
			opacity: 0;
			transition: opacity .8s ease-in-out
		}

		.water {
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			-webkit-mask-position: left center;
			mask-position: left center;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-size: cover;
			mask-size: cover;
			z-index: 1
		}

		.logo-banner.show,
		.water.show {
			opacity: 1
		}

		.logo-banner {
			width: 40vw;
			height: calc(280/500*40vw);
			right: 5vw;
			top: 4rem
		}

		.logo-banner::after,
		.logo-banner::before {
			content: ""
		}

		.img-mask,
		.logo-banner::after,
		.logo-banner::before,
		.move-img {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0
		}

		.img-mask {
			-webkit-mask-size: 100%;
			mask-size: 100%;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-position: center;
			mask-position: center;
			z-index: 2
		}

		.move-img {
			display: flex;
			flex-wrap: nowrap
		}

		.move-img img {
			position: relative;
			display: block;
			width: auto;
			height: 100%;
			object-fit: cover;
			object-position: left bottom
		}

		.home-location .content-main,
		.location .content-main {
			justify-content: flex-end;
			align-items: center;
			padding: 0 3rem 0 0;
			text-align: right
		}

		.home-location .content-center,
		.location .content-center {
			width: 30vw;
			max-width: 28rem;
			text-align: right
		}

		.home-location .text-decor,
		.location .text-decor {
			transform: rotate(-90deg) translate(13vw, 13vw);
			right: 0;
			bottom: -15vw
		}

		.box-cover-right {
			overflow: hidden;
			z-index: 2
		}

		.box-cover-right,
		.map-panzoom,
		.panzoom {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0
		}

		.panzoom {
			overflow: hidden
		}

		.map-img,
		.map-img::after {
			position: absolute;
			width: 80vw
		}

		.map-img {
			height: calc(1300/2000*80vw);
			display: block;
			left: 10vw;
			top: calc(52% - (1300/2000*40vw))
		}

		.map-img::after {
			content: '';
			height: 80vw;
			left: calc(50% - 40vw);
			top: calc(50% - 40vw);
			background: var(--color-bg-circle-3);
			border-radius: 50%;
			z-index: -1
		}

		.map-img>img,
		.map-svg {
			width: 100%;
			height: 100%;
			top: 0;
			left: 0
		}

		.map-img>img {
			object-fit: contain;
			object-position: center center
		}

		.map-img>img,
		.map-svg,
		.pointer-map {
			position: absolute;
			display: block
		}

		.map-svg {
			z-index: 2
		}

		.pointer-map {
			width: 4vw;
			height: calc(280/350*4vw);
			top: 44.3%;
			left: 44.3%;
			z-index: 100
		}

		.pointer-map h3,
		.pointer-map span {
			font-size: .7rem;
			font-weight: 700;
			color: var(--color-white);
			line-height: 1;
			text-align: center;
			padding: .8rem 1rem;
			white-space: nowrap;
			text-transform: uppercase;
			opacity: 0;
			transform: scale(0);
			border-radius: 2rem;
			z-index: 20
		}

		.pointer-map h3 {
			background-color: var(--color-normal-brown);
			margin: -1rem 0 0;
			top: 50%;
			left: 110%
		}

		.pointer,
		.pointer-map h3,
		.pointer-map span {
			display: block;
			position: absolute
		}

		.pointer-map span {
			background: linear-gradient(0deg, var(--color-highlight-dark) 0, var(--color-highlight) 80%);
			margin: 0;
			top: -20%;
			left: -5%
		}

		.pointer-map a {
			width: 6.5rem;
			height: 6.5rem;
			position: absolute;
			left: 9%;
			top: 20%
		}

		.pointer {
			width: 100%;
			height: 100%;
			left: 0;
			top: 0
		}

		.center-map,
		.st-line {
			stroke-miterlimit: 10;
			stroke-dashoffset: 0;
			stroke: var(--color-white)
		}

		.center-map {
			opacity: 0;
			stroke-width: 2;
			stroke-dasharray: 3
		}

		.st-line {
			fill: none;
			stroke-width: 5;
			stroke-dasharray: 10
		}

		.st-line.metro {
			stroke-width: 3;
			stroke: var(--color-normal-light)
		}

		.map-area.show .line-region,
		.map-svg.show .st-line {
			animation: StrokeLine 3s infinite linear
		}

		.dot-hover {
			cursor: pointer;
			overflow: visible
		}

		.dot-p,
		.street {
			transform-origin: center center
		}

		.dot-p {
			transition: opacity .8s ease-in-out
		}

		.dot-p.showed {
			opacity: 1
		}

		.compass {
			position: absolute;
			left: 6vw;
			top: 13vh;
			width: 3rem;
			height: 3rem;
			z-index: 10
		}

		.num-map text {
			font-size: 1.5rem;
			font-weight: 700;
			fill: var(--color-white-zero)
		}

		.num-map circle {
			fill: var(--color-white-zero);
			stroke: none
		}

		.bot-circle,
		.show-box {
			position: absolute;
			height: auto
		}

		.bot-circle {
			width: 100%;
			left: 0;
			top: 0
		}

		.show-box {
			width: 14rem;
			left: auto;
			top: auto;
			right: auto;
			overflow: hidden;
			border-radius: 1rem;
			background: var(--bg-gradient-dark2);
			color: var(--color-white);
			transition: all .5s ease-in-out;
			box-shadow: 0 1rem 2rem var(--color-black-alpha-02);
			padding: .5rem;
			z-index: 100;
			opacity: 0;
			transform: scale(0)
		}

		.number,
		.show-box h3 {
			font-weight: 700;
			text-align: center;
			font-size: .6rem
		}

		.show-box h3 {
			line-height: 1.4;
			text-transform: uppercase;
			display: block
		}

		.show-box img {
			position: relative;
			width: 100%;
			height: auto;
			aspect-ratio: 16/9;
			border-radius: .8rem;
			display: block;
			pointer-events: none;
			margin: 0 0 .3rem
		}

		.show-box.showup {
			transform: scale(1);
			opacity: 1
		}

		.number {
			position: absolute;
			top: .5rem;
			left: .5rem;
			width: 1.6rem;
			height: 1.6rem;
			line-height: 1.6rem;
			background-color: var(--color-normal-brown);
			color: var(--color-white);
			border-radius: 50%;
			display: none;
			z-index: 5
		}

		html[lang=en] .lang-vi {
			display: none;
			opacity: 0
		}

		html[lang=en] .lang-en {
			display: block;
			opacity: 1
		}

		html[lang=vi] .lang-en {
			display: none;
			opacity: 0
		}

		html[lang=vi] .lang-vi {
			display: block;
			opacity: 1
		}

		.button-zoom {
			position: absolute;
			left: 10vw;
			bottom: 2.5vh;
			height: auto;
			width: auto;
			display: flex;
			align-items: center;
			z-index: 20
		}

		.pic-zoom-in,
		.pic-zoom-out {
			position: relative;
			display: block;
			width: 3rem;
			height: 3rem;
			margin: 0 .5rem;
			border-radius: 40% 50% 80% 50%/30% 60% 50% 80%
		}

		.minute::before,
		.pic-zoom-in::after,
		.pic-zoom-out::after {
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0
		}

		.pic-zoom-out.no-disable {
			pointer-events: auto;
			opacity: 1
		}

		.pic-zoom-in.disable,
		.pic-zoom-out {
			pointer-events: none;
			opacity: .5
		}

		.region .bg-inner {
			background: var(--color-bg-circle-4)
		}

		.region .text-decor {
			width: 40vw;
			height: calc(300/700*40vw);
			left: 30vw;
			bottom: -5vh
		}

		.region .content-main {
			justify-content: center;
			align-items: flex-start;
			text-align: center;
			padding: 20px
		}

		.region .content-center {
			width: 100%;
			height: 100%;
			z-index: auto
		}

		.region .title-main {
			position: absolute;
			bottom: 0;
			left: 0
		}

		.col-region,
		.link-area {
			position: absolute;
			left: 0;
			top: 0
		}

		.link-area {
			z-index: 2;
			width: 100%;
			height: 100%
		}

		.col-region {
			width: 2000px;
			height: 1125px
		}

		.map-area {
			position: absolute;
			width: calc(2000/1125*100vh);
			height: 100vh;
			top: -5vh;
			left: calc(50% - (2000/1125*100vh)/2);
			overflow: hidden
		}

		.pic-region {
			transform-origin: center center
		}

		.line-region {
			fill: none;
			stroke-miterlimit: 120;
			stroke: var(--color-white-alpha-06);
			stroke-width: 2;
			stroke-dasharray: 10;
			stroke-dashoffset: 0
		}

		.dot-region {
			position: absolute;
			width: auto;
			height: auto;
			display: flex;
			align-items: center
		}

		.minute,
		.minute span,
		.text-region,
		.text-region span {
			position: relative;
			display: block
		}

		.minute {
			display: flex;
			align-items: center;
			justify-content: center;
			filter: drop-shadow(0 10px 20px var(--color-black-alpha-02));
			z-index: 1;
			width: 100px;
			height: 100px;
			text-align: center;
			order: 2
		}

		.minute span,
		.text-region span {
			font-weight: 700
		}

		.minute span {
			z-index: 1;
			font-size: 12px;
			line-height: 1
		}

		.minute span strong {
			font-size: 320%;
			display: block
		}

		.text-region {
			width: auto;
			height: auto;
			text-align: right;
			background: var(--color-normal-alpha-08);
			border-radius: 15px;
			padding: 10px 25px 10px 15px;
			margin-right: -15px;
			order: 1
		}

		.text-region span {
			font-size: 13px;
			line-height: 1.2
		}

		.text-region span strong {
			font-size: 120%;
			display: block;
			text-transform: uppercase
		}

		.col-region .scroll-list,
		.map-area img,
		.map-area svg {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0
		}

		.ratio-4-3 .col-region,
		.ratio-4-3 .map-area {
			margin-left: 5vw
		}

		.dot-region[data-region="01"] {
			left: 46%;
			top: 63%
		}

		.dot-region[data-region="02"] {
			left: 47%;
			top: 28%
		}

		.dot-region[data-region="03"] {
			left: 39%;
			top: 39%
		}

		.dot-region[data-region="04"] {
			left: 34%;
			top: 51%
		}

		.dot-region[data-region="05"] {
			left: 33%;
			top: 70%
		}

		.dot-region[data-region="06"] {
			left: 33%;
			top: 19%
		}

		.dot-region[data-region="07"] {
			left: 23%;
			top: 32%
		}

		.dot-region[data-region="08"] {
			left: 15%;
			top: 45%
		}

		.home-facilities .bg-inner {
			background: var(--color-bg-circle-2)
		}

		.home-facilities .bgcanvas {
			top: 65%
		}

		.home-facilities .text-decor {
			width: 50vw;
			height: calc(300/700*50vw);
			left: 25vw;
			bottom: 5vh;
			mix-blend-mode: overlay
		}

		.home-facilities .content-main {
			justify-content: flex-start;
			align-items: flex-end;
			padding: 0 0 5vh 8vw;
			text-align: right
		}

		.home-facilities .content-center {
			width: 30vw;
			max-width: 30rem;
			text-align: right
		}

		.home-facilities .wrap-view-more {
			position: absolute;
			left: 108%;
			bottom: 2rem;
			margin: 0
		}

		.item-01,
		.item-02 {
			height: auto;
			aspect-ratio: 16/9
		}

		.item-01 {
			left: 12vw;
			top: 5vw;
			width: 50vw
		}

		.item-02 {
			width: 38vw;
			right: 0;
			bottom: 0
		}

		.home-news .bg-inner {
			background: var(--color-highlight)
		}

		.home-news .pattern {
			filter: grayscale(1) brightness(100%) contrast(100%);
			mix-blend-mode: overlay
		}

		.home-news .pattern.show {
			opacity: .1
		}

		.home-news .text-decor {
			left: 3vw;
			top: calc(50% - (300/700*18vw))
		}

		.home-news .content-center {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 80%;
			margin: auto
		}

		.home-news .title-main {
			width: 25%
		}

		.home-news .wrap-view-more {
			position: absolute;
			left: 0;
			bottom: -5vh;
			margin: 0
		}

		.wrap-news {
			position: relative;
			width: 65%;
			height: auto;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 5vh;
			margin: -5vh 0 0
		}

		.item-news-home {
			padding: 0;
			cursor: pointer
		}

		.box-news,
		.item-news-home,
		.pic-news-home {
			position: relative;
			width: 100%;
			height: auto;
			display: block
		}

		.box-news {
			text-align: left
		}

		.pic-news-home {
			overflow: hidden;
			border-radius: 1rem;
			aspect-ratio: 20/9
		}

		.pic-news-home .pic-img {
			height: 100%
		}

		.txt-news-home {
			width: 100%;
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			text-align: left;
			padding: 0;
			margin: 2vh 0
		}

		.txt-news-home h3 {
			font-size: .9rem;
			text-transform: uppercase;
			font-weight: 400;
			font-style: italic;
			padding: 0 0 0 5%
		}

		.date-thumb,
		.date-thumb span,
		.txt-news-home h3 {
			position: relative;
			display: block
		}

		.date-thumb {
			width: auto;
			height: auto;
			font-optical-sizing: auto;
			line-height: 1;
			text-align: center;
			margin: 0 0 1rem;
			font-size: 3rem;
			font-family: Newsreader, serif;
			font-weight: 300
		}

		.date-thumb span {
			font-size: .6rem;
			font-weight: 700;
			font-family: Montserrat, sans-serif
		}

		.item-news-home:nth-child(1) {
			grid-column: 1/3;
			grid-row: 1
		}

		.item-news-home:nth-child(1) .pic-news-home {
			width: calc(50% - 2vh);
			aspect-ratio: 16/9
		}

		.item-news-home:nth-child(1) .txt-news-home {
			width: calc(50% + 3vh);
			padding: 0 0 0 5vh;
			margin: 0;
			flex-wrap: wrap;
			align-items: flex-start
		}

		.item-news-home:nth-child(1) .txt-news-home h3 {
			font-size: 1.4rem;
			padding: 0
		}

		.item-news-home:nth-child(1) .box-news {
			display: flex;
			justify-content: flex-start;
			align-items: center
		}

		.home-contact .bg-inner {
			background: var(--color-bg-gradient)
		}

		.contact .text-decor,
		.home-contact .text-decor {
			bottom: -3vw;
			left: calc(50% - 18vw);
			mix-blend-mode: soft-light
		}

		.box-contact-main {
			position: relative;
			display: block;
			width: 90%;
			height: auto;
			margin: auto;
			padding-bottom: 15vh;
			text-align: center;
			z-index: 3
		}

		.box-contact-main .box-txt {
			max-width: 40rem;
			margin: 2rem auto
		}

		.slide-logo {
			width: 100%;
			max-width: 50vw;
			display: block;
			margin: auto
		}

		.box-partner,
		.partner-info,
		.slide-logo {
			position: relative;
			height: auto
		}

		.box-partner {
			width: calc(100%/4);
			padding: 0 1rem;
			margin: auto;
			display: block
		}

		.box-partner h3,
		.partner-info h2,
		.partner-info h3 {
			position: relative;
			display: block;
			font-size: .8rem;
			font-weight: 700;
			text-align: center;
			margin: 0 auto .8rem;
			text-transform: uppercase
		}

		.partner-info {
			width: 100%;
			display: inline-block;
			vertical-align: middle;
			margin: 0 auto 3rem
		}

		.partner-info.single {
			display: block
		}

		.partner-info h2 {
			font-size: 1rem
		}

		.company-info {
			position: absolute;
			width: 50vw;
			left: 25vw;
			bottom: 0;
			display: block;
			text-align: center
		}

		.company-info .box-txt {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 0 .8rem
		}

		.company-info h3 {
			font-size: 1.5rem;
			font-weight: 600;
			display: block;
			margin: 0 0 .5rem
		}

		.company-info a,
		.company-info p,
		.company-info p:last-child {
			white-space: nowrap;
			margin: 0 .3rem
		}

		.address,
		.item-logo,
		.phone,
		.web {
			position: relative;
			display: inline-block
		}

		.address,
		.phone,
		.web {
			width: 2rem;
			vertical-align: middle;
			height: 2rem;
			margin: 0 .3rem 0 0
		}

		.item-logo {
			width: auto;
			height: 5rem;
			max-height: 15vh;
			margin: 0 1rem
		}

		.item-logo img,
		.logo-partner img {
			position: relative;
			width: 100%;
			height: 100%;
			display: block;
			object-fit: contain;
			object-position: center center
		}

		.item-part {
			position: relative;
			display: flex;
			align-items: center
		}

		.list-logo,
		.logo-partner {
			position: relative;
			display: block;
			margin: auto
		}

		.list-logo {
			width: 60vw;
			height: auto;
			overflow: hidden
		}

		.list-logo .item-logo {
			height: 4rem;
			max-height: 10vh;
			padding: 0 1rem
		}

		.logo-partner {
			width: auto;
			height: 4rem;
			max-height: 12vh
		}

		.slide-logo .slidebox-arrows {
			width: 115%
		}

		.slide-logo .slidebox-arrow {
			width: 2.5rem;
			height: 2.5rem
		}

		.slide-logo .slidebox-arrow-prev {
			left: 0
		}

		.slide-logo .slidebox-arrow-next {
			right: 0
		}

		.slide-logo .slidebox-arrow[disabled] {
			opacity: 0
		}

		.about-intro .bg-cover {
			background-position: left bottom
		}

		.about-intro .text-decor {
			bottom: -2vw;
			left: 22vw;
			mix-blend-mode: overlay;
			z-index: 20
		}

		.about-intro .logo-banner {
			width: calc(500/280*35vh);
			height: 35vh;
			left: 20vw;
			top: 2rem;
			right: auto;
			display: block;
			z-index: 12
		}

		.about-intro .content-main {
			justify-content: flex-end;
			align-items: flex-start;
			text-align: left
		}

		.about-intro .content-center {
			width: 50vw;
			max-width: 45rem;
			padding: 2rem 3rem 0 0
		}

		.about-intro .box-txt {
			font-size: .9rem
		}

		.about-overview .bg-cover {
			background-position: left center;
			height: calc(1400/2000*100vw);
			top: calc(50% -(1400/2000*40vw))
		}

		.ratio-4-3 .about-overview .bg-cover {
			top: 0
		}

		.about-overview .text-decor {
			bottom: 15vw;
			right: 15vw;
			mix-blend-mode: overlay;
			z-index: 20
		}

		.about-overview .content-main {
			justify-content: flex-end;
			align-items: flex-start;
			text-align: left
		}

		.about-overview .content-center {
			width: 50vw;
			padding: 2rem 20vw 0 0
		}

		.about-overview .box-txt ul {
			padding: 0;
			list-style: none
		}

		.about-overview .box-txt .second {
			font-weight: 700;
			width: 70%
		}

		.about-overview .box-txt .first {
			width: 30%;
			display: flex;
			justify-content: flex-end;
			padding: 0 1rem 0 0;
			white-space: nowrap;
			text-align: right
		}

		#facilities-page .title-page,
		.about-overview .logo-banner {
			display: none
		}

		.about-overview .box-txt {
			font-size: .9rem;
			color: var(--color-highlight-dark)
		}

		.about-overview .box-txt li {
			text-shadow: none
		}

		.about-investor .bg-inner {
			background: var(--color-highlight)
		}

		.about-investor .pattern {
			filter: grayscale(1) brightness(100%) contrast(100%);
			mix-blend-mode: overlay
		}

		.about-investor .pattern.show {
			opacity: .1
		}

		.about-investor .text-decor {
			left: 5vw;
			top: calc(50% - (300/700*18vw))
		}

		.about-investor .content-center {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 70%;
			margin: auto
		}

		.about-investor .title-main {
			width: 40%
		}

		.about-investor .box-txt {
			width: 60%;
			max-width: 50rem
		}

		.about-investor .item-logo {
			margin: 0 0 1rem
		}

		.facilities .text-decor-cover {
			opacity: .5;
			width: 0;
			height: 100%;
			position: absolute;
			right: 0;
			bottom: 0
		}

		.facilities .text-decor {
			transform: rotate(-90deg) translate(2vw, 8vw);
			right: 0;
			bottom: 15vw;
			width: 30vw;
			height: calc(300/700*30vw)
		}

		.facilities .title-main {
			position: absolute;
			width: 100%;
			height: auto;
			text-align: center;
			top: 0;
			left: 0;
			padding: 1.5rem 5%
		}

		.facilities .title-main h2 {
			font-size: 2vw
		}

		.apartment .title-main h2 strong,
		.facilities .title-main h2 strong {
			font-size: 2.5vw
		}

		.facilities .content-center {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0
		}

		.facilities-map {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
			overflow: hidden
		}

		.facilities-bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 2600px;
			height: 1400px;
			background-position: center center;
			background-size: contain;
			background-repeat: no-repeat
		}

		.compass-2 {
			position: absolute;
			left: 10%;
			top: 14vh;
			width: 3rem;
			height: 3rem;
			z-index: 10
		}

		.all-dot,
		.text-faci {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%
		}

		.dot-num>span,
		.text-faci span {
			color: var(--color-white);
			font-weight: 700
		}

		.text-faci span {
			font-size: 1.5vw;
			text-shadow: 0 1px 1px var(--color-black-alpha-02);
			text-transform: uppercase;
			position: absolute
		}

		.dot-num {
			position: absolute;
			display: block;
			width: 36px;
			height: 36px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all .3s ease-in-out;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			transform-origin: center center;
			z-index: 10
		}

		.dot-num i,
		.dot-num::after {
			position: absolute;
			border-radius: 50%;
			pointer-events: none
		}

		.dot-num::after {
			content: '';
			transition: background-color .3s ease-in-out;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0
		}

		.dot-num>span {
			position: relative;
			display: block;
			width: 100%;
			height: auto;
			text-align: center;
			font-size: 16px;
			pointer-events: none;
			z-index: 1
		}

		.dot-num i {
			left: -3px;
			top: -3px;
			width: 42px;
			height: 42px;
			background: linear-gradient(-45deg, var(--color-white), var(--color-white-alpha-05), var(--color-white-alpha-01), var(--color-white));
			background-size: 180% 180%;
			display: none;
			box-shadow: 0 .8rem 1rem 0 var(--color-black-alpha-02)
		}

		.dot-num.show i {
			display: block;
			animation: Rotate 5s linear infinite
		}

		.color-01 .dot-num.current::after,
		.color-02 .dot-num.current::after {
			background-color: var(--color-orange);
			box-shadow: 0 .8rem 1rem 0 var(--color-black-alpha-02)
		}

		.dot-num.current i {
			animation-play-state: paused;
			display: none
		}

		.dot-num.current {
			transform: scale(1.2);
			z-index: 20
		}

		.color-01 .dot-num::after,
		.color-01 .hover-li span {
			background-color: var(--color-highlight)
		}

		.color-02 .dot-num::after,
		.color-02 .hover-li span {
			background-color: var(--color-normal-dark)
		}

		.floor-01,
		.floor-20,
		.text-faci .block-bottom i,
		.text-faci .block-top i {
			background-color: var(--color-normal-brown)
		}

		.floor-03 {
			background-color: var(--color-normal-light-2)
		}

		.floor-40 {
			background-color: var(--color-highlight)
		}

		.floor-01 .content-center {
			width: 16rem;
			height: 65vh;
			left: auto;
			right: 2rem;
			top: 9.5rem;
			overflow: hidden
		}

		.floor-01 .info-facilities {
			flex-wrap: wrap;
			justify-content: flex-start;
			padding: 0 0 1rem
		}

		.floor-01 .faci-list,
		.ratio-4-3 .floor-01 .faci-list {
			margin: 0
		}

		.floor-01 .facilities-bg {
			margin-left: -100px
		}

		.floor-03 .facilities-bg,
		.floor-20 .facilities-bg,
		.floor-40 .facilities-bg {
			margin-top: -40px
		}

		.floor-03 .scrollA,
		.floor-20 .scrollA,
		.floor-40 .scrollA {
			position: relative;
			width: 100%;
			height: auto;
			left: auto;
			top: auto;
			overflow: visible
		}

		.floor-01 .facilities-bg::before {
			content: '';
			width: 100%;
			height: 20%;
			position: absolute;
			left: 0;
			bottom: 0;
			background: linear-gradient(0deg, var(--color-normal-brown) 0, var(--color-black-zero) 80%)
		}

		.floor-20 .facilities-bg::before {
			content: '';
			width: 100%;
			height: 40%;
			position: absolute;
			left: 0;
			bottom: 0;
			background: linear-gradient(0deg, var(--color-normal-brown) 30%, var(--color-black-zero) 100%)
		}

		.floor-03 .facilities-bg::before {
			content: '';
			width: 100%;
			height: 40%;
			position: absolute;
			left: 0;
			bottom: 0;
			background: linear-gradient(0deg, var(--color-normal-light-2) 20%, var(--color-normal-zero) 100%)
		}

		.floor-40 .facilities-bg::before {
			content: '';
			width: 100%;
			height: 40%;
			position: absolute;
			left: 0;
			bottom: 0;
			background: linear-gradient(0deg, var(--color-highlight) 20%, var(--color-normal-zero) 100%)
		}

		.text-01 {
			left: 17.5%;
			top: 40.5%
		}

		.text-02 {
			left: 67%;
			top: 61.5%
		}

		.text-03 {
			left: 79%;
			top: 39%;
			transform: rotate(-64deg)
		}

		.info-facilities {
			position: relative;
			width: 100%;
			height: auto;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			margin: 0;
			z-index: 10
		}

		.faci-list {
			width: auto;
			display: block;
			margin: 0 .8rem 5vh 0
		}

		.ratio-4-3 .faci-list {
			margin: 0 .8rem 12vh 0
		}

		.faci-list,
		.faci-list ul,
		.hover-li {
			position: relative;
			height: auto
		}

		.faci-list ul {
			list-style: none;
			display: block;
			margin: 0 1rem 0 0;
			padding: 0;
			width: auto
		}

		.hover-li,
		.hover-li span {
			display: flex;
			align-items: center
		}

		.hover-li {
			width: 100%;
			margin: 0;
			padding: .25rem .8rem .25rem .25rem;
			background-color: var(--color-white-zero);
			cursor: pointer;
			z-index: 10;
			text-align: left
		}

		.hover-li p,
		.hover-li span {
			position: relative;
			font-weight: 700;
			font-size: .6rem;
			color: var(--color-white);
			text-shadow: 0 1px 1px var(--color-black-alpha-02)
		}

		.hover-li span {
			justify-content: center;
			width: 1.5rem;
			height: 1.5rem;
			padding: 0;
			margin: 0 .3rem 0 0;
			text-align: center;
			border-radius: 50%
		}

		.hover-li p {
			display: block;
			white-space: nowrap;
			line-height: 1.4
		}

		.hover-li::before {
			content: '';
			border-radius: 1.5rem;
			transition: all .3s ease-in-out;
			pointer-events: none
		}

		.hover-li.current::before {
			background-color: var(--color-orange);
			box-shadow: 0 .8rem 1rem 0 var(--color-black-alpha-01)
		}

		.hover-li::before,
		.info-box {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%
		}

		.info-box {}

		div.box-char-3 {
			width: 56px;
			border-radius: 10px;
		}

		div.box-char-3.dot-num i {
			width: 56px;
			border-radius: 10px;
			transform: none !important;
		}

		div.box-char-3:after {
			border-radius: 10px;
		}

		.hover-li.box-char-3 span {
			width: 30px;
			border-radius: 10px;
		}

		.show-box-pic {
			width: 14.5rem;
			height: auto;
			position: absolute;
			left: 50%;
			top: 50%;
			right: auto;
			padding: .3rem;
			transition: transform .5s ease-in-out, opcaity .5s ease-in-out;
			box-shadow: 0 1rem 1.5rem 0 var(--color-black-alpha-02);
			background-color: var(--color-white);
			text-align: left;
			cursor: pointer;
			color: var(--color-normal-dark);
			border-radius: .8rem;
			z-index: 100
		}

		.show-box-pic::before {
			content: '';
			width: 1.8rem;
			height: 1.8rem;
			position: absolute;
			top: .8rem;
			right: .8rem;
			border-radius: 50%;
			z-index: 1
		}

		.show-box-pic .pic-img {
			width: 100%;
			height: auto;
			aspect-ratio: 16/9;
			border-radius: .5rem;
			overflow: hidden
		}

		.faci-text,
		.faci-text h3 {
			width: 100%;
			height: auto;
			display: block
		}

		.faci-text {
			margin: 0;
			text-align: center
		}

		.faci-text h3,
		.text-faci div {
			font-weight: 700;
			text-transform: uppercase
		}

		.faci-text h3 {
			line-height: 1.4;
			padding: .3rem .3rem 0;
			white-space: normal;
			font-size: .6rem
		}

		.show-box-pic {
			opacity: 0;
			transform: scale(0)
		}

		.show-box-pic.showup {
			transform: scale(1);
			opacity: 1
		}

		.show-box-pic::after {
			content: '';
			position: absolute;
			left: -.8rem;
			top: 50%;
			margin: -.8rem 0 0;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: .8rem 1.5rem .8rem 0;
			border-color: transparent var(--color-white) transparent transparent;
			display: none;
			z-index: -1
		}

		.show-box-pic.no-pic {
			width: auto;
			max-width: 16rem;
			padding: .3rem 1rem
		}

		#apartment-page .title-page,
		.show-box-pic.no-pic::before {
			display: none
		}

		.area-des p,
		.show-box-pic.no-pic::after {
			display: block
		}

		.show-box-pic.no-pic .faci-text h3 {
			padding: .3rem
		}

		.dot-01-A,
		.dot-01-B,
		.dot-01-D {
			left: 58%;
			top: 56%;
			width: 50px;
			border-radius: 10px
		}

		.dot-01-A,
		.dot-01-B {
			left: 43%;
			top: 25%
		}

		.dot-01-B {
			left: 19%;
			top: 33%
		}

		.dot-01-C {
			left: 74%;
			top: 53%;
			width: 50px
		}

		.dot-01-A i,
		.dot-01-B i,
		.dot-01-C i,
		.dot-01-D i {
			width: 56px;
			border-radius: 10px;
			transform: none !important
		}

		.dot-01-A:after,
		.dot-01-B:after,
		.dot-01-C,
		.dot-01-C:after,
		.dot-01-D:after {
			border-radius: 10px
		}

		/***
.dot-01 {
	left: 58%;
	top: 56%
}

.dot-01-1 {
	left: 43%;
	top: 25%
}

.dot-01-2 {
	left: 19%;
	top: 33%
}

.dot-01-3 {
	left: 74%;
	top: 53%
}
**/

		.dot-01 {
			left: 19%;
			top: 33%;
		}

		.dot-01-1 {
			left: 43%;
			top: 25%;
		}

		.dot-01-2 {
			left: 58%;
			top: 56%;
		}

		.dot-01-3 {
			left: 74%;
			top: 53%;
		}

		/****
.dot-02 {
	left: 56.5%;
	top: 46.5%
}

.dot-02-1 {
	left: 45%;
	top: 32%
}

.dot-02-2 {
	left: 23%;
	top: 33%
}

.dot-02-3 {
	left: 72%;
	top: 50%
}

.dot-02-4 {
	left: 76%;
	top: 32%
}
******/

		.dot-02 {
			left: 23%;
			top: 33%;
		}

		.dot-02-1 {
			left: 45%;
			top: 32%;
		}

		.dot-02-2 {
			left: 56.5%;
			top: 46.5%;
		}

		.dot-02-3 {
			left: 72%;
			top: 50%
		}

		.dot-02-4 {
			left: 76%;
			top: 32%
		}


		.dot-03 {
			left: 58%;
			top: 51%
		}

		.dot-03-1 {
			left: 42%;
			top: 32%
		}

		.dot-03-2 {
			left: 21.5%;
			top: 27%
		}

		.dot-03-3 {
			left: 64%;
			top: 50%
		}

		.dot-04 {
			left: 87%;
			top: 22%
		}

		.dot-04-1 {
			left: 17.5%;
			top: 57%
		}

		.dot-04-2 {
			left: 63%;
			top: 51%
		}

		.dot-04-3 {
			left: 79.5%;
			top: 26%
		}

		.dot-05 {
			left: 43%;
			top: 19%
		}

		.dot-05-1 {
			left: 50%;
			top: 61%
		}

		.dot-06 {
			left: 31.5%;
			top: 27%
		}

		.dot-06-1 {
			left: 56.7%;
			top: 51%
		}

		.dot-06-2 {
			left: 78%;
			top: 31%
		}

		.dot-07 {
			left: 22.8%;
			top: 29%
		}

		.dot-07-1 {
			left: 55%;
			top: 51%
		}

		.dot-07-2 {
			left: 43%;
			top: 29%
		}

		.dot-07-3 {
			left: 72%;
			top: 53%
		}

		.dot-07-4 {
			left: 52%;
			top: 29%
		}

		.dot-08 {
			left: 26.2%;
			top: 29%
		}

		.dot-08-1 {
			left: 45%;
			top: 32%
		}

		.dot-08-2 {
			left: 58.3%;
			top: 49%
		}

		.dot-08-3 {
			left: 72.5%;
			top: 47%
		}

		.dot-09 {
			left: 21%;
			top: 31%
		}

		.dot-09-1 {
			left: 45%;
			top: 29%
		}

		.dot-09-2 {
			left: 58.3%;
			top: 52%
		}

		.dot-09-3 {
			left: 70.3%;
			top: 53%
		}

		.dot-10 {
			left: 19%;
			top: 27%
		}

		.dot-10-1 {
			left: 74%;
			top: 45%
		}

		.dot-11 {
			left: 33%;
			top: 31%
		}

		.dot-11-1 {
			left: 77%;
			top: 42%
		}

		.dot-12 {
			left: 21.5%;
			top: 24%
		}

		.dot-12-1 {
			left: 63%;
			top: 46%
		}

		.dot-13 {
			left: 78%;
			top: 28%
		}

		.dot-14 {
			left: 74%;
			top: 49%
		}

		.dot-15 {
			left: 81%;
			top: 28%
		}

		.dot-16 {
			left: 20%;
			top: 56%
		}

		.dot-17 {
			left: 48%;
			top: 40%
		}

		.dot-17-1 {
			left: 57%;
			top: 42%
		}

		.dot-17-2 {
			left: 52%;
			top: 41%
		}

		.dot-17-3 {
			left: 43%;
			top: 41%
		}

		.dot-17-4 {
			left: 23%;
			top: 58%
		}

		.dot-18 {
			left: 38%;
			top: 56%
		}

		.dot-18-1 {
			left: 42%;
			top: 58%
		}

		.dot-18-2 {
			left: 68%;
			top: 39%
		}

		.dot-19 {
			left: 36%;
			top: 44%
		}

		.dot-20 {
			left: 40%;
			top: 48%
		}

		.dot-21 {
			left: 63%;
			top: 31%
		}

		.dot-22 {
			left: 33%;
			top: 46%
		}

		.dot-23 {
			left: 48%;
			top: 19%
		}

		.dot-23-1 {
			left: 53%;
			top: 62%
		}

		.dot-24 {
			left: 82%;
			top: 42%
		}

		.dot-25,
		.dot-26 {
			left: 79%;
			top: 53%
		}

		.dot-26 {
			top: 50%
		}

		.dot-27 {
			left: 58%;
			top: 64%
		}

		.dot-27-1 {
			left: 54%;
			top: 19%
		}

		.dot-28 {
			left: 15%;
			top: 27%
		}

		.dot-29 {
			left: 74%;
			top: 25%
		}

		.dot-30 {
			left: 66%;
			top: 33%
		}

		.dot-31 {
			left: 27%;
			top: 75%
		}

		.dot-32 {
			left: 83%;
			top: 22%
		}

		.dot-33 {
			left: 35%;
			top: 58%
		}

		.dot-33-1 {
			left: 28%;
			top: 58%
		}

		.dot-34 {
			left: 84%;
			top: 22%
		}

		.dot-301 {
			left: 29%;
			top: 28%
		}

		.dot-302 {
			left: 31%;
			top: 28%
		}

		.dot-303 {
			left: 37%;
			top: 28%
		}

		.dot-304 {
			left: 34.5%;
			top: 28%
		}

		.dot-305,
		.dot-306 {
			left: 40.5%;
			top: 28%
		}

		.dot-306 {
			top: 31%
		}

		.dot-307 {
			left: 46%;
			top: 55.5%
		}

		.dot-308 {
			left: 31%;
			top: 33.5%
		}

		.dot-309 {
			left: 31%;
			top: 35%
		}

		.dot-310 {
			left: 29%;
			top: 37%
		}

		.dot-311 {
			left: 34%;
			top: 37%
		}

		.dot-311-1 {
			left: 53%;
			top: 37%
		}

		.dot-311-2 {
			left: 34%;
			top: 32.5%
		}

		.dot-311-3 {
			left: 48%;
			top: 52%
		}

		.dot-311-4 {
			left: 55%;
			top: 51%
		}

		.dot-312 {
			left: 37%;
			top: 35%
		}

		.dot-313 {
			left: 43%;
			top: 28.2%
		}

		.dot-313-1 {
			left: 55%;
			top: 34%
		}

		.dot-313-2 {
			left: 56%;
			top: 61%
		}

		.dot-314 {
			left: 50.5%;
			top: 28.2%
		}

		.dot-315 {
			left: 51.3%;
			top: 34%
		}

		.dot-315-1 {
			left: 47%;
			top: 34%
		}

		.dot-316 {
			left: 49%;
			top: 35%
		}

		.dot-317 {
			left: 50%;
			top: 31.5%
		}

		.dot-318 {
			left: 48%;
			top: 36.5%
		}

		.dot-319 {
			left: 53%;
			top: 62%
		}

		.dot-320,
		.dot-321 {
			left: 51.5%;
			top: 55.5%
		}

		.dot-321 {
			left: 52.5%
		}

		.dot-322 {
			left: 48%;
			top: 62%
		}

		.dot-323 {
			left: 52.5%;
			top: 62%
		}

		.dot-324 {
			left: 58%;
			top: 34%
		}

		.dot-324-1 {
			left: 32.7%;
			top: 28%
		}

		.dot-324-2 {
			left: 55%;
			top: 55.5%
		}

		.dot-325 {
			left: 45%;
			top: 35%
		}

		.dot-325-1 {
			left: 58%;
			top: 55.5%
		}

		.dot-326 {
			left: 37.5%;
			top: 35.5%
		}

		.dot-327 {
			left: 43.5%;
			top: 32%
		}

		.dot-328 {
			left: 29%;
			top: 33%
		}

		.dot-329 {
			left: 20%;
			top: 43%
		}

		.dot-329-1 {
			left: 68%;
			top: 58%
		}

		.dot-330 {
			left: 79%;
			top: 45%
		}

		.dot-401 {
			left: 19%;
			top: 36%
		}

		.dot-402 {
			left: 21%;
			top: 36%
		}

		.dot-402-1 {
			left: 44.5%;
			top: 37%
		}

		.dot-402-2 {
			left: 57.5%;
			top: 53%
		}

		.dot-402-3 {
			left: 73.5%;
			top: 55%
		}

		.dot-402-4 {
			left: 78%;
			top: 37%
		}

		.dot-403 {
			left: 49%;
			top: 32%
		}


		/* GIANG : [45] vị trí này ở tháp dưới */
		.dot-403-1 {
			left: 48%;
			top: 58%;
		}

		/* GIANG : [45] vị trí này ở tháp dưới */
		.dot-403-2 {
			left: 71.2%;
			top: 54%;
		}

		.dot-403-3 {
			left: 46%;
			top: 55%
		}

		.dot-403-4 {
			left: 47%;
			top: 61%
		}

		.dot-403-5 {
			left: 62%;
			top: 54%
		}

		.dot-403-6 {
			left: 65%;
			top: 62%
		}

		.dot-404 {
			left: 35%;
			top: 36%
		}

		.dot-404-1 {
			left: 71%;
			top: 54%
		}

		.dot-405 {
			left: 29%;
			top: 34%
		}

		.dot-405-1 {
			left: 39%;
			top: 33%
		}

		.dot-405-2 {
			left: 52%;
			top: 56%
		}

		.dot-405-3 {
			left: 77%;
			top: 44%
		}

		.dot-406 {
			left: 23%;
			top: 37%
		}

		.dot-407 {
			left: 22%;
			top: 33%
		}

		.dot-407-1 {
			left: 56%;
			top: 57%
		}

		.dot-407-2 {
			left: 74%;
			top: 58%
		}

		.dot-408 {
			left: 23.8%;
			top: 33%
		}

		.dot-408-1 {
			left: 45.3%;
			top: 34.5%
		}

		.dot-408-2 {
			left: 75%;
			top: 53%
		}

		.dot-409 {
			left: 20%;
			top: 33%
		}

		.dot-409-1 {
			left: 45.3%;
			top: 31%
		}

		.dot-409-2 {
			left: 72%;
			top: 58%
		}

		.dot-410 {
			left: 63%;
			top: 59%
		}

		.dot-411,
		.dot-411-1 {
			left: 21%;
			top: 54%
		}

		.dot-411-2 {
			left: 76%;
			top: 59%
		}

		.dot-411-3 {
			left: 83.5%;
			top: 31%
		}

		.dot-412 {
			left: 17%;
			top: 30%
		}

		.dot-412-1 {
			left: 79%;
			top: 32%
		}

		/* GIANG FIX */
		.dot-413 {
			left: 26%;
			top: 29.5%;
		}

		.dot-413-1 {
			left: 43%;
			top: 28%
		}

		.dot-413-2 {
			left: 55.5%;
			top: 61.5%;
		}

		.dot-413-3 {
			left: 79%;
			top: 46%;
		}



		.dot-414 {
			left: 54%;
			top: 34%
		}

		.dot-415 {
			left: 57%;
			top: 34%
		}

		.dot-415-1 {
			left: 70%;
			top: 60%
		}

		.dot-416 {
			left: 20%;
			top: 40%
		}

		.dot-417,
		.dot-417-1 {
			left: 19%;
			top: 43%
		}

		.dot-417-2 {
			left: 82%;
			top: 35%
		}

		.dot-501 {
			left: 20%;
			top: 40%
		}

		.dot-502 {
			left: 21%;
			top: 36%
		}

		.dot-502-1 {
			left: 44.5%;
			top: 37%
		}

		.dot-502-2 {
			left: 57%;
			top: 53%
		}

		.dot-502-3 {
			left: 74%;
			top: 54%
		}

		.dot-502-4 {
			left: 79%;
			top: 37%
		}

		.dot-503 {
			left: 57%;
			top: 34%
		}

		.dot-503-1 {
			left: 53%;
			top: 28%
		}

		.dot-503-2 {
			left: 54%;
			top: 61%;
		}

		.dot-503-3 {
			left: 76%;
			top: 59%;
		}

		.dot-503-4 {
			left: 84%;
			top: 33%;
		}


		.dot-504 {
			left: 51%;
			top: 34%
		}

		.dot-504-1 {
			left: 70%;
			top: 56%
		}

		.dot-504-2 {}

		.dot-505 {
			left: 21.5%;
			top: 42%
		}

		.dot-506 {
			left: 56%;
			top: 57%
		}

		.dot-507 {
			left: 22.2%;
			top: 33%
		}

		.dot-507-1 {
			left: 43%;
			top: 32.5%
		}

		.dot-507-2 {
			left: 74%;
			top: 57%
		}

		.dot-508 {
			left: 24%;
			top: 33%
		}

		.dot-508-1 {
			left: 45%;
			top: 34%
		}

		.dot-508-2 {
			left: 58.6%;
			top: 54.5%
		}

		.dot-508-3 {
			left: 75.5%;
			top: 52.5%
		}

		.dot-509 {
			left: 20%;
			top: 33%
		}

		.dot-509-1 {
			left: 45%;
			top: 31%
		}

		.dot-509-2 {
			left: 58.6%;
			top: 58%
		}

		.dot-509-3 {
			left: 72%;
			top: 57%
		}

		.dot-510 {
			left: 51%;
			top: 37%;
		}

		.dot-510-1 {
			left: 70%;
			top: 53%;
		}

		.dot-510-2 {
			left: 71%;
			top: 53%
		}

		.dot-511 {
			left: 40%;
			top: 34%;
		}

		.dot-511-1 {
			left: 77%;
			top: 43%;
		}


		.dot-512 {
			left: 48%;
			top: 37%;
		}

		.dot-512-1 {
			left: 80%;
			top: 33%;
		}

		.dot-513 {
			left: 24.5%;
			top: 37%
		}

		.dot-513-1 {
			left: 60.2%;
			top: 53%
		}

		.dot-514 {
			left: 45%;
			top: 28%
		}

		.dot-514-1 {
			left: 80%;
			top: 45%
		}

		.dot-515 {
			left: 36%;
			top: 28%
		}

		.dot-515-1 {
			left: 20%;
			top: 27%
		}

		.dot-515-2 {
			left: 77.5%;
			top: 54%
		}

		.dot-516 {
			left: 39%;
			top: 27%
		}

		.dot-516-1 {
			left: 78.5%;
			top: 51.5%
		}

		.dot-517 {
			left: 63%;
			top: 59%
		}

		.dot-518 {
			left: 23%;
			top: 28%
		}

		.dot-519 {
			left: 29%;
			top: 33%
		}

		.dot-519-1 {
			left: 18%;
			top: 32%
		}

		.dot-520 {
			left: 18%;
			top: 40%
		}

		.dot-521 {
			left: 47%;
			top: 55%
		}

		.dot-521-1 {
			left: 64%;
			top: 55%
		}

		.dot-521-2 {
			left: 32%;
			top: 36%
		}

		.dot-522 {
			left: 20%;
			top: 54%
		}

		.dot-522-1 {
			left: 66%;
			top: 63%
		}

		.dot-522-2 {
			left: 64%;
			top: 55%
		}

		.dot-523 {
			left: 80%;
			top: 44%
		}

		.apartment .text-decor-cover,
		.masterplan .text-decor-cover {
			width: 0;
			height: 100%;
			position: absolute;
			right: 0;
			bottom: 0
		}

		.apartment .text-decor,
		.masterplan .text-decor {
			transform: rotate(-90deg) translate(2vw, 10vw);
			right: 0;
			bottom: 15vw;
			width: 30vw;
			height: calc(300/700*30vw)
		}

		.ratio-4-3 .apartment .text-decor,
		.ratio-4-3 .masterplan .text-decor {
			width: 40vw;
			height: calc(300/700*40vw);
			bottom: 5vh
		}

		.apartment .title-main,
		.masterplan .title-main {
			position: absolute;
			width: 100%;
			height: auto;
			text-align: center;
			top: 0;
			left: 0;
			padding: 1.5rem 5%;
			pointer-events: none
		}

		.masterplan .title-main {
			top: auto;
			bottom: 5%;
			padding: 0 0 0 10vw
		}

		.masterplan .title-main h2 {
			font-size: var(--titleFontBig)
		}

		.apartment .title-main h2 {
			font-size: 2vw
		}

		.text-faci div {
			position: absolute;
			font-size: 1rem;
			color: var(--color-white);
			text-shadow: 0 1px 1px var(--color-black-alpha-02)
		}

		.apartment .text-faci {
			pointer-events: none
		}

		.block-top {
			left: 30%;
			top: 10%
		}

		.block-bottom {
			left: 60%;
			top: 58%
		}

		.block-01 {
			left: 20%;
			top: 14%
		}

		.block-02 {
			left: 40%;
			top: 14%
		}

		.block-03 {
			left: 50%;
			top: 82%
		}

		.block-04 {
			left: 77%;
			top: 68%;
			transform: rotate(-62deg)
		}

		.block-01,
		.block-02,
		.block-03,
		.block-04,
		.block-bottom,
		.block-top {
			padding: .8rem 1rem;
			z-index: 2
		}

		.text-faci i {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			border-radius: 1rem;
			z-index: -1
		}

		.text-faci div::after,
		.text-faci div::before {
			content: '';
			position: absolute;
			background-color: var(--color-white);
			box-shadow: .1rem .2rem 0 0 var(--color-black-alpha-01);
			z-index: -1
		}

		.text-faci div::before {
			height: 12vh;
			top: 2rem;
			left: 50%;
			width: .1rem
		}

		.text-faci div::after {
			width: .9rem;
			height: .9rem;
			left: calc(50% - .4rem);
			border-radius: 50%
		}

		.text-faci .block-bottom::after,
		.text-faci .block-bottom::before {
			top: -12vh
		}

		.text-faci .block-top::after {
			top: calc(12vh + 2.4rem)
		}

		.text-faci .block-bottom::before,
		.text-faci .block-top::before {
			height: 14vh
		}

		.text-faci .block-03::before,
		.text-faci .block-04::before {
			top: -10vh
		}

		.text-faci .block-01::after,
		.text-faci .block-02::after {
			top: calc(10vh + 2.4rem)
		}

		.text-faci .block-03::after,
		.text-faci .block-04::after {
			top: -10vh
		}

		.masterplan {
			background-color: var(--color-normal-light-2)
		}

		.floor-05-39,
		.shophouse.dark {
			background-color: var(--color-normal)
		}

		.shophouse.light {
			background-color: var(--color-normal-light-2)
		}

		.color-01 i {
			background-color: var(--color-normal-brown-dark)
		}

		.color-02 i {
			background-color: var(--color-normal)
		}

		.floor-04 {
			background-color: var(--color-highlight)
		}

		.floor-04 .text-decor-cover {
			opacity: .5
		}

		.floor-04 .facilities-bg::before {
			content: '';
			width: 100%;
			height: 30%;
			position: absolute;
			left: 0;
			bottom: 0;
			background: linear-gradient(0deg, var(--color-highlight) 0, var(--color-black-zero) 80%)
		}

		.floor-05-39 .facilities-bg::before,
		.shophouse .facilities-bg::before {
			content: '';
			width: 100%;
			height: 30%;
			position: absolute;
			left: 0;
			bottom: 0;
			background: linear-gradient(0deg, var(--color-normal) 30%, var(--color-normal-zero) 100%)
		}

		.shophouse.light .facilities-bg::before {
			background: linear-gradient(0deg, var(--color-normal-light-2) 30%, var(--color-normal-zero) 100%)
		}

		.hover-svg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%
		}

		.block-area {
			cursor: pointer
		}

		.fill-hover {
			fill-opacity: 0;
			transition: all .3s ease-in-out
		}

		.fill-num,
		.num-text {
			fill: var(--color-highlight);
			transition: opacity .3s ease-in-out
		}

		.num-text {
			fill: var(--color-white);
			font-family: Oswald, sans-serif;
			font-size: 14px;
			font-weight: 700
		}

		.block-area.show .fill-hover {
			fill-opacity: 1;
			stroke: var(--color-white);
			stroke-width: 3px;
			filter: drop-shadow(0 .3rem .8rem var(--color-black-alpha-05))
		}

		.block-area.show .fill-num,
		.block-area.show .num-text,
		.svg-b {
			opacity: 0
		}

		.svg-b {
			fill: none;
			transition: drop-shadow .3s ease-in-out, opacity .3s ease-in-out;
			stroke: var(--color-white);
			stroke-miterlimit: 10;
			stroke-width: 5;
			stroke-dasharray: 500;
			stroke-dashoffset: 0
		}

		.svg-b.active {
			animation-name: DrawStroke;
			animation-duration: 1.5s;
			animation-fill-mode: forwards;
			animation-iteration-count: infinite;
			animation-direction: normal;
			animation-timing-function: linear;
			filter: drop-shadow(0 .3rem .8rem var(--color-black-alpha-05));
			opacity: 1
		}

		.hover-b {
			cursor: pointer
		}

		.text-faci .text i {
			transition: background-color .3s ease-in-out
		}

		.color-01 .text.active i {
			background-color: var(--color-highlight-dark)
		}

		.color-02 .text.active i {
			background-color: var(--color-normal-brown-dark)
		}

		.block.disable-block .block-area,
		.disable-block {
			pointer-events: none;
			filter: grayscale(1)
		}

		.block.disable-block .block-area .fill-hover {
			fill-opacity: 1;
			pointer-events: none;
			filter: grayscale(1)
		}

		.block.disable-block .block-area .fill-num,
		.block.disable-block .block-area .num-text {
			fill: none;
			stroke: none
		}

		#news-page .title-page,
		.block-name.disable-block,
		.house-detail .share a::after,
		.house-detail .share button::after,
		.is-touch .house-text::after,
		.list-info.disable-block {
			display: none
		}

		.text-faci .disable-block {
			opacity: .5 !important
		}

		.info-house {
			width: 100%;
			height: auto;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 60
		}

		.list-info {
			width: 100%;
			height: auto;
			position: relative;
			display: block
		}

		.block-name {
			position: relative;
			font-size: 1.2rem;
			font-weight: 700;
			text-transform: uppercase;
			text-align: center;
			display: none;
			margin: 10px auto
		}

		.house-text {
			position: absolute;
			background-color: var(--color-white);
			color: var(--color-black);
			width: auto;
			max-width: 15rem;
			height: auto;
			left: 50%;
			top: 50%;
			text-align: left;
			box-shadow: 0 .5rem 2rem 0 var(--color-black-alpha-02);
			opacity: 0;
			transform: scale(0);
			padding: .3rem;
			border-radius: .5rem;
			z-index: 120
		}

		.house-text::after {
			content: '';
			position: absolute;
			left: -.8rem;
			top: calc(50% - .8rem);
			margin: 0;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: .8rem .8rem .8rem 0;
			border-color: transparent var(--color-white) transparent transparent
		}

		.num-block {
			width: 100%;
			height: auto;
			font-size: .7rem;
			font-weight: 700;
			text-transform: uppercase;
			text-align: center;
			padding: .3rem .8rem;
			border-radius: .3rem .3rem 0 0;
			margin: 0;
			background-color: var(--color-highlight)
		}

		.area-des,
		.area-des h3,
		.num-block {
			position: relative;
			display: block
		}

		.area-des {
			width: 100%;
			height: auto;
			padding: 0 .5rem;
			color: var(--color-black)
		}

		.area-des p {
			font-size: .6rem;
			padding: .2rem 0
		}

		.area-des p strong {
			font-size: 120%
		}

		.area-des h3 {
			font-size: .7rem;
			font-weight: 700;
			line-height: 1;
			text-transform: uppercase;
			margin: .3rem 0
		}

		.house-text .area-des p:last-child {
			border-bottom: none
		}

		.go-link {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: .6rem;
			font-weight: 700;
			color: var(--color-white);
			background-color: var(--color-normal);
			padding: .3rem .8rem;
			border-radius: 0 0 .3rem .3rem;
			margin: 0;
			text-align: center;
			text-transform: uppercase
		}

		.go-link span {
			position: relative;
			width: 1.4rem;
			height: 1.4rem;
			display: block;
			margin: 0 0 0 .3rem
		}

		.house-text.show {
			transform: scale(1);
			animation-name: fadeInUp;
			animation-duration: 1s;
			animation-delay: 0s;
			animation-fill-mode: forwards;
			pointer-events: auto
		}

		.is-touch .house-text {
			pointer-events: auto;
			cursor: pointer
		}

		.load-apartment {
			height: 100vh;
			width: 100%;
			left: 0;
			top: 0;
			position: fixed;
			opacity: 0;
			display: none;
			z-index: 30
		}

		.bg-house,
		.house-load {
			position: absolute;
			left: 0;
			width: 100%;
			height: 100%
		}

		.bg-house {
			bottom: 0;
			overflow: hidden;
			opacity: 0;
			transition: opacity 1s ease-in-out;
			background-color: var(--color-highlight)
		}

		.bg-house .pattern {
			filter: grayscale(1) brightness(40%) contrast(10%);
			mix-blend-mode: overlay
		}

		.bg-house.show {
			opacity: 1
		}

		.house-load {
			top: 0
		}

		.content-apartment,
		.house-detail {
			width: 100%;
			position: relative;
			display: block
		}

		.house-detail {
			height: 100vh;
			text-align: center;
			z-index: 20
		}

		.content-apartment {
			height: 100%;
			margin: 0
		}

		.content-apartment::after,
		.content-apartment::before {
			content: '';
			height: 100%;
			display: inline-block;
			vertical-align: middle
		}

		.apartment-pic {
			width: 55vw;
			height: 70vh;
			position: relative;
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			margin: 0;
			z-index: 10
		}

		.slide-house {
			width: 100%;
			height: auto;
			display: block;
			margin: 0
		}

		.scale-pic,
		.scale-pic>img {
			height: 100%;
			position: relative
		}

		.scale-pic {
			display: flex;
			align-items: center;
			text-align: center;
			pointer-events: none;
			width: 100%;
			margin: 0
		}

		.scale-pic>img {
			width: auto;
			max-width: 55vw;
			max-height: 70vh;
			padding: 0;
			display: block;
			margin: auto
		}

		.ratio-4-3 .apartment-pic {
			width: 50vw
		}

		.ratio-4-3 .scale-pic>img {
			max-width: 50vw
		}

		.content-house-left {
			width: 25vw;
			max-width: 25rem;
			height: auto;
			position: absolute;
			left: 0;
			margin: 0 0 0 3rem;
			top: 50%;
			transform: translateY(-50%);
			text-align: left;
			padding: 0;
			z-index: 5
		}

		.floor-block,
		.floor-block h2 {
			display: flex;
			align-items: center;
			justify-content: center
		}

		.floor-block {
			width: 100%;
			height: auto;
			left: 0;
			top: 0;
			pointer-events: none;
			position: absolute
		}

		.floor-block i {
			margin: 0 1rem;
			font-size: 50%
		}

		.floor-block h2 {
			position: relative;
			font-family: Newsreader, serif;
			font-optical-sizing: auto;
			font-weight: 300;
			font-size: 2rem;
			padding: 1.5rem 5%
		}

		.floor-block h2 strong {
			font-weight: 500
		}

		.block-code h3,
		.block-num,
		.floor-block i,
		.floor-num {
			position: relative;
			display: block
		}

		.block-code {
			align-items: center;
			margin: .8rem 0
		}

		.block-code .add-class {
			font-weight: 700;
			font-size: 110%
		}

		.block-code h3 {
			font-size: 1.3rem;
			font-weight: 400;
			font-style: italic
		}

		.apartment-des,
		.block-code,
		.title-block {
			position: relative;
			width: 100%;
			height: auto;
			display: block;
			color: var(--color-normal-light)
		}

		.title-block {
			font-size: 1.8rem;
			margin: .8rem 0;
			font-style: italic
		}

		.apartment-des {
			padding: 0;
			margin: 0
		}

		.apartment-des p {
			font-size: 1rem;
			display: block;
			margin: .8rem 0;
			font-style: italic
		}

		.apartment-des strong {
			color: var(--color-white);
			font-size: 120%
		}

		.keyplan {
			width: calc(100vw/5);
			max-width: 25rem;
			height: auto;
			position: absolute;
			color: var(--color-white);
			text-align: center;
			right: 3rem;
			bottom: 5.5rem;
			z-index: 15
		}

		.keyplan .compass-2 {
			width: 2rem;
			height: 2rem;
			left: 20%;
			top: 60%
		}

		.keyplan-svg,
		.title-key {
			width: 100%;
			height: auto;
			position: relative
		}

		.title-key {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: .6rem;
			margin: 0 0 .3rem
		}

		.title-key .block-num,
		.title-key p {
			margin: 0 .3rem 0 0;
			text-transform: uppercase
		}

		.title-key .block-num {
			font-weight: 700;
			margin: 0 0 0 .3rem
		}

		.keyplan-svg {
			display: block;
			margin: 0 0 .8rem;
			opacity: 0
		}

		.block-key {
			opacity: .3
		}

		.keyplan-svg svg {
			width: 100%;
			height: 100%;
			transform: scale(1.4)
		}

		.keyplan-svg svg .bg {
			filter: drop-shadow(30px 30px 0 var(--color-black-alpha-03))
		}

		.frame-key {
			pointer-events: none
		}

		.key-area path,
		.key-area polygon,
		.key-area rect {
			stroke-width: .1rem;
			stroke: var(--color-black-alpha-05);
			fill: var(--color-white)
		}

		.key-area.active path,
		.key-area.active polygon,
		.key-area.active rect {
			stroke-opacity: 0;
			fill: var(--color-orange)
		}

		.block-key.active {
			opacity: 1
		}

		.house-detail .share {
			position: absolute;
			left: 3rem;
			bottom: 1.5rem;
			margin: 0;
			display: flex;
			align-items: center;
			font-size: .7rem;
			color: var(--color-white)
		}

		.house-detail .share a,
		.house-detail .share button {
			position: relative;
			width: 3rem;
			height: 3rem;
			display: block;
			color: var(--color-white);
			border: 1px solid var(--color-white-alpha-05);
			border-radius: .5rem;
			margin: 0 .5rem
		}

		.house-detail .share span {
			position: relative;
			display: inline-block
		}

		.des-house {
			position: absolute;
			width: 45vw;
			max-width: 45rem;
			height: auto;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			padding: 1.5rem;
			text-align: center
		}

		.des-house p,
		.keyplan-svg svg,
		.title-pic h3 {
			position: relative;
			display: block
		}

		.des-house p {
			color: var(--color-white-alpha-05);
			font-style: italic;
			line-height: 1.2;
			font-size: .6rem
		}

		.slide-pic-nav {
			position: fixed;
			right: 2rem;
			top: 50%;
			left: auto;
			width: 13rem;
			height: auto;
			margin: -4rem 0 0;
			opacity: 0;
			z-index: 99
		}

		.next-pic,
		.prev-pic {
			width: 4rem;
			height: 4rem;
			position: absolute;
			top: 0;
			cursor: pointer;
			transition: all .3s ease-in-out;
			z-index: 5
		}

		.next-pic::after,
		.next-pic::before,
		.prev-pic::after,
		.prev-pic::before {
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0
		}

		.next-pic::before,
		.prev-pic::before {
			border-radius: 60% 50% 80% 50%/80% 60% 50% 80%;
			opacity: 0
		}

		.next-pic {
			right: 0
		}

		.prev-pic {
			left: 0
		}

		.next-pic.disabled,
		.prev-pic.disabled {
			opacity: .2;
			pointer-events: none
		}

		.picture-library .content-main,
		.video-library .content-main {
			justify-content: flex-end;
			align-items: flex-end;
			text-align: right
		}

		.brochure-library .content-main {
			justify-content: center;
			align-items: flex-end;
			text-align: center
		}

		.picture-library .content-center,
		.video-library .content-center {
			width: 40vw;
			text-align: center;
			padding: 10vh
		}

		.brochure-library .content-center {
			width: 100%;
			text-align: center;
			padding: 5vh
		}

		.picture-library .text-decor,
		.video-library .text-decor {
			bottom: -2vw;
			right: 5vw
		}

		.brochure-library .text-decor {
			bottom: -2vw
		}

		.picture-library .slide-inner,
		.video-library .slide-inner {
			background-color: var(--color-bg-grey)
		}

		.picture-library .bg-inner,
		.video-library .bg-inner {
			mix-blend-mode: multiply
		}

		.brochure-library .bg-inner {
			background: var(--color-bg-circle-2)
		}

		.library-box {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			align-items: center
		}

		.library-box-album {
			justify-content: flex-end
		}

		.item-album,
		.item-pdf,
		.item-video,
		.slide-library {
			position: relative;
			height: auto;
			display: block;
			margin: 0
		}

		.slide-library {
			width: 80vw
		}

		.slide-library .slidebox-track {
			overflow: visible
		}

		.item-album,
		.item-pdf,
		.item-video {
			width: 100%;
			pointer-events: none
		}

		.item-album.is-active,
		.item-pdf.is-active,
		.item-video.is-active {
			pointer-events: auto
		}

		.pic-library {
			position: relative;
			width: 70%;
			height: 60vh;
			aspect-ratio: 18/9;
			display: block;
			margin: auto
		}

		.ratio-4-3 .pic-library {
			width: 80%;
			height: 50vh;
			aspect-ratio: 16/9
		}

		.ratio-4-3 .library-box-album .pic-library {
			margin: 0 15% 0 5%
		}

		.ratio-4-3 .library-box-album .slidebox-arrows {
			width: 110%;
			left: 45%
		}

		.pic-library .pic-img {
			height: 100%;
			box-shadow: 0 2rem 2rem 0 var(--color-black-alpha-03)
		}

		.over-but,
		.title-pic {
			position: absolute;
			z-index: 10
		}

		.title-pic {
			left: 0;
			bottom: 0;
			display: block;
			padding: 1rem 1rem 1rem 6rem;
			color: var(--color-white);
			text-align: left
		}

		.title-pic::after {
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background-color: var(--color-black-alpha-05)
		}

		.title-pic h3 {
			font-size: 1.2rem;
			font-weight: 400;
			text-shadow: 0 1px 1px var(--color-black-alpha-02);
			z-index: 5
		}

		.head-text h3,
		.title-pic h3 strong {
			text-transform: uppercase
		}

		.over-but {
			left: 1rem;
			bottom: 5rem
		}

		.library-box-pdf {
			justify-content: center
		}

		.library-box-pdf .slide-library {
			width: 50vw;
			max-width: 45rem;
			margin: -15vh 0 0
		}

		.item-pdf .pic-library {
			height: 70vh;
			max-width: 50%;
			max-height: calc(1022/800*22vw)
		}

		.item-pdf .pic-img {
			height: 100%;
			border-radius: 1rem;
			box-shadow: none;
			aspect-ratio: 2/4;
			background: var(--color-normal-brown)
		}

		.item-pdf .pic-img img {
			height: 100% !important;
			left: 0 !important;
			top: 0 !important;
			border-radius: 1rem
		}

		.item-pdf .over-but {
			bottom: 3rem;
			left: calc(50% - 3rem)
		}

		.download-pdf,
		.view-album,
		.view-video {
			position: absolute;
			left: 0;
			top: 0;
			border-radius: 50%;
			z-index: 10
		}

		.view-album,
		.view-video {
			background-color: var(--color-black-alpha-05);
			width: 4.5rem;
			height: 4.5rem
		}

		.download-pdf::after,
		.share a::after,
		.share button::after,
		.view-album::after,
		.view-video::after {
			content: '';
			position: relative;
			width: 100%;
			height: 100%;
			display: block
		}

		.download-pdf {
			width: 6rem;
			height: 6rem
		}

		.download-pdf::before {
			content: '';
			position: absolute;
			width: 70%;
			height: 70%;
			left: 15%;
			top: 15%;
			background: var(--color-normal);
			border-radius: 50%
		}

		.news {
			background-color: var(--color-light)
		}

		.news .slide-inner .title-main,
		.news-list {
			position: absolute;
			text-align: center;
			overflow: hidden
		}

		.news .slide-inner .title-main {
			height: auto;
			writing-mode: vertical-rl;
			top: 50%;
			right: 3rem;
			transform: translateY(-50%) rotate(180deg);
			pointer-events: none;
			width: auto;
			z-index: 10
		}

		.news .slide-inner .title-main h2 {
			writing-mode: vertical-rl;
			white-space: nowrap
		}

		.news .text-decor {
			transform: rotate(-90deg) translate(2vw, 8vw);
			right: 0;
			bottom: 15vw;
			width: 30vw;
			height: calc(300/700*30vw)
		}

		.news .date-thumb {
			font-size: .6rem;
			font-weight: 700;
			font-family: Montserrat, sans-serif;
			text-align: left
		}

		.news-list {
			width: 100%;
			height: calc(100vh - 3rem);
			left: 0;
			top: 3rem;
			border-color: transparent;
			z-index: 5
		}

		.news-content::after,
		.news-list::after {
			content: '';
			width: 100%;
			height: 6rem;
			position: fixed;
			left: 0;
			bottom: 0;
			background: linear-gradient(0deg, var(--color-light) 20%, var(--color-black-zero) 100%);
			z-index: 10
		}

		.grid,
		.link-page,
		.outer {
			position: relative;
			height: auto
		}

		.grid {
			display: block;
			width: 70vw;
			max-width: 70rem;
			margin: auto;
			text-align: left;
			padding: 2rem 0 6rem
		}

		.link-page,
		.outer {
			width: 100%
		}

		.link-page {
			display: inline-block;
			vertical-align: top;
			padding: 10px;
			text-align: left;
			white-space: normal;
			cursor: pointer;
			background-color: var(--color-normal-alpha-05)
		}

		.link-page .date-thumb {
			padding: .8rem 1rem;
			margin: 0 0 .8rem;
			display: inline-block;
			background-color: var(--color-normal-brown)
		}

		.outer {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 5vh;
			transition: opacity .5s ease-out
		}

		.head-text,
		.pic-thumb {
			width: 100%;
			position: relative;
			display: block
		}

		.pic-thumb {
			overflow: hidden;
			pointer-events: none
		}

		.pic-thumb .pic-img {
			height: 20vh;
			aspect-ratio: 16/9
		}

		.head-text {
			color: var(--color-white);
			text-align: left;
			white-space: normal;
			min-height: 8rem
		}

		.head-text h3 {
			font-size: 1rem;
			line-height: 1.4;
			position: relative;
			text-shadow: 0 1px 1px var(--color-black-alpha-02);
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
			margin: 0 0 1rem;
			padding: 0 .8rem;
			font-weight: 400;
			font-style: italic
		}

		.head-text .view-news {
			display: none
		}

		.new-icon {
			left: 10px;
			top: 10px;
			display: block;
			z-index: 3
		}

		.new-icon,
		.news-content .loadx {
			position: absolute
		}

		.news-list .scrollB .title-main h2 {
			font-size: 2rem
		}

		.news-list .scrollB .title-main,
		.news-list .wrap-view-more {
			display: none;
			width: 100%;
			padding: 0 1.5rem 0 3rem;
			text-align: left
		}

		.news-list .scrollB {
			display: flex;
			align-items: center
		}

		.link-page:nth-child(1) {
			grid-column: 1/3;
			grid-row: 1
		}

		.link-page:nth-child(1) .box-news {
			display: flex;
			align-items: center
		}

		.link-page:nth-child(1) .pic-thumb {
			width: 60%
		}

		.link-page:nth-child(1) .pic-thumb .pic-img {
			height: calc(20vh + 8rem)
		}

		.link-page:nth-child(1) .head-text {
			width: 40%;
			padding: 1.5rem
		}

		.link-page:nth-child(1) .head-text h3 {
			font-size: 1.3rem;
			-webkit-line-clamp: 5;
			padding: 0
		}

		.colum-box-news {
			position: absolute;
			width: 100%;
			height: 100%;
			left: auto;
			top: 0;
			overflow: hidden;
			padding-right: calc(8vw + 6rem);
			display: none;
			z-index: 10
		}

		.news-content,
		.news-text {
			position: relative;
			width: 100%;
			display: block;
			opacity: 0;
			z-index: 5
		}

		.news-content {
			max-width: 65rem;
			border-color: transparent;
			height: 100%;
			margin: auto;
			padding: 1.5rem
		}

		.news-text {
			height: auto;
			margin: 0;
			padding: 1.5rem 1.5rem 6rem;
			font-weight: 400;
			color: var(--color-white)
		}

		.news-text b,
		.news-text strong {
			font-weight: 700
		}

		.figcaption {
			text-align: center;
			font-size: 90%;
			font-style: italic;
			display: block;
			margin: 0 auto 1rem;
			padding: 0 1rem
		}

		.figure-img {
			width: 100%;
			height: auto;
			text-align: center;
			margin: auto;
			padding: .8rem 1rem
		}

		.news-text p,
		.news-text table div {
			text-align: left;
			line-height: 1.6;
			position: relative
		}

		.news-text p {
			margin: 0 0 1rem
		}

		.news-text p.height-zero {
			margin: 0;
			line-height: 1
		}

		.news-text table {
			font-size: .9rem;
			line-height: 1.6;
			position: relative
		}

		.news-text table div {
			color: var(--color-white)
		}

		.figure-img,
		.news-text iframe,
		.news-text img,
		.title-news,
		.title-news h2,
		.title-news::after {
			position: relative;
			display: block
		}

		.news-text img {
			max-width: 100%;
			width: 100%;
			height: auto;
			margin: .8rem auto;
			object-fit: contain;
			object-position: center center
		}

		.news-text a {
			color: currentColor
		}

		.news-text iframe {
			width: 100%;
			height: auto;
			padding: .8rem 1rem;
			user-select: none;
			backface-visibility: hidden
		}

		.news-content.show .news-text {
			animation-name: fadeInUp;
			animation-duration: 1s;
			animation-fill-mode: forwards
		}

		.title-news,
		.title-news::after {
			overflow: hidden
		}

		.title-news {
			text-align: left;
			margin-bottom: 1rem;
			width: 100%;
			height: auto
		}

		.title-news h2 {
			font-weight: 400;
			font-size: 1.8rem;
			padding: 0 7rem 1rem 0;
			margin: 0;
			font-style: italic
		}

		.title-news::after {
			content: '';
			width: 0;
			height: 1px;
			margin: .8rem 0;
			background-color: var(--color-white-alpha-05)
		}

		.title-news .share {
			position: absolute;
			right: 0;
			bottom: .8rem;
			padding: 0 0 0 .8rem;
			background-color: var(--color-normal)
		}

		.title-news .share a,
		.title-news .share button {
			width: 3rem;
			height: 3rem
		}

		.news-text .date-thumb {
			display: inline-block;
			margin: 0 0 .8rem;
			padding: .8rem 1rem;
			background-color: var(--color-normal)
		}

		.news-content.show .title-news::after {
			width: calc(100% - 3rem);
			transition: width 1s ease-out 1s
		}

		.colum-box-news.show {
			display: block
		}

		.news-content.show::before {
			background: var(--color-white-alpha-05);
			transition: background .6s ease-out
		}

		.outer.hide {
			opacity: 0
		}

		.news-list.hide .outer {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			align-items: center;
			grid-gap: 0
		}

		.news-list.hide {
			width: 30vw;
			height: calc(100vh - 14rem);
			max-width: 28rem;
			top: 8rem;
			border-right: 1px solid var(--color-white-alpha-05);
			transition: border .6s ease-out
		}

		.news-list.hide .grid {
			width: 100%;
			padding: 1.5rem 1.5rem 1.5rem 3rem
		}

		.news-list.hide .link-page {
			width: 100%;
			margin: 0 0 .8rem;
			padding: .5rem;
			background-color: var(--color-normal)
		}

		.news-list.hide .box-news {
			display: flex;
			align-items: center
		}

		.news-list.hide .pic-thumb {
			width: 45%;
			display: inline-block
		}

		.news-list.hide .head-text {
			width: 55%;
			display: inline-block;
			padding: 0 0 0 .8rem;
			min-height: inherit
		}

		.news-list.hide .head-text h3 {
			font-size: .7rem;
			-webkit-line-clamp: 4;
			margin: 0;
			padding: 0
		}

		.news-list.hide .pic-thumb .pic-img {
			height: 100%;
			aspect-ratio: 16/9
		}

		.new-icon,
		.news-list.hide .new-icon {
			left: .3rem;
			top: .3rem;
			width: 2rem;
			height: 1.5rem
		}

		.news-list.hide .link-page .date-thumb {
			margin: 0 0 .5rem;
			padding: 0;
			background-color: transparent
		}

		.news-list.hide .scrollB,
		.news-list.hide .scrollB .title-main,
		.news-list.hide .wrap-view-more {
			display: block
		}

		.news-list.hide .wrap-view-more {
			margin: 0 0 7rem
		}

		#progress-page .title-page,
		.news-list.hide .link-page,
		.news-list.hide .link-page.current {
			display: none
		}

		.news-list.hide .link-page.isview {
			display: inline-block
		}

		.news-list.hide .link-page:nth-child(1) {
			width: 100%
		}

		.news-list.hide .link-page:nth-child(1) .pic-thumb {
			width: 45%;
			display: inline-block
		}

		.news-list.hide .link-page:nth-child(1) .pic-thumb .pic-img {
			height: 120px
		}

		.news-list.hide .link-page:nth-child(1) .head-text {
			width: 55%;
			display: inline-block;
			padding: 0 0 0 .8rem;
			min-height: inherit
		}

		.news-list.hide .link-page:nth-child(1) .head-text h3 {
			font-size: .7rem;
			-webkit-line-clamp: 4;
			margin: 0
		}

		.share {
			width: auto;
			height: auto;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			color: var(--color-white);
			z-index: 100
		}

		.share a,
		.share button,
		.share span {
			position: relative;
			color: currentColor;
			display: block
		}

		.share a,
		.share button {
			width: 4rem;
			height: 4rem;
			margin: 0;
			transition: .3s ease-in-out .1s;
			z-index: 10
		}

		.share span {
			font-weight: 700;
			font-size: .7rem;
			text-transform: uppercase;
			margin: 0 .3rem 0 0
		}

		.progress {
			background-color: var(--color-highlight)
		}

		.progress .slide-inner .title-main {
			position: absolute;
			width: auto;
			height: auto;
			writing-mode: vertical-rl;
			top: calc(50% - 3rem);
			right: 3rem;
			text-align: center;
			overflow: hidden;
			transform: translateY(-50%) rotate(180deg);
			pointer-events: none;
			z-index: 10
		}

		.progress .slide-inner .title-main h2 {
			writing-mode: vertical-rl;
			white-space: nowrap;
			font-size: clamp(30px, 10vw, 3vw)
		}

		.progress .text-decor {
			transform: rotate(-90deg) translate(2vw, 8vw);
			right: 0;
			bottom: 15vw;
			width: 30vw;
			height: calc(300/700*30vw)
		}

		.progress .text-decor-cover {
			mix-blend-mode: overlay
		}

		.progress-list {
			position: absolute;
			width: 100%;
			height: 90vh;
			left: 0;
			top: 5vh;
			text-align: center;
			z-index: 5
		}

		.wrap-page {
			width: 60vw;
			max-width: 60rem;
			position: relative;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 1rem;
			align-items: flex-start;
			justify-content: center;
			margin: auto
		}

		.box-progress {
			width: 100%;
			display: block;
			height: auto;
			overflow: hidden;
			position: relative;
			background-color: var(--color-highlight)
		}

		.box-progress:last-child {
			margin: 0 0 10vh
		}

		.text-time {
			height: auto;
			background-color: var(--color-highlight)
		}

		.text-time h3 {
			position: relative;
			display: block;
			font-weight: 400;
			font-size: .9rem;
			text-align: left;
			padding: .5rem 1rem
		}

		.pic-progress,
		.pic-progress img,
		.text-time {
			width: 100%;
			display: block;
			position: relative
		}

		.pic-progress {
			aspect-ratio: 16/9;
			overflow: hidden;
			height: auto
		}

		.pic-progress img {
			height: 100%;
			object-fit: cover;
			object-position: center center;
			pointer-events: none
		}

		.wrap-select {
			position: absolute;
			width: auto;
			height: auto;
			top: 8rem;
			left: 3rem;
			z-index: 30
		}

		.select-header,
		.select-list {
			position: relative;
			height: 3rem;
			border-radius: 2rem
		}

		.select-list {
			display: block;
			width: 14rem;
			margin: .8rem 0;
			opacity: 0;
			z-index: 20
		}

		.select-header {
			display: flex;
			align-items: center;
			width: 100%;
			cursor: pointer;
			background-color: var(--color-highlight);
			box-shadow: 0 .8rem 1.5rem 0 var(--color-black-alpha-02)
		}

		.select-header .but {
			position: absolute;
			right: .6rem;
			top: .7rem;
			display: block;
			width: 1.6rem;
			height: 1.6rem;
			border: 1px solid var(--color-white);
			border-radius: 50%;
			z-index: 1
		}

		.all-pics .text-length h3,
		.select-header h3 {
			font-size: .8rem;
			color: var(--color-white);
			text-transform: uppercase
		}

		.select-box li h3,
		.select-header h3 {
			font-weight: 700;
			display: block;
			text-align: left
		}

		.select-header h3 {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			padding: 0 2rem 0 1rem
		}

		.select-box {
			position: absolute;
			top: 3rem;
			left: 0;
			display: none;
			width: 100%;
			height: auto;
			max-height: 18rem;
			border-radius: 1rem;
			box-shadow: 0 .8rem 1rem 0 var(--color-black-alpha-02);
			overflow-x: hidden;
			overflow-y: auto;
			opacity: 0;
			background-color: var(--color-normal);
			z-index: 99999
		}

		.all-pics.show,
		.select-box.show {
			display: block
		}

		.all-pics .text-length,
		.select-box ul {
			width: 100%;
			height: auto;
			text-align: center
		}

		.select-box li,
		.select-box ul {
			position: relative;
			display: block
		}

		.select-box ul {
			font-size: 0
		}

		.select-box li {
			width: calc(100% - 2px);
			height: auto;
			margin: 0 auto 1px;
			background-color: var(--color-normal);
			cursor: pointer
		}

		.full-screen::before,
		.select-box li a {
			display: block;
			width: 100%;
			height: auto
		}

		.select-box li h3 {
			font-size: .8rem;
			padding: .8rem 1rem;
			color: var(--color-white)
		}

		.select-box li.selected {
			background-color: var(--color-highlight);
			pointer-events: none
		}

		.select-box li.current {
			background-color: var(--color-normal);
			pointer-events: none
		}

		.select-header.onclick .but {
			background-color: var(--color-normal);
			border-color: transparent
		}

		.scrollA {
			scroll-behavior: smooth
		}

		.scrollA,
		.scrollB,
		.scrollC,
		.scrollD {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			overflow-x: hidden;
			overflow-y: auto;
			z-index: 2
		}

		.all-pics,
		.full {
			position: fixed;
			left: 0;
			top: 0;
			overflow: hidden
		}

		.all-pics {
			height: 100%;
			width: 100%;
			display: none;
			z-index: 9999
		}

		.all-pics .text-length {
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
			z-index: 9998
		}

		.all-pics .text-length h3 {
			text-shadow: 0 1px 1px var(--color-black-alpha-02);
			line-height: 1.4;
			position: relative;
			text-align: center;
			padding: 1rem 1.5rem;
			display: inline-block
		}

		.full {
			width: 100vw;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center
		}

		.album-center .pinch-zoom>img,
		.all-album,
		.full img {
			position: relative;
			width: auto;
			height: 100%;
			display: block
		}

		.full img {
			outline: 0;
			border: 0;
			opacity: 0;
			z-index: 5;
			max-width: 100%;
			max-height: 90vh;
			margin: 0 auto
		}

		.full span {
			width: 100vw;
			height: 100vh;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1
		}

		.all-album {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			overflow: hidden;
			display: none;
			-webkit-user-select: none;
			user-select: none;
			z-index: 9999
		}

		.album-load,
		.all-album.show {
			display: block
		}

		.album-load {
			position: relative;
			width: 100%;
			height: 100%;
			opacity: 0;
			text-align: center
		}

		.title-album {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: auto;
			pointer-events: none;
			color: var(--color-normal);
			padding: .8rem 5vw;
			opacity: 0;
			z-index: 5
		}

		.album-pic-center .pic-name h3,
		.title-album h2 {
			position: relative;
			display: block;
			font-size: 1rem;
			text-transform: uppercase;
			font-weight: 700
		}

		.album-center {
			height: 100vh;
			opacity: 0
		}

		.album-center,
		.album-pic-center,
		.container-zoom {
			display: block;
			width: 100%;
			position: relative
		}

		.album-pic-center {
			height: 100%;
			text-align: center
		}

		.album-pic-center .pic-name {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			padding: 1rem 5vw;
			overflow: hidden;
			height: auto;
			z-index: 5
		}

		.album-pic-center .pic-name h3 {
			display: inline-block;
			color: var(--color-normal-dark);
			font-size: .8rem;
			line-height: 1.4;
			text-align: center
		}

		.container-zoom {
			height: 100vh
		}

		.album-center .pinch-zoom {
			display: flex;
			align-items: center;
			justify-content: center
		}

		.album-center .pinch-zoom>img {
			max-height: 85vh;
			max-width: 96%;
			margin: auto
		}

		.container-zoom>img {
			box-shadow: 0 .8rem 1.5rem 0 var(--color-black-alpha-02)
		}

		.pinch-zoom img {
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d
		}

		.zoom-active>img {
			box-shadow: none;
			padding: 0 5%
		}

		.pinch-zoom>.zoom-transition {
			transition: transform ease 250ms
		}

		.pinch-zoom {
			overflow: hidden
		}

		.allvideo,
		.video-list {
			width: 100%;
			height: 100%;
			top: 0;
			left: 0
		}

		.allvideo {
			overflow: hidden;
			display: none;
			position: fixed;
			z-index: 2200
		}

		.allvideo.show {
			display: block
		}

		.video-list {
			position: absolute;
			text-align: center;
			z-index: 100
		}

		.video-wrap {
			position: relative;
			width: 100vw;
			height: 100vh;
			overflow: hidden;
			display: block;
			z-index: 100
		}

		.video-skin {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: auto;
			min-height: 100%;
			z-index: 10
		}

		.video-wrap iframe,
		.youtube-video iframe {
			position: absolute;
			width: 100%;
			left: 0;
			display: block
		}

		.video-wrap iframe {
			height: 100%;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			transform: translateZ(0);
			top: 0
		}

		.box-video-center,
		.pic-video {
			display: block;
			position: absolute;
			left: 0;
			top: 0
		}

		.box-video-center {
			width: 100vw;
			height: 100vh;
			margin: 0;
			padding: 0;
			text-align: center;
			background-color: var(--color-highlight-dark);
			z-index: 10
		}

		.pic-video {
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;
			transition: opacity .5s ease-in-out;
			z-index: 2
		}

		.pic-video.hide {
			opacity: 0;
			pointer-events: none
		}

		.video-cover {
			width: 100%;
			height: 100%;
			position: relative;
			display: flex;
			overflow: hidden
		}

		.video-full,
		.youtube-video {
			position: absolute;
			width: 100%;
			min-height: 100vh
		}

		.video-full {
			aspect-ratio: 16/9;
			transform: translate(-50%, -50%);
			display: block;
			height: auto;
			top: 50%;
			left: 50%
		}

		.youtube-video {
			height: 100%;
			top: 0;
			left: 0
		}

		.youtube-video iframe {
			height: calc(100vw*.5625);
			top: 50%;
			pointer-events: none;
			transform: translateY(-50%);
			z-index: -1
		}

		.full-frame .youtube-video iframe {
			width: 100%;
			height: 100vh;
			top: 0;
			left: 0;
			transform: none
		}

		.fullscreen .home-video {
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 9999
		}

		.fullscreen .video-full {
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			transform: none
		}

		.fullscreen .video-content {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			max-width: inherit;
			max-height: inherit;
			margin: 0;
			padding: 0;
			z-index: 999
		}

		.fullscreen .bg-video {
			opacity: 0;
			z-index: 0
		}

		.full-screen {
			position: fixed;
			right: 1rem;
			bottom: 1rem;
			width: 4rem;
			height: 4rem;
			cursor: pointer;
			opacity: 0;
			pointer-events: none;
			display: none
		}

		.full-screen::before {
			content: '';
			position: relative;
			height: 100%;
			z-index: 1
		}

		.full-screen.show {
			animation-name: fadeInUp;
			animation-duration: 1s;
			animation-delay: .5s;
			animation-fill-mode: forwards;
			pointer-events: auto
		}

		.fullsreen-support .full-screen {
			display: block;
			z-index: 999999
		}

		.controls {
			position: absolute;
			height: auto;
			width: 70%;
			max-width: 40rem;
			padding: .6rem 1rem;
			bottom: 1.5rem;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			transition: opacity .5s ease-in-out;
			z-index: 5
		}

		.controls::after {
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background-color: var(--color-black-alpha-02);
			border-radius: 3rem;
			-webkit-backdrop-filter: blur(5px);
			backdrop-filter: blur(5px)
		}

		.controls.hide {
			opacity: 0
		}

		.controls.hide>* {
			pointer-events: none
		}

		.fullscreen .controls {
			bottom: 2rem;
			z-index: 100
		}

		.left-button,
		.right-button {
			width: auto;
			height: auto;
			z-index: 10
		}

		.left-button button,
		.right-button button {
			position: relative;
			width: 1.6rem;
			height: 1.6rem;
			margin: 0 1rem;
			display: block;
			background-color: transparent;
			cursor: pointer
		}

		.left-button g,
		.left-button svg,
		.right-button g,
		.right-button svg {
			width: 100%;
			height: 100%;
			position: relative;
			display: block
		}

		.left-button path,
		.right-button path {
			fill: var(--color-white);
			stroke: none;
			transition: fill .3s ease-in-out
		}

		.left-button,
		.right-button,
		.video-progress,
		.video-time {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center
		}

		.video-time {
			font-size: .8rem;
			font-weight: 400;
			margin: 0 .5rem;
			width: auto;
			height: auto
		}

		.video-time span,
		.video-time time {
			color: var(--color-white);
			display: block;
			margin: 0 .5rem
		}

		.video-progress {
			width: 100%;
			height: 1px;
			z-index: 10
		}

		.progressbar,
		.seek {
			position: absolute;
			width: 100%;
			left: 0;
			top: 0;
			-webkit-appearance: none;
			appearance: none;
			border: 0
		}

		.progressbar {
			height: .1rem;
			pointer-events: none;
			background: var(--color-white)
		}

		.seek {
			height: 0;
			margin: 0;
			box-shadow: none;
			display: flex;
			align-items: center;
			background: 0 0
		}

		.seek:focus {
			outline: 0
		}

		input[type=range]::-webkit-slider-thumb {
			height: 1.4rem;
			width: 1.4rem;
			border-radius: 50%;
			margin: -.7rem 0 0;
			background: var(--color-white);
			cursor: pointer;
			-webkit-appearance: none;
			appearance: none;
			border: 0;
			transition: background .3s ease-in-out
		}

		input[type=range]::-webkit-slider-runnable-track {
			width: 100%;
			height: .1rem;
			border-radius: 0;
			background: 0 0;
			-webkit-appearance: none
		}

		input[type=range]::-webkit-slider-runnable-track:focus {
			background: var(--color-white);
			outline: 0
		}

		input[type=range]::-webkit-slider-thumb:active {
			background: var(--color-highlight)
		}

		progress::-webkit-progress-bar {
			background: var(--color-white)
		}

		progress::-webkit-progress-value {
			background: var(--color-highlight)
		}

		input[type=range]::-moz-range-thumb {
			height: 1.4rem;
			width: 1.4rem;
			border-radius: 50%;
			background: var(--color-white);
			cursor: pointer;
			appearance: none;
			border: 0;
			transition: background .3s ease-in-out
		}

		input[type=range]::-moz-focusring {
			background: var(--color-white);
			outline: 0
		}

		input[type=range]::-moz-range-track {
			width: 100%;
			height: .5px;
			border-radius: 0;
			background: var(--color-highlight);
			appearance: none
		}

		input[type=range]::-moz-range-track:focus {
			background: var(--color-highlight);
			outline: 0
		}

		input[type=range]::-moz-range-thumb:active {
			background: var(--color-highlight)
		}

		::-moz-progress-bar {
			background: var(--color-highlight)
		}

		.player-vid {
			top: 50%;
			left: 50%;
			top: calc(50% - 3vw);
			left: calc(50% - 3vw);
			width: 6vw;
			height: 6vw;
			display: flex;
			justify-content: center;
			align-items: center;
			color: var(--color-white);
			cursor: pointer;
			z-index: 999
		}

		.player-vid svg {
			width: 100%;
			height: 100%;
			display: block;
			position: relative;
			pointer-events: none;
			transform-origin: center center;
			z-index: 1
		}

		.button-deco,
		.button-deco-filler,
		.player-vid {
			position: absolute;
			border-radius: 50%
		}

		.button-deco {
			overflow: hidden;
			width: 80%;
			height: 80%;
			left: 10%;
			top: 10%
		}

		.button-deco-filler {
			width: 150%;
			height: 200%;
			top: -50%;
			left: -25%;
			transform: translate3d(0, 75%, 0);
			background-color: var(--color-normal)
		}

		.is-touch .player-vid {
			transform: none !important
		}

		.is-touch .button-deco-filler {
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			transform: none !important
		}

		.bg-video.hide,
		.player-vid.hide,
		.register-popup>span {
			opacity: 0;
			pointer-events: none
		}

		.bg-video {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			transition: opacity .6s ease-in-out;
			z-index: 15
		}

		.pause-button,
		.play-button {
			position: absolute;
			width: 0;
			height: 0;
			left: 0;
			top: 0;
			margin: 0;
			opacity: 0;
			pointer-events: none;
			overflow: hidden
		}

		.playpause {
			position: fixed;
			right: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 999999
		}

		.pause-canvas,
		.play-canvas,
		.playpause {
			width: 0;
			height: 0;
			overflow: hidden;
			display: none
		}

		.ytp-pause-overlay,
		.ytp-pause-overlay-controls-hidden .ytp-pause-overlay {
			display: none !important
		}

		.register {
			position: fixed;
			width: 0;
			height: 100%;
			overflow: hidden;
			left: 0;
			top: 0;
			margin: 0;
			text-align: center;
			z-index: 9990
		}

		.register .close {
			pointer-events: none;
			right: 1rem
		}

		.register form,
		.register-form {
			height: auto;
			position: relative;
			display: block
		}

		.register form {
			width: 100%;
			margin: .8rem 0;
			z-index: 10
		}

		.register-popup {
			position: absolute;
			right: 0;
			top: 0;
			width: 55vw;
			max-width: 50rem;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 3vw;
			text-align: left;
			pointer-events: none;
			z-index: 100
		}

		.register-form {
			width: 28vw;
			max-width: 28rem;
			margin: 0;
			z-index: 5
		}

		.register-form>.title-main {
			margin: 1rem 0
		}

		.register-form>.title-main h2 {
			font-size: clamp(30px, 10vw, 3vw);
			white-space: nowrap
		}

		.register-form .input-but {
			justify-content: flex-start;
			margin: 1rem 0
		}

		.register-popup>span {
			position: absolute;
			width: 100%;
			height: 130vh;
			top: -15vh;
			left: 0;
			z-index: -1
		}

		.grid-col,
		.input-text,
		.require-col {
			width: 100%;
			position: relative;
			display: block
		}

		.require-col {
			padding: 0;
			margin: 1rem 0 0
		}

		.input-text {
			height: auto;
			margin: 0 0 .3rem;
			background-color: inherit;
			z-index: 5
		}

		.input-text input[type=text] {
			font-size: 1rem;
			font-weight: 400;
			color: var(--color-white);
			height: 3rem;
			line-height: 3rem;
			padding: 0 1rem;
			border: 0;
			width: 100%;
			transition: all .3s ease-in-out;
			background-color: transparent;
			border-bottom: 1px solid var(--color-white-alpha-08);
			font-style: normal
		}

		.input-area textarea:focus,
		.input-text input[type=text]:focus {
			color: var(--color-black);
			opacity: 1;
			border: 0;
			background-color: var(--color-white);
			border-radius: .5rem;
			box-shadow: 0 1rem 1rem 0 var(--color-black-alpha-02)
		}

		.input-area {
			width: 100%;
			height: auto;
			position: relative;
			margin: 0;
			display: block;
			background-color: inherit;
			z-index: 5
		}

		.input-area textarea {
			font-size: 1rem;
			color: var(--color-white);
			line-height: 1.5;
			padding: .8rem 1rem;
			border: 0;
			width: 100%;
			height: 8rem;
			font-weight: 400;
			transition: all .3s ease-in-out;
			resize: none;
			background-color: transparent;
			border-bottom: 1px solid var(--color-white-alpha-08);
			font-style: normal;
			overflow-y: auto;
			scrollbar-width: thin;
			scrollbar-color: var(--color-normal-dark) var(--color-normal-zero)
		}

		.input-area textarea::-webkit-scrollbar {
			width: 8px
		}

		.input-but {
			width: 100%;
			height: auto;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin: 1rem 0;
			text-align: left;
			z-index: 5
		}

		.input-area .holder,
		.input-area .label,
		.input-text .holder,
		.input-text .label {
			color: var(--color-white);
			font-weight: 400;
			text-shadow: 0 1px 1px var(--color-black-alpha-02);
			font-style: italic
		}

		.input-area .holder,
		.input-text .holder {
			left: 0;
			top: .8rem;
			line-height: 1.5;
			pointer-events: none;
			overflow: hidden;
			z-index: 1;
			position: absolute;
			font-size: .9rem;
			transition: opacity .3s ease-in-out
		}

		.input-area .label,
		.input-text .label {
			position: relative;
			display: block;
			margin: 0 0 .3rem;
			font-size: 1rem;
			transition: color .3s ease-in-out
		}

		.input-area.active .label,
		.input-text.active .label {
			color: var(--color-highlight)
		}

		.input-area .holder.hide,
		.input-text .holder.hide {
			opacity: 0;
			width: 0
		}

		.overlay-dark,
		.overlay-form {
			position: fixed;
			height: 100%;
			width: 100%;
			left: 0;
			top: 0;
			-webkit-user-select: none;
			user-select: none;
			clip-path: circle(0 at 100% 0)
		}

		.overlay-form {
			background-position: left top;
			background-repeat: no-repeat;
			background-size: cover;
			transition: clip-path .8s ease-in-out
		}

		.overlay-form.show {
			clip-path: circle(150% at 100% 0)
		}

		.overlay-dark {
			overflow: hidden;
			background: var(--bg-gradient-menu);
			transition: clip-path .8s ease-in-out .3s;
			z-index: 500
		}

		.overlay-dark.other {
			background: var(--color-normal-alpha-08);
			-webkit-backdrop-filter: blur(5px);
			backdrop-filter: blur(5px)
		}

		.overlay-dark.show {
			clip-path: circle(150% at 100% 0)
		}

		.wrap-view-more {
			position: relative;
			width: auto;
			height: auto;
			display: inline-block;
			margin: 1rem 0;
			z-index: 10
		}

		.button,
		.more-news,
		.view-more {
			position: relative;
			display: inline-block;
			margin: 0;
			padding: .3rem 0 .3rem 1rem;
			white-space: nowrap;
			border-radius: 2rem
		}

		.button::before,
		.more-news::before,
		.view-more::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 35%;
			height: 100%;
			border: 1px solid var(--color-white);
			border-radius: 2rem 0 0 2rem;
			border-right: none
		}

		.button::after,
		.more-news::after,
		.view-more::after {
			content: '';
			position: absolute;
			top: 0;
			left: 30%;
			width: 70%;
			height: 100%;
			border-top: 1px solid;
			border-bottom: 1px solid;
			border-image-slice: 1;
			border-image-source: linear-gradient(to left, var(--color-white-zero), var(--color-white))
		}

		.icon-button,
		.text-view-more {
			position: relative;
			display: inline-block;
			vertical-align: middle;
			color: var(--color-white)
		}

		.text-view-more {
			font-size: .8rem;
			font-weight: 700;
			text-transform: uppercase;
			white-space: nowrap;
			text-shadow: 0 1px 1px var(--color-black-alpha-02)
		}

		.icon-button {
			width: 2rem;
			height: 2rem;
			margin-left: .3rem
		}

		.close,
		.close-album,
		.close-apartment,
		.close-popup,
		.close-video {
			position: fixed;
			right: 0;
			top: 1rem;
			display: block;
			width: 4rem;
			height: 4rem;
			cursor: pointer;
			z-index: 999999;
			opacity: 0
		}

		.close-album::after,
		.close-apartment::after,
		.close-popup::after,
		.close-video::after,
		.close::after {
			content: '';
			position: relative;
			display: block;
			width: 100%;
			height: 100%;
			z-index: 1
		}

		.close-video {
			top: 50%;
			margin: -2rem 1rem 0 0
		}

		.close-apartment {
			top: 50%;
			margin: -4rem 0 0;
			right: 6.5rem;
			pointer-events: none
		}

		.close-album.show,
		.close-apartment.show,
		.close-popup.show,
		.close.show {
			animation-name: fadeInDown;
			animation-duration: 1s;
			animation-delay: .3s;
			animation-fill-mode: forwards;
			pointer-events: auto
		}

		.close-album.show,
		.close-popup.show,
		.close.show {
			animation-delay: .5s
		}

		.all-pics .close,
		.close-album,
		.close-popup {
			margin: 0 1rem 0 0
		}

		.go-top {
			left: 2rem;
			bottom: 3.5vh;
			opacity: 0;
			width: 2.5rem;
			height: 5rem;
			cursor: pointer;
			color: var(--color-white);
			text-shadow: 0 1px 1px var(--color-black-alpha-02);
			z-index: 25
		}

		.go-top::after,
		.wheel::after {
			font-size: .6rem;
			font-weight: 700;
			color: currentColor;
			transform: rotate(-90deg);
			position: absolute;
			left: 0;
			white-space: nowrap
		}

		.go-top::after {
			bottom: 1rem;
			content: 'GO TOP'
		}

		.go-top span,
		.wheel span {
			position: absolute;
			left: .25rem;
			width: 2rem;
			height: 2rem
		}

		.go-top span {
			top: 0
		}

		.go-top span svg,
		.wheel span svg {
			position: relative;
			width: 100%;
			height: 100%;
			display: block
		}

		.go-top.show,
		.wheel.show {
			opacity: 1;
			pointer-events: auto
		}

		.go-top.show span {
			animation: WheelArrow2 1.5s infinite 0s
		}

		.go-top,
		.popup-details,
		.wheel {
			position: fixed;
			pointer-events: none
		}

		.wheel {
			left: 2rem;
			bottom: 3vh;
			opacity: 0;
			width: 2.5rem;
			height: 5rem;
			cursor: pointer;
			color: var(--color-white);
			text-shadow: 0 1px 1px var(--color-black-alpha-02);
			z-index: 25
		}

		.wheel::after {
			content: 'SCROLL';
			top: 0
		}

		.wheel span {
			bottom: 0
		}

		.wheel.show span {
			animation: WheelArrow 1.5s infinite 0s
		}

		.scroll-popup .news-content::after,
		.scroll-popup .news-content::before,
		.scroll-popup.no-after .click-hover.show,
		.wheel.hide {
			display: none
		}

		.wheel.center-align {
			width: auto;
			height: 4rem;
			bottom: 2rem;
			left: 50%;
			transform: translateX(-50%)
		}

		.center-align::after {
			content: '';
			font-size: .6rem;
			left: 50%;
			transform: translateX(-50%)
		}

		.center-align span {
			left: calc(50% - 1rem)
		}

		.popup-details {
			height: 100%;
			width: 100%;
			left: 0;
			top: 0;
			overflow: hidden;
			z-index: 1500
		}

		.popup-details.show {
			pointer-events: auto
		}

		.list-text {
			position: relative;
			width: 100%;
			height: auto;
			display: block
		}

		.click-hover,
		.scroll-popup {
			width: 100%;
			height: 100%;
			left: 0;
			top: 0
		}

		.scroll-popup {
			display: flex;
			align-items: center;
			justify-content: center;
			overflow-x: hidden;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			text-align: center;
			z-index: 2;
			position: absolute
		}

		.scroll-popup.no-after {
			align-items: flex-start
		}

		.scroll-popup .news-content {
			max-width: 1000px;
			display: block;
			margin: 0;
			height: auto;
			padding: 0;
			border: 0
		}

		.scroll-popup .news-text {
			width: 100%;
			padding: 30px;
			background-color: var(--color-black-alpha-02)
		}

		.scroll-popup.no-after .news-text {
			border-radius: 0
		}

		.click-hover {
			position: fixed;
			display: none
		}

		.click-hover.show,
		.popup {
			display: block
		}

		.popup {
			position: relative;
			width: 100%;
			height: auto
		}

		.popup .register-form {
			position: absolute;
			left: 0;
			top: 0;
			width: 50%;
			height: 100%;
			padding: 30px 40px
		}

		.popup .title-main {
			margin: 0 0 20px
		}

		.popup .title-main h2 {
			font-size: var(--titleFont);
			font-weight: 700
		}

		.popup .splitting .char {
			opacity: 0;
			transition: opacity 1s ease-out
		}

		.popup .splitting .char.move {
			opacity: 1
		}

		.no-scroll {
			overflow-x: hidden;
			overflow-y: hidden !important;
			overflow: hidden
		}

		.no-index {
			position: static !important;
			display: none !important
		}

		.level-index-out,
		.no-link {
			pointer-events: none
		}

		.level-index-out {
			z-index: -9999;
			opacity: 0
		}

		.level-index-in {
			z-index: 9990
		}

		.visible {
			overflow: visible
		}

		.display-none,
		.httpserver {
			display: none !important
		}

		.desktop,
		.display-block {
			display: block !important
		}

		.mobile {
			display: none !important
		}

		.register-success.color-blue {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 20px 30px;
			font-size: 20px;
			line-height: 1.6;
			width: 90%;
			max-width: 500px;
			height: auto;
			font-weight: 400;
			text-align: center;
			background-color: var(--color-normal);
			color: var(--color-white);
			text-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
			box-shadow: 0 30px 50px rgba(0, 0, 0, .2);
			z-index: 110000
		}

		.register-success.color-red {
			font-size: 18px;
			width: 300px;
			font-weight: 700;
			background-color: var(--color-red);
			color: var(--color-white)
		}

		.contact-success.color-blue,
		.contact-success.color-red,
		.register-success.color-red {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 20px 30px;
			line-height: 1.6;
			height: auto;
			text-align: center;
			text-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
			box-shadow: 0 30px 50px rgba(0, 0, 0, .2);
			z-index: 110000
		}

		.contact-success.color-blue {
			max-width: 500px;
			background-color: var(--color-normal);
			color: var(--color-white);
			font-size: 20px;
			width: 90%;
			font-weight: 500
		}

		.contact-success.color-red {
			font-size: 18px;
			width: 300px;
			font-weight: 700
		}

		.formError {
			position: absolute;
			top: -20px;
			left: 20px;
			display: block;
			cursor: pointer;
			z-index: 99999
		}

		.formErrorContent {
			background-color: var(--color-red);
			display: inline-block;
			position: relative;
			color: var(--color-white);
			width: auto;
			height: auto;
			max-width: 250px;
			font-size: 14px;
			line-height: 1.4;
			box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
			padding: 8px 12px;
			border-radius: 10px;
			z-index: 9999
		}

		.formErrorContent::after {
			content: '';
			position: absolute;
			left: 20px;
			bottom: -9px;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 10px 8px 0;
			border-color: var(--color-red) transparent transparent
		}

		.class-hidden {
			display: none !important
		}

		.contact-success {
			position: fixed;
			bottom: -300px;
			left: 10px;
			padding: 14px 40px 14px 66px;
			font-size: 15px;
			font-weight: 700;
			text-transform: uppercase;
			line-height: 1.5;
			text-align: left;
			width: auto;
			max-width: min(calc(100vw - 75px), 350px);
			height: auto;
			display: inline-block;
			background-color: var(--color-normal);
			color: var(--color-white);
			text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
			box-shadow: 0 30px 50px rgba(0, 0, 0, .2);
			opacity: 0;
			border-radius: 10px;
			z-index: 99999
		}

		.contact-success::before {
			content: '';
			position: absolute;
			width: 26px;
			height: 26px;
			top: calc(50% - 13px);
			left: 22px
		}

		.contact-success.color-red,
		.contact-success.color-yellow {
			background-color: var(--color-red);
			color: var(--color-white)
		}

		.close-message {
			position: absolute;
			width: 40px;
			height: 40px;
			top: 0;
			right: 0;
			cursor: pointer;
			z-index: 5
		}

		.close-message::after,
		.close-message::before {
			content: '';
			position: absolute;
			width: 2px;
			height: 40%;
			background-color: var(--color-white);
			top: 25%;
			left: 50%;
			transform: rotate(45deg);
			transition: all .15s ease-in-out
		}

		.close-message::before {
			transform: rotate(-45deg)
		}

		.close-message:hover::after,
		.close-message:hover::before {
			transform: none;
			width: 2px
		}

		.data-updating {
			width: 100%
		}

		.sub-mobile {
			display: none
		}

		@media only screen and (orientation:landscape) {
			.sub-mobile {
				top: 120px
			}
		}

		@media only screen and (orientation:portrait) {

			.bg-portrait,
			.portrait {
				display: block
			}

			.bg-landscape,
			.landscape {
				display: none
			}
		}

		@media screen and (max-width:1600px) and (max-height:720px) {

			.block-01,
			.block-02 {
				top: 12%
			}

			.block-03 {
				top: 84%
			}

			.go-top::after,
			.wheel::after {
				display: none
			}

			.go-top span {
				top: auto;
				bottom: 0
			}

			.go-top.show span {
				animation: WheelArrow 1.5s infinite 0s
			}
		}

		@media screen and (max-width:1600px) {
			.facilities .title-main {
				padding: 1rem 5%
			}

			.floor-40 .content-center {
				padding-left: 15vw
			}

			.apartment .title-main {
				padding: 1rem 5%
			}

			.about-investor .content-center {
				width: 80%
			}

			.about-investor .title-main {
				padding-left: 5%
			}
		}

		@media screen and (max-width:1300px) {
			.register-popup {
				width: 65vw
			}

			.floor-01 .content-center {
				right: 0
			}

			.hover-li p {
				white-space: normal
			}
		}

		@media screen and (max-width:1100px) {
			:root {
				--titleFontBig: 6vw;
				--titleFont: 4vw;
				--titleFontSmall: 3vw
			}

			body {
				height: auto;
				overflow-x: hidden;
				overflow-y: auto;
				background: var(--color-normal)
			}

			body,
			html {
				font-size: 18px
			}

			#svg_filter,
			#svg_filter filter,
			.box-nav,
			.go-top,
			.overlay-box {
				display: none
			}

			.desktop {
				display: none !important
			}

			.mobile {
				display: block !important
			}

			.load-center.show .gio {
				animation-name: fadeInUp;
				animation-duration: 1s
			}

			.wheel.center-align {
				width: auto;
				height: 60px;
				bottom: 2vh;
				left: 50%;
				display: block;
				transform: translateX(-50%)
			}

			.center-align::after,
			.right-header.hide-subscribe .subscribe,
			.wheel,
			.wheel::after {
				display: none
			}

			.center-align span {
				left: calc(50% - 20px)
			}

			.wheel span {
				width: 40px;
				height: 40px
			}

			.header,
			.header::before {
				position: fixed;
				width: 100%;
				top: 0;
				left: 0;
				height: auto
			}

			.header::before {
				content: '';
				position: absolute;
				height: 60px;
				background-color: var(--color-normal-brown);
				opacity: 0;
				transition: opacity .3s ease-in-out
			}

			.control button:hover,
			.dot-region.active .minute::after,
			.header.show::before,
			.title-page h1 {
				opacity: 1
			}

			.logo,
			.logo.scale-logo,
			.logo.space,
			.logo.transparent {
				position: fixed;
				right: auto;
				left: 10px;
				top: 8px;
				width: 180px;
				height: calc(280/500*180px);
				opacity: 0
			}

			.logo::after,
			.logo::before {
				transition: none;
				opacity: 1
			}

			.right-header,
			.right-header.hide,
			.right-header.normal {
				width: auto;
				height: 60px;
				max-height: inherit;
				align-items: center;
				flex-wrap: nowrap;
				right: 130px;
				top: 0;
				bottom: auto
			}

			.right-header span {
				line-height: 1.4;
				transform: none;
				font-size: 13px
			}

			.right-header .effect {
				margin: 0 5px 0 0
			}

			.effect {
				width: 42px;
				height: 42px
			}

			.option-header,
			.option-header.hide {
				left: auto;
				top: 10px;
				right: 80px
			}

			.hotline-text,
			.subscribe,
			.v360 {
				width: auto;
				height: auto;
				flex-wrap: nowrap;
				align-items: center;
				margin: 0 5px;
				padding: 0
			}

			.subscribe span {
				order: 2
			}

			.language {
				margin: 0
			}

			.language li a,
			.language li button {
				font-size: 13px
			}

			.nav-click {
				top: 5px;
				left: auto;
				right: 10px;
				width: 50px;
				height: 50px
			}

			.close-nav {
				top: 2px
			}

			.close-nav::before {
				content: '';
				position: absolute;
				width: 90%;
				height: 90%;
				left: 5%;
				top: 5%;
				border-radius: 40% 50% 80% 50%/30% 60% 50% 80%;
				background: var(--color-normal);
				box-shadow: 0 .8rem 1rem 0 var(--color-black-alpha-01)
			}

			.navigation {
				z-index: 120
			}

			.nav {
				top: 100px;
				height: calc(100vh - 100px);
				display: block;
				overflow-x: hidden;
				overflow-y: scroll;
				-webkit-overflow-scrolling: touch;
				z-index: 9999
			}

			.main-menu {
				width: 100%;
				padding: 0 20px 100px 0
			}

			.overlay-menu::after {
				background: var(--bg-gradient-menu2)
			}

			.main-menu li .link-hoz {
				padding: 1.5vh 10px
			}

			.logo-menu {
				width: 60vw;
				height: calc(280/500*60vw)
			}

			.footer,
			.footer.align-left {
				position: relative;
				width: 100%;
				bottom: auto;
				left: auto;
				padding: 20px 0;
				display: block;
				text-align: center;
				background-color: var(--color-highlight);
				pointer-events: auto
			}

			.copyright {
				width: 100%;
				margin: 15px 0 0
			}

			.social {
				width: 100%
			}

			.close {
				margin: 0
			}

			.close,
			.close-album {
				right: 10px;
				top: 10px;
				bottom: auto;
				width: 50px;
				height: 50px
			}

			.close-apartment,
			.close-popup {
				margin: 0
			}

			.close-apartment,
			.close-popup,
			.close-video {
				right: 10px;
				top: 10px;
				bottom: auto;
				width: 50px;
				height: 50px
			}

			.all-pics .close,
			.close-album,
			.close-video {
				margin: 0 10px 0 0
			}

			.full-screen {
				right: 10px;
				bottom: 10px;
				width: 50px;
				height: 50px
			}

			.all-pics .text-length h3,
			.title-album h2 {
				font-size: 14px
			}

			.allvideo,
			.video-skin {
				height: 100%;
				left: 0;
				top: 0
			}

			.allvideo {
				width: 100%;
				z-index: 5000
			}

			.video-skin {
				bottom: auto
			}

			.overlay-video.show {
				height: 100%
			}

			.album-pic-center img {
				max-width: 98%;
				max-height: inherit
			}

			.title-album {
				width: 100%;
				text-align: center;
				left: 0;
				top: 0;
				padding: 10px 5vw
			}

			.album-pic-center .pic-name {
				padding: 10px 80px
			}

			.album-center .pinch-zoom>img,
			.container-zoom {
				height: auto
			}

			.container-zoom.zoomin {
				height: 90vh
			}

			.album-center .container-zoom {
				height: 100vh
			}

			.album-load .full-screen {
				display: none
			}

			.full-frame .video-full,
			.video-full,
			.youtube-video {
				position: relative;
				left: auto;
				top: auto;
				width: 100%;
				height: 100%;
				min-height: inherit;
				transform: none
			}

			.youtube-video {
				bottom: auto;
				right: auto
			}

			.full-frame .video-full,
			.video-full {
				display: block;
				z-index: 1
			}

			.box-video-center,
			.video-cover {
				height: auto;
				width: 100%
			}

			.box-video-center {
				position: relative;
				left: auto;
				top: auto
			}

			.video-youtube-full {
				height: auto
			}

			.control {
				font-size: 11px;
				padding: 10px;
				bottom: 0;
				opacity: 1
			}

			.control button {
				width: 20px;
				height: 20px;
				transition: none;
				pointer-events: auto
			}

			.control::after {
				transition: none;
				background-color: var(--color-black-alpha-05)
			}

			.youtube-video iframe {
				position: relative;
				left: auto;
				top: auto;
				transform: none;
				z-index: 1
			}

			.home-video.fullmode {
				height: 100vh;
				position: fixed;
				left: 0;
				top: 0;
				background-color: var(--color-black);
				overflow: hidden !important;
				z-index: 9999 !important
			}

			.fullmode .video-cover {
				height: 100vh;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 9999
			}

			.fullmode .video-youtube-full {
				height: 100%
			}

			.fullmode .youtube-video iframe {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0
			}

			.player-vid {
				width: 70px;
				height: 70px;
				top: calc(50% - 35px);
				left: calc(50% - 35px);
				opacity: 1;
				transform: none !important
			}

			.is-IOS .youtube-video iframe,
			.is-mobile .youtube-video iframe {
				z-index: 1
			}

			.is-iOS .control,
			.is-iOS .controls,
			.is-mobile .control,
			.is-mobile .controls {
				display: none;
				z-index: -9999
			}

			.youtube-video+.player-vid {
				opacity: 0;
				pointer-events: none
			}

			.scrollA,
			.scrollB,
			.scrollC,
			.scrollD {
				position: relative;
				width: 100%;
				height: auto;
				left: auto;
				top: auto;
				overflow: visible;
				max-height: inherit;
				max-width: inherit;
				padding: 0;
				margin: 0
			}

			.box-slider,
			.group-central {
				position: relative;
				height: auto;
				left: auto;
				top: auto;
				display: block
			}

			.box-slider {
				overflow: visible
			}

			.group-central {
				width: 100%;
				text-align: center;
				pointer-events: auto;
				opacity: 1
			}

			.show-text {
				z-index: auto
			}

			.slide-inner {
				width: 100%;
				height: auto;
				display: block
			}

			.content-center,
			.content-main {
				left: auto;
				top: auto;
				bottom: auto;
				right: auto
			}

			.content-main {
				position: relative;
				height: auto;
				display: block;
				padding: 0;
				will-change: unset
			}

			.content-center {
				width: 100%;
				padding: 10vw 5%;
				transform: none;
				max-width: inherit;
				overflow: visible;
				margin: 0
			}

			.box-content,
			.colum-box,
			.content-center {
				position: relative;
				height: auto;
				display: block
			}

			.box-content {
				top: auto;
				left: auto;
				width: auto
			}

			.colum-box {
				width: 100%;
				float: left;
				margin: 0;
				padding: 0
			}

			.bg-inner,
			.group-central,
			.slide-inner:not(.scroll-mobile) {
				transform: none !important;
				will-change: inherit
			}

			.view-album,
			.view-video {
				width: 60px;
				height: 60px;
				background-color: var(--color-normal-brown)
			}

			.download-pdf {
				width: 70px;
				height: 70px
			}

			.button-zoom {
				right: auto;
				bottom: auto;
				left: auto;
				width: 100%;
				padding: 10px 20px;
				position: relative;
				justify-content: center
			}

			.pic-zoom-in,
			.pic-zoom-out {
				width: 45px;
				height: 45px
			}

			.title-page {
				top: 90px;
				right: 20px
			}

			.title-main {
				margin: 0 0 15px
			}

			.group-central:first-child .bg-cover {
				min-height: 400px
			}

			.bg-inner {
				height: auto
			}

			.bg-cover {
				position: relative;
				left: auto;
				top: auto;
				height: calc(1125/2000*100vw)
			}

			.box-cover {
				display: block;
				min-height: 350px
			}

			.bg-video {
				min-height: calc(1125/2000*100vw)
			}

			.box-txt {
				max-width: 500px;
				margin: auto
			}

			.box-txt i {
				width: 100%;
				margin: 30px auto;
				max-width: inherit
			}

			.box-txt i::before {
				margin: 15px auto
			}

			.layout-move .column,
			.text-decor {
				will-change: unset;
				transform: none !important
			}

			.layout-move .pic-img img {
				top: 0;
				height: 100%
			}

			.text-view-more {
				font-size: 13px
			}

			.icon-button {
				width: 34px;
				height: 34px
			}

			.button.blue,
			.button.yellow,
			.more-news.blue,
			.more-news.yellow,
			.view-more.blue,
			.view-more.yellow {
				background-color: var(--color-highlight);
				box-shadow: 0 .8rem 1rem 0 var(--color-black-alpha-01)
			}

			.button.yellow,
			.more-news.yellow,
			.view-more.yellow {
				background-color: var(--color-normal-brown)
			}

			#location-page .title-page,
			.button::after,
			.button::before,
			.home-wave .logo-center .pattern,
			.more-news::after,
			.more-news::before,
			.view-more::after,
			.view-more::before {
				display: none
			}

			#home-page .box-txt a,
			#home-page .box-txt p,
			.partner-info h2 {
				font-size: 1rem
			}

			.home-wave {
				background: var(--color-bg-circle-1);
				height: 100vh;
				width: 100vw
			}

			.home-wave .bg-inner,
			.home-wave .slide-inner {
				height: 100%;
				width: 100%
			}

			.tagline .text-svg {
				width: 50vw
			}

			.home-overview .bg-cover {
				top: auto
			}

			.home-overview .content-main {
				position: absolute;
				left: 0;
				top: 5vh
			}

			.home-overview .slide-inner::after {
				content: '';
				width: 100%;
				height: 50px;
				position: absolute;
				bottom: 0;
				left: 0;
				background: var(--color-bg-gradient-3);
				z-index: 2
			}

			.home-video {
				background: var(--color-bg-gradient-4);
				padding: 5vh 0 0
			}

			.location {
				background-color: var(--color-highlight);
				padding: 60px 0 0
			}

			.home-location .content-main,
			.location .content-main {
				padding: 0;
				text-align: center
			}

			.home-location .content-center,
			.location .content-center {
				width: 100%;
				max-width: inherit;
				text-align: center
			}

			.home-location .slide-inner,
			.location .slide-inner {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0
			}

			.home-location .text-decor,
			.location .text-decor {
				transform: none;
				right: 10vw;
				bottom: -20%
			}

			.location .text-decor {
				bottom: auto;
				top: -10%
			}

			.location .content-center {
				margin-top: 5%
			}

			.home-location .bg-cover,
			.location .bg-cover {
				height: 100%;
				background-position: 60% 50%
			}

			.home-location .wrap-view-more {
				margin: 20px 0
			}

			.text-decor {
				width: 80vw;
				height: calc(300/700*80vw)
			}

			.location .compass {
				top: 0
			}

			.location .pointer-map {
				pointer-events: none
			}

			.box-cover-right,
			.map-img,
			.panzoom {
				position: relative;
				height: calc(1300/2000*130vw);
				top: auto;
				left: auto
			}

			.box-cover-right {
				display: block;
				overflow: visible
			}

			.map-img,
			.panzoom {
				width: 100%
			}

			.map-img::after {
				left: calc(50% - 30vw)
			}

			.map-img {
				overflow: hidden
			}

			.map-img>img,
			.map-svg {
				width: 130vw;
				height: calc(1300/2000*130vw);
				left: 50%;
				transform: translateX(-43%)
			}

			.pointer-map {
				width: 6vw;
				height: calc(280/350*6vw);
				position: absolute;
				top: 44.2%;
				left: 51.7%;
				display: block;
				z-index: 100
			}

			.compass {
				left: 3%;
				top: 3%;
				width: 50px;
				height: 50px
			}

			.bot-circle {
				position: relative;
				display: block;
				left: auto;
				top: auto;
				background-color: var(--color-highlight-dark);
				padding: 20px 0;
				overflow-x: auto;
				overflow-y: hidden;
				z-index: 10
			}

			.show-box {
				position: relative;
				width: 240px;
				display: inline-block;
				margin: 10px 5px;
				vertical-align: top;
				left: auto !important;
				top: auto !important;
				opacity: 1;
				transform: scale(1);
				transition: none;
				box-shadow: none;
				overflow: visible;
				background: var(--color-highlight);
				z-index: auto
			}

			.show-box:last-child {
				margin-right: 20px
			}

			.number,
			.scroll-list {
				display: block
			}

			.scroll-list {
				position: relative;
				width: 100%;
				height: auto;
				left: auto;
				top: auto;
				right: auto;
				bottom: auto;
				padding: 0 20px;
				white-space: nowrap
			}

			.show-box.active .number {
				background-color: var(--color-orange);
				transform: scale(1.2)
			}

			.dot-hover.active circle,
			.num-region.active circle {
				stroke: var(--color-orange);
				stroke-width: 20px;
				fill: var(--color-orange)
			}

			.dot-hover.active path,
			.num-region text {
				fill: var(--color-white)
			}

			.region {
				background: var(--color-normal-brown-dark)
			}

			.region .bgcanvas,
			.region .slide-inner {
				display: none
			}

			.region .text-decor {
				width: 80vw;
				height: calc(300/700*80vw);
				left: 10vw;
				bottom: auto;
				top: 0;
				mix-blend-mode: multiply
			}

			.region .content-main {
				padding: 0;
				background-color: var(--color-normal-brown-dark)
			}

			.region .content-center {
				height: auto
			}

			.region .title-main {
				position: relative;
				bottom: auto;
				left: auto
			}

			.region .panzoom {
				height: auto;
				overflow: visible
			}

			.col-region .scroll-list,
			.link-area {
				position: relative;
				width: 100%;
				height: auto;
				left: auto;
				top: auto
			}

			.map-area {
				position: relative;
				width: 150vw;
				height: calc(1125/2000*150vw);
				top: auto;
				left: -25vw;
				overflow: visible;
				margin: 30px 0
			}

			.line-region {
				stroke-width: 3
			}

			.dot-region,
			.space-region {
				position: relative;
				display: inline-block
			}

			.dot-region {
				left: auto !important;
				top: auto !important;
				margin: 10px;
				white-space: nowrap;
				vertical-align: middle
			}

			.space-region {
				width: 30px;
				height: 30px
			}

			.minute,
			.text-region {
				display: inline-block;
				vertical-align: middle
			}

			.minute {
				width: 80px;
				height: 80px;
				padding: 20px 0
			}

			.minute::after {
				content: '';
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background-color: var(--color-orange);
				border-radius: 50%;
				opacity: 0;
				transition: opacity .3s ease-in-out
			}

			.minute span strong {
				font-size: 200%
			}

			.text-region {
				text-align: left;
				padding: .8rem 1rem;
				margin-right: 0;
				background-color: var(--color-normal-brown-dark)
			}

			.text-region span {
				font-size: 12px;
				line-height: 1.5
			}

			.text-region span strong {
				font-size: 100%
			}

			.col-region {
				position: relative;
				width: 100%;
				height: auto;
				display: block;
				left: auto;
				top: auto;
				background-color: var(--color-normal-dark);
				padding: 20px 0;
				overflow-x: auto;
				overflow-y: hidden;
				z-index: 10
			}

			.num-region {
				cursor: pointer
			}

			.num-region circle {
				fill: url(#dot-gradient2);
				stroke-width: 1px;
				stroke: var(--color-white)
			}

			.num-region text {
				font-size: 24px;
				font-weight: 700
			}

			.dot-region.active .minute::before {
				opacity: 0
			}

			.dot-region.active .text-region {
				background-color: var(--color-highlight)
			}

			.num-region.active circle {
				stroke-width: 5px
			}

			.home-facilities {
				background-color: var(--color-normal)
			}

			.home-facilities .bgcanvas,
			.home-facilities .slide-inner {
				display: none
			}

			.home-facilities .text-decor {
				width: 80vw;
				height: calc(300/700*80vw);
				left: 10vw;
				bottom: auto;
				top: calc(1125/2000*85vw);
				mix-blend-mode: unset
			}

			.home-facilities .content-main {
				text-align: center;
				padding: 0
			}

			.home-facilities .content-center {
				width: 100%;
				max-width: inherit;
				text-align: center
			}

			.home-facilities .wrap-view-more {
				position: relative;
				left: auto;
				bottom: auto;
				margin: 20px 0
			}

			.layout-move .pic-img {
				position: relative
			}

			.item-01,
			.item-02 {
				width: 100%;
				height: calc(1125/2000*100vw)
			}

			.item-01 {
				left: auto;
				top: auto
			}

			.item-02 {
				right: auto;
				bottom: auto
			}

			.home-news {
				background: var(--color-highlight)
			}

			.home-news .pattern,
			.home-news .slide-inner {
				display: none
			}

			.home-news .text-decor {
				width: 320px;
				height: calc(300/700*320px);
				left: calc(50% - 160px);
				top: 10px
			}

			.home-news .content-center {
				display: block;
				width: 100%;
				margin: 0
			}

			.home-news .title-main {
				width: 100%
			}

			.home-news .wrap-view-more {
				position: relative;
				left: auto;
				bottom: auto;
				margin: 20px auto
			}

			.wrap-news {
				position: relative;
				width: 100%;
				height: auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin: 50px 0 0;
				gap: 2rem 1rem
			}

			.pic-news-home {
				height: calc(1125/2000*50vw);
				max-height: 220px
			}

			.txt-news-home {
				margin: 15px 0
			}

			.txt-news-home h3 {
				font-size: .9rem;
				padding: 0 0 0 15px
			}

			.date-thumb {
				font-size: 28px
			}

			.item-news-home:nth-child(1) .pic-news-home {
				width: calc(50% - 15px);
				height: calc(1125/2000*50vw);
				max-height: 300px
			}

			.item-news-home:nth-child(1) .txt-news-home {
				width: 50%;
				padding: 0 0 0 30px
			}

			.item-news-home:nth-child(1) .txt-news-home h3 {
				font-size: 1.2rem;
				padding: 0
			}

			.item-news-home:nth-child(2),
			.item-news-home:nth-child(3) {
				width: calc(50% - 1rem)
			}

			.contact,
			.home-contact {
				background: var(--color-bg-gradient-2);
				padding: 5% 0 0
			}

			.home-contact .bgcanvas,
			.home-contact .slide-inner {
				display: none
			}

			.contact .text-decor,
			.home-contact .text-decor {
				width: 90vw;
				height: calc(300/700*90vw);
				left: 5vw
			}

			.contact .company-info,
			.home-contact .company-info {
				position: relative;
				width: 100%;
				left: auto;
				bottom: auto;
				padding: 30px 5%
			}

			.box-contact-main {
				width: 100%;
				padding: 30px 5% 0
			}

			.partner-info {
				display: block
			}

			.partner-info,
			.partner-info h3 {
				margin: 0 0 30px
			}

			.company-info {
				width: 100%;
				display: block
			}

			.company-info::before {
				content: '';
				position: relative;
				width: 80px;
				height: 1px;
				display: block;
				margin: -15px auto 30px;
				background-color: var(--color-white)
			}

			.company-info .box-txt {
				display: block;
				margin: 0 auto 10px
			}

			.company-info h3 {
				white-space: normal;
				font-size: 1.2rem;
				font-weight: 700;
				margin: 0 0 20px
			}

			.company-info a,
			.company-info p,
			.company-info p:last-child {
				white-space: normal;
				margin: 10px 0
			}

			.address,
			.phone,
			.web {
				position: relative;
				width: 30px;
				height: 30px;
				display: inline-block;
				vertical-align: middle;
				margin: 0 5px 0 0
			}

			.item-logo {
				height: 70px
			}

			.list-logo {
				position: relative;
				width: 100%;
				margin: 0 0 30px;
				display: inline-block
			}

			.list-logo .item-logo,
			.logo-partner {
				height: 50px;
				max-height: inherit
			}

			.logo-partner {
				height: 60px
			}

			.slide-logo {
				max-width: inherit
			}

			.box-partner {
				width: calc(100%/3)
			}

			.about-intro {
				background: linear-gradient(0deg, var(--color-normal) 0, var(--color-highlight) 80%)
			}

			.about-intro .text-decor {
				width: 80vw;
				height: calc(300/700*80vw);
				left: 10vw;
				top: auto;
				bottom: -10vw
			}

			.about-intro .content-main {
				text-align: center;
				padding: 0 0 30px
			}

			.about-intro .content-center {
				width: 100%;
				max-width: inherit;
				text-align: center;
				padding: 10vw 5%
			}

			.about-intro .logo-banner {
				display: none
			}

			.about-intro .box-txt {
				max-width: 600px;
				text-align: justify
			}

			.about-overview .bg-cover {
				top: auto
			}

			.about-overview {
				background-color: var(--color-normal-dark)
			}

			.about-overview .text-decor {
				width: 80vw;
				height: calc(300/700*80vw);
				left: 10vw;
				top: auto;
				bottom: -5vw
			}

			.about-overview .logo-banner {
				display: block
			}

			.about-overview .content-main {
				text-align: center;
				padding: 0 0 30px
			}

			.about-overview .content-center {
				width: 100%;
				max-width: inherit;
				text-align: center;
				padding: 10vw 5%
			}

			.about-overview .box-txt {
				max-width: inherit;
				color: var(--color-white);
				text-shadow: 0 1px 1px var(--color-black-alpha-02)
			}

			.about-investor {
				background: var(--color-highlight)
			}

			.about-investor .pattern,
			.about-investor .slide-inner,
			.dot-num i,
			.dot-num.current i,
			.dot-num.show i,
			.floor-01 .facilities-bg::before,
			.floor-03 .facilities-bg::before,
			.floor-20 .facilities-bg::before,
			.floor-40 .facilities-bg::before {
				display: none
			}

			.about-investor .text-decor {
				width: 80vw;
				height: calc(300/700*80vw);
				left: 10vw;
				top: auto;
				bottom: 0
			}

			.about-investor .content-main {
				padding: 0 0 30px
			}

			.about-investor .title-main {
				width: 100%;
				padding: 0
			}

			.about-investor .content-center {
				width: 100%;
				display: block;
				text-align: center;
				padding: 10vw 5%
			}

			.about-investor .box-txt {
				width: 100%;
				max-width: 600px;
				text-align: justify;
				font-size: .9rem
			}

			.about-investor .item-logo {
				margin: 0 auto 10px;
				display: block
			}

			.about-overview .box-txt .first {
				white-space: normal
			}

			#facilities-page .scrollA {
				overflow-y: hidden;
				overflow-x: auto;
				display: block;
				z-index: 10
			}

			#apartment-page .group-central,
			#facilities-page .group-central {
				overflow: visible
			}

			.floor-01 {
				padding-top: 60px
			}

			.facilities .text-decor-cover {
				width: 100%;
				height: auto;
				right: auto;
				bottom: auto;
				top: 0;
				left: 0;
				display: none;
				opacity: 1
			}

			.floor-01 .text-decor-cover {
				display: block
			}

			.floor-01 .text-decor {
				position: absolute;
				width: 70vw;
				height: calc(300/700*70vw);
				right: 15vw;
				top: 5vw;
				bottom: auto;
				transform: none
			}

			.facilities .content-main {
				padding: 10vw 0 0
			}

			.floor-01 .content-main {
				padding: 20vw 0 0
			}

			.facilities .title-main {
				padding: 5%;
				z-index: 5
			}

			.facilities .title-main h2 strong {
				font-size: var(--titleFontBig)
			}

			.facilities .content-center {
				position: relative;
				left: auto;
				bottom: auto;
				padding: 20px
			}

			.facilities-map {
				position: relative;
				width: 100%;
				height: auto;
				top: auto;
				left: auto
			}

			.compass-2 {
				left: auto;
				right: 5%;
				top: 5%;
				width: 60px;
				height: 60px
			}

			.floor-01 .info-box {
				top: 60px
			}

			.dot-num {
				transform: scale(1.2) !important
			}

			.dot-num.current {
				transform: scale(1.4) !important
			}

			.floor-01 .content-center {
				width: 100%;
				height: auto;
				left: auto;
				right: auto;
				top: auto;
				background: var(--color-normal-brown)
			}

			.floor-03 .content-center {
				background: var(--color-normal-light-2)
			}

			.floor-20 .content-center {
				background: var(--color-normal-brown)
			}

			.floor-40 .content-center {
				background: var(--color-highlight-dark)
			}

			.floor-01 .info-facilities,
			.info-facilities {
				display: block;
				white-space: nowrap;
				text-align: center;
				padding: 0
			}

			.floor-01 .facilities-bg {
				margin-left: 0
			}

			.floor-03 .facilities-bg,
			.floor-20 .facilities-bg,
			.floor-40 .facilities-bg {
				margin-top: 0
			}

			.floor-40 .content-center {
				padding: 20px;
				border-bottom: 1px solid var(--color-white-alpha-05)
			}

			.floor-01 .facilities-bg::before,
			.floor-20 .facilities-bg::before {
				height: 100px;
				background: linear-gradient(0deg, var(--color-normal-brown-dark) 0, var(--color-black-zero) 100%)
			}

			.floor-03 .facilities-bg::before,
			.floor-40 .facilities-bg::before {
				height: 100px;
				background: linear-gradient(0deg, var(--color-highlight-dark)0%, var(--color-normal-zero) 100%)
			}

			.faci-list {
				margin: 0;
				padding: 0 10px;
				text-align: left;
				display: inline-block;
				vertical-align: top
			}

			.hover-li {
				margin: 3px 0
			}

			.hover-li.current::before {
				box-shadow: none
			}

			.show-box-pic {
				width: 210px
			}

			.show-box-pic.no-pic {
				max-width: 250px;
				padding: 5px 10px
			}

			.show-box-pic .pic-img {
				width: 200px;
				height: 100px
			}

			.faci-text h3,
			.show-box-pic.no-pic .faci-text h3 {
				font-size: 12px;
				margin: 0
			}

			.show-box-pic.no-pic::after,
			.show-box-pic::after {
				display: none
			}

			.show-box-pic::before {
				right: 10px;
				top: 10px;
				width: 24px;
				height: 24px
			}

			.sub-mobile {
				position: fixed;
				width: auto;
				height: auto;
				left: 0;
				top: 100px;
				transform: translateX(-100%);
				opacity: 0;
				transition: transform .3s ease-in-out;
				display: block;
				z-index: 100
			}

			.slidebar,
			.sub-mobile ul {
				background: var(--color-normal-dark)
			}

			.slidebar {
				position: absolute;
				left: 100%;
				top: 0;
				padding: 5px;
				cursor: pointer;
				border-radius: 0 5px 5px 0;
				z-index: 10;
				width: 40px;
				height: 40px
			}

			.slidebar::after {
				content: '';
				width: 100%;
				height: 100%
			}

			.sub-mobile ul {
				width: auto;
				height: auto;
				list-style: none;
				margin: 0
			}

			.sub-mobile li {
				width: 100%;
				height: auto;
				margin: 0 0 1px
			}

			.click-nav,
			.click-nav span,
			.slidebar::after,
			.sub-mobile li,
			.sub-mobile ul {
				position: relative;
				display: block
			}

			.click-nav {
				width: 100%;
				height: auto;
				padding: 12px 20px;
				text-align: left
			}

			.click-nav span {
				font-size: 10px;
				font-weight: 700;
				text-transform: uppercase;
				color: var(--color-white);
				text-shadow: 0 1px 1px var(--color-black-alpha-02)
			}

			.click-nav.current {
				background: var(--color-highlight)
			}

			.sub-mobile.active {
				transform: none
			}

			.sub-mobile.active ul {
				box-shadow: 0 15px 20px 0 var(--color-black-alpha-02)
			}

			.sub-mobile.show {
				animation-name: fadeIn;
				animation-duration: 2s;
				animation-fill-mode: forwards
			}

			.apartment .text-decor-cover,
			.house-text::after {
				display: none
			}

			.masterplan .text-decor-cover {
				width: 100%;
				height: auto;
				right: auto;
				bottom: auto;
				top: 0;
				left: 0;
				opacity: 1
			}

			.masterplan .text-decor {
				position: absolute;
				width: 70vw;
				height: calc(300/700*70vw);
				right: 15vw;
				top: 5vw;
				bottom: auto;
				transform: none
			}

			.apartment .content-main,
			.masterplan .content-main {
				padding: 10vw 0 0
			}

			.apartment .title-main,
			.masterplan .title-main {
				position: relative;
				padding: 0 5%;
				bottom: auto;
				left: auto;
				top: auto;
				right: auto
			}

			.apartment .title-main h2,
			.apartment .title-main h2 strong,
			.facilities .title-main h2,
			.floor-block h2 {
				font-size: var(--titleFont)
			}

			.apartment .compass-2,
			.masterplan .compass-2 {
				top: 20vw
			}

			.masterplan {
				padding-top: 60px
			}

			.text-faci div {
				font-size: 1.8rem
			}

			.text-faci div::before {
				height: 140px;
				width: 2px;
				top: 40px
			}

			.text-faci div::after {
				width: 14px;
				height: 14px;
				left: calc(50% - 6px)
			}

			.block-top {
				top: 10%
			}

			.block-bottom {
				top: 62%
			}

			.block-04 {
				left: 75%;
				top: 70%
			}

			.block-01,
			.block-02,
			.block-03,
			.block-04,
			.block-bottom,
			.block-top {
				padding: 1rem
			}

			.text-faci .block-bottom::before,
			.text-faci .block-top::before {
				height: 200px
			}

			.text-faci .block-top::after {
				top: 220px
			}

			.text-faci .block-bottom::after,
			.text-faci .block-bottom::before {
				top: -200px
			}

			.text-faci .block-01::after,
			.text-faci .block-02::after {
				top: 180px
			}

			.text-faci .block-03::after,
			.text-faci .block-03::before,
			.text-faci .block-04::after,
			.text-faci .block-04::before {
				top: -120px
			}

			.info-house,
			.list-info {
				display: flex;
				flex-wrap: wrap;
				justify-content: center
			}

			.info-house {
				position: relative;
				left: auto;
				top: auto;
				margin: auto
			}

			.list-info {
				padding: 15px 0;
				background-color: var(--color-black-alpha-02)
			}

			.block-name {
				display: block;
				font-size: var(--titleFont)
			}

			.house-text {
				position: relative;
				width: 46%;
				max-width: 190px;
				box-shadow: none;
				opacity: 1;
				transform: scale(1);
				transition: none;
				display: block;
				margin: 0 4px 10px;
				left: auto !important;
				top: auto !important;
				pointer-events: auto;
				vertical-align: top;
				cursor: pointer
			}

			.area-des {
				padding: 0
			}

			.num-block {
				font-size: 14px
			}

			.area-des h3 {
				font-size: 13px
			}

			.area-des p,
			.go-link {
				font-size: 11px
			}

			.area-des {
				text-align: center
			}

			.load-apartment {
				overflow-x: hidden;
				overflow-y: auto;
				z-index: 2000
			}

			.bg-house {
				height: 100%;
				width: 100%;
				left: 0;
				top: 0;
				bottom: auto;
				position: fixed
			}

			.bg-house .pattern {
				display: none
			}

			.house-detail {
				height: auto
			}

			.content-apartment {
				padding: 70px 0
			}

			.house-load::after {
				content: '';
				position: fixed;
				width: 100%;
				height: 70px;
				left: 0;
				top: 0;
				background: var(--color-highlight-08);
				-webkit-backdrop-filter: blur(5px);
				backdrop-filter: blur(5px);
				opacity: 0;
				z-index: 30
			}

			.house-load.show::after {
				animation-name: fadeIn;
				animation-duration: 1s;
				animation-delay: 0s;
				animation-fill-mode: forwards
			}

			.content-apartment::after,
			.content-apartment::before {
				display: none
			}

			.apartment-pic {
				width: 100%;
				height: 100%;
				max-width: inherit;
				max-height: inherit;
				display: block;
				margin: 0;
				z-index: 10
			}

			.scale-pic {
				height: auto;
				display: block
			}

			.scale-pic>img {
				width: 96%;
				max-width: 900px;
				max-height: 700px;
				object-fit: contain;
				object-position: top center;
				margin: auto;
				display: block
			}

			.content-house-left {
				width: 100%;
				max-width: inherit;
				margin: 0;
				transform: none;
				text-align: center;
				padding: 10px 5vw
			}

			.content-house-left,
			.floor-block {
				position: relative;
				left: auto;
				top: auto
			}

			.floor-block i {
				margin: 0 10px
			}

			.title-block {
				font-size: 1.5rem;
				color: var(--color-white)
			}

			.block-code h3 {
				font-size: 1.2rem
			}

			.apartment-des {
				margin: 0 0 30px
			}

			.keyplan {
				position: relative;
				height: auto;
				display: block;
				width: 90%;
				max-width: 320px;
				margin: 50px auto;
				right: auto;
				top: auto;
				left: auto;
				bottom: auto
			}

			.keyplan-svg {
				margin: 0
			}

			.title-key {
				font-size: 11px
			}

			.house-detail .share {
				position: relative;
				left: auto;
				bottom: auto;
				margin: 20px auto;
				text-align: center;
				display: block
			}

			.house-detail .share a,
			.house-detail .share button,
			.house-detail .share span {
				display: block;
				margin: 5px auto
			}

			.nav-house li {
				font-size: 10px;
				margin: 0 3px 3px 0
			}

			.slide-pic-nav {
				width: 120px;
				right: auto;
				left: 10px;
				margin: 0;
				top: 10px
			}

			.next-pic,
			.prev-pic {
				width: 50px;
				height: 50px
			}

			.next-pic::before,
			.prev-pic::before {
				opacity: 1;
				box-shadow: 0 10px 15px 0 var(--color-black-alpha-01)
			}

			.des-house {
				position: relative;
				width: 90%;
				max-width: 600px;
				bottom: auto;
				left: auto;
				transform: none;
				padding: 0;
				margin: 50px auto 0
			}

			.des-house p {
				font-size: 9px
			}

			.picture-library {
				background-color: var(--color-normal-dark)
			}

			.video-library {
				background-color: var(--color-normal-brown)
			}

			.colum-box-news::after,
			.colum-box-news::before,
			.head-text::before,
			.news-content::after,
			.news-content::before,
			.news-list::after,
			.news::after,
			.video-library .slide-inner {
				display: none
			}

			.brochure-library {
				background: var(--color-bg-circle-1)
			}

			.brochure-library .content-main,
			.picture-library .content-main,
			.video-library .content-main {
				text-align: center;
				padding: 5vw 0 10vw
			}

			.brochure-library .content-center,
			.picture-library .content-center,
			.video-library .content-center {
				width: 100%;
				padding: 30px 5%
			}

			.brochure-library .text-decor,
			.picture-library .text-decor,
			.video-library .text-decor {
				position: relative;
				width: 70vw;
				height: calc(300/700*70vw);
				left: auto;
				bottom: auto;
				top: auto;
				right: auto;
				margin: 30px auto 0;
				display: none
			}

			.brochure-library .slide-inner,
			.picture-library .slide-inner,
			.video-library .slide-inner {
				background-color: transparent
			}

			.picture-library .bg-inner,
			.video-library .bg-inner {
				mix-blend-mode: inherit
			}

			.library:nth-child(1) .text-decor {
				display: block
			}

			.library:nth-child(1) .title-main {
				margin: calc(-300/700*35vw) 0 0
			}

			.library:nth-child(1) .content-center {
				padding: 0 5% 30px
			}

			.library-box {
				height: auto;
				position: relative;
				left: auto;
				top: auto;
				display: block
			}

			.library-box .slidebox-list {
				display: block;
				width: 100%
			}

			.slide-library {
				width: 90%;
				max-width: 700px;
				margin: auto
			}

			.item-album,
			.item-album.slidebox-item {
				pointer-events: auto;
				transition: none;
				margin: 0 0 30px
			}

			.item-pdf {
				pointer-events: auto;
				transition: none
			}

			.item-pdf.slidebox-item,
			.item-video,
			.item-video.slidebox-item {
				pointer-events: auto;
				transition: none;
				margin: 0 0 30px
			}

			.item-pdf {
				margin: 0 0 80px
			}

			.library-box .pic-img img {
				position: relative;
				height: auto
			}

			.pic-library {
				width: 100%;
				height: auto
			}

			.pic-library .pic-img {
				box-shadow: 0 20px 30px 0 var(--color-black-alpha-03)
			}

			.title-pic {
				position: relative;
				left: auto;
				bottom: auto;
				padding: 10px 20px
			}

			.title-pic h3 {
				padding: 0 0 0 60px
			}

			.over-but {
				position: absolute;
				left: 10px;
				bottom: 70px
			}

			.library-box-pdf .slide-library {
				width: 80vw;
				max-width: 400px;
				margin: auto
			}

			.item-pdf .pic-library {
				height: calc(1022/800*400px);
				max-width: inherit;
				max-height: inherit
			}

			.item-pdf .over-but {
				bottom: 40px;
				left: calc(50% - 40px)
			}

			.item-pdf .pic-img {
				position: absolute;
				left: 0;
				top: 0
			}

			.item-pdf .pic-img.clone2 {
				transform: scale(.9) rotate(10deg) translateY(0);
				left: -20px;
				top: 20px;
				opacity: .5
			}

			.item-pdf .pic-img.clone1 {
				transform: scale(.8) rotate(-15deg) translateY(0);
				top: -50px;
				left: 10px;
				opacity: .5
			}

			.news {
				background: var(--color-normal-dark)
			}

			.news .bg-cover {
				background-position: left top;
				margin: 60px 0 0
			}

			.news .slide-inner .title-main {
				position: relative;
				width: 100%;
				writing-mode: inherit;
				top: auto;
				right: auto;
				transform: none;
				margin: calc(-300/700*35vw) 0 5vw
			}

			.news .slide-inner .title-main h2 {
				writing-mode: inherit
			}

			.news .text-decor {
				position: relative;
				width: 70vw;
				height: calc(300/700*70vw);
				transform: none;
				right: auto;
				bottom: auto;
				margin: auto
			}

			.news-list,
			.news-list .scrollB {
				width: 100%;
				height: auto;
				position: relative;
				left: auto;
				top: auto;
				display: block
			}

			.news-list {
				padding: 5vw 0;
				text-align: center;
				max-width: inherit;
				background: var(--color-light)
			}

			.grid {
				width: 90%;
				max-width: 900px;
				padding: 0;
				margin: auto
			}

			.outer {
				grid-template-columns: repeat(2, 1fr);
				grid-gap: 30px
			}

			.pic-thumb .pic-img {
				height: calc(1125/2000*35vw);
				max-height: 160px
			}

			.link-page {
				background-color: var(--color-normal-dark)
			}

			.head-text,
			.link-page,
			.link-page .date-thumb {
				padding: 10px
			}

			.head-text h3 {
				font-size: .9rem;
				-webkit-line-clamp: 3;
				padding: 0
			}

			.new-icon {
				top: 10px;
				right: 10px
			}

			.news-list.hide .scrollB {
				border: 0;
				transition: none;
				text-align: left
			}

			.link-page:nth-child(1) {
				grid-column: 1/3;
				grid-row: 1
			}

			.link-page:nth-child(1) .head-text,
			.link-page:nth-child(1) .pic-thumb {
				width: 50%
			}

			.link-page:nth-child(1) .head-text h3 {
				font-size: 1.2rem;
				-webkit-line-clamp: 5
			}

			.link-page:nth-child(1) .pic-thumb .pic-img {
				height: calc(1125/2000*60vw);
				max-height: 300px
			}

			.colum-box-news {
				position: relative;
				left: auto;
				top: auto;
				bottom: auto;
				width: 100%;
				height: auto;
				padding: 0;
				text-align: center;
				overflow: visible
			}

			.colum-box-news .scrollC {
				width: 100%
			}

			.colum-box-news .news-content {
				margin: auto
			}

			.colum-box-news.show {
				display: block
			}

			.news-content {
				margin: 0;
				width: 100%;
				height: auto;
				min-height: 90vh;
				display: block;
				padding: 0 5% 5%
			}

			.news-content.show,
			.news-text {
				min-height: inherit
			}

			.news-text {
				width: 100%;
				padding: 0
			}

			.news-text .date-thumb,
			.title-news {
				background-color: var(--color-normal-brown)
			}

			.news-text .date-thumb {
				position: absolute;
				left: 20px;
				top: -10px;
				margin: 0;
				z-index: 2
			}

			.title-news {
				padding: 20px 20px 0;
				overflow: visible
			}

			.title-news h2 {
				margin: 0 0 10px;
				padding: 0;
				font-size: 1.8rem
			}

			.figure-img,
			.news-text iframe {
				padding: 10px 0
			}

			.title-news .share {
				position: relative;
				right: auto;
				bottom: auto;
				padding: 0;
				left: calc(100% - 120px);
				top: 10px;
				width: 120px;
				background-color: var(--color-normal-brown)
			}

			.title-news::after {
				position: absolute;
				left: 20px;
				top: calc(100% - 20px);
				margin: 0
			}

			.news-content.show .scrollC {
				border: 0;
				transition: none;
				text-align: left
			}

			.news-list.hide .wrap-view-more {
				text-align: center;
				margin: 30px 0
			}

			.news-list.hide {
				opacity: 0;
				height: 0;
				top: auto;
				overflow: hidden;
				pointer-events: auto;
				transition: none;
				z-index: 5
			}

			.news-list.hide .scrollB .title-main {
				padding: 20px;
				text-align: center
			}

			.news-list.hide .title-main h2 {
				font-size: var(--titleFontBig)
			}

			.news-list.hide.show-list {
				opacity: 1;
				height: auto;
				width: 100%;
				max-width: inherit
			}

			.news-list.hide .link-page {
				padding: 5px;
				width: 100%;
				margin: 0 0 20px;
				background-color: var(--color-normal-dark)
			}

			.news-list.hide .head-text {
				width: 50%;
				padding: 0 10px
			}

			.news-list.hide .head-text h3 {
				font-size: 1rem;
				-webkit-line-clamp: 4
			}

			.news-list.hide .pic-thumb {
				width: 50%;
				height: 140px
			}

			.news-list.hide .link-page:first-child .pic-img,
			.news-list.hide .pic-thumb .pic-img {
				height: 100%
			}

			.outer.hide {
				opacity: 1
			}

			.news-list.hide {
				background-color: var(--color-normal-brown);
				padding: 0 0 30px
			}

			.news-list.hide .grid {
				width: 90%;
				max-width: 550px;
				padding: 0;
				margin: auto
			}

			.news-list.hide .link-page:nth-child(1) .box-news {
				display: flex
			}

			.news-list.hide .link-page:nth-child(1) {
				padding: 5px;
				margin: 0 0 20px;
				background-color: var(--color-normal-dark)
			}

			.news-list.hide .link-page:nth-child(1) .pic-thumb {
				width: 50%;
				height: 140px
			}

			.news-list.hide .link-page:nth-child(1) .pic-thumb .pic-img {
				height: 100%
			}

			.news-list.hide .link-page:nth-child(1) .head-text {
				width: 50%;
				padding: 0 10px
			}

			.news-list.hide .link-page:nth-child(1) .head-text h3 {
				font-size: 1rem;
				-webkit-line-clamp: 4;
				margin: 0
			}

			#progress-page .bg-cover {
				margin: 60px 0 0
			}

			#progress-page .title-page {
				display: block
			}

			.progress .slide-inner .title-main,
			.register-popup>span,
			.register.hide-subscribe .close {
				display: none
			}

			.progress .slide-inner {
				overflow: visible
			}

			.progress .text-decor {
				position: relative;
				width: 70vw;
				height: calc(300/700*70vw);
				transform: none;
				right: auto;
				bottom: auto;
				margin: auto
			}

			.progress .text-decor-cover {
				opacity: .1
			}

			.progress-list .wrap-page {
				width: 90%;
				margin: auto;
				max-width: inherit;
				grid-template-columns: auto auto
			}

			.progress-list {
				position: relative;
				display: block;
				top: auto;
				left: auto;
				width: 100%;
				height: auto;
				padding: 20px 0 0;
				margin: 0;
				min-height: 100vh;
				z-index: auto
			}

			.progress-list.show {
				min-height: inherit
			}

			.box-progress {
				box-shadow: 0 10px 20px 0 var(--color-black-alpha-02)
			}

			.box-progress:last-child {
				margin: 0 0 50px
			}

			.pic-progress {
				max-height: inherit;
				height: calc(500/800*45vw)
			}

			.wrap-select {
				position: relative;
				width: 100%;
				margin: calc(-300/700*35vw) 0 5vw;
				top: auto;
				right: auto;
				left: auto;
				display: block;
				transform: none
			}

			.select-list {
				margin: 20px auto
			}

			.register {
				background-color: var(--color-normal);
				overflow-x: hidden;
				overflow-y: auto
			}

			.register .close {
				right: 15px;
				top: 15px;
				width: 44px;
				height: 44px
			}

			.register-form>.title-main h2 {
				font-size: 36px
			}

			.require-col {
				display: block;
				margin: 0
			}

			.grid-col,
			.register-popup {
				width: 100%;
				max-width: inherit
			}

			.overlay-form {
				background-position: 0 0;
				background-size: contain;
				pointer-events: none
			}

			.register-form {
				position: relative;
				width: 100%;
				max-width: 600px;
				height: auto;
				display: block;
				right: auto;
				top: auto;
				background-color: var(--color-normal-alpha-08);
				padding: 20px;
				-webkit-backdrop-filter: blur(5px);
				backdrop-filter: blur(5px);
				text-align: center;
				margin: calc(1125/2000*100vw) auto 0
			}

			.input-area .holder,
			.input-area .label,
			.input-area textarea,
			.input-text .holder,
			.input-text .label,
			.input-text input[type=text] {
				font-size: 1rem
			}

			.logo-register {
				position: absolute;
				top: 3vh;
				opacity: 0;
				width: 40vw;
				height: calc(280/500*40vw);
				right: 18vw
			}

			.logo-register::after,
			.logo-register::before {
				content: "";
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0
			}

			.register.hide-subscribe {
				position: relative;
				background-color: var(--color-normal);
				width: 100%;
				left: auto;
				top: auto;
				height: auto;
				overflow: hidden;
				z-index: auto
			}

			.register.hide-subscribe .overlay-form {
				position: relative;
				left: auto;
				top: auto;
				height: calc(1400/2000*100vw);
				clip-path: inherit;
				background-position: center center
			}

			.register.hide-subscribe .logo-register {
				display: none
			}

			.register.hide-subscribe .register-popup {
				position: relative;
				left: auto;
				top: auto;
				right: auto;
				width: 100%;
				height: auto;
				margin: auto;
				opacity: 1;
				transform: none;
				pointer-events: auto;
				display: block;
				padding: 20px;
				z-index: 1
			}

			.register.hide-subscribe .register-form {
				margin: -100px auto 0
			}

			.register.hide-subscribe .require-col {
				display: block
			}

			.register.hide-subscribe .grid-col {
				width: 100%
			}

			.register.hide-subscribe .char {
				opacity: 1
			}

			.input-but {
				text-align: center
			}

			.register-form .input-but {
				justify-content: center;
				margin: 30px 0
			}
		}

		@media only screen and (max-width:1100px) and (orientation:portrait) {
			.wheel.center-align {
				bottom: 40px
			}

			.load-svg {
				transform: translate(-50%, -50%) scale(.9)
			}

			.logo-menu {
				top: 80px
			}

			.overlay-menu .bgcanvas {
				transform: translate(-50%, -10%);
				top: 0
			}

			.bgcanvas {
				width: 120vw;
				height: calc(1125/2000*150vw);
				transform: translate(-50%, -50%)
			}

			.logo-center {
				transform: translate(-50%, -50%) scale(.9)
			}

			.tagline {
				bottom: 22vh
			}

			.tagline .text-svg {
				width: 60vw
			}

			.home-overview .content-main {
				top: 0
			}

			.about-overview .logo-banner,
			.logo-banner {
				width: 50vw;
				height: calc(280/500*50vw);
				right: 8vw;
				top: 10px
			}

			.dot-num {
				transform: scale(1.4) !important
			}

			.dot-num.current {
				transform: scale(1.6) !important
			}

			.dot-num.current span {
				font-size: 22px
			}

			.scroll-popup .news-text {
				padding: 20px
			}
		}

		@media only screen and (max-width:1100px) and (orientation:landscape) {
			.wheel.center-align {
				bottom: 20px
			}

			.load-svg {
				transform: translate(-50%, -65%) scale(.7)
			}

			.logo-menu {
				top: calc(50% - (280/500*60vw)/2)
			}

			.overlay-menu .bgcanvas {
				transform: translate(-50%, -40%);
				top: 50%
			}

			.bgcanvas {
				width: 120vw;
				height: calc(1125/2000*120vw);
				transform: translate(-50%, -40%)
			}

			.logo-center {
				transform: translate(-50%, -65%) scale(.7)
			}

			.tagline {
				bottom: 14vh
			}

			.tagline .text-svg {
				width: 50vw
			}

			.home-overview .content-main {
				top: 5vh
			}

			.about-overview .logo-banner,
			.logo-banner {
				width: 46vw;
				height: calc(280/500*46vw);
				right: 10vw;
				top: 0
			}
		}

		@media screen and (max-width:780px) {

			body,
			html {
				font-size: 17px
			}

			:root {
				--titleFontBig: 7vw;
				--titleFont: 5vw;
				--titleFontSmall: 4vw
			}

			.logo,
			.logo.scale-logo,
			.logo.space,
			.logo.transparent {
				width: 150px;
				height: calc(280/500*150px)
			}

			.right-header,
			.right-header.hide,
			.right-header.normal {
				width: 100%;
				top: auto;
				bottom: 0;
				right: 0;
				height: auto;
				padding: 10px 0 20px;
				transition: all .3s ease-out;
				background: var(--bg-gradient-footer);
				-webkit-backdrop-filter: blur(10px);
				backdrop-filter: blur(10px)
			}

			.right-header.bottom-up {
				padding: 10px 0 40px
			}

			.is-iOS .right-header,
			.is-iOS .right-header.hide,
			.is-iOS .right-header.normal {
				padding: 20px 0
			}

			.is-iOS .right-header.bottom-up {
				padding: 20px 0 40px
			}

			.footer,
			.footer.align-left {
				padding: 30px 0 110px;
				background-color: var(--color-highlight-dark)
			}

			.is-iOS .footer,
			.is-iOS .footer.align-left {
				padding: 20px 0 120px
			}

			.progress-list .wrap-page {
				grid-template-columns: auto
			}

			.pic-progress {
				height: calc(500/800*70vw)
			}
		}

		@media screen and (max-width:580px) {

			body,
			html {
				font-size: 16px
			}

			:root {
				--titleFontBig: 8vw;
				--titleFont: 6vw;
				--titleFontSmall: 5vw
			}

			.close,
			.close-album,
			.close-apartment,
			.close-popup,
			.close-video,
			.next-pic,
			.prev-pic,
			.register .close {
				width: 40px;
				height: 40px
			}

			.slide-pic-nav {
				width: 100px
			}

			.register .close {
				right: 10px;
				top: 10px
			}

			.nav {
				top: 150px;
				height: calc(100vh - 150px)
			}

			.logo-menu {
				top: 30px
			}

			.compass-2 {
				width: 50px;
				height: 50px;
				right: 5px
			}

			.dot-num {
				transform: scale(1.6) !important
			}

			.dot-num.current {
				transform: scale(1.8) !important
			}

			.floor-01 .info-box {
				top: 80px
			}

			.masterplan .title-main {
				top: -5px
			}

			.apartment .title-main h2 {
				font-size: 18px
			}

			.apartment .title-main h2 strong {
				font-size: var(--titleFont)
			}

			.text-faci div::before {
				width: 3px
			}

			.house-load::after {
				height: 60px
			}

			.block-name {
				font-size: 1.5rem
			}

			.show-box-pic {
				width: 150px
			}

			.show-box-pic .pic-img {
				width: 140px;
				height: 60px
			}

			.faci-text h3 {
				font-size: 8px
			}

			.show-box-pic.no-pic {
				max-width: 240px
			}

			.show-box-pic.no-pic .faci-text h3 {
				font-size: 9px
			}

			.home-news .wrap-view-more {
				margin: 50px 0 20px
			}

			.wrap-news {
				display: block
			}

			.item-news-home {
				margin: 0 0 40px
			}

			.box-news {
				display: flex;
				justify-content: flex-start;
				align-items: center
			}

			.pic-news-home {
				width: calc(50% - 15px);
				height: calc(1125/2000*80vw);
				max-height: 160px
			}

			.txt-news-home {
				width: 50%;
				margin: 0;
				padding: 0 0 0 15px;
				flex-wrap: wrap;
				align-items: flex-start
			}

			.txt-news-home h3 {
				font-size: .9rem;
				padding: 0
			}

			.item-news-home:nth-child(1) .pic-news-home {
				height: calc(1125/2000*80vw);
				max-height: 160px
			}

			.item-news-home:nth-child(1) .txt-news-home {
				padding: 0 0 0 15px
			}

			.item-news-home:nth-child(1) .txt-news-home h3 {
				font-size: .9rem
			}

			.item-news-home:nth-child(2) .pic-news-home {
				order: 2
			}

			.item-news-home:nth-child(2) .txt-news-home {
				justify-content: flex-end;
				padding: 0 15px 0 0;
				text-align: right
			}

			.item-news-home:nth-child(2),
			.item-news-home:nth-child(3) {
				width: 100%
			}

			.grid {
				width: 100%
			}

			.outer {
				grid-template-columns: auto;
				grid-gap: 20px
			}

			.title-news h2 {
				font-size: 1.3rem
			}

			.new-icon {
				top: 5px;
				left: 5px
			}

			.pic-thumb .pic-img {
				height: calc(1125/2000*60vw)
			}

			.link-page {
				margin: auto;
				width: 90vw;
				max-width: inherit
			}

			.head-text h3 {
				font-size: 13px;
				-webkit-line-clamp: 4
			}

			.link-page:nth-child(1) {
				grid-column: 1;
				width: 90vw;
				margin: auto
			}

			.link-page:nth-child(1) .box-news {
				display: block
			}

			.link-page:nth-child(1) .pic-thumb {
				width: 100%;
				height: 170px
			}

			.link-page:nth-child(1) .pic-thumb .pic-img {
				height: 100%
			}

			.link-page:nth-child(1) .head-text {
				width: 100%;
				padding: 0 10px
			}

			.link-page:nth-child(1) .head-text h3 {
				font-size: 1rem
			}

			.link-page:nth-child(1) .date-thumb {
				margin: 10px 0
			}

			.news-list.hide .grid {
				width: 100%
			}

			.news-list.hide .link-page,
			.news-list.hide .link-page:nth-child(1) {
				margin: 0 auto 20px;
				width: 90vw
			}

			.news-list.hide .link-page:nth-child(1) .pic-thumb,
			.news-list.hide .pic-thumb {
				width: 40%;
				height: 120px
			}

			.news-list.hide .head-text,
			.news-list.hide .link-page:nth-child(1) .head-text {
				width: 60%
			}

			.news-list.hide .head-text h3 {
				font-size: 13px
			}

			.news-list.hide .link-page:nth-child(1) .head-text h3 {
				font-size: 13px
			}

			.picture-library .title-main h2,
			.video-library .title-main h2 {
				font-size: 3rem
			}

			.title-pic h3 {
				font-size: 1rem
			}

			.pic-progress {
				height: calc(500/800*90vw)
			}

			.home-contact .company-info {
				padding: 0 20px 100px
			}

			.item-logo {
				height: 60px
			}

			.logo-partner {
				height: 50px
			}

			.list-logo .item-logo {
				height: 45px;
				padding: 0 .5rem;
				margin: 0
			}

			.box-partner {
				width: calc(100%/2);
				padding: 0 .5rem
			}
		}

		@media screen and (max-width:440px) {
			:root {
				--titleFontBig: 9vw;
				--titleFont: 7vw;
				--titleFontSmall: 6vw
			}

			.logo,
			.logo.scale-logo,
			.logo.space,
			.logo.transparent {
				width: 130px;
				height: calc(280/500*130px)
			}

			.tagline .text-svg {
				width: 70vw
			}

			.center-align::after {
				font-size: 12px
			}

			.library-box-pdf .slide-library {
				max-width: inherit
			}

			.item-pdf .pic-library {
				width: 74vw;
				height: calc(1022/800*74vw)
			}

			.overlay-dark .bgcanvas {
				transform: translate3d(-50%, 0, 0)
			}

			.dot-num {
				transform: scale(1.6) !important
			}

			.dot-num.current {
				transform: scale(1.8) !important
			}

			.map-area {
				margin: -30px 0 30px
			}

			.floor-block h2 {
				display: block
			}

			.floor-block i {
				display: none
			}
		}

		@media screen and (max-width:380px) {
			body {
				font-size: 15px
			}

			.register-form>.title-main h2 {
				font-size: 30px
			}
		}

		@media screen and (max-width:340px) {
			.right-header span {
				font-size: 11px
			}
		}

		@media print {

			.bg-inner,
			.footer,
			.go-top,
			.header,
			.register,
			.slidebox-arrows,
			.slidebox-pagination,
			.title-page,
			.whell {
				display: none !important
			}

			.container,
			.load-content,
			.news-detail {
				opacity: 1;
				margin: auto;
				visibility: visible
			}
		}

		.splitting .char,
		.splitting .word {
			display: inline-block
		}

		.splitting .char {
			position: relative
		}

		.splitting .char::after,
		.splitting .char::before {
			content: attr(data-char);
			position: absolute;
			top: 0;
			left: 0;
			visibility: hidden;
			transition: inherit;
			user-select: none
		}

		.splitting {
			--word-center: calc((var(--word-total) - 1)/2);
			--char-center: calc((var(--char-total) - 1)/2);
			--line-center: calc((var(--line-total) - 1)/2)
		}

		.splitting .word {
			--word-percent: calc(var(--word-index)/var(--word-total));
			--line-percent: calc(var(--line-index)/var(--line-total))
		}

		.splitting .char {
			--char-percent: calc(var(--char-index)/var(--char-total));
			--char-offset: calc(var(--char-index) - var(--char-center));
			--distance: calc((var(--char-offset) * var(--char-offset))/var(--char-center));
			--distance-sine: calc(var(--char-offset)/var(--char-center));
			--distance-percent: calc((var(--distance)/var(--char-center)))
		}