*::before,

*::after {

    margin: 0;

    padding: 0;

    -webkit-box-sizing: inherit;

    box-sizing: inherit

}



html {

    font-size: 62.5%

}



body {

    font-family: 'Lato', sans-serif;

    font-weight: 400;

    font-size: 16px;

    color: #4985ac;

    -webkit-box-sizing: border-box;

    box-sizing: border-box

}



ul {

    list-style: none;

    margin: 0;

    padding: 0

}



ul li {

    margin: 0;

    padding: 0

}



ol {

    margin: 0;

    padding: 0

}



p {

    padding: 0

}



h1,

h2,

h3,

h4,

h5,

h6 {

    padding: 0;

    font-weight: 400

}



fieldset {

    border: none;

    margin: 0;

    padding: 0

}



button {

    cursor: pointer;

    background-color: transparent;

    outline: none;

    border: none

}



a,

a:hover,

a:focus {

    text-decoration: none

}



img {

    max-width: 100%;

    object-fit: cover;

    object-position: center

}



.height-100 {

    height: 100vh

}



.p-tb-80 {

    padding: 80px 0

}



.pt-80 {

    padding-top: 80px

}



.mb-30 {

    margin-bottom: 30px

}



.title {

    letter-spacing: 1px

}



@keyframes Scale {

    0% {

        transform: scale(1.1)

    }



    100% {

        transform: scale(1)

    }

}



h1,

h2,

h3,

h4 {

    margin-bottom: .5em

}



section {

    height: 100%;

    position: relative

}



h1.title {

    font-size: 35px;

    text-transform: uppercase

}



h2.title {

    font-size: 30px

}



.bg-overlay-1:before,

.bg-overlay-2:before,

.bg-overlay-3:before {

    content: " ";

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0

}



.info-flex {

    position: relative;

    color: #fff;

    height: 100%;

    display: flex;

    justify-content: center;

    flex-direction: column

}



.bg-overlay-1:before {

    background: radial-gradient(circle, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .4) 100%)

}



.bg-overlay-2:before {

    background: linear-gradient(90deg, rgba(0, 58, 64, 1) 0%, rgba(0, 58, 64, .8) 30%, rgba(255, 255, 255, 0) 70%, rgba(0, 0, 0, .6) 100%)

}



.bg-overlay-2.over-right:before {

    background: linear-gradient(-90deg, rgba(0, 58, 64, 1) 0%, rgba(0, 58, 64, .8) 30%, rgba(255, 255, 255, 0) 70%, rgba(0, 0, 0, .6) 100%)

}



.bg-overlay-3:before {

    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 50%)

}



.bg-loading {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    animation: Scale 7s 1

}



.header {

    position: fixed;

    width: 100%;

    z-index: 999;

    background: #fff;

    padding: 30px 0

}



.header-logo {

    display: block;

    z-index: 110;

    width: 100px;

    transition: all ease 0.6s;

}



.header.scroll .header-logo {

    transform: translateX(-115%)

}



.header-logo .bg-logo {

    width: 100%

}



.header-logo .logo {

    max-height: 100px

}



.header-logo img {

    height: 70px;

    position: relative;

    transition: all ease 0.4s

}



.header-logo a {

    position: absolute;

    display: block;

    padding: 15px 20px;

    border-radius: 0 0 15px 13px;

    border: 2px solid #00aebb;

    border-top: 0;

    background-color: #253645;

    transition: all 0.4s;

    top: -35px;

    left: 0

}



@keyframes navBtn_hover {

    0% {

        left: -100%;

        opacity: 0

    }



    10%,

    90% {

        left: 0;

        opacity: 1

    }



    100% {

        left: 100%;

        opacity: 0

    }

}



.button {

    background-color: #3f1e08;

    color: #fff;

    text-transform: uppercase;

    padding: 10px 12px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    font-size: 11.3px;

    font-weight: 600;

    border-radius: 5px

}



.button span:first-child {

    padding-right: 8px

}



.button img {

    -webkit-transition: all ease 0.4s;

    -o-transition: all ease 0.4s;

    transition: all ease 0.4s;

    width: 25px

}



.button:hover {

    color: #fff

}



.button:hover img {

    -webkit-transform: translateX(10px);

    -ms-transform: translateX(10px);

    transform: translateX(10px)

}



