/* CSS Document */

/*@import url("fonts.css");*/
@import url("fonts_singha.css");
@import url("https://fonts.googleapis.com/css?family=Prompt:100,200,300,400,500,600,700");

/* html5doctor.com/html-5-reset-stylesheet/ */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    /* font-size:100%; */
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.clearfix {
    *zoom: 1;
}
.clearfix:before,
.clearfix:after {
    display: table;
    line-height: 0;
    content: "";
}
.clearfix:after {
    clear: both;
}
body,
html {
    width: 100%;
    height: 100%;
}

/* -- CUSTOM CSS -- */
html,
body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

body {
    background-color: #fff;
}
body,
table,
tr,
td,
p {
    /*font-family: 'Conv_Gotham-Light';*/
    font-family: "Singhaestate", "Prompt", sans-serif;
    font-size: 14px;
    line-height: 24px;
    font-weight: normal;
    color: #fff;
    text-decoration: none;
}
img {
    border: 0px;
}
.img-responsive {
    display: block;
    height: auto;
    max-width: 100%;
}
.img-responsive-inline {
    display: inline-block;
    height: auto;
    max-width: 100%;
    width: 100%;
}
.img-responsive-height {
    display: block;
    width: auto;
    max-height: 100%;
}
.img-responsive-height-inline {
    display: inline-block;
    width: auto;
    max-height: 100%;
}

*.focus {
    outline: none;
}
.clear {
    clear: both;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
.overflow-hidden {
    overflow: hidden;
}

a,
a:hover,
a:focus {
    text-decoration: none;
}

.pageCenter {
    display: table;
    overflow: hidden;
    margin: 0px auto;
}
*:first-child + html .pageCenter {
    position: relative;
} /*ie7*/
* html .pageCenter {
    position: relative;
} /*ie6*/

.content_container {
    display: table-cell;
    vertical-align: middle;
}
*:first-child + html .content_container {
    position: absolute;
    top: 50%;
} /*ie7*/
* html .content_container {
    position: absolute;
    top: 50%;
} /*ie6*/

*:first-child + html .contentCenter {
    position: relative;
    top: -50%;
} /*ie7*/
* html .contentCenter {
    position: relative;
    top: -50%;
} /*ie6*/

.pageCenter {
    height: 100%;
    width: 100%;
}

/* h2{
font-family: 'gotham-book';
font-size: 40px;
color: #263a5b;
text-align: center;
} */

.pageFull {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.page {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.pageMobileAuto {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.pageAuto {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: auto;
}
.show-pc {
    display: block;
}
.show-mobi {
    display: none;
}
.show-pcTab {
    display: block;
}
.show-tab {
    display: none;
}
.visible-xs-inline {
    display: none;
}
.mCSB_container {
    height: 100%;
}
button {
    outline: none;
}
.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

@media (max-width: 1440px) {
    h2 {
        font-size: 32px;
    }
}

@media (max-width: 991px) {
    .show-pcTab {
        display: none;
    }
    .show-tab {
        display: block;
    }
    .pageMobileAuto {
        height: auto;
        overflow: auto;
    }
}
@media (max-width: 767px) {
    h2 {
        font-size: 26px;
    }
    .show-pc {
        display: none;
    }
    .show-mobi {
        display: block;
    }
    .visible-xs-inline {
        display: inline-block;
    }
    .mCSB_container {
        height: auto;
    }
}

@media (max-width: 425px) {
    h2 {
        font-size: 18px;
    }
}

.nopadding {
    margin: 0px;
    padding: 0px;
}
.scrolDisabled {
    overflow: hidden;
    position: fixed;
}

/*********** NAV ***********/
.siteTopArea {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1200;
}
.siteTopAreaLangOnly {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1200;
}
.bgCoverTopMenu {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 900;
    background-color: rgba(255, 255, 255, 0.9);
    height: 180px;
}
.divLogoOnTop {
    /*width: 200px;
  top: 50px;*/
    width: 160px; /*reduce 20% */
    top: 55px;
    position: absolute;
    left: 80px;
    z-index: 1200;
}
.divLogoOnTop.logoDefaultHide {
    display: none;
}
.divLogoOnTop .logoWhite {
    display: block;
}
.divLogoOnTop .logoBlue {
    display: none;
}
.divLogoOnTop.colorBlue .logoWhite,
.divLogoOnTop.openMenuColorBlue .logoWhite {
    display: none;
}
.divLogoOnTop.colorBlue .logoBlue,
.divLogoOnTop.openMenuColorBlue .logoBlue {
    display: block;
}
#nav-icon1 {
    width: 30px;
    height: 30px;
    position: relative;
    margin: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
    z-index: 101;
    display: inline-block;
    transform: translateY(25px);
}
#nav-icon1 span {
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    background: #fff;
    border-radius: 0px;
    opacity: 1;
    right: 0;
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
}
.sitepage-topmenu.colorBlue #nav-icon1 span,
.sitepage-topmenu.openMenuColorBlue #nav-icon1 span {
    background: #153050;
}
#nav-icon1 span:nth-child(1) {
    top: 0px;
    left: -10px;
}
#nav-icon1 span:nth-child(2) {
    top: 0px;
    transition-delay: 0.1s;
}
#nav-icon1 span:nth-child(3) {
    top: 0px;
    left: 10px;
    transition-delay: 0.2s;
}
.navIconArea:hover #nav-icon1 span {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.navIconArea:hover #nav-icon1 span:nth-child(1) {
    top: -10px;
    left: 0px;
}
.navIconArea:hover #nav-icon1 span:nth-child(2) {
    top: 0px;
    left: 0px;
}
.navIconArea:hover #nav-icon1 span:nth-child(3) {
    top: 10px;
    left: 0px;
}

.navIconArea.navOpenIcon #nav-icon1 span:nth-child(1),
.navIconArea.navOpenIcon:hover #nav-icon1 span:nth-child(1) {
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    transform: rotate(225deg);

    left: 0px;
    top: 0px;
}
.navIconArea.navOpenIcon #nav-icon1 span:nth-child(2),
.navIconArea.navOpenIcon:hover #nav-icon1 span:nth-child(2) {
    top: -10px;
    left: 0px;
    opacity: 0;
}
.navIconArea.navOpenIcon #nav-icon1 span:nth-child(3),
.navIconArea.navOpenIcon:hover #nav-icon1 span:nth-child(3) {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    left: 0px;
    top: 0px;
}

.navIconArea .navIconAreaTextOpen {
    display: block;
}
.navIconArea.navOpenIcon .navIconAreaTextOpen {
    display: none;
}
.navIconArea .navIconAreaTextClose {
    display: none;
}
.navIconArea.navOpenIcon .navIconAreaTextClose {
    display: block;
}

.divNav {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 0px;
    background-color: #f2ece0;
    z-index: 1100;
    overflow: hidden;
    transition: all 1s ease;
    opacity: 0;
    animation-name: closeBgMenu;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}
.divNav.navOpen {
    height: 100%;
    animation-name: showBgMenu;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    opacity: 0;
}
@keyframes showBgMenu {
    0% {
        opacity: 0;
        height: 0px;
    }
    100% {
        opacity: 1;
        height: 100%;
    }
}
@keyframes closeBgMenu {
    0% {
        opacity: 1;
        height: 100%;
    }
    100% {
        opacity: 0;
        height: 0px;
    }
}

