/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

@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;
	max-width:unset;padding:0px;
	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,
.tagline-en,.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)))
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}