.header .container {

    position: relative

}



.navbar-toggler {

    display: block;

    position: absolute;

    top: 50%;

    right: 0;

    outline: none;

    width: 40px;

    height: 30px;

    padding: unset;

    z-index: 998;

    transform: translateY(-50%)

}



.navbar-toggler:focus {

    outline: none

}



.navbar-toggler .wrap-line {

    position: relative;

    display: block;

    width: 100%;

    height: 100%

}



.navbar-toggler .wrap-line .line {

    -webkit-transition: all ease .4s;

    -o-transition: all ease .4s;

    transition: all ease .4s;

    position: absolute;

    left: 0;

    bottom: 0;

    height: 3px;

    background: #00aebb;

    display: block

}



.navbar-toggler .wrap-line .line:nth-of-type(1) {

    top: 0;

    width: 100%

}



.navbar-toggler .wrap-line .line:nth-of-type(2),

.navbar-toggler .wrap-line .line:nth-of-type(3) {

    top: 50%;

    -webkit-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

    right: 0;

    left: unset;

    width: 100%

}



.navbar-toggler .wrap-line .line:nth-of-type(4) {

    bottom: 0;

    width: 100%;

    margin-left: auto;

    right: 0

}



.navbar-toggler:not(.collapsed) .line:nth-of-type(1) {

    left: 50%;

    right: 50%;

    width: unset

}



.navbar-toggler:not(.collapsed) .line:nth-of-type(2) {

    -webkit-transform: translateY(-50%) rotate(-45deg);

    -ms-transform: translateY(-50%) rotate(-45deg);

    transform: translateY(-50%) rotate(-45deg);

    width: 100%

}



.navbar-toggler:not(.collapsed) .line:nth-of-type(3) {

    -webkit-transform: translateY(-50%) rotate(45deg);

    -ms-transform: translateY(-50%) rotate(45deg);

    transform: translateY(-50%) rotate(45deg);

    width: 100%

}



.navbar-toggler:not(.collapsed) .line:nth-of-type(4) {

    left: 63%;

    right: 37%;

    width: 0

}



.header .icon-360 img {

    width: 50px

}



.header .icon-360 {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    right: 70px

}



.header .menu-header {

    pointer-events: inherit

}



.header .menu-header__box {

    width: 100%;

    background: #263644;

    position: fixed;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-transform: translateX(100%);

    -ms-transform: translateX(100%);

    transform: translateX(100%);

    -webkit-transition: all ease 0.4s;

    -o-transition: all ease 0.4s;

    transition: all ease 0.4s;

    z-index: 995;

    overflow: auto

}



.header .menu-header__inner {

    -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

    overflow: auto;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 2

}



.header .menu-header__inner .navbar-nav {

    display: block

}



.header .menu-header__inner .navbar-nav .nav-item {

    padding: 15px;

    -webkit-transition: all ease 0.6s;

    -o-transition: all ease 0.6s;

    transition: all ease 0.6s

}



.header .menu-header__inner .navbar-nav .nav-item .nav-link.active {

    position: relative;

    color: #00aebb

}



.header .menu-header__inner .navbar-nav .nav-item .nav-link:hover {

    color: #00aebb

}



.header .menu-header__inner .navbar-nav .nav-item .nav-link {

    text-transform: uppercase;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal;

    -ms-flex-direction: row;

    flex-direction: row;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    font-size: 20px;

    letter-spacing: .5px;

    text-align: center;

    color: #fff;

    padding: 0;

    font-weight: 700

}



.header .menu-header__inner .list-social-media {

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    margin-top: 70px

}



.header .menu-header__inner .list-social-media li {

    padding-right: 24px

}



.header .menu-header__inner .list-social-media li a {

    width: 35px;

    height: 35px;

    font-size: 24px

}



.header .menu-header__inner .list-social-media li:last-child {

    padding-right: unset

}



.header .menu-header.open .menu-header__box {

    -webkit-transform: translateX(0);

    -ms-transform: translateX(0);

    transform: translateX(0)

}



.banner-top {

    overflow: hidden;

    height: 100vh

}



.banner-top .wrap-info {

    position: relative;

    color: #fff;

    z-index: 2;

    display: flex;

    flex-direction: column;

    justify-content: center;

    height: 100vh

}



