body {
    background-color: #fff;
    font-family: "Noto Sans TC", sans-serif;
}

img {
    width: 100%;
}

header {
    position: relative;
}

a {
    text-decoration: unset;
    letter-spacing: 1px;
}

p {
    padding: 0;
    margin: 0;
}

.mg-at {
    margin: auto;
}

.ft-12 {
    font-size: 12px;
}

.ft-14 {
    font-size: 14px;
}

.ft-16 {
    font-size: 16px;
}

.ft-18 {
    font-size: 18px;
}

.ft-20 {
    font-size: 20px;
}

.ft-22 {
    font-size: 22px;
}

.ft-24 {
    font-size: 24px;
}

.ft-26 {
    font-size: 26px;
}

.ft-28 {
    font-size: 28px;
}

.ft-30 {
    font-size: 30px;
}

.lh-14 {
    line-height: 14px;
}

.lh-16 {
    line-height: 16px;
}

.lh-18 {
    line-height: 18px;
}

.lh-20 {
    line-height: 20px;
}

.lh-22 {
    line-height: 22px;
}

.lh-24 {
    line-height: 24px;
}

.lh-26 {
    line-height: 26px;
}

.lh-28 {
    line-height: 28px;
}

.lh-30 {
    line-height: 30px;
}

.lh-32 {
    line-height: 32px;
}

.lh-34 {
    line-height: 34px;
}

.lh-36 {
    line-height: 36px;
}

.lh-38 {
    line-height: 38px;
}

.lh-40 {
    line-height: 40px;
}

.fw-100 {
    font-weight: 100;
}

.fw-200 {
    font-weight: 200;
}

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fw-900 {
    font-weight: 900;
}

.main-section:not(.index) {
    background-image: url("/media/33nncsaf/pvcbs-bg-2.png");
    background-size: auto;
    background-repeat: no-repeat;
    background-position: 50% 0%;
}

.head-banner-contain {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    margin-bottom: 20px;
}

.head-banner-title {
    width: 100%;
    max-width: 20%;
    padding-left: 60px;
    color: #26698F;
    align-self: center;
    white-space: nowrap;
}

    .head-banner-title .eng {
        font-size: 14px;
        line-height: 20px;
    }

    .head-banner-title .chi {
        font-size: 40px;
        line-height: 59px;
    }

.web-path {
    margin: 0px 60px;
    color: #535353;
}

    .web-path a {
        color: #535353
    }

.content-container {
    margin-top: 50px;
    margin-bottom: 120px;
}

.hover-test:hover {
    background-color: #f2f1de;
    border-color: #f79e03;
}

.banner-img-contain {
    max-width: 80%;
    width: 100%;
    height: 210px;
    transform: translateX(10%) skewX(-15deg);
    overflow: hidden;
}

.banner-img {
    content: "";
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateX(-10%) skewX(15deg);
}

    .banner-img[data-id="1096"] {
        background-image: url("/media/mf5ffpbo/communication-technology-interne.png");
    }

    .banner-img[data-id="1097"] {
        background-image: url("/media/iqlavsy1/panoramic-view-hong-kong-busines.png");
    }

    .banner-img[data-id="1098"] {
        background-image: url("/media/yzpputry/background-urban-corporate-archi.png");
    }

    .banner-img[data-id="1099"] {
        background-image: url("/media/wjwnc22v/graduation-gown-cap-tassel-success-achieved-generated-by-ai_188544-25873.jpg");
        background-position: 50% 40%;
    }

    .banner-img[data-id="1100"] {
        background-image: url("/media/2rfmp4v1/photo-communication-technology-i.png");
    }

    .banner-img[data-id="1101"] {
        background-image: url("/media/vktfkufx/abstract-glowing-shiny-gold-bright-wave-flowing-blur-mesh-black-background.jpg");
    }

    .banner-img[data-id="1102"] {
        background-image: url("/media/1tijwod3/close-up-diploma-mortarboard-stacked-books-against-white-background_1048944-30435520.jpg");
        background-position:50% 40%;
    }

    .banner-img[data-id="1103"] {
        background-image: url("/media/yzpputry/background-urban-corporate-archi.png");
    }

