@keyframes grayscale-parallax {
  from { background-position: 0% 0%; filter: grayscale(0%); }
  to { background-position: 0% 50%; filter: grayscale(100%); }
}
.monochrome header,
.monochrome .page-content,
.monochrome footer,
.monochrome .lightbox-dialog {
    -moz-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    filter: grayscale(1);    
    margin-top: 0 !important;
}
.monochrome .key-visual {
    position: relative;
    z-index: 1;
}
.monochrome .page-head--index {
    position: sticky;
    z-index: 999;
}

header:hover .vtm-section img {
  /*filter: invert(0); */
}
.banner-title-area {
    position: absolute;
    z-index: 1099;    
    margin:0 auto;
    left: 50%;
    transform: translate(-50%, 0%); 
    width: 100%;
    margin:0 auto;
}
.banner-info-area {
    max-width: var(--medimum-width);
    margin: 0 auto;
    /* padding: 3rem 2rem 0rem 2rem; */
    z-index: 3;
    position: relative;
}
.banner-subtitle {
    display: block;
    font-size: 1.2rem;    
    text-transform: uppercase;
    width: 100%;
    text-align: center;
}
.y-subtitle {
    color: #F7DD4C;
}
.w-subtitle {
    color: #ffffff;
}
.b-subtitle {
    color: #000000;
}
.g-subtitle {
    color: #EBEBEB;
}
.banner-title {
position: absolute;
    color: #fff;
    display: block;
    font-size: 2.5rem;
    width: 100%;
    padding: 10% 1rem 10rem 1rem;
    text-align: center;
    bottom: 0%;
}
.banner-title span {
 display:block;
  width:80%;
  margin:0 auto;
}
.page-foot {
    position: relative;
    z-index: 2;
}
.key-visual {
    /* position: relative;
    width: 100%;
    padding: 0;
    -webkit-perspective: 1px;
    perspective: 1px */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    overflow: hidden;    
}

.key-visual:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #fff;
    content: ''
}
.thumbnail-image.masked {
    position: relative;
}
.vr-btn {
    position: relative;
    color: white;
    cursor: pointer;
    z-index: 2;
    width: 70px;
    height: 70px;   
    left: 50%;
    bottom: 0px;
    position: absolute;
    transform: translate(-50%, -25%);     
}

@media (max-width:768px) {
    .key-visual {
        padding-bottom: 0
    }
}

.key-visual__body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: auto 65.8125rem;
    -webkit-perspective: 1px;
    perspective: 1px
}

@media (min-width:1920px) {
    .key-visual__body {
        background-size: cover
    }
}

.key-visual__body:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .8)), to(rgba(255, 255, 255, 0)));
    background-image: linear-gradient(rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, 0) 100%);
    background-size: auto 34.5625rem;
    background-repeat: repeat-x;
    content: ''
}
@media (min-width:1440px) {
    .whatson-container{
        max-width: 100% !important;
    }
    .whatson-container .container-fluid{
        /* max-width: 79vw !important; */
        /* max-width: calc(1440px + (100% - 1440px)/2) !important; */
        max-width: 1440px;
        /* margin-left: 21vw; */
        /* margin-left: calc((100% - 1440px)/2); */
    }
}

/* @media (max-width:1676px) { */
@media (max-width:1440px) {
    .key-visual__body:before {
        background-size: auto 52.51661918%
    }
}

@media (max-width:768px) {
    .key-visual__body:before {
        background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(255, 255, 255, 0)));
        background-image: linear-gradient(white 0, rgba(255, 255, 255, 0) 100%);
        background-size: auto 20.625rem
    }
}

/* @media (max-width:1676px) { */
@media (max-width:1440px) {
    .key-visual__body {
        background-size: auto 100%
    }
}

@media (max-width:768px) {
    .key-visual__body {
        position: relative;
        padding-top: 6.6875rem;
        background-size: auto 37.9375rem;
        background-position: top center
    }
}

.key-visual__body>.container {
    position: relative;
    height: 100%
}

.key-visual__bg {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    z-index: -2
}

