@charset"utf-8";
@charset "UTF-8";

body#htmlbody{
	padding-top:0;
}

body.-menu-open {
    overflow: hidden;
}

.custom-container {
    width: 100%;
    overflow: hidden;
}

    .custom-container p {
        margin-bottom: 0;
    }

    .custom-container a {
        text-decoration: none;
        transition: color 0.1s;
    }

    .custom-container img {
        max-width: 100%;
    }

.main-container {
    position: relative;
}

    .main-container .pb {
        padding-bottom: 576px;
        background-color: #e8f3f9;
    }

    .main-container:after {
        position: absolute;
        bottom: 0;
        left: 0;
        right: auto;
        top: auto;
        content: "";
        display: block;
        width: 100%;
        height: 1118px;
        background-size: cover;
        background-image: url(###);
        background-position: center bottom;
        bottom: -300px;
        opacity: 0.3;
    }

main {
    position: relative;
    padding: 60px 25px;
    
}

    main:after {
        position: absolute;
        top: 0;
        left: 0;
        right: auto;
        bottom: auto;
        content: "";
        display: block;
        width: 97px;
        height: 1192px;
        top: 10px;
        z-index: 10;
        background-image: url(images/content-left-text.svg);
        background-repeat: no-repeat;
        pointer-events: none;
        z-index: -1;
    }

@media (max-width: 576px) {
    main:after {
        display: none;
    }
}

main > .-container {
    display: flex;
}

@media (min-width: 993px) {
    main > .-container {
        max-width: 1280px;
        margin: 0 auto;
    }
}

section {
    max-width: 1280px;
}

    section .-sec-tit {
        font-size: 28px;
        font-weight: bold;
        color: #4423c0;
    }

.-module-comb-wrap.-module section .-sec-tit {
    font-size: 26px;
}

@media (min-width: 577px) {
    section .-sec-tit {
        font-size: 32px;
    }
}

section .-sec-tit .line {
    width: 48px;
    height: 4px;
    background-color: #4423c0;
    transform: skewX(-45deg);
    margin: 13px 0 30px;
}

@media (min-width: 577px) {
    section .-sec-tit .line {
        margin: 20px 0;
    }
}

.accesskey a {
    position: absolute;
    margin: -12px 0 0 0px;
    padding: 0;
    color: transparent !important;
    font-size: 12px;
    text-decoration: none;
}

/* header 開始 含body的padding-top */
body {
    padding-top: 140px;
}

@media (min-width: 577px) {
    body {
        padding-top: 155px;
    }
}

@media (min-width: 993px) {
    body {
        padding-top: 200px;
    }
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    z-index: 1;
    z-index: 100;
    background-color: #fff;
    width: 100%;
}

/* 後臺管理 開始 */
.control-bar-wrap {
    overflow: auto;
    background-color: #2b2b2b;
}

.control-bar {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 0;
    width: 900px;
}

@media (min-width: 993px) {
    .control-bar {
        width: auto;
    }
}

.control-bar > div {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 5px;
    padding-right: 5px;
    flex-shrink: 0;
}

    .control-bar > div a {
        display: flex;
        align-items: center;
        color: #fff;
        gap: 10px;
        margin: 0 10px;
    }

        .control-bar > div a:hover {
            opacity: 0.8;
        }

    .control-bar > div:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        left: auto;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 60%;
        background-color: #fff;
    }

    .control-bar > div:last-child:after {
        display: none;
    }

/* 後臺管理 結束 */
/* Logo 開始 */
.logo-bar {
    position: relative;
    padding: 20px 0;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    height: auto;
    display: flex;
    align-items: center;
}

    .logo-bar .logo {
        position: relative;
        margin-left: 3.4722222222vw;
        width: 64.2361111111vw;
        z-index: 10;
    }

    /*防止LOGO連結被上面選單覆蓋*/
@media (min-width: 993px) {
    .logo-bar .logo {
        z-index: 1000;
    }
}

@media (min-width: 577px) {
    .logo-bar .logo {
        margin-left: 20px;
        width: 370px;
    }
}

@media (max-width: 1300px) and (min-width: 1100px) {
    .logo-bar .logo {
        width: 280px;
    }
}

@media (max-width: 1100px) and (min-width: 993px) {
    .logo-bar .logo {
        width: 230px;
    }
}

.logo-bar .logo img {
    width: 100%;
}

/* Logo 結束 */
/* 漢堡選單 開始 */
.menu-toggle-btn {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 3.4722222222vw;
    width: 5.2083333333vw;
    height: 100%;
    display: flex;
    align-items: center;
}

@media (min-width: 577px) {
    .menu-toggle-btn {
        width: 30px;
        margin-right: 20px;
    }
}

@media (min-width: 993px) {
    .menu-toggle-btn {
        display: none;
    }
}

.menu-toggle-btn > div {
    position: relative;
    width: 100%;
    height: 4.1666666667vw;
    cursor: pointer;
}

@media (min-width: 577px) {
    .menu-toggle-btn > div {
        height: 24px;
    }
}

