@font-face {
  font-family: PorPiang;
  src: url('font/DB PorPiang/DB PorPiang SL v3.2.1.ttf');
}

@font-face {
  font-family: PorPiang;
  src: url('font/DB PorPiang/DB PorPiang SL Bd v3.2.1.ttf');
  font-weight: bold;
}

@font-face {
    font-family: 'Copperplate';
    src: url('../_template/fonts/Copperplate.ttc');
    font-display: swap;
}

@font-face {
    font-family: 'DB Helvethaica X Med';
    src: url('../_template/fonts/DB Helvethaica X Med Ext v3.2.ttf');
    font-display: swap;
}

html, body {
	overflow-x: hidden;
	font-family: PorPiang;
}

p {
	font-size: 28px;
}

.section-highlight .tab-content p, .section-highlight .tab-content ul {
	font-size: 28px;
}

.main-navbar {
	background-color: #f0c6ad;
	letter-spacing: 3px;
}

.main-navbar .navbar-brand img {
	width: 150px;
}

.main-navbar .navbar-nav .nav-link {
    color: #000;
    font-size: 28px;
}

.section-title {
	letter-spacing: 2px;
}

.section-ourstories {
	background-color: #f0c6ad;
}

.section-highlight {
	background-image: url('img/highlight/bg_pc.png');
	background-size: inherit;
	background-repeat: no-repeat;
    background-position: top;
}

.section-highlight table.table > tbody, .section-highlight .tab-content {
	background-color: #fff;
}

.section-highlight .nav-tabs .nav-link.active {
	color: #eaeaea;
	border-color: #615650;
	background-color: #615650;
}

.section-360 .nav-tabs .nav-link, .section-highlight .nav-tabs .nav-link {
	color: #615650;
	letter-spacing: 2px;
	background-color: #f0c6ad;
}

.section-exterior .owl-theme .owl-dots .owl-dot span, 
.section-construction .owl-theme .owl-dots .owl-dot span, 
.section-master-plan .owl-theme .owl-dots .owl-dot span,
.section-art-escape .owl-theme .owl-dots .owl-dot span {
	background: #b6aeab;
}

.section-interior {
	background-color: #f0c6ad;
}

.section-gallery {
	background-color: #c2b9b0;
}

.section-what-they-say {
	background-color: #f0c6ad;
}

/*.section-contact {
	background-color: #c2b9b0;
}*/

.section-register input, .section-register select {
    color: #6c757d;
    border-bottom: 2px solid #2d2d2d;
    border: none;
    background: none;
    border-radius: 0;
    border-bottom: 2px solid #2d2d2d;
}

.section-register input { padding-left: 4px;font-size: 28px; }
.section-register select { padding-left: 0px;font-size: 28px; }
.section-master-plan select { font-size: 28px;padding-top: 0;padding-bottom: 0;height: 45px;border-radius: 0; }

.owl-theme .owl-dots .owl-dot span {
    width: 23px;
    height: 4px;
    background: #fff;
    border-radius: 0px;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #000;
}

.owl-nav button {
	position: absolute;
	font-size: 30px !important;
	color: #fff !important;
}

.btn-info {
    font-size: 18px;
	background-color: #c95e28;
    border-color: #c95e28;
}

.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show>.btn-info.dropdown-toggle, .btn-info:hover, .btn-info.focus, .btn-info:focus {
    background-color: #c95e28;
    border-color: #c95e28;
}

.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, .show>.btn-info.dropdown-toggle:focus, .btn-info:focus  {
	box-shadow: none;
}

.nav-tabs .nav-link {
	color: #615650;
	background-color: #c2b9b0;
}

.nav-tabs .nav-link.active {
	color: #eaeaea;
	background-color: #615650;
	border-color: #615650;
}

.section-art-escape .cloud-01 {
   	right: -120px;
    top: -65px;
    width: 320px;
    z-index: 1;
}

.section-art-escape .cloud-02 {
    top: 50px;
    left: -122px;
    width: 240px;
    z-index: 1;
}

.section-ourstories .text-in-slide  {
	top: 50px;
	left: 295px;
}

.section-ourstories .owl-nav .owl-next {
    top: 225px;
    right: 75px;
}

.section-ourstories .owl-nav .owl-prev {
    top: 225px;
    left: 75px;
}

.owl-nav .owl-next i, .owl-nav .owl-prev i {
	font-size: 80px;
}

.section-video {
	background-color: #000;
}

.section-video .youtube-iframe {
    height: 550px;
}

.section-highlight .nav.nav-tabs .nav-item a {
	font-size: 26px;
}

.section-master-plan .nav.nav-tabs .nav-item a {
    font-size: 26px;
}

.section-360 .nav.nav-tabs .nav-item a {
    font-size: 26px;
}

.section-360 .icon-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.owl-nav button {
    top: calc(50% - 40px);
}

.owl-nav .owl-next {
	right: -75px;
}

.owl-nav .owl-prev {
	left: -75px;
}

.section-exterior .owl-nav .owl-next i, .section-exterior .owl-nav .owl-prev i, 
.section-construction .owl-nav .owl-next i, .section-construction .owl-nav .owl-prev i, 
.section-master-plan .owl-nav .owl-next i, .section-master-plan .owl-nav .owl-prev i,
.section-art-escape .owl-nav .owl-next i, .section-art-escape .owl-nav .owl-prev i {
	color: #c5c5c5;
}

.section-interior .object-brush {
    top: -90px;
    width: 480px;
    right: 0;
}

.section-gallery .image {
	width: 100%;
}

.section-register .section-title {
    color: #fff;
    z-index: 1;
    left: 0;
    right: 0;
    top: -40px;
}

.section-register .section-subtitle {
    color: #fff;
    z-index: 1;
    left: 0;
    right: 0;
    top: 15px;
}

.section-register .object-single-brush {
    top: -225px;
    width: 155%;
    left: -204px;
    z-index: 0;
}

.section-art-escape {
    padding-bottom: 180px;
}

.section-register .register-form, .section-register .promotion-img {
    padding-top: 160px;
}

.section-master-plan #unit img {
    max-height: 650px;
}

#modalRegister button.close {
    top: -15px;
    right: -15px;
    width: 35px;
    height: 35px;
    color: #fff;
    opacity: 1;
    font-size: 35px;
    text-shadow: none;
    border-radius: 50px;
    background-color: #c95e28;
}

#modalRegister input, #modalRegister select {
    font-size: 22px;
}

#modalRegister select {
    padding-left: 8px;
}

.graphic-map {
    max-width: 500px;
}

.section-360 iframe {
    height: 600px;
}

.btn-360-float {
    top: 50%;
    right: 10px;
    z-index: 99;
}

.btn-360-float img {
    width: 60px;
    height: 60px;
}

.btn-line-easyconnect {
    position: absolute;
    top: 70%;
    left: 69.5%;
    transform: translate(-50%, -50%);
}

.btn-line-easyconnect > img {
    width: 220px;
    box-shadow: 7px 7px 7px 0px #8a8a8ac7;
}