.back-to-top {
    background-color: #f5f5f5;
    color: #26698f;
    padding: 21px 0px;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

    .back-to-top img {
        width: 20px;
        height: 10px;
        margin: 0px auto 20px;
    }

.copyright-contain {
    background-color: #26698f;
    color: #fff;
    padding: 12px;
    font-size:10px;
    display:flex;
    flex-wrap:wrap;
}
.powered-by {
    margin-left: 10px;
}
.extended-subnav {
    position: absolute;
    background-color: #00688f;
    background-image: url("/media/r25mhhyi/pvcbs-bg.png");
    background-position-x: 90%;
    background-repeat: no-repeat;
    background-size: contain;
    min-height: 464px;
    width: 100%;
    max-width: 100vw;
    font-size: 18px;
    line-height: 27px;
    display: none;
    flex-wrap: nowrap;
    left: 0;
    padding-top: 44px;
    padding-bottom: 50px;
    z-index: 100;
}

.extended-subnav-title {
    width: 40%;
    font-size: 52px;
    line-height: 80px;
    color: #fff;
    text-align: center;
}

.extended-subnav-nav {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
}

    .extended-subnav-nav .subnav {
        width: 50%;
        padding: 25px 0px;
    }

.subnav a,
.subnav a:visited {
    color: #fff;
    font-weight: 300;
}

.extended-subnav-nav .subnav::after {
    content: "";
    display: block;
    width: 255px;
    height: 1px;
    padding-top: 25px;
    border-bottom: 1px dashed #fff;
}

.normal-nav.mobile {
    display: none;
}

.normal-nav {
    padding: 25px 18px;
    color: #707070;
}

    .normal-nav a,
    .normal-nav a:visited {
        color: #707070;
    }

.header-contactus {
    width: 70%;
    height: 0;
    border-width: 0px 0px 54px 15px;
    border-style: none solid solid;
    border-color: transparent transparent rgb(38, 105, 143);
    margin-left: auto;
}

    .header-contactus a,
    .header-contactus a:visited {
        color: #fff;
        display: flex;
        flex-wrap: wrap;
        height: 52px;
        align-content: center;
        padding-left: 30px;
        font-weight: 300;
    }

.header-nav {
    width: 70%;
    margin-left: auto;
    display: flex;
    flex-wrap: nowrap;
}

.extend-nav-btn {
    background-color: unset;
    border: none;
    outline: none;
    padding: 25px 18px;
    color: #707070;
}

.extend-nav:first-child .extend-nav-btn {
    padding-left: 0;
}

.header-logo {
    position: absolute;
    top: 20px;
    left: 40px;
    max-width: 230px;
}

.header-splide {
    position: relative;
}

.header-cover {
    height: 100%;
    position: relative;
    color: #FFF;
}

.header-cover-contain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.header-videocover {
    content: "";
    display: block;
    width: 29%;
    height: 100%;
    /*    border-width: 900px 255px 0px 0px;
    border-style: solid;
    border-color: rgb(255, 255, 255) transparent transparent transparent; 
    background-image: url("/media/lk3ctpa2/cover.svg");
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
        */
    background-color: #26698f;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.header-splide-content-contain {
    /*
    position: absolute;
    z-index: 10;
    top: 40px;
    left: 40px;
*/
    padding:30px;
}

.header-splide-more-contain {
    position: absolute;
    bottom: 40px;
    left: 0;
    z-index: 10;
    display: flex;
    flex-wrap: nowrap;
}

.more-scroll {
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    text-transform: uppercase;
    color: #FFF;
    font-size: 18px;
    line-height: 27px;
    padding-right: 40px;
    transform: rotate(180deg);
}

.learn-more {
    display: flex;
    margin-top: 30px;
}


.learn-more-angle-img {
    width: 18px;
    height: 36px;
    place-self: center;
    margin-left: 15px;
}

.learn-more-name {
    font-size: 28px;
    line-height: 41px;
    font-weight: 400;
    color: #FFF;
}

.header-splide-title {
    font-size: 34px;
    line-height: 54px;
    margin-bottom: 25px;
}


.header-splide-content {
    max-width: 540px;
    width: 100%;
    font-size: 18px;
    line-height:30px;
    letter-spacing: 1px;
}

.home-newsevent-section {
    position: relative;
    margin-bottom: 140px;
}

.home-newsevent-sub {
    font-size: 14px;
    line-height: 20px;
    color: #26698f;
    padding: 0px 85px;
}

.home-newsevent-title {
    font-size: 40px;
    line-height: 59px;
    color: #26698f;
    padding: 0px 85px 65px;
}

.home-newsevent-listing {
    width: 80%;
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 100px;
    position: relative;
    z-index: 10;
    opacity: 0;
}

.home-newsevent-listingitem {
    width: 25%;
}

.home-newsevent-item-details {
    padding: 20px 30px;
    background-color: #f5f5f5;
    height: 160px;
}

    .home-newsevent-item-details .date {
        color: #535353;
        font-size: 14px;
        line-height: 20px;
    }

    .home-newsevent-item-details .title {
        font-size: 20px;
        line-height: 30px;
        font-weight: bold;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        color: #000;
    }

.home-brand-award-section {
    position: relative;
    margin-bottom: 150px;
}

.home-brand-award {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    z-index: 10;
    width: 95%;
}

.home-brand-award-img-contain {
    width: 60%;
    height: 100%;
    margin-bottom: 100px;
    opacity: 0;
}

.home-brand-award-content {
    width: 40%;
    display: flex;
    flex-direction: column;
    padding: 0px 30px 0px 30px;
    opacity: 0;
}

    .home-brand-award-content .date {
        font-size: 14px;
        color: #535353;
    }

    .home-brand-award-content .title {
        font-size: 30px;
        line-height: 40px;
        font-weight: bold;
        max-width: 400px;
        margin: 20px 0 auto;
    }

    .home-brand-award-content .content {
        max-width: 400px;
        color: #fff;
        line-height: 30px;
        letter-spacing: 2px;
        font-weight: 100;
        margin-bottom: auto;
    }

.home-commerce-member-section {
    padding: 0px 85px;
    margin-bottom: 130px;
}

.home-commerce-member-section-title {
    text-align: center;
    color: #26698f;
}

.commerce-new-member {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    opacity: 0;
}

.commerce-new-member-content {
    padding: 0px 25px;
}

    .commerce-new-member-content .newjoin {
        font-size: 20px;
        line-height: 29px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .commerce-new-member-content .name {
        font-size: 30px;
        line-height: 45px;
        font-weight: bold;
    }

    .commerce-new-member-content .intro {
        line-height: 30px;
        color: #535353;
        margin-top: auto;
        margin-bottom: 35px;
    }

.navlink {
    display: flex;
    gap: 20px;
}

.facebook-link::after {
    content: "";
    display: block;
    width: 29px;
    height: 29px;
    background-image: url("/media/kanpsztt/fb-icon.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.web-link::after {
    content: "";
    display: block;
    width: 29px;
    height: 29px;
    background-image: url("/media/iyiedxwr/web-icon.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.commerce-new-member-img-contain {
    background-color: #fbfbfb;
    width: 500px;
    height: 255px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.commerce-new-member-img {
    max-width: 163px;
    height: max-content;
    margin: 0 auto;
}

.commerce-new-member-name {
    font-size: 20px;
    line-height: 29px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0 auto;
    max-width: 220px;
}

.commerce-new-member-content {
    width: 550px;
    display: flex;
    flex-direction: column;
    margin-bottom: 75px;
}

.commerce-member-col-item {
    width: 292px;
    height: 340px;
    background-color: #fbfbfb;
    display: flex;
    flex-direction: column;
    margin: 0px auto 10px;
    transition-duration: 0.5s;
    transform: scale(0);
}

.commerce-member-col-img {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    margin: 0px auto;
    padding: 10px 0px;
    width:100%;
    height:100%;
}

.commerce-member-col-name {
    font-size: 20px;
    line-height: 29px;
    font-weight: bold;
    letter-spacing: 1px;
    max-width: 250px;
    margin: 10px auto;
    padding: 0px 10px;
    text-align: center;
}

.commerce-member-col-name-eng {
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    max-width: 250px;
    margin: 0px auto 10px;
    padding: 0px 10px;
    text-align: center;
    color: #5D5D5D;
}

.commerce-member-col-nav {
    max-width: 200px;
    margin: auto auto 20px;
    display: flex;
    gap: 20px;
}

.home-chairman-contain {
    position: relative;
    margin-bottom: 115px;
}

.home-chairman-section {
    padding: 0px 85px;
    color: #26698f;
}

.home-chairman {
    display: flex;
    flex-wrap: nowrap;
    color: #fff;
    position: relative;
}

.home-chairman-image-contain {
    max-width: 48%;
    width: 100%;
    height: 470px;
    margin-right: 100px;
    z-index: 10;
    opacity: 0;
}

.home-chairman-image {
    width: 100%;
    height: 100%;
    position: relative;
    transform-origin: 0 100%;
    transform: skewX(-8deg);
    overflow: hidden;
}

    .home-chairman-image:before {
        content: "";
        position: absolute;
        width: 130%;
        height: 100%;
        background-image: url("/media/4vnlaqze/88303435_1417734818387817_4041639374578778112_n-copy.png");
        background-size: cover;
        background-position: center 25%;
        transform-origin: inherit;
        transform: skewX(8deg) translateX(-11%);
    }

.home-chairman-content {
    max-width: 45%;
    opacity: 0;
}

.home-chairman-sub {
    color: #26698f;
    font-size: 18px;
    line-height: 27px;
}

.home-chairman-title {
    color: #4493a2;
    font-size: 60px;
    line-height: 82px;
}

.home-chairman-subtitle {
    color: #4493a2;
    font-size: 30px;
    line-height: 40px;
}

.home-chairman-details {
    color: #535353;
    font-size: 18px;
    line-height: 37px;
}

.home-aboutus-contain {
    position: relative;
    margin-bottom: 110px;
}

.home-aboutus {
    max-width: 80%;
    background-color: #4493a2;
    color: #fff;
    padding: 85px;
    position: relative;
    z-index: 10;
    opacity: 0;
}

.home-aboutus-content {
    width: 65%;
    position: relative;
}

.home-aboutus-name {
    font-size: 40px;
    line-height: 59px;
    font-weight: 400;
    margin-bottom: 33px;
}

.home-aboutus-title {
    font-size: 60px;
    line-height: 82px;
    font-weight: 300;
    margin-bottom: 33px;
}

.home-aboutus-deatils {
    font-size: 24px;
    line-height: 44px;
    font-weight: 300;
}

.home-aboutus-image {
    max-width: 440px;
    width: 100%;
    height: 605px;
    background-image: url("/media/l30l4qhj/building.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 47.5%;
    right: -110%;
    transform: translateY(-50%) skewX(-4deg);
}

.ex-grid {
    z-index: 0;
    opacity: 0;
}

.trapezium {
    width: 200px;
    height: 80px;
    background: #ccc;
    transform: perspective(30px) rotateX(-15deg);
    overflow: hidden;
}

.text {
    transform: rotateX(15deg) translateY(30px);
    text-align: center;
    line-height: 80px;
}

#newsevent.ex-grid {
    width: 55%;
    position: absolute;
    overflow: hidden;
    right: 0px;
    top: 260px;
}

#brandaward.ex-grid {
    width: 55%;
    position: absolute;
    right: 0;
    top: 200px;
    overflow: hidden;
}

#chairman.ex-grid {
    width: 68.96%;
    margin-top: -20px;
    margin-left: auto;
    position: relative;
    overflow: hidden;
}

#aboutus.ex-grid {
    width: 55%;
    position: absolute;
    right: 0;
    bottom: -110px;
    overflow: hidden;
}

.ex-grid-text {
    letter-spacing: 3px;
    color: #fff;
    display: flex;
    gap: 10px;
    margin: auto;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
}

#newsevent .ex-grid-text {
    position: absolute;
    height: max-content;
    right: 7%;
    top: 70%;
    transform: translateY(-50%);
}

#brandaward .ex-grid-text {
    position: absolute;
    height: max-content;
    top: 55%;
    right: 7%;
    transform: translateY(-50%);
}