.menu-toggle-btn > div > span {
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    background-color: #4423c0;
    border-radius: 1000px;
    transition: top 0.3s, transform 0.3s 0.3s, width 0.3s;
}

    .menu-toggle-btn > div > span:nth-child(1) {
        top: 0%;
        width: 100%;
    }

    .menu-toggle-btn > div > span:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
        width: 70.4545454545%;
    }

    .menu-toggle-btn > div > span:nth-child(3) {
        top: 100%;
        transform: translateY(-100%);
        width: 88.6363636364%;
    }

.menu-toggle-btn.-active span:nth-child(1) {
    top: 50%;
    transform: translateY(0) rotate(45deg);
    width: 100%;
}

.menu-toggle-btn.-active span:nth-child(2) {
    top: 50%;
    width: 0%;
}

.menu-toggle-btn.-active span:nth-child(3) {
    top: 50%;
    transform: translateY(0) rotate(-45deg);
    width: 100%;
}

.menu-toggle-btn.-ani-active span {
    transition: transform 0.3s, top 0.3s 0.3s, width 0.3s;
}

/* 漢堡選單 結束 */
.nav-bar-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    z-index: 1;
    width: 100%;
    height: 100vh;
    background-color: #4423c0;
    padding: 4.3402777778vw;
    overflow: auto;
    display: none;
    z-index: 100;
}

@media (min-width: 577px) {
    .nav-bar-wrap {
        padding: 25px;
    }
}

@media (min-width: 993px) {
    .nav-bar-wrap {
        position: relative;
        display: block;
        padding: 20px 0;
        height: auto;
        top: auto;
        overflow: visible;
    }
}

.nav-bar-wrap.-active {
    display: block;
}

.nav-bar-wrap .close {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
    top: 4.3402777778vw;
    right: 4.3402777778vw;
    width: 10.4166666667vw;
    cursor: pointer;
}

    .nav-bar-wrap .close img {
        width: 100%;
    }

@media (min-width: 577px) {
    .nav-bar-wrap .close {
        top: 25px;
        right: 25px;
        width: 60px;
    }
}

@media (min-width: 993px) {
    .nav-bar-wrap .close {
        display: none;
    }
}

/* 右上角選單 開始 */
@media (min-width: 993px) {
    .nav-bar-wrap .quick-bar {
        position: absolute;
        top: 0;
        left: 0;
        right: auto;
        bottom: auto;
        width: 100%;
        height: 50px;
        background-size: auto 100%;
        background-position: top center;
        background-repeat: no-repeat;
        display: flex;
        padding-right: 10px;
        justify-content: flex-end;
    }

        .nav-bar-wrap .quick-bar:after, .nav-bar-wrap  .quick-bar:before{
            content: "";
            display: block;
            position: absolute;
            top: 0;
            width: 700px;
            background-color: #4423c0;
           /* 圓角 */
           border-top-left-radius: 0px;     /* 自訂上圓角 */
           border-bottom-left-radius: 25px;  /* 自訂下圓角 */
        }
        .nav-bar-wrap .quick-bar:before {
            height: 0px;
            left: 0;

        }

        .nav-bar-wrap .quick-bar:after {
            height: 50px;
            right: 0;
        }
}