.banner-top .wrap-img img {

    height: 100%;

    width: 100%

}



.video-introduce__inner {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    position: relative;

    z-index: 2

}



.video-introduce__left {

    width: 50%;

    padding-right: 40px

}



.video-introduce__left .title {

    color: #00aebb

}



.video-introduce__right {

    width: 50%

}



.video-introduce {

    position: relative;

    background-color: #e2e2e2

}



.bf-br {

    position: absolute;

    right: 0;

    bottom: 0

}



.bf-bl {

    position: absolute;

    left: 0;

    bottom: 0

}



.video {

    display: block;

    position: relative

}



.video .wrap-img {

    display: block;

    position: relative;

    height: 0;

    padding-top: 80%;

    border-radius: 20px;

    overflow: hidden

}



.video .wrap-img .img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    transition: all ease .4s

}



.video .icon-play {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 2;

    width: 70px;

    height: 70px;

    border-radius: 50%;

    background: #00aebb;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all ease .4s

}



.video .icon-play img {

    width: 21px;

    height: 28px;

    transition: all ease .4s;

    object-fit: contain

}



.video:hover .wrap-img .img {

    transform: scale(1.1)

}



.video:hover .icon-play img {

    transform: rotate(-90deg)

}



.video-introduce__left ul {

    padding-left: unset;

    list-style: none

}



.video-introduce__left ul li {

    position: relative;

    margin-bottom: 10px;

    position: relative;

    padding-left: 20px

}



.video-introduce__left ul li:before {

    content: '';

    left: 0;

    top: 7px;

    position: absolute;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #e31f2b

}



.section-overview {

    position: relative;

    overflow: hidden

}



.section-overview h2.title {

    color: #00aebb

}



.section-overview>* {

    position: relative;

    z-index: 1

}



.section-overview .content-img {

    display: flex;

    flex-wrap: wrap

}



.section-overview .wrap-content {

    width: 60%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center

}



.section-overview .content {

    padding: 80px 40px;

    max-width: 660px;

    margin-left: auto

}



.section-overview .content ul {

    list-style: none;

    padding-left: unset;

    margin-bottom: unset

}



.section-overview .content ul li:before {

    content: '';

    position: absolute;

    top: 50%;

    left: 0;

    width: 12px;

    height: 12px;

    transform: translateY(-50%);

    background: url(../../../assets/svg/bf-li.svg) no-repeat;

    background-size: contain;

    background-position: center

}



.section-overview .content ul li {

    margin-bottom: 12px;

    padding-left: 20px;

    position: relative

}



.section-overview .content ul li:last-child {

    margin-bottom: unset

}



.section-overview .wrap-img {

    width: 40%

}



.section-overview .wrap-img .inner {

    margin-right: calc((-100vw + 1185px)/2);

    position: relative;

    height: 100%

}



.section-overview .wrap-img img {

    width: 100%;

    height: 100%

}



.utilities {

    background-color: #e2e2e2

}



.utilities .top {

    display: flex;

    padding-bottom: 60px

}



.utilities .top .list {

    padding-left: 50px;

    display: flex;

    flex: 1;

    flex-wrap: wrap;

    margin: -30px

}



.utilities .top .list .item {

    width: 50%;

    padding: 30px

}



.utilities .title {

    color: #00aebb

}



.utilities .list .item .title {

    font-size: 20px

}



.utilities .bottom .list {

    display: flex;

    flex-wrap: wrap;

    margin: -10px -20px

}



.utilities .bottom .list .item {

    width: 50%;

    padding: 10px 20px

}



.utilities.type-2 {

    background-color: #fff

}



.utilities.type-2 .bottom .list .item {

    width: 62.5%

}



.utilities.type-2 .bottom .list .item:nth-child(4),

.utilities.type-2 .bottom .list .item:nth-child(1) {

    width: 37.5%

}



.location {

    background: #e2e2e2;

    position: relative

}



.location .title {

    color: #00aebb

}



.location__inner {

    display: flex;

    flex-wrap: wrap;

    position: relative;

    z-index: 2

}



.location__left {

    width: 70%

}



.location__left img {

    height: 100%

}



.location__right {

    width: 30%;

    padding-left: 20px

}