.divNav.navDefault .nav-showmobile {
    width: 100%;
    height: 460px;
    position: absolute;
    z-index: 500;
    opacity: 0;
}
.divNav.navDefault.navOpen .nav-showmobile {
    opacity: 0;
    animation-name: showContentMenu;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
@keyframes showContentMenu {
    0% {
        opacity: 0;
    }
    35% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
.navMenuPcArea {
    width: 100%;
    padding: 160px 80px 40px;
    position: relative;
}
.navMenuDiv {
    display: block;
    float: left;
}
.navMenuDiv-1 {
    width: 19%; /* 320/1680 */
}
.navMenuDiv-2 {
    width: 28%; /* 480/1680 */
}
.navMenuDiv-3 {
    width: 22%; /* 400/1680 */
}
.navMenuDiv-4 {
    width: 18%; /* 320/1680 */
}
.navMenuDiv-5 {
    width: 12%; /* 160/1680 */
}
.navMenuArea {
    z-index: 500;
    height: 100vh;
    width: 46%;
    display: inline-block;
}
.navSubMenuArea {
    z-index: 500;
    height: 100vh;
    width: 53%;
    display: inline-block;
}
.divNav.navDefault ul.navMenu {
    width: 100%;
    margin-top: 0px;
    padding-left: 36%;
}
.divNav.navDefault ul.navMenu li {
    display: block;
    text-align: left;
    margin: 0;
    opacity: 0;
}
.divNav.navDefault.navOpen ul.navMenu > li {
    opacity: 0;
    transform: translateX(20px);
    animation-name: showContentMenuItem;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
.divNav.navDefault.navOpen ul.navMenu > li:nth-child(2) {
    animation-delay: 0.1s;
}
.divNav.navDefault.navOpen ul.navMenu > li:nth-child(3) {
    animation-delay: 0.2s;
}
.divNav.navDefault.navOpen ul.navMenu > li:nth-child(4) {
    animation-delay: 0.3s;
}
.divNav.navDefault.navOpen ul.navMenu > li:nth-child(5) {
    animation-delay: 0.4s;
}
.divNav.navDefault.navOpen ul.navMenu > li:nth-child(6) {
    animation-delay: 0.5s;
}
.divNav.navDefault.navOpen ul.navMenu > li:nth-child(7) {
    animation-delay: 0.6s;
}
.divNav.navDefault.navOpen ul.navMenu > li:nth-child(8) {
    animation-delay: 0.7s;
}
.divNav.navDefault.navOpen ul.navMenu > li:nth-child(9) {
    animation-delay: 0.8s;
}
.divNav.navDefault.navOpen ul.navMenu > li:nth-child(10) {
    animation-delay: 0.9s;
}
.divNav.navDefault.navOpen ul.navMenu > li:nth-child(11) {
    animation-delay: 1s;
}
.divNav.navDefault.navOpen ul.navMenu > li:nth-child(12) {
    animation-delay: 1.1s;
}
.divNav.navDefault.navOpen ul.navMenu > li:nth-child(13) {
    animation-delay: 1.2s;
}
.divNav.navDefault.navOpen ul.navMenu > li:nth-child(14) {
    animation-delay: 1.3s;
}
.divNav.navDefault.navOpen ul.navMenu > li:nth-child(15) {
    animation-delay: 1.4s;
}
@keyframes showContentMenuItem {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    35% {
        opacity: 0;
        transform: translateX(20px);
    }
    50% {
        opacity: 1;
        transform: translateX(0px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}
.divNav.navDefault ul.navMenu li a {
    display: block;
    position: relative;
    color: #153050;
    font-size: 23px;
    line-height: 26px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
}
.divNav.navDefault ul.navMenu li a:before {
    content: "";
    position: absolute;
    width: 0px;
    height: 2px;
    background-color: #c5a254;
    left: 0;
    top: 22px;
    transition: all 0.3s ease-in-out;
}
.divNav.navDefault ul.navMenu li.menuHover a,
.divNav.navDefault ul.navMenu li.actived a {
    color: #c5a254;
    padding-left: 35px;
}
.divNav.navDefault ul.navMenu li.menuHover a:before,
.divNav.navDefault ul.navMenu li.actived a:before {
    color: #c5a254;
    width: 25px;
}

.divNav.navDefault ul.navMenuSub {
    opacity: 1;
    margin-top: 15px;
    list-style-position: outside;
    margin-left: 10px;
}
.divNav.navDefault ul.navMenuSub li {
    width: 100%;
    margin-top: 0px;
    opacity: 1;
    position: relative;
}
.divNav.navDefault ul.navMenuSub li::before {
    content: "-";
    position: absolute;
    top: 6px;
    left: -10px;
    font-size: 12px;
    line-height: 12px;
}
.divNav.navDefault ul.navMenuSub li a {
    display: block;
    position: relative;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    padding-top: 7px;
    padding-bottom: 7px;
    text-transform: uppercase;
}
.divNav.navDefault.navOpen ul.navMenuSub > li {
    opacity: 0;
    animation-name: showContentMenuItem;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
.divNav.navDefault.navOpen ul.navMenuSub > li:nth-child(2) {
    animation-delay: 0.1s;
}
.divNav.navDefault.navOpen ul.navMenuSub > li:nth-child(3) {
    animation-delay: 0.2s;
}
.divNav.navDefault.navOpen ul.navMenuSub > li:nth-child(4) {
    animation-delay: 0.3s;
}
.divNav.navDefault.navOpen ul.navMenuSub > li:nth-child(5) {
    animation-delay: 0.4s;
}
.divNav.navDefault.navOpen ul.navMenuSub > li:nth-child(6) {
    animation-delay: 0.5s;
}
.divNav.navDefault.navOpen ul.navMenuSub > li:nth-child(7) {
    animation-delay: 0.6s;
}
.divNav.navDefault.navOpen ul.navMenuSub > li:nth-child(8) {
    animation-delay: 0.7s;
}
.divNav.navDefault.navOpen ul.navMenuSub > li:nth-child(9) {
    animation-delay: 0.8s;
}
.divNav.navDefault.navOpen ul.navMenuSub > li:nth-child(10) {
    animation-delay: 0.9s;
}

.divNav.navDefault .divTop-mobile {
    padding-top: 20px;
    position: relative;
}
.divNav.navDefault .mobileLangArea {
    position: absolute;
    top: 55px;
    right: 24px;
    font-size: 15px;
    color: #464342;
}
.divNav.navDefault .mobileLangArea a {
    color: #464342;
}
.divNav.navDefault .mobileLangArea a.actived,
.divNav.navDefault .mobileLangArea a:hover {
    color: #7d7664;
}
.divNav.navDefault .divTop-mobile {
    padding-top: 0;
}

.navCloseArea {
    position: absolute;
    top: 72px;
    right: 80px;
    cursor: pointer;
    z-index: 100;
}
.navCloseArea .navIconAreaText {
    margin-right: 10px;
    display: inline-block;
    font-size: 14px;
    line-height: 15px;
    color: #fff;
    letter-spacing: 2px;
}
.navClose {
    width: 30px;
    height: 30px;
    position: relative;
    display: inline-block;
    z-index: 100;
    cursor: pointer;
    transform: translateY(10px);
}

.sitepage-topmenu {
    position: absolute;
    top: 50px;
    width: 100%;
    z-index: 1200;
}
.sitepage-topmenu .sitepage-menu {
    /*width: 240px;*/
    width: 120px;
    transform: translateY(-7px);
    position: absolute;
    right: 80px;
    text-align: right;
    z-index: 500;
}
.sitepage-topmenu .sitepage-menu .navLang {
    /*display: inline-block;
  margin-right:60px;
  padding-top: 36px;*/
    color: #fff;
    letter-spacing: 2px;
    transition: all 0.25s ease;
    transform: translate(0px, 5px);
}
.sitepage-topmenu .sitepage-menu .navLang a {
    font-size: 14px;
    line-height: 15px;
    font-weight: 300;
    color: #fff;
    letter-spacing: 2px;
    padding: 0;
    display: inline-block;
    transition: all 0.25s ease;
}
.sitepage-topmenu .sitepage-menu .navLang a.actived,
.sitepage-topmenu .sitepage-menu .navLang a:hover {
    border-bottom: 1px solid #fff;
    transition: all 0.25s ease;
}
.sitepage-topmenu .sitepage-menu .navLang img {
    /*width: 34px;*/
    width: 22px;
}
.sitepage-topmenu .sitepage-menu .navIconArea {
    display: inline-block;
    cursor: pointer;
}
.sitepage-topmenu .sitepage-menu .navIconAreaText {
    margin-right: 10px;
    display: inline-block;
    color: #fff;
    font-weight: 300;
    width: 45px;
    overflow: hidden;
    height: 17px;
    transform: translateY(1px);
    transition: all 0.25s ease;
}

.sitepage-topmenu.colorBlue .sitepage-menu .navLang,
.sitepage-topmenu.openMenuColorBlue .sitepage-menu .navLang {
    color: #153050;
}
.sitepage-topmenu.colorBlue .sitepage-menu .navLang a,
.sitepage-topmenu.openMenuColorBlue .sitepage-menu .navLang a {
    color: #153050;
}
.sitepage-topmenu.colorBlue .sitepage-menu .navLang a.actived,
.sitepage-topmenu.colorBlue .sitepage-menu .navLang a:hover,
.sitepage-topmenu.openMenuColorBlue .sitepage-menu .navLang a.actived,
.sitepage-topmenu.openMenuColorBlue .sitepage-menu .navLang a:hover {
    border-bottom: 1px solid #153050;
}
.sitepage-topmenu.colorBlue .sitepage-menu .navIconAreaText,
.sitepage-topmenu.openMenuColorBlue .sitepage-menu .navIconAreaText {
    color: #153050;
}

.sitepage-top {
    position: fixed;
    top: 50px;
    width: 100%;
    z-index: 1000;
}
.sitepage-top .divLogo {
    width: 200px;
    position: absolute;
    left: 80px;
}
.sitepage-top .sitepage-nav {
    position: absolute;
    width: 100%;
    color: #fff;
    letter-spacing: 2px;
    text-align: center;
    padding-top: 36px;
    padding-left: 100px;
    transition: all 0.25s ease;
}
.sitepage-top .sitepage-nav a {
    color: #fff;
    margin: 14px;
}
.sitepage-top .sitepage-nav span {
    color: #fff;
    /*font-size:13px;*/
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 2px;
    padding: 1px 0;
    margin: 0 14px;
    display: inline-block;
    transition: all 0.25s ease;
}
.sitepage-top .sitepage-nav a.actived {
    /*border-bottom: 3px solid #c5a254;*/
    border-bottom: 1px solid #c5a254;
}
.sitepage-top .sitepage-nav a:hover {
    /*border-bottom: 3px solid #c5a254;*/
    border-bottom: 1px solid #c5a254;
}
.sitepage-top.colorBlue .sitepage-nav,
.sitepage-top.openMenuColorBlue .sitepage-nav {
    color: #153050;
}
.sitepage-top.colorBlue .sitepage-nav a,
.sitepage-top.colorBlue .sitepage-nav span,
.sitepage-top.openMenuColorBlue .sitepage-nav a,
.sitepage-top.openMenuColorBlue .sitepage-nav span {
    color: #153050;
}

.divLogo-mobi {
    position: absolute;
    top: 60px;
    left: 60px;
    width: 144px;
    z-index: 100;
}
.divNav.navDefault ul.sub-menu {
    display: none;
    width: 100%;
    margin-top: 0px;
    padding-left: 0px;
}
.divNav.navDefault ul.sub-menu.showsub {
    display: block;
}
.divNav.navDefault ul.sub-menu li {
    display: block;
    text-align: left;
    opacity: 0;
    width: 100%;
}
.divNav.navDefault ul.sub-menu.showsub li {
    opacity: 0;
    animation-name: showContentMenuItemSub;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
.divNav.navDefault ul.sub-menu.showsub li:nth-child(2) {
    animation-delay: 0.1s;
}
.divNav.navDefault ul.sub-menu.showsub li:nth-child(3) {
    animation-delay: 0.2s;
}
.divNav.navDefault ul.sub-menu.showsub li:nth-child(4) {
    animation-delay: 0.3s;
}
.divNav.navDefault ul.sub-menu.showsub li:nth-child(5) {
    animation-delay: 0.4s;
}
.divNav.navDefault ul.sub-menu.showsub li:nth-child(6) {
    animation-delay: 0.5s;
}
.divNav.navDefault ul.sub-menu.showsub li:nth-child(7) {
    animation-delay: 0.6s;
}
.divNav.navDefault ul.sub-menu.showsub li:nth-child(8) {
    animation-delay: 0.7s;
}
.divNav.navDefault ul.sub-menu.showsub li:nth-child(9) {
    animation-delay: 0.8s;
}
.divNav.navDefault ul.sub-menu.showsub li:nth-child(10) {
    animation-delay: 0.9s;
}
@keyframes showContentMenuItemSub {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

.divNav.navDefault ul.sub-menu li a {
    display: block;
    position: relative;
    color: #153050;
    font-size: 26px;
    line-height: 26px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 300;
    transition: all 0.3s ease-in-out;
}
.divNav.navDefault ul.sub-menu li a:before {
    content: "";
    position: absolute;
    width: 0px;
    height: 2px;
    background-color: #c5a254;
    left: 0;
    top: 22px;
    transition: all 0.3s ease-in-out;
}
.divNav.navDefault ul.sub-menu li.menuHover a,
.divNav.navDefault ul.sub-menu li.actived a {
    color: #c5a254;
    padding-left: 35px;
}
.divNav.navDefault ul.sub-menu li.menuHover a:before,
.divNav.navDefault ul.sub-menu li.actived a:before {
    color: #c5a254;
    width: 25px;
}

.navContactArea {
    position: absolute;
    z-index: 800;
    max-width: 750px;
    height: 60px;
    bottom: 70px;
    right: 80px;
    font-size: 16px;
    color: #153050;
    font-weight: 300;
    opacity: 0;
    animation-name: showContentMenu;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
.navContactArea span {
    font-weight: 500;
    color: #153050;
    display: block;
    padding-bottom: 8px;
}
.navContactArea a {
    color: #153050;
    font-weight: 300;
}
.navContactArea a:hover {
    color: #c5a254;
}
.navContact-phone {
    display: inline-block;
    padding-right: 80px;
}
.navContact-email {
    display: inline-block;
    padding-right: 80px;
}
.navContact-social {
    display: inline-block;
}
.navContact-social a {
    margin: 0 14px;
}
.navContact-social a:first-child {
    margin-left: 0px;
}
.navContact-social a:last-child {
    margin-right: 0px;
}
.navContact-social img {
    height: 32px;
    width: auto;
}

.pageFooter {
    position: relative;
    width: 100%;
    border-top: 5px solid #c5a254;
    background-color: #153050;
    padding: 90px 80px 90px;
    overflow-x: hidden;
    /* height: 100vh; */
}
.pageFooterInner {
    position: relative;
    width: 100%;
    height: 100%;
}
.pageFooterContent {
    /* position: absolute; */
    width: 100%;
    /* top: 50%; */
    /* transform: translateY(-50%); */
    /* margin-top: 40px; */
}
.pageFooter-col {
    float: left;
}
.pageFooter-logo {
    /*width: 15%;*/
}
.pageFooter-col1 {
    width: 24%;
    /* padding-left: 8%; */
}
.pageFooter-col2 {
    width: 25%;
}
.pageFooter-col3 {
    width: 26%;
}
.pageFooter-col4 {
    width: 25%;
}
.footerLogo {
    width: 195px;
    transform: translateY(-34px);
}
.footerNavItem {
    margin-bottom: 15px;
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    text-transform: uppercase;
}
.footerNavItem a {
    color: #fff;
    display: block;
    padding-bottom: 6px;
}
.footerNavItem .footerNavItemSub {
    position: relative;
    padding-top: 0px;
    color: #b1b8c0;
    font-size: 14px;
    line-height: 18px;
    font-weight: 200;
}
.footerNavItem .footerNavItemSub a {
    color: #b1b8c0;
    transition: all 0.25s ease;
    padding-left: 0px;
}
.footerNavItem .footerNavItemSub:before {
    content: "";
    position: absolute;
    background-color: #c5a254;
    width: 0px;
    height: 2px;
    top: 7px;
    transition: all 0.25s ease;
}
.footerNavItem .footerNavItemSub:hover a {
    color: #b1b8c0;
    padding-left: 15px;
}
.footerNavItem .footerNavItemSub:hover:before {
    width: 10px;
}
.footerNavItem .footerNavItemSub.spaceTop {
    margin-top: 14px;
}
.footerNavItem .footerNavItemSub.colorWhite a {
    color: #fff;
    text-transform: uppercase;
}

.footerNavContact {
    /*padding-top: 20px;*/
}
.footerNavContact-title {
    font-size: 24px;
    line-height: 26px;
    margin-bottom: 20px;
}
.footerNavContact-address {
    font-size: 16px;
    line-height: 22px;
    font-weight: 300;
    margin-bottom: 20px;
}
.footerNavContactLink {
    font-size: 16px;
    font-weight: 300;
}
.footerNavContactLink a {
    font-size: 16px;
    font-weight: 300;
    padding-left: 10px;
    color: #fff;
}
.footerNavContactLink.noIcon a {
    padding-left: 0px;
}
.footerNavContactLink .ion-android-call {
    font-size: 20px;
}
.footerNavContactLink .ion-ios-email {
    font-size: 22px;
}
.footerNavContactLink .ion-android-call:before {
    transform: translateY(3px);
}
.footerNavContactLink .ion-ios-email:before {
    transform: translateY(3px);
}
.footerNavSocialArea {
    margin-top: 35px;
}
.footerNavSocialArea a {
    display: inline-block;
    height: 28px;
    margin-right: 30px;
}
.navContact-Title {
    display: block;
}
.footerNavCopyRights {
    position: absolute;
    font-size: 14px;
    line-height: 14px;
    color: #fff;
    /*font-weight: 100;*/
    font-weight: 300;
    left: 80px;
    bottom: 40px;
}
.footerNavBackToTop {
    position: absolute;
    right: 80px;
    bottom: 50px;
    font-size: 14px;
    color: #fff;
    /*font-weight: 100;*/
    font-weight: 300;
    text-align: right;
    cursor: pointer;
}
.footerNavBackToTop:before {
    content: "";
    position: absolute;
    right: 0;
    top: -40px;
    width: 4px;
    height: 30px;
    background-color: #c5a254;
}

.siteTopBg {
    position: fixed;
    /*z-index: 20;*/
    z-index: 130;
    width: 100%;
    height: 180px;
}
.siteTopBg.mobileOnly {
    visibility: hidden;
}
.siteTopBg-black {
    background-color: #000;
}
.siteTopBg-blue {
    background-color: #12263f;
}
.siteTopBg-graywhite {
    background-color: #ededed;
}
.siteTopBg-white {
    background-color: #ffffff;
}
.residential-btn {
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    padding: 8px 20px;
    border-radius: 0px;
    background-color: rgba(0, 0, 0, 0.25);
    border: solid 1px #c5a254;
}
.residential-btn:hover {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: solid 1px #c5a254;
}

@media (max-width: 1600px) {
    .sitepage-top .sitepage-nav a {
        color: #fff;
        margin: 12px;
        font-size: 13px;
    }
    .sitepage-top .sitepage-nav span {
        font-size: 11px;
        line-height: 13px;
        color: #fff;
    }

    .pageFooter {
        padding: 72px 80px 72px;
        overflow-x: hidden;
    }
    .pageFooter-col {
        float: left;
    }
    .pageFooter-logo {
        width: 15%;
    }

    .footerLogo {
        width: 156px;
        transform: translateY(-26px);
    }
    .footerNavItem {
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 20px;
    }
    .footerNavItem a {
        padding-bottom: 4px;
    }
    .footerNavItem .footerNavItemSub {
        font-size: 12px;
        line-height: 16px;
    }
    .footerNavItem .footerNavItemSub:before {
        top: 6px;
    }
    .footerNavItem .footerNavItemSub.spaceTop {
        margin-top: 8px;
    }
    .footerNavContact {
        /*padding-top: 10px;*/
    }
    .footerNavContact-title {
        font-size: 20px;
        line-height: 22px;
        margin-bottom: 15px;
    }
    .footerNavContact-address {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 15px;
    }
    .footerNavContactLink {
        font-size: 14px;
    }
    .footerNavContactLink a {
        font-size: 14px;
    }
    .footerNavContactLink .ion-android-call {
        font-size: 20px;
    }
    .footerNavContactLink .ion-ios-email {
        font-size: 22px;
    }
    .footerNavContactLink .ion-android-call:before {
        transform: translateY(3px);
    }
    .footerNavContactLink .ion-ios-email:before {
        transform: translateY(3px);
    }
    .footerNavSocialArea {
        margin-top: 25px;
    }
    .footerNavSocialArea a {
        height: 24px;
        margin-right: 24px;
    }
}

@media (max-width: 1440px) {
    .divLogoOnTop {
        /*width: 180px;
    top: 40px;*/
        width: 144px; /*reduce 20%*/
        top: 50px;
        left: 40px;
    }
    .sitepage-top {
        top: 40px;
    }
    .sitepage-topmenu {
        top: 40px;
    }
    .sitepage-top .sitepage-nav {
        padding-top: 30px;
    }
    .sitepage-top .sitepage-nav a {
        color: #fff;
        margin: 7px;
        font-size: 12px;
    }
    .sitepage-top .sitepage-nav span {
        color: #fff;
        font-size: 11px;
        line-height: 13px;
        letter-spacing: 2px;
        margin: 0 10px;
    }
    .sitepage-topmenu .sitepage-menu {
        width: 200px;
        right: 40px;
    }
    .sitepage-topmenu .sitepage-menu .navLang {
        /*margin-right:20px;
    padding-top: 30px;*/
        letter-spacing: 2px;
    }
    .sitepage-topmenu .sitepage-menu .navLang a {
        font-size: 13px;
        line-height: 15px;
        letter-spacing: 2px;
    }
    .navCloseArea {
        top: 56px;
        right: 40px;
    }
    .navCloseArea .navIconAreaText {
        margin-right: 10px;
        display: inline-block;
        font-size: 13px;
        line-height: 15px;
        letter-spacing: 2px;
    }
    .navClose {
        width: 30px;
        height: 30px;
        position: relative;
        display: inline-block;
        z-index: 100;
        cursor: pointer;
        transform: translateY(10px);
    }
    .navMenuPcArea {
        padding: 160px 40px 40px;
    }
    .divNav.navDefault ul.navMenu li a {
        font-size: 16px;
        line-height: 16px;
    }
    .divNav.navDefault ul.navMenu li a:before {
        top: 17px;
    }
    .divNav.navDefault ul.sub-menu li a {
        font-size: 16px;
        line-height: 16px;
    }
    .divNav.navDefault ul.sub-menu li a:before {
        top: 17px;
    }
    .divNav.navDefault ul.navMenuSub li::before {
        top: 6px;
        left: -10px;
        font-size: 12px;
        line-height: 12px;
    }
    .divNav.navDefault ul.navMenuSub li a {
        display: block;
        position: relative;
        color: #fff;
        font-size: 12px;
        line-height: 18px;
        padding-top: 7px;
        padding-bottom: 7px;
        text-transform: uppercase;
    }
    .navContactArea {
        max-width: 750px;
        height: 60px;
        bottom: 70px;
        right: 80px;
        font-size: 14px;
    }
    .navContactArea span {
        padding-bottom: 8px;
    }
    .navContact-phone {
        padding-right: 60px;
    }
    .navContact-email {
        padding-right: 60px;
    }
    .navContact-social a {
        margin: 0 14px;
    }
    .navContact-social img {
        height: 28px;
    }
    .footerNavCopyRights {
        font-size: 14px;
        left: 80px;
        bottom: 40px;
    }
    .footerNavBackToTop {
        right: 40px;
        bottom: 50px;
        font-size: 14px;
    }
    .pageFooter-col1 {
        /* padding-left: 4%; */
    }
}
@media (max-width: 1366px) {
    .pageFooter {
        padding: 60px 40px 60px;
    }
    .footerLogo {
        width: 156px;
        transform: translateY(-26px);
    }
    .navContactArea {
        max-width: 750px;
        height: 60px;
        bottom: 40px;
    }
    .navContactArea span {
        padding-bottom: 4px;
    }
    .navContact-phone {
        padding-right: 40px;
    }
    .navContact-email {
        padding-right: 40px;
    }
    .navContact-social a {
        margin: 0 12px;
    }
    .navContact-social img {
        height: 28px;
    }
    .siteTopBg {
        height: 150px;
    }

    .sitepage-topmenu .sitepage-menu {
        transform: translateY(-10px);
    }
    .sitepage-topmenu .sitepage-menu .navLang {
        transform: translate(0, 5px);
    }
    .sitepage-topmenu .sitepage-menu .navLang img {
        /*width: 30px;*/
    }

    .footerNavItem {
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 18px;
    }
    .footerNavItem a {
        padding-bottom: 4px;
    }
    .footerNavItem .footerNavItemSub {
        font-size: 12px;
        line-height: 14px;
    }
    .footerNavItem .footerNavItemSub:before {
        top: 5px;
    }
    .footerNavItem .footerNavItemSub.spaceTop {
        margin-top: 8px;
    }

    .footerNavContact {
        /*padding-top: 10px;*/
    }
    .footerNavContact-title {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 12px;
    }
    .footerNavContact-address {
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 12px;
    }
    .footerNavContactLink {
        font-size: 12px;
    }
    .footerNavContactLink a {
        font-size: 12px;
    }
    .footerNavContactLink .ion-android-call {
        font-size: 18px;
    }
    .footerNavContactLink .ion-ios-email {
        font-size: 20px;
    }
    .footerNavContactLink .ion-android-call:before {
        transform: translateY(3px);
    }
    .footerNavContactLink .ion-ios-email:before {
        transform: translateY(3px);
    }
    .footerNavSocialArea {
        margin-top: 25px;
    }
    .footerNavSocialArea a {
        height: 15px;
        margin-right: 22px;
    }

    .footerNavCopyRights {
        font-size: 12px;
        left: 40px;
        bottom: 20px;
    }
    .footerNavBackToTop {
        right: 40px;
        bottom: 25px;
        font-size: 12px;
    }

    .footerNavContact-address br {
        display: none;
    }
}
@media (max-width: 1280px) {
    .pageFooter {
        padding: 60px 20px 60px 40px;
    }
    .sitepage-top .sitepage-nav a {
        color: #fff;
        /* padding: 5px; */
        margin: 5px;
        font-size: 11px;
        letter-spacing: 1.5px;
    }
    .sitepage-top .sitepage-nav span {
        color: #fff;
        font-size: 10px;
        line-height: 12px;
        letter-spacing: 2px;
        margin: 0 10px;
    }
}
@media (max-width: 1199px) {
    .sitepage-top .sitepage-nav a {
        display: none;
        color: #153050;
        margin: 3px;
    }
}
@media (max-width: 991px) {
    .divNav.navDefault ul.sub-menu {
        padding-left: 10px;
    }
    .divNav.navDefault ul.navMenu {
        padding-right: 15px;
    }
    .sitepage-top {
        top: 0px;
        padding-top: 40px;
        height: 140px;
    }
    .sitepage-top.onScroll {
        background-color: rgba(0, 0, 0, 0.8);
    }
}
@media (max-width: 767px) {
    .siteTopAreaLangOnly {
        position: absolute;
        top: 0px;
        width: 100%;
        z-index: 1200;
    }
    .siteTopBg {
        height: 90px;
    }
    .siteTopBg.mobileOnly {
        visibility: visible;
    }
    .divLogoOnTop {
        width: 120px;
        top: 20px;
        position: absolute;
        left: 20px;
    }
    .sitepage-top {
        top: 0px;
        padding-top: 21px;
        height: 90px;
    }
    .sitepage-topmenu {
        top: 0px;
        padding-top: 21px;
        height: 90px;
    }
    .sitepage-top.onScroll {
        background-color: rgba(0, 0, 0, 0.8);
    }
    .sitepage-topmenu .sitepage-menu {
        width: 150px;
        right: 20px;
        transform: translateY(0);
    }
    .sitepage-topmenu .sitepage-menu.langOnlyMobile {
        transform: translateY(-7px);
        position: absolute;
        right: 0px;
    }
    .sitepage-topmenu .sitepage-menu .navLang {
        display: inline-block;
        margin-right: 20px;
        padding-top: 14px;
        letter-spacing: 1px;
        transform: translate(0, 5px);
    }
    .sitepage-topmenu .sitepage-menu .navLang a {
        font-size: 11px;
        line-height: 12px;
        letter-spacing: 1px;
    }
    .sitepage-topmenu .sitepage-menu .navIconAreaText {
        display: none;
    }
    .navCloseArea {
        top: 22px;
        right: 20px;
    }
    .navCloseArea .navIconAreaText {
        margin-right: 2px;
        font-size: 11px;
        line-height: 12px;
        letter-spacing: 1px;
    }
    .navClose {
        width: 30px;
        height: 30px;
        position: relative;
        display: inline-block;
        z-index: 100;
        cursor: pointer;
        transform: translateY(10px);
    }

    .navMenuDiv-1 {
        width: 100%;
    }
    .navMenuDiv-2 {
        width: 100%;
        margin-top: -10px;
    }
    .navMenuDiv-3 {
        width: 100%;
        margin-top: -10px;
    }
    .navMenuDiv-4 {
        width: 100%;
        margin-top: -10px;
    }
    .navMenuDiv-5 {
        width: 100%;
        margin-top: -10px;
    }

    .navMenuPcArea {
        height: calc(100% - 80px);
        width: 100%;
        padding: 100px 20px 0px;
    }
    .navMenuArea {
        height: calc(100% - 160px);
        width: 100%;
        border-right: none;
        margin-top: 80px;
    }
    .navSubMenuArea {
        display: none;
    }

    .divNav.navOpen {
        height: 100vh;
        opacity: 0;
    }
    @keyframes showBgMenu {
        0% {
            opacity: 0;
            height: 0px;
        }
        100% {
            opacity: 1;
            height: 100vh;
        }
    }
    @keyframes closeBgMenu {
        0% {
            opacity: 1;
            height: 100vh;
        }
        100% {
            opacity: 0;
            height: 0px;
        }
    }
    .divNav.navDefault .nav-showmobile {
        height: 100vh;
    }
    .divNav.navDefault ul.navMenu {
        width: 100%;
        margin-top: 0px;
        padding-right: 20px;
        padding-left: 20px;
    }
    .divNav.navDefault ul.navMenu li {
        display: block;
        text-align: left;
        margin: 10px 0;
        opacity: 0;
    }
    .divNav.navDefault ul.navMenu li a {
        display: block;
        font-size: 14px;
        line-height: 14px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .divNav.navDefault ul.navMenu li a:before {
        display: none;
    }
    .divNav.navDefault ul.navMenu li.menuHover a,
    .divNav.navDefault ul.navMenu li.actived a {
        color: #153050;
        padding-left: 0px;
    }
    .divNav.navDefault ul.sub-menu li a {
        display: block;
        color: #153050;
        font-size: 14px;
        line-height: 16px;
        padding-top: 2px;
        padding-bottom: 2px;
    }
    .divNav.navDefault ul.sub-menu li a:before {
        display: none;
    }
    .divNav.navDefault ul.sub-menu li.menuHover a,
    .divNav.navDefault ul.sub-menu li.actived a {
        color: #153050;
        padding-left: 35px;
    }
    .navContactArea {
        position: absolute;
        width: 100%;
        height: 60px;
        bottom: 0px;
        right: 0px;
        left: 0;
        font-size: 12px;
    }
    .navContactArea span,
    .navContactArea span.textOnMobile {
        display: inline-block;
        padding-bottom: 0px;
    }
    .navContact-Title {
        display: inline-block;
    }
    .navContact-phone {
        display: block;
        padding-right: 0px;
        padding-left: 20px;
    }
    .navContact-email {
        display: block;
        padding-right: 0px;
        padding-left: 20px;
        text-indent: -999;
    }
    .navContact-social {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        padding-right: 20px;
        transform: translateY(-5px);
    }
    .navContact-social a {
        margin: 0 6px;
    }
    .navContact-social a:first-child {
        margin-left: 0px;
    }
    .navContact-social a:last-child {
        margin-right: 0px;
    }
    .navContact-social img {
        height: 20px;
        width: auto;
    }

    .pageFooter {
        height: 100vh;
        /*padding: 120px 20px 90px;*/
        padding: 0px 20px 0px;
    }
    .pageFooterContent {
        margin-top: 0px;
    }
    .pageFooter-col {
        float: none;
    }
    .pageFooter-logo {
        display: none;
    }
    .pageFooter-col1,
    .pageFooter-col2,
    .pageFooter-col3 {
        display: none;
    }
    .pageFooter-col4 {
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .footerNavItem {
        display: none;
    }
    .footerNavItem a {
        padding-bottom: 6px;
    }
    .footerNavItem .footerNavItemSub {
        position: relative;
        padding-top: 0px;
        color: #b1b8c0;
        font-size: 14px;
        font-weight: 200;
    }
    .footerNavItem .footerNavItemSub a {
        color: #b1b8c0;
        transition: all 0.25s ease;
        padding-left: 0px;
    }
    .footerNavItem .footerNavItemSub:before {
        content: "";
        position: absolute;
        background-color: #c5a254;
        width: 0px;
        height: 2px;
        top: 10px;
        transition: all 0.25s ease;
    }
    .footerNavItem .footerNavItemSub:hover a {
        color: #b1b8c0;
        padding-left: 15px;
    }
    .footerNavItem .footerNavItemSub:hover:before {
        width: 10px;
    }
    .footerNavContact-title {
        font-size: 24px;
        line-height: 26px;
        margin-bottom: 20px;
    }
    .footerNavContact-address {
        font-size: 16px;
        line-height: 22px;
        font-weight: 300;
        margin-bottom: 20px;
    }
    .footerNavContactLink {
        font-size: 18px;
        font-weight: 300;
        padding-bottom: 10px;
    }
    .footerNavContactLink a {
        font-size: 16px;
        font-weight: 300;
        padding-left: 10px;
        color: #fff;
    }
    .footerNavContactLink .ion-android-call {
        font-size: 20px;
    }
    .footerNavContactLink .ion-ios-email {
        font-size: 22px;
    }
    .footerNavContactLink .ion-android-call:before {
        transform: translateY(3px);
    }
    .footerNavContactLink .ion-ios-email:before {
        transform: translateY(3px);
    }
    .footerNavSocialArea {
        margin-top: 30px;
    }
    .footerNavSocialArea a {
        display: inline-block;
        /*height: 28px;*/
        height: 25px;
        margin-right: 30px;
    }
    .footerNavCopyRights {
        font-size: 10px;
        width: 100%;
        left: 0px;
        bottom: 10px;
        text-align: center;
    }
    .footerNavBackToTop {
        width: 90px;
        text-align: center;
        right: unset;
        left: 50%;
        transform: translateX(-50%);
        bottom: 40px;
        font-size: 12px;
    }
    .footerNavBackToTop:before {
        content: "";
        position: absolute;
        right: unset;
        left: 50%;
        transform: translateX(-50%);
        top: -25px;
        width: 3px;
        height: 20px;
        background-color: #c5a254;
    }
}
@media (max-width: 360px) {
}
@media (max-width: 325px) {
}

/****************** HOME *********************/
.homeSection {
    /*height: 0px;
  overflow: hidden;*/
    height: 100vh;
    position: absolute;
    overflow: hidden;
}
.homeSection.preloadFinish {
    height: auto;
    overflow: unset;
    position: relative;
}
.homeSection .homeHilightSectionRelative {
    position: relative;
}
.homePreload {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    z-index: 1500;
    background-image: url("../../images/bg_preload.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
.homePreload-logo {
    width: 450px;
    margin: 0 auto;
}
.homePreload-loading {
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 100;
    bottom: 180px;
}
.homePreload-loadingCounter {
    display: inline-block;
    text-align: right;
    width: 25px;
}
.homePreload-footer {
    position: absolute;
    width: 100%;
    bottom: 45px;
    z-index: 100;
    font-size: 14px;
    color: #999999;
    text-align: center;
}
.homePreload-loadingBar span {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin: 0 4px;
}
.homePreload-loadingBar span:before {
    content: "";
    display: block;
    margin: 0 auto;
    width: 10px;
    height: 10px;
    background-color: #c5a254;
    border-radius: 100%;
    transition: all 2s ease;
}
.homePreload-loadingBar span {
    animation-name: blink;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
.homePreload-loadingBar span:nth-child(2) {
    animation-delay: 0.2s;
}
.homePreload-loadingBar span:nth-child(3) {
    animation-delay: 0.4s;
}
.homePreload-loadingBar span:nth-child(4) {
    animation-delay: 0.6s;
}
.homePreload-loadingBar span:nth-child(5) {
    animation-delay: 0.8s;
}
.homePreload-loadingNum {
    color: #153050;
    font-weight: 500;
    font-size: 15px;
    margin-top: 10px;
}

@keyframes blink {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}

.homePromotionBox.positionCenter {
    color: #fff;
}

.homeVdo {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    z-index: 1450;
    background-color: #000;
}
.homeVdoContainer {
    width: 100%;
    height: 100%;
}

.homeVdoContainer video {
    width: 100%;
}
.homeVdoContainer .controls,
.homeVdoContainer .controls > * {
    padding: 0;
    margin: 0;
}
.homeVdoContainer .controls {
    overflow: hidden;
    background: transparent;
    width: 100%;
    height: 34px;
    position: absolute;
    bottom: 65px;
    padding: 0px;
}
.homeVdoContainer .controls-disable {
    display: none;
}
.homeVdoContainer .controls[data-state="hidden"] {
    display: none;
}
.homeVdoContainer .controls[data-state="visible"] {
    display: block;
}
.homeVdoContainer .homeVdo-play {
    display: inline-block;
    width: 10%;
    color: #fff;
    font-size: 14px;
    padding-right: 2%;
    text-align: right;
    height: 30px;
}
.homeVdoContainer .homeVdo-stop {
    display: inline-block;
    width: 10%;
    color: #fff;
    font-size: 14px;
    padding-left: 2%;
    text-align: left;
}
.homeVdoContainer .controls button[data-state="play"].homeVdo-play::after {
    content: "PLAY";
}
.homeVdoContainer .controls button[data-state="pause"].homeVdo-play::after {
    content: "PAUSE";
}
.homeVdoContainer .controls .progress {
    cursor: pointer;
    display: inline-block;
    width: 76%;
    background: transparent;
    box-shadow: unset;
}
.homeVdoContainer .controls button {
    overflow: hidden;
    border: none;
    cursor: pointer;
    background: transparent;
    background-size: contain;
    background-repeat: no-repeat;
}
.homeVdoContainer .controls progress {
    display: block;
    width: 100%;
    /*height:1px;
  margin-top:16px;*/
    height: 8px;
    margin-top: 12px;
    border: none;
    overflow: hidden;
    border-radius: 2px;
    color: #c5a254; /* Internet Explorer uses this value as the progress bar's value colour */
    border-color: transparent;
}
.homeVdoContainer .controls progress[data-state="fake"] {
    background: #e6e6e6;
    height: 65%;
}
.controls progress span {
    width: 0%;
    height: 100%;
    display: inline-block;
    background-color: #2a84cd;
}

.homeVdoContainer .controls progress::-moz-progress-bar {
    background-color: #c5a254;
}
/* Chrome requires its own rule for this, otherwise it ignores it */
.homeVdoContainer .controls progress::-webkit-progress-value {
    background-color: #c5a254;
}

.homeBanner {
    width: 100vw;
    height: 100vh;
}
.homeBanner .item {
    width: 100%;
    height: 100%;
}
.homeBanner .item .homeBanner-item {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    background-position: center;
    /* transition: all 15s ease-in !important; */
}
.section-promotion {
    height: 100% !important;
}
.homeBannerPromotion {
    /* width: 100vw; */
    height: auto !important;
    /*    height: 100vh;*/
}
.homeBannerPromotion .item {
    width: 100%;
    /*  height: 100%;*/
}
.homeBannerPromotion .item .homeBannerPromotion-item {
    width: 100%;
    /* margin-top: 80px; */
    /*
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  position:absolute;
  background-position: center;
*/
    transition: all 15s ease-in !important;
}
.homeBannerPromotion .item .homeBannerPromotion-item img {
    width: 100%;
}
.backgroundZoomIn {
    transform: scale(1.4);
}
.backgroundZoomOut {
    transform: unset;
}
.pageHomeContentCover {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0px;
}
.pageHomeContent {
    width: 100%;
    height: 100%;
    z-index: 20;
    position: absolute;
}
.pageHomeContent::before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 1s ease-in;
    opacity: 0;
    background: none;
}
.pageHomeContent.pageBgExplode::before {
    opacity: 1;
    background-image: url("../../images/bgExplode.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.carousel-fade .carousel-inner .item {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
    z-index: 2;
}

.homeCarouselControl {
    position: absolute;
    z-index: 550;
    /*top: calc(50% + 240px);*/
    bottom: 0px;
    width: 100%;
    text-align: center;
}
.homeCarouselControl .carousel-indicators li {
    display: inline-block;
    width: 6px;
    height: 6px;
    /*margin: 0 10px;*/
    margin-right: 20px;
    position: relative;
    cursor: pointer;
    background-color: transparent;
    border-radius: 6px;
    transition: all 0.4s ease;
    border: 1px solid #fff;
    background-color: #fff;
    transform: translateX(8px);
}
.homeCarouselControl .carousel-indicators li::after {
    content: "";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 6px;
    transition: all 0.4s ease;
    left: -1px;
    top: -1px;
}
.homeCarouselControl .carousel-indicators .active {
    background-color: #c5a254;
    border: 1px solid #c5a254;
}
.homeCarouselControl .carousel-indicators .active::after {
    border: 1px solid #c5a254;
    width: 14px;
    height: 14px;
    border-radius: 14px;
    left: -5px;
    top: -5px;
}

.homeBanner-text {
    position: absolute;
    z-index: 550;
    top: calc(50% - 30px);
    width: 100%;
    text-align: center;
    letter-spacing: 2px;
    /*font-size: 45px;
  line-height: 50px;*/
    font-size: 40px;
    line-height: 45px;
}
.homeBanner-text-white {
    /*font-weight: 500;*/
    font-weight: 400;
    color: #fff;
    padding: 0 2px;
}
.homeBanner-text-orange {
    font-weight: 400;
    color: #c5a254;
    padding: 0 2px;
}
.homeBanner-text-caption {
    display: inline-block;
    color: #fff;
    font-weight: 200;
    font-size: 20px;
    line-height: 24px;
    max-width: 500px;
    margin-top: 10px;
}
.homeBanner-text .afterNewLine::after {
    content: "\A";
    white-space: pre;
}
.homeBanner .item.active .homeBanner-text span {
    opacity: 0;
    margin-left: -50px;
    animation-name: bannerTextShow;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
/*.homeBanner .item.active .homeBanner-text span:nth-child(2){animation-delay:.8s;}
.homeBanner .item.active .homeBanner-text span:nth-child(3){animation-delay:1.6s;}
.homeBanner .item.active .homeBanner-text span:nth-child(4){animation-delay:2.4s;}
.homeBanner .item.active .homeBanner-text span:nth-child(5){animation-delay:3.2s;}
.homeBanner .item.active .homeBanner-text span:nth-child(6){animation-delay:4s;}*/

.homeBanner .item.active .homeBanner-text span:nth-child(2) {
    animation-delay: 1.5s;
}
.homeBanner .item.active .homeBanner-text span:nth-child(3) {
    animation-delay: 3s;
}
.homeBanner .item.active .homeBanner-text span:nth-child(4) {
    animation-delay: 4.5s;
}
.homeBanner .item.active .homeBanner-text span:nth-child(5) {
    animation-delay: 5s;
}
.homeBanner .item.active .homeBanner-text span:nth-child(6) {
    animation-delay: 6s;
}

@keyframes bannerTextShow {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        margin-left: 0px;
    }
}

.homeBanner .item.active .homeBanner-text.cpationExplode {
    opacity: 1;
    margin-left: 0px;
    animation-name: cpationExplode;
    animation-duration: 2.4s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
@keyframes cpationExplode {
    0% {
        opacity: 1;
        letter-spacing: 2px;
    }
    100% {
        opacity: 0;
        letter-spacing: 10px;
    }
}
.homeBanner .item.active .homeBanner-text.cpationExplode .homeBanner-text-caption {
    letter-spacing: 2px;
}

.homeBanner .item .homeBanner-btn {
    position: absolute;
    z-index: 550;
    /*top: calc(50% + 70px);*/
    top: calc(50% + 110px);
    width: 100%;
    text-align: center;
}
.homeBanner .item .homeBanner-btn.more-left {
    left: 42%;
    -webkit-transform: translateX(-42%);
    transform: translateX(-42%);
    width: auto;
}
.homeBanner .item .homeBanner-btn.more-right {
    left: 56%;
    -webkit-transform: translateX(-56%);
    transform: translateX(-56%);
    width: auto;
}
.homeBanner .item .homeBanner-btn .btnHomeBanner {
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    padding: 15px 30px;
    border-radius: 0px;
    background-color: rgba(0, 0, 0, 0.25);
    border: solid 1px #c5a254;
}
.homeBanner .item .homeBanner-btn .btnHomeBanner:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.homeScrollArea {
    position: absolute;
    width: 80px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 40px;
}
.homeScrollLine {
    position: relative;
    width: 1px;
    height: 40px;
    background-color: transparent;
    margin: 0 auto;
    overflow: hidden;
}
.homeScrollLine::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 20px;
    background-color: #c5a254;
    top: 0;
    animation-name: homeScrollBounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes homeScrollBounce {
    0% {
        transform: translateY(-15px);
    }
    45% {
        transform: translateY(30px);
    }
    50% {
        transform: translateY(35px);
    }
    100% {
        transform: translateY(-15px);
    }
}

.homeScrollTxt {
    font-size: 14px;
    color: #fff;
    text-align: center;
    margin-top: 10px;
}

.homeBannerPromotion .homePromotionBox {
    position: absolute;
    /*width:560px;
  height: 500px;*/
    width: 450px;
    height: 360px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 20;
    /*  margin-top: 40px;*/
}
.homeBannerPromotion .homePromotionBox.positionLeft {
    /*top: 50%;*/
    top: 48%;
    left: 25%;
    transform: translate(-50%, -50%);
}
.homeBannerPromotion .homePromotionBox.positionCenter {
    /*top: 50%;*/
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.homeBannerPromotion .homePromotionBox.positionRight {
    /*top: 50%;*/
    top: 48%;
    right: 25%;
    transform: translate(50%, -50%);
}
.homeBannerPromotion .homePromotionBox .homePromotionBoxInner {
    width: 100%;
    position: relative;
    text-align: center;
}
.homeBannerPromotion .homePromotionBox .homePromotionBoxInner .homePromoLogo {
    /*width: 160px;*/
    /*height: 100px;
  margin: 60px auto 0;*/
    height: 70px;
    margin: 40px auto 0;
    text-align: center;
}
.homeBannerPromotion .homePromotionBox .homePromotionBoxInner .homePromoProjectName {
    margin-top: 30px;
    /*font-size: 34px;
  line-height: 44px;*/
    /*font-size: 30px;
  line-height: 40px;*/
    font-size: 25px;
    line-height: 30px;
    font-weight: bold;
}
.homeBannerPromotion .homePromotionBox .homePromotionBoxInner .homePromoProjectDetail {
    margin-top: 30px;
    /*font-size: 22px;
  line-height: 34px;*/
    /*font-size: 18px;
  line-height: 30px;*/
    font-size: 16px;
    line-height: 22px;
}
.homeBannerPromotion .homePromotionBox .homePromoBtnArea {
    /*margin-top: 50px;*/
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}
.homeBannerPromotion .homePromotionBox .homePromoBtn {
    /*font-size: 24px;*/
    font-size: 14px;
    padding: 10px 20px;
}

.hilightMobile.hilightCarouselArea {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 20px;
    display: block;
}
.hilightMobile .hilightCarouselInner {
    width: 100%;
    height: auto;
    position: relative;
    top: unset;
    padding-bottom: 100px;
}
.hilightMobile .owl-carousel {
    display: block;
    width: 100%;
    padding: 0 20px;
}
.hilightMobile .owl-carousel .itemInner {
    height: auto;
}
.hilightMobile .owl-carousel .itemInner img {
    display: block;
    height: auto;
    max-width: 100%;
}
.hilightMobile .hilightCarouselInner .owl-carousel .item {
    width: 100%;
    margin: 0 0 50px;
}
.hilightCarousel-projectName {
    display: none;
    width: 100%;
    text-align: center;
    padding-top: 20px;
}
.hilightMobile .hilightCarousel-projectName {
    display: block;
}
.hilightCarousel-projectName a {
    display: block;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 2px;
    text-decoration: underline;
    text-transform: uppercase;
    transition: all 0.3s ease-out;
    color: #153050;
}
.hilightCarousel-projectName a:hover {
    color: #c5a254;
}
.hilightCarousel-projectName .projectShorDesc {
    font-size: 13px;
    line-height: 18px;
    color: #153050;
}

.hilightMobile .hilightCarousel-caption {
    display: none;
}
.hilightMobile .owl-nav-custom {
    display: none;
}

.sk-fading-circle {
    margin: 0 auto;
    position: relative;
    /*width: 650px;
  height: 650px;*/
    width: 600px;
    height: 600px;
    margin-top: calc(50vh - 350px + 50px);
}
.sk-fading-circle .sk-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.sk-fading-circle .sk-circle:before {
    content: "";
    display: block;
    margin: 0 auto;
    width: 3px;
    height: 3px;
    background-color: #c5a254;
    border-radius: 100%;
    -webkit-animation: sk-circleFadeDelay;
    animation: sk-circleFadeDelay;
    transition: all 2s ease;
}
.sk-fading-circle .expandCircle1.sk-circle:before {
    width: 10px;
    height: 10px;
    background-color: #c5a254;
}
.sk-fading-circle .expandCircle2.sk-circle:before {
    width: 20px;
    height: 20px;
    background-color: #c5a254;
}
.sk-fading-circle .expandCircle3.sk-circle:before {
    width: 30px;
    height: 30px;
    background-color: #c5a254;
}
.sk-fading-circle .expandCircle4.sk-circle:before {
    width: 40px;
    height: 40px;
    background-color: #c5a254;
}

@-webkit-keyframes sk-circleFadeDelay {
    0%,
    95% {
        opacity: 0;
    }
    96%,
    97% {
        opacity: 0.6;
    }
    98%,
    99% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}
@keyframes sk-circleFadeDelay {
    0%,
    95% {
        opacity: 0;
    }
    96%,
    97% {
        opacity: 0.6;
    }
    98%,
    99% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}

@media (max-width: 1600px) {
    /*
  .homeScrollArea {
    bottom: 60px;
  }
*/
    .homeBannerPromotion .homePromotionBox {
        /*width:448px;
    height: 400px;
    height: 360px;
    margin-top: 40px;*/
        width: 420px;
        height: 300px;
    }
    .homeBannerPromotion .homePromotionBox .homePromotionBoxInner .homePromoLogo {
        /*height: 80px;
    text-align: center;
    margin: 44px auto 0;*/
        height: 60px;
        margin: 25px auto 0;
    }
    .homeBannerPromotion .homePromotionBox .homePromotionBoxInner .homePromoProjectName {
        /*margin-top: 30px;
    font-size: 27px;
    line-height: 37px;*/
        margin-top: 25px;
        font-size: 23px;
    }
    .homeBannerPromotion .homePromotionBox .homePromotionBoxInner .homePromoProjectDetail {
        /*margin-top: 24px;
    font-size: 18px;
    line-height: 30px;*/
        margin-top: 25px;
        font-size: 14px;
        line-height: 20px;
    }
    .homeBannerPromotion .homePromotionBox .homePromoBtnArea {
        /*bottom: 70px;*/
        bottom: 30px;
    }
    .homeBannerPromotion .homePromotionBox .homePromoBtn {
        /*font-size: 19px;
    padding: 20px 30px;*/
        font-size: 12px;
        padding: 8px 20px;
    }
    .homeBanner-text {
        top: calc(50% - 30px);
        letter-spacing: 2px;
        font-size: 35px;
        line-height: 40px;
    }
    .homeBanner-text-caption {
        font-size: 16px;
        line-height: 17px;
        max-width: 400px;
        margin-top: 10px;
    }
    .sk-fading-circle {
        width: 480px;
        height: 480px;
        margin-top: calc(50vh - 250px + 30px);
    }
}

@media (max-width: 1440px) {
    .sk-fading-circle {
        width: 480px;
        height: 480px;
        margin-top: calc(50vh - 250px + 30px);
    }
    .homeScrollArea {
        bottom: 40px;
    }
    .homeBanner-text {
        top: calc(50% - 30px);
        text-align: center;
        letter-spacing: 2px;
        /*font-size: 38px;
    line-height: 42px;*/
        font-size: 30px;
        line-height: 35px;
    }
    .homeBanner-text-caption {
        font-size: 13px;
        line-height: 17px;
        max-width: 400px;
        margin-top: 10px;
    }
    .homeCarouselControl {
        /*top: calc(50% + 200px);*/
    }
}

@media (max-width: 1366px) {
    .sk-fading-circle {
        width: 400px;
        height: 400px;
        margin-top: calc(50vh - 250px + 50px);
    }
    .homeScrollArea {
        bottom: 45px;
    }
    .homeScrollTxt {
        font-size: 12px;
        margin-top: 0px;
    }

    .homeBannerPromotion .homePromotionBox {
        /*width:400px;
    height: 380px;*/
        width: 360px;
        height: 260px;
        /*    margin-top: 40px;*/
    }
    .homeBannerPromotion .homePromotionBox .homePromotionBoxInner .homePromoLogo {
        /*height: 60px;
    text-align: center;
    margin: 30px auto 0;*/
        height: 50px;
        margin: 20px auto 0;
    }
    .homeBannerPromotion .homePromotionBox .homePromotionBoxInner .homePromoProjectName {
        /*margin-top: 20px;
    font-size: 22px;
    line-height: 30px;*/
        margin-top: 20px;
        font-size: 20px;
        line-height: 24px;
    }
    .homeBannerPromotion .homePromotionBox .homePromotionBoxInner .homePromoProjectDetail {
        margin-top: 15px;
        font-size: 12px;
        line-height: 18px;
    }
    .homeBannerPromotion .homePromotionBox .homePromoBtnArea {
        /*margin-top: 40px;*/
        bottom: 30px;
    }
    .homeBannerPromotion .homePromotionBox .homePromoBtn {
        font-size: 11px;
        padding: 8px 20px;
    }

    .hilightCarousel-projectName a {
        font-size: 16px;
        line-height: 22px;
    }
    .homeBanner .item .homeBanner-btn .btnHomeBanner {
        font-size: 14px;
        line-height: 14px;
        padding: 12px 26px;
    }
    .homeBanner-text-caption {
        font-size: 12px;
        line-height: 15px;
        max-width: 320px;
        margin-top: 10px;
    }
}

@media (max-width: 1280px) {
    .sk-fading-circle {
        width: 350px;
        height: 350px;
        margin-top: calc(50vh - 175px);
    }
    .homePreload-logo {
        width: 300px;
        margin: 0 auto;
    }
    .homePreload-loading {
        bottom: 150px;
    }
    .homePreload-footer {
        bottom: 30px;
        font-size: 14px;
    }

    .homeVdoContainer .controls .progress {
        width: 68%;
    }
    .homeVdoContainer .homeVdo-play {
        width: 14%;
    }
    .homeVdoContainer .homeVdo-stop {
        width: 14%;
    }
    .homeBanner .item .homeBanner-btn.more-left {
        left: 35%;
        -webkit-transform: translateX(-20%);
        transform: translateX(-20%);
    }
    .homeBanner .item .homeBanner-btn.more-right {
        left: 65%;
        -webkit-transform: translateX(-80%);
        transform: translateX(-80%);
    }
    .homeBanner-text {
        top: calc(50% - 50px);
        text-align: center;
        letter-spacing: 2px;
        font-size: 30px;
        line-height: 35px;
    }
    .homeBanner-text-caption {
        font-size: 12px;
        line-height: 15px;
        max-width: 300px;
        margin-top: 10px;
    }
    .homeCarouselControl {
        /*top: calc(50% + 150px);*/
    }
    .homeScrollArea {
        bottom: 57px;
    }
}

@media (max-width: 991px) {
    .homePreload-logo {
        width: 250px;
        margin: 0 auto;
    }
    .homePreload-loading {
        bottom: 90px;
    }
    .homePreload-footer {
        bottom: 20px;
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .sk-fading-circle {
        width: 280px;
        height: 280px;
        margin-top: calc(50vh - 140px);
    }
    .homePreload-logo {
        width: 200px;
        margin: 0 auto;
    }
    .homePreload-loading {
        bottom: 90px;
    }
    .homePreload-footer {
        bottom: 20px;
        font-size: 12px;
    }

    .homeVdoContainer .controls .progress {
        width: 52%;
    }
    .homeVdoContainer .homeVdo-play {
        font-size: 10px;
        width: 18%;
    }
    .homeVdoContainer .homeVdo-stop {
        font-size: 10px;
        width: 22%;
    }

    .homeBanner .item .homeBanner-btn.more-left {
        left: 20%;
        -webkit-transform: translateX(-20%);
        transform: translateX(-20%);
    }
    .homeBanner .item .homeBanner-btn.more-right {
        left: 80%;
        -webkit-transform: translateX(-80%);
        transform: translateX(-80%);
    }

    .homeBanner-text {
        top: calc(50% - 30px);
        text-align: center;
        letter-spacing: 2px;
        font-size: 16px;
        line-height: 20px;
    }
    .homeBanner-text-caption {
        font-size: 10px;
        line-height: 12px;
        max-width: 240px;
        margin-top: 8px;
    }

    .homeBanner .item .homeBanner-btn {
        top: calc(50% + 160px);
    }

    .homeCarouselControl {
        /*top: calc(50% + 110px);*/
    }
    .homeCarouselControl .carousel-indicators li {
        margin-right: 10px;
        transform: translateX(4px);
    }

    .homeBannerPromotion .homePromotionBox {
        position: absolute;
        width: 100%;
        max-width: 260px;
        height: 300px;
        /*    margin-top: 20px;*/
        padding-bottom: 40px;
    }
    .homeBannerPromotion .homePromotionBox.positionLeft {
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .homeBannerPromotion .homePromotionBox.positionCenter {
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .homeBannerPromotion .homePromotionBox.positionRight {
        top: 45%;
        right: 50%;
        transform: translate(50%, -50%);
    }
    .homeBannerPromotion .homePromotionBox .homePromotionBoxInner {
        width: 100%;
        position: relative;
        text-align: center;
    }
    .homeBannerPromotion .homePromotionBox .homePromotionBoxInner .homePromoLogo {
        height: 50px;
        text-align: center;
        margin: 30px auto 0;
    }
    .homeBannerPromotion .homePromotionBox .homePromotionBoxInner .homePromoProjectName {
        margin-top: 25px;
        font-size: 16px;
        line-height: 24px;
    }
    .homeBannerPromotion .homePromotionBox .homePromotionBoxInner .homePromoProjectDetail {
        margin-top: 15px;
        font-size: 12px;
        line-height: 20px;
    }
    .homeBannerPromotion .homePromotionBox .homePromoBtnArea {
        /*margin-top: 25px;*/
        bottom: 40px;
    }
    .homeBannerPromotion .homePromotionBox .homePromoBtn {
        font-size: 14px;
        padding: 12px 20px;
    }

    .hilightCarousel-projectName a {
        font-size: 14px;
        line-height: 22px;
    }
}

@media (max-width: 325px) {
    .homeBanner .item .homeBanner-btn {
        top: calc(50% + 80px);
    }
    .homeBanner .item .homeBanner-btn .btnHomeBanner {
        font-size: 12px;
        line-height: 13px;
        padding: 8px 18px;
    }
    .homeBanner-text {
        font-size: 14px;
        line-height: 18px;
    }
}

/****************** OUR BUSINESS *********************/
.pageBusinessContentCover {
    width: 100%;
    height: auto;
    min-height: 100vh;
    position: absolute;
    overflow: hidden;
    top: 0px;
    transition: all 1s ease;
}
.pageBusinessContentCover.autoHeight {
    height: auto;
    min-height: 100vh;
    position: relative;
    overflow: auto;
}
.pageBusinessContent {
    width: 100%;
    z-index: 20;
    position: absolute;
    top: 180px;
}
.ourBusinessDetailCover {
    position: relative;
    width: 100%;
    height: auto;
}
.businessContentLeft {
    width: 36%;
    padding: 0px;
    margin: 0px;
    display: inline-block;
    position: absolute;
}
.businessContentRight {
    width: 64%;
    padding: 0px;
    margin: 0px;
    display: inline-block;
    position: absolute;
    left: 36%;
}
.businessNav {
    position: absolute;
    top: 10px;
    left: 70px; /* 80px - 10px */
    z-index: 200;
}
.businessNav ul.businessNavList {
    width: 100%;
    margin-top: 0px;
}
.businessNav ul.businessNavList li {
    display: inline-block;
    font-weight: 500;
    margin: 0 15px;
    font-size: 15px;
    letter-spacing: 2px;
}
.businessNav ul.businessNavList li a {
    font-size: 16px;
    color: #153050;
}
.businessNav ul.businessNavList li a:hover {
    color: #c5a254;
}
.businessNav ul.businessNavList li span.businessNavLine {
    display: inline-block;
    text-indent: -9999;
    position: relative;
    width: 0px;
    transition: all 1s ease;
}
.businessNav ul.businessNavList li.actived span.businessNavLine {
    width: 16px;
    transition: all 1s ease;
}
.businessNav ul.businessNavList li span.businessNavLine::before {
    content: "";
    position: absolute;
    height: 2px;
    width: 0%;
    left: 0px;
    top: -7px;
    background-color: #c5a254;
    transition: all 1s ease;
    /*animation-name:lineExtendBusinessNav;animation-duration:.4s;animation-iteration-count:1;*/
}
.businessNav ul.businessNavList li.actived span.businessNavLine::before {
    width: 100%;
    transition: all 1s ease;
}

.businessNav ul.businessNavList li .businessNavTitle {
    display: inline-block;
    overflow: hidden;
    height: 17px;
    width: 0px;
    transition: all 1s ease;
}
.businessNav ul.businessNavList li .businessNavTitle span.businessNavTitleInner {
    width: 0px;
    display: block;
    position: relative;
    color: transparent;
    overflow: hidden;
    transition: all 1s ease;
}

.businessNav ul.businessNavList li.actived .businessNavTitle {
    width: auto;
    transition: all 1s ease;
}
.businessNav ul.businessNavList li#ourBusinessNav01.actived .businessNavTitle {
    width: 95px;
}
.businessNav ul.businessNavList li#ourBusinessNav02.actived .businessNavTitle {
    width: 120px;
}
.businessNav ul.businessNavList li#ourBusinessNav03.actived .businessNavTitle {
    width: 117px;
}
.businessNav ul.businessNavList li#ourBusinessNav04.actived .businessNavTitle {
    width: 115px;
}

.businessNav ul.businessNavList li.actived .businessNavTitle span.businessNavTitleInner {
    width: 100%;
    transition: all 1s ease;
}
.businessNav ul.businessNavList li .businessNavTitle span.businessNavTitleInner::after {
    opacity: 1;
    content: attr(data-descr);
    position: absolute;
    top: 0;
    left: 0;
    color: #153050;
    width: 100%;
    text-align: left;
    height: 100%;
}

@keyframes lineExtendBusinessNav {
    0% {
        width: 0px;
    }
    100% {
        width: 100%;
    }
}

.businessTitle {
    color: #153050;
    font-size: 58px;
    line-height: 64px;
    font-weight: 200;
    letter-spacing: 2px;
    margin-left: 80px;
    margin-top: 70px;
}
.businessTitle span {
    display: block;
    font-weight: 400;
}
.businessContentText {
    width: 100%;
    padding: 0 80px;
    color: #153050;
    font-size: 20px;
    line-height: 26px;
    font-weight: 300;
    margin-top: 95px;
    position: relative;
}
.businessContentText::before {
    content: "";
    position: absolute;
    left: 0px;
    background-color: #c5a254;
    height: 3px;
    width: 30px;
    top: 10px;
}

#ourBusinessContent01.ourBusinessDetailCover {
    width: 100%;
    height: calc(100vh - 180px);
}
#ourBusinessContent01 .businessDetail01 {
    position: absolute;
    width: 100%;
    height: 500px;
    bottom: 0;
    background-image: url("../../images/business/bg_01.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.businessDetail01-list {
    /*width: 100%;*/
    width: 75%;
    margin: 0 auto;
    height: 100%;
    text-align: center;
}
.businessDetail01-item {
    height: 100%;
    position: relative;
}
.businessDetail01-item:after {
    content: "";
    position: absolute;
    height: 120px;
    width: 2px;
    top: 50%;
    background-color: rgba(197, 162, 84, 0.6);
    transform: translateY(-60px);
    right: 0px;
}
.businessDetail01-item:last-child:after {
    content: "";
    width: 0px;
}
.businessDetail01-item-img {
    width: 200px;
    margin: 0 auto;
}
.businessDetail01-item-title {
    color: #fff;
    font-size: 22px;
    line-height: 28px;
    margin-top: 20px;
}
.businessDetail01-item-number {
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    margin-top: 15px;
}
.businessDetail01-item-number span {
    display: block;
    font-size: 40px;
    line-height: 46px;
    padding-bottom: 10px;
}
.businessDetail01-list .businessDetail01-item {
    opacity: 0;
    transition: all 1s ease;
}
.businessDetail01-list.showContent .businessDetail01-item {
    opacity: 0;
    animation-name: Bu01showContent;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
.businessDetail01-list.showContent .businessDetail01-item:nth-child(2) {
    animation-delay: 0.2s;
}
.businessDetail01-list.showContent .businessDetail01-item:nth-child(3) {
    animation-delay: 0.4s;
}
.businessDetail01-list.showContent .businessDetail01-item:nth-child(4) {
    animation-delay: 0.6s;
}
@keyframes Bu01showContent {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#ourBusinessContent02.ourBusinessDetailCover {
    width: 100%;
}
#ourBusinessContent02 .businessDetail04 {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-top: 240px;
    padding: 0 80px 10px;
}

#ourBusinessContent03.ourBusinessDetailCover {
    width: 100%;
}
#ourBusinessContent03 .businessDetail04 {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-top: 240px;
    padding: 0 80px 10px;
}

#ourBusinessContent04.ourBusinessDetailCover {
    width: 100%;
}
#ourBusinessContent04 .businessDetail04 {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-top: 240px;
    padding: 0 80px 10px;
}
.businessDetail04-list {
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
}
.businessDetail04-list a {
    color: #fff;
}
.businessDetail04-bghover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all 0.2s ease;
    opacity: 0;
}
.businessDetail04-bghover.showHover {
    opacity: 1;
}
.businessDetail04-item {
    position: relative;
    height: 180px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 100;
}
.businessDetail04-item-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    top: 0;
    left: 0;
    opacity: 1;
    transition: all 1s ease;
}
.businessDetail04-item-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(21, 48, 80, 0.75);
    opacity: 0;
    transition: all 0.2s ease;
}
.businessDetail04-item-title {
    position: absolute;
    font-size: 26px;
    line-height: 32px;
    text-transform: uppercase;
    left: 20px;
    bottom: 0;
    z-index: 200;
    padding-bottom: 15px;
    transition: all 1s ease;
    /*transition: all 2s ease;*/
}
.businessDetail04-item-more {
    position: absolute;
    right: 20px;
    bottom: 0px;
    padding-bottom: 15px;
    width: 100px;
    z-index: 200;
    opacity: 0;
    transition: all 0.2s ease;
    transform: translateX(20px);
    font-size: 14px;
}
.businessDetail04-item-more:after {
    position: absolute;
    content: "";
    right: 0px;
    background-color: #fff;
    height: 3px;
    width: 0px;
    top: 10px;
    transition: all 0.2s ease;
}

.businessDetail04-item.itemHover .businessDetail04-item-bg {
    opacity: 0;
}
.businessDetail04-item.itemHover .businessDetail04-item-cover {
    opacity: 1;
}
.businessDetail04-item.itemHover .businessDetail04-item-more {
    opacity: 1;
    transform: translateX(0px);
}
.businessDetail04-item.itemHover .businessDetail04-item-more:after {
    opacity: 1;
    width: 15px;
}

.businessDetail04-item.itemTransparent .businessDetail04-item-bg {
    opacity: 0;
}
.businessDetail04-item.itemTransparent .businessDetail04-item-title {
    opacity: 0;
    /*opacity: .2;*/
}

.businessDetail04-item.flashTransparent .businessDetail04-item-title {
    opacity: 0.4;
    animation-name: blinkTransparent;
    animation-duration: 0.4s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
@keyframes blinkTransparent {
    0% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 0;
    }
}

.businessTitleOnScroll {
    opacity: 0;
    overflow: hidden;
    position: relative;
    height: auto;
    width: 100%;
}
.businessTitleOnScroll span {
    /*display:inline-block;*/
    display: block;
    position: relative;
    color: transparent;
}
.businessTitleOnScroll span::after {
    opacity: 1;
    content: attr(data-descr);
    position: absolute;
    top: 0;
    left: 0;
    color: #153050;
    width: 1000px;
    text-align: left;
}
.businessTitleOnScroll.showTitleMove {
    opacity: 1;
    width: 100%;
    animation-name: titlecome-in;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-delay: 0.5s;
}
@keyframes titlecome-in {
    0% {
        opacity: 0;
        width: 0;
    }
    100% {
        opacity: 1;
        width: 100%;
    }
}

/****************** PROJECT *********************/

.pageProject {
    width: 100%;
}
.projectCarouselArea {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    position: relative;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 1s ease;
    background-size: cover;
    background-position: center;
}
.projectBackBtn {
    position: absolute;
    top: 60px;
    padding-left: 80px;
    display: block;
    color: #fff;
    font-size: 14px;
    width: 160px;
}
.projectBackBtn:hover {
    color: #c5a254;
}
.projectBackBtn::before {
    content: "";
    position: absolute;
    height: 2px;
    width: 55px;
    left: 0px;
    top: 10px;
    background-color: #c5a254;
}
.projectContentArea {
    width: 100%;
    padding: 90px 0 120px;
    color: #000;
    font-size: 20px;
    line-height: 30px;
    font-weight: 300;
}
.projectCarouselThumbArea {
    position: absolute;
    top: 60px;
    height: 90px;
    width: 420px;
    right: 0;
    text-align: right;
}
.projectCarouselInner {
    display: inline-block;
    width: 260px;
    height: 100%;
    position: relative;
}
.projectCarouselInner .owl-carousel .item {
    width: 160px;
    margin-right: 20px;
}
.projectCarouselInner .owl-carousel .item a img {
    border: 3px solid #fff;
}
.projectCarouselInner .owl-nav {
    position: absolute;
    bottom: 0px;
    width: 80px;
    height: 100%;
    right: 0px;
}
.projectCarouselInner .owl-carousel .owl-nav button.owl-next,
.projectCarouselInner .owl-carousel .owl-nav button.owl-prev {
    position: absolute;
    display: block;
    width: 80px;
    height: 100%;
    cursor: pointer;
    outline: none;
}
.projectCarouselInner .owl-carousel .owl-nav button.owl-next:hover,
.projectCarouselInner .owl-carousel .owl-nav button.owl-prev:hover {
    background: none;
    color: #c5a254;
}
.projectCarouselInner .owl-carousel .owl-nav button.owl-next {
    right: 0px;
}
.projectCarouselInner .owl-carousel .owl-nav button.owl-prev {
    left: 0px;
    display: none;
}
.projectCarouselNumber {
    display: inline-block;
    width: 140px;
    padding-right: 36px;
    font-size: 15px;
    font-weight: 200;
}
.projectCarouselNumberCurrent {
    font-size: 45px;
    font-weight: 400;
}
.projectTitle {
    position: absolute;
    width: 100%;
    height: 280px;
    bottom: 0px;
}
.projectLogo {
    display: inline-block;
    width: 280px;
    height: 280px;
    margin-left: 80px;
    background-color: #fff;
}
.projectLogoInner {
    width: 180px;
    display: block;
    margin: 0 auto;
}
.projectName {
    display: inline-block;
    width: 700px;
    height: 280px;
}
.projectNameInner {
    position: absolute;
    /*font-size: 45px;
  line-height: 55px;*/
    font-size: 50px;
    line-height: 60px;
    margin-left: 70px;
    margin-top: 120px;
    text-transform: uppercase;
}
.projectScroll {
    width: 105px;
    position: absolute;
    bottom: 41px;
    right: 100px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    font-size: 13px;
}
.projectScroll::after {
    content: "";
    position: absolute;
    height: 3px;
    width: 35px;
    left: 70px;
    top: 5px;
    background-color: #c5a254;
    animation-name: lineExtendProjectScroll;
    animation-duration: 0.4s;
    animation-iteration-count: 1;
}
@keyframes lineExtendProjectScroll {
    0% {
        width: 0px;
    }
    100% {
        width: 35px;
    }
}

.projectSection {
    padding-bottom: 150px;
}
.projectDetail01 {
    width: 100%;
    padding-top: 50px;
}
.projectTable {
    display: table;
    width: 100%;
}
.projectTableCell {
    display: table-cell;
}
.projectDetail01-left {
    width: 54%;
    position: relative;
}
.projectDetail01-line {
    content: "";
    position: absolute;
    width: 0px;
    height: 10px;
    background-color: #c5a254;
    top: 80px;
    left: calc(100% - 50px);
    transition: all 2s ease;
}
.projectDetail01-line.showOnScroll-in {
    width: 140px;
}
.projectDetail01-right {
    width: 46%;
    vertical-align: middle;
    padding: 0 160px;
}
.projectDetail01-title {
    color: #153050;
    font-size: 54px;
    line-height: 60px;
    font-weight: 200;
    letter-spacing: 2px;
}
.projectDetail01-title span.txtBold {
    display: block;
    font-weight: 400;
}
.projectDetail01-detail {
    padding-top: 40px;
}

.projectContentDetail02 {
    width: 100%;
}
.projectDetail02-img {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
}
.projectDetail02-line {
    content: "";
    position: absolute;
    width: 10px;
    height: 0px;
    background-color: #c5a254;
    top: calc(100% - 70px);
    left: 50px;
    transition: all 2s ease;
}
.projectDetail02-line.showOnScroll-in {
    height: 140px;
}
.projectDetail02-detail {
    padding-top: 100px;
    width: 1440px;
    margin: 0 auto;
}
.projectDetail02-detail .projectTableCell {
    width: 20%;
}
.projectContentDetail02 .projectTableCell {
    padding-left: 40px;
    padding-right: 40px;
}
.projectContentDetail02 .subTitle {
    font-weight: 500;
    display: block;
}

.projectContentDetail03 {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}
.projectDetail03-detail {
    width: 48%;
    vertical-align: middle;
}
.projectDetail03-img {
    width: 52%;
}
.projectDetail03-imgInner {
    width: 100%;
    max-width: 756px;
    position: relative;
}
.projectDetail03-line {
    content: "";
    position: absolute;
    width: 0px;
    height: 10px;
    background-color: #c5a254;
    top: 75px;
    right: calc(100% - 60px);
    transition: all 2s ease;
}
.projectDetail03-line.showOnScroll-in {
    width: 140px;
}
.projectDetail03-title {
    color: #153050;
    font-size: 54px;
    line-height: 60px;
    font-weight: 400;
    letter-spacing: 2px;
}
ul.projectDetail03-list {
    padding-top: 40px;
}

.projectContent-footer {
    width: 100%;
    max-width: 1440px;
    padding-top: 120px;
    font-size: 20px;
    line-height: 30px;
    color: #000;
    font-weight: 300;
    margin: 0 auto;
    border-top: solid #999 1px;
}
.projectContent-address {
    width: 60%;
    display: block;
    float: left;
}
.projectContent-contact {
    width: 300px;
    display: block;
    float: right;
}
.projectContent-address-title {
    font-weight: 500;
}
ul.projectContent-contact-list {
    padding: 0;
}
ul.projectContent-contact-list li span {
    padding-left: 10px;
}
ul.projectContent-contact-list li i {
    display: inline-block;
    transform: translateY(2px);
}
ul.projectContent-contact-list li i.ion-android-laptop {
    margin-left: -4px;
    transform: translate(2px, 2px);
}
ul.projectContent-contact-list li span a {
    color: #000;
}
ul.projectContent-contact-list li span.projectContactWebLink a {
    color: #c5a254;
    font-weight: 400;
}

#trackRegisterThank {
    height: 0;
    width: 0;
    display: none;
    visibility: hidden;
}
.txtError2 {
    border-color: #ff0300 !important;
}
.projectLogoCover {
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
}
.projectLogoOuter {
    width: 180px;
    display: block;
    margin: 0 auto;
}
.projectLogoMiddle {
    width: 0px;
    display: block;
    overflow: hidden;
    text-align: left;
}
.projectLogoMiddle.showOnScroll-in {
    opacity: 1;
    width: 100%;
    animation-name: projectNamecome-in;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

.projectNameOnScroll {
    opacity: 0;
    overflow: hidden;
    position: relative;
    height: auto;
    width: 100%;
}
.projectNameOnScroll span {
    /*display:inline-block;*/
    display: block;
    position: relative;
    color: transparent;
}
.projectNameOnScroll span::after {
    opacity: 1;
    content: attr(data-descr);
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    width: 1000px;
    text-align: left;
}
.projectNameOnScroll.showOnScroll-in {
    opacity: 1;
    width: 100%;
    animation-name: projectNamecome-in;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-delay: 0.6s;
}
.projectNameOnScroll.showOnScroll-in:nth-child(even) {
    animation-delay: 1s;
}
@keyframes projectNamecome-in {
    0% {
        opacity: 0;
        width: 0;
    }
    100% {
        opacity: 1;
        width: 100%;
    }
}

.projectTitleOnScroll {
    opacity: 0;
    overflow: hidden;
    position: relative;
    height: auto;
    width: 100%;
}
.projectTitleOnScroll span {
    /*display:inline-block;*/
    display: block;
    position: relative;
    color: transparent;
}
.projectTitleOnScroll span::after {
    opacity: 1;
    content: attr(data-descr);
    position: absolute;
    top: 0;
    left: 0;
    color: #153050;
    width: 1000px;
    text-align: left;
}
.projectTitleOnScroll.showOnScroll-in {
    opacity: 1;
    width: 100%;
    animation-name: projecttitlecome-in;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
@keyframes projecttitlecome-in {
    0% {
        opacity: 0;
        width: 0;
    }
    100% {
        opacity: 1;
        width: 100%;
    }
}

.projectDetailOnScroll {
    opacity: 0;
}
.projectDetailOnScroll.showOnScroll-in {
    opacity: 1;
    animation-name: projectdetailcome-in;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
.projectDetailOnScroll.showOnScroll-in:nth-child(even) {
    animation-delay: 0.4s;
}
@keyframes projectdetailcome-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

.projectContentDetailDiv {
    /*width: 100%;
  max-width: 1280px;*/
    width: 67%;
    margin: 0 auto;
}
.projectContentDetailDiv-text {
    padding-bottom: 45px;
}
.projectContentClass {
}
.projectContentClass p {
    font-size: inherit;
    color: inherit;
    /* padding-bottom: 40px; */
    /*font-weight: 100;*/
    font-weight: 300;
}
.projectContentClass .contentTItle {
    font-weight: 600;
    padding-bottom: 10px;
    display: block;
}
.projectContentClass .contentHilight {
    font-weight: 600;
}

.projectContentDetailDiv-gallery {
    /*margin-top: 45px;*/
}
.projectDetailCarouselArea {
    width: 100%;
}
.projectDetailCarouselInner {
    width: 100%;
    position: relative;
    padding-bottom: 60px;
}

.projectDetailCarouselInner .owl-carousel .item {
    width: 100%;
    margin-right: 0px;
}
.projectDetailCarouselInner .owl-nav-custom {
    position: absolute;
    bottom: -50px;
    width: 100%;
    left: 50%;
    height: 60px;
    transform: translateX(-50%);
}
.projectDetailCarouselInner .owl-nav-custom button {
    border: none;
    background: transparent;
    color: #153050;
}
.projectDetailCarouselInner .owl-nav-custom button.owl-next,
.projectDetailCarouselInner .owl-nav-custom button.owl-prev {
    font-size: 13px;
    font-weight: 500;
    position: absolute;
    transform: translateY(-4px);
}
.projectDetailCarouselInner .owl-nav-custom button.owl-next:hover,
.projectDetailCarouselInner .owl-nav-custom button.owl-prev:hover {
    background: none;
    color: #c5a254;
}
.projectDetailCarouselInner .owl-nav-custom button.owl-next {
    right: 0px;
}
.projectDetailCarouselInner .owl-nav-custom button.owl-prev {
    left: 0px;
}
.projectDetailCarouselInner .owl-nav-custom button.owl-prev::before {
    content: "";
    position: absolute;
    height: 2px;
    width: 30px;
    right: -35px;
    top: 14px;
    background-color: #c5a254;
}
.projectDetailCarouselInner .owl-nav-custom button.owl-next::before {
    content: "";
    position: absolute;
    height: 2px;
    width: 30px;
    left: -35px;
    top: 14px;
    background-color: #c5a254;
}

.projectNavActivities-dotLine {
    position: relative;
    width: 80%;
    height: 40px;
    transform: translateY(-10px);
    margin: 0 auto;
}
.projectNavActivities-dotLine:before {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: dotted 2px #c5a254;
    top: 50%;
    transform: translateY(-1px);
}
.projectNavActivities-dotLineMove {
    position: absolute;
    width: 18px;
    top: 50%;
    transform: translate(-9px, -2px);
    opacity: 0;
    z-index: 300;
    background-color: #c5a254;
    height: 4px;
}
.projectNavActivities-dot {
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: #c5a254;
    border-radius: 50%;
    display: inline-block;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
    z-index: 400;
    cursor: pointer;
}
.projectNavActivities-dot span {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    color: #fff;
    font-size: 16px;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
}
.projectNavActivities-dot.actived,
.projectNavActivities-dot:hover {
    height: 40px;
    width: 40px;
}
.projectNavActivities-dot.actived span,
.projectNavActivities-dot:hover span {
    opacity: 1;
}

.projectNav-dotLine {
    position: relative;
    width: 80%;
    height: 40px;
    transform: translateY(-10px);
    margin: 0 auto;
}
.projectNav-dotLine:before {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: dotted 2px #c5a254;
    top: 50%;
    transform: translateY(-1px);
}
.projectNav-dotLineMove {
    position: absolute;
    width: 18px;
    top: 50%;
    transform: translate(-9px, -2px);
    opacity: 0;
    z-index: 300;
    background-color: #c5a254;
    height: 4px;
}
.projectNav-dot {
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: #c5a254;
    border-radius: 50%;
    display: inline-block;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
    z-index: 400;
    cursor: pointer;
}
.projectNav-dot span {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    color: #fff;
    font-size: 16px;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
}
.projectNav-dot.actived,
.projectNav-dot:hover {
    height: 40px;
    width: 40px;
}
.projectNav-dot.actived span,
.projectNav-dot:hover span {
    opacity: 1;
}

.projectContentFooter {
    width: 100%;
    background-color: #f3f3f3;
    padding: 100px 0;
}
.projectFooterItem {
    text-align: center;
}
.projectFooterItem-icon {
    display: inline-block;
    height: 50px;
    margin: 0 auto;
    vertical-align: top;
}
.projectFooterItem-link {
    margin-top: 20px;
    color: #153050;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
}
.projectFooterItem-link a {
    color: #153050;
}
.projectFooterItem-link a:hover {
    color: #c5a254;
}

@media (max-width: 1600px) {
    .projectContentArea {
        width: 100%;
        padding: 70px 0 100px;
        font-size: 16px;
        line-height: 26px;
        font-weight: 300;
    }
    .projectTitle {
        position: absolute;
        width: 100%;
        height: 220px;
        bottom: 0px;
    }
    .projectLogo {
        display: inline-block;
        width: 220px;
        height: 220px;
        margin-left: 80px;
        background-color: #fff;
    }
    .projectLogoInner {
        width: 120px;
        display: block;
        margin: 0 auto;
    }
    .projectLogoOuter {
        width: 120px;
    }
    .projectName {
        display: inline-block;
        width: 700px;
        height: 220px;
    }
    .projectNameInner {
        font-size: 45px;
        line-height: 55px;
        margin-left: 50px;
        margin-top: 100px;
    }
    .projectContentDetailDiv {
        width: 67%;
    }
    .projectContentDetailDiv-text {
        padding-bottom: 35px;
    }
    .projectContentDetailDiv-gallery {
        /*margin-top: 35px;*/
    }
    .projectDetailCarouselArea {
        width: 100%;
    }
    .projectDetailCarouselInner {
        width: 100%;
        position: relative;
        padding-bottom: 60px;
    }
    .projectContentFooter {
        width: 100%;
        background-color: #f3f3f3;
        padding: 100px 0;
    }
    .projectFooterItem-icon {
        height: 40px;
    }
    .projectFooterItem-link {
        margin-top: 20px;
        font-size: 16px;
        line-height: 24px;
    }
    .projectFooterItem-link a {
        /*font-size: 16px;*/
    }
}

@media (max-width: 1440px) {
}

@media (max-width: 1366px) {
    .projectContentArea {
        width: 100%;
        padding: 70px 0 100px;
        font-size: 16px;
        line-height: 26px;
        font-weight: 300;
    }
    .projectTitle {
        position: absolute;
        width: 100%;
        height: 200px;
        bottom: 0px;
    }
    .projectLogo {
        display: inline-block;
        width: 200px;
        height: 200px;
        margin-left: 80px;
        background-color: #fff;
    }
    .projectLogoInner {
        width: 100px;
        display: block;
        margin: 0 auto;
    }
    .projectLogoOuter {
        width: 100px;
    }
    .projectName {
        display: inline-block;
        width: 500px;
        height: 200px;
    }
    .projectNameInner {
        font-size: 36px;
        line-height: 46px;
        margin-left: 30px;
        margin-top: 90px;
    }
    .projectContentClass p {
        padding-bottom: 20px;
    }
}

@media (max-width: 1280px) {
}

@media (max-width: 767px) {
    .projectCarouselArea {
        height: 50vh;
    }
    .projectContentArea {
        width: 100%;
        padding: 40px 0 60px;
        font-size: 14px;
        line-height: 24px;
    }
    .projectTitle {
        position: absolute;
        width: 100%;
        height: 120px;
        bottom: 0px;
    }
    .projectLogo {
        display: inline-block;
        width: 120px;
        height: 120px;
        margin-left: 20px;
        background-color: #fff;
    }
    .projectLogoInner {
        width: 70px;
        display: block;
        margin: 0 auto;
    }
    .projectLogoOuter {
        width: 70px;
    }
    .projectName {
        display: inline-block;
        width: 150px;
        height: 120px;
    }
    .projectNameInner {
        font-size: 14px;
        line-height: 20px;
        margin-left: 10px;
        margin-top: 70px;
    }
    .projectScroll {
        width: 105px;
        position: absolute;
        bottom: 41px;
        right: -20px;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
        font-size: 13px;
    }
    .projectContentDetailDiv {
        width: 100%;
        padding: 0 20px;
    }
    .projectContentDetailDiv-text {
        padding-bottom: 20px;
    }
    .projectContentDetailDiv-gallery {
        /*margin-top: 20px;*/
    }
    .projectBackBtn {
        top: 30px;
        padding-left: 60px;
        display: block;
        color: #fff;
        font-size: 14px;
        width: 160px;
        z-index: 9999;
    }
    .projectBackBtn::before {
        width: 45px;
        top: 10px;
    }
    .projectDetailCarouselInner .owl-nav-custom {
        display: block;
        bottom: -30px;
    }
    .projectDetailCarouselInner .owl-nav-custom button.owl-next,
    .projectDetailCarouselInner .owl-nav-custom button.owl-prev {
        visibility: hidden;
    }

    .projectNavActivities-dot span {
        font-size: 12px;
    }
    .projectNavActivities-dot.actived,
    .projectNavActivities-dot:hover {
        height: 30px;
        width: 30px;
    }

    .projectNav-dot span {
        font-size: 12px;
    }
    .projectNav-dot.actived,
    .projectNav-dot:hover {
        height: 30px;
        width: 30px;
    }

    .projectContentFooter {
        padding: 30px 0px;
    }
    .projectFooterItem {
        text-align: left;
    }
    .projectFooterItem-icon {
        display: inline-block;
        height: 20px;
        margin: 0;
        transform: translateY(5px);
    }
    .projectFooterItem-link {
        margin-top: 0px;
        display: inline-block;
        margin-left: 15px;
        font-size: 16px;
        line-height: 24px;
    }
    .projectFooterItem-link a {
        /*font-size: 16px;*/
    }
}

@media (max-width: 325px) {
}

/****** HOME HILIGHT ********/
.bgSection-HomeHilight {
    background-color: #ededed;
    /*background-image: url('../../images/hilight/bg-hilight.jpg');
  background-size: cover;
  background-repeat: no-repeat;*/
    background-position: left center;
}
.projectHilight-full {
    display: none;
}
.projectHilight-left {
    width: 20%;
    height: 100%;
    float: left;
}
.projectHilight-title {
    font-size: 44px;
    color: #153050;
    line-height: 50px;
    font-weight: 300;
    transition: all 1s ease;
    margin-left: 80px;
}
.projectHilight-title span {
    display: block;
    font-weight: 500;
}
.projectHilight-title.titleHilight-moveOut {
    transform: translateX(-1090px);
}
.hilightCarouselArea {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    right: 0;
    background-color: transparent;
    /*  margin-top:180px;*/
}
.hilightCarouselInner {
    width: 100%;
    height: 100%;
    position: relative;
}
.hilightCarouselInner .owl-carousel .item {
    width: 1090px;
    margin-left: 130px;
    margin-right: 130px;
    padding-bottom: 0px;
}
.hilightCarouselInner .owl-carousel .item .itemInner {
    width: 100%;
    height: 100%;
    position: relative;
}
.hilightCarouselInner .hilightCarousel-caption {
    width: 100%;
    /* position: absolute; */
    /* margin: 0 auto; */
    bottom: -20px;
    font-weight: 400;
    z-index: 100;
    text-align: center;
    font-size: 16px;
    line-height: 20px;
    font-weight: 300;
    color: #153050;
    max-width: 1090px;
    left: 50%;
    /* transform: translateX(-50%); */
    transform: translatey(0%);
    margin: 30px auto;
}
.hilightCarouselInner .hilightCarousel-caption .hilightCarousel-caption-item {
    /* position:absolute;
  opacity:0;
  width:100%;
  visibility: hidden;
  margin-bottom: 150px; */
    position: absolute;
    opacity: 0;
    width: 100%;
    visibility: hidden;
    margin-top: 50px;
}
.hilightCarouselInner .hilightCarousel-caption .hilightCarousel-caption-item.notactived {
    visibility: hidden;
    animation-name: captionFadeOutHilight;
    animation-duration: 1s;
    animation-iteration-count: 1;
}
.hilightCarouselInner .hilightCarousel-caption .hilightCarousel-caption-item.actived {
    visibility: visible;
    opacity: 1;
    animation-name: captionFadeInHilight;
    animation-duration: 1s;
    animation-iteration-count: 1;
}
@keyframes captionFadeOutHilight {
    0% {
        opacity: 1;
        top: 0px;
    }
    50% {
        opacity: 0;
        top: 30px;
    }
    100% {
        opacity: 0;
        top: 30px;
    }
}
@keyframes captionFadeInHilight {
    0% {
        opacity: 0;
        top: 30px;
    }
    50% {
        opacity: 0;
        top: 30px;
    }
    100% {
        opacity: 1;
        top: 0px;
    }
}
.hilightCarouselInner .hilightCarousel-caption a {
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
    letter-spacing: 2px;
    text-decoration: underline;
    /*  text-transform: uppercase;*/
    transition: all 0.3s ease-out;
    color: #153050;
}
.hilightCarouselInner .hilightCarousel-caption a:hover {
    color: #c5a254;
}
.hilightCarouselInner .owl-carousel .owl-item .item.nextItem {
    opacity: 0.5;
}
.hilightCarouselInner .owl-nav-custom {
    /* position: absolute; */
    bottom: -150px;
    width: 1090px;
    left: 50%;
    height: 60px;
    transform: translateX(0%);
    margin: 30px auto;
}
.hilightCarouselInner .owl-nav-custom button {
    border: none;
    background: transparent;
    color: #153050;
}
.hilightCarouselInner .owl-nav-custom button.owl-next,
.hilightCarouselInner .owl-nav-custom button.owl-prev {
    font-size: 13px;
    font-weight: 500;
    position: absolute;
}
.hilightCarouselInner .owl-nav-custom button.owl-next:hover,
.hilightCarouselInner .owl-nav-custom button.owl-prev:hover {
    background: none;
    color: #c5a254;
}
.hilightCarouselInner .owl-nav-custom button.owl-next {
    right: -100px;
}
.hilightCarouselInner .owl-nav-custom button.owl-prev {
    left: -100px;
}
.hilightCarouselInner .owl-nav-custom button.owl-prev::before {
    content: "";
    position: absolute;
    height: 2px;
    width: 30px;
    right: -35px;
    top: 10px;
    background-color: #c5a254;
}
.hilightCarouselInner .owl-nav-custom button.owl-next::before {
    content: "";
    position: absolute;
    height: 2px;
    width: 30px;
    left: -35px;
    top: 10px;
    background-color: #c5a254;
}
.hilightCarouselInner .hilightCarouselNumber {
    font-size: 15px;
    font-weight: 200;
    position: absolute;
    width: 480px;
    bottom: 40px; /*default 40px */
    z-index: 100;
    text-align: center;
}
.hilightCarouselInner .hilightCarouselNumber span {
    font-weight: 400;
}
.nav-dotLine {
    position: relative;
    width: 95%;
    height: 40px;
    transform: translateY(-10px);
    margin: 0 auto;
}
.nav-dotLine:before {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: dotted 2px #c5a254;
    top: 50%;
    transform: translateY(-1px);
}
.nav-dotLineMove {
    position: absolute;
    width: 18px;
    top: 50%;
    transform: translate(-9px, -2px);
    opacity: 0;
    z-index: 300;
    background-color: #c5a254;
    height: 4px;
}
.nav-dot {
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: #c5a254;
    border-radius: 50%;
    display: inline-block;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
    z-index: 400;
    cursor: pointer;
}
.nav-dot span {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    color: #fff;
    font-size: 16px;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
}
.nav-dot.actived,
.nav-dot:hover {
    height: 40px;
    width: 40px;
}
.nav-dot.actived span,
.nav-dot:hover span {
    opacity: 1;
}

@media (max-width: 1600px) {
    .projectHilight-title {
        font-size: 44px;
        line-height: 50px;
        margin-left: 80px;
    }
    .projectHilight-title.titleHilight-moveOut {
        transform: translateX(-780px);
    }
    .hilightCarouselArea {
        /*margin-top:160px;*/
        /*    margin-top:180px;*/
    }
    .hilightCarouselInner {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .hilightCarouselInner .owl-carousel .item {
        width: 780px;
        /*margin-left: 130px;
    margin-right: 130px;*/
        margin-left: 100px;
        margin-right: 100px;
        padding-bottom: 0px;
    }
    .hilightCarouselInner .hilightCarousel-caption {
        bottom: -20px;
        font-size: 14px;
    }
    .hilightCarouselInner .hilightCarousel-caption a {
        font-size: 16px;
        line-height: 24px;
    }
    .hilightCarouselInner .owl-nav-custom {
        bottom: -180px;
        width: 780px;
        height: 60px;
    }
    .hilightCarouselInner .owl-nav-custom button.owl-next {
        right: -100px;
    }
    .hilightCarouselInner .owl-nav-custom button.owl-prev {
        left: -100px;
    }
    .hilightCarouselInner .owl-nav-custom button.owl-prev::before {
        content: "";
        position: absolute;
        height: 2px;
        width: 30px;
        right: -35px;
        top: 10px;
        background-color: #c5a254;
    }
    .hilightCarouselInner .owl-nav-custom button.owl-next::before {
        content: "";
        position: absolute;
        height: 2px;
        width: 30px;
        left: -35px;
        top: 10px;
        background-color: #c5a254;
    }
    .hilightCarouselInner .hilightCarouselNumber {
        font-size: 15px;
        font-weight: 200;
        position: absolute;
        width: 480px;
        bottom: 40px; /*default 40px */
        z-index: 100;
        text-align: center;
    }
}

@media (max-width: 1366px) {
    /*
  .hilightCarouselArea {
    margin-top:160px;
  }
*/
    .hilightCarouselInner {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .hilightCarouselInner .owl-carousel .item {
        /*width: 640px;
    margin-left: 130px;
    margin-right: 130px;*/
        width: 620px;
        margin-left: 70px;
        margin-right: 70px;
        padding-bottom: 0px;
    }
    .hilightCarouselInner .hilightCarousel-caption {
        bottom: -14px;
        font-size: 13px;
        line-height: 15px;
    }
    .hilightCarouselInner .hilightCarousel-caption a {
        font-size: 14px;
        line-height: 22px;
    }
    .hilightCarouselInner .owl-nav-custom {
        bottom: -130px;
        width: 640px;
        height: 60px;
    }
    .hilightCarouselInner .owl-nav-custom button.owl-next {
        right: -100px;
    }
    .hilightCarouselInner .owl-nav-custom button.owl-prev {
        left: -100px;
    }
    .hilightCarouselInner .owl-nav-custom button.owl-prev::before {
        content: "";
        position: absolute;
        height: 2px;
        width: 30px;
        right: -35px;
        top: 10px;
        background-color: #c5a254;
    }
    .hilightCarouselInner .owl-nav-custom button.owl-next::before {
        content: "";
        position: absolute;
        height: 2px;
        width: 30px;
        left: -35px;
        top: 10px;
        background-color: #c5a254;
    }
    .hilightCarouselInner .hilightCarouselNumber {
        font-size: 15px;
        font-weight: 200;
        position: absolute;
        width: 480px;
        bottom: 40px; /*default 40px */
        z-index: 100;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .projectHilight-full {
        display: block;
        width: 100%;
        text-align: center;
        padding-top: 90px;
    }
    .projectHilight-full-title {
        font-size: 24px;
        color: #153050;
        line-height: 50px;
        font-weight: 300;
    }
    .projectHilight-full-title span {
        font-weight: 500;
    }
    .projectHilight-left {
        display: none;
    }
    .hilightCarouselArea {
        width: 100%;
        height: calc(100% - 140px);
        margin-top: 0px;
    }
    .hilightCarouselInner {
        width: 100%;
        height: auto;
        position: absolute;
        top: 15%;
    }
    .hilightCarouselInner .owl-carousel .item {
        width: 280px;
        margin-left: 10px;
        margin-right: 10px;
        padding-bottom: 0px;
    }
    .hilightCarouselInner .owl-carousel .item .itemInner {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .hilightCarouselInner .hilightCarousel-caption {
        bottom: -30px;
    }
    .hilightCarouselInner .hilightCarousel-caption a {
        font-size: 14px;
        line-height: 22px;
    }
    .hilightCarouselInner .owl-carousel .owl-item .item.nextItem {
        opacity: 0.5;
    }
    .hilightCarouselInner .owl-nav-custom {
        position: absolute;
        bottom: -160px;
        width: calc(100% - 40px);
        left: 50%;
        height: 60px;
        transform: translateX(-50%);
    }
    .hilightCarouselInner .owl-nav-custom button.owl-next,
    .hilightCarouselInner .owl-nav-custom button.owl-prev {
        font-size: 12px;
        font-weight: 500;
        position: absolute;
    }
    .hilightCarouselInner .owl-nav-custom button.owl-next:hover,
    .hilightCarouselInner .owl-nav-custom button.owl-prev:hover {
        background: none;
        color: #c5a254;
    }
    .hilightCarouselInner .owl-nav-custom button.owl-next {
        display: none;
    }
    .hilightCarouselInner .owl-nav-custom button.owl-prev {
        display: none;
    }
    .hilightCarouselInner .owl-nav-custom button.owl-prev::before {
        display: none;
    }
    .hilightCarouselInner .owl-nav-custom button.owl-next::before {
        display: none;
    }
    .nav-dotLine {
        /* position: relative;
    width: 95%;
    height: 40px;
    transform: translateY(-10px);
    margin: 0 auto; */
        width: 1090px;
        left: 50%;
        height: 60px;
        transform: translateX(0%);
        margin: 30px auto;
        margin-top: -20px;
    }
    .nav-dotLineMove {
        position: absolute;
        width: 5px;
        top: 50%;
        transform: translate(-9px, -2px);
        opacity: 0;
        z-index: 300;
        background-color: #c5a254;
        height: 4px;
    }
    .nav-dot {
        height: 10px;
        width: 10px;
    }
    .nav-dot span {
        font-size: 12px;
    }
    .nav-dot.actived,
    .nav-dot:hover {
        height: 30px;
        width: 30px;
    }
    .nav-dot.actived span,
    .nav-dot:hover span {
        opacity: 1;
    }
}

@media (max-width: 325px) {
    .hilightCarouselInner .owl-carousel .item {
        width: 240px;
        margin-left: 10px;
        margin-right: 10px;
    }
}

/****** LATEST NEWS *******/
.bgSection-LatestNews {
    background-color: #ededed;
    /*overflow: hidden;*/
}
.latestNews-full {
    display: none;
}
.latestNews-left {
    width: 20%;
    /*height: 100%;*/
    height: 100vh;
    padding-left: 80px;
    float: left;
}
.latestNews-right {
    width: 80%;
    /*height: 100%;*/
    height: 100vh;
    float: left;
}
.latestNews-title {
    font-size: 44px;
    color: #153050;
    line-height: 50px;
    font-weight: 300;
}
.sustainabilityOverview .latestNews-title {
    font-size: 40px;
    line-height: 46px;
}
.latestNews-title span {
    display: block;
    font-weight: 500;
}
.latestNews-title span.inlineBlock {
    display: inline-block;
}
.latestNews-title.colorWhite {
    color: #fff;
}
.latestNews-readAll {
    margin-top: 20px;
    position: relative;
    width: 130px;
}
.latestNews-readAll a {
    font-size: 16px;
    color: #c5a254;
}
.latestNews-readAll::after {
    content: "";
    position: absolute;
    left: 120px;
    width: 15px;
    height: 3px;
    top: 11px;
    background-color: #c5a254;
}
.latestNews-listArea {
    height: calc(100% - 200px);
    margin-top: 200px;
    position: relative;
    padding-left: 20px;
    overflow-y: scroll;
}
.latestNews-listAreaInner {
    width: 100%;
    /*height: 1396px;*/
    padding-bottom: 92%;
    position: relative;
}

.latestNews-listArea::-webkit-scrollbar {
    width: 0 !important;
}
.latestNews-listArea {
    -ms-overflow-style: none;
}
.latestNews-listArea {
    overflow: -moz-scrollbars-none;
}

.latestNews-listArea .stamp {
    position: absolute;
    width: 26%;
}
.latestNews-listArea .stamp1 {
    left: 2%;
    height: 200px;
}
.latestNews-listArea .stamp2 {
    right: 2%;
    height: 120px;
}
.latestNews-listArea .latestNews-listItem {
    width: 26%;
    cursor: pointer;
    padding-bottom: 70px;
    margin: 0 2% 0;
    float: left;
}
.latestNews-listArea .latestNews-itemInner {
    position: relative;
    width: 100%;
}
.latestNews-listArea .latestNews-itemInner:before {
    content: "";
    display: block;
    padding-top: 0;
}
.latestNews-listArea .latestNews-listContent {
    position: static;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
}
.latestNews-listImgArea {
    position: static;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: all 0.4s ease;
}
.latestNews-listArea .latestNews-listImg {
    width: 100%;
    position: static;
    top: 0px;
    z-index: 50;
    /* height: 380px; */
}
.latestNews-listImgCover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 100;
    opacity: 0;
    transition: all 0.4s ease;
}
.latestNewsOnScroll-1,
.latestNewsOnScroll-2 {
    opacity: 0;
}
.latestNewsOnScroll-1.showOnScroll-in,
.latestNewsOnScroll-2.showOnScroll-in {
    opacity: 1;
    animation-name: detailcome-in;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
@keyframes detailcome-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

.latestNews-listArea .latestNews-listItem.defaultHover .latestNews-listImgArea,
.latestNews-listArea .latestNews-listItem.mobileHOver .latestNews-listImgArea,
.latestNews-listArea .latestNews-listItem:hover .latestNews-listImgArea {
    /*transform: scale(.95);*/
    transform: scale(1);
}
.latestNews-listArea .latestNews-listItem.defaultHover .latestNews-listImgCover,
.latestNews-listArea .latestNews-listItem.mobileHOver .latestNews-listImgCover,
.latestNews-listArea .latestNews-listItem:hover .latestNews-listImgCover {
    opacity: 1;
}
.latestNews-TitleArea {
    position: absolute;
    z-index: 200;
    width: 100%;
    height: 50px;
    text-align: center;
    bottom: -40px;
    transition: all 0.4s ease;
    color: #153050;
}
/*.latestNews-TitleLine {
  height: 20px;
}
.latestNews-TitleLine:before {
  content:"";
  position: absolute;
  width: 1px;
  height: 20px;
  background-color: #c5a254;
  top: 0px;
  left: 50%;
}*/
.latestNews-TitleLine {
    height: 1px;
}
.latestNews-TitleLine:before {
    content: "";
    position: absolute;
    width: 40px;
    height: 1px;
    background-color: #c5a254;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 30px);
}
.latestNews-TitleText {
    font-size: 14px;
}
.latestNews-TitleArea.moveTitle {
    bottom: 25%;
    color: #fff;
}
.latestNews-listDetail {
    position: absolute;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    width: 100%;
    /*padding: 0 18%;*/
    padding: 0 2%;
    transition: all 0.5s ease;
    /*top:100%;
  opacity: 0;*/
    top: 78%;
    opacity: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.latestNews-listArea .latestNews-listItem.mobileHOver .latestNews-listDetail,
.latestNews-listArea .latestNews-listItem:hover .latestNews-listDetail {
    top: 76%;
    opacity: 1;
}

.homeLastestNews {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

@media (max-width: 1600px) {
    .latestNews-left {
        width: 20%;
        padding-left: 80px;
        float: left;
    }
    .latestNews-right {
        width: 80%;
        float: left;
    }
    .latestNews-title {
        font-size: 44px;
        line-height: 50px;
    }
    .sustainabilityOverview .latestNews-title {
        font-size: 34px;
        line-height: 40px;
    }
    .latestNews-readAll {
        margin-top: 20px;
        width: 130px;
    }
    .latestNews-readAll a {
        font-size: 16px;
        color: #c5a254;
    }
    .latestNews-listArea {
        height: calc(100% - 200px);
        margin-top: 200px;
    }
    .latestNews-listArea .latestNews-listItem {
        width: 26%;
        padding-bottom: 50px;
    }
    .latestNews-TitleArea {
        height: 50px;
        bottom: -40px;
    }
    .latestNews-TitleText {
        font-size: 14px;
    }
    .latestNews-listDetail {
        font-size: 14px;
        line-height: 20px;
    }
}

@media (max-width: 1366px) {
    .latestNews-left {
        padding-left: 40px;
    }
    .latestNews-title {
        font-size: 40px;
        line-height: 46px;
    }
    .sustainabilityOverview .latestNews-title {
        font-size: 28px;
        line-height: 34px;
    }
    .latestNews-listArea {
        height: calc(100% - 140px);
        margin-top: 140px;
    }
}

@media (max-width: 1280px) {
    .latestNews-TitleText {
        font-size: 12px;
    }
    .latestNews-listDetail {
        font-size: 12px;
        line-height: 18px;
    }
}

@media (max-width: 767px) {
    .latestNews-full {
        display: block;
        width: 100%;
        text-align: center;
        padding-top: 90px;
    }
    .latestNews-full-title {
        font-size: 24px;
        color: #153050;
        /*line-height: 50px;*/
        line-height: 30px;
        font-weight: 300;
    }
    .latestNews-full-title span {
        font-weight: 500;
    }
    .latestNews-full-title.colorWhite {
        color: #fff;
    }
    .latestNews-left {
        display: none;
    }
    .latestNews-right {
        width: 100%;
        height: auto;
        float: none;
    }
    .latestNews-listArea {
        height: calc(100% - 140px);
        margin-top: 20px;
        position: relative;
        padding-left: 20px;
        padding-right: 20px;
        overflow-y: scroll;
    }

    .latestNews-listArea .stamp {
        display: none;
    }
    .latestNews-listArea .latestNews-listItem {
        width: 96%;
        cursor: pointer;
        padding-bottom: 70px;
        margin: 0 2% 0;
    }
    .latestNews-listArea .latestNews-itemInner {
        position: relative;
        width: 100%;
    }
    /*
  .latestNews-listArea .latestNews-itemInner:before {
    content: "";
    display: block;
    padding-top: 130%;
  }
*/
    /*
  .latestNews-listArea .latestNews-listContent {
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
  }
*/
    /*
  .latestNews-listImgArea {
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: all .4s ease;
  }
*/
    .latestNews-listArea .latestNews-listImg {
        height: auto;
    }
    .latestNews-listArea .latestNews-listImg img {
        margin: auto;
    }
    .homeScrollArea {
        bottom: 40px;
    }
}

/****** DETAIL PAGE *******/
.detailPage {
    width: 100%;
}
.detailPageSection {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.detailPageSection.f-auto {
    height: fit-content;
    margin-top: 120px;
}

.detailPageSection.f-auto .detailContentBox {
    position: relative;
    top: initial;
    transform: initial;
}

.bg_aboutusOverview {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/aboutus/bg_overview.jpg");
}
.bg_aboutusProfile {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/aboutus/bg_profile.jpg");
}
.bg_aboutusVisionSection1 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/aboutus/bg_vision01.jpg");
}
.bg_aboutusVisionSection2 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/aboutus/bg_vision02.jpg");
}
.bg_aboutusCulture {
    /*width: 100%;
  height: 100%;*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/aboutus/bg_culture_new.jpg");
    transition: all 0.6s ease;
}
.bg_aboutusCulture.charPos1 {
    background-image: url("../../images/aboutus/bg_pride_1.jpg");
}
.bg_aboutusCulture.charPos2 {
    background-image: url("../../images/aboutus/bg_pride_2.jpg");
}
.bg_aboutusCulture.charPos3 {
    background-image: url("../../images/aboutus/bg_pride_3.jpg");
}
.bg_aboutusCulture.charPos4 {
    background-image: url("../../images/aboutus/bg_pride_4.jpg");
}
.bg_aboutusCulture.charPos5 {
    background-image: url("../../images/aboutus/bg_pride_5.jpg");
}
.bg_aboutusBrandSection1 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/aboutus/bg_brand01.jpg");
}
.bg_aboutusBrandSection2 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/aboutus/bg_brand02.jpg");
}
.bg_aboutusBrandSection3 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/aboutus/bg_brand03.jpg");
}
.bg_aboutusTimeline {
    width: 100%;
    height: 100vh;
    position: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/aboutus/bg_timeline.jpg");
}
.bg_businessOverviewSection1 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/business/bg_overview01.jpg");
}
.bg_businessCommercial {
    width: 100%;
    height: 100vh;
    position: fixed;
    /*background-size: cover;
  background-position: center;*/
    background-size: cover;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-image: url("../../images/business/bg_overview02-1.jpg");
}
.bg_businessCommercialSection2 {
    background-color: rgba(255, 255, 255, 0.9);
}
.bg_businessHospitality {
    width: 100%;
    height: 100vh;
    position: fixed;
    /*background-size: cover;
  background-position: center;*/
    background-size: auto;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-image: url("../../images/business/bg_overview02-2.jpg");
}
.bg_businessHospitalitySection2 {
    background-color: rgba(255, 255, 255, 0.9);
}
.bg_businessResidentail {
    width: 100%;
    height: 100vh;
    position: fixed;
    /*background-size: cover;
  background-position: center;*/
    background-size: cover;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-image: url("../../images/business/bg_overview02-3.jpg");
}
.bg_businessResidentailSection2 {
    background-color: rgba(255, 255, 255, 0.9);
}
.bg_businessCrossroad {
    width: 100%;
    height: 100vh;
    position: fixed;
    /*background-size: cover;
  background-position: center;*/
    background-size: auto;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-image: url("../../images/business/bg_overview02-4.jpg");
}
.bg_businessCrossroadSection2 {
    background-color: rgba(255, 255, 255, 0.9);
}

.bg_careerWorkWithUs {
    width: 100%;
    height: 100vh;
    position: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/career/bg_work_with_us.jpg");
}
.bg_careerWorkWithUsSection2 {
    background-color: rgba(35, 35, 35, 0.9);
}

.detailBanner-text {
    position: absolute;
    z-index: 550;
    top: calc(50% - 80px);
    width: 100%;
    text-align: center;
    letter-spacing: 2px;
    font-size: 40px;
    line-height: 45px;
}
.detailBanner-text-white {
    /*font-weight: 500;*/
    font-weight: 400;
    color: #fff;
    padding: 0 2px;
    text-transform: uppercase;
}
.detailBanner-text-orange {
    font-weight: 200;
    color: #c5a254;
    padding: 0 2px;
}
.detailBanner-text-caption {
    display: inline-block;
    color: #fff;
    font-weight: 200;
    font-size: 16px;
    line-height: 20px;
    max-width: 400px;
    margin: 30px auto;
}
.bg_aboutusOverview .detailBanner-text-caption,
.bg_aboutusProfile .detailBanner-text-caption {
    max-width: 800px;
}
.detailBanner-text .afterNewLine::after {
    content: "\A";
    white-space: pre;
}
.detailBanner .detailBanner-text span {
    opacity: 0;
    margin-left: -50px;
    animation-name: detailBannerTextShow;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

.detailBanner .detailBanner-text span:nth-child(2) {
    animation-delay: 1.5s;
}
.detailBanner .detailBanner-text span:nth-child(3) {
    animation-delay: 3s;
}
.detailBanner .detailBanner-text span:nth-child(4) {
    animation-delay: 4.5s;
}
.detailBanner .detailBanner-text span:nth-child(5) {
    animation-delay: 6s;
}
.detailBanner .detailBanner-text span:nth-child(6) {
    animation-delay: 7.5s;
}

@keyframes detailBannerTextShow {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        margin-left: 0px;
    }
}

.detailBanner .detailBanner-btn {
    position: absolute;
    z-index: 550;
    top: calc(50% + 90px);
    width: 100%;
    text-align: center;
}
.detailBanner .detailBanner-btn .btnDetailBanner {
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    padding: 15px 30px;
    border-radius: 0px;
    background-color: rgba(0, 0, 0, 0.25);
    border: solid 1px #c5a254;
}
.detailBanner .detailBanner-btn .btnDetailBanner:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.detailPageNav {
    position: fixed;
    bottom: 40px;
    /*width: 1212px;*/
    width: 64%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 120;
}
.detailPageNav.pageAboutUs {
    width: 80%;
}
.detailPageNav.pageBusiness {
    width: 50%;
}
.detailPageNav.pageContact {
    /*width: 64%;*/
    width: 20%;
}
.detailPageNav.pageCareer {
    /*width: 30%;*/
    width: 20%;
}
.detailPageNav.pageSustainability {
    width: 30%;
}
.detailPageNav.positionAbsolute {
    position: absolute;
}
.detailPageNav.positionSetSpecialAbsolute {
    position: absolute;
}
.detailPageNav.moveupShow {
    animation-name: detailPageNavMoveUpShow;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
@keyframes detailPageNavMoveUpShow {
    0% {
        opacity: 0;
        bottom: 0px;
    }
    100% {
        opacity: 1;
        bottom: 40px;
    }
}

.forceDetailNavAbsolute .detailPageNav,
.forceDetailNavAbsolute .detailPageNav.positionAbsolute {
    position: absolute;
}
.detailNav-dotLine {
    position: relative;
    width: 100%;
    height: 40px;
    transform: translateY(-10px);
    margin: 0 auto;
    bottom: -10px;
}
.detailNav-dotLine:before {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: dotted 2px #c5a254;
    top: 50%;
    transform: translateY(-1px);
}
.detailNav-dotLineMove {
    position: absolute;
    width: 18px;
    top: 50%;
    transform: translate(-9px, -2px);
    opacity: 0;
    z-index: 300;
    background-color: #c5a254;
    height: 4px;
}
.detailNav-dot {
    position: absolute;
    height: 40px;
    width: 40px;
}
.detailNav-dot-circle {
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: #c5a254;
    border-radius: 50%;
    display: inline-block;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
    z-index: 400;
    cursor: pointer;
}
.detailNav-dot-circle span {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    color: #fff;
    font-size: 16px;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
}
.detailNav-dot.actived .detailNav-dot-circle,
.detailNav-dot:hover .detailNav-dot-circle {
    height: 40px;
    width: 40px;
}
.detailNav-dot.actived .detailNav-dot-circle span,
.detailNav-dot:hover .detailNav-dot-circle span {
    opacity: 1;
}
.detailNavAbout .detailNav-dot1 {
    left: 0;
}
.detailNavAbout .detailNav-dot2 {
    /*left: 15%;*/
    left: 17%;
}
.detailNavAbout .detailNav-dot3 {
    /*left: 28%;*/
    left: 34%;
}
.detailNavAbout .detailNav-dot4 {
    /*left: 42%;*/
    left: 52%;
}
.detailNavAbout .detailNav-dot5 {
    /* left: 55%; */
    left: 68%;
}
.detailNavAbout .detailNav-dot6 {
    /*left: 70%;*/
    left: 84%;
}
.detailNavAbout .detailNav-dot7 {
    /*left: 84%;*/
    left: 100%;
}
.detailNavAbout .detailNav-dot8 {
    left: 100%;
}

.detailNavBusiness .detailNav-dot1 {
    left: 0;
}
.detailNavBusiness .detailNav-dot2 {
    /*left: 25%;*/
    left: 25%;
}
.detailNavBusiness .detailNav-dot3 {
    /*left: 50%;*/
    left: 50%;
}
.detailNavBusiness .detailNav-dot4 {
    /*left: 75%;*/
    left: 75%;
}
.detailNavBusiness .detailNav-dot5 {
    left: 100%;
}

.detailNavContact .detailNav-dot1 {
    left: 0;
}
.detailNavContact .detailNav-dot2 {
    left: 20%;
}
.detailNavContact .detailNav-dot3 {
    left: 40%;
}
.detailNavContact .detailNav-dot4 {
    left: 60%;
}
.detailNavContact .detailNav-dot5 {
    left: 80%;
}
.detailNavContact .detailNav-dot6 {
    left: 100%;
}

.detailNavCareer .detailNav-dot1 {
    left: 0;
}
.detailNavCareer .detailNav-dot2 {
    /*left: 50%;*/
    left: 100%;
}
.detailNavCareer .detailNav-dot3 {
    /*left: 100%;*/
}

.detailNavSustainability .detailNav-dot1 {
    left: 0;
}
.detailNavSustainability .detailNav-dot2 {
    left: 50%;
}
.detailNavSustainability .detailNav-dot3 {
    left: 100%;
}

.detailNavCaption {
    position: absolute;
    bottom: 40px;
    left: 50%;
    /*transform: translateX(calc(-50% - 20px));*/
    transform: translateX(-50%);
    margin-left: -20px;
    /*width: 200px;*/
    width: 220px;
    text-align: center;
    transition: all 0.4s ease;
    text-transform: uppercase;
    font-weight: 500;
}
.detailNavCaption.colorBlue {
    color: #153050;
}

.detailPageSection {
    position: relative;
}
.detailContentBox {
    font-family: "Singhaestate", "Prompt", sans-serif;
    font-size: 18px;
    color: #fff;
    padding-bottom: 50px;
    position: absolute;
    top: calc(50% + 20px);
    transform: translate(0, -50%);
}
.detailContentBoxLeft {
    max-width: 560px;
    width: 29%;
    left: 12%;
}
.detailContentBoxLeft.forTimeline {
    max-width: 640px;
    width: 37%;
    left: 8%;
}
.detailContentBoxLeft.forCommercial {
    max-width: 800px;
    width: 42%;
}
.detailContentBoxLeft.forSustainability {
    width: 50%;
    left: 8%;
}
.detailContentBoxRight {
    max-width: 720px;
    width: 37%;
    right: 12%;
}
.detailContentBoxRight.forTimeline {
    max-width: 640px;
    width: 33%;
}
.detailContentBox-title {
    font-size: 50px;
    line-height: 50px;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.detailContentBox-title span {
    font-weight: 600;
}
.detailContentBox-title span.fontThin {
    font-weight: 300;
}
.detailContentBox-detail {
    margin-bottom: 40px;
    font-weight: 300;
    padding-right: 20px;
    line-height: 26px;
}
.detailContentBox-detail-thin {
    font-weight: 100;
    font-weight: 300;
}
.detailContentBoxLeft.forSustainability .detailContentBox-detail {
    width: 70%;
}
.textGold {
    color: #c5a254;
}
.detailContentImgLeft {
    width: 37%;
    left: 8%;
}
.detailContentBoxFull {
    width: 100%;
}
.detailContentBoxFullInner {
    width: 75%;
    margin: 0 auto;
    position: relative;
}
.detailContentBoxFullInnerBusiness {
    max-width: 1600px;
    width: 84%;
    margin: 0 auto;
    position: relative;
    font-family: "Singhaestate", "Prompt", sans-serif;
}
.detailContentBoxFullInnerAboutus {
    width: 100%;
    padding: 0 80px;
    margin: 0 auto;
    position: relative;
}

.detailContentBox-scroll {
    font-size: 14px;
    font-weight: 300;
}
.detailContentBox-scrollText {
    display: inline-block;
    padding-left: 20px;
    transform: translateY(-15px);
}
.detailContentBox-scrollLine {
    position: relative;
    display: inline-block;
    width: 1px;
    height: 40px;
    background-color: transparent;
    margin: 0 auto;
    overflow: hidden;
}
.detailContentBox-scrollLine::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 20px;
    background-color: #c5a254;
    top: 0;
    animation-name: detailScrollBounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes detailScrollBounce {
    0% {
        transform: translateY(-15px);
    }
    45% {
        transform: translateY(30px);
    }
    50% {
        transform: translateY(35px);
    }
    100% {
        transform: translateY(-15px);
    }
}

.detailContentBoxLocation {
    position: absolute;
    left: 12%;
    z-index: 10;
}
.detailContentBoxLocation .detailContentBox-title {
    color: #153050;
}
.detailLocationDiv {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.detailLocationImg {
    transform: translateY(-5%);
}
.detailLocationDiv .imgMapControl {
}
.detailLocationDiv .popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    width: 400px;
    max-width: unset;
    padding: 40px 20px;
    text-align: center;
    background-color: #fff;
    color: #153050;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: none;
    border-radius: 0px;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    font-size: 14px;
    /*transform: translate(-50%,-100%);*/
    transform: translate(-50%, -125%);
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
.detailLocationDiv .popover.top {
    margin-top: 0px;
}
.detailLocationDiv .popover a {
    color: #c5a254;
}
.detailLocationDiv .popover-title {
    padding: 0 0 15px;
    margin: 0;
    font-size: 24px;
    line-height: 28px;
    font-weight: 400;
    color: #153050;
    border-bottom: none;
    border-radius: 0px;
    background-color: transparent;
    text-transform: uppercase;
}
.detailLocationDiv .popover-content {
    padding: 0 0px;
}
.detailLocationDiv .popover.top > .arrow {
}
.detailLocationDiv .popover.top > .arrow:after {
    display: none;
}

.mapHopitality .detailLocationImg {
    transform: translateY(-1%);
}
.detailLocationDiv.mapHopitality .popover {
    transform: translate(-50%, -105%);
}

.detailSectionSideNav {
    width: 1px;
    position: fixed;
    right: 4%;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 100;
}
.detailSectionSideNavItem {
    position: relative;
    display: block;
    /*background-color:#fff;*/
    background-color: transparent;
    height: 80px;
    width: 8px;
    margin-bottom: 20px;
    cursor: pointer;
}
.detailSectionSideNavItem:after {
    content: "";
    position: absolute;
    display: block;
    background-color: #fff;
    height: 80px;
    /*width: 2px;*/
    width: 3px;
    left: 3px;
    top: 0px;
}
.detailSectionSideNavItem.colorGrey:after {
    background-color: rgba(0, 0, 0, 0.25);
}
.detailSectionSideNavItem.actived:after {
    background-color: #c5a254;
}

.aboutCultureContent {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translate(0, -50%);
    text-transform: uppercase;
    height: 150px;
}
.cultureText {
    display: inline-block;
    height: 100%;
    font-size: 230px;
    margin: 0 40px;
    transition: all 0.6s ease;
    cursor: pointer;
}
.cultureTextMeaning {
    display: inline-block;
    position: relative;
    width: 0px;
    transition: all 0.6s ease;
    font-size: 22px;
    line-height: 22px;
    overflow: hidden;
    text-align: left;
    height: 100%;
    color: transparent;
    transform: translate(20px, calc(50% - 12px));
}
.cultureTextMeaning::after {
    opacity: 1;
    content: attr(data-descr);
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-size: 24px;
    width: 400px;
    text-align: left;
    height: 100%;
}
.cultureText.dropOpacity {
    opacity: 0.2;
}

.cultureText:hover {
    margin: 0 0 0 40px;
}
.cultureText:hover .cultureTextMeaning.text1 {
    width: 180px;
}
.cultureText:hover .cultureTextMeaning.text2 {
    width: 120px;
}
.cultureText:hover .cultureTextMeaning.text3 {
    width: 140px;
}
.cultureText:hover .cultureTextMeaning.text4 {
    width: 120px;
}
.cultureText:hover .cultureTextMeaning.text5 {
    width: 240px;
}
.aboutCultureRemark {
    text-align: center;
    font-size: 16px;
    position: absolute;
    width: 100%;
    top: calc(50% + 150px);
}

.timelineDisplayLeft {
    width: 40%;
    float: left;
    position: relative;
    font-size: 130px;
    line-height: 120px;
}
.timelineDisplayLeftInner {
    margin-top: 50%;
    transform: translateY(-50%);
}
.timelineDisplayLeftInner span {
    display: inline-block;
    width: 82px;
    text-align: center;
}
.timelineDisplayRight {
    width: 60%;
    float: left;
    position: relative;
}
.timelineYearDisplay {
    display: inline-block;
}
.timelineYearDisplay.yearTo {
    display: block;
    transform: translateY(-30px);
}
.timelineToDisplay {
    display: inline-block;
    font-size: 40px;
}
.timelineNavYear {
    width: 100%;
    height: 60px;
    padding: 18px 0px;
    background-color: rgba(0, 0, 0, 0.25);
    text-align: center;
}
.timelineNavYear ul li {
    display: inline-block;
    padding: 0 10px;
    font-size: 16px;
    cursor: pointer;
}
.timelineNavYear ul li,
.timelineNavYear ul li a {
    color: #fff;
}
.timelineNavYear ul li.actived,
.timelineNavYear ul li.actived a {
    color: #c5a254;
}
.historyDetail {
    width: 100%;
    height: auto;
}
.timelineDetail {
    width: 100%;
    height: 450px;
    margin-top: 50px;
    padding: 0px 40px;
    font-size: 18px;
    overflow-y: scroll;
    display: none;
}
.timelineDetail.actived {
    display: block;
}
.timelineDetail-title {
    color: #c5a254;
    text-transform: uppercase;
}
.timelineDetail-detail {
    /*font-weight: 100;*/
    font-weight: 300;
    padding-bottom: 20px;
}
.timelineDetail-detail ul {
    list-style: disc outside;
    padding: 10px 10px 10px 20px;
}
.timelineDetail-detail ul li {
    padding-bottom: 10px;
}
.timelineDetail-detail .subTitle {
    font-weight: 500;
}

/* width */
.historyDetail::-webkit-scrollbar,
.timelineDetail::-webkit-scrollbar {
    width: 2px;
    cursor: pointer;
}
/* Track */
.historyDetail::-webkit-scrollbar-track,
.timelineDetail::-webkit-scrollbar-track {
    background: #000;
    cursor: pointer;
}
/* Handle */
.historyDetail::-webkit-scrollbar-thumb,
.timelineDetail::-webkit-scrollbar-thumb {
    background: #c5a254;
    cursor: pointer;
}
/* Handle on hover */
.historyDetail::-webkit-scrollbar-thumb:hover,
.timelineDetail::-webkit-scrollbar-thumb:hover {
    background: #c5a254;
}

.pageAboutusChairman {
    background-color: #ededed;
}
.pageAboutusChairman.bg_white {
    background-color: #ffffff;
}
.chairmanImg {
    /*width: 80%;*/
    width: 90%;
}
.chairmanDetail {
    width: 100%;
    height: 550px;
    padding: 0px 40px;
    font-size: 18px;
    /*font-weight: 100;*/
    font-weight: 300;
    color: #153050;
    overflow-y: scroll;
    padding-top: 0px;
}
.chairmanDetail-title {
    font-weight: 500;
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.chairmanDetail p {
    font-size: 18px;
    /*font-weight: 100;*/
    font-weight: 300;
    color: #153050;
    margin-bottom: 20px;
}
.chairmanDetail span {
    font-weight: 500;
}
.chairmanDetail ul {
    list-style: disc;
    list-style-position: inside;
}
.chairmanDetail ul li {
    font-family: "Singhaestate", "Prompt", sans-serif;
    margin-bottom: 10px;
}
/* width */
.chairmanDetail::-webkit-scrollbar {
    width: 2px;
    cursor: pointer;
}
/* Track */
.chairmanDetail::-webkit-scrollbar-track {
    background: #ccc;
    cursor: pointer;
}
/* Handle */
.chairmanDetail::-webkit-scrollbar-thumb {
    background: #c5a254;
    cursor: pointer;
}
/* Handle on hover */
.chairmanDetail::-webkit-scrollbar-thumb:hover {
    background: #c5a254;
}
.timelineDisplayLeft.aboutusLeftDiv {
    width: 25%;
    height: 500px;
}
.timelineDisplayRight.aboutusRightDiv {
    width: 75%;
}
.aboutusLeftDivInner {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.aboutusLeftDivInner .detailContentBox-title {
    color: #153050;
}
.aboutusRightDiv .chairmanDetail {
    padding: 0 0px;
    padding-top: 0px;
}
.chairmanDetail.structureDetail {
    height: fit-content;
}
.aboutusStructureImg {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.aboutusStructureEnlargeArea {
    text-align: center;
    margin-top: 20px;
    cursor: pointer;
}
.aboutusStructureEnlargeTxt {
    display: inline-block;
    font-size: 16px;
    color: #c5a254;
}
.aboutusStructureEnlargeIcon {
    width: 30px;
    display: inline-block;
    transform: translateY(10px);
    margin-left: 12px;
}
.aboutusStructureContentImg {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1067px;
}
.pageAboutusStructure.positionFixed {
    position: fixed;
}

.pageAboutusBoard.positionFixed {
    position: fixed;
}
.pageAboutusStructure .detailContentBoxFullInner {
    /*width: 80%;*/
    width: 85%;
}
.pageAboutusBoard .aboutusLeftDiv {
    height: 570px;
}
.chairmanDetail.boardDetail {
    width: 100%;
    height: 570px;
    padding-right: 15px;
}
.boardContentList {
    display: block;
    margin-top: 0px;
    /*border-top: 10px solid #153050;*/
}
.panel-group.boardContentList .panel {
    margin-bottom: 10px;
    border-radius: 0px;
}
.boardContentList.panel-group .panel + .panel {
    margin-top: 0px;
}
.boardContentList .panel-default {
    border: none;
    box-shadow: none;
    background-color: transparent;
}
.boardContentList .panel-default > .panel-heading {
    color: #153050;
    background-color: #f3f4f6;
    border: none;
    border-radius: 0px;
    position: relative;
    padding: 15px 18px;
}
.boardContentList .panel-title {
    font-family: "Singhaestate", "Prompt", sans-serif;
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 500;
}
.boardContentList .panel-title a {
    width: 100%;
    height: 100%;
}
.boardContentList .panel-default > .panel-heading + .panel-collapse > .panel-body {
    border: none;
    padding: 20px 0 0;
}
.boardContentList .panel-heading .accordion-toggle {
    color: #c5a254;
}
.boardContentList .panel-heading .accordion-toggle.collapsed {
    color: #153050;
}
.boardContentList .panel-heading .accordion-toggle span.ion-android-arrow-dropdown {
    display: none;
    font-size: 22px;
    position: absolute;
    /*top: 7px;*/
    top: 12px;
    right: 15px;
    color: #153050;
}
.boardContentList .panel-heading .accordion-toggle.collapsed span.ion-android-arrow-dropdown {
    display: block;
}
.boardContentList .panel-heading .accordion-toggle span.ion-android-arrow-dropup {
    display: block;
    font-size: 22px;
    position: absolute;
    /*top: 7px;*/
    top: 12px;
    right: 15px;
    color: #c5a254;
}
.boardContentList .panel-heading .accordion-toggle.collapsed span.ion-android-arrow-dropup {
    display: none;
}

.boardItem {
    width: 100%;
    position: relative;
    font-family: "Singhaestate", "Prompt", sans-serif;
    color: #153050;
    height: 210px;
    margin-bottom: 40px;
}
.boardItem-btn {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 32px;
}
.boardItem-img {
    width: 50%;
    float: left;
    border: 1px solid #ddd;
}
.boardItem-detail {
    width: 50%;
    float: left;
    color: #153050;
    padding: 0 30px;
}
.boardItem-detail-name {
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 500;
}
.boardItem-detail-desc {
    font-size: 16px;
    line-height: 18px;
}

.boardDetailFull {
    display: none;
    color: #153050;
    position: absolute;
    width: 100%;
    min-height: 100vh;
    top: 0;
    left: 0;
    /*background-color: #ededed;*/
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 1500;
}
.boardDetailFullInner {
    width: 100%;
    position: relative;
}
.boardDetailFull .projectBackBtn {
    color: #ffffff;
    font-weight: 400;
    top: -60px;
}
.boardDetailArea {
    /*width: 100%;*/
    width: 75%;
    /*max-width: 1318px;*/
    /*max-width: 1440px;*/
    padding: 60px 80px;
    margin: 120px auto 0px;
    background-color: #ededed;
}
.boardDetail-header {
    padding-bottom: 30px;
    border-bottom: 8px solid #153050;
    color: #153050;
    text-transform: uppercase;
}
.boardDetail-name {
    font-size: 45px;
    line-height: 45px;
    font-weight: 500;
    margin-bottom: 15px;
}
.boardDetail-title {
    font-size: 22px;
    font-weight: 500;
}
.boardDetail-content {
    padding-top: 6px;
    font-size: 18px;
    line-height: 24px;
    color: #153050;
    font-weight: 300;
}
.boardDetail-content .content-subject {
    position: relative;
    font-weight: 500;
    padding-left: 15px;
    margin-top: 24px;
}
.boardDetail-content .content-subject-main {
    position: relative;
    font-weight: 500;
    padding-left: 15px;
    text-transform: uppercase;
    margin-top: 24px;
}
.boardDetail-content .content-subject-main:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 3px;
    height: 10px;
    background-color: #c5a254;
}
.boardDetail-content .content-detail {
    padding-left: 15px;
}
.workExpYear {
    display: inline-block;
    font-weight: bold;
}
.workExpYearList {
    display: inline-block;
}

.timelineDisplayLeft.aboutusLeftDiv.aboutBoardLayout {
    width: 30%;
}
.timelineDisplayRight.aboutusRightDiv.aboutBoardLayout {
    width: 70%;
}
.boardTitleList {
    margin-top: 40px;
}
.boardTitleItem {
    position: relative;
    display: block;
    color: #153050;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
    margin: 14px 0;
    transition: all 0.25s ease;
    padding-left: 0px;
}
.boardTitleItem span {
    color: #153050;
    transition: all 0.25s ease;
    padding-left: 0px;
}
.boardTitleItem:before {
    content: "";
    position: absolute;
    background-color: #c5a254;
    width: 0px;
    height: 2px;
    top: 9px;
    transition: all 0.25s ease;
}
.boardTitleItem:hover span,
.boardTitleItem.actived span {
    color: #c5a254;
    padding-left: 15px;
}
.boardTitleItem:hover:before,
.boardTitleItem.actived:before {
    width: 10px;
}

.boardListThumb {
    display: none;
}
.boardListThumb.actived {
    display: block;
}

.businessOverviewDetail1 {
    width: 100%;
    padding-bottom: 40px;
}
.businessOverviewDetail1-title {
    width: 22%;
    float: left;
    font-size: 44px;
    line-height: 54px;
}
.businessOverviewDetail1-detail {
    width: 78%;
    float: left;
}
.detailBusinessOverview {
    padding-right: 0px;
}

.businessOverviewDetail2 {
    width: 100%;
    height: 100%;
    background-color: #000;
}
.businessOverviewBgHover {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 50;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    transition: all 0.4s ease;
    opacity: 0;
}
.businessOverviewBgHover.showBg {
    opacity: 1;
}
.businessOverviewBgHover.overviewItem1 {
    background-image: url("../../images/business/bg_overview02-1.jpg");
}
.businessOverviewBgHover.overviewItem2 {
    background-image: url("../../images/business/bg_overview02-2.jpg");
}
.businessOverviewBgHover.overviewItem3 {
    background-image: url("../../images/business/bg_overview02-3.jpg");
}
.businessOverviewBgHover.overviewItem4 {
    background-image: url("../../images/business/bg_overview02-4.jpg");
}
.businessOverviewDetail2Title {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 80;
    text-align: center;
    font-family: "Singhaestate", "Prompt", sans-serif;
    font-size: 30px;
    line-height: 34px;
    text-transform: uppercase;
    /*cursor: pointer;*/
    top: 0px;
}
.businessOverviewItem {
    /*width: 25%;*/
    width: 33%;
    height: 100%;
    position: absolute;
    z-index: 10;
    transition: all 0.6s ease;
}
.businessOverviewDetail2Title .businessOverviewItem {
    height: 120px;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
}
.businessOverviewItem.overviewItem1 {
    left: 0;
}
.businessOverviewItem.overviewItem2 {
    /*left:25%;*/
    left: 33%;
}
.businessOverviewItem.overviewItem3 {
    /*left:50%;*/
    left: 66%;
}
.businessOverviewItem.overviewItem4 {
    left: 75%;
}
.businessOverviewItem.overviewBg1 {
    /*width: 25%;*/
    width: 33%;
    background-size: auto;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-image: url("../../images/business/bg_overview02-1.jpg");
    z-index: 13;
}
.businessOverviewItem.overviewBg2 {
    /*width: 50%;*/
    width: 66%;
    background-size: auto;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-image: url("../../images/business/bg_overview02-2.jpg");
    z-index: 12;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}
.businessOverviewItem.overviewBg3 {
    /*width: 75%;*/
    width: 100%;
    background-size: auto;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-image: url("../../images/business/bg_overview02-3.jpg");
    z-index: 11;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}
.businessOverviewItem.overviewBg4 {
    width: 100%;
    background-size: auto;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-image: url("../../images/business/bg_overview02-4.jpg");
    z-index: 10;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}
.overviewBgCover {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}
.overviewBgCoverOpacityLess {
    background-color: rgba(0, 0, 0, 0.25);
}

.businessOverviewNavArea {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 100px;
    transform: translateY(-50%);
    color: #fff;
}
.businessOverviewNavArea:hover {
    color: #fff;
}
.businessOverview-scrollLine {
    position: relative;
    display: inline-block;
    width: 2px;
    height: 40px;
    background-color: transparent;
    margin: 0 auto;
    overflow: hidden;
}
.businessOverview-scrollLine::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 20px;
    background-color: #c5a254;
    top: auto;
    bottom: 0;
}
.businessOverviewItem:hover .businessOverview-scrollLine::after {
    top: 0;
    bottom: auto;
    animation-name: businessOverviewScrollBounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes businessOverviewScrollBounce {
    0% {
        transform: translateY(-15px);
    }
    45% {
        transform: translateY(30px);
    }
    50% {
        transform: translateY(35px);
    }
    100% {
        transform: translateY(-15px);
    }
}
.businessOverviewNavText {
    padding: 20px;
    line-height: 28px;
}
.businessOverviewNavShortDesc {
    /*
  position: absolute;
  font-size: 14px;
  line-height: 20px;
*/
    padding: 0 10%;
}

.businessOverviewDetail2Title .businessOverviewItem.unfocus .businessOverview-scrollLine {
    opacity: 0;
}
.businessOverviewDetail2Title .businessOverviewItem.unfocus .businessOverviewNavShortDesc,
.businessOverviewDetail2Title .businessOverviewItem.unfocus .businessOverviewNavText {
    opacity: 0.35;
}

.detailPageNav-bottom {
    display: none;
    position: fixed;
    width: 100%;
    z-index: 80;
    text-align: center;
    height: 70px;
    bottom: 10px;
}
.detailPageNav-bottom:before {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: dotted 2px #c5a254;
    top: 50px;
    left: 0px;
    transform: translateY(-1px);
}
.detailPageNav-bottom-inner {
    width: 100%;
    position: relative;
}
.detailPageNav-bottom .detailNav-dot {
    position: relative;
    height: 40px;
    width: 130px;
}
.detailPageNav-bottom .detailNav-dot-circle {
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: #c5a254;
    border-radius: 50%;
    display: inline-block;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
    z-index: 400;
    cursor: pointer;
}
.detailPageNav-bottom .detailNav-dot-circle span {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    color: #fff;
    font-size: 12px;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
}
.detailPageNav-bottom .detailNav-dot.active .detailNav-dot-circle {
    height: 30px;
    width: 30px;
}
.detailPageNav-bottom .detailNav-dot.active .detailNav-dot-circle span {
    opacity: 1;
}

.detailPageNav-bottom .detailNav-dot .detailNavCaption {
    display: block;
    position: absolute;
    top: -20px;
    left: 50%;
    /*transform: translateX(calc(-50%));*/
    transform: translateX(-50%);
    /*width: 120px;*/
    width: 180px;
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    margin-left: 0px;
}
.detailPageNav-bottom .detailNav-dot.active .detailNavCaption {
    display: block;
    top: -37px;
    font-size: 12px;
}
.detailPageNav-bottom .detailNavCaption.colorBlue {
    color: #153050;
}
.detailPageNav-bottom .owl-carousel .owl-stage-outer {
    height: 70px;
    padding-top: 30px;
}

.timelineList-pc {
    display: block;
}
.timelineList-mobile {
    display: none;
}

.bg_businessOverviewFixed {
    display: none;
    width: 100%;
    height: 100vh;
    position: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/business/bg_overview01.jpg");
}

.businessProjectListAreaCover {
    width: 100%;
    position: relative;
}
.businessProjectListArea {
    width: 87%;
    margin-left: 80px;
    position: relative;
    padding-top: 230px;
    padding-bottom: 150px;
}
.businessProjectList {
    transform: translateX(-15px);
}
.businessProjectListItem {
    position: relative;
    cursor: pointer;
    margin-bottom: 30px;
}
.businessProjectListItem a {
    display: block;
    position: relative;
}
.businessProjectListItem .projectImage {
    z-index: 10;
}
.businessProjectListItem .projectItemTitle {
    position: absolute;
    width: 100%;
    text-align: center;
    /*bottom: 0px;*/
    top: calc(100% - 120px);
    padding: 20px;
    z-index: 20;
}
.businessProjectListItem .projectItemTitleLine {
    height: 30px;
}
.businessProjectListItem .projectItemTitleLine:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 30px;
    background-color: #c5a254;
    top: 0px;
    left: 50%;
    transition: all 0.3s ease-in-out;
}
.businessProjectListItem .projectItemTitleText {
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
    margin-top: 0px;
}
.businessProjectListItem:hover .projectItemTitleLine:before {
    top: 10px;
}
.businessProjectListItem:hover .projectItemTitleText {
    margin-top: -5px;
}

@keyframes showCultureMeaningEvent {
    0% {
        opacity: 0;
        width: 0px;
    }
    100% {
        opacity: 1;
        width: 100%;
    }
}

@media (max-width: 1600px) {
    .detailPageNav {
        bottom: 20px;
    }
    .timelineDisplayLeft {
        width: 40%;
        font-size: 110px;
        line-height: 100px;
    }
    .timelineDisplayLeftInner {
        margin-top: 50%;
        transform: translateY(-50%);
    }
    .timelineDisplayLeftInner span {
        width: 76px;
    }
    .timelineDisplayRight {
        width: 60%;
    }
    .timelineToDisplay {
        font-size: 34px;
    }
    .timelineNavYear {
        width: 100%;
        height: 60px;
        padding: 18px 0px;
    }
    .timelineNavYear ul li {
        padding: 0 10px;
        font-size: 14px;
    }
    .historyDetail {
        max-height: 380px;
        padding-right: 20px;
        overflow-y: scroll;
    }
    .timelineDetail {
        height: 340px;
        margin-top: 30px;
        padding: 0px 20px;
        font-size: 18px;
    }
    .timelineDetail-detail {
        /*font-weight: 100;*/
        font-weight: 300;
        padding-bottom: 20px;
    }
    .timelineDetail-detail ul {
        padding: 10px 10px 10px 20px;
    }

    .businessOverviewDetail1 {
        padding-bottom: 40px;
    }
    .businessOverviewDetail1-title {
        font-size: 38px;
        line-height: 48px;
    }
    .businessDetail01-item-img {
        width: 160px;
    }
    .businessDetail01-item-title {
        color: #fff;
        font-size: 18px;
        line-height: 24px;
        margin-top: 20px;
    }
    .businessDetail01-item-number {
        color: #fff;
        font-size: 13px;
        line-height: 19px;
        margin-top: 15px;
    }
    .businessDetail01-item-number span {
        display: block;
        font-size: 32px;
        line-height: 38px;
        padding-bottom: 10px;
    }
    .businessOverviewDetail2Title {
        font-size: 28px;
        line-height: 32px;
    }
    .businessOverviewNavText {
        padding: 15px;
    }
    /*
  .businessOverviewNavShortDesc {
    height: 140px;
    font-size: 14px;
    line-height: 20px;
    padding: 0 60px;
    bottom: -40px;
    bottom: -150px;
  }
*/

    .detailContentBoxFullInnerBusiness {
        width: 75%;
    }
    .businessDetail04-item {
        height: 150px;
    }
    .businessDetail04-item-title {
        position: absolute;
        font-size: 20px;
        line-height: 26px;
        left: 20px;
        padding-bottom: 15px;
    }
    .businessDetail04-item-more {
        right: 20px;
        padding-bottom: 15px;
        width: 100px;
        transform: translateX(20px);
        font-size: 14px;
    }

    .timelineDisplayLeft.aboutusLeftDiv {
        height: 410px;
    }
    .chairmanDetail {
        height: 520px;
        padding: 0px 20px;
        font-size: 18px;
        padding-top: 90px;
    }
    .chairmanDetail-title {
        font-size: 24px;
        margin-bottom: 2px;
    }
    .chairmanDetail p {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .aboutusRightDiv .chairmanDetail {
        padding: 0 20px;
    }

    .timelineDisplayLeft.aboutusLeftDiv.aboutBoardLayout {
        height: 450px;
    }
    .chairmanDetail.boardDetail {
        height: 450px;
    }
    .boardItem {
        height: 170px;
    }
    .boardItem-detail {
        padding: 0 12px;
    }
    .boardItem-detail-name {
        margin-bottom: 10px;
        font-size: 17px;
    }
    .boardItem-detail-desc {
        font-size: 14px;
        line-height: 18px;
    }
    .boardTitleList {
        margin-top: 40px;
    }
    .boardTitleItem {
        font-size: 15px;
        line-height: 20px;
        margin: 13px 0;
    }

    .boardDetailFull .projectBackBtn {
        top: -50px;
    }
    .boardDetailArea {
        width: 75%;
        padding: 50px 70px;
        margin: 100px auto 0px;
    }
    .boardDetail-name {
        font-size: 40px;
        line-height: 40px;
        margin-bottom: 15px;
    }
    .boardDetail-title {
        font-size: 20px;
    }
    .boardDetail-content {
        padding-top: 6px;
        font-size: 16px;
        line-height: 22px;
    }
    .boardDetail-content .content-subject {
        margin-top: 22px;
    }
    .boardDetail-content .content-subject-main {
        margin-top: 22px;
    }

    .aboutusStructureEnlargeTxt {
        font-size: 14px;
    }
    .aboutusStructureEnlargeIcon {
        width: 28px;
        transform: translateY(10px);
        margin-left: 10px;
    }

    .businessProjectListArea {
        width: 87%;
        margin-left: 80px;
        padding-top: 200px;
        padding-bottom: 120px;
    }
    .businessProjectListItem .projectItemTitle {
        top: calc(100% - 120px);
        padding: 20px;
    }
    .businessProjectListItem .projectItemTitleLine {
        height: 30px;
    }
    .businessProjectListItem .projectItemTitleLine:before {
        height: 30px;
    }
    .businessProjectListItem .projectItemTitleText {
        font-size: 18px;
        line-height: 22px;
        margin-top: 0px;
    }
    .businessProjectListItem:hover .projectItemTitleLine:before {
        top: 10px;
    }
    .businessProjectListItem:hover .projectItemTitleText {
        margin-top: -5px;
    }

    .detailLocationDiv .popover {
        width: 350px;
        padding: 30px 20px;
        font-size: 14px;
    }
    .detailLocationDiv .popover-title {
        padding: 0 0 15px;
        font-size: 20px;
        line-height: 24px;
    }
}

@media (max-width: 1440px) {
    .detailBanner-text {
        top: calc(50% - 80px);
        text-align: center;
        letter-spacing: 2px;
        font-size: 32px;
        line-height: 36px;
    }
    .detailBanner-text-caption {
        font-size: 14px;
        line-height: 18px;
        max-width: 400px;
        margin-top: 10px;
    }
    .detailNavCaption {
        position: absolute;
        bottom: 40px;
        left: 50%;
        /*transform: translateX(calc(-50% - 20px));*/
        transform: translateX(-50%);
        margin-left: -20px;
        width: 150px;
        font-size: 12px;
    }
    .timelineNavYear ul li {
        padding: 0 10px;
        font-size: 14px;
    }
    .detailContentBoxLocation {
        left: 10%;
    }
}

@media (max-width: 1366px) {
    .detailPageNav {
        bottom: 10px;
    }

    .detailContentBox {
        font-size: 16px;
        /* top: calc(50%); */
    }
    .detailContentBoxLeft {
        /*max-width: 560px;*/
        width: 29%;
        left: 12%;
    }
    .detailContentBoxLeft.forTimeline {
        /*max-width: 640px;*/
        width: 37%;
        left: 8%;
    }
    .detailContentBoxLeft.forCommercial {
        /*max-width: 800px;*/
        width: 42%;
    }
    .detailContentBoxRight {
        /*max-width: 720px;*/
        width: 37%;
        right: 12%;
    }
    .detailContentBoxRight.forTimeline {
        /*max-width: 640px;*/
        width: 33%;
    }
    .detailContentBox-title {
        /*font-size: 40px;
    line-height: 40px;
    margin-bottom: 20px;*/
        font-size: 36px;
        line-height: 36px;
        margin-bottom: 10px;
    }
    .detailContentBox-detail {
        margin-bottom: 30px;
        padding-right: 10px;
    }
    .detailContentImgLeft {
        width: 37%;
        left: 8%;
    }
    .detailContentBoxFull {
        width: 100%;
    }
    .detailContentBoxFullInner {
        width: 75%;
        margin: 0 auto;
        position: relative;
    }

    .detailBusinessOverview {
        margin-bottom: 0px;
    }

    .detailContentBox-scroll {
        font-size: 12px;
    }
    .detailContentBox-scrollText {
        padding-left: 10px;
    }

    .aboutCultureContent {
        transform: translate(0, calc(-50% - 0px));
    }
    .cultureText {
        font-size: 180px;
        margin: 0 30px;
    }
    .cultureTextMeaning {
        font-size: 18px;
        line-height: 18px;
        transform: translate(20px, calc(50% - 0px));
    }
    .cultureTextMeaning::after {
        font-size: 18px;
    }
    .aboutCultureRemark {
        text-align: center;
        font-size: 16px;
        position: absolute;
        width: 100%;
        top: calc(50% + 130px);
    }

    .timelineDisplayLeft {
        width: 40%;
        font-size: 90px;
        line-height: 90px;
    }
    .timelineDisplayLeftInner {
        margin-top: 50%;
        transform: translateY(-50%);
    }
    .timelineDisplayLeftInner span {
        width: 70px;
    }
    .timelineDisplayRight {
        width: 60%;
    }
    .timelineToDisplay {
        font-size: 30px;
    }
    .timelineNavYear {
        width: 100%;
        height: 50px;
        padding: 12px 0px;
    }
    .timelineNavYear ul li {
        padding: 0 8px;
        font-size: 14px;
    }
    .historyDetail {
        max-height: 290px;
        padding-right: 20px;
        overflow-y: scroll;
    }
    .timelineDetail {
        height: 290px;
        margin-top: 30px;
        padding: 0px 20px;
        font-size: 16px;
    }
    .timelineDetail-detail {
        /*font-weight: 100;*/
        font-weight: 300;
        padding-bottom: 20px;
    }
    .timelineDetail-detail ul {
        padding: 10px 10px 10px 20px;
    }

    .businessOverviewDetail1 {
        padding-bottom: 0px;
    }
    .businessOverviewDetail1-title {
        font-size: 30px;
        line-height: 40px;
    }
    .businessDetail01-item-img {
        width: 120px;
    }
    .businessDetail01-item-title {
        color: #fff;
        font-size: 14px;
        line-height: 20px;
        margin-top: 10px;
    }
    .businessDetail01-item-number {
        color: #fff;
        font-size: 12px;
        line-height: 15px;
        margin-top: 4px;
    }
    .businessDetail01-item-number span {
        display: block;
        font-size: 26px;
        line-height: 32px;
        padding-bottom: 5px;
    }

    .businessOverviewDetail2Title {
        font-size: 22px;
        line-height: 26px;
    }
    .businessOverviewNavText {
        padding: 10px;
    }
    /*
  .businessOverviewNavShortDesc {
        height: 150px;
        font-size: 13px;
        line-height: 18px;
        padding: 0 40px;
  }
*/

    .detailContentBoxFullInnerBusiness {
        width: 75%;
    }
    .businessDetail04-item {
        height: 120px;
    }
    .businessDetail04-item-title {
        position: absolute;
        font-size: 16px;
        line-height: 22px;
        left: 20px;
        padding-bottom: 10px;
    }
    .businessDetail04-item-more {
        right: 20px;
        padding-bottom: 10px;
        width: 80px;
        transform: translateX(20px);
        font-size: 12px;
    }

    .businessProjectListArea {
        width: 87%;
        margin-left: 80px;
        padding-top: 170px;
        padding-bottom: 100px;
    }
    .businessProjectListItem .projectItemTitle {
        top: calc(100% - 100px);
        padding: 20px 10px;
    }
    .businessProjectListItem .projectItemTitleLine {
        height: 20px;
    }
    .businessProjectListItem .projectItemTitleLine:before {
        height: 20px;
    }
    .businessProjectListItem .projectItemTitleText {
        font-size: 14px;
        line-height: 18px;
        margin-top: 0px;
    }
    .businessProjectListItem:hover .projectItemTitleLine:before {
        top: 10px;
    }
    .businessProjectListItem:hover .projectItemTitleText {
        margin-top: -5px;
    }

    .detailContentBoxLocation {
        left: 10%;
    }
    .detailLocationDiv .popover {
        width: 350px;
        max-width: unset;
        padding: 30px 15px;
        font-size: 13px;
    }
    .detailLocationDiv .popover-title {
        padding: 0 0 15px;
        font-size: 18px;
        line-height: 22px;
    }

    .timelineDisplayLeft.aboutusLeftDiv {
        height: 350px;
    }
    .chairmanDetail {
        height: 450px;
        padding: 0px 20px;
        font-size: 16px;
        padding-top: 90px;
    }
    .chairmanDetail-title {
        font-size: 21px;
        margin-bottom: 2px;
    }
    .chairmanDetail p {
        font-size: 16px;
        margin-bottom: 15px;
    }

    .timelineDisplayLeft.aboutusLeftDiv.aboutBoardLayout {
        height: 320px;
    }
    .chairmanDetail.boardDetail {
        height: 360px;
    }
    .boardItem {
        height: 140px;
    }
    .boardItem-detail {
        padding: 0 12px;
    }
    .boardItem-detail-name {
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 18px;
    }
    .boardItem-detail-desc {
        font-size: 12px;
        line-height: 15px;
    }
    .boardTitleList {
        margin-top: 40px;
    }
    .boardTitleItem {
        font-size: 13px;
        line-height: 20px;
        margin: 8px 0;
    }

    .boardDetailFull .projectBackBtn {
        top: -40px;
    }
    .boardDetailArea {
        width: 75%;
        padding: 40px 60px;
        margin: 80px auto 0px;
    }
    .boardDetail-header {
        padding-bottom: 25px;
    }
    .boardDetail-name {
        font-size: 34px;
        line-height: 34px;
        margin-bottom: 15px;
    }
    .boardDetail-title {
        font-size: 18px;
    }
    .boardDetail-content {
        padding-top: 6px;
        font-size: 14px;
        line-height: 20px;
    }
    .boardDetail-content .content-subject {
        margin-top: 20px;
    }
    .boardDetail-content .content-subject-main {
        margin-top: 20px;
    }

    .chairmanDetail.structureDetail {
        height: fit-content;
    }
    .aboutusStructureEnlargeArea {
        margin-top: 10px;
    }
    .aboutusStructureEnlargeTxt {
        font-size: 12px;
    }
    .aboutusStructureEnlargeIcon {
        width: 20px;
        transform: translateY(6px);
        margin-left: 8px;
    }
}

@media (max-width: 1280px) {
    .detailBanner-text {
        top: calc(50% - 80px);
        text-align: center;
        letter-spacing: 2px;
        font-size: 30px;
        line-height: 35px;
    }
    .detailBanner-text-caption {
        font-size: 12px;
        line-height: 16px;
        max-width: 300px;
        margin-top: 10px;
    }
    .timelineNavYear ul li {
        padding: 0 4px;
        font-size: 12px;
    }

    .chairmanDetail.structureDetail {
        height: fit-content;
    }
    .aboutusStructureEnlargeArea {
        margin-top: 10px;
    }
    .aboutusStructureEnlargeTxt {
        font-size: 12px;
    }
    .aboutusStructureEnlargeIcon {
        width: 20px;
        transform: translateY(6px);
        margin-left: 8px;
    }
    .detailNavCaption {
        font-size: 10px;
    }
    .timelineDisplayRight {
        width: 63%;
    }
    .timelineDisplayLeft {
        width: 37%;
    }
}

@media (max-width: 991px) {
    .timelineNavYear ul li {
        padding: 0 4px;
        font-size: 10px;
    }
}

@media (max-width: 767px) {
    .detailSectionSideNav {
        display: none;
    }

    .detailBanner-text {
        top: calc(50% - 50px);
        text-align: center;
        letter-spacing: 2px;
        font-size: 16px;
        line-height: 22px;
    }
    .detailBanner-text-caption {
        font-size: 12px;
        line-height: 14px;
        max-width: 260px;
        margin-top: 15px;
    }

    .bg_aboutusOverview .detailBanner-text-caption,
    .bg_aboutusProfile .detailBanner-text-caption {
        max-width: 290px;
    }

    .detailPageNav {
        left: 0;
        transform: translateX(0);
        bottom: 10px;
        width: 100%;
    }
    .detailPageNav.pageAboutUs,
    .detailPageNav.pageBusiness,
    .detailPageNav.pageContact,
    .detailPageNav.pageCareer,
    .detailPageNav.pageSustainability {
        width: 100%;
    }
    .detailPageNav::-webkit-scrollbar {
        width: 0px;
        cursor: pointer;
    }

    .owl-nav-custom {
        display: none;
    }
    .detailPageNav-bottom {
        display: block;
    }

    .detailContentBox {
        font-size: 14px;
        text-align: center;
        /* top: calc(50%); */
    }
    .detailContentBoxLeft {
        width: 100%;
        left: 0%;
        padding: 20px;
    }
    .detailContentBoxLeft.forTimeline {
        width: 100%;
        left: 0%;
    }
    .detailContentBoxLeft.forCommercial {
        width: 100%;
    }
    .detailContentBoxRight {
        width: 100%;
        right: 0%;
        padding: 20px;
    }
    .detailContentBoxRight.forTimeline {
        /*max-width: 640px;*/
        width: 100%;
    }
    .detailContentBox-title {
        font-size: 30px;
        line-height: 30px;
        margin-bottom: 10px;
    }
    .detailContentBox-detail {
        margin-bottom: 20px;
        padding: 0 10px;
    }
    .detailContentImgLeft {
        width: 100%;
        left: 0%;
        padding: 0 20px;
    }
    .detailContentBoxFull {
        width: 100%;
    }
    .detailContentBoxFullInner {
        width: 75%;
        margin: 0 auto;
        position: relative;
    }
    .detailContentBoxFullInnerBusiness {
        /*max-width: 1600px;*/
        width: 84%;
    }

    .detailContentBox-scroll {
        font-size: 12px;
    }
    .centerOnMobile .detailContentBox-scrollLine {
        display: block;
        width: 2px;
    }
    .centerOnMobile .detailContentBox-scrollText {
        display: block;
        text-align: center;
        padding-left: 0px;
        transform: translateY(0px);
    }

    .aboutCultureContent-Mobile {
        position: absolute;
        width: 100%;
        text-align: center;
        top: 50%;
        transform: translate(0, calc(-50%));
        height: 90px;
        overflow: hidden;
        text-transform: uppercase;
    }
    .aboutCultureContent-Mobile-Inner {
        min-width: 320px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        transition: all 0.6s ease;
        text-align: left;
        height: 90px;
    }
    .cultureText-Mobile {
        display: inline-block;
        height: 90px;
        /*font-size: 80px;*/
        font-size: 70px;
        line-height: 80px;
        margin: 0 10px;
        transition: all 0.6s ease;
        cursor: pointer;
    }
    .cultureText-Mobile.hideChar {
        margin-left: -45px;
    }
    .cultureTextMeaning-Mobile {
        display: inline-block;
        position: relative;
        width: 0px;
        transition: all 0.6s ease;
        font-size: 14px;
        line-height: 20px;
        overflow: hidden;
        text-align: left;
        height: 30px;
        color: transparent;
        transform: translate(10px, 0);
        letter-spacing: 3px;
        bottom: 16px;
    }
    .cultureTextMeaning-Mobile::after {
        opacity: 1;
        content: attr(data-descr);
        position: absolute;
        top: unset;
        left: 0;
        color: #fff;
        font-size: 14px;
        line-height: 20px;
        height: 30px;
        width: 400px;
        text-align: left;
        letter-spacing: 3px;
    }
    .cultureText-Mobile.dropOpacity {
        opacity: 0.2;
    }

    .aboutCultureContent-Mobile-Inner.charPos1 {
        left: 50px;
        transform: translateX(0);
    }
    .aboutCultureContent-Mobile-Inner.charPos2 {
        left: 0px;
        transform: translateX(0);
    }
    .aboutCultureContent-Mobile-Inner.charPos3 {
        left: -50px;
        transform: translateX(0);
    }
    .aboutCultureContent-Mobile-Inner.charPos4 {
        left: -120px;
        transform: translateX(0);
    }
    .aboutCultureContent-Mobile-Inner.charPos5 {
        left: -120px;
        transform: translateX(0);
    }

    .cultureText-Mobile.showMeaning {
        margin: 0 0 0 20px;
    }
    .cultureText-Mobile.showMeaning .cultureTextMeaning-Mobile.text1 {
        width: 140px;
        width: auto;
    }
    .cultureText-Mobile.showMeaning .cultureTextMeaning-Mobile.text2 {
        width: 100px;
        width: auto;
    }
    .cultureText-Mobile.showMeaning .cultureTextMeaning-Mobile.text3 {
        width: 120px;
        width: auto;
    }
    .cultureText-Mobile.showMeaning .cultureTextMeaning-Mobile.text4 {
        width: 110px;
        width: auto;
    }
    .cultureText-Mobile.showMeaning .cultureTextMeaning-Mobile.text5 {
        width: 190px;
        width: auto;
    }
    .aboutCultureRemark-Mobile {
        text-align: center;
        font-size: 14px;
        position: absolute;
        width: 100%;
        top: calc(50% + 50px);
        text-transform: uppercase;
    }

    .timelineMobileClass {
        background-color: #1e1e1e;
    }
    .timelineMobileClass .detailPageSection {
        width: 100%;
        height: auto;
        overflow: auto;
    }
    .timelineMobileClass .detailPageSection.timelineSection1 {
        padding-top: 90px;
    }
    .timelineMobileClass .detailContentBox {
        position: relative;
        top: unset;
        transform: translate(0, 0);
        text-align: left;
    }
    .detailContentBox-title.timelineCompanyName {
        font-size: 22px;
        line-height: 26px;
        margin-top: 10px;
    }
    .timelineMobileClass .detailContentBox-detail {
        padding: 0;
    }
    .timelineMobileClass .detailContentBox-scroll {
        display: none;
    }
    .timelineMobileClass .detailPageNav {
        bottom: 0px;
        background-color: #1e1e1e;
        height: 95px;
    }
    .timelineMobileClass .detailPageNav-bottom {
        bottom: 20px;
    }
    .timelineMobileClass .historyDetail {
        max-height: unset;
        padding-right: 0px;
        overflow-y: auto;
    }
    .timelineListArea {
        padding-bottom: 120px;
    }
    .timelineMobileClass .detailContentBoxFullInner {
        width: 100%;
        padding: 0 20px;
    }
    .timelineDisplayLeft {
        display: none;
    }
    .timelineDisplayRight {
        width: 100%;
    }

    .timelineNavYear {
        display: none;
    }
    .timelineList-pc {
        display: none;
    }
    .timelineList-mobile {
        display: block;
        margin-top: 15px;
    }
    .panel-group.timelineList-mobile .panel {
        margin-bottom: 0;
        border-radius: 0px;
    }
    .timelineList-mobile.panel-group .panel + .panel {
        margin-top: 0px;
    }
    .timelineList-mobile .panel-default {
        border: none;
        box-shadow: none;
        background-color: transparent;
    }
    .timelineList-mobile .panel-default > .panel-heading {
        color: #fff;
        background-color: #161616;
        border: none;
        border-radius: 0px;
        position: relative;
    }
    .timelineList-mobile .panel-title {
        font-size: 14px;
    }
    .timelineList-mobile .panel-default > .panel-heading + .panel-collapse > .panel-body {
        border: none;
    }
    .timelineList-mobile .panel-heading .accordion-toggle {
        color: #c5a254;
    }
    .timelineList-mobile .panel-heading .accordion-toggle.collapsed {
        color: #fff;
        cursor: pointer;
    }
    .timelineList-mobile .panel-heading .accordion-toggle span.ion-android-arrow-dropdown {
        display: none;
        font-size: 22px;
        position: absolute;
        top: 7px;
        right: 15px;
        color: #c5a254;
    }
    .timelineList-mobile .panel-heading .accordion-toggle.collapsed span.ion-android-arrow-dropdown {
        display: block;
    }
    .timelineList-mobile .panel-heading .accordion-toggle span.ion-android-arrow-dropup {
        display: block;
        font-size: 22px;
        position: absolute;
        top: 7px;
        right: 15px;
        color: #c5a254;
    }
    .timelineList-mobile .panel-heading .accordion-toggle.collapsed span.ion-android-arrow-dropup {
        display: none;
    }
    .timelineDetail {
        width: 100%;
        height: auto;
        margin-top: 0px;
        padding: 0px;
        font-size: 14px;
        overflow-y: auto;
        display: block;
    }

    .buOverviewMobileClass {
        background-color: #12263f;
    }
    .bg_businessOverviewFixed {
        display: block;
    }
    .buOverviewMobileClass .detailPageSection {
        width: 100%;
        height: auto;
        overflow: auto;
    }
    .buOverviewMobileClass .detailPageSection.bg_businessOverviewSection1 {
        padding-top: 105px;
        background-image: none;
    }
    .buOverviewMobileClass .detailContentBox {
        position: relative;
        top: unset;
        transform: translate(0, 0);
        text-align: left;
    }
    .buOverviewMobileClass .detailContentBox-detail {
        padding: 0;
    }
    .buOverviewMobileClass .detailPageNav {
        bottom: 0px;
        background-color: #12263f;
        height: 95px;
    }
    .buOverviewMobileClass .detailPageNav-bottom {
        bottom: 20px;
    }
    .buOverviewMobileClass .detailContentBoxFullInner {
        width: 100%;
        padding: 0 20px;
    }

    .businessOverviewDetail1 {
        padding-bottom: 10px;
    }
    .businessOverviewDetail1-title {
        width: 100%;
        float: none;
        font-size: 30px;
        line-height: 40px;
    }
    .businessOverviewDetail1-detail {
        width: 100%;
        float: none;
        margin-top: 20px;
    }
    .businessDetail01-list {
        width: 100%;
        padding-bottom: 40px;
        margin: 0px;
    }
    .businessDetail01-item {
        padding: 0 0 30px;
    }
    .businessDetail01-item:after {
        height: 60px;
        width: 2px;
        top: 50%;
        transform: translateY(-50%);
    }
    .businessDetail01-item:nth-child(2):after,
    .businessDetail01-item:last-child:after {
        content: "";
        width: 0px;
    }

    .businessDetail01-item-img {
        width: 130px;
    }
    .businessDetail01-item-title {
        color: #fff;
        font-size: 12px;
        line-height: 18px;
        margin-top: 15px;
    }
    .businessDetail01-item-number {
        color: #fff;
        font-size: 10px;
        line-height: 16px;
        margin-top: 10px;
    }
    .businessDetail01-item-number span {
        display: block;
        font-size: 22px;
        line-height: 22px;
        padding-bottom: 5px;
    }

    .businessOverviewDetail2 {
        width: 100%;
        /*height: 660px;*/
        height: 500px;
        margin-bottom: 95px;
    }
    .businessOverviewItem {
        width: 100%;
        /*height: 25%;*/
        height: 33.33%;
        position: relative;
    }
    .businessOverviewDetail2Title .businessOverviewItem {
        height: 80px;
        cursor: pointer;
        top: 50%;
        transform: translateY(-50%);
    }
    .businessOverviewItem.overviewBg1,
    .businessOverviewItem.overviewBg2,
    .businessOverviewItem.overviewBg3,
    .businessOverviewItem.overviewBg4 {
        width: 100%;
        background-size: cover;
        background-position: center center;
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
    }
    .businessOverviewNavArea {
        text-align: center;
        top: 35%;
    }
    .businessOverviewNavText {
        padding: 0px;
        font-size: 16px;
    }
    /*
  .businessOverviewNavShortDesc {
    height: 75px;
    bottom: -55px;
    font-size: 13px;
    line-height: 18px;
    padding: 0 40px;
    text-align: center;
  }
*/

    .buProjectListMobileClass {
        background-color: #fff;
    }
    .bg_businessCommercial {
        background-size: cover;
        background-position: 10% 0;
    }
    .bg_businessHospitality {
        background-size: cover;
        background-position: 10% 0;
    }
    .bg_businessResidentail {
        background-size: cover;
        background-position: 10% 0;
    }
    .bg_businessCrossroad {
        background-size: cover;
        background-position: 10% 0;
    }
    .buProjectListMobileClass .detailPageSection {
        width: 100%;
        height: auto;
        overflow: auto;
    }
    .buProjectListMobileClass .detailContentBox {
        position: relative;
        top: unset;
        transform: translate(0, 0);
        text-align: left;
        margin-top: 90px;
    }
    .buProjectListMobileClass .detailContentBox-detail {
        padding: 0;
    }
    .buProjectListMobileClass .detailPageNav {
        bottom: 0px;
        background-color: transparent;
        height: 95px;
    }
    .buProjectListMobileClass .detailPageNav.bgColorWhite {
        height: 150px;
        background-color: #f9f9f9;
        background: -moz-linear-gradient(top, rgba(249, 249, 249, 0) 0%, rgba(249, 249, 249, 1) 40%, rgb(249, 249, 249, 1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(249, 249, 249, 0)), color-stop(40%, rgba(249, 249, 249, 1)), color-stop(100%, rgba(249, 249, 249, 1)));
        background: -webkit-linear-gradient(top, rgba(249, 249, 249, 0) 0%, rgba(249, 249, 249, 1) 40%, rgba(249, 249, 249, 1) 100%);
        background: -o-linear-gradient(top, rgba(249, 249, 249, 0) 0%, rgba(249, 249, 249, 1) 40%, rgba(249, 249, 249, 1) 100%);
        background: -ms-linear-gradient(top, rgba(249, 249, 249, 0) 0%, rgba(249, 249, 249, 1) 40%, rgba(249, 249, 249, 1) 100%);
        background: linear-gradient(to bottom, rgba(249, 249, 249, 0) 0%, rgba(249, 249, 249, 1) 40%, rgba(249, 249, 249, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
    }
    .buProjectListMobileClass .detailPageNav-bottom {
        bottom: 20px;
    }
    .buProjectListMobileClass .detailContentBoxFullInner {
        width: 100%;
        padding: 0 20px;
    }

    .projectListOverview {
        /*padding-top: 90px;*/
        min-height: 100vh;
    }
    .projectListMobilePaddingTop {
        padding-top: 40px;
    }
    .projectListMobilePaddingBottom {
        padding-bottom: 40px;
    }
    .detailContentBoxFullInnerBusiness {
        width: calc(100% - 40px);
        margin: 0 auto;
    }
    .businessDetail04-bghover {
        display: none;
    }
    .businessDetail04-list {
        padding: 0px;
        display: block;
    }
    .businessDetail04-item {
        height: 105px;
        display: block;
    }
    .businessDetail04-item.hideMobile {
        display: none;
    }
    .businessDetail04-item-title {
        position: absolute;
        font-size: 16px;
        line-height: 22px;
        left: 20px;
        padding-bottom: 10px;
    }
    .businessDetail04-item-more {
        right: 20px;
        padding-bottom: 10px;
        width: 80px;
        transform: translateX(20px);
        font-size: 12px;
    }

    .businessProjectListArea {
        width: 100%;
        margin-left: 0px;
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .businessProjectList {
        transform: translateX(0);
        padding: 0 10px;
    }
    .businessProjectListItem {
    }
    .businessProjectListItem .projectItemTitle {
        top: calc(100% - 100px);
        padding: 20px 10px;
    }
    .businessProjectListItem .projectItemTitleLine {
        height: 20px;
    }
    .businessProjectListItem .projectItemTitleLine:before {
        height: 20px;
    }
    .businessProjectListItem .projectItemTitleText {
        font-size: 14px;
        line-height: 18px;
        margin-top: 0px;
    }
    .businessProjectListItem:hover .projectItemTitleLine:before {
        top: 10px;
    }
    .businessProjectListItem:hover .projectItemTitleText {
        margin-top: -5px;
    }

    .projectListLocation {
        padding-top: 40px;
        background-color: #e5e5e5;
    }
    .buProjectListMobileClass .detailPageSection.projectListLocation {
        max-height: 700px;
    }
    .detailContentBoxLocation {
        left: 0%;
        padding-left: 20px;
    }
    .detailLocationDiv {
        height: 500px;
        overflow: scroll;
    }
    .detailLocationImg {
        height: 100%;
        width: auto;
    }
    .detailLocationDiv img.imgMapControl {
        display: block;
        height: unset;
        max-width: unset;
        width: auto;
        max-height: 100%;
        margin-left: -100%;
    }
    .detailLocationDiv img.imgMapControl.worldMap {
        margin-left: -60%;
    }
    .detailLocationDiv .popover {
        width: 280px;
        max-width: unset;
        padding: 15px 10px;
        font-size: 12px;
    }
    .detailLocationDiv .popover-title {
        padding: 0 0 10px;
        margin: 0;
        font-size: 16px;
        line-height: 20px;
    }

    .pageAboutusChairman .detailPageSection {
        height: auto;
        overflow: auto;
        min-height: 100vh;
    }
    .pageAboutusChairman .detailContentBoxFullInner {
        width: 100%;
        padding: 0 20px;
    }
    .pageAboutusChairman .detailContentBoxFull {
        position: relative;
        top: unset;
        transform: translate(0, 0);
    }
    .chairmanImg {
        width: 60%;
        margin: 0 auto;
    }
    .pageAboutusChairman .timelineDisplayLeft {
        display: block;
        width: 100%;
        float: none;
        padding-top: 90px;
    }
    .pageAboutusChairman .timelineDisplayRight {
        float: none;
        padding-top: 25px;
    }
    .timelineDisplayLeft.aboutusLeftDiv {
        height: auto;
    }
    .chairmanDetail {
        height: auto;
        padding: 0 0px;
        font-size: 14px;
        overflow-y: auto;
        padding-top: 20px;
        text-align: left;
    }
    .chairmanDetail-title {
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 0px;
    }
    .chairmanDetail p {
        font-size: 14px;
        margin-bottom: 15px;
    }
    .pageAboutusChairman .detailPageNav {
        bottom: 0px;
        background-color: #ededed;
        height: 95px;
    }

    .pageAboutusChairman.bg_white .detailPageNav {
        background-color: #ffffff;
    }
    .pageAboutusStructure .aboutusLeftDivInner {
        position: relative;
        top: 0;
        transform: translateY(0);
    }
    .pageAboutusStructure .timelineDisplayRight.aboutusRightDiv {
        width: 100%;
    }
    .aboutusRightDiv .chairmanDetail {
        padding: 0 0;
    }

    .aboutusRightDiv .chairmanDetail.boardDetail {
        padding: 0 20px;
        height: auto;
    }
    .pageAboutusChairman .timelineDisplayLeft.aboutBoardLayout {
        display: block;
        width: 100%;
        float: none;
        padding-top: 90px;
    }
    .pageAboutusChairman .timelineDisplayRight.aboutBoardLayout {
        float: none;
        padding-top: 25px;
    }
    .timelineDisplayLeft.aboutusLeftDiv.aboutBoardLayout {
        height: auto;
    }
    .boardTitleList {
        margin-top: 20px;
        text-align: left;
    }
    .boardItem {
        height: auto;
        margin-bottom: 10px;
    }
    .boardItem-btn {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 32px;
    }
    .boardItem-img {
        width: 100%;
        float: none;
        border: 1px solid #ddd;
    }
    .boardItem-detail {
        width: 100%;
        float: none;
        padding: 20px 10px 20px;
    }
    .boardItem-detail-name {
        margin-bottom: 10px;
        font-size: 16px;
    }
    .boardItem-detail-desc {
        font-size: 14px;
        line-height: 16px;
    }

    .boardDetailFull .projectBackBtn {
        top: -30px;
    }
    .boardDetailArea {
        width: 95%;
        padding: 30px 20px;
        margin: 60px auto 0px;
    }
    .boardDetail-header {
        padding-bottom: 20px;
    }
    .boardDetail-name {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 12px;
    }
    .boardDetail-title {
        font-size: 14px;
        line-height: 17px;
    }
    .boardDetail-content {
        padding-top: 6px;
        font-size: 14px;
        line-height: 17px;
    }
    .boardDetail-content .content-subject {
        margin-top: 16px;
    }
    .boardDetail-content .content-subject-main {
        margin-top: 16px;
    }

    .chairmanDetail.structureDetail {
        height: fit-content;
    }
}

@media (max-width: 375px) {
    .detailPageNav-bottom .detailNav-dot {
        width: 120px;
    }
    .detailBanner-text {
        font-size: 14px;
        line-height: 20px;
    }
}

@media (max-width: 325px) {
    .detailBanner .detailBanner-btn .btnDetailBanner {
        font-size: 12px;
        line-height: 13px;
        padding: 8px 18px;
    }
    .detailPageNav-bottom .detailNav-dot {
        width: 105px;
    }
    .pageAboutusChairman .timelineDisplayRight {
        padding-top: 15px;
    }
    .chairmanDetail-title {
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 0px;
    }
}

/****** CONTACT PAGE *******/
.bg_contact {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/contact/bg_contact.jpg");
}
.bg_contact_land {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/contact/bg_contact_land.jpg");
}
.bg_contact_land_list {
    background-color: #fff;
    height: auto;
    min-height: 100vh;
    overflow: auto;
}
.detailContact {
    position: absolute;
    top: 50%;
    width: 100%;
    max-width: 54%;
    padding: 50px 0 50px;
    background-color: rgba(0, 0, 0, 0.45);
    left: 37%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 18px;
    /*font-weight: 100;*/
    font-weight: 300;
    line-height: 24px;
}
.detailContact a:visited {
    color: #fff !important;
}
.detailContact a {
    color: #fff !important;
}
.detailContact a:hover {
    color: #c5a254 !important;
}
.detailContactInner {
    width: 100%;
    position: relative;
}
.detailContactLeft {
    width: 54%;
    float: left;
    padding-left: 80px;
}
.detailContactRight {
    width: 46%;
    float: left;
    padding: 0 60px 0 20px;
}

.detailContact.noContactForm-temp {
    max-width: 28%;
    left: 50%;
}
.detailContact.noContactForm-temp .detailContactLeft {
    width: 100%;
}

.contact-companyTitle {
    font-size: 30px;
    line-height: 34px;
    padding-bottom: 25px;
    position: relative;
    margin-bottom: 25px;
    font-weight: 400;
}
.contact-companyTitle:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0px;
    height: 4px;
    width: 100px;
    background-color: #c5a254;
}
.contact-companyAddress {
    margin-bottom: 25px;
}
.contact-contactvia {
    margin-bottom: 25px;
}
.contact-contactvia span {
    display: block;
    padding-bottom: 5px;
    font-weight: 400;
    text-transform: uppercase;
}
.contact-socialArea {
    padding-top: 10px;
}
.contact-socialArea a {
    margin: 0 18px;
}
.contact-socialArea a:first-child {
    margin-left: 0px;
}
.contact-socialArea a:last-child {
    margin-right: 0px;
}
.contact-socialArea img {
    height: 28px;
    width: auto;
}
.contact-formArea {
    font-size: 14px;
    line-height: 16px;
}
.contact-formAreaInner {
    padding-top: 20px;
    font-weight: 400;
}
.contact-form-item {
    position: relative;
}
.contact-form-item input.form-control {
    color: #fff;
    padding: 11px 10px 11px 30px;
    border: none;
    border-bottom: 1px solid rgba(218, 218, 218, 0.15);
    margin-bottom: 20px;
    border-radius: 0;
    background-color: transparent;
    transition: all 0.4s ease;
    font-size: inherit;
    box-shadow: unset;
}
.contact-form-item input.form-control::-moz-placeholder {
    color: #d7d7d7;
    opacity: 1;
}
.contact-form-item input.form-control:-ms-input-placeholder {
    color: #d7d7d7;
}
.contact-form-item input.form-control::-webkit-input-placeholder {
    color: #d7d7d7;
}

.contact-form-item input.form-control:focus {
    border-color: #c5a254;
}

.contact-form-item:before {
    content: "";
    position: absolute;
    top: 13px;
    left: 0px;
    width: 20px;
    height: 4px;
    background-color: #fff;
    transition: all 0.4s ease;
}
.contact-form-item.contact-form-item-select:before {
    top: 16px;
}
.contact-form-item.formFocus:before {
    background-color: #c5a254;
}

.contact-form-item input.form-control:focus::-webkit-input-placeholder {
    color: transparent;
}
.contact-form-item input.form-control:focus:-moz-placeholder {
    color: transparent;
}

.contact-form-item select.select {
    width: 100%;
    padding: 11px 10px 11px 30px;
    border: none;
    border-bottom: 1px solid rgba(218, 218, 218, 0.15);
    margin-bottom: 20px;
    border-radius: 0;
    background-color: transparent;
    color: #fff;
    outline: none;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url(../../images/icon-select.png);
    background-repeat: no-repeat;
    background-position: right center;
    transition: all 0.4s ease;
}
.contact-form-item select.select option {
    color: #666;
    outline: none;
    padding: 6px 0;
}
.contact-form-item select.select:focus {
    outline: 0;
    background-image: url(../../images/icon-select-focus.png);
    border-color: #c5a254;
}
.contact-form-item .captchaCover {
    height: 115px;
}
.btn-contact {
    padding: 14px 25px;
    background-color: #153050;
    border: none;
    border-radius: 0;
    font-size: 16px;
    /*font-weight: 100;*/
    font-weight: 300;
    transition: all 0.4s ease;
}
.btn-contact:hover {
    color: #c5a254;
}

.pageContactLand .detailBanner-text {
    top: calc(50% - 30px);
}
.pageContactLand .homeScrollArea {
    bottom: unset;
    /*top: calc(50% + 30px);*/
    top: calc(50% + 100px);
}

.landSellBuyList {
    /*position: absolute;
  width: 77%;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 40px;*/
    position: relative;
    width: 77%;
    margin: 0 auto;
    padding: 190px 0 160px;
}
.landSellBuyList-head {
    width: 100%;
    border: 1px solid #153050;
}
.landSellBuyList-headType {
    width: calc(50% - 2.5px);
    display: inline-block;
    text-align: center;
    padding: 20px 0;
    font-size: 24px;
    line-height: 24px;
    color: #153050;
    transition: all 0.2s ease-in;
    cursor: pointer;
}
.landSellBuyList-headType:hover {
    background-color: #f3f4f6;
}
.landSellBuyList-headType.actived {
    color: #fff;
    background-color: #153050;
}
.landSellBuyList-selling {
    width: 100%;
}
.landSellBuyList-buying {
    display: none;
    width: 100%;
}
.landSellBuyList-title {
    color: #153050;
    font-size: 24px;
    line-height: 24px;
    padding: 30px 25px;
}
.landSellBuyList-list {
    border-top: 6px solid #153050;
    width: 100%;
    /*height: 500px;
  overflow-y: scroll;*/
    padding: 0 0 0 0;
}
/* width */
.landSellBuyList-list::-webkit-scrollbar {
    width: 2px;
    cursor: pointer;
}
/* Track */
.landSellBuyList-list::-webkit-scrollbar-track {
    background: #ccc;
    cursor: pointer;
}
/* Handle */
.landSellBuyList-list::-webkit-scrollbar-thumb {
    background: #c5a254;
    cursor: pointer;
}
/* Handle on hover */
.landSellBuyList-list::-webkit-scrollbar-thumb:hover {
    background: #c5a254;
}
.landSellBuyList-item {
    position: relative;
    padding: 30px 25px;
    font-size: 20px;
    color: #153050;
    background-color: #f3f4f6;
}
.landSellBuyList-itemTitle {
    height: 40px;
    padding: 10px 10px 10px 50px;
    background-image: url(../../images/contact/icon-marker.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: left center;
}
.landSellBuyList-btn {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
}
.btn-land {
    padding: 12px 30px;
    background-color: #153050;
    border: none;
    border-radius: 0;
    font-size: 14px;
    color: #fff;
    /*font-weight: 100;*/
    font-weight: 300;
    transition: all 0.4s ease;
}
.btn-land:hover {
    color: #c5a254;
}
.landSellBuyList-item.itemHover {
    background-color: #fff;
}
.landSellBuyList-item.itemHover .landSellBuyList-btn {
    opacity: 1;
}

.landSellBuyList-itemTitle.forBuying {
    padding: 0px 10px 0px 50px;
}
.buyingTitle,
.buyingPrice,
.buyingArea,
.buyingLink {
    display: inline-block;
    font-size: 16px;
    font-weight: 300;
}
.buyingTitle span,
.buyingPrice span,
.buyingArea span,
.buyingLink span {
    display: block;
    font-weight: bold;
}
.buyingTitle span {
    font-size: 22px;
}
.buyingTitle {
    width: 40%;
}
.buyingPrice {
    width: 20%;
}
.buyingArea {
    width: 15%;
}
.buyingLink {
    width: 22%;
}
.buyingLinkIcon {
    height: 21px;
    transform: translateY(-10px);
}
.buyingLinkIcon a:not(:last-child) {
    margin-right: 40px;
}

.formSellBuyAreaFull {
    display: none;
    color: #153050;
    position: absolute;
    width: 100%;
    min-height: 100vh;
    top: 0;
    left: 0;
    background-color: #ededed;
    z-index: 1500;
}
.formSellBuyAreaFullInner {
    width: 100%;
    height: 100vh;
    position: relative;
}
.formSellBuyAreaFull .projectBackBtn {
    color: #153050;
    font-weight: 400;
}
.formSellBuyDetailArea {
    position: absolute;
    /*width: calc(100% - 40px);
  max-width: 1200px;*/
    width: 62%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.formSellBuyDetailAreaInner {
    width: 100%;
    background-color: #f3f4f6;
    padding: 90px 20%;
    color: #153050;
}
.landFormTitle {
    font-size: 38px;
    line-height: 48px;
    text-align: center;
    font-weight: 500;
    border-bottom: 10px solid #153050;
    padding-bottom: 25px;
    margin-bottom: 10px;
}
.landFormTitleSub {
    font-size: 24px;
    line-height: 34px;
    text-align: center;
    border-bottom: 10px solid #153050;
    padding-bottom: 25px;
    margin-bottom: 10px;
}
.land-formArea .contact-form-item input.form-control {
    color: #153050;
    padding: 11px 10px 11px 0px;
    border-bottom: 1px solid rgba(21, 48, 80, 0.25);
}
.land-formArea .contact-form-item input.form-control::-moz-placeholder {
    color: #153050;
    opacity: 1;
}
.land-formArea .contact-form-item input.form-control:-ms-input-placeholder {
    color: #153050;
}
.land-formArea .contact-form-item input.form-control::-webkit-input-placeholder {
    color: #153050;
}

.land-formArea .contact-form-item input.form-control:focus {
    border-bottom: 1px solid rgba(21, 48, 80, 1);
}

.land-formArea .contact-form-item:before {
    display: none;
}

.land-formArea .contact-form-item input.form-control:focus::-webkit-input-placeholder {
    color: transparent;
}
.land-formArea .contact-form-item input.form-control:focus:-moz-placeholder {
    color: transparent;
}

.land-formArea .contact-form-item select.select {
    border-bottom: 1px solid rgba(21, 48, 80, 0.25);
    padding: 8px 10px 8px 0px;
    color: #153050;
    background-image: url(../../images/icon-select-blue.png);
}
.land-formArea .contact-form-item select.select option {
    color: #666;
}
.land-formArea .contact-form-item select.select:focus {
    border-bottom: 1px solid rgba(21, 48, 80, 1);
    background-image: url(../../images/icon-select-blue-focus.png);
}
.land-formArea .contact-form-btn {
    padding-top: 30px;
}
.contact-file-txt {
    display: inline-block;
    transform: translateY(10px);
    margin-right: 20px;
    background-image: url(../../images/contact/icon-clip.png);
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 25px;
}
.contact-file-upload {
    border: 1px solid #153050;
    display: inline-block;
    padding: 12px 30px;
    cursor: pointer;
    font-size: 14px;
    color: #153050;
    font-weight: 400;
    transition: all 0.4s ease;
}
.contact-file-upload:hover {
    background-color: #ededed;
}
.contact-file-upload input[type="file"] {
    display: none;
}

@media (max-width: 1600px) {
    .detailContact {
        position: absolute;
        top: 57%;
        width: 100%;
        max-width: 60%;
        padding: 50px 0 50px;
        background-color: rgba(0, 0, 0, 0.45);
        left: 35%;
        transform: translateY(-50%);
        color: #fff;
        font-size: 18px;
        /*font-weight: 100;*/
        font-weight: 300;
        line-height: 24px;
    }
    .detailContactLeft {
        width: 54%;
        float: left;
        padding-left: 60px;
    }
    .detailContactRight {
        width: 46%;
        float: left;
        padding: 0 40px 0 0;
    }

    .detailContact.noContactForm-temp {
        max-width: 32%;
        left: 50%;
    }

    .landSellBuyList-headType {
        padding: 20px 0;
        font-size: 22px;
        line-height: 22px;
    }
    .landSellBuyList-title {
        font-size: 22px;
        line-height: 22px;
        padding: 30px 25px;
    }
    .landSellBuyList-list {
        /*height: 400px;*/
    }
    .landSellBuyList-item {
        position: relative;
        padding: 20px 25px;
        font-size: 18px;
    }
    .landSellBuyList-itemTitle {
        height: 40px;
        padding: 10px 10px 10px 50px;
        background-image: url(../../images/contact/icon-marker.png);
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: left center;
    }
    .landSellBuyList-itemTitle.forBuying {
        padding: 0px 10px 0px 50px;
    }

    .formSellBuyDetailAreaInner {
        padding: 70px 20%;
    }
    .landFormTitle {
        font-size: 38px;
        line-height: 48px;
        padding-bottom: 25px;
        margin-bottom: 10px;
    }
    .landFormTitleSub {
        font-size: 24px;
        line-height: 34px;
        padding-bottom: 25px;
        margin-bottom: 10px;
    }
}

@media (max-width: 1440px) {
    .detailContact {
        top: 57%;
        max-width: 64%;
        left: 32%;
    }
    .formSellBuyDetailAreaInner {
        padding: 70px 20%;
    }
    .buyingTitle,
    .buyingPrice,
    .buyingArea,
    .buyingLink {
        font-size: 13px;
        line-height: 18px;
    }
    .buyingTitle span {
        font-size: 18px;
    }
    .buyingLinkIcon {
        height: 16px;
        transform: translateY(-10px);
    }
    .buyingLinkIcon a:not(:last-child) {
        margin-right: 20px;
    }

    .detailContact.noContactForm-temp {
        max-width: 34%;
        left: 50%;
    }
}

@media (max-width: 1366px) {
    .detailContact {
        position: absolute;
        top: 57%;
        width: 100%;
        max-width: 64%;
        padding: 30px 0 20px;
        left: 32%;
        font-size: 14px;
        line-height: 20px;
    }
    .detailContactLeft {
        width: 50%;
        float: left;
        padding-left: 40px;
    }
    .detailContactRight {
        width: 50%;
        float: left;
        padding: 0 40px 0 0;
    }

    .detailContact.noContactForm-temp {
        max-width: 30%;
        left: 56%;
    }

    .contact-companyTitle {
        font-size: 24px;
        line-height: 28px;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    .contact-companyAddress {
        margin-bottom: 15px;
    }
    .contact-contactvia {
        margin-bottom: 15px;
    }
    .contact-socialArea {
        padding-top: 10px;
    }
    .contact-socialArea a {
        margin: 0 14px;
    }
    .contact-socialArea a:first-child {
        margin-left: 0px;
    }
    .contact-socialArea a:last-child {
        margin-right: 0px;
    }
    .contact-socialArea img {
        height: 24px;
    }

    .contact-form-item input.form-control {
        margin-bottom: 8px;
    }
    .contact-form-item select.select {
        margin-bottom: 8px;
    }
    .contact-form-btn {
        padding-top: 6px;
    }
    .contact-form-item .captchaCover {
        height: 100px;
    }
    .btn-contact {
        padding: 12px 22px;
        font-size: 14px;
    }

    .landSellBuyList {
        padding: 160px 0 160px;
    }

    .landSellBuyList-headType {
        padding: 15px 0;
        font-size: 18px;
        line-height: 18px;
    }
    .landSellBuyList-title {
        font-size: 18px;
        line-height: 18px;
        padding: 25px 25px;
    }
    .landSellBuyList-list {
        /*height: 305px;*/
    }
    .landSellBuyList-item {
        position: relative;
        padding: 15px 25px;
        font-size: 14px;
    }
    .landSellBuyList-itemTitle {
        height: 30px;
        padding: 5px 10px 5px 40px;
        background-image: url(../../images/contact/icon-marker.png);
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: left center;
    }
    .landSellBuyList-itemTitle.forBuying {
        padding: 0px 10px 0px 40px;
    }
    .btn-land {
        padding: 10px 25px;
        font-size: 12px;
    }

    .formSellBuyDetailAreaInner {
        padding: 70px 20%;
    }
    .landFormTitle {
        font-size: 33px;
        line-height: 43px;
        padding-bottom: 20px;
        margin-bottom: 5px;
    }
    .landFormTitleSub {
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 20px;
        margin-bottom: 5px;
    }
}

@media (max-width: 1280px) {
    .detailContact {
        position: absolute;
        top: 57%;
        width: 100%;
        max-width: 66%;
        padding: 40px 0 35px;
        left: 31%;
        font-size: 16px;
        line-height: 22px;
    }

    .landSellBuyList-item {
        padding: 15px 25px;
        font-size: 14px;
    }
    .landSellBuyList-itemTitle {
        height: 30px;
        padding: 5px 10px 5px 35px;
        background-image: url(../../images/contact/icon-marker.png);
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: left center;
    }
    .landSellBuyList-itemTitle.forBuying {
        padding: 0px 10px 0px 35px;
    }
}

@media (max-width: 767px) {
    .bg_contact {
        background-position: 15% center;
        overflow: auto;
    }
    .detailContact {
        position: relative;
        top: 0;
        width: 100%;
        max-width: unset;
        padding: 105px 0 130px;
        background-color: rgba(0, 0, 0, 0.7);
        left: 0;
        font-size: 14px;
        line-height: 20px;
        transform: translateY(0);
    }
    .detailContactLeft {
        width: 100%;
        float: none;
        padding: 0 20px 40px;
    }
    .detailContactRight {
        width: 100%;
        float: none;
        padding: 40px 20px 0px;
        position: relative;
    }
    .detailContactRight:before {
        content: "";
        position: absolute;
        top: 0;
        left: 20px;
        height: 1px;
        width: 80%;
        background-color: #c5a254;
    }
    .pageContactForm .detailPageNav {
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.8);
        height: 95px;
    }

    .detailContact.noContactForm-temp {
        max-width: unset;
        left: 0;
        padding: 105px 0 0px;
        height: 100vh;
    }

    .bg_contact_land {
        min-height: 100vh;
    }
    .bg_contact_land_list {
        overflow: auto;
    }
    .landSellBuyList {
        position: relative;
        width: 100%;
        top: unset;
        left: unset;
        transform: translate(0, 0);
        /*margin-top: 100px;*/
        padding: 40px 0 100px;
    }
    .landSellBuyList-headType {
        padding: 15px 0;
        font-size: 18px;
        line-height: 18px;
    }
    .landSellBuyList-title {
        font-size: 18px;
        line-height: 18px;
        padding: 20px 20px;
    }
    .landSellBuyList-list {
        height: auto;
        overflow: auto;
        padding-bottom: 1px;
        background-color: #f3f4f6;
    }
    .landSellBuyList-item {
        position: relative;
        padding: 15px 20px;
        font-size: 12px;
        line-height: 14px;
        border-bottom: 1px solid rgba(21, 48, 80, 0.25);
    }
    .landSellBuyList-itemTitle {
        height: 30px;
        padding: 5px 0px 5px 35px;
    }
    .landSellBuyList-itemTitle.forBuying {
        height: auto;
        padding: 0px 0px 0px 35px;
        background-size: auto 30px;
        background-position: left top;
    }
    .buyingTitle,
    .buyingPrice,
    .buyingArea,
    .buyingLink {
        font-size: 13px;
        line-height: 18px;
        padding-bottom: 7px;
    }
    .buyingTitle span {
        font-size: 16px;
    }
    .buyingLinkIcon {
        height: 16px;
        transform: translateY(0px);
    }
    .buyingLinkIcon a:not(:last-child) {
        margin-right: 20px;
    }
    .buyingTitle,
    .buyingPrice,
    .buyingArea,
    .buyingLink {
        width: 100%;
    }

    .contactLandMobileClass .detailPageNav {
        bottom: 0px;
        height: 95px;
    }
    .contactLandMobileClass .detailPageNav.bgColorWhite {
        background: #fff;
    }

    .formSellBuyAreaFull {
        position: absolute;
        width: 100%;
        min-height: 100vh;
    }
    .formSellBuyAreaFullInner {
        height: auto;
        position: relative;
    }
    .formSellBuyDetailArea {
        position: absolute;
        width: 100%;
        top: unset;
        left: unset;
        transform: translate(0, 0);
        margin-top: 80px;
    }
    .formSellBuyDetailAreaInner {
        padding: 40px 20px;
    }
    .landFormTitle {
        font-size: 18px;
        line-height: 24px;
        border-bottom: 5px solid #153050;
        padding-bottom: 5px;
        margin-bottom: 0px;
    }
    .landFormTitleSub {
        font-size: 12px;
        line-height: 14px;
        border-bottom: 5px solid #153050;
        padding-bottom: 5px;
        margin-bottom: 0px;
    }
    .land-formArea .contact-formAreaInner {
        padding-top: 10px;
    }
    .land-formArea .contact-form-btn {
        padding-top: 10px;
    }
    .contact-file-txt {
        margin-right: 10px;
        padding-left: 20px;
        width: 150px;
    }
    .contact-file-upload {
        padding: 8px 20px;
        font-size: 12px;
        transform: translateY(-30px);
    }
}

@media (max-width: 375px) {
}

@media (max-width: 325px) {
}

/****** NEWS PAGE *******/
.newsListPage {
    position: relative;
}
.bg_news {
    background-color: #ededed;
}
.newsListPage .latestNews-left {
    width: 20%;
    /*height: 100%;*/
    height: 100vh;
    padding-left: 80px;
    float: none;
    position: fixed;
}
.newsListPage .latestNews-left.positionAbsolute {
    position: absolute;
    bottom: 0;
}
.newsListPage .latestNews-left.positionAlwaysAbsolute {
    position: absolute;
}
.newsListPage .latestNews-right {
    width: 80%;
    height: auto;
    float: right;
    padding-bottom: 120px;
}
.newsListPage .latestNews-listArea {
    height: auto;
    margin-top: 200px;
    position: relative;
    padding-left: 20px;
    overflow-y: auto;
}
.newsListPagination {
    margin-top: 65px;
    padding-bottom: 20px;
    text-align: right;
    padding-right: 11%;
    color: #153050;
    font-size: 18px;
}
.newsListPagination .newsListPagination-title {
    display: inline-block;
    margin-right: 20px;
}
.newsListPagination ul {
    display: inline-block;
}
.newsListPagination ul li {
    display: inline-block;
    padding: 0 18px;
    position: relative;
}
.newsListPagination ul li a {
    color: #153050;
    position: relative;
    z-index: 20;
}
.newsListPagination ul li a:hover {
    color: #c5a254;
}
.newsListPagination ul li.actived:after {
    position: absolute;
    content: "";
    height: 40px;
    width: 40px;
    background-color: #c5a254;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
.newsListPagination ul li.actived a {
    color: #fff;
}

.newsDetailPage .projectBackBtn {
    color: #153050;
    font-weight: 400;
}
.newsDetailPage .projectContentDetailDiv-text {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding-top: 80px;
    text-align: center;
}

.newsDetail-content {
    text-align: left;
}
.newsDetail-content a {
    color: #c5a254;
}
.newsDetail-content a:hover {
    color: #c5a254;
}
.newsDetail-content p {
    text-align: inherit;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}
p.newsDetail-box {
    border: 1px solid #999;
    padding: 25px;
}
p.newsDetail-remark {
    text-align: left;
    font-size: 16px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #ccc;
}
.newsDetail-content b {
    font-weight: 400;
}
.newsDetail-content ul li {
    margin-bottom: 8px;
}
.newsDetail-content ul li:last-child {
    padding-bottom: 0px;
}
.newsDetail-title {
    font-weight: bold;
    font-size: 24px;
    padding-bottom: 40px;
}
.newsDetail-title i {
    font-weight: normal;
    display: block;
}
.newsDetail-content img {
    display: block;
    height: auto;
    max-width: 100% !important;
    margin: 25px auto;
}
.newsDetailShare {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}
.newsDetailShare-title {
    color: #000;
    font-size: 18px;
    font-weight: 400;
}
.newsDetailShare-list {
    margin-top: 15px;
    transform: translateX(10px);
}
.newsDetailShare-list a {
    display: inline-block;
    margin: 0 45px;
    height: 30px;
}
.newsDetailOtherList {
    width: 100%;
    max-width: 1120px;
    margin: 80px auto 0;
    padding-top: 80px;
    border-top: 1px solid #d0d0d0;
    text-align: center;
}
.newsDetailOtherList-title {
    font-size: 46px;
    line-height: 52px;
    color: #153050;
    font-weight: 500;
}
.newsDetailOtherList .latestNews-listArea {
    height: auto;
    margin-top: 30px;
    padding-left: 0px;
    overflow-y: auto;
    width: 100%;
}
.newsDetailOtherList .latestNews-listArea .latestNews-listItem {
    display: inline-block;
    width: 29%;
}

@media (max-width: 1600px) {
    .newsDetail-title {
        font-size: 20px;
        padding-bottom: 40px;
    }
    p.newsDetail-remark {
        font-size: 14px;
    }
}

@media (max-width: 1366px) {
    .newsListPage .latestNews-listArea {
        margin-top: 140px;
    }
    .newsListPagination {
        margin-top: 55px;
        font-size: 16px;
    }

    .newsDetailPage .projectContentDetailDiv-text {
        padding-top: 60px;
    }
    .newsDetail-title {
        font-size: 20px;
        padding-bottom: 40px;
    }
    .newsDetailShare {
        margin-top: 10px;
    }
    .newsDetailShare-title {
        font-size: 16px;
    }
    .newsDetailShare-list {
        margin-top: 15px;
        transform: translateX(10px);
    }
    .newsDetailShare-list a {
        display: inline-block;
        margin: 0 35px;
        height: 25px;
    }
    .newsDetailOtherList {
        max-width: 1120px;
        margin: 60px auto 0;
        padding-top: 60px;
    }
    .newsDetailOtherList-title {
        font-size: 36px;
        line-height: 42px;
    }
    .newsDetailOtherList .latestNews-listArea {
        margin-top: 20px;
    }
}

@media (max-width: 767px) {
    .newsListPage .latestNews-left {
        display: none;
    }
    .newsListPage .latestNews-right {
        width: 100%;
        float: none;
        padding-bottom: 20px;
    }
    .newsListPage .latestNews-listArea {
        height: auto;
        margin-top: 20px;
        position: relative;
        padding-left: 20px;
    }

    .newsListPagination {
        margin-top: 40px;
        padding-bottom: 20px;
        text-align: right;
        padding-right: 20px;
        font-size: 14px;
    }
    .newsListPagination .newsListPagination-title {
        display: inline-block;
        margin-right: 10px;
    }
    .newsListPagination ul {
        display: inline-block;
    }
    .newsListPagination ul li {
        display: inline-block;
        padding: 0 10px;
        position: relative;
    }
    .newsListPagination ul li a {
        color: #153050;
        position: relative;
        z-index: 20;
    }
    .newsListPagination ul li a:hover {
        color: #c5a254;
    }
    .newsListPagination ul li.actived:after {
        height: 30px;
        width: 30px;
    }

    .newsDetailPage {
        padding-top: 40px;
    }
    .newsDetailPage .projectContentDetailDiv-text {
        padding-top: 30px;
    }
    .newsDetail-content p {
        padding-bottom: 20px;
    }
    p.newsDetail-remark {
        font-size: 12px;
    }
    .newsDetail-title {
        font-size: 18px;
        padding-bottom: 30px;
    }
    .newsDetail-content img {
        margin: 30px auto;
    }
    .newsDetailShare {
        margin-top: 10px;
    }
    .newsDetailShare-title {
        font-size: 14px;
    }
    .newsDetailShare-list {
        margin-top: 10px;
        transform: translateX(6px);
    }
    .newsDetailShare-list a {
        display: inline-block;
        margin: 0 20px;
        height: 22px;
    }
    .newsDetailOtherList {
        margin: 40px auto 0;
        padding-top: 40px;
    }
    .newsDetailOtherList-title {
        font-size: 26px;
        line-height: 32px;
    }
    .newsDetailOtherList .latestNews-listArea {
        margin-top: 20px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .newsDetailOtherList .latestNews-listArea .latestNews-listItem {
        width: 100%;
        margin: 0;
    }
}

/******** CAREER ***************/
.pageCareerCulture .detailBanner-text {
    top: calc(50% - 200px);
}
.bg_career_job_list {
    background-color: #fff;
}
.pageCareerJobList .landSellBuyList-title {
    text-align: center;
}
.pageCareerJobList .landSellBuyList {
    margin-top: -20px;
}
.pageCareerJobList .landSellBuyList-item {
    position: relative;
    padding: 30px 25px;
    font-size: 20px;
    color: #153050;
    background-color: #f3f4f6;
}
.pageCareerJobList .landSellBuyList-itemTitle {
    height: 40px;
    padding: 10px 10px 10px 50px;
    background-image: url(../../images/contact/icon-marker.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: left center;
}
.pageCareerJobList .landSellBuyList-list {
    border-top: none;
    height: 575px;
}
.jobDetail {
    color: #153050;
    font-size: 16px;
    font-weight: 300;
    padding: 10px 30px;
}
.jobDetail-title {
    font-size: 16px;
    font-weight: 500;
    padding-bottom: 10px;
    text-transform: uppercase;
}
.jobDetail p {
    color: #153050;
    font-size: 16px;
    font-weight: 300;
    padding-bottom: 10px;
}
.jobDetail ul {
    padding-left: 16px;
    list-style-type: disc;
    list-style-position: outside;
}
.jobDetail ul li {
    padding-bottom: 5px;
}
.jobListItem-numPos {
    position: absolute;
    top: 15px;
    font-size: 16px;
    font-weight: 300;
    right: 80px;
    text-transform: uppercase;
}

.pageCareerJobList .boardContentList .panel-heading .accordion-toggle {
    color: #153050;
}
.pageCareerJobList .boardContentList .panel-heading .accordion-toggle.collapsed {
    color: #153050;
}
.pageCareerJobList .boardContentList .panel-heading .accordion-toggle span.ion-android-arrow-dropdown {
    color: #153050;
}
.pageCareerJobList .boardContentList .panel-heading .accordion-toggle span.ion-android-arrow-dropup {
    color: #153050;
}

.formSellBuyAreaFull.formCareerJobList {
    height: auto;
}
.formCareerJobList .formSellBuyAreaFullInner {
    height: auto;
    min-height: 100vh;
    padding: 80px 0;
}
.formCareerJobList .formSellBuyDetailArea {
    position: relative;
    width: 62%;
    top: unset;
    left: unset;
    transform: translate(0, 0);
    margin: 0 auto;
}
.formCareerJobList .formSellBuyDetailAreaInner {
    padding: 80px 120px;
}
.formCareerJobList .landFormTitle {
    font-size: 24px;
    line-height: 34px;
    text-align: center;
}
.formCareerJobList .landFormTitleSub {
    font-size: 40px;
    line-height: 50px;
    text-align: center;
    border-bottom: 10px solid #153050;
    padding-bottom: 25px;
    margin-bottom: 10px;
}
.applyFormMiddleTitle {
    padding: 10px 0;
}

.btn-findYourSuccess {
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    padding: 15px 30px;
    border-radius: 0px;
    background-color: rgba(0, 0, 0, 0.25);
    border: solid 1px #c5a254;
}
.btn-findYourSuccess:hover {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}

.workwithusNav {
    width: 100%;
    height: 60px;
    padding: 18px 0px;
    background-color: rgba(0, 0, 0, 0.25);
    text-align: center;
}
.workwithusNav ul li {
    display: inline-block;
    padding: 0 60px;
    font-size: 16px;
    cursor: pointer;
}
.workwithusNav ul li,
.workwithusNav ul li a {
    color: #fff;
}
.workwithusNav ul li.actived,
.workwithusNav ul li.actived a {
    color: #c5a254;
}
.workwithusDetail-detail span {
    color: #aaa;
}
.workwithusList-title {
    font-size: 46px;
    line-height: 48px;
    font-weight: 600;
    color: #fff;
}
.workwithusList-title span {
    font-weight: 300;
    color: #c5a254;
}
.workwithusList-subTitle {
    font-size: 20px;
    line-height: 28px;
    font-weight: 300;
    margin-top: 40px;
    color: #aaa;
    margin-bottom: 40px;
}
.workwithusDetail {
    height: 320px;
}

@media (max-width: 1600px) {
    .pageCareerJobList .landSellBuyList {
        margin-top: 0px;
    }
    .pageCareerJobList .landSellBuyList-list {
        height: 420px;
    }
    .workwithusNav {
        width: 100%;
        height: 60px;
        padding: 18px 0px;
    }
    .workwithusNav ul li {
        padding: 0 28px;
        font-size: 14px;
    }
}
@media (max-width: 1440px) {
    .workwithusNav ul li {
        padding: 0 22px;
        font-size: 14px;
    }
}
@media (max-width: 1366px) {
    .pageCareerCulture .detailBanner-text {
        top: calc(50% - 140px);
    }
    .pageCareerJobList .landSellBuyList {
        margin-top: 0px;
    }
    .pageCareerJobList .landSellBuyList-list {
        height: 350px;
    }
    .workwithusNav {
        width: 100%;
        height: 50px;
        padding: 12px 0px;
    }
    .workwithusNav ul li {
        padding: 0 20px;
        font-size: 14px;
    }
    .workwithusList-title {
        font-size: 32px;
        line-height: 34px;
    }
    .workwithusList-subTitle {
        font-size: 16px;
        line-height: 22px;
        margin-top: 30px;
        margin-bottom: 35px;
    }
    .workwithusDetail {
        height: 260px;
    }
    .pageCareerWorkWithUs .sustainAbout-right {
        margin-top: 50px;
    }
}

@media (max-width: 1280px) {
    .workwithusNav ul li {
        padding: 0 12px;
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .pageCareerCulture .detailBanner-text {
        top: calc(50% - 120px);
    }
    .detailPageNav.pageCareer {
        bottom: 0px;
        /*background-color: #fff;*/
        height: 95px;
    }

    .pageCareerWorkWithUs .detailPageSection {
        overflow: auto;
        min-height: 100vh;
    }
    .pageCareerWorkWithUs .detailPageNav.bgColorBlack {
        bottom: 0px;
        background-color: #1e1e1e;
        height: 95px;
    }
    .workwithusNav {
        width: 100%;
        height: 50px;
        padding: 12px 0px;
    }
    .workwithusNav ul li {
        padding: 0 6px;
        font-size: 13px;
    }
    .workwithusList-title {
        font-size: 24px;
        line-height: 28px;
    }
    .workwithusList-subTitle {
        font-size: 16px;
        line-height: 22px;
        margin-top: 30px;
        margin-bottom: 35px;
    }
    .workwithusDetail {
        height: auto;
        padding: 20px;
        display: none;
    }
    .workwithusDetail.actived {
        display: block;
    }
    .pageCareerWorkWithUs .sustainAbout-right {
        margin-top: 50px;
    }

    .pageCareerJobList {
        position: relative;
        min-height: 100vh;
    }
    .bg_career_job_list {
        position: relative;
        display: block;
        min-height: 100vh;
        padding-bottom: 100px;
    }
    .pageCareerJobList .landSellBuyList {
        margin-top: 90px;
    }
    .pageCareerJobList .landSellBuyList-list {
        height: auto;
        overflow: auto;
    }
    .pageCareerJobList .boardContentList .panel-title {
        font-size: 16px;
        line-height: 18px;
        max-width: 80%;
    }
    .pageCareerJobList .panel-group.boardContentList {
        margin-bottom: 0px;
    }
    .pageCareerJobList .panel-group.boardContentList .panel {
        border-bottom: 1px solid rgba(21, 48, 80, 0.25);
        margin-bottom: 0px;
        padding: 5px 0;
    }
    .pageCareerJobList .boardContentList .panel-default > .panel-heading + .panel-collapse > .panel-body {
        padding: 0 0 20px;
    }
    .jobDetail {
        color: #153050;
        font-size: 14px;
        padding: 5px 20px;
    }
    .jobDetail-title {
        font-size: 14px;
        padding-bottom: 5px;
    }
    .jobDetail p {
        font-size: 14px;
        padding-bottom: 5px;
    }
    .jobListItem-numPos {
        position: relative;
        display: block;
        top: unset;
        font-size: 12px;
        right: unset;
        padding-top: 5px;
    }
    .formCareerJobList .formSellBuyAreaFull {
        height: auto;
    }
    .formCareerJobList .formSellBuyDetailArea {
        width: 100%;
    }
    .formCareerJobList .formSellBuyDetailAreaInner {
        padding: 40px 20px;
    }
    .formCareerJobList .landFormTitle {
        font-size: 16px;
        line-height: 20px;
    }
    .formCareerJobList .landFormTitleSub {
        font-size: 22px;
        line-height: 28px;
    }
}

/**** SUSTAINABILITY ****/
.bg_sustainOverviewSection1 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/sustainability/bg_sustain_overview01.jpg");
    min-height: 100vh;
}
.bg_sustainOverviewSection3 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/sustainability/bg_sustain_overview03.jpg");
}
.bg_sustainAboutSection1 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/sustainability/bg_sustain_about01.jpg");
}
.bg_sustainAboutSection2 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../../images/sustainability/bg_sustain_about02.jpg");
}
.bg_sustainProjects {
    width: 100%;
    height: 100vh;
    position: fixed;
    background-size: auto;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-image: url("../../images/sustainability/bg_sustain_projects.jpg");
}
.pageSustainProjectDetail.positionFixed {
    position: fixed;
}
.sustainStat-left {
    width: 17%;
    /*height: 100%;*/
    height: 100vh;
    padding-left: 80px;
    float: none;
    position: absolute;
    top: 0px;
}
.sustainStat-right {
    width: 83%;
    height: 100vh;
    float: right;
    padding-bottom: 80px;
    top: 0px;
}
.sustainOverviewStatList {
    width: 90%;
    margin-top: 70px;
}
.sustainOverviewStatItem {
    display: inline-block;
    width: 14%;
    margin: 0 2%;
    vertical-align: top;
}
.sustainOverviewStatItem-Icon {
    width: 80%;
    margin: 0 auto;
}
.sustainOverviewStatItem-Iconline {
    width: 3px;
    background-color: #c5a254;
    height: 60px;
    transform: translateX(-50%);
    margin-left: 50%;
}
.sustainOverviewStatItem-Iconline:after {
    content: "";
    position: absolute;
    background-color: #c5a254;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    bottom: 0px;
    left: 50%;
    margin-left: -8px;
}
.sustainOverviewStatList .sustainOverviewStatItem {
    opacity: 0;
    transition: all 1s ease;
}
.sustainOverviewStatList.showContent .sustainOverviewStatItem {
    opacity: 0;
    animation-name: SustainStatshowContent;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
.sustainOverviewStatList.showContent .sustainOverviewStatItem:nth-child(2) {
    animation-delay: 0.2s;
}
.sustainOverviewStatList.showContent .sustainOverviewStatItem:nth-child(3) {
    animation-delay: 0.4s;
}
.sustainOverviewStatList.showContent .sustainOverviewStatItem:nth-child(4) {
    animation-delay: 0.6s;
}
.sustainOverviewStatList.showContent .sustainOverviewStatItem:nth-child(5) {
    animation-delay: 0.8s;
}
@keyframes SustainStatshowContent {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.sustainOverviewStatItem-title {
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    margin-top: 20px;
}
.sustainOverviewStatItem-count {
    font-size: 46px;
    font-weight: 300;
    text-align: center;
    margin-top: 20px;
}
.sustainOverviewStatItem-unit {
    font-size: 17px;
    font-weight: 400;
    text-align: center;
    margin-top: 20px;
}

.sustainAbout-left {
    width: 40%;
    height: 100vh;
    padding-left: 8%;
    float: none;
    position: absolute;
    top: 0px;
}
.sustainAbout-right {
    width: 60%;
    height: 100vh;
    float: right;
    padding-bottom: 80px;
    top: 0px;
    padding-right: 20%;
    margin-top: 95px;
}
.sustainAboutTitleArea {
    max-width: 450px;
}
.sustainAbout-title {
    font-size: 46px;
    line-height: 48px;
    font-weight: 600;
    color: #fff;
}
.sustainAbout-subTitle {
    font-size: 22px;
    line-height: 30px;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 40px;
}
.sustainAboutNav {
    margin-bottom: 40px;
}
.sustainAboutNav ul li {
    display: inline-block;
    width: 80px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-right: 30px;
    opacity: 0.4;
    cursor: pointer;
}
.sustainAboutNav ul li:last-child {
    margin-right: 0px;
}
.sustainAboutDetail-Icon {
    width: 80px;
    margin-bottom: 4px;
    border: solid 7px transparent;
    border-radius: 8px;
}
.sustainAboutNav ul li:hover,
.sustainAboutNav ul li.actived {
    opacity: 1;
}
.sustainAboutNav ul li.actived .sustainAboutDetail-Icon {
    border: solid 7px #c5a254;
}
.sustainAboutDetail {
    display: none;
    height: 300px;
    color: #fff;
    font-size: 20px;
    line-height: 30px;
    font-weight: 300;
}
.sustainAboutDetail.actived {
    display: block;
}
.sustainAboutDetail-title {
    color: #c5a254;
    font-weight: 500;
    text-transform: uppercase;
}

.sustainabilityProjectTitle {
    font-size: 90px;
    line-height: 100px;
    font-weight: 600;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}
.sustainabilityProjectTitle span.subtitle {
    font-size: 40px;
    line-height: 50px;
    display: block;
}
.sustainabilityProjectName {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 24px;
}
.sustainabilityProjectSectionTitle {
    font-size: 38px;
    line-height: 40px;
    font-weight: 600;
    color: #153050;
}
.sustainabilityProjectActivities {
    padding: 100px 0;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.sustainabilityProjectActivitiesList {
    margin-top: 60px;
}
.sustainabilityProjectGallery {
    padding: 80px 0 0;
}
.sustainabilityProjectGalleryArea {
    margin-top: 40px;
}
.sustainabilityProjectContributors {
    padding-top: 120px;
}
.sustainabilityProjectContributorsLeft {
    float: left;
    width: 36%;
}
.sustainabilityProjectContributorsRight {
    float: left;
    width: 64%;
}
.projectContributorsItem {
    padding-bottom: 30px;
    height: 300px;
}
.projectContributorsLogo {
    border: 1px solid #ccc;
    background-color: #fff;
}
.projectContributorsLogo-line {
    height: 4px;
    width: 30px;
    background-color: #c5a254;
    margin: 20px 0;
}
.projectContributorsName {
    font-size: 16px;
    color: #153050;
    text-transform: uppercase;
    line-height: 20px;
}
.projectActivitiesItem {
    width: 100%;
}
.projectActivitiesItemLeft {
    float: left;
    width: 44%;
    padding-right: 6%;
}
.projectActivitiesItemRight {
    float: left;
    width: 56%;
    padding-right: 20px;
}

.projectActivitiesItem .sustainabilityProjectName {
    color: #153050;
}
.projectActivitiesItem .contentTItle {
    color: #153050;
}
.projectActivitiesItem .latestNews-readAll {
    margin-top: 0px;
}
.projectActivitiesItem .latestNews-readAll::after {
    left: 85px;
    top: 15px;
}
.projectActivitiesItem .carousel-indicators li {
    width: 8px;
    height: 8px;
    margin: 6px;
    background-color: #fff;
    border-color: #fff;
}
.projectActivitiesItem .carousel-indicators {
    bottom: 2px;
}
.projectActivitiesItem .carousel-indicators .active {
    width: 8px;
    height: 8px;
    margin: 6px;
    background-color: #c5a254;
    border-color: #c5a254;
}
.sustainabilityProjectShareDiv {
    position: fixed;
    right: 0px;
    bottom: 15%;
    width: 50px;
    z-index: 1000;
}
.activitiesShareBtn,
.activitiesPrintBtn,
.mainShareBtn {
    cursor: pointer;
}
.activitiesShareArea ul li a,
.sustainabilityProjectShareDiv ul li a {
    margin: 0;
    padding: 0;
}
ul.sustainabilityProjectShareOptions {
    visibility: hidden;
}
ul.sustainabilityProjectShareOptions li {
    opacity: 0;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
ul.sustainabilityProjectShareOptions.actived {
    visibility: visible;
}
ul.sustainabilityProjectShareOptions.actived li {
    opacity: 0.5;
}
ul.sustainabilityProjectShareOptions li:nth-child(1) {
    transition-delay: 0s;
}
ul.sustainabilityProjectShareOptions li:nth-child(2) {
    transition-delay: 0.1s;
}
ul.sustainabilityProjectShareOptions li:nth-child(3) {
    transition-delay: 0.2s;
}
ul.sustainabilityProjectShareOptions.actived li:nth-child(1) {
    transition-delay: 0.2s;
}
ul.sustainabilityProjectShareOptions.actived li:nth-child(2) {
    transition-delay: 0.1s;
}
ul.sustainabilityProjectShareOptions.actived li:nth-child(3) {
    transition-delay: 0s;
}
ul.sustainabilityProjectShareOptions.actived li:hover {
    opacity: 1;
}

.activitiesMoreDetail {
    padding: 100px 160px;
    margin: 80px auto 0px;
}
.activitiesMoreDetailFull .projectBackBtn {
    top: -20px;
}
.activitiesMore-name {
    font-size: 45px;
    line-height: 45px;
    font-weight: 500;
    text-transform: uppercase;
}
.activitiesMoreBanner {
    margin-top: 60px;
    margin-bottom: 60px;
}
.activitiesMore-content {
    padding-top: 6px;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
    font-weight: 300;
    position: relative;
    padding-bottom: 20px;
}
.activitiesMore-content .content-subject-main {
    position: relative;
    font-weight: 600;
    margin-top: 24px;
    font-size: 24px;
    padding-bottom: 6px;
}
.activitiesMore-content .content-subject {
    font-weight: 500;
}
.activitiesShareArea {
    position: fixed;
    right: 12.5%;
    bottom: 11%;
    width: 50px;
    z-index: 10;
}
.activitiesMore-galleryArea {
    padding: 70px 80px;
}

.homeBannerPromotion-item.mobile {
    display: none !important;
}

@media (max-width: 1600px) {
    .detailContentBoxLeft.forSustainability .detailContentBox-detail {
        width: 90%;
    }
    .sustainOverviewStatItem-title {
        font-size: 18px;
        margin-top: 20px;
    }
    .sustainOverviewStatItem-count {
        font-size: 36px;
        margin-top: 20px;
    }
    .sustainOverviewStatItem-unit {
        font-size: 14px;
        margin-top: 20px;
    }
    .projectContributorsItem {
        height: 270px;
    }

    .activitiesMoreDetail {
        padding: 80px 160px;
        margin: 80px auto 0px;
    }
    .activitiesMoreDetailFull .projectBackBtn {
        top: -20px;
    }
    .activitiesMore-name {
        font-size: 40px;
        line-height: 40px;
    }
    .activitiesMoreBanner {
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .activitiesMore-content {
        padding-top: 6px;
        font-size: 16px;
        line-height: 22px;
        padding-bottom: 20px;
    }
    .activitiesMore-content .content-subject-main {
        margin-top: 24px;
        font-size: 22px;
        padding-bottom: 6px;
    }
    .activitiesShareArea {
        position: fixed;
        right: 12.5%;
        bottom: 11%;
        width: 50px;
    }
    .activitiesMore-galleryArea {
        padding: 60px 80px;
    }
}
@media (max-width: 1366px) {
    .detailContentBoxLeft.forSustainability .detailContentBox-detail {
        width: 100%;
    }
    .sustainOverviewStatList {
        margin-top: 90px;
        margin-left: 40px;
    }
    .sustainOverviewStatItem-title {
        font-size: 16px;
        margin-top: 10px;
    }
    .sustainOverviewStatItem-count {
        font-size: 34px;
        margin-top: 10px;
    }
    .sustainOverviewStatItem-unit {
        font-size: 12px;
        margin-top: 10px;
    }
    .pageSustainabilityAbout .detailContentBoxRight {
        width: 48%;
        right: 8%;
    }

    .sustainAbout-left {
        width: 40%;
        padding-left: 8%;
    }
    .sustainAbout-right {
        width: 60%;
        padding-bottom: 80px;
        padding-right: 20%;
        margin-top: 95px;
    }
    .sustainAboutTitleArea {
        max-width: 320px;
    }
    .sustainAbout-title {
        font-size: 34px;
        line-height: 38px;
    }
    .sustainAbout-subTitle {
        font-size: 16px;
        line-height: 22px;
        margin-top: 20px;
    }
    .sustainAboutNav {
        margin-bottom: 25px;
    }
    .sustainAboutNav ul li {
        display: inline-block;
        width: 60px;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        margin-right: 25px;
        opacity: 0.4;
        cursor: pointer;
    }
    .sustainAboutDetail-Icon {
        width: 60px;
        margin-bottom: 4px;
        border: solid 5px transparent;
        border-radius: 8px;
    }
    .sustainAboutNav ul li.actived .sustainAboutDetail-Icon {
        border: solid 5px #c5a254;
    }
    .sustainAboutDetail {
        height: 250px;
        font-size: 20px;
        line-height: 26px;
    }

    .sustainabilityProjectTitle {
        font-size: 70px;
        line-height: 80px;
    }
    .sustainabilityProjectTitle span.subtitle {
        font-size: 30px;
        line-height: 40px;
    }
    .sustainabilityProjectName {
        font-size: 22px;
    }
    .sustainabilityProjectSectionTitle {
        font-size: 32px;
        line-height: 34px;
    }
    .sustainabilityProjectActivities {
        padding: 60px 0;
    }
    .sustainabilityProjectActivitiesList {
        margin-top: 40px;
    }
    .pageSustainProjectDetail .projectDetailCarouselInner {
        padding-bottom: 0px;
    }
    .sustainabilityProjectGallery {
        padding: 60px 0 0;
    }
    .sustainabilityProjectGalleryArea {
        margin-top: 40px;
    }
    .sustainabilityProjectGalleryArea .projectDetailCarouselInner .owl-nav-custom {
        bottom: -100px;
    }
    .sustainabilityProjectContributors {
        padding-top: 140px;
    }
    .sustainabilityProjectContributorsLeft {
        float: left;
        width: 36%;
    }
    .sustainabilityProjectContributorsRight {
        float: left;
        width: 64%;
    }
    .projectContributorsItem {
        padding-bottom: 20px;
        height: 230px;
    }
    .projectContributorsLogo-line {
        height: 4px;
        width: 30px;
        margin: 15px 0 10px;
    }
    .projectContributorsName {
        font-size: 14px;
        line-height: 16px;
    }
    .projectActivitiesItemLeft {
        float: left;
        width: 44%;
        padding-right: 6%;
    }
    .projectActivitiesItemRight {
        float: left;
        width: 56%;
        padding-right: 20px;
        padding-bottom: 40px;
    }

    .sustainabilityProjectShareDiv {
        bottom: 15%;
        width: 40px;
    }

    .activitiesMoreDetail {
        padding: 60px 140px;
        margin: 80px auto 0px;
    }
    .activitiesMoreDetailFull .projectBackBtn {
        top: -20px;
    }
    .activitiesMore-name {
        font-size: 30px;
        line-height: 30px;
    }
    .activitiesMoreBanner {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .activitiesMore-content {
        padding-top: 6px;
        font-size: 16px;
        line-height: 22px;
        padding-bottom: 20px;
    }
    .activitiesMore-content .content-subject-main {
        margin-top: 24px;
        font-size: 20px;
        padding-bottom: 6px;
    }
    .activitiesShareArea {
        position: fixed;
        right: 12.5%;
        bottom: 11%;
        width: 40px;
    }
    .activitiesMore-galleryArea {
        padding: 40px 80px;
    }
}
@media (max-width: 1280px) {
}
@media (max-width: 767px) {
    .detailPageSection.bg_sustainOverviewSection1 {
        overflow: auto;
    }
    .detailContentBoxLeft.forSustainability {
        position: relative;
        width: 100%;
        left: 0%;
        top: 0;
        transform: translateY(0);
        padding-top: 90px;
    }
    .detailContentBoxLeft.forSustainability .detailContentBox-detail {
        width: 100%;
    }
    .sustainabilityMobileClass .detailPageNav {
        bottom: 0px;
        background-color: #ededed;
        height: 95px;
    }
    .sustainabilityMobileClass .detailPageNav.moveupShow {
        animation-name: none;
    }
    .sustainabilityMobileClass .detailPageNav-bottom {
        bottom: 20px;
    }

    .sustainStat-left {
        display: none;
    }
    .sustainStat-right {
        width: 100%;
        height: auto;
        float: none;
        padding-bottom: 80px;
        top: 0px;
        padding-top: 20px;
    }
    .sustainOverviewStatList {
        width: 90%;
        margin-top: 0px;
        margin: 0 auto;
        text-align: center;
    }
    .sustainOverviewStatItem {
        display: inline-block;
        width: 28%;
        margin: 0 2%;
    }
    .sustainOverviewStatItem-Icon {
        width: 70%;
        margin: 0 auto;
    }
    .sustainOverviewStatItem-Iconline {
        width: 3px;
        background-color: #c5a254;
        height: 20px;
        transform: translateX(-50%);
        margin-left: 50%;
    }
    .sustainOverviewStatItem-Iconline:after {
        content: "";
        position: absolute;
        background-color: #c5a254;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        bottom: 0px;
        left: 50%;
        margin-left: -5px;
    }
    .sustainOverviewStatItem-title {
        font-size: 12px;
        line-height: 14px;
        margin-top: 6px;
    }
    .sustainOverviewStatItem-count {
        font-size: 18px;
        line-height: 22px;
        margin-top: 6px;
    }
    .sustainOverviewStatItem-unit {
        font-size: 10px;
        margin-top: 0px;
    }

    .pageSustainabilityAbout .detailPageSection {
        overflow: auto;
        min-height: 100vh;
    }
    .pageSustainabilityAbout .detailContentBoxRight {
        position: relative;
        width: 100%;
        top: unset;
        right: unset;
        transform: translate(0, 0);
        padding-top: 90px;
    }

    .pageSustainabilityAbout .pageCenter {
        display: block;
        height: auto;
    }
    .pageSustainabilityAbout .content_container {
        display: block;
    }
    .sustainAbout-left {
        position: relative;
        width: 100%;
        padding-left: unset;
        height: auto;
        padding-top: 50px;
        text-align: center;
    }
    .sustainAbout-right {
        width: 100%;
        height: auto;
        padding-bottom: 60px;
        padding-right: unset;
        margin-top: 40px;
        float: none;
    }
    .sustainAboutTitleArea {
        max-width: 280px;
        margin: 0 auto;
    }
    .sustainAbout-title {
        font-size: 26px;
        line-height: 32px;
    }
    .sustainAbout-subTitle {
        font-size: 14px;
        line-height: 20px;
        margin-top: 15px;
    }
    .sustainAboutNav {
        margin-bottom: 20px;
        text-align: center;
    }
    .sustainAboutNav ul li {
        display: inline-block;
        width: 50px;
        font-size: 12px;
        margin-right: 5px;
        opacity: 0.4;
        cursor: pointer;
    }
    .sustainAboutDetail-Icon {
        width: 50px;
        margin-bottom: 4px;
        border: solid 5px transparent;
        border-radius: 8px;
    }
    .sustainAboutNav ul li.actived .sustainAboutDetail-Icon {
        border: solid 5px #c5a254;
    }
    .sustainAboutDetail {
        height: 260px;
        font-size: 14px;
        line-height: 20px;
        padding: 0 20px;
    }

    .pageSustainProjectDetail .projectContentArea {
        padding: 40px 0 0px;
    }
    .sustainabilityProjectTitle {
        font-size: 22px;
        line-height: 24px;
        text-align: center;
    }
    .sustainabilityProjectTitle span.subtitle {
        font-size: 14px;
        line-height: 20px;
    }
    .sustainabilityProjectName {
        font-size: 18px;
    }
    .sustainabilityProjectSectionTitle {
        font-size: 24px;
        line-height: 26px;
    }
    .sustainabilityProjectActivities {
        padding: 60px 0;
    }
    .sustainabilityProjectActivitiesList {
        margin-top: 30px;
    }
    .pageSustainProjectDetail .projectDetailCarouselInner {
        padding-bottom: 20px;
    }
    .sustainabilityProjectGallery {
        padding: 60px 20px 80px;
    }
    .sustainabilityProjectGalleryArea {
        margin-top: 30px;
    }
    .sustainabilityProjectGalleryArea .projectDetailCarouselInner .owl-nav-custom {
        bottom: -70px;
    }
    .sustainabilityProjectContributors {
        padding-top: 80px;
    }
    .sustainabilityProjectContributorsLeft {
        float: none;
        width: 100%;
    }
    .sustainabilityProjectContributorsRight {
        float: none;
        width: 100%;
        padding-top: 40px;
    }
    .projectContributorsItem {
        padding-bottom: 20px;
        height: 210px;
    }
    .projectContributorsLogo-line {
        height: 4px;
        width: 30px;
        margin: 15px 0 10px;
    }
    .projectContributorsName {
        font-size: 14px;
        line-height: 16px;
    }
    .projectActivitiesItemLeft {
        float: none;
        width: 100%;
        padding-right: 0px;
    }
    .projectActivitiesItemRight {
        float: none;
        width: 100%;
        padding-right: 0px;
        padding-top: 20px;
        padding-bottom: 10px;
    }

    .sustainabilityProjectShareDiv {
        bottom: 10%;
        width: 35px;
    }

    .activitiesMoreDetail {
        padding: 40px 20px;
        margin: 50px auto 0px;
    }
    .activitiesMoreDetailFull .projectBackBtn {
        top: -30px;
    }
    .activitiesMore-name {
        font-size: 22px;
        line-height: 22px;
    }
    .activitiesMoreBanner {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .activitiesMore-content {
        padding-top: 6px;
        font-size: 14px;
        line-height: 20px;
        padding-bottom: 20px;
    }
    .activitiesMore-content .content-subject-main {
        margin-top: 24px;
        font-size: 18px;
        padding-bottom: 6px;
    }
    .activitiesShareArea {
        position: fixed;
        right: 0px;
        bottom: 20px;
        width: 35px;
    }
    .activitiesMore-galleryArea {
        padding: 40px 0px;
    }
}

/**** S BLOG ****/
.newsListPage .sblogList .latestNews-listArea {
    padding-left: 70px;
}
.sblog-item {
}
.sblog-item-image {
    position: relative;
    margin-bottom: 16px;
}
.sblog-item-image::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    width: 2px;
    height: 30px;
    background-color: #c5a254;
    transform: translateX(-50%);
}
.sblog-item-detail {
    padding: 0 15px;
    text-align: center;
}
.sblog-item-detail-date {
    color: #153050;
    font-size: 14px;
    font-weight: 500;
}
.sblog-item-detail-title {
    font-size: 24px;
    color: #153050;
    font-weight: 500;
    padding-top: 15px;
}
.sblog-item-detail-title a {
    color: #153050;
}
.sblog-item-detail-detail {
    font-size: 16px;
    color: #000;
    font-weight: 300;
    padding-top: 15px;
}
.sblog-item-detail-share {
    font-size: 16px;
    color: #000;
    padding-top: 20px;
}
.sblog-item-detail-share-list {
    padding-top: 10px;
    transform: translateX(8px);
}
.sblog-item-detail-share-list ul li {
    display: inline-block;
    text-align: center;
    margin: 0 18px;
    height: 24px;
}

.sblog-leftArea {
    margin-top: 280px;
}
.sblog-searchArea {
    margin-top: 20px;
}
.sblog-search-input {
    border: 1px solid #c5a254;
    border-radius: 0;
    color: #000;
    background-color: transparent;
    padding: 12px 20px;
    height: 44px;
}
.sblog-categoryArea {
    margin-top: 40px;
}
.sblogNav-dotLine {
    position: relative;
    height: 1000px;
}
.sblogNav-dotLine:before {
    content: "";
    position: absolute;
    border-left: dotted 2px #c5a254;
    width: 4px;
    height: 100%;
    transform: translateX(30px);
}
.sblogNav-dotLine ul li {
    display: block;
    padding-left: 70px;
    padding-bottom: 30px;
    cursor: pointer;
}
.sblog-categoryText {
    transform: translateY(-7px);
    color: #153050;
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    transition: all 0.4s ease;
    text-transform: uppercase;
}

.sblogNav-dot {
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: #c5a254;
    border-radius: 50%;
    display: inline-block;
    left: 31px;
    transform: translate(-50%, -50%);
    z-index: 1;
    cursor: pointer;
    transition: all 0.4s ease;
}
.sblogNav-dot span {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    color: #fff;
    font-size: 16px;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
}
.sblogNav-dotLine ul li.actived .sblogNav-dot,
.sblogNav-dotLine ul li:hover .sblogNav-dot {
    height: 40px;
    width: 40px;
}
.sblogNav-dotLine ul li.actived .sblogNav-dot span,
.sblogNav-dotLine ul li:hover .sblogNav-dot span {
    opacity: 1;
}
.sblogNav-dotLine ul li.actived .sblog-categoryText,
.sblogNav-dotLine ul li:hover .sblog-categoryText {
    color: #c5a254;
}

.sblogDetail-header {
    margin: 40px 0 60px;
    color: #153050;
    text-align: center;
}
.sblogDetail-header .desc {
    color: #000;
    margin-top: 10px;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}
.sblogDetail-date {
    font-size: 16px;
    font-weight: 500;
}
.sblogDetail-title {
    font-size: 40px;
    line-height: 42px;
    font-weight: 600;
    margin-top: 18px;
}

.otherBlogItem .latestNews-TitleArea {
    position: static;
    z-index: 200;
    width: 100%;
    height: 50px;
    text-align: center;
    bottom: -30px;
    transition: all 0.4s ease;
    color: #153050;
}
.otherBlogItem .latestNews-TitleLine {
    height: 30px;
}
.otherBlogItem .latestNews-TitleLine:before {
    content: "";
    position: absolute;
    width: 2px;
    height: 30px;
    background-color: #c5a254;
    top: auto;
    bottom: 70px;
    left: calc(50% - 1px);
}
.otherBlogItem .latestNews-TitleText {
    font-weight: 500;
}

@media (max-width: 1600px) {
    .newsListPage .sblogList .latestNews-listArea {
        padding-left: 100px;
    }
    .sblog-item-image {
        margin-bottom: 16px;
    }
    .sblog-item-image::after {
        bottom: -15px;
        height: 30px;
    }
    .sblog-item-detail {
        padding: 0 15px;
    }
    .sblog-item-detail-date {
        font-size: 14px;
    }
    .sblog-item-detail-title {
        font-size: 20px;
        line-height: 25px;
        padding-top: 10px;
    }
    .sblog-item-detail-detail {
        font-size: 14px;
        line-height: 18px;
        padding-top: 10px;
    }
    .sblog-item-detail-share {
        font-size: 14px;
        padding-top: 15px;
    }
    .sblog-item-detail-share-list {
        padding-top: 10px;
        transform: translateX(8px);
    }
    .sblog-item-detail-share-list ul li {
        margin: 0 16px;
        height: 22px;
    }

    .sblog-leftArea {
        margin-top: 260px;
    }
    .sblog-searchArea {
        margin-top: 15px;
    }
    .sblog-search-input {
        padding: 12px 15px;
        height: 44px;
    }
    .sblog-categoryArea {
        margin-top: 40px;
    }
    .sblogNav-dotLine {
        position: relative;
        height: 800px;
    }
    .sblogNav-dotLine:before {
        width: 4px;
        height: 100%;
        transform: translateX(30px);
    }
    .sblogNav-dotLine ul li {
        padding-left: 70px;
        padding-bottom: 30px;
    }
    .sblog-categoryText {
        transform: translateY(-7px);
        font-size: 14px;
        line-height: 16px;
    }

    .sblogNav-dot {
        height: 10px;
        width: 10px;
        left: 31px;
    }
    .sblogNav-dot span {
        font-size: 16px;
    }
    .sblogNav-dotLine ul li.actived .sblogNav-dot,
    .sblogNav-dotLine ul li:hover .sblogNav-dot {
        height: 40px;
        width: 40px;
    }

    .sblogDetail-header {
        margin: 30px 0 40px;
    }
    .sblogDetail-date {
        font-size: 16px;
    }
    .sblogDetail-title {
        font-size: 34px;
        line-height: 36px;
        margin-top: 18px;
    }
}
@media (max-width: 1440px) {
}
@media (max-width: 1366px) {
    .newsListPage .sblogList .latestNews-listArea {
        padding-left: 120px;
    }
    .sblog-item-image {
        margin-bottom: 16px;
    }
    .sblog-item-image::after {
        bottom: -15px;
        height: 30px;
    }
    .sblog-item-detail {
        padding: 0 15px;
    }
    .sblog-item-detail-date {
        font-size: 12px;
    }
    .sblog-item-detail-title {
        font-size: 16px;
        line-height: 25px;
        padding-top: 8px;
    }
    .sblog-item-detail-detail {
        font-size: 13px;
        line-height: 16px;
        padding-top: 8px;
    }
    .sblog-item-detail-share {
        font-size: 13px;
        padding-top: 10px;
    }
    .sblog-item-detail-share-list {
        padding-top: 8px;
        transform: translateX(8px);
    }
    .sblog-item-detail-share-list ul li {
        margin: 0 14px;
        height: 20px;
    }

    .sblog-leftArea {
        margin-top: 190px;
    }
    .sblog-searchArea {
        margin-top: 10px;
    }
    .sblog-search-input {
        padding: 10px 15px;
        height: 40px;
    }
    .sblog-categoryArea {
        margin-top: 40px;
    }
    .sblogNav-dotLine {
        position: relative;
        height: 800px;
    }
    .sblogNav-dotLine:before {
        width: 4px;
        height: 100%;
        transform: translateX(30px);
    }
    .sblogNav-dotLine ul li {
        padding-left: 70px;
        padding-bottom: 30px;
    }
    .sblog-categoryText {
        transform: translateY(-7px);
        font-size: 13px;
        line-height: 15px;
    }

    .sblogNav-dot {
        height: 10px;
        width: 10px;
        left: 31px;
    }
    .sblogNav-dot span {
        font-size: 14px;
    }
    .sblogNav-dotLine ul li.actived .sblogNav-dot,
    .sblogNav-dotLine ul li:hover .sblogNav-dot {
        height: 40px;
        width: 40px;
    }

    .sblogDetail-header {
        margin: 20px 0 25px;
    }
    .sblogDetail-date {
        font-size: 14px;
    }
    .sblogDetail-title {
        font-size: 30px;
        line-height: 32px;
        margin-top: 10px;
    }
}
@media (max-width: 767px) {
    .newsListPage .sblogList .latestNews-listArea {
        padding: 20px 40px;
    }
    .sblogList .latestNews-listArea .latestNews-listItem {
        padding-bottom: 40px;
    }
    .sblog-item-image {
        margin-bottom: 16px;
    }
    .sblog-item-image::after {
        bottom: -15px;
        height: 30px;
    }
    .sblog-item-detail {
        padding: 0 15px;
    }
    .sblog-item-detail-date {
        font-size: 12px;
    }
    .sblog-item-detail-title {
        font-size: 16px;
        line-height: 18px;
        padding-top: 8px;
    }
    .sblog-item-detail-detail {
        font-size: 13px;
        line-height: 16px;
        padding-top: 8px;
    }
    .sblog-item-detail-share {
        font-size: 13px;
        padding-top: 10px;
    }
    .sblog-item-detail-share-list {
        padding-top: 8px;
        transform: translateX(8px);
    }
    .sblog-item-detail-share-list ul li {
        margin: 0 14px;
        height: 20px;
    }

    .pageSBlogList .newsListPage .latestNews-left {
        height: auto;
        display: block;
        width: 100%;
        position: relative;
        top: 0;
        padding: 0 20px;
    }
    .sblog-leftArea {
        margin-top: 0px;
        padding-top: 90px;
    }
    .sblog-leftArea .latestNews-title {
        font-size: 28px;
    }
    .sblog-searchArea {
        margin-top: 8px;
    }
    .sblog-search-input {
        padding: 10px 15px;
        height: 40px;
    }
    .sblog-categoryArea {
        margin-top: 40px;
    }
    .sblogNav-dotLine {
        position: relative;
        height: 140px;
    }
    .sblogNav-dotLine:before {
        width: 4px;
        height: 100%;
        transform: translateX(30px);
    }
    .sblogNav-dotLine ul li {
        padding-left: 60px;
        padding-bottom: 20px;
    }
    .sblog-categoryText {
        transform: translateY(-7px);
        font-size: 12px;
        line-height: 14px;
    }

    .sblogNav-dot {
        height: 10px;
        width: 10px;
        left: 31px;
    }
    .sblogNav-dot span {
        font-size: 14px;
    }
    .sblogNav-dotLine ul li.actived .sblogNav-dot,
    .sblogNav-dotLine ul li:hover .sblogNav-dot {
        height: 40px;
        width: 40px;
    }

    .sblogDetail-header {
        margin: 0px 0 25px;
    }
    .sblogDetail-date {
        font-size: 13px;
    }
    .sblogDetail-title {
        font-size: 22px;
        line-height: 24px;
        margin-top: 8px;
    }
}

.modal-backdrop {
    z-index: 1240;
}
.formSendingModal.modal {
    text-align: center;
    padding: 0 !important;
    z-index: 1300;
}
.formSendingModal.modal:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}
.formSendingModal .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}
.formSendingModal .modal-content {
    background: transparent;
    box-shadow: none;
    border: none;
}
.formSendingModal .modal-body {
    text-align: center;
}
.formSendingModal .loader {
    border: 8px solid rgba(237, 237, 237, 1);
    border-top: 8px solid rgba(49, 104, 87, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    margin-left: auto;
    margin-right: auto;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.formThanksModel.modal {
    text-align: center;
    padding: 0 !important;
    z-index: 1300;
}
.formThanksModel.modal:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}
.formThanksModel .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}
.formThanksModel .modal-content {
    background: #fff;
    box-shadow: none;
    border: none;
    border-radius: 0;
}
.formThanksModel .modal-body {
    text-align: center;
}
.modelBodyDetail {
    border: none;
    padding: 40px 0 30px;
}
.formThanksModel .modalTitle {
    font-size: 36px;
    line-height: 40px;
    color: #153050;
}
.formThanksModel .modalDetail {
    font-size: 18px;
    line-height: 30px;
    color: #153050;
    padding: 20px 20px 30px;
}
.formThanksModel .modelCloseBtnCover {
    position: relative;
    text-align: center;
}
.formThanksModel .modelCloseBtn {
    position: relative;
}
.formThanksModel .modelCloseBtn a {
    width: 24px;
    height: 24px;
    display: inline-block;
}

.contactFieldArea .form-control.txtError,
.contactFieldArea .select.txtError {
    /*border-color: #ff0300;*/
    color: #ff0300;
}
.contactFieldArea .form-control.txtError::-moz-placeholder,
.contactFieldArea .select.txtError::-moz-placeholder {
    color: #ff0300;
}
.contactFieldArea .form-control.txtError::-ms-input-placeholder,
.contactFieldArea .select.txtError::-ms-input-placeholder {
    color: #ff0300;
}
.contactFieldArea .form-control.txtError::-webkit-input-placeholder,
.contactFieldArea .select.txtError::-webkit-input-placeholder {
    color: #ff0300;
}

.recaptchaText.txtError {
    color: #ff0300;
}

@media (max-width: 767px) {
    .formThanksModel.modal:before {
        height: 0px;
    }
    .formThanksModel .modalTitle {
        font-size: 20px;
        line-height: 24px;
    }
    .formThanksModel .modalDetail {
        font-size: 14px;
        line-height: 20px;
    }
    .layoutModel .modal-dialog {
        width: 90%;
    }
    .layoutModel .layoutModelSelect {
        margin-top: 30px;
    }
    .layoutModel .modelCloseBtn {
        margin-top: 10px;
    }

    .homeBannerPromotion-item {
        display: none !important;
    }
    .homeBannerPromotion-item.mobile {
        display: block !important;
    }

    .bg_aboutusOurBrand .detailBanner-text h1 {
        font-size: 36px;
    }
    .bg_aboutusOurBrand .detailBanner-text h2 {
        font-size: 30px;
    }
}

.content-detail-main ol,
.content-detail-main ul {
    margin-top: 20px;
    margin-left: 20px;
    padding-left: 20px;
}
.content-detail-main ol li {
    list-style-type: decimal;
    margin-bottom: 10px;
}
.content-detail-main ul li {
    list-style-type: disc;
    margin-bottom: 10px;
}
.content-detail-main p {
    margin-top: 5px;
    margin-bottom: 5px;
}
.button.mfp-close:before,
.modal-dismiss:before {
    vertical-align: top;
    font-family: "iconfont";
    font-size: 22px;
    font-weight: normal;
    line-height: inherit;
}

/* dropdown sustain-new */
.sitepage-top .sitepage-nav {
    display: flex;
    justify-content: center;
}
.sitepage-nav .dropdown-menu {
    padding: 20px 30px;
    border-radius: 0;
    border: none;
}
.sitepage-nav .dropdown-menu .dropdown-submenu {
    position: relative;
}
.sitepage-nav .dropdown-menu .dropdown-submenu a {
    color: #153050 !important;
}
.sitepage-nav .dropdown-menu .dropdown-submenu:before {
    content: "";
    position: absolute;
    background-color: #c5a254;
    width: 0;
    height: 2px;
    top: 11px;
    transition: all 0.25s ease;
}
.sitepage-nav .dropdown-menu .dropdown-submenu:hover a,
.sitepage-nav .dropdown-menu .dropdown-submenu.active a {
    padding-left: 15px;
    background-color: transparent;
    border: none;
}
.sitepage-nav .dropdown-menu .dropdown-submenu a {
    display: block;
    padding: 5px 0;
    margin: 0;
}
.sitepage-nav .dropdown-menu .dropdown-submenu:hover:before,
.sitepage-nav .dropdown-menu .dropdown-submenu.active:before {
    width: 10px;
}
.sitepage-top .sitepage-nav .dropdown a,
.sitepage-top .sitepage-nav span {
    transition: all 0.25s ease;
}
.dropdown:hover .dropdown-menu {
    display: block;
}

.boardListThumb .row {
    display: flex;
    flex-wrap: wrap;
}

.boardListThumb .row > div.nopadding {
    margin-bottom: 30px;
}