.component.slideInUp .accordion-list {
    display: none;
}

    .component.slideInUp .accordion-list.active {
        display: block;
    }

section.kv .bg {
    background-color: #FFFFFF;
}

@@media (min-width: 1921px) {
    section .kv .bg {
        background-color: #FFFFFF;
    }
}


section.kv .bg:after {
    background-image: none;
}


/*(11/08/2022) Floating button */

section.notice {
    position: relative;
}

    section.notice .floating-btn {
        background-color: #4555A5;
        border-radius: 28.5px;
        box-shadow: 0 2px 13px 0 rgba(0, 0, 0, 0.3);
        color: #FFFFFF;
        padding: 21px 20px;
        z-index:5;
    }

/*(06/09/22) Modify floating-btn mobile view => right (No yet in Prod)*/ 
@media (max-width: 991px) {
    section.notice .floating-btn {
        right: 20px;
        max-width: calc(100% - 100px);
        bottom: 20px;
        padding: 14px 20px;
    }
}

section.notice .floating-btn .btn-notice {
    font-family: "Oscine", sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 21px;
}

@media (max-width: 991px) {
    section.notice .floating-btn .btn-notice {
        font-size: 16px;
    }
}

section.notice .floating-btn .btn-notice > span {
    display: flex;
    align-items: center;
}

    section.notice .floating-btn .btn-notice > span:after {
        content: "";
        display: inline-block;
        width: 23px;
        height: 23px;
        background-image: url("../assets/img/icon/important.svg");
        background-size: 23px 23px;
        background-position: center center;
        background-repeat: no-repeat;
        margin-left: 20px;
    }

section.notice .floating-btn .popbox {
    display: none;
    width: 350px;
    padding: 4px 0 14px;
}

@media (max-width: 991px) {
    section.notice .floating-btn .popbox {
        width: auto;
    }
}

section.notice .floating-btn .popbox .head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    font-family: "Oscine", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 21px;
}

    section.notice .floating-btn .popbox .head .popbox-close:after {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        background-image: url("../assets/img/icon/close.svg");
        background-size: 16px 16px;
        background-position: center center;
        background-repeat: no-repeat;
    }

section.notice .floating-btn .popbox .notice-item {
    padding-top: 20px;
}

    section.notice .floating-btn .popbox .notice-item:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        padding-bottom: 20px;
    }

    section.notice .floating-btn .popbox .notice-item .title {
        font-family: "Oscine", sans-serif;
        font-weight: 700;
        font-size: 16px;
        line-height: 21px;
        margin-bottom: 5px;
    }

    section.notice .floating-btn .popbox .notice-item > p {
        margin-bottom: 0;
        font-size: 16px;
        line-height: 19px;
    }

        section.notice .floating-btn .popbox .notice-item > p a {
            color: #FFFFFF;
        }

html[lang="zh-Hans"] section.notice .floating-btn .btn-notice {
    font-family: "Noto Sans SC", sans-serif;
}

html[lang="zh-Hans"] section.notice .floating-btn .popbox .head {
    font-family: "Noto Sans SC", sans-serif;
}

html[lang="zh-Hans"] section.notice .floating-btn .popbox .notice-item .title {
    font-family: "Noto Sans SC", sans-serif;
}

html[lang="zh-Hant"] section.notice .floating-btn .btn-notice {
    font-family: "Noto Sans TC", sans-serif;
}

html[lang="zh-Hant"] section.notice .floating-btn .popbox .head {
    font-family: "Noto Sans TC", sans-serif;
}

html[lang="zh-Hant"] section.notice .floating-btn .popbox .notice-item .title {
    font-family: "Noto Sans TC", sans-serif;
}