.nav-bar-wrap .quick-bar .quick {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

@media (min-width: 993px) {
    .nav-bar-wrap .quick-bar .quick {
        justify-content: flex-end;
        align-items: center;
        display: inline-flex;
        z-index: 1;
        flex-wrap: nowrap;
        margin-right: 30px;
    }
}

.nav-bar-wrap .quick-bar .quick a {
    border: 1px solid #fff;
    color: #fff;
    padding: 1.7361111111vw;
    margin-right: 2.6041666667vw;
    margin-bottom: 2.6041666667vw;
    border-radius: 1.0416666667vw;
    font-size: 3.125vw;
}

    .nav-bar-wrap .quick-bar .quick a:hover {
        color: #ffc107;
    }

@media (min-width: 577px) {
    .nav-bar-wrap .quick-bar .quick a {
        padding: 10px;
        margin-right: 15px;
        margin-bottom: 15px;
        border-radius: 6px;
        font-size: 18px;
    }
}

@media (min-width: 993px) {
    .nav-bar-wrap .quick-bar .quick a {
        font-size: 16px;
        padding: 0;
        margin-right: 15px;
        padding-right: 15px;
        margin-bottom: 0;
        border: none;
        border-radius: 0px;
        line-height: 1;
        border-right: 1px solid #fff;
        flex-shrink: 0;
    }

        .nav-bar-wrap .quick-bar .quick a:last-child {
            border-right: none;
            padding-right: 0;
            margin-right: 0;
        }
}

/* 右上角選單 結束 */
/* 搜尋列 開始 */
.search {
    position: relative;
    margin-top: 3.4722222222vw;
}

@media (min-width: 577px) {
    .search {
        margin-top: 20px;
    }
}

@media (min-width: 993px) {
    .search {
        margin-top: 0;
        display: inline-flex;
        z-index: 1;
        height: 100%;
        align-items: center;
    }
}

.search .input-wrap {
    background-color: #fff;
    border-radius: 1000px;
    padding: 2.6041666667vw 8.6805555556vw;
    line-height: 1;
}

@media (min-width: 577px) {
    .search .input-wrap {
        padding: 15px 50px;
    }
}

@media (min-width: 993px) {
    .search .input-wrap {
        padding: 0;
        max-width: 260px;
        flex-grow: 1;
        height: 40px;
    }
}

.search .input-wrap > i {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    left: 3.4722222222vw;
    font-size: 3.125vw;
    color: #757575;
}

@media (min-width: 577px) {
    .search .input-wrap > i {
        left: 20px;
        font-size: 18px;
    }
}

@media (min-width: 993px) {
    .search .input-wrap > i {
        left: 10px;
        font-size: 18px;
    }
}

.search .input-wrap input {
    background: transparent;
    border: none;
    outline: none !important;
    font-size: 3.125vw;
    padding: 0;
    margin: 0;
    line-height: 1;
    display: block;
    width: 100%;
}

@media (min-width: 577px) {
    .search .input-wrap input {
        font-size: 18px;
    }
}

@media (min-width: 993px) {
    .search .input-wrap input {
        font-size: 18px;
        height: 100%;
        padding-left: 2em;
    }
}

/* 搜尋列 結束 */
/* 主選單 開始 */
.nav-bar {
    padding-top: 16.4930555556vw;
}

@media (min-width: 577px) {
    .nav-bar {
        width: 526px;
        margin: 0 auto;
        padding-top: 95px;
    }
}

@media (min-width: 993px) {
    .nav-bar {
        padding-top: 0;
        width: 100%;
    }
}

.nav-bar nav {
    margin-top: 4.3402777778vw;
    color: #fff;
}

@media (min-width: 577px) {
    .nav-bar nav {
        margin-top: 25px;
    }
}

@media (min-width: 993px) {
    .nav-bar nav {
        margin-top: 0;
    }
}

.nav-bar nav a {
    color: #fff;
}

.nav-bar nav > ul {
    padding: 0;
    list-style-type: none;
}

@media (min-width: 993px) {
    .nav-bar nav > ul {
        display: flex;
        margin-bottom: 0;
        justify-content: center;
        align-items: center;
    }
}

.nav-bar nav > ul > li {
    margin: 3.4722222222vw 0 1.7361111111vw;
}

@media (min-width: 577px) {
    .nav-bar nav > ul > li {
        margin: 20px 0 10px;
    }
}

@media (min-width: 993px) {
    .nav-bar nav > ul > li {
        margin: 0 5px;
        padding-right: 10px;
        border-right: 1px solid #fff;
        line-height: 1;
    }

        .nav-bar nav > ul > li:last-child {
            border-right: none;
            padding-right: 0;
        }
}

@media (min-width: 1280px) {
    .nav-bar nav > ul > li {
        margin: 0 10px;
        padding-right: 20px;
    }
}

.nav-bar .main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 5.5555555556vw;
    cursor: pointer;
    flex-wrap: wrap;
}

    .nav-bar .main-nav > a {
        z-index: 1;
    }

@media (min-width: 577px) {
    .nav-bar .main-nav {
        font-size: 32px;
    }
}

@media (min-width: 993px) {
    .nav-bar .main-nav {
        font-size: 16px;
        position: relative;
    }
}

.nav-bar .main-nav img {
    width: 5.5555555556vw;
    transition: transform 0.3s;
}

@media (min-width: 577px) {
    .nav-bar .main-nav img {
        width: 32px;
    }
}

@media (min-width: 993px) {
    .nav-bar .main-nav img {
        width: 16px;
        margin-left: 5px;
    }
}

.nav-bar .main-nav.-hide img {
    transform: rotate(180deg);
}

@media (min-width: 993px) {
    .nav-bar .main-nav.-hide img {
        transform: none;
    }
}

.nav-bar .main-nav.-hide .sub-nav {
    display: none;
}

.nav-bar .main-nav:hover > a,
.nav-bar .main-nav:hover > p {
    color: #ffc107;
}

@media (min-width: 993px) {
    .nav-bar .main-nav:hover .sub-nav-wrap .sub-nav {
        display: block;
    }
}

.nav-bar .sub-nav-wrap {
    width: 100%;
}

@media (min-width: 993px) {
    .nav-bar .sub-nav-wrap {
        position: absolute;
        padding-top: 50px;
        width: 100%;
        top: 0px;
    }
}

.nav-bar .sub-nav-wrap .sub-nav {
    position: relative;
    font-size: 3.8194444444vw;
    padding: 1.7361111111vw 0;
    margin-top: 1.7361111111vw;
}

@media (min-width: 577px) {
    .nav-bar .sub-nav-wrap .sub-nav {
        font-size: 22px;
        padding: 10px 0;
        margin-top: 10px;
    }
}

@media (min-width: 993px) {
    .nav-bar .sub-nav-wrap .sub-nav {
        display: none;
        box-shadow: 0 0 15px #2b2b2b;
        top: auto;
        left: auto;
        margin: 0;
        padding: 5px;
        border-radius: 8px;
        background-color: #fff;
        width: 200px;
    }
}