#chairman .ex-grid-text {
    position: absolute;
    height: max-content;
    right: 7%;
    top: 50%;
    transform: translateY(-50%);
}

#aboutus .ex-grid-text {
    position: absolute;
    height: max-content;
    top: 70%;
    right: 7%;
    transform: translateY(-50%);
}

.vt-lr {
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
}

.ex-grid-arrow {
    width: 24px;
    height: 16px;
}

#header-navigation .mobile-nav-btn span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #6f6f6f;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}

.mobile-nav-btn {
    width: 33px;
    transform: skewX(-30deg);
    position: absolute;
    top: 30px;
    right: 40px;
}

.contact-us-section {
    display: flex;
    flex-wrap: nowrap;
}

.contact-us-details {
    width: 50%;
    font-size: 18px;
    color: #535353;
}

    .contact-us-details .fullname {
        font-size: 28px;
        line-height: 38px;
        margin-bottom: 40px;
        color: #26698F;
    }

    .contact-us-details > div:not(.fullname) {
        padding: 15px 0px;
    }

    .contact-us-details img {
        width: 18px;
        height: 100%;
        margin-right: 15px;
    }

.map-embed {
    width: 50%;
    aspect-ratio: 4/3;
    border-radius: 10px;
    overflow: hidden;
}


.latest-award-container {
    margin-bottom: 120px;
}

.latest-award-title {
    color: #26698F;
    font-size: 28px;
    line-height: 38px;
    margin-bottom: 30px;
}

.latest-award-content-main {
    display: flex;
    gap: 20px;
    margin-bottom: 55px;
}

.latest-award-content {
    color: #535353;
    font-size: 18px;
    line-height: 37px;
    width: 50%;
    padding-top: 20px;
}

.latest-award-content-sub {
    line-height: 30px;
    max-width: 1036px;
}

.latest-award-image {
    width: 50%;
}

.pass-award-title {
    color: #26698F;
    font-size: 28px;
    line-height: 38px;
    margin-bottom: 30px;
}

.pass-award-content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.latest-award-container .details {
    max-width: 400px;
    background-color: #F5F5F5;
    text-align: center;
    padding: 30px 0px;
    margin-top: 40px;
}

.past-award-item {
    width: calc(50% - 15px);
    display: flex;
    flex-direction: column;
}

    .past-award-item .image {
        box-shadow: 20px 20px 0px 0px #F5F5F5;
        margin-bottom: 40px;
    }

    .past-award-item .title {
        font-size: 30px;
        line-height: 40px;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .past-award-item .content {
        line-height: 30px;
        margin-bottom: 20px;
    }

    .past-award-item .file {
        max-width: 320px;
        background-color: #F5F5F5;
        text-align: center;
        padding: 30px 0px;
        margin-top: auto;
    }

a.award-inner {
    color: #197B7B;
    font-size: 22px;
    line-height: 30px;
}
.pass-award-companylist {
    width: 100%;
    background-color: #26698F;
    text-align-last: center;
    padding: 20px;
    margin-bottom: 40px;
}
a.award-past-winner {
    color: #FFF;
    font-size: 22px;
    line-height: 30px;
}

.award-past-winner img {
    width: 32px;
    height: 100%;
    margin-right: 15px;
}

.busines-award-detail-title {
    color: #26698F;
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 30px;
}

.busines-award-detail-attachment {
    background-color: #26698F;
    padding: 20px;
    text-align: center;
}

.busines-award-detail-content {
    font-size: 18px;
    line-height: 37px;
    margin: 60px 0px;
}

a.award-attachment {
    color: #FFF;
    font-size: 22px;
    line-height: 30px;
}

.award-attachment img {
    width: 32px;
    height: 100%;
    margin-right: 15px;
}
.busines-award-detail-image {
}

.academicians-introduction-section {
    padding-bottom: 50px;
}

.academicians-introduction-description {
    color: #535353;
    font-size: 18px;
    line-height: 37px;
    max-width: 720px;
    margin-bottom:20px;
}

.academician-plan-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
}

.academician-plan-item {
    width: 25%;
}

    .academician-plan-item .image {
        max-height: 170px;
        overflow: hidden;
        margin-bottom: 10px;
    }

a.academician-plan-file {
    color: #197B7B;
    display: flex;
    flex-wrap: nowrap;
}

.academician-plan-file img {
    width: 32px;
    height: 39px;
    margin: 6px 10px auto 0px;
}

.academician-plan-file .title {
    font-size: 22px;
    line-height: 30px;
}

.academician-plan-file .date {
    line-height: 30px;
}