/*.kv .swiper-container .swiper-wrapper .swiper-slide .content .link-btn-group .link {
    border: none;
}

.kv .swiper-container .swiper-wrapper .swiper-slide .content .link-btn-group .link:hover {
        background-color: inherit;
        color: inherit;
 }

.kv .swiper-container .swiper-wrapper .swiper-slide .content .link-btn-group .link {
    margin-top: 0px;
}

@media(max-width: 991px) {
    .kv .swiper-container .swiper-wrapper .swiper-slide .content .link-btn-group .link {
        width: 100%;
    }
}*/


/*.kv .swiper-container .swiper-wrapper .swiper-slide .content .link-btn-group .btn.btn-w:not(:last-child) {
    margin-right: 20px;
}*/

.kv .swiper-container .swiper-wrapper .swiper-slide .content .link-btn-group .btn.btn-filled:not(:last-child) {
    margin-right: 20px;
}




.kv .swiper-container .swiper-wrapper .swiper-slide .video-container {
    height: 480px;
}

.kv .swiper-container .swiper-wrapper .swiper-slide .video-container .video-iframe{
    height: inherit;
}

.kv .swiper-container .swiper-wrapper .swiper-slide .video-container video{
    height: inherit;
}

.kv .swiper-container.swiper-short .swiper-wrapper .swiper-slide .video-container {
    height: 200px;
}

    .kv .swiper-container.swiper-short .swiper-wrapper .swiper-slide .video-container .video-iframe {
        height: inherit;
    }

    .kv .swiper-container.swiper-short .swiper-wrapper .swiper-slide .video-container video {
        height: inherit;
    }

section.kv .swiper-container.swiper-short .swiper-pagination-container {
    bottom: 15px;
}

section.kv .swiper-container.swiper-short .content {
    padding-bottom: 25px;
}



.kv .swiper-container .swiper-wrapper .swiper-slide .content .link-btn-group  .btn {
    padding: 10px 12px;
}

.kv .swiper-container .swiper-wrapper .swiper-slide .content .tagline {
    padding-bottom: 15px;
}


.content .col.col-md-4 .case-listing .case-item:not(:nth-child(2n)) {
    margin-right: 24px;
}

.content .col.col-md-4 .case-listing .case-item {
    width: calc((100% - 48px)/2);
    margin-bottom: 26px;
}

.content .col.col-md-4  .case-listing .case-item .news-title {
    margin-top: 20px;
    font-size: 16px;
}


/*(29/08/22) modify the whats new list on introduce page */
.content .col.col-md-4 .case-listing .case-item.featured {
    width: 100%;
}

.content .col.col-md-4  .case-listing.hv-feature .case-item:not(:nth-child(3n)) {
    margin-right: 24px;
}


/* (06/09/22)  For Mobile-App view */
body.mobile-app .main.app {
    padding-top: 0px !important;
}
    body.mobile-app header {
        display:none;
    }

body.mobile-app footer {
    display: none;
}
body.mobile-app .main.app section.tab-nav {
    top: 0px;
}
body.mobile-app .main.app section.breadcrumb {
    display: none;
}

body.mobile-app .main.app section.notice .floating-btn{
    position: fixed;
}



@media (max-width: 389px) {
    .kv .swiper-container .swiper-wrapper .swiper-slide .content .link-btn-group .btn.btn-filled:not(:last-child) {
        margin-right: 0px;
        display: block;
        margin-bottom: 10px;
    }
}


section.cta .floating-btn a span {
    line-height: 14px;
    top: 125px;
}

@media (max-width: 991px){
    section.cta .floating-btn a span {
        line-height: 9px;
        top: 68px;
    }
} 

/* (22/12/2023) Fix tab nav top */
section.tab-nav {
    top: 93px;
}


/* (12/03/2024) Add css for handle table responsive for two column to single row */
@media (max-width: 991px) {
    table.general-single-row-responsive {
        width: 100% !important;
    }

        table.general-single-row-responsive tr td {
            width: 90% !important;
            display: block!important;
        }

            table.general-single-row-responsive tr td img {
                margin: 0 auto;
                display:block;
                width:fit-content;
            }
}