.nav-bar .sub-nav-wrap .sub-nav ul {
    list-style-type: none;
    padding-left: 6.9444444444vw;
}

@media (min-width: 577px) {
    .nav-bar .sub-nav-wrap .sub-nav ul {
        padding-left: 40px;
    }
}

@media (min-width: 993px) {
    .nav-bar .sub-nav-wrap .sub-nav ul {
        padding: 0;
    }
}

@media (min-width: 993px) {
    .nav-bar .sub-nav-wrap .sub-nav ul li {
        padding: 3px 10px;
        margin-bottom: 13px;
    }

        .nav-bar .sub-nav-wrap .sub-nav ul li a {
            color: #000;
            font-size: 14px;
            display: block;
            line-height: 1.5;
        }

        .nav-bar .sub-nav-wrap .sub-nav ul li:last-child {
            margin-bottom: 0;
        }

        .nav-bar .sub-nav-wrap .sub-nav ul li:hover {
            background-color: #e0492d;
            border-radius: 8px;
        }

            .nav-bar .sub-nav-wrap .sub-nav ul li:hover a {
                color: #fff;
            }
}

@media (max-width: 576px) {
    .nav-bar .sub-nav-wrap .sub-nav ul li a:hover {
        color: #ffc107;
    }
}

.nav-bar .sub-nav-wrap .sub-nav .line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2.7777777778vw;
    width: 1px;
    background-color: #a3b1bb;
}

@media (min-width: 577px) {
    .nav-bar .sub-nav-wrap .sub-nav .line {
        left: 16px;
    }
}

@media (min-width: 993px) {
    .nav-bar .sub-nav-wrap .sub-nav .line {
        display: none;
    }
}

.nav-bar .sub-nav-wrap .sub-nav .line:after, .nav-bar .sub-nav-wrap .sub-nav .line:before {
    content: "";
    display: block;
    position: absolute;
    width: 1.7361111111vw;
    height: 1.7361111111vw;
    background-color: #a3b1bb;
    border-radius: 50%;
    left: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.nav-bar .sub-nav-wrap .sub-nav .line:before {
    top: 0;
}

.nav-bar .sub-nav-wrap .sub-nav .line:after {
    bottom: 0;
}

.nav-bar .grand-sub-nav {
    margin: 1.7361111111vw 0;
    padding-left: 1em;
}

@media (min-width: 577px) {
    .nav-bar .grand-sub-nav {
        margin: 10px 0;
    }
}

@media (min-width: 993px) {
    .nav-bar .grand-sub-nav {
        display: none;
    }
}

.nav-bar .grand-sub-nav li {
    position: relative;
}

    .nav-bar .grand-sub-nav li:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: auto;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        width: 0.8680555556vw;
        height: 0.8680555556vw;
        background-color: #fff;
        border-radius: 50%;
        left: -0.8em;
    }

/* 主選單 結束 */
/* header 結束 */
/* 頁尾Footer 開始 */
footer {
    margin-top: -576px;
}

    footer .top-container {
        position: relative;
        padding: 90px 25px 90px;
        background-color: #333333;
        border-top-left-radius: 45px;
        border-top-right-radius: 45px;
        background-image: url(https://i.postimg.cc/hvYdj3SV/temp-Image-UDx-T7-A.avif);
        background-size: cover;
        background-position: center center;
        overflow: hidden;
    }

        footer .top-container:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: auto;
            bottom: auto;
            width: 100%;
            height: 100%;
            background-color: #333333;
            opacity: 0.9;
            z-index: 0;
        }

@media (min-width: 993px) {
    footer .top-container {
        border-top-left-radius: 90px;
        border-top-right-radius: 90px;
    }
}