.president-emeritus-item .image {
    max-width: 238px;
    aspect-ratio: 0.9482;
    overflow: hidden;
}

.president-emeritus-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 40px;
}

.president-emeritus-item {
    width: 25%;
    padding: 0px 5px;
}

    .president-emeritus-item > div {
        margin: 0px auto;
        text-align: center;
        color: #197B7B;
    }

    .president-emeritus-item .name {
        font-size: 24px;
        margin: 10px 0px;
    }

.forever-honorary-president-section {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.forever-honorary-president {
    align-self: center;
}

    .forever-honorary-president .title {
        color: #26698F;
        font-size: 18px;
        line-height: 27px;
    }

    .forever-honorary-president .name {
        color: #4493A2;
        font-size: 60px;
        line-height: 82px;
        font-weight: 300;
    }

    .forever-honorary-president .post {
        color: #535353;
        font-size: 18px;
        line-height: 37px;
    }

.forever-honorary-president-image {
    max-width: 580px;
    width: 100%;
    height: 440px;
    transform: skewX(10deg);
    overflow: hidden;
}

    .forever-honorary-president-image img {
        transform: skewX(-10deg) translateX(-9%);
        width: 125%;
    }

.founding-president-section {

    margin-bottom:40px;
}
.founding-president-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.founding-president {
    align-self: center;
    max-width:400px;
    width:100%;
}

    .founding-president .title {
        color: #26698F;
        font-size: 18px;
        line-height: 27px;
    }

    .founding-president .name {
        color: #4493A2;
        font-size: 30px;
        line-height: 50px;
        font-weight: 300;
    }

    .founding-president .order {
        color: #4493A2;
        font-size: 20px;
        line-height: 40px;
        font-weight: 300;
        text-transform: uppercase;
    }

    .founding-president .post {
        color: #535353;
        font-size: 18px;
        line-height: 37px;
    }

.founding-president-image {
    max-width: 220px;
    height: 267px;
    overflow: hidden;
    margin-bottom:20px;
}


.founding-honorary-president-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 40px;
}

.msg-current-president-content {
    background-color: rgba(245, 245, 245, 0.47);
    position: relative;
}

    .msg-current-president-content .content {
        padding: 80px 0px 100px;
        max-width: 670px;
        margin: 0px auto 0px 75px;
        color: #535353;
        font-size: 18px;
        line-height: 37px;
        letter-spacing: 0.72px;
        position: relative;
    }

        .msg-current-president-content .content::before {
            content: "";
            width: 40px;
            aspect-ratio: 0.3833;
            display: block;
            background-image: url("/media/laui5jzm/icon-quotationmark-start.png");
            background-size: auto;
            background-repeat: no-repeat;
            background-position: center;
            position: absolute;
            top: 80px;
            left: -40px;
        }

        .msg-current-president-content .content::after {
            content: "";
            width: 40px;
            aspect-ratio: 0.3833;
            display: block;
            background-image: url("/media/afmpibll/icon-quotationmark-end.png");
            background-size: auto;
            background-repeat: no-repeat;
            background-position: center;
            position: absolute;
            top: 80px;
            right: -35px;
        }

.msg-current-president-image {
    max-width: 456px;
    clip-path: polygon(15% 0, 99% 0, 100% 90%, 85% 100%, 0 100%, 0 10%);
    position: absolute;
    top: 0;
    right: -30px;
}

.executive-committee-description {
    font-size: 18px;
    line-height: 37px;
    color: #535353;
    text-align: center;
    margin-bottom: 50px;
}

.executive-committee-title-en {
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
}

.executive-committee-title-ch {
    font-size: 24px;
    text-align: center;
    margin-bottom: 50px;
}

.committee-president-details {
    background-color: #FBFBFB;
    text-align: center;
    padding: 30px 0px;
}

    .committee-president-details .post {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 15px;
    }

    .committee-president-details .name {
        font-size: 30px;
        line-height: 40px;
    }

    .committee-president-details .company {
        font-size: 18px;
        line-height: 30px;
    }

.executive-committee-item {
    display: flex;
    padding: 60px 0px;
    border-bottom: 2px dashed #a8a8a8;
    justify-content: space-between;
}

.executive-committee-position {
    color: #197B7B;
    font-size: 44px;
    line-height: 80px;
    width: 25%;
}

.executive-committee-member-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 25px;
    width: 70%;
}