.footer {

    position: relative;

    height: 100%;

    overflow: hidden

}



.footer .bg-overlay-1:before {

    background-color: rgba(0, 0, 0, .31)

}



.footer__inner {

    display: flex;

    position: relative;

    flex-wrap: wrap;

    color: #fff

}



.footer__left {

    width: 66.67%;

    margin-left: calc((100vw - 1110px)/2)

}



.footer__right {

    width: 33.33%;

    height: 100%;

    background-color: #094148

}



.footer__left .heading {

    margin-bottom: 60px

}



.footer__left .sub-title {

    font-size: 24px;

    border-left: 1px solid #fff;

    padding: 8px 0 8px 24px;

    margin-bottom: 22px;

    text-transform: uppercase;

    letter-spacing: 1px

}



.footer__logo img {

    width: 100px

}



.footer__left .cdt h3.title {

    font-size: 24px;

    margin: 10px 0

}



.footer__right .map {

    height: 60%

}



.footer__right .register {

    height: 40%;

    display: flex;

    align-items: center;

    padding-left: 40px

}



.flat .title {

    color: #00aebb

}



.flat .img-flat {

    width: 100%;

    margin-bottom: 50px

}



.flat-inner {

    display: flex;

    flex-wrap: wrap;

    align-items: center

}



.flat-inner:nth-child(even) {

    flex-direction: row-reverse

}



.flat-inner .wrap-img {

    width: 50%

}



.flat-inner .master-plan-text {

    width: 50%;

    padding-left: 15%;

    counter-reset: section;

}



.flat-inner .master-plan-text li {

    margin-bottom: 15px

}



.flat-inner .master-plan-text li::before {

    counter-increment: section;

    content: counter(section);

    margin-right: 5px;

    width: 25px;

    height: 25px;

    background: #00aebb;

    border-radius: 50%;

    display: inline-block;

    text-align: center;

    line-height: 25px;

    color: #fff

}



.flat-inner.change .master-plan-text ul li {

    width: 50%

}



.flat-inner.change .master-plan-text ul {

    display: flex;

    flex-wrap: wrap

}



.flat-inner:nth-child(even) .master-plan-text {

    padding: 0 15px

}



.partner .title {

    color: #00aebb;

    position: relative;

    z-index: 2

}



.partner {

    background: #e2e2e2;

    position: relative;

    overflow: hidden

}



.partner__list {

    display: flex;

    flex-wrap: wrap;

    margin: -30px;

    position: relative;

    z-index: 2;

    justify-content: center;

    align-items: center

}



.partner__list-item {

    width: 25%;

    padding: 30px;

    text-align: center

}



.partner__list-item .text {

    height: 50px

}



.partner__list-item img {

    max-height: 150px

}



.footer {

    background: #253746;

    color: #fff;

    padding-top: 80px;

    padding-bottom: 40px

}



.footer a {

    color: #65e5ef

}



.footer a:hover {

    color: #f7ad5e

}



.footer__list {

    display: flex;

    padding-left: unset;

    list-style: none

}



.footer__list-item {

    width: 50%

}



.footer__list-item:nth-child(2) {

    padding-left: 30px

}



.footer__list-item .contact {

    display: flex;

    flex-wrap: wrap;

    padding-bottom: 35px

}



.footer__list-item .contact .left {

    width: 50%;

    padding-right: 30px

}



.footer__list-item .contact .right {

    width: 50%;

    padding-left: 30px

}



.footer .title {

    margin-bottom: 20px;

    font-size: 40px;

    color: #00aebb

}



.footer__list-item h4 {

    font-size: 14px;

    margin-bottom: 10px;

    color: #00aebb;

}



.footer__list-item .box {

    margin-bottom: 25px;

    font-size: 13px

}



.footer__list-item .box-form .des {

    margin-bottom: 25px;

    font-size: 13px

}



.footer .copy-right {

    padding: 15px 0;

    border-top: 1px solid #00aebb;

    ;

    font-size: 12px

}



#popup-form .form-home__contact-submit button {

    background: #4985ac

}



.list-social {

    margin-top: 50px;

    padding-left: unset;

    list-style: none

}



.list-social__item {

    display: inline-block

}