@media (max-width: 480px) {
    footer .top-container {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

footer .top-container .-container {
    position: relative;
    z-index: 2;
}

@media (min-width: 993px) {
    footer .top-container .-container {
        display: flex;
        gap: 20px;
        max-width: 1280px;
        margin: 0 auto;
    }
}

footer .top-container .-container > div {
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(83, 131, 192, 0.2);
    padding-bottom: 30px;
    color: #ffffff;
}

@media (min-width: 993px) {
    footer .top-container .-container > div {
        width: 33.3%;
        border-bottom: none;
    }
}

footer .top-container .-container > div dl dt {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

@media (max-width: 480px) {
    footer .top-container .-container > div dl dt {
        font-size: 18px;
    }
}

@media (min-width: 993px) {
    footer .top-container .-container > div dl dt {
        font-size: 16px;
    }
}

footer .top-container .-container > div dl dd {
    font-size: 22px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

@media (max-width: 480px) {
    footer .top-container .-container > div dl dd {
        font-size: 16px;
        align-items: flex-start;
    }
}

@media (min-width: 993px) {
    footer .top-container .-container > div dl dd {
        font-size: 14px;
    }
}

footer .top-container .-container > div dl dd span {
    color: #a9dbdc;
    font-weight: bold;
}

footer .top-container .-container > div dl dd img {
    margin-right: 16px;
}

@media (min-width: 993px) {
    footer .top-container .-container > div dl dd img {
        margin-right: 12px;
    }
}

footer .top-container .-container > div dl dd:last-child {
    margin-bottom: 0;
}

footer .top-container .-container > div dl:last-child {
    margin-bottom: 0;
}

footer .top-container .-container > div:nth-child(1) p {
    font-size: 32px;
    font-weight: bold;
    margin-top: 30px;
}

@media (max-width: 480px) {
    footer .top-container .-container > div:nth-child(1) p {
        font-size: 24px;
    }
}

@media (min-width: 993px) {
    footer .top-container .-container > div:nth-child(1) p {
        font-size: 24px;
    }
}

@media (min-width: 993px) {
    footer .top-container .-container > div:nth-child(1) {
        font-size: 24px;
        order: 3;
    }
}

@media (min-width: 993px) {
    footer .top-container .-container > div:nth-child(2) {
        order: 1;
    }
}

footer .top-container .-container > div:nth-child(3) {
    margin-bottom: 0;
    border-bottom: none;
    padding: 0;
}

@media (min-width: 993px) {
    footer .top-container .-container > div:nth-child(3) {
        order: 2;
    }
}

footer .bottom-container {
    position: relative;
    background-color: #4423c0;
    padding: 15px 25px;
}

@media (min-width: 993px) {
    footer .bottom-container {
        padding: 20px 40px;
    }
}

footer .bottom-container .-container {
    display: flex;
    flex-wrap: wrap;
}

@media (min-width: 993px) {
    footer .bottom-container .-container {
        justify-content: space-between;
    }
}

footer .bottom-container .-container .lf {
    order: 2;
}

@media (min-width: 993px) {
    footer .bottom-container .-container .lf {
        order: 1;
    }
}

footer .bottom-container .-container .lf a,
footer .bottom-container .-container .lf p {
    color: #fff;
    font-size: 18px;
}

@media (max-width: 480px) {
    footer .bottom-container .-container .lf a,
    footer .bottom-container .-container .lf p {
        font-size: 15px;
    }
}

@media (min-width: 993px) {
    footer .bottom-container .-container .lf a,
    footer .bottom-container .-container .lf p {
        font-size: 15px;
    }
}

footer .bottom-container .-container .lf a {
    padding-bottom: 1px;
    border-bottom: 1px solid #fff;
}

    footer .bottom-container .-container .lf a:hover {
        color: #e0492d;
        border-bottom: 1px solid #e0492d;
    }

footer .bottom-container .-container .rt {
    order: 1;
    display: flex;
    gap: 24px;
    margin-bottom: 15px;
}

@media (min-width: 993px) {
    footer .bottom-container .-container .rt {
        order: 2;
        margin-bottom: 0;
        gap: 12px;
    }
}

@media (min-width: 1080px) {
    footer .bottom-container .-container .rt {
        gap: 24px;
    }
}

footer .bottom-container .-container .rt img {
    width: 32px;
}

@media (max-width: 480px) {
    footer .bottom-container .-container .rt img {
        width: 16px;
    }
}

@media (min-width: 993px) {
    footer .bottom-container .-container .rt img {
        width: 16px;
    }
}

@media (min-width: 1080px) {
    footer .bottom-container .-container .rt img {
        width: 24px;
    }
}

/* 頁尾Footer 結束 */
/* 浮動社群按鈕 開始 */
.fixed-bar {
    position: fixed;
    bottom: 0;
    right: 0;
    top: auto;
    left: auto;
    z-index: 1;
    width: 40px;
    right: 10px;
    bottom: 60px;
    z-index: 98;
}

@media (max-width: 480px) {
    .fixed-bar {
        width: 35px;
    }
}

.fixed-bar > div,
.fixed-bar a {
    display: block;
    margin-bottom: 20px;
    transition: all 0.3s;
    cursor: pointer;
}

@media (max-width: 576px) {
    .fixed-bar > div,
    .fixed-bar a {
        margin-bottom: 5px;
    }
}

.fixed-bar > div:hover,
.fixed-bar a:hover {
    transform: scale(1.2);
}

/* 浮動社群按鈕 結束 */
/* 麵包屑 開始*/
.breadcrumb-wrap {
    position: relative;
    height: 80px;
    border-bottom: 1px solid #f3f4f7;
    padding: 0 25px;
    display: flex;
    align-items: center;
}

@media (min-width: 993px) {
    .breadcrumb-wrap {
        justify-content: center;
    }
}

.breadcrumb-wrap .breadcrumb {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

@media (min-width: 993px) {
    .breadcrumb-wrap .breadcrumb {
        max-width: 1280px;
        width: 100%;
    }
}

.breadcrumb-wrap .breadcrumb a {
    color: #5b5f64;
}

    .breadcrumb-wrap .breadcrumb a:last-child {
        color: #0e1e32;
        border-bottom: 1px solid #0e1e32;
    }

    .breadcrumb-wrap .breadcrumb a:hover {
        color: #e0492d;
    }

        .breadcrumb-wrap .breadcrumb a:hover:last-child {
            border-bottom: 1px solid #e0492d;
        }

.breadcrumb-wrap .breadcrumb .dot {
    width: 4px;
    height: 4px;
    background-color: #0e1e32;
    transform: rotate(45deg);
    margin: 0 15px;
}

    .breadcrumb-wrap .breadcrumb .dot:first-child {
        display: none;
    }

/* 麵包屑 結束*/
/* 次選單 開始*/
.left-side-bar-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    z-index: 1;
    width: 100%;
    background-color: rgba(26, 59, 86, 0.3);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 99;
    overflow: auto;
    transition: all 0.3s;
    overflow-x: hidden;
}

@media (min-width: 993px) {
    .left-side-bar-wrap {
        position: relative;
        background-color: transparent;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        overflow-x: visible;
        overflow: visible;
        width: auto;
        margin-right: 40px;
    }
}

.left-side-bar-wrap .left-side-bar {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
    width: 50%;
    min-width: 300px;
    height: auto;
    min-height: 100%;
    transition: all 0.3s;
    background-color: #fff;
    background-image: url(images/left-sidebar/dot-bg.png);
}

@media (min-width: 993px) {
    .left-side-bar-wrap .left-side-bar {
        position: relative;
        width: 300px;
        background-color: transparent;
    }
}

@media (max-width: 480px) {
    .left-side-bar-wrap .left-side-bar {
        min-width: 250px;
        width: 250px;
    }
}

.left-side-bar-wrap .left-side-bar .-container {
    background-color: #e8f3f9;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 60px;
}

@media (min-width: 993px) {
    .left-side-bar-wrap .left-side-bar .-container {
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
    }
}

@media (max-width: 480px) {
    .left-side-bar-wrap .left-side-bar .-container {
        margin-bottom: 40px;
    }
}

.left-side-bar-wrap .left-side-bar .tit-wrap {
    position: relative;
    padding: 48px 0 26px;
    border-bottom: 1px solid #e2e6e8;
    color: #4423c0;
}

@media (max-width: 480px) {
    .left-side-bar-wrap .left-side-bar .tit-wrap {
        padding: 24px 0 12px;
    }
}

.left-side-bar-wrap .left-side-bar .tit-wrap .tit {
    position: relative;
    border-left: 4px solid #e0492d;
    padding-left: 30px;
}

    .left-side-bar-wrap .left-side-bar .tit-wrap .tit p {
        font-size: 32px;
        font-weight: bold;
    }

@media (max-width: 480px) {
    .left-side-bar-wrap .left-side-bar .tit-wrap .tit p {
        font-size: 24px;
    }
}

.left-side-bar-wrap .left-side-bar .tit-wrap .tit .-btn {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    height: 100%;
    left: -3px;
    padding-right: 4px;
    background-color: #e0492d;
    border-top: 2px solid #e8f3f9;
    border-left: 2px solid #e8f3f9;
    border-bottom: 2px solid #e8f3f9;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    transform: translateX(-100%);
    display: flex;
    align-items: center;
    cursor: pointer;
}

@media (min-width: 993px) {
    .left-side-bar-wrap .left-side-bar .tit-wrap .tit .-btn {
        display: none;
    }
}

.left-side-bar-wrap .left-side-bar .tit-wrap .tit .-btn img {
    width: 24px;
}

@media (max-width: 480px) {
    .left-side-bar-wrap .left-side-bar .tit-wrap .tit .-btn img {
        width: 16px;
    }
}

.left-side-bar-wrap .left-side-bar .tit-wrap .tit .-btn p {
    font-size: 12px;
    color: #fff;
}

.left-side-bar-wrap .left-side-bar .list-wrap {
    padding: 0 15px;
}

    .left-side-bar-wrap .left-side-bar .list-wrap .list ul {
        list-style-type: none;
    }

    .left-side-bar-wrap .left-side-bar .list-wrap .list li,
    .left-side-bar-wrap .left-side-bar .list-wrap .list a,
    .left-side-bar-wrap .left-side-bar .list-wrap .list p {
        color: #0e1e32;
    }

@media (max-width: 480px) {
    .left-side-bar-wrap .left-side-bar .list-wrap .list li,
    .left-side-bar-wrap .left-side-bar .list-wrap .list a,
    .left-side-bar-wrap .left-side-bar .list-wrap .list p {
        font-size: 14px;
    }
}

.left-side-bar-wrap .left-side-bar .list-wrap .list a:hover {
    color: #e0492d;
}

.left-side-bar-wrap .left-side-bar .list-wrap .list > ul {
    padding: 0;
    margin-bottom: 0;
}

    .left-side-bar-wrap .left-side-bar .list-wrap .list > ul > li {
        padding: 10px 0;
        border-bottom: 1px solid #e2e6e8;
    }

        .left-side-bar-wrap .left-side-bar .list-wrap .list > ul > li.-active .main-list {
            font-weight: bold;
        }

            .left-side-bar-wrap .left-side-bar .list-wrap .list > ul > li.-active .main-list:after {
                position: absolute;
                top: 0;
                left: 0;
                right: auto;
                bottom: auto;
                top: 50%;
                transform: translateY(-50%);
                content: "";
                display: block;
                width: 4px;
                height: 4px;
                background-color: #0e1e32;
            }

.left-side-bar-wrap .left-side-bar .list-wrap .list .main-list {
    position: relative;
    padding-left: 1em;
}

.left-side-bar-wrap .left-side-bar .list-wrap .list .sub-list {
    position: relative;
    padding: 5px 0;
    margin: 10px 0;
}

    .left-side-bar-wrap .left-side-bar .list-wrap .list .sub-list .line {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 22px;
        width: 1px;
        background-color: #abbdc9;
    }

        .left-side-bar-wrap .left-side-bar .list-wrap .list .sub-list .line:after, .left-side-bar-wrap .left-side-bar .list-wrap .list .sub-list .line:before {
            content: "";
            display: block;
            position: absolute;
            width: 6px;
            height: 6px;
            background-color: #abbdc9;
            border-radius: 50%;
            left: 50%;
            left: 50%;
            transform: translateX(-50%);
        }

        .left-side-bar-wrap .left-side-bar .list-wrap .list .sub-list .line:before {
            top: 0;
        }

        .left-side-bar-wrap .left-side-bar .list-wrap .list .sub-list .line:after {
            bottom: 0;
        }

.left-side-bar-wrap .left-side-bar > a {
    width: 100%;
    display: block;
    margin-bottom: 10px;
}

    .left-side-bar-wrap .left-side-bar > a img {
        width: 100%;
    }

.left-side-bar-wrap.-hide {
    background-color: rgba(26, 59, 86, 0);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    pointer-events: none;
    overflow: hidden;
}

@media (min-width: 993px) {
    .left-side-bar-wrap.-hide {
        position: relative;
        background-color: transparent;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        overflow-x: visible;
        overflow: visible;
        pointer-events: all;
    }
}

.left-side-bar-wrap.-hide .left-side-bar {
    transform: translateX(100%);
}

@media (min-width: 993px) {
    .left-side-bar-wrap.-hide .left-side-bar {
        transform: none;
    }
}

.left-side-bar-wrap.-hide .left-side-bar .-btn {
    pointer-events: all;
}

/* 次選單 結束*/
/* 輪播圖 開始 */
.gallery-wrap {
    margin: 32px 0 0;
}

    .gallery-wrap .tit {
        position: relative;
        font-size: 28px;
        font-weight: bold;
        color: #4423c0;
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
    }

        .gallery-wrap .tit p {
            position: relative;
        }

            .gallery-wrap .tit p:after, .gallery-wrap .tit p:before {
                content: "";
                display: block;
                width: 164px;
                height: 1px;
                background-color: #000;
            }

            .gallery-wrap .tit p:before {
                position: absolute;
                top: 0;
                left: 0;
                right: auto;
                bottom: auto;
                top: 50%;
                margin-left: -64px;
                transform: translate(-100%, -50%);
                background: linear-gradient(to left, rgb(0, 0, 0), rgba(0, 0, 0, 0));
            }

            .gallery-wrap .tit p:after {
                position: absolute;
                top: 0;
                right: 0;
                left: auto;
                bottom: auto;
                top: 50%;
                margin-right: -64px;
                transform: translate(100%, -50%);
                background: linear-gradient(to right, rgb(0, 0, 0), rgba(0, 0, 0, 0));
            }

    .gallery-wrap .gallery-swiper-frame {
        position: relative;
    }

        .gallery-wrap .gallery-swiper-frame:before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            left: auto;
            bottom: auto;
            width: 200px;
            height: 100%;
            background: linear-gradient(to left, rgb(0, 0, 0), rgba(0, 0, 0, 0));
            z-index: 2;
        }

@media (max-width: 576px) {
    .gallery-wrap .gallery-swiper-frame:before {
        display: none;
    }
}

.gallery-wrap .gallery-swiper-frame:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 200px;
    height: 100%;
    background: linear-gradient(to right, rgb(0, 0, 0), rgba(0, 0, 0, 0));
    z-index: 2;
}

@media (max-width: 576px) {
    .gallery-wrap .gallery-swiper-frame:after {
        display: none;
    }
}

.gallery-wrap .gallery-swiper-frame .swiper-slide {
    position: relative;
    max-width: 364px;
    max-height: 255px;
    min-height: 255px;
    cursor: pointer;
}

    .gallery-wrap .gallery-swiper-frame .swiper-slide img {
        width: 100%;
    }

    .gallery-wrap .gallery-swiper-frame .swiper-slide .img {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .gallery-wrap .gallery-swiper-frame .swiper-slide .mask {
        position: absolute;
        top: 0;
        left: 0;
        right: auto;
        bottom: auto;
        width: 100%;
        height: 100%;
        background-color: rgba(29, 54, 85, 0.72);
        opacity: 0;
        transition: opacity 0.3s;
    }

        .gallery-wrap .gallery-swiper-frame .swiper-slide .mask p {
            position: absolute;
            bottom: 0;
            left: 0;
            right: auto;
            top: auto;
            width: 100%;
            bottom: 16px;
            text-align: center;
            font-size: 16px;
            color: #fff;
        }

    .gallery-wrap .gallery-swiper-frame .swiper-slide:hover .mask {
        opacity: 1;
    }

.gallery-wrap .gallery-swiper-frame .navigation {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    padding: 0 5px;
}

    .gallery-wrap .gallery-swiper-frame .navigation .prev,
    .gallery-wrap .gallery-swiper-frame .navigation .next {
        width: 60px;
        pointer-events: all;
    }

/* 輪播圖 結束 */

/*模組內容 開始*/

.content-wrap {
    /*修正模組內容不足以撐開頁面時造成的頁面坍縮*/
    width: 100%;
}
/*模組內容 結束*/
/* 快速選單 開始 */
.quick-link-wrap {
    background-color: #e8f3f9;
    padding: 60px 25px 30px;
    z-index: 1;
    position: relative;
}

    .quick-link-wrap .quick-link {
        max-width: 1280px;
        display: flex;
        margin: 0 auto;
    }

        .quick-link-wrap .quick-link .tit {
            font-size: 28px;
            width: 28px;
            line-height: 1;
            font-weight: bold;
            color: #4423c0
        }

@media (min-width: 577px) {
    .quick-link-wrap .quick-link .tit {
        width: auto;
        flex-shrink: 0;
    }
}

.quick-link-wrap .quick-link ul {
    margin-left: 30px;
    padding-left: 0;
    list-style-type: none;
}

.quick-link > ul {
    /*修正快速選單項目不足時造成的選單寬度坍縮*/
    width: 100%;
}

@media (min-width: 577px) {
    .quick-link-wrap .quick-link ul {
        display: flex;
        flex-wrap: wrap;
    }
}

@media (min-width: 993px) {
    .quick-link-wrap .quick-link ul {
        margin-left: 80px;
    }
}

.quick-link-wrap .quick-link ul li {
    margin-bottom: 20px;
}

@media (min-width: 577px) {
    .quick-link-wrap .quick-link ul li {
        width: 33.3%;
        padding-right: 20px;
    }
}

@media (min-width: 993px) {
    .quick-link-wrap .quick-link ul li {
        width: 25%;
    }
}

.quick-link-wrap .quick-link ul li a {
    color: #000;
    display: flex;
    align-items: center;
    transition: color 0.3s;
}

    .quick-link-wrap .quick-link ul li a:before {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6.5px 0 6.5px 13px;
        border-color: transparent transparent transparent #000;
        margin-right: 10px;
        transition: border-color 0.3s;
    }

    .quick-link-wrap .quick-link ul li a:hover {
        color: #e0492d;
    }

        .quick-link-wrap .quick-link ul li a:hover:before {
            border-color: transparent transparent transparent #e0492d;
        }

/* 快速選單 結束 */
/* 右區塊 開始 */
.bottom-swiper-wrap {
    padding: 60px 0 80px;
    background-color: #e8f3f9;
    min-height: 100px;
}

@media (min-width: 577px) {
    .bottom-swiper-wrap {
        padding: 60px 25px 80px;
    }
}

.bottom-swiper-wrap .bottom-swiper-frame {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 50px;
}

    .bottom-swiper-wrap .bottom-swiper-frame .swiper-wrapper {
        align-items: center;
    }

    .bottom-swiper-wrap .bottom-swiper-frame .swiper-slide {
        padding: 20px 0;
    }

        .bottom-swiper-wrap .bottom-swiper-frame .swiper-slide a {
            display: block;
        }

            .bottom-swiper-wrap .bottom-swiper-frame .swiper-slide a img {
                width: 100%;
                transition: filter 0.3s;
            }

            .bottom-swiper-wrap .bottom-swiper-frame .swiper-slide a:hover img {
                filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.3));
            }

    .bottom-swiper-wrap .bottom-swiper-frame .swiper-pagination {
        position: absolute;
        bottom: -20px;
        transform: translateY(100%);
    }

        .bottom-swiper-wrap .bottom-swiper-frame .swiper-pagination .swiper-pagination-bullet {
            background-color: #000;
        }

    .bottom-swiper-wrap .bottom-swiper-frame .navigation {
        position: absolute;
        top: 0;
        left: 0;
        right: auto;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        z-index: 10;
        display: flex;
        justify-content: space-between;
        pointer-events: none;
    }

        .bottom-swiper-wrap .bottom-swiper-frame .navigation .prev,
        .bottom-swiper-wrap .bottom-swiper-frame .navigation .next {
            pointer-events: all;
        }

/* 右區塊 結束 */ /*# sourceMappingURL=public.css.map */

/*樣板配置 開始*/
.listcss{margin:auto;color:#666;line-height:20px;letter-spacing:1px;font-size:12px} 
.listcss-content{float:left;width:235px;text-align:center;padding:20px 5px 10px 5px;}
.listcss-top{}
.listcss-inner{}
.listcss-img{border:#aaa solid 1px;width:200px; height:200px;}
.listcss-img:hover{border:#333 solid 1px;}
.listcss-btn{}
.UpdateBtnDiv{clear:both;width:100%; text-align :center;}
/*樣板配置 結束*/