.committee-member-details {
    background-color: #f5f5f5;
    color: #197B7B;
    padding: 25px 0px;
    max-width: 300px;
    width: 33.333%;
    min-height: 115px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
    .committee-member-details .image {
        margin: 0px auto 20px;
    }

    .committee-member-details .name {
        font-size: 24px;
        line-height: 35px;
        width: 100%;
        text-align: center;
    }

    .committee-member-details .company {
        font-size: 18px;
        line-height: 30px;
        width: 100%;
        text-align: center;
    }

.introduction-title-en {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 10px;
}

.introduction-title-ch {
    font-size: 52px;
    line-height: 70px;
    margin-bottom: 35px;
}

.introduction-content-contain {
    margin-bottom: 100px;
}

.introduction-content {
    padding-top: 60px;
}

    .introduction-content .content-text {
        font-size: 18px;
        line-height: 30px;
        color: #535353;
        max-width: 844px;
    }

.image-contain {
    float: right;
    padding-left: 60px;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}

    .image-contain .left-side {
        margin-bottom: 60px;
    }

    .image-contain .right-side {
        margin-top: 50px;
    }

    .image-contain .left-side, .image-contain .right-side {
        width: calc(50% - 5px);
        aspect-ratio: 0.6659;
        height: auto;
    }

.purpose-section {
    background-color: #f5f5f5;
}

.purpose-contain {
    display: flex;
    flex-wrap: wrap;
}

.purpose-image {
    content: "";
    width: 50%;
    height: auto;
    display: block;
    background-image: url(/media/dwfjpvxe/intro-img-hor-1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.purpose-list {
    width: 50%;
    padding: 50px;
    margin: auto;
}

.purpose-title {
    font-size: 30px;
    line-height: 45px;
    color: #26698F;
    font-weight: bold;
    margin-bottom: 20px;
}

.purpose-list li {
    padding: 20px 0px;
    border-bottom: 2px dotted #8a8a8a;
}

    .purpose-list li::marker {
        color: #228274;
        font-size: 12px;
    }

.membership-criteria {
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
}

.criteria-section {
    width: 325px;
}

.criteria-content {
    width: calc(100% - 325px);
    padding-bottom: 50px;
    border-bottom: 1px solid #d8d8d8;
}

.criteria-section .section-name {
    width: 300px;
    background-color: #EEEEEE;
    border-left: 2px solid #26698F;
    padding: 6px 15px;
    font-size: 28px;
    color: #26698F;
}

.criteria-content .title {
    font-size: 20px;
    line-height: 37px;
    font-weight: bold;
}

.criteria-content .condition {
    font-size: 18px;
    line-height: 37px;
    color: #535353;
}

    .criteria-content .condition .number {
        color: #228274;
        font-weight: bold;
    }

.criteria-content .details {
    font-size: 18px;
    line-height: 37px;
    color: #535353;
}

.new-commerce-member {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 140px;
}

.new-commerce-member-card {
    width: 50%;
    height: 255px;
    background-color: #FBFBFB;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    align-content: center;
}

.new-commerce-member-card-logo {
    margin: 0px auto;
}

.new-commerce-member-card-chi {
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    line-height: 20px;
}

.new-commerce-member-card-eng {
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    color: #5D5D5D;
    font-weight: 600;
}

.new-commerce-member-details {
    width: 50%;
    padding: 0px 30px;
    display: flex;
    flex-wrap: wrap;
}

.new-commerce-member-name {
    width: 100%;
}

.new-commerce-member-title {
    font-size: 20px;
    font-weight: 600;
}

.new-commerce-member-name-chi {
    font-size: 30px;
    line-height: 45px;
    font-weight: bold;
}

.new-commerce-member-description {
    width: 100%;
    margin: auto 0px;
    line-height: 30px;
    letter-spacing: 0.64px;
    color: #535353;
}

.new-commerce-member-navi-contain {
    align-self: flex-end;
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
}

.commerce-member-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.commerce-member-item {
    background-color: #FBFBFB;
    width: calc(25% - 20px);
    min-height: 340px;
}

.commerce-member-logo img {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    margin: 0px auto;
    padding: 10px 0px;
    width: 100%;
    height: 100%;
}

.commerce-member-item-details {
    padding: 25px 25px;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


.commerce-member-name {
    width: 100%;
    text-align: center;
}

.commerce-member-name-chi {
    font-size: 20px;
    line-height: 22px;
    color: #228375;
    margin-bottom: 10px;
}

.commerce-member-name-eng {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #5D5D5D;
    margin-bottom: 20px;
}

.commerce-member-navi-contain {
    align-self: flex-end;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}


.new-corporate-member {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 140px;
}

.new-corporate-member-card {
    width: 50%;
    height: 255px;
    background-color: #FBFBFB;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    align-content: center;
}

.new-corporate-member-card-chi {
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    line-height: 20px;
}

.new-corporate-member-card-eng {
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    color: #5D5D5D;
    font-weight: 600;
}

.new-corporate-member-details {
    width: 50%;
    padding: 0px 30px;
    display: flex;
    flex-wrap: wrap;
}

.new-corporate-member-name {
    width: 100%;
}

.new-corporate-member-title {
    font-size: 20px;
    font-weight: 600;
}

.new-corporate-member-name-chi {
    font-size: 30px;
    line-height: 45px;
    font-weight: bold;
}

.new-corporate-member-description {
    width: 100%;
    margin: auto 0px;
    line-height: 30px;
    letter-spacing: 0.64px;
    color: #535353;
}

.new-corporate-member-navi-contain {
    align-self: flex-end;
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
}

.corporate-member-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.corporate-member-item {
    background-color: #FBFBFB;
    width: calc(25% - 20px);
    min-height: 180px;
}

.corporate-member-item-details {
    padding: 25px 25px;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.corporate-member-logo img {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    margin: 0px auto;
    padding: 10px 0px;
    width: 100%;
    height: 100%;
}
.corporate-member-name {
    width: 100%;
    text-align: center;
    margin:20px 0px;
}

.corporate-member-name-chi {
    font-size: 20px;
    line-height: 22px;
    color: #228375;
}

.corporate-member-name-eng {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #5D5D5D;
}

.corporate-member-navi-contain {
    align-self: flex-end;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}

.member-list-icon {
    width: 29px;
    height: 29px;
}

.lsapp-description-contain {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 80px;
}

.lsapp-description {
    width: 50%;
}

    .lsapp-description .title-chi {
        font-size: 28px;
        line-height: 38px;
        color: #26698F;
    }

    .lsapp-description .title-eng {
        line-height: 38px;
        color: #26698F;
        margin-bottom: 30px;
    }

    .lsapp-description .description {
        font-size: 18px;
        line-height: 37px;
        color: #535353;
    }

.lsapp-image {
    width: 40%;
    transform: skewX(-10deg);
    overflow: hidden;
}

    .lsapp-image img {
        width: 140%;
        height: 300px;
        transform: skewX(10deg) translateX(-10%);
    }

.lsapp-step-title {
    color: #26698F;
    font-size: 28px;
    line-height: 38px;
    margin-bottom: 20px;
}

.lsapp-diagram-step {
    display: flex;
    flex-wrap: wrap;
}

.diagram-item {
    padding: 50px;
    width: 33.33%;
    color: #FFF;
}

    .diagram-item:nth-child(1) {
        background-color: #d08bb8;
        clip-path: polygon(96% 0, 100% 50%, 96% 100%, 0 100%, 0 0);
        border-radius: 10px 0px 0px 10px;
    }

    .diagram-item:nth-child(2) {
        background-color: #388ab9;
        clip-path: polygon(0 0, 96% 0, 100% 50%, 96% 100%, 0 100%, 4% 50%);
    }

    .diagram-item:nth-child(3) {
        background-color: #9dbfa1;
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 4% 50%, 0 0);
        border-radius: 0px 10px 10px 0px;
    }

    .diagram-item .title-chi {
        font-size: 22px;
        line-height: 37px;
        font-weight: bold;
    }

    .diagram-item .title-eng {
        font-size: 18px;
        line-height: 37px;
        font-weight: bold;
    }

    .diagram-item .details {
        line-height: 27px;
        color: #FFF;
    }

.info-item {
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
}

.info-item-section {
    width: 325px;
}

    .info-item-section .section-name {
        width: 300px;
        background-color: #EEEEEE;
        border-left: 2px solid #26698F;
        padding: 6px 15px;
        font-size: 28px;
        color: #26698F;
    }

.info-item-content {
    width: calc(100% - 325px);
    padding-bottom: 50px;
    border-bottom: 1px solid #d8d8d8;
}

    .info-item-content .section-content {
        font-size: 20px;
        line-height: 37px;
        font-weight: bold;
    }



.latest-news-event {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 150px;
}

.latest-new-event-image-contain {
    max-width: 50%;
}


.latest-new-event-image {
    width: calc(100% - 40px);
    margin-left: auto;
    box-shadow: -40px 35px 0px 0px #26698F;
}

.latest-new-event-details {
    width: 50%;
    padding: 0px 35px;
}


    .latest-new-event-details .date {
        font-size: 14px;
        line-height: 20px;
        color: #535353;
        margin-bottom: 10px;
    }

    .latest-new-event-details .title {
        font-size: 30px;
        line-height: 40px;
        font-weight: bold;
        margin-bottom: 15px;
        color: #000;
    }

    .latest-new-event-details .content {
        line-height: 30px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        color: #000;
    }

.news-event-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 40px;
}

ul.pagination {
    justify-content: center;
    margin-top: 50px;
    --bs-pagination-color: #666666;
    --bs-pagination-border-color: none;
    --bs-pagination-hover-color: #26698F;
    --bs-pagination-hover-bg: unset;
    --bs-pagination-hover-border-color: unset;
    --bs-pagination-font-size: 20px;
    --bs-pagination-disabled-bg: unset;
    --bs-pagination-disabled-border-color: unset;
}

.active > .page-link, .page-link.active {
    color: #26698F;
    font-weight: bold;
    background-color: unset;
    border-color: unset;
}

.new-event-item {
    width: calc(50% - 10px);
}

.new-event-image-contain {
    aspect-ratio: 16/9;
    overflow: hidden;
    width: calc(100% - 22px);
    box-shadow: 22px 22px 0px 0px #F5F5F5;
    margin-bottom: 30px;
}

.new-event-details .date {
    font-size: 14px;
    line-height: 20px;
    color: #535353;
    margin-bottom: 10px;
}

.new-event-details .title {
    font-size: 30px;
    line-height: 40px;
    font-weight: bold;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #000;
}

.new-event-details .content {
    line-height: 30px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: #000;
}

.new-event-date {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 20px;
}

.new-event-title {
    font-size: 30px;
    line-height: 40px;
    font-weight: bold;
    margin-bottom: 40px;
}

.new-event-image .image-name {
    font-size: 14px;
}

.new-event-image .image-num {
    font-size: 14px;
}

.new-event-content {
    margin: 60px 0px;
    font-size: 18px;
    line-height: 37px;
}

.gallery-img-detail {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.senior-member-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 40px;
    margin-bottom: 80px;
}

.senior-member-item {
    width: 25%;
    padding: 0px 5px;
}

    .senior-member-item > div {
        margin: 0px auto;
        text-align: center;
        color: #197B7B;
        max-width: 220px;
    }

    .senior-member-item .image {
        max-width: 238px;
        aspect-ratio: 0.9482;
        overflow: hidden;
    }

    .senior-member-item .name {
        font-size: 24px;
        margin: 10px auto;
    }

    .senior-member-item .industry {
        font-size: 14px;
    }

.senior-member-attachement {
    max-width: 530px;
    margin: auto;
    background-color: #26698F;
}

    .senior-member-attachement a {
        color: #fff;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        padding: 30px;
        place-items: center;
    }

    .senior-member-attachement .image-contin {
        max-width: 50px;
        margin-right: 20px;
    }

    .senior-member-attachement .text-chi {
        font-size: 28px;
    }



.honorary-academician-introduction-contain {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 150px;
}

.honorary-academician-introduction {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
}

    .honorary-academician-introduction .introduction {
        font-size: 18px;
        line-height: 37px;
        color: #535353;
    }

.honorary-academician-introduction-image {
    max-width: 505px;
    height: 100%;
    width: 100%;
}

.honorary-academician-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 40px;
    margin-bottom: 80px;
}

.honorary-academician-item {
    width: 25%;
    padding: 0px 5px;
}

    .honorary-academician-item > div {
        margin: 0px auto;
        text-align: center;
        color: #197B7B;
        max-width: 220px;
    }

    .honorary-academician-item .image {
        max-width: 238px;
        aspect-ratio: 0.9482;
        overflow: hidden;
    }

    .honorary-academician-item .name {
        font-size: 24px;
        margin: 10px auto;
    }

    .honorary-academician-item .industry {
        font-size: 14px;
    }

    .honorary-academician-item .attachement {
        font-size: 14px;
        font-weight: 600;
        text-decoration: underline;
        padding-top: 10px;
    }

        .honorary-academician-item .attachement a {
            color: #336C6E;
        }

.honorary-academician-attachement {
    max-width: 530px;
    width: 100%;
    margin-top: 20px;
    background-color: #26698F;
}

    .honorary-academician-attachement a {
        color: #fff;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        padding: 20px;
        place-items: center;
    }

    .honorary-academician-attachement .image-contin {
        max-width: 50px;
        margin-right: 20px;
    }

    .honorary-academician-attachement .year {
        font-size: 28px;
    }

    .honorary-academician-attachement .text-chi {
        font-size: 28px;
    }

.member-list-remind {
    margin: 20px 0px;
}

@media screen and (min-width: 1440px) {
    .home-aboutus-image {
        right: -100%;
    }
}

@media screen and (max-width: 1280px) {
    .head-banner-title .chi.with-person-name {
        font-size: 32px;
    }

    .msg-current-president-content .content {
        max-width: 600px;
        margin: 0px auto 0px 45px;
    }

    .msg-current-president-image {
        max-width: 400px;
        right: 0;
    }

    .header-cover-contain {
        position: unset;
    }

    .header-videocover {
        width: 100%
    }

    .header-splide-content-contain {
        position: unset;
    }

    .header-splide-more-contain {
        bottom: -50px;
    }


}

@media screen and (max-width: 1120px) {
    .msg-current-president-content .content {
        max-width: 500px;
        margin: 0px auto 0px 45px;
    }
}

@media screen and (min-width: 1024px) {
    #header-navigation input,
    .mobile-nav-btn {
        display: none;
    }

    .extend-nav:hover .extended-subnav {
        display: flex;
        animation: zto 1s 1;
    }

    .normal-nav a:hover {
        color: #228373;
        font-weight: bold;
    }

    .extend-nav-btn:hover {
        color: #228373;
        font-weight: bold;
    }
}

@media screen and (max-width: 1024px) {
    .powered-by {
        margin-left: 0;
        width: 100%;
    }
    .ex-grid-text {
        -webkit-writing-mode: unset;
        writing-mode: unset;
    }

    .home-newsevent-section {
        margin-bottom: 170px;
    }

    .home-newsevent-listing {
        width: 100%;
        overflow: auto;
        padding: 0;
    }

        .home-newsevent-listing::-webkit-scrollbar {
            height: 6px;
        }

        .home-newsevent-listing::-webkit-scrollbar-track {
            background: #e0e0e0;
        }

        .home-newsevent-listing::-webkit-scrollbar-thumb {
            background: #4493a2;
        }

    .home-newsevent-listingitem {
        min-width: 248px;
    }

    #newsevent.ex-grid {
        top: unset;
        bottom: -66px;
    }

    #newsevent .ex-grid-text {
        top: unset;
        bottom: 10px;
    }

    .home-brand-award {
        flex-wrap: wrap;
        width: 100%;
    }

    .home-brand-award-img-contain {
        width: 100%;
        margin-bottom: 20px;
        padding: 0px 15px;
    }

    .home-brand-award-content {
        width: 100%;
        padding: 0px;
    }

        .home-brand-award-content .date {
            padding: 0px 15px;
        }

        .home-brand-award-content .title {
            font-size: 20px;
            margin: 20px 0px;
            padding: 0px 15px;
            max-width: 100%;
        }

        .home-brand-award-content .content {
            background-color: #4493a2;
            max-width: 100%;
            padding: 15px 15px 70px;
        }

    #brandaward.ex-grid {
        top: unset;
        bottom: 25px;
        z-index: 100;
        height: 24px;
    }

        #brandaward.ex-grid img {
            display: none;
        }

    .home-commerce-member-section {
        padding: 0px 20px;
    }

    .commerce-new-member {
        flex-wrap: wrap;
    }

    .commerce-new-member-img-contain {
        width: 100%;
    }

    .commerce-new-member-content {
        width: 100%;
        margin: 25px 0px;
        padding: 0px;
    }

    .commerce-member-col-item {
        width: 94%;
    }

    .home-chairman-section {
        padding: 0px 25px;
    }

    .home-chairman {
        flex-wrap: wrap;
    }

    .home-chairman-image-contain {
        max-width: 100%;
        height: 100%;
        margin-right: 10%;
        aspect-ratio: 1.6;
    }

    .home-chairman-content {
        max-width: 100%;
        padding: 0px 15px;
    }

    #chairman.ex-grid {
        margin-top: 20px;
    }

    .ex-grid-arrow {
        margin: auto;
    }

    .home-aboutus-contain {
        margin-bottom: 50px;
    }

    .home-aboutus {
        max-width: 100%;
        padding: 70px 20px;
        overflow: hidden;
    }

    .home-aboutus-content {
        width: 100%;
    }

    .home-aboutus-name {
        font-size: 28px;
    }

    .home-aboutus-title {
        font-size: 40px;
        line-height: 52px;
    }

    .home-aboutus-deatils {
        font-size: 18px;
    }

    .home-aboutus-image {
        max-width: 100%;
        height: 100%;
        aspect-ratio: 1.4;
        position: unset;
        overflow: hidden;
        transform: translateX(20%) skewX(-4deg);
        margin-bottom: 33px;
    }

    #aboutus.ex-grid {
        width: 80%;
        height: 80px;
        bottom: -50px;
        z-index: 1;
    }

    #aboutus .ex-grid-text {
        top: 65%;
    }


    .learn-more-sub {
        font-size: 8px;
        line-height: 12px;
    }

    .learn-more-name {
        font-size: 21px;
        line-height: 31px;
    }

    .header-splide-title p {
        padding-left: 0px !important;
    }

    .header-splide-content {
        font-size: 14px;
        line-height: 20px;
        max-width: unset;
    }

    .header-splide-title {
        font-size: 29px;
        line-height: 55px;
    }

    .normal-nav {
        padding: 25px 40px;
        text-align: left;
        font-size: 24px;
        border-bottom: 1px solid #408eab;
    }

        .normal-nav a,
        .normal-nav a:visited {
            color: #fff;
        }

    .extend-nav-btn {
        width: 100%;
        font-size: 24px;
        text-align: left;
        color: #fff;
        padding: 25px 40px !important;
    }

    .extend-nav {
        border-bottom: 1px solid #408eab;
    }

    .extended-subnav {
        max-width: 100%;
        flex-direction: column;
        background: none;
        position: unset;
        padding: 0px;
        min-height: 0px;
    }

    .extended-subnav-title {
        display: none;
    }

    .extended-subnav-nav {
        width: 100%;
    }

        .extended-subnav-nav .subnav {
            width: 100%;
            padding: 12px 0px 12px 70px;
            text-align: start;
        }

            .extended-subnav-nav .subnav::after {
                margin: auto;
                width: 100%;
            }

            .extended-subnav-nav .subnav:is(:last-child)::after {
                border: unset;
            }

    .normal-nav.mobile {
        display: block;
    }

    .header-contactus {
        display: none;
    }

    .header-nav {
        display: none;
        margin: 0;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100px;
        z-index: 100;
        background-color: #00688f;
        height: 0vh;
        overflow: auto;
        padding: 20px 0px;
    }

    .header-logo {
        top: 0px;
        left: 20px;
    }

    #header-navigation {
        margin: 20px auto;
        display: block;
        z-index: 2;
        user-select: none;
        text-align: center;
        position: relative;
        height: 100px;
        z-index: 200;
    }

        #header-navigation input {
            display: block;
            width: 49px;
            height: 32px;
            position: absolute;
            cursor: pointer;
            opacity: 0;
            z-index: 2;
            right: 31px;
            top: 24px;
        }

        #header-navigation .mobile-nav-btn span:first-child {
            transform-origin: 0% 0%;
        }

        #header-navigation .mobile-nav-btn span:nth-last-child(2) {
            transform-origin: 0% 100%;
        }

        #header-navigation input:checked ~ .mobile-nav-btn span {
            opacity: 1;
            background: #232323;
            /*transform: rotate(45deg) translate(-2px, -1px);*/
        }

        #header-navigation input:checked ~ .header-nav {
            display: flex;
            animation: htzto85vh 0.5s 1;
            height: 85vh;
        }

    .head-banner-contain {
        flex-wrap: wrap;
    }

    .head-banner-title {
        max-width: 100%;
        margin-bottom: 10px;
        text-align: center;
        padding: 0;
    }

    .banner-img-contain {
        max-width: 100%;
        transform: unset;
    }

    .banner-img {
        transform: unset;
    }

    .contact-us-section {
        flex-wrap: wrap;
    }

    .contact-us-details {
        width: 100%;
    }

    .map-embed {
        width: 100%;
    }

    .web-path {
        margin: 0px 15px;
    }

    .latest-award-content-main {
        flex-wrap: wrap;
    }

    .latest-award-content {
        width: 100%;
    }

    .latest-award-image {
        width: 100%;
    }

    .pass-award-content {
        flex-wrap: wrap;
    }

    .past-award-item {
        width: 100%;
    }

    .academician-plan-list {
        flex-wrap: wrap;
    }

    .academician-plan-item {
        width: calc(50% - 10px);
        margin: auto;
    }

    .president-emeritus-item {
        width: 50%;
    }

    .head-banner-title .chi.with-person-name {
        font-size: 40px;
    }

    .forever-honorary-president-section {
        flex-wrap: wrap;
        justify-content: center;
    }

    .founding-president-container {
        flex-wrap: wrap;
        justify-content: center;
    }

    .founding-president {
        width: 100%;
        text-align: center;
    }

    .founding-president .name {
        font-size: 20px;
        line-height: 30px;
    }


    .forever-honorary-president {
        width: 100%;
        text-align: center;
    }

    .forever-honorary-president-image {
        transform: skewX(0deg);
    }

        .forever-honorary-president-image img {
            transform: skewX(0deg) translateX(-10%);
        }

    .forever-honorary-president .name {
        font-size: 20px;
        line-height: 30px;
    }

    .msg-current-president-content .content {
        max-width: 100%;
        margin: 0px 45px 0px 45px;
        padding-bottom: 20px;
    }

    .msg-current-president-image {
        max-width: 456px;
        position: relative;
        margin: auto;
    }

    .msg-current-president-content {
        padding: 50px 0px;
    }

    .executive-committee-position {
        width: 100%;
        font-size: 28px;
    }

    .executive-committee-item {
        flex-wrap: wrap;
    }

    .executive-committee-member-list {
        width: 100%;
    }

    .committee-member-details {
        width: calc(50% - 20px);
    }

    .purpose-image {
        width: 100%;
        min-height: 456px;
    }

    .purpose-list {
        width: 100%;
        padding: 25px;
    }

    .image-contain {
        float: unset;
        padding-left: 0px;
        max-width: 575px;
        margin: auto
    }

    .introduction-content .content-text {
        max-width: 100%;
    }

    .introduction-content-contain {
        display: flex;
        flex-wrap: wrap-reverse;
    }

    .introduction-content {
        padding-bottom: 60px;
    }

    .criteria-content {
        width: 100%;
        padding: 10px 10px 50px;
    }

    .criteria-section {
        width: 100%;
    }

    .corporate-member-item {
        width: calc(50% - 10px);
    }

    .new-corporate-member-card {
        width: 100%;
        margin-bottom: 20px;
    }

    .new-corporate-member-details {
        width: 100%;
        min-height: 325px;
    }

    .new-corporate-member-name-chi {
        font-size: 24px;
    }

    .commerce-member-item {
        width: calc(50% - 10px);
    }

    .new-commerce-member-card {
        width: 100%;
        margin-bottom: 20px;
    }

    .new-commerce-member-details {
        width: 100%;
        min-height: 325px;
    }

    .new-commerce-member-name-chi {
        font-size: 24px;
    }

    .lsapp-diagram-step {
        max-width: 500px;
        margin: auto;
    }


    .diagram-item {
        width: 100%;
    }

        .diagram-item:nth-child(1) {
            border-radius: 10px 10px 0px 0px;
            clip-path: polygon(100% 0, 100% 96%, 50% 100%, 0 96%, 0 0);
        }

        .diagram-item:nth-child(2) {
            clip-path: polygon(0 0, 50% 4%, 100% 0, 100% 96%, 50% 100%, 0 96%);
        }

        .diagram-item:nth-child(3) {
            border-radius: 0px 0px 10px 10px;
            clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 50% 4%);
        }

    .info-item-section {
        width: 100%;
        margin-bottom: 20px;
    }

    .info-item-content {
        width: 100%;
    }

    .lsapp-description {
        width: 100%;
        margin-bottom: 30px;
    }

    .lsapp-image {
        width: 100%;
        transform: unset;
        max-width: 600px;
        margin: auto;
    }

        .lsapp-image img {
            transform: unset;
            height: auto;
            width: 100%;
        }


    .latest-new-event-details .title {
        font-size: 20px;
        line-height: 30px;
    }

    .new-event-details .title {
        font-size: 20px;
        line-height: 30px;
    }

    .senior-member-item {
        width: 50%;
    }

    .honorary-academician-introduction {
        width: 100%;
    }

    .honorary-academician-attachement {
        margin: 60px auto 0px;
    }

    .honorary-academician-introduction-contain {
        flex-wrap: wrap-reverse;
    }

    .honorary-academician-introduction-image {
        margin: 0px auto 40px;
    }

    .honorary-academician-item {
        width: 50%;
    }

    .commerce-new-member-name {
        font-size: 16px;
    }

    .commerce-new-member-content .name {
        font-size: 20px;
    }

    .commerce-member-col-name {
        font-size: 16px;
    }

    .commerce-member-col-nav {
        max-width: unset;
        margin: auto 0px 20px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        gap: 0;
    }

    .home-chairman-title {
        font-size: 40px;
    }

    .introduction-title-ch {
        font-size: 32px;
    }

    .contact-us-details .fullname {
        font-size: 22px;
    }

    .contact-us-details {
        font-size: 16px;
    }

    .past-award-item .title {
        font-size: 20px;
    }

    .header-logo {
        max-width:200px;
    }
}