.list-social__item a {

    padding-right: 25px;

    transition: all .4s;

    display: inline-block;

    font-size: 18px

}



.list-social__item:last-child {

    padding-right: unset

}



.list-social__item a:hover {

    transform: translateY(-5px)

}



.section-form-project {

    background: #4985ac

}



@media screen and (max-width: 1199px) {

    .container {

        max-width: 960px

    }



    .mb-30 {

        margin-bottom: 22px

    }



    .mb-50 {

        margin-bottom: 35px

    }



    h2.title {

        font-size: 27px

    }



    .introduce__list-item .inner-item .number {

        font-size: 60px

    }



    .section-overview .wrap-img .inner {

        margin-right: calc((-100vw + 945px)/2)

    }

}



@media screen and (max-width: 991px) {

    .container {

        max-width: 720px

    }



    .pt-80 {

        padding-top: 60px

    }



    .p-tb-80 {

        padding: 60px 0

    }



    .pb-80 {

        padding-bottom: 60px

    }



    .banner-top .wrap-info {

        height: 70vh

    }



    .section-overview .wrap-content {

        width: 100%

    }



    .section-overview .wrap-img {

        width: 100%

    }



    .section-overview {

        background-size: cover;

        background-position: center -100px

    }



    .footer__list-item {

        width: 100%

    }



    .footer__list {

        flex-wrap: wrap

    }



    .footer__list-item:nth-child(2) {

        padding-left: unset

    }



    .section-overview .wrap-img .inner {

        margin-right: 0

    }



    .flat-inner:nth-child(even) {

        margin-top: 30px

    }



    .video-introduce__left {

        padding-right: unset;

        width: 100%;

        padding-bottom: 40px

    }



    .video-introduce__right {

        width: 100%

    }



    .section-overview .content {

        padding: 60px 15px;

        margin: auto

    }



    .location__left {

        width: 100%

    }



    .location__right {

        width: 100%;

        padding-left: unset;

        padding-bottom: 40px

    }



    .location__inner {

        flex-direction: column-reverse

    }



    .flat-inner .wrap-img {

        width: 100%;

        padding-bottom: 40px

    }



    .flat-inner .master-plan-text {

        width: 100%;

        padding-left: unset

    }



    .flat-inner .master-plan-text li {

        width: 50%;

        padding: 5px

    }



    .master-plan-text-list {

        display: flex;

        flex-wrap: wrap;

        margin: -5px

    }



    .utilities__left {

        width: 100%;

        padding-bottom: 40px

    }



    .utilities__right {

        padding-left: unset;

        width: 100%

    }



    .utilities__inner {

        flex-wrap: wrap

    }



    .banner-top {

        height: 60vh

    }



    .introduce__list-item .thumb img {

        width: 300px;

        height: 300px

    }



    .utilities .top {

        flex-direction: column

    }



    .utilities .top .list {

        padding-left: unset;

        padding-top: 30px

    }



    .hotline-phone-ring {

        display: block;

        -webkit-backface-visibility: inherit

    }

}



@media screen and (max-width: 767px) {

    .container {

        max-width: 100%

    }



    .navbar-toggler {

        right: 15px

    }



    h1.title {

        font-size: 35px

    }



    .section-overview .content {

        padding: 60px 15px

    }



    .location__left {

        width: 100%

    }



    .location__right {

        width: 100%;

        padding-left: unset;

        text-align: center

    }



    .section-overview .wrap-img .inner {

        margin-right: unset

    }



    .header-logo a {

        left: 15px

    }



    .header-logo img {

        height: 50px

    }



    .utilities .top .list .item {

        padding: 15px

    }



    .utilities .top .list {

        margin: -15px

    }



    .utilities .bottom .list .item {

        padding: 10px

    }



    .utilities .bottom .list {

        margin: -10px

    }

}



@media screen and (max-width: 639px) {

    .partner__list-item {

        width: 50%;

        padding: 20px

    }



    .partner__list {

        margin: -20px

    }



    .partner__list-item .text {

        height: 75px

    }



    .utilities__right {

        padding-top: 15px

    }

}



@media screen and (max-width: 539px) {

    .flat-inner .master-plan-text li {

        width: 100%

    }



    .flat-inner:nth-child(even) .master-plan-text-list li {

        width: 100%

    }

}