@media (max-width:1676px) and (min-width:768px) {
    .key-visual__bg {
        width: 100%;
        height: 100%;
        overflow: hidden
    }

    .key-visual__bg .placeholder {
        height: 100%
    }

    .key-visual__bg .placeholder__item {
        left: 50%;
        width: auto;
        height: 100%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

@media (max-width:768px) {
    .key-visual__bg {
        left: 50%;
        width: 69.1875rem;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

.key-visual__title {
    position: absolute;
    top: 50%;
    left: 1.5625rem;
    z-index: 1;
    width: 9.9375em;
    font-size: 5rem;
    font-weight: 600;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 0 .25em rgba(6, 14, 21, .47);
    text-transform: uppercase;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

/* @media (max-width:1676px) { */
@media (max-width:1440px) {
    .key-visual__title {
        font-size: 4.0625rem
    }
}

@media (max-width:1439.98px) {
    .key-visual__title {
        font-size: 3.4375rem
    }
}

@media (max-width:1199.98px) {
    .key-visual__title {
        font-size: 2.8125rem
    }
}

@media (max-width:991.98px) {
    .key-visual__title {
        font-size: 2.25rem;
        width: 9.44444444em
    }
}

@media (max-width:768px) {
    .key-visual__title {
        position: static;
        max-width: 100%;
        width: 20.9375rem;
        min-height: 18.8125rem;
        margin-bottom: 10.6875rem;
        font-size: 2rem;
        line-height: 1.37;
        -webkit-transform: none;
        transform: none
    }
}

.key-img {
    position: absolute;
    display: block;
    background-color: #2ac4cb;
    overflow: hidden
}

@media (max-width:768px) {
    .key-img {
        position: relative;
        bottom: 0 !important;
        right: 0 !important
    }
}

.key-img__media {
    width: 100%
}

.key-img__body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    color: #fff
}

.key-img__title {
    max-width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 2.4375rem;
    line-height: 1.28;
    color: #fff;
    text-shadow: 0 .07692308em .15384615em rgba(0, 0, 0, .16)
}

/* @media (max-width:1676px) { */
@media (max-width:1440px) {
    .key-img__title {
        font-size: 2.32696897vw
    }
}

@media (max-width:768px) {
    .key-img__title {
        font-size: 2rem
    }
}

.key-img__desc {
    font-family: OpenSans-Regular;
    font-size: 1.5rem;
    line-height: 1.33
}

/* @media (max-width:1676px) { */
@media (max-width:1440px) {
    .key-img__desc {
        font-size: 1.43198091vw
    }
}

@media (max-width:768px) {
    .key-img__desc {
        font-size: 1rem
    }
}

.key-img--1 {
    bottom: 41.88034188%;
    right: 5.31026253%;
    width: 29.25rem
}

/* @media (max-width:1676px) { */
@media (max-width:1440px) {
    .key-img--1 {
        width: 27.92362768%
    }
}

@media (max-width:768px) {
    .key-img--1 {
        width: 88.7874837%;
        margin-left: auto
    }
}

.key-img--1 .key-img__body {
    padding: 0 9.61538462%
}

@media (max-width:768px) {
    .key-img--1 .key-img__body {
        padding: 0 5.21512386% 11.73402868%
    }
}

@media (max-width:768px) {
    .key-img--1 .key-img__title {
        margin-left: auto
    }
}

@media (max-width:768px) {
    .key-img--1 .key-img__desc {
        max-height: 50.44510386%
    }
}

.key-img-wrap--ver-2 .key-img--1 {
    bottom: 31.33903134%;
    right: 2.02863962%
}

@media (min-width:768px) {
    .key-img-wrap--ver-2 .key-img--1 {
        z-index: 1;
        width: 27.9375rem
    }
}

@media (min-width:768px) and (max-width:1676px) {
    .key-img-wrap--ver-2 .key-img--1 {
        width: 26.67064439%
    }
}

.key-img-wrap--ver-2 .key-img--1 .key-img__body {
    padding: 0 8.05369128%
}

.key-img-wrap--ver-2 .key-img--1 .key-img__title {
    text-align: center
}

.key-img-wrap--ver-2 .key-img--1 .key-img__desc {
    text-align: center
}

.key-img--2 {
    bottom: 23.55175689%;
    right: 31.38424821%;
    width: 19.6875rem
}

/* @media (max-width:1676px) { */
@media (max-width:1440px) {
    .key-img--2 {
        width: 18.7947494%
    }
}

@media (max-width:768px) {
    .key-img--2 {
        width: 89.30899609%;
        margin-right: auto;
        margin-top: -11.73402868%
    }
}

.key-img--2 .key-img__body {
    padding: 0 11.42857143%
}

@media (max-width:768px) {
    .key-img--2 .key-img__body {
        padding: 0 5.21512386%
    }
}

.key-img--2 .key-img__title {
    text-align: center
}

.key-img--2 .key-img__desc {
    text-align: center
}

.key-img-wrap--ver-2 .key-img--2 {
    bottom: 8.07217474%;
    right: 26.73031026%
}

@media (min-width:768px) {
    .key-img-wrap--ver-2 .key-img--2 {
        width: 25.9375rem
    }
}

@media (min-width:768px) and (max-width:1676px) {
    .key-img-wrap--ver-2 .key-img--2 {
        width: 24.76133652%
    }
}

.key-img--3 {
    bottom: 13.48528015%;
    right: 1.37231504%;
    width: 29.75rem
}

@media (max-width:1700px) {
    .key-img--3 {
        right: .89498807%
    }
}

/* @media (max-width:1676px) { */
@media (max-width:1440px) {
    .key-img--3 {
        width: 28.40095465%
    }
}

@media (max-width:768px) {
    .key-img--3 {
        width: calc(100% - 3.125rem);
        margin: 3.7809648% auto 0
    }
}

@media (max-width:575.98px) {
    .key-img--3 {
        width: calc(100% - 2.5rem);
        margin: 3.7809648% auto 0
    }
}

.key-img-wrap--ver-2 .key-img--3 {
    display: none
}

.key-img--3 .key-img__body {
    padding: 0 6.30252101%;
    -webkit-perspective: 1px;
    perspective: 1px
}

.key-img--3 .key-img__body:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.key-img__body.shadowlayer:before {
    background-color: #000;
    opacity: .5;
    z-index: -1;
    content: ''
}

.key-img--3 .key-img__title {
    text-align: center;
    text-shadow: 0 0 .82051282em rgba(0, 0, 0, .16)
}

.key-img--3 .key-img__desc {
    text-align: center
}

.key-img-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media (max-width:768px) {
    .key-img-wrap {
        position: relative;
        width: calc(100% + 3.125rem);
        padding-top: 36.25rem;
        margin: 0 -1.5625rem
    }
}

@media (max-width:575.98px) {
    .key-img-wrap {
        width: calc(100% + 2.5rem);
        margin: 0 -1.25rem
    }
}

.key-img-wrap>.container {
    position: relative;
    height: 100%
}

.section__title {
    font-size: 3rem;
    color: #000000;
    font-weight: 700;
    font-family: Montserrat-Bold, NotoSansTC-Bold, NotoSansSC-Bold;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    white-space: break-spaces;
}

@media (max-width:1199.98px) {
    .section__title {
        font-size: 2.25rem
    }
}

@media (max-width:768px) {
    .section__title {
        /* font-size: 1.875rem */
        font-size: 1.75rem
    }
    .section-whatson .link-details{
        margin-left: 1rem !important;
    }
    .section-whatson .link-details span{
        font-size: 14px;
    }
}

@media (max-width:575.98px) {
    .section__title {
        /* font-size: 1.75rem */
    }
}

.section__title .ico {
    position: relative;
    top: .19178082em;
    display: inline-block;
    margin-left: .1369863em;
    font-size: 1.62222222em;
    line-height: 1
}

@media (max-width:768px) {
    .section__title .ico {
        margin-left: 1rem;
        font-size: 3.6875rem
    }
}

.topic {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-top: .875rem
}

@media (max-width:991.98px) {
    .topic {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

.topic__left {
    max-width: 62.79212792%;
    -ms-flex-preferred-size: 62.79212792%;
    flex-basis: 62.79212792%
}

@media (max-width:991.98px) {
    .topic__left {
        max-width: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%
    }
}

.topic__left .topic__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
}

.topic__left .topic__title {
    margin-bottom: 1.5625em
}

@media (max-width:991.98px) {
    .topic__left .topic__title {
        margin-bottom: 1.25rem
    }
}

.topic__right {
    margin-top: -4.6875rem;
    max-width: 34.0098401%;
    -ms-flex-preferred-size: 34.0098401%;
    flex-basis: 34.0098401%
}

@media (max-width:991.98px) {
    .topic__right {
        position: relative;
        max-width: calc(100% + 1.875rem);
        -ms-flex-preferred-size: calc(100% + 1.875rem);
        flex-basis: calc(100% + 1.875rem);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin: 4.25rem -.9375rem 0
    }

    .topic__right:before {
        position: absolute;
        top: -2.125rem;
        left: 50%;
        width: calc(100% - 1.875rem);
        border-top: 1px solid rgba(0, 10, 77, .1);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        content: ''
    }
}

@media (max-width:768px) {
    .topic__right {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

.topic__right .topic__item:not(:last-child) {
    margin-bottom: 2.25em
}

@media (max-width:991.98px) {
    .topic__right .topic__item {
        max-width: 50%;
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        margin: 0 .9375rem
    }
}

@media (max-width:768px) {
    .topic__right .topic__item {
        max-width: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%
    }
}

.topic__right .topic__title {
    margin-top: .8125rem
}

@media (max-width:768px) {
    .topic__right .topic__title {
        margin-top: 1.25rem
    }
}

.topic__item {
    display: block
}

.topic__item[href]:focus .topic__media:before,
.topic__item[href]:hover .topic__media:before {
    opacity: .72;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

.topic__item[href]:focus .topic__title,
.topic__item[href]:hover .topic__title {
    color: #0e7e8b
}

.topic__media {
    position: relative
}

.topic__media:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: #2ac4cb;
    opacity: 0;
    -webkit-transform: scaleX(.8);
    transform: scaleX(.8);
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transition: opacity .3s, -webkit-transform .3s;
    transition: opacity .3s, -webkit-transform .3s;
    transition: transform .3s, opacity .3s;
    transition: transform .3s, opacity .3s, -webkit-transform .3s;
    pointer-events: none;
    content: ''
}

.topic__title {
    max-width: 58.375rem;
    font-size: 2rem;
    color: #000a4d;
    font-weight: 700;
    line-height: 1.4375;
    -webkit-transition: color .3s;
    transition: color .3s
}

@media (max-width:1199.98px) {
    .topic__title {
        font-size: 1.75em
    }
}

@media (max-width:991.98px) {
    .topic__title {
        font-size: 1.5em
    }
}

@media (max-width:768px) {
    .topic__title {
        font-size: 1.25em
    }
}

@media (max-width:575.98px) {
    .topic__title {
        font-size: 1.125em
    }
}

.highlight {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 2.5rem 0 3.75rem
}

@media (max-width:991.98px) {
    .highlight {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 1rem 0 3.8125rem
    }
}

.highlight__item {
    position: relative
}

.highlight__item:nth-child(odd) .highlight__desc,
.highlight__item:nth-child(odd) .highlight__title {
    color: #000a4d
}

.highlight__item:nth-child(even) .highlight__desc,
.highlight__item:nth-child(even) .highlight__title {
    color: #fff
}

.highlight__item:nth-child(1) .highlight__link {
    background-color: #0fb79c
}

.highlight__item:nth-child(2) .highlight__link {
    background-color: #000a4d
}

.highlight__item:nth-child(3) .highlight__link {
    background-color: #6ca9d6
}

.highlight__item:nth-child(4) .highlight__link {
    background-color: #0e7e8b
}

@media (max-width:1676px) and (min-width:992px) {
    .highlight__item {
        font-size: .95465394vw
    }
}

@media (min-width:992px) {
    .highlight__item:not(:last-child) .highlight__link {
        box-shadow: 1.25em 1.25em 2.5em rgba(0, 0, 0, .1)
    }

    .highlight__item:nth-child(odd) {
        max-width: 21.03321033%;
        -ms-flex-preferred-size: 21.03321033%;
        flex-basis: 21.03321033%;
        padding-bottom: 23.12423124%
    }

    .highlight__item:nth-child(odd) .highlight__link {
        margin-right: -9.94152047%;
        padding: 9.64912281% 9.94152047% 9.64912281% 8.77192982%;
        width: calc(100% + 9.94152047%)
    }

    .highlight__item:nth-child(odd) .highlight__title {
        font-size: 1.6em;
        margin-bottom: 10px;
        line-height: 1.2em;
    }
}

@media (min-width:992px) and (max-width:1439.98px) {
    .highlight__item:nth-child(odd) .highlight__title {
        font-size: 1.75em
    }
}

@media (min-width:992px) {
    .highlight__item:nth-child(odd) .highlight__desc {
        font-size: 1.125em;
        line-height: 1.3em;
        
    }
}

@media (min-width:992px) and (min-width:992px) and (max-width:1199.98px) {
    .highlight__item:nth-child(odd) .highlight__desc {
        font-size: 1.15em;
        line-height: 1.2em;
    }
}

@media (min-width:992px) {
    .highlight__item:nth-child(odd):last-child {
        max-width: 23.12423124%;
        -ms-flex-preferred-size: 23.12423124%;
        flex-basis: 23.12423124%
    }

    .highlight__item:nth-child(even) {
        max-width: 28.16728167%;
        -ms-flex-preferred-size: 28.16728167%;
        flex-basis: 28.16728167%;
        padding-bottom: 29.88929889%
    }

    .highlight__item:nth-child(even):last-child {
        max-width: 29.88929889%;
        -ms-flex-preferred-size: 29.88929889%;
        flex-basis: 29.88929889%
    }

    .highlight__item:nth-child(even) .highlight__link {
        margin-right: -6.11353712%;
        padding: 14.84716157% 4.58515284% 7.20524017% 14.19213974%;
        width: calc(100% + 6.11353712%)
    }

    .highlight__item:nth-child(even) .highlight__title {
        font-size: 1.8em;
        margin-bottom: 10px;
        line-height: 1.4em;
    }
}

@media (min-width:992px) and (max-width:1439.98px) {
    .highlight__item:nth-child(even) .highlight__title {
        font-size: 2em;
        line-height: 1.3em;
    }
}

@media (min-width:992px) {
    .highlight__item:nth-child(even) .highlight__desc {
        font-size: 1.5em;
        line-height: 1.2em;
    }
}

@media (min-width:992px) and (min-width:992px) and (max-width:1199.98px) {
    .highlight__item:nth-child(even) .highlight__desc {
        font-size: 1.5em;
        line-height: 1.3em;
    }
}

@media (min-width:992px) {
    .highlight__item:last-child .highlight__link {
        margin-right: 0;
        width: 100%
    }

    .highlight__item:nth-child(1) {
        z-index: 3;
        margin-top: 13.59163592%
    }

    .highlight__item:nth-child(2) {
        z-index: 2;
        margin-top: 2.58302583%
    }

    .highlight__item:nth-child(3) {
        z-index: 1;
        margin-top: 12.42312423%
    }

    .highlight__item:nth-child(3) .highlight__link {
        padding: 12.86549708% 9.94152047% 9.64912281% 15.78947368%
    }
}

@media (max-width:991.98px) {
    .highlight__item {
        max-width: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%
    }

    .highlight__item:nth-child(odd) {
        padding-right: 7.06357215%
    }
}

@media (max-width:991.98px) and (max-width:575.98px) {
    .highlight__item:nth-child(odd) {
        padding-right: 1.25rem
    }
}

@media (max-width:991.98px) {
    .highlight__item:nth-child(even) {
        padding-left: 14.1271443%
    }
}

@media (max-width:991.98px) and (max-width:575.98px) {
    .highlight__item:nth-child(even) {
        padding-left: 1.25rem
    }
}

@media (max-width:991.98px) {
    .highlight__item:not(:first-child) {
        margin-top: -2.3125rem
    }

    .highlight__item:not(:first-child) .highlight__link {
        box-shadow: 1.25rem 1.25rem 2.5rem rgba(0, 0, 0, .1)
    }
}

.highlight__link {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    overflow: hidden
}

.highlight__link:focus,
.highlight__link:hover {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px)
}

.highlight__link .highlight__item:nth-child(1) {
    background-color: #0fb79c
}

.highlight__link .highlight__item:nth-child(2) {
    background-color: #000a4d
}

.highlight__link .highlight__item:nth-child(3) {
    background-color: #6ca9d6
}

.highlight__link .highlight__item:nth-child(4) {
    background-color: #0e7e8b
}

@media (max-width:991.98px) {
    .highlight__link {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        min-height: 12.5rem;
        padding: 1.9375rem 1.25rem 3.4375rem 2rem
    }
}

.highlight__media {
    margin-bottom: .875em;
    width: 6em
}

@media (max-width:1439.98px) {
    .highlight__media {
        width: 5em
    }
}

@media (max-width:1199.98px) {
    .highlight__media {
        width: 4.375em
    }
}

@media (max-width:991.98px) {
    .highlight__media {
        margin: 0 1.5em 0 0;
        max-width: 4.375rem;
        -ms-flex-preferred-size: 4.375rem;
        flex-basis: 4.375rem;
        -ms-flex-negative: 0;
        flex-shrink: 0
    }
}

@media (max-width:768px) {
    .highlight__media {
        margin-right: 1.125rem;
        max-width: 3.5rem;
        -ms-flex-preferred-size: 3.5rem;
        flex-basis: 3.5rem
    }
}

@media (max-width:575.98px) {
    .highlight__media {
        margin-right: .75rem
    }
}

.highlight__desc,
.highlight__title {
    overflow: hidden
}

.highlight__title {
    font-weight: 700;
    line-height: 1.3
}

@media (max-width:991.98px) {
    .highlight__title {
        max-width: 15.625em;
        font-size: 2em
    }
}

@media (max-width:768px) {
    .highlight__title {
        font-size: 1.75em
    }
}

@media (max-width:575.98px) {
    .highlight__title {
        font-size: 1.5em
    }
}

.highlight__desc {
    font-family: OpenSans-Regular;
}

@media (max-width:991.98px) {
    .highlight__desc {
        max-width: 27.5em;
        font-size: 1.25em
    }
}

@media (max-width:575.98px) {
    .highlight__desc {
        font-size: 1.125em
    }
}
.slider--key-visual {
    position: absolute;
    width: 100%;
    height: 100%
}
.slider--key-visual .slick-list,
.slider--key-visual .slick-track,
.slider--key-visual .slider__item {
    height: 100%
}

.slider--key-visual .slick-dots-container {
    z-index: 100;
    bottom: 3rem;
}

@media (max-width:991.98px) {
    .slider--key-visual .slick-dots-container {
        bottom: 1.625rem
    }
}

@media (max-width:768px) {
    .slider--key-visual .slick-dots-container {
        top: 33.125rem;
        bottom: initial
    }
}

.slider--key-visual .slick-dots button {
    background-color: #fff;
}

.slider--key-visual .slick-pause-play .sr-only {
    background: #fff
}

/* .slider--highlight {
    margin: .5625rem -.9375rem 0
}

@media (max-width:1850px) and (min-width:992px) {
    .slider--highlight {
        margin: 0;
        padding: 0 3.5625rem
    }
}

@media (max-width:991.98px) {
    .slider--highlight {
        margin: 0 -2.5rem 0
    }
}

@media (max-width:575.98px) {
    .slider--highlight {
        margin: 0 -2.1875rem 0
    }
}

.slider--highlight .slider__item {
    padding: 0 .9375rem
}

.no-js .slider--highlight .slider__item {
    width: 100%
}

.no-js .slider--highlight .slider__item:nth-child(1)~.slider__item {
    position: absolute;
    visibility: hidden
}

.no-js .slider--highlight .slider__item:not(:first-child) {
    position: absolute
}

.slider--highlight .slider__item.slick-current {
    z-index: 1
}

.slider--highlight .slick-dots-container {
    bottom: -2rem
}

@media (max-width:768px) {
    .slider--highlight .slick-dots-container {
        bottom: 1.875rem;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.slider--promo {
    margin: 0 -.9375rem
}

@media (max-width:1850px) and (min-width:992px) {
    .slider--promo {
        margin: 0;
        padding: 0 3.5625rem
    }
}

@media (max-width:991.98px) {
    .slider--promo {
        margin: 0 -.1875rem
    }
}

.slider--promo .slider__item {
    float: left;
    padding: 0 .9375rem
}

@media (max-width:991.98px) {
    .slider--promo .slider__item {
        padding: 0 .1875rem
    }
}

.no-js .slider--promo .slider__item {
    width: 16.667%
}

.no-js .slider--promo .slider__item:nth-child(6)~.slider__item {
    position: absolute;
    visibility: hidden
}

@media (max-width:1199.98px) {
    .no-js .slider--promo .slider__item {
        width: 20%
    }

    .no-js .slider--promo .slider__item:nth-child(5)~.slider__item {
        position: absolute;
        visibility: hidden
    }
}

@media (max-width:991.98px) {
    .no-js .slider--promo .slider__item {
        width: 25%
    }

    .no-js .slider--promo .slider__item:nth-child(4)~.slider__item {
        position: absolute;
        visibility: hidden
    }
}

@media (max-width:768px) {
    .no-js .slider--promo .slider__item {
        width: 33.333%
    }

    .no-js .slider--promo .slider__item:nth-child(3)~.slider__item {
        position: absolute;
        visibility: hidden
    }
}

@media (max-width:575.98px) {
    .no-js .slider--promo .slider__item {
        width: 50%
    }

    .no-js .slider--promo .slider__item:nth-child(2)~.slider__item {
        position: absolute;
        visibility: hidden
    }
}

.slider--promo .slick-dots-container {
    bottom: -2rem
}

@media (max-width:768px) {
    .slider--promo .slick-dots-container {
        bottom: -1.3125rem
    }
} */

.key-img-wrap--ver-2 .placeholder.key-visual__pic-ver-1 {
    display: none
}

.key-img-wrap--ver-1 .placeholder.key-visual__pic-ver-2 {
    display: none
}


.placeholder {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden
}

.placeholder__item_icon {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0
}

.placeholder__item {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    border: 0;
    object-fit: contain;
}

.placeholder__item-video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto
}

.placeholder--21by9 {
    padding-bottom: 42.85714286%
}

.placeholder--16by9 {
    padding-bottom: 56.25%
}

.placeholder--4by3 {
    padding-bottom: 75%
}

.placeholder--1by1 {
    padding-bottom: 100%
}

.placeholder--hero {
    padding-bottom: 31.25%
}

@media (max-width:991.98px) {
    .placeholder--hero {
        padding-bottom: 65.10416667%
    }
}

.placeholder--mixed {
    padding-bottom: 31.25%
}

@media (max-width:768px) {
    .placeholder--mixed {
        padding-bottom: 65.10416667%
    }
}

.placeholder--card {
    padding-bottom: 42.72727273%
}

.placeholder--sample-1 {
    padding-bottom: 56.25%
}

.placeholder--sample-2 {
    padding-bottom: 56.4516129%
}

.placeholder-center {
    position: relative;
    height: 0;
    overflow: hidden
}

.placeholder-center__item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%
}

.placeholder-center--21by9 {
    padding-bottom: 42.85714286%
}

.placeholder-center--16by9 {
    padding-bottom: 56.25%
}

.placeholder-center--4by3 {
    padding-bottom: 75%
}

.placeholder-center--1by1 {
    padding-bottom: 100%
}

.placeholder-center--demo {
    padding-bottom: 118.18181818%
}

.placeholder-center--sample-a {
    padding-bottom: 56.36363636%
}

.placeholder-center--sample-b {
    padding-bottom: 56.34674923%
}

.placeholder-center--sample-c {
    padding-bottom: 118.18181818%
}

.placeholder-center-t {
    position: relative;
    height: 0;
    overflow: hidden
}

.placeholder-center-t__item {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    max-width: 100%;
    max-height: 100%
}

.placeholder-center-t--21by9 {
    padding-bottom: 42.85714286%
}

.placeholder-center-t--16by9 {
    padding-bottom: 56.25%
}

.placeholder-center-t--4by3 {
    padding-bottom: 75%
}

.placeholder-center-t--1by1 {
    padding-bottom: 100%
}

.placeholder--key-img-1 {
    padding-bottom: 72.00854701%
}

@media (min-width:768px) {
    .key-img-wrap--ver-2 .placeholder--key-img-1 {
        padding-bottom: 100%
    }
}

.placeholder--key-img-2 {
    padding-bottom: 100%
}

@media (max-width:768px) {
    .placeholder--key-img-2 {
        padding-bottom: 51.94029851%
    }
}

.placeholder--key-img-3 {
    padding-bottom: 55.88235294%
}

.placeholder--key-img-sq {
    padding-bottom: 100%
}

.placeholder--topic {
    padding-bottom: 56.21939275%
}

li a.linkStyle > div.d1{padding-right: 40px; float: left; list-style-type: none; }
li a.linkStyle > div > div img{width: 50px;} 
li a.linkStyle  div{ line-height: 2.5em;} 


@keyframes animateDash {
    to {
      stroke-dashoffset: 0;
    }
}
@keyframes svg-fill {
    0% {fill:rgba(255, 255, 255, 0)}
    25% {fill:rgba(255, 255, 255, 0.25)}
    50% {fill:rgba(255, 255, 255, 0.5)}
    75% {fill:rgba(255, 255, 255, 0.75)}
    100% {fill:rgba(255, 255, 255, 1)}
}
.container-discover{
    position: relative;
    /* padding-top: 10.875rem; */
    padding-top: 8rem;
}

/** Swiper Slider **/
.swiper-button-next:hover:after, 
.swiper-button-prev:hover:after{
    color: #38005d;
}
.swiper-button-next, .swiper-button-prev,
.home-button-next, .home-button-prev {
    /* position: relative !important; */
    position: absolute;
    top:auto;
    z-index: 2;
}
.home-button-prev:after, .swiper-rtl .home-button-next:after {
    /* content: 'prev'; */
}
.home-button-next:after, .swiper-rtl .home-button-prev:after {
    /* content: 'next'; */
}
.home-button-next:after, .home-button-prev:after {
    /* font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none!important;
    letter-spacing: 0;
    text-transform: none;
    font-variant: initial;
    line-height: 1; */
}
.home-button-prev, .home-button-next{
    display: inline-block;
    position: relative;
    width: 5em;
    transition: all 0.3s;
  }
  
  .home-button-prev .home-button-prev-icon{
    display: block;
    position: relative;
    right: -0.05em;
    transition: 0.3s;
  }

  .home-button-prev:hover .home-button-prev-icon{
    padding-left: 1.7em;
    left: -1em;
  }
  
  .home-button-next .home-button-next-icon{
    display: block;
    position: relative;
    float: right;
    transition: 0.3s;
  }

  .home-button-next:hover .home-button-next-icon{
    padding-right: 1.7em;
    right: -1em;
  }


.home-button-prev-icon {
    background-image: url(/assets/img/icon/icon-prev.svg);
    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(7498%) hue-rotate(244deg) brightness(102%) contrast(102%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 50px;
    height: 70px;    
}
.foot-button-prev .home-button-prev-icon {
    background-image: url(/assets/img/icon/right-arrow.svg);
    width: 28px;
    height: 28px;     
    rotate: 180deg;
    filter: invert(0); 
}
.home-button-prev{
    height: inherit;
    border-right:1px solid #fff;
    text-align: right;
}
.home-button-next{
    height: inherit;
    border-left:1px solid #fff;
    /* padding-left: 3rem; */
}
.home-button-next-icon {
    background-image: url(/assets/img/icon/icon-next.svg);
    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(7498%) hue-rotate(244deg) brightness(102%) contrast(102%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 50px;
    height: 70px;    
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: 1 !important;
}
.foot-button-next .home-button-next-icon {
    background-image: url(/assets/img/icon/right-arrow.svg);
    width: 28px;
    height: 28px;     
    /* filter: brightness(0) saturate(100%) invert(58%) sepia(5%) saturate(9%) hue-rotate(314deg) brightness(92%) contrast(89%); */
    filter: invert(0); 
}
.swiper-container {
    width: 40vw;
    height: auto;
}
.swiper-container a{
    /* position: relative; */
}
.swiper-container .slider-play-btn{
    /* width: 5rem;
    height: 5rem; */
    width: 80px;
    height: 80px;
    /* margin-top: -6.5rem;
    margin-left: -2.5rem; */
    margin-top: -80px;
    margin-left: -40px;
    /* position: absolute; */
    /* top: 8vw;
    left: 17vw; */
    border: none;
    background: transparent;
}
.home-banner .icon-video-play,
.swiper-container .icon-video-play{
    width: 100%;
    height: auto;
}
.swiper-container .event-lefttop-box{
    top: 0rem;
    /* left: 0.5rem; */
    left: 0.33rem;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 0 0.3rem;
    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.5);
    width: 20px;
    height: 20px;
    background: #ffffff;
    opacity: .5;    
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active {
    opacity: 1;
}
  .swiper-pagination {
    bottom:0px !important;
  }
.visit-our-neighbourhood .swiper-pagination .separator:last-child{
    display: none;
}
.event__body {
    /* padding:0 1vw; */
    /* padding: 1vw; */
    padding: 1rem;
}
.highlight-multi .event__body {
    padding: 1rem 1rem 0;
}

.slider-video {
    width:560px;
    height: 315px;
    border: 0px;
}
.slider--event .icon-video-play{
    /* width: 5rem;
    height: 5rem; 
    width: 100%; */
}
.slider--event .slider-play-btn{
    /* position: absolute;
    top: 8vw;
    left: 17vw; 
    border: none;
    background: transparent; */
}
.slider--event .event-title{
    padding: 0 1rem;
    margin-bottom: 1rem;
    margin-top: 0;
    /* display: block; */
    display: flex;
    /* align-items: center; */
    min-height: 60px;
    padding-right: 110px;
}
.slider--event .event-title span {
    color:#000;
    font-size: 1.5rem;
    text-overflow: ellipsis;
    overflow: hidden;
    /* white-space: nowrap; */
}
.slider--event .event-circle-info {
    bottom: auto;
    right: 8px;
}

.slider--event .event-info,
.slider--event .event-date,
.slider--event .event-location{
    display: flex;
    align-items: center;
    justify-items: center;
}
.slider--event .event-location{
    text-transform: capitalize;
}
.slider--event .event-info{
    /* margin-top: 1em; */
    border-top: 1px solid rgba(0, 0, 0, .5);
    border-bottom: 1px solid rgba(0, 0, 0, .5);
    max-width: 41vw;
    padding: 0.5rem 0;
    /* padding: 0.5rem 1vw; */
    margin: 0 1rem;
}
.slider--event .event-info .event-date img,
.slider--event .event-info .event-location img {
    margin-right:10px;
}
.slider--event .event-date {
    /* margin-right: 5vw; */
    min-width: 50%;
}
.slider--event .event-info span {
    font-family: Montserrat-Regular, NotoSansTC-Regular, NotoSansSC-Regular;
    color:#000;
}
.slider--event .icon-calendar-black{
    width: 22px;
    height: 22px;
}
.slider--event .icon-location{
    width: 22px;
    height: 22px;
}
.event-icon {
    position: absolute;
    z-index: 1;
    margin-left: -0.6vw;
    margin-top: -0.7vw;
}
.placeholder-event,
.placeholder-event img {
    width: 100%;
    height: auto;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    font-size: 2rem !important;
    font-weight: 900;
}
.home-button-prev:after, .swiper-rtl .home-button-next:after,
.home-button-next:after, .swiper-rtl .home-button-prev:after {
    font-weight: 900;
    color: #ffffff;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
    /* right:-2vw !important; */
    /* right:-2rem !important; */
}
/* .foot-button-next {
    right: 0 !important;
}
.foot-button-prev {
    left: 0 !important;
} */
.banner-pagination {
    width: 100%;
    position: absolute;
    bottom: 0em;
    border-top: 1px solid #fff;
    z-index: 99;
}
.home-pagination {
    position: relative;
    z-index: 2;
    text-align: center;
    width: auto !important;
    bottom: 0px !important;
    color: #fff;
    min-width: 30rem;
    font-size: 1.5rem;
}
.swiper-pagination-01 .swiper-pagination-bullet {
    background: transparent !important;
    opacity: 1 !important;
  outline:none;
}

.icon-subscribe{
    width: 60px;
    height: 60px;
}
.icon-double-arrow-right{
    width: 45px;
    height: 40px;
}
.section-home-icon-slider{
    background-color: #000;
}
.whatson-slider {
    /* margin-left:10vw; */
    /* padding: 0 15px; */
    padding: 0;
}
.whatson-slider-top{
    display: flex;
    justify-content: space-between;
}
.whatson-slider-top-left{
    display: flex;
    align-items: flex-end;
    /* float: left; */
}
.whatson-slider-top-right{
    display: flex;
    justify-content: end;
}
.swiper-slide a:before {
    content: "";
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, .2) 70%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 1) 100%);
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
}
.swiper-slide a .banner-title-area .banner-title:after {
    content: "";
    background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, .4) 30%, rgba(0, 0, 0, .7) 60%, rgba(0, 0, 0, 1) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: -1;    
}
.home-banner .swiper-wrapper{
    height: auto;
}
.home-banner .swiper-slide{
    /* max-width: 1440px; */
    background-color: #000;
    overflow: hidden;
}
.home-banner .swiper-slide figure::before{
    background-color: rgba(0,0,0,.25);
    opacity: 1;
}
.home-banner .swiper-wrapper.disabled .swiper-slide figure::before{
    opacity: 0;
}
.home-banner .swiper-wrapper.disabled .swiper-slide a:hover figure::before{
    /* opacity: 1; */
}
.home-banner .swiper-slide-active figure::before{
    background-color: transparent;
    opacity: 0;
}
.home-banner .swiper-slide-active figure:hover::before{
    /* background-color: rgba(0,0,0,.25);
    opacity: 1; */
}
.home-banner .placeholder-event img{
    /* object-fit: cover; */
    height: auto;
}
.home-banner .swiper-slide img {
    height:100vh;
    object-fit: cover;
}
.home-banner .swiper-pagination-clickable .swiper-pagination-bullet {
    width: 11px;
    height: 11px;
  }
  .home-banner .pagination-container {
      position: absolute;
      bottom: 100px;
      width: 100%;
      text-align: center;
      z-index: 10;
  }
  .home-banner .swiper-pagination-bullet {
      background: white;
      opacity: 0.7;
  }
  .home-banner .swiper-pagination-bullet-active {
      opacity: 1;
      background: #ff4444;
  }
  .home-banner .controls-container {
      position: absolute;
      bottom: 0px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 30px;      
      z-index: 10;
      border-top:1px solid #fff;
  }
.home-banner .controls-container .banner-controls {
    max-width: var(--medimum-width);
    margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 30px;
  }    
  .home-banner .controls-container button {
    background: transparent;
    color: white;
    border: none;
    padding: 10px 40px;
    cursor: pointer;
    display: block;
    align-items: center;
    justify-content: center;
  }
  .home-banner .controls-container button i {
      font-size: 2rem;
      font-style: normal;
  }
  .home-banner .controls-container button i.fa-pause {
    font-size: 2.2rem;
    margin-top:-8px;
  }
  .home-banner .controls-container button i::before {
      content: "⏸"; /* Fallback for pause icon */
  }
  .home-banner .controls-container button.playing i::before {
      content: "▶"; /* Fallback for play icon */
  }
  @media (max-width: 768px) {
    .home-banner .controls-container button i {
        font-size: 1.5rem;
    }
      /* .home-banner .pagination-container {
          bottom: 55px;
      } */
      .home-banner .controls-container {
          bottom: 0px;
          gap: 8px;
      }
  }
  @media (max-width: 480px) {
      .home-banner .controls-container {
          bottom: 0px;
          gap: 6px;
      }

  }
  @media (max-width: 360px) {
    .vr-btn {
     width:60px;
      height:60px;
    }
    .home-button-next {
        padding-left:2rem;
      }
.home-button-prev {
        padding-left:2rem;
      }    
    .home-banner .controls-container button {
      padding:30px 50px;
    }
    .home-button-next-icon,
      .home-button-prev-icon {
        height:60px;
      }
      .home-banner .controls-container button i {
          font-size: 2rem;
      }
      .home-banner .pagination-container {
          bottom: 40px;
      }
      .home-banner .controls-container {
          gap: 6px;
      }
  }  
.swiper-container .swiper-slide{
    max-width: 576px;
}
.whatson-slider-top-right .swiper-button-prev{
    left: 0;
}
.whatson-slider-top-right .swiper-button-next{
    right: -10px !important;
}
.whatson-slider .banner-pagination{
    width: 95%;
}
.home-popup{
    background-color: #fff;
    margin: 20px;
    padding: 20px;
    overflow: auto;
    /* height: 100%; */
    height: 60%;
}
.home-popup-date{
    color: #666666;
    font-size: 0.875rem;
    font-family: OpenSans-SemiBold;
    margin-right: 2.5rem; 
    margin-bottom: 1rem;
}
.home-popup-title{
    color: #000;
    font-family: Montserrat-Medium;
    font-size: 1.125rem;
    margin-bottom: 1rem;
}
.home-popup-details{
    color: #000;
    font-family: OpenSans-Regular;
    font-size: 1rem;
    /* text-align: justify; */
}
.lang-zh-cn .home-popup-title,
.lang-zh-cn .home-popup-details{
    font-weight: 400;
}
.language-switcher:after {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(275deg) brightness(111%) contrast(109%) !important;
}
.head-border .language-switcher:after {
    filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(7461%) hue-rotate(347deg) brightness(105%) contrast(111%) !important;
}
.home-popup-date{
    color: #666666;
    font-size: 0.875rem;
    font-family: OpenSans-SemiBold;
    margin-right: 2.5rem; 
}
.home-popup .link-details{
    margin-top: 0.563rem;
    display: block;
    display: flex;
    align-items: center;
}
.home-popup .icon-arrow-notice{
    margin-left: 0.3rem;
}
.home-popup hr.theme-hr {
    /* margin: 3.875rem 0 3.75rem; */
    margin: 1.875rem 0 1.75rem;
    border: 1px solid #000000;
    opacity: 0.2;
    height: 1px;
}
.icon-search {
    filter: invert(1);
}
@media (max-width: 1440px){
    .home-popup{
        height: 75%;
    }
}
@media only screen and (max-width:1200px){
    .banner-pagination{
        bottom: 10px !important;
    }
    .whatson-slider .event-date span{
        /* max-width: 210px; */
        padding-right: 1rem;
    }
    .slider--event .event-info{
        /* max-width: 81vw; */
        max-width: 90vw;
        display: block !important;
    }
    .slider--event .event-date{
        margin-bottom: 0.5rem;
    }
    .banner-title-area {
        /* max-width: 90vw; */
        width: 100%;
        /* bottom:12%; */
    }
}
@media (max-width:1000px) {
    .section-whatson .swiper-slide{
        /* width: 50vw; */
        width: 90vw !important;
    }
    .slider--event .event-info{
        /* max-width: 50vw; */
        max-width: 90vw;
    }
}
@media (max-width: 991.98px){
    .section-home-icon-slider .icon-search{
        display: block !important;
    }
}

@media only screen and (max-width:991px){
    .icon-search-mobi, .icon-search {
        filter: invert(1);
    }
    .slider--event .event-title span {
        /* font-size: 1.5em; */
    }
}
@media (max-width: 991px){
    .icon-nav-mobi {
        filter: invert(1);
    } 
    .home-popup{
        height: 60%;
    }
    .section-whatson > .container{
        padding-left: 0;
        padding-right: 0;
    }
    .banner-title {
        padding: 10% 1rem 10rem 1rem;
    }
    /* .banner-subtitle {
        bottom: 20%;
    } */
}
/* @media (max-width:900px) {
    .section-whatson .swiper-slide{
        width: 90vw;
    }
    .slider--event .event-info{
        max-width: 90vw;
    }
} */
@media only screen and (max-width:768px){
    .slider--event .event-title span {
        /* font-size: 1em; */
    }
    .slider--event .event-circle-info {
        right: 31px;
    }
    .section-whatson{
        /* padding-bottom: 5.5em; */
        /* padding-left: 24px !important;
        padding-right: 24px !important; */
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    .container-discover{
        padding-top: 0;
    }
    
    .subscribe-left{
        width: 22%;
        padding-top: 1.5em;
    }
    .subscribe-right{
        width: 78%;
    }
    .subscribe-title{
        font-size: 2.5rem;
    }
    .container-subscribe.ps-5{
        padding-left: 0 !important;
    }
    .section-whatson .justify-content-md-between{
        justify-content: space-between !important;
    }
    .whatson-slider{
        /* padding: 0 15px 2rem; */
        /* padding: 0 0 2rem; */
        padding: 0 0 3rem;
    }
    .whatson-slider-top-right{
        margin-right: 1rem;
    }
    .whatson-slider .swiper-slide{
        /* padding-bottom: 1rem; */
    }
    .banner-pagination{
        bottom: 0rem;
    }
    .banner-subtitle {
        font-size: 0.875rem;
        bottom: 14%;
    }

}
@media (max-width:768px) {
    .swiper-button-next{
        /* right: -1rem !important; */
    }
}
/* @media (max-width:700px) {
    .section-whatson .swiper-slide{
        width: 90vw;
    }
    .slider--event .event-info{
        max-width: 90vw;
    }
} */
@media (max-width:600px) {


}
@media (max-width:575.98px) {
    .section-whatson .container{
        padding-left: 0;
        padding-right: 0;
    }
}

@media only screen and (max-width:350px){
    .whatson-slider .placeholder-event,
    .whatson-slider .placeholder-event img{
        max-height: 150px;
        height: 150px;
    }
}
@media only screen and (max-width:300px){
    .section-whatson .swiper-slide{
        width: 97vw;
    }
    .slider--event .event-info{
        max-width: 97vw;
    }
}

.event-lefttop-text:first-child {
    margin-left: 1rem;
}
body.home main:nth-child(even){
    margin-top: 100vh;  
}
.row.current-exhibition {
    position: relative;
    z-index: 2;  
}
.section-block {
    width: 100%;
    padding: 0px;
    margin: 0px;
    z-index: 2;
    position: relative;
}
.section-block .section-title {
    padding:13px 0;
    text-align: center;
    border-bottom:1px solid;
    border-top:1px solid;
}


.left-col {
    border-right: 1px solid;
}
.current-exhibition {
    background-color: #FF7D50;
}
.virtual-experience {
    background-color: #FCF3C2;
}
.three-model .section-inner-block {
    max-width: 100%;
}
.three-model h2 {
    z-index: 2;
    background-color: #fff;
}
.three-model img {
    width: 100%;
    object-fit: cover;
    height: 50vw;
    text-align: center;
}
.surprise-me {

}
.surprise-me .bubble-item {
    transition: transform .2s;
}
.surprise-me .bubble-item:hover {
    transform: scale(1.2);
}
.weekly-collection {
    background-color: #98D8CE;
}
.visit-our-neighbourhood img {
    width: 100%;
    object-fit: cover;
    height: 100%;
    text-align: center;
}
.visit-our-neighbourhood h2 {
    z-index: 2;
    color: #fff;
    border-top: 1px solid #000 !important;
}
.visit-our-neighbourhood .section-inner-block {
    margin-top: -87px;
    max-width: 100%;
}
.artwork {
    background-color: #B48CE2;
}
.artwork .artwork-content {
    height: 100%;
    vertical-align: middle;
    margin: auto 0;
    display: flex;
    flex-direction: row;
    flex-direction: column;
    justify-content: center;
}
.artwork .artwork-content h2 {
    /* font: normal normal normal 45px / 50px Medium LL; */
    letter-spacing: 0px;
}
.artwork img {
    width: 100%;
    height: auto;
}
.block-desc {
    padding-top:20px;
    font-size: 1.25rem;
    padding-bottom:20px;
}
.artwork .left-col, 
.artwork .right-col {
    padding: 3.5rem 40px;
}
.pop-culture {
    background-color: #FF4CA0;
}
.pop-culture .section-inner-block {
    max-width: 100%;
}
.watch-video {
    background-color: #cce271;
}

/** Item Grid **/
.thumbnail-image img {
    width: 100%;
    height: auto;
}

.thumbnail-image.masked img {
    object-fit: cover;
    border-radius: 50%;     
}
.thumbnail-image.video-lightbox {
    position: relative;
}
.current-exhibition .left-col,
.current-exhibition .right-col,
.watch-video .left-col,
.watch-video .right-col {
    padding: 3.5rem 40px;
}
.current-exhibition .thumbnail-image,
.watch-video .thumbnail-image {
    text-align: center;
}
.current-exhibition .thumbnail-image img,
.watch-video .thumbnail-image img.description-img {
    object-fit: contain;
    margin: 0px;
    text-align: center;
    aspect-ratio: 16 /9;
}

.grid-subtitle {
    color: #333333;
    font-size: 1.25rem;
    text-align: center;
    padding-top:15px;
    padding-bottom:10px;
}

.grid-title {
    color: #000000;
    font-size: 1.5rem;
    text-align: center;
}

.section-title {
    font-size: 2.188rem;
}

.section-inner-block {
    max-width: var(--large-width);
    margin: 0 auto;
    padding: 0px;
}

@media (min-width: 1900px) {
    .section-inner-block {
        max-width: var(--medimum-width);
        margin: 0 auto;
        padding: 0px;
    }
}

.left-col,
.right-col {
    padding: 7.5rem 40px;
}

/** Visit **/
.swiper-pagination-01 {
    transition: 1s opacity !important;
}
.swiper-pagination-01.swiper-pagination-bullets-dynamic {
    left:50% !important;
    display: flex;
    height: 150px;
    align-items: center;    
}
        /* Text pagination styling */
        .swiper-pagination-01 {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100vw;
          height: 100px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          z-index: 20;
          pointer-events: auto;
        }  

        .swiper-pagination-01 span {
            min-width: 50vw; /* Adjusted to 50vw */
            text-align: center;
            color: #fff;
            font-size: 2.813rem;
            cursor: pointer;
            transition: opacity 0.3s, color 0.3s;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
            position: relative; /* For ::after separator */
        }  
        .visit-banner-icon {
            width: 100px !important;
            height: 100px !important;
            filter: invert(1);
            margin-right: 40px;
        }

        /* .swiper-pagination-01 span::before {
            content: '';
            margin-right: 10px;
            background: url(/assets/img/icon/icon-biking.svg);
            width: 150px;
            height: 150px;
            display: inline-block;
            filter: invert(1);
            background-size: contain;
        }
        .swiper-pagination-01 span:nth-child(2)::before {
            background: url(/assets/img/icon/icon-hm.svg);
        }        
        .swiper-pagination-01 span:nth-child(3)::before {
            background: url(/assets/img/icon/icon-leisure-walk.svg);
        }   */
        /* .swiper-pagination-01 span:not(:last-child)::after {
            content: '';
            position: absolute;
            right: 0px;
            width: 50%;
            height: 2px;
            background: #fff;
            opacity: 1;
            left: 73%;
        }    
        .swiper-pagination-01 span:nth-child(3):after {
          display: none;
        } */
        @media (max-width: 768px) {
            .swiper-pagination-01 {
                width: 110vw;
                height: 40px;
            }

            .swiper-pagination-01 span {
                font-size: 18px;
                min-width: 50vw; /* Adjusted to 50vw */
            }

            .swiper-pagination-01 span::before {
                width: 50px;
                height: 50px;
            }

            .swiper-pagination-01 span:not(:last-child)::after {
                width: 50px;
                right: -6px; /* Adjusted for mobile */
            }
        }      
.visit-wrapper .visit-slide:before {
    content: "";
    background-color: rgb(0, 0, 0, .4);
    /* display: block; */
    width: 100%;
    height: 100%;
    position: absolute;
}

.visitSwiper .slide-page {
    font-size: 56px;
    background: transparent !important;
    box-shadow: none !important;
    color:#fff;    
    transform: scale(1) !important;
}
.icon-biking,
.icon-hm,
.icon-leisure-walk {
    max-width: 45vw !important;
    line-height: 50px;
    height: 150px !important;
    max-height: 150px !important;
    display: flex;
    width: 100% !important;
    align-items: center;
}
.icon-biking:before {
    content: "";
    background: url("/assets/img/icon/icon-biking.svg");
    width:100%;
    height:150px;
    max-width: 170px;
    background-repeat: no-repeat;
    filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(421%) hue-rotate(101deg) brightness(121%) contrast(100%);
}
.icon-hm:before {
    content: "";
    background: url("/assets/img/icon/icon-hm.svg");
    width:100%;
    height:150px;
    max-width: 170px;
    background-repeat: no-repeat;
    filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(421%) hue-rotate(101deg) brightness(121%) contrast(100%);
}
.icon-leisure-walk:before {
    content: "";
    background: url("/assets/img/icon/icon-leisure-walk.svg");
    width:100%;
    height:150px;
    max-width: 170px;
    background-repeat: no-repeat;
    filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(421%) hue-rotate(101deg) brightness(121%) contrast(100%);
}
.icon-biking hr,
.icon-hm hr {
    height: 1px;
    width: 350px;
    border: 1px solid #fff;
    opacity: 1;
    margin-left: 20px;  
}
.icon-leisure-walk hr {
border: 0;
opacity: 0;
}




/* mansory Grid */
.dw {
    -webkit-animation: fade 2s;
            animation: fade 2s;
    box-sizing: border-box;
    -moz-column-gap: 65px;
         column-gap: 65px;
    position: relative;
    padding: 0px 42px;
    column-rule: 1px solid #000;
  }
  .dw * {
    box-sizing: border-box;
  }
  .dw__fcs-crtn {
    background-color: #000;
    bottom: 0;
    display: none;
    left: 0;
    opacity: 0.75;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2;
  }
  @media (min-width: 768px) {
    .dw {
      -moz-column-count: 2;
           column-count: 2;
    }
  }
  @media (min-width: 992px) {
    .dw {
      -moz-column-count: 3;
           column-count: 3;
    }
  }
  /* @media (min-width: 1500px) {
    .dw {
      -moz-column-count: 4;
           column-count: 4;
    }
  } */
  .dw-pnl {
    margin: 0;
    padding: 20px;
    margin-bottom: 20px;
  }
  .dw-pnl a {
    color:#000;
  }
  .dw-pnl p {
    font-size: 1.25rem;
    font-family: NotoSans-Regular;
    line-height: 30px;
    padding-top:10px;
    padding-bottom:10px;
  }
  .dw-pnl--fcs {
    position: relative;
  }
  .dw-pnl--fcs:hover {
    z-index: 3;
  }
  .dw-pnl--fcs:hover ~ .dw__fcs-crtn {
    display: block;
  }
  .dw-pnl--pls {
    transform-style: preserve-3d;
    perspective: 1000;
    transition: transform 0.25s ease 0s;
  }
  .dw-pnl--pls:hover {
    transform: scale(1.02);
  }
  .dw-pnl__cntnt {
    overflow: hidden;
    padding: 20px;
    width: 100%;
  }
  @media (min-width: 768px) {
    .dw-pnl {
      -moz-column-break-inside: avoid;
           break-inside: avoid;
    }
  }
  .dw-clstr {
    display: flex;
    padding: 0;
  }


  /**
    * Theming
  */

  .tx--left {
    text-align: left;
  }
  .tx--right {
    text-align: right;
  }
  .tx--center {
    text-align: center;
  }
  /**
  * Colors
  */
  .bd--black {
    border: 4px solid #000;
  }
  .bg--black {
    background-color: #000;
  }
  .tx--black {
    color: #000;
  }
  .bd--red {
    border: 4px solid #e74c3c;
  }
  .bg--red {
    background-color: #e74c3c;
  }
  .tx--red {
    color: #e74c3c;
  }
  .bd--blue {
    border: 4px solid #1e8bc3;
  }
  .bg--blue {
    background-color: #1e8bc3;
  }
  .tx--blue {
    color: #1e8bc3;
  }
  .bd--green {
    border: 4px solid #26a65b;
  }
  .bg--green {
    background-color: #26a65b;
  }
  .tx--green {
    color: #26a65b;
  }
  .bd--grey {
    border: 4px solid #6c7a89;
  }
  .bg--grey {
    background-color: #6c7a89;
  }
  .tx--grey {
    color: #6c7a89;
  }
  .bd--purple {
    border: 4px solid #8e44ad;
  }
  .bg--purple {
    background-color: #8e44ad;
  }
  .tx--purple {
    color: #8e44ad;
  }
  .bd--white {
    border: 4px solid #ecf0f1;
  }
  .bg--white {
    background-color: #ecf0f1;
  }
  .tx--white {
    color: #ecf0f1;
  }
  /**
  * Images
  */
  /* img {
    max-height: 300px;
  } */
  img.dw-pnl__cntnt,
  img.dw-flp__pnl {
    padding: 0;
  }
  img.dw-flp__pnl {
    max-height: 100%;
  }
  @-webkit-keyframes fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  

  .bubble-wrapper {
    display: flex;
  }
  .bubble {
    position: relative;
    width: 40px;
    height: 90px;
    transition: all 0.5s ease;
  }
  .bubble-text {
    width: 100%;
    text-align: center;
    color: #555555;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 1.25rem;
  }
  .bubble-text p {
    display: flex;
    justify-content: center;
  }


  .bubble-text p:after {
    content: "";
    background: url(/assets/img/icon/icon-next.svg);
    width: 28px;
    height: 28px;
    rotate: 90deg;
    display: inline-block;
  }
  
  .bubble:before {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    content: ' ';
    transition: all 0.5s ease;
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .label-top {
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
  }
  
  .label-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
  
  .btn-section {
    padding-top:15px;
    padding-bottom:15px;
    border-bottom: 1px solid #000;
    max-width: 100%;
  }
  
  .bubble:hover {
    width: calc(40px * 2.5);
  }
  .bubble:hover:before {
    transform: translateX(-50%) scale(2.5);
  }

  /* before & after slider */
  .beforeAfter-slider {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    min-height: 56vw;
    margin: 3.5rem 0px;
}
.before, .after {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.after {
    clip-path: inset(0 50% 0 0);
}
.drag-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 20px;
    font-size: 18px;
    cursor: grab;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 30px;
    z-index: 10;
    border:1px solid #000;
}
.drag-icon {
    z-index: -1;
    position: relative;
}

/* bubble area */
.bubble12 {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    font-family: Arial, sans-serif;
    max-width: 100%;
}
.bubble-area {
    position: relative;
    width: 100vw;
    height: 100vh;
}
.circle {
    position: absolute;
    border-radius: 50%;
    transition: transform 0.3s ease-in-out;
}
.circle:hover, .circle.active {
    transform: scale(1.5);
}
.circle:hover .circle:not(:hover) {
    transform: scale(0.5);
}

.first-bubble { background-color: #EA8236; width: 15vw; height: 15vw; top: 15%; left: 13%; }
.second-bubble { background-color: #2B2626; width: 10vw; height: 10vw; top: 27%; left: 36%; }
.third-bubble { background-color: #649A5D; width: 10vw; height: 10vw; top: 10%; left: 50%; }
.forth-bubble { background-color: #9675BC; width: 7vw; height: 7vw; top: 32%; left: 60%; }
.fifth-bubble { background-color: #1A4EC3; width: 12vw; height: 12vw; top: 22%; left: 75%; }
.sixth-bubble { background-color: #EBEBEB; width: 16vw; height: 16vw; top: 50%; left: 18%; }
.seventh-bubble { background-color: #FFDE29; width: 15vw;height: 15vw;top: 45%;left: 45%; }
.eighth-bubble { background-color: #FF2700; width: 18vw; height: 18vw; top: 55%; left: 64%; }

.home-collection {
    display: grid;
    grid-template-columns: .8fr .2fr;
    margin: 0 auto;
}
.home-collection a:first-child {
    margin-right: 20px;
}
.home-neighbourhood {
    position: absolute;
    z-index: 99;
    top: 20%;
    margin: 0 auto;
    width: 100%;
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    transform: translateX(-30%);
}

.audio-player {
    border: 1px solid #000;
    border-radius: 50px;
    max-height: 46px;
    margin-right: 15px;    
}
.separator {
  display: inline-block; /* Or block for a full-width line */
  width: 20px; /* Adjust line length */
  height: 1px; /* Adjust line thickness */
  background-color: #fff; /* Line color */
  margin: 0 10px; /* Space between line and spans */
  min-width: 15vw !important;
}

.gallery-btn:after {
    content: "";
    background: url(/assets/img/icon/btn-enlarge.svg) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-left: 5px;
    vertical-align: middle;
}
.dynamic-modal .modal-body {
    padding-top:80px !important;
}
.dynamic-modal .carousel-inner {
    width: 60vw;
    margin: 0 auto;
    display: block;
}
.dynamic-modal .carousel-indicators,
.dynamic-modal .carousel-control-prev,
.dynamic-modal .carousel-control-next,
.dynamic-modal .carousel-controls {
    display: none;
}

    .grid-thumbnail {
      position: relative;
    }
    .thumbnail-control {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: end;
    width: 100%;      
    transform: translate(20px, -20px);
    padding-right: 30px;    
    align-items: center;
    }

.dynamic-modal .modal-header .btn-close {
margin: 0px;
    height: 70px !important;
    top: 0;
    right: 2rem;
    width: 26px !important;    
}
.dynamic-modal .modal-header {
    padding: 0;
}
.dynamic-modal .carousel-inner img {
        width: 60vw;
        margin:0 auto;
}    
.bubble-area>a:focus-visible .circle{
    outline: 2px solid #000;
    outline-offset: 2px;
}
@media only screen and (max-width:768px){
    .home-collection {
        grid-template-columns: 1fr;
    }
    .home-collection .audio-player {
        margin-bottom: 10px;
    }
}
@media only screen and (min-width: 601px) and (max-width:768px){
        .circle:hover, .circle.active {
            transform: scale(1);
        }
}
@media only screen and (max-width: 600px){
    .circle:hover, .circle.active {
        transform: scale(1);
    }
}
@media only screen and (min-width: 501px) and (max-width:768px){
    .first-bubble {
        width: 21vw;
        height: 21vw;
    }
    .second-bubble {
        width: 16vw;
        height: 16vw;
    }
    .third-bubble {
        width: 16vw;
        height: 16vw;
    }
    .forth-bubble {
        width: 14vw;
        height: 14vw;
    }
    .fifth-bubble {
        width: 21vw;
        height: 21vw;
    }
    .sixth-bubble {
        width: 26vw;
        height: 26vw;
    }
    .seventh-bubble {
        width: 21vw;
        height: 21vw;
    }
    .eighth-bubble {
        width: 31vw;
        height: 31vw;
    }
}
@media only screen and (max-width:500px){
.swiper-slide a:before {
    content: "";
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
}    
.first-bubble {
    /* width: 40vw;
    height: 40vw; */
    width: 35vw;
    height: 35vw;
    top: 5%;
    left: 7%;
    max-width: 130px;
    max-height: 130px;
} 
.second-bubble {
    /* width: 25vw;
    height: 25vw; */
    width: 20vw;
    height: 20vw;
    top: 8%;
    left: 58%;
    max-width: 74px;
    max-height: 74px;
}
.third-bubble {
    /* width: 20vw;
    height: 20vw; */
    width: 15vw;
    height: 15vw;
    top: 22%;
    left: 40%;
    max-width: 56px;
    max-height: 56px;
}
.forth-bubble {
    /* width: 22vw;
    height: 22vw; */
    width: 17vw;
    height: 17vw;
    top: 42%;
    left: 36%;
    max-width: 63px;
    max-height: 63px;
}
.fifth-bubble {
        /* width: 35vw;
        height: 35vw; */
        width: 30vw;
        height: 30vw;
        top: 45%;
        left: 62%;
        max-width: 111px;
        max-height: 111px;
}
.sixth-bubble {
    /* width: 35vw;
    height: 35vw; */
    width: 30vw;
    height: 30vw;
    top: 29%;
    left: 4%;
    max-width: 111px;
    max-height: 111px;
}
.seventh-bubble {
        /* width: 35vw;
        height: 35vw; */
        width: 30vw;
        height: 30vw;
        top: 22%;
        left: 62%;
        max-width: 111px;
        max-height: 111px;
}
.eighth-bubble {
    /* width: 50vw;
    height: 50vw; */
    width: 45vw;
    height: 45vw;
    top: 55%;
    left: 10%;
    max-width: 167px;
    max-height: 167px;
}
.visit-our-neighbourhood .section-inner-block {
    margin-top: -65px;    
}
.visitSwiper .slide-page {
    font-size: 1.875rem;
}
.icon-biking hr, .icon-hm hr {
    width: 10px;
}
.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    /* display: flex;
    gap: 100px; */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.visit-our-neighbourhood .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;    
}
.swiper-pagination-01.swiper-pagination-bullets-dynamic {
    left: 40% !important;
}
.icon-biking, .icon-hm, .icon-leisure-walk {
    max-width: 60vw !important;
}
.icon-biking:before,
.icon-hm:before,
.icon-leisure-walk:before {

    width: 50px;
    height: 50px;
    background-size: contain;
}
}

@media only screen and (max-width:768px){
    .gallery-btn:after {
        width: 30px;
        height: 30px;
    }    
    .artwork .left-col {
        order:2;
        border-bottom: none;
    }
.before, .after {
    object-fit: contain;
}  
  .beforeAfter-slider {
    min-height: 80vw;
}
.block-desc {
    font-size: 1rem;
}    
    .current-exhibition .thumbnail-image img, .watch-video .thumbnail-image img.description-img {
        height: 60vw;
        object-fit: contain;
        aspect-ratio: 16 / 9;    
    }

        .swiper-pagination-01 span:not(:last-child)::after {
            width: 38%;
            left: 83%;
        }   
    .section-block .section-title {
        font-size: 1.5rem;
    }
    .left-col,
    .right-col {
        padding:20px !important;
    }  
    .grid-subtitle {
        font-size: 1rem;
        padding-top:10px;
    }  
    .grid-title {
        font-size: 1.25rem;
    }
    .grid-content {
        padding-bottom:10px;
    }     
    img.icon-vr-link {
        /* width: 35px; */
    }       
    .dw {
        /* padding:20px; */
        -moz-column-count: 1;
        column-count: 1;
        padding: 0px 25px;
    }    
    .dw .dw-pnl {
        padding: 0px;
        padding-top: 20px;        
    }
    .dw-pnl p {
        font-size: 1rem;
    }
.visit-our-neighbourhood .section-inner-block {
    margin-top: -63px;
    max-width: 100%;
}    
    .watch-video .grid-title {
        padding-top:0px;
    }
}

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

        .swiper-pagination-01 span {
            font-size: 2.2rem;
        min-width: 25vw;
        }  

        .swiper-pagination-01 span:not(:last-child)::after {
            width: 50%;
        left: 75%;
        }

        .swiper-pagination-01 span::before {
            width: 80px;
            height: 80px;
            background-size: contain !important;
        }
    
}
@media screen and (max-width:1441px){

        .swiper-pagination-01 span {
font-size: 2rem;
        min-width: 35vw;
        }  

        .swiper-pagination-01 span:not(:last-child)::after {
            width: 43%;
            left: 78%;
        }        

        .swiper-pagination-01 span::before {
            width: 80px;
            height: 80px;
            background-size: contain !important;
        }
    
}
@media screen and (max-width:991.98px){

        .swiper-pagination-01 span {
            font-size: 1.813rem;
            min-width: 60vw;
        }  
        .swiper-pagination-01 span:not(:last-child)::after {
            width: 38%;
        left: 80%;
        }   
        .swiper-pagination-01 span::before {
            width: 80px;
            height: 80px;
            background-size: contain !important;
        }
    
}

@media only screen and (max-width:500px){
      .grid-title {
        font-size: 1rem;
      }
.h2, h2 {
    font-size: 1.2rem;
}      
        .swiper-pagination-01 span {
            font-size: 1.5rem;
            min-width: 70vw;
        }  
        .swiper-pagination-01 span:not(:last-child)::after {
            display: none;
        }   
        .swiper-pagination-01 span::before {
        width: 40px;
        height: 40px;
        background-size: contain !important;
        background-repeat: no-repeat;
        }
    
    .home-button-prev:hover .home-button-prev-icon {
        left: 0em;
    }    
    .home-button-next:hover .home-button-next-icon {
        right: 0em;
    }
    .three-model img {
        height: 100vh !important;
    }
    .three-model img.icon-video-play {
        height: auto !important;
    }
    .three-model .section-inner-block {
        margin-top: -63px !important;
    }
    .banner-pagination{
        bottom: 0.375rem;
    }
    .page-logo{
        padding: 0.688em 0;
    }
    .others__item--icon{
        padding: 0;
    }
    .others__item--icon{
        width: 3rem;
    }

    .slider--event .event-info{
        /* max-width: 81vw; */
        max-width: 90vw;
    }

    .banner-subtitle {
        font-size: 0.875rem;
        bottom: 25%;
    }
    .banner-title {
        /*font-size: 1.75rem;*/
      font-size: 1.5rem;
        /* padding: 0 20px; */
    }   
    .home-banner .pagination-container {
        bottom: 10%;
    }   
}

 /* audio */
  .mejs__container{
    /* background: transparent !important; */
    background: white !important;
    height: 46px !important;
    min-width: 300px !important;
    max-width: 300px !important;
  }
  .mejs__controls:not([style*='display: none']){
    background:none !important;
    height: 100%;
    align-items: center;
  }
  .mejs__playpause-button{
    /* width: calc(40px + 0.375rem * 2) !important; */
    /* height: calc(40px + 0.625rem * 2) !important; */
    width: 30px !important;
    height: 30px !important;
    margin: 0px;
  }
  .mejs__play>button{
    width: 30px !important;
    padding-left: 10px;
  }
  .mejs__icon-play{
    transform: scaleY(1.2);
  }
  .mejs__icon-play{
    width: 26px !important;
    height: 28px !important;
    margin-left: 11px;
    margin-top: 0px;
  }
  .mejs__icon-pause{
    width: 26px !important;
    height: 30px !important;
    margin-left: 11px;
    margin-top: 0px;
  }
  .mejs__icon-play>use, .mejs__icon-pause>use{
    transform: scale(1.5);
  }
  @media only screen and (max-width: 600px) {
    .mejs__container {
        min-width: 300px !important;
        max-width: 300px !important;
    }      
    .mejs__playpause-button{
        width: calc(30px) !important;
        height: calc(30px) !important;
    }
    .mejs__icon-play, .mejs__icon-pause{
        width: 26px !important;
        height: 30px !important;
        margin-left: 11px;
        margin-top: 0px;
    }
  }
  .mejs__playpause-button>button{
    background: transparent !important;
    border-radius: 50%;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 0px !important;
    color: black;
  }
  .mejs__pause>button{
    background: transparent !important;
    color: black !important;
  }
  @media only screen and (max-width: 600px) {
        .mejs__playpause-button>button{
            width: 30px !important;
            height: 30px !important;
        }
    }
  .play-pause-text{
    font-size: 1rem;
    position: absolute;
    bottom: -22px;
    left: 36px;
    transform: translate(-50%, -50%);
    cursor: pointer;
    font-family: NotoSans-Regular;
    display: none;
  }
  @media only screen and (max-width: 600px) {
        .play-pause-text{
            bottom: -12px;
            left: 32px;
        }
    }
  .mejs__time{
    color: black !important;
  }
  .mejs__mute>button, .mejs__unmute>button{
    color: black !important;
  }
  .mejs__time-current{
    background: rgba(0, 0, 0, 1) !important;
  }
    .mejs__time-buffering,
    .mejs__time-current,
    .mejs__time-handle,
    .mejs__time-loaded,
    .mejs__time-marker,
    .mejs__time-total,
    .mejs__time-hovered {
        height: 0.25rem !important;
        border-radius: 0rem !important;
    }
    .mejs__time-total{
        background: rgba(0, 0, 0, 0.1) !important;
    }
    .mejs__time-handle-content{
        border: 0.25rem solid rgba(0, 0, 0, 0.5) !important;
        background: rgba(0, 0, 0, 0.5) !important;
    }
    .mejs__container:focus{
        outline-offset: 0 !important;
        outline-style: solid;
        outline-width: 0 !important;
    }
    .mejs__time-handle{
        top: -3px !important
    }
    .mejs__time{
        font-size: 16px !important;
        font-weight: 400 !important;
    }
    .mejs__button svg{
        fill: black !important;
    }
    .mejs__playpause-button > button{
        margin: 0px !important;
    }
    .mejs__button > button:focus{
        outline: none !important;
    }
    .mejs__time-rail{
        top: 3px;
        margin: 0px !important;
    }
    .mejs__horizontal-volume-total{
        height: 0.25px;
        border: 0.06rem solid #fff !important;
        border-radius: 0px !important;
    }
    .mejs__horizontal-volume-current{
        background: rgba(0, 0, 0, 1) !important;
    }
    .mejs__horizontal-volume-total{
        height: 0.25rem !important;
        background: white !important;
        border: none !important;
    }
    .mejs__horizontal-volume-current{
        border: none !important;
    }
     .audiotour-list .action-btn{
        align-items: flex-start;
     }
    #audioCollapse .action-btn,#audioCollapse .audiotour-list .action-btn{
        align-items: flex-start;
        min-width: 30%;
        max-width: 393px;
        min-width: 346px;
    }
    @media only screen and (max-width: 1920px) {
        #audioCollapse .action-btn,#audioCollapse .audiotour-list .action-btn{
            width: 48%;
            max-width: 393px;
            min-width: 346px;
        }
    }
    @media only screen and (max-width: 768px) {
        .audioAccordion.accordionBar #audioCollapse ul li {
            display: block;
        }
        #audioCollapse .action-btn,#audioCollapse .audiotour-list .action-btn{
            max-width: 100%;
            min-width: 100%;
            width: 100%;
            margin-top: 20px;
        }
    }
    .audio-menu{
        position:absolute;
        width:200px;
        z-index:12;
        right:0;
        box-shadow:0 1px 8px 0 rgba(0,0,0,0.5);
        background:white;
        max-height: 120px;
        overflow: auto;
    }
    .audio-menu>button{
        border:none;
        background:white;
        width:100%;
        height:46px;
        text-align:left;
        padding-left:12px;
        padding-right:12px;
        transition:all 0.1s ease-in-out;
        font-size: 12px;
        display: flex;
        align-items: center;
    }
    .audio-menu>button:hover{
        background: rgba(0,0,0,0.15) !important
    }
    .mejs__button-group-more-Option{
        display: flex;
        align-items: center;
        padding-bottom: 4px;
    }
    .mejs__icon-moreOption{
        width: 10px;
        height: 16px;
    }
    .mejs__button-moreOption{
        background: transparent;
        border: none;
    }
    .mejs__horizontal-volume-slider{
        position: absolute !important;
        right: 56px;
        z-index: 2;
        /* display: none !important; */
    }
    .mejs__volume-button>button{
        z-index: 2;
        width: 1.25rem !important;
    }
    .mejs__horizontal-volume-container{
        width: 88px;
        background: lightgray;
        border-radius: 20px !important;
        position: absolute;
        right: 32px;
        top: 7px;
        height: 30px;
        z-index: 1;
        opacity: 0;
    }
    .hidden {
        display: none;
    }
    .artwork-content .mejs__container{
        margin: 0 auto;
    }
    .mejs__mute .mejs__icon-mute{
        width: 26px;
        height: 30px;
    }
    .mejs__unmute .mejs__icon-unmute{
        width: 19px;
        height: 18px;
        transform: scale(0.9,1.1) translateX(-1px);
    }
/* close of audio */
    #toggle-autoplay i {
        /* display: none; */
    }
    #toggle-autoplay i:before {
        content: '';
    }
    #toggle-autoplay .pause-btn{
    background-image: url(/assets/img/icon/pause.png);
    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(7498%) hue-rotate(244deg) brightness(102%) contrast(102%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 24px;
    height: 24px;           
    }    
    #toggle-autoplay.playing .pause-btn {
    background-image: url(/assets/img/icon/play-button.png);
    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(7498%) hue-rotate(244deg) brightness(102%) contrast(102%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 24px;
    height: 24px;           
    }