@media screen and (max-width: 768px) {
    .latest-new-event-image-contain {
        max-width: 100%;
        margin-bottom: 50px;
    }

    .latest-new-event-image {
        width: calc(100% - 25px);
        box-shadow: -25px 20px 0px 0px #26698F;
    }

    .latest-new-event-details {
        width: 100%;
    }
}

@media screen and (max-width: 498px) {
    .home-aboutus-image {
        max-width: 100%;
        height: auto;
        aspect-ratio: 1.4;
        top: 320px;
        right: -10%;
    }

    .msg-current-president-image {
        max-width: 300px;
    }

    .executive-committee-member-list {
        gap: 10px;
    }


    .committee-member-details {
        width: calc(50% - 10px);
    }

        .committee-member-details .name {
            font-size: 20px;
        }

        .committee-member-details .company {
            font-size: 16px;
        }

    .corporate-member-item {
        width: 100%;
    }

    .commerce-member-item {
        width: 100%;
    }

    .news-event-list {
        column-gap: 0px;
    }

    .new-event-item {
        width: 100%;
    }

    .latest-new-event-image-contain {
        width: 100%;
    }

    .latest-new-event-details {
        width: 100%;
        padding: 0px;
    }

    .new-event-item {
        height: auto;
    }

    .academician-plan-file .title {
        font-size: 14px;
    }

    .commerce-member-col-item {
        height: 400px;
    }

    .banner-img-contain {
        height: 105px;
    }

    .latest-news-event {
        margin-bottom: 40px;
    }
}
/*===================splide===================*/
.splide__pagination__page.is-active {
    background: #26698f;
}

.splide__arrow {
    background: unset;
}

.commerce-member-splide .splide__pagination {
    bottom: -50px;
}

.banner-splide {
    position: relative;
    z-index: 0;
}

    .banner-splide .splide__arrows {
        display: none;
    }

.banner-splide {
    max-width: 71%;
    aspect-ratio: 16/9;
    margin-left: auto;
}

    .banner-splide .splide__pagination {
        max-width: 600px;
        width: 100%;
        bottom: 10px;
        display: flex !important;
        justify-content: space-evenly;
        left: unset;
        right: 50%;
        transform: translateX(50%);
    }

        .banner-splide .splide__pagination li {
            width: 30%;
        }

    .banner-splide .splide__pagination__page {
        max-width: 100%;
        width: 100%;
        border-radius: 5px;
        transform: scale(1) !important;
    }

.video-container {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* Assuming a 16:9 aspect ratio, adjust as needed */
    position: relative;
    overflow: hidden;
}

    .video-container video {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
    }

    .video-container .video-cover {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
        z-index: 100;
    }

.gallery-splide .splide__arrow svg {
    fill: #fff;
    width: 32px !important;
    height: 45px !important;
}

.gallery-splide .splide__arrow svg {
    fill: #fff;
    width: 32px !important;
    height: 45px !important;
}

.gallery-splide .splide__arrow {
    opacity: 1;
}

.gallery-splide .splide__pagination {
    display: none;
}

@media screen and (min-width: 1280px) {
    .banner-splide .splide__pagination {
        max-width: 800px;
    }
}

@media screen and (min-width: 1024px) {
    .banner-splide .splide__pagination {
        max-width: 640px;
        right: 0;
        transform: none;
    }
}
@media screen and (max-width:1280px) {
    .banner-splide {
        max-width:100%;
    }
}
/*============================================*/